hy-dispatch-ui-v3 0.2.2 → 0.2.3

package/es/components/appConfigProvider/appConfigProvider.vue.mjs

@@ -71,7 +71,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     videoPlayer: {
       type: Object,
       required: false
-    }
+    },
+    ensureHyIcon: Function
   },
   setup(__props) {
     const props = __props;
@@ -84,6 +85,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         permissionMap,
         audioPlayer,
         videoPlayer,
+        ensureHyIcon,
         ...config2
       } = globalConfig.value;
       return {

package/es/components/appDatePicker/appDatePicker.vue.mjs

@@ -1,6 +1,8 @@
-import { defineComponent, useTemplateRef, useModel, watch, unref, openBlock, createBlock, mergeProps, mergeModels } from 'vue';
+import { defineComponent, useTemplateRef, useModel, computed, watch, unref, openBlock, createBlock, mergeProps, mergeModels } from 'vue';
 import { ElDatePicker } from 'element-plus';
+import { getDefaultValueFormatByType } from '../../utils/date.mjs';
 import { isArray } from '../../utils/is.mjs';
+import { useLocale } from '../../hooks/useLocale.mjs';
 
 import "./style/appDatePicker.scss";
 
@@ -21,7 +23,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": {},
@@ -34,10 +44,43 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
+    const { t } = useLocale();
     const appDatePicker = useTemplateRef("appDatePicker");
     const dateValue = useModel(__props, "modelValue");
     const startValue = useModel(__props, "start");
     const endValue = useModel(__props, "end");
+    const startPlaceholder = 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 = 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;
+    });
     watch(
       () => [startValue.value, endValue.value],
       ([start, end]) => {
@@ -51,6 +94,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       },
       { immediate: true }
     );
+    function dateFormHandler(format) {
+      if (format) return format;
+      return getDefaultValueFormatByType(props.type);
+    }
     function onChangeHandler(value) {
       const { timeRangeFill } = props;
       const isFill = timeRangeFill && ["daterange"].includes(props.type);
@@ -90,7 +137,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": 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/es/components/appDatePicker/index.mjs

@@ -2,5 +2,6 @@ import _sfc_main from './appDatePicker.vue.mjs';
 import { withInstall } from '../../utils/handler.mjs';
 
 const AppDatePicker = withInstall(_sfc_main);
+const ElDatePicker = withInstall(_sfc_main, "ElDatePicker");
 
-export { AppDatePicker, AppDatePicker as default };
+export { AppDatePicker, ElDatePicker, AppDatePicker as default };

package/es/components/appForm/cpns/appFormItem.vue.mjs

@@ -1,12 +1,13 @@
 import { computed, unref, openBlock, createBlock, normalizeStyle, withCtx, createCommentVNode, createElementVNode, renderSlot, toDisplayString, createElementBlock, createVNode, Fragment, mergeProps } from 'vue';
 import { ElFormItem, ElIcon, ElSelect, ElRadioGroup, ElCheckboxGroup, ElSwitch, ElInputNumber } from 'element-plus';
 import { QuestionFilled } from '@element-plus/icons-vue';
-import { AppDatePicker } from '../../appDatePicker/index.mjs';
-import { AppOrgCascader } from '../../appOrgCascader/index.mjs';
 import { columnShowHandler, columnItemStyle, isRequired, renderText, isDisabled, optionsHandler } from '../js/index.mjs';
 import { setValueByProp, getValueByProp } from '../../../utils/form.mjs';
 import { AppTooltip } from '../../appTooltip/index.mjs';
 import { AppInput } from '../../appInput/index.mjs';
+import { AppDatePicker } from '../../appDatePicker/index.mjs';
+import { AppTimePicker } from '../../appTimePicker/index.mjs';
+import { AppOrgCascader } from '../../appOrgCascader/index.mjs';
 import { isArray } from '../../../utils/is.mjs';
 import { funRunHandler } from '../../../utils/handler.mjs';
 
@@ -218,9 +219,38 @@ const _sfc_main = {
                 ],
                 64
                 /* STABLE_FRAGMENT */
-              )) : __props.column.type === "radio" ? (openBlock(), createElementBlock(
+              )) : __props.column.type === "time-picker" ? (openBlock(), createElementBlock(
                 Fragment,
                 { key: 4 },
+                [
+                  createCommentVNode(" \u65F6\u95F4\u9009\u62E9\u6846 "),
+                  __props.column.attrs.isRange ? (openBlock(), createBlock(unref(AppTimePicker), 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: unref(isDisabled)(props, __props.column),
+                    onChange: onChangeHandler
+                  }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "disabled"])) : (openBlock(), createBlock(unref(AppTimePicker), mergeProps({
+                    key: 1,
+                    modelValue: bindValue.value,
+                    "onUpdate:modelValue": ($event) => bindValue.value = $event,
+                    "is-range": false,
+                    style: { "width": "100%" }
+                  }, __props.column.attrs, {
+                    disabled: unref(isDisabled)(props, __props.column),
+                    onChange: onChangeHandler
+                  }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"]))
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              )) : __props.column.type === "radio" ? (openBlock(), createElementBlock(
+                Fragment,
+                { key: 5 },
                 [
                   createCommentVNode(" \u5355\u9009 "),
                   createVNode(unref(ElRadioGroup), mergeProps({
@@ -236,7 +266,7 @@ const _sfc_main = {
                 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
               )) : __props.column.type === "checkbox" ? (openBlock(), createElementBlock(
                 Fragment,
-                { key: 5 },
+                { key: 6 },
                 [
                   createCommentVNode(" \u591A\u9009 "),
                   createVNode(unref(ElCheckboxGroup), mergeProps({
@@ -252,7 +282,7 @@ const _sfc_main = {
                 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
               )) : __props.column.type === "switch" ? (openBlock(), createElementBlock(
                 Fragment,
-                { key: 6 },
+                { key: 7 },
                 [
                   createCommentVNode(" \u5F00\u5173 "),
                   createVNode(unref(ElSwitch), mergeProps({
@@ -267,7 +297,7 @@ const _sfc_main = {
                 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
               )) : __props.column.type === "input-number" ? (openBlock(), createElementBlock(
                 Fragment,
-                { key: 7 },
+                { key: 8 },
                 [
                   createCommentVNode(" \u6570\u5B57\u8F93\u5165\u6846 "),
                   createVNode(unref(ElInputNumber), mergeProps({
@@ -282,7 +312,7 @@ const _sfc_main = {
                 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
               )) : __props.column.type === "org-cascader" ? (openBlock(), createElementBlock(
                 Fragment,
-                { key: 8 },
+                { key: 9 },
                 [
                   createCommentVNode(" \u90E8\u95E8\u7EA7\u8054\u9009\u62E9\u6846 "),
                   createVNode(unref(AppOrgCascader), mergeProps({

package/es/components/appForm/js/useAppForm.mjs

@@ -1,7 +1,6 @@
 import { unref, toRef } from 'vue';
 import { genValueByProp } from '../../../utils/form.mjs';
 import { funRunHandler, mergeDeep } from '../../../utils/handler.mjs';
-import { getDefaultValueFormatByType } from '../../../utils/date.mjs';
 import { isArray } from '../../../utils/is.mjs';
 import { useLocale } from '../../../hooks/useLocale.mjs';
 
@@ -23,33 +22,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;
@@ -86,7 +61,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 = mergeDeep(
     { ...column },
@@ -95,7 +70,8 @@ function appFormItemHandler(column = {}) {
       field: column.prop,
       label,
       readonly: column.readonly || false,
-      rules: rulesHandler(column)
+      rules: rulesHandler(column),
+      attrs
     }
   );
   if (/^(input)$/.test(column.type)) {
@@ -120,17 +96,6 @@ function appFormItemHandler(column = {}) {
         }
       }
     };
-  } else if (/^date-picker$/.test(column.type)) {
-    return {
-      ...column,
-      attrs: {
-        format: attrs.format || getDefaultValueFormatByType(attrs.type),
-        valueFormat: attrs.valueFormat || getDefaultValueFormatByType(attrs.type),
-        ...attrs,
-        startPlaceholder,
-        endPlaceholder
-      }
-    };
   } else if (/^(extra)$/.test(column.type)) {
     return {
       ...column,

package/es/components/appIcon/appIcon.vue.mjs

@@ -1,4 +1,5 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode } from 'vue';
+import { defineComponent, onMounted, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode } from 'vue';
+import { useEnsureHyIcon } from '../../hooks/useEnsureHyIcon.mjs';
 
 import "./style/appIcon.scss";
 
@@ -23,6 +24,9 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   },
   setup(__props) {
     const props = __props;
+    const { ensureHyIcon } = useEnsureHyIcon();
+    onMounted(() => ensureHyIcon(props.svgName));
+    watch(() => props.svgName, ensureHyIcon);
     const iconName = computed(() => `#${props.prefix}${props.svgName}`);
     const svgClass = computed(() => {
       if (props.className) {

package/es/components/appSearch/cpns/appSearchItem.vue.mjs

@@ -1,11 +1,12 @@
 import { computed, unref, openBlock, createBlock, withCtx, createElementVNode, normalizeStyle, createCommentVNode, renderSlot, createElementBlock, toDisplayString, normalizeClass, Fragment, createVNode, mergeProps, withKeys, renderList } from 'vue';
 import { ElFormItem, ElSelect } from 'element-plus';
 import { columnShowHandler, columnItemStyle, columnItemInputStyle, isDisabled, optionsHandler, isSelectedTimeRange, timeRangeHandler } from '../js/index.mjs';
-import { AppDatePicker } from '../../appDatePicker/index.mjs';
-import { AppOrgCascader } from '../../appOrgCascader/index.mjs';
 import { isArray } from '../../../utils/is.mjs';
 import { setValueByProp, getValueByProp } from '../../../utils/form.mjs';
 import { AppInput } from '../../appInput/index.mjs';
+import { AppDatePicker } from '../../appDatePicker/index.mjs';
+import { AppTimePicker } from '../../appTimePicker/index.mjs';
+import { AppOrgCascader } from '../../appOrgCascader/index.mjs';
 
 const _sfc_main = {
   __name: "appSearchItem",
@@ -175,9 +176,38 @@ const _sfc_main = {
                       ],
                       64
                       /* STABLE_FRAGMENT */
-                    )) : __props.column.type === "org-cascader" ? (openBlock(), createElementBlock(
+                    )) : __props.column.type === "time-picker" ? (openBlock(), createElementBlock(
                       Fragment,
                       { key: 4 },
+                      [
+                        createCommentVNode(" \u65F6\u95F4\u9009\u62E9\u6846 "),
+                        __props.column.attrs.isRange ? (openBlock(), createBlock(unref(AppTimePicker), 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: unref(isDisabled)(props, __props.column),
+                          onChange: onChangeHandler
+                        }), null, 16, ["start", "onUpdate:start", "end", "onUpdate:end", "disabled"])) : (openBlock(), createBlock(unref(AppTimePicker), mergeProps({
+                          key: 1,
+                          modelValue: bindValue.value,
+                          "onUpdate:modelValue": ($event) => bindValue.value = $event,
+                          "is-range": false,
+                          style: { "width": "100%" }
+                        }, __props.column.attrs, {
+                          disabled: unref(isDisabled)(props, __props.column),
+                          onChange: onChangeHandler
+                        }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled"]))
+                      ],
+                      64
+                      /* STABLE_FRAGMENT */
+                    )) : __props.column.type === "org-cascader" ? (openBlock(), createElementBlock(
+                      Fragment,
+                      { key: 5 },
                       [
                         createCommentVNode(" \u90E8\u95E8\u7EA7\u8054\u9009\u62E9\u6846 "),
                         createVNode(unref(AppOrgCascader), mergeProps({

package/es/components/appSearch/js/index.mjs

@@ -9,7 +9,7 @@ function columnItemStyle(props, column) {
   if (isNumber(width)) {
     style.width = `${width}px`;
   } else if (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/es/components/appSearch/js/useAppSearch.mjs

@@ -1,7 +1,6 @@
 import { unref, toRef } from 'vue';
 import { funRunHandler, mergeDeep } from '../../../utils/handler.mjs';
 import { genValueByProp } from '../../../utils/form.mjs';
-import { getDefaultValueFormatByType } from '../../../utils/date.mjs';
 import { useLocale } from '../../../hooks/useLocale.mjs';
 import { isNumber } from '../../../utils/is.mjs';
 
@@ -21,33 +20,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;
   }
@@ -71,6 +49,8 @@ const genColumnWidth = (config) => {
         default:
           inputWidth = 145;
       }
+    } else if (type === "time-picker" && attrs.isRange) {
+      width = 350;
     } else {
       width = 250;
     }
@@ -105,7 +85,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 || {},
@@ -121,7 +101,8 @@ function appSearchItemHandler(column = {}) {
       readonly: column.readonly || false,
       width,
       inputWidth,
-      timeRangeOptions: timeRangeOptionsHandler(column)
+      timeRangeOptions: timeRangeOptionsHandler(column),
+      attrs
     }
   );
   if (/^(input)$/.test(column.type)) {
@@ -146,17 +127,6 @@ function appSearchItemHandler(column = {}) {
         }
       }
     };
-  } else if (/^date-picker$/.test(column.type)) {
-    return {
-      ...column,
-      attrs: {
-        format: attrs.format || getDefaultValueFormatByType(attrs.type),
-        valueFormat: attrs.valueFormat || getDefaultValueFormatByType(attrs.type),
-        ...attrs,
-        startPlaceholder,
-        endPlaceholder
-      }
-    };
   }
   return column;
 }

package/es/components/appTimePicker/appTimePicker.vue.mjs

@@ -0,0 +1,154 @@
+import { useTemplateRef, useModel, computed, watch, unref, openBlock, createBlock, mergeProps, mergeModels, defineComponent } from 'vue';
+import dayjs from 'dayjs';
+import { ElTimePicker } from 'element-plus';
+import { useLocale } from '../../hooks/useLocale.mjs';
+import { isArray } from '../../utils/is.mjs';
+
+import "./style/appTimePicker.scss";
+
+const __default__ = defineComponent({
+  name: "AppTimePicker"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: /* @__PURE__ */ 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__ */ mergeModels(["change"], ["update:modelValue", "update:start", "update:end"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useLocale();
+    const appTimePicker = useTemplateRef("appTimePicker");
+    const timeValue = useModel(__props, "modelValue");
+    const startValue = useModel(__props, "start");
+    const endValue = useModel(__props, "end");
+    const startPlaceholder = computed(() => {
+      if (props.startPlaceholder) {
+        return props.startPlaceholder;
+      }
+      return t("timePicker.startTime");
+    });
+    const endPlaceholder = computed(() => {
+      if (props.endPlaceholder) {
+        return props.endPlaceholder;
+      }
+      return t("timePicker.endTime");
+    });
+    const disabledSecondsHandler = computed(() => {
+      return (hour, minute, role, comparingDate) => {
+        if (props.disabledSeconds) {
+          return props.disabledSeconds(hour, minute, role, comparingDate);
+        }
+        if (props.isRange && 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));
+          }
+        }
+      };
+    });
+    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 = isArray(value) ? value[0] : null;
+        endValue.value = isArray(value) ? value[1] : null;
+      } else {
+        timeValue.value = value;
+      }
+      emits("change", timeValue.value);
+    }
+    __expose({
+      focus() {
+        if (!unref(appTimePicker)) return;
+        unref(appTimePicker).focus();
+      },
+      blur() {
+        if (!unref(appTimePicker)) return;
+        unref(appTimePicker).blur();
+      },
+      handleOpen() {
+        if (!unref(appTimePicker)) return;
+        unref(appTimePicker).handleOpen();
+      },
+      handleClose() {
+        if (!unref(appTimePicker)) return;
+        unref(appTimePicker).handleClose();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElTimePicker), 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": 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"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/appTimePicker/index.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './appTimePicker.vue.mjs';
+import { withInstall } from '../../utils/handler.mjs';
+
+const AppTimePicker = withInstall(_sfc_main);
+const ElTimePicker = withInstall(_sfc_main, "ElTimePicker");
+
+export { AppTimePicker, ElTimePicker, AppTimePicker as default };