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

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

import { Input, Popover } from "ant-design-vue/es";
import { defineComponent, ref, computed, watch, nextTick, openBlock, createBlock, withCtx, unref, isRef, createCommentVNode, createVNode } from "vue";
import { $t } from "../../i18n/index";
import { PICKER_TYPE_LIST, DEFAULT_PICKER_FORMAT, TYPE_VALUE_RESOLVER_MAP } from "../utils/util";
import PickerPanel from "./panel/index.vue";
import { useVModel } from "@vueuse/core";
import { ClockCircleOutlined } from "@ant-design/icons-vue";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    size: { default: "default" },
    title: { default: $t("cronPicker.title") },
    placement: { default: "bottomLeft" },
    panelVisible: { type: Boolean },
    disabled: { type: Boolean, default: false },
    runtypeList: { default: () => [] },
    runTypes: { default: () => [] },
    runTimes: {},
    format: { default: "" },
    runType: {}
  },
  emits: ["update:runTimes"],
  setup(__props, { emit: __emit }) {
    const visible = ref(false);
    const props = __props;
    const emit = __emit;
    const valueRunTimes = useVModel(props, "runTimes", emit);
    const calcPanelWidth = ref(0);
    const isValidType = computed(() => {
      console.log(props.runType);
      return PICKER_TYPE_LIST.includes(props.runType);
    });
    const formatPickerTime = () => {
      const format = DEFAULT_PICKER_FORMAT[isValidType.value ? props.runType : "default"];
      const { formatter } = TYPE_VALUE_RESOLVER_MAP[props.runType] || TYPE_VALUE_RESOLVER_MAP["default"];
      return formatter(valueRunTimes.value, props.format || format);
    };
    const inputValue = computed(() => {
      return formatPickerTime();
    });
    const pickerInput = ref();
    const pickerPanel = ref();
    watch(
      () => visible.value,
      (val) => {
        if (val) {
          calcPanelWidth.value = pickerInput.value.$el.offsetWidth;
          nextTick(() => {
            pickerPanel.value && pickerPanel.value.updateScroll();
          });
        }
      }
    );
    return (_ctx, _cache) => {
      const _component_a_input = Input;
      const _component_a_popover = Popover;
      return openBlock(), createBlock(_component_a_popover, {
        visible: visible.value,
        "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => visible.value = $event),
        trigger: "click",
        disabled: _ctx.disabled,
        placement: "bottomLeft",
        overlayClassName: "cron-picker-picker-panel",
        overlayStyle: { width: `${calcPanelWidth.value}px` },
        align: {
          offset: [0, -2],
          overflow: {
            adjustX: 1,
            adjustY: 1
          },
          points: ["tl", "tl"],
          targetOffset: [0, 0]
        }
      }, {
        content: withCtx(() => [
          isValidType.value ? (openBlock(), createBlock(PickerPanel, {
            key: 0,
            ref_key: "pickerPanel",
            ref: pickerPanel,
            type: _ctx.runType,
            value: _ctx.runTimes,
            runTimes: unref(valueRunTimes),
            "onUpdate:runTimes": _cache[1] || (_cache[1] = ($event) => isRef(valueRunTimes) ? valueRunTimes.value = $event : null)
          }, null, 8, ["type", "value", "runTimes"])) : createCommentVNode("", true)
        ]),
        default: withCtx(() => [
          createVNode(_component_a_input, {
            ref_key: "pickerInput",
            ref: pickerInput,
            value: inputValue.value,
            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
            disabled: !isValidType.value,
            class: "cron-picker-picker-input"
          }, {
            suffix: withCtx(() => [
              createVNode(unref(ClockCircleOutlined))
            ]),
            _: 1
          }, 8, ["value", "disabled"])
        ]),
        _: 1
      }, 8, ["visible", "disabled", "overlayStyle"]);
    };
  }
});
export {
  _sfc_main as default
};