@uxda/appkit 4.0.0 → 4.0.2

package/src/components/bt-cropper/utils/calcCropper.js

@@ -0,0 +1,42 @@
+import ratio from './ratio'
+import calcRightAndBottom from './calcRightAndBottom'
+const defaultImagePosition = {
+  left: 0,
+  top: 0,
+  width: 9,
+  height: 16
+}
+const defaultTarget = {
+  width: 2,
+  height: 1
+}
+/**
+ * 计算初始的裁剪框位置
+ * @param {*} imagePosition
+ * @param {*} target
+ */
+export default function (imagePosition = defaultImagePosition, target = defaultTarget) {
+  const cropperPosition = {
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 0,
+    height: 0
+  }
+  const targetRatio = ratio(target.width, target.height)
+  const imageRatio = ratio(imagePosition.width, imagePosition.height)
+  if (targetRatio > imageRatio) {
+    cropperPosition.width = imagePosition.width
+    cropperPosition.height = cropperPosition.width / targetRatio
+    cropperPosition.left = imagePosition.left
+    cropperPosition.top = (imagePosition.height - cropperPosition.height) / 2 + imagePosition.top
+  } else {
+    cropperPosition.height = imagePosition.height
+    cropperPosition.width =
+      targetRatio === 0 ? imagePosition.width : cropperPosition.height * targetRatio
+    cropperPosition.left = (imagePosition.width - cropperPosition.width) / 2 + imagePosition.left
+    cropperPosition.top = imagePosition.top
+  }
+  return calcRightAndBottom(cropperPosition)
+}

package/src/components/bt-cropper/utils/calcImagePosition.js

@@ -0,0 +1,23 @@
+import calcRightAndBottom from './calcRightAndBottom'
+const defaultPosition = {
+  left: 0,
+  top: 0,
+  width: 0,
+  height: 0
+}
+const defaultTransfrom = {
+  imgTranslateX: 0,
+  imgTranslateY: 0,
+  imgScale: 1
+}
+// 先默认变换原点在中间
+export default function (imagePosition = defaultPosition, transfrom = defaultTransfrom) {
+  const width = imagePosition.width * transfrom.imgScale
+  const height = imagePosition.height * transfrom.imgScale
+  return calcRightAndBottom({
+    left: imagePosition.left + transfrom.imgTranslateX - (width - imagePosition.width) / 2,
+    top: imagePosition.top + transfrom.imgTranslateY - (height - imagePosition.height) / 2,
+    width,
+    height
+  })
+}

package/src/components/bt-cropper/utils/calcImageSize.js

@@ -0,0 +1,37 @@
+import ratio from './ratio.js'
+export default async function (
+  imageInfo,
+  container = {
+    width: 9,
+    height: 16
+  }
+) {
+  const defaultcontainer = {
+    width: 9,
+    height: 16
+  }
+  if (!container) {
+    container = defaultcontainer
+  }
+  const containerRatio = ratio(container.width, container.height)
+  const imageRatio = ratio(imageInfo.width, imageInfo.height)
+  if (containerRatio > imageRatio) {
+    const width = container.height * imageRatio
+    const height = container.height
+    return {
+      width,
+      height,
+      left: (container.width - width) / 2,
+      top: 0
+    }
+  } else {
+    const width = container.width
+    const height = container.width / imageRatio
+    return {
+      width,
+      height,
+      left: 0,
+      top: (container.height - height) / 2
+    }
+  }
+}

package/src/components/bt-cropper/utils/calcPointDistance.js

@@ -0,0 +1,12 @@
+/**
+ * 计算两点之间距离
+ * @param {*} point1
+ * @param {*} point2
+ */
+export default function (point1 = [0, 0], point2 = [0, 0]) {
+  const X1 = point1[0],
+    X2 = point2[0],
+    Y1 = point1[1],
+    Y2 = point2[1]
+  return Math.sqrt(Math.pow(X1 - X2, 2) + Math.pow(Y1 - Y2, 2))
+}

package/src/components/bt-cropper/utils/calcRightAndBottom.js

@@ -0,0 +1,7 @@
+export default function (position) {
+  return {
+    ...position,
+    right: position.left + position.width,
+    bottom: position.top + position.height
+  }
+}

package/src/components/bt-cropper/utils/ratio.js

@@ -0,0 +1,3 @@
+export default function (width = 2, height = 1) {
+  return width / height
+}

package/src/components/bt-cropper/utils/tools.js

@@ -0,0 +1,25 @@
+export function getTouchPoints(touchs) {
+  return Array.from(touchs).map((ev) => {
+    return [ev.clientX, ev.clientY]
+  })
+}
+export function debounce(fn, wait = 200) {
+  var timer = null
+  console.log('debounce')
+  return function () {
+    if (timer !== null) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(fn, wait)
+  }
+}
+
+/**
+ * @description 睡眠
+ * @param {number} time 等待时间毫秒数
+ */
+export function sleep(time = 200) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+}

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  |