vueless 0.0.258 → 0.0.260

package/composable.ui/index.js

@@ -89,7 +89,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
       const isTopLevelClassKey = configKey === (topLevelClassKey || firstClassKey);
       const attrClass = isTopLevelClassKey && !nestedComponent ? attrs.class : "";
 
-      // TODO: remove `getBaseClasses(configKeyValue)` after migration to `setDynamicVars`
+      // TODO: remove `getBaseClasses(configKeyValue)` after migration of all composables to the new logic
       vuelessAttrs.value = {
         ...commonAttrs,
         class: cx([

package/package.json

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

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

@@ -6,7 +6,7 @@ export default /*tw*/ {
       border border-solid transition
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
       focus-within:ring-{color}-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
-      disabled:ring-0 disabled:cursor-no-drop
+      disabled:ring-0 disabled:cursor-not-allowed
     `,
     variants: {
       size: {
@@ -36,15 +36,15 @@ export default /*tw*/ {
         thirdary: `
           border-transparent
           text-{color}-600
-          hover:text-{color}-700 hover:bg-{color}-700 hover:bg-opacity-10
-          focus:text-{color}-700 focus:bg-{color}-700 focus:bg-opacity-10
-          active:text-{color}-800 active:bg-{color}-800 active:bg-opacity-15
+          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
         `,
       },
       color: {
         grayscale: "focus:ring-gray-700/15 focus-within:ring-gray-700/15 disabled:text-gray-400",
-        white: "focus:ring-gray-800/15 focus-within:ring-gray-800/15 disabled:text-gray-400",
+        white: "focus:ring-gray-700/15 focus-within:ring-gray-700/15 disabled:text-gray-400",
       },
       loading: {
         true: "pointer-events-none gap-0",
@@ -88,9 +88,9 @@ export default /*tw*/ {
         variant: "thirdary",
         class: `
           text-gray-900
-          hover:text-gray-800 hover:bg-gray-800
-          focus:text-gray-800 focus:bg-gray-800
-          active:text-gray-700 active:bg-gray-700
+          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
         `,
       },
@@ -125,13 +125,8 @@ export default /*tw*/ {
           disabled:bg-transparent
         `,
       },
-      { filled: true, variant: "thirdary", class: "bg-{color}-700 bg-opacity-10" },
-      {
-        filled: true,
-        variant: "thirdary",
-        color: "grayscale",
-        class: "bg-gray-800 bg-opacity-10 hover:bg-opacity-15 focus:bg-opacity-15 active:bg-opacity-20",
-      },
+      { filled: true, variant: "thirdary", class: "bg-{color}-700/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" },
       { iconLeft: true, size: "xs", class: "pl-2" },

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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       w-fit inline-flex rounded transition focus-visible:outline-none
-      focus-within:ring-dynamic focus-within:ring-offset-4 focus-within:ring-{color}-500/15
+      focus-within:ring-dynamic focus-within:ring-offset-4 focus-within:ring-{color}-700/15
     `,
     variants: {
       color: {
@@ -10,7 +10,7 @@ export default /*tw*/ {
         white: "focus-within:ring-white/15",
       },
       disabled: {
-        true: "pointer-events-none text-gray-400",
+        true: "focus-within:ring-0 cursor-not-allowed",
       },
       block: {
         true: "w-full",
@@ -23,10 +23,10 @@ export default /*tw*/ {
   link: {
     base: `
       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
-      focus:ring-0 focus:ring-offset-0
+      text-{color}-600 decoration-{color}-600 underline-offset-4
+      hover:text-{color}-700 hover:decoration-{color}-700
+      focus:text-{color}-700 focus:decoration-{color}-700 focus:ring-0 focus:ring-offset-0
+      active:text-{color}-800 active:decoration-{color}-800
     `,
     variants: {
       size: {
@@ -40,12 +40,20 @@ export default /*tw*/ {
         false: "no-underline",
       },
       color: {
-        grayscale: "decoration-gray-900 text-gray-900",
+        grayscale: `
+          text-gray-900 decoration-gray-900
+          hover:text-gray-800 hover:decoration-gray-800
+          focus:text-gray-800 focus:decoration-gray-800
+          active:text-gray-700 active:decoration-gray-700
+        `,
         white: "decoration-white text-white",
       },
       dashed: {
         true: "hover:decoration-dashed decoration-dashed",
       },
+      disabled: {
+        true: "text-gray-400 pointer-events-none",
+      },
     },
   },
   text: "w-full",

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

@@ -9,7 +9,7 @@ export default /*tw*/ {
     },
   },
   items: {
-    base: "flex flex-wrap",
+    base: "",
     variants: {
       size: {
         "2xs": "gap-1",
@@ -20,12 +20,14 @@ export default /*tw*/ {
         xl: "gap-3",
       },
       separated: {
+        true: "flex flex-wrap",
         false: `
-          flex-nowrap -space-x-px gap-0
+          flex flex-nowrap -space-x-px gap-0 rounded-dynamic transition w-fit
           [&>:first-child]:rounded-dynamic [&>:first-child]:rounded-r-none
           [&>:last-child]:rounded-dynamic [&>:last-child]:rounded-l-none
           [&>:first-child>*>*]:rounded-dynamic [&>:first-child>*>*]:rounded-r-none
           [&>:last-child>*>*]:rounded-dynamic [&>:last-child>*>*]:rounded-l-none
+          focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
         `,
       },
     },

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

@@ -14,11 +14,8 @@ export default /*tw*/ {
       },
       variant: {
         thirdary: `
-          !text-gray-900 bg-brand-600
-          border-transparent bg-opacity-10
-          hover:border-transparent hover:bg-opacity-15
-          focus:border-transparent focus:bg-opacity-15
-          active:border-transparent active:bg-opacity-20
+          !text-gray-900 !border-transparent bg-brand-600/10
+          hover:bg-brand-600/15 focus:bg-brand-600/15 active:bg-brand-600/20
         `,
       },
     },
@@ -35,12 +32,12 @@ export default /*tw*/ {
       {
         selected: true,
         variant: "secondary",
-        class: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600 bg-opacity-10",
+        class: "text-brand-600 border-brand-600 disabled:border-brand-600 bg-brand-600/10",
       },
       {
         selected: true,
         variant: "thirdary",
-        class: "bg-brand-600 bg-opacity-20 hover:bg-opacity-20 focus:bg-opacity-20",
+        class: "!bg-brand-600/20",
       },
     ],
   },

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

@@ -2,6 +2,7 @@
   <UButton
     tabindex="0"
     :for="id"
+    :no-ring="!getToggleSeparated()"
     color="grayscale"
     variant="secondary"
     :label="label"
@@ -157,8 +158,8 @@ onMounted(() => {
 });
 
 function onClickSetValue() {
-  selectedItem.value = getToggleType() === TYPE_RADIO 
-  ? props.value 
+  selectedItem.value = getToggleType() === TYPE_RADIO
+  ? props.value
   : selectedValue?.value?.includes(props.value) || selectedItem.value;
 
   updateSelectedValue && updateSelectedValue(props.value, !selectedItem.value);

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

@@ -8,7 +8,7 @@ export default /*tw*/ {
     leaveFromClass: "opacity-100 translate-y-0 transform sm:scale-100",
     leaveToClass: "opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95",
   },
-  overlay: "fixed inset-0 z-40 bg-gray-900 bg-opacity-75",
+  overlay: "fixed inset-0 z-40 bg-gray-900/75",
   overlayTransition: {
     enterActiveClass: "ease-out duration-300",
     enterFromClass: "opacity-0",

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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "",
   draggable: "",
   draggableDrag: "bg-gray-100",
-  draggableGhost: "bg-opacity-50",
+  draggableGhost: "bg-gray-100/50",
   itemWrapper: "group/item-wrapper",
   item: `
     group/item

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

@@ -37,7 +37,7 @@ export default /*tw*/ {
   periodsRow: "mb-1 flex min-w-64 gap-1",
   periodButton: "{UButton} h-[3.125rem] w-full",
   periodButtonIconName: "apps",
-  periodButtonActive: "!bg-opacity-20",
+  periodButtonActive: "!bg-gray-800/20",
   rangeSwitchWrapper: "flex items-center justify-between py-2",
   rangeSwitchButton: "{UButton}",
   rangeSwitchTitle: "font-medium text-sm",

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

@@ -856,19 +856,19 @@ function onClickShiftDatesList(action) {
 }
 
 function getPeriodButtonsClasses(periodName) {
-  return period.value === periodName ? [config.value.periodButtonActive] : [];
+  return period.value === periodName ? config.value.periodButtonActive : "";
 }
 
 function getPeriodDateClasses(date) {
-  return localValue.value.from === date.startRange ? [config.value.periodDateActive] : [];
+  return localValue.value.from === date.startRange ? config.value.periodDateActive : "";
 }
 
 function getPeriodDateListClasses() {
   if (isPeriod.value.ownRange) return [];
-  if (isPeriod.value.week) return [config.value.periodDateWeekList];
-  if (isPeriod.value.month) return [config.value.periodDateMonthList];
-  if (isPeriod.value.quarter) return [config.value.periodDateQuarterList];
-  if (isPeriod.value.year) return [config.value.periodDateYearList];
+  if (isPeriod.value.week) return config.value.periodDateWeekList;
+  if (isPeriod.value.month) return config.value.periodDateMonthList;
+  if (isPeriod.value.quarter) return config.value.periodDateQuarterList;
+  if (isPeriod.value.year) return config.value.periodDateYearList;
 }
 
 function activate() {

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

@@ -16,12 +16,6 @@ export default /*tw*/ {
       focus-within:border-brand-500 focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
     `,
     variants: {
-      disabled: {
-        true: `
-          text-gray-900 border-gray-100 bg-gray-100 opacity-100 cursor-default
-          hover:border-gray-100
-        `,
-      },
       error: {
         true: `
           border-red-300
@@ -29,16 +23,17 @@ export default /*tw*/ {
           focus-within:border-red-500 focus-within:ring-red-700/15
         `,
       },
+      disabled: {
+        true: "pointer-events-none",
+      },
     },
   },
   input: {
     base: `
       block w-full py-2 px-3 font-normal leading-none text-gray-900 bg-white
-      border-none rounded-dynamic transition
+      border-none rounded-dynamic transition focus:ring-0
       placeholder:font-normal placeholder-gray-400
-      focus:ring-0 disabled:opacity-50
-      disabled:cursor-not-allowed disabled:text-gray-900 disabled:border-gray-100
-      read-only:ring-0 read-only:border-gray-300
+      disabled:text-gray-700 disabled:bg-gray-100
     `,
     variants: {
       size: {

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

@@ -1,13 +1,6 @@
 export default /*tw*/ {
-  input: {
-    component: "{UInput}",
-    wrapper: "relative flex items-center justify-between w-full rounded-dynamic bg-gray-900 bg-opacity-5",
-    input: "w-full",
-    label: "w-full",
-    rightSlot: "pr-0",
-    leftSlot: "pl-0",
-  },
-  clearIcon: "{UIcon} flex h-full items-center",
+  input: "{UInput}",
+  clearIcon: "{UIcon}",
   clearIconName: "close",
   searchIcon: "{UIcon}",
   searchIconName: "search",
@@ -17,6 +10,7 @@ export default /*tw*/ {
     labelAlign: "topInside",
     debounce: 300,
     disabled: false,
+    readonly: false,
     searchButton: false,
   },
 };

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

@@ -5,6 +5,7 @@
     v-model="search"
     :size="size"
     :disabled="disabled"
+    :readonly="readonly"
     :label-align="labelAlign"
     :label="label"
     :error="error"
@@ -64,6 +65,7 @@
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
+          :size="buttonSize"
           no-ring
           v-bind="buttonAttrs"
           :data-cy="`${dataCy}-right`"
@@ -157,6 +159,14 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Set input read-only.
+   */
+  readonly: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputSearch).default.readonly,
+  },
+
   /**
    * Set input disabled.
    */
@@ -237,6 +247,16 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
+const buttonSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "md",
+    lg: "lg",
+  };
+
+  return sizes[props.size];
+});
+
 function onClickClear() {
   search.value = "";
   emit("clear");

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

@@ -20,9 +20,9 @@ export default /*tw*/ {
       { toggleLabel: true, size: "sm", class: "w-10" },
       { toggleLabel: true, size: "md", class: "w-12" },
       { toggleLabel: true, size: "lg", class: "w-14" },
-      { disabled: true, checked: true, class: "bg-opacity-50 pointer-events-none" },
-      { disabled: true, checked: false, class: "bg-opacity-50 pointer-events-none" },
-      { color: "grayscale", checked: true, class: "bg-gray-900 ring-gray-700/15" },
+      { disabled: true, checked: false, class: "bg-gray-300" },
+      { disabled: true, checked: true, class: "bg-gray-400" },
+      { color: "grayscale", disabled: false, checked: true, class: "bg-gray-900 ring-gray-700/15" },
     ],
   },
   input: "absolute size-0 opacity-0",

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

@@ -4,10 +4,9 @@ export default /*tw*/ {
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {
     base: `
-      px-3 py-2 rounded-dynamic border border-gray-300 cursor-text bg-white transition
-      hover:border-gray-400 hover:focus-within:border-gray-500
-      focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-gray-700/15
-      focus-within:border-gray-500 focus-within:outline-none
+      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
     `,
     variants: {
       error: {
@@ -18,10 +17,7 @@ export default /*tw*/ {
         `,
       },
       disabled: {
-        true: "cursor-not-allowed border-none focus-within:ring-0 bg-gray-100",
-      },
-      readonly: {
-        true: "ring-0 border-gray-300 focus-within:ring-0 focus-within:border-brand-300",
+        true: "pointer-events-none bg-gray-100",
       },
     },
     compoundVariants: [
@@ -32,10 +28,9 @@ export default /*tw*/ {
   },
   textarea: {
     base: `
-      placeholder:font-normal placeholder:text-gray-400 shadow-none w-full
-      disabled:cursor-not-allowed font-normal text-gray-900 resize-none block
-      border-none focus:border-none focus:outline-none focus:ring-0 p-0
-      bg-transparent
+      p-0 block w-full bg-transparent border-none font-normal text-gray-900
+      placeholder:font-normal placeholder:text-gray-400
+      focus:border-none focus:outline-none focus:ring-0
     `,
     variants: {
       size: {
@@ -46,7 +41,7 @@ export default /*tw*/ {
     },
   },
   defaultVariants: {
-    rows: "2",
+    rows: "3",
     size: "md",
     type: "text",
     inputmode: "text",

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

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: "",
     variants: {
       pill: {
-        true: "rounded-full bg-{color}-500 bg-opacity-5",
+        true: "rounded-full bg-{color}-500/5",
       },
     },
     compoundVariants: [

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.258",
+  "version": "0.0.260",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4930,6 +4930,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "readonly",
+              "description": "Set input read-only.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "disabled",
               "description": "Set input disabled.",
@@ -7951,7 +7960,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "2"
+              "default": "3"
             },
             {
               "name": "id",