vueless 0.0.217 → 0.0.218

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

@@ -1,13 +1,12 @@
 export default /*tw*/ {
-  label: "{ULabel} relative w-full",
+  label: "{ULabel}",
   leftSlot: "flex items-center justify-center h-full w-11 absolute left-0",
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {
     base: `
-      transition 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]
+      px-3 py-2 rounded-md border border-gray-300 cursor-text bg-white transition
+      hover:border-gray-400 hover:focus-within:border-gray-500
+      focus-within:outline-none focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
     `,
     variants: {
       error: {
@@ -23,16 +22,12 @@ export default /*tw*/ {
       readonly: {
         true: "ring-0 border-gray-300 focus-within:ring-0 focus-within:border-brand-300",
       },
-      size: {
-        sm: "pt-2 pb-2",
-        md: "pt-2.5 pb-2.5",
-        lg: "pt-3 pb-3",
-      },
     },
     compoundVariants: [
-      { labelAlign: "topInside", label: true, class: "pt-5 pb-1.5" },
-      { labelAlign: "topInside", label: true, class: "pt-6 pb-1.5" },
-      { labelAlign: "topInside", label: true, class: "pt-7 pb-2" },
+      { labelAlign: "topInside", label: true, class: "rounded-lg" },
+      { labelAlign: "topInside", label: true, size: "sm", class: "pt-5" },
+      { labelAlign: "topInside", label: true, size: "md", class: "pt-6" },
+      { labelAlign: "topInside", label: true, size: "lg", class: "pt-7" },
     ],
   },
   textarea: {
@@ -45,16 +40,16 @@ export default /*tw*/ {
     variants: {
       size: {
         sm: "text-xs placeholder:text-xs",
-        md: "text-base placeholder:text-base",
-        lg: "text-lg placeholder:text-lg",
+        md: "text-sm placeholder:text-sm",
+        lg: "text-base placeholder:text-base",
       },
     },
   },
   defaultVariants: {
+    rows: "2",
     size: "md",
     type: "text",
     inputmode: "text",
-    rows: "2",
     labelAlign: "topInside",
     error: false,
     disabled: false,

package/ui.form-textarea/index.vue

@@ -97,7 +97,7 @@ const props = defineProps({
 
   /**
    * Set label placement related from the default slot.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * @values top, topInside, topWithDesc, left, right
    */
   labelAlign: {
     type: String,

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

@@ -55,17 +55,17 @@ export default /*tw*/ {
   icon: {
     variants: {
       size: {
-        "3xs": "h-3 w-3",
-        "2xs": "h-3.5 w-3.5",
-        xs: " h-4 w-4",
-        sm: "h-5 w-5",
-        md: "h-6 w-6",
-        lg: "h-8 w-8",
-        xl: "h-10 w-10",
-        "2xl": "h-12 w-12",
-        "3xl": "h-14 w-14",
-        "4xl": "h-16 w-16",
-        "5xl": "h-20 w-20",
+        "3xs": "size-3",
+        "2xs": "size-3.5",
+        xs: "size-4",
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-8",
+        xl: "size-10",
+        "2xl": "size-12",
+        "3xl": "size-14",
+        "4xl": "size-16",
+        "5xl": "size-20",
       },
     },
   },

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

@@ -8,7 +8,7 @@ export default /*tw*/ {
         thirdary: "text-{color}-500 border-transparent",
       },
       size: {
-        sm: "p-0.5 px-2 text-2xs",
+        sm: "px-2 py-1 text-2xs",
         md: "px-2 py-1 text-xs",
         lg: "px-3 py-1.5 text-sm",
       },
@@ -31,9 +31,9 @@ export default /*tw*/ {
     base: "flex items-center",
     variants: {
       size: {
-        sm: "space-x-1",
-        md: "space-x-1.5",
-        lg: "space-x-2",
+        sm: "space-x-0.5",
+        md: "space-x-1",
+        lg: "space-x-1.5",
       },
     },
   },

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

@@ -12,10 +12,9 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
-        xs: "text-xs space-y-2",
-        sm: "text-sm space-y-3",
-        md: "text-base space-y-4",
-        lg: "text-lg space-y-5",
+        sm: "text-xs space-y-2",
+        md: "text-sm space-y-3",
+        lg: "text-base space-y-4",
       },
       align: {
         left: "text-left",

package/ui.text-block/index.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 
   /**
    * Text size.
-   * @values xs, sm, md, lg
+   * @values sm, md, lg
    */
   size: {
     type: String,

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

@@ -1,26 +1,26 @@
 export default /*tw*/ {
   wrapper: "flex flex-col items-center justify-center size-full",
-  header: "mb-4 flex justify-center",
-  icon: "{UIcon}",
-  iconName: "emoji_food_beverage",
-  footer: "mt-4 flex justify-center",
-  title: {
-    base: "mb-2 font-medium text-center",
+  header: {
+    base: "flex justify-center",
     variants: {
       size: {
-        sm: "text-base",
-        md: "text-lg",
-        lg: "text-xl",
+        sm: "mb-4",
+        md: "mb-5",
+        lg: "mb-6",
       },
     },
   },
+  icon: "{UIcon}",
+  iconName: "emoji_food_beverage",
+  footer: "mt-4 flex justify-center",
+  title: "{UHeader}",
   description: {
     base: "text-center",
     variants: {
       size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
     },
   },

package/ui.text-empty/index.vue

@@ -16,12 +16,8 @@
 
     <!-- @slot Use it to add something inside. -->
     <slot>
-      <div v-if="title" v-bind="titleAttrs">
-        {{ title }}
-      </div>
-      <div v-if="description" v-bind="descriptionAttrs">
-        {{ description }}
-      </div>
+      <UHeader v-if="title" :label="title" :size="titleSize" v-bind="titleAttrs" />
+      <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
     </slot>
 
     <div v-bind="footerAttrs">
@@ -35,6 +31,7 @@
 import { computed } from "vue";
 
 import UIcon from "../ui.image-icon";
+import UHeader from "../ui.text-header";
 import UIService from "../service.ui";
 
 import { UEmpty } from "./constants";
@@ -92,9 +89,19 @@ const { config, titleAttrs, descriptionAttrs, wrapperAttrs, headerAttrs, footerA
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: "xl",
-    md: "2xl",
-    lg: "3xl",
+    sm: "2xl",
+    md: "3xl",
+    lg: "4xl",
+  };
+
+  return sizes[props.size];
+});
+
+const titleSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
   };
 
   return sizes[props.size];

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

@@ -1,6 +1,15 @@
 export default /*tw*/ {
   file: "{UFile}",
-  info: "flex items-center gap-2 ",
+  info: {
+    base: "flex items-center",
+    variants: {
+      size: {
+        sm: "gap-1",
+        md: "gap-1.5",
+        lg: "gap-2",
+      },
+    },
+  },
   icon: "{UIcon}",
   iconName: "description",
   image: "rounded-sm max-w-7",
@@ -11,9 +20,9 @@ export default /*tw*/ {
         true: "underline decoration-dashed underline-offset-4",
       },
       size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
     },
   },

package/ui.text-file/index.vue

@@ -11,7 +11,7 @@
           internal
           interactive
           color="gray"
-          :size="size"
+          :size="iconSize"
           :name="config.iconName"
           v-bind="iconAttrs"
           @focus="onFocus"
@@ -27,7 +27,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import ULink from "../ui.button-link";
 import UIcon from "../ui.image-icon";
@@ -107,6 +107,16 @@ const { config, fileAttrs, infoAttrs, iconAttrs, labelAttrs, imageAttrs } = useA
   focus,
 });
 
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
+  };
+
+  return sizes[props.size];
+});
+
 function onFocus() {
   focus.value = true;
 }

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

@@ -1,16 +1,9 @@
 export default /*tw*/ {
-  label: "block text-sm font-normal text-gray-500",
-  body: {
-    base: "flex gap-4 flex-col",
-    variants: {
-      label: {
-        true: "mt-4",
-      },
-    },
-  },
+  label: "{ULabel}",
+  body: "flex flex-col gap-1",
   file: "{UFile} block",
   defaultVariants: {
-    placement: "topInside",
+    placement: "top",
     size: "md",
   },
 };

package/ui.text-files/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ULabel :label="label" :description="description" v-bind="labelAttrs">
+  <ULabel :label="label" :description="description" :size="size" v-bind="labelAttrs">
     <div v-bind="bodyAttrs">
       <slot>
         <UFile

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

@@ -23,14 +23,13 @@ export default /*tw*/ {
   sum: {
     variants: {
       size: {
-        xs: "text-xs",
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-        xl: "text-xl",
-        "2xl": "text-2xl",
-        "3xl": "text-3xl",
-        "4xl": "text-4xl",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+        xl: "text-lg",
+        "2xl": "text-xl",
+        "3xl": "text-2xl",
+        "4xl": "text-3xl",
       },
       planned: {
         true: "opacity-75 before:content-['('] after:content-[')']",

package/ui.text-money/index.stories.js

@@ -243,10 +243,7 @@ export const slotLeft = SlotTemplate.bind({});
 slotLeft.args = {
   slotTemplate: `
     <template #left>
-      <UIcon
-        :src="icons.Debit"
-        size="xs"
-      />
+      <UIcon :src="icons.Debit" size="3xs" />
     </template>
   `,
 };
@@ -255,11 +252,7 @@ export const slotRight = SlotTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>
-      <UIcon
-        :src="icons.Credit"
-        size="xs"
-        color="gray"
-      />
+      <UIcon :src="icons.Credit" size="3xs" />
     </template>
   `,
 };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.217",
+  "version": "0.0.218",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1324,9 +1324,9 @@
               "description": "Label placement.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'left' | 'right'"
               },
-              "default": "left"
+              "default": "right"
             },
             {
               "name": "color",
@@ -1342,7 +1342,7 @@
               "description": "Checkbox size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "type": "'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
@@ -1479,16 +1479,16 @@
             },
             {
               "name": "size",
-              "description": "Radio size.",
+              "description": "Checkbox group size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "type": "'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
             {
               "name": "color",
-              "description": "Radio group color.",
+              "description": "Checkbox group color.",
               "value": {
                 "kind": "expression",
                 "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'"
@@ -2752,7 +2752,7 @@
               "description": "Button size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -2973,7 +2973,7 @@
               "description": "Link size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg'"
+                "type": "'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
@@ -3481,7 +3481,7 @@
                 "kind": "expression",
                 "type": "'topInside' | 'top' | 'left' | 'right'"
               },
-              "default": "topInside"
+              "default": "top"
             },
             {
               "name": "fileList",
@@ -3981,7 +3981,7 @@
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
               },
               "default": "topInside"
             },
@@ -4010,7 +4010,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "false"
+              "default": "\"\""
             },
             {
               "name": "size",
@@ -4254,7 +4254,7 @@
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
               },
               "default": "topInside"
             },
@@ -4403,7 +4403,7 @@
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
               },
               "default": "topInside"
             },
@@ -4726,7 +4726,7 @@
               "description": "Rating label placement.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'top' | 'topWithDesc' | 'left' | 'right'"
               },
               "default": "top"
             },
@@ -4881,7 +4881,7 @@
               "description": "Label placement.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
               },
               "default": "topInside"
             },
@@ -5027,13 +5027,22 @@
             },
             {
               "name": "align",
-              "description": "Set label placement related from the default slot.",
+              "description": "Label placement.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
               },
               "default": "top"
             },
+            {
+              "name": "centred",
+              "description": "Centre label.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "error",
               "description": "Set error message.",
@@ -5145,7 +5154,7 @@
               "description": "Link size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg'"
+                "type": "'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
@@ -6481,7 +6490,7 @@
               "description": "Radio size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "type": "'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
@@ -6496,12 +6505,12 @@
             },
             {
               "name": "labelAlign",
-              "description": "Set label placement related from the default slot.",
+              "description": "Label placement.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'left' | 'right'"
               },
-              "default": "left"
+              "default": "right"
             },
             {
               "name": "disabled",
@@ -6630,7 +6639,7 @@
               "description": "Radio size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+                "type": "'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
@@ -6828,7 +6837,7 @@
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
               },
               "default": "topInside"
             },
@@ -7238,9 +7247,9 @@
               "description": "Label alignment.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'top' | 'left' | 'right'"
               },
-              "default": "left"
+              "default": "right"
             },
             {
               "name": "label",
@@ -7733,7 +7742,7 @@
               "description": "Text size.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg'"
+                "type": "'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
@@ -7830,7 +7839,7 @@
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
               },
               "default": "topInside"
             },
@@ -8019,7 +8028,7 @@
               "description": "Label placement.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "'top' | 'topWithDesc' | 'left' | 'right'"
               },
               "default": "top"
             },