update playground to link to versioned hibiki js (easier testing/depl…

…oyment)

playground/index.html

@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=1200">
  <title>Hibiki HTML Playground</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
- <script src="https://cdn.hibikihtml.com/hibiki/latest/hibiki-prod.min.js"></script>
+ <script src="https://cdn.hibikihtml.com/hibiki/v0.3.0/hibiki-prod.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="/playground.css">

playground/tutorial/index.html

@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=1200">
  <title>Hibiki HTML Tutorial</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
- <script src="https://cdn.hibikihtml.com/hibiki/latest/hibiki-prod.min.js"></script>
+ <script src="https://cdn.hibikihtml.com/hibiki/v0.3.0/hibiki-prod.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="/playground.css">

static/libs/bulma.html

@@ -1,14 +1,18 @@
 <define-library name="@hibiki/bulma" hibikiversion="v0.3.0">
+ <hibiki-content tag="hibiki/bulma"></hibiki-content>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"></link>
+
  <define-component name="button">
  <div class="control" unwrap="!$args.control" automerge="control">
  <button component="*$args.buttoncomponent" class="button" automerge click.handler="fire->click()">
  <span if="$args.icon" class="icon" automerge="icon"><i class="*$args.icon"></i></span>
- <h-fragment if="!!$args.icon && @children.size">
+ <h-fragment if="($args.icon || $args.righticon) && @children.size">
  <span><h-children bind="@children"></h-children></span>
  </h-fragment>
- <h-fragment if="!$args.icon">
+ <h-fragment if="!($args.icon || $args.righticon)">
  <h-children bind="@children"></h-children>
  </h-fragment>
+ <span if="$args.righticon" class="icon" automerge="icon"><i class="*$args.righticon"></i></span>
  </button>
  </div>
  </define-component>
@@ -47,7 +51,7 @@
  </figure>
  </define-component>
 
- <define-component name="notification" defaults="show = true;">
+ <define-component name="notification" componentdata="show = true;">
  <define-vars>
  @show = raw($args.show) ?? ref($c.show);
  </define-vars>
@@ -100,9 +104,9 @@
 
  <!-- inside of a modal, bulma uses different class names for cards -->
  <define-component name="card">
- <div class="* (@modal ? 'modal-card' : 'card')" automerge>
- <div class="* (@modal ? 'modal-card-head' : 'card-header')" if="@children.byslot['header'].size || $args.title" automerge="header">
- <p if="$args.title" class="* (@modal ? 'modal-card-title' : 'card-header-title')">
+ <div class="* ($args.modal ? 'modal-card' : 'card')" automerge>
+ <div class="* ($args.modal ? 'modal-card-head' : 'card-header')" if="@children.byslot['header'].size || $args.title" automerge="header">
+ <p if="$args.title" class="* ($args.modal ? 'modal-card-title' : 'card-header-title')">
  {{ $args.title }}
  </p>
  <h-children bind="@children.byslot['header']"></h-children>
@@ -111,10 +115,10 @@
  <div class="card-image" if="@children.byslot['image'].size" automerge="image">
  <h-children bind="@children.byslot['image']"></h-children>
  </div>
- <div class="* (@modal ? 'modal-card-body' : 'card-content')" if="@children.noslot.size" automerge="content">
+ <div class="* ($args.modal ? 'modal-card-body' : 'card-content')" if="@children.noslot.size" automerge="content">
  <h-children bind="@children.noslot"></h-children>
  </div>
- <div class="* (@modal ? 'modal-card-foot' : 'card-footer')" if="@children.byslot['footer'].size || @children.byslot['footer-item'].size" automerge="footer">
+ <div class="* ($args.modal ? 'modal-card-foot' : 'card-footer')" if="@children.byslot['footer'].size || @children.byslot['footer-item'].size" automerge="footer">
  <h-children bind="@children.byslot['footer']"></h-children>
  <h-fragment foreach="@elem in @children.byslot['footer-item'].byindex">
  <h-children inject:class="card-footer-item" bind="@elem"></h-children>
@@ -132,31 +136,29 @@
  <div class="dropdown" automerge class.is-active="* @active" active="*@active" hibiki-mark>
  <div class="dropdown-trigger">
  <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" click.handler="log('menu-click'); @active = !@active">
- <h-if condition="@activechildren.size">
- <h-children bind="@activechildren.first" datacontext="@label=true"></h-children>
- </h-if>
- <h-if condition="[email protected]">
+ <h-children if="@activechildren.size" bind="@activechildren.first" inject:mode="label"></h-children>
+ <h-fragment if="[email protected]">
  <span if="$args.label">{{ $args.label }}</span>
  <h-children bind="@children.byslot['label']"></h-children>
- </h-if>
+ </h-fragment>
  <span if="!$args.noicon" class="icon is-small">
  <i class="* $args.icon ?? 'fa fa-angle-down'" aria-hidden="true"></i>
  </span>
  </button>
  </div>
  <div class="dropdown-menu">
  <div class="dropdown-content">
- <h-children bind="@children.noslot" inject:click.handler="@active = false; @curvalue = @node.attrs.value;" datacontext="@dropdown=true;"></h-children>
+ <h-children bind="@children.noslot" inject:click.handler="@active = false; @curvalue = @node.attrs.value;" inject:mode="dropdown"></h-children>
  </div>
  </div>
  </div>
  </define-component>
 
  <define-component name="option">
- <a if="@dropdown" href="#" class="dropdown-item" click.handler="fire->click()">
+ <a if="$args.mode == 'dropdown'" href="#" class="dropdown-item" click.handler="fire->click()">
  <h-children bind="@children"></h-children>
  </a>
- <span if="@label">
+ <span if="$args.mode == 'label'">
  <h-children bind="@children"></h-children>
  </span>
  </define-component>
@@ -165,7 +167,7 @@
 
  </define-component>
 
- <define-component name="message" defaults="show=true;">
+ <define-component name="message" componentdata="show=true;">
  <define-vars>
  @show = raw($args.show) ?? ref($c.show);
  </define-vars>
@@ -180,7 +182,7 @@
  </div>
  </define-component>
 
- <define-component name="modal" defaults="show=true;">
+ <define-component name="modal" componentdata="show=true;">
  <define-vars>
  @show = raw($args.show) ?? ref($c.show);
  @cardchildren = @children.bycomp['@hibiki/bulma:card'];
@@ -190,12 +192,12 @@
  <div if="[email protected]" class="modal-content" automerge="content">
  <h-children bind="@children.noslot"></h-children>
  </div>
- <h-children if="@cardchildren.size" bind="@cardchildren.first" inject:close.handler="@show = false; fire->close();" datacontext="@modal = true;"></h-children>
+ <h-children if="@cardchildren.size" bind="@cardchildren.first" inject:close.handler="@show = false; fire->close();" inject:modal></h-children>
  <button if="!$args.noclose" click.handler="@show = false; fire->close();" class="modal-close is-large"></button>
  </div>
  </define-component>
 
- <define-component name="modalbutton" defaults="show=false;">
+ <define-component name="modalbutton" componentdata="show=false;">
  <define-vars>
  @show = raw($args.show) ?? ref($c.show);
  </define-vars>
@@ -207,4 +209,113 @@
  </button>
  </define-component>
 
+ <define-component name="pager">
+ <define-vars>
+ @start = fn:max($args.curpage*$args.pagesize, 0);
+ @end = fn:min(@start + $args.pagesize - 1, $args.totalsize - 1);
+ @lastpage = fn:floor(($args.totalsize-1) / $args.pagesize);
+ </define-vars>
+ <define-handler name="//@event/change">
+ if (@value >= 0 && @value <= @lastpage) {
+ $args.curpage = @value;
+ fire->change(value=@value);
+ }
+ </define-handler>
+ <div class="buttons has-addons" automerge>
+ <local-button icon="fa fa-angle-double-left" disabled="* @start <= 0" click.handler="fire->change(value=0)">First</local-button>
+ <local-button class="is-static" style="background-color: white; color: black;">
+ {{ $args.label ?? 'Showing' }} {{ @start+1 }}-{{ @end+1 }} of {{ $args.totalsize }}
+ </local-button>
+ <local-button icon="fa fa-angle-left" disabled="* @start <= 0" click.handler="fire->change(value=$args.curpage-1)">Prev</local-button>
+ <local-button righticon="fa fa-angle-right" disabled="* @end+1 >= $args.totalsize" click.handler="fire->change(value=$args.curpage+1)">Next</local-button>
+ <local-button righticon="fa fa-angle-double-right" disabled="* @end+1 >= $args.totalsize" click.handler="fire->change(value=@lastpage)">Last</local-button>
+ </div>
+ </define-component>
+
+ <define-component name="pager-manual">
+ <define-vars>
+ @last = $args.last ?? ($args.start + $args.num - 1);
+ </define-vars>
+ <div class="buttons has-addons" automerge>
+ <local-button if="$args.showfirst" icon="fa fa-angle-double-left" automerge="first" disabled="* $args.start <= 0" click.handler="fire->clickfirst()">First</local-button>
+ <local-button class="is-static" style="background-color: white; color: black;">
+ {{ $args.label ?? 'Showing' }} {{ $args.start+1 }}-{{ @last + 1 }}
+ </local-button>
+ <local-button if="$args.showprev" icon="fa fa-angle-left" disabled="* $args.start <= 0" automerge="prev" click.handler="fire->clickprev()">Prev</local-button>
+ <local-button righticon="fa fa-angle-right" automerge="next" click.handler="fire->clicknext()">Next</local-button>
+ <local-button if="$args.showlast" righticon="fa fa-angle-double-right" automerge="last" click.handler="fire->clicklast()">Last</local-button>
+ </div>
+ </define-component>
+
+ <define-component name="tabs">
+ <define-vars>
+ @curtab = raw($args.curtab) ?? ref($c.curtab);
+ @selectedtab = invoke(@children.bycomp['@hibiki/bulma:tab'].filter, lambda(@node.attrs.value == @curtab));
+ </define-vars>
+ <div class="tabs" automerge>
+ <html-ul>
+ <h-children bind="@children.bycomp['@hibiki/bulma:tab']" inject:active="*@curtab == @node.attrs.value" inject:change.handler="@curtab = @value;" inject:mode="tab"></h-children>
+ </html-ul>
+ </div>
+ <div if="$args.showcontent" automerge="content">
+ <h-children bind="@selectedtab.first" inject:mode="content"></h-children>
+ </div>
+ </define-component>
+
+ <define-component name="tab">
+ <html-li if="$args.mode == 'tab'" automerge class.is-active="*$args.active">
+ <a automerge="a" click.handler="fire->change(value=$args.value);"><h-children text="*$args.label" bind="@children.byslot['label']"></h-children></a>
+ </html-li>
+ <div if="$args.mode == 'content'">
+ <h-children bind="@children.noslot"></h-children>
+ </div>
+ </define-component>
+
+ <define-component name="table">
+ <define-vars>
+ @sortfield = raw($args.sortfield) ?? ref($c.sortfield);
+ @sortdesc = raw($args.sortdesc) ?? ref($c.sortdesc);
+ @sorticon_expr = lambda(@sortfield == @node.attrs.sortfield ? (@sortdesc ? 'fa fa-angle-up' : 'fa fa-angle-down') : null);
+ @data = (@sortfield != null ? fn:sort(raw($args.bind), makerefs=isref($args.bind), field=@sortfield, desc=@sortdesc, sortexpr=$c.sortexpr) : raw($args.bind));
+ </define-vars>
+ <define-handler name="//@event/sort">
+ log("sort-handler", @sortfield, @value, @col_sortexpr);
+ if (@sortfield == @value) {
+ @sortdesc = !@sortdesc;
+ $c.sortexpr = @col_sortexpr;
+ }
+ else {
+ @sortfield = @value;
+ @sortdesc = false;
+ $c.sortexpr = @col_sortexpr;
+ }
+ </define-handler>
+ <table class="table" automerge="@class|style">
+ <thead>
+ <tr>
+ <th component="h-children" inject:sorticon="* invoke(@sorticon_expr)" bind="@children.bycomp['@hibiki/bulma:col']" inject:mode="header" inject:sort.handler="fire->sort(value=@value, col_sortexpr=@col_sortexpr)"></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr foreach="(@v, @idx) in @data" class.is-selected="* $args.selected != null && $args.selected == @idx" click.handler="fire->rowclick(row=@v, rownum=@idx)">
+ <td component="h-children" bind="@children.bycomp['@hibiki/bulma:col']" inject:mode="row" inject:row="*@v" inject:rownum="*@idx">
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </define-component>
+
+ <define-component name="col">
+ <html-th if="$args.mode == 'header'" click.handler="fire->headerclick()">
+ <h-children if="$args.sortfield == null" text="*$args.label" bind="@children.byslot['header']"></h-children>
+ <a if="$args.sortfield != null" automerge="sortanchor" click.handler="fire->sort(value=$args.sortfield, col_sortexpr=$args.sortexpr)">
+ <h-children text="*$args.label" bind="@children.byslot['header']"></h-children>
+ <span if="$args.sorticon != null" class="*$args.sorticon"></span>
+ </a>
+ </html-th>
+ <html-td if="$args.mode == 'row'" click.handler="fire->click()">
+ <h-children bind="@children.noslot" datacontext="@row=$args.row; @rownum=$args.rownum"></h-children>
+ </html-td>
+ </define-component>
+
 </define-library>