hy-dispatch-ui-v3 0.2.2 → 0.2.3

package/lib/components/appDatePicker/appDatePicker.vue.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var elementPlus = require('element-plus');
+var date = require('../../utils/date.js');
 var is = require('../../utils/is.js');
+var useLocale = require('../../hooks/useLocale.js');
 
 import "./style/appDatePicker.scss";
 
@@ -25,7 +27,15 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       type: String,
       default: "date"
       // 'year' | 'years' |'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange'
-    }
+    },
+    format: {
+      type: String
+    },
+    valueFormat: {
+      type: String
+    },
+    startPlaceholder: String,
+    endPlaceholder: String
   }, {
     "modelValue": { type: [String, Date, Array] },
     "modelModifiers": {},
@@ -38,10 +48,43 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
+    const { t } = useLocale.useLocale();
     const appDatePicker = vue.useTemplateRef("appDatePicker");
     const dateValue = vue.useModel(__props, "modelValue");
     const startValue = vue.useModel(__props, "start");
     const endValue = vue.useModel(__props, "end");
+    const startPlaceholder = vue.computed(() => {
+      if (props.startPlaceholder) {
+        return props.startPlaceholder;
+      }
+      switch (props.type) {
+        case "daterange":
+          return t("datePicker.startDate");
+        case "datetimerange":
+          return t("datePicker.startDateTime");
+        case "monthrange":
+          return t("datePicker.startMonth");
+        case "yearrange":
+          return t("datePicker.startYear");
+      }
+      return null;
+    });
+    const endPlaceholder = vue.computed(() => {
+      if (props.endPlaceholder) {
+        return props.endPlaceholder;
+      }
+      switch (props.type) {
+        case "daterange":
+          return t("datePicker.endDate");
+        case "datetimerange":
+          return t("datePicker.endDateTime");
+        case "monthrange":
+          return t("datePicker.endMonth");
+        case "yearrange":
+          return t("datePicker.endYear");
+      }
+      return null;
+    });
     vue.watch(
       () => [startValue.value, endValue.value],
       ([start, end]) => {
@@ -55,6 +98,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       },
       { immediate: true }
     );
+    function dateFormHandler(format) {
+      if (format) return format;
+      return date.getDefaultValueFormatByType(props.type);
+    }
     function onChangeHandler(value) {
       const { timeRangeFill } = props;
       const isFill = timeRangeFill && ["daterange"].includes(props.type);
@@ -94,7 +141,14 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         modelValue: dateValue.value,
         "onUpdate:modelValue": ($event) => dateValue.value = $event,
         type: __props.type
-      }, _ctx.$attrs, { onChange: onChangeHandler }), null, 16, ["modelValue", "onUpdate:modelValue", "type"]);
+      }, _ctx.$attrs, {
+        format: dateFormHandler(__props.format),
+        valueFormat: dateFormHandler(__props.valueFormat),
+        "start-placeholder": startPlaceholder.value,
+        "range-separator": vue.unref(t)("datePicker.to"),
+        "end-placeholder": endPlaceholder.value,
+        onChange: onChangeHandler
+      }), null, 16, ["modelValue", "onUpdate:modelValue", "type", "format", "valueFormat", "start-placeholder", "range-separator", "end-placeholder"]);
     };
   }
 });

package/lib/components/appDatePicker/index.js

@@ -6,6 +6,8 @@ var appDatePicker = require('./appDatePicker.vue.js');
 var handler = require('../../utils/handler.js');
 
 const AppDatePicker = handler.withInstall(appDatePicker.default);
+const ElDatePicker = handler.withInstall(appDatePicker.default, "ElDatePicker");
 
 exports.AppDatePicker = AppDatePicker;
+exports.ElDatePicker = ElDatePicker;
 exports.default = AppDatePicker;

package/lib/components/appForm/cpns/appFormItem.vue.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var elementPlus = require('element-plus');
 var iconsVue = require('@element-plus/icons-vue');
-var index$3 = require('../../appDatePicker/index.js');
-var index$4 = require('../../appOrgCascader/index.js');
 var index = require('../js/index.js');
 var form = require('../../../utils/form.js');
 var index$1 = require('../../appTooltip/index.js');
 var index$2 = require('../../appInput/index.js');
+var index$3 = require('../../appDatePicker/index.js');
+var index$4 = require('../../appTimePicker/index.js');
+var index$5 = require('../../appOrgCascader/index.js');
 var is = require('../../../utils/is.js');
 var handler = require('../../../utils/handler.js');
 
@@ -222,9 +223,38 @@ const _sfc_main = {
                 ],
                 64
                 /* STABLE_FRAGMENT */
-              )) : __props.column.type === "radio" ? (vue.openBlock(), vue.createElementBlock(
+              )) : __props.column.type === "time-picker" ? (vue.openBlock(), vue.createElementBlock(
                 vue.Fragment,
                 { key: 4 },
+                [
+                  vue.createCommentVNode(" \u65F6\u95F4\u9009\u62E9\u6846 "),
+                  __props.column.attrs.isRange ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.AppTimePicker), vue.mergeProps({
+                    key: 0,
+                    start: bindValue.value,
+                    "onUpdate:start": ($event) => bindValue.value = $event,
+                    end: bindValue2.value,
+                    "onUpdate:end": ($event) => bindValue2.value = $event,
+                    "is-range": true,
+                    style: { "width": "100%" }
+                  }, __props.column.attrs, {
+                    disabled: vue.unref(index.isDisabled)(props, __props.column),
+                    onChange: onChangeHandler
+                  }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "disabled"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$4.AppTimePicker), vue.mergeProps({
+                    key: 1,
+                    modelValue: bindValue.value,
+                    "onUpdate:modelValue": ($event) => bindValue.value = $event,
+                    "is-range": false,
+                    style: { "width": "100%" }
+                  }, __props.column.attrs, {
+                    disabled: vue.unref(index.isDisabled)(props, __props.column),
+                    onChange: onChangeHandler
+                  }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"]))
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              )) : __props.column.type === "radio" ? (vue.openBlock(), vue.createElementBlock(
+                vue.Fragment,
+                { key: 5 },
                 [
                   vue.createCommentVNode(" \u5355\u9009 "),
                   vue.createVNode(vue.unref(elementPlus.ElRadioGroup), vue.mergeProps({
@@ -240,7 +270,7 @@ const _sfc_main = {
                 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
               )) : __props.column.type === "checkbox" ? (vue.openBlock(), vue.createElementBlock(
                 vue.Fragment,
-                { key: 5 },
+                { key: 6 },
                 [
                   vue.createCommentVNode(" \u591A\u9009 "),
                   vue.createVNode(vue.unref(elementPlus.ElCheckboxGroup), vue.mergeProps({
@@ -256,7 +286,7 @@ const _sfc_main = {
                 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
               )) : __props.column.type === "switch" ? (vue.openBlock(), vue.createElementBlock(
                 vue.Fragment,
-                { key: 6 },
+                { key: 7 },
                 [
                   vue.createCommentVNode(" \u5F00\u5173 "),
                   vue.createVNode(vue.unref(elementPlus.ElSwitch), vue.mergeProps({
@@ -271,7 +301,7 @@ const _sfc_main = {
                 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
               )) : __props.column.type === "input-number" ? (vue.openBlock(), vue.createElementBlock(
                 vue.Fragment,
-                { key: 7 },
+                { key: 8 },
                 [
                   vue.createCommentVNode(" \u6570\u5B57\u8F93\u5165\u6846 "),
                   vue.createVNode(vue.unref(elementPlus.ElInputNumber), vue.mergeProps({
@@ -286,10 +316,10 @@ const _sfc_main = {
                 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
               )) : __props.column.type === "org-cascader" ? (vue.openBlock(), vue.createElementBlock(
                 vue.Fragment,
-                { key: 8 },
+                { key: 9 },
                 [
                   vue.createCommentVNode(" \u90E8\u95E8\u7EA7\u8054\u9009\u62E9\u6846 "),
-                  vue.createVNode(vue.unref(index$4.AppOrgCascader), vue.mergeProps({
+                  vue.createVNode(vue.unref(index$5.AppOrgCascader), vue.mergeProps({
                     modelValue: bindValue.value,
                     "onUpdate:modelValue": ($event) => bindValue.value = $event,
                     class: "w-full"

package/lib/components/appForm/js/useAppForm.js

@@ -3,7 +3,6 @@
 var vue = require('vue');
 var form = require('../../../utils/form.js');
 var handler = require('../../../utils/handler.js');
-var date = require('../../../utils/date.js');
 var is = require('../../../utils/is.js');
 var useLocale = require('../../../hooks/useLocale.js');
 
@@ -25,33 +24,9 @@ const genPlaceholderHandler = (config) => {
       placeholder = placeholder || t("hy.pleaseEnterPlaceholder", [label]);
       break;
     case "select":
-      placeholder = placeholder || t("hy.pleaseSelectPlaceholder", [label]);
-      break;
     case "date-picker":
-      if (["datetimerange", "daterange", "monthrange", "yearrange"].includes(
-        attrs?.type
-      )) {
-        switch (attrs.type) {
-          case "yearrange":
-            startPlaceholder = startPlaceholder || t("hy.startYear");
-            endPlaceholder = endPlaceholder || t("hy.endYear");
-            break;
-          case "monthrange":
-            startPlaceholder = startPlaceholder || t("hy.startMonth");
-            endPlaceholder = endPlaceholder || t("hy.endMonth");
-            break;
-          case "daterange":
-            startPlaceholder = startPlaceholder || t("hy.startDate");
-            endPlaceholder = endPlaceholder || t("hy.endDate");
-            break;
-          case "datetimerange":
-            startPlaceholder = startPlaceholder || t("hy.startDateTime");
-            endPlaceholder = endPlaceholder || t("hy.endDateTime");
-            break;
-        }
-      } else {
-        placeholder = placeholder || t("hy.pleaseSelectPlaceholder", [label]);
-      }
+    case "time-picker":
+      placeholder = placeholder || t("hy.pleaseSelectPlaceholder", [label]);
       break;
     default:
       placeholder = placeholder || label;
@@ -88,7 +63,7 @@ const rulesHandler = (config) => {
 };
 function appFormItemHandler(column = {}) {
   const label = genDefaultLabel(column);
-  const { placeholder, startPlaceholder, endPlaceholder } = genPlaceholderHandler({ ...column, label });
+  const { placeholder} = genPlaceholderHandler({ ...column, label });
   const attrs = { ...column.attrs || {}, placeholder };
   column = handler.mergeDeep(
     { ...column },
@@ -97,7 +72,8 @@ function appFormItemHandler(column = {}) {
       field: column.prop,
       label,
       readonly: column.readonly || false,
-      rules: rulesHandler(column)
+      rules: rulesHandler(column),
+      attrs
     }
   );
   if (/^(input)$/.test(column.type)) {
@@ -122,17 +98,6 @@ function appFormItemHandler(column = {}) {
         }
       }
     };
-  } else if (/^date-picker$/.test(column.type)) {
-    return {
-      ...column,
-      attrs: {
-        format: attrs.format || date.getDefaultValueFormatByType(attrs.type),
-        valueFormat: attrs.valueFormat || date.getDefaultValueFormatByType(attrs.type),
-        ...attrs,
-        startPlaceholder,
-        endPlaceholder
-      }
-    };
   } else if (/^(extra)$/.test(column.type)) {
     return {
       ...column,

package/lib/components/appIcon/appIcon.vue.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
+var useEnsureHyIcon = require('../../hooks/useEnsureHyIcon.js');
 
 import "./style/appIcon.scss";
 
@@ -27,6 +28,9 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   },
   setup(__props) {
     const props = __props;
+    const { ensureHyIcon } = useEnsureHyIcon.useEnsureHyIcon();
+    vue.onMounted(() => ensureHyIcon(props.svgName));
+    vue.watch(() => props.svgName, ensureHyIcon);
     const iconName = vue.computed(() => `#${props.prefix}${props.svgName}`);
     const svgClass = vue.computed(() => {
       if (props.className) {

package/lib/components/appSearch/cpns/appSearchItem.vue.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var elementPlus = require('element-plus');
 var index = require('../js/index.js');
-var index$2 = require('../../appDatePicker/index.js');
-var index$3 = require('../../appOrgCascader/index.js');
 var is = require('../../../utils/is.js');
 var form = require('../../../utils/form.js');
 var index$1 = require('../../appInput/index.js');
+var index$2 = require('../../appDatePicker/index.js');
+var index$3 = require('../../appTimePicker/index.js');
+var index$4 = require('../../appOrgCascader/index.js');
 
 const _sfc_main = {
   __name: "appSearchItem",
@@ -179,12 +180,41 @@ const _sfc_main = {
                       ],
                       64
                       /* STABLE_FRAGMENT */
-                    )) : __props.column.type === "org-cascader" ? (vue.openBlock(), vue.createElementBlock(
+                    )) : __props.column.type === "time-picker" ? (vue.openBlock(), vue.createElementBlock(
                       vue.Fragment,
                       { key: 4 },
+                      [
+                        vue.createCommentVNode(" \u65F6\u95F4\u9009\u62E9\u6846 "),
+                        __props.column.attrs.isRange ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.AppTimePicker), vue.mergeProps({
+                          key: 0,
+                          start: bindValue.value,
+                          "onUpdate:start": ($event) => bindValue.value = $event,
+                          end: bindValue2.value,
+                          "onUpdate:end": ($event) => bindValue2.value = $event,
+                          "is-range": true,
+                          style: { "width": "100%" }
+                        }, __props.column.attrs, {
+                          disabled: vue.unref(index.isDisabled)(props, __props.column),
+                          onChange: onChangeHandler
+                        }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "disabled"])) : (vue.openBlock(), vue.createBlock(vue.unref(index$3.AppTimePicker), vue.mergeProps({
+                          key: 1,
+                          modelValue: bindValue.value,
+                          "onUpdate:modelValue": ($event) => bindValue.value = $event,
+                          "is-range": false,
+                          style: { "width": "100%" }
+                        }, __props.column.attrs, {
+                          disabled: vue.unref(index.isDisabled)(props, __props.column),
+                          onChange: onChangeHandler
+                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"]))
+                      ],
+                      64
+                      /* STABLE_FRAGMENT */
+                    )) : __props.column.type === "org-cascader" ? (vue.openBlock(), vue.createElementBlock(
+                      vue.Fragment,
+                      { key: 5 },
                       [
                         vue.createCommentVNode(" \u90E8\u95E8\u7EA7\u8054\u9009\u62E9\u6846 "),
-                        vue.createVNode(vue.unref(index$3.AppOrgCascader), vue.mergeProps({
+                        vue.createVNode(vue.unref(index$4.AppOrgCascader), vue.mergeProps({
                           modelValue: bindValue.value,
                           "onUpdate:modelValue": ($event) => bindValue.value = $event
                         }, __props.column.attrs, {

package/lib/components/appSearch/js/index.js

@@ -11,7 +11,7 @@ function columnItemStyle(props, column) {
   if (is.isNumber(width)) {
     style.width = `${width}px`;
   } else if (is.isString(width)) {
-    style.width = /(px|em|rem|vw|vh)$/.test(width) ? width : `${width}px`;
+    style.width = /^\d+$/.test(width) ? `${width}px` : width;
   }
   return style;
 }

package/lib/components/appSearch/js/useAppSearch.js

@@ -3,7 +3,6 @@
 var vue = require('vue');
 var handler = require('../../../utils/handler.js');
 var form = require('../../../utils/form.js');
-var date = require('../../../utils/date.js');
 var useLocale = require('../../../hooks/useLocale.js');
 var is = require('../../../utils/is.js');
 
@@ -23,33 +22,12 @@ const genPlaceholderHandler = (config) => {
   switch (type) {
     case "input":
       placeholder = placeholder || t("hy.pleaseEnterPlaceholder", [label]);
+      break;
     case "select":
-      placeholder = placeholder || t("hy.pleaseSelectPlaceholder", [label]);
     case "date-picker":
-      if (["datetimerange", "daterange", "monthrange", "yearrange"].includes(
-        attrs?.type
-      )) {
-        switch (attrs.type) {
-          case "yearrange":
-            startPlaceholder = startPlaceholder || t("hy.startYear");
-            endPlaceholder = endPlaceholder || t("hy.endYear");
-            break;
-          case "monthrange":
-            startPlaceholder = startPlaceholder || t("hy.startMonth");
-            endPlaceholder = endPlaceholder || t("hy.endMonth");
-            break;
-          case "daterange":
-            startPlaceholder = startPlaceholder || t("hy.startDate");
-            endPlaceholder = endPlaceholder || t("hy.endDate");
-            break;
-          case "datetimerange":
-            startPlaceholder = startPlaceholder || t("hy.startDateTime");
-            endPlaceholder = endPlaceholder || t("hy.endDateTime");
-            break;
-        }
-      } else {
-        placeholder = placeholder || t("hy.pleaseSelectPlaceholder", [label]);
-      }
+    case "time-picker":
+      placeholder = placeholder || t("hy.pleaseSelectPlaceholder", [label]);
+      break;
     default:
       placeholder = placeholder || label;
   }
@@ -73,6 +51,8 @@ const genColumnWidth = (config) => {
         default:
           inputWidth = 145;
       }
+    } else if (type === "time-picker" && attrs.isRange) {
+      width = 350;
     } else {
       width = 250;
     }
@@ -107,7 +87,7 @@ const timeRangeOptionsHandler = (config) => {
 };
 function appSearchItemHandler(column = {}) {
   const label = genDefaultLabel(column);
-  const { placeholder, startPlaceholder, endPlaceholder } = genPlaceholderHandler({ ...column, label });
+  const { placeholder} = genPlaceholderHandler({ ...column, label });
   const attrs = {
     clearable: true,
     ...column.attrs || {},
@@ -123,7 +103,8 @@ function appSearchItemHandler(column = {}) {
       readonly: column.readonly || false,
       width,
       inputWidth,
-      timeRangeOptions: timeRangeOptionsHandler(column)
+      timeRangeOptions: timeRangeOptionsHandler(column),
+      attrs
     }
   );
   if (/^(input)$/.test(column.type)) {
@@ -148,17 +129,6 @@ function appSearchItemHandler(column = {}) {
         }
       }
     };
-  } else if (/^date-picker$/.test(column.type)) {
-    return {
-      ...column,
-      attrs: {
-        format: attrs.format || date.getDefaultValueFormatByType(attrs.type),
-        valueFormat: attrs.valueFormat || date.getDefaultValueFormatByType(attrs.type),
-        ...attrs,
-        startPlaceholder,
-        endPlaceholder
-      }
-    };
   }
   return column;
 }

package/lib/components/appTimePicker/appTimePicker.vue.js

@@ -0,0 +1,158 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var dayjs = require('dayjs');
+var elementPlus = require('element-plus');
+var useLocale = require('../../hooks/useLocale.js');
+var is = require('../../utils/is.js');
+
+import "./style/appTimePicker.scss";
+
+const __default__ = vue.defineComponent({
+  name: "AppTimePicker"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ vue.mergeModels({
+    isRange: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: "HH:mm:ss"
+    },
+    valueFormat: {
+      type: String
+    },
+    disabledSeconds: Function,
+    startPlaceholder: String,
+    endPlaceholder: String
+  }, {
+    "modelValue": {
+      type: [String, Number, Date, Array]
+    },
+    "modelModifiers": {},
+    "start": { type: [String, Number, Date] },
+    "startModifiers": {},
+    "end": { type: [String, Number, Date] },
+    "endModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:modelValue", "update:start", "update:end"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useLocale.useLocale();
+    const appTimePicker = vue.useTemplateRef("appTimePicker");
+    const timeValue = vue.useModel(__props, "modelValue");
+    const startValue = vue.useModel(__props, "start");
+    const endValue = vue.useModel(__props, "end");
+    const startPlaceholder = vue.computed(() => {
+      if (props.startPlaceholder) {
+        return props.startPlaceholder;
+      }
+      return t("timePicker.startTime");
+    });
+    const endPlaceholder = vue.computed(() => {
+      if (props.endPlaceholder) {
+        return props.endPlaceholder;
+      }
+      return t("timePicker.endTime");
+    });
+    const disabledSecondsHandler = vue.computed(() => {
+      return (hour, minute, role, comparingDate) => {
+        if (props.disabledSeconds) {
+          return props.disabledSeconds(hour, minute, role, comparingDate);
+        }
+        if (props.isRange && is.isArray(timeValue.value) && timeValue.value.length === 2) {
+          const spinnerValue = role === "start" ? timeValue.value[1] : timeValue.value[0];
+          const spinnerHours = sliceTime(spinnerValue, "HH");
+          const spinnerMinutes = sliceTime(spinnerValue, "mm");
+          const spinnerSeconds = sliceTime(spinnerValue, "ss");
+          const isEqual = spinnerHours === hour && spinnerMinutes === minute;
+          if (isEqual) {
+            return role === "start" ? makeRange(Math.max(0, spinnerSeconds), 60) : makeRange(0, Math.min(spinnerSeconds, 60));
+          }
+        }
+      };
+    });
+    vue.watch(
+      () => [startValue.value, endValue.value],
+      ([start, end]) => {
+        if (props.isRange && start && end) {
+          timeValue.value = [start, end];
+        }
+      },
+      { immediate: true }
+    );
+    const makeRange = (start, end) => {
+      const result = [];
+      for (let i = start; i <= end; i++) {
+        result.push(i);
+      }
+      return result;
+    };
+    const sliceTime = (date, format) => {
+      if (!date) return null;
+      const valueFormat = timeFormHandler(props.valueFormat);
+      if (!valueFormat) {
+        return Number(dayjs(date).format(format));
+      }
+      const result = valueFormat.match(format);
+      if (!result) return null;
+      return Number(date.slice(result.index, result.index + format.length));
+    };
+    function timeFormHandler(format) {
+      if (format) return format;
+      return "HH:mm:ss";
+    }
+    function onChangeHandler(value) {
+      const { timeRangeFill } = props;
+      if (props.isRange) {
+        startValue.value = is.isArray(value) ? value[0] : null;
+        endValue.value = is.isArray(value) ? value[1] : null;
+      } else {
+        timeValue.value = value;
+      }
+      emits("change", timeValue.value);
+    }
+    __expose({
+      focus() {
+        if (!vue.unref(appTimePicker)) return;
+        vue.unref(appTimePicker).focus();
+      },
+      blur() {
+        if (!vue.unref(appTimePicker)) return;
+        vue.unref(appTimePicker).blur();
+      },
+      handleOpen() {
+        if (!vue.unref(appTimePicker)) return;
+        vue.unref(appTimePicker).handleOpen();
+      },
+      handleClose() {
+        if (!vue.unref(appTimePicker)) return;
+        vue.unref(appTimePicker).handleClose();
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTimePicker), vue.mergeProps({
+        ref_key: "appTimePicker",
+        ref: appTimePicker,
+        modelValue: timeValue.value,
+        "onUpdate:modelValue": ($event) => timeValue.value = $event
+      }, _ctx.$attrs, {
+        isRange: __props.isRange,
+        format: timeFormHandler(__props.format),
+        valueFormat: timeFormHandler(__props.valueFormat),
+        disabledSeconds: disabledSecondsHandler.value,
+        "start-placeholder": startPlaceholder.value,
+        "range-separator": vue.unref(t)("timePicker.to"),
+        "end-placeholder": endPlaceholder.value,
+        onChange: onChangeHandler
+      }), null, 16, ["modelValue", "onUpdate:modelValue", "isRange", "format", "valueFormat", "disabledSeconds", "start-placeholder", "range-separator", "end-placeholder"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/appTimePicker/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var appTimePicker = require('./appTimePicker.vue.js');
+var handler = require('../../utils/handler.js');
+
+const AppTimePicker = handler.withInstall(appTimePicker.default);
+const ElTimePicker = handler.withInstall(appTimePicker.default, "ElTimePicker");
+
+exports.AppTimePicker = AppTimePicker;
+exports.ElTimePicker = ElTimePicker;
+exports.default = AppTimePicker;