@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

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

@@ -0,0 +1,371 @@
+<template>
+  <view :class="`wd-select-picker ${customClass}`" :style="customStyle">
+    <wd-action-sheet
+      v-model="pickerShow"
+      :title="title || translate('title')"
+      :close-on-click-modal="closeOnClickModal"
+      :z-index="zIndex"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :root-portal="rootPortal"
+      @close="close"
+      @after-enter="scrollIntoView ? setScrollIntoView() : ''"
+      custom-class="wd-select-picker__popup"
+    >
+      <wd-search
+        v-if="filterable"
+        v-model="filterVal"
+        :placeholder="filterPlaceholder || translate('filterPlaceholder')"
+        hide-cancel
+        placeholder-left
+        @change="handleFilterChange"
+      />
+      <scroll-view
+        :class="`wd-select-picker__wrapper ${loading ? 'is-loading' : ''} ${customContentClass}`"
+        :scroll-y="!loading"
+        :scroll-top="scrollTop"
+        :scroll-with-animation="true"
+      >
+        <!-- 多选 -->
+        <view v-if="type === 'checkbox' && isArray(selectList)" class="wd-select-picker__checkbox" id="wd-checkbox-group">
+          <wd-checkbox-group
+            v-model="selectList"
+            :size="selectSize"
+            :checked-color="checkedColor"
+            :min="min"
+            :max="max"
+            type="square"
+            placement="right"
+            @change="handleChange"
+          >
+            <view v-for="item in filterColumns" :key="item[valueKey]" :id="'check' + item[valueKey]">
+              <wd-checkbox :name="item[valueKey]" :disabled="item.disabled" custom-label-class="wd-select-picker__checkbox-label">
+                <block v-if="showHighlightText">
+                  <block v-for="text in item[labelKey]" :key="text.label">
+                    <text v-if="text.type === 'active'" class="wd-select-picker__text-active">{{ text.label }}</text>
+                    <block v-else>{{ text.label }}</block>
+                  </block>
+                </block>
+                <block v-else>
+                  {{ item[labelKey] }}
+                </block>
+              </wd-checkbox>
+            </view>
+          </wd-checkbox-group>
+        </view>
+        <!-- 单选 -->
+        <view v-if="type === 'radio' && !isArray(selectList)" class="wd-select-picker__radio" id="wd-radio-group">
+          <wd-radio-group
+            v-model="selectList"
+            cell
+            :size="selectSize"
+            :checked-color="checkedColor"
+            placement="right"
+            type="dot"
+            @change="handleChange"
+          >
+            <view v-for="(item, index) in filterColumns" :key="index" :id="'radio' + item[valueKey]">
+              <wd-radio :value="item[valueKey]" :disabled="item.disabled" custom-label-class="wd-select-picker__radio-label">
+                <block v-if="showHighlightText">
+                  <block v-for="text in item[labelKey]" :key="text.label">
+                    <text :class="`${text.type === 'active' ? 'wd-select-picker__text-active' : ''}`">{{ text.label }}</text>
+                  </block>
+                </block>
+                <block v-else>
+                  {{ item[labelKey] }}
+                </block>
+              </wd-radio>
+            </view>
+          </wd-radio-group>
+        </view>
+        <view v-if="loading" class="wd-select-picker__loading" @touchmove="noop">
+          <wd-loading :color="loadingColor" custom-class="wd-select-picker__loading-icon" />
+        </view>
+      </scroll-view>
+      <!-- 确认按钮 -->
+      <view v-if="showConfirm" class="wd-select-picker__footer">
+        <wd-button block size="large" @click="onConfirm" :disabled="loading">{{ confirmButtonText || translate('confirm') }}</wd-button>
+      </view>
+    </wd-action-sheet>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-select-picker',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdActionSheet from '../wd-action-sheet/wd-action-sheet.vue'
+import wdCheckbox from '../wd-checkbox/wd-checkbox.vue'
+import wdCheckboxGroup from '../wd-checkbox-group/wd-checkbox-group.vue'
+import wdRadio from '../wd-radio/wd-radio.vue'
+import wdRadioGroup from '../wd-radio-group/wd-radio-group.vue'
+import wdButton from '../wd-button/wd-button.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+
+import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed } from 'vue'
+import { getRect, isArray, isDef, isFunction, pause } from '../../common/util'
+import { callInterceptor } from '../../common/interceptor'
+import { useTranslate } from '../../composables/useTranslate'
+import { selectPickerProps, type SelectPickerExpose } from './types'
+
+const { translate } = useTranslate('select-picker')
+
+const props = defineProps(selectPickerProps)
+const emit = defineEmits(['change', 'cancel', 'confirm', 'update:modelValue', 'open', 'close', 'update:visible'])
+
+const pickerShow = ref<boolean>(false)
+const selectList = ref<Array<number | boolean | string> | number | boolean | string>([])
+const isConfirm = ref<boolean>(false)
+const lastSelectList = ref<Array<number | boolean | string> | number | boolean | string>([])
+const filterVal = ref<string>('')
+const filterColumns = ref<Array<Record<string, any>>>([])
+const scrollTop = ref<number>(0) // 滚动位置
+
+const valueItemMap = computed(() => {
+  const map = new Map<string | number | boolean, Record<string, any>>()
+  const { columns, valueKey } = props
+  columns.forEach((item) => {
+    map.set(item[valueKey], item)
+  })
+  return map
+})
+
+const showHighlightText = computed(() => {
+  return props.filterable && !!filterVal.value
+})
+
+function getModelValueWatchKey(value: string | number | boolean | (string | number | boolean)[]) {
+  if (props.type === 'checkbox') {
+    return isArray(value) ? value.join('|') : ''
+  }
+  return isDef(value) ? String(value) : ''
+}
+
+function getColumnsWatchKey(columns: Record<string, any>[]) {
+  const { valueKey, labelKey } = props
+  return columns
+    .map((item) => {
+      const value = isDef(item[valueKey]) ? String(item[valueKey]) : ''
+      const label = isDef(item[labelKey]) ? String(item[labelKey]) : ''
+      return `${value}|${label}|${item.disabled ? '1' : '0'}`
+    })
+    .join('||')
+}
+
+watch(
+  () => getModelValueWatchKey(props.modelValue),
+  () => {
+    const newValue = props.modelValue
+    if (newValue === selectList.value) return
+    selectList.value = valueFormat(newValue)
+    lastSelectList.value = valueFormat(newValue)
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => getColumnsWatchKey(props.columns),
+  () => {
+    const newValue = props.columns
+    if (props.filterable && filterVal.value) {
+      formatFilterColumns(newValue, filterVal.value)
+    } else {
+      filterColumns.value = newValue
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.visible,
+  (val) => {
+    pickerShow.value = val
+  },
+  {
+    immediate: true
+  }
+)
+
+onBeforeMount(() => {
+  selectList.value = valueFormat(props.modelValue)
+  filterColumns.value = props.columns
+})
+
+const { proxy } = getCurrentInstance() as any
+
+async function setScrollIntoView() {
+  let wraperSelector: string = ''
+  let targetSelector: string = ''
+  if (isDef(selectList.value) && selectList.value !== '' && !isArray(selectList.value)) {
+    wraperSelector = '#wd-radio-group'
+    targetSelector = `#radio${selectList.value}`
+  } else if (isArray(selectList.value) && selectList.value.length > 0) {
+    wraperSelector = '#wd-checkbox-group'
+    targetSelector = `#check${selectList.value[0]}`
+  }
+  if (wraperSelector && targetSelector) {
+    await pause(2000 / 30)
+    const [scrollView, wraper, target] = await Promise.all([
+      getRect('.wd-select-picker__wrapper', false, proxy),
+      getRect(wraperSelector, false, proxy),
+      getRect(targetSelector, false, proxy)
+    ])
+
+    if (isDef(wraper) && isDef(scrollView) && isDef(target)) {
+      const isVisible = target.bottom! > scrollView.top! && target.top! < scrollView.bottom!
+      if (!isVisible) {
+        scrollTop.value = -1
+        nextTick(() => {
+          scrollTop.value = Math.max(0, target.top! - wraper.top! - scrollView.height! / 2)
+        })
+      }
+    }
+  }
+}
+
+function noop() {}
+
+function getSelectedItem(value: string | number | boolean) {
+  const { valueKey, labelKey } = props
+  const selected = valueItemMap.value.get(value)
+
+  if (selected) {
+    return selected
+  }
+
+  return {
+    [valueKey]: value,
+    [labelKey]: ''
+  }
+}
+
+function valueFormat(value: string | number | boolean | (string | number | boolean)[]) {
+  return props.type === 'checkbox' ? (isArray(value) ? value : []) : value
+}
+
+function handleChange({ value }: { value: string | number | boolean | (string | number | boolean)[] }) {
+  selectList.value = value
+  emit('change', { value })
+  if (props.type === 'radio' && !props.showConfirm) {
+    onConfirm()
+  }
+}
+
+function close() {
+  pickerShow.value = false
+  emit('update:visible', false)
+  // 未确定选项时，数据还原复位
+  if (!isConfirm.value) {
+    selectList.value = valueFormat(lastSelectList.value)
+  }
+  emit('cancel')
+  emit('close')
+}
+
+function open() {
+  selectList.value = valueFormat(props.modelValue)
+  pickerShow.value = true
+  emit('update:visible', true)
+  isConfirm.value = false
+  emit('open')
+}
+
+function onConfirm() {
+  if (props.loading) {
+    pickerShow.value = false
+    emit('update:visible', false)
+    emit('confirm')
+    emit('close')
+    return
+  }
+  callInterceptor(props.beforeConfirm, {
+    args: [selectList.value],
+    done: () => {
+      handleConfirm()
+    }
+  })
+}
+
+function handleConfirm() {
+  isConfirm.value = true
+  pickerShow.value = false
+  emit('update:visible', false)
+  lastSelectList.value = valueFormat(selectList.value)
+  let selectedItems: Record<string, any> = {}
+  if (props.type === 'checkbox') {
+    selectedItems = (isArray(lastSelectList.value) ? lastSelectList.value : []).map((item) => {
+      return getSelectedItem(item)
+    })
+  } else {
+    selectedItems = getSelectedItem(lastSelectList.value as string | number | boolean)
+  }
+  emit('update:modelValue', lastSelectList.value)
+  emit('confirm', {
+    value: lastSelectList.value,
+    selectedItems
+  })
+  emit('close')
+}
+
+function escapeRegExp(text: string) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function getFilterText(label: string, filterVal: string): Array<{ type: 'active' | 'normal'; label: string }> {
+  const reg = new RegExp(`(${escapeRegExp(filterVal)})`, 'g')
+
+  return label.split(reg).map((text) => {
+    return {
+      type: text === filterVal ? 'active' : 'normal',
+      label: text
+    }
+  })
+}
+
+function handleFilterChange({ value }: { value: string }) {
+  filterVal.value = value
+  if (value === '') {
+    filterColumns.value = props.columns
+  } else {
+    formatFilterColumns(props.columns, value)
+  }
+}
+
+function formatFilterColumns(columns: Record<string, any>[], filterVal: string) {
+  const filterColumnsTemp = columns.filter((item) => {
+    return item[props.labelKey].indexOf(filterVal) > -1
+  })
+
+  const formatFilterColumns = filterColumnsTemp.map((item) => {
+    return {
+      ...item,
+      [props.labelKey]: getFilterText(item[props.labelKey], filterVal)
+    }
+  })
+  filterColumns.value = formatFilterColumns
+}
+
+const showConfirm = computed(() => {
+  return (props.type === 'radio' && props.showConfirm) || props.type === 'checkbox'
+})
+
+defineExpose<SelectPickerExpose>({
+  close,
+  open
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-sidebar/index.scss

@@ -0,0 +1,25 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 侧边栏宽度
+$sidebar-width: var(--wot-sidebar-width, 114px) !default;
+// 侧边栏高度
+$sidebar-height: var(--wot-sidebar-height, 100%) !default;
+// 侧边栏背景色
+$sidebar-bg: var(--wot-sidebar-bg, $filled-oppo) !default;
+// 内容区背景色
+$sidebar-padding-bg: var(--wot-sidebar-padding-bg, $filled-oppo) !default;
+
+@include b(sidebar) {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  width: $sidebar-width;
+  height: $sidebar-height;
+  background: $sidebar-bg;
+
+  @include e(padding) {
+    flex: 1 1 auto;
+    background: $sidebar-padding-bg;
+  }
+}

package/components/wd-sidebar/types.ts

@@ -0,0 +1,34 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-01-05 18:03:27
+ * @LastEditTime: 2024-11-18 23:27:55
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-sidebar/types.ts
+ * 记得注释
+ */
+import { type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import { baseProps, makeNumericProp } from '../../common/props'
+
+export type SidebarProvide = {
+  props: Partial<SidebarProps>
+  setChange: (value: number | string, label: string) => void
+}
+
+export const SIDEBAR_KEY: InjectionKey<SidebarProvide> = Symbol('wd-sidebar')
+
+export type SidebarBeforeChange = (value: number | string) => boolean | Promise<boolean>
+
+export const sidebarProps = {
+  ...baseProps,
+  /**
+   * 当前导航项的索引
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * 在改变前执行的函数
+   */
+  beforeChange: Function as PropType<SidebarBeforeChange>
+}
+
+export type SidebarProps = ExtractPropTypes<typeof sidebarProps>

package/components/wd-sidebar/wd-sidebar.vue

@@ -0,0 +1,57 @@
+<template>
+  <view :class="`wd-sidebar ${customClass}`" :style="customStyle">
+    <slot></slot>
+    <view class="wd-sidebar__padding"></view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sidebar',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { callInterceptor } from '../../common/interceptor'
+import { useChildren } from '../../composables/useChildren'
+import { SIDEBAR_KEY, sidebarProps } from './types'
+
+const props = defineProps(sidebarProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { linkChildren } = useChildren(SIDEBAR_KEY)
+linkChildren({ props, setChange })
+
+/**
+ * 子项状态变更
+ * @param value 目标值
+ * @param label 目标值标题
+ */
+function setChange(value: number | string, label: string) {
+  callInterceptor(props.beforeChange, {
+    args: [value],
+    done: () => updateValue(value, label)
+  })
+}
+
+/**
+ * 更新选中状态
+ * @param value 目标值
+ * @param label 目标值标题
+ */
+function updateValue(value: number | string, label: string) {
+  emit('update:modelValue', value)
+  emit('change', { value, label })
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-sidebar-item/index.scss

@@ -0,0 +1,91 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 选项字号
+$sidebar-item-font-size: var(--wot-sidebar-item-font-size, $typography-body-size-main) !default;
+// 选项行高
+$sidebar-item-line-height: var(--wot-sidebar-item-line-height, $typography-body-line--height-size-main) !default;
+// 选项文字颜色
+$sidebar-item-color: var(--wot-sidebar-item-color, $text-main) !default;
+// 选项内边距
+$sidebar-item-padding: var(--wot-sidebar-item-padding, $padding-extra-tight $padding-extra-loose) !default;
+// 选项背景色
+$sidebar-item-bg: var(--wot-sidebar-item-bg, $filled-bottom) !default;
+// 选项最小高度
+$sidebar-item-min-height: var(--wot-sidebar-item-min-height, $n-52) !default;
+// 选项点击态背景色
+$sidebar-item-bg-hover: var(--wot-sidebar-item-bg-hover, $feedback-active) !default;
+// 激活项背景色
+$sidebar-item-bg-active: var(--wot-sidebar-item-bg-active, $filled-oppo) !default;
+// 激活项文字颜色
+$sidebar-item-color-active: var(--wot-sidebar-item-color-active, $primary-6) !default;
+// 激活项字重
+$sidebar-item-font-weight-active: var(--wot-sidebar-item-font-weight-active, $font-weight-semibold) !default;
+// 激活指示条宽度
+$sidebar-item-indicator-width: var(--wot-sidebar-item-indicator-width, $n-2) !default;
+// 激活指示条高度
+$sidebar-item-indicator-height: var(--wot-sidebar-item-indicator-height, $n-20) !default;
+// 圆角大小
+$sidebar-item-border-radius: var(--wot-sidebar-item-border-radius, $radius-large) !default;
+// 禁用状态文字颜色
+$sidebar-item-color-disabled: var(--wot-sidebar-item-color-disabled, $text-disabled) !default;
+// 图标大小
+$sidebar-item-icon-size: var(--wot-sidebar-item-icon-size, $n-20) !default;
+// 图标右边距
+$sidebar-item-icon-margin-right: var(--wot-sidebar-item-icon-margin-right, $padding-ultra-tight) !default;
+
+@include b(sidebar-item) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: $sidebar-item-padding;
+  font-size: $sidebar-item-font-size;
+  color: $sidebar-item-color;
+  background: $sidebar-item-bg;
+  min-height: $sidebar-item-min-height;
+  box-sizing: border-box;
+  white-space: wrap;
+  line-height: $sidebar-item-line-height;
+
+  @include m(active) {
+    font-weight: $sidebar-item-font-weight-active;
+    background: $sidebar-item-bg-active;
+    color: $sidebar-item-color-active;
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: $sidebar-item-indicator-width;
+      height: $sidebar-item-indicator-height;
+      background: $sidebar-item-color-active;
+      transform: translateY(-50%);
+      content: '';
+      border-radius: $sidebar-item-indicator-width;
+    }
+  }
+
+  @include m(prefix) {
+    border-bottom-right-radius: $sidebar-item-border-radius;
+  }
+
+  @include m(suffix) {
+    border-top-right-radius: $sidebar-item-border-radius;
+  }
+
+  @include m(disabled) {
+    color: $sidebar-item-color-disabled;
+    cursor: not-allowed;
+  }
+
+  @include edeep(badge) {
+    z-index: 2;
+    word-break: break-all;
+  }
+
+  @include edeep(icon) {
+    font-size: $sidebar-item-icon-size;
+    margin-right: $sidebar-item-icon-margin-right;
+  }
+}

package/components/wd-sidebar-item/types.ts

@@ -0,0 +1,28 @@
+import type { ExtractPropTypes, Prop, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp } from '../../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+export const sidebarItemProps = {
+  ...baseProps,
+  /** 当前选项标题 */
+  label: makeRequiredProp(String),
+  /** 当前选项的值，唯一标识 */
+  value: makeRequiredProp([Number, String]),
+  /** 徽标显示值 */
+  badge: [String, Number] as PropType<string | number>,
+  /** 徽标属性，透传给 Badge 组件 */
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
+  /** 图标 */
+  icon: String,
+  /** 是否点状徽标 */
+  isDot: {
+    type: Boolean,
+    default: undefined
+  },
+  /** 徽标最大值 */
+  max: Number,
+  /** 是否禁用 */
+  disabled: makeBooleanProp(false)
+}
+
+export type SidebarItemProps = ExtractPropTypes<typeof sidebarItemProps>