@tplc/wot 0.0.1

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

@@ -0,0 +1,160 @@
+<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="arrow-down"></wd-icon>
+          </view>
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-collapse',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+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 { useTranslate } from '../composables/useTranslate'
+
+const props = defineProps(collapseProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+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, immediate: 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
+})
+
+function updateChange(activeNames: string | string[] | boolean) {
+  emit('update:modelValue', activeNames)
+  emit('change', {
+    value: activeNames,
+  })
+}
+
+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: boolean | CollapseToggleAllOptions = {}) => {
+  if (props.accordion) {
+    return
+  }
+  if (typeof options === 'boolean') {
+    options = { expanded: options }
+  }
+
+  const { expanded, skipDisabled } = options
+  const names: string[] = []
+
+  children.forEach((item, index: number) => {
+    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" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,79 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(collapse-item) {
+    @include halfPixelBorder('top', 0, $-dark-border-color);
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(body) {
+      color: $-dark-color3;
+    }
+
+    @include when(disabled) {
+      .wd-collapse-item__title {
+        color: $-dark-color-gray;
+      }
+      .wd-collapse-item__arrow {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(collapse-item) {
+  position: relative;
+  @include halfPixelBorder('top');
+
+  @include e(header) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $-collapse-header-padding;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  @include e(title) {
+    font-size: $-collapse-title-fs;
+    font-weight: $-fw-medium;
+    color: $-collapse-title-color;
+  }
+
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-collapse-arrow-size;
+    color: $-collapse-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) {
+    padding: $-collapse-body-padding;
+    font-size: $-collapse-body-fs;
+    line-height: 1.43;
+    color: $-collapse-body-color;
+  }
+
+  @include when(disabled) {
+    .wd-collapse-item__title {
+      color: $-collapse-disabled-color;
+    }
+    .wd-collapse-item__arrow {
+      color: $-collapse-disabled-color;
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type CollapseItemBeforeExpand = (name: string) => void
+
+export const collapseItemProps = {
+  ...baseProps,
+  /**
+   * 折叠栏的标题, 可通过 slot 传递自定义内容
+   */
+  title: makeStringProp(''),
+  /**
+   * 禁用折叠栏
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 折叠栏的标识符
+   */
+  name: makeRequiredProp(String),
+  /**
+   * 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise
+   */
+  beforeExpend: Function as PropType<CollapseItemBeforeExpand>,
+}
+
+export type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>
+
+export type CollapseItemExpose = {
+  /**
+   * 获取展开状态
+   * @returns boolean
+   */
+  getExpanded: () => boolean
+}
+
+export type CollapseItemInstance = ComponentPublicInstance<CollapseItemProps, CollapseItemExpose>

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

@@ -0,0 +1,182 @@
+<template>
+  <view
+    :class="`wd-collapse-item ${disabled ? 'is-disabled' : ''} is-border ${customClass}`"
+    :style="customStyle"
+  >
+    <view
+      :class="`wd-collapse-item__header  ${isFirst ? 'wd-collapse-item__header-first' : ''}`"
+      @click="handleClick"
+    >
+      <slot name="title" :expanded="expanded" :disabled="disabled" :isFirst="isFirst">
+        <text class="wd-collapse-item__title">{{ title }}</text>
+        <wd-icon
+          name="arrow-down"
+          :custom-class="`wd-collapse-item__arrow ${expanded ? 'is-retract' : ''}`"
+        />
+      </slot>
+    </view>
+    <view
+      class="wd-collapse-item__wrapper"
+      :style="contentStyle"
+      @transitionend="handleTransitionEnd"
+    >
+      <view class="wd-collapse-item__body" :id="collapseId">
+        <slot />
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-collapse-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties } from 'vue'
+import {
+  addUnit,
+  getRect,
+  isArray,
+  isDef,
+  isPromise,
+  objToStyle,
+  requestAnimationFrame,
+  uuid,
+} from '../common/util'
+import { useParent } from '../composables/useParent'
+import { COLLAPSE_KEY } from '../wd-collapse/types'
+import { collapseItemProps, type CollapseItemExpose } from './types'
+
+const collapseId = ref<string>(`collapseId${uuid()}`)
+
+const props = defineProps(collapseItemProps)
+
+const { parent: collapse, index } = useParent(COLLAPSE_KEY)
+
+const height = ref<string | number>('')
+const inited = ref<boolean>(false)
+const expanded = ref<boolean>(false)
+const { proxy } = getCurrentInstance() as any
+
+/**
+ * 容器样式，(动画)
+ */
+const isFirst = computed(() => {
+  return index.value === 0
+})
+
+/**
+ * 容器样式，(动画)
+ */
+const contentStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (inited.value) {
+    style.transition = 'height 0.3s ease-in-out'
+  }
+  if (!expanded.value) {
+    style.height = '0px'
+  } else if (height.value) {
+    style.height = addUnit(height.value)
+  }
+  return objToStyle(style)
+})
+
+const selected = computed(() => {
+  if (collapse) {
+    return collapse.props.modelValue
+  } else {
+    return []
+  }
+})
+
+watch(
+  () => selected.value,
+  () => {
+    if (!inited.value) {
+      return
+    }
+    updateExpend()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+onMounted(() => {
+  updateExpend()
+})
+
+function updateExpend() {
+  return getRect(`#${collapseId.value}`, false, proxy).then((rect) => {
+    const { height: rectHeight } = rect
+    height.value = isDef(rectHeight) ? Number(rectHeight) : ''
+    const name = props.name
+    requestAnimationFrame(() => {
+      if (isDef(selected.value)) {
+        if (
+          (typeof selected.value === 'string' && selected.value === name) ||
+          (isArray(selected.value) && selected.value.indexOf(name as string) >= 0)
+        ) {
+          expanded.value = true
+        } else {
+          expanded.value = false
+        }
+      } else {
+        expanded.value = false
+      }
+      if (!inited.value) {
+        inited.value = true
+      }
+    })
+  })
+}
+
+function handleTransitionEnd() {
+  if (expanded.value) {
+    height.value = ''
+  }
+}
+
+// 点击子项
+function handleClick() {
+  if (props.disabled) return
+  const name = props.name
+  const nexexpanded = !expanded.value // 执行后展开状态
+  if (nexexpanded) {
+    if (props.beforeExpend) {
+      const response: any = props.beforeExpend(name)
+      if (!response) {
+        return
+      }
+      if (isPromise(response)) {
+        response.then(() => {
+          collapse && collapse.toggle(name, !expanded.value)
+        })
+      } else {
+        collapse && collapse.toggle(name, !expanded.value)
+      }
+    } else {
+      collapse && collapse.toggle(name, !expanded.value)
+    }
+  } else {
+    collapse && collapse.toggle(name, !expanded.value)
+  }
+}
+
+function getExpanded() {
+  return expanded.value
+}
+
+defineExpose<CollapseItemExpose>({ getExpanded })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>