@vunk/form 1.1.84 → 1.2.0

package/components/van-cascader/index.cjs

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var cascader = require('@vunk/form/components/cascader');
+var vue = require('vue');
+var formItem = require('@vunk/form/components/form-item');
+var vant = require('vant');
+var elementPlus = require('element-plus');
+require('vant/es/cascader/style');
+require('vant/es/popup/style');
+var composables = require('@vunk/form/composables');
+var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
+
+const props = {
+  ...cascader._VkfCascaderCtx.props
+};
+const emits = {
+  ...cascader._VkfCascaderCtx.emits
+};
+
+var _sfc_main = vue.defineComponent({
+  name: "VkfVanCascader",
+  components: {
+    VkfFormItem: formItem.VkfFormItem,
+    Cascader: vant.Cascader,
+    Popup: vant.Popup,
+    ElSelect: elementPlus.ElSelect
+  },
+  emits,
+  props,
+  setup(props2, { emit }) {
+    const formItemBindProps = formItem._VkfFormItemCtx.createBindProps(props2);
+    const popupShow = vue.ref(false);
+    const fieldValue = vue.ref("");
+    const cascaderValue = vue.ref("");
+    const options = cascader._VkfCascaderUse.useOptions(props2, emit);
+    const readonly = composables.useComputedReadonly(props2);
+    vue.watch(() => props2.modelValue, (val) => {
+      if (Array.isArray(val) && val.length) {
+        fieldValue.value = val.join("/");
+        const last = val.at(-1);
+        if (typeof last === "string" || typeof last === "number") {
+          cascaderValue.value = last + "";
+        }
+      }
+    }, {
+      deep: true
+    });
+    const handleFinish = ({ selectedOptions }) => {
+      popupShow.value = false;
+      emit("update:modelValue", selectedOptions.map((item) => item.value));
+    };
+    const preInput = () => {
+      if (readonly.value) return;
+      popupShow.value = true;
+    };
+    return {
+      formItemBindProps,
+      fieldValue,
+      popupShow,
+      handleFinish,
+      cascaderValue,
+      options,
+      preInput
+    };
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElSelect = vue.resolveComponent("ElSelect");
+  const _component_Cascader = vue.resolveComponent("Cascader");
+  const _component_Popup = vue.resolveComponent("Popup");
+  const _component_VkfFormItem = vue.resolveComponent("VkfFormItem");
+  return vue.openBlock(), vue.createBlock(
+    _component_VkfFormItem,
+    vue.mergeProps({ class: "vkf-van-cascader" }, _ctx.formItemBindProps),
+    {
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_ElSelect, {
+          "popper-class": "vkf-van-cascader-input",
+          "model-value": _ctx.fieldValue,
+          onClick: _ctx.preInput
+        }, null, 8, ["model-value", "onClick"]),
+        vue.createVNode(_component_Popup, {
+          show: _ctx.popupShow,
+          "onUpdate:show": _cache[2] || (_cache[2] = ($event) => _ctx.popupShow = $event),
+          round: "",
+          position: "bottom"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_Cascader, {
+              modelValue: _ctx.cascaderValue,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.cascaderValue = $event),
+              onClose: _cache[1] || (_cache[1] = ($event) => _ctx.popupShow = false),
+              options: _ctx.options,
+              "field-names": {
+                text: "label",
+                value: "value",
+                children: "children"
+              },
+              onFinish: _ctx.handleFinish
+            }, null, 8, ["modelValue", "options", "onFinish"])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["show"])
+      ]),
+      _: 1
+      /* STABLE */
+    },
+    16
+    /* FULL_PROPS */
+  );
+}
+var VkfVanCascader = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/van-cascader/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfVanCascader.install = (app) => {
+  app.component(VkfVanCascader.name, VkfVanCascader);
+};
+
+exports.VkfVanCascader = VkfVanCascader;
+exports.__VkfVanCascader = types;
+exports.default = VkfVanCascader;

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

@@ -0,0 +1,330 @@
+'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 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
+  },
+  emits,
+  props,
+  setup(props2, { emit }) {
+    const formItemBindProps = formItem._VkfFormItemCtx.createBindProps(props2);
+    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
+    };
+  }
+});
+
+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,
+              onFocus: _ctx.inputBlur,
+              type: _ctx.type,
+              readonly: true,
+              "value-format": _ctx.valueFormat
+            }, null, 8, ["model-value", "onFocus", "type", "value-format"])
+          ],
+          32
+          /* NEED_HYDRATION */
+        ),
+        vue.createVNode(_component_Popup, {
+          position: "bottom",
+          show: _ctx.popupShow,
+          "onUpdate:show": _cache[4] || (_cache[4] = ($event) => _ctx.popupShow = $event),
+          round: ""
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ElTabs, {
+              class: vue.normalizeClass(["var-datetime-picker-el-tabs", {
+                "is-hidden": !_ctx.hasTime
+              }]),
+              modelValue: _ctx.currentTab,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.currentTab = $event)
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_ElTabPane, {
+                  label: _ctx.valueDate || "\u9009\u62E9\u65E5\u671F",
+                  name: "date"
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_DatePicker, {
+                      type: _ctx.varDatePickerType,
+                      range: _ctx.isRange,
+                      modelValue: _ctx.valueDate,
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.valueDate = $event),
+                      "allowed-dates": _ctx.allowedDates
+                    }, null, 8, ["type", "range", "modelValue", "allowed-dates"])
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["label"]),
+                _ctx.hasTime ? (vue.openBlock(), vue.createBlock(_component_ElTabPane, {
+                  key: 0,
+                  label: _ctx.valueTime || "\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, ["class", "modelValue"])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["show"])
+      ]),
+      _: 1
+      /* STABLE */
+    },
+    16
+    /* FULL_PROPS */
+  );
+}
+var VkfVarDatetimePicker = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/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;