@uxda/appkit 4.2.0 → 4.2.2

package/src/components/dd-area/index.vue

@@ -1,225 +1,225 @@
-<!--* NAME: index-->
-<!--* AUTHOR: yanglong-->
-<!--* UPDATE: 2022-02-21 17:43-->
-<!--* TIP: 微信原生实现多列选择器-->
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import Taro from '@tarojs/taro'
-import DdIcon from '../dd-icon/index.vue'
-
-interface AreaItem {
-  value: string
-  shortId: string
-  label: string
-  children: AreaItem[]
-}
-
-export type AreaType = 'province' | 'city' | 'region'
-
-export interface PropsType {
-  value?: string // 地址code
-  rightIcon?: boolean
-  placeholder?: string
-  disabled?: boolean
-  type?: AreaType
-  formatter?: (values: AreaItem[]) => string
-}
-
-const props = withDefaults(defineProps<PropsType>(), {
-  value: '',
-  rightIcon: true,
-  placeholder: '请选择',
-  disabled: false,
-  type: 'region',
-  formatter: (values: AreaItem[]) => values.map((item: AreaItem) => item.label).join(''),
-})
-const emit = defineEmits(['update:value', 'change', 'cancel'])
-
-const areaFormatOptions = computed<AreaItem[]>(() => {
-  const { province_list, city_list, county_list } = JSON.parse(Taro.getStorageSync('wechat_area'))
-  const map = new Map()
-  city_list.forEach((item: any) => {
-    const provinceShortId = item.id.slice(0, 2)
-    if (!map.has(provinceShortId)) {
-      map.set(provinceShortId, [])
-    }
-    map.get(provinceShortId).push({
-      ...item,
-      shortId: item.id.slice(0, 4),
-    })
-  })
-  county_list.forEach((item: any) => {
-    const cityShortId = item.id.slice(0, 4)
-    if (!map.has(cityShortId)) {
-      map.set(cityShortId, [])
-    }
-    map.get(cityShortId).push({
-      ...item,
-      shortId: item.id,
-    })
-  })
-  return province_list.map((province: any) => {
-    const provinceShortId = province.id.slice(0, 2)
-    return {
-      value: province.id,
-      shortId: provinceShortId,
-      label: province.name,
-      children:
-        (map.get(provinceShortId) || []).map((city: any) => ({
-          value: city.id,
-          shortId: city.shortId,
-          label: city.name,
-          children:
-            (map.get(city.shortId) || []).map((region: any) => ({
-              value: region.id,
-              shortId: region.shortId,
-              label: region.name,
-              children: [],
-            })) || [],
-        })) || [],
-    }
-  })
-})
-
-const tmpSelectedIndex = ref<number[]>([0, 0, 0])
-const selectedIndex = ref<number[]>([0, 0, 0])
-const selectedItem = ref<AreaItem[]>([])
-
-const options = computed<AreaItem[][]>(() => {
-  const provinceOption = areaFormatOptions.value
-  if (props.type === 'province') {
-    return [provinceOption]
-  }
-  const cityOption = (provinceOption[tmpSelectedIndex.value[0]] || {}).children || []
-  if (props.type === 'city') {
-    return [provinceOption, cityOption]
-  }
-  const regionOption = (cityOption[tmpSelectedIndex.value[1]] || {}).children || []
-  return [provinceOption, cityOption, regionOption]
-})
-
-function init() {
-  selectedIndex.value = findIndexByValue()
-  tmpSelectedIndex.value = [...selectedIndex.value]
-  if (props.value) {
-    const items: any = []
-    for (let index = 0; index < options.value.length; index++) {
-      const item = (options.value[index] || {})[selectedIndex.value[index]]
-      if (item) {
-        items.push(item)
-      }
-    }
-    selectedItem.value = items
-  }
-}
-
-function findIndexByValue() {
-  if (props.value) {
-    const provinceId = props.value.slice(0, 2).toString().padEnd(6, '0')
-    const cityId = props.value.slice(0, 4).toString().padEnd(6, '0')
-    const regionId = props.value.toString()
-    for (let provinceIndex = 0; provinceIndex < areaFormatOptions.value.length; provinceIndex++) {
-      const province = areaFormatOptions.value[provinceIndex]
-      if (provinceId == province.value) {
-        for (let cityIndex = 0; cityIndex < province.children.length; cityIndex++) {
-          const city = province.children[cityIndex]
-          if (cityId == city.value) {
-            for (let regionIndex = 0; regionIndex < city.children.length; regionIndex++) {
-              const region = city.children[regionIndex]
-              if (regionId == region.value) {
-                return [provinceIndex, cityIndex, regionIndex]
-              }
-            }
-            return [provinceIndex, cityIndex, 0]
-          }
-        }
-        return [provinceIndex, 0, 0]
-      }
-    }
-  }
-  return [0, 0, 0]
-}
-
-function onChange() {
-  const lastSelectedIndex = options.value.length - 1
-  const result: any = {
-    values: [],
-    labels: [],
-  }
-  for (let index = 0; index <= lastSelectedIndex; index++) {
-    const item = (options.value[index] || {})[tmpSelectedIndex.value[index]]
-    if (item) {
-      result.values.push(item.value)
-      result.labels.push(item.label)
-    }
-  }
-  emit('update:value', result.values[result.values.length - 1])
-  emit('change', result)
-  console.log(result)
-}
-
-function onCancel(e: any) {
-  init()
-  emit('cancel', e)
-}
-
-function onColumnChange({ detail: { column, value } }) {
-  const resetIndex = Array.from({ length: tmpSelectedIndex.value.length - column - 1 }).fill(0)
-  tmpSelectedIndex.value = [...tmpSelectedIndex.value.slice(0, column), value, ...resetIndex]
-  console.log(tmpSelectedIndex.value)
-}
-
-watch(
-  () => props.value,
-  () => {
-    init()
-  },
-  { deep: true, immediate: true }
-)
-</script>
-
-<template>
-  <picker
-    :range="options"
-    range-key="label"
-    :value="tmpSelectedIndex"
-    mode="multiSelector"
-    @columnchange="onColumnChange"
-    @change="onChange"
-    @cancel="onCancel"
-    style="flex: 1"
-    :disabled="props.disabled"
-  >
-    <div class="dd-area">
-      <div :class="props.value && !props.disabled ? 'dd-area-value' : 'dd-area-label'">
-        {{ props.value ? props.formatter(selectedItem) : props.placeholder }}
-      </div>
-      <slot name="icon">
-        <DdIcon
-          v-if="props.rightIcon"
-          name="icon-arrow"
-          size="11px"
-          :color="props.value !== '' && !props.disabled ? '#353535' : '#DFDFDF'"
-          class="icon-arrow"
-        />
-      </slot>
-    </div>
-  </picker>
-</template>
-
-<style lang="scss">
-.dd-area {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-
-  &-value {
-    text-align: right;
-    color: black;
-  }
-
-  &-label {
-    color: var(--placeholder-color);
-  }
-}
-</style>
+<!--* NAME: index-->
+<!--* AUTHOR: yanglong-->
+<!--* UPDATE: 2022-02-21 17:43-->
+<!--* TIP: 微信原生实现多列选择器-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import Taro from '@tarojs/taro'
+import DdIcon from '../dd-icon/index.vue'
+
+interface AreaItem {
+  value: string
+  shortId: string
+  label: string
+  children: AreaItem[]
+}
+
+export type AreaType = 'province' | 'city' | 'region'
+
+export interface PropsType {
+  value?: string // 地址code
+  rightIcon?: boolean
+  placeholder?: string
+  disabled?: boolean
+  type?: AreaType
+  formatter?: (values: AreaItem[]) => string
+}
+
+const props = withDefaults(defineProps<PropsType>(), {
+  value: '',
+  rightIcon: true,
+  placeholder: '请选择',
+  disabled: false,
+  type: 'region',
+  formatter: (values: AreaItem[]) => values.map((item: AreaItem) => item.label).join(''),
+})
+const emit = defineEmits(['update:value', 'change', 'cancel'])
+
+const areaFormatOptions = computed<AreaItem[]>(() => {
+  const { province_list, city_list, county_list } = JSON.parse(Taro.getStorageSync('wechat_area'))
+  const map = new Map()
+  city_list.forEach((item: any) => {
+    const provinceShortId = item.id.slice(0, 2)
+    if (!map.has(provinceShortId)) {
+      map.set(provinceShortId, [])
+    }
+    map.get(provinceShortId).push({
+      ...item,
+      shortId: item.id.slice(0, 4),
+    })
+  })
+  county_list.forEach((item: any) => {
+    const cityShortId = item.id.slice(0, 4)
+    if (!map.has(cityShortId)) {
+      map.set(cityShortId, [])
+    }
+    map.get(cityShortId).push({
+      ...item,
+      shortId: item.id,
+    })
+  })
+  return province_list.map((province: any) => {
+    const provinceShortId = province.id.slice(0, 2)
+    return {
+      value: province.id,
+      shortId: provinceShortId,
+      label: province.name,
+      children:
+        (map.get(provinceShortId) || []).map((city: any) => ({
+          value: city.id,
+          shortId: city.shortId,
+          label: city.name,
+          children:
+            (map.get(city.shortId) || []).map((region: any) => ({
+              value: region.id,
+              shortId: region.shortId,
+              label: region.name,
+              children: [],
+            })) || [],
+        })) || [],
+    }
+  })
+})
+
+const tmpSelectedIndex = ref<number[]>([0, 0, 0])
+const selectedIndex = ref<number[]>([0, 0, 0])
+const selectedItem = ref<AreaItem[]>([])
+
+const options = computed<AreaItem[][]>(() => {
+  const provinceOption = areaFormatOptions.value
+  if (props.type === 'province') {
+    return [provinceOption]
+  }
+  const cityOption = (provinceOption[tmpSelectedIndex.value[0]] || {}).children || []
+  if (props.type === 'city') {
+    return [provinceOption, cityOption]
+  }
+  const regionOption = (cityOption[tmpSelectedIndex.value[1]] || {}).children || []
+  return [provinceOption, cityOption, regionOption]
+})
+
+function init() {
+  selectedIndex.value = findIndexByValue()
+  tmpSelectedIndex.value = [...selectedIndex.value]
+  if (props.value) {
+    const items: any = []
+    for (let index = 0; index < options.value.length; index++) {
+      const item = (options.value[index] || {})[selectedIndex.value[index]]
+      if (item) {
+        items.push(item)
+      }
+    }
+    selectedItem.value = items
+  }
+}
+
+function findIndexByValue() {
+  if (props.value) {
+    const provinceId = props.value.slice(0, 2).toString().padEnd(6, '0')
+    const cityId = props.value.slice(0, 4).toString().padEnd(6, '0')
+    const regionId = props.value.toString()
+    for (let provinceIndex = 0; provinceIndex < areaFormatOptions.value.length; provinceIndex++) {
+      const province = areaFormatOptions.value[provinceIndex]
+      if (provinceId == province.value) {
+        for (let cityIndex = 0; cityIndex < province.children.length; cityIndex++) {
+          const city = province.children[cityIndex]
+          if (cityId == city.value) {
+            for (let regionIndex = 0; regionIndex < city.children.length; regionIndex++) {
+              const region = city.children[regionIndex]
+              if (regionId == region.value) {
+                return [provinceIndex, cityIndex, regionIndex]
+              }
+            }
+            return [provinceIndex, cityIndex, 0]
+          }
+        }
+        return [provinceIndex, 0, 0]
+      }
+    }
+  }
+  return [0, 0, 0]
+}
+
+function onChange() {
+  const lastSelectedIndex = options.value.length - 1
+  const result: any = {
+    values: [],
+    labels: [],
+  }
+  for (let index = 0; index <= lastSelectedIndex; index++) {
+    const item = (options.value[index] || {})[tmpSelectedIndex.value[index]]
+    if (item) {
+      result.values.push(item.value)
+      result.labels.push(item.label)
+    }
+  }
+  emit('update:value', result.values[result.values.length - 1])
+  emit('change', result)
+  console.log(result)
+}
+
+function onCancel(e: any) {
+  init()
+  emit('cancel', e)
+}
+
+function onColumnChange({ detail: { column, value } }) {
+  const resetIndex = Array.from({ length: tmpSelectedIndex.value.length - column - 1 }).fill(0)
+  tmpSelectedIndex.value = [...tmpSelectedIndex.value.slice(0, column), value, ...resetIndex]
+  console.log(tmpSelectedIndex.value)
+}
+
+watch(
+  () => props.value,
+  () => {
+    init()
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<template>
+  <picker
+    :range="options"
+    range-key="label"
+    :value="tmpSelectedIndex"
+    mode="multiSelector"
+    @columnchange="onColumnChange"
+    @change="onChange"
+    @cancel="onCancel"
+    style="flex: 1"
+    :disabled="props.disabled"
+  >
+    <div class="dd-area">
+      <div :class="props.value && !props.disabled ? 'dd-area-value' : 'dd-area-label'">
+        {{ props.value ? props.formatter(selectedItem) : props.placeholder }}
+      </div>
+      <slot name="icon">
+        <DdIcon
+          v-if="props.rightIcon"
+          name="icon-arrow"
+          size="11px"
+          :color="props.value !== '' && !props.disabled ? '#353535' : '#DFDFDF'"
+          class="icon-arrow"
+        />
+      </slot>
+    </div>
+  </picker>
+</template>
+
+<style lang="scss">
+.dd-area {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  &-value {
+    text-align: right;
+    color: black;
+  }
+
+  &-label {
+    color: var(--placeholder-color);
+  }
+}
+</style>

package/src/components/dd-icon/doc.md

@@ -1,21 +1,21 @@
-# ddIcon 空内容展示
-### 使用iconfont图标
-
-#
-## 使用
-
-``` javascript
-import ddIcon from '~/components/ddIcon/index.vue'
-```
-``` html
-<dd-icon name="icon-arrow" size="11px" color="#DFDFDF" />
-```
-
-## Prop
-
-| 字段       | 说明        | 类型    | 默认值   |
-|-----------|-------------|---------|----------|
-| name      |  icon名称  | string  | ''    |
-| color    |  icon颜色  | string  |  inherit  |
-| size   |  icon字体大小  | string  |  16px  |
-| weight  |  icon字体字重  | string  |  normal  |
+# ddIcon 空内容展示
+### 使用iconfont图标
+
+#
+## 使用
+
+``` javascript
+import ddIcon from '~/components/ddIcon/index.vue'
+```
+``` html
+<dd-icon name="icon-arrow" size="11px" color="#DFDFDF" />
+```
+
+## Prop
+
+| 字段       | 说明        | 类型    | 默认值   |
+|-----------|-------------|---------|----------|
+| name      |  icon名称  | string  | ''    |
+| color    |  icon颜色  | string  |  inherit  |
+| size   |  icon字体大小  | string  |  16px  |
+| weight  |  icon字体字重  | string  |  normal  |

package/src/components/dd-icon/index.vue

@@ -1,23 +1,23 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-const props = withDefaults(
-  defineProps<{
-    name: string
-    color?: string
-    size?: string
-    weight?: string
-  }>(),
-  {
-    color: 'inherit',
-    size: '16px',
-    weight: 'normal',
-  }
-)
-const styles = computed(() => {
-  return `color: ${props.color}; font-size: ${props.size}; font-weight: ${props.weight};`
-})
-</script>
-
-<template>
-  <view class="iconfont" :class="name" :style="styles"></view>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+const props = withDefaults(
+  defineProps<{
+    name: string
+    color?: string
+    size?: string
+    weight?: string
+  }>(),
+  {
+    color: 'inherit',
+    size: '16px',
+    weight: 'normal',
+  }
+)
+const styles = computed(() => {
+  return `color: ${props.color}; font-size: ${props.size}; font-weight: ${props.weight};`
+})
+</script>
+
+<template>
+  <view class="iconfont" :class="name" :style="styles"></view>
+</template>