@saasmakers/ui 2.0.70 → 2.0.72

package/app/components/bases/BaseChip.vue

@@ -2,23 +2,23 @@
 import type { BaseChip } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseChip>(), {
-  active: false,
-  activeHighlight: 'gray',
-  ariaLabel: undefined,
-  ariaSelected: undefined,
-  as: 'button',
-  disabled: false,
-  hoverable: false,
-  icon: undefined,
-  iconLeading: false,
-  iconSize: undefined,
-  id: undefined,
-  maxWidth: false,
-  normalCase: false,
-  removable: false,
-  role: undefined,
-  text: '',
-  variant: 'outline',
+  'active': false,
+  'activeHighlight': 'gray',
+  'aria-label': undefined,
+  'aria-selected': undefined,
+  'as': 'button',
+  'disabled': false,
+  'hoverable': false,
+  'icon': undefined,
+  'iconLeading': false,
+  'iconSize': undefined,
+  'id': undefined,
+  'maxWidth': false,
+  'normalCase': false,
+  'removable': false,
+  'role': undefined,
+  'text': '',
+  'variant': 'outline',
 })
 
 const emit = defineEmits<{
@@ -86,8 +86,8 @@ function onMouseEnter(event: MouseEvent) {
       'base-border border-dashed px-2 py-1 bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300': variant === 'dashed' && active && activeHighlight === 'gray',
       'base-highlight-indigo border-indigo-600/35 border-dashed px-2 py-1 text-gray-900 dark:text-gray-100': variant === 'dashed' && active && activeHighlight === 'indigo',
     }"
-    :aria-label="ariaLabel"
-    :aria-selected="ariaSelected"
+    :aria-label="props['aria-label']"
+    :aria-selected="props['aria-selected']"
     :disabled="as === 'button' ? disabled : undefined"
     :role="role"
     :type="as === 'button' ? 'button' : undefined"

package/app/composables/useDialog.ts

@@ -67,28 +67,10 @@ export default function useDialog(
     }
   }
 
-  watch(visible, async (isVisible) => {
+  watch(visible, (isVisible) => {
     if (import.meta.client && isVisible) {
       lockBodyScroll()
-
-      await nextTick()
-
-      if (panelRef.value) {
-        const focusableElements = getFocusableElements(panelRef.value)
-        const autofocusTarget = panelRef.value.querySelector<HTMLElement>('[data-autofocus]')
-
-        if (autofocusTarget) {
-          autofocusTarget.focus()
-        }
-        else if (focusableElements.length > 0) {
-          focusableElements[0].focus()
-        }
-        else {
-          panelRef.value.focus()
-        }
-
-        window.addEventListener('keydown', onFocusTrap)
-      }
+      window.addEventListener('keydown', onFocusTrap)
     }
   }, { immediate: true })
 

package/app/types/bases.d.ts

@@ -119,23 +119,23 @@ export interface BaseChart {
 export type BaseChartType = 'bar' | 'line' | 'pie'
 
 export interface BaseChip {
-  active?: boolean
-  activeHighlight?: BaseChipActiveHighlight
-  ariaLabel?: string
-  ariaSelected?: boolean
-  as?: BaseChipAs
-  disabled?: boolean
-  hoverable?: boolean
-  icon?: string
-  iconLeading?: boolean
-  iconSize?: BaseSize
-  id?: string
-  maxWidth?: boolean
-  normalCase?: boolean
-  removable?: boolean
-  role?: string
-  text?: BaseTextText
-  variant?: BaseChipVariant
+  'active'?: boolean
+  'activeHighlight'?: BaseChipActiveHighlight
+  'aria-label'?: string
+  'aria-selected'?: boolean
+  'as'?: BaseChipAs
+  'disabled'?: boolean
+  'hoverable'?: boolean
+  'icon'?: string
+  'iconLeading'?: boolean
+  'iconSize'?: BaseSize
+  'id'?: string
+  'maxWidth'?: boolean
+  'normalCase'?: boolean
+  'removable'?: boolean
+  'role'?: string
+  'text'?: BaseTextText
+  'variant'?: BaseChipVariant
 }
 
 export type BaseChipActiveHighlight = 'gray' | 'indigo'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.70",
+  "version": "2.0.72",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",