From 40cd06291b8101ec0470f9b591ab1d0c730ea3b9 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Mon, 28 Aug 2023 20:41:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=8A=98=E5=8F=A0?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BFcollapse=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/collapse/OCollapse.vue     | 46 ++++++++++
 .../opendesign/src/collapse/OCollapseItem.vue | 90 +++++++++++++++++++
 .../src/collapse/__demo__/CollapseBasic.vue   | 30 +++++++
 .../src/collapse/__demo__/TheIndex.vue        | 10 +++
 packages/opendesign/src/collapse/index.ts     | 20 +++++
 packages/opendesign/src/collapse/provide.ts   |  8 ++
 .../opendesign/src/collapse/style/index.scss  |  2 +
 .../opendesign/src/collapse/style/index.ts    |  2 +
 .../opendesign/src/collapse/style/media.scss  |  3 +
 .../opendesign/src/collapse/style/style.scss  | 53 +++++++++++
 .../opendesign/src/collapse/style/var.scss    | 13 +++
 packages/opendesign/src/collapse/types.ts     | 44 +++++++++
 packages/opendesign/src/index.scss            |  1 +
 packages/opendesign/src/index.ts              |  1 +
 packages/portal/src/router.ts                 |  6 ++
 15 files changed, 329 insertions(+)
 create mode 100644 packages/opendesign/src/collapse/OCollapse.vue
 create mode 100644 packages/opendesign/src/collapse/OCollapseItem.vue
 create mode 100644 packages/opendesign/src/collapse/__demo__/CollapseBasic.vue
 create mode 100644 packages/opendesign/src/collapse/__demo__/TheIndex.vue
 create mode 100644 packages/opendesign/src/collapse/index.ts
 create mode 100644 packages/opendesign/src/collapse/provide.ts
 create mode 100644 packages/opendesign/src/collapse/style/index.scss
 create mode 100644 packages/opendesign/src/collapse/style/index.ts
 create mode 100644 packages/opendesign/src/collapse/style/media.scss
 create mode 100644 packages/opendesign/src/collapse/style/style.scss
 create mode 100644 packages/opendesign/src/collapse/style/var.scss
 create mode 100644 packages/opendesign/src/collapse/types.ts

diff --git a/packages/opendesign/src/collapse/OCollapse.vue b/packages/opendesign/src/collapse/OCollapse.vue
new file mode 100644
index 00000000..39556012
--- /dev/null
+++ b/packages/opendesign/src/collapse/OCollapse.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { provide, ref, toRef, watch } from 'vue';
+import { collapseProps } from './types';
+import { collapseInjectKey } from './provide';
+import { isArray } from '../_utils/is';
+
+const props = defineProps(collapseProps);
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', val: Array<string | number>): void;
+  (e: 'change', val: string | number, ev: Event): void;
+}>();
+
+const realValue = ref(isArray(props.modelValue) ? props.modelValue : props.defaultValue);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (isArray(val)) {
+      realValue.value = val;
+    }
+  }
+);
+
+const updateModelValue = (val: Array<string | number>) => {
+  realValue.value = val;
+  emits('update:modelValue', val);
+};
+
+const onChange = (val: string | number, ev: Event) => {
+  emits('change', val, ev);
+};
+
+provide(collapseInjectKey, {
+  realValue,
+  accordion: toRef(props, 'accordion'),
+  updateModelValue,
+  onChange,
+});
+</script>
+
+<template>
+  <div class="o-collapse">
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/collapse/OCollapseItem.vue b/packages/opendesign/src/collapse/OCollapseItem.vue
new file mode 100644
index 00000000..843f4b7c
--- /dev/null
+++ b/packages/opendesign/src/collapse/OCollapseItem.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, inject, nextTick } from 'vue';
+import { collapseItemProps } from './types';
+import { IconChevronRight } from '../_utils/icons';
+import { collapseInjectKey } from './provide';
+import { isUndefined } from '../_utils/is';
+
+const props = defineProps(collapseItemProps);
+const collapseInjection = inject(collapseInjectKey, null);
+
+// 是否展开
+const isExpanded = computed(() => {
+  if (isUndefined(props.value)) {
+    return false;
+  }
+
+  if (collapseInjection) {
+    return collapseInjection.realValue.value.includes(props.value);
+  }
+
+  return false;
+});
+
+const onClick = (ev: Event) => {
+  ev.stopPropagation();
+
+  if (isUndefined(props.value)) {
+    return;
+  }
+
+  let set = collapseInjection ? new Set([...collapseInjection.realValue.value]) : new Set([]);
+
+  if (isExpanded.value) {
+    if (collapseInjection.accordion.value) {
+      set.clear();
+    }
+    set.delete(props.value);
+  } else {
+    if (collapseInjection.accordion.va) {
+      set.clear();
+    }
+    set.add(props.value);
+  }
+
+  const val = Array.from(set);
+
+  collapseInjection?.updateModelValue(val);
+
+  nextTick(() => {
+    collapseInjection?.onChange(val, ev);
+  });
+};
+
+// 过渡动画
+const onBeforeEnter = (el: HTMLUListElement) => {
+  el.style.height = '0px';
+};
+const onEnter = (el: HTMLUListElement) => {
+  console.log(el.scrollHeight);
+  el.style.height = `${el.scrollHeight}px`;
+};
+const onAfterEnter = (el: HTMLUListElement) => {
+  el.style.height = 'auto';
+};
+const onBeforeLeave = (el: HTMLUListElement) => {
+  console.log(el.offsetHeight);
+  el.style.height = `${el.offsetHeight}px`;
+};
+const onLeave = (el: HTMLUListElement) => {
+  el.style.height = '0px';
+};
+</script>
+
+<template>
+  <div class="o-collapse-item" :class="{ 'o-collapse-item-expanded': isExpanded }">
+    <div class="o-collapse-item-header" @click="onClick">
+      <span class="o-collapse-item-icon">
+        <IconChevronRight />
+      </span>
+      <p v-if="props.title || $slots.title" class="o-collapse-item-title">
+        <slot name="title">{{ props.title }}</slot>
+      </p>
+    </div>
+    <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave">
+      <div v-show="isExpanded" class="o-collapse-item-body">
+        <slot></slot>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/packages/opendesign/src/collapse/__demo__/CollapseBasic.vue b/packages/opendesign/src/collapse/__demo__/CollapseBasic.vue
new file mode 100644
index 00000000..e5b189ad
--- /dev/null
+++ b/packages/opendesign/src/collapse/__demo__/CollapseBasic.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OCollapse, OCollapseItem } from '../index';
+const val = ref([1]);
+</script>
+
+<template>
+  <h4>基础用法</h4>
+  <section>
+    <OCollapse v-model="val">
+      <OCollapseItem title="这是标题1" :value="1">
+        <div class="content1"></div>
+      </OCollapseItem>
+      <OCollapseItem title="2" :value="2">
+        <div class="content1"></div>
+      </OCollapseItem>
+    </OCollapse>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+section {
+  display: block;
+}
+
+.content1 {
+  height: 200px;
+  background-color: peachpuff;
+}
+</style>
diff --git a/packages/opendesign/src/collapse/__demo__/TheIndex.vue b/packages/opendesign/src/collapse/__demo__/TheIndex.vue
new file mode 100644
index 00000000..e2f39908
--- /dev/null
+++ b/packages/opendesign/src/collapse/__demo__/TheIndex.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import '../style';
+import CollapseBasic from './CollapseBasic.vue';
+</script>
+
+<template>
+  <div class="page-demo">
+    <CollapseBasic />
+  </div>
+</template>
diff --git a/packages/opendesign/src/collapse/index.ts b/packages/opendesign/src/collapse/index.ts
new file mode 100644
index 00000000..545196c4
--- /dev/null
+++ b/packages/opendesign/src/collapse/index.ts
@@ -0,0 +1,20 @@
+import type { App } from 'vue';
+
+import _OCollapse from './OCollapse.vue';
+import _OCollapseItem from './OCollapseItem.vue';
+
+export * from './types';
+
+const OCollapse = Object.assign(_OCollapse, {
+  install(app: App) {
+    app.component(_OCollapse.name, _OCollapse);
+  },
+});
+
+const OCollapseItem = Object.assign(_OCollapseItem, {
+  install(app: App) {
+    app.component(_OCollapseItem.name, _OCollapseItem);
+  },
+});
+
+export { OCollapse, OCollapseItem };
diff --git a/packages/opendesign/src/collapse/provide.ts b/packages/opendesign/src/collapse/provide.ts
new file mode 100644
index 00000000..396d82cc
--- /dev/null
+++ b/packages/opendesign/src/collapse/provide.ts
@@ -0,0 +1,8 @@
+import { InjectionKey, Ref } from 'vue';
+
+export const collapseInjectKey: InjectionKey<{
+  realValue: Ref<Array<string | number>>;
+  accordion: Ref<Boolean>;
+  updateModelValue: (val: Array<string | number>) => void;
+  onChange: (val: string | number, ev: Event) => void;
+}> = Symbol('provide-collapse');
diff --git a/packages/opendesign/src/collapse/style/index.scss b/packages/opendesign/src/collapse/style/index.scss
new file mode 100644
index 00000000..504d59c4
--- /dev/null
+++ b/packages/opendesign/src/collapse/style/index.scss
@@ -0,0 +1,2 @@
+@use './style.scss' as *;
+@use './media.scss' as *;
diff --git a/packages/opendesign/src/collapse/style/index.ts b/packages/opendesign/src/collapse/style/index.ts
new file mode 100644
index 00000000..786fce9c
--- /dev/null
+++ b/packages/opendesign/src/collapse/style/index.ts
@@ -0,0 +1,2 @@
+import '../../_styles';
+import './index.scss';
diff --git a/packages/opendesign/src/collapse/style/media.scss b/packages/opendesign/src/collapse/style/media.scss
new file mode 100644
index 00000000..b27842ad
--- /dev/null
+++ b/packages/opendesign/src/collapse/style/media.scss
@@ -0,0 +1,3 @@
+@use '../../_styles/mixin.scss' as *;
+@include respond-to('phone-pad') {
+}
diff --git a/packages/opendesign/src/collapse/style/style.scss b/packages/opendesign/src/collapse/style/style.scss
new file mode 100644
index 00000000..38a5c299
--- /dev/null
+++ b/packages/opendesign/src/collapse/style/style.scss
@@ -0,0 +1,53 @@
+@use '../../_styles/mixin.scss' as *;
+@use './var.scss';
+
+.o-collapse {
+  background-color: var(--collapse-bg-color);
+  padding: var(--collapse-padding);
+  border-radius: var(--collapse-radius);
+}
+
+.o-collapse-item + .o-collapse-item {
+  border-top: 1px solid var(--collapse-division-color);
+}
+
+.o-collapse-item-header {
+  padding: var(--collapse-item-header-padding);
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.o-collapse-item-title {
+  margin: 0;
+  color: var(--o-color-info1);
+  font-size: var(--o-font_size-h3);
+  line-height: var(--o-line_height-h3);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.o-collapse-item-icon {
+  flex-shrink: 0;
+  color: var(--collapse-item-icon-color);
+  font-size: var(--collapse-item-icon-size);
+  transform: rotate(90deg);
+  transition: transform var(--o-duration-m2) var(--o-easing-standard);
+}
+
+.o-collapse-item-body {
+  margin-bottom: 24px;
+  overflow: hidden;
+  transition: height var(--o-duration-m2) var(--o-easing-standard);
+}
+
+.o-collapse-item-expanded {
+  .o-collapse-item-title {
+    font-weight: 500;
+  }
+  .o-collapse-item-icon {
+    transform: rotate(-90deg);
+  }
+}
diff --git a/packages/opendesign/src/collapse/style/var.scss b/packages/opendesign/src/collapse/style/var.scss
new file mode 100644
index 00000000..801a6a64
--- /dev/null
+++ b/packages/opendesign/src/collapse/style/var.scss
@@ -0,0 +1,13 @@
+.o-collapse {
+  --collapse-radius: var(--o-radius_control-l);
+  --collapse-bg-color: var(--o-color-fill2);
+  --collapse-padding: 4px 32px;
+  --collapse-division-color: var(--o-color-control1);
+}
+
+.o-collapse-item {
+  --collapse-item-header-padding: 24px 0px;
+  --collapse-item-title-color: var(--o-color-info1);
+  --collapse-item-icon-color: var(--o-color-info1);
+  --collapse-item-icon-size: var(--o-icon_size-xs);
+}
diff --git a/packages/opendesign/src/collapse/types.ts b/packages/opendesign/src/collapse/types.ts
new file mode 100644
index 00000000..1c0c8631
--- /dev/null
+++ b/packages/opendesign/src/collapse/types.ts
@@ -0,0 +1,44 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const collapseProps = {
+  /**
+   * 是否开启手风琴模式
+   */
+  accordion: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * 折叠面板双向绑定值
+   */
+  modelValue: {
+    type: Array as PropType<Array<string | number>>,
+  },
+  /**
+   * 非受控模式时，默认展开的面板值
+   */
+  defaultValue: {
+    type: Array as PropType<Array<string | number>>,
+    default: () => [],
+  },
+};
+
+export const collapseItemProps = {
+  /**
+   * 折叠面板value
+   */
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  /**
+   * 折叠面板标题
+   */
+  title: {
+    type: String,
+  },
+};
+
+export type CollapsePropsT = ExtractPropTypes<typeof collapseProps>;
+export type CollapseItemPropsT = ExtractPropTypes<typeof collapseItemProps>;
diff --git a/packages/opendesign/src/index.scss b/packages/opendesign/src/index.scss
index c741aded..f8f90402 100644
--- a/packages/opendesign/src/index.scss
+++ b/packages/opendesign/src/index.scss
@@ -41,3 +41,4 @@
 @use './upload/style/index.scss' as *;
 @use './toggle/style/index.scss' as *;
 @use './anchor/style/index.scss' as *;
+@use './collapse/style/index.scss' as *;
diff --git a/packages/opendesign/src/index.ts b/packages/opendesign/src/index.ts
index b4b5f5b6..6e9b3d2e 100644
--- a/packages/opendesign/src/index.ts
+++ b/packages/opendesign/src/index.ts
@@ -44,6 +44,7 @@ export * from './scroller';
 export * from './upload';
 export * from './toggle';
 export * from './anchor';
+export * from './collapse';
 
 export * from './intersection-observer';
 export * from './resize-observer';
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index a772d41d..e6ec2134 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -255,6 +255,12 @@ export const routes = [
     label: '锚点 Anchor',
     component: () => import('@components/anchor/__demo__/TheIndex.vue'),
   },
+  {
+    path: '/collapse',
+    name: 'Collapse',
+    label: '折叠面板 Collapse',
+    component: () => import('@components/collapse/__demo__/TheIndex.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
-- 
Gitee