code-monkey-ui 1.1.8-alpha.5 → 1.1.8-alpha.6

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Code Monkey Ui v1.1.6-alpha.1 */
+/*! Code Monkey Ui v1.1.8-alpha.5 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
@@ -11191,6 +11191,56 @@
     };
   }
 
+  const ariaProps = buildProps({
+    ariaLabel: String,
+    ariaOrientation: {
+      type: String,
+      values: ["horizontal", "vertical", "undefined"]
+    },
+    ariaControls: String
+  });
+  const useAriaProps = (arias) => {
+    return pick(ariaProps, arias);
+  };
+
+  const emptyValuesContextKey = Symbol("emptyValuesContextKey");
+  const SCOPE$3 = "use-empty-values";
+  const DEFAULT_EMPTY_VALUES = ["", void 0, null];
+  const DEFAULT_VALUE_ON_CLEAR = void 0;
+  const useEmptyValuesProps = buildProps({
+    emptyValues: Array,
+    valueOnClear: {
+      type: [String, Number, Boolean, Function],
+      default: void 0,
+      validator: (val) => isFunction$1(val) ? !val() : !val
+    }
+  });
+  const useEmptyValues = (props, defaultValue) => {
+    const config = vue.getCurrentInstance() ? vue.inject(emptyValuesContextKey, vue.ref({})) : vue.ref({});
+    const emptyValues = vue.computed(() => props.emptyValues || config.value.emptyValues || DEFAULT_EMPTY_VALUES);
+    const valueOnClear = vue.computed(() => {
+      if (isFunction$1(props.valueOnClear)) {
+        return props.valueOnClear();
+      } else if (props.valueOnClear !== void 0) {
+        return props.valueOnClear;
+      } else if (isFunction$1(config.value.valueOnClear)) {
+        return config.value.valueOnClear();
+      } else if (config.value.valueOnClear !== void 0) {
+        return config.value.valueOnClear;
+      }
+      return defaultValue !== void 0 ? defaultValue : DEFAULT_VALUE_ON_CLEAR;
+    });
+    const isEmptyValue = (value) => {
+      return emptyValues.value.includes(value);
+    };
+    if (!emptyValues.value.includes(valueOnClear.value)) ;
+    return {
+      emptyValues,
+      valueOnClear,
+      isEmptyValue
+    };
+  };
+
   const configProviderContextKey = Symbol();
 
   const globalConfig = vue.ref();
@@ -11311,7 +11361,7 @@
 
   const ElConfigProvider = withInstall(ConfigProvider);
 
-  const version$1 = "1.1.6-alpha.1";
+  const version$1 = "1.1.8-alpha.5";
 
   const makeInstaller = (components = []) => {
     const install = (app, options) => {
@@ -22403,9 +22453,12 @@
     dates: DEFAULT_FORMATS_DATE,
     week: "gggg[w]ww",
     year: "YYYY",
+    years: "YYYY",
     month: "YYYY-MM",
+    months: "YYYY-MM",
     datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
     monthrange: "YYYY-MM",
+    yearrange: "YYYY",
     daterange: DEFAULT_FORMATS_DATE,
     datetimerange: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`
   };
@@ -22530,14 +22583,8 @@
       default: ""
     },
     size: useSizeProp,
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
+    readonly: Boolean,
+    disabled: Boolean,
     placeholder: {
       type: String,
       default: ""
@@ -22562,10 +22609,7 @@
     defaultTime: {
       type: definePropType([Date, Array])
     },
-    isRange: {
-      type: Boolean,
-      default: false
-    },
+    isRange: Boolean,
     ...disabledTimeListsProps,
     disabledDate: {
       type: Function
@@ -22577,14 +22621,7 @@
       type: Array,
       default: () => []
     },
-    arrowControl: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String,
-      default: void 0
-    },
+    arrowControl: Boolean,
     tabindex: {
       type: definePropType([String, Number]),
       default: 0
@@ -22593,7 +22630,18 @@
       type: Boolean,
       default: true
     },
-    unlinkPanels: Boolean
+    unlinkPanels: Boolean,
+    placement: {
+      type: definePropType(String),
+      values: Ee,
+      default: "bottom"
+    },
+    fallbackPlacements: {
+      type: definePropType(Array),
+      default: ["bottom", "top", "right", "left"]
+    },
+    ...useEmptyValuesProps,
+    ...useAriaProps(["ariaLabel"])
   });
 
   const _hoisted_1$Y = ["id", "name", "placeholder", "value", "disabled", "readonly"];
@@ -22609,6 +22657,7 @@
       "change",
       "focus",
       "blur",
+      "clear",
       "calendar-change",
       "panel-change",
       "visible-change",
@@ -22623,6 +22672,7 @@
       const nsRange = useNamespace("range");
       const { form, formItem } = useFormItem();
       const elPopperOptions = vue.inject("ElPopperOptions", {});
+      const { valueOnClear } = useEmptyValues(props, null);
       const refPopper = vue.ref();
       const inputRef = vue.ref();
       const pickerVisible = vue.ref(false);
@@ -22739,6 +22789,8 @@
         pickerVisible.value = true;
       };
       const handleClose = () => {
+        var _a;
+        (_a = refPopper.value) == null ? void 0 : _a.onClose();
         pickerVisible.value = false;
       };
       const focus = (focusStartInput = true, isIgnoreFocusEvent = false) => {
@@ -22800,7 +22852,9 @@
           const availableResult = pickerOptions.value.getRangeAvailableTime(dayOrDays);
           if (!isEqual$1(availableResult, dayOrDays)) {
             dayOrDays = availableResult;
-            emitInput(isArray$1(dayOrDays) ? dayOrDays.map((_) => _.toDate()) : dayOrDays.toDate());
+            if (!valueIsEmpty.value) {
+              emitInput(isArray$1(dayOrDays) ? dayOrDays.map((_) => _.toDate()) : dayOrDays.toDate());
+            }
           }
         }
         if (isArray$1(dayOrDays) && dayOrDays.some((day) => !day)) {
@@ -22825,13 +22879,15 @@
         if (!pickerVisible.value && valueIsEmpty.value)
           return "";
         if (formattedValue) {
-          return isDatesPicker.value ? formattedValue.join(", ") : formattedValue;
+          return isDatesPicker.value || isMonthsPicker.value || isYearsPicker.value ? formattedValue.join(", ") : formattedValue;
         }
         return "";
       });
       const isTimeLikePicker = vue.computed(() => props.type.includes("time"));
       const isTimePicker = vue.computed(() => props.type.startsWith("time"));
       const isDatesPicker = vue.computed(() => props.type === "dates");
+      const isMonthsPicker = vue.computed(() => props.type === "months");
+      const isYearsPicker = vue.computed(() => props.type === "years");
       const triggerIcon = vue.computed(() => props.prefixIcon || (isTimeLikePicker.value ? clock_default : calendar_default));
       const showClose = vue.ref(false);
       const onClearIconClick = (event) => {
@@ -22840,12 +22896,16 @@
         if (showClose.value) {
           event.stopPropagation();
           focusOnInputBox();
-          emitInput(null);
-          emitChange(null, true);
+          if (pickerOptions.value.handleClear) {
+            pickerOptions.value.handleClear();
+          } else {
+            emitInput(valueOnClear.value);
+          }
+          emitChange(valueOnClear.value, true);
           showClose.value = false;
-          pickerVisible.value = false;
-          pickerOptions.value.handleClear && pickerOptions.value.handleClear();
+          onHide();
         }
+        emit("clear");
       };
       const valueIsEmpty = vue.computed(() => {
         const { modelValue } = props;
@@ -22892,13 +22952,16 @@
         }
         return (_a = vue.unref(inputRef)) == null ? void 0 : _a.$el;
       });
-      onClickOutside(actualInputRef, (e) => {
+      const stophandle = onClickOutside(actualInputRef, (e) => {
         const unrefedPopperEl = vue.unref(popperEl);
         const inputEl = vue.unref(actualInputRef);
         if (unrefedPopperEl && (e.target === unrefedPopperEl || e.composedPath().includes(unrefedPopperEl)) || e.target === inputEl || e.composedPath().includes(inputEl))
           return;
         pickerVisible.value = false;
       });
+      vue.onBeforeUnmount(() => {
+        stophandle == null ? void 0 : stophandle();
+      });
       const userInput = vue.ref(null);
       const handleChange = () => {
         if (userInput.value) {
@@ -22911,8 +22974,8 @@
           }
         }
         if (userInput.value === "") {
-          emitInput(null);
-          emitChange(null);
+          emitInput(valueOnClear.value);
+          emitChange(valueOnClear.value);
           userInput.value = null;
         }
       };
@@ -23068,8 +23131,9 @@
           transition: `${vue.unref(nsDate).namespace.value}-zoom-in-top`,
           "popper-class": [`${vue.unref(nsDate).namespace.value}-picker__popper`, _ctx.popperClass],
           "popper-options": vue.unref(elPopperOptions),
-          "fallback-placements": ["bottom", "top", "right", "left"],
+          "fallback-placements": _ctx.fallbackPlacements,
           "gpu-acceleration": false,
+          placement: _ctx.placement,
           "stop-popper-mouse-event": false,
           "hide-after": 0,
           persistent: "",
@@ -23088,11 +23152,11 @@
               name: _ctx.name,
               size: vue.unref(pickerSize),
               disabled: vue.unref(pickerDisabled),
-              placeholder: _ctx.placeholder,
+              placeholder: pickerVisible.value,
               class: vue.normalizeClass([vue.unref(nsDate).b("editor"), vue.unref(nsDate).bm("editor", _ctx.type), _ctx.$attrs.class]),
               style: vue.normalizeStyle(_ctx.$attrs.style),
-              readonly: !_ctx.editable || _ctx.readonly || vue.unref(isDatesPicker) || _ctx.type === "week",
-              label: _ctx.label,
+              readonly: !_ctx.editable || _ctx.readonly || vue.unref(isDatesPicker) || vue.unref(isMonthsPicker) || vue.unref(isYearsPicker) || _ctx.type === "week",
+              "aria-label": _ctx.ariaLabel,
               tabindex: _ctx.tabindex,
               "validate-event": false,
               onInput: onUserInput,
@@ -23103,7 +23167,7 @@
               onMousedown: onMouseDownInput,
               onMouseenter: onMouseEnter,
               onMouseleave: onMouseLeave,
-              onTouchstart: onTouchStartInput,
+              onTouchstartPassive: onTouchStartInput,
               onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
               }, ["stop"]))
             }, {
@@ -23112,7 +23176,7 @@
                   key: 0,
                   class: vue.normalizeClass(vue.unref(nsInput).e("icon")),
                   onMousedown: vue.withModifiers(onMouseDownInput, ["prevent"]),
-                  onTouchstart: onTouchStartInput
+                  onTouchstartPassive: onTouchStartInput
                 }, {
                   default: vue.withCtx(() => [
                     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(triggerIcon))))
@@ -23133,7 +23197,7 @@
                 }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
               ]),
               _: 1
-            }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "label", "tabindex", "onKeydown"])) : (vue.openBlock(), vue.createElementBlock("div", {
+            }, 8, ["id", "model-value", "name", "size", "disabled", "placeholder", "class", "style", "readonly", "aria-label", "tabindex", "onKeydown"])) : (vue.openBlock(), vue.createElementBlock("div", {
               key: 1,
               ref_key: "inputRef",
               ref: inputRef,
@@ -23142,14 +23206,14 @@
               onClick: handleFocusInput,
               onMouseenter: onMouseEnter,
               onMouseleave: onMouseLeave,
-              onTouchstart: onTouchStartInput,
+              onTouchstartPassive: onTouchStartInput,
               onKeydown: handleKeydownInput
             }, [
               vue.unref(triggerIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(ElIcon), {
                 key: 0,
                 class: vue.normalizeClass([vue.unref(nsInput).e("icon"), vue.unref(nsRange).e("icon")]),
                 onMousedown: vue.withModifiers(onMouseDownInput, ["prevent"]),
-                onTouchstart: onTouchStartInput
+                onTouchstartPassive: onTouchStartInput
               }, {
                 default: vue.withCtx(() => [
                   (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(triggerIcon))))
@@ -23225,7 +23289,7 @@
             })
           ]),
           _: 3
-        }, 16, ["visible", "transition", "popper-class", "popper-options"]);
+        }, 16, ["visible", "transition", "popper-class", "popper-options", "fallback-placements", "placement"]);
       };
     }
   });
@@ -24129,11 +24193,7 @@
     }
   });
 
-  const _TimePicker = TimePicker;
-  _TimePicker.install = (app) => {
-    app.component(_TimePicker.name, _TimePicker);
-  };
-  const ElTimePicker = _TimePicker;
+  const ElTimePicker = withInstall(TimePicker);
 
   const getPrevMonthLastDays = (date, count) => {
     const lastDay = date.subtract(1, "month").endOf("month").date();
@@ -66692,9 +66752,11 @@
   exports.ClickOutside = ClickOutside;
   exports.CommonPicker = CommonPicker;
   exports.CommonProps = CommonProps;
+  exports.DEFAULT_EMPTY_VALUES = DEFAULT_EMPTY_VALUES;
   exports.DEFAULT_FORMATS_DATE = DEFAULT_FORMATS_DATE;
   exports.DEFAULT_FORMATS_DATEPICKER = DEFAULT_FORMATS_DATEPICKER;
   exports.DEFAULT_FORMATS_TIME = DEFAULT_FORMATS_TIME;
+  exports.DEFAULT_VALUE_ON_CLEAR = DEFAULT_VALUE_ON_CLEAR;
   exports.DROPDOWN_COLLECTION_INJECTION_KEY = COLLECTION_INJECTION_KEY;
   exports.DROPDOWN_COLLECTION_ITEM_INJECTION_KEY = COLLECTION_ITEM_INJECTION_KEY;
   exports.DROPDOWN_INJECTION_KEY = DROPDOWN_INJECTION_KEY;
@@ -66845,6 +66907,7 @@
   exports.ROOT_PICKER_INJECTION_KEY = ROOT_PICKER_INJECTION_KEY;
   exports.RowAlign = RowAlign;
   exports.RowJustify = RowJustify;
+  exports.SCOPE = SCOPE$3;
   exports.SIZE_INJECTION_KEY = SIZE_INJECTION_KEY;
   exports.TOOLTIP_INJECTION_KEY = TOOLTIP_INJECTION_KEY;
   exports.TableV2 = TableV2$1;
@@ -66861,6 +66924,7 @@
   exports.alertEffects = alertEffects;
   exports.alertEmits = alertEmits;
   exports.alertProps = alertProps;
+  exports.ariaProps = ariaProps;
   exports.arrowMiddleware = arrowMiddleware;
   exports.autoResizerProps = autoResizerProps;
   exports.autocompleteEmits = autocompleteEmits;
@@ -66938,6 +67002,7 @@
   exports.elPaginationKey = elPaginationKey;
   exports.emitChangeFn = emitChangeFn;
   exports.emptyProps = emptyProps;
+  exports.emptyValuesContextKey = emptyValuesContextKey;
   exports.extractDateFormat = extractDateFormat;
   exports.extractTimeFormat = extractTimeFormat;
   exports.formContextKey = formContextKey;
@@ -67061,6 +67126,7 @@
   exports.uploadListProps = uploadListProps;
   exports.uploadListTypes = uploadListTypes;
   exports.uploadProps = uploadProps;
+  exports.useAriaProps = useAriaProps;
   exports.useAttrs = useAttrs;
   exports.useCascaderConfig = useCascaderConfig;
   exports.useCursor = useCursor;
@@ -67071,6 +67137,8 @@
   exports.useDialog = useDialog;
   exports.useDisabled = useDisabled;
   exports.useDraggable = useDraggable;
+  exports.useEmptyValues = useEmptyValues;
+  exports.useEmptyValuesProps = useEmptyValuesProps;
   exports.useEscapeKeydown = useEscapeKeydown;
   exports.useFloating = useFloating;
   exports.useFloatingProps = useFloatingProps;