@indielayer/ui 1.10.0 → 1.10.2

package/lib/components/datepicker/Datepicker.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as O, ref as d, openBlock as D, createElementBlock as C, normalizeStyle as I, unref as n, normalizeClass as P, createVNode as u, createSlots as T, withCtx as m, withKeys as p, withModifiers as R, renderList as j, renderSlot as F, normalizeProps as A, guardReactiveProps as z } from "vue";
+import { defineComponent as D, ref as u, openBlock as N, createElementBlock as I, normalizeStyle as P, unref as n, normalizeClass as j, createVNode as d, createSlots as C, withCtx as p, withKeys as f, withModifiers as F, renderList as T, renderSlot as A, normalizeProps as q, guardReactiveProps as M } from "vue";
 import { useMutationObserver as L } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useCommon as q } from "../../composables/useCommon.js";
-import { useInputtable as f } from "../../composables/useInputtable.js";
-import { useInteractive as M } from "../../composables/useInteractive.js";
-import { useTheme as V } from "../../composables/useTheme.js";
-import G from "../input/Input.vue.js";
-import Y from "../../node_modules/.pnpm/@vuepic_vue-datepicker@8.3.2_vue@3.5.10_typescript@5.2.2_/node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.js";
-import "../../node_modules/.pnpm/@vuepic_vue-datepicker@8.3.2_vue@3.5.10_typescript@5.2.2_/node_modules/@vuepic/vue-datepicker/dist/main.css.js";
+import { useCommon as R } from "../../composables/useCommon.js";
+import { useInputtable as m } from "../../composables/useInputtable.js";
+import { useInteractive as z } from "../../composables/useInteractive.js";
+import { useTheme as G } from "../../composables/useTheme.js";
+import V from "../input/Input.vue.js";
+import Y from "../../node_modules/.pnpm/@vuepic_vue-datepicker@11.0.1_vue@3.5.10_typescript@5.2.2_/node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.js";
+import "../../node_modules/.pnpm/@vuepic_vue-datepicker@11.0.1_vue@3.5.10_typescript@5.2.2_/node_modules/@vuepic/vue-datepicker/dist/main.css.js";
 const W = {
   multiCalendars: { type: [Boolean, Number, String, Object], default: void 0 },
   modelValue: { type: [String, Date, Array, Object, Number], default: null },
@@ -26,14 +26,11 @@ const W = {
   offset: { type: [Number, String], default: 10 },
   hideNavigation: { type: Array, default: () => [] },
   timezone: { type: [String, Object], default: null },
-  emitTimezone: { type: String, default: null },
   vertical: { type: Boolean, default: !1 },
   disableMonthYearSelect: { type: Boolean, default: !1 },
   disableYearSelect: { type: Boolean, default: !1 },
-  menuClassName: { type: String, default: null },
   dayClass: { type: Function, default: null },
   yearRange: { type: Array, default: () => [1900, 2100] },
-  calendarCellClassName: { type: String, default: null },
   enableTimePicker: { type: Boolean, default: !0 },
   autoApply: { type: Boolean, default: !1 },
   disabledDates: { type: [Array, Function], default: () => [] },
@@ -41,7 +38,6 @@ const W = {
   startDate: { type: [Date, String], default: null },
   startTime: { type: [Object, Array], default: null },
   hideOffsetDates: { type: Boolean, default: !1 },
-  autoRange: { type: [Number, String], default: null },
   noToday: { type: Boolean, default: !1 },
   disabledWeekDays: { type: Array, default: () => [] },
   allowedDates: { type: Array, default: null },
@@ -54,14 +50,10 @@ const W = {
   flow: { type: Array, default: () => [] },
   partialFlow: { type: Boolean, default: !1 },
   preventMinMaxNavigation: { type: Boolean, default: !1 },
-  minRange: { type: [Number, String], default: null },
-  maxRange: { type: [Number, String], default: null },
-  multiDatesLimit: { type: [Number, String], default: null },
   reverseYears: { type: Boolean, default: !1 },
   weekPicker: { type: Boolean, default: !1 },
   filters: { type: Object, default: () => ({}) },
   arrowNavigation: { type: Boolean, default: !1 },
-  disableTimeRangeValidation: { type: Boolean, default: !1 },
   highlight: {
     type: [Function, Object],
     default: null
@@ -75,7 +67,6 @@ const W = {
     type: [String, Function, Object],
     default: null
   },
-  calendarClassName: { type: String, default: null },
   monthChangeOnScroll: { type: [Boolean, String], default: !0 },
   dayNames: {
     type: [Function, Array],
@@ -92,7 +83,6 @@ const W = {
     default: () => ""
   },
   multiDates: { type: Boolean, default: !1 },
-  partialRange: { type: Boolean, default: !0 },
   ignoreTimeValidation: { type: Boolean, default: !1 },
   minDate: { type: [Date, String], default: null },
   maxDate: { type: [Date, String], default: null },
@@ -101,13 +91,10 @@ const W = {
   placeholder: { type: String, default: "" },
   hideInputIcon: { type: Boolean, default: !1 },
   clearable: { type: Boolean, default: !1 },
+  alwaysClearable: { type: Boolean, default: !1 },
   state: { type: Boolean, default: null },
   required: { type: Boolean, default: !1 },
   autocomplete: { type: String, default: "off" },
-  inputClassName: { type: String, default: null },
-  fixedStart: { type: Boolean, default: !1 },
-  fixedEnd: { type: Boolean, default: !1 },
-  timePicker: { type: Boolean, default: !1 },
   enableSeconds: { type: Boolean, default: !1 },
   is24: { type: Boolean, default: !0 },
   noHoursOverlay: { type: Boolean, default: !1 },
@@ -133,28 +120,31 @@ const W = {
   calendar: { type: Function, default: null },
   config: { type: Object, default: void 0 },
   quarterPicker: { type: Boolean, default: !1 },
-  yearFirst: { type: Boolean, default: !1 }
-}, E = {
-  ...q.props(),
-  ...M.props(),
-  ...f.props(),
-  ...W
+  yearFirst: { type: Boolean, default: !1 },
+  onInternalModelChange: { type: [Function, Object], default: null },
+  enableMinutes: { type: Boolean, default: !0 },
+  ui: { type: Object, default: () => ({}) }
 }, K = {
+  ...R.props(),
+  ...z.props(),
+  ...m.props(),
+  ...W
+}, $ = {
   name: "XDatepicker"
-}, ae = /* @__PURE__ */ O({
-  ...K,
-  props: E,
-  emits: f.emits(),
+}, ae = /* @__PURE__ */ D({
+  ...$,
+  props: K,
+  emits: m.emits(),
   setup(y, { expose: c, emit: g }) {
-    const b = y, h = g, t = d(null);
+    const b = y, h = g, t = u(null);
     function k(e) {
       h("update:modelValue", e), setTimeout(r);
     }
-    function v() {
+    function w() {
       var e;
       (e = t.value) == null || e.blur();
     }
-    function w() {
+    function v() {
       var e;
       (e = t.value) == null || e.focus();
     }
@@ -162,21 +152,22 @@ const W = {
       var e;
       (e = t.value) == null || e.validate();
     }
-    const a = document == null ? void 0 : document.querySelector("html"), i = d((a == null ? void 0 : a.classList.contains("dark")) ?? !1);
+    const a = document == null ? void 0 : document.querySelector("html"), i = u((a == null ? void 0 : a.classList.contains("dark")) ?? !1);
     L(a, (e) => {
       e[0] && e[0].attributeName === "class" && (i.value = (a == null ? void 0 : a.classList.contains("dark")) ?? !1);
     }, {
       attributes: !0
-    }), c({ focus: w, blur: v, validate: r });
-    const { styles: S, classes: B, className: N } = V("Datepicker", {}, b);
-    return (e, $) => (D(), C("div", {
-      style: I(n(S)),
-      class: P([
-        n(N),
-        n(B).wrapper
+    }), c({ focus: v, blur: w, validate: r });
+    const { styles: B, classes: S, className: O } = G("Datepicker", {}, b);
+    return (e, H) => (N(), I("div", {
+      style: P(n(B)),
+      class: j([
+        n(O),
+        n(S).wrapper
       ])
     }, [
-      u(n(Y), {
+      d(n(Y), {
+        ui: e.ui,
         "model-value": e.modelValue,
         "multi-calendars": e.multiCalendars,
         "model-type": e.modelType,
@@ -192,14 +183,11 @@ const W = {
         offset: e.offset,
         "hide-navigation": e.hideNavigation,
         timezone: e.timezone,
-        "emit-timezone": e.emitTimezone,
         vertical: e.vertical,
         "disable-month-year-select": e.disableMonthYearSelect,
         "disable-year-select": e.disableYearSelect,
-        "menu-class-name": e.menuClassName,
         "day-class": e.dayClass,
         "year-range": e.yearRange,
-        "calendar-cell-class-name": e.calendarCellClassName,
         "enable-time-picker": e.enableTimePicker,
         "auto-apply": e.autoApply,
         "disabled-dates": e.disabledDates,
@@ -207,7 +195,6 @@ const W = {
         "start-date": e.startDate,
         "start-time": e.startTime,
         "hide-offset-dates": e.hideOffsetDates,
-        "auto-range": e.autoRange,
         "no-today": e.noToday,
         "disabled-week-days": e.disabledWeekDays,
         "allowed-dates": e.allowedDates,
@@ -220,14 +207,10 @@ const W = {
         flow: e.flow,
         "partial-flow": e.partialFlow,
         "prevent-min-max-navigation": e.preventMinMaxNavigation,
-        "min-range": e.minRange,
-        "max-range": e.maxRange,
-        "multi-dates-limit": e.multiDatesLimit,
         "reverse-years": e.reverseYears,
         "week-picker": e.weekPicker,
         filters: e.filters,
         "arrow-navigation": e.arrowNavigation,
-        "disable-time-range-validation": e.disableTimeRangeValidation,
         highlight: e.highlight,
         teleport: e.teleport,
         "teleport-center": e.teleportCenter,
@@ -235,7 +218,6 @@ const W = {
         "week-num-name": e.weekNumName,
         "week-start": e.weekStart,
         "week-numbers": e.weekNumbers,
-        "calendar-class-name": e.calendarClassName,
         "month-change-on-scroll": e.monthChangeOnScroll,
         "day-names": e.dayNames,
         "month-picker": e.monthPicker,
@@ -246,7 +228,6 @@ const W = {
         "cancel-text": e.cancelText,
         "preview-format": e.previewFormat,
         "multi-dates": e.multiDates,
-        "partial-range": e.partialRange,
         "ignore-time-validation": e.ignoreTimeValidation,
         "min-date": e.minDate,
         "max-date": e.maxDate,
@@ -256,10 +237,6 @@ const W = {
         state: e.state,
         required: e.required,
         autocomplete: e.autocomplete,
-        "input-class-name": e.inputClassName,
-        "fixed-start": e.fixedStart,
-        "fixed-end": e.fixedEnd,
-        "time-picker": e.timePicker,
         "enable-seconds": e.enableSeconds,
         "no-hours-overlay": e.noHoursOverlay,
         "no-minutes-overlay": e.noMinutesOverlay,
@@ -287,12 +264,12 @@ const W = {
         "year-first": e.yearFirst,
         "is-24": e.is24,
         "onUpdate:modelValue": k
-      }, T({
-        "dp-input": m(({ value: s, onEnter: l, onTab: o }) => [
-          u(G, {
+      }, C({
+        "dp-input": p(({ value: s, onEnter: l, onTab: o }) => [
+          d(V, {
             ref_key: "inputRef",
             ref: t,
-            readonly: "",
+            readonly: e.textInput === !1 || e.readonly,
             "model-value": s,
             label: e.label,
             size: e.size,
@@ -300,6 +277,7 @@ const W = {
             helper: e.helper,
             "icon-right": "calendar",
             loading: e.loading,
+            "data-1p-ignore": "",
             name: e.name,
             rules: e.rules,
             tooltip: e.tooltip,
@@ -307,20 +285,20 @@ const W = {
             required: e.required,
             "hide-footer": e.hideFooter,
             onKeydown: [
-              p(R(l, ["prevent"]), ["enter"]),
-              p(o, ["tab"])
+              f(F(l, ["prevent"]), ["enter"]),
+              f(o, ["tab"])
             ]
-          }, null, 8, ["model-value", "label", "size", "disabled", "helper", "loading", "name", "rules", "tooltip", "placeholder", "required", "hide-footer", "onKeydown"])
+          }, null, 8, ["readonly", "model-value", "label", "size", "disabled", "helper", "loading", "name", "rules", "tooltip", "placeholder", "required", "hide-footer", "onKeydown"])
         ]),
         _: 2
       }, [
-        j(e.$slots, (s, l) => ({
+        T(e.$slots, (s, l) => ({
           name: l,
-          fn: m((o = {}) => [
-            F(e.$slots, l, A(z(o)))
+          fn: p((o = {}) => [
+            A(e.$slots, l, q(M(o)))
           ])
         }))
-      ]), 1032, ["model-value", "multi-calendars", "model-type", "position", "dark", "format", "auto-position", "alt-position", "transitions", "format-locale", "utc", "aria-labels", "offset", "hide-navigation", "timezone", "emit-timezone", "vertical", "disable-month-year-select", "disable-year-select", "menu-class-name", "day-class", "year-range", "calendar-cell-class-name", "enable-time-picker", "auto-apply", "disabled-dates", "month-name-format", "start-date", "start-time", "hide-offset-dates", "auto-range", "no-today", "disabled-week-days", "allowed-dates", "now-button-label", "markers", "esc-close", "space-confirm", "month-change-on-arrows", "preset-dates", "flow", "partial-flow", "prevent-min-max-navigation", "min-range", "max-range", "multi-dates-limit", "reverse-years", "week-picker", "filters", "arrow-navigation", "disable-time-range-validation", "highlight", "teleport", "teleport-center", "locale", "week-num-name", "week-start", "week-numbers", "calendar-class-name", "month-change-on-scroll", "day-names", "month-picker", "custom-props", "year-picker", "model-auto", "select-text", "cancel-text", "preview-format", "multi-dates", "partial-range", "ignore-time-validation", "min-date", "max-date", "placeholder", "hide-input-icon", "clearable", "state", "required", "autocomplete", "input-class-name", "fixed-start", "fixed-end", "time-picker", "enable-seconds", "no-hours-overlay", "no-minutes-overlay", "no-seconds-overlay", "hours-grid-increment", "minutes-grid-increment", "seconds-grid-increment", "hours-increment", "minutes-increment", "seconds-increment", "range", "uid", "inline", "text-input", "no-disabled-range", "six-weeks", "action-row", "focus-start-date", "disabled-times", "show-last-in-range", "time-picker-inline", "calendar", "config", "quarter-picker", "year-first", "is-24"])
+      ]), 1032, ["ui", "model-value", "multi-calendars", "model-type", "position", "dark", "format", "auto-position", "alt-position", "transitions", "format-locale", "utc", "aria-labels", "offset", "hide-navigation", "timezone", "vertical", "disable-month-year-select", "disable-year-select", "day-class", "year-range", "enable-time-picker", "auto-apply", "disabled-dates", "month-name-format", "start-date", "start-time", "hide-offset-dates", "no-today", "disabled-week-days", "allowed-dates", "now-button-label", "markers", "esc-close", "space-confirm", "month-change-on-arrows", "preset-dates", "flow", "partial-flow", "prevent-min-max-navigation", "reverse-years", "week-picker", "filters", "arrow-navigation", "highlight", "teleport", "teleport-center", "locale", "week-num-name", "week-start", "week-numbers", "month-change-on-scroll", "day-names", "month-picker", "custom-props", "year-picker", "model-auto", "select-text", "cancel-text", "preview-format", "multi-dates", "ignore-time-validation", "min-date", "max-date", "placeholder", "hide-input-icon", "clearable", "state", "required", "autocomplete", "enable-seconds", "no-hours-overlay", "no-minutes-overlay", "no-seconds-overlay", "hours-grid-increment", "minutes-grid-increment", "seconds-grid-increment", "hours-increment", "minutes-increment", "seconds-increment", "range", "uid", "inline", "text-input", "no-disabled-range", "six-weeks", "action-row", "focus-start-date", "disabled-times", "show-last-in-range", "time-picker-inline", "calendar", "config", "quarter-picker", "year-first", "is-24"])
     ], 6));
   }
 });

package/lib/components/datepicker/theme/Datepicker.base.theme.js

@@ -2,12 +2,10 @@ const d = {
   classes: {
     wrapper: ""
   },
-  styles({ props: o, colors: n, css: a, data: p }) {
-    const i = n.getPalette("primary"), e = n.getPalette("secondary"), t = [`
+  styles({ props: o, colors: i, css: a, data: p }) {
+    const n = i.getPalette("primary"), e = i.getPalette("secondary"), t = [`
     /*General*/
     --dp-font-family: var(--font-family-sans);
-    --dp-border-radius: 8px; /*Configurable border-radius*/
-    --dp-cell-border-radius: 8px; /*Specific border radius for the calendar cell*/
     --dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
 
     /*Sizing*/
@@ -31,7 +29,7 @@ const d = {
 
     /*Font sizes*/
     --dp-font-size: 0.875rem; /*Default font-size*/
-    --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
+    --dp-preview-font-size: 0.875rem; /*Font size of the date preview in the action row*/
     --dp-time-font-size: 0.8rem; /*Font size in the time picker*/
 
     /*Transitions*/
@@ -42,19 +40,19 @@ const d = {
     return t.push(a.variables({
       bg: "#fff",
       text: e[800],
-      disabled: e[800],
-      range: e[200],
+      disabled: e[300],
+      range: n[100],
       icon: e[500],
-      primary: i[500],
+      primary: n[500],
       border: e[100],
       dark: {
         bg: e[800],
         text: e[100],
-        disabled: e[700],
-        range: e[600],
+        disabled: e[600],
+        range: n[900],
         icon: e[200],
-        primary: i[500],
-        border: e[700]
+        primary: n[500],
+        border: e[800]
       }
     })), t;
   }