/**
 * ldesign v0.2.3
 * (c) 2022年9月24日 swimly
 * @license MIT
 */

import { h as helper } from '../../_chunks/dep-9cf53923.js';
import { ChevronRightIcon } from '@ldesign/icons-vue';
import { Tooltip } from '../tooltip/index.js';
import { BreadcrumbItemProps } from './props.js';
import { isNodeOverflow } from '../../utils/dom.js';
import { getGlobalIconMixins, getClassPrefixMixins } from '../config-provider/config-receiver.js';
import mixins from '../../utils/mixins.js';
import '../tooltip/tooltip.js';
import 'lodash/isFunction';
import '../tooltip/props.js';
import '../popup/props.js';
import '../popup/popup.js';
import '@popperjs/core';
import '../../_chunks/dep-1aed710a.js';
import '../../utils/render-node.js';
import 'vue';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../utils/helper.js';
import '../popup/container.js';
import 'raf';
import 'lodash/isString';
import '../../utils/easing.js';
import 'lodash/mergeWith';
import 'lodash';
import '../config-provider/context.js';
import '../../_chunks/dep-b1584b65.js';
import '../../utils/map-props.js';
import '../../utils/with-install.js';
import '../../config.js';

const localLBreadcrumbOrigin = {
  separator: "",
  theme: "light",
  $slots: {
    separator: ""
  },
  maxItemWidth: void 0
};
var _BreadcrumbItem = mixins(getClassPrefixMixins("breadcrumb"), getGlobalIconMixins()).extend({
  name: "LBreadcrumbItem",
  props: { ...BreadcrumbItemProps
  },
  inject: ["LBreadcrumb"],

  data() {
    return {
      localTBreadcrumb: localLBreadcrumbOrigin,
      themeClassName: "",
      $router: null,
      isCutOff: false
    };
  },

  components: {
    LTooltip: Tooltip
  },
  computed: {
    maxWithStyle() {
      const {
        localTBreadcrumb
      } = this;
      const {
        maxItemWidth
      } = localTBreadcrumb;
      const maxWith = this.maxWidth || maxItemWidth || "120";
      return {
        "max-width": `${maxWith}px`
      };
    }

  },
  watch: {
    LBreadcrumb: {
      immediate: true,

      handler(v) {
        this.localTBreadcrumb = v;
      }

    }
  },

  created() {
    const LBreadcrumb = this.localTBreadcrumb;
    this.themeClassName = LBreadcrumb.theme;
  },

  mounted() {
    this.isCutOff = isNodeOverflow(this.$refs.breadcrumbText);
  },

  beforeUpdate() {
    this.isCutOff = isNodeOverflow(this.$refs.breadcrumbText);
  },

  methods: {
    bindEvent() {
      const {
        to
      } = this;
      const router = this.router || this.$router;

      if (to && router) {
        this.replace ? router.replace(to) : router.push(to);
      }
    }

  },

  render() {
    const h = arguments[0];
    const {
      localTBreadcrumb,
      href,
      target,
      to,
      disabled
    } = this;
    const {
      ChevronRightIcon: ChevronRightIcon$1
    } = this.useGlobalIcon({
      ChevronRightIcon: ChevronRightIcon
    });
    const {
      separator
    } = localTBreadcrumb;
    const separatorSlot = localTBreadcrumb.$slots.separator;
    const separatorPropContent = typeof separator === "function" ? separator() : separator;
    const separatorContent = separatorPropContent || separatorSlot || h(ChevronRightIcon$1);
    const itemClass = [`${this.componentName}__item`, this.themeClassName];
    const textClass = [`${this.componentName}--text-overflow`];

    if (disabled) {
      textClass.push(`${this.classPrefix}-is-disabled`);
    }

    if (this.$listeners.click) {
      textClass.push(`${this.classPrefix}-gestureClass`);
    }

    const clickEvent = to && !disabled ? {
      on: {
        click: this.bindEvent
      }
    } : {};
    const textContent = h("span", {
      "ref": "breadcrumbText",
      "class": `${this.componentName}__inner`,
      "style": this.maxWithStyle
    }, [this.$slots.default]);
    let itemContent = h("span", helper([{
      "class": textClass,
      "on": { ...this.$listeners
      }
    }, clickEvent]), [textContent]);

    if (href && !disabled) {
      textClass.push(`${this.classPrefix}-link`);
      itemContent = h("a", {
        "class": textClass,
        "attrs": {
          "href": href,
          "target": target
        },
        "on": { ...this.$listeners
        }
      }, [textContent]);
    }

    return h("div", {
      "class": itemClass
    }, [this.isCutOff ? h("l-tooltip", {
      "attrs": {
        "content": () => this.$slots.default
      }
    }, [itemContent]) : itemContent, h("span", {
      "class": `${this.componentName}__separator`
    }, [separatorContent])]);
  }

});

export { _BreadcrumbItem as default };
//# sourceMappingURL=breadcrumb-item.js.map
