@extclp/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'\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, 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})\n\nconst emit = defineEmits(['update:expanded'])\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)\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 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\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        <Icon v-bind=\"icons.angleRight\"></Icon>\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=\"currentExpanded\"\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","tab","id","getIndexId","tabId","computed","bodyId","useCard","useGhost","useArrowType","className","state","reactive","setExpanded","watch","prevValue","onBeforeUnmount","expanded","emitEvent","handleToggle","__expose"],"mappings":"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"}