@extclp/vexip-ui/es/components/collapse/collapse.vue2.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"collapse.vue2.mjs","sources":["../../../components/collapse/collapse.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRef,\n  watch,\n  watchEffect\n} from 'vue'\n\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\nimport { useModifier } from '@vexip-ui/hooks'\nimport { debounceMinor, isNull, removeArrayItem } from '@vexip-ui/utils'\nimport { collapseProps } from './props'\nimport { COLLAPSE_STATE } from './symbol'\n\nimport type { CollapseArrowType, PanelState } from './symbol'\n\ndefineOptions({ name: 'Collapse' })\n\nconst _props = defineProps(collapseProps)\nconst props = useProps('collapse', _props, {\n  expanded: {\n    default: null,\n    static: true\n  },\n  card: false,\n  accordion: false,\n  arrowType: {\n    default: 'right' as CollapseArrowType,\n    validator: (value: CollapseArrowType) => ['right', 'left', 'none'].includes(value)\n  },\n  ghost: false\n})\n\nconst emit = defineEmits(['update:expanded'])\n\nconst nh = useNameHelper('collapse')\nconst panelStates = reactive(new Set<PanelState>())\nconst currentExpanded = ref<(string | number)[]>([])\n\nconst { target: wrapper } = useModifier({\n  passive: false,\n  onKeyDown: (event, modifier) => {\n    if (modifier.left || modifier.right) {\n      if (!wrapper.value || ![...panelStates].find(({ tab }) => tab === event.target)) return\n\n      const tabs = Array.from(wrapper.value.querySelectorAll(nh.cbe('header'))) as HTMLElement[]\n\n      if (tabs.length < 1) return\n\n      event.preventDefault()\n      event.stopPropagation()\n\n      const index = document.activeElement\n        ? tabs.findIndex(panel => panel === document.activeElement)\n        : -1\n\n      if (~index) {\n        const target = tabs[(index + (modifier.left ? -1 : 1) + tabs.length) % tabs.length]\n\n        target?.focus()\n      }\n    } else if (modifier.escape) {\n      event.preventDefault()\n      event.stopPropagation()\n\n      clearExpanded()\n    }\n  }\n})\n\nconst className = computed(() => {\n  return [\n    nh.b(),\n    nh.bs('vars'),\n    nh.bm(`arrow-${props.arrowType}`),\n    {\n      [nh.bm('inherit')]: props.inherit,\n      [nh.bm('card')]: props.card,\n      [nh.bm('ghost')]: !props.card && props.ghost\n    }\n  ]\n})\n\nconst refreshLabels = debounceMinor(() => {\n  Array.from(panelStates.values()).forEach((item, index) => {\n    if (isNull(item.label)) {\n      item.label = index + 1\n    }\n  })\n\n  if (panelStates.size) {\n    for (const panel of panelStates) {\n      if (currentExpanded.value.includes(panel.label)) {\n        panel.expanded = true\n      } else if (panel.expanded) {\n        expandPanel(panel.label, true)\n      }\n    }\n  }\n})\n\nprovide(\n  COLLAPSE_STATE,\n  reactive({\n    arrowType: toRef(props, 'arrowType'),\n    registerPanel,\n    unregisterPanel,\n    expandPanel,\n    refreshLabels\n  })\n)\n\nwatchEffect(() => {\n  const rawExpanded = props.expanded\n  const expanded =\n    props.accordion && Array.isArray(rawExpanded)\n      ? rawExpanded[0]\n      : rawExpanded || rawExpanded === 0\n        ? rawExpanded\n        : []\n\n  currentExpanded.value = Array.isArray(expanded) ? Array.from(expanded) : [expanded]\n})\n\nonMounted(() => {\n  nextTick(updateItemExpanded)\n\n  watch(currentExpanded, (prev, next) => {\n    if (!isSameExpanded(prev, next)) {\n      updateItemExpanded()\n    }\n  })\n})\n\ndefineExpose({ currentExpanded, wrapper })\n\nfunction registerPanel(panel: PanelState) {\n  panelStates.add(panel)\n\n  refreshLabels()\n}\n\nfunction unregisterPanel(panel: PanelState) {\n  panelStates.delete(panel)\n  expandPanel(panel.label, false)\n  refreshLabels()\n}\n\nfunction isSameExpanded(prev: (string | number)[], next: (string | number)[]) {\n  const prevSet = new Set(prev)\n\n  if (prevSet.size !== new Set(next).size) return false\n\n  return next.every(item => prevSet.has(item))\n}\n\nfunction expandPanel(label: string | number, expanded: boolean) {\n  if (!label && label !== 0) return\n\n  if (props.accordion) {\n    currentExpanded.value = expanded ? [label] : []\n  } else {\n    if (expanded) {\n      currentExpanded.value.push(label)\n    } else {\n      removeArrayItem(currentExpanded.value, label)\n    }\n  }\n\n  emitChangeEvent()\n  updateItemExpanded()\n}\n\nfunction clearExpanded() {\n  if (!currentExpanded.value.length) return\n\n  currentExpanded.value = []\n\n  emitChangeEvent()\n  updateItemExpanded()\n}\n\nfunction emitChangeEvent() {\n  emit('update:expanded', currentExpanded.value)\n  emitEvent(props.onChange, currentExpanded.value)\n}\n\nfunction updateItemExpanded() {\n  panelStates.forEach(panel => {\n    panel.setExpanded(currentExpanded.value.includes(panel.label))\n  })\n}\n</script>\n\n<template>\n  <div\n    ref=\"wrapper\"\n    :class=\"className\"\n    role=\"tablist\"\n    tabindex=\"-1\"\n  >\n    <slot></slot>\n  </div>\n</template>\n"],"names":["props","useProps","__props","value","emit","__emit","nh","useNameHelper","panelStates","reactive","currentExpanded","ref","wrapper","useModifier","event","modifier","tab","tabs","index","panel","target","clearExpanded","className","computed","refreshLabels","debounceMinor","item","isNull","expandPanel","provide","COLLAPSE_STATE","toRef","registerPanel","unregisterPanel","watchEffect","rawExpanded","expanded","onMounted","nextTick","updateItemExpanded","watch","prev","next","isSameExpanded","__expose","prevSet","label","removeArrayItem","emitChangeEvent","emitEvent"],"mappings":"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"}