feat(slider)@more demos

packages/admin/package.json

@@ -42,7 +42,7 @@
     "@omiu/tooltip": "0.0.1",
     "@omiu/transition": "^0.0.12",
     "@omiu/tree": "^0.0.18",
-    "@omiu/slider": "^0.0.1",
+    "@omiu/slider": "^0.0.2",
     "axios": "^0.21.1",
     "bytemd": "^1.10.13",
     "file-saver": "^2.0.5",

packages/admin/src/components/components/slider-component.tsx

@@ -1,8 +1,10 @@
 import { WeElement, h, tag } from 'omi'
 import { tw, sheet } from 'omi-twind'
 import '@omiu/slider'
+import '@omiu/input'
 import '../docs/admin-docs'
 import './code-demo'
+import './code-demo/container'
 
 interface Props {}
 
@@ -21,43 +23,128 @@ export default class extends WeElement<Props> {
 
   mdA = `
   \`\`\`html
-  
+  <o-slider min="0" max="200" value="20"></o-slider>
+  <o-slider min="0" max="200" value="20" second_value="80" range="double"></o-slider>
   \`\`\`
   `
 
-  handleChange = (evt) => {
+  mdB = `
+  \`\`\`html
+  <o-slider
+  orient="vertical"
+  ...
+  ></o-slider>
+
+  <o-slider
+  orient="vertical"
+  range="double"
+  ></o-slider>
+  \`\`\`
+  `
+
+  mdC = `
+  \`\`\`
+  <code-demo
+  title="带输入框的滑块"
+  describe="支持与o-input保持同步"
+  code={this.mdD}
+  >
+    <div slot="demo" >
+      <o-slider value="50" onchange></o-slider>
+      <o-input value="20"></o-input>
+    </div>
+  </code-demo>
+  \`\`\`
+  `
+
+  mdD = `
+  \`\`\`html
+  <o-slider
+  disabled
+  ...
+></o-slider>
+  \`\`\`
+  `
+
+  sliderValue: number = 0
+
+  handleInputChange = (evt) => {
+    this.sliderValue = parseInt(evt.detail)
+    console.log(this.sliderValue)
+  }
+
+  handleSliderChange = (evt) => {
     console.log(evt.detail)
+    this.sliderValue = evt.detail
+    this.updateSelf()
   }
 
   render() {
     return (
       <div>
-        <h1>this is a placeholder for slider</h1>
-        <code-demo
-          title="slider title"
-          describe="description for slider"
-          code={this.mdA}
-        >
-          <div class={tw`p-5`}></div>
-          <o-slider
-            min="0"
-            max="200"
-            value="20"
-            second_value="70"
-            double_range
-            slot="demo"
-            onchange={this.handleChange}
-          ></o-slider>
-          <o-slider
-            min="0"
-            max="200"
-            value="20"
-            second_value="70"
-            // double_range
-            slot="demo"
-            onchange={this.handleChange}
-          ></o-slider>
-        </code-demo>
+        <code-demo-container>
+          <code-demo
+            title="基础滑块"
+            describe="支持单或双滑块"
+            code={this.mdA}
+            class={tw``}
+          >
+            <o-slider
+              min="0"
+              max="200"
+              value="20"
+              slot="demo"
+              class={tw`p-5`}
+            ></o-slider>
+            <o-slider
+              min="0"
+              max="200"
+              value="20"
+              second_value="80"
+              range="double"
+              slot="demo"
+              class={tw`p-5`}
+            ></o-slider>
+          </code-demo>
+          {/* <code-demo title="垂直" describe="使滑块垂直" code={this.mdB}>
+            <div slot="demo">
+              <o-slider
+                orient="vertical"
+                style={{ height: '500px', position: 'relative', top: '230px' }}
+              ></o-slider>
+              <o-slider
+                orient="vertical"
+                range="double"
+                style={{ height: '500px', position: 'relative', top: '230px' }}
+              ></o-slider>
+            </div>
+          </code-demo> */}
+          <code-demo
+            title="带输入框的滑块"
+            describe="支持与o-input保持同步"
+            code={this.mdC}
+          >
+            <div slot="demo" class={tw`flex p-5`}>
+              <o-slider
+                value={this.sliderValue}
+                class={tw`w-4/5`}
+                onchange={this.handleSliderChange}
+              ></o-slider>
+              <o-input
+                class={tw`pl-5`}
+                value={this.sliderValue}
+                oninput={this.handleInputChange}
+              ></o-input>
+            </div>
+          </code-demo>
+          <code-demo
+            title="不可用"
+            describe="支持使滑块处于不可用状态"
+            code={this.mdD}
+          >
+            <o-slider disabled slot="demo" class={tw`p-5`}></o-slider>
+          </code-demo>
+        </code-demo-container>
       </div>
     )
   }