@imaginario27/air-ui-ds 1.0.0

package/components/loaders/LoadingScreen.vue

@@ -0,0 +1,285 @@
+<template>
+    <div
+        v-if="isLoading"
+        :class="[ 
+            'w-full', 
+            isFullScreen && 'h-screen', 
+            'flex', 
+            'justify-center', 
+            'items-center',
+            'px-content-side-padding',
+            'py-4',
+            containerClass
+        ]"
+    >
+        <Loading 
+            :isLoading
+            :text="loadingText"
+            :spinnerSize
+        />
+    </div>
+    <div 
+        v-if="!isLoading && error"
+        :class="[
+            'w-full',
+            'px-content-side-padding',
+             isFullScreen ? 'py-[10vw] md:py-[20vw]' : 'px-content-side-padding py-8',
+            'flex',
+            'flex-col',
+            isSpaced ? 'gap-4' : 'gap-2',
+            'items-center',
+            'justify-center',
+            containerClass
+        ]"
+    >
+        <ContainedIcon 
+            v-if="!$slots['graphic']"
+            :color="ColorAccent.DANGER"
+            icon="mdiAlertCircleOutline"
+            :size="iconContainerSize"
+        />
+
+        <!-- Can be used to replace default content icon -->
+        <slot name="graphic" />
+
+        <div
+            :class="[
+                'flex',
+                'flex-col',
+                isSpaced ? 'gap-3' : 'gap-2',
+                'items-center',
+                'w-full',
+                'max-w-[800px]',
+            ]"
+        >
+            <h1 :class="titleClass">
+                {{ title }}
+            </h1>
+            <p :class="errorTextClass">
+                {{ error }}
+            </p>
+        </div>
+
+        <p :class="helpTextClass">
+            {{ helpText }}
+        </p>
+
+        <div 
+            :class="[
+                'w-full',
+                'flex',
+                'gap-3',
+                isSpaced ? 'mt-6' : 'mt-4',
+                'items-center',
+                'justify-center',
+                'flex-col',
+                'md:flex-row'
+            ]"
+        >
+            <template v-if="!$slots['actions']">
+                <ActionButton 
+                    v-if="hasGoBackButton"
+                    :actionType="ButtonActionType.LINK"
+                    :styleType="hasRetryButton ? ButtonStyleType.NEUTRAL_FILLED : undefined"
+                    :text="goBackText"
+                    :icon="goBackIcon"
+                    :iconPosition="IconPosition.LEFT"
+                    :size="buttonSize"
+                    :to="goBackLink"
+                    isMobileFullWidth
+                />
+
+                <template v-if="hasRetryButton">
+                    <ActionButton 
+                        v-if="!retryLocked"
+                        :text="retryButtonText"
+                        :size="buttonSize"
+                        :iconPosition="IconPosition.LEFT"
+                        icon="mdiRefresh"
+                        class="self-center"
+                        :disabled="isRetryButtonDisabled"
+                        isMobileFullWidth
+                        @click="handleRetry"
+                    />
+    
+                    <p v-else class="text-xs text-text-neutral-subtle mt-4">
+                        {{ retryLimitReachedText }}
+                    </p>
+                </template>
+            </template>
+
+            <!-- Can be used to replace default actions -->
+            <slot name="actions" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    isLoading: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    loadingText: {
+        type: String as PropType<string>,
+        default: "Loading",
+    },
+    error: {
+        type: [String, null] as PropType<string | null>,
+        default: null,
+    },
+    title: {
+        type: String as PropType<string>,
+        default: "Oops! Something went wrong!",
+    },
+    helpText: {
+        type: String as PropType<string>,
+        default: "Please try again or report the error to us. Thank you!",
+    },
+    hasGoBackButton: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    goBackText: {
+        type: String as PropType<string>,
+        default: "Go back",
+    },
+    goBackLink: {
+        type: String as PropType<string>,
+        default: "/",
+    },
+    goBackIcon: {
+        type: String as PropType<string>,
+        default: "mdiKeyboardBackspace",
+    },
+    hasRetryButton: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    retryText: {
+        type: String as PropType<string>,
+        default: 'Try again',
+    },
+    retryLimitReachedText: {
+        type: String as PropType<string>,
+        default: 'Retry limit reached. Please refresh the page or contact support.',
+    },
+    cooldownText: {
+        type: String as PropType<string>,
+        default: 'Retry in',
+    },
+    maxRetryCycles: {
+        type: Number as PropType<number>,
+        default: 2,
+    },
+    maxRetries: {
+        type: Number as PropType<number>,
+        default: 3,
+    },
+    cooldownSeconds: {
+        type: Number as PropType<number>,
+        default: 60,
+    },
+    isFullScreen: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    spinnerSize: String as PropType<LoadingSpinnerSize>,
+    iconContainerSize: {
+        type: String as PropType<IconContainerSize>,
+        default: IconContainerSize.XXL, 
+        validator: (value: IconContainerSize) => Object.values(IconContainerSize).includes(value),
+    },
+    buttonSize: String as PropType<ButtonSize>,
+    isSpaced: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    titleClass: {
+        type: String as PropType<string>,
+        default: 'font-semibold text-xl md:text-2xl text-center leading-6',
+    },
+    errorTextClass: {
+        type: String as PropType<string>,
+        default: 'text-text-neutral-subtle font-semibold text-center',
+    },
+    helpTextClass: {
+        type: String as PropType<string>,
+        default: 'text-center',
+    },
+    containerClass: {
+        type: String as PropType<string>,
+        default: "py-20",
+    },
+})
+
+// Emits
+const emit = defineEmits(['retry'])
+
+// Retry state
+const { count: retryCount, inc: incrementRetry, reset: resetRetry } = useCounter()
+const cycleCount = ref(0)
+const isCoolingDown = ref(false)
+const retryLocked = computed(() => cycleCount.value >= props.maxRetryCycles)
+const remainingSeconds = ref(props.cooldownSeconds)
+const temporarilyDisabled = ref(false)
+
+// Retry button text
+const retryButtonText = computed(() => {
+    if (isCoolingDown.value) {
+        return `${props.cooldownText} ${remainingSeconds.value}s`
+    }
+
+    return props.retryText
+})
+
+// Combined disabled state
+const isRetryButtonDisabled = computed(() =>
+    isCoolingDown.value ||
+    retryCount.value >= props.maxRetries ||
+    temporarilyDisabled.value
+)
+
+// Cooldown countdown timer
+const { pause, resume } = useIntervalFn(() => {
+    if (remainingSeconds.value <= 1) {
+        pause()
+        isCoolingDown.value = false
+        remainingSeconds.value = props.cooldownSeconds
+        resetRetry()
+        cycleCount.value++
+    } else {
+        remainingSeconds.value--
+    }
+}, 1000, { immediate: false })
+
+// Retry click handler
+const handleRetryInternal = () => {
+    if (isRetryButtonDisabled.value || retryLocked.value) return
+
+    incrementRetry()
+    emit('retry')
+
+    // UX lockout for 1s after click
+    temporarilyDisabled.value = true
+    setTimeout(() => {
+        temporarilyDisabled.value = false
+    }, 1000)
+
+    if (retryCount.value >= props.maxRetries) {
+        isCoolingDown.value = true
+        remainingSeconds.value = props.cooldownSeconds
+        resume()
+    }
+}
+
+// Debounced handler to prevent spam clicking
+const handleRetry = useDebounceFn(handleRetryInternal, 500, {
+    maxWait: 500,
+})
+
+onUnmounted(() => {
+    pause()
+})
+</script>

package/components/modals/DangerModalDialog.vue

@@ -0,0 +1,149 @@
+<template>
+    <ModalDialog 
+        :modelValue
+        :closeOnClickOutside
+        :hasCornerCloseButton
+        :cardClasses
+        @update:modelValue="updateModelValue"
+    >
+        <ModalContent class="!gap-6 items-center">   
+            <template v-if="orientation === Orientation.VERTICAL">
+                <ContainedIcon
+                    :color="ColorAccent.DANGER"
+                    :size="IconContainerSize.XL"
+                    :icon
+                />
+
+                <ModalHeaderGroup centered>
+                    <ModalTitle :title />
+                    <ModalDescription v-if="description">
+                        {{ description }}
+                    </ModalDescription>
+                </ModalHeaderGroup>
+            </template>
+            <template v-else>
+                <div class="w-full flex gap-4 flex-col sm:flex-row items-center sm:items-start">
+                    <ContainedIcon 
+                        :color="ColorAccent.DANGER"
+                        :size="IconContainerSize.LG"
+                        :icon
+                    />
+                    
+                    <ModalHeaderGroup centered class="sm:text-left">
+                        <ModalTitle :title class="sm:max-w-[450px]" />
+                        <ModalDescription v-if="description">
+                            {{ description }}
+                        </ModalDescription>
+                    </ModalHeaderGroup>
+                </div>
+            </template>
+
+            <slot />
+
+            <ModalActions 
+                v-if="showModalActions"
+                :class="[
+                    orientation === Orientation.HORIZONTAL ? 'justify-end' : '',
+                ]"
+            >
+                <ActionButton 
+                    :text="buttonCloseText"
+                    :class="[
+                        orientation === Orientation.HORIZONTAL ? 'w-full md:w-auto' : 'w-full'
+                    ]" 
+                    @click="handleClose"
+                />
+                <ActionButton 
+                    :styleType="ButtonStyleType.DELETE_FILLED"
+                    :iconPosition="buttonActionIcon ? IconPosition.LEFT : IconPosition.NONE"
+                    :icon="buttonActionIcon"
+                    :text="buttonActionText"
+                    :isLoading
+                    :loadingText
+                    :class="[
+                        orientation === Orientation.HORIZONTAL ? 'w-full md:w-auto' : 'w-full'
+                    ]"
+                    @click="handleMainAction"
+                />
+            </ModalActions>
+        </ModalContent>
+    </ModalDialog>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    modelValue: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiAlertOutline',
+    },
+    title: {
+        type: String as PropType<string>,
+        default: 'Modal title',
+    },
+    description: String as PropType<string>,
+    buttonCloseText: {
+        type: String as PropType<string>,
+        default: 'Cancel',
+    },
+    buttonActionText: {
+        type: String as PropType<string>,
+        default: 'Delete',
+    },
+    buttonActionIcon: {
+        type: String as PropType<any>,
+        default: 'mdiDeleteForeverOutline',
+    },
+    isLoading: { 
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    loadingText: { 
+        type: String as PropType<string>,
+        default: 'Processing...',
+    },
+    orientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.HORIZONTAL,
+        validator: (value: Orientation) => Object.values(Orientation).includes(value),
+    },
+    cardClasses: {
+        type: String as PropType<string>,
+        default: 'max-w-[520px]',
+    },
+    closeOnClickOutside: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasCornerCloseButton: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    showModalActions: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'close', 'action'])
+
+// Handlers
+const updateModelValue = (value: boolean) => {
+    emit('update:modelValue', value)
+}
+
+const handleClose = () => {
+    updateModelValue(false)
+    emit('close')
+}
+
+const handleMainAction = () => {
+    emit('action')
+    updateModelValue(false)
+}
+</script>

package/components/modals/InfoModalDialog.vue

@@ -0,0 +1,143 @@
+<template>
+    <ModalDialog 
+        :modelValue
+        :closeOnClickOutside
+        :hasCornerCloseButton
+        :cardClasses
+        @update:modelValue="updateModelValue"
+    >
+        <ModalContent class="!gap-6 items-center">   
+            <template v-if="orientation === Orientation.VERTICAL">
+                <ContainedIcon 
+                    :color="ColorAccent.INFO"
+                    :size="IconContainerSize.XL"
+                    :icon
+                />
+
+                <ModalHeaderGroup centered>
+                    <ModalTitle :title />
+                    <ModalDescription v-if="description">
+                        {{ description }}
+                    </ModalDescription>
+                </ModalHeaderGroup>
+            </template>
+            <template v-else>
+                <div class="w-full flex gap-4 flex-col sm:flex-row items-center sm:items-start">
+                    <ContainedIcon 
+                        :color="ColorAccent.INFO"
+                        :size="IconContainerSize.LG"
+                        :icon
+                    />
+                    
+                    <ModalHeaderGroup centered class="sm:text-left">
+                        <ModalTitle :title />
+                        <ModalDescription v-if="description">
+                            {{ description }}
+                        </ModalDescription>
+                    </ModalHeaderGroup>
+                </div>
+            </template>
+
+            <slot />
+
+            <ModalActions 
+                v-if="showModalActions"
+                :class="{
+                    'justify-end': orientation === Orientation.HORIZONTAL,
+                }"
+            >
+                <ActionButton 
+                    :text="buttonCloseText"
+                    :class="[
+                        orientation === Orientation.HORIZONTAL ? 'w-full md:w-auto' : 'w-full',
+                    ]"
+                    @click="handleClose"
+                />
+                <ActionButton 
+                    :styleType="ButtonStyleType.PRIMARY_BRAND_FILLED"
+                    :iconPosition="buttonActionIcon ? IconPosition.RIGHT : IconPosition.NONE"
+                    :icon="buttonActionIcon"
+                    :text="buttonActionText"
+                    :isLoading
+                    :loadingText
+                    :class="[
+                        orientation === Orientation.HORIZONTAL ? 'w-full md:w-auto' : 'w-full'
+                    ]"
+                    @click="handleMainAction"
+                />
+            </ModalActions>
+        </ModalContent>
+    </ModalDialog>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    modelValue: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiInformationOutline',
+    },
+    title: {
+        type: String as PropType<string>,
+        default: 'Modal title',
+    },
+    description: String as PropType<string>,
+    buttonCloseText: {
+        type: String as PropType<string>,
+        default: 'Close',
+    },
+    buttonActionText: String as PropType<string>,
+    buttonActionIcon: String as PropType<any>,
+    isLoading: { 
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    loadingText: { 
+        type: String as PropType<string>,
+        default: 'Processing...',
+    },
+    orientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.VERTICAL,
+        validator: (value: Orientation) => Object.values(Orientation).includes(value),
+    },
+    cardClasses: {
+        type: String as PropType<string>,
+        default: 'max-w-[520px]',
+    },
+    closeOnClickOutside: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasCornerCloseButton: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    showModalActions: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'close', 'action'])
+
+// Handlers
+const updateModelValue = (value: boolean) => {
+    emit('update:modelValue', value)
+}
+
+const handleClose = () => {
+    updateModelValue(false)
+    emit('close')
+}
+
+const handleMainAction = () => {
+    emit('action')
+    updateModelValue(false)
+}
+</script>

package/components/modals/ModalActions.vue

@@ -0,0 +1,22 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'gap-4',
+            'w-full',
+            reverseOnMobile ? 'flex-col-reverse md:flex-row' : 'flex-col md:flex-row'
+        ]"
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    reverseOnMobile: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+})
+</script>

package/components/modals/ModalContent.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="flex flex-col gap-5"> 
+        <slot />
+    </div>
+</template>

package/components/modals/ModalDescription.vue

@@ -0,0 +1,5 @@
+<template>
+    <p class="text-text-neutral-subtle text-sm">
+        <slot />
+    </p>
+</template>