UNPKG

xdesign-vue-next

Version:

XDesign Component for vue-next

1 lines 5.3 kB
{"version":3,"file":"tab-nav-item.mjs","sources":["../../src/tabs/tab-nav-item.tsx"],"sourcesContent":["import { computed, defineComponent, ref, PropType } from 'vue';\nimport tabProps from './props';\nimport tabPanelProps from './tab-panel-props';\n\n// hooks\nimport useRipple from '../hooks/useRipple';\nimport { usePrefixClass, useCommonClassName } from '../hooks/useConfig';\n\nexport default defineComponent({\n name: 'XTabNavItem',\n\n props: {\n index: Number,\n active: {\n type: Boolean,\n },\n theme: tabProps.theme,\n size: tabProps.size,\n placement: tabProps.placement,\n label: {\n type: null,\n },\n disabled: tabPanelProps.disabled,\n removable: tabPanelProps.removable,\n value: tabPanelProps.value,\n onClick: Function as PropType<Function>,\n onRemove: Function as PropType<Function>,\n },\n\n setup(props) {\n const itemRef = ref<HTMLElement>();\n useRipple(itemRef);\n\n const COMPONENT_NAME = usePrefixClass('tabs__nav-item');\n const classPrefix = usePrefixClass();\n const { STATUS, SIZE } = useCommonClassName();\n\n const removeBtnClick = (e: MouseEvent) => {\n e.stopPropagation();\n props.onRemove({ e, value: props.value, index: props.index });\n };\n const onClickNav = (e: MouseEvent) => {\n if (props.disabled) return;\n props.onClick(e);\n };\n\n const navItemClass = computed(() => {\n return {\n [COMPONENT_NAME.value]: true,\n [`${classPrefix.value}-tabs__nav--card`]: props.theme === 'card',\n [STATUS.value.disabled]: props.disabled,\n [STATUS.value.active]: props.active,\n [`${classPrefix.value}-is-left`]: props.placement === 'left',\n [`${classPrefix.value}-is-right`]: props.placement === 'right',\n [SIZE.value.medium]: props.size === 'medium',\n [SIZE.value.large]: props.size === 'large',\n };\n });\n\n const renderCardItem = () => {\n return (\n <div class={navItemClass.value} onClick={onClickNav} ref={itemRef}>\n <span class={`${COMPONENT_NAME.value}-text-wrapper`}>{props.label}</span>\n {props.removable && !props.disabled ? <icon-ri-close-line class=\"remove-btn\" onClick={removeBtnClick} /> : null}\n </div>\n );\n };\n const renderNormalItem = () => {\n return (\n <div class={navItemClass.value} onClick={onClickNav}>\n <div\n class={[\n `${COMPONENT_NAME.value}-wrapper`,\n {\n [STATUS.value.disabled]: props.disabled,\n [STATUS.value.active]: props.active,\n },\n ]}\n ref={itemRef}\n >\n <span class={`${COMPONENT_NAME.value}-text-wrapper`}>{props.label}</span>\n </div>\n {props.removable && !props.disabled ? <icon-ri-close-line class=\"remove-btn\" onClick={removeBtnClick} /> : null}\n </div>\n );\n };\n\n return () => {\n return props.theme === 'card' ? renderCardItem() : renderNormalItem();\n };\n },\n});\n"],"names":["name","props","index","active","type","label","onClick","onRemove","e","_createVNode","_resolveComponent"],"mappings":"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"}