xdesign-vue-next/es/breadcrumb/breadcrumb-item.mjs.map

XDesign Component for vue-next

{"version":3,"file":"breadcrumb-item.mjs","sources":["../../src/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["import { defineComponent, VNode, inject, ref, computed, getCurrentInstance, onMounted, onBeforeUpdate } from 'vue';\n\nimport props from './breadcrumb-item-props';\nimport Tooltip from '../tooltip/index';\nimport { isNodeOverflow } from '../utils/dom';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { useTNodeJSX } from '../hooks/tnode';\nimport isFunction from 'lodash/isFunction';\n\ninterface LocalTBreadcrumb {\n  separator: (() => void) | string;\n  theme: string;\n  slots: {\n    separator: VNode | string;\n  };\n  maxItemWidth: string;\n}\n\nconst localTBreadcrumbOrigin: LocalTBreadcrumb = {\n  separator: '',\n  theme: 'light',\n  slots: { separator: '' },\n  maxItemWidth: undefined,\n};\n\nexport default defineComponent({\n  name: 'XBreadcrumbItem',\n  inheritAttrs: false,\n  props: {\n    ...props,\n  },\n  setup(props, { slots, attrs }) {\n    const breadcrumbText = ref<HTMLElement>();\n    const localTBreadcrumb = inject('tBreadcrumb', localTBreadcrumbOrigin);\n    const themeClassName = ref(localTBreadcrumb?.theme);\n    const isCutOff = ref(false);\n    const COMPONENT_NAME = usePrefixClass('breadcrumb__item');\n    const separatorClass = usePrefixClass('breadcrumb__separator');\n    const disableClass = usePrefixClass('is-disabled');\n    const linkClass = usePrefixClass('link');\n    const maxLengthClass = usePrefixClass('breadcrumb__inner');\n    const textFlowClass = usePrefixClass('breadcrumb--text-overflow');\n\n    const maxWithStyle = computed(() => {\n      const maxItemWidth = localTBreadcrumb?.maxItemWidth;\n      const maxWith: string = props.maxWidth || maxItemWidth || '120';\n      return { maxWidth: `${maxWith}px` };\n    });\n\n    onMounted(() => {\n      isCutOff.value = isNodeOverflow(breadcrumbText.value);\n    });\n    onBeforeUpdate(() => {\n      isCutOff.value = isNodeOverflow(breadcrumbText.value);\n    });\n\n    const separatorPropContent = localTBreadcrumb?.separator;\n    const separatorSlot = localTBreadcrumb?.slots?.separator;\n    const separatorContent = separatorPropContent || separatorSlot || (\n      <icon-ri-arrow-right-s-line {...{ color: 'rgba(0,0,0,.3)' }} />\n    );\n    const { proxy } = getCurrentInstance();\n    const bindEvent = (e: MouseEvent) => {\n      if (!props.disabled) {\n        e.preventDefault();\n        if (props.href) {\n          window.location.href = props.href;\n        }\n        const router = props.router || proxy.$root.$router;\n        if (props.to && router) {\n          props.replace ? router.replace(props.to) : router.push(props.to);\n        }\n      }\n    };\n\n    return () => {\n      const renderTNodeJSX = useTNodeJSX();\n\n      const itemClass = [COMPONENT_NAME.value, themeClassName.value];\n      const textClass = [textFlowClass.value];\n\n      if (props.disabled) {\n        textClass.push(disableClass.value);\n      }\n\n      const listeners = {\n        onClick: (e: MouseEvent) => {\n          if (props.disabled) {\n            e.stopPropagation();\n            return;\n          }\n          (props as any).onClick?.({ e });\n        },\n      };\n      const textContent = (\n        <span {...{ class: maxLengthClass.value, style: maxWithStyle.value }}>\n          {renderTNodeJSX('icon')}\n          <span ref={breadcrumbText} class={`${maxLengthClass.value}-text`}>\n            {renderTNodeJSX('default')}\n          </span>\n        </span>\n      );\n      let itemContent = <span {...{ class: textClass, ...listeners }}>{textContent}</span>;\n\n      if ((props.href || props.to) && !props.disabled) {\n        textClass.push(linkClass.value);\n        itemContent = (\n          <a class={textClass} href={props.href} target={props.target} {...listeners} onClick={bindEvent}>\n            {textContent}\n          </a>\n        );\n      }\n      return (\n        <div class={itemClass} {...attrs}>\n          {isCutOff.value ? <Tooltip content={() => slots?.default()}>{itemContent}</Tooltip> : itemContent}\n          <span class={separatorClass.value}>\n            {isFunction(separatorContent) ? separatorContent() : separatorContent}\n          </span>\n        </div>\n      );\n    };\n  },\n});\n"],"names":["_isVNode","separator","theme","slots","maxItemWidth","name","inheritAttrs","props","setup","onMounted","onBeforeUpdate","_resolveComponent","color","window","textClass","onClick","e","_createVNode"],"mappings":"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"}