@tplc/wot 1.0.7 → 1.0.8

package/components/wd-keyboard/index.scss

@@ -0,0 +1,102 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+.wot-theme-dark {
+  @include b(keyboard) {
+    background: $-dark-background5;
+
+    @include e(header) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(keyboard) {
+  width: 100%;
+  background: $-keyboard-background;
+  color: $-color-black;
+  user-select: none;
+
+  @include m(with-title) {
+    border-radius: 20px 20px 0 0;
+  }
+
+  @include e(header) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    height: $-keyboard-title-height;
+    padding-top: 6px;
+    color: $-keyboard-title-color;
+    font-size: $-keyboard-title-font-size;
+  }
+
+  @include e(title) {
+    display: inline-block;
+    font-weight: normal;
+
+    &-left {
+      position: absolute;
+      left: 0;
+    }
+  }
+
+  @include e(body) {
+    display: flex;
+    padding: 6px 0 0 6px;
+  }
+
+  @include e(keys) {
+    display: flex;
+    flex: 3;
+    flex-wrap: wrap;
+  }
+
+  &-car {
+    @include e(body) {
+      display: flex;
+      padding: 6px 0 0 6px;
+    }
+  }
+
+  &-car {
+    @include e(keys) {
+      display: flex;
+      flex: 10;
+      flex-wrap: wrap;
+
+      .wd-key-wrapper {
+        --wot-keyboard-key-font-size: 18px;
+        flex-basis: 10%;
+
+        @include m(wider) {
+          flex-basis: 20%;
+        }
+      }
+    }
+  }
+
+  @include e(close) {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    right: 0;
+    height: 100%;
+    padding: $-keyboard-close-padding;
+    color: $-keyboard-close-color;
+    font-size: $-keyboard-close-font-size;
+    background-color: transparent;
+    border: none;
+    @include m(hover) {
+      opacity: 0.6;
+    }
+  }
+
+  @include e(sidebar) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}

package/components/wd-keyboard/key/index.scss

@@ -0,0 +1,79 @@
+@import './../../common/abstracts/_mixin.scss';
+@import './../../common/abstracts/variable.scss';
+
+.wot-theme-dark {
+  @include b(key) {
+    background: $-dark-background2;
+    color: $-dark-color;
+
+    &:active {
+      background-color: $-dark-background4;
+    }
+
+    @include m(active) {
+      background-color: $-dark-background4;
+    }
+  }
+}
+
+.wd-key-wrapper {
+  position: relative;
+  flex: 1;
+  flex-basis: 33%;
+  box-sizing: border-box;
+  padding: 0 6px 6px 0;
+
+  @include m(wider) {
+    flex-basis: 66%;
+  }
+}
+
+@include b(key) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: $-keyboard-key-height;
+  font-size: $-keyboard-key-font-size;
+  line-height: 1.5;
+  background: $-keyboard-key-background;
+  border-radius: $-keyboard-key-border-radius;
+
+  &:active {
+    background-color: $-keyboard-key-active-color;
+  }
+
+  @include m(large) {
+    position: absolute;
+    top: 0;
+    right: 6px;
+    bottom: 6px;
+    left: 0;
+    height: auto;
+  }
+
+  @include m(delete, close) {
+    font-size: $-keyboard-delete-font-size;
+  }
+
+  @include m(active) {
+    background-color: $-keyboard-key-active-color;
+  }
+
+  @include m(close) {
+    color: $-keyboard-button-text-color;
+    background: $-keyboard-button-background;
+
+    &:active {
+      background: $-keyboard-button-background;
+      opacity: $-keyboard-button-active-opacity;
+    }
+  }
+
+  @include edeep(loading-icon) {
+    color: $-keyboard-button-text-color;
+  }
+
+  @include edeep(icon) {
+    font-size: $-keyboard-icon-size;
+  }
+}

package/components/wd-keyboard/key/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <view :class="`wd-key-wrapper ${wider ? 'wd-key-wrapper--wider' : ''}`" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+    <view :class="keyClass">
+      <wd-loading custom-class="wd-key__loading-icon" v-if="props.loading" />
+      <template v-if="type === 'delete'">
+        <template v-if="text">
+          {{ text }}
+        </template>
+        <wd-icon v-else custom-class="wd-key__icon" name="keyboard-delete" size="22px"></wd-icon>
+      </template>
+      <template v-else-if="type === 'extra'">
+        <template v-if="text">
+          {{ text }}
+        </template>
+        <wd-icon v-else custom-class="wd-key__icon" name="keyboard-collapse" size="22px"></wd-icon>
+      </template>
+      <template v-else>{{ text }}</template>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-key',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useTouch } from '../../composables/useTouch'
+import { keyProps } from './types'
+
+const props = defineProps(keyProps)
+const emit = defineEmits(['press'])
+
+const touch = useTouch()
+const active = ref<boolean>(false)
+
+const keyClass = computed(() => {
+  return `wd-key ${props.large ? 'wd-key--large' : ''} ${props.type === 'delete' ? 'wd-key--delete' : ''} ${
+    props.type === 'close' ? 'wd-key--close' : ''
+  }`
+})
+
+function onTouchStart(event: TouchEvent) {
+  touch.touchStart(event)
+  active.value = true
+}
+
+function onTouchMove(event: TouchEvent) {
+  touch.touchMove(event)
+  if (touch.direction.value) {
+    active.value = false
+  }
+}
+
+function onTouchEnd() {
+  if (active.value) {
+    active.value = false
+    emit('press', props.text, props.type)
+  }
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/wd-keyboard/key/types.ts

@@ -0,0 +1,11 @@
+import { makeBooleanProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+export type NumberKeyType = '' | 'delete' | 'extra' | 'close'
+
+export const keyProps = {
+  type: makeStringProp<NumberKeyType>(''),
+  text: makeNumericProp(''),
+  wider: makeBooleanProp(false),
+  large: makeBooleanProp(false),
+  loading: makeBooleanProp(false)
+}

package/components/wd-keyboard/types.ts

@@ -0,0 +1,92 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type KeyboardMode = 'default' | 'custom' | 'car'
+export type KeyType = '' | 'delete' | 'extra' | 'close'
+export type CarKeyboardLang = 'zh' | 'en'
+
+export interface Key {
+  text?: number | string // key文本
+  type?: KeyType // key的类型
+  wider?: boolean // 是否占2个key的宽度
+}
+
+export const keyboardProps = {
+  ...baseProps,
+  /**
+   * 是否可见
+   */
+  visible: makeBooleanProp(false),
+  /**
+   * 绑定的值
+   */
+  modelValue: makeStringProp(''),
+  /**
+   * 标题
+   */
+  title: String,
+  /**
+   * 键盘模式
+   */
+  mode: makeStringProp<KeyboardMode>('default'),
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(100),
+  /**
+   * 最大长度
+   */
+  maxlength: makeNumberProp(Infinity),
+  /**
+   * 是否显示删除键
+   */
+  showDeleteKey: makeBooleanProp(true),
+  /**
+   * 是否随机键盘按键顺序
+   */
+  randomKeyOrder: makeBooleanProp(false),
+  /**
+   * 确认按钮文本
+   */
+  closeText: String,
+  /**
+   * 删除按钮文本
+   */
+  deleteText: String,
+  /**
+   * 关闭按钮是否显示加载状态
+   */
+  closeButtonLoading: makeBooleanProp(false),
+  /**
+   * 是否显示蒙层
+   */
+  modal: makeBooleanProp(false),
+  /**
+   * 是否在点击外部时收起键盘
+   */
+  hideOnClickOutside: makeBooleanProp(true),
+  /**
+   * 是否锁定滚动
+   */
+  lockScroll: makeBooleanProp(true),
+  /**
+   * 是否在底部安全区域内
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 额外按键
+   */
+  extraKey: [String, Array] as PropType<string | Array<string>>,
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 车牌键盘语言模式 当mode=car时生效
+   */
+  carLang: String as PropType<CarKeyboardLang>,
+  /**
+   * 是否自动切换车牌键盘语言 当mode=car且carLang是非受控状态时生效
+   */
+  autoSwitchLang: makeBooleanProp(false)
+}

package/components/wd-keyboard/wd-keyboard.vue

@@ -0,0 +1,206 @@
+<template>
+  <wd-popup
+    v-model="show"
+    position="bottom"
+    :z-index="zIndex"
+    :safe-area-inset-bottom="safeAreaInsetBottom"
+    :modal-style="modal ? '' : 'opacity: 0;'"
+    :modal="hideOnClickOutside"
+    :lockScroll="lockScroll"
+    :root-portal="rootPortal"
+    @click-modal="handleClose"
+  >
+    <view :class="`wd-keyboard ${customClass}`" :style="customStyle">
+      <view class="wd-keyboard__header" v-if="showHeader">
+        <slot name="title" v-if="showTitle">
+          <text class="wd-keyboard__title">{{ title }}</text>
+        </slot>
+        <view class="wd-keyboard__close" hover-class="wd-keyboard__close--hover" v-if="showClose" @click="handleClose">
+          <text>{{ closeText }}</text>
+        </view>
+      </view>
+      <template v-if="mode !== 'car'">
+        <view class="wd-keyboard__body">
+          <view class="wd-keyboard__keys">
+            <wd-key v-for="key in keys" :key="key.text" :text="key.text" :type="key.type" :wider="key.wider" @press="handlePress"></wd-key>
+          </view>
+          <view class="wd-keyboard__sidebar" v-if="mode === 'custom'">
+            <wd-key v-if="showDeleteKey" large :text="deleteText" type="delete" @press="handlePress"></wd-key>
+            <wd-key large :text="closeText" type="close" :loading="closeButtonLoading" @press="handlePress"></wd-key>
+          </view>
+        </view>
+      </template>
+      <template v-if="mode === 'car'">
+        <view class="wd-keyboard-car__body">
+          <view class="wd-keyboard-car__keys">
+            <wd-key v-for="key in keys" :key="key.text" :text="key.text" :type="key.type" :wider="key.wider" @press="handlePress"></wd-key>
+          </view>
+        </view>
+      </template>
+    </view>
+  </wd-popup>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-keyboard',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch, useSlots } from 'vue'
+import wdPopup from '../wd-popup/wd-popup.vue'
+import WdKey from './key/index.vue'
+import { keyboardProps, type Key, type CarKeyboardLang } from './types'
+import type { NumberKeyType } from './key/types'
+import { CAR_KEYBOARD_AREAS, CAR_KEYBOARD_KEYS } from './constants'
+
+const props = defineProps(keyboardProps)
+const emit = defineEmits(['update:visible', 'input', 'close', 'delete', 'update:modelValue', 'update:carLang'])
+const slots = useSlots()
+
+const show = ref(props.visible)
+watch(
+  () => props.visible,
+  (newValue) => {
+    show.value = newValue
+  }
+)
+
+const carLang = ref<CarKeyboardLang>('zh')
+const carKeyboardLang = computed({
+  get: () => (props.carLang ? props.carLang : carLang.value),
+  set: (value: CarKeyboardLang) => {
+    carLang.value = value
+  }
+})
+
+const keys = computed(() => (props.mode !== 'car' ? (props.mode === 'custom' ? genCustomKeys() : genDefaultKeys()) : genCarKeys()))
+
+const showClose = computed(() => {
+  return props.closeText && (props.mode === 'default' || props.mode === 'car')
+})
+
+const showTitle = computed(() => {
+  return !!props.title || !!slots.title
+})
+
+const showHeader = computed(() => {
+  return showTitle.value || showClose.value
+})
+
+/**
+ * 随机打乱数组的顺序
+ * @param arr 要打乱顺序的数组
+ * @returns 打乱顺序后的数组
+ */
+function shuffleArray<T>(arr: T[]): T[] {
+  const newArr = [...arr]
+  for (let i = newArr.length - 1; i > 0; i--) {
+    // 生成一个随机索引 j，范围是 [0, i]
+    const j = Math.floor(Math.random() * (i + 1))
+
+    // 交换索引 i 和 j 处的元素
+    ;[newArr[i], newArr[j]] = [newArr[j], newArr[i]]
+  }
+  return newArr
+}
+function genBasicKeys(): Key[] {
+  const keys = Array.from({ length: 9 }, (_, i) => ({ text: i + 1 }))
+
+  // 如果需要随机顺序，则调用 shuffleArray 方法打乱数组顺序
+  return props.randomKeyOrder ? shuffleArray(keys) : keys
+}
+
+function genDefaultKeys(): Key[] {
+  return [
+    ...genBasicKeys(),
+    { text: props.extraKey as string, type: 'extra' },
+    { text: 0 },
+    {
+      // 根据条件是否显示删除键的文本和类型
+      text: props.showDeleteKey ? props.deleteText : '',
+      type: props.showDeleteKey ? 'delete' : ''
+    }
+  ]
+}
+
+function genCustomKeys(): Key[] {
+  const keys = genBasicKeys()
+  const extraKeys = Array.isArray(props.extraKey) ? props.extraKey : [props.extraKey]
+  if (extraKeys.length === 1) {
+    // 如果只有一个额外按键，则添加一个宽度较大的数字0和一个额外按键
+    keys.push({ text: 0, wider: true }, { text: extraKeys[0], type: 'extra' })
+  } else if (extraKeys.length === 2) {
+    // 如果有两个额外按键，则添加两个额外按键和一个数字0
+    keys.push({ text: extraKeys[0], type: 'extra' }, { text: 0 }, { text: extraKeys[1], type: 'extra' })
+  }
+
+  return keys
+}
+
+// 生成车牌键盘
+function genCarKeys(): Array<Key> {
+  const [keys, remainKeys] = splitCarKeys()
+  return [
+    ...keys,
+    { text: carKeyboardLang.value === 'zh' ? 'ABC' : '省份', type: 'extra', wider: true },
+    ...remainKeys,
+    { text: props.deleteText, type: 'delete', wider: true }
+  ]
+}
+
+function splitCarKeys(): Array<Array<Key>> {
+  const keys = carKeyboardLang.value === 'zh' ? CAR_KEYBOARD_AREAS.map((key) => ({ text: key })) : CAR_KEYBOARD_KEYS.map((key) => ({ text: key }))
+  return [keys.slice(0, 30), keys.slice(30)]
+}
+
+const handleClose = () => {
+  emit('close')
+  emit('update:visible', false)
+}
+
+const handlePress = (text: string, type: NumberKeyType) => {
+  if (type === 'extra') {
+    if (text === '') {
+      return handleClose()
+    } else if (text === 'ABC' || text === '省份') {
+      const newLang = carKeyboardLang.value === 'zh' ? 'en' : 'zh'
+      if (props.carLang) {
+        emit('update:carLang', newLang)
+      } else {
+        carKeyboardLang.value = newLang
+      }
+      return
+    }
+  }
+
+  const value = props.modelValue
+  if (type === 'delete') {
+    emit('delete')
+    const newValue = value.slice(0, value.length - 1)
+    emit('update:modelValue', newValue)
+    if (props.mode === 'car' && newValue.length === 0 && props.autoSwitchLang) {
+      carKeyboardLang.value = 'zh'
+    }
+  } else if (type === 'close') {
+    handleClose()
+  } else if (value.length < +props.maxlength) {
+    emit('input', text)
+    const newValue = value + text
+    emit('update:modelValue', newValue)
+    if (props.mode === 'car' && newValue.length === 1 && props.autoSwitchLang) {
+      // 输入第一位（省份）后，自动切换到英文
+      carKeyboardLang.value = 'en'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/wd-loading/index.scss

@@ -1,25 +1,26 @@
-@import '../common/abstracts/_mixin';
-@import '../common/abstracts/variable';
+@import "../common/abstracts/_mixin.scss";
+@import "../common/abstracts/variable.scss";
 
 @include b(loading) {
-  display: inline-block;
-  width: $-loading-size;
-  height: $-loading-size;
   font-size: 0;
   line-height: 0;
   vertical-align: middle;
+  display: inline-block;
+  width: $-loading-size;
+  height: $-loading-size;
 
   @include e(body) {
     width: 100%;
     height: 100%;
     animation: wd-rotate 0.8s linear infinite;
     animation-duration: 2s;
+
   }
   @include e(svg) {
     width: 100%;
     height: 100%;
-    background-repeat: no-repeat;
     background-size: cover;
+    background-repeat: no-repeat;
   }
 }
 
@@ -32,3 +33,5 @@
     transform: rotate(360deg);
   }
 }
+
+

package/components/wd-loading/types.ts

@@ -25,7 +25,7 @@ export const loadingProps = {
   /**
    * 设置加载指示器大小
    */
-  size: makeNumericProp(''),
+  size: makeNumericProp('')
 }
 
 export type LoadingProps = ExtractPropTypes<typeof loadingProps>

package/components/wd-loading/wd-loading.vue

@@ -11,8 +11,8 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -32,7 +32,7 @@ const icon = {
   },
   ring(color = '#4D80F0', intermediateColor = '#a6bff7') {
     return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><linearGradient id="${svgDefineId1}" gradientUnits="userSpaceOnUse" x1="50" x2="50" y2="180"><stop offset="0" stop-color="${color}"></stop> <stop offset="1" stop-color="${intermediateColor}"></stop></linearGradient> <path fill="url(#${svgDefineId1})" d="M20 100c0-44.1 35.9-80 80-80V0C44.8 0 0 44.8 0 100s44.8 100 100 100v-20c-44.1 0-80-35.9-80-80z"></path> <linearGradient id="${svgDefineId2}" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180"><stop offset="0" stop-color="#fff" stop-opacity="0"></stop> <stop offset="1" stop-color="${intermediateColor}"></stop></linearGradient> <path fill="url(#${svgDefineId2})" d="M100 0v20c44.1 0 80 35.9 80 80s-35.9 80-80 80v20c55.2 0 100-44.8 100-100S155.2 0 100 0z"></path> <circle cx="100" cy="10" r="10" fill="${color}"></circle></svg>`
-  },
+  }
 }
 
 const props = defineProps(loadingProps)
@@ -48,8 +48,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -59,8 +59,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 const rootStyle = computed(() => {
@@ -69,7 +69,7 @@ const rootStyle = computed(() => {
     style.height = addUnit(iconSize.value)
     style.width = addUnit(iconSize.value)
   }
-  return `${objToStyle(style)}; ${props.customStyle}`
+  return `${objToStyle(style)} ${props.customStyle}`
 })
 
 onBeforeMount(() => {
@@ -79,7 +79,7 @@ onBeforeMount(() => {
 
 function buildSvg() {
   const { type, color } = props
-  const ringType: 'outline' | 'ring' = isDef(type) ? type : 'ring'
+  let ringType: 'outline' | 'ring' = isDef(type) ? type : 'ring'
   const svgStr = `"data:image/svg+xml;base64,${base64(ringType === 'ring' ? icon[ringType](color, intermediateColor.value) : icon[ringType](color))}"`
   svg.value = svgStr
 }

package/components/wd-loadmore/index.scss

@@ -10,15 +10,15 @@
   width: 100%;
   height: $-loadmore-height;
   line-height: $-loadmore-height;
-  color: $-loadmore-color;
   text-align: center;
+  color: $-loadmore-color;
 
   @include edeep(loading) {
     display: inline-block;
+    margin-right: 8px;
+    vertical-align:  middle;
     width: $-loadmore-loading-size;
     height: $-loadmore-loading-size;
-    margin-right: 8px;
-    vertical-align: middle;
   }
   @include e(text) {
     display: inline-block;
@@ -32,8 +32,8 @@
   }
   @include edeep(refresh) {
     display: inline-block;
-    font-size: $-loadmore-refresh-fs;
     color: $-loadmore-error-color;
     vertical-align: middle;
+    font-size: $-loadmore-refresh-fs;
   }
-}
+}