Merge pull request #7 from ringozzt/ringo

Merge from Ringo

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>
+    )
+  }
+}

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>
+    )
+  }
+}

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>
+    )
+  }
+}

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>
+    )
+  }
+}

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>
+    )
+  }
+}

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>
+    )
+  }
+}

packages/admin/src/nav-tree.ts

@@ -235,16 +235,22 @@ export function genNavTree(i18n) {
     'bottom-nav',
     'button',
     'badge',
+    'checkbox',
     'card',
     'hamburger-menu',
     'slider',
+    'Input',
     'loading',
     'link',
     'toast',
     'toggle-icon',
     'tag',
+    'tree',
+    'radio',
     'progress',
+    'pagination',
     'cascader',
+    'color-picker',
     'time-picker',
     'rate',
     'dialog',

packages/admin/src/router.ts

@@ -9,17 +9,23 @@ const components = [
   'button',
   'badge',
   'cascader',
+  'color-picker',
+  'checkbox',
   'hamburger-menu',
   'tabs',
   'slider',
+  'Input',
   'loading',
   'link',
   'toast',
   'toggle-icon',
   'card',
+  'radio',
   'progress',
+  'pagination',
   'time-picker',
   'tag',
+  'tree',
   'rate',
   'dialog',
   'avatar',