vueless 0.0.135 → 0.0.137

package/package.json

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

package/preset.tailwind/index.js

@@ -26,7 +26,7 @@ export function vuelessPreset() {
   const devSafelist = [
     {
       pattern: /(border|bg|text|ring)-(.*)-((50|[1-9]00|950)?)$/,
-      variants: ["hover", "focus", "focus-within", "active"],
+      variants: ["hover", "focus", "focus-within", "active", "disabled"],
     },
   ];
 

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

@@ -2,43 +2,44 @@ export default /*tw*/ {
   button: {
     base: `
       flex items-center justify-center
-      text-base font-medium rounded-lg outline-none
+      text-base font-medium outline-none
+      border border-solid rounded-lg
       transition duration-100 ease-in-out
-      focus:ring-4 focus:ring-opacity-10 focus:outline-none
+      focus:ring-opacity-20 focus:ring-4 focus:outline-none
+      active:ring-opacity-20
+      disabled:ring-0 disabled:cursor-no-drop
     `,
     variants: {
       size: {
-        xs: "px-2 py-1.5 text-xs leading-tight",
-        sm: "px-3 py-2.5 text-sm leading-tight",
-        md: "px-4 py-3.5 text-base leading-tight",
-        lg: "px-5 py-[1.125rem] text-lg leading-tight",
+        xs: "px-2 py-1.5 text-xs leading-tight gap-0.5",
+        sm: "px-3 py-2.5 text-sm leading-tight gap-1",
+        md: "px-4 py-3.5 text-base leading-tight gap-1.5",
+        lg: "px-5 py-[1.125rem] text-lg leading-tight gap-2",
       },
       variant: {
         primary: `
-          border border-solid border-{color}-500 bg-{color}-500 text-white
-          focus:border-opacity-0 focus:bg-opacity-80 focus:border-{color}-500 focus:bg-{color}-500
-          focus:ring-{color}-500
-          hover:border-{color}-500 hover:bg-{color}-500
-          hover:border-opacity-0 hover:bg-opacity-80
-          active:border-{color}-500 active:bg-{color}-500
-          active:border-opacity-0 active:bg-opacity-70`,
+          text-white
+          bg-{color}-600 border-{color}-600
+          hover:bg-{color}-700 hover:border-{color}-700
+          focus:bg-{color}-700 focus:border-{color}-700 focus:ring-{color}-700
+          active:bg-{color}-800 active:border-{color}-800 active:ring-{color}-800
+          disabled:bg-{color}-300 disabled:border-{color}-300 disabled:text-white
+        `,
         secondary: `
-          border border-solid bg-transparent
-          border-{color}-500 text-{color}-500
-          focus:text-{color}-500 focus:border-{color}-500 focus:ring-{color}-500
-          focus:text-opacity-80 focus:border-opacity-80
-          hover:border-{color}-500 hover:text-{color}-500
-          hover:text-opacity-80 hover:border-opacity-80
-          active:border-{color}-500 active:text-{color}-500
-          active:border-opacity-70 active:text-opacity-70`,
+          text-{color}-600 border-{color}-600
+          hover:text-{color}-700 hover:border-{color}-700
+          focus:text-{color}-700 focus:border-{color}-700 focus:ring-{color}-700
+          active:text-{color}-800 active:border-{color}-800 active:ring-{color}-800
+          disabled:text-{color}-300 disabled:border-{color}-300
+        `,
         thirdary: `
-          border border-transparent bg-transparent text-{color}-500
-          focus:text-{color}-500 focus:bg-{color}-500 focus:ring-{color}-500
-          focus:text-opacity-70 focus:bg-opacity-5
-          hover:text-{color}-500 hover:bg-{color}-500
-          hover:text-opacity-70 hover:bg-opacity-10
-          active:text-{color}-500 active:bg-{color}-500
-          active:text-opacity-60 active:bg-opacity-15`,
+          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 focus:ring-{color}-700
+          active:text-{color}-800 active:bg-{color}-800 active:bg-opacity-15 active:ring-{color}-800
+          disabled:text-{color}-300
+        `,
       },
       loading: {
         true: "pointer-events-none",
@@ -49,102 +50,84 @@ export default /*tw*/ {
       block: {
         true: "w-full",
       },
+      color: {
+        grayscale: "focus:ring-gray-800 active:ring-gray-700 disabled:text-gray-400",
+        white: "focus:ring-gray-800 active:ring-gray-700 disabled:text-gray-400",
+      },
     },
     compoundVariants: [
-      {
-        disabled: true,
-        variant: "primary",
-        class: `
-          border-opacity-0 bg-opacity-40 cursor-no-drop text-white
-          hover:bg-opacity-40
-          focus:bg-opacity-40 focus:ring-0
-          active:bg-opacity-40 active:ring-0
-        `,
-      },
-      {
-        disabled: true,
-        variant: "secondary",
-        class: `
-          text-opacity-40 border-opacity-40 cursor-no-drop
-          hover:text-opacity-40 hover:border-opacity-40
-          focus:text-opacity-40 focus:border-opacity-40 focus:ring-0
-          active:text-opacity-40 active:border-opacity-40 active:ring-0
-        `,
-      },
-      {
-        disabled: true,
-        variant: "thirdary",
-        class: `
-          bg-opacity-5 text-opacity-40 ring-opacity-0 cursor-no-drop
-          hover:bg-opacity-5 hover:text-opacity-40
-          focus:ring-0 focus:bg-opacity-5 focus:text-opacity-40
-          active:bg-opacity-5 active:ring-0 active:text-opacity-40
-        `,
-      },
       {
         color: "grayscale",
         variant: "primary",
         class: `
-          border-gray-900 bg-gray-900
-          hover:border-gray-900 hover:bg-gray-900
-          focus:border-gray-900  focus:ring-gray-900/20
-          active:border-gray-900 active:bg-gray-900`,
+          bg-gray-900 border-gray-900
+          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
+        `,
       },
       {
         color: "grayscale",
         variant: "secondary",
         class: `
           text-gray-900 border-gray-900
-          hover:border-gray-900 hover:text-gray-900
-          focus:border-gray-900 focus:text-gray-900 focus:ring-gray-900/20
-          active:border-gray-900 active:text-gray-900`,
+          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
+        `,
       },
       {
         color: "grayscale",
         variant: "thirdary",
         class: `
           text-gray-900
-          focus:text-gray-800 focus:bg-gray-800 focus:ring-gray-800
-          hover:text-gray-800 hover:bg-gray-800
-          active:text-gray-800 active:bg-gray-800`,
+          hover:text-gray-800 hover:bg-gray-800 hover:bg-opacity-10
+          focus:text-gray-800 focus:bg-gray-800 focus:bg-opacity-10
+          active:text-gray-700 active:bg-gray-700 active:bg-opacity-15
+        `,
       },
       {
         color: "white",
         variant: "primary",
         class: `
-          border-white bg-white text-gray-500
-          focus:ring-white focus:border-white focus:bg-white
-          hover:border-white hover:bg-white
-          active:border-white active:bg-white`,
+          text-gray-900 border-white bg-white
+          hover:text-gray-800 hover:border-gray-50 hover:bg-gray-50
+          focus:text-gray-800 focus:border-gray-50 focus:bg-gray-50
+          active:text-gray-700 active:border-gray-100 active:bg-gray-100
+        `,
       },
       {
         color: "white",
         variant: "secondary",
         class: `
-          border-white bg-transparent text-white
-          focus:border-white focus:ring-white
-          hover:border-white
-          active:border-white`,
+          text-gray-900 border-white
+          hover:text-gray-800 hover:border-gray-50
+          focus:text-gray-800 focus:border-gray-50
+          active:text-gray-700 active:border-gray-100
+        `,
       },
       {
         color: "white",
         variant: "thirdary",
         class: `
-          border-transparent bg-transparent text-white
-          focus:bg-white focus:ring-white
-          hover:bg-white
-          active:bg-white`,
+          text-gray-900
+          hover:text-gray-800 hover:bg-white hover:bg-opacity-10
+          focus:text-gray-800 focus:bg-white focus:bg-opacity-10
+          active:text-gray-700 active:bg-white active:bg-opacity-15
+        `,
       },
-      { filled: true, variant: "thirdary", class: "bg-{color}-500 bg-opacity-5" },
-      { filled: true, variant: "thirdary", color: "white", class: "bg-white" },
-      { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-900" },
+      { filled: true, variant: "thirdary", class: "bg-{color}-600 bg-opacity-10" },
+      { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-800 bg-opacity-10" },
+      { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
       { square: true, size: "xs", class: "p-1" },
       { square: true, size: "sm", class: "p-2" },
       { square: true, size: "md", class: "p-3" },
-      { square: true, size: "lg", class: "py-4" },
+      { square: true, size: "lg", class: "p-4" },
     ],
   },
-  text: "whitespace-nowrap px-1.5",
+  text: "whitespace-nowrap",
   defaultVariants: {
     color: "brand",
     variant: "primary",
@@ -158,9 +141,19 @@ export default /*tw*/ {
     disabled: false,
   },
   safelist: (colors) => [
-    { pattern: `border-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
-    { pattern: `text-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
-    { pattern: `ring-(${colors})-500`, variants: ["focus"] },
-    { pattern: `bg-(${colors})-500` /* , variants: ["hover", "focus", "active"] */ },
+    { pattern: `border-(${colors})-600` },
+    { pattern: `border-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `border-(${colors})-800`, variants: ["active"] },
+    { pattern: `border-(${colors})-300`, variants: ["disabled"] },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `bg-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `bg-(${colors})-800`, variants: ["active"] },
+    { pattern: `bg-(${colors})-300`, variants: ["disabled"] },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
+    { pattern: `text-(${colors})-800`, variants: ["active"] },
+    { pattern: `text-(${colors})-300`, variants: ["disabled"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
+    { pattern: `ring-(${colors})-800`, variants: ["active"] },
   ],
 };

package/ui.data-list/composables/attrs.composable.js

@@ -14,9 +14,9 @@ export function useAttrs(props) {
   const itemWrapperAttrs = getAttrs("itemWrapper");
   const itemAttrs = getAttrs("item");
   const customActionsAttrs = getAttrs("customActions");
-  const iconDeleteAttrs = getAttrs("iconDelete", { isComponent: true });
-  const iconEditAttrs = getAttrs("iconEdit", { isComponent: true });
-  const iconDragAttrs = getAttrs("iconDrag", { isComponent: true });
+  const deleteIconAttrs = getAttrs("deleteIcon", { isComponent: true });
+  const editIconAttrs = getAttrs("editIcon", { isComponent: true });
+  const dragIconAttrs = getAttrs("dragIcon", { isComponent: true });
   const nestedAttrs = getAttrs("nested", { isComponent: true });
 
   const titleRaw = getAttrs("title");
@@ -35,11 +35,11 @@ export function useAttrs(props) {
     nestedAttrs,
     itemWrapperAttrs,
     itemAttrs,
-    iconDragAttrs,
     titleAttrs,
     customActionsAttrs,
-    iconDeleteAttrs,
-    iconEditAttrs,
     hasSlotContent,
+    deleteIconAttrs,
+    editIconAttrs,
+    dragIconAttrs,
   };
 }

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

@@ -10,18 +10,18 @@ export default /*tw*/ {
     group-last/item-wrapper:border-b-0 group-[]/nested:group-last/item-wrapper:border-b
     py-4 space-x-4 flex flex-auto items-center justify-between
   `,
-  iconDrag: "icon-drag cursor-move opacity-100 fill-gray-400 md:fill-gray-500",
-  iconDragName: "drag_indicator",
+  dragIcon: "icon-drag cursor-move opacity-100 fill-gray-400 md:fill-gray-500",
+  dragIconName: "drag_indicator",
   title: "text-base font-normal text-gray-900 flex-auto pt-px",
   titleCrossed: "line-through",
   customActions: `
     space-x-5 opacity-50 md:flex md:items-center md:opacity-0
     group-hover/item:md:block group-hover/item:opacity-100
   `,
-  iconDelete: "hidden md:block md:opacity-0 group-hover/item:md:opacity-100",
-  iconDeleteName: "delete",
-  iconEdit: "fill-gray-500 opacity-50",
-  iconEditName: "edit_note",
+  deleteIcon: "hidden md:block md:opacity-0 group-hover/item:md:opacity-100",
+  deleteIconName: "delete",
+  editIcon: "fill-gray-500 opacity-50",
+  editIconName: "edit_note",
   nested: "group/nested ml-6",
   i18n: {
     delete: "Delete",

package/ui.data-list/index.vue

@@ -25,7 +25,7 @@
       <template #item="{ element }">
         <div :id="element.id" :data-cy="`${dataCy}-item`" v-bind="itemWrapperAttrs">
           <div :data-cy="`${dataCy}-item-${element.id}`" v-bind="itemAttrs">
-            <UIcon internal :name="config.iconDragName" color="gray" v-bind="iconDragAttrs" />
+            <UIcon internal :name="config.dragIconName" color="gray" v-bind="dragIconAttrs" />
 
             <div v-bind="titleAttrs(element.isActive)">
               <slot :item="element">
@@ -47,10 +47,10 @@
                 internal
                 interactive
                 color="gray"
-                :name="config.iconDeleteName"
+                :name="config.deleteIconName"
                 :data-cy="`${dataCy}-delete`"
                 :tooltip="currentLocale.delete"
-                v-bind="iconDeleteAttrs"
+                v-bind="deleteIconAttrs"
                 @click="onClickDelete(element.id, element.name)"
               />
 
@@ -59,10 +59,10 @@
                 internal
                 interactive
                 color="gray"
-                :name="config.iconEditName"
+                :name="config.editIconName"
                 :data-cy="`${dataCy}-edit`"
                 :tooltip="currentLocale.edit"
-                v-bind="iconEditAttrs"
+                v-bind="editIconAttrs"
                 @click="onClickEdit(element.id)"
               />
             </template>
@@ -211,9 +211,9 @@ const {
   itemAttrs,
   titleAttrs,
   customActionsAttrs,
-  iconDeleteAttrs,
-  iconEditAttrs,
-  iconDragAttrs,
+  deleteIconAttrs,
+  editIconAttrs,
+  dragIconAttrs,
   hasSlotContent,
 } = useAttrs(props);
 const { tm } = useLocale();

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

@@ -50,7 +50,7 @@ export default function useAttrs(props) {
   const addTitleAttrs = getAttrs("addTitle");
   const addTitleHotkeyAttrs = getAttrs("addTitleHotkey");
   const buttonAddAttrs = getAttrs("buttonAdd", { isComponent: true });
-  const iconAddAttrs = getAttrs("iconAdd", { isComponent: true });
+  const addIconAttrs = getAttrs("addIcon", { isComponent: true });
   const optionContentAttrs = getAttrs("optionContent");
 
   const subGroupLabelAttrsRaw = getAttrs("subGroupLabel", { classes: subGroupLabelClasses });
@@ -83,7 +83,7 @@ export default function useAttrs(props) {
     addTitleAttrs,
     addTitleHotkeyAttrs,
     buttonAddAttrs,
-    iconAddAttrs,
+    addIconAttrs,
     optionAttrs,
     subGroupLabelAttrs,
     groupLabelAttrs,

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

@@ -58,8 +58,8 @@ export default /*tw*/ {
   addTitle: "text-sm font-medium text-gray-900",
   addTitleHotkey: "text-gray-500",
   buttonAdd: "sticky left-[calc(100%-2.3rem)] bottom-2.5 p-1",
-  iconAddName: "add",
-  iconAdd: "bg-transparent",
+  addIconName: "add",
+  addIcon: "bg-transparent",
   i18n: {
     noDataToShow: "No data to show.",
     add: "Add",

package/ui.dropdown-list/index.vue

@@ -82,8 +82,8 @@
             internal
             color="white"
             size="xs"
-            :name="config.iconAddName"
-            v-bind="iconAddAttrs"
+            :name="config.addIconName"
+            v-bind="addIconAttrs"
           />
         </UButton>
       </template>
@@ -230,7 +230,7 @@ const {
   addTitleAttrs,
   addTitleHotkeyAttrs,
   buttonAddAttrs,
-  iconAddAttrs,
+  addIconAttrs,
   optionAttrs,
   subGroupLabelAttrs,
   groupLabelAttrs,

package/ui.form-input-file/composables/attrs.composable.js

@@ -56,7 +56,6 @@ export function useAttrs(props) {
   const placeholderAttrs = getAttrs("placeholder", { classes: placeholderClasses });
   const clearIconAttrs = getAttrs("clearIcon", { isComponent: true });
   const chooseFileIconAttrs = getAttrs("chooseFileIcon", { isComponent: true });
-  const chooseFileIconNameAttrs = getAttrs("chooseFileIconName", { isComponent: true });
   const inputAttrs = getAttrs("input");
   const fileListAttrs = getAttrs("fileList");
   const selectedItemAttrs = getAttrs("selectedItem", { classes: selectedItemClasses });
@@ -70,7 +69,6 @@ export function useAttrs(props) {
     descriptionAttrs,
     contentWrapperAttrs,
     clearIconAttrs,
-    chooseFileIconNameAttrs,
     placeholderAttrs,
     fileListAttrs,
     buttonWrapperAttrs,

package/ui.form-select/composables/attrs.composable.js

@@ -92,15 +92,15 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
   const innerWrapperAttrs = getAttrs("innerWrapper", { classes: innerWrapperClasses });
   const wrapperTopAttrs = getAttrs("wrapperTop");
   const leftSlotAttrs = getAttrs("leftSlot");
-  const iconToggleAttrs = getAttrs("iconToggle", { isComponent: true });
   const searchInputAttrs = getAttrs("searchInput", { classes: searchInputClasses });
   const selectedLabelsAttrs = getAttrs("selectedLabels");
   const selectedLabelAttrs = getAttrs("selectedLabel", { classes: selectedLabelClasses });
   const dropdownListAttrs = getAttrs("dropdownList", { isComponent: true });
   const caretClearTextAttrs = getAttrs("caretClearText", { classes: caretClearTextClasses });
-  const iconClearAttrs = getAttrs("iconClear", { isComponent: true });
   const caretRemoveItemAttrs = getAttrs("caretRemoveItem");
-  const iconRemoveItemAttrs = getAttrs("iconRemoveItem", { isComponent: true });
+  const toggleIconAttrs = getAttrs("toggleIcon", { isComponent: true });
+  const clearIconAttrs = getAttrs("clearIcon", { isComponent: true });
+  const removeItemIconAttrs = getAttrs("removeItemIcon", { isComponent: true });
 
   const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });
 
@@ -169,16 +169,16 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
     beforeCaretSlotAttrs,
     afterCaretSlotAttrs,
     caretToggleAttrs,
-    iconToggleAttrs,
     caretClearAttrs,
     caretClearTextAttrs,
-    iconClearAttrs,
     caretRemoveItemAttrs,
-    iconRemoveItemAttrs,
     searchAttrs,
     searchInputAttrs,
     selectedLabelsAttrs,
     selectedLabelAttrs,
     dropdownListAttrs,
+    toggleIconAttrs,
+    clearIconAttrs,
+    removeItemIconAttrs,
   };
 }

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

@@ -55,12 +55,12 @@ export default /*tw*/ {
   beforeCaretSlot: "",
   afterCaretSlot: "mr-3",
   caretToggle: "mr-3",
-  iconToggle: "transform transition-all duration-300 group-[]/active:rotate-180",
-  iconToggleName: "expand_more",
-  iconClear: "",
-  iconClearName: "close_small",
-  iconRemoveItem: "",
-  iconRemoveItemName: "close_small",
+  toggleIcon: "transform transition-all duration-300 group-[]/active:rotate-180",
+  toggleIconName: "expand_more",
+  clearIcon: "",
+  clearIconName: "close_small",
+  removeItemIcon: "",
+  removeItemIconName: "close_small",
   caretRemoveItem: "flex items-center",
   caretClearText: {
     base: `

package/ui.form-select/index.vue

@@ -42,8 +42,8 @@
           interactive
           color="gray"
           :size="size"
-          :name="config.iconToggleName"
-          v-bind="iconToggleAttrs"
+          :name="config.toggleIconName"
+          v-bind="toggleIconAttrs"
         />
       </div>
 
@@ -61,8 +61,8 @@
           interactive
           color="gray"
           :size="size"
-          :name="config.iconClearName"
-          v-bind="iconClearAttrs"
+          :name="config.clearIconName"
+          v-bind="clearIconAttrs"
           @mousedown="removeElement"
         />
       </div>
@@ -94,8 +94,8 @@
                 interactive
                 color="gray"
                 :size="size"
-                :name="config.iconRemoveItemName"
-                v-bind="iconRemoveItemAttrs"
+                :name="config.removeItemIconName"
+                v-bind="removeItemIconAttrs"
                 @mousedown="removeElement(item)"
               />
             </div>
@@ -487,17 +487,17 @@ const {
   beforeCaretSlotAttrs,
   afterCaretSlotAttrs,
   caretToggleAttrs,
-  iconToggleAttrs,
   caretClearAttrs,
   caretClearTextAttrs,
-  iconClearAttrs,
   caretRemoveItemAttrs,
-  iconRemoveItemAttrs,
   searchAttrs,
   searchInputAttrs,
   selectedLabelsAttrs,
   selectedLabelAttrs,
   dropdownListAttrs,
+  toggleIconAttrs,
+  clearIconAttrs,
+  removeItemIconAttrs,
 } = useAttrs(props, { isTop, isOpen, selectedLabel });
 
 const i18nGlobal = tm(USelect);

package/ui.text-file/configs/default.config.js

@@ -1,8 +1,8 @@
 export default /*tw*/ {
   file: "",
   info: "flex items-start",
-  icon: " mr-3",
-  iconDescriptionName: "description",
+  icon: "mr-3",
+  iconName: "description",
   itemImage: "rounded-sm",
   text: {
     base: "whitespace-normal pt-0.5 hover:underline hover:decoration-dashed hover:underline-offset-4",

package/ui.text-file/index.vue

@@ -10,7 +10,7 @@
         internal
         interactive
         color="gray"
-        :name="config.iconDescriptionName"
+        :name="config.iconName"
         v-bind="iconAttrs"
         @focus="onFocus"
         @blur="onBlur"

package/ui.text-notify/composables/attrs.composable.js

@@ -10,10 +10,10 @@ export function useAttrs(props) {
   const contentAttrs = getAttrs("content");
   const labelAttrs = getAttrs("label");
   const descriptionAttrs = getAttrs("description");
-  const iconSuccessAttrs = getAttrs("iconSuccess");
-  const iconWarningAttrs = getAttrs("iconWarning");
-  const iconErrorAttrs = getAttrs("iconError");
-  const iconCloseAttrs = getAttrs("iconClose");
+  const successIconAttrs = getAttrs("successIcon");
+  const warningIconAttrs = getAttrs("warningIcon");
+  const errorIconAttrs = getAttrs("errorIcon");
+  const closeIconAttrs = getAttrs("closeIcon");
 
   return {
     config,
@@ -22,9 +22,9 @@ export function useAttrs(props) {
     contentAttrs,
     labelAttrs,
     descriptionAttrs,
-    iconSuccessAttrs,
-    iconWarningAttrs,
-    iconCloseAttrs,
-    iconErrorAttrs,
+    successIconAttrs,
+    warningIconAttrs,
+    errorIconAttrs,
+    closeIconAttrs,
   };
 }

package/ui.text-notify/configs/default.config.js

@@ -10,14 +10,14 @@ export default /*tw*/ {
   content: "w-full flex flex-col max-w-full px-3 text-sm text-gray-200",
   label: "mb-1 font-medium",
   description: "break-words font-normal leading-5",
-  iconSuccess: "",
-  iconSuccessName: "check_circle",
-  iconWarning: "",
-  iconWarningName: "warning",
-  iconError: "",
-  iconErrorName: "error",
-  iconClose: "",
-  iconCloseName: "close",
+  successIcon: "",
+  successIconName: "check_circle",
+  warningIcon: "",
+  warningIconName: "warning",
+  errorIcon: "",
+  errorIconName: "error",
+  closeIcon: "",
+  closeIconName: "close",
   transitionGroup: {
     moveClass: "transition-all duration-500",
     enterActiveClass: "transition-all duration-500",

package/ui.text-notify/index.vue

@@ -18,8 +18,8 @@
         variant="light"
         size="md"
         internal
-        :name="config.iconSuccessName"
-        v-bind="iconSuccessAttrs"
+        :name="config.successIconName"
+        v-bind="successIconAttrs"
       />
 
       <UIcon
@@ -29,8 +29,8 @@
         variant="light"
         size="md"
         internal
-        :name="config.iconWarningName"
-        v-bind="iconWarningAttrs"
+        :name="config.warningIconName"
+        v-bind="warningIconAttrs"
       />
 
       <UIcon
@@ -40,8 +40,8 @@
         variant="light"
         size="md"
         internal
-        :name="config.iconErrorName"
-        v-bind="iconErrorAttrs"
+        :name="config.errorIconName"
+        v-bind="errorIconAttrs"
       />
 
       <div v-bind="contentAttrs">
@@ -61,8 +61,8 @@
         size="xs"
         internal
         interactive
-        :name="config.iconCloseName"
-        v-bind="iconCloseAttrs"
+        :name="config.closeIconName"
+        v-bind="closeIconAttrs"
         @click="onClickClose(notification)"
       />
     </div>
@@ -129,10 +129,10 @@ const {
   contentAttrs,
   labelAttrs,
   descriptionAttrs,
-  iconSuccessAttrs,
-  iconWarningAttrs,
-  iconErrorAttrs,
-  iconCloseAttrs,
+  successIconAttrs,
+  warningIconAttrs,
+  errorIconAttrs,
+  closeIconAttrs,
 } = useAttrs(props);
 
 const { tm } = useLocale();

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.135",
+  "version": "0.0.137",
   "contributions": {
     "html": {
       "description-markup": "markdown",