🐞 fix: model.service 调用无效

docs/.vitepress/config/index.ts

@@ -11,7 +11,6 @@ export default defineConfig({
     rewrites: {
         '/index.md': '/component/usage.md',
     },
-    // appearance: false,
     themeConfig: {
         sidebar: {
             '/component/': [
@@ -28,6 +27,10 @@ export default defineConfig({
                         { text: 'ElementSelect', link: '/component/element-select' },
                         { text: 'Loading', link: '/component/loading' },
                         { text: 'Collapse', link: '/component/collapse' },
+                        { text: 'Model', link: '/component/model' },
+                        { text: 'Overlay', link: '/component/overlay' },
+                        { text: 'TextEllipsis', link: '/component/text-ellipsis' },
+                        { text: 'TextHighlight', link: '/component/text-highlight' },
                     ],
                 },
             ],

docs/component/model.md

@@ -0,0 +1,59 @@
+<script>
+if (!import.meta.env.SSR) {
+    document.body.classList.add('vp-raw')
+}
+</script>
+
+# Model
+
+## 基础用法
+
+:::demo model/base
+
+:::
+
+## 函数调用
+
+:::demo model/service
+
+:::
+
+## Model Props
+
+| 名称                 | 类型      | 说明                   | 默认值  |
+| -------------------- | --------- | ---------------------- | ------- |
+| modelValue / v-model | `boolean` | 是否打开               | `false` |
+| width                | `string`  | 弹窗宽度, 注意携带单位 | `'50%'` |
+| maskClose            | `boolean` | 是否可点击蒙层关闭     | `true`  |
+| fullscreen           | `boolean` | 全屏显示               | `false` |
+| destroyOnClose       | `boolean` | 关闭后销毁             | `true`  |
+
+## Model 事件
+
+| 名称  | 说明       | 类型         |
+| ----- | ---------- | ------------ |
+| close | 关闭时触发 | `() => void` |
+
+## Model 插槽
+
+| 名称    | 说明         | 参数 |
+| ------- | ------------ | ---- |
+| default | 主体显示内容 | -    |
+| header  | 顶部显示内容 | -    |
+| footer  | 底部显示内容 | -    |
+
+## CdxModel.service 函数
+
+| 参数           | 类型                    | 说明                                                                                                                            | 默认值  |
+| -------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| body           | `VNode \| string`       | default 插槽渲染内容                                                                                                            | -       |
+| header         | `VNode \| string`       | header 插槽渲染内容                                                                                                             | -       |
+| footer         | `string \| HTMLElement` | 插入至的 DOM 节点。可传入一个 DOM 对象或字符串； 若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 | -       |
+| width          | `string`                | 弹窗宽度, 注意携带单位                                                                                                          | `'50%'` |
+| maskClose      | `boolean`               | 是否可点击蒙层关闭                                                                                                              | `true`  |
+| fullscreen     | `boolean`               | 全屏显示                                                                                                                        | `false` |
+| destroyOnClose | `boolean`               | 关闭后销毁                                                                                                                      | `true`  |
+
+| 返回值 | 类型         | 说明           |
+| ------ | ------------ | -------------- |
+| close  | `() => void` | 用于关闭 Model |

docs/component/overlay.md

@@ -0,0 +1,26 @@
+# Overlay
+
+## 基础用法
+
+:::demo overlay/base
+
+:::
+
+## 全屏显示
+
+:::demo overlay/fullscreen
+
+:::
+
+## Overlay Props
+
+| 名称                 | 类型      | 说明     | 默认值  |
+| -------------------- | --------- | -------- | ------- |
+| modelValue / v-model | `boolean` | 是否打开 | `false` |
+| fullscreen           | `boolean` | 全屏显示 | `false` |
+
+## Overlay 事件
+
+| 名称  | 说明         | 类型         |
+| ----- | ------------ | ------------ |
+| click | 点击遮罩触发 | `() => void` |

docs/component/text-ellipsis.md

@@ -0,0 +1,26 @@
+# TextEllipsis
+
+## 基础用法
+
+:::demo text-ellipsis/base
+
+:::
+
+## TextEllipsis Props
+
+| 名称                 | 类型      | 说明                 | 默认值  |
+| -------------------- | --------- | -------------------- | ------- |
+| modelValue / v-model | `boolean` | 是否打开             | `false` |
+| content              | `string`  | 显示文字             | -       |
+| lines                | `number`  | 省略时显示文字行数   | `1`     |
+| ellipsisText         | `string`  | 省略号的文本内容     | `...`   |
+| canExpand            | `boolean` | 是否显示点击展开按钮 | `true`  |
+| expandText           | `boolean` | 展开按钮显示文字     | `展开`  |
+| collapseText         | `boolean` | 收起按钮显示文字     | `收起`  |
+
+## TextEllipsis 插槽
+
+| 名称      | 说明         | 参数                                  |
+| --------- | ------------ | ------------------------------------- |
+| default   | 显示文字内容 | `(isExpanded: boolean, text: string)` |
+| expandBtn | 展开按钮内容 | `(isExpanded: boolean)`               |

docs/component/text-highlight.md

@@ -0,0 +1,30 @@
+# TextHighlight
+
+## 基础用法
+
+:::demo text-highlight/base
+
+:::
+
+## 插槽显示文字
+
+:::demo text-highlight/slot
+
+:::
+
+## TextHighlight Props
+
+| 名称           | 类型                 | 说明               | 默认值  |
+| -------------- | -------------------- | ------------------ | ------- |
+| content        | `string`             | 显示文字           | -       |
+| texts          | `string \| string[]` | 高亮的文字         | `''`    |
+| ignoreCase     | `boolean`            | 匹配时忽略大小写   | `false` |
+| highlightTag   | `string`             | 高亮文字的标签名   | `span`  |
+| highlightClass | `boolean`            | 高亮文字标签的类名 | `''`    |
+
+## TextHighlight 插槽
+
+| 名称      | 说明       | 参数             |
+| --------- | ---------- | ---------------- |
+| default   | 非高亮文字 | `(text: string)` |
+| highlight | 高亮文字   | `(text: string)` |

docs/demos/collapse/base.vue

@@ -1,9 +1,3 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const activeName = ref(['1']);
-</script>
-
 <template>
     <CdxCollapse v-model="activeName">
         <CdxCollapseItem
@@ -17,3 +11,8 @@ const activeName = ref(['1']);
         </CdxCollapseItem>
     </CdxCollapse>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const activeName = ref(['1']);
+</script>

docs/demos/collapse/item.vue

@@ -1,16 +1,14 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const active = ref(true);
-</script>
-
 <template>
     <CdxCollapseItem
         title="item"
         v-model:expend="active"
     >
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, architecto non? Atque qui, beatae
-        tenetur quis iure ullam, recusandae dolores quod voluptas fuga error. Optio molestiae inventore nulla ipsam
-        iure!
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, architecto non? Atque qui, beatae tenetur
+        quis iure ullam, recusandae dolores quod voluptas fuga error. Optio molestiae inventore nulla ipsam iure!
     </CdxCollapseItem>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const active = ref(true);
+</script>

docs/demos/collapse/transition.vue

@@ -1,12 +1,3 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const show = ref(true);
-const change = () => {
-    show.value = !show.value;
-};
-</script>
-
 <template>
     <button @click="change">change visiable</button>
     <CdxCollapseTransition>
@@ -17,3 +8,11 @@ const change = () => {
         </p>
     </CdxCollapseTransition>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const show = ref(true);
+const change = () => {
+    show.value = !show.value;
+};
+</script>

docs/demos/element-select/base.vue

@@ -1,9 +1,3 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref([]);
-</script>
-
 <template>
     <CdxElementSelect
         v-model="value"
@@ -19,6 +13,12 @@ const value = ref([]);
     </CdxElementSelect>
 </template>
 
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref([]);
+</script>
+
 <style scoped>
 .item {
     padding: 8px;

docs/demos/element-select/item.vue

@@ -1,8 +1,3 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-const value = ref('fail');
-</script>
-
 <template>
     <CdxElementSelectItem
         v-model="value"
@@ -12,3 +7,8 @@ const value = ref('fail');
         {{ value }}
     </CdxElementSelectItem>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const value = ref('fail');
+</script>

docs/demos/loading/service.vue

@@ -1,3 +1,20 @@
+<template>
+    <button @click="startLoading">open loading</button>
+    <button @click="startFullscreenLoading">open fullscreen loading</button>
+    <div
+        ref="divRef"
+        style="position: relative; height: 200px; overflow-y: scroll"
+    >
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptatum est, dolore temporibus
+        voluptatibus totam officiis aliquid labore qui molestiae reprehenderit consectetur omnis, ducimus praesentium
+        repellendus placeat? Eos, cum expedita. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem
+        exercitationem doloremque maiores consequuntur! In magnam exercitationem accusamus iure explicabo facilis! Ipsam
+        sit id officiis ut molestiae numquam ad, quis minus? Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+        Doloribus ut ratione incidunt maiores quasi eveniet, officia cupiditate reprehenderit porro at voluptas ad
+        nesciunt! Facere minima quae praesentium cumque in tempora.
+    </div>
+</template>
+
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { CdxLoading } from 'cdx-component';
@@ -19,20 +36,3 @@ const startFullscreenLoading = () => {
     }, 3000);
 };
 </script>
-
-<template>
-    <button @click="startLoading">open loading</button>
-    <button @click="startFullscreenLoading">open fullscreen loading</button>
-    <div
-        ref="divRef"
-        style="position: relative; height: 200px; overflow-y: scroll"
-    >
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore voluptatum est, dolore temporibus
-        voluptatibus totam officiis aliquid labore qui molestiae reprehenderit consectetur omnis, ducimus praesentium
-        repellendus placeat? Eos, cum expedita. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem
-        exercitationem doloremque maiores consequuntur! In magnam exercitationem accusamus iure explicabo facilis! Ipsam
-        sit id officiis ut molestiae numquam ad, quis minus? Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-        Doloribus ut ratione incidunt maiores quasi eveniet, officia cupiditate reprehenderit porro at voluptas ad
-        nesciunt! Facere minima quae praesentium cumque in tempora.
-    </div>
-</template>

docs/demos/model/base.vue

@@ -0,0 +1,20 @@
+<template>
+    <div style="position: relative; height: 200px">
+        <button @click="show = true">open model</button>
+        <CdxModel v-model="show">
+            <template #header>
+                <div>model header</div>
+            </template>
+            <div>click outside to close</div>
+            <template #footer>
+                <div>model footer</div>
+            </template>
+        </CdxModel>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const show = ref(true);
+</script>

docs/demos/model/service.vue

@@ -0,0 +1,30 @@
+<template>
+    <button @click="startModel">open model</button>
+    <button @click="startFullscreenModel">open fullscreen model</button>
+    <div
+        ref="divRef"
+        style="position: relative; height: 200px"
+    ></div>
+</template>
+
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import { CdxModel } from 'cdx-component';
+
+const divRef = ref();
+
+const startModel = () => {
+    const { close } = CdxModel.service({
+        target: divRef.value,
+        body: 'content',
+        fullscreen: false,
+    });
+};
+const startFullscreenModel = () => {
+    const { close } = CdxModel.service({
+        body: 'content',
+        header: h('div', 'header'),
+        footer: h('div', 'footer'),
+    });
+};
+</script>

docs/demos/overlay/base.vue

@@ -0,0 +1,10 @@
+<template>
+    <div style="position: relative; height: 200px">
+        <CdxOverlay v-model="show"></CdxOverlay>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const show = ref(true);
+</script>

docs/demos/overlay/fullscreen.vue

@@ -0,0 +1,19 @@
+<template>
+    <div style="position: relative; height: 200px">
+        <button @click="show = true">open overlay</button>
+        <CdxOverlay
+            v-model="show"
+            fullscreen
+            @click="show = false"
+        >
+            <div style="width: 50%; height: 200px; margin: 300px auto; background-color: #fff">
+                此处不会触发 click 事件
+            </div>
+        </CdxOverlay>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>