song-ui-u/es/components/timeline/src/item.mjs

vue3 + js的PC前端组件库

import { defineComponent, inject, computed, createVNode, isVNode } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import * as icons from 'song-ui-pro-icon';
import '../../../hook/use-zindex/index.mjs';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import { XIcon } from '../../icon/index.mjs';
import '../../input/index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../../switch/index.mjs';
import '../../form/index.mjs';
import '../../message/index.mjs';
import '../../mask/src/mask.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import '../../image/index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../../chat/index.mjs';
import '../../progress/index.mjs';
import '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../../tabs/index.mjs';
import '../../menu/index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../../select/index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../../sender/index.mjs';
import { TIMELINE_KEY } from '../constants.mjs';

function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
var TimelineItem = /* @__PURE__ */ defineComponent({
  name: "x-timeline-item",
  props: {
    // 时间戳
    timestamp: {
      type: String,
      default: ""
    },
    // 自定义图标
    icon: {
      type: String,
      default: ""
    },
    // icon颜色
    iconColor: {
      type: String,
      default: ""
    },
    // 是否隐藏时间戳
    hideTimestamp: {
      type: Boolean,
      default: false
    },
    // hollow空心
    hollow: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ""
    }
  },
  setup(props, {
    slots
  }) {
    const ns = useNamespace("timeline-item");
    const timeLineCtx = inject(TIMELINE_KEY);
    const position = computed(() => {
      return timeLineCtx?.props.position;
    });
    return () => {
      let _slot;
      return createVNode("div", {
        "class": [ns.b(), ns.m(props.type)]
      }, [createVNode("div", {
        "class": ns.e("left")
      }, [createVNode("div", {
        "class": [ns.e("line")]
      }, null), createVNode("div", {
        "class": [ns.e("node"), ns.is("hollow", props.hollow)]
      }, [props.icon && createVNode(XIcon, {
        "color": props.iconColor
      }, _isSlot(_slot = icons[props.icon].render()) ? _slot : {
        default: () => [_slot]
      })])]), createVNode("div", {
        "class": [ns.e("wrapper"), ns.m("position", position.value)]
      }, [createVNode("div", {
        "class": [ns.e("content")]
      }, [slots.default?.()]), !props.hideTimestamp && props.timestamp && createVNode("div", {
        "class": [ns.e("time")]
      }, [props.timestamp])])]);
    };
  }
});

export { TimelineItem as default };
//# sourceMappingURL=item.mjs.map