fix(ui): fix types

affects: @varlet/ui
varletjs · Oct 15, 2021 · ead022f · ead022f
1 parent c87784d
commit ead022f
Show file tree

Hide file tree

Showing 25 changed files with 124 additions and 106 deletions.
diff --git a/packages/varlet-ui/src/action-sheet/ActionSheet.vue b/packages/varlet-ui/src/action-sheet/ActionSheet.vue
@@ -49,8 +49,8 @@
 
 <script lang="ts">
 import Ripple from '../ripple'
-import Popup from '../popup'
-import Icon from '../icon'
+import VarPopup from '../popup'
+import VarIcon from '../icon'
 import { defineComponent, ref, watch } from 'vue'
 import { props } from './props'
 import { dt } from '../utils/shared'
@@ -62,8 +62,8 @@ export default defineComponent({
   name: 'VarActionSheet',
   directives: { Ripple },
   components: {
-    [Popup.name]: Popup,
-    [Icon.name]: Icon,
+    VarPopup,
+    VarIcon,
   },
   inheritAttrs: false,
   props,

diff --git a/packages/varlet-ui/src/badge/Badge.vue b/packages/varlet-ui/src/badge/Badge.vue
@@ -17,17 +17,15 @@
 </template>
 
 <script lang="ts">
+import VarIcon from '../icon'
 import { computed, defineComponent } from 'vue'
 import { props } from './props'
-import Icon from '../icon'
 import { toNumber } from '../utils/shared'
 import type { ComputedRef } from 'vue'
 
 export default defineComponent({
   name: 'VarBadge',
-  components: {
-    [Icon.name]: Icon,
-  },
+  components: { VarIcon },
   inheritAttrs: false,
   props,
   setup(props, { slots }) {

diff --git a/packages/varlet-ui/src/button/Button.vue b/packages/varlet-ui/src/button/Button.vue
@@ -35,14 +35,14 @@
 
 <script lang="ts">
 import Ripple from '../ripple'
-import Loading from '../loading'
+import VarLoading from '../loading'
 import { defineComponent } from 'vue'
 import { props } from './props'
 
 export default defineComponent({
   name: 'VarButton',
   components: {
-    [Loading.name]: Loading,
+    VarLoading,
   },
   directives: { Ripple },
   props,

diff --git a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import FormDetails from '../form-details'
+import VarFormDetails from '../form-details'
 import { defineComponent, computed, watch, nextTick } from 'vue'
 import { props } from './props'
 import { useValidation } from '../utils/components'
@@ -21,9 +21,7 @@ import type { CheckboxGroupProvider } from './provide'
 
 export default defineComponent({
   name: 'VarCheckboxGroup',
-  components: {
-    [FormDetails.name]: FormDetails,
-  },
+  components: { VarFormDetails },
   props,
   setup(props) {
     const max: ComputedRef<number | string | undefined> = computed(() => props.max)

diff --git a/packages/varlet-ui/src/checkbox/Checkbox.vue b/packages/varlet-ui/src/checkbox/Checkbox.vue
@@ -47,9 +47,9 @@
 </template>
 
 <script lang="ts">
-import Icon from '../icon'
+import VarIcon from '../icon'
+import VarFormDetails from '../form-details'
 import Ripple from '../ripple'
-import FormDetails from '../form-details'
 import { defineComponent, ref, computed, watch, nextTick } from 'vue'
 import { props } from './props'
 import { useValidation } from '../utils/components'
@@ -63,8 +63,8 @@ export default defineComponent({
   name: 'VarCheckbox',
   directives: { Ripple },
   components: {
-    [Icon.name]: Icon,
-    [FormDetails.name]: FormDetails,
+    VarIcon,
+    VarFormDetails,
   },
   props,
   setup(props) {

diff --git a/packages/varlet-ui/src/chip/Chip.vue b/packages/varlet-ui/src/chip/Chip.vue
@@ -17,15 +17,15 @@
 </template>
 
 <script lang="ts">
-import Icon from '../icon'
+import VarIcon from '../icon'
 import { defineComponent, computed } from 'vue'
 import { props } from './props'
 import type { ComputedRef } from 'vue'
 
 export default defineComponent({
   name: 'VarChip',
   components: {
-    [Icon.name]: Icon,
+    VarIcon,
   },
   inheritAttrs: false,
   props,

diff --git a/packages/varlet-ui/src/counter/Counter.vue b/packages/varlet-ui/src/counter/Counter.vue
@@ -59,9 +59,9 @@
 </template>
 
 <script lang="ts">
-import Icon from '../icon'
+import VarIcon from '../icon'
+import VarFormDetails from '../form-details'
 import Ripple from '../ripple'
-import FormDetails from '../form-details'
 import { defineComponent, ref, watch, computed, nextTick } from 'vue'
 import { Decimal } from 'decimal.js'
 import { props } from './props'
@@ -79,8 +79,8 @@ const DELAY = 600
 export default defineComponent({
   name: 'VarCounter',
   components: {
-    [Icon.name]: Icon,
-    [FormDetails.name]: FormDetails,
+    VarIcon,
+    VarFormDetails,
   },
   directives: { Ripple },
   inheritAttrs: false,

diff --git a/packages/varlet-ui/src/dialog/Dialog.vue b/packages/varlet-ui/src/dialog/Dialog.vue
@@ -54,8 +54,8 @@
 </template>
 
 <script lang="ts">
-import Popup from '../popup'
-import Button from '../button'
+import VarPopup from '../popup'
+import VarButton from '../button'
 import { props } from './props'
 import { defineComponent, ref, watch } from 'vue'
 import { dt } from '../utils/shared'
@@ -65,8 +65,8 @@ import type { Ref } from 'vue'
 export default defineComponent({
   name: 'VarDialog',
   components: {
-    [Popup.name]: Popup,
-    [Button.name]: Button,
+    VarPopup,
+    VarButton,
   },
   inheritAttrs: false,
   props,

diff --git a/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap
@@ -320,7 +320,7 @@ exports[`test form with select 1`] = `
           <div class=\\"var-select__select var-select--disabled\\" style=\\"text-align: left;\\">
             <div>
               <div class=\\"var-select__chips\\">
-                <transition-stub><span class=\\"var-chip var--box var-chip--normal var--inline-flex var-chip--null var-chip--round var-select__chip\\" var-select-cover=\\"\\"><span class=\\"var-chip--text-normal\\">选项1</span><span class=\\"var-chip--close\\"><i class=\\"var-icon var-icon--set var-icon-close-circle\\" style=\\"transition: all 0ms;\\"></i></span></span></transition-stub>
+                <transition-stub><span class=\\"var-chip var--box var-chip--small var--inline-flex var-chip--default var-chip--round var-select__chip\\" var-select-cover=\\"\\"><span class=\\"var-chip--text-small\\">选项1</span><span class=\\"var-chip--close\\"><i class=\\"var-icon var-icon--set var-icon-close-circle\\" style=\\"transition: all 0ms;\\"></i></span></span></transition-stub>
               </div>
             </div><i class=\\"var-icon var-icon--set var-icon-menu-down var-select__arrow\\" style=\\"transition: all 300ms;\\" var-select-cover=\\"\\"></i>
           </div><label class=\\"var-select__placeholder var-select--placeholder-hint\\"></label>
@@ -350,7 +350,7 @@ exports[`test form with select 2`] = `
           <div class=\\"var-select__select\\" style=\\"text-align: left;\\">
             <div>
               <div class=\\"var-select__chips\\">
-                <transition-stub><span class=\\"var-chip var--box var-chip--normal var--inline-flex var-chip--null var-chip--round var-select__chip\\" var-select-cover=\\"\\"><span class=\\"var-chip--text-normal\\">选项1</span><span class=\\"var-chip--close\\"><i class=\\"var-icon var-icon--set var-icon-close-circle\\" style=\\"transition: all 0ms;\\"></i></span></span></transition-stub>
+                <transition-stub><span class=\\"var-chip var--box var-chip--small var--inline-flex var-chip--default var-chip--round var-select__chip\\" var-select-cover=\\"\\"><span class=\\"var-chip--text-small\\">选项1</span><span class=\\"var-chip--close\\"><i class=\\"var-icon var-icon--set var-icon-close-circle\\" style=\\"transition: all 0ms;\\"></i></span></span></transition-stub>
               </div>
             </div><i class=\\"var-icon var-icon--set var-icon-menu-down var-select__arrow\\" style=\\"transition: all 300ms;\\" var-select-cover=\\"\\"></i>
           </div><label class=\\"var-select__placeholder var-select--placeholder-hint\\"></label>
@@ -380,7 +380,7 @@ exports[`test form with select 3`] = `
           <div class=\\"var-select__select var-select--error\\" style=\\"text-align: left;\\">
             <div>
               <div class=\\"var-select__chips\\">
-                <transition-stub><span class=\\"var-chip var--box var-chip--normal var--inline-flex var-chip--danger var-chip--round var-select__chip\\" var-select-cover=\\"\\"><span class=\\"var-chip--text-normal\\">选项1</span><span class=\\"var-chip--close\\"><i class=\\"var-icon var-icon--set var-icon-close-circle\\" style=\\"transition: all 0ms;\\"></i></span></span></transition-stub>
+                <transition-stub><span class=\\"var-chip var--box var-chip--small var--inline-flex var-chip--danger var-chip--round var-select__chip\\" var-select-cover=\\"\\"><span class=\\"var-chip--text-small\\">选项1</span><span class=\\"var-chip--close\\"><i class=\\"var-icon var-icon--set var-icon-close-circle\\" style=\\"transition: all 0ms;\\"></i></span></span></transition-stub>
               </div>
             </div><i class=\\"var-icon var-icon--set var-icon-menu-down var-select__arrow\\" style=\\"transition: all 300ms;\\" var-select-cover=\\"\\"></i>
           </div><label class=\\"var-select__placeholder var-select--placeholder-hint\\"></label>

diff --git a/packages/varlet-ui/src/image-preview/ImagePreview.vue b/packages/varlet-ui/src/image-preview/ImagePreview.vue
@@ -69,10 +69,10 @@
 </template>
 
 <script lang="ts">
-import Swipe from '../swipe'
-import SwipeItem from '../swipe-item'
-import Icon from '../icon'
-import Popup from '../popup'
+import VarSwipe from '../swipe'
+import VarSwipeItem from '../swipe-item'
+import VarIcon from '../icon'
+import VarPopup from '../popup'
 import { defineComponent, ref, computed, watch } from 'vue'
 import { props } from './props'
 import { toNumber } from '../utils/shared'
@@ -92,10 +92,10 @@ const ANIMATION_DURATION = 200
 export default defineComponent({
   name: 'VarImagePreview',
   components: {
-    [Swipe.name]: Swipe,
-    [SwipeItem.name]: SwipeItem,
-    [Popup.name]: Popup,
-    [Icon.name]: Icon,
+    VarSwipe,
+    VarSwipeItem,
+    VarPopup,
+    VarIcon,
   },
   inheritAttrs: false,
   props,

diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
@@ -94,8 +94,8 @@
 </template>
 
 <script lang="ts">
-import FormDetails from '../form-details'
-import Icon from '../icon'
+import VarFormDetails from '../form-details'
+import VarIcon from '../icon'
 import { defineComponent, getCurrentInstance, ref, computed, nextTick } from 'vue'
 import { props } from './props'
 import { isEmpty, isNumber, toNumber } from '../utils/shared'
@@ -108,8 +108,8 @@ import type { InputProvider } from './provide'
 export default defineComponent({
   name: 'VarInput',
   components: {
-    [Icon.name]: Icon,
-    [FormDetails.name]: FormDetails,
+    VarIcon,
+    VarFormDetails,
   },
   props,
   setup(props) {

diff --git a/packages/varlet-ui/src/input/props.ts b/packages/varlet-ui/src/input/props.ts
@@ -70,10 +70,10 @@ export const props = {
     type: Array as PropType<Array<(v: string | number) => any>>,
   },
   onFocus: {
-    type: Function as PropType<(e: Event) => void>,
+    type: Function as PropType<(e: FocusEvent) => void>,
   },
   onBlur: {
-    type: Function as PropType<(e: Event) => void>,
+    type: Function as PropType<(e: FocusEvent) => void>,
   },
   onClick: {
     type: Function as PropType<(e: Event) => void>,

diff --git a/packages/varlet-ui/src/list/List.vue b/packages/varlet-ui/src/list/List.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script lang="ts">
+import VarLoading from '../loading'
 import Ripple from '../ripple'
-import Loading from '../loading'
 import { defineComponent, onMounted, onUnmounted, ref, nextTick } from 'vue'
 import { getParentScroller, isHidden, toPxNum } from '../utils/elements'
 import { props } from './props'
@@ -37,7 +37,7 @@ export default defineComponent({
   name: 'VarList',
   directives: { Ripple },
   components: {
-    [Loading.name]: Loading,
+    VarLoading,
   },
   props,
   setup(props) {

diff --git a/packages/varlet-ui/src/option/Option.vue b/packages/varlet-ui/src/option/Option.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import Checkbox from '../checkbox'
+import VarCheckbox from '../checkbox'
 import Ripple from '../ripple'
 import { defineComponent, computed, ref, watch } from 'vue'
 import { useSelect } from './provide'
@@ -46,7 +46,7 @@ export default defineComponent({
   name: 'VarOption',
   directives: { Ripple },
   components: {
-    [Checkbox.name]: Checkbox,
+    VarCheckbox,
   },
   props,
   setup(props) {

diff --git a/packages/varlet-ui/src/picker/Picker.vue b/packages/varlet-ui/src/picker/Picker.vue
@@ -13,7 +13,7 @@
             closeOnClickOverlay,
             teleport,
             show,
-            'onUpdate:show': (value) => $props['onUpdate:show']?.(value),
+            'onUpdate:show': handlePopupUpdateShow,
             position: 'bottom',
             class: 'var-picker__popup',
           }
@@ -53,14 +53,14 @@
         <div
           class="var-picker__column"
           v-for="c in scrollColumns"
-          :key="c"
+          :key="c.id"
           @touchstart="handleTouchstart($event, c)"
           @touchmove.prevent="handleTouchmove($event, c)"
           @touchend="handleTouchend($event, c)"
         >
           <div
             class="var-picker__scroller"
-            :ref="(el) => (c.scrollEl = el)"
+            :ref="(el) => getScrollEl(el, c)"
             :style="{
               transform: `translateY(${c.translate}px)`,
               transitionDuration: `${c.duration}ms`,
@@ -92,18 +92,19 @@
 </template>
 
 <script lang="ts">
-import Button from '../button'
-import Popup from '../popup'
+import VarButton from '../button'
+import VarPopup from '../popup'
 import { defineComponent, watch, ref, computed, Transition, toRaw } from 'vue'
 import { props } from './props'
 import { isArray, dt } from '../utils/shared'
 import { toPxNum, getTranslate } from '../utils/elements'
 import { pack } from '../locale'
-import type { Ref, ComputedRef } from 'vue'
+import type { Ref, ComputedRef, ComponentPublicInstance } from 'vue'
 import type { CascadeColumn, NormalColumn } from './props'
 import type { Texts } from './index'
 
 export interface ScrollColumn {
+  id: number
   touching: boolean
   index: number
   prevY: number | undefined
@@ -120,11 +121,13 @@ export interface ScrollColumn {
 const MOMENTUM_RECORD_TIME = 300
 const MOMENTUM_ALLOW_DISTANCE = 15
 
+let sid = 0
+
 export default defineComponent({
   name: 'VarPicker',
   components: {
-    [Button.name]: Button,
-    [Popup.name]: Popup,
+    VarButton,
+    VarPopup,
   },
   inheritAttrs: false,
   props,
@@ -138,6 +141,14 @@ export default defineComponent({
     const columnHeight: ComputedRef<number> = computed(() => optionCount.value * optionHeight.value)
     let prevIndexes: number[] = []
 
+    const getScrollEl = (el: Element | ComponentPublicInstance | null, scrollColumn: ScrollColumn) => {
+      scrollColumn.scrollEl = el as HTMLElement
+    }
+
+    const handlePopupUpdateShow = (value: boolean) => {
+      props['onUpdate:show']?.(value)
+    }
+
     const limitTranslate = (scrollColumn: ScrollColumn) => {
       const START_LIMIT = optionHeight.value + center.value
       const END_LIMIT = center.value - scrollColumn.column.texts.length * optionHeight.value
@@ -240,6 +251,7 @@ export default defineComponent({
       return normalColumns.map((column: NormalColumn | any[]) => {
         const normalColumn = (isArray(column) ? { texts: column } : column) as NormalColumn
         const scrollColumn: ScrollColumn = {
+          id: sid++,
           prevY: undefined,
           momentumPrevY: undefined,
           touching: false,
@@ -267,6 +279,7 @@ export default defineComponent({
     const createChildren = (scrollColumns: ScrollColumn[], children: CascadeColumn[]) => {
       if (isArray(children) && children.length) {
         const scrollColumn: ScrollColumn = {
+          id: sid++,
           prevY: undefined,
           momentumPrevY: undefined,
           touching: false,
@@ -370,6 +383,8 @@ export default defineComponent({
       columnHeight,
       center,
       Transition,
+      getScrollEl,
+      handlePopupUpdateShow,
       handleTouchstart,
       handleTouchmove,
       handleTouchend,