cnhis-design-vue 3.3.3-beta.74 → 3.3.3-beta.76

package/es/components/time-picker/src/TimePicker.vue2.js

@@ -1,13 +1,14 @@
-import { defineComponent, useAttrs, ref, computed, openBlock, createBlock, unref, createSlots, renderList, withCtx, renderSlot } from 'vue';
-import { NTimePicker } from 'naive-ui';
+import { defineComponent, useAttrs, ref, computed, openBlock, createElementBlock, createVNode, unref, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, createBlock, Teleport, Fragment, createTextVNode, toDisplayString, nextTick } from 'vue';
+import { NTimePicker, NScrollbar, NSpace, NButton } from 'naive-ui';
 import '../../../shared/utils/index.js';
 import { useDateTime } from '../../../shared/hooks/useDateTime.js';
-import 'lodash-es';
+import { isFunction } from 'lodash-es';
 import '@vue/shared';
 import '@vueuse/shared';
 import '../../../shared/hooks/selectHooks/useSearchContent.js';
 import '@vicons/ionicons5';
 import '../../../shared/hooks/useScrollLoading.js';
+import { parse, isValid, getHours, getMinutes, getSeconds } from 'date-fns';
 
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TimePicker",
@@ -15,24 +16,78 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     to: {
       type: [Object, String, Boolean],
       default: "body"
+    },
+    shortcuts: {
+      type: Array,
+      default: () => []
     }
   },
+  emits: ["update:formatted-value", "update:show"],
   setup(__props, {
-    expose
+    expose,
+    emit
   }) {
+    const props = __props;
     const attrs = useAttrs();
-    const timePickerRef = ref(null);
+    const timePickerRef = ref();
+    const isTimePickerOpen = ref(false);
+    const panelContainer = ref();
+    const timePickerAttrs = computed(() => {
+      const {
+        shortcuts,
+        ...restAttrs
+      } = attrs;
+      return restAttrs;
+    });
     const formatRef = computed(() => {
       if (Reflect.get(attrs, "format"))
         return attrs["format"];
       return "HH:mm:ss";
     });
+    const handleFormattedTimeUpdate = (value) => {
+      emit("update:formatted-value", value);
+    };
+    const handleShortcutClick = (shortcut) => {
+      const timeValue = shortcut;
+      emit("update:formatted-value", timeValue);
+      emit("update:show", false);
+      isTimePickerOpen.value = false;
+    };
+    const isDisabled = (value) => {
+      const parsedTime = parse(value, formatRef.value, new Date());
+      if (!isValid(parsedTime))
+        return false;
+      const hours = getHours(parsedTime);
+      const minutes = getMinutes(parsedTime);
+      const seconds = getSeconds(parsedTime);
+      const attrs2 = timePickerAttrs.value;
+      const isHourDisabled = isFunction(attrs2.isHourDisabled) ? attrs2.isHourDisabled(hours) : false;
+      const isMinuteDisabled = isFunction(attrs2.isMinuteDisabled) ? attrs2.isMinuteDisabled(minutes, hours) : false;
+      const isSecondDisabled = isFunction(attrs2.isSecondDisabled) ? attrs2.isSecondDisabled(seconds, minutes, hours) : false;
+      return isHourDisabled || isMinuteDisabled || isSecondDisabled;
+    };
+    const onUpdateShow = (show) => {
+      emit("update:show", show);
+      isTimePickerOpen.value = show;
+      if (show && props.shortcuts && props.shortcuts.length > 0) {
+        nextTick(() => {
+          var _a, _b;
+          const panel = (_b = (_a = timePickerRef.value) == null ? void 0 : _a.panelInstRef) == null ? void 0 : _b.$el;
+          const teleportTo = panel == null ? void 0 : panel.querySelector(".n-time-picker-cols");
+          if (teleportTo) {
+            panelContainer.value = teleportTo;
+          }
+        });
+      } else {
+        panelContainer.value = null;
+      }
+    };
     const {
       focus,
       blur
     } = useDateTime(timePickerRef, {
       formatRef,
-      attrs
+      attrs: timePickerAttrs
     });
     expose({
       $timePicker: timePickerRef,
@@ -40,18 +95,48 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       blur
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(NTimePicker), {
+      return openBlock(), createElementBlock("div", null, [createVNode(unref(NTimePicker), mergeProps({
         ref_key: "timePickerRef",
-        ref: timePickerRef,
-        to: __props.to
-      }, createSlots({
+        ref: timePickerRef
+      }, unref(timePickerAttrs), {
+        to: __props.to,
+        "onUpdate:formattedValue": handleFormattedTimeUpdate,
+        "onUpdate:show": onUpdateShow
+      }), createSlots({
         _: 2
-      }, [renderList(_ctx.$slots, (v, k) => {
+      }, [renderList(_ctx.$slots, (_, k) => {
         return {
           name: k,
-          fn: withCtx(() => [renderSlot(_ctx.$slots, k)])
+          fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, k, normalizeProps(guardReactiveProps(slotProps || {})))])
         };
-      })]), 1032, ["to"]);
+      })]), 1040, ["to"]), createCommentVNode(" \u5FEB\u6377\u9009\u9879 - \u901A\u8FC7CSS\u63D2\u5165\u5230\u9762\u677F\u5185\u90E8 "), __props.shortcuts && __props.shortcuts.length > 0 && isTimePickerOpen.value && panelContainer.value ? (openBlock(), createBlock(Teleport, {
+        key: 0,
+        to: panelContainer.value
+      }, [createVNode(unref(NScrollbar), {
+        style: {
+          "max-height": "255px",
+          "margin": "8px"
+        }
+      }, {
+        default: withCtx(() => [createVNode(unref(NSpace), {
+          vertical: "",
+          wrap: false
+        }, {
+          default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.shortcuts, (shortcut) => {
+            return openBlock(), createBlock(unref(NButton), {
+              size: "tiny",
+              disabled: isDisabled(shortcut),
+              key: shortcut,
+              onClick: ($event) => handleShortcutClick(shortcut)
+            }, {
+              default: withCtx(() => [createTextVNode(toDisplayString(shortcut), 1)]),
+              _: 2
+            }, 1032, ["disabled", "onClick"]);
+          }), 128))]),
+          _: 1
+        })]),
+        _: 1
+      })], 8, ["to"])) : createCommentVNode("v-if", true)]);
     };
   }
 });

package/es/shared/hooks/useDateTime.d.ts

@@ -1,7 +1,7 @@
 import { Ref, ComputedRef } from 'vue';
 import { AnyObject, AnyFn } from '../../shared/types';
 export declare function handleInputEvent(target: HTMLInputElement, value?: string): void;
-export declare function useDateTime(datePickerRef: Ref<AnyObject | null>, { formatRef, attrs, emit, allowedInvalidValue, isPanel }: {
+export declare function useDateTime(datePickerRef: Ref<AnyObject | null | undefined>, { formatRef, attrs, emit, allowedInvalidValue, isPanel }: {
     formatRef: ComputedRef<string | [string, string]>;
     attrs: AnyObject;
     allowedInvalidValue?: string;

package/es/shared/package.json.js

@@ -1,5 +1,5 @@
 var name = "@cnhis-design-vue/shared";
-var version = "3.3.3-beta.74";
+var version = "3.3.3-beta.76";
 var main = "index.ts";
 var peerDependencies = {
 	"naive-ui": "^2.30.0",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cnhis-design-vue",
-	"version": "3.3.3-beta.74",
+	"version": "3.3.3-beta.76",
 	"license": "ISC",
 	"module": "./es/components/index.js",
 	"main": "./es/components/index.js",
@@ -62,7 +62,6 @@
 		"video.js": "^7.19.2",
 		"videojs-contrib-hls": "^5.15.0",
 		"viewerjs": "^1.10.5",
-		"vue": "^3.5.0",
 		"vue-simple-uploader": "^1.0.0-beta.5",
 		"xe-utils": "^3.5.4"
 	},
@@ -74,5 +73,5 @@
 		"iOS 7",
 		"last 3 iOS versions"
 	],
-	"gitHead": "e4daf2ab84e560a83587973475b91dc530d1c30c"
+	"gitHead": "c5ca3c0973aa44c9235ce5d60662317954130ec9"
 }