feat(collapse): 搭建collapse基本Dom结构 (DevCloudFE#803)

Author: daviForevel

packages/devui-vue/devui/collapse/__tests__/collapse.spec.tsx

@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils';
+import { ref, reactive } from 'vue';
+import { useNamespace } from '../../shared/hooks/use-namespace';
+import { Collapse, CollapseItem } from '../index';
+
+const ns = useNamespace('collapse', true);
+
+const baseClass = ns.b();
+const collapseItemClass = ns.e('item');
+
+describe('d-collapse', () => {
+ it('collapse render work', () => {
+ const value = ref('');
+ const items = ['Item1', 'Item2', 'Item3'];
+ const options = reactive(items);
+ const wrapper = mount({
+ setup() {
+ return () => (
+ <Collapse v-model={value.value}>
+ {options.map((item, index) => (
+ <CollapseItem title={item} key={index}>
+ {item}
+ </CollapseItem>
+ ))}
+ </Collapse>
+ );
+ },
+ });
+
+ expect(wrapper.find(baseClass).exists()).toBeTruthy();
+ const collapseItems = wrapper.findAll(collapseItemClass);
+ expect(collapseItems.length).toBe(3);
+ });
+});

packages/devui-vue/devui/collapse/index.ts

@@ -0,0 +1,17 @@
+import type { App } from 'vue';
+import Collapse from './src/collapse';
+import CollapseItem from './src/collapse-item';
+
+export * from './src/collapse-types';
+
+export { Collapse, CollapseItem };
+
+export default {
+ title: 'Collapse 折叠面板',
+ category: '数据展示',
+ status: '10%',
+ install(app: App): void {
+ app.component(Collapse.name, Collapse);
+ app.component(CollapseItem.name, CollapseItem);
+ },
+};

packages/devui-vue/devui/collapse/src/collapse-item.tsx

@@ -0,0 +1,38 @@
+import { defineComponent, computed, inject, Transition } from 'vue';
+import { collapseItemProps } from './collapse-types';
+import { useNamespace } from '../../shared/hooks/use-namespace';
+import { Icon } from '../../icon';
+import { SELECT_TOKEN } from './const';
+
+export default defineComponent({
+ name: 'DCollapseItem',
+ props: collapseItemProps,
+ setup(props, ctx) {
+ const ns = useNamespace('collapse');
+ const collapse = inject(SELECT_TOKEN, null);
+ const isOpen = computed(() => {
+ if (Array.isArray(collapse?.modelValue)) {
+ return Boolean(collapse?.modelValue.length) && collapse?.modelValue.includes(props.name);
+ } else {
+ return Boolean(collapse?.modelValue) && collapse?.modelValue === props.name;
+ }
+ });
+ return () => {
+ return (
+ <div class={ns.e('item')}>
+ <div class={[ns.e('item-title'), ns.m('overflow-ellipsis'), isOpen.value && ns.m('open')]}>
+ {props.title}
+ <span class={ns.e('open-icon')}>
+ <Icon name="select-arrow" size="16px" />
+ </span>
+ </div>
+ <Transition name="fade">
+ <div v-show={isOpen.value} class={ns.e('item-content')}>
+ {ctx.slots.default?.()}
+ </div>
+ </Transition>
+ </div>
+ );
+ };
+ },
+});

packages/devui-vue/devui/collapse/src/collapse-types.ts

@@ -0,0 +1,29 @@
+import { ExtractPropTypes, PropType } from 'vue';
+export type ModelValue = number | string | Array<number | string>;
+export const collapseProps = {
+ modelValue: {
+ type: [String, Number, Array] as PropType<ModelValue>,
+ default: '',
+ },
+ accordion: {
+ type: Boolean,
+ default: false,
+ },
+} as const;
+
+export type CollapseProps = ExtractPropTypes<typeof collapseProps>;
+
+export const collapseItemProps = {
+ name: {
+ type: [String, Number] as PropType<string | number>,
+ default: '',
+ },
+ title: {
+ type: String,
+ default: '',
+ },
+} as const;
+
+export type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>;
+
+export type CollapseContext = CollapseProps;

packages/devui-vue/devui/collapse/src/collapse.scss

@@ -0,0 +1,77 @@
+@import '../../styles-var/devui-var';
+
+.#{$devui-prefix}-collapse {
+ font-size: $devui-font-size;
+ background: $devui-base-bg;
+ width: 100%;
+ overflow-y: auto;
+}
+
+:host {
+ display: block;
+}
+
+.#{$devui-prefix}-collapse__item {
+ .#{$devui-prefix}-collapse--overflow-ellipsis {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+}
+.#{$devui-prefix}-collapse__item-title {
+ display: block;
+ height: 40px;
+ width: 100%;
+ padding: 0 28px 0 8px;
+ font-weight: 400;
+ line-height: 40px;
+ color: $devui-text-weak;
+ background: transparent;
+ cursor: pointer;
+
+ &.#{$devui-prefix}-collapse--disabled {
+ color: $devui-disabled-text;
+ cursor: not-allowed;
+ }
+
+ &:not(.#{$devui-prefix}-collapse--disabled) {
+ &:hover {
+ background: $devui-list-item-hover-bg;
+ color: $devui-list-item-hover-text;
+ }
+
+ &.#{$devui-prefix}-collapse--router-active,
+ &.#{$devui-prefix}-collapse--active:not(.#{$devui-prefix}-collapse--open) {
+ color: $devui-brand-active;
+ font-weight: bold;
+ }
+ }
+}
+
+/* 展开图标相关 */
+.#{$devui-prefix}-collapse__item > .#{$devui-prefix}-collapse__item-title {
+ position: relative;
+
+ & > .#{$devui-prefix}-collapse__open-icon {
+ display: inline-block;
+ text-indent: 0;
+ pointer-events: none; /* 让鼠标穿透 */
+ position: absolute;
+ right: 6px;
+ top: 12px;
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ transition: transform ease-out 0.3s;
+ }
+
+ &.#{$devui-prefix}-collapse--open > .#{$devui-prefix}-collapse__open-icon {
+ transform: rotate(180deg);
+ transform-origin: center;
+ }
+}
+
+/* 展开内容相关 */
+.#{$devui-prefix}-collapse__item-content {
+ padding: 0 28px 20px 8px;
+}

packages/devui-vue/devui/collapse/src/collapse.tsx

@@ -0,0 +1,25 @@
+import { defineComponent, provide, reactive, toRefs } from 'vue';
+import { SELECT_TOKEN } from './const';
+import { collapseProps, CollapseContext } from './collapse-types';
+import { useNamespace } from '../../shared/hooks/use-namespace';
+import './collapse.scss';
+
+export default defineComponent({
+ name: 'DCollapse',
+ props: collapseProps,
+ emits: ['change', 'update:modelValue'],
+ setup(props, ctx) {
+ const ns = useNamespace('collapse');
+ const scrollbarNs = useNamespace('scrollbar');
+ provide(
+ SELECT_TOKEN,
+ reactive({
+ ...toRefs(props),
+ }) as CollapseContext
+ );
+
+ return () => {
+ return <div class={[ns.b(), scrollbarNs.b()]}>{ctx.slots.default?.()}</div>;
+ };
+ },
+});

packages/devui-vue/devui/collapse/src/const.ts

@@ -0,0 +1,4 @@
+import { InjectionKey } from 'vue';
+import { CollapseContext } from './collapse-types';
+
+export const SELECT_TOKEN: InjectionKey<CollapseContext> = Symbol('dCollapse');

packages/devui-vue/docs/components/collapse/index.md

@@ -0,0 +1,58 @@
+# Collapse 折叠面板
+
+通过折叠面板收纳内容区域
+
+#### 何时使用
+
+需要收纳内容区域的时候使用。
+
+### 基本用法
+
+可同时展开多个面板，面板之前不影响
+
+:::demo
+
+```vue
+<template>
+ <div class="collapse-demo-1">
+ <d-collapse v-model="collapseValue">
+ <d-collapse-item v-for="(item, index) in options" :key="index" :title="item.title">
+ <div>{{ item.content }}</div>
+ </d-collapse-item>
+ </d-collapse>
+ </div>
+</template>
+<script>
+import { defineComponent, reactive, ref } from 'vue';
+
+export default defineComponent({
+ setup() {
+ const collapseValue = ref('');
+ const list = new Array(6).fill(0).map((item, i) => {
+ return {
+ title: `item ${i + 1}`,
+ content: '这是一组测试数据',
+ };
+ });
+ const options = reactive(list);
+ return {
+ collapseValue,
+ options,
+ };
+ },
+});
+</script>
+<style>
+.collapse-demo-1 {
+ margin-bottom: 20px;
+}
+</style>
+```
+
+:::
+
+### Collapse 参数
+
+| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo |
+| :------ | :---------------- | :--- | :----- | :-------------------- |
+| v-model | `string \| array` | '' | 绑定值 | [基本用法](#基本用法) |