From ec751bb6bf6e9dcceda6b55781e7fd0fe34f1dd6 Mon Sep 17 00:00:00 2001
From: ringosix <dyxzzt1108@163.com>
Date: Tue, 24 Aug 2021 10:45:19 +0800
Subject: [PATCH 1/6] feat(admin): color-picker

---
 .../components/color-picker-component.tsx     | 53 +++++++++++++++++++
 packages/admin/src/l10n/en/base.ts            |  3 ++
 packages/admin/src/l10n/zh/base.ts            |  3 ++
 packages/admin/src/nav-tree.ts                |  3 ++
 packages/admin/src/router.ts                  |  3 ++
 5 files changed, 65 insertions(+)
 create mode 100644 packages/admin/src/components/components/color-picker-component.tsx

diff --git a/packages/admin/src/components/components/color-picker-component.tsx b/packages/admin/src/components/components/color-picker-component.tsx
new file mode 100644
index 000000000..47f321eca
--- /dev/null
+++ b/packages/admin/src/components/components/color-picker-component.tsx
@@ -0,0 +1,53 @@
+import { WeElement, h, tag } from 'omi'
+import { tw, sheet } from 'omi-twind'
+import '@omiu/color-picker'
+import '../docs/admin-docs'
+import './code-demo'
+import './code-demo/container'
+
+interface Props { }
+
+const tagName = 'color-picker-component'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Props
+    }
+  }
+}
+
+@tag(tagName)
+export default class extends WeElement<Props> {
+
+  static css = sheet.target
+
+  install() { }
+
+  render() {
+    return (
+      <code-demo-container>
+        <code-demo
+          title="颜色选择器"
+          describe={'可自定义RGB色彩'}
+          code={`
+\`\`\`jsx
+<o-color-picker id='picker' clear={0} inline={0} width="350px">
+</o-color-picker>
+\`\`\`
+          `}
+        >
+          <div slot="demo" class={tw`flex justify-center px-5 py-5`}>
+
+          <div class={tw`mr-10`}>点击打开调色盘</div>
+          <div>
+            <o-color-picker id='picker' clear={0} inline={0} width="350px">
+            </o-color-picker>
+          </div>   
+
+          </div>
+        </code-demo>
+
+      </code-demo-container>
+    )
+  }
+}
diff --git a/packages/admin/src/l10n/en/base.ts b/packages/admin/src/l10n/en/base.ts
index a833bba77..2cf3b4513 100644
--- a/packages/admin/src/l10n/en/base.ts
+++ b/packages/admin/src/l10n/en/base.ts
@@ -1,6 +1,7 @@
 export const base = {
   ManagerWorkbench: 'Manager Workbench',
   Welcome: 'Welcome',
+  ColorPicker: 'ColorPicker',
   Theme: 'Theme',
   WelcomePage: 'Welcome age',
   BasicTable: 'Basic Table',
@@ -18,11 +19,13 @@ export const base = {
   Components: 'OMIU Components',
   Loading: 'Loading',
   Toast: 'Toast',
+  Tree: 'Tree',
   ToggleIcon: 'ToggleIcon',
   Card: 'Card',
   Slider: 'Slider',
   Switch: 'Switch',
   Progress: 'Progress',
+  Pagination: 'Pagination',
   InlineEditing: 'Inline Editing Table',
   MarkdownEditor: 'Markdown Editor',
   Dashboard: 'Dashboard',
diff --git a/packages/admin/src/l10n/zh/base.ts b/packages/admin/src/l10n/zh/base.ts
index 04511c533..044661552 100644
--- a/packages/admin/src/l10n/zh/base.ts
+++ b/packages/admin/src/l10n/zh/base.ts
@@ -2,6 +2,7 @@ export const base = {
   ManagerWorkbench: '管理者工作台',
   Welcome: '欢迎',
   Theme: '主题',
+  ColorPicker: 'ColorPicker 颜色选择器',
   WelcomePage: '欢迎界面',
   BasicTable: '基础表格',
   TableDeleteAnimation: '表格删除动画',
@@ -18,11 +19,13 @@ export const base = {
   Components: 'OMIU 组件',
   Loading: 'Loading 加载中',
   Toast: 'Toast 弹出式提示',
+  Tree: 'Tree 树形控件',
   ToggleIcon: 'ToggleIcon 可切换图标',
   Card: 'Card 卡片',
   Slider: 'Slider 滑块',
   Switch: 'Switch 开关按钮',
   Progress: 'Progress 进度条',
+  Pagination: 'Pagination 分页',
   InlineEditing: '表格行内编辑',
   MarkdownEditor: 'Markdown 编辑器',
   Dashboard: '仪表盘',
diff --git a/packages/admin/src/nav-tree.ts b/packages/admin/src/nav-tree.ts
index b0563b1a5..e384d3556 100644
--- a/packages/admin/src/nav-tree.ts
+++ b/packages/admin/src/nav-tree.ts
@@ -244,8 +244,11 @@ export function genNavTree(localeMap, locale) {
     'toast',
     'toggle-icon',
     'tag',
+    'tree',
     'progress',
+    'pagination',
     'cascader',
+    'color-picker',
     'time-picker',
     'rate',
     'dialog',
diff --git a/packages/admin/src/router.ts b/packages/admin/src/router.ts
index 0440b6f9c..f3fdf40c0 100644
--- a/packages/admin/src/router.ts
+++ b/packages/admin/src/router.ts
@@ -9,6 +9,7 @@ const components = [
   'button',
   'badge',
   'cascader',
+  'color-picker',
   'hamburger-menu',
   'tabs',
   'slider',
@@ -18,8 +19,10 @@ const components = [
   'toggle-icon',
   'card',
   'progress',
+  'pagination',
   'time-picker',
   'tag',
+  'tree',
   'rate',
   'dialog',
   'avatar',

From 947f3b64579241d75a2b5874a8362761b7697370 Mon Sep 17 00:00:00 2001
From: ringosix <dyxzzt1108@163.com>
Date: Tue, 24 Aug 2021 10:45:34 +0800
Subject: [PATCH 2/6] feat(admin): pagination

---
 .../components/pagination-component.tsx       | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 packages/admin/src/components/components/pagination-component.tsx

diff --git a/packages/admin/src/components/components/pagination-component.tsx b/packages/admin/src/components/components/pagination-component.tsx
new file mode 100644
index 000000000..97c4b8f8a
--- /dev/null
+++ b/packages/admin/src/components/components/pagination-component.tsx
@@ -0,0 +1,48 @@
+import { WeElement, h, tag } from 'omi'
+import { tw, sheet } from 'omi-twind'
+import '@omiu/pagination'
+import '../docs/admin-docs'
+import './code-demo'
+import './code-demo/container'
+
+interface Props { }
+
+const tagName = 'pagination-component'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Props
+    }
+  }
+}
+
+@tag(tagName)
+export default class extends WeElement<Props> {
+
+  static css = sheet.target
+
+  install() { }
+
+  render() {
+    return (
+      <code-demo-container>
+        <code-demo
+          title="分页"
+          describe={'基础分页'}
+          code={`
+\`\`\`jsx
+<o-pagination total={25} current-page={0} page-size={5}></o-pagination>
+\`\`\`
+          `}
+        >
+          <div slot="demo" class={tw`flex justify-around px-5 py-5`}>
+
+          <o-pagination total={25} current-page={0} page-size={5}></o-pagination>
+
+          </div>
+        </code-demo>
+
+      </code-demo-container>
+    )
+  }
+}

From c5910f0bdd9b31a6d58852eb1a188afe4f65b758 Mon Sep 17 00:00:00 2001
From: ringosix <dyxzzt1108@163.com>
Date: Tue, 24 Aug 2021 10:45:55 +0800
Subject: [PATCH 3/6] feat(admin): tree

---
 .../components/components/tree-component.tsx  | 146 ++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 packages/admin/src/components/components/tree-component.tsx

diff --git a/packages/admin/src/components/components/tree-component.tsx b/packages/admin/src/components/components/tree-component.tsx
new file mode 100644
index 000000000..6b5ff2c3e
--- /dev/null
+++ b/packages/admin/src/components/components/tree-component.tsx
@@ -0,0 +1,146 @@
+import { WeElement, h, tag } from 'omi'
+import { tw, sheet } from 'omi-twind'
+
+import '@omiu/tree'
+import '@omiu/icon/ac-unit-outlined'
+import '@omiu/icon/accessible-rounded'
+
+import '../docs/admin-docs'
+import './code-demo'
+import './code-demo/container'
+
+interface Props { }
+
+const tagName = 'tree-component'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Props
+    }
+  }
+}
+
+@tag(tagName)
+export default class extends WeElement<Props> {
+
+  static css = sheet.target
+
+  install() { }
+
+  render() {
+    return (
+      <code-demo-container>
+        <code-demo
+          title="树形控件"
+          describe={'展示树形嵌套数据结构的组件。'}
+          code={`
+\`\`\`html
+<o-tree style="width:400px;" 
+data={[{
+  label: '一级 1',
+  sign: '●',
+  expanded: true,
+  selected: true,
+  icon: 'ac-unit-outlined',
+  children: [{
+    sign: '1, M',
+    label: '二级 1-1',
+    children: [{
+      sign: 'M',
+      label: '三级 1-1-1',
+      icon: 'accessible-rounded',
+      color: 'red'
+    }]
+  }]
+}, {
+  label: '一级 2',
+  icon: 'accessible-rounded',
+  children: [{
+    label: '二级 2-1',
+    children: [{
+      label: '三级 2-1-1'
+    }]
+  }, {
+    label: '二级 2-2',
+    children: [{
+      label: '三级 2-2-1'
+    }]
+  }]
+}, {
+  label: '一级 3',
+  icon: 'accessible-rounded',
+  children: [{
+    label: '二级 3-1',
+    icon: 'accessible-rounded',
+    children: [{
+      label: '三级 3-1-1',
+      icon: 'accessible-rounded'
+    }]
+  }, {
+    label: '二级 3-2',
+    children: [{
+      label: '三级 3-2-1'
+    }]
+  }]
+}]}>
+</o-tree>
+\`\`\`
+          `}
+        >
+          <div slot="demo" class={tw`flex justify-around px-5 py-5`}>
+
+          <o-tree style="width:400px;" data={[{
+            label: '一级 1',
+            sign: '●',
+            expanded: true,
+            selected: true,
+            icon: 'ac-unit-outlined',
+            children: [{
+              sign: '1, M',
+              label: '二级 1-1',
+              children: [{
+                sign: 'M',
+                label: '三级 1-1-1',
+                icon: 'accessible-rounded',
+                color: 'red'
+              }]
+            }]
+          }, {
+            label: '一级 2',
+            icon: 'accessible-rounded',
+            children: [{
+              label: '二级 2-1',
+              children: [{
+                label: '三级 2-1-1'
+              }]
+            }, {
+              label: '二级 2-2',
+              children: [{
+                label: '三级 2-2-1'
+              }]
+            }]
+          }, {
+            label: '一级 3',
+            icon: 'accessible-rounded',
+            children: [{
+              label: '二级 3-1',
+              icon: 'accessible-rounded',
+              children: [{
+                label: '三级 3-1-1',
+                icon: 'accessible-rounded'
+              }]
+            }, {
+              label: '二级 3-2',
+              children: [{
+                label: '三级 3-2-1'
+              }]
+            }]
+          }]}></o-tree>
+
+          </div>
+        </code-demo>
+
+      </code-demo-container>
+    )
+  }
+}

From 32591ca2a34cfd68af47130ffd3075cb2a45a4b0 Mon Sep 17 00:00:00 2001
From: ringosix <dyxzzt1108@163.com>
Date: Tue, 24 Aug 2021 11:37:04 +0800
Subject: [PATCH 4/6] feat(admin): checkbox

---
 .../components/components/radio-component.tsx | 58 +++++++++++++++++++
 packages/admin/src/l10n/en/base.ts            |  3 +
 packages/admin/src/l10n/zh/base.ts            |  3 +
 packages/admin/src/nav-tree.ts                |  3 +
 packages/admin/src/router.ts                  |  3 +
 5 files changed, 70 insertions(+)
 create mode 100644 packages/admin/src/components/components/radio-component.tsx

diff --git a/packages/admin/src/components/components/radio-component.tsx b/packages/admin/src/components/components/radio-component.tsx
new file mode 100644
index 000000000..39100f69f
--- /dev/null
+++ b/packages/admin/src/components/components/radio-component.tsx
@@ -0,0 +1,58 @@
+import { WeElement, h, tag } from 'omi'
+import { tw, sheet } from 'omi-twind'
+
+import '@omiu/radio'
+
+import '../docs/admin-docs'
+import './code-demo'
+import './code-demo/container'
+
+interface Props { }
+
+const tagName = 'radio-component'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Props
+    }
+  }
+}
+
+@tag(tagName)
+export default class extends WeElement<Props> {
+
+  static css = [sheet.target, `o-radio{margin-left:10px;}`]
+
+  install() { }
+
+  render() {
+    return (
+      <code-demo-container>
+        <code-demo
+          title="单选框"
+          describe={'用于在多个选项中选择一个'}
+          code={`
+\`\`\`jsx
+<o-radio name="sex" checked={true} value="0">男</o-radio>
+<o-radio name="sex" value="1">女</o-radio>
+
+<o-radio disabled={true} name="sex-b">男</o-radio>
+<o-radio disabled={true} name="sex-b">女</o-radio>
+\`\`\`
+          `}
+        >
+          <div slot="demo" class={tw`flex justify-around px-5 py-5`}>
+
+          <o-radio name="sex" checked={true} value="0">男</o-radio>
+          <o-radio name="sex" value="1">女</o-radio>
+
+          <o-radio disabled={true} name="sex-b">男</o-radio>
+          <o-radio disabled={true} name="sex-b">女</o-radio>
+
+          </div>
+        </code-demo>
+
+      </code-demo-container>
+    )
+  }
+}
diff --git a/packages/admin/src/l10n/en/base.ts b/packages/admin/src/l10n/en/base.ts
index 2cf3b4513..201779849 100644
--- a/packages/admin/src/l10n/en/base.ts
+++ b/packages/admin/src/l10n/en/base.ts
@@ -17,11 +17,14 @@ export const base = {
   Demo1: 'Demo1',
   Demo2: 'Demo2',
   Components: 'OMIU Components',
+  Input: 'Input',
   Loading: 'Loading',
   Toast: 'Toast',
   Tree: 'Tree',
   ToggleIcon: 'ToggleIcon',
   Card: 'Card',
+  Checkbox: 'Checkbox',
+  Radio: 'Radio',
   Slider: 'Slider',
   Switch: 'Switch',
   Progress: 'Progress',
diff --git a/packages/admin/src/l10n/zh/base.ts b/packages/admin/src/l10n/zh/base.ts
index 044661552..ae463152d 100644
--- a/packages/admin/src/l10n/zh/base.ts
+++ b/packages/admin/src/l10n/zh/base.ts
@@ -17,11 +17,14 @@ export const base = {
   Demo1: '文档例子1',
   Demo2: '文档例子2',
   Components: 'OMIU 组件',
+  Input: 'Input 输入框',
   Loading: 'Loading 加载中',
   Toast: 'Toast 弹出式提示',
   Tree: 'Tree 树形控件',
   ToggleIcon: 'ToggleIcon 可切换图标',
   Card: 'Card 卡片',
+  Checkbox: 'Checkbox 复选框',
+  Radio: 'Radio 单选框',
   Slider: 'Slider 滑块',
   Switch: 'Switch 开关按钮',
   Progress: 'Progress 进度条',
diff --git a/packages/admin/src/nav-tree.ts b/packages/admin/src/nav-tree.ts
index e384d3556..add0d6c88 100644
--- a/packages/admin/src/nav-tree.ts
+++ b/packages/admin/src/nav-tree.ts
@@ -236,15 +236,18 @@ export function genNavTree(localeMap, locale) {
     'bottom-nav',
     'button',
     'badge',
+    'checkbox',
     'card',
     'hamburger-menu',
     'slider',
+    'Input',
     'loading',
     'link',
     'toast',
     'toggle-icon',
     'tag',
     'tree',
+    'radio',
     'progress',
     'pagination',
     'cascader',
diff --git a/packages/admin/src/router.ts b/packages/admin/src/router.ts
index f3fdf40c0..0a6481701 100644
--- a/packages/admin/src/router.ts
+++ b/packages/admin/src/router.ts
@@ -10,14 +10,17 @@ const components = [
   'badge',
   'cascader',
   'color-picker',
+  'checkbox',
   'hamburger-menu',
   'tabs',
   'slider',
+  'Input',
   'loading',
   'link',
   'toast',
   'toggle-icon',
   'card',
+  'radio',
   'progress',
   'pagination',
   'time-picker',

From e559ed5a81d6bd6a11fe9f22a78e9b09a15ac7ea Mon Sep 17 00:00:00 2001
From: ringosix <dyxzzt1108@163.com>
Date: Tue, 24 Aug 2021 11:37:17 +0800
Subject: [PATCH 5/6] feat(admin): radio

---
 .../components/checkbox-component.tsx         | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 packages/admin/src/components/components/checkbox-component.tsx

diff --git a/packages/admin/src/components/components/checkbox-component.tsx b/packages/admin/src/components/components/checkbox-component.tsx
new file mode 100644
index 000000000..cde583605
--- /dev/null
+++ b/packages/admin/src/components/components/checkbox-component.tsx
@@ -0,0 +1,77 @@
+import { WeElement, h, tag } from 'omi'
+import { tw, sheet } from 'omi-twind'
+
+import '@omiu/checkbox'
+
+import '../docs/admin-docs'
+import './code-demo'
+import './code-demo/container'
+
+interface Props { }
+
+const tagName = 'checkbox-component'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Props
+    }
+  }
+}
+
+@tag(tagName)
+export default class extends WeElement<Props> {
+
+  static css = sheet.target
+
+  install() { }
+
+  render() {
+    return (
+      <code-demo-container>
+        <code-demo
+          title="复选框"
+          describe={'基础演示'}
+          code={`
+\`\`\`jsx
+<o-checkbox label='Label'> </o-checkbox>
+
+<o-checkbox checked={true} label='checked'> </o-checkbox>
+
+<o-checkbox id="myCheckbox" indeterminate={true} label='indeterminate'> </o-checkbox>
+
+<o-checkbox disabled={true} label='disabled'> </o-checkbox>
+
+<o-checkbox disabled={true} checked={true} label='disabled checked={true}'> </o-checkbox>
+\`\`\`
+          `}
+        >
+          <div slot="demo" class={tw`flex flex-col justify-around  px-5 py-5`}>
+
+            <div>
+              <o-checkbox label='Label'> </o-checkbox>
+            </div>
+            
+            <div>
+              <o-checkbox checked={true} label='checked'> </o-checkbox>
+            </div>
+            
+            <div>
+              <o-checkbox id="myCheckbox" indeterminate={true} label='indeterminate'> </o-checkbox>
+            </div>
+                        
+            <div>
+              <o-checkbox disabled={true} label='disabled'> </o-checkbox>
+            </div>
+                        
+            <div>
+              <o-checkbox disabled={true} checked={true} label='disabled checked'> </o-checkbox>
+            </div>
+            
+
+          </div>
+        </code-demo>
+
+      </code-demo-container>
+    )
+  }
+}

From 83e2c84d3dcc5a51519b29ba1be7715863bf6b02 Mon Sep 17 00:00:00 2001
From: ringosix <dyxzzt1108@163.com>
Date: Tue, 24 Aug 2021 11:37:26 +0800
Subject: [PATCH 6/6] feat(admin): input

---
 .../components/components/input-component.tsx | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 packages/admin/src/components/components/input-component.tsx

diff --git a/packages/admin/src/components/components/input-component.tsx b/packages/admin/src/components/components/input-component.tsx
new file mode 100644
index 000000000..85836530e
--- /dev/null
+++ b/packages/admin/src/components/components/input-component.tsx
@@ -0,0 +1,112 @@
+import { WeElement, h, tag } from 'omi'
+import { tw, sheet } from 'omi-twind'
+
+import '@omiu/input'
+import '@omiu/icon/ac-unit-outlined'
+
+import '../docs/admin-docs'
+import './code-demo'
+import './code-demo/container'
+
+interface Props { }
+
+const tagName = 'input-component'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Props
+    }
+  }
+}
+
+@tag(tagName)
+export default class extends WeElement<Props> {
+
+  static css = [sheet.target, `o-input{margin-top:10px;}`]
+
+  install() { }
+
+  render() {
+    return (
+      <code-demo-container>
+        <code-demo
+          title="基础输入框"
+          describe={'一般用于输入信息提交给服务器'}
+          code={`
+\`\`\`jsx
+<o-input placeholder="Enter User Name"></o-input>
+<o-input disabled placeholder="Enter User Name"></o-input>
+<o-input clearable placeholder="Enter User Name"></o-input>
+\`\`\`
+          `}
+        >
+          <div slot="demo" class={tw`flex flex-col justify-center px-5 py-5`}>
+
+          <div>
+            <o-input placeholder="Enter User Name"></o-input>
+          </div>
+
+          <div>
+            <o-input disabled placeholder="Enter User Name"></o-input>
+          </div>
+
+          <div>
+            <o-input clearable placeholder="Enter User Name"></o-input>
+          </div>
+
+          </div>
+        </code-demo>
+
+        <code-demo
+          title="扩展输入框"
+          describe={'设置 后缀 前缀'}
+          code={`
+\`\`\`jsx
+<o-input max-length="10"  placeholder="Enter User Name"></o-input>
+<o-input size="medium" suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+<o-input size="small" suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+<o-input size="mini" suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+
+<o-input size="medium" prefix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+<o-input size="small" prefix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+<o-input size="mini" prefix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+\`\`\`
+          `}
+        >
+          <div slot="demo" class={tw`flex flex-col px-5 py-5`}>
+
+          <div>
+            <o-input max-length="10"  placeholder="Enter User Name"></o-input>
+          </div>
+
+          <div>
+            <o-input size="medium" suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+          </div>
+
+          <div>
+            <o-input size="small" suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+          </div>
+
+          <div>
+            <o-input size="mini" suffix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+          </div>
+
+          <div>
+            <o-input size="medium" prefix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+          </div>
+
+          <div>
+            <o-input size="small" prefix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+          </div>
+
+          <div>
+            <o-input size="mini" prefix-icon="ac-unit-outlined" placeholder="Enter User Name"></o-input>
+          </div>
+
+          </div>
+        </code-demo>
+
+      </code-demo-container>
+    )
+  }
+}