dm-vue3-ui/es/cron-picker/index.vue.js

This Components Library will help get you started developing in Vue 3.

import { Input, Button, InputGroup } from "ant-design-vue/es";
import { defineComponent, ref, computed, onMounted, watch, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, toDisplayString, isRef, createCommentVNode, renderSlot, createVNode, createTextVNode } from "vue";
import { ConfigProvider } from "ant-design-vue";
import { CRON_TIMES_LIST, PICKER_TYPE_LIST, genRunStrByCron, COLUMNS_HEADER_MAP, DEFAULT_PICKER_FORMAT, TYPE_VALUE_RESOLVER_MAP, COLUMNS_MAP, genCronExprByType } from "./utils/util";
import { $t } from "../i18n/index";
import Panel from "./panel/index.vue";
import { useVModel } from "@vueuse/core";
const _hoisted_1 = { class: "dm-cron-picker" };
const _hoisted_2 = { key: 0 };
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "dm-cron-picker"
  },
  __name: "index",
  props: {
    size: { default: "default" },
    trigger: { default: "click" },
    title: { default: $t("cronPicker.title") },
    placement: { default: "bottomLeft" },
    format: { default: "" },
    disabled: { type: Boolean, default: false },
    value: { default: "" },
    runTypes: { default: () => [] },
    placeholder: { default: "" },
    onlyShowText: { type: Boolean, default: false }
  },
  emits: ["input", "extra", "change", "update:value"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const runCron = useVModel(props, "value", emit);
    const runType = ref(props.runTypes.length > 0 ? props.runTypes[0].value : "");
    const runTimes = ref();
    const unFirstInitType = ref(true);
    const runtypeList = computed(() => {
      return props.runTypes.length > 0 ? props.runTypes : CRON_TIMES_LIST;
    });
    const formatPickerTime = () => {
      const format = DEFAULT_PICKER_FORMAT[isValidType.value ? runType.value : "default"];
      const { formatter } = TYPE_VALUE_RESOLVER_MAP[runType.value] || TYPE_VALUE_RESOLVER_MAP["default"];
      return formatter(runTimes.value, props.format || format);
    };
    const inputValue = computed(() => {
      return formatPickerTime();
    });
    const isValidType = computed(() => {
      return PICKER_TYPE_LIST.includes(runType.value);
    });
    const setDefaultTime = (runTimesVal) => {
      let columns = COLUMNS_MAP[runType.value] || COLUMNS_MAP["default"];
      runTimes.value = runTimesVal || Object.fromEntries(
        columns.map((item) => [item, ["week", "day", "month"].includes(item) ? 1 : 0])
      );
    };
    const handleGenCronExpr = () => {
      runCron.value = genCronExprByType(runType.value, runTimes.value);
    };
    const textLabel = computed(() => {
      const matchCron = CRON_TIMES_LIST.find((i) => i.value === runType.value) || { label: "" };
      const prefix = matchCron.label || "";
      return prefix ? prefix + " " + inputValue.value : "";
    });
    onMounted(() => {
      if (props.value) {
        unFirstInitType.value = false;
        const runObj = genRunStrByCron(props.value);
        runType.value = runObj.runType;
        runTimes.value = runObj.runTimes;
      } else {
        runType.value = "minute";
        setDefaultTime();
      }
    });
    watch(
      () => runType.value,
      () => {
        if (unFirstInitType.value) {
          setDefaultTime();
        } else {
          unFirstInitType.value = true;
        }
      },
      { immediate: true }
    );
    watch(
      () => props.value,
      (val) => {
        if (val) {
          console.log("props.value", props.value);
          runCron.value = val || "";
          const runObj = genRunStrByCron(props.value);
          runType.value = runObj.runType;
          runTimes.value = runObj.runTimes;
        } else {
          runType.value = "";
          setDefaultTime();
        }
      },
      { immediate: false }
    );
    watch(
      () => runCron.value,
      (val, oldVal) => {
        const dateStr = `${$t("cronPicker.every")}${COLUMNS_HEADER_MAP[runType.value]} ${inputValue.value}`;
        runCron.value = val;
        emit("extra", { val, dateStr });
        if (val !== oldVal) {
          emit("change", val);
        }
      }
    );
    return (_ctx, _cache) => {
      const _component_a_input = Input;
      const _component_a_button = Button;
      const _component_a_input_group = InputGroup;
      return openBlock(), createBlock(unref(ConfigProvider), { prefixCls: "dm-ui" }, {
        default: withCtx(() => [
          createElementVNode("div", _hoisted_1, [
            _ctx.onlyShowText ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(textLabel.value), 1)) : (openBlock(), createBlock(_component_a_input_group, {
              key: 1,
              compact: "",
              style: { "display": "flex" }
            }, {
              default: withCtx(() => [
                !_ctx.$slots.default ? (openBlock(), createBlock(_component_a_input, {
                  key: 0,
                  class: "cron-picker-input",
                  size: _ctx.size,
                  disabled: _ctx.disabled,
                  value: unref(runCron),
                  "onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(runCron) ? runCron.value = $event : null),
                  placeholder: _ctx.placeholder
                }, null, 8, ["size", "disabled", "value", "placeholder"])) : createCommentVNode("", true),
                !_ctx.disabled ? (openBlock(), createBlock(Panel, {
                  key: 1,
                  trigger: _ctx.trigger,
                  title: _ctx.title,
                  size: _ctx.size,
                  placement: _ctx.placement,
                  runType: runType.value,
                  "onUpdate:runType": _cache[1] || (_cache[1] = ($event) => runType.value = $event),
                  runTypes: _ctx.runTypes,
                  runtypeList: runtypeList.value,
                  disabled: _ctx.disabled,
                  runTimes: runTimes.value,
                  format: _ctx.format,
                  onHandleGenCronExpr: handleGenCronExpr
                }, {
                  default: withCtx(() => [
                    renderSlot(_ctx.$slots, "default", {}, () => [
                      createVNode(_component_a_button, {
                        size: _ctx.size,
                        disabled: _ctx.disabled,
                        class: "cron-picker-panel-button"
                      }, {
                        default: withCtx(() => [
                          createTextVNode(toDisplayString(unref($t)("cronPicker.usePickerBtnText")), 1)
                        ]),
                        _: 1
                      }, 8, ["size", "disabled"])
                    ])
                  ]),
                  _: 3
                }, 8, ["trigger", "title", "size", "placement", "runType", "runTypes", "runtypeList", "disabled", "runTimes", "format"])) : createCommentVNode("", true)
              ]),
              _: 3
            }))
          ])
        ]),
        _: 3
      });
    };
  }
});
const style_less_vue_type_style_index_0_src_true_lang = "";
export {
  _sfc_main as default
};