vexip-ui/es/components/collapse/collapse-panel.vue2.mjs.map

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

{"version":3,"file":"collapse-panel.vue2.mjs","sources":["../../../components/collapse/collapse-panel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapseTransition } from '@/components/collapse-transition'\nimport { Icon } from '@/components/icon'\nimport { Renderer } from '@/components/renderer'\n\nimport { computed, inject, onBeforeUnmount, reactive, ref, watch } from 'vue'\n\nimport { createIconProp, emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'\nimport { collapsePanelProps } from './props'\nimport { COLLAPSE_STATE, getIndexId } from './symbol'\n\nimport type { CollapseArrowType, CollapsePanelSlots, PanelState } from './symbol'\n\ndefineOptions({ name: 'CollapsePanel' })\n\nconst _props = defineProps(collapsePanelProps)\nconst props = useProps('collapsePanel', _props, {\n  label: {\n    default: null,\n    static: true,\n  },\n  title: '',\n  disabled: false,\n  contentStyle: null,\n  expanded: false,\n  card: false,\n  arrowType: {\n    default: 'right' as CollapseArrowType,\n    validator: (value: CollapseArrowType) => ['right', 'left', 'none'].includes(value),\n  },\n  icon: createIconProp(),\n  ghost: false,\n  alive: null,\n  slots: () => ({}),\n})\n\nconst emit = defineEmits(['update:expanded'])\n\ndefineSlots<CollapsePanelSlots>()\n\nconst collapseState = inject(COLLAPSE_STATE, null)\n\nconst nh = useNameHelper('collapse')\nconst icons = useIcons()\nconst currentExpanded = ref(props.expanded)\nconst currentLabel = ref(props.label)\nconst loaded = ref(currentExpanded.value)\n\nconst tab = ref<HTMLElement>()\n\nconst id = getIndexId()\n\nconst tabId = computed(() => `${nh.be('tab')}-${id}`)\nconst bodyId = computed(() => `${nh.be('body')}-${id}`)\nconst useCard = computed(() => {\n  if (!collapseState) {\n    return props.card\n  }\n\n  return false\n})\nconst useGhost = computed(() => {\n  if (!collapseState) {\n    return props.ghost\n  }\n\n  return false\n})\nconst useArrowType = computed(() => {\n  if (collapseState) {\n    return collapseState.arrowType\n  }\n\n  return props.arrowType\n})\nconst alive = computed(() => {\n  // 以 CollapsePanel 自身的 alive 属性优先\n  return props.alive ?? collapseState?.alive ?? false\n})\nconst className = computed(() => {\n  return [\n    nh.be('panel'),\n    nh.bs('vars'),\n    nh.bem('panel', `arrow-${useArrowType.value}`),\n    {\n      [nh.bem('panel', 'inherit')]: collapseState || props.inherit,\n      [nh.bem('panel', 'card')]: useCard.value,\n      [nh.bem('panel', 'ghost')]: !useCard.value && useGhost.value,\n      [nh.bem('panel', 'expanded')]: currentExpanded.value,\n      [nh.bem('panel', 'disabled')]: props.disabled,\n    },\n  ]\n})\n\nif (collapseState) {\n  const state: PanelState = reactive({\n    tab,\n    label: currentLabel,\n    expanded: currentExpanded,\n    setExpanded,\n  })\n\n  watch(\n    () => props.label,\n    value => {\n      const prevValue = currentLabel.value\n      currentLabel.value = value || value === 0 ? value : prevValue\n    },\n  )\n\n  collapseState.registerPanel(state)\n\n  onBeforeUnmount(() => {\n    collapseState.unregisterPanel(state)\n  })\n} else {\n  watch(\n    () => props.expanded,\n    value => {\n      currentExpanded.value = value\n    },\n  )\n}\n\nconst ifDirectiveValue = computed(() => {\n  switch (alive.value) {\n    case true:\n    case 'always':\n      return true\n    case 'mounted':\n      return loaded.value\n    default:\n      return currentExpanded.value\n  }\n})\n\nconst showDirectiveValue = computed(() => {\n  return !alive.value || currentExpanded.value\n})\n\nif (!currentExpanded.value) {\n  watch(\n    currentExpanded,\n    () => {\n      loaded.value = true\n    },\n    { once: true },\n  )\n}\n\nfunction setExpanded(expanded: boolean) {\n  currentExpanded.value = expanded\n\n  emit('update:expanded', expanded)\n  emitEvent(props.onToggle, expanded)\n}\n\nfunction handleToggle(expanded = !currentExpanded.value) {\n  if (props.disabled) return\n\n  if (collapseState) {\n    // 由父级进行管理\n    collapseState.expandPanel(currentLabel.value, expanded)\n  } else {\n    setExpanded(expanded)\n  }\n}\n\ndefineExpose({\n  currentExpanded,\n  tab,\n  tabId,\n  bodyId,\n  handleToggle,\n})\n</script>\n\n<template>\n  <section :class=\"className\">\n    <button\n      :id=\"tabId\"\n      ref=\"tab\"\n      :class=\"nh.be('header')\"\n      type=\"button\"\n      role=\"tab\"\n      :aria-expanded=\"currentExpanded\"\n      :aria-controls=\"bodyId\"\n      :aria-describedby=\"bodyId\"\n      @click=\"handleToggle()\"\n    >\n      <div :class=\"nh.be('arrow')\">\n        <slot name=\"arrow\" :expanded=\"currentExpanded\">\n          <Renderer :renderer=\"props.slots.arrow\" :data=\"{ expanded: currentExpanded }\">\n            <Icon v-bind=\"icons.angleRight\"></Icon>\n          </Renderer>\n        </slot>\n      </div>\n      <slot name=\"title\">\n        <div v-if=\"props.icon\" :class=\"nh.be('icon')\">\n          <Icon :icon=\"props.icon\"></Icon>\n        </div>\n        {{ props.title }}\n      </slot>\n    </button>\n    <CollapseTransition>\n      <div\n        v-if=\"ifDirectiveValue\"\n        v-show=\"showDirectiveValue\"\n        :id=\"bodyId\"\n        :class=\"nh.be('body')\"\n        role=\"tabpanel\"\n        tabindex=\"0\"\n        :aria-labelledby=\"tabId\"\n      >\n        <div :class=\"nh.be('content')\" :style=\"props.contentStyle\">\n          <slot></slot>\n        </div>\n      </div>\n    </CollapseTransition>\n  </section>\n</template>\n"],"names":["props","useProps","__props","value","createIconProp","emit","__emit","collapseState","inject","COLLAPSE_STATE","nh","useNameHelper","icons","useIcons","currentExpanded","ref","currentLabel","loaded","tab","id","getIndexId","tabId","computed","bodyId","useCard","useGhost","useArrowType","alive","className","state","reactive","setExpanded","watch","prevValue","onBeforeUnmount","ifDirectiveValue","showDirectiveValue","expanded","emitEvent","handleToggle","__expose","_createElementBlock","_createElementVNode","_normalizeClass","_unref","_renderSlot","_ctx","_createVNode","Renderer","Icon","_normalizeProps","_guardReactiveProps","_toDisplayString","CollapseTransition","_normalizeStyle"],"mappings":"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"}