@symbo.ls/uikit 2.11.96 → 2.11.97

package/dist/index.cjs.js

@@ -4345,7 +4345,7 @@ var require_inherit = __commonJS({
       }
       return parentState;
     };
-    var getChildStateInKey4 = (stateKey, parentState, options = {}) => {
+    var getChildStateInKey4 = (stateKey, parentState, options) => {
       const arr = stateKey.split("/");
       const arrLength = arr.length - 1;
       for (let i = 0; i < arrLength; i++) {
@@ -4525,7 +4525,7 @@ var require_updateState = __commonJS({
         preventUpdate: options.preventHoistElementUpdate,
         overwrite: !options.replace
       });
-      const hasNotUpdated = options.preventUpdate !== true || !options.preventHoistElementUpdate;
+      const hasNotUpdated = !options.preventUpdate || !options.preventHoistElementUpdate;
       if (!options.preventStateUpdateListener && hasNotUpdated) {
         (0, import_event.triggerEventOnUpdate)("stateUpdated", obj, element, options);
       }
@@ -4541,7 +4541,7 @@ var require_updateState = __commonJS({
     };
     var applyElementUpdate = (state, obj, options) => {
       const element = state.__element;
-      if (options.preventUpdate !== true) {
+      if (!options.preventUpdate) {
         element.update({}, {
           ...options,
           updateByState: true
@@ -14673,9 +14673,6 @@ var DialogFooter = {
   }
 };
 
-// Datepicker/index.js
-var import_headless_datepicker = __toESM(require_headless_datepicker());
-
 // Datepicker/days.js
 var DatePickerDay = {
   extend: Button,
@@ -14719,119 +14716,41 @@ var DatePickerDay = {
     }
   }
 };
-var DatePickerGrid = {
+
+// Datepicker/weekdays.js
+var DatePickerWeekDays = {
   extend: Grid,
   props: {
+    overflow: "hidden",
+    padding: "- Z A",
+    width: "100%",
     columns: "repeat(7, 1fr)",
-    minWidth: "100%",
     gap: "W2",
-    padding: "- Z"
-  },
-  childExtend: DatePickerDay,
-  $setStateCollection: (el, s) => {
-    return s.days;
-  },
-  on: {
-    render: (el, state) => {
-      const { key } = el;
-      const isSelected = state.parent.parent.activeMonth === parseInt(key);
-      if (isSelected) {
-        window.requestAnimationFrame(() => {
-          el.parent.parent.node.scrollTo({
-            left: el.node.offsetLeft,
-            behavior: "smooth"
-          });
-        });
+    style: {
+      button: {
+        padding: "0"
       }
     }
-  }
-};
-
-// Datepicker/years.js
-var DatePickerYears = {
-  tag: "aside",
-  props: {
-    overflow: "hidden",
-    position: "relative",
-    ":before": {
-      content: '""',
-      boxSize: "A1 100%",
-      position: "absolute",
-      top: "0",
-      left: "0",
-      background: "linear-gradient(to bottom, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
-      zIndex: "10"
-    },
-    ":after": {
-      content: '""',
-      boxSize: "B 100%",
-      position: "absolute",
-      bottom: "0",
-      left: "0",
-      background: "linear-gradient(to top, var(--theme-tertiary-dark-background) 0%, transparent 100%)"
-    }
   },
-  Flex: {
+  childExtend: {
+    tag: "span",
+    extend: Flex,
     props: {
-      flow: "column",
-      gap: "B",
-      padding: "A Z A1 B1",
-      maxHeight: "100%",
-      overflow: "hidden auto",
-      "::-webkit-scrollbar": { display: "none" }
-    },
-    childExtend: {
-      extend: Button,
-      props: ({ state, text }) => ({
-        fontSize: "Y1",
-        color: "white",
-        opacity: ".4",
-        background: "transparent",
-        transition: "opacity .25s ease",
-        isSelected: state.activeYear === text,
-        ".isSelected": { opacity: "1" },
-        ":hover": { opacity: "1" }
-      }),
-      on: {
-        click: (event, element, state) => state.update({ activeYear: element.text }),
-        render: (el, state) => {
-          const { props: props7 } = el;
-          const { isSelected } = props7;
-          if (isSelected) {
-            window.requestAnimationFrame(() => {
-              el.parent.parent.node.scrollTop = el.node.offsetTop - 100;
-            });
-          }
-        }
-      }
-    },
-    $setCollection: ({ state }) => {
-      const { yearRange } = state;
-      if (yearRange) {
-        const [start, end] = yearRange;
-        const yearsArray = new Array(end + 1 - start).fill(void 0).map((v, k) => {
-          return { text: start + k };
-        }).reverse();
-        return yearsArray;
-      }
-      return [
-        { text: "2023" },
-        { text: "2022" },
-        { text: "2021" },
-        { text: "2020" },
-        { text: "2019" },
-        { text: "2018" },
-        { text: "2017" },
-        { text: "2016" },
-        { text: "2015" },
-        { text: "2014" },
-        { text: "2013" },
-        { text: "2012" },
-        { text: "2012" },
-        { text: "2012" }
-      ];
+      fontSize: "Y1",
+      textTransform: "capitalize",
+      align: "center center",
+      ":nth-child(7n-1), &:nth-child(7n)": { opacity: ".5" }
     }
-  }
+  },
+  ...[
+    { text: "Mo" },
+    { text: "Tu" },
+    { text: "We" },
+    { text: "Th" },
+    { text: "Fr" },
+    { text: "Sa" },
+    { text: "Su" }
+  ]
 };
 
 // Datepicker/months.js
@@ -14841,7 +14760,7 @@ var DatePickerMonthsSlider = {
     position: "relative",
     overflow: "hidden",
     alignItems: "center",
-    padding: "- - B -",
+    padding: "- - A2 -",
     maxWidth: `${272 / 16}em`,
     boxSizing: "border-box",
     ":before": {
@@ -14866,8 +14785,9 @@ var DatePickerMonthsSlider = {
     },
     style: {
       "> button": {
-        width: "16px",
-        height: "16px",
+        padding: "0",
+        width: "A",
+        height: "A",
         position: "absolute",
         zIndex: "35",
         background: "transparent",
@@ -14903,7 +14823,8 @@ var DatePickerMonthsSlider = {
   Flex: {
     props: {
       flex: "1",
-      overflow: "auto hidden",
+      overflow: "hidden",
+      style: { scrollSnapType: "x mandatory" },
       "::-webkit-scrollbar": { display: "none" }
     },
     childExtend: {
@@ -14913,6 +14834,7 @@ var DatePickerMonthsSlider = {
         textAlign: "center",
         boxSizing: "content-box",
         minWidth: "272px",
+        style: { scrollSnapAlign: "center" },
         isSelected: state.activeMonth === parseInt(key),
         ".isSelected": { opacity: "1" }
       }),
@@ -14920,18 +14842,19 @@ var DatePickerMonthsSlider = {
         update: (el, state) => {
           const { props: props7 } = el;
           const { isSelected } = props7;
+          console.log(isSelected);
           if (isSelected) {
             window.requestAnimationFrame(() => {
               el.parent.parent.node.scrollTo({
                 left: el.node.offsetLeft,
-                behavior: "smooth"
+                behavior: state.initialized ? "smooth" : "instant"
               });
             });
           }
         }
       }
     },
-    $setCollection: ({ state, parent }) => {
+    $setPropsCollection: ({ state, parent }) => {
       return [
         { text: "January" },
         { text: "February" },
@@ -14974,38 +14897,87 @@ var DatePickerMonthsSlider = {
   }
 };
 
-// Datepicker/weekdays.js
-var DatePickerWeekDays = {
-  extend: Grid,
+// Datepicker/years.js
+var DatePickerYears = {
+  tag: "aside",
   props: {
     overflow: "hidden",
-    padding: "- Z Z",
-    width: "100%",
-    columns: "repeat(7, 1fr)",
-    gap: "W2"
+    position: "relative",
+    style: {
+      button: {
+        padding: "0"
+      }
+    },
+    ":before": {
+      content: '""',
+      boxSize: "A1 100%",
+      position: "absolute",
+      top: "0",
+      left: "0",
+      background: "linear-gradient(to bottom, var(--theme-tertiary-dark-background) 0%, transparent 100%)",
+      zIndex: "10"
+    },
+    ":after": {
+      content: '""',
+      boxSize: "B 100%",
+      position: "absolute",
+      bottom: "0",
+      left: "0",
+      background: "linear-gradient(to top, var(--theme-tertiary-dark-background) 0%, transparent 100%)"
+    }
   },
-  childExtend: {
-    tag: "span",
-    extend: Flex,
+  if: ({ state }) => state.yearRange,
+  Flex: {
     props: {
-      fontSize: "Y1",
-      textTransform: "capitalize",
-      align: "center center",
-      ":nth-child(7n-1), &:nth-child(7n)": { opacity: ".5" }
+      flow: "column",
+      gap: "B",
+      padding: "A Z A1 B",
+      maxHeight: "100%",
+      overflow: "hidden auto",
+      "::-webkit-scrollbar": { display: "none" }
+    },
+    childExtend: {
+      extend: Button,
+      props: ({ state, text }) => ({
+        fontSize: "Y1",
+        color: "white",
+        opacity: ".4",
+        background: "transparent",
+        transition: "opacity .25s ease",
+        isSelected: state.activeYear === text,
+        ".isSelected": { opacity: "1" },
+        ":hover": { opacity: "1" }
+      }),
+      on: {
+        click: (event, element, state) => state.update({
+          activeYear: element.text
+        }, { isHoisted: true }),
+        render: (el, state) => {
+          const { props: props7 } = el;
+          const { isSelected } = props7;
+          if (!isSelected)
+            return;
+          window.requestAnimationFrame(() => {
+            el.parent.parent.node.scrollTop = el.node.offsetTop - 100;
+          });
+        }
+      }
+    },
+    $setPropsCollection: (element) => {
+      const { yearRange } = element.state;
+      if (!yearRange)
+        return;
+      const [start, end] = yearRange;
+      const yearsArray = new Array(end + 1 - start).fill(void 0).map((v, k) => {
+        return { text: start + k };
+      }).reverse();
+      return yearsArray;
     }
-  },
-  ...[
-    { text: "Mo" },
-    { text: "Tu" },
-    { text: "We" },
-    { text: "Th" },
-    { text: "Fr" },
-    { text: "Sa" },
-    { text: "Su" }
-  ]
+  }
 };
 
-// Datepicker/index.js
+// Datepicker/grid.js
+var import_headless_datepicker = __toESM(require_headless_datepicker());
 var calendar = new import_headless_datepicker.HeadlessDatepicker.Calendar({
   calendarMode: "exact"
 });
@@ -15018,10 +14990,31 @@ var extractMonthDays = (data) => {
   });
   return result;
 };
+var DatePickerGrid = {
+  extend: Grid,
+  props: {
+    columns: "repeat(7, 1fr)",
+    minWidth: "100%",
+    gap: "W2",
+    padding: "- Z",
+    style: { scrollSnapAlign: "center" }
+  },
+  childExtend: DatePickerDay,
+  $setStateCollection: (el, s) => s.days
+};
 var DatePickerGridContainer = {
   props: {
-    maxWidth: `${272 / 16}em`,
+    maxWidth: "F3+B",
     position: "relative",
+    content: {
+      overflow: "hidden",
+      style: { scrollSnapType: "x mandatory" }
+    },
+    style: {
+      button: {
+        padding: "0"
+      }
+    },
     ":before": {
       content: '""',
       position: "absolute",
@@ -15039,13 +15032,13 @@ var DatePickerGridContainer = {
       right: "0",
       top: "0",
       zIndex: "30"
-    },
-    content: {
-      overflow: "auto hidden"
     }
   },
   state: (el, s) => {
     const state = el.parent.state;
+    console.warn(state);
+    if (!state.activeYear)
+      return;
     return new Array(12).fill(void 0).map((v, k) => {
       const year = state.activeYear;
       const month = k + 1;
@@ -15058,59 +15051,68 @@ var DatePickerGridContainer = {
       };
     });
   },
-  content: {
-    extend: Flex,
-    childExtend: DatePickerGrid,
+  Flex: {
+    props: {},
+    childExtend: {
+      extend: DatePickerGrid,
+      on: {
+        render: (el, state) => {
+          const { key } = el;
+          const isSelected = state.parent.parent.activeMonth === parseInt(key);
+          if (isSelected) {
+            window.requestAnimationFrame(() => {
+              el.parent.parent.node.scrollTo({
+                left: el.node.offsetLeft,
+                behavior: state.initialized ? "smooth" : "instant"
+              });
+            });
+          }
+        }
+      }
+    },
     $setStateCollection: (el, s) => s.parse()
   }
 };
+
+// Datepicker/index.js
 var DatePicker = {
   extend: [Dialog, Flex],
-  state: {
-    yearRange: [1993, 2023],
-    activeYear: 1993,
-    activeMonth: 8,
-    activeDay: 14
+  state: ({ props: props7 }) => {
+    const date = /* @__PURE__ */ new Date();
+    const activeYear = date.getFullYear();
+    const activeMonth = date.getMonth();
+    const activeDay = date.getDate();
+    console.log({
+      yearRange: props7.yearRange || [activeYear - 30, activeYear],
+      activeYear: props7.activeYear || activeYear,
+      activeMonth: props7.activeMonth || activeMonth,
+      activeDay: props7.activeDay || activeDay,
+      selectedDay: props7.selectedDay || null
+    });
+    return {
+      yearRange: props7.yearRange || [activeYear - 30, activeYear],
+      activeYear: props7.activeYear || activeYear,
+      activeMonth: props7.activeMonth || activeMonth,
+      activeDay: props7.activeDay || activeDay,
+      selectedDay: props7.selectedDay || null
+    };
   },
   props: {
     width: "fit-content",
     margin: "0",
+    userSelect: "none",
     maxHeight: "G+B2"
   },
-  DatePickerYears: {
-    style: {
-      button: {
-        padding: "0"
-      }
-    }
-  },
+  DatePickerYears: {},
   Flex: {
     props: {
       flow: "column",
-      padding: "20px - - -",
+      padding: "A1 - - -",
       position: "relative"
     },
-    DatePickerMonthsSlider: {
-      style: {
-        button: {
-          padding: "0"
-        }
-      }
-    },
-    DatePickerWeekDays: {
-      style: {
-        button: {
-          padding: "0"
-        }
-      }
-    },
-    DatePickerGridContainer: {
-      style: {
-        button: {
-          padding: "0"
-        }
-      }
-    },
+    DatePickerMonthsSlider: {},
+    DatePickerWeekDays: {},
+    DatePickerGridContainer: {},
     DialogFooter: {}
   }
 };