vueless 0.0.217 → 0.0.219

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.217",
+  "version": "0.0.219",
   "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: `
@@ -130,24 +130,24 @@ export default /*tw*/ {
         class: "bg-gray-800 bg-opacity-10 hover:bg-opacity-15 focus:bg-opacity-15 active:bg-opacity-20",
       },
       { 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" },
       { 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" },
+      { square: true, size: "2xs", class: "p-1" },
+      { square: true, size: "xs", class: "p-1.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" },
     ],
   },
   text: "whitespace-nowrap focus-visible:outline-none",

package/ui.button/index.vue

@@ -27,7 +27,13 @@
           :icon-size="iconSize"
           :icon-color="componentColor"
         >
-          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" :color="componentColor" />
+          <UIcon
+            v-if="iconLeft"
+            :name="iconLeft"
+            :size="iconSize"
+            :color="componentColor"
+            internal
+          />
         </slot>
       </div>
 
@@ -59,7 +65,13 @@
           :icon-size="iconSize"
           :icon-color="componentColor"
         >
-          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" :color="componentColor" />
+          <UIcon
+            v-if="iconRight"
+            :name="iconRight"
+            :size="iconSize"
+            :color="componentColor"
+            internal
+          />
         </slot>
       </div>
     </template>

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/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-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

@@ -8,10 +8,12 @@ export default /*tw*/ {
     flex rounded-lg max-md:justify-between
     focus-within:ring-4 focus-within:ring-brand-700 focus-within:ring-opacity-20
   `,
-  button: "{UButton} shrink-0 grow rounded-none focus:ring-0",
+  button: "{UButton} shrink-0 grow rounded-none !ring-0",
   buttonActive: "ring-0",
   buttonWrapperActive: "ring-4 ring-brand-700 ring-opacity-20",
   shiftRangeButton: "focus:ring-0 last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none",
+  nextIconName: "keyboard_arrow_right",
+  prevIconName: "keyboard_arrow_left",
   menu: {
     base: "absolute z-40 my-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
     variants: {
@@ -33,19 +35,12 @@ export default /*tw*/ {
     leaveToClass: "opacity-0 scale-95",
   },
   periodsRow: "mb-1 flex min-w-64 gap-1",
-  periodButton: `
-    {UButton} h-[3.125rem] w-full flex flex-col items-center justify-center
-    [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
-  `,
-  periodButtonIcon: "{UIcon}",
+  periodButton: "{UButton} h-[3.125rem] w-full !ring-0",
   periodButtonIconName: "apps",
-  periodButtonActive: "bg-gray-200",
-  rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
+  periodButtonActive: "!bg-opacity-20",
+  rangeSwitchWrapper: "flex items-center justify-between py-2",
+  rangeSwitchButton: "{UButton}",
   rangeSwitchTitle: "font-medium text-sm",
-  nextIcon: "{UIcon}",
-  nextIconName: "keyboard_arrow_right",
-  prevIcon: "{UIcon}",
-  prevIconName: "keyboard_arrow_left",
   periodDateList: "",
   periodDateMonthList: "grid grid-cols-3 grid-rows-1 gap-0.5",
   periodDateWeekList: "",
@@ -53,25 +48,24 @@ export default /*tw*/ {
   periodDateQuarterList: "",
   periodDate: "w-full",
   periodDateActive: "bg-gray-100",
-  rangeInputWrapper: "flex mt-4",
+  rangeInputWrapper: "flex mt-4 -space-x-px",
   rangeInput: {
-    block: `focus-within:z-10 group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none`,
+    component: "{UInput}",
     label: {
-      wrapper: "group/range-input-wrapper",
+      component: "{ULabel}",
+      wrapper: "group/range-input-wrapper w-full hover:z-10 focus:z-10",
       description: "hidden",
     },
-    input: {
-      base: "{UInput} text-sm border-brand-100 px-4 py-2.5",
-      variants: {
-        size: {
-          md: "pt-2.5 pb-2.5",
-        },
-      },
-    },
+    block: `
+      focus-within:z-10 focus-within:ring-0
+      group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none
+    `,
+    input: "group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none",
   },
-  inputRangeError: "text-xs font-normal !leading-none mt-2 text-center text-red-500",
+  inputRangeError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {
-    wrapper: "{UCalendar} p-0 mt-2 w-full border-none shadow-none",
+    component: "{UCalendar}",
+    wrapper: "p-0 mt-2 w-full border-none shadow-none",
     navigation: "mb-0 border-none",
     navigationSwitchViewButton: "rounded-lg px-3",
     day: "w-full h-10 mb-0.5",