@indielayer/ui 1.14.1 → 1.14.3

package/lib/version.d.ts

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

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.14.1",
+  "version": "1.14.3",
   "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"

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/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/tag/theme/Tag.base.theme.ts

@@ -31,11 +31,11 @@ const theme: TagTheme = {
 
     return css.variables({
       bg: color[100],
-      text: color[600],
-      border: color[600],
+      text: color[800],
+      border: color[700],
       dark: {
         bg: color[600],
-        border: color[400],
+        border: color[500],
         text: color[100],
       },
     })

package/src/components/tooltip/Tooltip.vue

@@ -20,7 +20,7 @@ import XPopover from '../../components/popover/Popover.vue'
 import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
 import { type Placement } from 'floating-vue'
 
-const props = defineProps(tooltipProps)
+defineProps(tooltipProps)
 </script>
 
 <template>

package/src/composables/useFocusTrap.ts

@@ -1,4 +1,4 @@
-import { onUnmounted, unref, nextTick, watch, ref, type Ref, type ComponentPublicInstance } from 'vue'
+import { onUnmounted, unref, nextTick, ref, type Ref, type ComponentPublicInstance } from 'vue'
 
 const focusableQuery = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])'
 
@@ -77,18 +77,16 @@ export function useFocusTrap() {
 
     focusable.value[idx]?.focus()
 
+    document.removeEventListener('keydown', handleKeydown)
+    observer?.disconnect()
+
     document.addEventListener('keydown', handleKeydown)
-    observer = new MutationObserver(() => getFocusableElements(currentTarget))
-    const el = getEl(currentTarget)
 
-    if (el) observer.observe(el, { childList: true, subtree: true })
+    const el = getEl(currentTarget)
 
-    // If targetRef is a Ref, watch for changes
-    if (typeof targetRef === 'object' && targetRef !== null && 'value' in targetRef) {
-      watch(targetRef, (newVal) => {
-        clearFocusTrap()
-        if (newVal !== null) initFocusTrap(targetRef, options)
-      })
+    if (el) {
+      observer = new MutationObserver(() => getFocusableElements(currentTarget))
+      observer.observe(el, { childList: true, subtree: true })
     }
   }
 
@@ -100,6 +98,10 @@ export function useFocusTrap() {
       prevActiveElement.focus()
     }
     currentTarget = null
+    focusable.value = []
+    firstFocusableEl = null
+    lastFocusableEl = null
+    prevActiveElement = null
   }
 
   onUnmounted(() => {

package/src/version.ts

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