@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 3.61 kB
Source Map (JSON)
{"version":3,"file":"anchor-link.vue2.mjs","sources":["../../../components/anchor/anchor-link.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n computed,\n inject,\n onBeforeUnmount,\n onMounted,\n provide,\n reactive,\n ref,\n toRef,\n watch\n} from 'vue'\n\nimport { useNameHelper } from '@vexip-ui/config'\nimport { anchorLinkProps } from './props'\nimport { ANCHOR_STATE, LINK_STATE, baseIndentWidth } from './symbol'\n\ndefineOptions({ name: 'AnchorLink' })\n\nconst props = defineProps(anchorLinkProps)\n\nconst anchorState = inject(ANCHOR_STATE, null)\nconst parentLinkState = inject(LINK_STATE, null)\n\nconst nh = useNameHelper('anchor')\nconst indent = ref(parentLinkState?.indent ? parentLinkState?.indent + 1 : 1)\nconst active = ref(false)\n\nconst link = ref<HTMLElement>()\n\nconst state = reactive({\n el: link,\n to: toRef(props, 'to'),\n active,\n indent\n})\n\nconst linkClass = computed(() => {\n return {\n [nh.be('link')]: true,\n [nh.bem('link', 'active')]: state.active\n }\n})\nconst linkStyle = computed(() => {\n return {\n paddingInlineStart: `${baseIndentWidth * indent.value}px`\n }\n})\n\nprovide(LINK_STATE, state)\n\nif (anchorState) {\n watch(\n () => anchorState.currentActive,\n value => {\n active.value = value === props.to\n }\n )\n\n onMounted(() => {\n anchorState.increaseLink(state)\n })\n\n onBeforeUnmount(() => {\n anchorState.decreaseLink(state)\n })\n}\n\nfunction handleSelect() {\n if (anchorState) {\n anchorState.handleActive(props.to)\n }\n\n return false\n}\n</script>\n\n<template>\n <li :class=\"nh.be('item')\">\n <a\n ref=\"link\"\n :class=\"linkClass\"\n :href=\"to\"\n :style=\"linkStyle\"\n :title=\"title\"\n @click.prevent=\"handleSelect\"\n >\n <slot></slot>\n </a>\n <ul v-if=\"$slots.group || (children && children.length)\" :class=\"nh.be('list')\">\n <slot name=\"group\">\n <template v-if=\"children && children.length\">\n <AnchorLink\n v-for=\"child in children\"\n :key=\"child.to\"\n :to=\"child.to\"\n :title=\"child.title\"\n :children=\"child.children\"\n >\n {{ child.label }}\n </AnchorLink>\n </template>\n </slot>\n </ul>\n </li>\n</template>\n"],"names":["props","__props","anchorState","inject","ANCHOR_STATE","parentLinkState","LINK_STATE","nh","useNameHelper","indent","ref","active","link","state","reactive","toRef","linkClass","computed","linkStyle","baseIndentWidth","provide","watch","value","onMounted","onBeforeUnmount","handleSelect"],"mappings":";;;;;;;;;AAmBA,UAAMA,IAAQC,GAERC,IAAcC,EAAOC,GAAc,IAAI,GACvCC,IAAkBF,EAAOG,GAAY,IAAI,GAEzCC,IAAKC,EAAc,QAAQ,GAC3BC,IAASC,EAAIL,KAAA,QAAAA,EAAiB,UAASA,KAAA,gBAAAA,EAAiB,UAAS,IAAI,CAAC,GACtEM,IAASD,EAAI,EAAK,GAElBE,IAAOF,EAAiB,GAExBG,IAAQC,EAAS;AAAA,MACrB,IAAIF;AAAA,MACJ,IAAIG,EAAMf,GAAO,IAAI;AAAA,MACrB,QAAAW;AAAA,MACA,QAAAF;AAAA,IAAA,CACD,GAEKO,IAAYC,EAAS,OAClB;AAAA,MACL,CAACV,EAAG,GAAG,MAAM,CAAC,GAAG;AAAA,MACjB,CAACA,EAAG,IAAI,QAAQ,QAAQ,CAAC,GAAGM,EAAM;AAAA,IACpC,EACD,GACKK,IAAYD,EAAS,OAClB;AAAA,MACL,oBAAoB,GAAGE,IAAkBV,EAAO,KAAK;AAAA,IACvD,EACD;AAED,IAAAW,EAAQd,GAAYO,CAAK,GAErBX,MACFmB;AAAA,MACE,MAAMnB,EAAY;AAAA,MAClB,CAASoB,MAAA;AACA,QAAAX,EAAA,QAAQW,MAAUtB,EAAM;AAAA,MAAA;AAAA,IAEnC,GAEAuB,EAAU,MAAM;AACd,MAAArB,EAAY,aAAaW,CAAK;AAAA,IAAA,CAC/B,GAEDW,EAAgB,MAAM;AACpB,MAAAtB,EAAY,aAAaW,CAAK;AAAA,IAAA,CAC/B;AAGH,aAASY,IAAe;AACtB,aAAIvB,KACUA,EAAA,aAAaF,EAAM,EAAE,GAG5B;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}