vueless 0.0.712 → 0.0.714

package/package.json

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

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

@@ -295,6 +295,7 @@ const {
         <span v-if="!isValue" v-bind="placeholderAttrs" v-text="currentLocale.noFile" />
 
         <UFiles
+          v-else
           :size="size"
           v-bind="fileListAttrs"
           :file-list="fileList"
@@ -314,6 +315,7 @@ const {
               :for="elementId"
               tag="label"
               variant="thirdary"
+              :color="error ? 'red' : 'brand'"
               :right-icon="config.defaults.chooseFileIcon"
               :label="currentLocale.uploadFile"
               :disabled="disabled"
@@ -340,6 +342,7 @@ const {
             filled
             variant="thirdary"
             :disabled="disabled"
+            :color="error ? 'red' : 'brand'"
             :left-icon="config.defaults.clearIcon"
             v-bind="clearButtonAttrs"
             :data-test="`${dataTest}-clear`"

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

@@ -9,7 +9,7 @@ export default /*tw*/ {
     `,
     variants: {
       error: {
-        true: "!border-red-600",
+        true: "!border-red-600 focus-within:ring-red-600",
       },
       disabled: {
         true: "pointer-events-none bg-gray-100",
@@ -22,15 +22,17 @@ export default /*tw*/ {
     ],
   },
   dropzoneHover: "border-gray-400 border-dashed",
-  dropzoneError: "!border-red-600 border-dashed",
   descriptionTop: "{UText} text-gray-700 mb-2",
   descriptionBottom: "{UText} text-gray-700 mt-2",
   content: {
-    base: "p-3 gap-6 flex justify-between items-start relative w-full rounded-dynamic bg-brand-50",
+    base: "p-3 gap-3 flex justify-between items-start relative w-full rounded-dynamic bg-brand-50",
     variants: {
       multiple: {
         false: "items-center",
       },
+      error: {
+        true: "bg-red-50",
+      },
       disabled: {
         true: "bg-gray-200",
       },

package/ui.form-select/USelect.vue

@@ -564,20 +564,6 @@ const {
       </div>
 
       <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">
-        <span
-          v-if="hasSlotContent($slots['left']) || leftIcon"
-          ref="leftSlotWrapperRef"
-          v-bind="leftSlotAttrs"
-        >
-          <!--
-            @slot Use it to add something to the left of input.
-            @binding {string} icon-name
-          -->
-          <slot name="left" :icon-name="leftIcon">
-            <UIcon v-if="leftIcon" :name="leftIcon" internal v-bind="leftIconAttrs" />
-          </slot>
-        </span>
-
         <div v-if="multiple && localValue?.length" v-bind="selectedLabelsAttrs">
           <div
             v-for="item in localValue as Option[]"
@@ -745,6 +731,20 @@ const {
           </template>
         </template>
       </UDropdownList>
+
+      <div
+        v-if="hasSlotContent($slots['left']) || leftIcon"
+        ref="leftSlotWrapperRef"
+        v-bind="leftSlotAttrs"
+      >
+        <!--
+            @slot Use it to add something to the left of input.
+            @binding {string} icon-name
+          -->
+        <slot name="left" :icon-name="leftIcon">
+          <UIcon v-if="leftIcon" :name="leftIcon" internal v-bind="leftIconAttrs" />
+        </slot>
+      </div>
     </div>
   </ULabel>
 </template>

package/ui.form-select/config.ts

@@ -82,7 +82,7 @@ export default /*tw*/ {
   },
   leftIcon: "{UIcon} {>selectIcon}",
   rightIcon: "{UIcon} {>selectIcon}",
-  leftSlot: "pr-1.5",
+  leftSlot: "{>toggle} pl-3",
   rightSlot: "{>toggle} pr-3",
   beforeToggle: "{>toggle} cursor-auto",
   afterToggle: "{>toggle} mr-3 items-start pt-3 cursor-auto",