vueless 0.0.331 → 0.0.333

package/ui.form-date-picker-range/useAttrs.js

@@ -6,15 +6,31 @@ import { computed, watchEffect } from "vue";
 import defaultConfig from "./config.js";
 import { POSITION } from "../composables/useAutoPosition.js";
 
-export default function useAttrs(props, { isShownMenu, isTop, isRight }) {
+export default function useAttrs(props, { isShownMenu, isTop, isRight, isPeriod }) {
   const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
   const attrs = {};
 
+  const variantKeys = [
+    "rangeInputFirst",
+    "rangeInputLast",
+    "periodButtonActive",
+    "periodDateWeekList",
+    "periodDateMonthList",
+    "periodDateQuarterList",
+    "periodDateYearList",
+    "firstPeriodGridDate",
+    "firstPeriodListDate",
+    "lastPeriodGridDate",
+    "lastPeriodListDate",
+    "periodDateActive",
+    "periodDateInRange",
+  ];
+
   for (const key in defaultConfig) {
-    if (isSystemKey(key)) continue;
+    if (isSystemKey(key) && variantKeys.includes(key)) continue;
 
     const classes = computed(() => {
       let value = config.value[key];
@@ -66,24 +82,6 @@ export default function useAttrs(props, { isShownMenu, isTop, isRight }) {
       }));
     }
 
-    if (key === "periodButton") {
-      attrs[`${key}Attrs`] = (classes) => {
-        return getAttrs("periodButton", { classes }).value;
-      };
-    }
-
-    if (key === "periodDateList") {
-      attrs[`${key}Attrs`] = (classes) => {
-        return getAttrs("periodDateList", { classes }).value;
-      };
-    }
-
-    if (key === "periodDate") {
-      attrs[`${key}Attrs`] = (classes) => {
-        return getAttrs("periodDate", { classes }).value;
-      };
-    }
-
     if (key === "calendar") {
       // This watcher rewrites default calendar locales with datepicker range locales
       // Watcher will not rewrite custom calendar locales
@@ -123,8 +121,128 @@ export default function useAttrs(props, { isShownMenu, isTop, isRight }) {
     }
   }
 
+  for (const key of variantKeys) {
+    if (key === "rangeInputFirst") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.rangeInputAttrs.value,
+        class: cx([attrs.rangeInputAttrs.value.class, config.value.rangeInputFirst]),
+      }));
+    }
+
+    if (key === "rangeInputLast") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.rangeInputAttrs.value,
+        class: cx([attrs.rangeInputAttrs.value.class, config.value.rangeInputLast]),
+      }));
+    }
+
+    if (key === "periodButtonActive") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.periodButtonAttrs.value,
+        class: cx([attrs.periodButtonAttrs.value.class, config.value.periodButtonActive]),
+      }));
+    }
+
+    if (key === "periodDateWeekList") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.periodDateListAttrs.value,
+        class: cx([attrs.periodDateListAttrs.value.class, config.value.periodDateWeekList]),
+      }));
+    }
+
+    if (key === "periodDateMonthList") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.periodDateListAttrs.value,
+        class: cx([attrs.periodDateListAttrs.value.class, config.value.periodDateMonthList]),
+      }));
+    }
+
+    if (key === "periodDateQuarterList") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.periodDateListAttrs.value,
+        class: cx([attrs.periodDateListAttrs.value.class, config.value.periodDateQuarterList]),
+      }));
+    }
+
+    if (key === "periodDateYearList") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.periodDateListAttrs.value,
+        class: cx([attrs.periodDateListAttrs.value.class, config.value.periodDateYearList]),
+      }));
+    }
+
+    if (key === "periodDateActive") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.periodDateAttrs.value,
+        class: cx([attrs.periodDateAttrs.value.class, config.value.periodDateActive]),
+      }));
+    }
+
+    if (key === "periodDateInRange") {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.periodDateAttrs.value,
+        class: cx([attrs.periodDateAttrs.value.class, config.value.periodDateInRange]),
+      }));
+    }
+
+    if (
+      [
+        "firstPeriodGridDate",
+        "firstPeriodListDate",
+        "lastPeriodGridDate",
+        "lastPeriodListDate",
+      ].includes(key)
+    ) {
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...attrs.periodDateAttrs.value,
+        class: cx([
+          attrs.periodDateAttrs.value.class,
+          config.value.edgePeriodDate,
+          config.value[key],
+        ]),
+      }));
+    }
+  }
+
+  const periodDateListAttrs = computed(() => {
+    if (isPeriod.value.week) return attrs.periodDateWeekListAttrs.value;
+    if (isPeriod.value.month) return attrs.periodDateMonthListAttrs.value;
+    if (isPeriod.value.quarter) return attrs.periodDateQuarterListAttrs.value;
+    if (isPeriod.value.year) return attrs.periodDateYearListAttrs.value;
+
+    return attrs.periodDateListAttrs.value;
+  });
+
+  console.log(attrs.customRangeDescription);
+
+  const periodDatesMenuAttrs = computed(() => ({
+    periodsRowAttrs: attrs.periodsRowAttrs.value,
+    periodButtonAttrs: attrs.periodButtonAttrs.value,
+    periodButtonActiveAttrs: attrs.periodButtonActiveAttrs.value,
+    periodDateAttrs: attrs.periodDateAttrs.value,
+    periodDateActiveAttrs: attrs.periodDateActiveAttrs.value,
+    periodDateInRangeAttrs: attrs.periodDateInRangeAttrs.value,
+    periodDateListAttrs: periodDateListAttrs.value,
+    rangeSwitchWrapperAttrs: attrs.rangeSwitchWrapperAttrs.value,
+    rangeSwitchButtonAttrs: attrs.rangeSwitchButtonAttrs.value,
+    rangeSwitchTitleAttrs: attrs.rangeSwitchTitleAttrs.value,
+    lastPeriodGridDateAttrs: attrs.lastPeriodGridDateAttrs.value,
+    firstPeriodGridDateAttrs: attrs.firstPeriodGridDateAttrs.value,
+    lastPeriodListDateAttrs: attrs.lastPeriodListDateAttrs.value,
+    firstPeriodListDateAttrs: attrs.firstPeriodListDateAttrs.value,
+    customRangeDescription: attrs.customRangeDescriptionAttrs.value,
+  }));
+
+  const rangeInputsAttrs = computed(() => ({
+    rangeInputFirstAttrs: attrs.rangeInputFirstAttrs.value,
+    rangeInputLastAttrs: attrs.rangeInputLastAttrs.value,
+  }));
+
   return {
     ...attrs,
+    periodDatesMenuAttrs,
+    rangeInputsAttrs,
+    periodDateListAttrs,
     config,
     hasSlotContent,
   };

package/ui.form-date-picker-range/useLocale.js

@@ -0,0 +1,63 @@
+import { computed } from "vue";
+import { useLocale as useGlobalLocale } from "../composables/useLocale.js";
+
+import { merge } from "lodash-es";
+import { getSortedLocale } from "../ui.form-calendar/utilDate.js";
+
+import { LOCALE_TYPE } from "../ui.form-calendar/constants.js";
+import { UDatePickerRange } from "./constants.js";
+import defaultConfig from "./config.js";
+
+export function useLocale(props) {
+  const { tm } = useGlobalLocale();
+
+  const i18nGlobal = tm(UDatePickerRange);
+
+  const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+
+  const locale = computed(() => {
+    const { months, weekdays } = currentLocale.value;
+
+    // formatted locale
+    return {
+      ...currentLocale.value,
+      months: {
+        shorthand: getSortedLocale(months.shorthand, LOCALE_TYPE.month),
+        longhand: getSortedLocale(months.longhand, LOCALE_TYPE.month),
+      },
+      weekdays: {
+        shorthand: getSortedLocale(weekdays.shorthand, LOCALE_TYPE.day),
+        longhand: getSortedLocale(weekdays.longhand, LOCALE_TYPE.day),
+      },
+    };
+  });
+
+  const userFormatLocale = computed(() => {
+    const { months, weekdays } = currentLocale.value;
+
+    const monthsLonghand =
+      Boolean(props.config.i18n?.months?.userFormat) || Boolean(i18nGlobal?.months?.userFormat)
+        ? months.userFormat
+        : months.longhand;
+
+    const weekdaysLonghand =
+      Boolean(props.config.i18n?.weekdays?.userFormat) || Boolean(i18nGlobal?.weekdays?.userFormat)
+        ? weekdays.userFormat
+        : weekdays.longhand;
+
+    // formatted locale
+    return {
+      ...currentLocale,
+      months: {
+        shorthand: getSortedLocale(months.shorthand, LOCALE_TYPE.month),
+        longhand: getSortedLocale(monthsLonghand, LOCALE_TYPE.month),
+      },
+      weekdays: {
+        shorthand: getSortedLocale(weekdays.shorthand, LOCALE_TYPE.day),
+        longhand: getSortedLocale(weekdaysLonghand, LOCALE_TYPE.day),
+      },
+    };
+  });
+
+  return { userFormatLocale, locale };
+}

package/ui.form-date-picker-range/useUserFormat.js

@@ -0,0 +1,86 @@
+import { computed } from "vue";
+
+import useBreakpoint from "../composables/useBreakpoint.js";
+
+import { isSameMonth } from "../ui.form-calendar/utilDate.js";
+
+export function useUserFormat(localValue, userFormatLocale, isPeriod, isVariant) {
+  const { isMobileBreakpoint } = useBreakpoint();
+
+  const userFormatDate = computed(() => {
+    if ((!localValue.value.from && !localValue.value.to) || !localValue.value.from) return "";
+
+    let title = "";
+
+    const isDefaultTitle = isPeriod.value.week || isPeriod.value.custom || isPeriod.value.ownRange;
+
+    const from = localValue.value.from;
+    const to = localValue.value.to !== null ? localValue.value.to : null;
+
+    if (isDefaultTitle) {
+      let startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
+      let startYear = from.getFullYear();
+      let endMonthName = userFormatLocale.value.months.longhand[to?.getMonth()];
+      let endYear = to?.getFullYear();
+
+      if (startMonthName === endMonthName && endMonthName === endYear) {
+        startMonthName = "";
+      }
+
+      if (startYear.year === endYear) {
+        startYear = "";
+      }
+
+      const isDatesToSameMonth = isSameMonth(from, to);
+      const isDatesToSameYear = from.getFullYear() === to.getFullYear();
+
+      let fromTitle = `${from.getDate()} ${startMonthName} ${startYear}`;
+
+      if (isDatesToSameMonth && isDatesToSameYear) {
+        fromTitle = from.getDate();
+      }
+
+      if (!isDatesToSameMonth && isDatesToSameYear) {
+        fromTitle = `${from.getDate()} ${startMonthName}`;
+      }
+
+      const toTitle = to ? `${to.getDate()} ${endMonthName} ${endYear}` : "";
+
+      title = `${fromTitle} – ${toTitle}`;
+    }
+
+    if (isPeriod.value.month) {
+      const startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
+      const startYear = from.getFullYear();
+
+      title = `${startMonthName} ${startYear}`;
+    }
+
+    if (isPeriod.value.quarter || isPeriod.value.year) {
+      const startMonthName = userFormatLocale.value.months.longhand[from.getMonth()];
+      const endMonthName = userFormatLocale.value.months.longhand[to?.getMonth()];
+      const endYear = to?.getFullYear();
+
+      const fromTitle = `${from.getDate()} ${startMonthName}`;
+      const toTitle = to ? `${to.getDate()} ${endMonthName} ${endYear}` : "";
+
+      title = `${fromTitle} – ${toTitle}`;
+    }
+
+    if (isMobileBreakpoint.value && !isPeriod.value.month && isVariant.value.button) {
+      const startDay = String(from.getDate()).padStart(2, "0");
+      const endDay = String(to?.getDate())?.padStart(2, "0");
+      const startMonth = String(from.getMonth()).padStart(2, "0");
+      const endMonth = String(to?.getMonth())?.padStart(2, "0");
+
+      const fromTitle = `${startDay}.${startMonth}`;
+      const toTitle = to ? `${endDay}.${endMonth} / ${to.getFullYear()}` : "";
+
+      title = `${fromTitle} – ${toTitle}`;
+    }
+
+    return title;
+  });
+
+  return { userFormatDate };
+}

package/ui.form-input/UInput.vue

@@ -115,6 +115,8 @@ const VALIDATION_RULES_REG_EX = {
 <script setup>
 import { ref, computed, onMounted, useSlots } from "vue";
 
+import { useMutationObserver } from "../composables/useMutationObserver.js";
+
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
 
@@ -448,6 +450,10 @@ function transformValue(value, exp) {
   return matches ? matches.join("") : "";
 }
 
+useMutationObserver(leftSlotWrapperRef, (mutations) => {
+  mutations.forEach(setLabelPosition);
+});
+
 function setLabelPosition() {
   const shouldAlignLabelOnTop =
     !hasSlotContent(slots["left-icon"]) && !hasSlotContent(slots["left"]) && !props.leftIcon;

package/ui.form-input/storybook/stories.js

@@ -127,7 +127,7 @@ export const leftSlot = DefaultTemplate.bind({});
 leftSlot.args = {
   slotTemplate: `
     <template #left>
-      <UButton variant="thirdary" filled square label="Filter" class="rounded-r-none h-full" />
+      <UButton variant="thirdary" filled square noRing label="Filter" class="rounded-r-none h-full" />
     </template>
   `,
 };
@@ -136,7 +136,7 @@ export const rightSlot = DefaultTemplate.bind({});
 rightSlot.args = {
   slotTemplate: `
     <template #right>
-      <UButton variant="thirdary" filled square label="Filter" class="rounded-l-none" />
+      <UButton variant="thirdary" filled square noRing label="Filter" class="rounded-l-none" />
     </template>
   `,
 };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.331",
+  "version": "0.0.333",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2856,6 +2856,140 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "UDatePickerRangeInputs",
+          "description": "",
+          "attributes": [
+            {
+              "name": "locale",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            },
+            {
+              "name": "dateFormat",
+              "value": {
+                "kind": "expression",
+                "type": "string|undefined"
+              }
+            },
+            {
+              "name": "rangeInputName",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "config",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            },
+            {
+              "name": "attrs",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/ui.form-date-picker-range/UDatePickerRangeInputs.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "UDatePickerRangePeriodMenu",
+          "description": "",
+          "attributes": [
+            {
+              "name": "locale",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            },
+            {
+              "name": "isPeriod",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            },
+            {
+              "name": "customRangeButton",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            },
+            {
+              "name": "dateFormat",
+              "value": {
+                "kind": "expression",
+                "type": "string|undefined"
+              }
+            },
+            {
+              "name": "minDate",
+              "value": {
+                "kind": "expression",
+                "type": "string|date"
+              }
+            },
+            {
+              "name": "maxDate",
+              "value": {
+                "kind": "expression",
+                "type": "string|date"
+              }
+            },
+            {
+              "name": "config",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            },
+            {
+              "name": "attrs",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "toggleMenu"
+            },
+            {
+              "name": "closeMenu"
+            },
+            {
+              "name": "clickPrev"
+            },
+            {
+              "name": "clickNext"
+            }
+          ],
+          "source": {
+            "module": "./src/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "UDivider",
           "description": "",