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