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