song-ui-u/es/components/collapse/src/collapse.mjs

vue3 + js的PC前端组件库

import { defineComponent, ref, watch, provide, createVNode } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import 'song-ui-pro-icon';
import '../../../hook/use-zindex/index.mjs';
import { COLLAPSE_KEY } from '../constants.mjs';

var collapse = /* @__PURE__ */ defineComponent({
  name: "x-collapse",
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    accordion: {
      type: Boolean,
      default: false
    }
  },
  emits: ["update:modelValue", "change"],
  setup(props, {
    slots,
    emit
  }) {
    const ns = useNamespace("collapse");
    const activeNames = ref(props.modelValue || []);
    const collapseItems = ref([]);
    watch(() => props.modelValue, (val) => {
      if (val !== activeNames.value) {
        activeNames.value = val;
      }
    });
    const setCollapseItems = (collapseItem) => {
      collapseItems.value.push(collapseItem);
    };
    const handleItemClick = (name) => {
      if (props.accordion) {
        activeNames.value = activeNames.value[0] === name ? [] : [name];
      } else {
        const index = activeNames.value.indexOf(name);
        if (index > -1) {
          activeNames.value.splice(index, 1);
        } else {
          activeNames.value.push(name);
        }
      }
      emit("update:modelValue", activeNames.value);
      emit("change", activeNames.value);
    };
    const isItemActive = (name) => {
      return activeNames.value.includes(name);
    };
    provide(COLLAPSE_KEY, {
      setCollapseItems,
      handleItemClick,
      isItemActive,
      props,
      collapseItems
    });
    return () => createVNode("div", {
      "class": ns.b()
    }, [slots.default?.()]);
  }
});

export { collapse as default };
//# sourceMappingURL=collapse.mjs.map