dpzvc3-ui 3.0.7 → 3.1.1

package/src/views/LoadMore.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="LoadMore">
-    <LoadMore
+    <DpLoadMore
       ref="moreRef"
       :refresh="topMethod"
       height="100%"
@@ -15,40 +15,43 @@
       >
         {{ item }}
       </div>
-    </LoadMore>
+    </DpLoadMore>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
-
+// import DpLoadMore from '../components/loadMore'
+import type { LoadmoreProps } from '../components/loadMore/types'
 export default defineComponent({
   name: 'ViewLoadMore',
+  // components: { DpLoadMore },
   setup () {
     const moreRef = ref(null)
-    const hasMore = ref(true)
+    const hasMore = ref<LoadmoreProps['hasMore']>(true)
     const loadmore = ref(Array(16).fill('LoadMore'))
 
     const topMethod = () => {
       hasMore.value = true
 
       setTimeout(() => {
-        if (moreRef.value && moreRef.value.onLoadOff) {
-          moreRef.value.onLoadOff()
+        // console.log(moreRef.value, '----moreRef----')
+        if (moreRef.value && (moreRef.value as any).onLoadOff) {
+          (moreRef.value as any).onLoadOff()
         }
       }, 2000)
     }
 
     const bottomMethod = () => {
       setTimeout(() => {
-        if (moreRef.value && moreRef.value.onLoadOff) {
-          moreRef.value.onLoadOff()
+        if (moreRef.value && (moreRef.value as any).onLoadOff) {
+          (moreRef.value as any).onLoadOff()
         }
         loadmore.value.push(...['LoadMore', 'LoadMore'])
       }, 2000)
     }
 
-    const getStatus = (val) => {
+    const getStatus = (val: any) => {
       console.log(val)
     }
 

package/src/views/Message.vue

@@ -1,44 +1,44 @@
 <template>
   <div class="Message">
-    <VButton
+    <DpButton
       width="50%"
       @click="showMessageTop"
     >
       Top
-    </VButton>
-    <VButton
+    </DpButton>
+    <DpButton
       width="50%"
       @click="showMessage"
     >
       Center
-    </VButton>
-    <VButton
+    </DpButton>
+    <DpButton
       width="50%"
       @click="showMessageBottom"
     >
       Bottom
-    </VButton>
+    </DpButton>
   </div>
 </template>
 
-<script>
-import { getCurrentInstance } from 'vue'
+<script lang="ts">
+import { getCurrentInstance, defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   name: 'ViewMessage',
   setup () {
     // 获取全局实例
-    const { proxy } = getCurrentInstance()
+    const { proxy } = getCurrentInstance()!
     const showMessage = () => {
-      proxy.$Message.show({ text: '显示消息' })
+      proxy!.$Message.show({ text: '显示消息' })
     }
 
     const showMessageTop = () => {
-      proxy.$Message.show({ text: '显示消息', position: 'top' })
+      proxy!.$Message.show({ text: '显示消息', position: 'top' })
     }
 
     const showMessageBottom = () => {
-      proxy.$Message.show({ text: '显示消息', position: 'bottom' })
+      proxy!.$Message.show({ text: '显示消息', position: 'bottom' })
     }
 
     return {
@@ -47,7 +47,7 @@ export default {
       showMessageBottom
     }
   }
-}
+})
 </script>
 
 <style scoped>

package/src/views/Modal.vue

@@ -15,36 +15,36 @@
   </div>
 </template>
 
-<script>
-import { getCurrentInstance } from 'vue'
+<script lang="ts">
+import { getCurrentInstance, defineComponent } from 'vue'
 import VButton from '../components/button'
 
-export default {
+export default defineComponent({
   name: 'ViewModal',
   components: { VButton },
   setup () {
     // 获取实例，用来访问全局属性 $Modal / $Message
-    const { proxy } = getCurrentInstance()
+    const { proxy } = getCurrentInstance()!
 
     const showInfo = () => {
-      proxy.$Modal.info({
+      proxy!.$Modal.info({
         body: '这是内容',
         onOk: function () {
-          proxy.$Message.show({ text: '点击了确定' })
+          proxy!.$Message.show({ text: '点击了确定' })
           // console.log('点击了确定')
         },
         onCancle: function () {
-          proxy.$Message.show({ text: '点击了取消' })
+          proxy!.$Message.show({ text: '点击了取消' })
           // console.log('点击了取消')
         }
       })
     }
 
     const showConfirm = () => {
-      proxy.$Modal.confirm({
+      proxy!.$Modal.confirm({
         body: '这是内容',
         onOk: function () {
-          proxy.$Message.show({ text: '点击了确定' })
+          proxy!.$Message.show({ text: '点击了确定' })
           // console.log('点击了确定')
         }
       })
@@ -55,7 +55,7 @@ export default {
       showConfirm
     }
   }
-}
+})
 </script>
 
 <style lang="less" scoped>

package/src/views/Picker.vue

@@ -26,39 +26,41 @@
       @cancle="pickerCancle"
     />
     <div class="item">
-      <VButton
+      <DpButton
         width="30%"
         @click="DateVisible = true"
       >
         日期选择器
-      </VButton>
-      <VButton
+      </DpButton>
+      <DpButton
         width="30%"
         @click="AreaVisible = true"
       >
         地区选择器
-      </VButton>
-      <VButton
+      </DpButton>
+      <DpButton
         width="30%"
         @click="NormalVisible = true"
       >
         通用选择器
-      </VButton>
+      </DpButton>
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { ref, getCurrentInstance } from 'vue'
-
+// import Picker from '../components/picker'
+import type { PickerProps } from '../components/picker/types'
 export default {
   name: 'ViewPicker',
+  // components: { Picker },
   setup () {
-    const AreaVisible = ref(false)
-    const DateVisible = ref(false)
-    const NormalVisible = ref(false)
-    const initArrRef = ref([1, 3, 3])
-    const listRef = ref([
+    const AreaVisible = ref<PickerProps['modelValue']>(false)
+    const DateVisible = ref<PickerProps['modelValue']>(false)
+    const NormalVisible = ref<PickerProps['modelValue']>(false)
+    const initArrRef = ref<PickerProps['initArr']>([1, 3, 3])
+    const listRef = ref<PickerProps['list']>([
       {
         target: 'targetA',
         list: [{ value: 'a', code: 1 }, { value: 2, code: 2 }, { value: 3, code: 3 }, {
@@ -90,13 +92,13 @@ export default {
         }, { value: 9, code: 9 }, { value: 0, code: 0 }]
       }
     ]) // code为唯一值，value为显示出的具体文本
-    const { proxy } = getCurrentInstance()
+    const { proxy } = getCurrentInstance()!
     // 选择确定回调
-    function pickerSure (value) {
+    function pickerSure (value: any) {
       // console.log(value)
       // 如果全局 $Modal 可用
       if (proxy) {
-        proxy.$Modal.confirm({ body: value.formArea || value.formatDate || JSON.stringify(value) })
+        (proxy as any).$Modal.confirm({ body: value.formArea || value.formatDate || JSON.stringify(value) })
       }
       if (!value.formArea && !value.formatDate) {
         // console.log(value, 'value')
@@ -107,7 +109,7 @@ export default {
     // 选择取消回调
     function pickerCancle () {
       if (proxy) {
-        proxy.$Message.show({ text: '您选择了取消' })
+        (proxy as any).$Message.show({ text: '您选择了取消' })
       }
     }
 

package/src/views/Popup.vue

@@ -2,25 +2,25 @@
   <div class="Popup">
     <VButton
       width="50%"
-      @click.native="showPop('top')"
+      @click="() => showPop('top')"
     >
       Top
     </VButton>
     <VButton
       width="50%"
-      @click.native="showPop('right')"
+      @click="() => showPop('right')"
     >
       Right
     </VButton>
     <VButton
       width="50%"
-      @click.native="showPop('bottom')"
+      @click="() => showPop('bottom')"
     >
       Bottom
     </VButton>
     <VButton
       width="50%"
-      @click.native="showPop('left')"
+      @click="() => showPop('left')"
     >
       Left
     </VButton>
@@ -30,68 +30,74 @@
       :position="side"
       :width="width"
       :height="height"
-      show-mask=""
+      :show-mask="true"
     />
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, ref, nextTick } from 'vue'
+// import type { Side } from './dist/types/components/popup/types'
+type Side = 'top' | 'right' | 'bottom' | 'left'
 
-export default {
+export default defineComponent({
   name: 'ViewPopup',
-  data () {
-    return {
-      side: 'top',
-      show: false,
-      sideList: ['top', 'right', 'bottom', 'left'],
-      width: '100%',
-      height: '100%'
-    }
-  },
+  setup () {
+    const side = ref<Side>('top')
+    const show = ref(false)
+    const width = ref('100%')
+    const height = ref<string | number>('100%')
+    const sideList: Side[] = ['top', 'right', 'bottom', 'left']
 
-  methods: {
-    showPop (side) {
-      this.show = false
-      this.$nextTick(() => {
-        if (this.sideList.indexOf(side) < 0) side = 'top'
+    const showPop = (s: Side) => {
+      show.value = false
+      nextTick(() => {
+        if (!sideList.includes(s)) s = 'top'
 
-        switch (side) {
+        switch (s) {
         case 'top':
-          this.width = '100%'
-          this.height = 0
+          width.value = '100%'
+          height.value = 0
           break
         case 'right':
-          this.width = '70%'
-          this.height = '100%'
+          width.value = '70%'
+          height.value = '100%'
           break
         case 'bottom':
-          this.width = '100%'
-          this.height = '70%'
+          width.value = '100%'
+          height.value = '70%'
           break
         case 'left':
-          this.width = '70%'
-          this.height = '100%'
+          width.value = '70%'
+          height.value = '100%'
           break
         }
 
-        this.side = side
+        side.value = s
 
         setTimeout(() => {
-          this.show = true
+          show.value = true
         }, 350)
       })
     }
+
+    return {
+      side,
+      show,
+      width,
+      height,
+      showPop
+    }
   }
-}
+})
 </script>
 
 <style scoped>
-
-    .Popup {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        align-items: center;
-    }
+.Popup {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
 </style>

package/src/views/Progress.vue

@@ -7,20 +7,21 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
-
+// import DpProgress from '../components/progress'
+import type { ProgressProps } from '../components/progress'
 export default defineComponent({
   name: 'ViewDpProgress',
-
+  // components: { DpProgress },
   setup () {
-    const progress = ref(0)
+    const progress = ref<ProgressProps['modelValue']>('0')
     const barHeight = ref(5)
-    let timer = null
+    let timer:any = null
 
     onMounted(() => {
       timer = setInterval(() => {
-        progress.value += 1
+        progress.value = Number(progress.value) + 1
         if (progress.value >= 100) {
           clearInterval(timer)
           timer = null
@@ -29,6 +30,7 @@ export default defineComponent({
     })
 
     onBeforeUnmount(() => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       timer && clearInterval(timer)
     })
 

package/src/views/Prompt.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="Prompt">
-    <VButton
+    <DpButton
       width="50%"
       @click="showPrompt"
     >
       弹出Prompt
-    </VButton>
+    </DpButton>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, getCurrentInstance } from 'vue'
 
 export default defineComponent({
   name: 'ViewPrompt',
   setup () {
     // 获取当前组件实例
-    const { proxy } = getCurrentInstance()
+    const { proxy } = getCurrentInstance()!
 
     function showPrompt () {
-      proxy.$Prompt.info({
+      proxy?.$Prompt.info({
         title: 'Prompt',
         spec: 'ccc',
         text: 'vvvv'

package/src/views/RadioBox.vue

@@ -31,14 +31,16 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
-
+import type { RadioBoxProps, RadioGroupProps } from '../components/radioBox/types'
+// import { RadioBox, RadioBoxGroup } from '../components/radioBox'
 export default defineComponent({
   name: 'ViewRadioBox',
+  // components: { RadioBox, RadioBoxGroup },
   setup () {
-    const checked = ref(false)
-    const radio = ref('')
+    const checked = ref<RadioBoxProps['modelValue']>(false)
+    const radio = ref<RadioGroupProps['modelValue']>('')
 
     return {
       checked,

package/src/views/Rater.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="Rater">
     <p>可点击评分</p>
-    <Rater v-model="rate" />
+    <Rater
+      v-model="rate"
+      :max="5"
+    />
     <span>{{ rate }}</span>
 
     <p>不可点击评分</p>
@@ -13,11 +16,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
-
+// import Rater from '../components/rater/'
 export default defineComponent({
   name: 'ViewRater',
+  // components: { Rater },
   setup () {
     const rate = ref(0)
     const disabledRate = ref(4.5)

package/src/views/SlideBar.vue

@@ -31,19 +31,23 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
-
+import type { SlideBarProps } from '@/components/slideBar/types'
+// import SlideBar from '@/components/slideBar'
 export default defineComponent({
   name: 'ViewSlideBar',
+  components: {
+    // SlideBar
+  },
   setup () {
-    const items = ref([
+    const items = ref<SlideBarProps['list']>([
       { name: '选项一' },
       { name: '选项二' },
       { name: '选项三' }
     ])
-    const index = ref(1)
-    const changeIndex = (index) => {
+    const index = ref<SlideBarProps['index']>(1)
+    const changeIndex = (index: number) => {
       console.log(index)
     }
     return { items, index, changeIndex }

package/src/views/Spinner.vue

@@ -1,13 +1,25 @@
 <template>
   <div class="Spinner">
-    <Spinner />
+    <Spinner
+      :type="type"
+    />
   </div>
 </template>
 
-<script>
-export default {
-  name: 'ViewSpinner'
-}
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+// import Spinner from '../components/spinner'
+import type { SpinnerProps } from '../components/spinner'
+export default defineComponent({
+  name: 'ViewSpinner',
+  // components: { Spinner },
+  setup () {
+    const type = ref<SpinnerProps['type']>('double-bounce')
+    return {
+      type
+    }
+  }
+})
 </script>
 
 <style scoped>

package/src/views/Swipe.vue

@@ -14,13 +14,15 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
-
+// import Swipe from '../components/swipe'
+import type { SwipeProps } from '../components/swipe'
 export default defineComponent({
   name: 'ViewSwipe',
+  // components: { Swipe },
   setup () {
-    const files = ref([
+    const files = ref<SwipeProps['list']>([
       {
         id: 521,
         ad_id: 10,

package/src/views/SwitchBar.vue

@@ -13,14 +13,16 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
-
+// import SwitchBar from '../components/switchbar'
+import type { SwitchBarProps } from '../components/switchbar/types'
 export default defineComponent({
   name: 'ViewSwitchBar',
+  // components: { SwitchBar },
   setup () {
-    const checkLarge = ref(false)
-    const checkSmall = ref(false)
+    const checkLarge = ref<SwitchBarProps['modelValue']>(false)
+    const checkSmall = ref<SwitchBarProps['modelValue']>(false)
 
     return {
       checkLarge,

package/src/views/Tab.vue

@@ -9,13 +9,15 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, ref } from 'vue'
-
+// import Tab from '../components/tab'
+import type { TabProps } from '../components/tab/types'
 export default defineComponent({
   name: 'ViewTab',
+  // components: { Tab },
   setup () {
-    const items = ref([
+    const items = ref<TabProps['items']>([
       {
         path: '/guide',
         name: '首页',
@@ -30,9 +32,9 @@ export default defineComponent({
       }
     ])
 
-    const index = ref(0)
-    const hasBorder = ref(true)
-    const styles = ref({
+    const index = ref<TabProps['index']>(0)
+    const hasBorder = ref<TabProps['border']>(true)
+    const styles = ref<TabProps['styles']>({
       bottom: 0
     })