@tplc/wot 1.0.6 → 1.0.8

package/components/wd-col-picker/wd-col-picker.vue

@@ -1,40 +1,34 @@
 <template>
-  <view
-    :class="`wd-col-picker ${cell.border.value ? 'is-border' : ''} ${customClass}`"
-    :style="customStyle"
-  >
-    <view class="wd-col-picker__field" @click="showPicker">
-      <slot v-if="useDefaultSlot"></slot>
-      <view
-        v-else
-        :class="`wd-col-picker__cell ${disabled && 'is-disabled'} ${readonly && 'is-readonly'} ${alignRight && 'is-align-right'} ${
-          error && 'is-error'
-        }  ${size && 'is-' + size}`"
-      >
-        <view
-          v-if="label || useLabelSlot"
-          :class="`wd-col-picker__label ${isRequired && 'is-required'} ${customLabelClass}`"
-          :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
-        >
-          <text v-if="label" class="wd-col-picker__label-inner">{{ label }}</text>
-          <slot v-else name="label"></slot>
-        </view>
-        <view class="wd-col-picker__body">
-          <view class="wd-col-picker__value-wraper">
-            <view
-              :class="`wd-col-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${showValue ? '' : 'wd-col-picker__value--placeholder'}`"
-            >
-              {{ showValue || placeholder || translate('placeholder') }}
-            </view>
-            <wd-icon
-              v-if="!disabled && !readonly"
-              custom-class="wd-col-picker__arrow"
-              name="arrow-right"
-            />
-          </view>
-          <view v-if="errorMessage" class="wd-col-picker__error-message">{{ errorMessage }}</view>
-        </view>
-      </view>
+  <view :class="`wd-col-picker ${customClass}`" :style="customStyle">
+    <wd-cell
+      v-if="!$slots.default"
+      :title="label"
+      :value="showValue || placeholder || translate('placeholder')"
+      :required="required"
+      :size="size"
+      :title-width="labelWidth"
+      :prop="prop"
+      :rules="rules"
+      :clickable="!disabled && !readonly"
+      :value-align="alignRight ? 'right' : 'left'"
+      :custom-class="cellClass"
+      :custom-style="customStyle"
+      :custom-title-class="customLabelClass"
+      :custom-value-class="customValueClass"
+      :ellipsis="ellipsis"
+      :use-title-slot="!!$slots.label"
+      :marker-side="markerSide"
+      @click="showPicker"
+    >
+      <template v-if="$slots.label" #title>
+        <slot name="label"></slot>
+      </template>
+      <template #right-icon>
+        <wd-icon v-if="showArrow" custom-class="wd-col-picker__arrow" name="arrow-right" />
+      </template>
+    </wd-cell>
+    <view v-else @click="showPicker">
+      <slot></slot>
     </view>
     <wd-action-sheet
       v-model="pickerShow"
@@ -43,8 +37,10 @@
       :close-on-click-modal="closeOnClickModal"
       :z-index="zIndex"
       :safe-area-inset-bottom="safeAreaInsetBottom"
+      :root-portal="rootPortal"
       @open="handlePickerOpend"
       @close="handlePickerClose"
+      @closed="handlePickerClosed"
     >
       <view class="wd-col-picker__selected">
         <scroll-view :scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
@@ -78,9 +74,7 @@
           >
             <view>
               <view class="wd-col-picker__list-item-label">{{ item[labelKey] }}</view>
-              <view v-if="item[tipKey]" class="wd-col-picker__list-item-tip">
-                {{ item[tipKey] }}
-              </view>
+              <view v-if="item[tipKey]" class="wd-col-picker__list-item-tip">{{ item[tipKey] }}</view>
             </view>
             <wd-icon custom-class="wd-col-picker__checked" name="check"></wd-icon>
           </view>
@@ -98,35 +92,18 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import {
-  computed,
-  getCurrentInstance,
-  onMounted,
-  ref,
-  watch,
-  type CSSProperties,
-  reactive,
-  nextTick,
-} from 'vue'
-import {
-  addUnit,
-  debounce,
-  getRect,
-  isArray,
-  isBoolean,
-  isDef,
-  isFunction,
-  objToStyle,
-} from '../common/util'
-import { useCell } from '../composables/useCell'
-import { FORM_KEY, type FormItemRule } from '../wd-form/types'
-import { useParent } from '../composables/useParent'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+import wdActionSheet from '../wd-action-sheet/wd-action-sheet.vue'
+import wdCell from '../wd-cell/wd-cell.vue'
+import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties, reactive } from 'vue'
+import { addUnit, debounce, getRect, isArray, isBoolean, isDef, isFunction, objToStyle } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import { colPickerProps, type ColPickerExpose } from './types'
 
@@ -152,13 +129,11 @@ const inited = ref<boolean>(false)
 const isCompleting = ref<boolean>(false)
 
 const state = reactive({
-  lineStyle: 'display:none;', // 激活项边框线样式
+  lineStyle: 'display:none;' // 激活项边框线样式
 })
 
 const { proxy } = getCurrentInstance() as any
 
-const cell = useCell()
-
 const updateLineAndScroll = debounce(function (animation = true) {
   setLineStyle(animation)
   lineScrollIntoView()
@@ -180,6 +155,15 @@ const showValue = computed(() => {
   }
 })
 
+const cellClass = computed(() => {
+  const classes = ['wd-col-picker__cell']
+  if (props.disabled) classes.push('is-disabled')
+  if (props.readonly) classes.push('is-readonly')
+  if (props.error) classes.push('is-error')
+  if (!showValue.value) classes.push('wd-col-picker__cell--placeholder')
+  return classes.join(' ')
+})
+
 watch(
   () => props.modelValue,
   (newValue) => {
@@ -192,17 +176,15 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
   () => props.columns,
   (newValue, oldValue) => {
     if (newValue.length && !isArray(newValue[0])) {
-      console.error(
-        '[wot design] error(wd-col-picker): the columns props of wd-col-picker should be a two-dimensional array',
-      )
+      console.error('[wot ui] error(wd-col-picker): the columns props of wd-col-picker should be a two-dimensional array')
       return
     }
     if (newValue.length === 0 && !oldValue) return
@@ -222,8 +204,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -235,8 +217,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -248,8 +230,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -261,37 +243,13 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
-  },
-)
-
-const { parent: form } = useParent(FORM_KEY)
-
-// 表单校验错误信息
-const errorMessage = computed(() => {
-  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
-    return form.errorMessages[props.prop]
-  } else {
-    return ''
+    immediate: true
   }
-})
+)
 
-// 是否展示必填
-const isRequired = computed(() => {
-  let formRequired = false
-  if (form && form.props.rules) {
-    const rules = form.props.rules
-    for (const key in rules) {
-      if (
-        Object.prototype.hasOwnProperty.call(rules, key) &&
-        key === props.prop &&
-        Array.isArray(rules[key])
-      ) {
-        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
-      }
-    }
-  }
-  return props.required || props.rules.some((rule) => rule.required) || formRequired
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly
 })
 
 onMounted(() => {
@@ -312,7 +270,10 @@ function handlePickerOpend() {
 
 function handlePickerClose() {
   pickerShow.value = false
-  // 如果目前用户正在选择，需要在popup关闭时将数据重置回上次数据，popup 关闭时间 250
+  emit('close')
+}
+
+function handlePickerClosed() {
   if (isChange.value) {
     setTimeout(() => {
       selectList.value = lastSelectList.value.slice(0)
@@ -324,8 +285,8 @@ function handlePickerClose() {
       isChange.value = false
     }, 250)
   }
-  emit('close')
 }
+
 function showPicker() {
   const { disabled, readonly } = props
 
@@ -335,11 +296,7 @@ function showPicker() {
   lastSelectList.value = selectList.value.slice(0)
 }
 
-function getSelectedItem(
-  value: string | number,
-  colIndex: number,
-  selectList: Record<string, any>[][],
-) {
+function getSelectedItem(value: string | number, colIndex: number, selectList: Record<string, any>[][]) {
   const { valueKey, labelKey } = props
   if (selectList[colIndex]) {
     const selecteds = selectList[colIndex].filter((item) => {
@@ -353,7 +310,7 @@ function getSelectedItem(
 
   return {
     [valueKey]: value,
-    [labelKey]: '',
+    [labelKey]: ''
   }
 }
 
@@ -377,12 +334,7 @@ function chooseItem(colIndex: number, index: number) {
   handleColChange(colIndex, item, index)
 }
 
-function handleColChange(
-  colIndex: number,
-  item: Record<string, any>,
-  index: number,
-  callback?: () => void,
-) {
+function handleColChange(colIndex: number, item: Record<string, any>, index: number, callback?: () => void) {
   loading.value = true
   const { columnChange, beforeConfirm } = props
   columnChange &&
@@ -392,9 +344,7 @@ function handleColChange(
       rowIndex: index,
       resolve: (nextColumn: Record<string, any>[]) => {
         if (!isArray(nextColumn)) {
-          console.error(
-            '[wot design] error(wd-col-picker): the data of each column of wd-col-picker should be an array',
-          )
+          console.error('[wot ui] error(wd-col-picker): the data of each column of wd-col-picker should be an array')
           return
         }
 
@@ -438,12 +388,12 @@ function handleColChange(
               } else {
                 loading.value = false
               }
-            },
+            }
           )
         } else {
           onConfirm()
         }
-      },
+      }
     })
 }
 function onConfirm() {
@@ -456,7 +406,7 @@ function onConfirm() {
     value: pickerColSelected.value,
     selectedItems: pickerColSelected.value.map((item, colIndex) => {
       return getSelectedItem(item, colIndex, selectList.value)
-    }),
+    })
   })
 }
 function handleColClick(index: number) {
@@ -471,46 +421,44 @@ function handleColClick(index: number) {
 function setLineStyle(animation: boolean = true) {
   if (!inited.value) return
   const { lineWidth, lineHeight } = props
-  getRect($item, true, proxy).then((rects) => {
-    const lineStyle: CSSProperties = {}
-    if (isDef(lineWidth)) {
-      lineStyle.width = addUnit(lineWidth)
-    }
-    if (isDef(lineHeight)) {
-      lineStyle.height = addUnit(lineHeight)
-      lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
-    }
-    const rect = rects[currentCol.value]
-    const left =
-      rects.slice(0, currentCol.value).reduce((prev, curr) => prev + Number(curr.width), 0) +
-      Number(rect.width) / 2
-    lineStyle.transform = `translateX(${left}px) translateX(-50%)`
-
-    if (animation) {
-      lineStyle.transition = 'width 300ms ease, transform 300ms ease'
-    }
+  getRect($item, true, proxy)
+    .then((rects) => {
+      const lineStyle: CSSProperties = {}
+      if (isDef(lineWidth)) {
+        lineStyle.width = addUnit(lineWidth)
+      }
+      if (isDef(lineHeight)) {
+        lineStyle.height = addUnit(lineHeight)
+        lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
+      }
+      const rect = rects[currentCol.value]
+      let left = rects.slice(0, currentCol.value).reduce((prev, curr) => prev + Number(curr.width), 0) + Number(rect.width) / 2
+      lineStyle.transform = `translateX(${left}px) translateX(-50%)`
 
-    state.lineStyle = objToStyle(lineStyle)
-  })
+      if (animation) {
+        lineStyle.transition = 'width 300ms ease, transform 300ms ease'
+      }
+
+      state.lineStyle = objToStyle(lineStyle)
+    })
+    .catch(() => {})
 }
 /**
  * @description scroll-view滑动到active的tab_nav
  */
 function lineScrollIntoView() {
   if (!inited.value) return
-  Promise.all([getRect($item, true, proxy), getRect($container, false, proxy)]).then(
-    ([navItemsRects, navRect]) => {
+  Promise.all([getRect($item, true, proxy), getRect($container, false, proxy)])
+    .then(([navItemsRects, navRect]) => {
       if (!isArray(navItemsRects) || navItemsRects.length === 0) return
       // 选中元素
       const selectItem = navItemsRects[currentCol.value]
       // 选中元素之前的节点的宽度总和
-      const offsetLeft = navItemsRects
-        .slice(0, currentCol.value)
-        .reduce((prev, curr) => prev + Number(curr.width), 0)
+      const offsetLeft = navItemsRects.slice(0, currentCol.value).reduce((prev, curr) => prev + Number(curr.width), 0)
       // scroll-view滑动到selectItem的偏移量
       scrollLeft.value = offsetLeft - ((navRect as any).width - Number(selectItem.width)) / 2
-    },
-  )
+    })
+    .catch(() => {})
 }
 
 // 递归列数据补齐
@@ -541,7 +489,7 @@ function handleAutoComplete() {
 
 defineExpose<ColPickerExpose>({
   close,
-  open,
+  open
 })
 </script>
 

package/components/wd-collapse/index.scss

@@ -1,5 +1,5 @@
-@import '../common/abstracts/variable';
-@import '../common/abstracts/mixin';
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
 
 .wot-theme-dark {
   @include b(collapse) {
@@ -17,13 +17,6 @@
   @include when(viewmore) {
     padding: $-collapse-side-padding;
   }
-  @include e(hidden-content) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    opacity: 0;
-  }
   @include e(content) {
     font-size: $-collapse-body-fs;
     color: $-collapse-body-color;
@@ -38,21 +31,22 @@
   @include e(more) {
     display: inline-block;
     font-size: $-collapse-retract-fs;
+    margin-top: 8px;
     color: $-collapse-more-color;
     user-select: none;
   }
   @include e(more-txt) {
     display: inline-block;
-    margin-right: 4px;
     vertical-align: middle;
+    margin-right: 4px;
   }
   @include e(arrow) {
     display: inline-block;
-    height: $-collapse-arrow-size;
-    font-size: $-collapse-arrow-size;
-    line-height: $-collapse-arrow-size;
     vertical-align: middle;
     transition: transform 0.1s;
+    font-size: $-collapse-arrow-size;
+    height: $-collapse-arrow-size;
+    line-height: $-collapse-arrow-size;
 
     @include when(retract) {
       transform: rotate(-180deg);

package/components/wd-collapse/types.ts

@@ -1,9 +1,4 @@
-import {
-  type ComponentPublicInstance,
-  type ExtractPropTypes,
-  type InjectionKey,
-  type PropType,
-} from 'vue'
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 
 export type CollapseToggleAllOptions =
@@ -26,12 +21,11 @@ export const collapseProps = {
    * 查看更多模式下的插槽外部自定义样式
    */
   customMoreSlotClass: makeStringProp(''),
-  text: makeStringProp(''),
   /**
    * 绑定值
    */
   modelValue: {
-    type: [String, Array, Boolean] as PropType<string | Array<string> | boolean>,
+    type: [String, Array, Boolean] as PropType<string | Array<string> | boolean>
   },
   /**
    * 手风琴模式
@@ -48,7 +42,7 @@ export const collapseProps = {
   /**
    * 查看更多的折叠面板，收起时的显示行数
    */
-  lineNum: makeNumberProp(2),
+  lineNum: makeNumberProp(2)
 }
 
 export type CollapseProps = ExtractPropTypes<typeof collapseProps>
@@ -58,7 +52,7 @@ export type CollapseExpose = {
    * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
    * @param options 面板状态
    */
-  toggleAll: (options?: boolean | CollapseToggleAllOptions) => void
+  toggleAll: (options?: CollapseToggleAllOptions) => void
 }
 
 export type CollapseInstance = ComponentPublicInstance<CollapseProps, CollapseExpose>

package/components/wd-collapse/wd-collapse.vue

@@ -7,22 +7,19 @@
     <!-- 查看更多模式 -->
     <view v-else>
       <view
-        :class="`wd-collapse__content ${!modelValue ? 'is-retract' : ''} text-3`"
+        :class="`wd-collapse__content ${!modelValue ? 'is-retract' : ''} `"
         :style="`-webkit-line-clamp: ${contentLineNum}; -webkit-box-orient: vertical`"
       >
-        {{ text }}
+        <slot></slot>
       </view>
-      <view class="wd-collapse__hidden-content text-3">{{ text }}</view>
-
-      <view v-if="isContentOverflow" class="wd-collapse__more" @click="handleMore">
+      <view class="wd-collapse__more" @click="handleMore">
         <!-- 自定义展开按钮 -->
         <view v-if="useMoreSlot" :class="customMoreSlotClass">
           <slot name="more"></slot>
         </view>
+        <!-- 显示展开或折叠按钮 -->
         <block v-else>
-          <span class="wd-collapse__more-txt">
-            {{ !modelValue ? translate('expand') : translate('retract') }}
-          </span>
+          <span class="wd-collapse__more-txt">{{ !modelValue ? translate('expand') : translate('retract') }}</span>
           <view :class="`wd-collapse__arrow ${modelValue ? 'is-retract' : ''}`">
             <wd-icon name="arrow-down"></wd-icon>
           </view>
@@ -38,21 +35,17 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { onBeforeMount, onMounted, ref, watch, nextTick, getCurrentInstance } from 'vue'
-import {
-  COLLAPSE_KEY,
-  collapseProps,
-  type CollapseExpose,
-  type CollapseToggleAllOptions,
-} from './types'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { onBeforeMount, ref, watch } from 'vue'
+import { COLLAPSE_KEY, collapseProps, type CollapseExpose, type CollapseToggleAllOptions } from './types'
 import { useChildren } from '../composables/useChildren'
-import { isArray, isDef } from '../common/util'
+import { isArray, isBoolean, isDef } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 
 const props = defineProps(collapseProps)
@@ -60,7 +53,6 @@ const emit = defineEmits(['change', 'update:modelValue'])
 
 const { translate } = useTranslate('collapse')
 const contentLineNum = ref<number>(0) // 查看更多的折叠面板，收起时的显示行数
-const isContentOverflow = ref<boolean>(false) // 内容是否超出显示行数
 
 const { linkChildren, children } = useChildren(COLLAPSE_KEY)
 
@@ -77,7 +69,7 @@ watch(
       console.error('value must be Array')
     }
   },
-  { deep: true, immediate: true },
+  { deep: true }
 )
 
 watch(
@@ -87,40 +79,18 @@ watch(
       console.error('lineNum must greater than 0')
     }
   },
-  { deep: true, immediate: true },
+  { deep: true, immediate: true }
 )
 
 onBeforeMount(() => {
   const { lineNum, viewmore, modelValue } = props
   contentLineNum.value = viewmore && !modelValue ? lineNum : 0
 })
-const { proxy } = getCurrentInstance()!
-// 检查内容是否超出行数限制
-function checkContentOverflow() {
-  if (!props.viewmore) return
-
-  nextTick(() => {
-    const query = uni.createSelectorQuery().in(proxy)
-    query
-      .selectAll('.wd-collapse__content, .wd-collapse__hidden-content')
-      .boundingClientRect((res) => {
-        if (res[0].height < res[1].height) {
-          isContentOverflow.value = true
-        }
-      })
-      .exec()
-  })
-}
-
-// 监听内容变化
-onMounted(() => {
-  checkContentOverflow()
-})
 
 function updateChange(activeNames: string | string[] | boolean) {
   emit('update:modelValue', activeNames)
   emit('change', {
-    value: activeNames,
+    value: activeNames
   })
 }
 
@@ -139,26 +109,23 @@ function toggle(name: string, expanded: boolean) {
  * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
  * @param options 面板状态
  */
-const toggleAll = (options: boolean | CollapseToggleAllOptions = {}) => {
+const toggleAll = (options: CollapseToggleAllOptions = {}) => {
   if (props.accordion) {
     return
   }
-  if (typeof options === 'boolean') {
+  if (isBoolean(options)) {
     options = { expanded: options }
   }
 
   const { expanded, skipDisabled } = options
   const names: string[] = []
-
-  children.forEach((item, index: number) => {
+  children.forEach((item, index) => {
     if (item.disabled && skipDisabled) {
       if (item.$.exposed!.getExpanded()) {
         names.push(item.name || index)
       }
-    } else {
-      if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
-        names.push(item.name || index)
-      }
+    } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
+      names.push(item.name || index)
     }
   })
   updateChange(names)
@@ -170,15 +137,15 @@ const toggleAll = (options: boolean | CollapseToggleAllOptions = {}) => {
 function handleMore() {
   emit('update:modelValue', !props.modelValue)
   emit('change', {
-    value: !props.modelValue,
+    value: !props.modelValue
   })
 }
 
 defineExpose<CollapseExpose>({
-  toggleAll,
+  toggleAll
 })
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>