@indielayer/ui 1.14.3 → 1.14.5

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.14.3";
+declare const _default: "1.14.5";
 export default _default;

package/lib/version.js

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

package/package.json

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

package/src/components/checkbox/Checkbox.vue

@@ -165,7 +165,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
           </svg>
         </slot>
       </div>
-      <div :class="classes.label">
+      <div v-if="label || $slots.default" :class="classes.label">
         <span v-if="label" v-text="label"></span>
         <slot v-else></slot>
       </div>

package/src/components/datepicker/Datepicker.vue

@@ -190,7 +190,7 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
 
 <template>
   <div
-    :style="styles"
+    :style="[styles, { '--dp-clear-btn-top': !!label ? '2.70rem' : '1.2rem' }]"
     :class="[
       className,
       classes.wrapper,
@@ -336,7 +336,7 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
 }
 
 .dp--clear-btn {
-  top: 2.75rem !important;
+  top: var(--dp-clear-btn-top, 2.75rem) !important;
 }
 
 .dp__theme_dark {

package/src/components/menu/MenuItem.vue

@@ -156,6 +156,7 @@ const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, {
       v-if="checkbox"
       :model-value="computedProps.active"
       hide-footer
+      class="mr-1.5"
       skip-form-registry
       @click.stop.prevent="onItemClick($event, 'checkbox-click')"
     />

package/src/components/modal/Modal.vue

@@ -106,9 +106,11 @@ watch(value, (val) => {
   }
 })
 
-watch(() => props.modelValue, checkVisibiliy, { immediate: true })
+let initTrapTimeout: ReturnType<typeof setTimeout>
 
-async function checkVisibiliy() {
+watch(() => props.modelValue, checkVisibility, { immediate: true })
+
+async function checkVisibility() {
   const val = props.modelValue
 
   if (val) {
@@ -120,15 +122,16 @@ async function checkVisibiliy() {
 
     visible.value = val
 
-    await nextTick()
-
-    initFocusTrap(modalRef)
+    initTrapTimeout = setTimeout(() => {
+      initFocusTrap(modalRef)
+    }, 100)
 
     document.body.style.paddingRight = `${scrollbarWidth}px`
     document.body.style.overflow = 'hidden'
   } else {
     visible.value = val
     value.value = val
+    clearTimeout(initTrapTimeout)
     clearFocusTrap()
     document.body.style.paddingRight = ''
     document.body.style.overflow = 'auto'

package/src/components/select/Select.vue

@@ -547,7 +547,7 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                   >+{{ hiddenTags }}</div>
                 </div>
               </template>
-              <template v-else-if="!internalMultiple && !isEmpty(selected)">
+              <template v-else-if="!internalMultiple && !isEmpty(selected) && getLabel(selected) !== ''">
                 {{ getLabel(selected) }}
               </template>
 

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

@@ -6,7 +6,7 @@ const theme: TabTheme = {
       const c = ['transition-colors duration-150 ease-in-out whitespace-nowrap text-center']
 
       if (data.variant === 'line') c.push('py-2')
-      if (data.variant === 'block') c.push('py-1.5 px-8')
+      if (data.variant === 'block') c.push('py-1 px-8')
 
       if (props.size === 'xs') c.push('text-xs')
       else if (props.size === 'sm') c.push('text-sm')

package/src/composables/useFocusTrap.ts

@@ -31,7 +31,13 @@ export function useFocusTrap() {
   }
 
   const handleKeydown = (event: KeyboardEvent) => {
-    if (event.key !== 'Tab' || focusable.value.length === 0) return
+    if (event.key === 'Tab' && focusable.value.length === 0) {
+      event.preventDefault()
+
+      return
+    }
+
+    if (event.key !== 'Tab') return
 
     const isShiftPressed = event.shiftKey
     const currentEl = document.activeElement as HTMLElement | null

package/src/version.ts

@@ -1 +1 @@
-export default '1.14.3'
+export default '1.14.5'