@tplc/wot 1.0.6 → 1.0.8

package/components/wd-search/index.scss

@@ -1,5 +1,5 @@
-@import '../common/abstracts/_mixin';
-@import '../common/abstracts/variable';
+@import '../common/abstracts/_mixin.scss';
+@import '../common/abstracts/variable.scss';
 
 .wot-theme-dark {
   @include b(search) {
@@ -32,11 +32,11 @@
 
     @include when(light) {
       background: $-dark-background4;
-
+  
       .wd-search__block {
         background: $-dark-background7;
       }
-
+  
       .wd-search__cover {
         background: $-dark-background7;
       }
@@ -46,38 +46,38 @@
 
 @include b(search) {
   display: flex;
-  align-items: center;
   padding: $-search-padding;
+  align-items: center;
   background: #fff;
 
   @include e(block) {
-    position: relative;
-    display: flex;
     flex: 1;
-    flex-direction: row;
-    align-items: center;
     background-color: $-search-input-bg;
     border-radius: $-search-input-radius;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
   }
   @include e(field) {
-    position: relative;
-    display: flex;
     flex: 1;
+    display: flex;
     flex-direction: row;
     align-items: center;
+    position: relative;
   }
   @include e(input) {
-    z-index: 0;
-    box-sizing: border-box;
     flex: 1;
     height: $-search-input-height;
+    box-sizing: border-box;
     padding: $-search-input-padding;
+    border: none;
+    background: transparent;
     font-size: $-search-input-fs;
-    color: $-search-input-color;
     -webkit-appearance: none;
-    background: transparent;
-    border: none;
     outline: none;
+    color: $-search-input-color;
+    z-index: 0;
 
     @include lineEllipsis;
 
@@ -86,32 +86,32 @@
     }
   }
   @include e(cover) {
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
     width: 100%;
     height: $-search-input-height;
-    font-size: $-search-input-fs;
-    line-height: $-search-input-height;
     background-color: $-search-input-bg;
+    line-height: $-search-input-height;
+    font-size: $-search-input-fs;
     border-radius: $-search-input-radius;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
   }
   @include edeep(search-icon) {
     margin-right: 8px;
-    font-size: $-search-icon-size;
     color: $-search-icon-color;
+    font-size: $-search-icon-size;
   }
   @include edeep(search-left-icon) {
     position: absolute;
+    font-size: $-search-icon-size;
     top: 50%;
     left: 16px;
-    font-size: $-search-icon-size;
-    color: $-search-icon-color;
     transform: translateY(-50%);
+    color: $-search-icon-color;
   }
   @include e(placeholder-txt) {
-    font-size: $-search-input-fs;
     color: $-search-placeholder-color;
+    font-size: $-search-input-fs;
   }
   @include edeep(clear) {
     position: absolute;
@@ -120,14 +120,14 @@
     color: $-search-cancel-color;
   }
   @include edeep(clear-icon) {
-    font-size: $-search-clear-icon-size;
     vertical-align: middle;
+    font-size: $-search-clear-icon-size;
   }
   @include e(cancel) {
-    height: $-search-input-height;
     padding: $-search-cancel-padding;
-    font-size: $-search-cancel-fs;
+    height: $-search-input-height;
     line-height: $-search-input-height;
+    font-size: $-search-cancel-fs;
     color: $-search-cancel-color;
     -webkit-tap-highlight-color: transparent;
   }
@@ -145,4 +145,4 @@
   @include when(without-cancel) {
     padding-right: $-search-side-padding;
   }
-}
+}

package/components/wd-search/types.ts

@@ -1,8 +1,17 @@
-import { baseProps, makeBooleanProp, makeNumericProp, makeStringProp } from '../common/props'
+/*
+ * @Author: weisheng
+ * @Date: 2024-09-01 15:42:04
+ * @LastEditTime: 2024-09-21 15:36:09
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-search\types.ts
+ * 记得注释
+ */
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 
 export const searchProps = {
   ...baseProps,
-
+  customInputClass: makeStringProp(''),
   /**
    * 输入框内容，双向绑定
    * 类型: string
@@ -56,7 +65,7 @@ export const searchProps = {
    * 类型: string / number
    * 默认值: -1
    */
-  maxlength: makeNumericProp(-1),
+  maxlength: makeNumberProp(-1),
 
   /**
    * placeholder 居左边
@@ -80,4 +89,14 @@ export const searchProps = {
    * 最低版本: 0.1.63
    */
   focusWhenClear: makeBooleanProp(false),
+
+  /**
+   * 原生属性，指定 placeholder 的样式，目前仅支持color,font-size和font-weight
+   */
+  placeholderStyle: String,
+
+  /**
+   * 原生属性，指定 placeholder 的样式类
+   */
+  placeholderClass: makeStringProp('')
 }

package/components/wd-search/wd-search.vue

@@ -1,54 +1,34 @@
 <template>
   <view :class="rootClass" :style="customStyle">
-    <!--自定义label插槽-->
-    <!--搜索框主体-->
     <view class="wd-search__block">
       <slot name="prefix"></slot>
       <view class="wd-search__field">
-        <view
-          v-if="!placeholderLeft"
-          :style="coverStyle"
-          class="wd-search__cover"
-          @click="closeCover"
-        >
+        <view v-if="!placeholderLeft" :style="coverStyle" class="wd-search__cover" @click="closeCover">
           <wd-icon name="search" custom-class="wd-search__search-icon"></wd-icon>
-          <text class="wd-search__placeholder-txt">{{ placeholder || translate('search') }}</text>
+          <text :class="`wd-search__placeholder-txt ${placeholderClass}`">{{ placeholder || translate('search') }}</text>
         </view>
-        <!--icon:search-->
-        <wd-icon
-          v-if="showInput || str || placeholderLeft"
-          name="search"
-          custom-class="wd-search__search-left-icon"
-        ></wd-icon>
-        <!--搜索框-->
+        <wd-icon v-if="showInput || inputValue || placeholderLeft" name="search" custom-class="wd-search__search-left-icon"></wd-icon>
         <input
-          v-if="showInput || str || placeholderLeft"
+          v-if="showInput || inputValue || placeholderLeft"
           :placeholder="placeholder || translate('search')"
-          placeholder-class="wd-search__placeholder-txt"
+          :placeholder-class="`wd-search__placeholder-txt ${placeholderClass}`"
+          :placeholder-style="placeholderStyle"
           confirm-type="search"
-          v-model="str"
-          class="wd-search__input"
-          @focus="searchFocus"
-          @input="inputValue"
-          @blur="searchBlur"
-          @confirm="search"
+          v-model="inputValue"
+          :class="['wd-search__input', customInputClass]"
+          @focus="handleFocus"
+          @input="handleInput"
+          @blur="handleBlur"
+          @confirm="handleConfirm"
           :disabled="disabled"
           :maxlength="maxlength"
           :focus="isFocused"
         />
-        <!--icon:clear-->
-        <wd-icon
-          v-if="str"
-          custom-class="wd-search__clear wd-search__clear-icon"
-          name="error-fill"
-          @click="clearSearch"
-        />
+        <wd-icon v-if="inputValue" custom-class="wd-search__clear wd-search__clear-icon" name="error-fill" @click="handleClear" />
       </view>
     </view>
-    <!--the button behind input,care for hideCancel without displaying-->
 
     <slot v-if="!hideCancel" name="suffix">
-      <!--默认button-->
       <view class="wd-search__cancel" @click="handleCancel">
         {{ cancelTxt || translate('cancel') }}
       </view>
@@ -62,45 +42,38 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
 import { type CSSProperties, computed, onMounted, ref, watch } from 'vue'
-import { objToStyle, requestAnimationFrame } from '../common/util'
+import { objToStyle, pause } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import { searchProps } from './types'
 
 const props = defineProps(searchProps)
-const emit = defineEmits([
-  'update:modelValue',
-  'change',
-  'clear',
-  'search',
-  'focus',
-  'blur',
-  'cancel',
-])
+const emit = defineEmits(['update:modelValue', 'change', 'clear', 'search', 'focus', 'blur', 'cancel'])
 
 const { translate } = useTranslate('search')
 
 const isFocused = ref<boolean>(false) // 是否聚焦中
 const showInput = ref<boolean>(false) // 是否显示输入框 用于实现聚焦的hack
-const str = ref('')
+const inputValue = ref<string>('') // 输入框的值
 const showPlaceHolder = ref<boolean>(true)
 const clearing = ref<boolean>(false)
 
 watch(
   () => props.modelValue,
   (newValue) => {
-    str.value = newValue
+    inputValue.value = newValue
     if (newValue) {
       showInput.value = true
     }
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 watch(
@@ -110,7 +83,7 @@ watch(
       if (props.disabled) return
       closeCover()
     }
-  },
+  }
 )
 
 onMounted(() => {
@@ -125,113 +98,90 @@ const rootClass = computed(() => {
 
 const coverStyle = computed(() => {
   const coverStyle: CSSProperties = {
-    display: str.value === '' && showPlaceHolder.value ? 'flex' : 'none',
+    display: inputValue.value === '' && showPlaceHolder.value ? 'flex' : 'none'
   }
 
   return objToStyle(coverStyle)
 })
 
-function hackFocus(focus: boolean) {
+async function hackFocus(focus: boolean) {
   showInput.value = focus
-  requestAnimationFrame(() => {
-    isFocused.value = focus
-  })
+  await pause()
+  isFocused.value = focus
 }
 
-function closeCover() {
+async function closeCover() {
   if (props.disabled) return
-  requestAnimationFrame()
-    .then(() => requestAnimationFrame())
-    .then(() => requestAnimationFrame())
-    .then(() => {
-      showPlaceHolder.value = false
-      hackFocus(true)
-    })
+  await pause(100)
+  showPlaceHolder.value = false
+  hackFocus(true)
 }
-/**
- * @description input的input事件handle
- * @param value
- */
-function inputValue(event: any) {
-  str.value = event.detail.value
+
+function handleInput(event: any) {
+  inputValue.value = event.detail.value
   emit('update:modelValue', event.detail.value)
   emit('change', {
-    value: event.detail.value,
+    value: event.detail.value
   })
 }
-/**
- * @description 点击清空icon的handle
- */
-function clearSearch() {
-  str.value = ''
-  clearing.value = true
+
+async function handleClear() {
+  inputValue.value = ''
   if (props.focusWhenClear) {
+    clearing.value = true
     isFocused.value = false
   }
-  requestAnimationFrame()
-    .then(() => requestAnimationFrame())
-    .then(() => requestAnimationFrame())
-    .then(() => {
-      if (props.focusWhenClear) {
-        showPlaceHolder.value = false
-        hackFocus(true)
-      } else {
-        showPlaceHolder.value = true
-        hackFocus(false)
-      }
-      emit('change', {
-        value: '',
-      })
-      emit('update:modelValue', '')
-      emit('clear')
-    })
+  await pause()
+  if (props.focusWhenClear) {
+    showPlaceHolder.value = false
+    hackFocus(true)
+  } else {
+    showPlaceHolder.value = true
+    hackFocus(false)
+  }
+  emit('change', {
+    value: ''
+  })
+  emit('update:modelValue', '')
+  emit('clear')
 }
-/**
- * @description 点击搜索按钮时的handle
- * @param value
- */
-function search({ detail: { value } }: any) {
+
+function handleConfirm({ detail: { value } }: any) {
   // 组件触发search事件
   emit('search', {
-    value,
+    value
   })
 }
-/**
- * @description 输入框聚焦时的handle
- */
-function searchFocus() {
-  if (clearing.value) {
-    clearing.value = false
-    return
-  }
+
+function handleFocus() {
   showPlaceHolder.value = false
   emit('focus', {
-    value: str.value,
+    value: inputValue.value
   })
 }
-/**
- * @description 输入框失焦的handle
- */
-function searchBlur() {
-  if (clearing.value) return
+
+async function handleBlur() {
+  // 等待150毫秒，clear执行完毕
+  await pause(150)
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
   // 组件触发blur事件
-  showPlaceHolder.value = !str.value
+  showPlaceHolder.value = !inputValue.value
   showInput.value = !showPlaceHolder.value
   isFocused.value = false
   emit('blur', {
-    value: str.value,
+    value: inputValue.value
   })
 }
-/**
- * @description 点击取消搜索按钮的handle
- */
+
 function handleCancel() {
-  // 组件触发cancel事件
   emit('cancel', {
-    value: str.value,
+    value: inputValue.value
   })
 }
 </script>
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-segmented/index.scss

@@ -1,5 +1,5 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
 
 .wot-theme-dark {
   @include b(segmented) {
@@ -28,33 +28,35 @@
         }
       }
     }
+
   }
 }
 
 @include b(segmented) {
   position: relative;
-  box-sizing: border-box;
   display: flex;
   align-items: stretch;
   justify-items: flex-start;
   width: 100%;
-  padding: $-segmented-padding;
   background-color: $-segmented-item-bg-color;
+  padding: $-segmented-padding;
   border-radius: 4px;
+  box-sizing: border-box;
+
 
   @include e(item) {
     position: relative;
-    z-index: 1;
+    text-align: center;
+    border-radius: 4px;
     flex: 1;
     min-width: 0;
+    z-index: 1;
     min-height: 28px;
+    line-height: 28px;
     padding: 0 12px;
     font-size: 14px;
-    font-weight: 400;
-    line-height: 28px;
     color: $-segmented-item-color;
-    text-align: center;
-    border-radius: 4px;
+    font-weight: 400;
 
     @include when(active) {
       font-weight: 550;
@@ -62,27 +64,28 @@
 
     @include when(large) {
       min-height: 32px;
+      line-height: 32px;
       padding: 0 12px;
       font-size: 16px;
-      line-height: 32px;
     }
 
+
     @include when(small) {
       min-height: 24px;
+      line-height: 24px;
       padding: 0 7px;
       font-size: 12px;
-      line-height: 24px;
     }
 
     @include when(disabled) {
-      color: $-segmented-item-disabled-color;
       cursor: no-drop;
+      color: $-segmented-item-disabled-color;
     }
 
     @include m(active) {
-      height: calc(100% - $-segmented-padding * 2);
       background-color: $-segmented-item-acitve-bg;
       border-radius: 4px;
+      height: calc(100% - $-segmented-padding * 2);
       @include when(disabled) {
         opacity: 0.8;
       }
@@ -91,7 +94,8 @@
 
   @include e(item-label) {
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
+    text-overflow: ellipsis;
   }
-}
+
+}

package/components/wd-segmented/types.ts

@@ -1,13 +1,13 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-18 11:22:03
- * @LastEditTime: 2024-07-25 22:17:56
+ * @LastEditTime: 2024-11-24 23:04:55
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts
  * 记得注释
  */
-import type { PropType } from 'vue'
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
 
 export type SegmentedType = 'large' | 'middle' | 'small'
@@ -55,7 +55,7 @@ export const segmentedProps = {
   options: {
     type: Array as PropType<string[] | number[] | SegmentedOption[]>,
     required: true,
-    default: () => [],
+    default: () => []
   },
 
   /**
@@ -64,5 +64,17 @@ export const segmentedProps = {
    * 默认值: false
    * 最低版本: 0.1.23
    */
-  vibrateShort: makeBooleanProp(false),
+  vibrateShort: makeBooleanProp(false)
 }
+
+export type SegmentedExpose = {
+  /**
+   * 更新滑块偏移量
+   * @param animation 是否开启动画，默认开启
+   */
+  updateActiveStyle: (animation?: boolean) => void
+}
+
+export type SegmentedProps = ExtractPropTypes<typeof segmentedProps>
+
+export type SegmentedInstance = ComponentPublicInstance<SegmentedProps, SegmentedExpose>