@tplc/wot 0.0.1

package/components/wd-search/index.scss

@@ -0,0 +1,148 @@
+@import '../common/abstracts/_mixin';
+@import '../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(search) {
+    background: $-dark-background4;
+
+    @include e(block) {
+      background-color: $-dark-background;
+    }
+
+    @include e(input) {
+      color: $-dark-color;
+    }
+
+    @include e(cover) {
+      background-color: $-dark-background;
+    }
+
+    @include e(search-icon) {
+      color: $-dark-color;
+    }
+    @include e(search-left-icon) {
+      color: $-dark-color;
+    }
+    @include e(clear) {
+      color: $-dark-color;
+    }
+    @include e(cancel) {
+      color: $-dark-color;
+    }
+
+    @include when(light) {
+      background: $-dark-background4;
+
+      .wd-search__block {
+        background: $-dark-background7;
+      }
+
+      .wd-search__cover {
+        background: $-dark-background7;
+      }
+    }
+  }
+}
+
+@include b(search) {
+  display: flex;
+  align-items: center;
+  padding: $-search-padding;
+  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;
+  }
+  @include e(field) {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+  }
+  @include e(input) {
+    z-index: 0;
+    box-sizing: border-box;
+    flex: 1;
+    height: $-search-input-height;
+    padding: $-search-input-padding;
+    font-size: $-search-input-fs;
+    color: $-search-input-color;
+    -webkit-appearance: none;
+    background: transparent;
+    border: none;
+    outline: none;
+
+    @include lineEllipsis;
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
+  }
+  @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;
+    border-radius: $-search-input-radius;
+  }
+  @include edeep(search-icon) {
+    margin-right: 8px;
+    font-size: $-search-icon-size;
+    color: $-search-icon-color;
+  }
+  @include edeep(search-left-icon) {
+    position: absolute;
+    top: 50%;
+    left: 16px;
+    font-size: $-search-icon-size;
+    color: $-search-icon-color;
+    transform: translateY(-50%);
+  }
+  @include e(placeholder-txt) {
+    font-size: $-search-input-fs;
+    color: $-search-placeholder-color;
+  }
+  @include edeep(clear) {
+    position: absolute;
+    right: 0;
+    padding: 6px 9px 6px 7px;
+    color: $-search-cancel-color;
+  }
+  @include edeep(clear-icon) {
+    font-size: $-search-clear-icon-size;
+    vertical-align: middle;
+  }
+  @include e(cancel) {
+    height: $-search-input-height;
+    padding: $-search-cancel-padding;
+    font-size: $-search-cancel-fs;
+    line-height: $-search-input-height;
+    color: $-search-cancel-color;
+    -webkit-tap-highlight-color: transparent;
+  }
+  @include when(light) {
+    background: $-search-light-bg;
+
+    .wd-search__block {
+      background: #fff;
+    }
+
+    .wd-search__cover {
+      background: #fff;
+    }
+  }
+  @include when(without-cancel) {
+    padding-right: $-search-side-padding;
+  }
+}

package/components/wd-search/types.ts

@@ -0,0 +1,83 @@
+import { baseProps, makeBooleanProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export const searchProps = {
+  ...baseProps,
+
+  /**
+   * 输入框内容，双向绑定
+   * 类型: string
+   * 默认值: ''
+   */
+  modelValue: makeStringProp(''),
+
+  /**
+   * 是否使用输入框右侧插槽
+   * 类型: boolean
+   * 默认值: false
+   * @deprecated 该属性已废弃，将在下一个minor版本被移除，直接使用插槽即可
+   */
+  useSuffixSlot: makeBooleanProp(false),
+
+  /**
+   * 搜索框占位文本
+   * 类型: string
+   */
+  placeholder: String,
+
+  /**
+   * 搜索框右侧文本
+   * 类型: string
+   */
+  cancelTxt: String,
+
+  /**
+   * 搜索框亮色（白色）
+   * 类型: boolean
+   * 默认值: false
+   */
+  light: makeBooleanProp(false),
+
+  /**
+   * 是否隐藏右侧文本
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideCancel: makeBooleanProp(false),
+
+  /**
+   * 是否禁用搜索框
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 原生属性，设置最大长度。-1 表示无限制
+   * 类型: string / number
+   * 默认值: -1
+   */
+  maxlength: makeNumericProp(-1),
+
+  /**
+   * placeholder 居左边
+   * 类型: boolean
+   * 默认值: false
+   */
+  placeholderLeft: makeBooleanProp(false),
+
+  /**
+   * 是否自动聚焦
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.63
+   */
+  focus: makeBooleanProp(false),
+
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.63
+   */
+  focusWhenClear: makeBooleanProp(false),
+}

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

@@ -0,0 +1,237 @@
+<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"
+        >
+          <wd-icon name="search" custom-class="wd-search__search-icon"></wd-icon>
+          <text class="wd-search__placeholder-txt">{{ 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>
+        <!--搜索框-->
+        <input
+          v-if="showInput || str || placeholderLeft"
+          :placeholder="placeholder || translate('search')"
+          placeholder-class="wd-search__placeholder-txt"
+          confirm-type="search"
+          v-model="str"
+          class="wd-search__input"
+          @focus="searchFocus"
+          @input="inputValue"
+          @blur="searchBlur"
+          @confirm="search"
+          :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"
+        />
+      </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>
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-search',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { type CSSProperties, computed, onMounted, ref, watch } from 'vue'
+import { objToStyle, requestAnimationFrame } 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 { translate } = useTranslate('search')
+
+const isFocused = ref<boolean>(false) // 是否聚焦中
+const showInput = ref<boolean>(false) // 是否显示输入框 用于实现聚焦的hack
+const str = ref('')
+const showPlaceHolder = ref<boolean>(true)
+const clearing = ref<boolean>(false)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    str.value = newValue
+    if (newValue) {
+      showInput.value = true
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    if (newValue) {
+      if (props.disabled) return
+      closeCover()
+    }
+  },
+)
+
+onMounted(() => {
+  if (props.focus) {
+    closeCover()
+  }
+})
+
+const rootClass = computed(() => {
+  return `wd-search  ${props.light ? 'is-light' : ''}  ${props.hideCancel ? 'is-without-cancel' : ''} ${props.customClass}`
+})
+
+const coverStyle = computed(() => {
+  const coverStyle: CSSProperties = {
+    display: str.value === '' && showPlaceHolder.value ? 'flex' : 'none',
+  }
+
+  return objToStyle(coverStyle)
+})
+
+function hackFocus(focus: boolean) {
+  showInput.value = focus
+  requestAnimationFrame(() => {
+    isFocused.value = focus
+  })
+}
+
+function closeCover() {
+  if (props.disabled) return
+  requestAnimationFrame()
+    .then(() => requestAnimationFrame())
+    .then(() => requestAnimationFrame())
+    .then(() => {
+      showPlaceHolder.value = false
+      hackFocus(true)
+    })
+}
+/**
+ * @description input的input事件handle
+ * @param value
+ */
+function inputValue(event: any) {
+  str.value = event.detail.value
+  emit('update:modelValue', event.detail.value)
+  emit('change', {
+    value: event.detail.value,
+  })
+}
+/**
+ * @description 点击清空icon的handle
+ */
+function clearSearch() {
+  str.value = ''
+  clearing.value = true
+  if (props.focusWhenClear) {
+    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')
+    })
+}
+/**
+ * @description 点击搜索按钮时的handle
+ * @param value
+ */
+function search({ detail: { value } }: any) {
+  // 组件触发search事件
+  emit('search', {
+    value,
+  })
+}
+/**
+ * @description 输入框聚焦时的handle
+ */
+function searchFocus() {
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
+  showPlaceHolder.value = false
+  emit('focus', {
+    value: str.value,
+  })
+}
+/**
+ * @description 输入框失焦的handle
+ */
+function searchBlur() {
+  if (clearing.value) return
+  // 组件触发blur事件
+  showPlaceHolder.value = !str.value
+  showInput.value = !showPlaceHolder.value
+  isFocused.value = false
+  emit('blur', {
+    value: str.value,
+  })
+}
+/**
+ * @description 点击取消搜索按钮的handle
+ */
+function handleCancel() {
+  // 组件触发cancel事件
+  emit('cancel', {
+    value: str.value,
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-segmented/index.scss

@@ -0,0 +1,97 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(segmented) {
+    background: $-dark-background2;
+
+    @include e(item) {
+      color: $-dark-color3;
+
+      @include when(active) {
+        color: $-dark-color;
+
+        @include when(disabled) {
+          color: $-dark-color3;
+        }
+      }
+
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+
+      @include m(active) {
+        background-color: $-color-theme;
+
+        @include when(disabled) {
+          opacity: 0.6;
+        }
+      }
+    }
+  }
+}
+
+@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;
+  border-radius: 4px;
+
+  @include e(item) {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    min-width: 0;
+    min-height: 28px;
+    padding: 0 12px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 28px;
+    color: $-segmented-item-color;
+    text-align: center;
+    border-radius: 4px;
+
+    @include when(active) {
+      font-weight: 550;
+    }
+
+    @include when(large) {
+      min-height: 32px;
+      padding: 0 12px;
+      font-size: 16px;
+      line-height: 32px;
+    }
+
+    @include when(small) {
+      min-height: 24px;
+      padding: 0 7px;
+      font-size: 12px;
+      line-height: 24px;
+    }
+
+    @include when(disabled) {
+      color: $-segmented-item-disabled-color;
+      cursor: no-drop;
+    }
+
+    @include m(active) {
+      height: calc(100% - $-segmented-padding * 2);
+      background-color: $-segmented-item-acitve-bg;
+      border-radius: 4px;
+      @include when(disabled) {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  @include e(item-label) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/components/wd-segmented/types.ts

@@ -0,0 +1,68 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-18 11:22:03
+ * @LastEditTime: 2024-07-25 22:17:56
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts
+ * 记得注释
+ */
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type SegmentedType = 'large' | 'middle' | 'small'
+
+export interface SegmentedOption {
+  value: string | number // 选中值
+  disabled?: boolean // 是否禁用
+  payload?: any // 更多数据
+}
+
+export const segmentedProps = {
+  ...baseProps,
+
+  /**
+   * 当前选中的值
+   * 类型: string | number
+   * 最低版本: 0.1.23
+   */
+  value: makeRequiredProp([String, Number]),
+
+  /**
+   * 是否禁用分段器
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.23
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 控件尺寸
+   * 类型: string
+   * 可选值: 'large' | 'middle' | 'small'
+   * 默认值: 'middle'
+   * 最低版本: 0.1.23
+   */
+  size: makeStringProp<SegmentedType>('middle'),
+
+  /**
+   * 数据集合
+   * 类型: string[] | number[] | SegmentedOption[]
+   * 必需: 是
+   * 默认值: []
+   * 最低版本: 0.1.23
+   */
+  options: {
+    type: Array as PropType<string[] | number[] | SegmentedOption[]>,
+    required: true,
+    default: () => [],
+  },
+
+  /**
+   * 切换选项时是否振动
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.23
+   */
+  vibrateShort: makeBooleanProp(false),
+}