vueless 0.0.152 → 0.0.153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.152",
+  "version": "0.0.153",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.form-date-picker/composables/attrs.composable.js

@@ -1,12 +1,27 @@
 import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed, watchEffect } from "vue";
 
 export default function useAttrs(props, { isShownCalendar }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { calendar } = config.value;
 
-  const calendarAttrs = getAttrs("calendar");
+  const cvaCalendarWrapper = cva({
+    base: calendar.wrapper.base,
+    variants: calendar.wrapper.variants,
+    compoundVariants: calendar.wrapper.compoundVariants,
+  });
+
+  const calendarWrapperClasses = computed(() =>
+    cvaCalendarWrapper({ openDirection: props.openDirection }),
+  );
+
+  const calendarAttrs = getAttrs("calendar", {
+    isComponent: true,
+    classes: calendarWrapperClasses,
+  });
   const inputBlurAttrs = getAttrs("input");
   const inputActiveAttrs = getAttrs("inputActive");
   const wrapperAttrs = getAttrs("wrapper");

package/ui.form-date-picker/configs/default.config.js

@@ -6,7 +6,17 @@ export default /*tw*/ {
       base: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
     },
   },
-  calendar: "absolute z-40 mt-2",
+  calendar: {
+    wrapper: {
+      base: "absolute z-40 mt-2",
+      variants: {
+        openDirection: {
+          left: "left-0",
+          right: "right-0",
+        },
+      },
+    },
+  },
   calendarTransition: {
     enterFromClass: "opacity-0 scale-95",
     enterActiveClass: "transition transform ease-out duration-100",
@@ -99,6 +109,7 @@ export default /*tw*/ {
     dateFormat: "Y-m-d",
     userFormat: "F j, Y",
     size: "md",
+    openDirection: "left",
     timepicker: false,
     disabled: false,
     maxDate: undefined,

package/ui.form-date-picker/index.stories.js

@@ -64,6 +64,28 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
+const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
+  components: { UDatePicker, URow },
+  setup() {
+    return {
+      args,
+      directions: argTypes.openDirection.options,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UDatePicker
+        class="w-full"
+        v-for="(direction, index) in directions"
+        :open-direction="direction"
+        v-bind="args"
+        v-model="args.value"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
 const SlotTemplate = (args) => ({
   components: { UDatePicker, UIcon },
   setup() {
@@ -82,6 +104,9 @@ Default.args = { date: 1645653600 };
 export const sizes = SizesTemplate.bind({});
 sizes.args = { label: "" };
 
+export const openDirection = OpenDirectionTemplate.bind({});
+openDirection.args = {};
+
 export const description = DefaultTemplate.bind({});
 description.args = { description: "some description" };
 

package/ui.form-date-picker/index.vue

@@ -101,6 +101,15 @@ const props = defineProps({
     default: null,
   },
 
+  /**
+   * Datepicker open direction.
+   * @values left, right
+   */
+  openDirection: {
+    type: String,
+    default: UIService.get(defaultConfig, UDatePicker).default.openDirection,
+  },
+
   /**
    * Min date in format date string or Date.
    */

package/ui.form-date-picker-range/composables/attrs.composable.js

@@ -1,5 +1,5 @@
 import useUI from "../../composable.ui";
-import { cx } from "../../service.ui";
+import { cx, cva } from "../../service.ui";
 
 import { computed, watchEffect } from "vue";
 
@@ -7,6 +7,15 @@ import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props, { isShownMenu }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { menu } = config.value;
+
+  const cvaMenu = cva({
+    base: menu.base,
+    variants: menu.variants,
+    compoundVariants: menu.compoundVariants,
+  });
+
+  const menuClasses = computed(() => cvaMenu({ openDirection: props.openDirection }));
 
   const wrapperAttrs = getAttrs("wrapper");
   const buttonWrapperAttrsRaw = getAttrs("buttonWrapper");
@@ -57,7 +66,7 @@ export default function useAttrs(props, { isShownMenu }) {
     return isShownMenu.value ? inputActiveAttrs.value : inputBlurAttrs.value;
   });
 
-  const menuAttrs = getAttrs("menu");
+  const menuAttrs = getAttrs("menu", { classes: menuClasses });
   const periodsRowAttrs = getAttrs("periodsRow");
   const rangeSwitchWrapperAttrs = getAttrs("rangeSwitchWrapper");
   const nextIconAttrs = getAttrs("nextIcon");

package/ui.form-date-picker-range/configs/default.config.js

@@ -19,7 +19,15 @@ export default /*tw*/ {
     hover:bg-zinc-200 hover:ring-brand-600/[.15] focus:border-0 focus:ring-0 focus:ring-brand-600/[.15] active:bg-zinc-200
     disabled:cursor-not-allowed last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none
   `,
-  menu: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
+  menu: {
+    base: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
+    variants: {
+      openDirection: {
+        left: "left-0",
+        right: "right-0",
+      },
+    },
+  },
   menuTransition: {
     enterFromClass: "opacity-0 scale-95",
     enterActiveClass: "transition transform ease-out duration-100",
@@ -185,6 +193,7 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     variant: "button",
+    openDirection: "left",
     timepicker: false,
     disabled: false,
     dateFormat: "d.m.Y",

package/ui.form-date-picker-range/constants/index.js

@@ -18,5 +18,5 @@ export const PERIOD = {
   quarter: "quarter",
   year: "year",
   ownRange: "ownRange",
-  lastThirtyDays: "lastThirtyDays",
+  custom: "custom",
 };

package/ui.form-date-picker-range/index.stories.js

@@ -79,12 +79,37 @@ const VariantsTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
+const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
+  components: { UDatePickerRange, URow },
+  setup() {
+    return {
+      args,
+      directions: argTypes.openDirection.options,
+    };
+  },
+  template: `
+    <URow class="!flex-col">
+      <UDatePickerRange
+        class="w-full"
+        v-for="(direction, index) in directions"
+        :open-direction="direction"
+        v-bind="args"
+        v-model="args.value"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const variants = VariantsTemplate.bind({});
 variants.args = {};
 
+export const openDirection = OpenDirectionTemplate.bind({});
+openDirection.args = {};
+
 export const disabled = VariantsTemplate.bind({});
 disabled.args = { disabled: true };
 

package/ui.form-date-picker-range/index.vue

@@ -272,6 +272,15 @@ const props = defineProps({
     }),
   },
 
+  /**
+   * Datepicker open direction.
+   * @values left, right
+   */
+  openDirection: {
+    type: String,
+    default: UIService.get(defaultConfig, UDatePickerRange).default.openDirection,
+  },
+
   /**
    * The variant of the date picker.
    * @values button, input
@@ -860,8 +869,11 @@ function onInputRangeInput(value, type) {
 setDefaultPeriodForButton();
 
 function setDefaultPeriodForButton() {
-  const from = utcToGMT(getDateFromUnixTimestamp(props.modelValue.to || new Date()));
-  const to = utcToGMT(getDateFromUnixTimestamp(props.modelValue.from || new Date()));
+  const from = utcToGMT(getDateFromUnixTimestamp(props.modelValue.from || new Date()));
+  const to = utcToGMT(getDateFromUnixTimestamp(props.modelValue.to || new Date()));
+
+  const customFrom = utcToGMT(getDateFromUnixTimestamp(props.customRangeButton.range.from));
+  const customTo = utcToGMT(getDateFromUnixTimestamp(props.customRangeButton.range.to));
 
   const isWeekPeriod =
     String(from) === String(getStartOfWeek(from, { weekStartsOn: 1 })) &&
@@ -874,6 +886,7 @@ function setDefaultPeriodForButton() {
     String(from) === String(getStartOfQuarter(from)) && String(to) === String(getEndOfQuarter(to));
   const isYearPeriod =
     String(from) === String(getStartOfYear(from)) && String(to) === String(getEndOfYear(to));
+  const isCustomPeriod = String(from) === String(customFrom) && String(to) === String(customTo);
 
   if (!props.modelValue.from && !props.modelValue.to) {
     period.value = PERIOD.ownRange;
@@ -885,6 +898,8 @@ function setDefaultPeriodForButton() {
     period.value = PERIOD.quarter;
   } else if (isWeekPeriod) {
     period.value = PERIOD.week;
+  } else if (isCustomPeriod) {
+    period.value = PERIOD.custom;
   } else {
     period.value = PERIOD.ownRange;
   }

package/ui.form-date-picker-range/services/dateRange.service.js

@@ -93,12 +93,10 @@ export function getWeekDateList(date, monthShortLocales = {}) {
     const isLastWeek = week + day === weeksInMonth;
 
     let monthFirstDayOfWeek = "";
-    let monthLastDayOfWeek = endOfWeekDate.toLocaleString("en-us", { month: "long" }).toLowerCase();
+    let monthLastDayOfWeek = endOfWeekDate.getMonth();
 
     if (isDayInPreviousMonth || isLastWeek) {
-      monthFirstDayOfWeek = startOfWeekDate
-        .toLocaleString("en-us", { month: "long" })
-        .toLowerCase();
+      monthFirstDayOfWeek = startOfWeekDate.getMonth();
     }
 
     const title = `${firstDayOfWeek} ${

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.152",
+  "version": "0.0.153",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1530,6 +1530,15 @@
               },
               "default": "null"
             },
+            {
+              "name": "openDirection",
+              "description": "Datepicker open direction.",
+              "value": {
+                "kind": "expression",
+                "type": "'left' | 'right'"
+              },
+              "default": "left"
+            },
             {
               "name": "minDate",
               "description": "Min date in format date string or Date.",
@@ -1683,6 +1692,15 @@
               },
               "default": "{\n  range: { from: 0, to: 0 },\n  label: \"\",\n  description: \"\"\n}"
             },
+            {
+              "name": "openDirection",
+              "description": "Datepicker open direction.",
+              "value": {
+                "kind": "expression",
+                "type": "'left' | 'right'"
+              },
+              "default": "left"
+            },
             {
               "name": "variant",
               "description": "The variant of the date picker.",