ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-collapse/collapse.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"collapse.mjs","sources":["../../../../../src/components/ivue-collapse/collapse.vue"],"sourcesContent":["<template>\r\n  <div :class=\"classes\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  reactive,\r\n  computed,\r\n  provide,\r\n  onMounted,\r\n  watch,\r\n} from 'vue';\r\n\r\n// type\r\nimport { Props, Data, CascaderContextKey } from './types/collapse';\r\nimport type { PanelInstance } from './types/panel';\r\n\r\nconst prefixCls = 'ivue-collapse';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: ['update:modelValue', 'on-change'],\r\n  props: {\r\n    /**\r\n     * 当前激活的面板的 name\r\n     *\r\n     * @type {Array, String}\r\n     */\r\n    modelValue: {\r\n      type: [Array, String],\r\n    },\r\n    /**\r\n     * 是否开启简洁模式\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    simple: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否开启手风琴效果\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    accordion: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n  },\r\n  setup(props: Props, { emit }) {\r\n    // 插入扩展\r\n    const pushExpandable = (expandableListItem: PanelInstance) => {\r\n      const expandableListItems = data.childrenList.expandable;\r\n\r\n      // 寻找是否已经有了选项\r\n      const findItem = expandableListItems.find((target: PanelInstance) => {\r\n        return target.uid === expandableListItem?.uid;\r\n      });\r\n\r\n      if (!findItem) {\r\n        data.childrenList.expandable = expandableListItems.concat([\r\n          expandableListItem,\r\n        ]);\r\n      }\r\n    };\r\n\r\n    // 删除扩展\r\n    const removeExpandable = (expandableListItem: PanelInstance) => {\r\n      const expandableListItems = data.childrenList.expandable;\r\n\r\n      // 寻找是否已经有了选项\r\n      const findItem = expandableListItems.find((target: PanelInstance) => {\r\n        return target.uid === expandableListItem.uid;\r\n      });\r\n\r\n      if (findItem) {\r\n        data.childrenList.expandable = expandableListItems.filter(\r\n          (target: PanelInstance) => target.uid !== expandableListItem.uid\r\n        );\r\n      }\r\n    };\r\n\r\n    // 子项点击切换\r\n    const toggle = (obj: { name: string; isActive: boolean }) => {\r\n      const name = obj.name.toString();\r\n\r\n      let newActiveKey = [];\r\n\r\n      // 是否开启手风琴效果\r\n      const accordion = props.accordion;\r\n\r\n      // 手风琴效果\r\n      if (accordion) {\r\n        if (!obj.isActive) {\r\n          newActiveKey.push(name);\r\n        }\r\n      }\r\n      // 普通效果\r\n      else {\r\n        // 获取当前需要激活的面板\r\n        const activeKey = getActiveKey();\r\n\r\n        // 面板的 index\r\n        const nameIndex = activeKey.indexOf(name);\r\n\r\n        // 是否已经激活\r\n        if (obj.isActive) {\r\n          if (nameIndex > -1) {\r\n            activeKey.splice(nameIndex, 1);\r\n          }\r\n        } else {\r\n          if (nameIndex < 0) {\r\n            activeKey.push(name);\r\n          }\r\n        }\r\n\r\n        newActiveKey = activeKey;\r\n      }\r\n\r\n      // 重新设置当前激活的面板\r\n      data.currentValue = newActiveKey;\r\n\r\n      // 设置激活\r\n      setActive();\r\n\r\n      // 设置 v-model\r\n      emit('update:modelValue', newActiveKey);\r\n\r\n      // 切换面板是触发，返回当前展开的面板的 key，格式为数组\r\n      emit('on-change', newActiveKey);\r\n    };\r\n\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 当前值\r\n       *\r\n       * @type {Array, String}\r\n       */\r\n      currentValue: props.modelValue,\r\n      /**\r\n       * 子级\r\n       *\r\n       * @type {Array}\r\n       */\r\n      childrenList: {\r\n        /**\r\n         * 扩展列表\r\n         *\r\n         * @type {Array}\r\n         */\r\n        expandable: [],\r\n        // 插入扩展\r\n        pushExpandable: pushExpandable,\r\n        // 删除扩展\r\n        removeExpandable: removeExpandable,\r\n        // 切换\r\n        toggle: toggle,\r\n      },\r\n    });\r\n\r\n    // computed\r\n\r\n    // 外层样式\r\n    const classes = computed(() => {\r\n      return [\r\n        `${prefixCls}`,\r\n        {\r\n          [`${prefixCls}-simple`]: props.simple,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // methods\r\n\r\n    // 设置激活的面板\r\n    const setActive = () => {\r\n      const activeKey = getActiveKey();\r\n\r\n      const childrenList = data.childrenList.expandable;\r\n\r\n      childrenList.forEach((vm: PanelInstance, index: number) => {\r\n        const { proxy } = vm;\r\n\r\n        // 子项名称\r\n        const name = proxy.name || index.toString();\r\n\r\n        proxy.data.isActive = activeKey.indexOf(name) > -1;\r\n        proxy.data.index = index;\r\n      });\r\n    };\r\n\r\n    // 获取激活的key\r\n    const getActiveKey = () => {\r\n      // 获取初始化需要激活的面板\r\n      let activeKey = data.currentValue || [];\r\n\r\n      // 是否开启手风琴效果\r\n      const accordion = props.accordion;\r\n\r\n      // 判断是否是数组\r\n      if (!Array.isArray(activeKey)) {\r\n        activeKey = [activeKey];\r\n      }\r\n\r\n      // 手风琴效果\r\n      if (accordion && activeKey.length > 1) {\r\n        activeKey = [activeKey[0]];\r\n      }\r\n\r\n      for (let i = 0; i < activeKey.length; i++) {\r\n        // 把value字符串化\r\n        activeKey[i] = activeKey[i].toString();\r\n      }\r\n\r\n      return activeKey;\r\n    };\r\n\r\n    // watch\r\n\r\n    // 监听 v-modal\r\n    watch(\r\n      () => props.modelValue,\r\n      (value) => {\r\n        data.currentValue = value;\r\n      }\r\n    );\r\n\r\n    // 监听当前值\r\n    watch(\r\n      () => data.currentValue,\r\n      () => {\r\n        setActive();\r\n      }\r\n    );\r\n\r\n    // provide\r\n    provide(CascaderContextKey, data.childrenList);\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      setActive();\r\n    });\r\n\r\n    return {\r\n      data,\r\n\r\n      // computed\r\n      classes,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_normalizeClass"],"mappings":";;;;AACa,SAAA,YAAA,IAAE,EAAA,MAAA,EAAO,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;;IAClB,KAAA,EAAaA,cAAA,CAAA,IAAA,CAAA,OAAA,CAAA;AAAA,GAAA,EAAA;AAAA;;;;;;;"}