✨ [collapse] add collapse component

Author: higuaifan

core/components/base/collapse/api.ts

@@ -0,0 +1,18 @@
+/**
+ * @description collapse api
+ * @author 阿怪
+ * @date 2025/02/17 20:52
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { MCOPO } from '../../types/props';
+import { CollapseProps } from './props';
+
+export const props: MCOPO<CollapseProps> = {
+  modelValue: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  renderContext: { type: Boolean, default: false },
+  line: { type: Boolean, default: true }
+};

core/components/base/collapse/collapse.css

@@ -0,0 +1,43 @@
+.m-collapse {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.m-collapse-disabled {
+  cursor: var(--m-cursor-disabled);
+  --m-cursor-auto: var(--m-cursor-disabled);
+
+  .m-collapse-header{
+    cursor: var(--m-cursor-disabled); 
+    --m-cursor-auto: var(--m-cursor-disabled);
+    opacity: 0.3;
+  }
+
+}
+
+.m-collapse-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  cursor: var(--m-cursor-pointer);
+  --m-cursor-auto: var(--m-cursor-pointer);
+
+  .m-divider {
+    margin-left: 0.5rem;
+    flex:1;
+  }
+
+  .m-collapse-arrow{
+    margin:0 0.5rem;
+    transition: transform 0.3s ease-in-out;
+  }
+
+}
+
+
+.m-collapse-content-hidden {
+  display: none;
+}

core/components/base/collapse/index.ts

@@ -0,0 +1,17 @@
+/**
+ * @description collapse index
+ * @author 阿怪
+ * @date 2025/02/17 20:52
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { props } from './api';
+import { useCollapse, collapseOptions } from './useCollapse.tsx';
+
+export const CollapseCore = {
+  props,
+  useCollapse,
+  collapseOptions
+};

core/components/base/collapse/props.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @description collapse api type
+ * @author 阿怪
+ * @date 2025/02/17 20:52
+ * @version v1.0.0
+ *
+ * @name m-collapse
+ * @docDescription Collapse component with shuimo-ui style.
+ *              水墨组件的折叠组件。
+ * @docUrl https://shuimo.design/collapse
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+export declare type CollapseProps = {
+  /**
+   * @description collapse modelValue. 折叠展开状态
+   * @type boolean
+   * @default false
+   */
+  modelValue?: boolean;
+  /**
+   * @description collapse disabled. 是否禁用
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * @description collapse renderContext. 是否渲染上下文
+   * @type boolean
+   * @default false
+   */
+  renderContext?: boolean;
+  /**
+   * @description collapse line. 是否显示分割线
+   * @type boolean
+   * @default true
+   */
+  line?: boolean;
+};

core/components/base/collapse/useCollapse.tsx

@@ -0,0 +1,65 @@
+/**
+ * @description collapse hook
+ * @author 阿怪
+ * @date 2025/02/17 20:52
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { defineHook } from '../../../runtime/defineHook';
+import { props } from './api';
+import { CollapseProps } from './props';
+import { ref, watch } from 'vue';
+
+export const collapseOptions = {
+  name: 'MCollapse',
+  props,
+  emits: ['update:modelValue', 'change']
+};
+
+export const useCollapse = defineHook((props: Required<CollapseProps>, ctx) => {
+  const innerValue = ref(props.modelValue);
+
+  watch(() => props.modelValue, (val) => {
+    innerValue.value = val;
+  });
+
+  const toggle = () => {
+    if (props.disabled) return;
+    const newValue = !innerValue.value;
+    innerValue.value = newValue;
+    ctx.emit('update:modelValue', newValue);
+    ctx.emit('change', newValue);
+  };
+
+  const renderInit = () => {
+    const collapseClass = [
+      'm-collapse',
+      {
+        'm-collapse-disabled': props.disabled,
+        'm-collapse-arrow-expanded': innerValue.value
+      }
+    ]
+
+    const context = props.renderContext ? (
+      <div class={['m-collapse-content', { 'm-collapse-content-hidden': !innerValue.value }]}>
+        {ctx.slots.content?.()}
+      </div>
+    ) : innerValue.value ? (
+      <div class="m-collapse-content">
+        {ctx.slots.content?.()}
+      </div>
+    ) : null;
+
+    return {
+      collapseClass,
+      context,
+    }
+  }
+
+  return {
+    toggle,
+    renderInit
+  };
+}, collapseOptions);

core/index.ts

@@ -15,6 +15,7 @@ export * from './components/base/button';
 export * from './components/base/checkbox';
 export * from './components/base/switch';
 export * from './components/base/li';
+export * from './components/base/collapse';
 
 export * from './components/other/loading';
 export * from './components/other/divider';

doc/config/menu.config.ts

@@ -31,6 +31,7 @@ export const menu: MenuTypeArr = [
       { label: '标签', route: 'tag', isActive: false },
       { label: '滑动条', route: 'slider', isActive: false },
       { label: '进度条', route: 'progress', isActive: false },
+      { label: '折叠', route: 'collapse', isActive: false },
     ],
   },
   {

doc/demos/base/collapse/default.vue

@@ -0,0 +1,8 @@
+<template>
+  <m-collapse>
+    欲卷珠帘春恨长
+    <template #content>
+      却下水晶帘，玲珑望秋月
+    </template>
+  </m-collapse>
+</template>

doc/demos/base/collapse/disabled.vue

@@ -0,0 +1,8 @@
+<template>
+  <m-collapse disabled>
+    众里寻他千百度
+    <template #content>
+      蓦然回首，那人却在灯火阑珊处
+    </template>
+  </m-collapse>
+</template>

doc/demos/base/collapse/event.vue

@@ -0,0 +1,18 @@
+<template>
+  <m-collapse v-model="isOpen" @change="handleChange">
+    庭院深深深几许
+    <template #content>
+      乱红飞过秋千去
+    </template>
+  </m-collapse>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+const handleChange = (value: boolean) => {
+  console.log('折叠面板状态改变：', value);
+};
+</script>