@indielayer/ui 1.14.2 → 1.14.4

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.14.2";
+declare const _default: "1.14.4";
 export default _default;

package/lib/version.js

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

package/package.json

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

package/src/components/badge/Badge.vue

@@ -96,7 +96,7 @@ const { styles, classes, className } = useTheme('Badge', {}, props)
       <slot></slot>
       <div
         v-if="show"
-        class="absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]"
+        class="absolute rounded-full z-10 bg-[color:var(--x-badge-bg)] pointer-events-none"
         :style="offsetStyle"
         :class="[
           positionClasses,

package/src/components/checkbox/Checkbox.vue

@@ -42,6 +42,7 @@ const elRef = ref<HTMLElement | null>(null)
 const checked = ref(false)
 
 function toggle() {
+  if (props.disabled || props.loading || props.readonly) return
   checked.value = !checked.value
 }
 
@@ -138,7 +139,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
         :aria-disabled="disabled ? 'true' : undefined"
         type="checkbox"
         class="invisible absolute"
-        :disabled="disabled || loading"
+        :disabled="disabled || loading || readonly"
         :required="required"
         v-on="listeners"
       />
@@ -149,7 +150,12 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
         ]"
       >
         <x-spinner v-if="loading" :size="size" class="absolute" />
-        <span v-else-if="indeterminate" name="check-icon" class="w-2/3 h-[2px] bg-white dark:bg-secondary-900"></span>
+        <span
+          v-else-if="indeterminate"
+          name="check-icon"
+          class="w-2/3 h-[1.5px]"
+          :class="[disabled ? 'bg-secondary-400 dark:bg-secondary-500' : 'bg-white']"
+        ></span>
         <slot v-else name="icon">
           <svg
             viewBox="0 0 20 20"
@@ -159,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/checkbox/theme/Checkbox.base.theme.ts

@@ -29,7 +29,10 @@ const theme: CheckboxTheme = {
     },
 
     icon: ({ props }) => {
-      const classes = ['fill-current text-white']
+      const classes = ['fill-current']
+
+      if (props.disabled) classes.push('text-secondary-400 dark:text-secondary-500')
+      else classes.push('text-white')
 
       if (props.size === 'lg') classes.push('h-3 w-3')
       else if (props.size === 'xl') classes.push('h-4 w-4')

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/notifications/Notifications.vue

@@ -27,6 +27,10 @@ const notificationsProps = {
     type: [Symbol, String],
     default: injectNotificationKey,
   },
+  offset: {
+    type: [String, Number],
+    default: 0,
+  },
 }
 
 const validators = {
@@ -78,7 +82,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, provide, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { ref, provide, watch, type PropType, type ExtractPublicPropTypes, computed } from 'vue'
 import { injectNotificationKey } from '../../composables/keys'
 import { useColors } from '../../composables/useColors'
 import { useCSS } from '../../composables/useCSS'
@@ -254,6 +258,8 @@ function resume(notification: NotificationEvent) {
   }
 }
 
+const offsetStyle = computed(() => `${props.offset}px`)
+
 const { styles, classes, className } = useTheme('Notifications', {}, props)
 
 defineExpose({ log, info, success, warn, warning: warn, error })
@@ -279,6 +285,9 @@ defineExpose({ log, info, success, warn, warning: warn, error })
     >
       <transition-group
         tag="ul"
+        :style="[
+          internalPosition === 'bottom' ? `padding-bottom: ${offsetStyle};` : `padding-top: ${offsetStyle};`
+        ]"
         :class="[
           classes.list,
           { 'flex-col-reverse': internalPosition }

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.2'
+export default '1.14.4'