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

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

@@ -0,0 +1,83 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <!-- 每一列 -->
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-col',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
+import { useParent } from '../../composables/useParent'
+import { ROW_KEY } from '../wd-row/types'
+import { colProps } from './types'
+import { isDef } from '../../common/util'
+
+const props = defineProps(colProps)
+const { parent: row } = useParent(ROW_KEY)
+
+const rootClass = computed(() => {
+  return `wd-col ${props.customClass}`
+})
+
+const rootStyle = computed(() => {
+  const gutter = isDef(row.value) ? row.value.props.gutter || 0 : 0
+  const { span, offset } = props
+  const styles: string[] = []
+
+  // gutter 间距：左右 padding
+  if (gutter > 0) {
+    const padding = `${gutter / 2}px`
+    styles.push(`padding-left: ${padding}`)
+    styles.push(`padding-right: ${padding}`)
+    styles.push('background-clip: content-box')
+  }
+
+  // 栅格宽度
+  if (span > 0 && span < 24) {
+    const width = `${(span / 24) * 100}%`
+    styles.push(`width: ${width}`)
+  } else if (span === 24) {
+    styles.push('width: 100%')
+  }
+
+  // 栅格偏移
+  if (offset > 0) {
+    const marginLeft = `${(offset / 24) * 100}%`
+    styles.push(`margin-left: ${marginLeft}`)
+  }
+
+  // 追加用户自定义样式
+  if (props.customStyle) {
+    styles.push(props.customStyle)
+  }
+
+  return styles.join(';')
+})
+
+watch([() => props.span, () => props.offset], () => {
+  check()
+})
+
+function check() {
+  const { span, offset } = props
+  if (span < 0 || offset < 0) {
+    console.error('[wot-design] warning(wd-col): attribute span/offset must be greater than or equal to 0')
+  }
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-collapse/index.scss

@@ -0,0 +1,71 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 折叠面板背景颜色
+$collapse-bg: var(--wot-collapse-bg, $filled-oppo) !default;
+// 折叠内容文字颜色
+$collapse-body-color: var(--wot-collapse-body-color, $text-auxiliary) !default;
+// 折叠内容文字字号
+$collapse-body-font-size: var(--wot-collapse-body-font-size, $typography-label-size-large) !default;
+// 折叠容器左右内边距
+$collapse-padding: var(--wot-collapse-padding, $padding-loose) !default;
+// 折叠内容区域内边距
+$collapse-body-padding: var(--wot-collapse-body-padding, $padding-extra-loose $padding-loose) !default;
+// 折叠标题文字颜色
+$collapse-title-color: var(--wot-collapse-title-color, $text-main) !default;
+// 折叠标题文字字号
+$collapse-title-font-size: var(--wot-collapse-title-font-size, $typography-body-size-extra-large) !default;
+// 折叠箭头尺寸
+$collapse-arrow-size: var(--wot-collapse-arrow-size, $n-16) !default;
+// 折叠箭头颜色
+$collapse-arrow-color: var(--wot-collapse-arrow-color, $icon-main) !default;
+// 更多按钮文字字号
+$collapse-more-font-size: var(--wot-collapse-more-font-size, $typography-body-size-main) !default;
+// 更多按钮文字颜色
+$collapse-more-color: var(--wot-collapse-more-color, $primary-6) !default;
+// 更多按钮上边距
+$collapse-more-margin-top: var(--wot-collapse-more-margin-top, $spacing-main) !default;
+// 更多按钮文字右侧间距
+$collapse-more-text-margin-right: var(--wot-collapse-more-text-margin-right, $spacing-super-tight) !default;
+
+@include b(collapse) {
+  background: $collapse-bg;
+
+  @include when(viewmore) {
+    padding: $collapse-padding;
+  }
+  @include e(content) {
+    font-size: $collapse-body-font-size;
+    color: $collapse-body-color;
+
+    @include when(retract) {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+  @include e(more) {
+    display: inline-block;
+    font-size: $collapse-more-font-size;
+    margin-top: $collapse-more-margin-top;
+    color: $collapse-more-color;
+    user-select: none;
+  }
+  @include e(more-txt) {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: $collapse-more-text-margin-right;
+  }
+  @include e(arrow) {
+    display: inline-block;
+    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

@@ -0,0 +1,68 @@
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+
+export type CollapseToggleAllOptions =
+  | boolean
+  | {
+      expanded?: boolean
+      skipDisabled?: boolean
+    }
+
+export type CollapseProvide = {
+  props: Partial<CollapseProps>
+  toggle: (name: string, expanded: boolean) => void
+}
+
+export const COLLAPSE_KEY: InjectionKey<CollapseProvide> = Symbol('wd-collapse')
+
+export const collapseProps = {
+  ...baseProps,
+  /**
+   * 查看更多模式下的插槽外部自定义样式类
+   * 类型: string
+   */
+  customMoreSlotClass: makeStringProp(''),
+  /**
+   * 绑定值，手风琴模式下为 string，普通模式下为 array，查看更多模式下为 boolean
+   * 类型: string | string[] | boolean
+   */
+  modelValue: {
+    type: [String, Array, Boolean] as PropType<string | string[] | boolean>
+  },
+  /**
+   * 是否开启手风琴模式
+   * 类型: boolean
+   * 默认值: false
+   */
+  accordion: makeBooleanProp(false),
+  /**
+   * 是否开启查看更多模式
+   * 类型: boolean
+   * 默认值: false
+   */
+  viewmore: makeBooleanProp(false),
+  /**
+   * 查看更多模式下，是否使用自定义插槽
+   * 类型: boolean
+   * 默认值: false
+   */
+  useMoreSlot: makeBooleanProp(false),
+  /**
+   * 查看更多模式下，收起时的显示行数
+   * 类型: number
+   * 默认值: 2
+   */
+  lineNum: makeNumberProp(2)
+}
+
+export type CollapseProps = ExtractPropTypes<typeof collapseProps>
+
+export type CollapseExpose = {
+  /**
+   * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
+   * @param options 面板状态
+   */
+  toggleAll: (options?: CollapseToggleAllOptions) => void
+}
+
+export type CollapseInstance = ComponentPublicInstance<CollapseProps, CollapseExpose>

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

@@ -0,0 +1,165 @@
+<template>
+  <view :class="`wd-collapse ${viewmore ? 'is-viewmore' : ''} ${customClass}`" :style="customStyle">
+    <!-- 普通或手风琴 -->
+    <block v-if="!viewmore">
+      <slot></slot>
+    </block>
+    <!-- 查看更多模式 -->
+    <view v-else>
+      <view
+        :class="`wd-collapse__content ${!modelValue ? 'is-retract' : ''} `"
+        :style="`-webkit-line-clamp: ${contentLineNum}; -webkit-box-orient: vertical`"
+      >
+        <slot></slot>
+      </view>
+      <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>
+          <view :class="`wd-collapse__arrow ${modelValue ? 'is-retract' : ''}`">
+            <wd-icon name="down"></wd-icon>
+          </view>
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-collapse',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+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, isBoolean, isDef } from '../../common/util'
+import { useTranslate } from '../../composables/useTranslate'
+
+const props = defineProps(collapseProps)
+const emit = defineEmits<{
+  (e: 'change', value: { value: string | string[] | boolean }): void
+  (e: 'update:modelValue', value: string | string[] | boolean): void
+}>()
+
+const { translate } = useTranslate('collapse')
+const contentLineNum = ref<number>(0) // 查看更多的折叠面板，收起时的显示行数
+
+const { linkChildren, children } = useChildren(COLLAPSE_KEY)
+
+linkChildren({ props, toggle })
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    const { viewmore, accordion } = props
+    // 手风琴状态下 value 类型只能为 string
+    if (accordion && typeof newVal !== 'string') {
+      console.error('accordion value must be string')
+    } else if (!accordion && !viewmore && !isArray(newVal)) {
+      console.error('value must be Array')
+    }
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.lineNum,
+  (newVal) => {
+    if (newVal <= 0) {
+      console.error('lineNum must greater than 0')
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+onBeforeMount(() => {
+  const { lineNum, viewmore, modelValue } = props
+  contentLineNum.value = viewmore && !modelValue ? lineNum : 0
+})
+
+/**
+ * 更新绑定值
+ * @param activeNames 选中的值
+ */
+function updateChange(activeNames: string | string[] | boolean) {
+  emit('update:modelValue', activeNames)
+  emit('change', {
+    value: activeNames
+  })
+}
+
+/**
+ * 切换选中状态
+ * @param name 唯一标识符
+ * @param expanded 是否展开
+ */
+function toggle(name: string, expanded: boolean) {
+  const { accordion, modelValue } = props
+  if (accordion) {
+    updateChange(name === modelValue ? '' : name)
+  } else if (expanded) {
+    updateChange((modelValue as string[]).concat(name))
+  } else {
+    updateChange((modelValue as string[]).filter((activeName) => activeName !== name))
+  }
+}
+
+/**
+ * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
+ * @param options 面板状态
+ */
+const toggleAll = (options: CollapseToggleAllOptions = {}) => {
+  if (props.accordion) {
+    return
+  }
+  if (isBoolean(options)) {
+    options = { expanded: options }
+  }
+
+  const { expanded, skipDisabled } = options
+  const names: string[] = []
+  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)
+    }
+  })
+  updateChange(names)
+}
+
+/**
+ * 查看更多点击
+ */
+function handleMore() {
+  emit('update:modelValue', !props.modelValue)
+  emit('change', {
+    value: !props.modelValue
+  })
+}
+
+defineExpose<CollapseExpose>({
+  toggleAll
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

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

@@ -0,0 +1,86 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 折叠项头部内边距
+$collapse-item-header-padding: var(--wot-collapse-item-header-padding, $padding-extra-loose) !default;
+// 折叠项标题文字颜色
+$collapse-item-title-color: var(--wot-collapse-item-title-color, $text-main) !default;
+// 折叠项标题文字字号
+$collapse-item-title-font-size: var(--wot-collapse-item-title-font-size, $typography-body-size-extra-large) !default;
+// 折叠项标题文字行高
+$collapse-item-title-line-height: var(--wot-collapse-item-title-line-height, $typography-body-line--height-size-extra-large) !default;
+// 折叠项箭头尺寸
+$collapse-item-arrow-size: var(--wot-collapse-item-arrow-size, $n-16) !default;
+// 折叠项箭头颜色
+$collapse-item-arrow-color: var(--wot-collapse-item-arrow-color, $icon-secondary) !default;
+// 折叠项内容文字颜色
+$collapse-item-body-color: var(--wot-collapse-item-body-color, $text-auxiliary) !default;
+// 折叠项内容文字字号
+$collapse-item-body-font-size: var(--wot-collapse-item-body-font-size, $typography-label-size-large) !default;
+// 折叠项内容文字行高
+$collapse-item-body-line-height: var(--wot-collapse-item-body-line-height, $typography-label-line--height-size-large) !default;
+// 折叠项内容区域内边距
+$collapse-item-body-padding: var(--wot-collapse-item-body-padding, $padding-loose $padding-extra-loose) !default;
+
+@include b(collapse-item) {
+  position: relative;
+
+  @include when(border) {
+    @include halfPixelBorder('top');
+
+    .#{$B}__header {
+      @include when(expanded) {
+        @include halfPixelBorder('bottom');
+      }
+    }
+  }
+
+
+  @include e(header) {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $collapse-item-header-padding;
+    overflow: hidden;
+    user-select: none;
+    
+    @include when(custom) {
+      display: block;
+    }
+  }
+
+  @include e(title) {
+    color: $collapse-item-title-color;
+    font-size: $collapse-item-title-font-size;
+    line-height: $collapse-item-title-line-height;
+  }
+
+  @include edeep(arrow) {
+    display: block;
+    font-size: $collapse-item-arrow-size;
+    color: $collapse-item-arrow-color;
+    transition: transform 0.3s;
+
+    @include when(retract) {
+      transform: rotate(-180deg);
+    }
+  }
+
+  @include e(wrapper) {
+    position: relative;
+    overflow: hidden;
+    will-change: height;
+  }
+
+  @include e(body) {
+    color: $collapse-item-body-color;
+    font-size: $collapse-item-body-font-size;
+    line-height: $collapse-item-body-line-height;
+    padding: $collapse-item-body-padding;
+  }
+
+  @include when(disabled) {
+    opacity: $opacity-disabled;
+  }
+}

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

@@ -0,0 +1,62 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../../common/props'
+
+export type CollapseItemBeforeExpand = (name: string) => boolean | Promise<boolean>
+
+export const collapseItemProps = {
+  ...baseProps,
+  /**
+   * 自定义折叠栏内容容器样式类名
+   * 类型: string
+   */
+  customBodyClass: makeStringProp(''),
+  /**
+   * 自定义折叠栏内容容器样式
+   * 类型: string
+   */
+  customBodyStyle: makeStringProp(''),
+  /**
+   * 标题，可通过 slot 传递自定义内容
+   * 类型: string
+   */
+  title: makeStringProp(''),
+  /**
+   * 是否禁用
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 唯一标识符
+   * 类型: string
+   * 必填
+   */
+  name: makeRequiredProp(String),
+  /**
+   * 展开前的回调函数，返回 false 可以阻止展开，支持返回 Promise
+   * 类型: function
+   */
+  beforeExpend: Function as PropType<CollapseItemBeforeExpand>,
+  /**
+   * 是否显示边框
+   * 类型: boolean
+   * 默认值: true
+   */
+  border: makeBooleanProp(true)
+}
+
+export type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>
+
+export type CollapseItemExpose = {
+  /**
+   * 获取展开状态
+   * @returns boolean
+   */
+  getExpanded: () => boolean
+  /**
+   * 更新展开状态
+   */
+  updateExpand: () => Promise<void>
+}
+
+export type CollapseItemInstance = ComponentPublicInstance<CollapseItemProps, CollapseItemExpose>