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;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, provide, reactive, toRefs, createVNode, shallowRef, inject, computed, onMounted, Transition } from "vue";
import "clipboard";
const SELECT_TOKEN = Symbol("dCollapse");
const collapseProps = {
  modelValue: {
    type: [String, Number, Array],
    default: "",
    required: true
  },
  accordion: {
    type: Boolean,
    default: false
  }
};
const collapseItemProps = {
  name: {
    type: [String, Number],
    default: "",
    required: true
  },
  title: {
    type: String,
    default: ""
  },
  disabled: {
    type: Boolean,
    default: false
  }
};
function createBem(namespace, element, modifier) {
  let cls = namespace;
  if (element) {
    cls += `__${element}`;
  }
  if (modifier) {
    cls += `--${modifier}`;
  }
  return cls;
}
function useNamespace(block, needDot = false) {
  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
  const b = () => createBem(namespace);
  const e = (element) => element ? createBem(namespace, element) : "";
  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
  return {
    b,
    e,
    m,
    em
  };
}
var collapse = "";
var Collapse = defineComponent({
  name: "DCollapse",
  props: collapseProps,
  emits: ["change", "update:modelValue"],
  setup(props, ctx) {
    const ns = useNamespace("collapse");
    const scrollbarNs = useNamespace("scrollbar");
    const getLists = (data) => {
      if (!data && data !== 0) {
        return [];
      }
      return Array.isArray(data) ? data : [data];
    };
    const collapseItemClick = (name) => {
      const activeLists = [...getLists(props.modelValue)];
      const itemIndex = activeLists.indexOf(name);
      if (props.accordion) {
        let activeName = name;
        if ((activeLists[0] || activeLists[0] === 0) && activeLists[0] === name) {
          activeName = "";
        }
        ctx.emit("update:modelValue", activeName);
        ctx.emit("change", activeName);
      } else {
        if (itemIndex > -1) {
          activeLists.splice(itemIndex, 1);
        } else {
          activeLists.push(name);
        }
        ctx.emit("update:modelValue", activeLists);
        ctx.emit("change", activeLists);
      }
    };
    provide(SELECT_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
      collapseItemClick
    })));
    return () => {
      var _a, _b;
      return createVNode("div", {
        "class": [ns.b(), scrollbarNs.b()]
      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
    };
  }
});
function SelectArrowIcon() {
  return createVNode("svg", {
    "width": "16px",
    "height": "16px",
    "viewBox": "0 0 16 16",
    "version": "1.1",
    "xmlns": "http://www.w3.org/2000/svg"
  }, [createVNode("g", {
    "stroke": "none",
    "stroke-width": "1",
    "fill": "none",
    "fill-rule": "evenodd"
  }, [createVNode("path", {
    "d": `M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 
          L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 
          C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 
          C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 
          C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z`
  }, null)])]);
}
var CollapseItem = defineComponent({
  name: "DCollapseItem",
  props: collapseItemProps,
  setup(props, ctx) {
    const ns = useNamespace("collapse");
    const transitionNs = useNamespace("collapse-transition");
    const collapseContent = shallowRef();
    const collapse2 = inject(SELECT_TOKEN, null);
    const isOpen = computed(() => {
      if (props.disabled) {
        return false;
      }
      if (Array.isArray(collapse2 == null ? void 0 : collapse2.modelValue)) {
        return Boolean(collapse2 == null ? void 0 : collapse2.modelValue.length) && (collapse2 == null ? void 0 : collapse2.modelValue.includes(props.name));
      } else {
        return Boolean(collapse2 == null ? void 0 : collapse2.modelValue) && (collapse2 == null ? void 0 : collapse2.modelValue) === props.name;
      }
    });
    const handlerTitleClick = (e) => {
      e.preventDefault();
      if (!props.disabled) {
        collapse2 == null ? void 0 : collapse2.collapseItemClick(props.name);
      }
    };
    onMounted(() => {
      if (collapseContent.value) {
        const dom = collapseContent.value;
        if (isOpen.value) {
          dom.style.height = `${dom.offsetHeight}px`;
        }
      }
    });
    const enter = (element) => {
      const el = element;
      el.style.height = "";
      const height = el.offsetHeight;
      el.style.height = "0px";
      el.offsetHeight;
      el.style.height = `${height}px`;
    };
    const leave = (element) => {
      const el = element;
      el.style.height = "0px";
    };
    return () => {
      return createVNode("div", {
        "class": ns.e("item")
      }, [createVNode("div", {
        "class": [ns.e("item-title"), ns.m("overflow-ellipsis"), isOpen.value && ns.m("open"), props.disabled && ns.em("item", "disabled")],
        "onClick": handlerTitleClick
      }, [ctx.slots.title ? ctx.slots.title() : props.title, createVNode("span", {
        "class": ns.e("open-icon")
      }, [createVNode(SelectArrowIcon, null, null)])]), createVNode(Transition, {
        "name": transitionNs.b(),
        "onEnter": enter,
        "onLeave": leave
      }, {
        default: () => {
          var _a, _b;
          return [isOpen.value && createVNode("div", {
            "ref": collapseContent,
            "class": ns.e("item-content")
          }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
        }
      })]);
    };
  }
});
var index = {
  title: "Collapse \u6298\u53E0\u9762\u677F",
  category: "\u6570\u636E\u5C55\u793A",
  status: "100%",
  install(app) {
    app.component(Collapse.name, Collapse);
    app.component(CollapseItem.name, CollapseItem);
  }
};
export { Collapse, CollapseItem, collapseItemProps, collapseProps, index as default };
