bkui-vue 0.0.1-beta.142 → 0.0.1-beta.143

package/dist/index.esm.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key2, value) => {
   __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value);
   return value;
 };
-import { inject, createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Transition, provide, createTextVNode, withDirectives, vShow, isVNode, Fragment, toRefs, onUnmounted, Teleport, resolveDirective, customRef, onBeforeMount, toRef, vModelText, watchEffect, onUpdated, render as render$1, toRaw, withModifiers, TransitionGroup, shallowRef } from "vue";
+import { inject, createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Transition, provide, createTextVNode, isVNode, withDirectives, vShow, Fragment, toRefs, onUnmounted, Teleport, resolveDirective, customRef, onBeforeMount, toRef, vModelText, watchEffect, onUpdated, render as render$1, toRaw, withModifiers, TransitionGroup, shallowRef } from "vue";
 var reset = "";
 var alert = "";
 var affix = "";
@@ -8480,7 +8480,7 @@ const warn = (props, context) => {
 warn.displayName = "warn";
 warn.inheritAttrs = false;
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M603.52 348.8c0 26.496-22.357333333333333 48-49.919999999999995 48s-49.919999999999995-21.503999999999998-49.919999999999995-48c0-26.496 22.357333333333333-48 49.919999999999995-48s49.919999999999995 21.503999999999998 49.919999999999995 48z"}},{"type":"element","name":"path","attributes":{"d":"M357.11999999999995 348.8c0 26.496-22.357333333333333 48-49.919999999999995 48s-49.919999999999995-21.503999999999998-49.919999999999995-48c0-26.496 22.357333333333333-48 49.919999999999995-48s49.919999999999995 21.503999999999998 49.919999999999995 48z"}},{"type":"element","name":"path","attributes":{"d":"M693.12 604.16c0 15.914666666666665-13.184 28.8-29.439999999999998 28.8s-29.439999999999998-12.885333333333332-29.439999999999998-28.8c0-15.914666666666665 13.184-28.8 29.439999999999998-28.8s29.439999999999998 12.885333333333332 29.439999999999998 28.8z"}},{"type":"element","name":"path","attributes":{"d":"M951.68 832c43.775999999999996-42.410666666666664 71.29599999999999-101.41866666666665 72.32-166.86933333333332-4.608-109.696-77.35466666666666-201.0453333333333-176.72533333333334-233.30133333333333 5.674666666666667-12.117333333333331 10.154666666666666-26.282666666666664 10.154666666666666-41.471999999999994 0-4.522666666666666-0.38399999999999995-8.959999999999999-1.152-13.226666666666667-33.834666666666664-181.29066666666665-212.39466666666664-313.1306666666667-425.5146666666667-313.1306666666667-238.71999999999997 0-430.72 167.04-430.72 372.48 1.2799999999999998 107.56266666666666 50.56 203.30666666666664 127.40266666666668 267.05066666666664l-16.682666666666666 55.50933333333333c-2.1759999999999997 6.784-3.456 14.634666666666668-3.456 22.741333333333333 0 42.410666666666664 34.38933333333333 76.8 76.8 76.8 12.458666666666666 0 24.191999999999997-2.944 34.602666666666664-8.234666666666666l101.33333333333333-52.906666666666666c32.81066666666666 7.722666666666666 70.52799999999999 12.159999999999998 109.22666666666666 12.159999999999998 0.08533333333333333 0 0.17066666666666666 0 0.21333333333333332 0h28.16c13.098666666666666-0.7679999999999999 25.130666666666663-4.693333333333333 35.54133333333333-11.050666666666666 54.22933333333333 73.55733333333333 140.672 120.53333333333333 238.07999999999998 120.53333333333333 1.664 0 3.3706666666666667 0 5.034666666666666-0.042666666666666665 21.077333333333332-0.08533333333333333 41.855999999999995-2.1759999999999997 61.99466666666667-6.101333333333333l49.10933333333333 26.581333333333333c9.941333333333333 5.034666666666666 21.717333333333332 8.021333333333333 34.176 8.021333333333333 42.410666666666664 0 76.8-34.38933333333333 76.8-76.8 0-8.106666666666666-1.2799999999999998-15.957333333333333-3.584-23.296zM430.72 752.64c-0.17066666666666666 0-0.38399999999999995 0-0.5973333333333333 0-40.831999999999994 0-80.29866666666666-5.8453333333333335-117.58933333333331-16.72533333333333l-3.456 0.7253333333333334-131.2 67.19999999999999 35.199999999999996-113.27999999999999h-3.1999999999999997c-86.10133333333332-52.05333333333333-143.40266666666668-144.17066666666665-145.92-249.89866666666666 0-172.50133333333332 165.76-312.66133333333335 366.72-312.66133333333335 5.717333333333333-0.3413333333333333 12.415999999999999-0.512 19.157333333333334-0.512 163.32799999999997 0 300.58666666666664 111.40266666666668 340.0106666666667 262.4l-14.805333333333332 2.432c-183.04 0-327.03999999999996 112-327.03999999999996 285.44 0.512 26.709333333333333 5.1626666666666665 52.181333333333335 13.312 75.98933333333332zM872.96 812.8v0l21.759999999999998 67.84-81.28-40.959999999999994h-3.84c-21.119999999999997 6.101333333333333-45.397333333333336 9.6-70.48533333333333 9.6-0.17066666666666666 0-0.38399999999999995 0-0.5546666666666666 0-5.888 0.5973333333333333-12.757333333333332 0.9386666666666665-19.712 0.9386666666666665-107.09333333333332 0-195.2853333333333-80.93866666666666-206.71999999999997-184.95999999999998 10.367999999999999-106.96533333333333 99.072-189.1413333333333 206.976-189.1413333333333 5.973333333333334 0 11.861333333333334 0.256 17.706666666666663 0.7253333333333334 4.309333333333333-0.512 10.197333333333333-0.7253333333333334 16.170666666666666-0.7253333333333334 107.904 0 196.60799999999998 82.17599999999999 206.976 187.34933333333333-1.7066666666666666 63.82933333333333-35.79733333333333 118.44266666666665-86.18666666666667 148.90666666666667z"}},{"type":"element","name":"path","attributes":{"d":"M839.68 604.16c0 15.914666666666665-13.184 28.8-29.439999999999998 28.8s-29.439999999999998-12.885333333333332-29.439999999999998-28.8c0-15.914666666666665 13.184-28.8 29.439999999999998-28.8s29.439999999999998 12.885333333333332 29.439999999999998 28.8z"}}]}');
-var Component$G = defineComponent({
+var Component$F = defineComponent({
   name: "Alert",
   props: {
     theme: PropTypes.theme(["info", "success", "warning", "error"]).def("info"),
@@ -8537,8 +8537,8 @@ var Component$G = defineComponent({
     }, [this.closeText ? this.closeText : createVNode(closeLine, null, null)])])]);
   }
 });
-const BkAlert = withInstall(Component$G);
-var Component$F = defineComponent({
+const BkAlert = withInstall(Component$F);
+var Component$E = defineComponent({
   name: "AnimateNumber",
   props: {
     value: PropTypes.number.def(0),
@@ -8586,7 +8586,7 @@ var Component$F = defineComponent({
     return () => createVNode("span", null, [formatValue.value]);
   }
 });
-const BkAnimateNumber = withInstall(Component$F);
+const BkAnimateNumber = withInstall(Component$E);
 const on$1 = (() => {
   if (document.addEventListener) {
     return (element, event, handler) => {
@@ -8615,7 +8615,7 @@ const off$1 = (() => {
     }
   };
 })();
-var Component$E = defineComponent({
+var Component$D = defineComponent({
   name: "Affix",
   props: {
     offsetTop: PropTypes.number.def(0),
@@ -8740,8 +8740,8 @@ var Component$E = defineComponent({
     };
   }
 });
-const BkAffix = withInstall(Component$E);
-var Component$D = defineComponent({
+const BkAffix = withInstall(Component$D);
+var Component$C = defineComponent({
   name: "Backtop",
   props: {
     visibilityHeight: PropTypes.number.def(200),
@@ -8808,8 +8808,8 @@ var Component$D = defineComponent({
     });
   }
 });
-const BkBacktop = withInstall(Component$D);
-var Component$C = defineComponent({
+const BkBacktop = withInstall(Component$C);
+var Component$B = defineComponent({
   name: "Badge",
   props: {
     theme: PropTypes.string.def("primary"),
@@ -8885,8 +8885,8 @@ var Component$C = defineComponent({
     }, [(_f = (_e = (_d = this.$slots).icon) == null ? void 0 : _e.call(_d)) != null ? _f : number]) : ""]);
   }
 });
-const BkBadge = withInstall(Component$C);
-var Component$B = defineComponent({
+const BkBadge = withInstall(Component$B);
+var Component$A = defineComponent({
   name: "Breadcrumb",
   props: {
     extCls: PropTypes.string,
@@ -8985,7 +8985,7 @@ var BreadcrumbItem = defineComponent({
     };
   }
 });
-const BkBreadcrumb = withInstallProps(Component$B, { Item: BreadcrumbItem });
+const BkBreadcrumb = withInstallProps(Component$A, { Item: BreadcrumbItem });
 let BkLoadingMode;
 (function(BkLoadingMode2) {
   BkLoadingMode2["Default"] = "default";
@@ -9016,7 +9016,7 @@ const loadingTypes = {
   color: PropTypes.string.def("white"),
   zIndex: PropTypes.number.def(1)
 };
-var Component$A = defineComponent({
+var Component$z = defineComponent({
   name: "Loading",
   props: loadingTypes,
   setup(props, ctx) {
@@ -9072,7 +9072,7 @@ var Component$A = defineComponent({
     };
   }
 });
-const BkLoading = withInstallProps(Component$A, { setDefaultIndicator, BkLoadingMode, BkLoadingSize }, true);
+const BkLoading = withInstallProps(Component$z, { setDefaultIndicator, BkLoadingMode, BkLoadingSize }, true);
 const btnSizes = ["", "small", "large"];
 const buttonProps = {
   theme: PropTypes.theme().def(""),
@@ -9092,7 +9092,7 @@ const buttonProps = {
     default: "button"
   }
 };
-var Component$z = defineComponent({
+var Component$y = defineComponent({
   name: "Button",
   props: buttonProps,
   emits: ["click", "mouseover"],
@@ -9183,7 +9183,7 @@ var ButtonGroup = defineComponent({
     };
   }
 });
-const BkButton = withInstallProps(Component$z, { ButtonGroup });
+const BkButton = withInstallProps(Component$y, { ButtonGroup });
 const inputType = {
   type: PropTypes.string.def("text"),
   clearable: PropTypes.bool,
@@ -9246,7 +9246,7 @@ const inputEmitEventsType = {
   [EVENTS$2.COMPOSITIONUPDATE]: CompositionEventFunction,
   [EVENTS$2.COMPOSITIONEND]: CompositionEventFunction
 };
-var Component$y = defineComponent({
+var Component$x = defineComponent({
   name: "Input",
   inheritAttrs: false,
   props: inputType,
@@ -9462,8 +9462,8 @@ var Component$y = defineComponent({
     };
   }
 });
-const BkInput = withInstall(Component$y);
-var Component$x = defineComponent({
+const BkInput = withInstall(Component$x);
+var Component$w = defineComponent({
   name: "Card",
   props: {
     title: PropTypes.string,
@@ -9556,7 +9556,7 @@ var Component$x = defineComponent({
     }, [(_l = (_k = (_j = this.$slots).footer) == null ? void 0 : _k.call(_j)) != null ? _l : "Footer"]) : ""]) : ""]);
   }
 });
-const BkCard = withInstall(Component$x);
+const BkCard = withInstall(Component$w);
 const checkboxGroupKey = Symbol("CheckboxGroup");
 function useFocus$1() {
   const isFocus = ref(false);
@@ -9657,7 +9657,7 @@ const checkboxProps = {
   beforeChange: PropTypes.func,
   size: PropTypes.size().def("large")
 };
-var Component$w = defineComponent({
+var Component$v = defineComponent({
   name: "Checkbox",
   props: checkboxProps,
   emits: ["update:modelValue", "change"],
@@ -9761,7 +9761,33 @@ var BkCheckboxGroup = defineComponent({
     }, [(_a = this.$slots) == null ? void 0 : _a.default()]);
   }
 });
-const BkCheckbox = withInstallProps(Component$w, { Group: BkCheckboxGroup });
+const BkCheckbox = withInstallProps(Component$v, { Group: BkCheckboxGroup });
+const propsCollapse = {
+  list: PropTypes.arrayOf(PropTypes.any).def([]),
+  idFiled: PropTypes.string.def("$index"),
+  titleField: PropTypes.string.def("name"),
+  contentField: PropTypes.string.def("content"),
+  modelValue: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.number).def([]),
+    PropTypes.arrayOf(PropTypes.string).def([]),
+    PropTypes.number.def(-1)
+  ]),
+  accordion: PropTypes.bool.def(false)
+};
+const CollapsePanelEventProps = {
+  itemClick: {
+    type: Function,
+    default: () => ({})
+  }
+};
+const propsCollapsePanel = __spreadValues({
+  name: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(""),
+  title: PropTypes.any,
+  content: PropTypes.string,
+  disabled: PropTypes.bool.def(false),
+  renderDirective: PropTypes.commonType(["if", "show"], "render").def("show"),
+  modelValue: PropTypes.bool.def(false)
+}, CollapsePanelEventProps);
 const trimArr$1 = function(s2) {
   return (s2 || "").split(" ").filter((item) => !!item.trim());
 };
@@ -9841,23 +9867,111 @@ const collapseMotion$1 = (emit) => ({
     emit("after-leave");
   }
 });
-var Component$v = defineComponent({
+function _isSlot$8(s2) {
+  return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
+}
+var CollapsePanel = defineComponent({
+  name: "CollapsePanel",
+  props: propsCollapsePanel,
+  emits: ["change", "update:modelValue", "after-leave", "before-enter"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const localActiveItems = inject("localActiveItems");
+    const isActive = ref(props.modelValue);
+    watch(() => props.modelValue, (newVal) => {
+      isActive.value = newVal;
+    });
+    watch(() => localActiveItems, (newVal) => {
+      if (newVal == null ? void 0 : newVal.length) {
+        isActive.value = newVal.includes(props.name);
+      }
+    }, {
+      immediate: true
+    });
+    function handleItemClick(props2) {
+      const {
+        disabled,
+        name,
+        itemClick
+      } = props2;
+      if (disabled)
+        return;
+      const data2 = {
+        name
+      };
+      itemClick(data2);
+      isActive.value = !isActive.value;
+      emit("change", data2);
+      emit("update:modelValue", isActive.value);
+    }
+    const transition = ref(collapseMotion$1(emit));
+    const {
+      content
+    } = props;
+    function getContent() {
+      if (content) {
+        return content;
+      }
+      if (typeof slots.content === "function") {
+        return slots.content(h$1);
+      }
+      return slots.content;
+    }
+    function renderPanel() {
+      if (props.renderDirective === "if" && !isActive.value) {
+        return "";
+      }
+      return withDirectives(createVNode("div", {
+        "class": `bk-collapse-content ${isActive.value && "active" || ""}`
+      }, [getContent()]), [[vShow, isActive.value]]);
+    }
+    function renderHeader() {
+      if (slots.header) {
+        if (typeof slots.header === "function") {
+          return slots.header(h$1);
+        }
+        return slots.header;
+      }
+      let title;
+      if (slots.default) {
+        if (typeof slots.default === "function") {
+          title = slots.default(h$1);
+        } else {
+          title = slots.default;
+        }
+      } else {
+        title = props.title;
+      }
+      return createVNode(Fragment, null, [createVNode("span", {
+        "class": "bk-collapse-title"
+      }, [title]), createVNode(angleRight, {
+        "class": `bk-collapse-icon ${isActive.value && "rotate-icon" || ""}`
+      }, null)]);
+    }
+    return () => {
+      let _slot;
+      return createVNode("div", {
+        "class": `bk-collapse-item ${props.disabled ? "is-disabled" : ""} ${isActive.value ? "bk-collapse-item-active" : ""}`
+      }, [createVNode("div", {
+        "class": "bk-collapse-header",
+        "onClick": () => handleItemClick(props)
+      }, [renderHeader()]), createVNode(Transition, transition.value, _isSlot$8(_slot = renderPanel()) ? _slot : {
+        default: () => [_slot]
+      })]);
+    };
+  }
+});
+var Collapse = defineComponent({
   name: "Collapse",
-  props: {
-    list: PropTypes.arrayOf(PropTypes.any).def([]),
-    idFiled: PropTypes.string.def("$index"),
-    titleField: PropTypes.string.def("name"),
-    contentField: PropTypes.string.def("content"),
-    modelValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number).def([]), PropTypes.arrayOf(PropTypes.string).def([]), PropTypes.number.def(-1)]),
-    accordion: PropTypes.bool.def(false)
-  },
+  props: propsCollapse,
   emits: ["item-click", "update:modelValue", "after-leave", "before-enter"],
   setup(props, {
     emit,
     slots
   }) {
     const localActiveItems = ref([]);
-    const transition = ref(collapseMotion$1(emit));
     watch(() => [props.modelValue], () => {
       const value = props.modelValue;
       if (Array.isArray(value)) {
@@ -9870,66 +9984,74 @@ var Component$v = defineComponent({
     }, {
       immediate: true
     });
-    const collapseData = computed(() => (props.list || []).map((item, index) => {
-      if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
-        return {
-          $index: index,
-          name: item
-        };
-      }
-      return __spreadValues({
-        $index: index
-      }, item);
-    }));
+    provide("localActiveItems", localActiveItems.value);
     const handleItemClick = (item) => {
-      if (item.disabled)
-        return;
+      const {
+        name
+      } = item;
       if (props.accordion) {
-        const activeItemIndex = localActiveItems.value.findIndex((local) => local === item[props.idFiled]);
+        const activeItemIndex = localActiveItems.value.findIndex((local) => local === name);
         if (activeItemIndex >= 0) {
           localActiveItems.value.splice(activeItemIndex, 1);
         } else {
-          localActiveItems.value = [item[props.idFiled]];
+          localActiveItems.value = [name];
         }
       } else {
-        const activeItemIndex = localActiveItems.value.findIndex((local) => local === item[props.idFiled]);
+        const activeItemIndex = localActiveItems.value.findIndex((local) => local === name);
         if (activeItemIndex >= 0) {
           localActiveItems.value.splice(activeItemIndex, 1);
         } else {
-          localActiveItems.value.push(item[props.idFiled]);
+          localActiveItems.value.push(name);
         }
       }
       emit("item-click", item);
       emit("update:modelValue", localActiveItems.value);
     };
-    const isItemActive = (item) => localActiveItems.value.includes(item[props.idFiled]);
-    const renderItems = () => collapseData.value.map((item) => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": `bk-collapse-item ${item.disabled ? "is-disabled" : ""} ${isItemActive(item) ? "bk-collapse-item-active" : ""}`
-      }, [createVNode("div", {
-        "class": "bk-collapse-header",
-        "onClick": () => handleItemClick(item)
-      }, [createVNode("span", {
-        "class": "bk-collapse-title"
-      }, [(_b = (_a = slots.default) == null ? void 0 : _a.call(slots, item)) != null ? _b : item[props.titleField]]), createVNode(angleRight, {
-        "class": `bk-collapse-icon ${isItemActive(item) && "rotate-icon" || ""}`
-      }, null)]), createVNode(Transition, transition.value, {
-        default: () => {
-          var _a2, _b2;
-          return [withDirectives(createVNode("div", {
-            "class": `bk-collapse-content ${isItemActive(item) && "active" || ""}`
-          }, [(_b2 = (_a2 = slots.content) == null ? void 0 : _a2.call(slots, item)) != null ? _b2 : item[props.contentField]]), [[vShow, isItemActive(item)]])];
+    const className = "bk-collapse-wrapper";
+    if (!Array.isArray(props.list) || !props.list.length) {
+      return () => {
+        var _a;
+        return createVNode("div", {
+          "class": className
+        }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      };
+    }
+    const collapseData = computed(() => (props.list || []).map((item, index) => {
+      if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
+        return {
+          $index: index,
+          name: item
+        };
+      }
+      return __spreadValues({
+        $index: index
+      }, item);
+    }));
+    const renderItems = () => collapseData.value.map((item, index) => {
+      const name = item[props.idFiled] || index;
+      let title = item[props.titleField];
+      if (slots.title) {
+        if (typeof slots.title === "function") {
+          title = slots.title(item);
+        } else {
+          title = slots.title;
         }
-      })]);
+      }
+      return createVNode(CollapsePanel, {
+        "key": index,
+        "item-click": handleItemClick,
+        "disabled": item.disabled,
+        "name": name,
+        "title": title,
+        "content": item[props.contentField]
+      }, null);
     });
-    const className = "bk-collapse-wrapper";
     return () => createVNode("div", {
       "class": className
     }, [renderItems()]);
   }
 });
-const BkCollapse = withInstall(Component$v);
+const BkCollapse = withInstallProps(Collapse, { CollapsePanel });
 const propsMixin$1 = {
   isShow: PropTypes.bool.def(false),
   width: PropTypes.oneOfType([String, Number]).def("50%"),