vueless 1.0.2-beta.47 → 1.0.2-beta.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.47",
+  "version": "1.0.2-beta.49",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.container-modal/UModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useSlots, watch, useId, useTemplateRef } from "vue";
+import { computed, useSlots, watch, useId, useTemplateRef, nextTick } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
@@ -71,42 +71,40 @@ const isExistFooter = computed(() => {
   return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
 });
 
-// TODO: Fix functions to avoid focusing elements under the overlay
+function getFocusableElements() {
+  if (!wrapperRef.value) return [];
 
-// function getFocusableElements() {
-//   if (!wrapperRef.value) return [];
-
-//   return Array.from(
-//     wrapperRef.value.querySelectorAll(
-//       'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-//     ),
-//   );
-// }
+  return Array.from(
+    wrapperRef.value.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    ),
+  );
+}
 
-// function trapFocus(e: KeyboardEvent) {
-//   if (e.key !== "Tab") return;
+function trapFocus(e: KeyboardEvent) {
+  if (e.key !== "Tab") return;
 
-//   const focusableElements = getFocusableElements();
+  const focusableElements = getFocusableElements();
 
-//   if (!focusableElements.length) return;
+  if (!focusableElements.length) return;
 
-//   const firstElement = focusableElements.at(0) as HTMLElement;
-//   const lastElement = focusableElements.at(-1) as HTMLElement;
+  const firstElement = focusableElements.at(0) as HTMLElement;
+  const lastElement = focusableElements.at(-1) as HTMLElement;
 
-//   // Shift+Tab - if focused on first element, move to last
-//   if (e.shiftKey && document.activeElement === firstElement) {
-//     e.preventDefault();
-//     lastElement.focus();
+  // Shift+Tab - if focused on first element, move to last
+  if (e.shiftKey && document.activeElement === firstElement) {
+    e.preventDefault();
+    lastElement.focus();
 
-//     return;
-//   }
+    return;
+  }
 
-//   // Tab - if focused on last element, move to first
-//   if (!e.shiftKey && document.activeElement === lastElement) {
-//     e.preventDefault();
-//     firstElement.focus();
-//   }
-// }
+  // Tab - if focused on last element, move to first
+  if (!e.shiftKey && document.activeElement === lastElement) {
+    e.preventDefault();
+    firstElement.focus();
+  }
+}
 
 watch(isShownModal, onChangeShownModal);
 
@@ -115,7 +113,7 @@ function onChangeShownModal(newValue: boolean) {
   toggleOverflow();
 
   if (newValue) {
-    // nextTick(() => wrapperRef.value?.focus());
+    nextTick(() => wrapperRef.value?.focus());
   }
 }
 
@@ -135,10 +133,10 @@ function toggleOverflow() {
 
 function toggleEventListeners() {
   if (isShownModal.value) {
-    // document.addEventListener("keydown", trapFocus);
+    document.addEventListener("keydown", trapFocus);
     document.addEventListener("keydown", onKeydownEsc);
   } else {
-    // document.removeEventListener("keydown", trapFocus);
+    document.removeEventListener("keydown", trapFocus);
     document.removeEventListener("keydown", onKeydownEsc);
   }
 }

package/ui.form-calendar/UCalendar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="TModelValue extends DateValue">
-import { computed, ref, watch, useTemplateRef, nextTick } from "vue";
+import { computed, ref, watch, useTemplateRef, nextTick, onMounted } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
@@ -63,24 +63,29 @@ const emit = defineEmits([
    * @property {object} modelValue
    */
   "update:modelValue",
+
   /**
    * Triggers when calendar view changes.
    * @property {string} view
    */
   "update:view",
+
   /**
    * Triggers when date value changes.
    * @property {object} value
    */
   "input",
+
   /**
    * Triggers when calendar date is selected by clicking "Enter".
    */
   "submit",
+
   /**
    * Triggers when arrow keys are used to change calendar date.
    */
   "keydown",
+
   /**
    * Triggers when the user changes the date input value.
    * @property {string} value
@@ -315,6 +320,32 @@ const currentViewLabel = computed(() => {
   return label;
 });
 
+onMounted(() => {
+  if (props.modelValue && (props.dateFormat || props.dateTimeFormat)) {
+    const formatted = isRangeDate(props.modelValue)
+      ? {
+          from: formatDate(
+            parseDate(props.modelValue.from, actualDateFormat.value, locale.value),
+            actualDateFormat.value,
+            locale.value,
+          ),
+          to: formatDate(
+            parseDate(props.modelValue.to, actualDateFormat.value, locale.value),
+            actualDateFormat.value,
+            locale.value,
+          ),
+        }
+      : formatDate(
+          parseDate(props.modelValue, actualDateFormat.value, locale.value),
+          actualDateFormat.value,
+          locale.value,
+        );
+
+    emit("update:modelValue", formatted);
+    emit("userDateChange", userFormattedDate.value);
+  }
+});
+
 watch(userFormattedDate, () => {
   emit("userDateChange", userFormattedDate.value);
 });
@@ -792,7 +823,6 @@ const {
   >
     <div v-bind="navigationAttrs" :data-test="getDataTest('navigation')">
       <UButton
-        v-if="range"
         square
         size="sm"
         color="grayscale"
@@ -818,6 +848,7 @@ const {
 
       <UButton
         block
+        square
         size="sm"
         color="grayscale"
         variant="ghost"
@@ -841,7 +872,6 @@ const {
       />
 
       <UButton
-        v-if="range"
         square
         size="sm"
         color="grayscale"

package/ui.form-calendar/UCalendarMonthView.vue

@@ -55,7 +55,12 @@ function getMonthState(month: Date) {
     props.selectedDateTo &&
     props.selectedDate &&
     isMoreThanOneMonthDiff(props.selectedDate, props.selectedDateTo);
-  const isActiveMonth = props.activeMonth && isSameMonth(props.activeMonth, month) && !props.range;
+
+  const isActiveMonth =
+    props.activeMonth &&
+    isSameMonth(props.activeMonth, month) &&
+    !props.range &&
+    !dateIsOutOfRange(month, props.minDate, props.maxDate, props.locale, props.dateFormat);
 
   return {
     isSelectedMonth,

package/ui.form-calendar/UCalendarYearView.vue

@@ -127,7 +127,12 @@ function getYearState(year: Date) {
     props.selectedDateTo &&
     props.selectedDate &&
     props.selectedDateTo.getFullYear() - props.selectedDate.getFullYear() >= 1;
-  const isActiveYear = props.activeMonth && isSameMonth(props.activeMonth, year) && !props.range;
+
+  const isActiveYear =
+    props.activeMonth &&
+    isSameMonth(props.activeMonth, year) &&
+    !props.range &&
+    !dateIsOutOfRange(year, props.minDate, props.maxDate, props.locale, props.dateFormat);
 
   return {
     isSelectedYear,

package/ui.form-calendar/storybook/stories.ts

@@ -9,7 +9,7 @@ import {
 
 import UCalendar from "../../ui.form-calendar/UCalendar.vue";
 import URow from "../../ui.container-row/URow.vue";
-import UDatePicker from "../../ui.form-date-picker/UDatePicker.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import { COMPONENT_NAME } from "../constants.ts";
 
@@ -25,7 +25,7 @@ export default {
   title: "Form Inputs & Controls / Calendar",
   component: UCalendar,
   args: {
-    modelValue: null,
+    modelValue: new Date(new Date().getFullYear(), new Date().getMonth(), 10, 12, 35, 50),
   },
   argTypes: {
     ...getArgTypes(COMPONENT_NAME),
@@ -41,21 +41,19 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UCalendarArgs> = (args: UCalendarArgs) => ({
-  components: { UCalendar },
+  components: { UCalendar, UText },
   setup: () => ({ args, slots: getSlotNames(COMPONENT_NAME) }),
   template: `
       <UCalendar v-bind="args" v-model="args.modelValue">
         ${args.slotTemplate || getSlotsFragment("")}
       </UCalendar>
 
-      <div class="mt-4">
-        {{ args.modelValue }}
-      </div>
+      <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
     `,
 });
 
 const EnumTemplate: StoryFn<UCalendarArgs> = (args: UCalendarArgs, { argTypes }) => ({
-  components: { UCalendar, URow },
+  components: { UCalendar, URow, UText },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
     <URow>
@@ -66,19 +64,13 @@ const EnumTemplate: StoryFn<UCalendarArgs> = (args: UCalendarArgs, { argTypes })
         v-model="args.modelValue"
       />
     </URow>
-  `,
-});
 
-const UserDateFormatTemplate: StoryFn<UCalendarArgs> = (args: UCalendarArgs) => ({
-  components: { UDatePicker },
-  setup: () => ({ args, slots: getSlotNames(COMPONENT_NAME) }),
-  template: `
-      <UDatePicker v-bind="args" v-model="args.modelValue" />
-    `,
+    <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+  `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { modelValue: null };
+Default.args = {};
 
 export const View = EnumTemplate.bind({});
 View.args = { enum: "view" };
@@ -102,42 +94,42 @@ Range.args = {
 export const Timepicker = DefaultTemplate.bind({});
 Timepicker.args = { modelValue: new Date(2024, 2, 14, 12, 24, 14), timepicker: true };
 
-export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "Y-m-d" };
-DateFormat.parameters = {
-  docs: {
-    description: {
-      story: "Date string format.",
-    },
-  },
-};
+export const DateFormat: StoryFn<UCalendarArgs> = (args: UCalendarArgs) => ({
+  components: { UCalendar, UText, URow },
+  setup: () => ({ args }),
+  template: `
+    <URow block gap="2xl">
+      <UCalendar v-model="args.modelValue" date-format="Y-m-d" />
 
-export const DateTimeFormat = DefaultTemplate.bind({});
-DateTimeFormat.args = { timepicker: true, dateTimeFormat: "Y-m-d H:i:S" };
-DateTimeFormat.parameters = {
-  docs: {
-    description: {
-      story: "Same as date format, but used when timepicker is enabled.",
-    },
-  },
-};
+      <UCalendar
+        v-model="args.modelValue"
+        date-time-format="Y-m-d H:i:S"
+        timepicker
+      />
+    </URow>
 
-export const UserDateFormat = UserDateFormatTemplate.bind({});
-UserDateFormat.args = { userDateFormat: "d/m/Y" };
-UserDateFormat.parameters = {
+    <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+  `,
+});
+DateFormat.parameters = {
   docs: {
     description: {
-      story: "User-friendly date format (it will be shown in UI).",
+      story: "Date string format.",
     },
-  },
-};
-
-export const UserDateTimeFormat = UserDateFormatTemplate.bind({});
-UserDateTimeFormat.args = { timepicker: true, userDateTimeFormat: "d/m/Y H:i:S" };
-UserDateTimeFormat.parameters = {
-  docs: {
-    description: {
-      story: "Same as user format, but used when timepicker is enabled.",
+    source: {
+      code: `
+        <URow block gap="2xl">
+          <UCalendar v-model="args.modelValue" date-format="Y-m-d" />
+
+          <UCalendar
+            v-model="args.modelValue"
+            date-time-format="Y-m-d H:i:S"
+            timepicker
+          />
+        </URow>
+
+        <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+      `,
     },
   },
 };

package/ui.form-date-picker/storybook/stories.ts

@@ -12,6 +12,7 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
+import UText from "../../ui.text-block/UText.vue";
 
 import { COMPONENT_NAME } from "../constants.ts";
 
@@ -38,8 +39,7 @@ export default {
   component: UDatePicker,
   args: {
     label: "Select a date",
-    modelValue: null,
-    openDirectionY: "bottom",
+    modelValue: new Date(),
   },
   argTypes: {
     ...getArgTypes(COMPONENT_NAME),
@@ -48,28 +48,26 @@ export default {
     docs: {
       ...getDocsDescription(COMPONENT_NAME),
       story: {
-        height: "480px",
+        height: "450px",
       },
     },
   },
 } as Meta;
 
 const DefaultTemplate: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
-  components: { UDatePicker, UIcon },
+  components: { UDatePicker, UIcon, UText },
   setup: () => ({ args, slots: getSlotNames(COMPONENT_NAME) }),
   template: `
-    <UDatePicker open-direction-y="bottom" v-bind="args" v-model="args.modelValue">
+    <UDatePicker v-bind="args" v-model="args.modelValue" class="max-w-96">
       ${args.slotTemplate || getSlotsFragment("")}
     </UDatePicker>
 
-    <div class="mt-4">
-      {{ args.modelValue }}
-    </div>
+    <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
   `,
 });
 
 const EnumTemplate: StoryFn<EnumUDatePickerArgs> = (args: EnumUDatePickerArgs, { argTypes }) => ({
-  components: { UDatePicker, UCol },
+  components: { UDatePicker, UCol, UText },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
     <UCol :class="args.wrapperClass">
@@ -77,54 +75,54 @@ const EnumTemplate: StoryFn<EnumUDatePickerArgs> = (args: EnumUDatePickerArgs, {
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        class="w-full"
+        class="w-full max-w-96"
       />
     </UCol>
+
+    <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
   `,
 });
 
 const OpenDirectionTemplate: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
-  components: { UDatePicker, UCol },
-  setup() {
-    return {
-      args,
-    };
-  },
+  components: { UDatePicker, UCol, UText },
+  setup: () => ({ args }),
   template: `
     <UCol>
       <UDatePicker
-        class="w-full"
         open-direction-y="top"
         open-direction-x="left"
         v-bind="args"
         v-model="args.modelValue"
         label="Top Left"
+        class="w-full max-w-96"
       />
       <UDatePicker
-        class="w-full"
         open-direction-y="top"
         open-direction-x="right"
         v-bind="args"
         v-model="args.modelValue"
         label="Top Right"
+        class="w-full max-w-96"
       />
       <UDatePicker
-        class="w-full"
         open-direction-y="bottom"
         open-direction-x="left"
         v-bind="args"
         v-model="args.modelValue"
         label="Bottom Left"
+        class="w-full max-w-96"
       />
       <UDatePicker
-        class="w-full"
         open-direction-y="bottom"
         open-direction-x="right"
         v-bind="args"
         v-model="args.modelValue"
         label="Bottom Right"
+        class="w-full max-w-96"
       />
     </UCol>
+
+    <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
   `,
 });
 
@@ -132,23 +130,27 @@ export const Default = DefaultTemplate.bind({});
 Default.args = { modelValue: dateValue };
 
 export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { placeholder: "MM/DD/YYYY" };
+Placeholder.args = { placeholder: "MM/DD/YYYY", modelValue: null };
 
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Please choose a date from the calendar." };
 
 export const Error: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
-  components: { UDatePicker, UIcon },
+  components: { UDatePicker, UIcon, UText },
   setup: () => ({ args, slots: getSlotNames(COMPONENT_NAME) }),
   template: `
     <UDatePicker
       open-direction-y="bottom"
       v-bind="args"
       v-model="args.modelValue"
+      class="max-w-96"
       :error="args.modelValue ? '' : 'Please select a valid date.'"
     />
+
+    <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
   `,
 });
+Error.args = { modelValue: null };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
@@ -156,8 +158,24 @@ Disabled.args = { disabled: true };
 export const LabelAlign = EnumTemplate.bind({});
 LabelAlign.args = { enum: "labelAlign", description: "{enumValue}", wrapperClass: "gap-16" };
 
-export const Sizes = EnumTemplate.bind({});
-Sizes.args = { enum: "size", placeholder: "{enumValue}" };
+export const Sizes: StoryFn<EnumUDatePickerArgs> = (args: EnumUDatePickerArgs, { argTypes }) => ({
+  components: { UDatePicker, URow, UText },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <URow block>
+      <UDatePicker
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+        v-model="args.modelValue"
+        class="w-full max-w-96"
+      />
+    </URow>
+
+    <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+  `,
+});
+Sizes.args = { enum: "size" };
 
 export const OpenDirection = OpenDirectionTemplate.bind({});
 OpenDirection.args = {};
@@ -183,43 +201,125 @@ Timepicker.args = {
     14,
   ),
 };
-
-export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "Y-m-d" };
-DateFormat.parameters = {
+Timepicker.parameters = {
   docs: {
-    description: {
-      story: "Date string format.",
+    story: {
+      height: "500px",
     },
   },
 };
 
-export const DateTimeFormat = DefaultTemplate.bind({});
-DateTimeFormat.args = { timepicker: true, dateTimeFormat: "Y-m-d H:i:S" };
-DateTimeFormat.parameters = {
+export const DateFormat: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
+  components: { UDatePicker, UText, URow },
+  setup: () => ({ args }),
+  template: `
+    <URow block>
+      <UDatePicker
+        v-model="args.modelValue"
+        label="Select a date"
+        date-format="Y-m-d"
+        class="w-full"
+      />
+
+      <UDatePicker
+        v-model="args.modelValue"
+        label="Select a date"
+        date-time-format="Y-m-d H:i:S"
+        timepicker
+        class="w-full"
+      />
+    </URow>
+
+    <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+  `,
+});
+DateFormat.parameters = {
   docs: {
     description: {
-      story: "Same as date format, but used when timepicker is enabled.",
+      story: "Date string format.",
+    },
+    source: {
+      code: `
+        <URow block>
+          <UDatePicker
+            v-model="args.modelValue"
+            label="Select a date"
+            date-format="Y-m-d"
+            class="w-full"
+          />
+
+          <UDatePicker
+            v-model="args.modelValue"
+            label="Select a date"
+            date-time-format="Y-m-d H:i:S"
+            timepicker
+            class="w-full"
+          />
+        </URow>
+
+        <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+      `,
     },
   },
 };
 
-export const UserDateFormat = DefaultTemplate.bind({});
-UserDateFormat.args = { userDateFormat: "d/m/Y" };
+export const UserDateFormat: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
+  components: { UDatePicker, UText, URow },
+  setup: () => ({ args }),
+  template: `
+    <URow block>
+      <UDatePicker
+        v-model="args.modelValue"
+        label="Select a date"
+        user-date-format="d/m/Y"
+        class="w-full"
+      />
+
+      <UDatePicker
+        v-model="args.modelValue"
+        label="Select a date"
+        user-date-time-format="d/m/Y H:i:S"
+        timepicker
+        class="w-full"
+      />
+    </URow>
+
+    <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+  `,
+});
 UserDateFormat.parameters = {
   docs: {
     description: {
-      story: "User-friendly date format (it will be shown in UI).",
+      story: "Date string format.",
+    },
+    source: {
+      code: `
+        <URow block>
+          <UDatePicker
+            v-model="args.modelValue"
+            label="Select a date"
+            user-date-format="d/m/Y"
+            class="w-full"
+          />
+
+          <UDatePicker
+            v-model="args.modelValue"
+            label="Select a date"
+            user-date-time-format="d/m/Y H:i:S"
+            timepicker
+            class="w-full"
+          />
+        </URow>
+
+        <UText color="neutral" class="mt-4">{{ args.modelValue }}</UText>
+      `,
     },
   },
 };
-
-export const UserDateTimeFormat = DefaultTemplate.bind({});
-UserDateTimeFormat.args = { timepicker: true, userDateTimeFormat: "d/m/Y H:i:S" };
-UserDateTimeFormat.parameters = {
+UserDateFormat.parameters = {
   docs: {
     description: {
-      story: "Same as user format, but used when timepicker is enabled.",
+      story: "User-friendly date format (it will be shown in UI).",
     },
   },
 };
@@ -268,7 +368,7 @@ export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
     <URow align="stretch">
       <UDatePicker
         v-bind="args"
-        v-model="args.modelValue"
+        v-model="args.leftModel"
         class="w-full"
         :config="{ datepickerInput: { wrapper: 'pl-0' } }"
       >
@@ -276,9 +376,9 @@ export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
           <UButton
             label="Today"
             size="sm"
-            variant="ghost"
+            variant="soft"
             class="h-full rounded-r-none"
-            @click="args.modelValue = new Date()"
+            @click="args.leftModel = new Date()"
           />
         </template>
       </UDatePicker>