fix: fix types

varletjs · Oct 15, 2021 · f9a372f · f9a372f
1 parent ead022f
commit f9a372f
Show file tree

Hide file tree

Showing 23 changed files with 102 additions and 84 deletions.
diff --git a/packages/varlet-ui/src/back-top/BackTop.vue b/packages/varlet-ui/src/back-top/BackTop.vue
@@ -9,8 +9,8 @@
 </template>
 <script lang="ts">
 import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
-import Button from '../button'
-import Icon from '../icon'
+import VarButton from '../button'
+import VarIcon from '../icon'
 import { props } from './props'
 import { isString, easeInOutCubic, throttle, toNumber } from '../utils/shared'
 import { getScrollTop, getScrollLeft, scrollTo } from '../utils/elements'
@@ -19,8 +19,8 @@ import type { Ref } from 'vue'
 export default defineComponent({
   name: 'VarBackTop',
   components: {
-    [Button.name]: Button,
-    [Icon.name]: Icon,
+    VarButton,
+    VarIcon,
   },
   props,
   setup(props) {

diff --git a/packages/varlet-ui/src/cell/Cell.vue b/packages/varlet-ui/src/cell/Cell.vue
@@ -24,12 +24,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { props } from './props'
-import Icon from '../icon'
+import VarIcon from '../icon'
 
 export default defineComponent({
   name: 'VarCell',
   components: {
-    [Icon.name]: Icon,
+    VarIcon,
   },
   props,
 })

diff --git a/packages/varlet-ui/src/collapse-item/CollapseItem.vue b/packages/varlet-ui/src/collapse-item/CollapseItem.vue
@@ -38,24 +38,19 @@ import { requestAnimationFrame } from '../utils/elements'
 import { isArray } from '../utils/shared'
 import { useCollapse } from './provide'
 import { props } from './props'
-import Icon from '../icon'
+import VarIcon from '../icon'
 import type { Ref, ComputedRef } from 'vue'
 import type { CollapseItemProvider } from './provide'
 
 export default defineComponent({
   name: 'VarCollapseItem',
   components: {
-    [Icon.name]: Icon,
+    VarIcon,
   },
   props,
   setup(props) {
     const { index, collapse, bindCollapse } = useCollapse()
 
-    if (!collapse || !bindCollapse || !index) {
-      console.error('[Varlet] Collapse: <var-collapse-item/> must in <var-collapse>')
-      return
-    }
-
     const contentEl: Ref<HTMLDivElement | null> = ref(null)
     const show: Ref<boolean> = ref(false)
     const isShow: Ref<boolean> = ref(false)

diff --git a/packages/varlet-ui/src/collapse-item/provide.ts b/packages/varlet-ui/src/collapse-item/provide.ts
@@ -18,6 +18,10 @@ export function useCollapse() {
   )
   const { index } = useAtParentIndex(COLLAPSE_COUNT_COLLAPSE_ITEM_KEY)
 
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('[Varlet] Collapse: <var-collapse-item/> must in <var-collapse>')
+  }
+
   return {
     index,
     collapse: parentProvider,

diff --git a/packages/varlet-ui/src/date-picker/DatePicker.vue b/packages/varlet-ui/src/date-picker/DatePicker.vue
@@ -22,7 +22,7 @@
         <transition
           :name="multiple ? '' : reverse ? 'var-date-picker-reverse-translatey' : 'var-date-picker-translatey'"
         >
-          <div :key="range || multiple || chooseYear + chooseMonth?.index" v-if="type === 'month'">
+          <div :key="chooseYear + chooseMonth?.index" v-if="type === 'month'">
             <slot name="range" :choose="getChoose.chooseRangeMonth" v-if="range">
               {{ getMonthTitle }}
             </slot>

diff --git a/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue
@@ -45,7 +45,7 @@ import dayjs from 'dayjs/esm'
 import isSameOrBefore from 'dayjs/esm/plugin/isSameOrBefore'
 import isSameOrAfter from 'dayjs/esm/plugin/isSameOrAfter'
 import PanelHeader from './panel-header.vue'
-import Button from '../../button'
+import VarButton from '../../button'
 import { WEEK_HEADER } from '../props'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'
@@ -58,7 +58,7 @@ dayjs.extend(isSameOrAfter)
 export default defineComponent({
   name: 'DayPickerPanel',
   components: {
-    [Button.name]: Button,
+    VarButton,
     PanelHeader,
   },
   props: {
@@ -75,7 +75,8 @@ export default defineComponent({
       required: true,
     },
     clickMonth: {
-      type: Function,
+      type: Function as PropType<() => void>,
+      required: true,
     },
     componentProps: {
       type: Object as PropType<ComponentProps>,

diff --git a/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue
@@ -4,8 +4,8 @@
       <panel-header
         type="month"
         :date="preview"
-        @check-panel="clickYear"
         :disabled="panelBtnDisabled"
+        @check-panel="clickYear"
         @check-date="checkDate"
       />
       <transition :name="reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'">
@@ -37,7 +37,7 @@ import isSameOrBefore from 'dayjs/esm/plugin/isSameOrBefore'
 import isSameOrAfter from 'dayjs/esm/plugin/isSameOrAfter'
 import { MONTH_LIST } from '../props'
 import PanelHeader from './panel-header.vue'
-import Button from '../../button'
+import VarButton from '../../button'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'
 import type { Ref, ComputedRef, UnwrapRef, PropType } from 'vue'
@@ -49,7 +49,7 @@ dayjs.extend(isSameOrAfter)
 export default defineComponent({
   name: 'MonthPickerPanel',
   components: {
-    [Button.name]: Button,
+    VarButton,
     PanelHeader,
   },
   props: {
@@ -66,7 +66,8 @@ export default defineComponent({
       required: true,
     },
     clickYear: {
-      type: Function,
+      type: Function as PropType<() => void>,
+      required: true,
     },
     componentProps: {
       type: Object as PropType<ComponentProps>,

diff --git a/packages/varlet-ui/src/date-picker/src/panel-header.vue b/packages/varlet-ui/src/date-picker/src/panel-header.vue
@@ -28,8 +28,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from 'vue'
-import Button from '../../button'
-import Icon from '../../icon'
+import VarButton from '../../button'
+import VarIcon from '../../icon'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'
 import type { Ref, ComputedRef, PropType } from 'vue'
@@ -38,8 +38,8 @@ import type { Preview, PanelBtnDisabled } from '../props'
 export default defineComponent({
   name: 'PanelHeader',
   components: {
-    [Button.name]: Button,
-    [Icon.name]: Icon,
+    VarButton,
+    VarIcon,
   },
   props: {
     date: {

diff --git a/packages/varlet-ui/src/index-anchor/IndexAnchor.vue b/packages/varlet-ui/src/index-anchor/IndexAnchor.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import Sticky from '../sticky'
+import VarSticky from '../sticky'
 import { computed, defineComponent, ref, Transition } from 'vue'
 import { useIndexBar } from './provide'
 import { props } from './props'
@@ -24,7 +24,7 @@ import type { IndexAnchorProvider } from './provide'
 export default defineComponent({
   name: 'VarIndexAnchor',
   components: {
-    [Sticky.name]: Sticky,
+    VarSticky,
   },
   inheritAttrs: false,
   props,
@@ -36,11 +36,6 @@ export default defineComponent({
     const name: ComputedRef<number | string | undefined> = computed(() => props.index)
     const anchorEl: Ref<HTMLDivElement | RendererNode | null> = ref(null)
 
-    if (!indexBar || !bindIndexBar) {
-      console.error('[Varlet] IndexAnchor: You should use this component in "IndexBar"')
-      return
-    }
-
     const { active, sticky, cssMode, stickyOffsetTop, zIndex } = indexBar
     const setOwnTop = () => {
       if (!anchorEl.value) return

diff --git a/packages/varlet-ui/src/index-anchor/provide.ts b/packages/varlet-ui/src/index-anchor/provide.ts
@@ -20,6 +20,10 @@ export function useIndexBar() {
   )
   const { index } = useAtParentIndex(INDEX_BAR_COUNT_INDEX_ANCHOR_KEY)
 
+  if (!parentProvider || !bindParent) {
+    throw Error('[Varlet] IndexAnchor: You should use this component in "IndexBar"')
+  }
+
   return {
     index,
     indexBar: parentProvider,

diff --git a/packages/varlet-ui/src/index-bar/IndexBar.vue b/packages/varlet-ui/src/index-bar/IndexBar.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="var-index-bar" ref="barEl">
     <slot />
-    <ul class="var-index-bar__anchor-list" :style="{ zIndex: zIndex + 2, display: hideList ? 'none' : 'block' }">
+    <ul
+      class="var-index-bar__anchor-list"
+      :style="{ zIndex: toNumber(zIndex) + 2, display: hideList ? 'none' : 'block' }"
+    >
       <li
         v-for="anchorName in anchorNameList"
         :key="anchorName"
@@ -145,6 +148,7 @@ export default defineComponent({
       active,
       zIndex,
       anchorNameList,
+      toNumber,
       scrollTo,
       anchorClick,
     }

diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
@@ -172,14 +172,14 @@ export default defineComponent({
 
     const normalizeValue = (value: string) => (isNumberValue.value ? toNumber(value) : value)
 
-    const handleFocus = (e: Event) => {
+    const handleFocus = (e: FocusEvent) => {
       isFocus.value = true
 
       props.onFocus?.(e)
       validateWithTrigger('onFocus')
     }
 
-    const handleBlur = (e: Event) => {
+    const handleBlur = (e: FocusEvent) => {
       isFocus.value = false
 
       props.onBlur?.(e)

diff --git a/packages/varlet-ui/src/loading/Loading.vue b/packages/varlet-ui/src/loading/Loading.vue
@@ -4,8 +4,8 @@
       <span
         class="var-loading__circle-block"
         :style="{
-          width: radius * 2 + 'px',
-          height: radius * 2 + 'px',
+          width: toNumber(radius) * 2 + 'px',
+          height: toNumber(radius) * 2 + 'px',
         }"
       >
         <svg viewBox="25 25 50 50">
@@ -30,6 +30,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { props } from './props'
+import { toNumber } from '../utils/shared'
 
 export default defineComponent({
   name: 'VarLoading',
@@ -44,6 +45,7 @@ export default defineComponent({
 
     return {
       loadingTypeDict,
+      toNumber,
     }
   },
 })

diff --git a/packages/varlet-ui/src/pagination/Pagination.vue b/packages/varlet-ui/src/pagination/Pagination.vue
@@ -28,7 +28,7 @@
       v-else
       v-ripple="{ disabled }"
       v-for="(item, index) in pageList"
-      :key="item + index"
+      :key="toNumber(item) + index"
       :item-mode="getMode(item, index)"
       class="var-pagination__item var-elevation--2"
       :class="{
@@ -101,11 +101,11 @@
 </template>
 
 <script lang="ts">
-import Menu from '../menu'
+import VarMenu from '../menu'
 import Ripple from '../ripple'
-import Icon from '../icon'
-import Cell from '../cell'
-import Input from '../input'
+import VarIcon from '../icon'
+import VarCell from '../cell'
+import VarInput from '../input'
 import { defineComponent, ref, computed, watch } from 'vue'
 import { props } from './porps'
 import { isNumber, toNumber } from '../utils/shared'
@@ -116,10 +116,10 @@ import type { Range } from './porps'
 export default defineComponent({
   name: 'VarPagination',
   components: {
-    [Menu.name]: Menu,
-    [Icon.name]: Icon,
-    [Cell.name]: Cell,
-    [Input.name]: Input,
+    VarMenu,
+    VarIcon,
+    VarCell,
+    VarInput,
   },
   directives: { Ripple },
   props,
@@ -295,6 +295,7 @@ export default defineComponent({
       showMenu,
       clickSize,
       setPage,
+      toNumber,
     }
   },
 })

diff --git a/packages/varlet-ui/src/pagination/porps.ts b/packages/varlet-ui/src/pagination/porps.ts
@@ -35,7 +35,7 @@ export const props = {
     default: false,
   },
   sizeOption: {
-    type: Array,
+    type: Array as PropType<Array<number>>,
     default: () => [10, 20, 50, 100],
   },
   showTotal: {

diff --git a/packages/varlet-ui/src/pull-refresh/PullRefresh.vue b/packages/varlet-ui/src/pull-refresh/PullRefresh.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import Icon from '../icon'
+import VarIcon from '../icon'
 import { defineComponent, ref, computed, watch, onMounted } from 'vue'
 import { getParentScroller, getScrollTop } from '../utils/elements'
 import { props } from './props'
@@ -35,7 +35,7 @@ let scroller: HTMLElement | Window = window
 export default defineComponent({
   name: 'VarPullRefresh',
   components: {
-    [Icon.name]: Icon,
+    VarIcon,
   },
   props,
   setup(props) {