vueless 0.0.220 → 0.0.221

package/package.json

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

package/ui.button/index.vue

@@ -247,11 +247,11 @@ const loaderSize = computed(() => {
 
 const iconSize = computed(() => {
   const sizes = {
-    "2xs": "sm",
-    xs: "sm",
-    sm: "md",
-    md: "md",
-    lg: "lg",
+    "2xs": "3xs",
+    xs: "2xs",
+    sm: "xs",
+    md: "sm",
+    lg: "md",
     xl: "lg",
   };
 

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

@@ -28,7 +28,7 @@ export default /*tw*/ {
   },
   option: {
     base: `
-      rounded px-3 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
+      rounded px-2 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
       font-normal !leading-none normal-case text-gray-900
       hover:bg-gray-100
       overflow-hidden text-ellipsis

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

@@ -1,8 +1,8 @@
 export default /*tw*/ {
   label: "{ULabel}",
   inputWrapper: "flex relative w-full",
-  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-3 rounded-r-lg rounded-l-none",
-  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-3 rounded-l-lg rounded-r-none",
+  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-3 gap-1 rounded-r-lg rounded-l-none",
+  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-3 gap-1 rounded-l-lg rounded-r-none",
   passwordIcon: "",
   passwordVisibleIconName: "visibility-fill",
   passwordHiddenIconName: "visibility_off-fill",

package/ui.form-input/index.vue

@@ -348,9 +348,9 @@ const {
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: "sm",
-    md: "md",
-    lg: "lg",
+    sm: "xs",
+    md: "sm",
+    lg: "md",
   };
 
   return sizes[props.size];

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

@@ -5,7 +5,10 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey, hasSlotContent } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
@@ -31,5 +34,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

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

@@ -2,8 +2,8 @@ export default /*tw*/ {
   label: "{ULabel} w-full",
   dropzoneWrapper: {
     base: `
-      size-auto w-full rounded-lg border border-solid border-gray-300 bg-white
-      p-3 transition hover:border-gray-400
+      p-3 size-auto w-full bg-white transition
+      rounded-lg border border-solid border-gray-300 hover:border-gray-400
     `,
     variants: {
       error: {
@@ -16,13 +16,17 @@ export default /*tw*/ {
       { labelAlign: "topInside", label: true, size: "lg", class: "pt-9" },
     ],
   },
-  description: "{UText} text-gray-700",
+  descriptionTop: "{UText} text-gray-700 mb-2",
+  descriptionBottom: "{UText} text-gray-700 mt-2",
   contentWrapper: {
-    base: "relative flex w-full gap-6 justify-between items-start rounded-lg bg-brand-50 p-3",
+    base: "p-3 gap-6 w-full rounded-lg bg-brand-50 relative flex justify-between items-start",
     variants: {
       multiple: {
         false: "items-center",
       },
+      error: {
+        true: "bg-red-50",
+      },
     },
   },
   placeholder: {
@@ -36,16 +40,15 @@ export default /*tw*/ {
     },
   },
   button: "{UButton} hover:cursor-pointer",
-  chooseFileIcon: "{UIcon}",
   chooseFileIconName: "attach_file",
-  clearIcon: "{UIcon}",
+  clearButton: "{UButton}",
   clearIconName: "close",
   removeItemIcon: "{UIcon} ml-2",
   removeItemIconName: "close",
   dropzoneWrapperHover: "border-gray-400 border-dashed",
   dropzoneWrapperError: "hover:border-red-400 border-dashed border-red-300",
   input: "sr-only pointer-events-none size-0 opacity-0",
-  buttonWrapper: "flex gap-4 items-center",
+  buttonWrapper: "flex gap-3 items-center",
   fileList: "{UFiles} w-full",
   i18n: {
     sizeError: "File size is too big.",

package/ui.form-input-file/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, allSlotsFragment, getSlotNames } from "../service.storybook";
 
 import UInputFile from "../ui.form-input-file";
 import URow from "../ui.container-row";
@@ -19,9 +19,11 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UInputFile, URow },
+  components: { UInputFile },
   setup() {
-    return { args };
+    const slots = getSlotNames(UInputFile.name);
+
+    return { args, slots };
   },
   data() {
     return {
@@ -30,13 +32,13 @@ const DefaultTemplate = (args) => ({
     };
   },
   template: `
-    <URow>
-      <UInputFile
-        v-bind="args"
-        v-model="files"
-        v-model:error="error"
-      />
-    </URow>
+    <UInputFile
+      v-bind="args"
+      v-model="files"
+      v-model:error="error"
+    >
+      ${allSlotsFragment}
+    </UInputFile>
   `,
 });
 
@@ -52,7 +54,7 @@ const SlotTemplate = (args) => ({
     };
   },
   template: `
-    <UInputFile 
+    <UInputFile
       v-bind="args"
       v-model="files"
       v-model:error="error"

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

@@ -1,7 +1,18 @@
 <template>
-  <ULabel :label="label" :align="labelAlign" :error="error" :size="size" v-bind="labelAttrs">
+  <ULabel
+    :for="id"
+    :size="size"
+    :label="label"
+    :error="error"
+    :align="labelAlign"
+    :description="description"
+    v-bind="labelAttrs"
+  >
     <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneWrapperAttrs">
-      <UText :size="nestedComponentSize" :html="description" v-bind="descriptionAttrs" />
+      <UText v-if="hasSlotContent($slots['top'])" :size="size" v-bind="descriptionTopAttrs">
+        <!-- @slot Use it to add something at the top of the file block. -->
+        <slot name="top" />
+      </UText>
 
       <div v-bind="contentWrapperAttrs">
         <!-- @slot Use it to add something before the placeholder. -->
@@ -16,7 +27,7 @@
               pill
               internal
               interactive
-              size="2xs"
+              :size="removeItemIconSize"
               :name="config.removeItemIconName"
               :data-cy="`${dataCy}-remove-item`"
               v-bind="removeItemIconAttrs"
@@ -29,23 +40,15 @@
           <template v-if="Array.isArray(currentFiles) || !currentFiles">
             <UButton
               filled
-              tag="label"
               :for="id"
+              tag="label"
               variant="thirdary"
-              :size="nestedComponentSize"
+              :size="buttonSize"
+              :icon-right="config.chooseFileIconName"
               :label="currentLocale.uploadFile"
               :data-cy="`${dataCy}-upload`"
               v-bind="buttonAttrs"
-            >
-              <template #right>
-                <UIcon
-                  internal
-                  :size="nestedComponentSize"
-                  :name="config.chooseFileIconName"
-                  v-bind="chooseFileIconAttrs"
-                />
-              </template>
-            </UButton>
+            />
 
             <input
               :id="id"
@@ -58,19 +61,25 @@
             />
           </template>
 
-          <UIcon
+          <UButton
             v-if="isValue"
             pill
-            internal
-            interactive
-            :size="nestedComponentSize"
-            :name="config.clearIconName"
+            square
+            filled
+            variant="thirdary"
+            :size="buttonSize"
+            :icon-left="config.clearIconName"
+            v-bind="clearButtonAttrs"
             :data-cy="`${dataCy}-clear`"
-            v-bind="clearIconAttrs"
             @click="onClickResetFiles"
           />
         </div>
       </div>
+
+      <UText v-if="hasSlotContent($slots['bottom'])" :size="size" v-bind="descriptionBottomAttrs">
+        <!-- @slot Use it to add something at the bottom of the file block. -->
+        <slot name="bottom" />
+      </UText>
     </div>
   </ULabel>
 </template>
@@ -116,7 +125,7 @@ const props = defineProps({
 
   /**
    * Set label placement related from the default slot.
-   * @values top, topInside, topWithDesc, left, right
+   * @values top, topInside, topWithDesc
    */
   labelAlign: {
     type: String,
@@ -218,15 +227,16 @@ const {
   labelAttrs,
   buttonAttrs,
   dropzoneWrapperAttrs,
-  descriptionAttrs,
+  descriptionTopAttrs,
+  descriptionBottomAttrs,
   contentWrapperAttrs,
-  clearIconAttrs,
-  chooseFileIconAttrs,
+  clearButtonAttrs,
   placeholderAttrs,
   inputAttrs,
   fileListAttrs,
   buttonWrapperAttrs,
   removeItemIconAttrs,
+  hasSlotContent,
 } = useAttrs(props);
 
 const i18nGlobal = tm(UInputFile);
@@ -265,16 +275,6 @@ const isValue = computed(() => {
   );
 });
 
-const nestedComponentSize = computed(() => {
-  let size = "sm";
-
-  if (props.size === "sm") size = "xs";
-  if (props.size === "md") size = "sm";
-  if (props.size === "lg") size = "md";
-
-  return size;
-});
-
 const fileList = computed(() => {
   if (Array.isArray(currentFiles.value)) {
     return currentFiles.value;
@@ -283,6 +283,26 @@ const fileList = computed(() => {
   return currentFiles.value ? [currentFiles.value] : [];
 });
 
+const removeItemIconSize = computed(() => {
+  const sizes = {
+    sm: "4xs",
+    md: "3xs",
+    lg: "2xs",
+  };
+
+  return sizes[props.size];
+});
+
+const buttonSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
 onMounted(() => {
   dropZoneRef.value.addEventListener("dragover", onDragOver);
   dropZoneRef.value.addEventListener("dragleave", onDragLeave);

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

@@ -6,9 +6,9 @@ export default /*tw*/ {
     rightSlot: "pr-0",
     leftSlot: "pl-0",
   },
-  closeIcon: "{UIcon} flex h-full items-center mr-2",
+  closeIcon: "{UIcon} flex h-full items-center",
   closeIconName: "close",
-  searchIcon: "{UIcon} mr-3",
+  searchIcon: "{UIcon}",
   searchIconName: "search",
   button: "{UButton} rounded-l-none ml-1 !ring-0 outline outline-1 outline-gray-900",
   defaultVariants: {

package/ui.form-input-search/index.stories.js

@@ -27,7 +27,7 @@ const DefaultTemplate = (args) => ({
     };
   },
   template: `
-    <UInputSearch v-bind="args">
+    <UInputSearch v-bind="args" v-model="args.modelValue">
       ${allSlotsFragment}
     </UInputSearch>
   `,
@@ -41,7 +41,7 @@ const SlotTemplate = (args) => ({
     };
   },
   template: `
-    <UInputSearch v-bind="args">
+    <UInputSearch v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || ""}
     </UInputSearch>
   `,
@@ -60,6 +60,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
       <UInputSearch
         v-for="(size, index) in sizes"
         v-bind="args"
+        v-model="args.modelValue"
         :size="size"
         :key="index"
       >

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

@@ -20,22 +20,46 @@
       <slot name="left" />
     </template>
 
-    <template #right>
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
+    <template #icon-left>
+      <!-- @slot Use it to add icon before the text. -->
+      <slot name="icon-left" />
+    </template>
 
-      <template v-if="!hasSlotContent($slots['right'])">
+    <template #icon-right>
+      <UIcon
+        internal
+        interactive
+        color="gray"
+        :name="config.closeIconName"
+        :data-cy="`${dataCy}-close`"
+        :size="iconSize"
+        v-bind="closeIconAttrs"
+        @click="onClickClear"
+      />
+
+      <!-- @slot Use it to add icon after the text. -->
+      <slot
+        name="icon-right"
+        :icon-name="config.searchIconName"
+        :icon-size="iconSize"
+        :search-button-label="searchButtonLabel"
+      >
         <UIcon
+          v-if="!searchButtonLabel"
           internal
           interactive
-          color="gray"
-          :name="config.closeIconName"
-          :data-cy="`${dataCy}-close`"
           :size="iconSize"
-          v-bind="closeIconAttrs"
-          @click="onClickClear"
+          :name="config.searchIconName"
+          :data-cy="`${dataCy}-search`"
+          v-bind="searchIconAttrs"
+          @click="onClickSearch"
         />
+      </slot>
+    </template>
 
+    <template #right>
+      <!-- @slot Use it to add something after the text. -->
+      <slot name="right">
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
@@ -43,19 +67,7 @@
           :data-cy="`${dataCy}-right`"
           @click="onClickSearch"
         />
-
-        <UIcon
-          v-else
-          internal
-          interactive
-          :size="iconSize"
-          color="grayscale"
-          :name="config.searchIconName"
-          :data-cy="`${dataCy}-search`"
-          v-bind="searchIconAttrs"
-          @click="onClickSearch"
-        />
-      </template>
+      </slot>
     </template>
   </UInput>
 </template>
@@ -197,8 +209,7 @@ const emit = defineEmits([
 
 const localValue = ref("");
 
-const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs, hasSlotContent } =
-  useAttrs(props);
+const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs } = useAttrs(props);
 
 const search = computed({
   get: () => props.modelValue,

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

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex gap-2",
+    base: "flex gap-2 w-auto",
     variants: {
       align: {
         top: "flex-col",
@@ -17,13 +17,13 @@ export default /*tw*/ {
       { align: "right", size: "sm", class: "gap-2.5" },
       { align: "right", size: "md", class: "gap-3" },
       { align: "right", size: "lg", class: "gap-3.5" },
-      { align: "left", centred: true, class: "items-center" },
-      { align: "right", centred: true, class: "items-center" },
+      { align: "left", centred: true, class: "items-center w-auto" },
+      { align: "right", centred: true, class: "items-center w-auto" },
     ],
   },
   labelWrapper: "",
   label: {
-    base: "text-gray-900 z-10 block !leading-none",
+    base: "text-gray-900 z-10 block !leading-none w-max",
     variants: {
       size: {
         sm: "text-xs",

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

@@ -5,7 +5,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       py-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
-      rounded-lg border border-gray-300 bg-white
+      rounded-md border border-gray-300 bg-white
       hover:border-gray-400 hover:transition 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
     `,
@@ -24,6 +24,7 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
+      { 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" },

package/ui.form-select/index.vue

@@ -8,8 +8,9 @@
     :description="description"
     :align="labelAlign"
     :disabled="disabled"
-    :data-cy="dataCy"
+    centred
     v-bind="labelAttrs"
+    :data-cy="dataCy"
   >
     <div
       ref="wrapperRef"
@@ -587,7 +588,7 @@ const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: "sm",
+    sm: "xs",
     md: "sm",
     lg: "md",
   };

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

@@ -7,6 +7,7 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
+      { pill: true, size: "4xs", class: "p-0.5" },
       { pill: true, size: "3xs", class: "p-1" },
       { pill: true, size: "2xs", class: "p-1" },
       { pill: true, size: "xs", class: "p-2" },
@@ -26,6 +27,7 @@ export default /*tw*/ {
     base: "fill-current outline-0",
     variants: {
       size: {
+        "4xs": "size-2.5",
         "3xs": "size-3",
         "2xs": "size-3.5",
         xs: "size-4",
@@ -55,6 +57,7 @@ export default /*tw*/ {
   icon: {
     variants: {
       size: {
+        "4xs": "size-2.5",
         "3xs": "size-3",
         "2xs": "size-3.5",
         xs: "size-4",

package/ui.image-icon/index.vue

@@ -57,7 +57,7 @@ const props = defineProps({
 
   /**
    * Icon size.
-   * @values 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
+   * @values 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
    */
   size: {
     type: String,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.220",
+  "version": "0.0.221",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3858,7 +3858,7 @@
               "description": "Icon size.",
               "value": {
                 "kind": "expression",
-                "type": "'3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'"
+                "type": "'4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'"
               },
               "default": "md"
             },
@@ -4254,7 +4254,7 @@
               "description": "Set label placement related from the default slot.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'left' | 'right'"
+                "type": "'top' | 'topInside' | 'topWithDesc'"
               },
               "default": "topInside"
             },
@@ -4366,9 +4366,17 @@
             }
           ],
           "slots": [
+            {
+              "name": "top",
+              "description": "Use it to add something at the top of the file block."
+            },
             {
               "name": "left",
               "description": "Use it to add something before the placeholder."
+            },
+            {
+              "name": "bottom",
+              "description": "Use it to add something at the bottom of the file block."
             }
           ],
           "source": {
@@ -4993,6 +5001,26 @@
               "name": "left",
               "description": "Use it to add something before the text."
             },
+            {
+              "name": "icon-left",
+              "description": "Use it to add icon before the text."
+            },
+            {
+              "name": "icon-right",
+              "scoped": true,
+              "description": "Use it to add icon after the text.",
+              "bindings": [
+                {
+                  "name": "icon-name"
+                },
+                {
+                  "name": "icon-size"
+                },
+                {
+                  "name": "search-button-label"
+                }
+              ]
+            },
             {
               "name": "right",
               "description": "Use it to add something after the text."