vueless 0.0.151 → 0.0.153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.151",
+  "version": "0.0.153",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -28,17 +28,17 @@
     "cva": "^1.0.0-beta.1",
     "lodash-es": "^4.17.21",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "tippy.js": "^6.3.7",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@material-symbols/svg-500": "^0.17.4",
     "@release-it/bumper": "^6.0.1",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.27",
-    "@vueless/storybook": "^0.0.27",
+    "@vueless/plugin-vite": "^0.0.28",
+    "@vueless/storybook": "^0.0.30",
     "@vueless/web-types": "^0.0.8",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
@@ -52,10 +52,10 @@
     "prettier": "^3.2.5",
     "prettier-eslint": "^16.3.0",
     "release-it": "^17.2.1",
-    "vite": "^5.2.10",
+    "vite": "^5.2.13",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vue": "^3.4.25",
+    "vue": "^3.4.27",
     "vue-router": "^4.3.2"
   },
   "resolutions": {
@@ -67,6 +67,5 @@
   },
   "bugs": {
     "url": "https://github.com/vuelessjs/vueless/issues"
-  },
-  "web-types": "./web-types.json"
+  }
 }

package/preset.tailwind/index.js

@@ -25,7 +25,7 @@ export function vuelessPreset() {
   const prodSafelist = getSafelist();
   const devSafelist = [
     {
-      pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
+      pattern: /^!?(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
       variants: ["hover", "focus", "focus-within", "active", "disabled"],
     },
   ];

package/ui.button/configs/default.config.js

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       flex items-center justify-center
       text-base font-medium outline-none
-      border border-solid rounded-lg
+      border border-solid
       transition duration-100 ease-in-out
       focus:ring-opacity-20 focus:ring-4 focus:ring-{color}-700
       focus-within:ring-opacity-20 focus-within:ring-4 focus-within:ring-{color}-700
@@ -47,6 +47,7 @@ export default /*tw*/ {
         true: "pointer-events-none gap-0",
       },
       pill: {
+        false: "rounded-lg",
         true: "rounded-full",
       },
       block: {

package/ui.button-toggle/composables/attrs.composable.js

@@ -23,6 +23,8 @@ export function useAttrs(props) {
   const itemsClasses = computed(() =>
     cvaItems({
       size: props.size,
+      variant: props.variant,
+      multiple: props.multiple,
       separated: props.separated,
     }),
   );

package/ui.button-toggle/configs/default.config.js

@@ -1,12 +1,4 @@
 export default /*tw*/ {
-  label: {
-    base: "flex flex-wrap",
-    variants: {
-      block: {
-        true: "w-full",
-      },
-    },
-  },
   items: {
     base: "flex flex-wrap",
     variants: {
@@ -20,23 +12,33 @@ export default /*tw*/ {
       },
       separated: {
         false: `
-          gap-px flex-nowrap
+          flex-nowrap -space-x-px gap-0
           [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none
           [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none
         `,
       },
     },
+    compoundVariants: [
+      { separated: false, variant: "thirdary", class: "space-x-0" },
+      { separated: false, multiple: true, class: "space-x-px" },
+    ],
+  },
+  label: {
+    base: "flex flex-wrap",
+    variants: {
+      block: {
+        true: "w-full",
+      },
+    },
   },
   item: "",
   defaultVariants: {
-    color: "brand",
     variant: "primary",
     labelAlign: "top",
     size: "md",
     block: false,
     pill: false,
     square: false,
-    filled: false,
     disabled: false,
     multiple: false,
     separated: false,

package/ui.button-toggle/index.stories.js

@@ -1,14 +1,23 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { ref } from "vue";
+import { getArgTypes } from "../service.storybook";
 
 import UToggle from "../ui.button-toggle";
 import UIcon from "../ui.image-icon";
 import UToggleItem from "../ui.button-toggle-item";
 import URow from "../ui.container-row";
 
+const OPTIONS = [
+  { value: "11", label: "label 1" },
+  { value: "12", label: "label 2" },
+  { value: "13", label: "label 3" },
+  { value: "14", label: "label 4" },
+];
+
 /**
  * The `UToggle` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button-toggle)
  */
 export default {
+  components: { UIcon, UToggleItem },
   title: "Buttons & Links / Toggle",
   component: UToggle,
   argTypes: {
@@ -25,26 +34,18 @@ const DefaultTemplate = (args) => ({
     };
   },
   setup() {
-    const groupOptions = [
-      { value: "11", label: "label 1" },
-      { value: "12", label: "label 2" },
-      { value: "13", label: "label 3" },
-      { value: "14", label: "label 4" },
-    ];
-
-    return { args, groupOptions };
+    return { args, OPTIONS };
   },
   template: `
     <UToggle
       v-model="value"
       v-bind="args"
-      :options="groupOptions"
-      name="defaultTemplate"
+      :options="OPTIONS"
     />
   `,
 });
 
-const checkboxTemplate = (args) => ({
+const multipleTemplate = (args) => ({
   components: { UToggle },
   data() {
     return {
@@ -52,39 +53,27 @@ const checkboxTemplate = (args) => ({
     };
   },
   setup() {
-    const groupOptions = [
-      { value: "11", label: "label 1" },
-      { value: "12", label: "label 2" },
-      { value: "13", label: "label 3" },
-      { value: "14", label: "label 4" },
-    ];
-
-    return { args, groupOptions };
+    return { args, OPTIONS };
   },
   template: `
     <UToggle
       v-model="value"
       v-bind="args"
       multiple
-      :options="groupOptions"
-      name="defaultTemplate"
+      :options="OPTIONS"
+      name="multipleTemplate"
     />
   `,
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UToggle, URow },
-  data() {
-    return {
-      value: "",
-    };
-  },
   setup() {
-    const slots = getSlotNames(UToggle.name);
+    const value = ref("");
 
     return {
       args,
-      slots,
+      value,
       sizes: argTypes.size.options,
     };
   },
@@ -92,6 +81,9 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     <URow>
       <UToggle
         v-for="(size, index) in sizes"
+        :key="index"
+        name="sizeTemplate"
+        v-model="value"
         v-bind="args"
         :size="size"
         :label="size"
@@ -99,14 +91,37 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
           { value: size + 1, label: size },
           { value: size + 2, label: size },
         ]"
-        v-model="value"
+      />
+    </URow>
+  `,
+});
+
+const VariantsTemplate = (args, { argTypes } = {}) => ({
+  components: { UToggle, URow },
+  setup() {
+    const value = ref("");
+
+    return {
+      args,
+      value,
+      variants: argTypes.variant.options,
+    };
+  },
+  template: `
+    <URow>
+      <UToggle
+        v-for="(variant, index) in variants"
         :key="index"
         name="sizeTemplate"
-      >
-        <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-          <template v-if="args[slot]">{{ args[slot] }}</template>
-        </template>
-      </UToggle>
+        v-model="value"
+        v-bind="args"
+        :variant="variant"
+        :label="variant"
+        :options="[
+          { value: variant + 1, label: variant },
+          { value: variant + 2, label: variant },
+        ]"
+      />
     </URow>
   `,
 });
@@ -114,9 +129,11 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 const SlotTemplate = (args) => ({
   components: { UToggle, UIcon, UToggleItem },
   setup() {
+    const selected = ref("");
+
     return {
       args,
-      selected: "55",
+      selected,
     };
   },
   template: `
@@ -128,31 +145,79 @@ const SlotTemplate = (args) => ({
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {
-  name: "first name",
+  name: "Default",
 };
 
-export const multiple = checkboxTemplate.bind({});
-multiple.args = {
-  name: "second name",
+export const label = DefaultTemplate.bind({});
+label.args = {
+  label: "Label",
+  description: "description",
 };
 
 export const sizes = SizesTemplate.bind({});
 sizes.args = {
-  name: "four name",
+  name: "sizes",
+};
+
+export const variants = VariantsTemplate.bind({});
+variants.args = {
+  name: "variants",
+};
+
+export const multiple = multipleTemplate.bind({});
+multiple.args = {
+  name: "multiple",
 };
 
 export const block = DefaultTemplate.bind({});
 block.args = {
-  name: "five name",
+  name: "block",
   block: true,
 };
 
+export const separated = DefaultTemplate.bind({});
+separated.args = {
+  name: "separated",
+  separated: true,
+};
+
+export const pill = DefaultTemplate.bind({});
+pill.args = {
+  name: "pill",
+  pill: true,
+  separated: true,
+};
+
+export const square = SlotTemplate.bind({});
+square.args = {
+  name: "square",
+  variant: "secondary",
+  square: true,
+  slotTemplate: `
+    <template #default>
+      <UToggleItem value="1">
+        <UIcon name="star" />
+      </UToggleItem>
+
+      <UToggleItem value="2" >
+        <UIcon name="add" />
+      </UToggleItem>
+
+      <UToggleItem value="3">
+        <UIcon name="timer" />
+      </UToggleItem>
+    </template>
+  `,
+};
+
 export const slotDefault = SlotTemplate.bind({});
 slotDefault.args = {
-  name: "third name",
+  name: "slotDefault",
   slotTemplate: `
     <template #default>
-      <UToggleItem label="label" />
+      <UToggleItem label="label 1" value="1" />
+      <UToggleItem label="label 2" value="2" />
+      <UToggleItem label="label 3" value="3" />
     </template>
   `,
 };

package/ui.button-toggle/index.vue

@@ -17,6 +17,7 @@
           :name="name"
           :model-value="item.value"
           :value="item.value"
+          :disabled="disabled"
           :label="item.label"
           :data-cy="`${dataCy}-item-${index}`"
           v-bind="itemAttrs"
@@ -49,15 +50,6 @@ const props = defineProps({
     default: () => (!this.multiple ? "" : []),
   },
 
-  /**
-   * Toggle variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: UIService.get(defaultConfig, UToggle).default.variant,
-  },
-
   /**
    * Toggle item options.
    */
@@ -67,11 +59,12 @@ const props = defineProps({
   },
 
   /**
-   * Toggle name.
+   * Toggle variant.
+   * @values primary, secondary, thirdary
    */
-  name: {
+  variant: {
     type: String,
-    required: true,
+    default: UIService.get(defaultConfig, UToggle).default.variant,
   },
 
   /**
@@ -83,6 +76,15 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UToggle).default.size,
   },
 
+  /**
+   * Label placement.
+   * @values top, topInside, topWithDesc, bottom, left, right
+   */
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UToggle).default.labelAlign,
+  },
+
   /**
    * Toggle label.
    */
@@ -100,20 +102,11 @@ const props = defineProps({
   },
 
   /**
-   * Label placement.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * Toggle name.
    */
-  labelAlign: {
+  name: {
     type: String,
-    default: UIService.get(defaultConfig, UToggle).default.labelAlign,
-  },
-
-  /**
-   * Make the toggle fill the width with its container.
-   */
-  block: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UToggle).default.block,
+    required: true,
   },
 
   /**
@@ -124,15 +117,6 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UToggle).default.multiple,
   },
 
-  /**
-   * Button color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, UToggle).default.color,
-  },
-
   /**
    * Separate toggle items.
    */
@@ -150,11 +134,11 @@ const props = defineProps({
   },
 
   /**
-   * Fill the background for thirdary variant.
+   * Make the toggle fill the width with its container.
    */
-  filled: {
+  block: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UToggle).default.filled,
+    default: UIService.get(defaultConfig, UToggle).default.block,
   },
 
   /**
@@ -224,23 +208,24 @@ function updateSelectedValue(value, checked) {
   }
 
   if (checked) {
-    selectedValue.value.push(value);
+    const items = selectedValue.value || [];
+
+    items.push(value);
+    selectedValue.value = items;
   } else {
     selectedValue.value = selectedValue.value.filter((item) => String(item) !== String(value));
   }
 }
 
 provide("toggleType", readonly(type));
+provide("togglePill", () => props.pill);
 provide("toggleName", () => props.name);
 provide("toggleSize", () => props.size);
 provide("toggleBlock", () => props.block);
+provide("toggleSquare", () => props.square);
 provide("toggleVariant", () => props.variant);
-provide("toggleColor", () => props.color);
-provide("toggleFilled", () => props.filled);
 provide("toggleDisabled", () => props.disabled);
 provide("toggleSeparated", () => props.separated);
-provide("togglePill", () => props.pill);
-provide("toggleSquare", () => props.square);
 
 provide("toggleSelectedValue", {
   selectedValue: readonly(selectedValue),

package/ui.button-toggle-item/composables/attrs.composable.js

@@ -4,8 +4,8 @@ import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 
-export function useAttrs(props, { selectedValue, separated, variant, color }) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+export function useAttrs(props, { selectedValue, separated, variant }) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
   const { button, selected } = config.value;
 
   const cvaButton = cva({
@@ -14,11 +14,12 @@ export function useAttrs(props, { selectedValue, separated, variant, color }) {
     compoundVariants: button.compoundVariants,
   });
 
-  const buttonClasses = computed(() =>
-    cvaButton({
+  const buttonClasses = computed(() => {
+    return cvaButton({
+      variant: toValue(variant),
       separated: toValue(separated),
-    }),
-  );
+    });
+  });
 
   const cvaSelected = cva({
     base: selected.base,
@@ -27,22 +28,18 @@ export function useAttrs(props, { selectedValue, separated, variant, color }) {
   });
 
   const selectedClasses = computed(() =>
-    setColor(
-      cvaSelected({
-        color: toValue(color),
-        variant: toValue(variant),
-      }),
-      toValue(color),
-    ),
+    cvaSelected({
+      variant: toValue(variant),
+    }),
   );
 
-  const buttonAttrsRaw = getAttrs("button", { isComponent: true, classes: buttonClasses });
   const inputAttrs = getAttrs("input");
+  const buttonAttrsRaw = getAttrs("button", { isComponent: true, classes: buttonClasses });
 
   const buttonAttrs = computed(() => {
-    const isSelected = Array.isArray(selectedValue.value)
-      ? selectedValue.value?.includes(props.value)
-      : selectedValue.value === props.value;
+    const isSelected = Array.isArray(selectedValue?.value)
+      ? selectedValue?.value?.includes(props.value)
+      : selectedValue?.value === props.value;
 
     return {
       ...buttonAttrsRaw.value,

package/ui.button-toggle-item/configs/default.config.js

@@ -1,40 +1,39 @@
 export default /*tw*/ {
   button: {
-    base: "",
+    base: `
+      border-gray-300 font-normal
+      hover:text-brand-600 hover:border-brand-600 hover:relative hover:z-10
+      focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-600 focus-within:ring-brand-600
+      active:text-brand-700 active:border-brand-700 active:relative active:z-10
+      disabled:border-brand-300 disabled:z-0
+    `,
     variants: {
       separated: {
-        false: "!rounded-none",
+        false: "rounded-none",
+      },
+      variant: {
+        thirdary: "border-none hover:bg-brand-600 hover:bg-opacity-5",
       },
     },
   },
   input: "p-0 m-0 size-0 invisible absolute",
   selected: {
-    base: "",
+    base: "relative disabled:z-10",
     variants: {
       variant: {
-        primary: "!bg-{color}-800 !border-{color}-800",
-        secondary: "!text-{color}-800 !border-{color}-800 bg-{color}-800 bg-opacity-10",
-        thirdary: "!text-{color}-800 !bg-{color}-800 !bg-opacity-10",
+        primary: "!text-white bg-brand-600 border-brand-600 disabled:border-brand-600",
+        secondary: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600 bg-opacity-10",
+        thirdary: "text-brand-600 bg-brand-600 bg-opacity-10",
       },
     },
-    compoundVariants: [
-      { color: "grayscale", variant: "primary", class: "!bg-brand-700 !border-brand-700" },
-      { color: "grayscale", variant: "secondary", class: "!text-brand-700 !border-brand-700 !bg-brand-50 !bg-opacity-100" },
-      { color: "grayscale", variant: "thirdary", class: "!text-brand-700 !bg-brand-50" },
-      { color: "white", variant: "primary", class: "!text-brand-700 !border-brand-600 !bg-brand-50" },
-      { color: "white", variant: "secondary", class: "!text-brand-700 !border-brand-600 !bg-brand-50" },
-      { color: "white", variant: "thirdary", class: "!text-brand-700 !bg-brand-50" },
-    ],
   },
   defaultVariants: {
-    color: "brand",
     variant: "primary",
     type: "radio",
     size: "md",
     block: false,
     pill: false,
     square: false,
-    filled: false,
     disabled: false,
   },
 };

package/ui.button-toggle-item/index.stories.js

@@ -12,6 +12,7 @@ export default {
   args: {
     value: "1",
     label: "Label",
+    modelValue: "",
   },
   argTypes: {
     ...getArgTypes(UToggleItem.name),
@@ -41,7 +42,7 @@ const SlotTemplate = (args) => ({
     return { args };
   },
   template: `
-    <UToggleItem v-bind="args" label="Label" >
+    <UToggleItem v-bind="args" >
       ${args.slotTemplate}
     </UToggleItem>
   `,

package/ui.button-toggle-item/index.vue

@@ -1,16 +1,15 @@
 <template>
   <UButton
-    tag="label"
     tabindex="0"
     :for="id"
+    color="grayscale"
+    variant="secondary"
     :label="label"
     :size="toValue(size)"
-    :block="toValue(block)"
-    :variant="toValue(variant)"
-    :color="toValue(color)"
     :pill="toValue(pill)"
-    :filled="toValue(filled)"
+    :block="toValue(block)"
     :square="toValue(square)"
+    :disabled="toValue(disabled)"
     v-bind="buttonAttrs"
     @click.stop="onClickSetValue"
   >
@@ -118,21 +117,19 @@ const emit = defineEmits(["update:modelValue"]);
 const name = inject("toggleName", () => "toggle");
 const type = inject("toggleType", UIService.get(defaultConfig, UToggleItem).default.type);
 const size = inject("toggleSize", UIService.get(defaultConfig, UToggleItem).default.size);
-const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).default.block);
-const variant = inject("toggleVariant", UIService.get(defaultConfig, UToggleItem).default.variant);
-const color = inject("toggleColor", UIService.get(defaultConfig, UToggleItem).default.color);
-const filled = inject("toggleFilled", UIService.get(defaultConfig, UToggleItem).default.filled);
 const pill = inject("togglePill", UIService.get(defaultConfig, UToggleItem).default.pill);
+const block = inject("toggleBlock", UIService.get(defaultConfig, UToggleItem).default.block);
 const square = inject("toggleSquare", UIService.get(defaultConfig, UToggleItem).default.square);
-const separated = inject("toggleSeparated", false);
+const variant = inject("toggleVariant", UIService.get(defaultConfig, UToggleItem).default.variant);
+const separated = inject("toggleSeparated", () => true);
 // eslint-disable-next-line vue/no-dupe-keys, prettier/prettier
-const disabled = inject("toggleDisabled", UIService.get(defaultConfig, UToggleItem).default.disabled);
+const disabled = inject("toggleDisabled", props.disabled || UIService.get(defaultConfig, UToggleItem).default.disabled);
 
 const { selectedValue, updateSelectedValue } = inject("toggleSelectedValue", {});
 
 const selectedItem = ref("");
 
-const { buttonAttrs, inputAttrs } = useAttrs(props, { selectedValue, separated, variant, color });
+const { buttonAttrs, inputAttrs } = useAttrs(props, { selectedValue, separated, variant });
 
 onMounted(() => {
   if (type.value === TYPE_RADIO) {

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.151",
+  "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.",
@@ -7002,15 +7020,6 @@
               },
               "default": "() => (!this.multiple ? \"\" : [])"
             },
-            {
-              "name": "variant",
-              "description": "Toggle variant.",
-              "value": {
-                "kind": "expression",
-                "type": "'primary' | 'secondary' | 'thirdary'"
-              },
-              "default": "primary"
-            },
             {
               "name": "options",
               "description": "Toggle item options.",
@@ -7021,13 +7030,13 @@
               "default": "[]"
             },
             {
-              "name": "name",
-              "required": true,
-              "description": "Toggle name.",
+              "name": "variant",
+              "description": "Toggle variant.",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "'primary' | 'secondary' | 'thirdary'"
+              },
+              "default": "primary"
             },
             {
               "name": "size",
@@ -7038,6 +7047,15 @@
               },
               "default": "md"
             },
+            {
+              "name": "labelAlign",
+              "description": "Label placement.",
+              "value": {
+                "kind": "expression",
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+              },
+              "default": "top"
+            },
             {
               "name": "label",
               "description": "Toggle label.",
@@ -7057,22 +7075,13 @@
               "default": "\"\""
             },
             {
-              "name": "labelAlign",
-              "description": "Label placement.",
-              "value": {
-                "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
-              },
-              "default": "top"
-            },
-            {
-              "name": "block",
-              "description": "Make the toggle fill the width with its container.",
+              "name": "name",
+              "required": true,
+              "description": "Toggle name.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
+                "type": "string"
+              }
             },
             {
               "name": "multiple",
@@ -7083,15 +7092,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "color",
-              "description": "Button color.",
-              "value": {
-                "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
-              },
-              "default": "brand"
-            },
             {
               "name": "separated",
               "description": "Separate toggle items.",
@@ -7111,8 +7111,8 @@
               "default": "false"
             },
             {
-              "name": "filled",
-              "description": "Fill the background for thirdary variant.",
+              "name": "block",
+              "description": "Make the toggle fill the width with its container.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"