vue-devui 1.0.0-alpha.6 → 1.0.0-beta.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -35
- package/accordion/index.d.ts +7 -0
- package/accordion/index.es.js +508 -1
- package/accordion/index.umd.js +1 -1
- package/accordion/style.css +1 -1
- package/alert/index.d.ts +7 -0
- package/alert/index.es.js +178 -1
- package/alert/index.umd.js +1 -1
- package/alert/style.css +1 -1
- package/anchor/index.d.ts +7 -0
- package/anchor/index.es.js +263 -1
- package/anchor/index.umd.js +1 -1
- package/avatar/index.d.ts +7 -0
- package/avatar/index.es.js +301 -1
- package/avatar/index.umd.js +1 -1
- package/back-top/index.d.ts +7 -0
- package/back-top/index.es.js +128 -0
- package/back-top/index.umd.js +1 -0
- package/back-top/package.json +7 -0
- package/back-top/style.css +1 -0
- package/badge/index.d.ts +7 -0
- package/badge/index.es.js +95 -1
- package/badge/index.umd.js +1 -1
- package/breadcrumb/index.d.ts +7 -0
- package/breadcrumb/index.es.js +127 -1
- package/breadcrumb/index.umd.js +1 -1
- package/button/index.d.ts +7 -0
- package/button/index.es.js +392 -1
- package/button/index.umd.js +1 -1
- package/button/style.css +1 -1
- package/card/index.d.ts +7 -0
- package/card/index.es.js +61 -1
- package/card/index.umd.js +1 -1
- package/carousel/index.d.ts +7 -0
- package/carousel/index.es.js +329 -1
- package/carousel/index.umd.js +1 -1
- package/cascader/index.d.ts +7 -0
- package/cascader/index.es.js +1343 -1
- package/cascader/index.umd.js +1 -1
- package/cascader/style.css +1 -1
- package/checkbox/index.d.ts +7 -0
- package/checkbox/index.es.js +377 -1
- package/checkbox/index.umd.js +1 -1
- package/comment/index.d.ts +7 -0
- package/comment/index.es.js +85 -0
- package/comment/index.umd.js +1 -0
- package/comment/package.json +7 -0
- package/comment/style.css +1 -0
- package/countdown/index.d.ts +7 -0
- package/countdown/index.es.js +176 -0
- package/countdown/index.umd.js +1 -0
- package/countdown/package.json +7 -0
- package/countdown/style.css +1 -0
- package/date-picker/index.d.ts +7 -0
- package/date-picker/index.es.js +1172 -1
- package/date-picker/index.umd.js +1 -1
- package/date-picker/style.css +1 -1
- package/dragdrop/index.d.ts +7 -0
- package/dragdrop/index.es.js +32 -0
- package/dragdrop/index.umd.js +1 -0
- package/dragdrop/package.json +7 -0
- package/drawer/index.d.ts +7 -0
- package/drawer/index.es.js +287 -0
- package/drawer/index.umd.js +1 -0
- package/drawer/package.json +7 -0
- package/drawer/style.css +1 -0
- package/dropdown/index.d.ts +7 -0
- package/dropdown/index.es.js +535 -0
- package/dropdown/index.umd.js +1 -0
- package/dropdown/package.json +7 -0
- package/dropdown/style.css +1 -0
- package/editable-select/index.d.ts +7 -0
- package/editable-select/index.es.js +5857 -1
- package/editable-select/index.umd.js +27 -1
- package/editable-select/style.css +1 -1
- package/form/index.d.ts +7 -0
- package/form/index.es.js +2244 -0
- package/form/index.umd.js +1 -0
- package/form/package.json +7 -0
- package/form/style.css +1 -0
- package/fullscreen/index.d.ts +7 -0
- package/fullscreen/index.es.js +163 -1
- package/fullscreen/index.umd.js +1 -1
- package/gantt/index.d.ts +7 -0
- package/gantt/index.es.js +535 -0
- package/gantt/index.umd.js +1 -0
- package/gantt/package.json +7 -0
- package/gantt/style.css +1 -0
- package/grid/index.d.ts +7 -0
- package/grid/index.es.js +269 -0
- package/grid/index.umd.js +1 -0
- package/grid/package.json +7 -0
- package/grid/style.css +1 -0
- package/icon/index.d.ts +7 -0
- package/icon/index.es.js +75 -1
- package/icon/index.umd.js +1 -1
- package/image-preview/index.d.ts +7 -0
- package/image-preview/index.es.js +498 -1
- package/image-preview/index.umd.js +1 -1
- package/image-preview/style.css +1 -1
- package/index.d.ts +7 -0
- package/input/index.d.ts +7 -0
- package/input/index.es.js +190 -1
- package/input/index.umd.js +1 -1
- package/input-icon/index.d.ts +7 -0
- package/input-icon/index.es.js +332 -0
- package/input-icon/index.umd.js +1 -0
- package/input-icon/package.json +7 -0
- package/input-icon/style.css +1 -0
- package/input-number/index.d.ts +7 -0
- package/input-number/index.es.js +240 -1
- package/input-number/index.umd.js +1 -1
- package/layout/index.d.ts +7 -0
- package/layout/index.es.js +100 -0
- package/layout/index.umd.js +1 -0
- package/layout/package.json +7 -0
- package/layout/style.css +1 -0
- package/loading/index.d.ts +7 -0
- package/loading/index.es.js +256 -1
- package/loading/index.umd.js +1 -1
- package/modal/index.d.ts +7 -0
- package/modal/index.es.js +1225 -1
- package/modal/index.umd.js +1 -1
- package/modal/style.css +1 -1
- package/nav-sprite/index.d.ts +7 -0
- package/nav-sprite/index.es.js +742 -0
- package/nav-sprite/index.umd.js +1 -0
- package/nav-sprite/package.json +7 -0
- package/nuxt/components/Accordion.js +3 -0
- package/nuxt/components/Alert.js +3 -0
- package/nuxt/components/Anchor.js +3 -0
- package/nuxt/components/Aside.js +3 -0
- package/nuxt/components/Avatar.js +3 -0
- package/nuxt/components/BackTop.js +3 -0
- package/nuxt/components/Badge.js +3 -0
- package/nuxt/components/Breadcrumb.js +3 -0
- package/nuxt/components/Button.js +3 -0
- package/nuxt/components/Card.js +3 -0
- package/nuxt/components/Carousel.js +3 -0
- package/nuxt/components/Cascader.js +3 -0
- package/nuxt/components/Checkbox.js +3 -0
- package/nuxt/components/Col.js +3 -0
- package/nuxt/components/Column.js +3 -0
- package/nuxt/components/Comment.js +3 -0
- package/nuxt/components/Content.js +3 -0
- package/nuxt/components/Countdown.js +3 -0
- package/nuxt/components/DatePicker.js +3 -0
- package/nuxt/components/Drawer.js +3 -0
- package/nuxt/components/Dropdown.js +3 -0
- package/nuxt/components/EditableSelect.js +3 -0
- package/nuxt/components/FixedOverlay.js +3 -0
- package/nuxt/components/FlexibleOverlay.js +3 -0
- package/nuxt/components/Footer.js +3 -0
- package/nuxt/components/Form.js +3 -0
- package/nuxt/components/FormControl.js +3 -0
- package/nuxt/components/FormItem.js +3 -0
- package/nuxt/components/FormLabel.js +3 -0
- package/nuxt/components/FormOperation.js +3 -0
- package/nuxt/components/Fullscreen.js +3 -0
- package/nuxt/components/Gantt.js +3 -0
- package/nuxt/components/Header.js +3 -0
- package/nuxt/components/Icon.js +2 -0
- package/nuxt/components/ImagePreviewService.js +3 -0
- package/nuxt/components/Input.js +3 -0
- package/nuxt/components/InputIcon.js +3 -0
- package/nuxt/components/InputNumber.js +3 -0
- package/nuxt/components/Layout.js +3 -0
- package/nuxt/components/Loading.js +3 -0
- package/nuxt/components/LoadingService.js +3 -0
- package/nuxt/components/Modal.js +3 -0
- package/nuxt/components/NavSprite.js +2 -0
- package/nuxt/components/Pagination.js +3 -0
- package/nuxt/components/Panel.js +3 -0
- package/nuxt/components/Popover.js +3 -0
- package/nuxt/components/Progress.js +3 -0
- package/nuxt/components/QuadrantDiagram.js +3 -0
- package/nuxt/components/Radio.js +3 -0
- package/nuxt/components/RadioGroup.js +3 -0
- package/nuxt/components/Rate.js +3 -0
- package/nuxt/components/ReadTip.js +3 -0
- package/nuxt/components/Result.js +3 -0
- package/nuxt/components/Row.js +3 -0
- package/nuxt/components/Search.js +3 -0
- package/nuxt/components/Select.js +3 -0
- package/nuxt/components/Skeleton.js +3 -0
- package/nuxt/components/SkeletonItem.js +3 -0
- package/nuxt/components/Slider.js +3 -0
- package/nuxt/components/Splitter.js +3 -0
- package/nuxt/components/Statistic.js +3 -0
- package/nuxt/components/Status.js +3 -0
- package/nuxt/components/StepsGuide.js +3 -0
- package/nuxt/components/StickSlider.js +3 -0
- package/nuxt/components/Sticky.js +2 -0
- package/nuxt/components/Switch.js +3 -0
- package/nuxt/components/Table.js +3 -0
- package/nuxt/components/Tabs.js +3 -0
- package/nuxt/components/Tag.js +3 -0
- package/nuxt/components/TagInput.js +3 -0
- package/nuxt/components/Textarea.js +3 -0
- package/nuxt/components/TimeAxis.js +3 -0
- package/nuxt/components/TimeAxisItem.js +3 -0
- package/nuxt/components/TimePicker.js +3 -0
- package/nuxt/components/Toast.js +3 -0
- package/nuxt/components/ToastService.js +3 -0
- package/nuxt/components/Tooltip.js +3 -0
- package/nuxt/components/Transfer.js +3 -0
- package/nuxt/components/Tree.js +3 -0
- package/nuxt/components/TreeSelect.js +3 -0
- package/nuxt/components/Upload.js +3 -0
- package/nuxt/components/buttonProps.js +3 -0
- package/nuxt/index.js +13 -0
- package/overlay/index.d.ts +7 -0
- package/overlay/index.es.js +368 -1
- package/overlay/index.umd.js +1 -1
- package/overlay/style.css +1 -1
- package/package.json +6 -47
- package/pagination/index.d.ts +7 -0
- package/pagination/index.es.js +642 -1
- package/pagination/index.umd.js +1 -1
- package/panel/index.d.ts +7 -0
- package/panel/index.es.js +205 -1
- package/panel/index.umd.js +1 -1
- package/panel/style.css +1 -1
- package/popover/index.d.ts +7 -0
- package/popover/index.es.js +236 -1
- package/popover/index.umd.js +1 -1
- package/progress/index.d.ts +7 -0
- package/progress/index.es.js +153 -1
- package/progress/index.umd.js +3 -1
- package/quadrant-diagram/index.d.ts +7 -0
- package/quadrant-diagram/index.es.js +489 -1
- package/quadrant-diagram/index.umd.js +1 -1
- package/radio/index.d.ts +7 -0
- package/radio/index.es.js +225 -1
- package/radio/index.umd.js +1 -1
- package/rate/index.d.ts +7 -0
- package/rate/index.es.js +220 -1
- package/rate/index.umd.js +1 -1
- package/read-tip/index.d.ts +7 -0
- package/read-tip/index.es.js +258 -0
- package/read-tip/index.umd.js +1 -0
- package/read-tip/package.json +7 -0
- package/read-tip/style.css +1 -0
- package/result/index.d.ts +7 -0
- package/result/index.es.js +119 -0
- package/result/index.umd.js +1 -0
- package/result/package.json +7 -0
- package/result/style.css +1 -0
- package/ripple/index.d.ts +7 -0
- package/ripple/index.es.js +181 -1
- package/ripple/index.umd.js +1 -1
- package/search/index.d.ts +7 -0
- package/search/index.es.js +543 -1
- package/search/index.umd.js +1 -1
- package/select/index.d.ts +7 -0
- package/select/index.es.js +706 -1
- package/select/index.umd.js +1 -1
- package/skeleton/index.d.ts +7 -0
- package/skeleton/index.es.js +297 -1
- package/skeleton/index.umd.js +1 -1
- package/skeleton/style.css +1 -1
- package/slider/index.d.ts +7 -0
- package/slider/index.es.js +199 -1
- package/slider/index.umd.js +1 -1
- package/slider/style.css +1 -1
- package/splitter/index.d.ts +7 -0
- package/splitter/index.es.js +636 -1
- package/splitter/index.umd.js +1 -1
- package/statistic/index.d.ts +7 -0
- package/statistic/index.es.js +280 -0
- package/statistic/index.umd.js +1 -0
- package/statistic/package.json +7 -0
- package/statistic/style.css +1 -0
- package/status/index.d.ts +7 -0
- package/status/index.es.js +42 -1
- package/status/index.umd.js +1 -1
- package/steps-guide/index.d.ts +7 -0
- package/steps-guide/index.es.js +239 -1
- package/steps-guide/index.umd.js +1 -1
- package/steps-guide/style.css +1 -1
- package/sticky/index.d.ts +7 -0
- package/sticky/index.es.js +197 -1
- package/sticky/index.umd.js +1 -1
- package/style.css +1 -1
- package/switch/index.d.ts +7 -0
- package/switch/index.es.js +100 -1
- package/switch/index.umd.js +1 -1
- package/switch/style.css +1 -1
- package/table/index.d.ts +7 -0
- package/table/index.es.js +1836 -1
- package/table/index.umd.js +1 -1
- package/table/style.css +1 -1
- package/tabs/index.d.ts +7 -0
- package/tabs/index.es.js +195 -1
- package/tabs/index.umd.js +1 -1
- package/tabs/style.css +1 -1
- package/tag/index.d.ts +7 -0
- package/tag/index.es.js +131 -0
- package/tag/index.umd.js +1 -0
- package/tag/package.json +7 -0
- package/tag/style.css +1 -0
- package/tag-input/index.d.ts +7 -0
- package/tag-input/index.es.js +329 -1
- package/tag-input/index.umd.js +1 -1
- package/textarea/index.d.ts +7 -0
- package/textarea/index.es.js +132 -0
- package/textarea/index.umd.js +1 -0
- package/textarea/package.json +7 -0
- package/textarea/style.css +1 -0
- package/time-axis/index.d.ts +7 -0
- package/time-axis/index.es.js +299 -0
- package/time-axis/index.umd.js +1 -0
- package/time-axis/package.json +7 -0
- package/time-axis/style.css +1 -0
- package/time-picker/index.d.ts +7 -0
- package/time-picker/index.es.js +1260 -1
- package/time-picker/index.umd.js +1 -1
- package/time-picker/style.css +1 -1
- package/toast/index.d.ts +7 -0
- package/toast/index.es.js +2060 -1
- package/toast/index.umd.js +1 -1
- package/toast/style.css +1 -1
- package/tooltip/index.d.ts +7 -0
- package/tooltip/index.es.js +171 -1
- package/tooltip/index.umd.js +1 -1
- package/transfer/index.d.ts +7 -0
- package/transfer/index.es.js +1725 -1
- package/transfer/index.umd.js +1 -1
- package/transfer/style.css +1 -1
- package/tree/index.d.ts +7 -0
- package/tree/index.es.js +907 -1
- package/tree/index.umd.js +1 -1
- package/tree/style.css +1 -1
- package/tree-select/index.d.ts +7 -0
- package/tree-select/index.es.js +528 -0
- package/tree-select/index.umd.js +1 -0
- package/tree-select/package.json +7 -0
- package/tree-select/style.css +1 -0
- package/upload/index.d.ts +7 -0
- package/upload/index.es.js +2834 -1
- package/upload/index.umd.js +1 -1
- package/upload/style.css +1 -1
- package/vue-devui.es.js +27777 -1
- package/vue-devui.umd.js +29 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<p align="center">
|
|
2
2
|
<a href="https://devui.design/home" target="_blank" rel="noopener noreferrer">
|
|
3
|
-
<img alt="DevUI Logo" src="public/logo.svg
|
|
3
|
+
<img alt="DevUI Logo" src="https://github.com/DevCloudFE/vue-devui/raw/dev/packages/devui-vue/public/logo.svg" width="180" style="max-width:100%;">
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
|
@@ -18,7 +18,7 @@ DevUI 官方网站:[https://devui.design](https://devui.design)
|
|
|
18
18
|
- ⭐ 参与到开源社区中来
|
|
19
19
|
- 🎊 结识一群热爱学习、热爱开源的朋友
|
|
20
20
|
|
|
21
|
-
[贡献指南](https://
|
|
21
|
+
[贡献指南](https://github.com/DevCloudFE/vue-devui/wiki/%E8%B4%A1%E7%8C%AE%E6%8C%87%E5%8D%97)
|
|
22
22
|
|
|
23
23
|
# 快速开始
|
|
24
24
|
|
|
@@ -66,6 +66,7 @@ yarn add vue-devui
|
|
|
66
66
|
|
|
67
67
|
## 2. 全量引入
|
|
68
68
|
|
|
69
|
+
在`main.ts`文件中编写以下代码:
|
|
69
70
|
```
|
|
70
71
|
import { createApp } from 'vue'
|
|
71
72
|
import App from './App.vue'
|
|
@@ -84,6 +85,7 @@ createApp(App)
|
|
|
84
85
|
|
|
85
86
|
除了全量引入,我们也支持单个组件按需引入。
|
|
86
87
|
|
|
88
|
+
在`main.ts`文件中编写以下代码:
|
|
87
89
|
```
|
|
88
90
|
import { createApp } from 'vue'
|
|
89
91
|
import App from './App.vue'
|
|
@@ -99,7 +101,32 @@ createApp(App)
|
|
|
99
101
|
.mount('#app')
|
|
100
102
|
```
|
|
101
103
|
|
|
102
|
-
## 4.
|
|
104
|
+
## 4. 配置自动按需引入`unplugin-vue-components`(推荐)
|
|
105
|
+
|
|
106
|
+
配置`unplugin-vue-components`插件可以无需引入Vue DevUI就可以直接按需使用其中的组件,具体使用方式如下:
|
|
107
|
+
|
|
108
|
+
在`vite.config.ts`文件中添加以下代码:
|
|
109
|
+
```
|
|
110
|
+
import Components from 'unplugin-vue-components/vite'
|
|
111
|
+
import { DevUiResolver } from 'unplugin-vue-components/resolvers'
|
|
112
|
+
|
|
113
|
+
export default defineConfig({
|
|
114
|
+
plugins: [
|
|
115
|
+
vue(),
|
|
116
|
+
|
|
117
|
+
// 新增
|
|
118
|
+
Components({
|
|
119
|
+
resolvers: [
|
|
120
|
+
DevUiResolver()
|
|
121
|
+
]
|
|
122
|
+
})
|
|
123
|
+
]
|
|
124
|
+
})
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
配置了以上插件,就可以直接在代码中使用`Vue DevUI`的组件,而无需在`main.ts`文件中引入`Vue DevUI`。
|
|
128
|
+
|
|
129
|
+
## 5. 使用
|
|
103
130
|
|
|
104
131
|
```
|
|
105
132
|
<template>
|
|
@@ -109,7 +136,7 @@ createApp(App)
|
|
|
109
136
|
|
|
110
137
|
# 图标库
|
|
111
138
|
|
|
112
|
-
|
|
139
|
+
图标库推荐使用[DevUI图标库](https://devui.design/icon/ruleResource),也可以使用第三方图标库,比如:iconfont。
|
|
113
140
|
|
|
114
141
|
## 使用DevUI图标库
|
|
115
142
|
|
|
@@ -137,36 +164,6 @@ import '@devui-design/icons/icomoon/devui-icon.css'
|
|
|
137
164
|
<d-icon name="love" color="red"></d-icon>
|
|
138
165
|
```
|
|
139
166
|
|
|
140
|
-
## 使用第三方图标库
|
|
141
|
-
|
|
142
|
-
如果有第三方图标库,可以用类似的方式引入。
|
|
143
|
-
|
|
144
|
-
### 引入
|
|
145
|
-
|
|
146
|
-
在`main.ts`文件中,编写以下代码:
|
|
147
|
-
|
|
148
|
-
```
|
|
149
|
-
import 'your-folder/my-icon.css'
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
### 使用
|
|
153
|
-
|
|
154
|
-
```
|
|
155
|
-
<d-icon classPrefix="my-icon" name="love" color="red"></d-icon>
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
其中的`classPrefix`参数的值,应该和你的字体图标样式文件`my-icon.css`里定义的样式前缀保持一致。
|
|
159
|
-
|
|
160
|
-
比如`my-icon.css`里的图标样式:
|
|
161
|
-
|
|
162
|
-
```css
|
|
163
|
-
.my-icon-branch-node:before {
|
|
164
|
-
content: "\E001";
|
|
165
|
-
}
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
那么`classPrefix`就是`my-icon`。
|
|
169
|
-
|
|
170
167
|
# License
|
|
171
168
|
|
|
172
|
-
[MIT](https://
|
|
169
|
+
[MIT](https://github.com/DevCloudFE/vue-devui/blob/dev/LICENSE)
|
package/accordion/index.es.js
CHANGED
|
@@ -1 +1,508 @@
|
|
|
1
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, createTextVNode, provide, onMounted, watch } from "vue";
|
|
21
|
+
const accordionProps = {
|
|
22
|
+
data: {
|
|
23
|
+
type: Array,
|
|
24
|
+
default: null
|
|
25
|
+
},
|
|
26
|
+
titleKey: { type: String, default: "title" },
|
|
27
|
+
loadingKey: { type: String, default: "loading" },
|
|
28
|
+
childrenKey: { type: String, default: "children" },
|
|
29
|
+
disabledKey: { type: String, default: "disabled" },
|
|
30
|
+
activeKey: { type: String, default: "active" },
|
|
31
|
+
openKey: { type: String, default: "open" },
|
|
32
|
+
menuItemTemplate: { type: Boolean, default: true },
|
|
33
|
+
itemTemplate: { type: Boolean, default: true },
|
|
34
|
+
menuToggle: {
|
|
35
|
+
type: Function,
|
|
36
|
+
default: null
|
|
37
|
+
},
|
|
38
|
+
itemClick: {
|
|
39
|
+
type: Function,
|
|
40
|
+
default: null
|
|
41
|
+
},
|
|
42
|
+
activeItemChange: {
|
|
43
|
+
type: Function,
|
|
44
|
+
default: null
|
|
45
|
+
},
|
|
46
|
+
restrictOneOpen: { type: Boolean, default: false },
|
|
47
|
+
autoOpenActiveMenu: { type: Boolean, default: false },
|
|
48
|
+
showNoContent: { type: Boolean, default: true },
|
|
49
|
+
noContentTemplate: { type: Boolean, default: true },
|
|
50
|
+
loadingTemplate: { type: Boolean, default: true },
|
|
51
|
+
innerListTemplate: { type: Boolean, default: true },
|
|
52
|
+
linkType: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: ""
|
|
55
|
+
},
|
|
56
|
+
linkTypeKey: { type: String, default: "linkType" },
|
|
57
|
+
linkKey: { type: String, default: "link" },
|
|
58
|
+
linkTargetKey: { type: String, default: "target" },
|
|
59
|
+
linkDefaultTarget: { type: String, default: "_self" },
|
|
60
|
+
accordionType: {
|
|
61
|
+
type: String,
|
|
62
|
+
default: "normal"
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
const OpenIcon = () => {
|
|
66
|
+
return createVNode("svg", {
|
|
67
|
+
"width": "1em",
|
|
68
|
+
"height": "1em",
|
|
69
|
+
"viewBox": "0 0 16 16",
|
|
70
|
+
"version": "1.1",
|
|
71
|
+
"xmlns": "http://www.w3.org/2000/svg",
|
|
72
|
+
"xmlns:xlink": "http://www.w3.org/1999/xlink"
|
|
73
|
+
}, [createVNode("g", {
|
|
74
|
+
"stroke": "none",
|
|
75
|
+
"stroke-width": "1",
|
|
76
|
+
"fill": "none",
|
|
77
|
+
"fill-rule": "evenodd"
|
|
78
|
+
}, [createVNode("path", {
|
|
79
|
+
"d": "M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z",
|
|
80
|
+
"fill-rule": "nonzero"
|
|
81
|
+
}, null)])]);
|
|
82
|
+
};
|
|
83
|
+
const getRootSlots = () => {
|
|
84
|
+
const rootComponentName = "DAccordion";
|
|
85
|
+
const getRootComponent = (component) => {
|
|
86
|
+
if (component && component.type.name === rootComponentName) {
|
|
87
|
+
return component;
|
|
88
|
+
}
|
|
89
|
+
if (component && component.parent) {
|
|
90
|
+
const parent = component.parent;
|
|
91
|
+
return getRootComponent(parent);
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
const rootComponent = getRootComponent(getCurrentInstance());
|
|
95
|
+
return rootComponent == null ? void 0 : rootComponent.slots;
|
|
96
|
+
};
|
|
97
|
+
var DAccordionMenu = defineComponent({
|
|
98
|
+
name: "DAccordionMenu",
|
|
99
|
+
components: {
|
|
100
|
+
OpenIcon
|
|
101
|
+
},
|
|
102
|
+
props: __spreadValues({
|
|
103
|
+
item: Object,
|
|
104
|
+
deepth: {
|
|
105
|
+
type: Number,
|
|
106
|
+
default: 0
|
|
107
|
+
},
|
|
108
|
+
parent: {
|
|
109
|
+
type: Object,
|
|
110
|
+
default: null
|
|
111
|
+
}
|
|
112
|
+
}, accordionProps),
|
|
113
|
+
setup(props) {
|
|
114
|
+
const {
|
|
115
|
+
item,
|
|
116
|
+
deepth,
|
|
117
|
+
parent,
|
|
118
|
+
openKey,
|
|
119
|
+
activeKey,
|
|
120
|
+
autoOpenActiveMenu,
|
|
121
|
+
disabledKey,
|
|
122
|
+
childrenKey,
|
|
123
|
+
titleKey,
|
|
124
|
+
menuItemTemplate
|
|
125
|
+
} = toRefs(props);
|
|
126
|
+
const rootSlots = getRootSlots();
|
|
127
|
+
const accordionCtx = inject("accordionContext");
|
|
128
|
+
let parentValue = parent.value;
|
|
129
|
+
let deepValue = deepth.value;
|
|
130
|
+
const toggle = (itemEvent) => {
|
|
131
|
+
accordionCtx.menuToggleFn(itemEvent);
|
|
132
|
+
};
|
|
133
|
+
const hasActiveChildren = (item2) => {
|
|
134
|
+
if (item2[activeKey.value] === true)
|
|
135
|
+
return true;
|
|
136
|
+
if (item2[childrenKey.value]) {
|
|
137
|
+
return hasChildActive(item2[childrenKey.value]);
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
const hasChildActive = (arr) => {
|
|
141
|
+
let flag = false;
|
|
142
|
+
if (!arr.length)
|
|
143
|
+
return false;
|
|
144
|
+
for (let i = 0; i < arr.length; i++) {
|
|
145
|
+
if (arr[i][activeKey.value] === true) {
|
|
146
|
+
flag = true;
|
|
147
|
+
break;
|
|
148
|
+
}
|
|
149
|
+
if (arr[i][childrenKey.value]) {
|
|
150
|
+
flag = hasChildActive(arr[i][childrenKey.value]);
|
|
151
|
+
if (flag)
|
|
152
|
+
break;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
return flag;
|
|
156
|
+
};
|
|
157
|
+
const keyOpen = computed(() => {
|
|
158
|
+
return item.value && item.value[openKey.value];
|
|
159
|
+
});
|
|
160
|
+
const disabled = computed(() => {
|
|
161
|
+
return item.value && item.value[disabledKey.value];
|
|
162
|
+
});
|
|
163
|
+
const title = computed(() => {
|
|
164
|
+
return item.value && item.value[titleKey.value];
|
|
165
|
+
});
|
|
166
|
+
const children = computed(() => {
|
|
167
|
+
return item.value && item.value[childrenKey.value];
|
|
168
|
+
});
|
|
169
|
+
const childActived = computed(() => {
|
|
170
|
+
return hasActiveChildren(item.value);
|
|
171
|
+
});
|
|
172
|
+
const open = computed(() => {
|
|
173
|
+
return keyOpen.value === void 0 && autoOpenActiveMenu.value ? childActived.value : keyOpen.value;
|
|
174
|
+
});
|
|
175
|
+
return () => {
|
|
176
|
+
var _a;
|
|
177
|
+
return createVNode(Fragment, null, [createVNode("div", {
|
|
178
|
+
"class": ["devui-accordion-item-title", "devui-over-flow-ellipsis", open.value && "open", childActived.value && "active", disabled.value && "disabled"],
|
|
179
|
+
"title": title.value,
|
|
180
|
+
"style": {
|
|
181
|
+
textIndent: deepValue * 20 + "px"
|
|
182
|
+
},
|
|
183
|
+
"onClick": (e) => !disabled.value && toggle({
|
|
184
|
+
item: item.value,
|
|
185
|
+
open: !open.value,
|
|
186
|
+
parent: parentValue,
|
|
187
|
+
event: e
|
|
188
|
+
})
|
|
189
|
+
}, [createVNode("div", {
|
|
190
|
+
"class": ["devui-accordion-splitter", deepValue === 0 && "devui-parent-list"],
|
|
191
|
+
"style": {
|
|
192
|
+
left: deepValue * 20 + 10 + "px"
|
|
193
|
+
}
|
|
194
|
+
}, null), (!rootSlots.menuItemTemplate || menuItemTemplate.value === false) && createVNode(Fragment, null, [title.value]), rootSlots.menuItemTemplate && menuItemTemplate.value !== false && ((_a = rootSlots.menuItemTemplate) == null ? void 0 : _a.call(rootSlots, {
|
|
195
|
+
parent: parentValue,
|
|
196
|
+
deepth: deepValue,
|
|
197
|
+
item: item.value
|
|
198
|
+
})), createVNode("span", {
|
|
199
|
+
"class": "devui-accordion-open-icon"
|
|
200
|
+
}, [createVNode(OpenIcon, null, null)])]), createVNode("div", {
|
|
201
|
+
"class": [!open.value && "devui-accordion-menu-hidden", "devui-accordion-submenu", "devui-accordion-show-animate"]
|
|
202
|
+
}, [createVNode(AccordionList, mergeProps(props, {
|
|
203
|
+
"deepth": deepValue + 1,
|
|
204
|
+
"data": children.value || [],
|
|
205
|
+
"parent": item.value
|
|
206
|
+
}), null)])]);
|
|
207
|
+
};
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
var DAccordionItem = defineComponent({
|
|
211
|
+
name: "DAccordionItem",
|
|
212
|
+
props: __spreadValues({
|
|
213
|
+
item: Object,
|
|
214
|
+
deepth: {
|
|
215
|
+
type: Number,
|
|
216
|
+
default: 0
|
|
217
|
+
},
|
|
218
|
+
parent: {
|
|
219
|
+
type: Object,
|
|
220
|
+
default: null
|
|
221
|
+
}
|
|
222
|
+
}, accordionProps),
|
|
223
|
+
setup(props) {
|
|
224
|
+
const {
|
|
225
|
+
item,
|
|
226
|
+
deepth,
|
|
227
|
+
parent,
|
|
228
|
+
titleKey,
|
|
229
|
+
activeKey,
|
|
230
|
+
disabledKey,
|
|
231
|
+
itemTemplate
|
|
232
|
+
} = toRefs(props);
|
|
233
|
+
const rootSlots = getRootSlots();
|
|
234
|
+
const accordionCtx = inject("accordionContext");
|
|
235
|
+
let parentValue = parent.value;
|
|
236
|
+
let deepValue = deepth.value;
|
|
237
|
+
const disabled = computed(() => {
|
|
238
|
+
return item.value && item.value[disabledKey.value];
|
|
239
|
+
});
|
|
240
|
+
const title = computed(() => {
|
|
241
|
+
return item.value && item.value[titleKey.value];
|
|
242
|
+
});
|
|
243
|
+
const active = computed(() => {
|
|
244
|
+
return item.value && item.value[activeKey.value];
|
|
245
|
+
});
|
|
246
|
+
const childActived = computed(() => {
|
|
247
|
+
return active.value;
|
|
248
|
+
});
|
|
249
|
+
const itemClick = (itemEvent) => {
|
|
250
|
+
if (item.value && !disabled.value) {
|
|
251
|
+
accordionCtx.itemClickFn(itemEvent);
|
|
252
|
+
}
|
|
253
|
+
};
|
|
254
|
+
return () => {
|
|
255
|
+
var _a;
|
|
256
|
+
return createVNode(Fragment, null, [createVNode("div", {
|
|
257
|
+
"class": ["devui-accordion-item-title", "devui-over-flow-ellipsis", childActived.value && "active", disabled.value && "disabled"],
|
|
258
|
+
"title": title.value,
|
|
259
|
+
"style": {
|
|
260
|
+
textIndent: deepValue * 20 + "px"
|
|
261
|
+
},
|
|
262
|
+
"onClick": (e) => itemClick({
|
|
263
|
+
item: item.value,
|
|
264
|
+
parent: parentValue,
|
|
265
|
+
event: e
|
|
266
|
+
})
|
|
267
|
+
}, [createVNode("div", {
|
|
268
|
+
"class": ["devui-accordion-splitter", deepValue === 0 && "devui-parent-list"],
|
|
269
|
+
"style": {
|
|
270
|
+
left: deepValue * 20 + 10 + "px"
|
|
271
|
+
}
|
|
272
|
+
}, null), (!rootSlots.itemTemplate || itemTemplate.value === false) && createVNode(Fragment, null, [title.value]), rootSlots.itemTemplate && itemTemplate.value !== false && ((_a = rootSlots.itemTemplate) == null ? void 0 : _a.call(rootSlots, {
|
|
273
|
+
parent: parentValue,
|
|
274
|
+
deepth: deepValue,
|
|
275
|
+
item: item.value
|
|
276
|
+
}))])]);
|
|
277
|
+
};
|
|
278
|
+
}
|
|
279
|
+
});
|
|
280
|
+
var AccordionList = defineComponent({
|
|
281
|
+
name: "DAccordionList",
|
|
282
|
+
inheritAttrs: false,
|
|
283
|
+
components: {
|
|
284
|
+
DAccordionMenu,
|
|
285
|
+
DAccordionItem
|
|
286
|
+
},
|
|
287
|
+
props: __spreadValues({
|
|
288
|
+
data: {
|
|
289
|
+
type: Array,
|
|
290
|
+
default: null
|
|
291
|
+
},
|
|
292
|
+
deepth: {
|
|
293
|
+
type: Number,
|
|
294
|
+
default: 0
|
|
295
|
+
},
|
|
296
|
+
parent: {
|
|
297
|
+
type: Object,
|
|
298
|
+
default: null
|
|
299
|
+
},
|
|
300
|
+
innerListTemplate: Boolean
|
|
301
|
+
}, accordionProps),
|
|
302
|
+
setup(props, {
|
|
303
|
+
attrs
|
|
304
|
+
}) {
|
|
305
|
+
const {
|
|
306
|
+
childrenKey,
|
|
307
|
+
deepth,
|
|
308
|
+
parent,
|
|
309
|
+
data,
|
|
310
|
+
linkType,
|
|
311
|
+
showNoContent,
|
|
312
|
+
loadingKey,
|
|
313
|
+
titleKey,
|
|
314
|
+
loadingTemplate,
|
|
315
|
+
noContentTemplate,
|
|
316
|
+
innerListTemplate
|
|
317
|
+
} = toRefs(props);
|
|
318
|
+
let parentValue = parent.value;
|
|
319
|
+
let deepValue = deepth.value;
|
|
320
|
+
const rootSlots = getRootSlots();
|
|
321
|
+
const accordionCtx = inject("accordionContext");
|
|
322
|
+
const loading = computed(() => {
|
|
323
|
+
return parentValue && parentValue[loadingKey.value];
|
|
324
|
+
});
|
|
325
|
+
const noContent = computed(() => {
|
|
326
|
+
let dataValue = data.value;
|
|
327
|
+
return dataValue === void 0 || dataValue === null || dataValue.length === 0;
|
|
328
|
+
});
|
|
329
|
+
return () => {
|
|
330
|
+
var _a, _b, _c;
|
|
331
|
+
return createVNode(Fragment, null, [(!rootSlots.innerListTemplate || deepth.value === 0 || innerListTemplate.value === false) && createVNode("ul", mergeProps({
|
|
332
|
+
"class": ["devui-accordion-list"]
|
|
333
|
+
}, attrs), [data.value.map((item) => {
|
|
334
|
+
return createVNode("li", {
|
|
335
|
+
"class": "devui-accordion-item",
|
|
336
|
+
"key": item[titleKey.value]
|
|
337
|
+
}, [item[childrenKey.value] !== void 0 && createVNode("div", {
|
|
338
|
+
"class": "devui-accordion-menu-item"
|
|
339
|
+
}, [createVNode(resolveComponent("d-accordion-menu"), mergeProps(props, {
|
|
340
|
+
"item": item,
|
|
341
|
+
"deepth": deepValue,
|
|
342
|
+
"parent": parentValue
|
|
343
|
+
}), null)]), item[childrenKey.value] === void 0 && createVNode(Fragment, null, [(!linkType.value || linkType.value === "") && createVNode(resolveComponent("d-accordion-item"), mergeProps(props, {
|
|
344
|
+
"item": item,
|
|
345
|
+
"deepth": deepValue,
|
|
346
|
+
"parent": parentValue
|
|
347
|
+
}), null)])]);
|
|
348
|
+
})]), rootSlots.innerListTemplate && innerListTemplate.value !== false && deepValue !== 0 && ((_a = rootSlots.innerListTemplate) == null ? void 0 : _a.call(rootSlots, {
|
|
349
|
+
item: parentValue,
|
|
350
|
+
deepth: deepValue,
|
|
351
|
+
itemClickFn: accordionCtx.itemClickFn,
|
|
352
|
+
menuToggleFn: accordionCtx.menuToggleFn
|
|
353
|
+
})), (!rootSlots.innerListTemplate || innerListTemplate.value === false) && (loading.value || noContent.value && showNoContent.value) && createVNode("ul", mergeProps({
|
|
354
|
+
"class": ["devui-accordion-list"]
|
|
355
|
+
}, attrs), [
|
|
356
|
+
loading.value && (!rootSlots.loadingTemplate || loadingTemplate.value === false) && createVNode("li", {
|
|
357
|
+
"class": "devui-accordion-item"
|
|
358
|
+
}, [createVNode("div", {
|
|
359
|
+
"class": ["devui-accordion-item-title", "devui-over-flow-ellipsis"],
|
|
360
|
+
"style": {
|
|
361
|
+
textIndent: deepValue * 20 + "px"
|
|
362
|
+
}
|
|
363
|
+
}, [createTextVNode("\u52A0\u8F7D\u4E2D...")])]),
|
|
364
|
+
loading.value && rootSlots.loadingTemplate && loadingTemplate.value !== false && ((_b = rootSlots.loadingTemplate) == null ? void 0 : _b.call(rootSlots, {
|
|
365
|
+
item: parentValue,
|
|
366
|
+
deepth: deepValue
|
|
367
|
+
})),
|
|
368
|
+
showNoContent.value && !loading.value && noContent.value && (!rootSlots.noContentTemplate || noContentTemplate.value === false) && createVNode("li", {
|
|
369
|
+
"class": "devui-accordion-item"
|
|
370
|
+
}, [createVNode("div", {
|
|
371
|
+
"class": ["devui-accordion-item-title", "devui-over-flow-ellipsis disabled"],
|
|
372
|
+
"style": {
|
|
373
|
+
textIndent: deepValue * 20 + "px"
|
|
374
|
+
}
|
|
375
|
+
}, [createTextVNode("\u6CA1\u6709\u6570\u636E")])]),
|
|
376
|
+
showNoContent.value && !loading.value && noContent.value && rootSlots.noContentTemplate && noContentTemplate.value !== false && ((_c = rootSlots.noContentTemplate) == null ? void 0 : _c.call(rootSlots, {
|
|
377
|
+
item: parentValue,
|
|
378
|
+
deepth: deepValue
|
|
379
|
+
}))
|
|
380
|
+
])]);
|
|
381
|
+
};
|
|
382
|
+
}
|
|
383
|
+
});
|
|
384
|
+
var accordion = "";
|
|
385
|
+
var Accordion = defineComponent({
|
|
386
|
+
name: "DAccordion",
|
|
387
|
+
props: accordionProps,
|
|
388
|
+
setup(props, {
|
|
389
|
+
emit
|
|
390
|
+
}) {
|
|
391
|
+
const {
|
|
392
|
+
data,
|
|
393
|
+
childrenKey,
|
|
394
|
+
activeKey,
|
|
395
|
+
openKey,
|
|
396
|
+
accordionType,
|
|
397
|
+
autoOpenActiveMenu,
|
|
398
|
+
restrictOneOpen
|
|
399
|
+
} = toRefs(props);
|
|
400
|
+
let clickActiveItem = void 0;
|
|
401
|
+
const flatten = (arr, childrenKey2 = "children", includeParent = false, includeLeaf = true) => {
|
|
402
|
+
return arr.reduce((acc, cur) => {
|
|
403
|
+
const children = cur[childrenKey2];
|
|
404
|
+
if (children === void 0) {
|
|
405
|
+
if (includeLeaf) {
|
|
406
|
+
acc.push(cur);
|
|
407
|
+
}
|
|
408
|
+
} else {
|
|
409
|
+
if (includeParent) {
|
|
410
|
+
acc.push(cur);
|
|
411
|
+
}
|
|
412
|
+
if (Array.isArray(children)) {
|
|
413
|
+
acc.push(...flatten(children, childrenKey2, includeParent));
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
return acc;
|
|
417
|
+
}, []);
|
|
418
|
+
};
|
|
419
|
+
const initActiveItem = () => {
|
|
420
|
+
const activeItem = flatten(data.value, childrenKey.value).filter((item) => item[activeKey.value]).pop();
|
|
421
|
+
if (activeItem) {
|
|
422
|
+
if (!clickActiveItem) {
|
|
423
|
+
activeItemFn(activeItem);
|
|
424
|
+
}
|
|
425
|
+
} else {
|
|
426
|
+
clickActiveItem = void 0;
|
|
427
|
+
}
|
|
428
|
+
};
|
|
429
|
+
const activeItemFn = (item) => {
|
|
430
|
+
if (clickActiveItem && clickActiveItem[activeKey.value]) {
|
|
431
|
+
clickActiveItem[activeKey.value] = false;
|
|
432
|
+
}
|
|
433
|
+
item[activeKey.value] = true;
|
|
434
|
+
clickActiveItem = item;
|
|
435
|
+
emit("activeItemChange", clickActiveItem);
|
|
436
|
+
};
|
|
437
|
+
const openMenuFn = (item, open) => {
|
|
438
|
+
if (open && restrictOneOpen.value) {
|
|
439
|
+
data.value.forEach((itemtemp) => {
|
|
440
|
+
itemtemp[openKey.value] = false;
|
|
441
|
+
});
|
|
442
|
+
}
|
|
443
|
+
item[openKey.value] = open;
|
|
444
|
+
};
|
|
445
|
+
const itemClickFn = (itemEvent) => {
|
|
446
|
+
const prevActiveItem = clickActiveItem;
|
|
447
|
+
activeItemFn(itemEvent.item);
|
|
448
|
+
emit("itemClick", __spreadProps(__spreadValues({}, itemEvent), {
|
|
449
|
+
prevActiveItem
|
|
450
|
+
}));
|
|
451
|
+
};
|
|
452
|
+
const linkItemClickFn = (itemEvent) => {
|
|
453
|
+
const prevActiveItem = clickActiveItem;
|
|
454
|
+
clickActiveItem = itemEvent.item;
|
|
455
|
+
emit("linkItemClick", __spreadProps(__spreadValues({}, itemEvent), {
|
|
456
|
+
prevActiveItem
|
|
457
|
+
}));
|
|
458
|
+
};
|
|
459
|
+
const menuToggleFn = (menuEvent) => {
|
|
460
|
+
openMenuFn(menuEvent.item, menuEvent.open);
|
|
461
|
+
emit("menuToggle", menuEvent);
|
|
462
|
+
};
|
|
463
|
+
const cleanOpenData = () => {
|
|
464
|
+
flatten(data.value, childrenKey.value, true, false).forEach((item) => item[openKey.value] = void 0);
|
|
465
|
+
};
|
|
466
|
+
provide("accordionContext", {
|
|
467
|
+
itemClickFn,
|
|
468
|
+
linkItemClickFn,
|
|
469
|
+
menuToggleFn
|
|
470
|
+
});
|
|
471
|
+
onMounted(() => {
|
|
472
|
+
if (data.value) {
|
|
473
|
+
initActiveItem();
|
|
474
|
+
}
|
|
475
|
+
});
|
|
476
|
+
watch(() => autoOpenActiveMenu.value, (current, preV) => {
|
|
477
|
+
if (current && preV === false) {
|
|
478
|
+
cleanOpenData();
|
|
479
|
+
}
|
|
480
|
+
});
|
|
481
|
+
watch(data.value, (current, preV) => {
|
|
482
|
+
initActiveItem();
|
|
483
|
+
}, {
|
|
484
|
+
deep: true
|
|
485
|
+
});
|
|
486
|
+
return () => {
|
|
487
|
+
return createVNode("div", {
|
|
488
|
+
"class": ["devui-accordion-menu", "devui-scrollbar", "devui-accordion-show-animate", accordionType.value === "normal" && "devui-accordion-menu-normal"]
|
|
489
|
+
}, [createVNode(AccordionList, mergeProps(props, {
|
|
490
|
+
"data": data.value,
|
|
491
|
+
"deepth": 0,
|
|
492
|
+
"parent": null
|
|
493
|
+
}), null)]);
|
|
494
|
+
};
|
|
495
|
+
}
|
|
496
|
+
});
|
|
497
|
+
Accordion.install = function(app) {
|
|
498
|
+
app.component(Accordion.name, Accordion);
|
|
499
|
+
};
|
|
500
|
+
var index = {
|
|
501
|
+
title: "Accordion \u624B\u98CE\u7434",
|
|
502
|
+
category: "\u5BFC\u822A",
|
|
503
|
+
status: "10%",
|
|
504
|
+
install(app) {
|
|
505
|
+
app.use(Accordion);
|
|
506
|
+
}
|
|
507
|
+
};
|
|
508
|
+
export { Accordion, index as default };
|
package/accordion/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
var q=Object.defineProperty,z=Object.defineProperties;var E=Object.getOwnPropertyDescriptors;var M=Object.getOwnPropertySymbols;var Z=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var S=(i,e,m)=>e in i?q(i,e,{enumerable:!0,configurable:!0,writable:!0,value:m}):i[e]=m,K=(i,e)=>{for(var m in e||(e={}))Z.call(e,m)&&S(i,m,e[m]);if(M)for(var m of M(e))G.call(e,m)&&S(i,m,e[m]);return i},L=(i,e)=>z(i,E(e));(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.index={},i.Vue))})(this,function(i,e){"use strict";const m={data:{type:Array,default:null},titleKey:{type:String,default:"title"},loadingKey:{type:String,default:"loading"},childrenKey:{type:String,default:"children"},disabledKey:{type:String,default:"disabled"},activeKey:{type:String,default:"active"},openKey:{type:String,default:"open"},menuItemTemplate:{type:Boolean,default:!0},itemTemplate:{type:Boolean,default:!0},menuToggle:{type:Function,default:null},itemClick:{type:Function,default:null},activeItemChange:{type:Function,default:null},restrictOneOpen:{type:Boolean,default:!1},autoOpenActiveMenu:{type:Boolean,default:!1},showNoContent:{type:Boolean,default:!0},noContentTemplate:{type:Boolean,default:!0},loadingTemplate:{type:Boolean,default:!0},innerListTemplate:{type:Boolean,default:!0},linkType:{type:String,default:""},linkTypeKey:{type:String,default:"linkType"},linkKey:{type:String,default:"link"},linkTargetKey:{type:String,default:"target"},linkDefaultTarget:{type:String,default:"_self"},accordionType:{type:String,default:"normal"}},D=()=>e.createVNode("svg",{width:"1em",height:"1em",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z","fill-rule":"nonzero"},null)])]),B=()=>{const d="DAccordion",t=c=>{if(c&&c.type.name===d)return c;if(c&&c.parent){const h=c.parent;return t(h)}},u=t(e.getCurrentInstance());return u==null?void 0:u.slots};var P=e.defineComponent({name:"DAccordionMenu",components:{OpenIcon:D},props:K({item:Object,deepth:{type:Number,default:0},parent:{type:Object,default:null}},m),setup(d){const{item:t,deepth:u,parent:c,openKey:h,activeKey:T,autoOpenActiveMenu:k,disabledKey:N,childrenKey:v,titleKey:s,menuItemTemplate:C}=e.toRefs(d),p=B(),V=e.inject("accordionContext");let f=c.value,o=u.value;const a=r=>{V.menuToggleFn(r)},x=r=>{if(r[T.value]===!0)return!0;if(r[v.value])return y(r[v.value])},y=r=>{let F=!1;if(!r.length)return!1;for(let O=0;O<r.length;O++){if(r[O][T.value]===!0){F=!0;break}if(r[O][v.value]&&(F=y(r[O][v.value]),F))break}return F},n=e.computed(()=>t.value&&t.value[h.value]),l=e.computed(()=>t.value&&t.value[N.value]),A=e.computed(()=>t.value&&t.value[s.value]),b=e.computed(()=>t.value&&t.value[v.value]),g=e.computed(()=>x(t.value)),I=e.computed(()=>n.value===void 0&&k.value?g.value:n.value);return()=>{var r;return e.createVNode(e.Fragment,null,[e.createVNode("div",{class:["devui-accordion-item-title","devui-over-flow-ellipsis",I.value&&"open",g.value&&"active",l.value&&"disabled"],title:A.value,style:{textIndent:o*20+"px"},onClick:F=>!l.value&&a({item:t.value,open:!I.value,parent:f,event:F})},[e.createVNode("div",{class:["devui-accordion-splitter",o===0&&"devui-parent-list"],style:{left:o*20+10+"px"}},null),(!p.menuItemTemplate||C.value===!1)&&e.createVNode(e.Fragment,null,[A.value]),p.menuItemTemplate&&C.value!==!1&&((r=p.menuItemTemplate)==null?void 0:r.call(p,{parent:f,deepth:o,item:t.value})),e.createVNode("span",{class:"devui-accordion-open-icon"},[e.createVNode(D,null,null)])]),e.createVNode("div",{class:[!I.value&&"devui-accordion-menu-hidden","devui-accordion-submenu","devui-accordion-show-animate"]},[e.createVNode(j,e.mergeProps(d,{deepth:o+1,data:b.value||[],parent:t.value}),null)])])}}}),R=e.defineComponent({name:"DAccordionItem",props:K({item:Object,deepth:{type:Number,default:0},parent:{type:Object,default:null}},m),setup(d){const{item:t,deepth:u,parent:c,titleKey:h,activeKey:T,disabledKey:k,itemTemplate:N}=e.toRefs(d),v=B(),s=e.inject("accordionContext");let C=c.value,p=u.value;const V=e.computed(()=>t.value&&t.value[k.value]),f=e.computed(()=>t.value&&t.value[h.value]),o=e.computed(()=>t.value&&t.value[T.value]),a=e.computed(()=>o.value),x=y=>{t.value&&!V.value&&s.itemClickFn(y)};return()=>{var y;return e.createVNode(e.Fragment,null,[e.createVNode("div",{class:["devui-accordion-item-title","devui-over-flow-ellipsis",a.value&&"active",V.value&&"disabled"],title:f.value,style:{textIndent:p*20+"px"},onClick:n=>x({item:t.value,parent:C,event:n})},[e.createVNode("div",{class:["devui-accordion-splitter",p===0&&"devui-parent-list"],style:{left:p*20+10+"px"}},null),(!v.itemTemplate||N.value===!1)&&e.createVNode(e.Fragment,null,[f.value]),v.itemTemplate&&N.value!==!1&&((y=v.itemTemplate)==null?void 0:y.call(v,{parent:C,deepth:p,item:t.value}))])])}}}),j=e.defineComponent({name:"DAccordionList",inheritAttrs:!1,components:{DAccordionMenu:P,DAccordionItem:R},props:K({data:{type:Array,default:null},deepth:{type:Number,default:0},parent:{type:Object,default:null},innerListTemplate:Boolean},m),setup(d,{attrs:t}){const{childrenKey:u,deepth:c,parent:h,data:T,linkType:k,showNoContent:N,loadingKey:v,titleKey:s,loadingTemplate:C,noContentTemplate:p,innerListTemplate:V}=e.toRefs(d);let f=h.value,o=c.value;const a=B(),x=e.inject("accordionContext"),y=e.computed(()=>f&&f[v.value]),n=e.computed(()=>{let l=T.value;return l==null||l.length===0});return()=>{var l,A,b;return e.createVNode(e.Fragment,null,[(!a.innerListTemplate||c.value===0||V.value===!1)&&e.createVNode("ul",e.mergeProps({class:["devui-accordion-list"]},t),[T.value.map(g=>e.createVNode("li",{class:"devui-accordion-item",key:g[s.value]},[g[u.value]!==void 0&&e.createVNode("div",{class:"devui-accordion-menu-item"},[e.createVNode(e.resolveComponent("d-accordion-menu"),e.mergeProps(d,{item:g,deepth:o,parent:f}),null)]),g[u.value]===void 0&&e.createVNode(e.Fragment,null,[(!k.value||k.value==="")&&e.createVNode(e.resolveComponent("d-accordion-item"),e.mergeProps(d,{item:g,deepth:o,parent:f}),null)])]))]),a.innerListTemplate&&V.value!==!1&&o!==0&&((l=a.innerListTemplate)==null?void 0:l.call(a,{item:f,deepth:o,itemClickFn:x.itemClickFn,menuToggleFn:x.menuToggleFn})),(!a.innerListTemplate||V.value===!1)&&(y.value||n.value&&N.value)&&e.createVNode("ul",e.mergeProps({class:["devui-accordion-list"]},t),[y.value&&(!a.loadingTemplate||C.value===!1)&&e.createVNode("li",{class:"devui-accordion-item"},[e.createVNode("div",{class:["devui-accordion-item-title","devui-over-flow-ellipsis"],style:{textIndent:o*20+"px"}},[e.createTextVNode("\u52A0\u8F7D\u4E2D...")])]),y.value&&a.loadingTemplate&&C.value!==!1&&((A=a.loadingTemplate)==null?void 0:A.call(a,{item:f,deepth:o})),N.value&&!y.value&&n.value&&(!a.noContentTemplate||p.value===!1)&&e.createVNode("li",{class:"devui-accordion-item"},[e.createVNode("div",{class:["devui-accordion-item-title","devui-over-flow-ellipsis disabled"],style:{textIndent:o*20+"px"}},[e.createTextVNode("\u6CA1\u6709\u6570\u636E")])]),N.value&&!y.value&&n.value&&a.noContentTemplate&&p.value!==!1&&((b=a.noContentTemplate)==null?void 0:b.call(a,{item:f,deepth:o}))])])}}}),H="",w=e.defineComponent({name:"DAccordion",props:m,setup(d,{emit:t}){const{data:u,childrenKey:c,activeKey:h,openKey:T,accordionType:k,autoOpenActiveMenu:N,restrictOneOpen:v}=e.toRefs(d);let s;const C=(n,l="children",A=!1,b=!0)=>n.reduce((g,I)=>{const r=I[l];return r===void 0?b&&g.push(I):(A&&g.push(I),Array.isArray(r)&&g.push(...C(r,l,A))),g},[]),p=()=>{const n=C(u.value,c.value).filter(l=>l[h.value]).pop();n?s||V(n):s=void 0},V=n=>{s&&s[h.value]&&(s[h.value]=!1),n[h.value]=!0,s=n,t("activeItemChange",s)},f=(n,l)=>{l&&v.value&&u.value.forEach(A=>{A[T.value]=!1}),n[T.value]=l},o=n=>{const l=s;V(n.item),t("itemClick",L(K({},n),{prevActiveItem:l}))},a=n=>{const l=s;s=n.item,t("linkItemClick",L(K({},n),{prevActiveItem:l}))},x=n=>{f(n.item,n.open),t("menuToggle",n)},y=()=>{C(u.value,c.value,!0,!1).forEach(n=>n[T.value]=void 0)};return e.provide("accordionContext",{itemClickFn:o,linkItemClickFn:a,menuToggleFn:x}),e.onMounted(()=>{u.value&&p()}),e.watch(()=>N.value,(n,l)=>{n&&l===!1&&y()}),e.watch(u.value,(n,l)=>{p()},{deep:!0}),()=>e.createVNode("div",{class:["devui-accordion-menu","devui-scrollbar","devui-accordion-show-animate",k.value==="normal"&&"devui-accordion-menu-normal"]},[e.createVNode(j,e.mergeProps(d,{data:u.value,deepth:0,parent:null}),null)])}});w.install=function(d){d.component(w.name,w)};var _={title:"Accordion \u624B\u98CE\u7434",category:"\u5BFC\u822A",status:"10%",install(d){d.use(w)}};i.Accordion=w,i.default=_,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});
|