@amirjalili1374/ui-kit 1.5.25 → 1.5.28

package/dist/ui-kit.es.js

@@ -1,9 +1,8 @@
 var __defProp2 = Object.defineProperty;
 var __defNormalProp2 = (obj, key2, value2) => key2 in obj ? __defProp2(obj, key2, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key2] = value2;
 var __publicField = (obj, key2, value2) => __defNormalProp2(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value2);
-import { warn, reactive, watchEffect, toRef, capitalize, shallowRef, Fragment, camelize, isVNode, Comment, unref, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject, defineComponent as defineComponent$1, h, createElementVNode, normalizeStyle, normalizeClass, toValue, resolveDynamicComponent, nextTick, onScopeDispose, createVNode, mergeProps, toRefs, Text, isRef, TransitionGroup, Transition, watch, onBeforeMount, onBeforeUnmount, withDirectives, vShow, toDisplayString, effectScope, toRaw, readonly, openBlock, createBlock, withCtx, createCommentVNode, useId, onMounted, onUpdated, Teleport, createTextVNode, createElementBlock, renderSlot, onDeactivated, cloneVNode, renderList, createSlots, normalizeProps, guardReactiveProps, onActivated, onBeforeUpdate, withModifiers, vModelText, withKeys, onUnmounted, resolveComponent } from "vue";
+import { warn, reactive, watchEffect, toRef, capitalize, shallowRef, Fragment, camelize, isVNode, Comment, unref, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject, defineComponent as defineComponent$1, h, createElementVNode, normalizeStyle, normalizeClass, toValue, resolveDynamicComponent, nextTick, onScopeDispose, createVNode, mergeProps, toRefs, Text, isRef, TransitionGroup, Transition, watch, onBeforeMount, onBeforeUnmount, withDirectives, vShow, toDisplayString, effectScope, toRaw, readonly, openBlock, createBlock, withCtx, createCommentVNode, useId, onMounted, onUpdated, Teleport, createTextVNode, createElementBlock, renderSlot, onDeactivated, cloneVNode, renderList, createSlots, normalizeProps, guardReactiveProps, resolveComponent, onActivated, onBeforeUpdate, withModifiers, vModelText, withKeys, onUnmounted } from "vue";
 import { IconHome, IconArrowBadgeLeft, IconChevronDown, IconChevronRight, IconCheck, IconSquareX, IconMinus, IconPlus, IconRefresh, IconChevronLeft, IconDownload, IconPrinter, IconMaximize, IconMinimize, IconX, IconFileText, IconPencil, IconClock, IconMenu2, IconPalette } from "@tabler/icons-vue";
-import Vue3PersianDatetimePicker from "vue3-persian-datetime-picker";
 import axios from "axios";
 import { useDebounceFn } from "@vueuse/core";
 import { useRouter as useRouter$1 } from "vue-router";
@@ -13952,8 +13951,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent$1({
   __name: "ShamsiDatePicker",
   props: {
     modelValue: { default: "" },
-    label: { default: "Date" },
-    placeholder: { default: "Select date" },
+    label: { default: "تاریخ" },
+    placeholder: { default: "تاریخ را انتخاب کنید" },
     variant: { default: "outlined" },
     density: { default: "default" },
     color: { default: "primary" },
@@ -13965,60 +13964,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent$1({
     prependInnerIcon: { default: "" },
     appendInnerIcon: { default: "" },
     format: { default: "YYYY-MM-DD" },
-    displayFormat: { default: "" },
-    formatPreset: { default: "full" },
-    calendarType: { default: "gregorian" },
+    displayFormat: { default: "jYYYY/jMM/jDD" },
     minDate: { default: "" },
     maxDate: { default: "" },
     mode: { default: "single" },
-    icon: { default: "" }
+    icon: { default: "" },
+    outputFormat: { default: "iso" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const jalaliPresets = {
-      full: "jYYYY/jMM/jDD",
-      short: "jYY/jM/jD",
-      medium: "jD jMMMM jYYYY",
-      numeric: "jYYYYjMMjDD",
-      iso: "jYYYY-jMM-jDDTHH:mm:ss.SSS[Z]",
-      "iso-local": "jYYYY-jMM-jDDTHH:mm:ss.SSSZ",
-      custom: props.displayFormat || "jYYYY/jMM/jDD"
-    };
-    const gregorianPresets = {
-      full: "YYYY/MM/DD",
-      short: "YY/M/D",
-      medium: "D MMMM YYYY",
-      numeric: "YYYYMMDD",
-      iso: "YYYY-MM-DDTHH:mm:ss.SSS[Z]",
-      "iso-local": "YYYY-MM-DDTHH:mm:ss.SSSZ",
-      custom: props.displayFormat || "YYYY/MM/DD"
-    };
-    const computedDisplayFormat = computed(() => {
-      if (props.displayFormat) {
-        return props.displayFormat;
-      }
-      const presets = props.calendarType === "jalali" ? jalaliPresets : gregorianPresets;
-      return presets[props.formatPreset];
-    });
-    const pickerType = computed(() => {
-      return props.calendarType === "jalali" ? "date" : "datetime";
-    });
-    const localeConfig = computed(() => {
-      if (props.mode === "range") {
-        return {
-          fa: {
-            from: "از تاریخ",
-            to: "تا تاریخ"
-          },
-          en: {
-            from: "From",
-            to: "To"
-          }
-        };
-      }
-      return void 0;
-    });
     const emit = __emit;
     const selectedDate = computed({
       get: () => {
@@ -14038,93 +13993,84 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent$1({
         emit("update:modelValue", value2);
       }
     });
-    const displayValue = computed(() => {
-      if (props.mode === "range" && Array.isArray(props.modelValue)) {
-        if (props.modelValue[0] && props.modelValue[1]) {
-          return `${formatDate(props.modelValue[0])} ~ ${formatDate(props.modelValue[1])}`;
-        }
-        return "";
-      }
-      return props.modelValue ? formatDate(props.modelValue) : "";
-    });
-    const formatDate = (dateString) => {
-      if (!dateString) return "";
-      try {
-        const date = new Date(dateString);
-        if (isNaN(date.getTime())) return dateString;
-        if (props.calendarType === "gregorian") {
-          return date.toLocaleDateString("en-US", {
-            year: "numeric",
-            month: "2-digit",
-            day: "2-digit"
-          });
-        }
-        return dateString;
-      } catch {
-        return dateString;
-      }
-    };
     const onDateChange = (date) => {
       if (props.mode === "range") {
         if (Array.isArray(date) && date.length === 2) {
           const [startDate, endDate] = date;
-          const gregorianStart = startDate && startDate._isAMomentObject ? startDate.toISOString() : startDate;
-          const gregorianEnd = endDate && endDate._isAMomentObject ? endDate.toISOString() : endDate;
+          const gregorianStart = formatOutput(startDate);
+          const gregorianEnd = formatOutput(endDate);
           emit("update:modelValue", [gregorianStart, gregorianEnd]);
+        } else {
+          emit("update:modelValue", null);
         }
       } else {
-        const gregorianDate = date && date._isAMomentObject ? date.toISOString() : date;
-        emit("update:modelValue", gregorianDate);
+        if (date) {
+          const formattedDate = formatOutput(date);
+          emit("update:modelValue", formattedDate);
+        } else {
+          emit("update:modelValue", "");
+        }
       }
     };
-    const onClear = () => {
-      emit("update:modelValue", props.mode === "range" ? ["", ""] : null);
+    const formatOutput = (date) => {
+      if (!date) return "";
+      let dateObj;
+      if (date._isAMomentObject && date.isValid()) {
+        dateObj = date.toDate();
+      } else if (typeof date === "string") {
+        dateObj = new Date(date);
+      } else if (date instanceof Date) {
+        dateObj = date;
+      } else {
+        return "";
+      }
+      if (isNaN(dateObj.getTime())) return "";
+      if (props.outputFormat === "date-only") {
+        const year = dateObj.getFullYear();
+        const month = String(dateObj.getMonth() + 1).padStart(2, "0");
+        const day = String(dateObj.getDate()).padStart(2, "0");
+        return `${year}-${month}-${day}`;
+      } else {
+        return dateObj.toISOString();
+      }
     };
+    const inputClass = computed(() => {
+      const classes = ["v-text-field", "v-input", "v-input--density-comfortable"];
+      if (props.variant === "outlined") {
+        classes.push("v-text-field--variant-outlined");
+      }
+      return classes.join(" ");
+    });
+    const wrapperClass = computed(() => {
+      return "v-field v-field--variant-outlined v-field--density-comfortable";
+    });
+    const isRangeMode = computed(() => props.mode === "range");
     return (_ctx, _cache) => {
+      const _component_Vue3PersianDatetimePicker = resolveComponent("Vue3PersianDatetimePicker");
       return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createVNode(unref(Vue3PersianDatetimePicker), {
+        createVNode(_component_Vue3PersianDatetimePicker, {
+          label: __props.label,
           modelValue: selectedDate.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedDate.value = $event),
-          type: pickerType.value,
-          format: props.format,
-          "display-format": computedDisplayFormat.value,
-          color: props.color,
-          disabled: props.disabled,
-          clearable: props.clearable,
-          min: props.minDate,
-          max: props.maxDate,
-          "auto-submit": props.mode === "single",
-          range: props.mode === "range",
-          locale: props.calendarType === "jalali" ? "fa" : "en",
-          "locale-config": localeConfig.value,
-          placeholder: props.placeholder,
+          format: __props.format,
+          "display-format": __props.displayFormat,
+          editable: false,
+          clearable: __props.clearable,
+          disabled: __props.disabled,
+          min: __props.minDate,
+          max: __props.maxDate,
+          placeholder: __props.placeholder,
+          "input-class": inputClass.value,
+          "wrapper-class": wrapperClass.value,
+          range: isRangeMode.value,
+          color: __props.color,
           onChange: onDateChange
-        }, {
-          input: withCtx(() => [
-            createVNode(VTextField, {
-              "model-value": displayValue.value,
-              label: props.label,
-              placeholder: props.placeholder,
-              variant: props.variant,
-              density: props.density,
-              color: props.color,
-              disabled: props.disabled,
-              readonly: true,
-              clearable: props.clearable,
-              rules: props.rules,
-              "hide-details": props.hideDetails,
-              "prepend-inner-icon": props.prependInnerIcon || props.icon,
-              "append-inner-icon": props.appendInnerIcon,
-              "onClick:clear": onClear
-            }, null, 8, ["model-value", "label", "placeholder", "variant", "density", "color", "disabled", "clearable", "rules", "hide-details", "prepend-inner-icon", "append-inner-icon"])
-          ]),
-          _: 1
-        }, 8, ["modelValue", "type", "format", "display-format", "color", "disabled", "clearable", "min", "max", "auto-submit", "range", "locale", "locale-config", "placeholder"])
+        }, null, 8, ["label", "modelValue", "format", "display-format", "clearable", "disabled", "min", "max", "placeholder", "input-class", "wrapper-class", "range", "color"])
       ]);
     };
   }
 });
-const ShamsiDatePicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-2054c11e"]]);
+const ShamsiDatePicker = /* @__PURE__ */ _export_sfc$1(_sfc_main$h, [["__scopeId", "data-v-90d4df89"]]);
 const _hoisted_1$a = { class: "mb-6" };
 const _hoisted_2$6 = { class: "text-subtitle-1 font-weight-medium mb-3" };
 const _hoisted_3$4 = { class: "theme-toggle-container" };