@imaginario27/air-ui-ds 1.0.0

package/components/pagination/ButtonPagination.vue

@@ -0,0 +1,274 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'justify-between',
+            'items-center',
+            'gap-3',
+            'flex-col-reverse',
+            'lg:flex-row',
+            'w-full'
+        ]"
+    >
+        <div
+            :class="[
+                'flex',
+                'items-center',
+                'justify-between',
+                'gap-4',
+                'w-full'
+            ]"
+        >
+            <p class="text-text-neutral-subtle text-xs xs:text-sm">
+                {{ renderedResultsText }}
+            </p>
+            <RowsPerPage 
+                v-model="itemsPerPage" 
+                :rowsLabel="rowsPerPageLabel"
+                :rowsOptions="rowsPerPageOptions"
+                class="flex lg:hidden" 
+            /> <!-- Mobile position -->
+        </div>
+
+        <div 
+            v-if="totalItems > 5"
+            :class="[
+                'flex',
+                'gap-6',
+                'flex-col',
+                'w-full',
+                'lg:flex-row',
+                'lg:w-auto'
+            ]"
+        >
+            <RowsPerPage 
+                v-if="showRowsPerPage"
+                v-model="itemsPerPage"
+                :rowsLabel="rowsPerPageLabel"
+                :rowsOptions="rowsPerPageOptions"
+                class="hidden lg:flex" 
+            />
+            <nav 
+                v-if="totalItems > itemsPerPage"
+                :class="[
+                    'flex',
+                    styleType === ButtonPaginationStyle.BUTTON && 'border border-border-default rounded',
+                    'overflow-hidden'
+                ]"
+            >
+                <!-- Previous Button -->
+                <PaginationButton 
+                    :styleType
+                    :disabled="modelValue === 1" 
+                    @click="goToPreviousPage"
+                >
+                    <MdiIcon 
+                        icon="mdiChevronLeft"
+                        size="20px"
+                        preserveAspectRatio="xMidYMid meet"
+                        class="text-icon-neutral-subtle"
+                    />
+                </PaginationButton>
+
+                <!-- Pagination Button Loop -->
+                <PaginationButton
+                    v-for="page in visiblePages"
+                    :key="page"
+                    :styleType
+                    :class="[
+                        styleType === ButtonPaginationStyle.BUTTON && 'border border-border-default',
+                        page === modelValue ? [
+                            styleType === ButtonPaginationStyle.BUTTON && 'bg-background-primary-brand-active',
+                            'text-text-neutral-on-filled',
+                            'font-semibold',
+                            styleType === ButtonPaginationStyle.OVERLINE && 'border-t-2',
+                            styleType === ButtonPaginationStyle.BUTTON ? 
+                                'hover:bg-background-primary-brand-hover' 
+                                : 'hover:!bg-background-primary-brand-soft',
+                            '!border-background-primary-brand-active'
+                        ] : [
+                            'hover:bg-background-neutral-subtle',
+                            'hover:text-text-default'
+                        ],
+                        page === '...' ? 'cursor-default hover:!cursor-not-allowed hover:!bg-transparent' : 'cursor-pointer',
+                    ]"
+                    @click="() => handlePageClick(page)"
+                >
+                    <span 
+                        v-if="page !== '...'"
+                        :class="[
+                            'transition-colors duration-200',
+                            page === modelValue ? 
+                                (
+                                    styleType === ButtonPaginationStyle.BUTTON 
+                                        ? 'text-text-on-filled' 
+                                        : 'text-text-primary-brand-active'
+                                ) 
+                                : (
+                                    styleType === ButtonPaginationStyle.BUTTON 
+                                        ? 'text-text-default' 
+                                        : 'text-text-neutral-inactive'
+                                ) 
+                        ]"
+                    >
+                        {{ page }}
+                    </span>
+                    <span v-else class="text-text-neutral-subtle opacity-50">...</span>
+                </PaginationButton>
+
+                <!-- Next Button -->
+                <PaginationButton 
+                    :styleType
+                    :disabled="modelValue === totalPages"
+                    @click="goToNextPage"
+                >
+                    <MdiIcon 
+                        icon="mdiChevronRight"
+                        size="20px"
+                        preserveAspectRatio="xMidYMid meet"
+                        class="text-icon-neutral-subtle"
+                    />
+                </PaginationButton>
+            </nav>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    styleType: {
+        type: String as PropType<ButtonPaginationStyle>,
+        default: ButtonPaginationStyle.BUTTON,
+        validator: (value: ButtonPaginationStyle) => Object.values(ButtonPaginationStyle).includes(value),
+    },
+    modelValue: {
+        type: Number as PropType<number>,
+        required: true,
+    },
+    totalItems: {
+        type: Number as PropType<number>,
+        required: true,
+    },
+    itemsPerPage: {
+        type: Number as PropType<number>,
+        default: 10,
+    },
+    showRowsPerPage: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    rowsPerPageLabel: String as PropType<string>,
+    rowsPerPageOptions: Array as PropType<PaginationRowPerPageOption[]>,
+    resultTextMultiplePages: {
+        type: String as PropType<string>,
+        default: 'Showing {from} to {to} of {total} results',
+    },
+    resultTextSinglePage: {
+        type: String as PropType<string>,
+        default: 'Showing {total} results',
+    },
+    resultTextSingleItem: {
+        type: String as PropType<string>,
+        default: 'Showing {total} result',
+    },
+})
+
+// Composables
+const { isMobile } = useIsMobile()
+
+// States
+const itemsPerPage = ref(props.itemsPerPage)
+
+// Emits
+const emit = defineEmits(["update:modelValue", "update:itemsPerPage"])
+
+// Computed
+const totalPages = computed(() => Math.ceil(props.totalItems / itemsPerPage.value))
+
+// Visible pages logic with ellipsis
+const visiblePages = computed(() => {
+    const pages = []
+    const currentPage = props.modelValue
+    const total = totalPages.value
+
+    if (isMobile.value) {
+        const startPage = Math.max(1, currentPage - 1)
+        const endPage = Math.min(total, currentPage + 2)
+
+        for (let i = startPage; i <= endPage; i++) {
+            pages.push(i)
+        }
+
+    } else {
+        // Desktop: Include ellipsis with a maximum of 7 pages
+        const maxPagesDesktop = 7
+
+        if (total <= maxPagesDesktop) {
+            for (let i = 1; i <= total; i++) pages.push(i)
+        } else {
+            if (currentPage <= Math.floor(maxPagesDesktop / 2)) {
+                for (let i = 1; i <= maxPagesDesktop - 2; i++) pages.push(i)
+                pages.push('...', total)
+            } else if (currentPage >= total - Math.floor(maxPagesDesktop / 2)) {
+                pages.push(1, '...')
+                for (let i = total - (maxPagesDesktop - 3); i <= total; i++) pages.push(i)
+            } else {
+                pages.push(1, '...')
+                for (let i = currentPage - 1; i <= currentPage + 1; i++) pages.push(i)
+                pages.push('...', total)
+            }
+        }
+    }
+    return pages
+})
+
+const from = computed(() => (props.modelValue - 1) * itemsPerPage.value + 1)
+const to = computed(() => Math.min(props.modelValue * itemsPerPage.value, props.totalItems))
+
+const renderedResultsText = computed(() => {
+    // Multi-page case
+    if (props.totalItems > itemsPerPage.value) {
+        return props.resultTextMultiplePages
+            .replace('{from}', from.value.toString())
+            .replace('{to}', to.value.toString())
+            .replace('{total}', props.totalItems.toString())
+            .replace('{count}', props.totalItems === 1 ? 'result' : 'results')
+    }
+
+    // Single item case
+    if (props.totalItems === 1) {
+        return props.resultTextSingleItem
+            .replace('{total}', '1')
+            .replace('{count}', 'result')
+    }
+
+    // Single page with multiple results
+    return props.resultTextSinglePage
+        .replace('{total}', props.totalItems.toString())
+})
+
+// Handlers
+const goToPreviousPage = () => {
+    if (props.modelValue > 1) {
+        emit("update:modelValue", props.modelValue - 1)
+    }
+}
+
+const goToNextPage = () => {
+    if (props.modelValue < totalPages.value) {
+        emit("update:modelValue", props.modelValue + 1)
+    }
+}
+
+const handlePageClick = (page: string | number) => {
+    if (page === '...') return
+    emit("update:modelValue", page)
+}
+
+// Watchers
+watch(itemsPerPage, (newVal) => {
+    emit('update:modelValue', 1) // Reset to page 1 when rows per page changes
+    emit("update:itemsPerPage", newVal)
+})
+</script>

package/components/pagination/RowsPerPage.vue

@@ -0,0 +1,60 @@
+<template>
+    <div v-if="visible" class="flex items-center justify-center gap-3">
+        <span class="text-sm">
+            {{ rowsLabel }}
+        </span>
+        <DropdownSelect 
+            :modelValue
+            :options="rowsOptions" 
+            class="w-full min-w-[80px]"
+            :dropdownPosition="DropdownPosition.TOP"
+            @update:modelValue="(value) => emit('update:modelValue', value)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    visible: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    modelValue: {
+        type: Number as PropType<number>,
+        default: 10,
+    },
+    rowsLabel: {
+        type: String as PropType<string>,
+        default: 'Rows',
+    },
+    rowsOptions: {
+        type: Array as PropType<PaginationRowPerPageOption[]>,
+        default: () => [
+            {
+                text: '5',
+                value: 5,
+            },
+            {
+                text: '10',
+                value: 10,
+            },
+            {
+                text: '25',
+                value: 25,
+            },
+            {
+                text: '50',
+                value: 50,
+            },
+            {
+                text: '100',
+                value: 100,
+            },
+        ]
+    }
+})
+
+// Emits
+const emit = defineEmits(["update:modelValue"])
+</script>

package/components/pagination/SimplePagination.vue

@@ -0,0 +1,97 @@
+<template>
+    <nav class="flex items-center justify-center gap-2">
+        <ActionIconButton 
+            icon="mdiChevronLeft"
+            :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
+            :disabled="modelValue === 1"
+            :class="[
+                'bg-transparent',
+                modelValue > 1 && 'hover:border border-border-default',
+            ]"
+            @click="goToPreviousPage"
+        />
+        <p class="text-sm">
+            {{ computedResultsText }}
+        </p>
+        <ActionIconButton 
+            icon="mdiChevronRight"
+            :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
+            :disabled="modelValue === totalPages"
+            :class="[
+                'bg-transparent',
+                modelValue < totalPages && 'hover:border border-border-default',
+            ]"
+            @click="goToNextPage"
+        />
+    </nav>
+</template>
+
+<script setup lang="ts">
+
+// Props
+const props = defineProps({
+    modelValue: {
+        type: Number as PropType<number>,
+        required: true,
+    },
+    totalItems: {
+        type: Number as PropType<number>,
+        required: true,
+    },
+    itemsPerPage: {
+        type: Number as PropType<number>,
+        required: true,
+    },
+    resultTextMultiplePages: {
+        type: String as PropType<string>,
+        default: 'Showing {from} to {to} of {total} results',
+    },
+    resultTextSinglePage: {
+        type: String as PropType<string>,
+        default: 'Showing {total} results',
+    },
+    resultTextSingleItem: {
+        type: String as PropType<string>,
+        default: 'Showing {total} result',
+    },
+})
+
+// Emits
+const emit = defineEmits(["update:modelValue"])
+
+// Computed
+const totalPages = computed(() => Math.ceil(props.totalItems / props.itemsPerPage))
+
+const from = computed(() => (props.modelValue - 1) * props.itemsPerPage + 1)
+const to = computed(() => Math.min(props.modelValue * props.itemsPerPage, props.totalItems))
+
+const computedResultsText = computed(() => {
+    if (props.totalItems > props.itemsPerPage) {
+        return props.resultTextMultiplePages
+            .replace('{from}', from.value.toString())
+            .replace('{to}', to.value.toString())
+            .replace('{total}', props.totalItems.toString())
+    }
+
+    if (props.totalItems === 1) {
+        return props.resultTextSingleItem
+            .replace('{total}', '1')
+    }
+
+    return props.resultTextSinglePage
+        .replace('{total}', props.totalItems.toString())
+})
+
+// Handlers
+const goToPreviousPage = () => {
+    if (props.modelValue > 1) {
+        emit("update:modelValue", props.modelValue - 1)
+    }
+}
+
+const goToNextPage = () => {
+    if (props.modelValue < totalPages.value) {
+        emit("update:modelValue", props.modelValue + 1)
+    }
+}
+</script>

package/components/password/SecurePasswordCondition.vue

@@ -0,0 +1,41 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'flex-row',
+            'items-center',
+            'self-stretch',
+            'gap-2',
+        ]"
+    >
+        <MdiIcon 
+            :icon="isValid ? 'mdiCheck' : 'mdiClose'" 
+            preserveAspectRatio="xMidYMid meet"
+            :class="[
+                isValid ? 'text-icon-success-subtle' : 'text-text-neutral-subtle',
+                'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+            ]" 
+        />
+        <span 
+            :class="[
+                'text-sm',
+                isValid ? 'text-success-default' : 'text-text-neutral-subtle'
+            ]" 
+        >
+            {{ label }}
+        </span>
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    label: {
+        type: String as PropType<string>,
+        default: 'Condition label'
+    },
+    isValid: {
+        type: Boolean as PropType<boolean>,
+        required: true,
+    },
+})
+</script>

package/components/password/SecurePasswordConditions.vue

@@ -0,0 +1,83 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'flex-col',
+            'items-start',
+            'gap-2',
+        ]"
+    >
+        <SecurePasswordCondition
+            v-if="enabledConditions.includes('length')"
+            :label="$t('Password should be at least 12 characters long.')"
+            :isValid="conditions.isLongEnough"
+        />
+
+        <SecurePasswordCondition
+            v-if="enabledConditions.includes('combination')"
+            :label="$t('Use a mix of uppercase and lowercase letters.')"
+            :isValid="conditions.hasMixedCase"
+        />
+
+        <SecurePasswordCondition
+            v-if="enabledConditions.includes('specialCharacters')"
+            :label="$t('Include numbers and special characters for extra security.')"
+            :isValid="conditions.hasNumbersAndSpecialChars"
+        />
+
+        <SecurePasswordCondition
+            v-if="enabledConditions.includes('passwordMatch') && repeatPassword !== undefined"
+            :label="$t('Both passwords must match.')"
+            :isValid="password === repeatPassword && password !== ''"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    password: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    repeatPassword: {
+        type: String as PropType<string>,
+        required: false,
+    },
+    enabledConditions: {
+        type: Array as PropType<Array<'length' | 'combination' | 'specialCharacters' | 'passwordMatch'>>,
+        default: () => ['length', 'combination', 'specialCharacters', 'passwordMatch'],
+    },
+})
+
+// Emits
+const emit = defineEmits([
+    'conditions-checked',
+])
+
+// Computed states
+const conditions = computed(() => evaluateSecurePasswordConditions(props.password))
+
+// Watch & emit condition status
+watchEffect(() => {
+    const checks: boolean[] = []
+
+    if (props.enabledConditions.includes('length')) {
+        checks.push(conditions.value.isLongEnough)
+    }
+
+    if (props.enabledConditions.includes('combination')) {
+        checks.push(conditions.value.hasMixedCase)
+    }
+
+    if (props.enabledConditions.includes('specialCharacters')) {
+        checks.push(conditions.value.hasNumbersAndSpecialChars)
+    }
+
+    if (props.enabledConditions.includes('passwordMatch') && props.repeatPassword !== undefined) {
+        checks.push(props.password === props.repeatPassword)
+    }
+
+    emit('conditions-checked', checks.every(Boolean))
+})
+</script>

package/components/placeholders/ContentPlaceholder.vue

@@ -0,0 +1,41 @@
+<template>
+    <div 
+        :class="[
+            'w-full',
+            'flex flex-col justify-center items-center',
+            'p-6',
+            'bg-background-primary-brand-soft',
+            'rounded-sm',
+            'bg-diagonal-stripes',
+        ]"
+    >
+        <div 
+            :class="[
+            'bg-[#f3f4f6]',
+            'px-2',
+            'py-1',
+            'rounded',
+            textWrapperClass,
+        ]">
+            <span 
+                :class="[
+                'text-text-neutral-subtle-on-subtler-bg',
+                textClass,
+            ]">
+                {{ text }}
+            </span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    text: {
+        type: String as PropType<string>,
+        default: 'Replace me',
+    },
+    textWrapperClass: String as PropType<string>,
+    textClass: String as PropType<string>,
+})
+</script>