vueless 0.0.266 → 0.0.268

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.266",
+  "version": "0.0.268",
   "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.45",
+    "@vueless/plugin-vite": "^0.0.49",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",

package/service.ui/index.js

@@ -218,7 +218,9 @@ export default class UIService {
    @returns { String }
    */
   getColor(color) {
-    return brand === GRAYSCALE_COLOR && color === BRAND_COLOR ? GRAYSCALE_COLOR : color;
+    return (brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR && color === BRAND_COLOR
+      ? GRAYSCALE_COLOR
+      : color;
   }
 
   /**

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

@@ -24,14 +24,14 @@ export default /*tw*/ {
           hover:bg-{color}-700 hover:border-{color}-700
           focus:bg-{color}-700 focus:border-{color}-700
           active:bg-{color}-800 active:border-{color}-800
-          disabled:bg-{color}-300 disabled:border-{color}-300 disabled:text-white
+          disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white
         `,
         secondary: `
           text-{color}-600 border-{color}-600
           hover:text-{color}-700 hover:border-{color}-700
           focus:text-{color}-700 focus:border-{color}-700
           active:text-{color}-800 active:border-{color}-800
-          disabled:text-{color}-300 disabled:border-{color}-300
+          disabled:text-gray-400 disabled:border-gray-400
         `,
         thirdary: `
           border-transparent
@@ -39,7 +39,7 @@ export default /*tw*/ {
           hover:text-{color}-700 hover:bg-{color}-700/10
           focus:text-{color}-700 focus:bg-{color}-700/10
           active:text-{color}-800 active:bg-{color}-800/15
-          disabled:text-{color}-300
+          disabled:text-gray-400 disabled:bg-transparent
         `,
       },
       color: {
@@ -69,7 +69,6 @@ export default /*tw*/ {
           hover:bg-gray-800 hover:border-gray-800
           focus:bg-gray-800 focus:border-gray-800
           active:bg-gray-700 active:border-gray-700
-          disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white
         `,
       },
       {
@@ -80,7 +79,6 @@ export default /*tw*/ {
           hover:text-gray-800 hover:border-gray-800
           focus:text-gray-800 focus:border-gray-800
           active:text-gray-700 active:border-gray-700
-          disabled:border-gray-400
         `,
       },
       {
@@ -91,7 +89,6 @@ export default /*tw*/ {
           hover:text-gray-800 hover:bg-gray-800/15
           focus:text-gray-800 focus:bg-gray-800/15
           active:text-gray-700 active:bg-gray-700/20
-          disabled:bg-transparent
         `,
       },
       {
@@ -122,10 +119,9 @@ export default /*tw*/ {
           hover:text-gray-800 hover:bg-white
           focus:text-gray-800 focus:bg-white
           active:text-gray-700 active:bg-white
-          disabled:bg-transparent
         `,
       },
-      { filled: true, variant: "thirdary", class: "bg-{color}-700/10" },
+      { filled: true, variant: "thirdary", class: "bg-{color}-600/10" },
       { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-900/10" },
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
       { iconLeft: true, size: "2xs", class: "pl-1" },

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

@@ -6,7 +6,7 @@ export default /*tw*/ {
       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-700/15 focus-within:ring-brand-700/15
       active:text-brand-700 active:border-brand-700 active:relative active:z-10
-      disabled:border-brand-300 disabled:z-0
+      disabled:z-0
     `,
     variants: {
       separated: {
@@ -27,12 +27,12 @@ export default /*tw*/ {
       {
         selected: true,
         variant: "primary",
-        class: "!text-white bg-brand-600 border-brand-600 disabled:border-brand-600",
+        class: "!text-white bg-brand-600 border-brand-600 ",
       },
       {
         selected: true,
         variant: "secondary",
-        class: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600/10",
+        class: "text-brand-600 border-brand-600  bg-brand-600/10",
       },
       {
         selected: true,

package/ui.container-card/index.vue

@@ -8,7 +8,7 @@
         <!-- @slot Use it to customise left side of the header. -->
         <slot name="header-left">
           <div v-bind="headerLeftFallbackAttrs">
-            <UHeader :label="title" size="md" color="brand" v-bind="titleAttrs" />
+            <UHeader :label="title" size="md" v-bind="titleAttrs" />
             <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
           </div>
         </slot>

package/ui.data-list/index.vue

@@ -59,7 +59,7 @@
                 v-if="!element.isHiddenDelete"
                 internal
                 interactive
-                color="gray"
+                color="red"
                 :size="iconSize"
                 :name="config.deleteIconName"
                 :data-cy="`${dataCy}-delete`"

package/ui.dropdown-badge/composables/attrs.composable.js

@@ -30,11 +30,10 @@ export default function useAttrs(props, { isShownOptions }) {
 
     if (key === "icon") {
       const iconAttrs = attrs[`${key}Attrs`];
-      const rotateClasses = isShownOptions.value && config.value.iconRotate;
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...iconAttrs.value,
-        class: cx([iconAttrs.value.class, rotateClasses]),
+        class: cx([iconAttrs.value.class, isShownOptions.value && config.value.iconRotate]),
       }));
     }
 

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

@@ -30,11 +30,10 @@ export default function useAttrs(props, { isShownOptions }) {
 
     if (key === "icon") {
       const iconAttrs = attrs[`${key}Attrs`];
-      const rotateClasses = isShownOptions.value && config.value.iconRotate;
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...iconAttrs.value,
-        class: cx([iconAttrs.value.class, rotateClasses]),
+        class: cx([iconAttrs.value.class, isShownOptions.value && config.value.iconRotate]),
       }));
     }
 

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

@@ -12,8 +12,8 @@ export default /*tw*/ {
     `,
     variants: {
       listYPosition: {
-        top: "bottom-full mb-4",
-        bottom: "top-full mt-4",
+        top: "bottom-full mb-2",
+        bottom: "top-full mt-2",
       },
       listXPosition: {
         left: "left-0",

package/ui.dropdown-link/composables/attrs.composable.js

@@ -30,11 +30,10 @@ export default function useAttrs(props, { isShownOptions }) {
 
     if (key === "icon") {
       const iconAttrs = attrs[`${key}Attrs`];
-      const rotateClasses = isShownOptions.value && config.value.iconRotate;
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...iconAttrs.value,
-        class: cx([iconAttrs.value.class, rotateClasses]),
+        class: cx([iconAttrs.value.class, isShownOptions.value && config.value.iconRotate]),
       }));
     }
 

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

@@ -30,7 +30,7 @@ export default /*tw*/ {
     base: `
       rounded px-2 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
+      hover:bg-brand-50
       overflow-hidden text-ellipsis
     `,
     variants: {
@@ -44,13 +44,13 @@ export default /*tw*/ {
       },
     },
   },
-  optionHighlight: "bg-gray-100",
+  optionHighlight: "bg-brand-50",
   optionSelected: "font-bold",
   optionItem: "group/item block",
   optionContent: "overflow-hidden text-ellipsis",
   addTitleWrapper: `
-    flex items-center justify-between cursor-pointer p-3 hover:bg-gray-100
-    active:bg-gray-200 active:font-medium -mb-6
+    flex items-center justify-between cursor-pointer p-3 hover:bg-brand-50
+    active:bg-brand-100 active:font-medium -mb-6
   `,
   addTitle: "text-sm font-medium text-gray-900",
   addTitleHotkey: "text-gray-500",

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

@@ -1,9 +1,9 @@
 export default /*tw*/ {
-  wrapper: "p-3 pb-4 w-64 border border-brand-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
+  wrapper: "p-3 pb-4 w-64 border border-gray-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
   navigation: "mb-2 pb-2 border-b flex items-center justify-between",
-  navigationSwitchViewButton: "-ml-3 pl-3 text-sm rounded-l-none",
+  navigationSwitchViewButton: "{UButton} -ml-3 pl-3 text-sm rounded-l-none",
   dayViewSwitchLabel: "flex gap-1",
-  dayViewSwitchLabelMonth: "text-brand-900",
+  dayViewSwitchLabelMonth: "",
   dayViewSwitchLabelIcon: "",
   dayViewSwitchLabelIconName: "keyboard_arrow_right",
   nextPrevWrapper: {
@@ -15,36 +15,34 @@ export default /*tw*/ {
     },
   },
   nextPrevButton: "{UButton}",
-  nextIcon: "{UIcon}",
   nextIconName: "keyboard_arrow_right",
-  prevIcon: "{UIcon}",
   prevIconName: "keyboard_arrow_left",
   dayView: "",
   weekDays: "grid grid-cols-7",
-  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-brand-500",
+  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
   days: "grid grid-cols-7",
-  day: "mx-auto size-8 rounded-dynamic text-sm hover:bg-brand-100 disabled:opacity-50 disabled:cursor-not-allowed",
+  day: "mx-auto size-8 rounded-dynamic text-sm hover:bg-brand-100 hover:text-brand-600 disabled:opacity-50 disabled:cursor-not-allowed",
   activeDay: "bg-brand-100 hover:bg-brand-100",
   inRangeFirstDay: "rounded-dynamic rounded-r-none bg-brand-200 text-brand-900 hover:bg-brand-200",
   inRangeLastDay: "rounded-dynamic rounded-l-none bg-brand-200 text-brand-900 hover:bg-brand-200",
   inRangeDay: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
-  selectedDay: "bg-brand-900 text-white hover:bg-brand-900",
-  currentDay: "hover:bg-brand-100 border-2 border-brand-900",
-  anotherMonthDay: "hover:bg-brand-100 text-brand-400",
+  selectedDay: "bg-brand-600 text-white hover:bg-brand-600 hover:text-white",
+  currentDay: "hover:bg-brand-100 border-2 border-brand-600",
+  anotherMonthDay: "hover:bg-brand-100 text-gray-400",
   monthView: "grid grid-cols-4 items-center justify-center",
-  month: "{UButton} mx-auto flex h-12 w-full rounded-dynamic hover:!bg-brand-900 hover:text-white",
+  month: "{UButton} mx-auto flex h-12 w-full rounded-dynamic",
   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-dynamic hover:!bg-brand-900 hover:text-white",
+  year: "{UButton} mx-auto flex h-12 w-full rounded-dynamic",
   currentYear: "border-2 border-brand-900",
-  selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
+  selectedYear: "bg-brand-600 hover:bg-brand-600 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",
   timepickerLabel: "w-full",
   timepickerInputWrapper: "flex items-center gap-px rounded-dynamic border border-brand-300",
-  timepickerInput: " w-11 border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-700/15",
+  timepickerInput: "w-11 border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-700/15",
   timepickerLeftInput: "rounded-l-dynamic",
   timepickerRightInput: " rounded-r-dynamic",
   timepickerSubmitButton: "{UButton} py-2 border-0",

package/ui.form-calendar/index.vue

@@ -7,11 +7,11 @@
         :disabled="!range"
       >
         <UButton
-          size="xs"
-          color="gray"
           square
-          variant="thirdary"
           no-ring
+          size="sm"
+          variant="thirdary"
+          :icon-right="config.dayViewSwitchLabelIconName"
           v-bind="navigationSwitchViewButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickViewSwitch"
@@ -22,61 +22,33 @@
           </span>
           <span v-if="isCurrentView.month" v-text="viewSwitchLabel.year" />
           <span v-if="isCurrentView.year" v-text="viewSwitchLabel.yearsRange" />
-
-          <template #right>
-            <UIcon
-              v-if="!range"
-              internal
-              size="sm"
-              color="gray"
-              variant="light"
-              :name="config.dayViewSwitchLabelIconName"
-              v-bind="dayViewSwitchLabelIconAttrs"
-            />
-          </template>
         </UButton>
       </Teleport>
 
       <div v-bind="nextPrevWrapperAttrs">
         <UButton
-          size="xs"
           square
-          variant="thirdary"
           no-ring
+          size="sm"
+          variant="thirdary"
+          :icon-left="config.prevIconName"
           v-bind="nextPrevButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickPrevButton"
-        >
-          <UIcon
-            internal
-            size="sm"
-            color="gray"
-            variant="light"
-            :name="config.prevIconName"
-            v-bind="prevIconAttrs"
-          />
-        </UButton>
+        />
 
         <div ref="rangeSwitchViewContainerRef" />
 
         <UButton
-          size="xs"
           square
-          variant="thirdary"
           no-ring
+          size="sm"
+          variant="thirdary"
+          :icon-left="config.nextIconName"
           v-bind="nextPrevButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickNextButton"
-        >
-          <UIcon
-            internal
-            size="sm"
-            color="gray"
-            variant="light"
-            :name="config.nextIconName"
-            v-bind="nextIconAttrs"
-          />
-        </UButton>
+        />
       </div>
     </div>
 
@@ -161,9 +133,7 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
-
 import UIService from "../service.ui";
 
 import {
@@ -341,10 +311,7 @@ const {
   navigationSwitchViewButtonAttrs,
   dayViewSwitchLabelAttrs,
   dayViewSwitchLabelMonthAttrs,
-  dayViewSwitchLabelIconAttrs,
-  nextIconAttrs,
   nextPrevButtonAttrs,
-  prevIconAttrs,
   timepickerAttrs,
   timepickerLabelAttrs,
   timepickerInputWrapperAttrs,

package/ui.form-checkbox-multi-state/index.stories.js

@@ -19,7 +19,6 @@ export default {
   },
   argTypes: {
     ...getArgTypes(UCheckboxMultiState.name),
-    modelValue: { control: { type: "boolean" } },
   },
 };
 

package/ui.form-checkbox-multi-state/index.vue

@@ -8,7 +8,7 @@
     :color="color"
     :placement="placement"
     v-bind="checkboxAttrs"
-    @click.self="onClickCheckbox"
+    @input="onClickCheckbox"
   />
 </template>
 

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

@@ -1082,13 +1082,13 @@ function onMouseoverCalendar() {
     calendarInnerValue.value.from && !calendarInnerValue.value.to && !inputRangeFromError.value;
 
   if (hasValues || !rangeStart.value) {
-    rangeInputStartRef.value.input.focus();
+    rangeInputStartRef.value.inputRef.focus();
 
     return;
   }
 
   if (hasOnlyFromValue) {
-    rangeInputEndRef.value.input.focus();
+    rangeInputEndRef.value.inputRef.focus();
 
     return;
   }

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

@@ -43,8 +43,8 @@ export default /*tw*/ {
       },
       error: {
         true: `
-        bg-red-50 hover:border-red-400 focus:border-red-500 focus:ring-red-700/15
-        focus-within:border-red-500 focus-within:ring-red-700/15
+        bg-red-50 hover:border-red-400 focus:border-red-500 focus:ring-red-500/15
+        focus-within:border-red-500 focus-within:ring-red-500/15
       `,
       },
     },

package/ui.form-input-file/index.vue

@@ -28,6 +28,7 @@
               pill
               internal
               interactive
+              color="brand"
               :size="removeItemIconSize"
               :name="config.removeItemIconName"
               :data-cy="`${dataCy}-remove-item`"
@@ -143,7 +144,7 @@ const props = defineProps({
   },
 
   /**
-   * Allow select multiple files.
+   * Allow selecting multiple files.
    */
   multiple: {
     type: Boolean,

package/ui.form-input-rating/index.vue

@@ -25,7 +25,7 @@
           v-for="star in stars"
           :key="star"
           internal
-          color="yellow"
+          :color="error ? 'red' : 'brand'"
           :size="iconSize"
           :interactive="selectable"
           :name="star <= counterValue ? config.selectedIconName : config.unselectedIconName"

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

@@ -5,8 +5,8 @@ export default /*tw*/ {
   textareaWrapper: {
     base: `
       px-3 py-2 bg-white transition
-      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-gray-500 focus-within:border-gray-500
-      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-gray-700/15 focus-within:outline-none
+      rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
+      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15 focus-within:outline-none
     `,
     variants: {
       error: {

package/ui.image-icon/configs/default.config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "",
+    base: "flex",
     variants: {
       pill: {
         true: "rounded-full bg-{color}-600/5",

package/ui.image-icon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <span
+  <div
     v-tooltip="tooltipConfig"
     :data-cy="dataCy"
     v-bind="wrapperAttrs"
@@ -10,7 +10,7 @@
     <div v-bind="containerAttrs">
       <component :is="dynamicComponent" v-bind="iconAttrs" />
     </div>
-  </span>
+  </div>
 </template>
 
 <script setup>

package/ui.loader-top/index.stories.js

@@ -31,7 +31,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots, loaderTopOn, loaderTopOff };
   },
   template: `
-    <ULoaderTop color="blue" v-bind="args" resources="https://api.publicapis.org/entries"/>
+    <ULoaderTop v-bind="args" resources="https://api.publicapis.org/entries"/>
 
     <URow gap="sm">
       <UButton label="On" size="sm" @click="loaderTopOn('https://api.publicapis.org/entries')" />

package/ui.navigation-tab/configs/default.config.js

@@ -11,7 +11,7 @@ export default /*tw*/ {
         true: "text-gray-500 cursor-not-allowed",
       },
       selected: {
-        true: "border-b-2 border-gray-900",
+        true: "border-b-2 text-brand-600 border-brand-600",
       },
     },
   },

package/ui.navigation-tabs/configs/default.config.js

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: "mb-6 flex gap-8",
     variants: {
       underlined: {
-        true: "border-b border-gray-100",
+        true: "border-b border-brand-100",
       },
     },
   },

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.266",
+  "version": "0.0.268",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4269,7 +4269,7 @@
             },
             {
               "name": "multiple",
-              "description": "Allow select multiple files.",
+              "description": "Allow selecting multiple files.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"