release(toolbar): v0.9.0

index.json

@@ -389,7 +389,7 @@
   },
   "toolbar": {
     "react": true,
-    "version": "0.8.1",
+    "version": "0.9.0",
     "style": true,
     "icon": false,
     "test": true,

src/toolbar/README.md

@@ -39,6 +39,10 @@ toolbar.appendText('Test')
 
 Append button.
 
+### appendCheckbox(key: string, value: boolean, label: string): LunaToolbarCheckbox
+
+Append checkbox.
+
 ### appendHtml(html: string | HTMLElement): LunaToolbarHtml
 
 Append html.
@@ -59,7 +63,7 @@ Append select.
 
 Append separator.
 
-### appendSpace(): ToolbarSpace
+### appendSpace(): LunaToolbarSpace
 
 Append item that fills the remaining space.
 

src/toolbar/index.ts

@@ -6,6 +6,7 @@ import each from 'licia/each'
 import escape from 'licia/escape'
 import defaults from 'licia/defaults'
 import toStr from 'licia/toStr'
+import uniqId from 'licia/uniqId'
 import toNum from 'licia/toNum'
 import types, { PlainObj } from 'licia/types'
 import Component, { IComponentOptions } from '../share/Component'
@@ -96,12 +97,16 @@ export default class Toolbar extends Component {
   }
   /** Append item that fills the remaining space. */
   appendSpace() {
-    return this.append(new ToolbarSpace(this))
+    return this.append(new LunaToolbarSpace(this))
   }
   /** Append text input. */
   appendInput(key: string, value: string, placeholder = '') {
     return this.append(new LunaToolbarInput(this, key, value, placeholder))
   }
+  /** Append checkbox. */
+  appendCheckbox(key: string, value: boolean, label: string) {
+    return this.append(new LunaToolbarCheckbox(this, key, value, label))
+  }
   private append<T extends LunaToolbarItem>(item: T): T {
     this.items.push(item)
     this.$container.append(item.container)
@@ -295,12 +300,38 @@ export class LunaToolbarHtml extends LunaToolbarItem {
   }
 }
 
-class ToolbarSpace extends LunaToolbarItem {
+export class LunaToolbarSpace extends LunaToolbarItem {
   constructor(toolbar: Toolbar) {
     super(toolbar, '', '', 'space')
   }
 }
 
+export class LunaToolbarCheckbox extends LunaToolbarItem {
+  private input: HTMLInputElement
+  constructor(toolbar: Toolbar, key: string, value: boolean, label: string) {
+    super(toolbar, key, value, 'checkbox')
+
+    const { c } = toolbar
+    const id = uniqId(c('checkbox-'))
+
+    this.$container.html(
+      `<input type="checkbox" id="${id}"></input><label for="${id}">${escape(
+        label
+      )}</label>`
+    )
+    const $input = this.$container.find('input')
+    const input = $input.get(0) as HTMLInputElement
+    input.checked = value
+
+    $input.on('change', () => this.onChange(input.checked))
+    this.input = input
+  }
+  setValue(value: boolean) {
+    this.input.checked = value
+    this.value = value
+  }
+}
+
 if (typeof module !== 'undefined') {
   exportCjs(module, Toolbar)
 }

src/toolbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolbar",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Application toolbar",
   "luna": {
     "react": true

src/toolbar/react.tsx

@@ -13,6 +13,7 @@ import { Component } from '../share/react'
 import className from 'licia/className'
 import types from 'licia/types'
 import map from 'licia/map'
+import uniqId from 'licia/uniqId'
 import toStr from 'licia/toStr'
 import { IButtonState } from 'luna-toolbar'
 
@@ -205,4 +206,30 @@ export const LunaToolbarHtml: FC<PropsWithChildren<IToolbarItemProps>> = (
   )
 }
 
+interface IToolbarCheckboxProps extends IToolbarItemProps {
+  keyName: string
+  value: boolean
+  label: string
+}
+
+export const LunaToolbarCheckbox: FC<IToolbarCheckboxProps> = (props) => {
+  const id = uniqId(c('checkbox-'))
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    props.onChange && props.onChange(e.target.checked, props.value)
+  }
+
+  return (
+    <LunaToolbarItem {...props} type="checkbox">
+      <input
+        type="checkbox"
+        id={id}
+        checked={props.value}
+        onChange={onChange}
+      />
+      <label htmlFor={id}>{props.label}</label>
+    </LunaToolbarItem>
+  )
+}
+
 export default LunaToolbar

src/toolbar/story.js

@@ -11,6 +11,7 @@ import LunaToolbar, {
   LunaToolbarButton,
   LunaToolbarHtml,
   LunaToolbarNumber,
+  LunaToolbarCheckbox,
 } from './react'
 
 const def = story(
@@ -55,6 +56,8 @@ const def = story(
       step: 1,
     })
 
+    toolbar.appendCheckbox('checkbox', true, 'Show all')
+
     toolbar.appendSpace()
     toolbar.appendHtml(
       '<span style="color:green;line-height:30px;">Loading</span>'
@@ -106,6 +109,11 @@ const def = story(
             max={1000}
             step={1}
           />
+          <LunaToolbarCheckbox
+            keyName="checkbox"
+            value={true}
+            label="Show all"
+          />
           <LunaToolbarSpace />
           <LunaToolbarHtml>
             <span

src/toolbar/style.scss

@@ -91,6 +91,19 @@
   flex-grow: 1;
 }
 
+.item-checkbox {
+  align-items: center;
+  input {
+    @include mixin.checkbox();
+  }
+  label {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    * {
+      margin: 0;
+    }
+  }
+}
+
 .disabled {
   pointer-events: none;
   opacity: 0.6;