@imaginario27/air-ui-ds 1.0.13 → 1.0.15

package/components/forms/fields/SearchField.vue

@@ -40,7 +40,7 @@
             <!-- Icon -->
             <span class="text-icon-neutral-subtler">
                 <MdiIcon 
-                    icon="mdiMagnify" 
+                    :icon
                     size="20" 
                     preserveAspectRatio="xMidYMid meet"
                 />
@@ -100,6 +100,10 @@ const props = defineProps({
         default: 'Search', 
     },
     helpText: String as PropType<string>,
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiMagnify',
+    },
     size: {
         type: String as PropType<InputSize>,
         default: InputSize.MD,

package/components/forms/fields/SelectField.vue

@@ -142,6 +142,10 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    showLoadingState: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
     isLoading: {
         type: Boolean as PropType<boolean>,
         default: true,
@@ -154,10 +158,6 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'Options are being loaded',
     },
-    showLoadingState: {
-        type: Boolean as PropType<boolean>,
-        default: true,
-    },
 })
 
 // Emits

package/components/forms/fields/SwitchField.vue

@@ -125,10 +125,7 @@ const props = defineProps({
     label: String as PropType<string>,
     legend: String as PropType<string>,
     helpText: String as PropType<string>,
-    required: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-    },
+    
     modelValue: {
         type: Boolean as PropType<boolean>,
         default: false,
@@ -141,6 +138,10 @@ const props = defineProps({
         type: String as PropType<string>,
         default: '',
     },
+    required: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
     disabled: {
         type: Boolean as PropType<boolean>,
         default: false,

package/components/forms/fields/TextareaField.vue

@@ -123,7 +123,7 @@ const props = defineProps({
         default: false,
     },
     autocomplete: {
-        type: String as PropType<'on' | 'off'>,
+        type: String as PropType<string>,
         default: 'off',
     },
     autofocus: {

package/components/forms/fields/ToggleButtonsGroupField.vue

@@ -49,15 +49,15 @@ defineProps({
     label: String as PropType<string>,
     helpText: String as PropType<string>,
     buttons: Array as PropType<ToggleButton[]>,
-    disabled: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-    },
     modelValue: {
         type: String as PropType<string>,
         required: true,
     },
     groupStyle: String as PropType<ToggleButtonGroupStyle>,
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
 })
 
 // Emits

package/components/forms/fields/radio/RadioButtonField.vue

@@ -119,19 +119,19 @@ const props = defineProps({
         type: String as PropType<string>,
         required: true,
     },
+    label: String as PropType<string>,
+    helpText: String as PropType<string>,
     value: { // Value of the radio button
         type: [String, Number, Boolean] as PropType<string | number | boolean>,
         required: true,
     },
-    label: String as PropType<string>,
-    helpText: String as PropType<string>,
     icon: {
         type: String as PropType<any>,
         default: 'mdiHelp',
     },
     type: {
         type: String as PropType<
-            ColorAccent.INFO | ColorAccent.SUCCESS | ColorAccent.DANGER | ColorAccent.PRIMARY_BRAND | ColorAccent.SECONDARY_BRAND
+            ColorAccent.INFO | ColorAccent.WARNING| ColorAccent.SUCCESS | ColorAccent.DANGER | ColorAccent.PRIMARY_BRAND | ColorAccent.SECONDARY_BRAND
         >,
         default: ColorAccent.PRIMARY_BRAND,
         validator: (value: ColorAccent) => [

package/components/forms/fields/radio/RadioGroupField.vue

@@ -72,7 +72,6 @@
 </template>
 
 <script setup lang="ts">
-
 // Props
 const props = defineProps({
     label: String,
@@ -144,7 +143,6 @@ const runValidation = () => {
     emit('update:error', result ?? '')
 }
 
-
 // Watchers
 // Watch for changes in local selectedOption and emit upward
 watch(

package/composables/useTableOfContents.ts

@@ -1,5 +1,4 @@
 export const useTableOfContents = () => {
-    // Tracks the currently active heading
     const activeId = ref<string | null>(null)
     const route = useRoute()
 
@@ -26,21 +25,37 @@ export const useTableOfContents = () => {
         const headings = document.querySelectorAll('h2, h3')
         headings.forEach((heading) => observer!.observe(heading))
 
-        // First heading is active by default when the page loads
         if (headings.length > 0) {
             const firstHeading = headings[0] as HTMLElement
             activeId.value = firstHeading.id ?? null
         }
     }
 
+    const scrollToHash = () => {
+        if (route.hash) {
+            const target = document.getElementById(route.hash.slice(1))
+            if (target) {
+                target.scrollIntoView({ behavior: 'smooth' })
+            }
+        }
+    }
+
+    const setupObserver = () => {
+        nextTick(() => {
+            initObserver()
+            scrollToHash()
+        })
+    }
+
+    onMounted(() => {
+        setupObserver()
+    })
+
     watch(
         () => route.path,
         () => {
-            nextTick(() => {
-                initObserver()
-            })
-        },
-        { immediate: true }
+            setupObserver()
+        }
     )
 
     onBeforeUnmount(() => {
@@ -48,4 +63,4 @@ export const useTableOfContents = () => {
     })
 
     return { activeId }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.0.13",
+    "version": "1.0.15",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",
@@ -19,7 +19,7 @@
         "postinstall": "nuxt prepare",
         "test": "vitest",
         "generate-theme": "ts-node scripts/generate-theme.ts",
-        "update-theme-colors": "ts-node app/scripts/update-ui-theme-colors.ts",
+        "update-theme-colors": "ts-node scripts/update-ui-theme-colors.ts",
         "typecheck": "vue-tsc --noEmit -p tsconfig.typecheck.json"
     },
     "dependencies": {