{"version":3,"file":"collapse.mjs","sources":["../../../../../../packages/components/collapse/src/collapse.vue"],"sourcesContent":["<template>\r\n  <div\r\n    class=\"sg-collapse\"\r\n    :class=\"{ 'is-bordered': border}\"\r\n    :style=\"style\"\r\n  >\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, ref, watch, provide, computed } from 'vue'\r\nimport { UPDATE_MODEL_EVENT } from '@sgui-plus/utils/constants'\r\nimport { isNumber } from '@sgui-plus/utils/util'\r\nimport { CollapseContextKey } from './collapse.type'\r\nimport type { PropType, CSSProperties } from 'vue'\r\nimport type { CollapseProvider } from './collapse.type'\r\n\r\nexport default defineComponent({\r\n  name: 'SgCollapse',\r\n  props: {\r\n    accordion: Boolean,\r\n    modelValue: {\r\n      type: [Array, String, Number] as PropType<\r\n        string | number | Array<string | number>\r\n      >,\r\n      default: () => [],\r\n    },\r\n    width: [String, Number],\r\n    border: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    arrowPosition: {\r\n      type: String,\r\n      default: 'right'\r\n    },\r\n    lineStyle: {\r\n      type: [Boolean, Object],\r\n      default: true\r\n    },\r\n    headerStyle: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    contentStyle: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n  },\r\n  emits: [UPDATE_MODEL_EVENT, 'on-change'],\r\n  setup(props, { emit }) {\r\n    const activeNames = ref([].concat(props.modelValue as never[]))\r\n\r\n    const setActiveNames = (_activeNames) => {\r\n      activeNames.value = [].concat(_activeNames)\r\n      const value = props.accordion ? activeNames.value[0] : activeNames.value\r\n      emit(UPDATE_MODEL_EVENT, value)\r\n      emit('on-change', value)\r\n    }\r\n\r\n    const handleItemClick = (name: string | number) => {\r\n      if (props.accordion) {\r\n        setActiveNames(\r\n          (activeNames.value[0] || activeNames.value[0] === 0) &&\r\n            activeNames.value[0] === name\r\n            ? ''\r\n            : name\r\n        )\r\n      } else {\r\n        const _activeNames = activeNames.value.slice(0)\r\n        const index = _activeNames.indexOf(name as never)\r\n\r\n        if (index > -1) {\r\n          _activeNames.splice(index, 1)\r\n        } else {\r\n          _activeNames.push(name as never)\r\n        }\r\n        setActiveNames(_activeNames)\r\n      }\r\n    }\r\n\r\n    const normalizeWidth = computed(() =>\r\n      isNumber(props.width) ? `${props.width}px` : props.width\r\n    )\r\n\r\n    const style = computed<CSSProperties>(() => {\r\n      const style: CSSProperties = {}\r\n      const varPrefix = `--sg-collapse`\r\n\r\n      if (props.width) {\r\n        style[`${varPrefix}-width`] = normalizeWidth.value\r\n      }\r\n\r\n      return style\r\n    })\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      () => {\r\n        activeNames.value = [].concat(props.modelValue as never[])\r\n      },\r\n      {\r\n        deep: true,\r\n      }\r\n    )\r\n\r\n    provide<CollapseProvider>(CollapseContextKey, {\r\n      activeNames,\r\n      handleItemClick,\r\n      lineStyle: props.lineStyle,\r\n      headerStyle: props.headerStyle,\r\n      contentStyle: props.contentStyle,\r\n      arrowPosition: props.arrowPosition\r\n    })\r\n\r\n    return {\r\n      activeNames,\r\n      setActiveNames,\r\n      handleItemClick,\r\n      style\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle"],"mappings":";;;;AAES,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAC,QAAa,MACM,EAAA,KAAA,EAAA,QAAA,EAAA;SACnBA,SAAO,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,aAAA,EAAA,EAAA,aAAA,EAAA,IAAA,CAAA,MAAA,EAAA,CAAA,CAAA;IAEb,KAAa,EAAAC,cAAA,CAAA,IAAA,CAAA,KAAA,CAAA;AAAA,GAAA,EAAA;;;;;;;;"}