vueless 0.0.462 → 0.0.463

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.462",
+  "version": "0.0.463",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

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

@@ -21,22 +21,15 @@
 
         <span v-if="!isValue" v-bind="placeholderAttrs" v-text="currentLocale.noFile" />
 
-        <UFiles :size="size" v-bind="fileListAttrs" :file-list="fileList">
+        <UFiles
+          :size="size"
+          v-bind="fileListAttrs"
+          :file-list="fileList"
+          :removable="multiple && !disabled"
+          @remove="onClickRemoveItem"
+        >
           <template #right="{ file }">
-            <UButton
-              v-if="props.multiple && !disabled"
-              round
-              filled
-              square
-              no-ring
-              variant="thirdary"
-              :size="removeItemButtonSize"
-              :left-icon="config.defaults.removeItemIcon"
-              :disabled="disabled"
-              v-bind="removeItemButtonAttrs"
-              :data-test="`${dataTest}-remove-item`"
-              @click.stop.prevent="onClickRemoveItem(file.id)"
-            />
+            <slot name="right" :file="file" />
           </template>
         </UFiles>
 
@@ -254,7 +247,6 @@ const {
   inputAttrs,
   fileListAttrs,
   buttonsAttrs,
-  removeItemButtonAttrs,
   hasSlotContent,
 } = useAttrs(props);
 
@@ -299,16 +291,6 @@ const fileList = computed(() => {
   return currentFiles.value ? [currentFiles.value] : [];
 });
 
-const removeItemButtonSize = computed(() => {
-  const sizes = {
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-  };
-
-  return sizes[props.size];
-});
-
 const buttonSize = computed(() => {
   const sizes = {
     sm: "xs",

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

@@ -60,7 +60,6 @@ export default /*tw*/ {
     },
   },
   clearButton: "{UButton}",
-  removeItemButton: "{UButton} ml-2",
   input: "sr-only",
   i18n: {
     sizeError: "File size is too big.",
@@ -78,6 +77,5 @@ export default /*tw*/ {
     /* icons */
     chooseFileIcon: "attach_file",
     clearIcon: "close",
-    removeItemIcon: "close",
   },
 };

package/ui.text-file/UFile.vue

@@ -22,7 +22,21 @@
       </div>
     </slot>
 
-    <slot name="right" :file="{ elementId, label, url, imageUrl }" />
+    <slot name="right" :file="{ elementId, label, url, imageUrl }">
+      <UButton
+        v-if="removable"
+        round
+        filled
+        square
+        no-ring
+        variant="thirdary"
+        :size="removeButtonSize"
+        :icon="config.defaults.removeIcon"
+        v-bind="removeButtonAttrs"
+        :data-test="`${dataTest}-remove-item`"
+        @click.stop.prevent="onRemove"
+      />
+    </slot>
   </ULink>
 </template>
 
@@ -31,6 +45,7 @@ import { computed, ref, useId } from "vue";
 
 import ULink from "../ui.button-link/ULink.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
+import UButton from "../ui.button/UButton.vue";
 
 import { getDefault } from "../utils/utilUI.js";
 
@@ -82,6 +97,14 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Show remove button.
+   */
+  removable: {
+    type: Boolean,
+    default: false,
+  },
+
   /**
    * Component config object.
    */
@@ -99,12 +122,27 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits([
+  /**
+   * Triggers when remove button is clicked.
+   * @property {string} fileId
+   */
+  "remove",
+]);
+
 const focus = ref(false);
 
 const elementId = props.id || useId();
 
-const { config, fileAttrs, bodyAttrs, fileIconAttrs, fileLabelAttrs, fileImageAttrs } =
-  useAttrs(props);
+const {
+  config,
+  fileAttrs,
+  bodyAttrs,
+  fileIconAttrs,
+  fileLabelAttrs,
+  fileImageAttrs,
+  removeButtonAttrs,
+} = useAttrs(props);
 
 const iconSize = computed(() => {
   const sizes = {
@@ -116,6 +154,20 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
+const removeButtonSize = computed(() => {
+  const sizes = {
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
+  };
+
+  return sizes[props.size];
+});
+
+function onRemove() {
+  emit("remove", props.id);
+}
+
 function onFocus() {
   focus.value = true;
 }

package/ui.text-file/config.js

@@ -13,9 +13,11 @@ export default /*tw*/ {
   fileImage: "rounded-sm max-w-7",
   fileIcon: "{UIcon}",
   fileLabel: "{ULink}",
+  removeButton: "{UButton} ml-2",
   defaults: {
     size: "md",
     /* icons */
     fileIcon: "description",
+    removeIcon: "close",
   },
 };

package/ui.text-files/UFiles.vue

@@ -17,8 +17,10 @@
           :url="file.url"
           :image-url="file.imageUrl"
           :size="size"
+          :removable="removable"
           v-bind="itemAttrs"
           :data-test="`${dataTest}-item`"
+          @remove="onRemoveFile"
         >
           <template #left="{ file: currentFile }">
             <!-- @slot Use it to add something left.
@@ -96,6 +98,14 @@ const props = defineProps({
     default: getDefault(defaultConfig, UFiles).size,
   },
 
+  /**
+   * Show remove button for each file
+   */
+  removable: {
+    type: Boolean,
+    default: false,
+  },
+
   /**
    * Component config object.
    */
@@ -113,6 +123,14 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits([
+  /**
+   * Triggers when remove button is clicked.
+   * @property {string} fileId
+   */
+  "remove",
+]);
+
 const { filesLabelAttrs, itemsAttrs, itemAttrs } = useAttrs(props);
 
 const formattedFileList = computed(() =>
@@ -125,4 +143,8 @@ const formattedFileList = computed(() =>
     };
   }),
 );
+
+function onRemoveFile(fileId) {
+  emit("remove", fileId);
+}
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.462",
+  "version": "0.0.463",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4073,6 +4073,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "removable",
+              "description": "Show remove button.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "config",
               "description": "Component config object.",
@@ -4092,6 +4101,20 @@
               "default": "\"\""
             }
           ],
+          "events": [
+            {
+              "name": "remove",
+              "description": "Triggers when remove button is clicked.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "fileId"
+                }
+              ]
+            }
+          ],
           "slots": [
             {
               "name": "left",
@@ -4175,6 +4198,15 @@
               },
               "default": "md"
             },
+            {
+              "name": "removable",
+              "description": "Show remove button for each file",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "config",
               "description": "Component config object.",
@@ -4194,6 +4226,20 @@
               "default": "\"\""
             }
           ],
+          "events": [
+            {
+              "name": "remove",
+              "description": "Triggers when remove button is clicked.",
+              "properties": [
+                {
+                  "type": [
+                    "string"
+                  ],
+                  "name": "fileId"
+                }
+              ]
+            }
+          ],
           "slots": [
             {
               "name": "default",
@@ -4970,6 +5016,15 @@
               "name": "left",
               "description": "Use it to add something before the placeholder."
             },
+            {
+              "name": "right",
+              "scoped": true,
+              "bindings": [
+                {
+                  "name": "file"
+                }
+              ]
+            },
             {
               "name": "bottom",
               "description": "Use it to add something below the component content."