feat(ui/input): add component input

varletjs · Feb 21, 2022 · 8a617c5 · 8a617c5
1 parent 97d6bf1
commit 8a617c5
Show file tree

Hide file tree

Showing 19 changed files with 1,704 additions and 37 deletions.
diff --git a/packages/varlet-vue2-ui/src/countdown/Countdown.vue b/packages/varlet-vue2-ui/src/countdown/Countdown.vue
@@ -6,12 +6,11 @@
   </div>
 </template>
 
-<script lang="ts">
+<script>
 import { defineComponent } from '../utils/create'
 import { props } from './props'
 import { requestAnimationFrame, cancelAnimationFrame } from '../utils/elements'
 import { toNumber, parseFormat } from '../utils/shared'
-import type { TimeData } from './props'
 
 const SECOND = 1000
 const MINUTE = 60 * SECOND
@@ -48,15 +47,15 @@ export default defineComponent({
   },
 
   methods: {
-    formatTime(durationTime: number) {
+    formatTime(durationTime) {
       const { onChange } = this.getListeners()
       const days = Math.floor(durationTime / DAY)
       const hours = Math.floor((durationTime % DAY) / HOUR)
       const minutes = Math.floor((durationTime % HOUR) / MINUTE)
       const seconds = Math.floor((durationTime % MINUTE) / SECOND)
       const milliseconds = Math.floor(durationTime % SECOND)
 
-      const time: TimeData = {
+      const time = {
         days,
         hours,
         minutes,

diff --git a/packages/varlet-vue2-ui/src/countdown/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/countdown/__tests__/__snapshots__/index.spec.js.snap
@@ -1,36 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test countdown example 1`] = `
-"<div>
-  <div class=\\"app-type\\">基本使用</div>
-  <div class=\\"var-countdown\\">30 : 00 : 00</div>
-</div>
-<div>
-  <div class=\\"app-type\\">自定义格式</div>
-  <div class=\\"var-countdown\\">01 天 06 时 00 分 00 秒</div>
-</div>
-<div>
-  <div class=\\"app-type\\">显示毫秒</div>
-  <div class=\\"var-countdown\\">30 : 00 : 00 : 00</div>
-</div>
-<div>
-  <div class=\\"app-type\\">自定义样式</div>
-  <div class=\\"var-countdown\\"><span class=\\"block\\">6</span><span class=\\"colon\\">:</span><span class=\\"block\\">0</span><span class=\\"colon\\">:</span><span class=\\"block\\">0</span></div>
-</div>
-<div>
-  <div class=\\"app-type\\">手动控制</div>
-  <div class=\\"var-countdown\\">03 : 000</div>
-  <div class=\\"btn-container\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
-      <!--v-if-->
-      <div class=\\"var-button__content\\">开始</div>
-    </button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\">
-      <!--v-if-->
-      <div class=\\"var-button__content\\">暂停</div>
-    </button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\">
-      <!--v-if-->
-      <div class=\\"var-button__content\\">重置</div>
-    </button></div>
+"<div class=\\"var-countdown-example\\">
+  <div>
+    <div class=\\"app-type\\">基本使用</div>
+    <div class=\\"var-countdown\\">
+      30 : 00 : 00
+    </div>
+  </div>
+  <div>
+    <div class=\\"app-type\\">自定义格式</div>
+    <div class=\\"var-countdown\\">
+      01 天 06 时 00 分 00 秒
+    </div>
+  </div>
+  <div>
+    <div class=\\"app-type\\">显示毫秒</div>
+    <div class=\\"var-countdown\\">
+      30 : 00 : 00 : 00
+    </div>
+  </div>
+  <div>
+    <div class=\\"app-type\\">自定义样式</div>
+    <div class=\\"var-countdown\\"><span class=\\"block\\">6</span> <span class=\\"colon\\">:</span> <span class=\\"block\\">0</span> <span class=\\"colon\\">:</span> <span class=\\"block\\">0</span></div>
+  </div>
+  <div>
+    <div class=\\"app-type\\">手动控制</div>
+    <div class=\\"var-countdown\\">
+      03 : 000
+    </div>
+    <div class=\\"btn-container\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--primary var-elevation--2\\">
+        <!---->
+        <div class=\\"var-button__content\\">开始</div>
+      </button> <button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\">
+        <!---->
+        <div class=\\"var-button__content\\">暂停</div>
+      </button> <button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\">
+        <!---->
+        <div class=\\"var-button__content\\">重置</div>
+      </button></div>
+  </div>
 </div>"
 `;
 
-exports[`test countdown format prop 1`] = `"<div class=\\"var-countdown\\">30 : 00 : 00 : 00</div>"`;
+exports[`test countdown format prop 1`] = `
+"<div class=\\"var-countdown\\">
+  30 : 00 : 00 : 00
+</div>"
+`;
diff --git a/packages/varlet-vue2-ui/src/form-details/index.ts b/packages/varlet-vue2-ui/src/form-details/index.ts
@@ -1,7 +1,7 @@
-import type { App } from 'vue'
+import type { VueConstructor } from 'vue'
 import FormDetails from './FormDetails.vue'
 
-FormDetails.install = function (app: App) {
+FormDetails.install = function (app: VueConstructor) {
   app.component(FormDetails.name, FormDetails)
 }
 

diff --git a/packages/varlet-vue2-ui/src/icon/Icon.vue b/packages/varlet-vue2-ui/src/icon/Icon.vue
@@ -15,7 +15,7 @@
       fontSize: toSizeUnit(size),
     }"
     :src="isURL(name) ? nextName : null"
-    @click="getListeners().onClick"
+    @click="onClickIcon"
   />
 </template>
 
@@ -58,6 +58,9 @@ export default defineComponent({
     toSizeUnit,
     isURL,
     toNumber,
+    onClickIcon() {
+      this.getListeners()?.onClick()
+    },
   },
 })
 </script>

diff --git a/packages/varlet-vue2-ui/src/input.zip b/packages/varlet-vue2-ui/src/input.zip