@zhsz/cool-design-dv/lib/packages/dv-date/Date.vue.js

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("./style.css");
const dayjs = require("dayjs");
const relativeTime = require("dayjs/plugin/relativeTime");
require("dayjs/locale/zh-cn");
const _hoisted_1 = { class: "my-dv-date" };
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { class: "my-date__value" };
const _hoisted_4 = { key: 1 };
const __default__ = vue.defineComponent({
  name: "DvDate"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    // 原始值
    value: [String, Number, Date],
    // 默认值
    defaultValue: {
      type: [String, Number, Date],
      default() {
        return null;
      }
    },
    // 显示格式， 对相对时间无效
    format: {
      type: String,
      default: "YYYY-MM-DD HH:mm:ss"
    },
    // 启用相对时间模式
    relative: Boolean,
    // 颜色
    type: {
      type: String,
      validator(val) {
        return ["", "primary", "success", "warning", "danger", "info"].includes(
          val
        );
      }
    },
    // 时间保持实时更新, 对相对时间无效
    tick: Boolean
  },
  setup(__props) {
    dayjs.extend(relativeTime);
    dayjs.locale("zh-cn");
    const $slots = vue.useSlots();
    const props = __props;
    const timerId = vue.ref();
    const dayInstance = vue.ref();
    const classes = vue.computed(() => {
      return {
        "my-date": true,
        [`is-${props.type}`]: !!props.type
      };
    });
    const displayValue = vue.computed(() => {
      if (!dayInstance.value)
        return "";
      if (props.relative) {
        return dayInstance.value.fromNow();
      }
      return dayInstance.value.format(props.format);
    });
    function init() {
      let instance = dayjs(props.value);
      if (!instance.isValid()) {
        instance = props.defaultValue ? dayjs(props.defaultValue) : null;
      }
      dayInstance.value = instance;
      props.tick ? start() : stop();
    }
    function start() {
      if (!dayInstance.value)
        return;
      clearInterval(timerId.value);
      timerId.value = setInterval(() => {
        dayInstance.value = dayInstance.value.add(1, "second");
      }, 1e3);
    }
    function stop() {
      clearInterval(timerId.value);
      timerId.value = null;
    }
    vue.watch(
      () => props.value,
      () => {
        stop();
        init();
      },
      {
        immediate: true
      }
    );
    vue.watch(
      () => props.tick,
      (val) => {
        val ? start() : stop();
      }
    );
    vue.onBeforeUnmount(() => {
      stop();
      dayInstance.value = null;
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", {
          class: vue.normalizeClass(classes.value)
        }, [
          vue.unref($slots).prefix ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
            vue.renderSlot(_ctx.$slots, "prefix")
          ])) : vue.createCommentVNode("", true),
          vue.createElementVNode("span", _hoisted_3, [
            vue.renderSlot(_ctx.$slots, "default", {
              value: __props.value,
              displayValue: displayValue.value,
              dayjs: vue.unref(dayjs)
            }, () => [
              vue.createTextVNode(vue.toDisplayString(displayValue.value), 1)
            ])
          ]),
          vue.unref($slots).suffix ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [
            vue.renderSlot(_ctx.$slots, "suffix")
          ])) : vue.createCommentVNode("", true)
        ], 2)
      ]);
    };
  }
});
exports.default = _sfc_main;