From e0f7c87df3218648e3b54aabe4d4e3e5ae5a2b43 Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Mon, 23 Dec 2024 20:06:58 +0800
Subject: [PATCH] release(toolbar): v0.9.0

---
 index.json               |  2 +-
 src/toolbar/README.md    |  6 +++++-
 src/toolbar/index.ts     | 35 +++++++++++++++++++++++++++++++++--
 src/toolbar/package.json |  2 +-
 src/toolbar/react.tsx    | 27 +++++++++++++++++++++++++++
 src/toolbar/story.js     |  8 ++++++++
 src/toolbar/style.scss   | 13 +++++++++++++
 7 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/index.json b/index.json
index 21a83bb..daf5c89 100644
--- a/index.json
+++ b/index.json
@@ -389,7 +389,7 @@
   },
   "toolbar": {
     "react": true,
-    "version": "0.8.1",
+    "version": "0.9.0",
     "style": true,
     "icon": false,
     "test": true,
diff --git a/src/toolbar/README.md b/src/toolbar/README.md
index f51a49f..fca99c4 100644
--- a/src/toolbar/README.md
+++ b/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.
 
diff --git a/src/toolbar/index.ts b/src/toolbar/index.ts
index f11cf01..0769217 100644
--- a/src/toolbar/index.ts
+++ b/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)
 }
diff --git a/src/toolbar/package.json b/src/toolbar/package.json
index 1a5347e..c9cc6ac 100644
--- a/src/toolbar/package.json
+++ b/src/toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "toolbar",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "Application toolbar",
   "luna": {
     "react": true
diff --git a/src/toolbar/react.tsx b/src/toolbar/react.tsx
index 5bd57b6..0c930a7 100644
--- a/src/toolbar/react.tsx
+++ b/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
diff --git a/src/toolbar/story.js b/src/toolbar/story.js
index 9453953..15cccc6 100644
--- a/src/toolbar/story.js
+++ b/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
diff --git a/src/toolbar/style.scss b/src/toolbar/style.scss
index 4c50b4b..11002f9 100644
--- a/src/toolbar/style.scss
+++ b/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;