@citruslime/ui 4.1.0-beta.17 → 4.1.0-beta.18

package/dist/citrus-lime-ui.es.js

@@ -5,7 +5,7 @@ import { useFocusWithin, onKeyDown, toArray, unrefElement, tryOnScopeDispose, on
 import { useI18n, createI18n } from "vue-i18n";
 import { createFocusTrap } from "focus-trap";
 import { copy } from "@citruslime/vue-utils";
-import { DateTime } from "luxon";
+import { DateTime, Info } from "luxon";
 import { DatePicker } from "v-calendar";
 import { useCurrencyInput } from "vue-currency-input";
 const _hoisted_1$13 = { class: "cl:overflow-hidden" };
@@ -2347,17 +2347,18 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     }
     function formatString() {
       let value = props.data[props.column.field];
-      if (!value || typeof value !== "string") {
+      if (!value) {
         return "";
-      }
-      if (props.column.maxLength) {
-        value = value.trimToLength(props.column.maxLength, props.column.format !== void 0 ? props.column.format === "ellipsis" : false);
-      }
-      if (props.searchValue && props.column.searchable) {
-        value = highlightText(value, props.searchValue.split(" "));
-      }
-      if (props.column.format === "wrap-text") {
-        value = `<span class="cl:break-words cl:whitespace-pre-wrap">${value}</span>`;
+      } else if (typeof value === "string") {
+        if (props.column.maxLength) {
+          value = value.trimToLength(props.column.maxLength, props.column.format !== void 0 ? props.column.format === "ellipsis" : false);
+        }
+        if (props.searchValue && props.column.searchable) {
+          value = highlightText(value, props.searchValue.split(" "));
+        }
+        if (props.column.format === "wrap-text") {
+          value = `<span class="cl:break-words cl:whitespace-pre-wrap">${value}</span>`;
+        }
       }
       return value;
     }
@@ -4056,7 +4057,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     required: { type: Boolean },
     disabled: { type: Boolean },
     rangeSelected: { type: Boolean },
-    forceIconDisplay: { type: Boolean }
+    forceIconDisplay: { type: Boolean },
+    interactiveIcon: { type: Boolean }
   },
   emits: ["clear", "reset", "togglePopover", "focus", "blur"],
   setup(__props, { expose: __expose }) {
@@ -4104,10 +4106,13 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("blur"))
         }, toHandlers(_ctx.events, true)), null, 16, _hoisted_2$t),
         createVNode(unref(Icon), {
-          class: "cl:absolute cl:bg-transparent cl:cursor-text cl:left-2 cl:text-grey-4 cl:top-3.5 icon",
+          class: normalizeClass(["cl:absolute cl:bg-transparent cl:cursor-pointer cl:hover:text-link-light cl:left-2 cl:text-grey-4 cl:top-3.5 icon", { "cl:pointer-events-none": !_ctx.interactiveIcon }]),
           icon: _ctx.type === "time" ? "ph-clock" : "ph:calendar",
-          onClick: focus
-        }, null, 8, ["icon"]),
+          onClick: _cache[4] || (_cache[4] = ($event) => {
+            focus();
+            _ctx.$emit("togglePopover");
+          })
+        }, null, 8, ["class", "icon"]),
         !_ctx.disabled ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(["action-icon cl:absolute cl:bg-transparent cl:flex cl:right-2 cl:text-grey-4 cl:top-3.5", { "show-icons": _ctx.forceIconDisplay }])
@@ -4116,20 +4121,20 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             key: 0,
             class: "cl:cursor-pointer cl:hover:text-link-light",
             icon: "ph:arrow-counter-clockwise",
-            onClick: _cache[4] || (_cache[4] = withModifiers(($event) => _ctx.$emit("reset"), ["prevent"]))
+            onClick: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.$emit("reset"), ["prevent"]))
           })) : createCommentVNode("", true),
           !_ctx.required && _ctx.date && (_ctx.type !== "time" || _ctx.date !== "00:00") ? (openBlock(), createBlock(unref(Icon), {
             key: 1,
             class: "cl:cursor-pointer cl:hover:text-link-light cl:md:ml-0.5 clear-icon",
             icon: "ph:x",
-            onClick: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.$emit("clear"), ["prevent"]))
+            onClick: _cache[6] || (_cache[6] = withModifiers(($event) => _ctx.$emit("clear"), ["prevent"]))
           })) : createCommentVNode("", true)
         ], 2)) : createCommentVNode("", true)
       ]));
     };
   }
 });
-const clUiCalendarInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-8d0a0dc4"]]);
+const clUiCalendarInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-384b53f2"]]);
 const _hoisted_1$D = {
   key: 0,
   class: "cl:px-3 cl:py-3 cl:w-full"
@@ -4193,6 +4198,29 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const { locale: locale2 } = useI18n();
     const internalLocale = computed(() => props.dateFormatLocale ?? locale2.value);
     const todayButtonVisible = ref(true);
+    const internalPlaceholder = computed(() => {
+      if (props.placeholder) {
+        return props.placeholder;
+      } else {
+        const formatPlaceholderDateOptions = {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit"
+        };
+        const formatPlaceholderTimeOptions = {
+          hour: "2-digit",
+          minute: "2-digit"
+        };
+        const meridiems = Info.meridiems().join(", ");
+        const displayString = DateTime.parseFormatForOpts({
+          ...props.type === "time" ? void 0 : formatPlaceholderDateOptions,
+          ...props.type === "date" ? void 0 : formatPlaceholderTimeOptions
+        }, {
+          locale: internalLocale.value
+        });
+        return displayString?.replace("yyyyyy", "yyyy").replace("yyyyy", "yyyy").replace("a", `(${meridiems})`) ?? null;
+      }
+    });
     const showPopoverComputed = computed(() => {
       return props.showPopover !== void 0 ? props.showPopover : props.type !== "time";
     });
@@ -4276,14 +4304,16 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 date: inputValue,
                 events: inputEvents,
                 type: _ctx.type,
-                placeholder: _ctx.placeholder,
+                placeholder: internalPlaceholder.value,
                 required: _ctx.required,
                 "force-icon-display": _ctx.forceIconDisplay,
                 disabled: _ctx.disabled,
+                "interactive-icon": !props.showPopover,
                 onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("focus")),
                 onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("blur")),
-                onClear: _cache[2] || (_cache[2] = ($event) => internalCurrentDateTime.value = null)
-              }), null, 16, ["date", "events", "type", "placeholder", "required", "force-icon-display", "disabled"])
+                onClear: _cache[2] || (_cache[2] = ($event) => internalCurrentDateTime.value = null),
+                onTogglePopover: calendar.value?.showPopover
+              }), null, 16, ["date", "events", "type", "placeholder", "required", "force-icon-display", "disabled", "interactive-icon", "onTogglePopover"])
             ]),
             footer: withCtx(() => [
               todayButtonVisible.value ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
@@ -4323,15 +4353,17 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 date: inputValue,
                 events: inputEvents,
                 type: _ctx.type,
-                placeholder: _ctx.placeholder,
+                placeholder: internalPlaceholder.value,
                 required: _ctx.required,
                 disabled: _ctx.disabled,
                 "force-icon-display": _ctx.forceIconDisplay,
+                "interactive-icon": !props.showPopover,
                 onFocus: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("focus")),
                 onBlur: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("blur")),
                 onClear: _cache[6] || (_cache[6] = ($event) => internalCurrentDateTime.value = null),
-                onReset: _cache[7] || (_cache[7] = ($event) => internalCurrentDateTime.value = unref(getDefaultDate)(_ctx.minDate, _ctx.maxDate, internalTimeZone.value, _ctx.type))
-              }), null, 16, ["date", "events", "type", "placeholder", "required", "disabled", "force-icon-display"])
+                onReset: _cache[7] || (_cache[7] = ($event) => internalCurrentDateTime.value = unref(getDefaultDate)(_ctx.minDate, _ctx.maxDate, internalTimeZone.value, _ctx.type)),
+                onTogglePopover: calendar.value?.showPopover
+              }), null, 16, ["date", "events", "type", "placeholder", "required", "disabled", "force-icon-display", "interactive-icon", "onTogglePopover"])
             ]),
             footer: withCtx(() => [
               todayButtonVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$s, [