vueless 0.0.258 → 0.0.259

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.259",
   "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-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",

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

@@ -64,6 +64,7 @@
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
+          :size="buttonSize"
           no-ring
           v-bind="buttonAttrs"
           :data-cy="`${dataCy}-right`"
@@ -237,6 +238,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.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.259",
   "contributions": {
     "html": {
       "description-markup": "markdown",