vueless 0.0.180 → 0.0.182

package/package.json

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

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

@@ -3,8 +3,7 @@ export default /*tw*/ {
     base: `
       flex items-center justify-center
       text-base font-medium outline-none
-      border border-solid
-      transition duration-100 ease-in-out
+      border border-solid transition-all
       focus:ring-opacity-20 focus:ring-4 focus:ring-{color}-700
       focus-within:ring-opacity-20 focus-within:ring-4 focus-within:ring-{color}-700
       disabled:ring-0 disabled:cursor-no-drop

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

@@ -69,14 +69,31 @@ export function useAttrs(props, { isActive, isExactActive }) {
     ),
   );
 
-  const textClasses = computed(() => setColor(cvaText({ color: props.color }), props.color));
+  const textClasses = computed(() =>
+    setColor(
+      cvaText({
+        color: getColor(props.color),
+      }),
+      props.color,
+    ),
+  );
 
   const rightSlotClasses = computed(() =>
-    setColor(cvaRightSlot({ color: props.color }), props.color),
+    setColor(
+      cvaRightSlot({
+        color: getColor(props.color),
+      }),
+      props.color,
+    ),
   );
 
   const leftSlotClasses = computed(() =>
-    setColor(cvaLeftSlot({ color: props.color }), props.color),
+    setColor(
+      cvaLeftSlot({
+        color: getColor(props.color),
+      }),
+      props.color,
+    ),
   );
 
   const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });

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

@@ -1,8 +1,7 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      w-fit inline-flex rounded
-      transition duration-100 ease-in-out
+      w-fit inline-flex rounded transition-all
       focus-within:ring-4 focus-within:ring-{color}-500 focus-within:ring-opacity-15 focus-visible:outline-none
     `,
     variants: {
@@ -29,9 +28,8 @@ export default /*tw*/ {
   },
   link: {
     base: `
-      w-full inline-block !leading-none
+      w-full inline-block !leading-none transition-all
       text-{color}-500 decoration-{color}-500 underline-offset-4
-      transition duration-100 ease-in-out
       hover:text-opacity-80
       active:text-opacity-70
       focus:ring-offset-0 focus:ring-0

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

@@ -20,7 +20,7 @@ export default /*tw*/ {
         lg: "text-base",
       },
       isOpened: {
-        true: "h-full pt-3 opacity-100 transition-all duration-100 ease-in-out",
+        true: "h-full pt-3 opacity-100 transition-all",
       },
     },
   },

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

@@ -43,7 +43,7 @@ export default /*tw*/ {
   headerLoader: "absolute !top-auto",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
-  bodyRowChecked: "bg-gray-100 transition duration-100",
+  bodyRowChecked: "bg-gray-100 transition-all",
   bodyRowBefore: "!p-0",
   bodyRowBeforeCell: "py-1",
   bodyRowAfter: "!p-0",

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

@@ -5,10 +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
-      hover:transition hover:duration-100 hover:ease-in-out bg-white opacity-1
-    `,
+  list: "inline-block list-none align-top m-0 min-w-full p-0 bg-white opacity-1 hover:transition-all",
   subGroupLabel: {
     base: "pointer-events-none bg-transparent !font-medium !leading-none !uppercase !text-gray-500/[85] pt-1",
     variants: {

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

@@ -20,9 +20,7 @@ export default /*tw*/ {
   icon: "",
   checkbox: {
     base: `
-      transition duration-100 ease-in-out
-      border border-solid rounded
-      border-gray-300 bg-white
+      border border-solid rounded border-gray-300 bg-white hover:transition-all
       hover:border-gray-400
       focus:border-{color}-500 focus:ring-4 focus:ring-opacity-20 focus:ring-offset-0 focus:ring-{color}-500
       active:border-{color}-500 active:bg-{color}-500

package/ui.form-color-picker/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, setColor, getColor } = useUI(defaultConfig, () => props.config);
   const { list, radio } = config.value;
 
   const cvaList = cva({
@@ -21,7 +21,14 @@ export function useAttrs(props) {
   });
 
   const listClasses = computed(() => cvaList({ size: props.size }));
-  const radioClasses = computed(() => setColor(cvaRadio({ color: props.color }), props.color));
+  const radioClasses = computed(() =>
+    setColor(
+      cvaRadio({
+        color: getColor(props.color),
+      }),
+      props.color,
+    ),
+  );
 
   const labelAttrs = getAttrs("label");
   const listAttrs = getAttrs("list", { classes: listClasses });

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

@@ -8,8 +8,7 @@ export default /*tw*/ {
   passwordHiddenIconName: "visibility_off-fill",
   block: {
     base: `
-      rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex
-      transition duration-100 ease-in-out
+      rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex transition-all
       hover:border-gray-400 hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15]
     `,
@@ -32,7 +31,7 @@ export default /*tw*/ {
   input: {
     base: `
       block w-full pb-2 px-4 font-normal leading-none text-gray-900 placeholder:font-normal placeholder-gray-400
-      transition duration-100 ease-in-out bg-white border-none border-gray-300 rounded-lg shadow-none
+      transition-all bg-white border-none border-gray-300 rounded-lg shadow-none
       focus:outline-none focus:ring-0 disabled:opacity-50
       disabled:cursor-not-allowed disabled:text-gray-900 disabled:border-gray-100
       read-only:border-gray-300 read-only:ring-0

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

@@ -4,7 +4,7 @@ export default /*tw*/ {
     base: `
       pb-2 pt-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-lg border border-gray-300 bg-white
-      hover:border-gray-400 hover:transition hover:duration-100 hover:ease-in-out hover:focus-within:border-brand-500
+      hover:border-gray-400 hover:transition-all hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15] focus-within:outline-none
     `,
     variants: {
@@ -63,10 +63,7 @@ export default /*tw*/ {
   removeItemIconName: "close_small",
   caretRemoveItem: "flex items-center",
   caretClearText: {
-    base: `
-      cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500
-      transition-all duration-100 ease-in-out
-    `,
+    base: "cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500 transition-all",
     compoundVariants: [
       { size: "sm", class: "text-sm" },
       { size: "md", class: "text-base" },

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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   label: "flex items-start",
   wrapper: {
     base: `
-      transition-all duration-300 ease-in-out
+      transition-all duration-300
       flex items-center p-0.5 relative rounded-3xl cursor-pointer
       ring-opacity-10 focus-within:ring-4
     `,
@@ -28,7 +28,7 @@ export default /*tw*/ {
   },
   input: "absolute size-0 opacity-0",
   circle: {
-    base: "transition-all duration-300 ease-in-out rounded-full bg-white flex items-center justify-center",
+    base: "transition-all duration-300 rounded-full bg-white flex items-center justify-center",
     variants: {
       size: {
         sm: "size-4",
@@ -46,7 +46,7 @@ export default /*tw*/ {
   selectedIconName: "check",
   unselectedIconName: "close",
   toggleLabel: {
-    base: "absolute text-center text-2xs font-medium uppercase text-white transition-all duration-300 ease-in-out ",
+    base: "absolute text-center text-2xs font-medium uppercase text-white transition-all duration-300",
     compoundVariants: [
       { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
       { toggleLabel: true, checked: false, class: "w-1/2 right-1" },

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

@@ -4,7 +4,7 @@ export default /*tw*/ {
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {
     base: `
-      transition duration-100 ease-in-out focus-within:outline-none
+      transition-all focus-within:outline-none
       rounded-lg border border-solid border-gray-300 ring-0 cursor-text bg-white pr-4
       hover:border-gray-400 pl-4 hover:focus-within:border-gray-500
       focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]

package/ui.navigation-progress/composables/attrs.composable.js

@@ -46,7 +46,15 @@ export function useAttrs(props) {
     ),
   );
 
-  const stepClasses = computed(() => setColor(cvaStep({ size: props.size }), props.color));
+  const stepClasses = computed(() =>
+    setColor(
+      cvaStep({
+        size: props.size,
+        color: getColor(props.color),
+      }),
+      props.color,
+    ),
+  );
 
   const wrapperAttrs = getAttrs("wrapper");
   const indicatorAttrs = getAttrs("indicator", { classes: indicatorClasses });

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

@@ -1,20 +1,20 @@
 export default /*tw*/ {
-  wrapper: "h-auto flex flex-col gap-1.5 w-full",
+  wrapper: "w-full h-auto flex flex-col gap-1.5",
   progress: {
     base: `
-      block appearance-none border-none overflow-hidden w-full
-      [&::-webkit-progress-bar]:w-full h-2 rounded-full [&::-webkit-progress-bar]:rounded-full
-      [&::-webkit-progress-bar]:bg-{color}-200 [@supports(selector(&::-moz-progress-bar))]:bg-{color}-200
-      [&::-webkit-progress-value]:rounded-full  [&::-webkit-progress-value]:transition-all
-      [&::-webkit-progress-value]:ease-in-out [&::-moz-progress-bar]:rounded-full text-{color}-500
-      [&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current indeterminate:relative
-      indeterminate:after:rounded-full [&:indeterminate::-webkit-progress-value]:rounded-full
-      [&:indeterminate::-moz-progress-bar]:rounded-full
+      text-{color}-500 w-full block appearance-none border-none overflow-hidden
+      indeterminate:relative indeterminate:after:rounded-full
+      [&:indeterminate::-webkit-progress-value]:rounded-full [&:indeterminate::-moz-progress-bar]:rounded-full
+      [&::-webkit-progress-bar]:w-full [&::-webkit-progress-bar]:rounded-full
+      [&::-webkit-progress-bar]:bg-gray-100 [@supports(selector(&::-moz-progress-bar))]:bg-gray-100
+      [&::-webkit-progress-value]:rounded-full [&::-moz-progress-bar]:rounded-full
+      [&::-webkit-progress-value]:transition-all [&::-moz-progress-bar]:transition-all
+      [&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current
     `,
     variants: {
       color: {
-        white: "bg-white",
-        grayscale: "bg-gray-900",
+        white: "text-gray-200",
+        grayscale: "text-gray-900",
       },
       size: {
         "2xs": "h-px",
@@ -28,10 +28,10 @@ export default /*tw*/ {
     },
   },
   indicator: {
-    base: "w-full flex justify-end font-medium text-brand-500 min-w-fit",
+    base: "text-{color}-500 flex justify-end w-full min-w-fit font-medium transition-all",
     variants: {
       color: {
-        white: "text-white",
+        white: "text-gray-200",
         grayscale: "text-gray-900",
       },
       size: {
@@ -46,8 +46,12 @@ export default /*tw*/ {
   },
   firstStep: "text-gray-500",
   step: {
-    base: "flex w-full justify-end text-brand-500",
+    base: "text-{color}-500 flex justify-end w-full transition-all",
     variants: {
+      color: {
+        white: "text-gray-200",
+        grayscale: "text-gray-900",
+      },
       size: {
         xs: "text-xs",
         sm: "text-sm",
@@ -61,6 +65,7 @@ export default /*tw*/ {
   defaultVariants: {
     color: "brand",
     size: "md",
+    indicator: false,
   },
-  safelist: (colors) => [{ pattern: `bg-(${colors})-200` }, { pattern: `text-(${colors})-500` }],
+  safelist: (colors) => [{ pattern: `text-(${colors})-500` }],
 };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.180",
+  "version": "0.0.182",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5767,7 +5767,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "UIService.get(defaultConfig, UProgress).default.indicator"
+              "default": "false"
             }
           ],
           "slots": [