@imaginario27/air-ui-ds 1.0.14 → 1.0.16

package/components/buttons/ActionButton.vue

@@ -47,11 +47,11 @@
                     v-if="icon && !svgIcon"
                     :icon
                     preserveAspectRatio="xMidYMid meet"
-                    :class="iconSizeClass"
+                    :class="[iconSizeClass, iconClass ]"
                 />
                 <span
                     v-else-if="svgIcon"
-                    :class="iconSizeClass"
+                    :class="[iconSizeClass, iconClass ]"
                 >
                     <SVGImage
                         :src="svgIcon"
@@ -70,11 +70,11 @@
                     v-if="icon"
                     :icon="icon"
                     preserveAspectRatio="xMidYMid meet"
-                    :class="iconSizeClass"
+                    :class="[iconSizeClass, iconClass]"
                 />
                 <span
                     v-else-if="svgIcon"
-                    :class="iconSizeClass"
+                    :class="[iconSizeClass, iconClass]"
                 >
                     <SVGImage
                         :src="svgIcon"
@@ -117,6 +117,7 @@ const props = defineProps({
         type: String as PropType<string>,
         default: 'Button text'
     },
+    textClass: String as PropType<string>,
     size: {
         type: String as PropType<ButtonSize>,
         default: ButtonSize.LG,
@@ -136,6 +137,7 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    iconClass: String as PropType<string>,
     disabled: {
         type: Boolean as PropType<boolean>,
         default: false,
@@ -169,7 +171,6 @@ const props = defineProps({
         default: 'Processing...',
     },
     id: String as PropType<string>,
-    textClass: String as PropType<string>,
 })
 
 // Emits

package/components/buttons/ActionIconButton.vue

@@ -22,11 +22,11 @@
             v-if="icon && !svgIcon"
             :icon
             preserveAspectRatio="xMidYMid meet"
-            :class="iconSizeClass"
+            :class="[iconSizeClass, iconClass]"
         />
         <span
             v-else-if="svgIcon"
-            :class="iconSizeClass"
+            :class="[iconSizeClass, iconClass]"
         >
             <SVGImage
                 :src="svgIcon"
@@ -77,6 +77,7 @@ const props = defineProps({
         type: Boolean as PropType<boolean>,
         default: false
     },
+    iconClass: String as PropType<string>,
     disabled: {
         type: Boolean as PropType<boolean>,
         default: false,

package/components/buttons/CopyButton.vue

@@ -0,0 +1,158 @@
+<template>
+    <ActionIconButton 
+        v-if="buttonType === ButtonType.ACTION_ICON_BUTTON"
+        :styleType
+        :size
+        :icon="currentCopyButtonIcon"
+        :iconClass="currentIconClass"
+        :disabled
+        @click="handleCopy"
+    />
+    <ActionButton 
+        v-else
+        :styleType
+        :size
+        :text="currentCopyButtonText"
+        :icon="currentCopyButtonIcon"
+        :iconPosition
+        :iconClass="currentIconClass"
+        :disabled
+        @click="handleCopy"
+    />
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    textToCopy: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    copySuccessText: {
+        type: String as PropType<string>,
+        default: 'Copied to clipboard!',
+    },
+    copyErrorText: {
+        type: String as PropType<string>,
+        default: 'Failed to copy to clipboard.',
+    },
+    showToast: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    resetAfter: {
+        type: Number as PropType<number>,
+        default: 1500,
+    },
+    buttonType: {
+        type: String as PropType<ButtonType>,
+        default: ButtonType.ACTION_ICON_BUTTON,
+        validator: (value: ButtonType) => Object.values(ButtonType).includes(value),
+    },
+    styleType: {
+    type: String as PropType<
+        ButtonStyleType.NEUTRAL_FILLED
+        | ButtonStyleType.NEUTRAL_OUTLINED
+        | ButtonStyleType.NEUTRAL_TRANSPARENT
+        | ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE
+        | ButtonStyleType.PRIMARY_BRAND_FILLED
+        | ButtonStyleType.PRIMARY_BRAND_SOFT
+        | ButtonStyleType.PRIMARY_BRAND_TRANSPARENT
+        | ButtonStyleType.SECONDARY_BRAND_FILLED
+    >,
+    default: ButtonStyleType.NEUTRAL_OUTLINED,
+        validator: (value: unknown) =>
+            typeof value === 'string' &&
+            [
+                ButtonStyleType.NEUTRAL_FILLED,
+                ButtonStyleType.NEUTRAL_OUTLINED,
+                ButtonStyleType.NEUTRAL_TRANSPARENT,
+                ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE,
+                ButtonStyleType.PRIMARY_BRAND_FILLED,
+                ButtonStyleType.PRIMARY_BRAND_SOFT,
+                ButtonStyleType.PRIMARY_BRAND_TRANSPARENT,
+                ButtonStyleType.SECONDARY_BRAND_FILLED,
+            ].includes(value as ButtonStyleType),
+    },
+    text: {
+        type: String as PropType<string>,
+        default: 'Copy'
+    },
+    size: {
+        type: String as PropType<ButtonSize>,
+        default: ButtonSize.SM,
+        validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: "mdiContentCopy",
+    },
+    iconPosition: {
+        type: String as PropType<IconPosition>,
+        default: IconPosition.RIGHT,
+        validator: (value: IconPosition) => Object.values(IconPosition).includes(value),
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// States
+const currentCopyButtonIcon = ref<any>(props.icon)
+const currentCopyButtonText = ref<string>(props.text)
+const currentIconClass = ref<string | undefined>(undefined)
+
+// Emits
+const emit = defineEmits(['success', 'error'])
+
+// Initialize toast
+const { $toast } = useNuxtApp()
+
+// Methods
+const handleCopy = useThrottleFn(
+    async () => {
+        const success = await copyToClipboard(props.textToCopy)
+
+        if (success) {
+            currentCopyButtonIcon.value = 'mdiCheck'
+            currentCopyButtonText.value = props.copySuccessText
+
+            if (
+                props.styleType === ButtonStyleType.NEUTRAL_OUTLINED ||
+                props.styleType === ButtonStyleType.NEUTRAL_TRANSPARENT ||
+                props.styleType === ButtonStyleType.NEUTRAL_TRANSPARENT_SUBTLE
+            ) {
+                currentIconClass.value = 'text-icon-success'
+            }
+
+            if (props.showToast) {
+                $toast.success(props.copySuccessText, {
+                    toastId: 'copy-button-success',
+                })
+            }
+
+            emit('success')
+        } else {
+            currentCopyButtonIcon.value = 'mdiAlertCircleOutline'
+            currentCopyButtonText.value = props.copyErrorText
+
+            if (props.showToast) {
+                $toast.error(props.copyErrorText, {
+                    toastId: 'copy-button-error',
+                })
+            }
+
+            emit('error')
+        }
+
+        // Reset UI after delay
+        setTimeout(() => {
+            currentCopyButtonIcon.value = props.icon
+            currentCopyButtonText.value = props.text
+            currentIconClass.value = undefined
+        }, props.resetAfter)
+    },
+    props.resetAfter,
+    true, // trailing only
+)
+</script>

package/components/forms/DataDetailsFieldGroup.vue

@@ -4,7 +4,7 @@
             'flex',
             'flex-col',
             'gap-4',
-            dividedRows && '!gap-0 divide-y divide-border-neutral-subtle border-b border-border-neutral-subtle'
+            'mt-2',
         ]"
     >
     <h3
@@ -12,7 +12,6 @@
             'form-field-group-title',
             'font-semibold',
             'text-text-neutral-subtle',
-            dividedRows && 'mb-4'
         ]"
     >
             {{ title }}
@@ -27,9 +26,5 @@ defineProps({
         type: String as PropType<string>,
         default: 'Group title',
     },
-    dividedRows: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-    },
 })
 </script>

package/components/forms/FormFieldGroup.vue

@@ -4,7 +4,7 @@
             'flex',
             'flex-col',
             'gap-4',
-            dividedRows && '!gap-0 divide-y divide-border-neutral-subtle border-b border-border-neutral-subtle'
+            'mt-2',
         ]"
     >
     <h3
@@ -12,7 +12,6 @@
             'form-field-group-title',
             'font-semibold',
             'text-text-neutral-subtle',
-            dividedRows && 'mb-4'
         ]"
     >
             {{ title }}
@@ -27,9 +26,5 @@ defineProps({
         type: String as PropType<string>,
         default: 'Group title',
     },
-    dividedRows: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-    },
 })
 </script>

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/components/layouts/headers/CompactHeader.vue

@@ -23,7 +23,7 @@
                     'bg-background-surface/30 dark:bg-background-surface/85',
                 ],
                 hasBorder && 'border-b border-border-default',
-                innerContainerClass,
+                headerClass,
             ]"
         >
             <!-- Logo -->
@@ -154,10 +154,10 @@
 
 <script setup lang="ts">
 // Props
-defineProps({
-    pageTitleType: {
-        type: String as PropType<PageTitleType>,
-        default: PageTitleType.SIMPLE,
+const props = defineProps({
+    pageTitleFormat: {
+        type: String as PropType<PageTitleFormat>,
+        default: PageTitleFormat.SIMPLE,
     },
     navMenuItems: {
         type: Array as PropType<MenuItem[]>,
@@ -206,7 +206,7 @@ defineProps({
         type: String as PropType<string>,
         default: 'lg:hidden min-w-[280px]'
     },
-    innerContainerClass: String as PropType<string>,
+    headerClass: String as PropType<string>,
 })
 
 // Composables
@@ -221,6 +221,6 @@ const currentPageTitle = computed<string>(() =>
 
 // Dynamically set the page title
 useHead(() => ({
-    title: pageTitle(currentPageTitle.value, App.NAME),
+    title: pageTitle(currentPageTitle.value, App.NAME, props.pageTitleFormat),
 }))
 </script>

package/components/layouts/headers/{PageHeader.vue → ContentPageHeader.vue}

@@ -8,7 +8,7 @@
             hasSidePadding && 'px-content-side-padding-mobile md:px-content-side-padding',
             'pt-12',
             'pb-8',
-            'border-b border-border-default'
+            hasSeparator && 'border-b border-border-default'
         ]"
     >
         <NavLink 
@@ -43,7 +43,7 @@
         </h1>
 
         <p 
-            v-if="pageDescription || description"
+            v-if="showDescription && (pageDescription || description)"
             class="text-text-neutral-subtle text-lg max-w-[800px]"
         >
             {{ description ? description : pageDescription }}
@@ -60,13 +60,14 @@ defineProps({
     },
     title: String as PropType<string>,
     overtitle: String as PropType<string>,
-    overtitleClass: String as PropType<string>,
-    description: String as PropType<string>,
     isOverTitleUppercase: Boolean as PropType<boolean>,
-    hasSidePadding: {
+    overtitleClass: String as PropType<string>,
+    showDescription: {
         type: Boolean as PropType<boolean>,
         default: true,
     },
+    description: String as PropType<string>,
+    
     hasGoBackLink: {
         type: Boolean as PropType<boolean>,
         default: false,
@@ -79,6 +80,14 @@ defineProps({
         type: String as PropType<string>,
         default: '',
     },
+    hasSeparator: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    hasSidePadding: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
 })
 
 // Page title

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/models/enums/buttons.ts

@@ -36,3 +36,8 @@ export enum ButtonPaginationStyle {
     BUTTON = 'button',
     OVERLINE = 'overline',
 }
+
+export enum ButtonType {
+    ACTION_BUTTON = 'action-button',
+    ACTION_ICON_BUTTON = 'action-icon-button',
+}

package/models/enums/notifications.ts

@@ -0,0 +1,4 @@
+export enum NotificationType {
+    INLINE = 'inline',
+    TOAST = 'toast',
+}

package/models/enums/pages.ts

@@ -1,7 +1,7 @@
 export enum PageTitleType {
     SIMPLE = 'simple',
-    WITH_OVERTITLE = 'withOvertitle',
-    WITH_BREADCRUMBS = 'withBreadcrumbs',
+    WITH_OVERTITLE = 'with-overtitle',
+    WITH_BREADCRUMBS = 'with-breadcrumbs',
 }
 
 export enum PageTitleFormat {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.0.14",
+    "version": "1.0.16",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",