vue-devui 1.0.0-beta.10 → 1.0.0-beta.11

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://devui.design/home" target="_blank" rel="noopener noreferrer">
-    <img alt="DevUI Logo" src="public/logo.svg?sanitize=true" width="180" style="max-width:100%;">
+    <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%;">
   </a>
 </p>
 
@@ -18,8 +18,6 @@ DevUI 官方网站：[https://devui.design](https://devui.design)
 - ⭐ 参与到开源社区中来
 - 🎊 结识一群热爱学习、热爱开源的朋友
 
-[贡献指南](https://gitee.com/devui/vue-devui/wikis/【必看】快速开始)
-
 # 快速开始
 
 ## 1 安装依赖
@@ -66,6 +64,7 @@ yarn add vue-devui
 
 ## 2. 全量引入
 
+在`main.ts`文件中编写以下代码：
 ```
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -84,6 +83,7 @@ createApp(App)
 
 除了全量引入，我们也支持单个组件按需引入。
 
+在`main.ts`文件中编写以下代码：
 ```
 import { createApp } from 'vue'
 import App from './App.vue'
@@ -99,7 +99,32 @@ createApp(App)
 .mount('#app')
 ```
 
-## 4. 使用
+## 4. 配置自动按需引入`unplugin-vue-components`（推荐）
+
+配置`unplugin-vue-components`插件可以无需引入Vue DevUI就可以直接按需使用其中的组件，具体使用方式如下：
+
+在`vite.config.ts`文件中添加以下代码：
+```
+import Components from 'unplugin-vue-components/vite'
+import { DevUiResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+
+    // 新增
+    Components({
+      resolvers: [
+        DevUiResolver()
+      ]
+    })
+  ]
+})
+```
+
+配置了以上插件，就可以直接在代码中使用`Vue DevUI`的组件，而无需在`main.ts`文件中引入`Vue DevUI`。
+
+## 5. 使用
 
 ```
 <template>
@@ -109,7 +134,7 @@ createApp(App)
 
 # 图标库
 
-图标库可以使用[DevUI图标库](https://devui.design/icon/ruleResource)，也可以使用第三方图标库，比如：iconfont。
+图标库推荐使用[DevUI图标库](https://devui.design/icon/ruleResource)，也可以使用第三方图标库，比如：iconfont。
 
 ## 使用DevUI图标库
 
@@ -137,36 +162,6 @@ import '@devui-design/icons/icomoon/devui-icon.css'
 <d-icon name="love" color="red"></d-icon>
 ```
 
-## 使用第三方图标库
-
-如果有第三方图标库，可以用类似的方式引入。
-
-### 引入
-
-在`main.ts`文件中，编写以下代码：
-
-```
-import 'your-folder/my-icon.css'
-```
-
-### 使用
-
-```
-<d-icon classPrefix="my-icon" name="love" color="red"></d-icon>
-```
-
-其中的`classPrefix`参数的值，应该和你的字体图标样式文件`my-icon.css`里定义的样式前缀保持一致。
-
-比如`my-icon.css`里的图标样式：
-
-```css
-.my-icon-branch-node:before {
-	content: "\E001";
-}
-```
-
-那么`classPrefix`就是`my-icon`。
-
 # License
 
-[MIT](https://gitee.com/devui/vue-devui/blob/dev/LICENSE)
+[MIT](https://github.com/DevCloudFE/vue-devui/blob/dev/LICENSE)

package/accordion/index.es.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,7 +16,8 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, toRefs, computed, createVNode, Fragment, mergeProps, resolveComponent, onMounted, watch } from "vue";
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, createTextVNode, provide, onMounted, watch } from "vue";
 const accordionProps = {
   data: {
     type: Array,
@@ -26,8 +29,8 @@ const accordionProps = {
   disabledKey: { type: String, default: "disabled" },
   activeKey: { type: String, default: "active" },
   openKey: { type: String, default: "open" },
-  menuItemTemplate: { type: String, default: "" },
-  itemTemplate: { type: String, default: "" },
+  menuItemTemplate: { type: Boolean, default: true },
+  itemTemplate: { type: Boolean, default: true },
   menuToggle: {
     type: Function,
     default: null
@@ -43,9 +46,9 @@ const accordionProps = {
   restrictOneOpen: { type: Boolean, default: false },
   autoOpenActiveMenu: { type: Boolean, default: false },
   showNoContent: { type: Boolean, default: true },
-  noContentTemplate: { type: String, default: "" },
-  loadingTemplate: { type: String, default: "" },
-  innerListTemplate: { type: String, default: "" },
+  noContentTemplate: { type: Boolean, default: true },
+  loadingTemplate: { type: Boolean, default: true },
+  innerListTemplate: { type: Boolean, default: true },
   linkType: {
     type: String,
     default: ""
@@ -59,8 +62,43 @@ const accordionProps = {
     default: "normal"
   }
 };
+const OpenIcon = () => {
+  return 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"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [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)])]);
+};
+const getRootSlots = () => {
+  const rootComponentName = "DAccordion";
+  const getRootComponent = (component) => {
+    if (component && component.type.name === rootComponentName) {
+      return component;
+    }
+    if (component && component.parent) {
+      const parent = component.parent;
+      return getRootComponent(parent);
+    }
+  };
+  const rootComponent = getRootComponent(getCurrentInstance());
+  return rootComponent == null ? void 0 : rootComponent.slots;
+};
 var DAccordionMenu = defineComponent({
   name: "DAccordionMenu",
+  components: {
+    OpenIcon
+  },
   props: __spreadValues({
     item: Object,
     deepth: {
@@ -75,27 +113,167 @@ var DAccordionMenu = defineComponent({
   setup(props) {
     const {
       item,
-      deepth
+      deepth,
+      parent,
+      openKey,
+      activeKey,
+      autoOpenActiveMenu,
+      disabledKey,
+      childrenKey,
+      titleKey,
+      menuItemTemplate
     } = toRefs(props);
-    computed(() => {
-      return keyOpen === void 0 && props.autoOpenActiveMenu ? childActived : keyOpen;
-    });
+    const rootSlots = getRootSlots();
+    const accordionCtx = inject("accordionContext");
+    let parentValue = parent.value;
+    let deepValue = deepth.value;
+    const toggle = (itemEvent) => {
+      accordionCtx.menuToggleFn(itemEvent);
+    };
+    const hasActiveChildren = (item2) => {
+      if (item2[activeKey.value] === true)
+        return true;
+      if (item2[childrenKey.value]) {
+        return hasChildActive(item2[childrenKey.value]);
+      }
+    };
+    const hasChildActive = (arr) => {
+      let flag = false;
+      if (!arr.length)
+        return false;
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i][activeKey.value] === true) {
+          flag = true;
+          break;
+        }
+        if (arr[i][childrenKey.value]) {
+          flag = hasChildActive(arr[i][childrenKey.value]);
+          if (flag)
+            break;
+        }
+      }
+      return flag;
+    };
     const keyOpen = computed(() => {
-      return item == null ? void 0 : item.value[props.openKey];
+      return item.value && item.value[openKey.value];
+    });
+    const disabled = computed(() => {
+      return item.value && item.value[disabledKey.value];
+    });
+    const title = computed(() => {
+      return item.value && item.value[titleKey.value];
+    });
+    const children = computed(() => {
+      return item.value && item.value[childrenKey.value];
     });
     const childActived = computed(() => {
+      return hasActiveChildren(item.value);
+    });
+    const open = computed(() => {
+      return keyOpen.value === void 0 && autoOpenActiveMenu.value ? childActived.value : keyOpen.value;
     });
     return () => {
+      var _a;
       return createVNode(Fragment, null, [createVNode("div", {
-        "class": ["devui-accordion-item-title", "devui-over-flow-ellipsis", item.value.children ? "open active" : ""],
-        "title": item.value.title
-      }, [item.value.title]), createVNode(AccordionList, {
-        "class": "devui-accordion-submenu devui-accordion-show-animate",
-        "style": "opacity: 1; overflow: hidden;",
-        "deepth": deepth.value + 1,
-        "data": item.value.children || [],
+        "class": ["devui-accordion-item-title", "devui-over-flow-ellipsis", open.value && "open", childActived.value && "active", disabled.value && "disabled"],
+        "title": title.value,
+        "style": {
+          textIndent: deepValue * 20 + "px"
+        },
+        "onClick": (e) => !disabled.value && toggle({
+          item: item.value,
+          open: !open.value,
+          parent: parentValue,
+          event: e
+        })
+      }, [createVNode("div", {
+        "class": ["devui-accordion-splitter", deepValue === 0 && "devui-parent-list"],
+        "style": {
+          left: deepValue * 20 + 10 + "px"
+        }
+      }, 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, {
+        parent: parentValue,
+        deepth: deepValue,
+        item: item.value
+      })), createVNode("span", {
+        "class": "devui-accordion-open-icon"
+      }, [createVNode(OpenIcon, null, null)])]), createVNode("div", {
+        "class": [!open.value && "devui-accordion-menu-hidden", "devui-accordion-submenu", "devui-accordion-show-animate"]
+      }, [createVNode(AccordionList, mergeProps(props, {
+        "deepth": deepValue + 1,
+        "data": children.value || [],
         "parent": item.value
-      }, null)]);
+      }), null)])]);
+    };
+  }
+});
+var DAccordionItem = defineComponent({
+  name: "DAccordionItem",
+  props: __spreadValues({
+    item: Object,
+    deepth: {
+      type: Number,
+      default: 0
+    },
+    parent: {
+      type: Object,
+      default: null
+    }
+  }, accordionProps),
+  setup(props) {
+    const {
+      item,
+      deepth,
+      parent,
+      titleKey,
+      activeKey,
+      disabledKey,
+      itemTemplate
+    } = toRefs(props);
+    const rootSlots = getRootSlots();
+    const accordionCtx = inject("accordionContext");
+    let parentValue = parent.value;
+    let deepValue = deepth.value;
+    const disabled = computed(() => {
+      return item.value && item.value[disabledKey.value];
+    });
+    const title = computed(() => {
+      return item.value && item.value[titleKey.value];
+    });
+    const active = computed(() => {
+      return item.value && item.value[activeKey.value];
+    });
+    const childActived = computed(() => {
+      return active.value;
+    });
+    const itemClick = (itemEvent) => {
+      if (item.value && !disabled.value) {
+        accordionCtx.itemClickFn(itemEvent);
+      }
+    };
+    return () => {
+      var _a;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": ["devui-accordion-item-title", "devui-over-flow-ellipsis", childActived.value && "active", disabled.value && "disabled"],
+        "title": title.value,
+        "style": {
+          textIndent: deepValue * 20 + "px"
+        },
+        "onClick": (e) => itemClick({
+          item: item.value,
+          parent: parentValue,
+          event: e
+        })
+      }, [createVNode("div", {
+        "class": ["devui-accordion-splitter", deepValue === 0 && "devui-parent-list"],
+        "style": {
+          left: deepValue * 20 + 10 + "px"
+        }
+      }, 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, {
+        parent: parentValue,
+        deepth: deepValue,
+        item: item.value
+      }))])]);
     };
   }
 });
@@ -103,7 +281,8 @@ var AccordionList = defineComponent({
   name: "DAccordionList",
   inheritAttrs: false,
   components: {
-    DAccordionMenu
+    DAccordionMenu,
+    DAccordionItem
   },
   props: __spreadValues({
     data: {
@@ -121,27 +300,84 @@ var AccordionList = defineComponent({
     innerListTemplate: Boolean
   }, accordionProps),
   setup(props, {
-    attrs,
-    slots
+    attrs
   }) {
     const {
       childrenKey,
-      innerListTemplate,
-      deepth
+      deepth,
+      parent,
+      data,
+      linkType,
+      showNoContent,
+      loadingKey,
+      titleKey,
+      loadingTemplate,
+      noContentTemplate,
+      innerListTemplate
     } = toRefs(props);
+    let parentValue = parent.value;
+    let deepValue = deepth.value;
+    const rootSlots = getRootSlots();
+    const accordionCtx = inject("accordionContext");
+    const loading = computed(() => {
+      return parentValue && parentValue[loadingKey.value];
+    });
+    const noContent = computed(() => {
+      let dataValue = data.value;
+      return dataValue === void 0 || dataValue === null || dataValue.length === 0;
+    });
     return () => {
-      return createVNode(Fragment, null, [!innerListTemplate.value && createVNode("ul", mergeProps({
-        "class": "devui-accordion-list"
-      }, attrs), [props.data.map((item) => {
+      var _a, _b, _c;
+      return createVNode(Fragment, null, [(!rootSlots.innerListTemplate || deepth.value === 0 || innerListTemplate.value === false) && createVNode("ul", mergeProps({
+        "class": ["devui-accordion-list"]
+      }, attrs), [data.value.map((item) => {
         return createVNode("li", {
           "class": "devui-accordion-item",
-          "key": item.title
-        }, [childrenKey !== void 0 && createVNode(resolveComponent("d-accordion-menu"), mergeProps({
+          "key": item[titleKey.value]
+        }, [item[childrenKey.value] !== void 0 && createVNode("div", {
+          "class": "devui-accordion-menu-item"
+        }, [createVNode(resolveComponent("d-accordion-menu"), mergeProps(props, {
           "item": item,
-          "deepth": props.deepth,
-          "parent": props.parent
-        }, accordionProps), null)]);
-      })]), innerListTemplate.value && deepth.value !== 0 && createVNode("div", null, [slots.default ? slots.innerListTemplate() : ""])]);
+          "deepth": deepValue,
+          "parent": parentValue
+        }), null)]), item[childrenKey.value] === void 0 && createVNode(Fragment, null, [(!linkType.value || linkType.value === "") && createVNode(resolveComponent("d-accordion-item"), mergeProps(props, {
+          "item": item,
+          "deepth": deepValue,
+          "parent": parentValue
+        }), null)])]);
+      })]), rootSlots.innerListTemplate && innerListTemplate.value !== false && deepValue !== 0 && ((_a = rootSlots.innerListTemplate) == null ? void 0 : _a.call(rootSlots, {
+        item: parentValue,
+        deepth: deepValue,
+        itemClickFn: accordionCtx.itemClickFn,
+        menuToggleFn: accordionCtx.menuToggleFn
+      })), (!rootSlots.innerListTemplate || innerListTemplate.value === false) && (loading.value || noContent.value && showNoContent.value) && createVNode("ul", mergeProps({
+        "class": ["devui-accordion-list"]
+      }, attrs), [
+        loading.value && (!rootSlots.loadingTemplate || loadingTemplate.value === false) && createVNode("li", {
+          "class": "devui-accordion-item"
+        }, [createVNode("div", {
+          "class": ["devui-accordion-item-title", "devui-over-flow-ellipsis"],
+          "style": {
+            textIndent: deepValue * 20 + "px"
+          }
+        }, [createTextVNode("\u52A0\u8F7D\u4E2D...")])]),
+        loading.value && rootSlots.loadingTemplate && loadingTemplate.value !== false && ((_b = rootSlots.loadingTemplate) == null ? void 0 : _b.call(rootSlots, {
+          item: parentValue,
+          deepth: deepValue
+        })),
+        showNoContent.value && !loading.value && noContent.value && (!rootSlots.noContentTemplate || noContentTemplate.value === false) && createVNode("li", {
+          "class": "devui-accordion-item"
+        }, [createVNode("div", {
+          "class": ["devui-accordion-item-title", "devui-over-flow-ellipsis disabled"],
+          "style": {
+            textIndent: deepValue * 20 + "px"
+          }
+        }, [createTextVNode("\u6CA1\u6709\u6570\u636E")])]),
+        showNoContent.value && !loading.value && noContent.value && rootSlots.noContentTemplate && noContentTemplate.value !== false && ((_c = rootSlots.noContentTemplate) == null ? void 0 : _c.call(rootSlots, {
+          item: parentValue,
+          deepth: deepValue
+        }))
+      ])]);
     };
   }
 });
@@ -198,28 +434,63 @@ var Accordion = defineComponent({
       clickActiveItem = item;
       emit("activeItemChange", clickActiveItem);
     };
+    const openMenuFn = (item, open) => {
+      if (open && restrictOneOpen.value) {
+        data.value.forEach((itemtemp) => {
+          itemtemp[openKey.value] = false;
+        });
+      }
+      item[openKey.value] = open;
+    };
+    const itemClickFn = (itemEvent) => {
+      const prevActiveItem = clickActiveItem;
+      activeItemFn(itemEvent.item);
+      emit("itemClick", __spreadProps(__spreadValues({}, itemEvent), {
+        prevActiveItem
+      }));
+    };
+    const linkItemClickFn = (itemEvent) => {
+      const prevActiveItem = clickActiveItem;
+      clickActiveItem = itemEvent.item;
+      emit("linkItemClick", __spreadProps(__spreadValues({}, itemEvent), {
+        prevActiveItem
+      }));
+    };
+    const menuToggleFn = (menuEvent) => {
+      openMenuFn(menuEvent.item, menuEvent.open);
+      emit("menuToggle", menuEvent);
+    };
     const cleanOpenData = () => {
       flatten(data.value, childrenKey.value, true, false).forEach((item) => item[openKey.value] = void 0);
     };
+    provide("accordionContext", {
+      itemClickFn,
+      linkItemClickFn,
+      menuToggleFn
+    });
     onMounted(() => {
       if (data.value) {
         initActiveItem();
       }
     });
     watch(() => autoOpenActiveMenu.value, (current, preV) => {
-      console.log("cur, new", current, preV);
       if (current && preV === false) {
         cleanOpenData();
       }
     });
+    watch(data.value, (current, preV) => {
+      initActiveItem();
+    }, {
+      deep: true
+    });
     return () => {
       return createVNode("div", {
-        "class": `devui-accordion-menu devui-scrollbar ${accordionType.value === "normal" ? "devui-accordion-menu-normal" : ""}`
-      }, [createVNode(AccordionList, mergeProps({
-        "data": data,
+        "class": ["devui-accordion-menu", "devui-scrollbar", "devui-accordion-show-animate", accordionType.value === "normal" && "devui-accordion-menu-normal"]
+      }, [createVNode(AccordionList, mergeProps(props, {
+        "data": data.value,
         "deepth": 0,
         "parent": null
-      }, props), null)]);
+      }), null)]);
     };
   }
 });

package/accordion/index.umd.js

@@ -1 +1 @@
-var F=Object.defineProperty;var T=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var K=(t,e,n)=>e in t?F(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,h=(t,e)=>{for(var n in e||(e={}))I.call(e,n)&&K(t,n,e[n]);if(T)for(var n of T(e))w.call(e,n)&&K(t,n,e[n]);return t};(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.index={},t.Vue))})(this,function(t,e){"use strict";const n={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:String,default:""},itemTemplate:{type:String,default:""},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:String,default:""},loadingTemplate:{type:String,default:""},innerListTemplate:{type:String,default:""},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"}};var N=e.defineComponent({name:"DAccordionMenu",props:h({item:Object,deepth:{type:Number,default:0},parent:{type:Object,default:null}},n),setup(a){const{item:l,deepth:d}=e.toRefs(a);e.computed(()=>r===void 0&&a.autoOpenActiveMenu?o:r);const r=e.computed(()=>l==null?void 0:l.value[a.openKey]),o=e.computed(()=>{});return()=>e.createVNode(e.Fragment,null,[e.createVNode("div",{class:["devui-accordion-item-title","devui-over-flow-ellipsis",l.value.children?"open active":""],title:l.value.title},[l.value.title]),e.createVNode(A,{class:"devui-accordion-submenu devui-accordion-show-animate",style:"opacity: 1; overflow: hidden;",deepth:d.value+1,data:l.value.children||[],parent:l.value},null)])}}),A=e.defineComponent({name:"DAccordionList",inheritAttrs:!1,components:{DAccordionMenu:N},props:h({data:{type:Array,default:null},deepth:{type:Number,default:0},parent:{type:Object,default:null},innerListTemplate:Boolean},n),setup(a,{attrs:l,slots:d}){const{childrenKey:r,innerListTemplate:o,deepth:y}=e.toRefs(a);return()=>e.createVNode(e.Fragment,null,[!o.value&&e.createVNode("ul",e.mergeProps({class:"devui-accordion-list"},l),[a.data.map(f=>e.createVNode("li",{class:"devui-accordion-item",key:f.title},[r!==void 0&&e.createVNode(e.resolveComponent("d-accordion-menu"),e.mergeProps({item:f,deepth:a.deepth,parent:a.parent},n),null)]))]),o.value&&y.value!==0&&e.createVNode("div",null,[d.default?d.innerListTemplate():""])])}}),B="",p=e.defineComponent({name:"DAccordion",props:n,setup(a,{emit:l}){const{data:d,childrenKey:r,activeKey:o,openKey:y,accordionType:f,autoOpenActiveMenu:b,restrictOneOpen:D}=e.toRefs(a);let u;const m=(i,c="children",S=!1,M=!0)=>i.reduce((s,g)=>{const v=g[c];return v===void 0?M&&s.push(g):(S&&s.push(g),Array.isArray(v)&&s.push(...m(v,c,S))),s},[]),k=()=>{const i=m(d.value,r.value).filter(c=>c[o.value]).pop();i?u||C(i):u=void 0},C=i=>{u&&u[o.value]&&(u[o.value]=!1),i[o.value]=!0,u=i,l("activeItemChange",u)},V=()=>{m(d.value,r.value,!0,!1).forEach(i=>i[y.value]=void 0)};return e.onMounted(()=>{d.value&&k()}),e.watch(()=>b.value,(i,c)=>{console.log("cur, new",i,c),i&&c===!1&&V()}),()=>e.createVNode("div",{class:`devui-accordion-menu devui-scrollbar ${f.value==="normal"?"devui-accordion-menu-normal":""}`},[e.createVNode(A,e.mergeProps({data:d,deepth:0,parent:null},a),null)])}});p.install=function(a){a.component(p.name,p)};var O={title:"Accordion \u624B\u98CE\u7434",category:"\u5BFC\u822A",status:"10%",install(a){a.use(p)}};t.Accordion=p,t.default=O,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+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"});

package/accordion/style.css

@@ -1 +1 @@
-@charset "UTF-8";:host{display:block}.devui-accordion-menu-item,d-accordion-item,d-accordion-item-hreflink,d-accordion-item-routerlink,.devui-accordion-list{display:block}.devui-accordion-menu{display:block;background:var(--devui-base-bg, #ffffff);width:100%;overflow-y:auto;border-radius:var(--devui-border-radius, 2px);height:100%}.devui-accordion-menu.devui-accordion-menu-normal{box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-shadow, rgba(0, 0, 0, .2))}.devui-accordion-menu>.devui-accordion-list{padding:10px 0}.devui-accordion-menu .devui-over-flow-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-accordion-submenu{background:var(--devui-base-bg, #ffffff);width:100%}.devui-accordion-item-title{display:block;height:40px;width:100%;padding:0 10px 0 20px;font-weight:400;line-height:40px;color:var(--devui-text-weak, #575d6c);background:transparent;cursor:pointer}.devui-accordion-item-title.disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-accordion-item-title.disabled>a{color:var(--devui-disabled-text, #adb0b8)}.devui-accordion-item-title:not(.disabled):hover{background:var(--devui-list-item-hover-bg, #f2f5fc);color:var(--devui-list-item-hover-text, #526ecc)}.devui-accordion-item-title:not(.disabled).devui-router-active,.devui-accordion-item-title:not(.disabled).active:not(.open){color:var(--devui-brand-active, #526ecc);font-weight:bold}.devui-accordion-item-title:not(.disabled).devui-router-active>a,.devui-accordion-item-title:not(.disabled).active:not(.open)>a{color:var(--devui-brand-active, #526ecc)}.devui-accordion-item-title>a{text-decoration:none;display:block;width:100%;color:var(--devui-text-weak, #575d6c)}.devui-accordion-item-title>a:hover{color:inherit;text-decoration:none}d-accordion-item-hreflink.devui-accordion-item-title,d-accordion-item-routerlink.devui-accordion-item-title{padding:0}d-accordion-item-hreflink.devui-accordion-item-title>a,d-accordion-item-routerlink.devui-accordion-item-title>a{padding:0 10px 0 20px}.devui-accordion-menu-item>.devui-accordion-item-title{position:relative}.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon{display:inline-block;text-indent:0;pointer-events:none;position:absolute;right:10px;top:12px;width:16px;height:16px;line-height:16px;transition:transform ease-out .3s}.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon>svg{width:16px;height:16px}.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon>svg polygon{fill:var(--devui-text-weak, #575d6c)}.devui-accordion-menu-item>.devui-accordion-item-title:not(.open).active svg polygon{fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-accordion-menu-item>.devui-accordion-item-title:not(.open)>.devui-accordion-open-icon{transform:rotate(-180deg);transform-origin:center}.devui-accordion-menu-item>.devui-accordion-item-title.disabled>.devui-accordion-open-icon{color:var(--devui-disabled-text, #adb0b8)}.devui-accordion-menu-item>.devui-accordion-item-title.disabled>.devui-accordion-open-icon svg polygon{fill:var(--devui-disabled-text, #adb0b8)}.devui-accordion-menu-item>.devui-accordion-item-title{padding-right:30px}.devui-accordion-menu-item>.devui-accordion-item-title.active:not(.open){color:var(--devui-brand-active, #526ecc);background:transparent}.devui-accordion-list.devui-accordion-menu-hidden{display:none}.devui-accordion-item-title{position:relative}.devui-accordion-item-title .devui-accordion-splitter{position:absolute;display:inline-block;left:10px;width:2px;height:40px;background:var(--devui-dividing-line, #dfe1e6);vertical-align:middle}.devui-accordion-item-title .devui-accordion-splitter.devui-parent-list{background-color:transparent}.devui-accordion-item-title .devui-accordion-splitter:before{content:"";display:block;width:2px;height:18px;background:var(--devui-form-control-line-active, #5e7ce0);position:absolute;top:11px;left:0;opacity:0}.devui-accordion-item-title.devui-router-active:not(.open) .devui-accordion-splitter:before,.devui-accordion-item-title.active:not(.open) .devui-accordion-splitter:before{opacity:1}.devui-accordion-show-animate .devui-accordion-item-title{transition:font-weight var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-accordion-show-animate .devui-accordion-item-title .devui-accordion-splitter:before{transform:scaleY(0);transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-accordion-show-animate .devui-accordion-item-title.devui-router-active:not(.open) .devui-accordion-splitter:before,.devui-accordion-show-animate .devui-accordion-item-title.active:not(.open) .devui-accordion-splitter:before{transform:scaleY(1)}.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter{height:28px;top:12px}.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter:before{top:0}.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter{height:28px;top:0}.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter:before{top:initial;bottom:0}.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-item-title>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter{height:18px;top:11px}.devui-accordion-item>a{padding:0 10px 0 20px;color:var(--devui-text-weak, #575d6c);display:block;text-decoration:none;width:100%}.devui-accordion-item-title .tag-done{display:inline-block;height:18px;min-height:20px;padding:0 10px;margin-left:8px;line-height:18px;color:#fa9841;border:solid 1px #fa9841;background:var(--devui-base-bg, #ffffff);font-size:var(--devui-font-size, 12px);border-radius:var(--devui-border-radius, 2px);text-indent:0;cursor:default}
+@charset "UTF-8";.devui-accordion-menu ol,ul{margin:0!important;line-height:0!important;font-size:12px}:host{display:block}.devui-accordion-menu-item,d-accordion-item,d-accordion-item-hreflink,d-accordion-item-routerlink,.devui-accordion-list{display:block}.devui-accordion-menu{display:block;background:var(--devui-base-bg, #ffffff);width:100%;overflow-y:auto;border-radius:var(--devui-border-radius, 2px);height:100%}.devui-accordion-menu.devui-accordion-menu-normal{box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-shadow, rgba(0, 0, 0, .2))}.devui-accordion-menu>.devui-accordion-list{padding:10px 0}.devui-accordion-menu .devui-over-flow-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.devui-accordion-submenu{background:var(--devui-base-bg, #ffffff);width:100%}.devui-accordion-item-title{display:block;height:40px;width:100%;padding:0 10px 0 20px;font-weight:400;line-height:40px;color:var(--devui-text-weak, #575d6c);background:transparent;cursor:pointer}.devui-accordion-item-title.disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-accordion-item-title.disabled>a{color:var(--devui-disabled-text, #adb0b8)}.devui-accordion-item-title:not(.disabled):hover{background:var(--devui-list-item-hover-bg, #f2f5fc);color:var(--devui-list-item-hover-text, #526ecc)}.devui-accordion-item-title:not(.disabled).devui-router-active,.devui-accordion-item-title:not(.disabled).active:not(.open){color:var(--devui-brand-active, #526ecc);font-weight:bold}.devui-accordion-item-title:not(.disabled).devui-router-active>a,.devui-accordion-item-title:not(.disabled).active:not(.open)>a{color:var(--devui-brand-active, #526ecc)}.devui-accordion-item-title>a{text-decoration:none;display:block;width:100%;color:var(--devui-text-weak, #575d6c)}.devui-accordion-item-title>a:hover{color:inherit;text-decoration:none}d-accordion-item-hreflink.devui-accordion-item-title,d-accordion-item-routerlink.devui-accordion-item-title{padding:0}d-accordion-item-hreflink.devui-accordion-item-title>a,d-accordion-item-routerlink.devui-accordion-item-title>a{padding:0 10px 0 20px}.devui-accordion-menu-item>.devui-accordion-item-title{position:relative}.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon{display:inline-block;text-indent:0;pointer-events:none;position:absolute;right:10px;top:12px;width:16px;height:16px;line-height:16px;transition:transform ease-out .3s}.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon>svg{width:16px;height:16px}.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-open-icon>svg path{fill:var(--devui-text-weak, #575d6c)}.devui-accordion-menu-item>.devui-accordion-item-title:not(.open).active svg path{fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-accordion-menu-item>.devui-accordion-item-title.open>.devui-accordion-open-icon{transform:rotate(180deg);transform-origin:center}.devui-accordion-menu-item>.devui-accordion-item-title.disabled>.devui-accordion-open-icon{color:var(--devui-disabled-text, #adb0b8)}.devui-accordion-menu-item>.devui-accordion-item-title.disabled>.devui-accordion-open-icon svg path{fill:var(--devui-disabled-text, #adb0b8)}.devui-accordion-menu-item>.devui-accordion-item-title{padding-right:30px}.devui-accordion-menu-item>.devui-accordion-item-title.active:not(.open){color:var(--devui-brand-active, #526ecc);background:transparent}.devui-accordion-list .devui-accordion-menu-hidden{opacity:0;height:0px;overflow:hidden}.devui-accordion-item-title{position:relative}.devui-accordion-item-title .devui-accordion-splitter{position:absolute;display:inline-block;left:10px;width:2px;height:40px;background:var(--devui-dividing-line, #dfe1e6);vertical-align:middle}.devui-accordion-item-title .devui-accordion-splitter.devui-parent-list{background-color:transparent}.devui-accordion-item-title .devui-accordion-splitter:before{content:"";display:block;width:2px;height:18px;background:var(--devui-form-control-line-active, #5e7ce0);position:absolute;top:11px;left:0;opacity:0}.devui-accordion-item-title.devui-router-active:not(.open) .devui-accordion-splitter:before,.devui-accordion-item-title.active:not(.open) .devui-accordion-splitter:before{opacity:1}.devui-accordion-show-animate .devui-accordion-item-title{transition:font-weight var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-accordion-show-animate .devui-accordion-item-title .devui-accordion-splitter:before{transform:scaleY(0);transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-accordion-show-animate .devui-accordion-item-title.devui-router-active:not(.open) .devui-accordion-splitter:before,.devui-accordion-show-animate .devui-accordion-item-title.active:not(.open) .devui-accordion-splitter:before{transform:scaleY(1)}.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter{height:28px;top:12px}.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-item-title>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter:before{top:0}.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter{height:28px;top:0}.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-item-title>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter:before,.devui-accordion-list>.devui-accordion-item:last-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter:before{top:initial;bottom:0}.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-item-title>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>a>.devui-accordion-splitter,.devui-accordion-list>.devui-accordion-item:last-child:first-child>.devui-accordion-menu-item>.devui-accordion-item-title>.devui-accordion-splitter{height:18px;top:11px}.devui-accordion-item>a{padding:0 10px 0 20px;color:var(--devui-text-weak, #575d6c);display:block;text-decoration:none;width:100%}.devui-accordion-item-title .tag-done{display:inline-block;height:18px;min-height:20px;padding:0 10px;margin-left:8px;line-height:18px;color:#fa9841;border:solid 1px #fa9841;background:var(--devui-base-bg, #ffffff);font-size:var(--devui-font-size, 12px);border-radius:var(--devui-border-radius, 2px);text-indent:0;cursor:default}