u

code/base-project/base-vue/packages/ao-design/src/collapse/collapse-group.tsx

@@ -0,0 +1,129 @@
+import type { PropType, VNode } from 'vue'
+import { defineComponent, provide, reactive, ref, watch } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import { collapseGroupKey } from './context'
+
+export default defineComponent({
+  name: 'collapse',
+  props: {
+    activeKey: {
+      type: [String, Number, Boolean, Array] as PropType<
+           string | number | boolean | (string | number | boolean)[]
+         >,
+      default: undefined,
+    },
+    defaultActiveKey: {
+      type: [String, Number, Boolean, Array] as PropType<
+        string | number | boolean | (string | number | boolean)[]
+      >,
+      default: undefined,
+    },
+    borderLess: {
+      type: Boolean,
+      default: true,
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    accordion: {
+      type: Boolean,
+      default: true,
+    },
+    expandIcon: {
+      type: [Boolean, String, Object, Function] as PropType<
+           boolean | string | VNode | ((args: { expanded: boolean }) => VNode)
+         >,
+      default: true,
+    },
+    expandIconPlacement: {
+      type: String as PropType<'left' | 'right'>,
+      default: 'left',
+    },
+    destroyOnHide: {
+      type: Boolean,
+      default: false,
+    },
+    class: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    style: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['update:activeKey', 'change'],
+  setup(props, { slots, emit }) {
+    const prefixCls = getPrefixCls('collapse-group')
+
+    const _activeKey = ref(props.activeKey ?? props.defaultActiveKey ?? (!props.accordion ? [] : undefined))
+
+    watch(
+      () => props.activeKey,
+      (newVal) => {
+        _activeKey.value = newVal ?? (!props.accordion ? [] : undefined)
+      },
+    )
+
+    const handleChange = (val: string | number | boolean, e: Event) => {
+      // 外部 v-model 类型决定内部 value 的类型
+      const isArrayMode = Array.isArray(_activeKey.value)
+      if (isArrayMode) {
+        const arr = [...(_activeKey.value as (string | number | boolean)[])]
+        const idx = arr.indexOf(val)
+        if (idx >= 0) {
+          arr.splice(idx, 1)
+        }
+        else {
+          if (props.accordion)
+            arr.length = 0 // 单选时只保留最后一个
+          arr.push(val)
+        }
+        _activeKey.value = arr
+        emit('update:activeKey', arr)
+        emit('change', arr, e)
+      }
+      else {
+        // 非数组模式：单选或多选时非数组 v-model
+        const newVal = _activeKey.value === val ? undefined : val
+        _activeKey.value = newVal
+        emit('update:activeKey', newVal)
+        emit('change', newVal, e)
+      }
+    }
+
+    provide(
+      collapseGroupKey,
+      reactive({
+        name: 'AoCollapseGroup' as const,
+        activeKey: _activeKey,
+        disabled: props.disabled,
+        defaultExpandAll: props.defaultExpandAll,
+        expandIcon: props.expandIcon,
+        expandIconPlacement: props.expandIconPlacement,
+        destroyOnHide: props.destroyOnHide,
+        borderLess: props.borderLess,
+        slots,
+        handleChange,
+      }),
+    )
+
+    return () => (
+      <div
+        class={[
+          prefixCls,
+          props.class,
+          { [`${prefixCls}-border-less`]: props.borderLess },
+        ]}
+        style={{ ...props.style }}
+      >
+        { slots.default?.()}
+      </div>
+    )
+  },
+})

code/base-project/base-vue/packages/ao-design/src/collapse/collapse.tsx

@@ -0,0 +1,258 @@
+import type { PropType, TransitionProps, VNode } from 'vue'
+import type { CollapseGroupContext } from './context'
+import { computed, defineComponent, inject, ref, Transition, watch } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+import Icon from '../icon/index'
+
+import { collapseGroupKey } from './context'
+
+export default defineComponent({
+  name: 'CollapseItem',
+  props: {
+    expanded: {
+      type: Boolean,
+      default: undefined,
+    },
+    defaultExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Number, Boolean] as PropType<string | number | boolean>,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      default: undefined,
+    },
+    expandIcon: {
+      type: [Boolean, String, Object, Function] as PropType<
+        boolean | string | VNode | ((args: { expanded: boolean }) => VNode)
+      >,
+      default: true,
+    },
+    expandIconPlacement: {
+      type: String as PropType<'left' | 'right'>,
+    },
+    title: {
+      type: [String, Object, Function] as PropType<string | VNode | (() => VNode)>,
+      default: '',
+    },
+    destroyOnHide: {
+      type: Boolean,
+      default: false,
+    },
+    headerRightContent: {
+      type: [String, Object, Function] as PropType<string | VNode | (() => VNode)>,
+    },
+    borderLess: {
+      type: Boolean,
+      default: undefined,
+    },
+    class: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    style: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['change', 'update:modelValue', 'update:expanded'],
+  setup(props, { slots, emit }) {
+    const prefixCls = getPrefixCls('collapse')
+
+    const collapseGroupCtx = inject<CollapseGroupContext | undefined>(collapseGroupKey, undefined)
+
+    const _expanded = ref(props.defaultExpanded)
+
+    const inGroup = computed(() => !!collapseGroupCtx)
+    const isDisabled = computed(() => props.disabled || collapseGroupCtx?.disabled)
+    const isExpanded = computed(() => {
+      if (inGroup.value && collapseGroupCtx) {
+        const groupValue = collapseGroupCtx.activeKey
+        if (Array.isArray(groupValue)) {
+          return groupValue.includes(props.value)
+        }
+        return groupValue === props.value
+      }
+      return props.expanded ?? props.modelValue ?? _expanded.value
+    })
+    const isDestroyOnHide = computed(() => props.destroyOnHide || collapseGroupCtx?.destroyOnHide)
+    const isBorderLess = computed(() => props.borderLess || collapseGroupCtx?.borderLess)
+
+    const isMounted = ref(isDestroyOnHide.value ? isExpanded.value : true)
+
+    watch(isExpanded, (isExpanded) => {
+      if (isExpanded && !isMounted.value) {
+        isMounted.value = true
+      }
+    })
+
+    const handleChange = (event: MouseEvent) => {
+      if (isDisabled.value)
+        return
+
+      if (inGroup.value && collapseGroupCtx) {
+        collapseGroupCtx.handleChange(props.value, event)
+      }
+      else {
+        const newChecked = !isExpanded.value
+        if (props.expanded === undefined)
+          _expanded.value = newChecked
+
+        emit('update:modelValue', newChecked)
+        emit('update:expanded', newChecked)
+      }
+
+      emit('change', { value: props.value, event })
+    }
+
+    watch(() => props.expanded, (val) => {
+      if (val !== undefined) {
+        _expanded.value = val
+      }
+    })
+
+    const renderTitle = () => {
+      const content = slots.title ? slots.title() : (typeof props.title === 'function' ? props.title() : props.title)
+
+      return <div class={`${prefixCls}-title`}>{content}</div>
+    }
+
+    const mergedExpandIcon = computed(() => {
+      if (props.expandIcon !== undefined)
+        return props.expandIcon
+      if (collapseGroupCtx?.expandIcon !== undefined)
+        return collapseGroupCtx.expandIcon
+      return true // 默认值
+    })
+
+    const mergedExpandIconPlacement = computed<'left' | 'right'>(() => {
+      if (props.expandIconPlacement)
+        return props.expandIconPlacement
+      if (collapseGroupCtx?.expandIconPlacement)
+        return collapseGroupCtx.expandIconPlacement
+      return 'left'
+    })
+
+    const renderExpandIcon = () => {
+      const iconProp = mergedExpandIcon.value
+      const placement = mergedExpandIconPlacement.value
+
+      // 插槽优先
+      if (slots.expandIcon) {
+        return slots.expandIcon({ expanded: isExpanded.value })
+      }
+
+      if (typeof iconProp === 'boolean') {
+        if (!iconProp)
+          return null
+        return (
+          <Icon
+            size={16}
+            icon="ix:chevron-down"
+            class={[
+              `${prefixCls}-icon`,
+              `${prefixCls}-icon-${placement}`,
+              isExpanded.value
+                ? `${prefixCls}-icon-expanded`
+                : `${prefixCls}-icon-collapsed`,
+            ]}
+          />
+        )
+      }
+
+      if (typeof iconProp === 'string') {
+        return (
+          <Icon
+            icon={iconProp}
+            class={[`${prefixCls}-icon`, `${prefixCls}-icon-${placement}`]}
+          />
+        )
+      }
+
+      if (typeof iconProp === 'function') {
+        return iconProp({ expanded: isExpanded.value })
+      }
+
+      return iconProp // VNode
+    }
+
+    const renderHeaderRight = () => {
+      if (slots.headerRightContent)
+        return slots.headerRightContent()
+      const content = props.headerRightContent
+      return typeof content === 'function' ? content() : content
+    }
+
+    const transitionEvents: TransitionProps = {
+      onEnter: (el: Element) => {
+        (el as HTMLDivElement).style.height = `${el.scrollHeight}px`
+      },
+      onAfterEnter: (el: Element) => {
+        (el as HTMLDivElement).style.height = 'auto'
+      },
+      onBeforeLeave: (el: Element) => {
+        (el as HTMLDivElement).style.height = `${el.scrollHeight}px`
+      },
+      onLeave: (el: Element) => {
+        (el as HTMLDivElement).style.height = '0'
+      },
+      onAfterLeave: () => {
+        if (isDestroyOnHide.value) {
+          isMounted.value = false
+        }
+      },
+    }
+
+    return () => {
+      const iconVNode = renderExpandIcon()
+      const titleVNode = renderTitle()
+      const headerRight = renderHeaderRight()
+      return (
+        <div
+          class={[
+            prefixCls,
+            props.class,
+            { [`${prefixCls}-disabled`]: isDisabled.value },
+            { [`${prefixCls}-border-less`]: isBorderLess.value },
+          ]}
+          style={{ ...props.style }}
+        >
+          <div class={`${prefixCls}-header`} onClick={handleChange}>
+            {mergedExpandIconPlacement.value === 'left'
+              ? (
+                  <>
+                    {iconVNode}
+                    {titleVNode}
+                    {headerRight}
+                  </>
+                )
+              : (
+                  <>
+                    {titleVNode}
+                    {headerRight}
+                    {iconVNode}
+                  </>
+                )}
+          </div>
+          <Transition name="collapse-slider" {...transitionEvents}>
+            <div class={`${prefixCls}-body`} v-show={isExpanded.value}>
+              {isMounted.value && (
+                <div class={`${prefixCls}-content`}>
+                  {slots.default?.()}
+                </div>
+              )}
+            </div>
+          </Transition>
+
+        </div>
+      )
+    }
+  },
+})

code/base-project/base-vue/packages/ao-design/src/collapse/context.ts

@@ -0,0 +1,15 @@
+import type { InjectionKey, VNode } from 'vue'
+
+export interface CollapseGroupContext {
+  name: 'AoCollapseGroup'
+  activeKey: string | number | boolean | (string | number | boolean)[] | undefined
+  defaultExpandAll: boolean
+  disabled: boolean
+  expandIcon: boolean | string | VNode | ((args: { expanded: boolean }) => VNode)
+  expandIconPlacement: 'left' | 'right'
+  destroyOnHide: boolean
+  borderLess: boolean
+  handleChange: (value: string | number | boolean, e: Event) => void
+}
+
+export const collapseGroupKey: InjectionKey<CollapseGroupContext> = Symbol('CollapseGroup')

code/base-project/base-vue/packages/ao-design/src/collapse/demo.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="main">
+    <ACollapseGroup expand-icon-placement="left" style="width: 400px;" border-less>
+      <ACollapse value="1" title="这是一个折叠标题">
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </ACollapse>
+      <ACollapse value="2" title="这是一个折叠标题" disabled>
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        <template #headerRightContent>
+          <!-- 右侧内容可以是图标、按钮等 -->
+          <button>
+            操作
+          </button>
+        </template>
+      </ACollapse>
+    </ACollapseGroup>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  height: 600px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

code/base-project/base-vue/packages/ao-design/src/collapse/index.scss

@@ -2,18 +2,96 @@
 @use 'sass:color';
 
 $collapse-prefix: '#{$prefix}-collapse';
+$collapse-group-prefix: '#{$prefix}-collapse-group';
 
-.#{$collapse-prefix} {
+.#{$collapse-group-prefix} {
   font-size: 14px;
   color: $text-color-base;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   list-style: none;
-  border: solid 1px $border-color;
+  border: solid 1px $border-color-component;
   border-bottom: 0;
   background: $bg-color-container;
-
-  .#{$collapse-prefix}-panel {
+  &.#{$collapse-group-prefix}-border-less {
+    border: none;
   }
 }
+
+.#{$collapse-prefix} {
+  overflow: hidden;
+
+  &.#{$collapse-prefix}-border-less {
+    border: none;
+    .#{$collapse-prefix}-header {
+      border-bottom: none;
+    }
+    .#{$collapse-prefix}-body {
+      background-color: $bg-color-container;
+      border-bottom: none;
+    }
+  }
+
+  &.#{$collapse-prefix}-disabled {
+    .#{$collapse-prefix}-header {
+      cursor: not-allowed;
+      color: $text-color-disabled;
+    }
+    .#{$collapse-prefix}-body .#{$collapse-prefix}-content {
+      color: $text-color-disabled;
+    }
+  }
+
+  .#{$collapse-prefix}-header {
+    padding: 12px 16px;
+    border-bottom: solid 1px $border-color-component;
+    font-size: 14px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .#{$collapse-prefix}-icon {
+      transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &.#{$collapse-prefix}-icon-left {
+        margin-right: 8px;
+      }
+      &.#{$collapse-prefix}-icon-right {
+        margin-left: 8px;
+      }
+
+      &.#{$collapse-prefix}-icon-expanded {
+      }
+      &.#{$collapse-prefix}-icon-collapsed {
+        transform: rotate(-90deg);
+      }
+    }
+    .#{$collapse-prefix}-title {
+      flex: 1;
+    }
+  }
+
+  .#{$collapse-prefix}-body {
+    border-bottom: solid 1px $border-color;
+    background: $bg-color-secondarycomponent;
+    overflow: inherit;
+    .#{$collapse-prefix}-content {
+      padding: 12px 16px 12px 40px;
+      color: $text-color-secondary;
+    }
+  }
+}
+
+.collapse-slider-enter-from,
+.collapse-slider-leave-to {
+  height: 0;
+}
+
+.collapse-slider-enter-active,
+.collapse-slider-leave-active {
+  transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}

code/base-project/base-vue/packages/ao-design/src/components.ts

@@ -4,7 +4,8 @@ export { default as Button } from './button'
 export { default as Card } from './card'
 export { default as Checkbox } from './checkbox/checkbox'
 export { default as CheckboxGroup } from './checkbox/checkbox-group'
-export { default as Collapse } from './collapse'
+export { default as Collapse } from './collapse/collapse'
+export { default as CollapseGroup } from './collapse/collapse-group'
 export { default as Drawer } from './drawer'
 export { default as Group } from './group'
 export { default as Icon } from './icon'

code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions-group.tsx

@@ -0,0 +1,25 @@
+import { defineComponent } from 'vue'
+import { getPrefixCls } from '../_utils/getPrefixCls'
+
+export default defineComponent({
+  name: 'DescriptionsGroup',
+  props: {
+    class: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    style: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: [],
+  setup(props, { slots, emit }) {
+    const prefixCls = getPrefixCls('descriptions-group')
+    return () => (
+      <div class={[prefixCls, props.class]} style={{ ...props.style }}>
+        {slots.default?.()}
+      </div>
+    )
+  },
+})

code/base-project/base-vue/packages/ao-design/src/descriptions/descriptions.tsx

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
 import { getPrefixCls } from '../_utils/getPrefixCls'
 
 export default defineComponent({
-  name: 'Collapse',
+  name: 'Descriptions',
   props: {
     class: {
       type: [String, Array, Object],
@@ -15,7 +15,7 @@ export default defineComponent({
   },
   emits: [],
   setup(props, { slots, emit }) {
-    const prefixCls = getPrefixCls('collapse')
+    const prefixCls = getPrefixCls('descriptions')
     return () => (
       <div class={[prefixCls, props.class]} style={{ ...props.style }}>
         {slots.default?.()}

code/base-project/base-vue/packages/ao-design/src/descriptions/index.scss

@@ -0,0 +1,7 @@
+@use '../_styles/_variables.scss' as *;
+@use 'sass:color';
+
+$descriptions-prefix: '#{$prefix}-descriptions';
+
+.#{$descriptions-prefix} {
+}

code/base-project/base-vue/packages/ao-design/src/tag/context.ts

@@ -6,7 +6,6 @@ export interface TagGroupContext {
   disabled: boolean
   checkable: boolean
   slots: Slots
-  multiple: boolean
   handleChange: (value: string | number | boolean, e: Event) => void
 }
 

code/base-project/base-vue/packages/ao-design/src/tag/tag-group.tsx

@@ -91,7 +91,6 @@ export default defineComponent({
         disabled: groupDisabled,
         slots,
         checkable: true,
-        multiple: props.multiple,
         handleChange,
       }),
     )

code/base-project/base-vue/src/App.vue

@@ -1,48 +1,17 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 
-const loading = ref(false)
-
-function toggleLoading() {
-  loading.value = !loading.value
-}
 </script>
 
 <template>
-  <div class="main">
-    <!-- 卡片 -->
-    <ACard
-      :loading="loading"
-      title="标题"
-      sub-title="副标题"
-      style="width: 400px;"
-      hover-shadow
-      cover="https://tdesign.gtimg.com/site/source/card-demo.png"
-    >
-      <template #actions>
-        actions
-      </template>
+  <div>
+    content
 
-      这里是内容
-
-      <template #footer>
-        这里是footer
-      </template>
-    </ACard>
-
-    <!-- 按钮 -->
-    <button style="margin-top: 16px;" @click="toggleLoading">
-      {{ loading ? '关闭 Loading' : '开启 Loading' }}
-    </button>
+    <t-descriptions-item label="Name">
+      TDesign
+    </t-descriptions-item>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.main {
-  height: 800px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
+
 </style>

code/base-project/base-vue/src/components.d.ts

@@ -13,6 +13,8 @@ declare module 'vue' {
     ACard: typeof import('@ao/ao-design')['Card']
     ACheckbox: typeof import('@ao/ao-design')['Checkbox']
     ACheckboxGroup: typeof import('@ao/ao-design')['CheckboxGroup']
+    ACollapse: typeof import('@ao/ao-design')['Collapse']
+    ACollapseGroup: typeof import('@ao/ao-design')['CollapseGroup']
     AConfigProvider: typeof import('@ao/ao-design')['ConfigProvider']
     ADrawer: typeof import('@ao/ao-design')['Drawer']
     AGroup: typeof import('@ao/ao-design')['Group']