vueless 0.0.216 → 0.0.218

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.216",
+  "version": "0.0.218",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.37",
+    "@vueless/plugin-vite": "^0.0.38",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",

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

@@ -10,12 +10,12 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
-        "2xs": "px-3 py-1 text-2xs leading-tight gap-1",
-        xs: "px-4 py-1.5 text-xs leading-tight gap-1.5",
-        sm: "px-5 py-2.5 text-sm leading-tight gap-1.5",
-        md: "px-6 py-3.5 text-base leading-tight gap-2",
-        lg: "px-7 py-4 text-lg leading-tight gap-2.5",
-        xl: "px-8 py-5 text-xl leading-tight gap-2.5",
+        "2xs": "px-2 py-1 text-xs leading-tight gap-0.5",
+        xs: "px-3 py-1.5 text-xs leading-tight gap-0.5",
+        sm: "px-4 py-2 text-sm leading-tight gap-1",
+        md: "px-5 py-3 text-sm leading-tight gap-1",
+        lg: "px-6 py-3.5 text-base leading-tight gap-1.5",
+        xl: "px-7 py-4 text-base leading-tight gap-1.5",
       },
       variant: {
         primary: `
@@ -132,22 +132,22 @@ export default /*tw*/ {
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
       { square: true, size: "2xs", class: "p-1" },
       { square: true, size: "xs", class: "p-1.5" },
-      { square: true, size: "sm", class: "p-2.5" },
-      { square: true, size: "md", class: "p-3.5" },
-      { square: true, size: "lg", class: "p-4" },
-      { square: true, size: "xl", class: "p-5" },
+      { square: true, size: "sm", class: "p-2" },
+      { square: true, size: "md", class: "p-3" },
+      { square: true, size: "lg", class: "p-3.5" },
+      { square: true, size: "xl", class: "p-4" },
       { iconLeft: true, size: "2xs", class: "pl-1" },
       { iconLeft: true, size: "xs", class: "pl-1.5" },
-      { iconLeft: true, size: "sm", class: "pl-2.5" },
-      { iconLeft: true, size: "md", class: "pl-3.5" },
-      { iconLeft: true, size: "lg", class: "pl-4" },
-      { iconLeft: true, size: "xl", class: "pl-5" },
+      { iconLeft: true, size: "sm", class: "pl-2" },
+      { iconLeft: true, size: "md", class: "pl-4" },
+      { iconLeft: true, size: "lg", class: "pl-3.5" },
+      { iconLeft: true, size: "xl", class: "pl-4" },
       { iconRight: true, size: "2xs", class: "pr-1" },
-      { iconRight: true, size: "xs", class: "pr-1.5" },
-      { iconRight: true, size: "sm", class: "pr-2.5" },
-      { iconRight: true, size: "md", class: "pr-3.5" },
-      { iconRight: true, size: "lg", class: "pr-4" },
-      { iconRight: true, size: "xl", class: "pr-5" },
+      { iconRight: true, size: "xs", class: "pr-2" },
+      { iconRight: true, size: "sm", class: "pr-3" },
+      { iconRight: true, size: "md", class: "pr-4" },
+      { iconRight: true, size: "lg", class: "pr-5" },
+      { iconRight: true, size: "xl", class: "pr-6" },
     ],
   },
   text: "whitespace-nowrap focus-visible:outline-none",

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

@@ -1,16 +1,10 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      w-fit inline-flex rounded transition
-      focus-within:ring-4 focus-within:ring-{color}-500 focus-within:ring-opacity-15 focus-visible:outline-none
+      w-fit inline-flex rounded transition focus-visible:outline-none
+      focus-within:ring-4 focus-within:ring-offset-4 focus-within:ring-{color}-500 focus-within:ring-opacity-15
     `,
     variants: {
-      size: {
-        xs: "focus-within:ring-offset-2",
-        sm: "focus-within:ring-offset-2",
-        md: "focus-within:ring-offset-4",
-        lg: "focus-within:ring-offset-4",
-      },
       color: {
         grayscale: "focus-within:ring-gray-900/10",
         white: "focus-within:ring-white/10",
@@ -28,7 +22,7 @@ export default /*tw*/ {
   },
   link: {
     base: `
-      w-full inline-block !leading-none transition
+      w-full inline-block cursor-pointer !leading-none transition
       text-{color}-500 decoration-{color}-500 underline-offset-4
       hover:text-opacity-80
       active:text-opacity-70
@@ -36,10 +30,9 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
-        xs: "text-xs",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
       underlined: {
         undefined: "hover:decoration-solid hover:underline",

package/ui.button-link/index.vue

@@ -114,7 +114,7 @@ const props = defineProps({
 
   /**
    * Link size.
-   * @values xs, sm, md, lg
+   * @values sm, md, lg
    */
   size: {
     type: String,

package/ui.button-toggle/index.vue

@@ -78,7 +78,7 @@ const props = defineProps({
 
   /**
    * Label placement.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * @values top, topWithDesc, left, right
    */
   labelAlign: {
     type: String,

package/ui.container-page/configs/default.config.js

@@ -42,7 +42,7 @@ export default /*tw*/ {
   backLinkIcon: "{UIcon}",
   backLinkIconName: "arrow_back",
   title: "{UHeader}",
-  description: "mt-1.5 text-base font-normal text-gray-600",
+  description: "mt-1.5 text-base font-normal text-gray-500",
   headerRight: "",
   footer: `mb-0 mt-14 justify-between pt-8 md:flex md:items-baseline space-y-4 md:space-y-0 border-t border-gray-200`,
   footerLeft: "md:flex space-y-4 md:space-x-4 md:space-y-0",

package/ui.dropdown-button/index.vue

@@ -14,7 +14,7 @@
       v-bind="buttonAttrs"
       @click="onClickButton"
     >
-      <template #right>
+      <template #icon-right>
         <UIcon
           v-if="!noIcon"
           internal
@@ -114,7 +114,7 @@ const props = defineProps({
 
   /**
    * Button size.
-   * @values sm, md, lg
+   * @values 2xs, xs, sm, md, lg, xl
    */
   size: {
     type: String,
@@ -250,9 +250,12 @@ const iconColor = computed(() => {
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: "xs",
+    "2xs": "xs",
+    xs: "xs",
+    sm: "sm",
     md: "sm",
     lg: "md",
+    xl: "md",
   };
 
   return sizes[props.size];

package/ui.dropdown-item/configs/default.config.js

@@ -7,9 +7,9 @@ export default /*tw*/ {
    `,
     variants: {
       size: {
-        sm: "text-sm p-2",
-        md: "text-base p-3",
-        lg: "text-lg p-4",
+        sm: "text-xs p-1",
+        md: "text-sm p-2",
+        lg: "text-base p-3",
       },
     },
   },

package/ui.dropdown-link/index.vue

@@ -92,7 +92,7 @@ const props = defineProps({
 
   /**
    * Link size.
-   * @values xs, sm, md, lg
+   * @values sm, md, lg
    */
   size: {
     type: String,

package/ui.dropdown-list/configs/default.config.js

@@ -5,7 +5,7 @@ export default /*tw*/ {
     overflow-auto [-webkit-overflow-scrolling:touch]
     focus:outline-none
   `,
-  list: "inline-block list-none align-top m-0 min-w-full p-0 bg-white opacity-1 hover:transition",
+  list: "m-1 inline-block list-none align-top w-full p-0 bg-white opacity-1 hover:transition",
   subGroupLabel: {
     base: "pointer-events-none bg-transparent !font-medium !leading-none !uppercase !text-gray-500/[85] pt-1",
     variants: {
@@ -28,16 +28,16 @@ export default /*tw*/ {
   },
   option: {
     base: `
-        p-3 flex items-center align-middle whitespace-nowrap cursor-pointer
-        font-normal !leading-none normal-case text-gray-900
-        hover:bg-gray-100 active:bg-gray-200 active:font-medium
-        overflow-hidden text-ellipsis
-      `,
+      rounded px-3 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
+      font-normal !leading-none normal-case text-gray-900
+      hover:bg-gray-100
+      overflow-hidden text-ellipsis
+    `,
     variants: {
       size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
       disabled: {
         true: "pointer-events-none",
@@ -45,7 +45,7 @@ export default /*tw*/ {
     },
   },
   optionHighlight: "bg-gray-100",
-  optionSelected: "bg-gray-200 font-medium",
+  optionSelected: "font-bold",
   optionItem: "group/item block",
   optionContent: "overflow-hidden text-ellipsis",
   addTitleWrapper: `

package/ui.dropdown-list/index.vue

@@ -265,7 +265,7 @@ const wrapperHeight = computed(() => {
     .map((el) => el.getBoundingClientRect().height)
     .reduce((acc, cur) => acc + cur, 0);
 
-  return props.visibleOptions === undefined ? "auto" : `${maxHeight}px`;
+  return props.visibleOptions === undefined ? "auto" : `${maxHeight + 10}px`;
 });
 
 function onClickAddOption() {

package/ui.form-calendar/components/MonthView.vue

@@ -17,7 +17,7 @@
 <script setup>
 import { computed } from "vue";
 import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
-import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+import { isSameMonth, getDateWithoutTime, isCurrentMoth } from "../services/date.service";
 
 import useAttrs from "../composables/attrs.composable";
 
@@ -69,7 +69,8 @@ const props = defineProps({
 
 const emit = defineEmits(["input"]);
 
-const { monthViewAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs } = useAttrs(props);
+const { monthViewAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs, currentMothAttrs } =
+  useAttrs(props);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
@@ -98,12 +99,19 @@ function getMonth(monthNumber) {
   return newDate;
 }
 
-function getMonthClasses(day) {
-  if (isSelectedMonth(day)) {
+function getMonthClasses(month) {
+  const isNotSelectedDate =
+    (!isSelectedMonth(month) && !isSelectedMonth(month)) || props.selectedDate === null;
+
+  if (isCurrentMoth(month) && isNotSelectedDate) {
+    return [currentMothAttrs.value.class];
+  }
+
+  if (isSelectedMonth(month)) {
     return [selectedMonthAttrs.value.class];
   }
 
-  if (isSameMonth(props.activeMonth, day)) {
+  if (isSameMonth(props.activeMonth, month)) {
     return [activeMonthAttrs.value.class];
   }
 }

package/ui.form-calendar/components/YearView.vue

@@ -17,7 +17,7 @@
 <script setup>
 import { computed } from "vue";
 import { formatDate, getYearsRange, dateIsOutOfRange } from "../services/calendar.service";
-import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+import { isSameMonth, getDateWithoutTime, isCurrentYear } from "../services/date.service";
 
 import useAttrs from "../composables/attrs.composable";
 
@@ -69,7 +69,8 @@ const props = defineProps({
 
 const emit = defineEmits(["input"]);
 
-const { yearViewAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs } = useAttrs(props);
+const { yearViewAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs, currentYearAttrs } =
+  useAttrs(props);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
@@ -102,12 +103,19 @@ function getYear(year) {
   return newDate;
 }
 
-function getYearClasses(day) {
-  if (isSelectedMonth(day)) {
+function getYearClasses(year) {
+  const isNotSelectedDate =
+    (!isSelectedMonth(year) && !isSelectedMonth(year)) || props.selectedDate === null;
+
+  if (isCurrentYear(year) && isNotSelectedDate) {
+    return [currentYearAttrs.value.class];
+  }
+
+  if (isSelectedMonth(year)) {
     return [selectedYearAttrs.value.class];
   }
 
-  if (isSameMonth(props.activeMonth, day)) {
+  if (isSameMonth(props.activeMonth, year)) {
     return [activeYearAttrs.value.class];
   }
 }

package/ui.form-calendar/configs/default.config.js

@@ -35,8 +35,10 @@ export default /*tw*/ {
   month: "{UButton} mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
   selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
   activeMonth: "bg-brand-100",
+  currentMoth: "border-2 border-brand-900",
   yearView: "grid grid-cols-4 items-center justify-center",
   year: "{UButton} mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
+  currentYear: "border-2 border-brand-900",
   selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
   activeYear: "bg-brand-100",
   timepicker: "mt-2 pl-1 pt-3 text-sm flex items-center justify-between gap-2 border-t border-brand-200",

package/ui.form-calendar/index.vue

@@ -12,8 +12,8 @@
           square
           variant="thirdary"
           v-bind="navigationSwitchViewButtonAttrs"
-          @click="onClickViewSwitch"
           @mousedown.prevent.capture
+          @click="onClickViewSwitch"
         >
           <span v-if="isCurrentView.day" v-bind="dayViewSwitchLabelAttrs">
             <span v-bind="dayViewSwitchLabelMonthAttrs" v-text="viewSwitchLabel.month" />

package/ui.form-calendar/services/date.service.js

@@ -255,6 +255,14 @@ export function isToday(date) {
   return isSameDay(date, new Date());
 }
 
+export function isCurrentMoth(date) {
+  return isSameMonth(date, new Date());
+}
+
+export function isCurrentYear(date) {
+  return date.getFullYear() === new Date().getFullYear();
+}
+
 export function getLastDayOfMonth(date) {
   return new Date(date.getFullYear(), date.getMonth() + 1, 0);
 }

package/ui.form-checkbox/configs/default.config.js

@@ -1,16 +1,14 @@
 export default /*tw*/ {
-  label: "{ULabel} w-auto max-w-max relative", // TODO: label classes should be defined in ULabel component
+  label: "{ULabel}",
   partialIconName: "remove",
   selectedIconName: "check",
   iconWrapper: {
     base: "flex items-center justify-center absolute rounded bg-{color}-500",
     variants: {
       size: {
-        xs: "size-4",
-        sm: "size-5",
-        md: "size-6",
-        lg: "size-7",
-        xl: "size-8",
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6",
       },
       color: {
         grayscale: "border-gray-900 bg-gray-900",
@@ -29,11 +27,9 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
-        xs: "size-4 text-xs",
-        sm: "size-5 text-sm",
-        md: "size-6",
-        lg: "size-7 text-lg",
-        xl: "size-8 text-xl",
+        sm: "size-4 text-xs",
+        md: "size-5 text-sm",
+        lg: "size-6 text-base",
       },
       color: {
         grayscale: `
@@ -54,7 +50,7 @@ export default /*tw*/ {
   defaultVariants: {
     color: "brand",
     size: "md",
-    labelAlign: "left",
+    labelAlign: "right",
     partial: false,
     disabled: false,
   },

package/ui.form-checkbox/index.vue

@@ -119,7 +119,7 @@ const props = defineProps({
 
   /**
    * Label placement.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * @values left, right
    */
   labelAlign: {
     type: String,
@@ -137,7 +137,7 @@ const props = defineProps({
 
   /**
    * Checkbox size.
-   * @values xs, sm, md, lg, xl
+   * @values sm, md, lg
    */
   size: {
     type: String,
@@ -211,11 +211,9 @@ const { config, checkboxAttrs, iconWrapperAttrs, labelAttrs, iconAttrs } = useAt
 
 const iconSize = computed(() => {
   const sizes = {
-    xs: "2xs",
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-    xl: "lg",
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
   };
 
   return sizes[props.size];

package/ui.form-checkbox-group/configs/default.config.js

@@ -1,7 +1,16 @@
 export default /*tw*/ {
   label: "{ULabel}",
-  list: "ml-4 flex flex-col gap-4 relative",
   checkbox: "{UCheckbox}",
+  list: {
+    base: "flex flex-col",
+    variants: {
+      size: {
+        sm: "gap-1.5 mt-1",
+        md: "gap-2 mt-1.5",
+        lg: "gap-2.5 mt-2",
+      },
+    },
+  },
   defaultVariants: {
     color: "brand",
     size: "md",

package/ui.form-checkbox-group/index.stories.js

@@ -15,9 +15,9 @@ export default {
   args: {
     label: "Label",
     options: [
-      { label: "checkbox 1", description: "some description 1", value: "1" },
-      { label: "checkbox 2", description: "some description 2", value: "2" },
-      { label: "checkbox 3", description: "some description 3", value: "3" },
+      { label: "checkbox 1", value: "1" },
+      { label: "checkbox 2", value: "2" },
+      { label: "checkbox 3", value: "3" },
     ],
     value: ["One"],
   },
@@ -40,18 +40,12 @@ const DefaultTemplate = (args) => ({
     <URow class="!flex-col">
       <UCheckboxGroup v-bind="args" v-model="value">
         <template v-for="(radio, index) in args.options" :key="index">
-          <UCheckbox
-            v-bind="radio"
-          >
-          </UCheckbox>
+          <UCheckbox v-bind="radio"/>
         </template>
       </UCheckboxGroup>
 
       <URow>
-        <UAlert color="red" v-if=args.isDefaultStory>
-          <b>NOTE:</b> <p>UCheckboxGroup component have to have unique name attribute</p>
-        </UAlert>
-        <UAlert color="blue">
+        <UAlert size="sm" color="blue">
           <p>Selected value: {{ value }}</p>
         </UAlert>
       </URow>
@@ -72,7 +66,7 @@ const OptionsTemplate = (args) => ({
   template: `
     <URow class="!flex-col">
       <UCheckboxGroup v-bind="args" v-model="value" :options="args.options" />
-  
+
       <URow>
         <UAlert color="blue">
           <p>Selected value: {{ value }}</p>
@@ -87,18 +81,17 @@ Default.args = {
   name: "Default",
   isDefaultStory: true,
   options: [
-    { name: "Default", label: "String", description: "some description 1", value: "One" },
-    { name: "Default", label: "Boolean", description: "some description 2", value: false },
+    { name: "Default", label: "String", value: "One" },
+    { name: "Default", label: "Boolean", value: false },
     {
       name: "Default",
       label: "Object",
-      description: "some description 3",
+
       value: { key: "value" },
     },
     {
       name: "Default",
       label: "Object",
-      description: "some description 4",
       value: ["Array", 1],
     },
   ],
@@ -129,15 +122,15 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
   },
   template: `
     <URow class="!flex-col">
-      <UCheckboxGroup 
+      <UCheckboxGroup
         v-bind="args"
-        v-for="color in colors" 
-        :key="color" 
-        :label="color" 
+        v-for="color in colors"
+        :key="color"
+        :label="color"
         :color="color"
-        :options="args.options" 
+        :options="args.options"
         name="color"
-        v-model="value" 
+        v-model="value"
       />
     </URow>
   `,
@@ -156,15 +149,15 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
   },
   template: `
     <URow class="!flex-col">
-      <UCheckboxGroup 
+      <UCheckboxGroup
         v-bind="args"
-        v-for="size in sizes" 
-        :key="size" 
-        :label="size" 
+        v-for="size in sizes"
+        :key="size"
+        :label="size"
         :size="size"
-        :options="args.options" 
+        :options="args.options"
         name="size"
-        v-model="value" 
+        v-model="value"
       />
     </URow>
   `,

package/ui.form-checkbox-group/index.vue

@@ -87,8 +87,8 @@ const props = defineProps({
   },
 
   /**
-   * Radio size.
-   * @values xs, sm, md, lg, xl
+   * Checkbox group size.
+   * @values sm, md, lg
    */
   size: {
     type: String,
@@ -96,7 +96,7 @@ const props = defineProps({
   },
 
   /**
-   * Radio group color.
+   * Checkbox group color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
    */
   color: {

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

@@ -40,7 +40,7 @@ export default /*tw*/ {
   periodButtonIcon: "{UIcon}",
   periodButtonIconName: "apps",
   periodButtonActive: "bg-gray-200",
-  rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
+  rangeSwitchWrapper: "flex items-center justify-between py-2",
   rangeSwitchTitle: "font-medium text-sm",
   nextIcon: "{UIcon}",
   nextIconName: "keyboard_arrow_right",