hongluan-ui/es/components/collapse/src/collapse-item.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"collapse-item.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"{[namespace]: true, 'is-active': isActive, 'is-disabled': disabled }\"\n  >\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"`collapse-content-${id}`\"\n      :aria-describedby=\"`collapse-content-${id}`\"\n    >\n      <div\n        :id=\"`collapse-head-${id}`\"\n        class=\"item-header\"\n        role=\"button\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :class=\"{\n          'focusing': focusing && !disabled,\n        }\"\n        @click=\"handleHeaderClick\"\n        @keydown.space.enter.self.stop.prevent=\"handleEnterClick\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\"><div class=\"item-title\">{{ title }}</div></slot>\n        <hl-icon class=\"item-arrow\">\n          <system-arrow-down />\n        </hl-icon>\n      </div>\n    </div>\n    <hl-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"`collapse-content-${id}`\"\n        class=\"item-wrap\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"`collapse-head-${id}`\"\n      >\n        <div class=\"item-content\">\n          <slot></slot>\n        </div>\n      </div>\n    </hl-collapse-transition>\n  </div>\n</template>\n<script lang='ts' setup>\nimport { useNamespace } from '@hongluan-ui/hooks'\nimport HlCollapseTransition from '@hongluan-ui/components/collapse-transition'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport { SystemArrowDown } from '@hongluan-ui/components/system-icon'\nimport { collapseItemProps } from './collapse-item'\nimport { useCollapseItem } from './use-collapse-item'\n\ndefineOptions({\n  name: 'CollapseItem',\n})\n\nconst props = defineProps(collapseItemProps)\nconst {\n  focusing,\n  id,\n  isActive,\n  handleFocus,\n  handleHeaderClick,\n  handleEnterClick,\n} = useCollapseItem(props)\n\nconst { namespace } = useNamespace('collapse-item')\n\ndefineExpose({\n  /** @description current collapse-item whether active */\n  isActive,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;oCAqDc;AAAA,EACZ,MAAM;AACR;;;;;;AAGA,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,gBAAgB,KAAK;AAEzB,UAAM,EAAE,cAAc,aAAa,eAAe;AAElD,WAAa;AAAA,MAEX;AAAA,KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}