@indielayer/ui 1.11.0 → 1.12.1

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.11.0";
+declare const _default: "1.12.1";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.11.0";
+const e = "1.12.1";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.11.0",
+  "version": "1.12.1",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",

package/src/components/modal/Modal.vue

@@ -143,6 +143,8 @@ const shouldIgnoreEvent = (event: KeyboardEvent) => {
       return Array.from(window.document.querySelectorAll(target))
         .some((el) => el === event.target || event.composedPath().includes(el))
     }
+
+    return false
   })
 }
 

package/src/components/select/Select.vue

@@ -16,7 +16,6 @@ const selectProps = {
     type: String,
     default: 'Filter by...',
   },
-  filterInputProps: Object,
   virtualList: Boolean,
   virtualListOffsetTop: Number,
   virtualListOffsetBottom: Number,
@@ -248,12 +247,13 @@ function handleOptionClick(value: string | number) {
         if (index !== -1) selected.value.splice(index, 1)
         else {
           selected.value.push(value)
-          emit('update:modelValue', selected.value)
         }
       } else {
         selected.value = [value]
       }
 
+      emit('update:modelValue', selected.value)
+
       if (props.filterable)
         setTimeout(() => {
           filterRef.value?.focus()
@@ -511,7 +511,12 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                     :outlined="!(isDisabled || options?.find((i) => i.value === value)?.disabled)"
                     :disabled="isDisabled || options?.find((i) => i.value === value)?.disabled"
                     @remove="(e: Event) => { handleRemove(e, value) }"
-                  >{{ getLabel(value) }}</x-tag>
+                  >
+                    <template #prefix>
+                      <slot name="tag-prefix" :item="options?.find((i) => i.value === value)"></slot>
+                    </template>
+                    {{ getLabel(value) }}
+                  </x-tag>
 
                   <div
                     v-if="showCountTag"
@@ -549,7 +554,6 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                     skip-form-registry
                     data-1p-ignore
                     size="sm"
-                    v-bind="filterInputProps"
                   />
                 </div>
               </slot>
@@ -599,7 +603,12 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                 :outlined="!(isDisabled || options?.find((i) => i.value === value)?.disabled)"
                 :disabled="isDisabled || options?.find((i) => i.value === value)?.disabled"
                 @remove="(e: Event) => { handleRemove(e, value) }"
-              >{{ getLabel(value) }}</x-tag>
+              >
+                <template #prefix>
+                  <slot name="tag-prefix" :item="options?.find((i) => i.value === value)"></slot>
+                </template>
+                {{ getLabel(value) }}
+              </x-tag>
             </x-popover-container>
           </template>
         </x-popover>

package/src/components/tab/theme/Tab.base.theme.ts

@@ -3,9 +3,10 @@ import type { TabTheme } from '../Tab.vue'
 const theme: TabTheme = {
   classes: {
     wrapper: ({ props, data }) => {
-      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center']
+      const c = ['transition-colors duration-150 ease-in-out whitespace-nowrap text-center']
 
-      if (data.variant === 'block') c.push('px-8')
+      if (data.variant === 'line') c.push('py-2')
+      if (data.variant === 'block') c.push('py-1.5 px-8')
 
       if (props.size === 'xs') c.push('text-xs')
       else if (props.size === 'sm') c.push('text-sm')

package/src/components/tab/theme/TabGroup.base.theme.ts

@@ -8,7 +8,7 @@ const theme: TabGroupTheme = {
       const c = ['']
 
       if (!props.fullWidth) c.push('!w-fit')
-      if (props.variant === 'block') c.push('rounded-md')
+      if (props.variant === 'block') c.push('rounded-lg')
       if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-100 dark:bg-secondary-800 p-1')
 
       return c

package/src/components/tag/Tag.vue

@@ -67,11 +67,18 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
       ]"
   >
     <span
-      v-if="removable"
-      class="max-w-full truncate pr-4"
+      class="max-w-full"
+      :class="{'pr-4': removable }"
     >
-      <slot></slot>
-      <div class="absolute right-1.5 top-0 h-full flex items-center">
+      <div class="flex items-center gap-2">
+        <slot name="prefix"></slot>
+
+        <div class="truncate">
+          <slot></slot>
+        </div>
+      </div>
+
+      <div v-if="removable" class="absolute right-1.5 top-0 h-full flex items-center">
         <x-icon
           :size="closeIconSize"
           :icon="closeIcon"
@@ -81,7 +88,5 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
         />
       </div>
     </span>
-
-    <slot v-else></slot>
   </component>
 </template>

package/src/components/upload/Upload.vue

@@ -25,6 +25,10 @@ const uploadProps = {
     default: 'POST',
   },
   withCredentials: Boolean,
+  fileFormDataName: {
+    type: String,
+    default: 'file',
+  },
 }
 
 export type UploadFile = {
@@ -65,7 +69,7 @@ const props = defineProps(uploadProps)
 
 const emit = defineEmits([...useInputtable.emits(), 'upload', 'remove'])
 
-const elRef = ref<HTMLElement | null>(null)
+const elRef = ref<HTMLInputElement | null>(null)
 
 const isUploadMode = computed(() => !!props.action)
 
@@ -202,7 +206,7 @@ async function uploadFileRequest(uploadFile: UploadFile) {
       const xhr = new XMLHttpRequest()
       const formData = new FormData()
 
-      formData.append('file', uploadFile.file)
+      formData.append(props.fileFormDataName, uploadFile.file)
 
       xhr.open(props.method, props.action, true)
 
@@ -219,14 +223,12 @@ async function uploadFileRequest(uploadFile: UploadFile) {
           const percentComplete = (event.loaded / event.total) * 100
 
           uploadFile.progress = percentComplete
-
-          console.log(`Upload progress: ${percentComplete}%`)
         }
       })
 
       // Event listener when upload is complete
       xhr.addEventListener('load', () => {
-        if (xhr.status === 200) {
+        if (xhr.status >= 200 && xhr.status < 300) {
           uploadFile.completed = true
           try {
             uploadFile.response = JSON.parse(xhr.responseText)
@@ -267,13 +269,20 @@ async function upload() {
   validate(modelValue.value)
 }
 
+function reset() {
+  errorInternal.value = ''
+  isFirstValidation.value = true
+  modelValue.value = []
+
+  if (elRef.value) elRef.value.value = ''
+}
+
 const {
   errorInternal,
   hideFooterInternal,
   isInsideForm,
   inputListeners,
   isFirstValidation,
-  reset,
   validate,
   setError,
 } = useInputtable(props, { focus, emit })

package/src/version.ts

@@ -1 +1 @@
-export default '1.11.0'
+export default '1.12.1'