@vunk/form 2.18.1 → 2.19.0

package/components/var-datetime-picker/index.cjs

@@ -1,333 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var formItem = require('@vunk/form/components/form-item');
-var vue = require('vue');
-var composables = require('@vunk/form/composables');
-var elementPlus$1 = require('@vunk/form/composables/element-plus');
-var vant = require('vant');
-var ui = require('@varlet/ui');
-var elementPlus = require('element-plus');
-require('vant/es/popup/style');
-require('@varlet/ui/es/date-picker/style');
-require('@varlet/ui/es/time-picker/style');
-var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
-
-const props = {
-  ...formItem._VkfFormItemCtx.props,
-  modelValue: null,
-  readonly: Boolean,
-  type: {
-    type: String,
-    default: "month"
-  },
-  // allowed-dates
-  allowedDates: {
-    type: Function,
-    default: void 0
-  },
-  useSeconds: Boolean,
-  valueFormat: {
-    type: String,
-    default: "YYYY-MM-DD HH:mm"
-  }
-};
-const emits = {
-  "update:modelValue": null
-};
-
-const VarDatePickerTypeOptions = [
-  {
-    label: "\u65E5\u671F",
-    value: "date" /* date */,
-    format: "YYYY-MM-DD"
-  },
-  {
-    label: "\u5E74",
-    value: "year" /* year */,
-    format: "YYYY"
-  },
-  {
-    label: "\u6708",
-    value: "month" /* month */,
-    format: "YYYY-MM"
-  }
-];
-const VarDatePickerTypeReflect = VarDatePickerTypeOptions.reduce((acc, cur) => {
-  acc[cur.value] = cur;
-  return acc;
-}, {});
-const ElDatePickerTypeOptions = [
-  {
-    label: "\u65E5\u671F",
-    value: "date",
-    varDatePickerType: "date" /* date */,
-    isRange: false
-  },
-  {
-    label: "\u5E74",
-    value: "year",
-    varDatePickerType: "year" /* year */,
-    isRange: false
-  },
-  {
-    label: "\u6708",
-    value: "month",
-    varDatePickerType: "month" /* month */,
-    isRange: false
-  },
-  {
-    value: "dates",
-    label: "\u591A\u9009\u65E5\u671F",
-    varDatePickerType: "date" /* date */,
-    isRange: false
-  },
-  {
-    value: "week",
-    label: "\u5468",
-    varDatePickerType: "date" /* date */,
-    isRange: false
-  },
-  {
-    value: "datetime",
-    label: "\u65E5\u671F\u65F6\u95F4",
-    varDatePickerType: "date" /* date */,
-    isRange: false,
-    hasTime: true
-  },
-  {
-    value: "datetimerange",
-    label: "\u65E5\u671F\u65F6\u95F4\u8303\u56F4",
-    varDatePickerType: "date" /* date */,
-    /**
-     * 采用独立的时间选择器
-     */
-    isRange: false,
-    hasTime: true
-  },
-  {
-    value: "daterange",
-    label: "\u65E5\u671F\u8303\u56F4",
-    varDatePickerType: "date" /* date */,
-    isRange: true
-  },
-  {
-    value: "monthrange",
-    label: "\u6708\u8303\u56F4",
-    varDatePickerType: "month" /* month */,
-    isRange: true
-  }
-];
-const ElDatePickerTypeReflect = ElDatePickerTypeOptions.reduce((acc, cur) => {
-  acc[cur.value] = cur;
-  return acc;
-}, {});
-
-var _sfc_main = vue.defineComponent({
-  name: "VkfVarDatetimePicker",
-  components: {
-    VkfFormItem: formItem.VkfFormItem,
-    ElDatePicker: elementPlus.ElDatePicker,
-    DatePicker: ui.DatePicker,
-    TimePicker: ui.TimePicker,
-    Popup: vant.Popup,
-    ElTabPane: elementPlus.ElTabPane,
-    ElTabs: elementPlus.ElTabs
-  },
-  props,
-  emits,
-  setup(props2, { emit }) {
-    const formItemBindProps = formItem._VkfFormItemCtx.createBindProps(props2);
-    const { tr } = elementPlus$1.useLocale();
-    const varDatePickerType = vue.computed(() => {
-      return ElDatePickerTypeReflect[props2.type].varDatePickerType;
-    });
-    const varDatePickerFormat = vue.computed(() => {
-      return VarDatePickerTypeReflect[varDatePickerType.value].format;
-    });
-    const isRange = vue.computed(() => {
-      return !!ElDatePickerTypeReflect[props2.type].isRange;
-    });
-    const hasTime = vue.computed(() => {
-      return !!ElDatePickerTypeReflect[props2.type].hasTime;
-    });
-    const getDateFromModelValue = () => {
-      return props2.modelValue ? elementPlus.dayjs(props2.modelValue).format(varDatePickerFormat.value) : "";
-    };
-    const getTimeFromModelValue = () => {
-      return props2.modelValue ? elementPlus.dayjs(props2.modelValue).format(props2.useSeconds ? "HH:mm:ss" : "HH:mm") : "";
-    };
-    const tansformModelValueByDateValue = (dateValue) => {
-      if (!dateValue) return "";
-      const date = elementPlus.dayjs(dateValue, varDatePickerFormat.value);
-      if (!props2.modelValue) {
-        return date.format(props2.valueFormat);
-      }
-      return elementPlus.dayjs(props2.modelValue).year(date.year()).month(date.month()).date(date.date()).format(props2.valueFormat);
-    };
-    const tansformModelValueByTimeValue = (timeValue) => {
-      if (!timeValue) return "";
-      const time = elementPlus.dayjs(
-        timeValue,
-        props2.useSeconds ? "HH:mm:ss" : "HH:mm"
-      );
-      if (!props2.modelValue) {
-        return time.format(props2.valueFormat);
-      }
-      return elementPlus.dayjs(props2.modelValue).hour(time.hour()).minute(time.minute()).second(time.second()).format(props2.valueFormat);
-    };
-    const valueDate = vue.computed({
-      get() {
-        return getDateFromModelValue();
-      },
-      set(val) {
-        const nModelValue = tansformModelValueByDateValue(val);
-        emit("update:modelValue", nModelValue);
-      }
-    });
-    const valueTime = vue.computed({
-      get() {
-        return getTimeFromModelValue();
-      },
-      set(val) {
-        const nModelValue = tansformModelValueByTimeValue(val);
-        emit("update:modelValue", nModelValue);
-      }
-    });
-    const readonly = composables.useComputedReadonly(props2);
-    const popupShow = vue.ref(false);
-    const currentTab = vue.ref("date");
-    const inputBlur = (e) => {
-      const target = e.target;
-      target.blur();
-    };
-    const preInput = () => {
-      if (readonly.value) return;
-      if (props2.modelValue && hasTime.value) {
-        currentTab.value = "time";
-      }
-      popupShow.value = true;
-    };
-    return {
-      preInput,
-      inputBlur,
-      popupShow,
-      formItemBindProps,
-      varDatePickerType,
-      isRange,
-      hasTime,
-      currentTab,
-      valueTime,
-      valueDate,
-      tr
-    };
-  }
-});
-
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ElDatePicker = vue.resolveComponent("ElDatePicker");
-  const _component_DatePicker = vue.resolveComponent("DatePicker");
-  const _component_ElTabPane = vue.resolveComponent("ElTabPane");
-  const _component_TimePicker = vue.resolveComponent("TimePicker");
-  const _component_ElTabs = vue.resolveComponent("ElTabs");
-  const _component_Popup = vue.resolveComponent("Popup");
-  const _component_VkfFormItem = vue.resolveComponent("VkfFormItem");
-  return vue.openBlock(), vue.createBlock(
-    _component_VkfFormItem,
-    vue.normalizeProps(vue.guardReactiveProps(_ctx.formItemBindProps)),
-    {
-      default: vue.withCtx(() => [
-        vue.createElementVNode(
-          "div",
-          {
-            onClickCapture: _cache[0] || (_cache[0] = (...args) => _ctx.preInput && _ctx.preInput(...args))
-          },
-          [
-            vue.createVNode(_component_ElDatePicker, {
-              "popper-class": "var-datetime-picker-el-popover",
-              "model-value": _ctx.modelValue,
-              type: _ctx.type,
-              readonly: true,
-              "value-format": _ctx.valueFormat,
-              onFocus: _ctx.inputBlur
-            }, null, 8, ["model-value", "type", "value-format", "onFocus"])
-          ],
-          32
-          /* NEED_HYDRATION */
-        ),
-        vue.createVNode(_component_Popup, {
-          show: _ctx.popupShow,
-          "onUpdate:show": _cache[4] || (_cache[4] = ($event) => _ctx.popupShow = $event),
-          position: "bottom",
-          round: ""
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(_component_ElTabs, {
-              modelValue: _ctx.currentTab,
-              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.currentTab = $event),
-              class: vue.normalizeClass(["var-datetime-picker-el-tabs", {
-                "is-hidden": !_ctx.hasTime
-              }])
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_ElTabPane, {
-                  label: _ctx.valueDate || _ctx.tr("el.datepicker.selectDate", "\u9009\u62E9\u65E5\u671F"),
-                  name: "date"
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_DatePicker, {
-                      modelValue: _ctx.valueDate,
-                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.valueDate = $event),
-                      type: _ctx.varDatePickerType,
-                      range: _ctx.isRange,
-                      "allowed-dates": _ctx.allowedDates
-                    }, null, 8, ["modelValue", "type", "range", "allowed-dates"])
-                  ]),
-                  _: 1
-                  /* STABLE */
-                }, 8, ["label"]),
-                _ctx.hasTime ? (vue.openBlock(), vue.createBlock(_component_ElTabPane, {
-                  key: 0,
-                  label: _ctx.valueTime || _ctx.tr("el.datepicker.selectTime", "\u9009\u62E9\u65F6\u95F4"),
-                  name: "time"
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_TimePicker, {
-                      modelValue: _ctx.valueTime,
-                      "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.valueTime = $event),
-                      format: "24hr"
-                    }, null, 8, ["modelValue"])
-                  ]),
-                  _: 1
-                  /* STABLE */
-                }, 8, ["label"])) : vue.createCommentVNode("v-if", true)
-              ]),
-              _: 1
-              /* STABLE */
-            }, 8, ["modelValue", "class"])
-          ]),
-          _: 1
-          /* STABLE */
-        }, 8, ["show"])
-      ]),
-      _: 1
-      /* STABLE */
-    },
-    16
-    /* FULL_PROPS */
-  );
-}
-var VkfVarDatetimePicker = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "D:\\labCode\\vunk-form2\\packages\\components\\var-datetime-picker\\src\\index.vue"]]);
-
-var types = /*#__PURE__*/Object.freeze({
-  __proto__: null
-});
-
-VkfVarDatetimePicker.install = (app) => {
-  app.component(VkfVarDatetimePicker.name, VkfVarDatetimePicker);
-};
-
-exports.VkfVarDatetimePicker = VkfVarDatetimePicker;
-exports.__VkfVarDatetimePicker = types;
-exports.default = VkfVarDatetimePicker;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const V=require("@vunk/form/components/form-item"),t=require("vue"),h=require("@vunk/form/composables"),C=require("@vunk/form/composables/element-plus"),E=require("vant"),b=require("@varlet/ui"),n=require("element-plus");require("vant/es/popup/style");require("@varlet/ui/es/date-picker/style");require("@varlet/ui/es/time-picker/style");const w=require("../_plugin-vue_export-helper.cjs"),R={...V._VkfFormItemCtx.props,modelValue:null,readonly:Boolean,type:{type:String,default:"month"},allowedDates:{type:Function,default:void 0},useSeconds:Boolean,valueFormat:{type:String,default:"YYYY-MM-DD HH:mm"}},Y={"update:modelValue":null},M=[{label:"日期",value:"date",format:"YYYY-MM-DD"},{label:"年",value:"year",format:"YYYY"},{label:"月",value:"month",format:"YYYY-MM"}],B=M.reduce((e,a)=>(e[a.value]=a,e),{}),I=[{label:"日期",value:"date",varDatePickerType:"date",isRange:!1},{label:"年",value:"year",varDatePickerType:"year",isRange:!1},{label:"月",value:"month",varDatePickerType:"month",isRange:!1},{value:"dates",label:"多选日期",varDatePickerType:"date",isRange:!1},{value:"week",label:"周",varDatePickerType:"date",isRange:!1},{value:"datetime",label:"日期时间",varDatePickerType:"date",isRange:!1,hasTime:!0},{value:"datetimerange",label:"日期时间范围",varDatePickerType:"date",isRange:!1,hasTime:!0},{value:"daterange",label:"日期范围",varDatePickerType:"date",isRange:!0},{value:"monthrange",label:"月范围",varDatePickerType:"month",isRange:!0}],k=I.reduce((e,a)=>(e[a.value]=a,e),{}),S=t.defineComponent({name:"VkfVarDatetimePicker",components:{VkfFormItem:V.VkfFormItem,ElDatePicker:n.ElDatePicker,DatePicker:b.DatePicker,TimePicker:b.TimePicker,Popup:E.Popup,ElTabPane:n.ElTabPane,ElTabs:n.ElTabs},props:R,emits:Y,setup(e,{emit:a}){const y=V._VkfFormItemCtx.createBindProps(e),{tr:P}=C.useLocale(),s=t.computed(()=>k[e.type].varDatePickerType),i=t.computed(()=>B[s.value].format),d=t.computed(()=>!!k[e.type].isRange),u=t.computed(()=>!!k[e.type].hasTime),m=()=>e.modelValue?n.dayjs(e.modelValue).format(i.value):"",c=()=>e.modelValue?n.dayjs(e.modelValue).format(e.useSeconds?"HH:mm:ss":"HH:mm"):"",p=r=>{if(!r)return"";const o=n.dayjs(r,i.value);return e.modelValue?n.dayjs(e.modelValue).year(o.year()).month(o.month()).date(o.date()).format(e.valueFormat):o.format(e.valueFormat)},v=r=>{if(!r)return"";const o=n.dayjs(r,e.useSeconds?"HH:mm:ss":"HH:mm");return e.modelValue?n.dayjs(e.modelValue).hour(o.hour()).minute(o.minute()).second(o.second()).format(e.valueFormat):o.format(e.valueFormat)},f=t.computed({get(){return m()},set(r){const o=p(r);a("update:modelValue",o)}}),l=t.computed({get(){return c()},set(r){const o=v(r);a("update:modelValue",o)}}),F=h.useComputedReadonly(e),T=t.ref(!1),D=t.ref("date");return{preInput:()=>{F.value||(e.modelValue&&u.value&&(D.value="time"),T.value=!0)},inputBlur:r=>{r.target.blur()},popupShow:T,formItemBindProps:y,varDatePickerType:s,isRange:d,hasTime:u,currentTab:D,valueTime:l,valueDate:f,tr:P}}});function q(e,a,y,P,s,i){const d=t.resolveComponent("ElDatePicker"),u=t.resolveComponent("DatePicker"),m=t.resolveComponent("ElTabPane"),c=t.resolveComponent("TimePicker"),p=t.resolveComponent("ElTabs"),v=t.resolveComponent("Popup"),f=t.resolveComponent("VkfFormItem");return t.openBlock(),t.createBlock(f,t.normalizeProps(t.guardReactiveProps(e.formItemBindProps)),{default:t.withCtx(()=>[t.createElementVNode("div",{onClickCapture:a[0]||(a[0]=(...l)=>e.preInput&&e.preInput(...l))},[t.createVNode(d,{"popper-class":"var-datetime-picker-el-popover","model-value":e.modelValue,type:e.type,readonly:!0,"value-format":e.valueFormat,onFocus:e.inputBlur},null,8,["model-value","type","value-format","onFocus"])],32),t.createVNode(v,{show:e.popupShow,"onUpdate:show":a[4]||(a[4]=l=>e.popupShow=l),position:"bottom",round:""},{default:t.withCtx(()=>[t.createVNode(p,{modelValue:e.currentTab,"onUpdate:modelValue":a[3]||(a[3]=l=>e.currentTab=l),class:t.normalizeClass(["var-datetime-picker-el-tabs",{"is-hidden":!e.hasTime}])},{default:t.withCtx(()=>[t.createVNode(m,{label:e.valueDate||e.tr("el.datepicker.selectDate","选择日期"),name:"date"},{default:t.withCtx(()=>[t.createVNode(u,{modelValue:e.valueDate,"onUpdate:modelValue":a[1]||(a[1]=l=>e.valueDate=l),type:e.varDatePickerType,range:e.isRange,"allowed-dates":e.allowedDates},null,8,["modelValue","type","range","allowed-dates"])]),_:1},8,["label"]),e.hasTime?(t.openBlock(),t.createBlock(m,{key:0,label:e.valueTime||e.tr("el.datepicker.selectTime","选择时间"),name:"time"},{default:t.withCtx(()=>[t.createVNode(c,{modelValue:e.valueTime,"onUpdate:modelValue":a[2]||(a[2]=l=>e.valueTime=l),format:"24hr"},null,8,["modelValue"])]),_:1},8,["label"])):t.createCommentVNode("",!0)]),_:1},8,["modelValue","class"])]),_:1},8,["show"])]),_:1},16)}const g=w._export_sfc(S,[["render",q]]),H=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"}));exports.VkfVarDatetimePicker=g;exports.__VkfVarDatetimePicker=H;exports.default=g;