@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\">\r\nimport {\r\n  computed,\r\n  nextTick,\r\n  onMounted,\r\n  provide,\r\n  reactive,\r\n  ref,\r\n  toRef,\r\n  watch,\r\n  watchEffect,\r\n} from 'vue'\r\n\r\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\r\nimport { useModifier } from '@vexip-ui/hooks'\r\nimport { debounceMinor, isNull, removeArrayItem } from '@vexip-ui/utils'\r\nimport { collapseProps } from './props'\r\nimport { COLLAPSE_STATE } from './symbol'\r\n\r\nimport type { CollapseArrowType, PanelState } from './symbol'\r\n\r\ndefineOptions({ name: 'Collapse' })\r\n\r\nconst _props = defineProps(collapseProps)\r\nconst props = useProps('collapse', _props, {\r\n  expanded: {\r\n    default: null,\r\n    static: true,\r\n  },\r\n  card: false,\r\n  accordion: false,\r\n  arrowType: {\r\n    default: 'right' as CollapseArrowType,\r\n    validator: (value: CollapseArrowType) => ['right', 'left', 'none'].includes(value),\r\n  },\r\n  ghost: false,\r\n})\r\n\r\nconst emit = defineEmits(['update:expanded'])\r\n\r\nconst nh = useNameHelper('collapse')\r\nconst panelStates = reactive(new Set<PanelState>())\r\nconst currentExpanded = ref<(string | number)[]>([])\r\n\r\nconst { target: wrapper } = useModifier({\r\n  passive: false,\r\n  onKeyDown: (event, modifier) => {\r\n    if (modifier.left || modifier.right) {\r\n      if (!wrapper.value || ![...panelStates].find(({ tab }) => tab === event.target)) return\r\n\r\n      const tabs = Array.from(wrapper.value.querySelectorAll(nh.cbe('header'))) as HTMLElement[]\r\n\r\n      if (tabs.length < 1) return\r\n\r\n      event.preventDefault()\r\n      event.stopPropagation()\r\n\r\n      const index = document.activeElement\r\n        ? tabs.findIndex(panel => panel === document.activeElement)\r\n        : -1\r\n\r\n      if (~index) {\r\n        const target = tabs[(index + (modifier.left ? -1 : 1) + tabs.length) % tabs.length]\r\n\r\n        target?.focus()\r\n      }\r\n    } else if (modifier.escape) {\r\n      event.preventDefault()\r\n      event.stopPropagation()\r\n\r\n      clearExpanded()\r\n    }\r\n  },\r\n})\r\n\r\nconst className = computed(() => {\r\n  return [\r\n    nh.b(),\r\n    nh.bs('vars'),\r\n    nh.bm(`arrow-${props.arrowType}`),\r\n    {\r\n      [nh.bm('inherit')]: props.inherit,\r\n      [nh.bm('card')]: props.card,\r\n      [nh.bm('ghost')]: !props.card && props.ghost,\r\n    },\r\n  ]\r\n})\r\n\r\nconst refreshLabels = debounceMinor(() => {\r\n  Array.from(panelStates.values()).forEach((item, index) => {\r\n    if (isNull(item.label)) {\r\n      item.label = index + 1\r\n    }\r\n  })\r\n\r\n  if (panelStates.size) {\r\n    for (const panel of panelStates) {\r\n      if (currentExpanded.value.includes(panel.label)) {\r\n        panel.expanded = true\r\n      } else if (panel.expanded) {\r\n        expandPanel(panel.label, true)\r\n      }\r\n    }\r\n  }\r\n})\r\n\r\nprovide(\r\n  COLLAPSE_STATE,\r\n  reactive({\r\n    arrowType: toRef(props, 'arrowType'),\r\n    registerPanel,\r\n    unregisterPanel,\r\n    expandPanel,\r\n    refreshLabels,\r\n  }),\r\n)\r\n\r\nwatchEffect(() => {\r\n  const rawExpanded = props.expanded\r\n  const expanded =\r\n    props.accordion && Array.isArray(rawExpanded)\r\n      ? rawExpanded[0]\r\n      : rawExpanded || rawExpanded === 0\r\n        ? rawExpanded\r\n        : []\r\n\r\n  currentExpanded.value = Array.isArray(expanded) ? Array.from(expanded) : [expanded]\r\n})\r\n\r\nonMounted(() => {\r\n  nextTick(updateItemExpanded)\r\n\r\n  watch(currentExpanded, (prev, next) => {\r\n    if (!isSameExpanded(prev, next)) {\r\n      updateItemExpanded()\r\n    }\r\n  })\r\n})\r\n\r\ndefineExpose({ currentExpanded, wrapper })\r\n\r\nfunction registerPanel(panel: PanelState) {\r\n  panelStates.add(panel)\r\n\r\n  refreshLabels()\r\n}\r\n\r\nfunction unregisterPanel(panel: PanelState) {\r\n  panelStates.delete(panel)\r\n  expandPanel(panel.label, false)\r\n  refreshLabels()\r\n}\r\n\r\nfunction isSameExpanded(prev: (string | number)[], next: (string | number)[]) {\r\n  const prevSet = new Set(prev)\r\n\r\n  if (prevSet.size !== new Set(next).size) return false\r\n\r\n  return next.every(item => prevSet.has(item))\r\n}\r\n\r\nfunction expandPanel(label: string | number, expanded: boolean) {\r\n  if (!label && label !== 0) return\r\n\r\n  if (props.accordion) {\r\n    currentExpanded.value = expanded ? [label] : []\r\n  } else {\r\n    if (expanded) {\r\n      currentExpanded.value.push(label)\r\n    } else {\r\n      removeArrayItem(currentExpanded.value, label)\r\n    }\r\n  }\r\n\r\n  emitChangeEvent()\r\n  updateItemExpanded()\r\n}\r\n\r\nfunction clearExpanded() {\r\n  if (!currentExpanded.value.length) return\r\n\r\n  currentExpanded.value = []\r\n\r\n  emitChangeEvent()\r\n  updateItemExpanded()\r\n}\r\n\r\nfunction emitChangeEvent() {\r\n  emit('update:expanded', currentExpanded.value)\r\n  emitEvent(props.onChange, currentExpanded.value)\r\n}\r\n\r\nfunction updateItemExpanded() {\r\n  panelStates.forEach(panel => {\r\n    panel.setExpanded(currentExpanded.value.includes(panel.label))\r\n  })\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    ref=\"wrapper\"\r\n    :class=\"className\"\r\n    role=\"tablist\"\r\n    tabindex=\"-1\"\r\n  >\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\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","_createElementBlock","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;AAwBM,UAAAA,IAAQC,EAAS,YADRC,GAC4B;AAAA,MACzC,UAAU;AAAA,QACR,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,MAAM;AAAA,MACN,WAAW;AAAA,MACX,WAAW;AAAA,QACT,SAAS;AAAA,QACT,WAAW,CAACC,MAA6B,CAAC,SAAS,QAAQ,MAAM,EAAE,SAASA,CAAK;AAAA,MACnF;AAAA,MACA,OAAO;AAAA,IAAA,CACR,GAEKC,IAAOC,GAEPC,IAAKC,EAAc,UAAU,GAC7BC,IAAcC,EAAa,oBAAA,KAAiB,GAC5CC,IAAkBC,EAAyB,EAAE,GAE7C,EAAE,QAAQC,EAAQ,IAAIC,EAAY;AAAA,MACtC,SAAS;AAAA,MACT,WAAW,CAACC,GAAOC,MAAa;AAC1B,YAAAA,EAAS,QAAQA,EAAS,OAAO;AACnC,cAAI,CAACH,EAAQ,SAAS,CAAC,CAAC,GAAGJ,CAAW,EAAE,KAAK,CAAC,EAAE,KAAAQ,EAAI,MAAMA,MAAQF,EAAM,MAAM,EAAG;AAE3E,gBAAAG,IAAO,MAAM,KAAKL,EAAQ,MAAM,iBAAiBN,EAAG,IAAI,QAAQ,CAAC,CAAC;AAEpE,cAAAW,EAAK,SAAS,EAAG;AAErB,UAAAH,EAAM,eAAe,GACrBA,EAAM,gBAAgB;AAEhB,gBAAAI,IAAQ,SAAS,gBACnBD,EAAK,UAAU,CAASE,MAAAA,MAAU,SAAS,aAAa,IACxD;AAEJ,cAAI,CAACD,GAAO;AACJ,kBAAAE,IAASH,GAAMC,KAASH,EAAS,OAAO,KAAK,KAAKE,EAAK,UAAUA,EAAK,MAAM;AAElF,YAAAG,KAAA,QAAAA,EAAQ;AAAA,UAAM;AAAA,QAChB,MACF,CAAWL,EAAS,WAClBD,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GAERO,EAAA;AAAA,MAChB;AAAA,IACF,CACD,GAEKC,IAAYC,EAAS,MAClB;AAAA,MACLjB,EAAG,EAAE;AAAA,MACLA,EAAG,GAAG,MAAM;AAAA,MACZA,EAAG,GAAG,SAASN,EAAM,SAAS,EAAE;AAAA,MAChC;AAAA,QACE,CAACM,EAAG,GAAG,SAAS,CAAC,GAAGN,EAAM;AAAA,QAC1B,CAACM,EAAG,GAAG,MAAM,CAAC,GAAGN,EAAM;AAAA,QACvB,CAACM,EAAG,GAAG,OAAO,CAAC,GAAG,CAACN,EAAM,QAAQA,EAAM;AAAA,MAAA;AAAA,IAE3C,CACD,GAEKwB,IAAgBC,EAAc,MAAM;AAOxC,UANM,MAAA,KAAKjB,EAAY,OAAO,CAAC,EAAE,QAAQ,CAACkB,GAAMR,MAAU;AACpD,QAAAS,EAAOD,EAAK,KAAK,MACnBA,EAAK,QAAQR,IAAQ;AAAA,MACvB,CACD,GAEGV,EAAY;AACd,mBAAWW,KAASX;AAClB,UAAIE,EAAgB,MAAM,SAASS,EAAM,KAAK,IAC5CA,EAAM,WAAW,KACRA,EAAM,YACHS,EAAAT,EAAM,OAAO,EAAI;AAAA,IAGnC,CACD;AAED,IAAAU;AAAA,MACEC;AAAA,MACArB,EAAS;AAAA,QACP,WAAWsB,EAAM/B,GAAO,WAAW;AAAA,QACnC,eAAAgC;AAAA,QACA,iBAAAC;AAAA,QACA,aAAAL;AAAA,QACA,eAAAJ;AAAA,MACD,CAAA;AAAA,IACH,GAEAU,EAAY,MAAM;AAChB,YAAMC,IAAcnC,EAAM,UACpBoC,IACJpC,EAAM,aAAa,MAAM,QAAQmC,CAAW,IACxCA,EAAY,CAAC,IACbA,KAAeA,MAAgB,IAC7BA,IACA,CAAC;AAEO,MAAAzB,EAAA,QAAQ,MAAM,QAAQ0B,CAAQ,IAAI,MAAM,KAAKA,CAAQ,IAAI,CAACA,CAAQ;AAAA,IAAA,CACnF,GAEDC,EAAU,MAAM;AACd,MAAAC,EAASC,CAAkB,GAErBC,EAAA9B,GAAiB,CAAC+B,GAAMC,MAAS;AACrC,QAAKC,EAAeF,GAAMC,CAAI,KACTH,EAAA;AAAA,MACrB,CACD;AAAA,IAAA,CACF,GAEYK,EAAA,EAAE,iBAAAlC,GAAiB,SAAAE,GAAS;AAEzC,aAASoB,EAAcb,GAAmB;AACxC,MAAAX,EAAY,IAAIW,CAAK,GAEPK,EAAA;AAAA,IAAA;AAGhB,aAASS,EAAgBd,GAAmB;AAC1C,MAAAX,EAAY,OAAOW,CAAK,GACZS,EAAAT,EAAM,OAAO,EAAK,GAChBK,EAAA;AAAA,IAAA;AAGP,aAAAmB,EAAeF,GAA2BC,GAA2B;AACtE,YAAAG,IAAU,IAAI,IAAIJ,CAAI;AAE5B,aAAII,EAAQ,SAAS,IAAI,IAAIH,CAAI,EAAE,OAAa,KAEzCA,EAAK,MAAM,CAAAhB,MAAQmB,EAAQ,IAAInB,CAAI,CAAC;AAAA,IAAA;AAGpC,aAAAE,EAAYkB,GAAwBV,GAAmB;AAC1D,MAAA,CAACU,KAASA,MAAU,MAEpB9C,EAAM,YACRU,EAAgB,QAAQ0B,IAAW,CAACU,CAAK,IAAI,CAAC,IAE1CV,IACc1B,EAAA,MAAM,KAAKoC,CAAK,IAEhBC,EAAArC,EAAgB,OAAOoC,CAAK,GAIhCE,EAAA,GACGT,EAAA;AAAA,IAAA;AAGrB,aAASlB,IAAgB;AACnB,MAACX,EAAgB,MAAM,WAE3BA,EAAgB,QAAQ,CAAC,GAETsC,EAAA,GACGT,EAAA;AAAA,IAAA;AAGrB,aAASS,IAAkB;AACpB,MAAA5C,EAAA,mBAAmBM,EAAgB,KAAK,GACnCuC,EAAAjD,EAAM,UAAUU,EAAgB,KAAK;AAAA,IAAA;AAGjD,aAAS6B,IAAqB;AAC5B,MAAA/B,EAAY,QAAQ,CAASW,MAAA;AAC3B,QAAAA,EAAM,YAAYT,EAAgB,MAAM,SAASS,EAAM,KAAK,CAAC;AAAA,MAAA,CAC9D;AAAA,IAAA;2BAKD+B,EAOM,OAAA;AAAA,eANA;AAAA,MAAJ,KAAItC;AAAA,MACH,SAAOU,EAAS,KAAA;AAAA,MACjB,MAAK;AAAA,MACL,UAAS;AAAA,IAAA;MAET6B,EAAaC,EAAA,QAAA,SAAA;AAAA;;;"}