@imaginario27/air-ui-ds 1.0.0

package/composables/useForm.ts

@@ -0,0 +1,134 @@
+import { FormValidationMode } from '@/models/enums/formValidations'
+import { useFormValidationMode } from '@/composables/useFormValidationMode'
+
+export const useForm = <
+    T extends Record<string, any>
+>(options: {
+    formData: T,
+    requiredFields: string[],
+    requiredFieldMessage?: string,
+    validators?: Partial<Record<string, (value: unknown) => string | null>>,
+    validateOn?: FormValidationMode,
+}) => {
+    const { currentFormValidationMode } = useFormValidationMode()
+
+    const formErrors = reactive({}) as Record<string, string>
+
+    currentFormValidationMode.value = options.validateOn ?? FormValidationMode.SUBMIT
+
+    const setDeep = (obj: Record<string, any>, path: string, value: any) => {
+        const keys = path.split('.')
+        const lastKey = keys.pop()!
+        const target = keys.reduce((o, k) => (o[k] ??= {}), obj)
+        target[lastKey] = value
+    }
+
+    const getDeep = (obj: Record<string, any>, path: string) => {
+        return path.split('.').reduce((o, k) => o?.[k], obj)
+    }
+
+    const validateField = (fieldPath: string): string => {
+        const value = getDeep(options.formData, fieldPath)
+        const validator = options.validators?.[fieldPath]
+
+        if (validator) {
+            const result = validator(value)
+            return result || ''
+        }
+
+        if (
+            value === undefined ||
+            value === null ||
+            (typeof value === 'string' && (value as string).trim() === '')
+        ) {
+            return options.requiredFieldMessage ?? 'This field is required'
+        }
+
+        return ''
+    }
+
+    const validateFormFields = (): boolean => {
+        let isValid = true
+
+        for (const fieldPath of options.requiredFields) {
+            const error = validateField(fieldPath)
+            setDeep(formErrors, fieldPath, error)
+
+            if (error) {
+                isValid = false
+            }
+        }
+
+        if (!isValid) {
+            currentFormValidationMode.value = FormValidationMode.BLUR
+        }
+
+        return isValid
+    }
+
+    const resetForm = () => {
+        const formData = options.formData as Record<string, any>
+
+        const resetValue = (value: unknown): unknown => {
+            if (Array.isArray(value)) {
+                value.splice(0, value.length)
+                return value
+            }
+
+            switch (typeof value) {
+                case 'string':
+                    return ''
+                case 'number':
+                    return 0
+                case 'boolean':
+                    return false
+                case 'object':
+                    if (value !== null) {
+                        resetObject(value)
+                    }
+                    return value
+                default:
+                    return ''
+            }
+        }
+
+        const resetObject = (obj: Record<string, any>) => {
+            for (const key of Object.keys(obj)) {
+                const value = obj[key]
+
+                if (Array.isArray(value)) {
+                    value.splice(0, value.length) 
+                } else if (typeof value === 'object' && value !== null) {
+                    resetObject(value) 
+                } else {
+                    obj[key] = resetValue(value)
+                }
+            }
+        }
+
+        for (const key of Object.keys(formData)) {
+            const value = formData[key]
+
+            if (Array.isArray(value)) {
+                value.splice(0, value.length) 
+            } else if (typeof value === 'object' && value !== null) {
+                resetObject(value)
+            } else {
+                formData[key] = resetValue(value)
+            }
+        }
+
+        for (const key of Object.keys(formErrors)) {
+            setDeep(formErrors, key, '')
+        }
+
+        currentFormValidationMode.value = options.validateOn ?? FormValidationMode.SUBMIT
+    }
+
+    return {
+        formErrors,
+        resetForm,
+        validateFormFields,
+        validateField,
+    }
+}

package/composables/useFormValidationMode.ts

@@ -0,0 +1,11 @@
+const validationMode = ref<FormValidationMode>(FormValidationMode.SUBMIT)
+
+export const useFormValidationMode = () => {
+    provide('formValidationMode', validationMode)
+    return {
+        currentFormValidationMode: validationMode,
+    }
+}
+export const useInjectedValidationMode = () => {
+    return inject<Ref<FormValidationMode>>('formValidationMode', ref(FormValidationMode.SUBMIT))
+}

package/composables/useIsMobile.ts

@@ -0,0 +1,27 @@
+export const useIsMobile = (breakpoint: number = 1024) => {
+    const isMobile = ref(false) // Initial value for SSR
+
+    // Function to update `isMobile`
+    const updateIsMobile = () => {
+        if (typeof window !== 'undefined') {
+            isMobile.value = window.innerWidth < breakpoint
+        }
+    }
+
+    // Attach resize listener on the client
+    onMounted(() => {
+        updateIsMobile() // Initialize the value
+        window.addEventListener('resize', updateIsMobile)
+    })
+
+    // Cleanup listener when unmounted
+    onUnmounted(() => {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', updateIsMobile)
+        }
+    })
+
+    return {
+        isMobile,
+    }
+}

package/composables/useMobileSidebar.ts

@@ -0,0 +1,32 @@
+// Shared state
+const isMobileSidebarOpen: Ref = ref(false)
+
+export const useMobileSidebar = () => {
+
+    const { isMobile } = useIsMobile()
+    
+    const toggleMobileSidebar = () => {
+        isMobileSidebarOpen.value = !isMobileSidebarOpen.value
+    }
+
+    const openMobileSidebar = () => {
+        isMobileSidebarOpen.value = true
+    }
+
+    const closeMobileSidebar = () => {
+        isMobileSidebarOpen.value = false
+    }
+
+    watch(isMobile, newVal => {
+        if (!newVal) {
+            isMobileSidebarOpen.value = false
+        }
+    })
+
+    return {
+        isMobileSidebarOpen,
+        toggleMobileSidebar,
+        openMobileSidebar,
+        closeMobileSidebar,
+    }
+}

package/composables/useShiki.ts

@@ -0,0 +1,12 @@
+import { createHighlighter, type Highlighter } from 'shiki'
+
+let highlighter: Highlighter | null = null
+
+export const useShikiHighlighter = async () => {
+    highlighter ??= await createHighlighter({
+        themes: ['github-light', 'github-dark'],
+        langs: ['vue'],
+    })
+
+    return highlighter
+}

package/composables/useTableOfContents.ts

@@ -0,0 +1,50 @@
+export const useTableOfContents = () => {
+    // Tracks the currently active heading
+    const activeId = ref<string | null>(null)
+    const route = useRoute()
+
+    let observer: IntersectionObserver | null = null
+
+    const initObserver = () => {
+        if (observer) observer.disconnect()
+
+        observer = new IntersectionObserver(
+            (entries) => {
+                for (const entry of entries) {
+                    if (entry.isIntersecting) {
+                        activeId.value = entry.target.id
+                        break
+                    }
+                }
+            },
+            {
+                rootMargin: '0px 0px -70% 0px',
+                threshold: 0.1,
+            }
+        )
+
+        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) {
+            activeId.value = headings[0].id
+        }
+    }
+
+    watch(
+        () => route.path,
+        () => {
+            nextTick(() => {
+                initObserver()
+            })
+        },
+        { immediate: true }
+    )
+
+    onBeforeUnmount(() => {
+        if (observer) observer.disconnect()
+    })
+
+    return { activeId }
+}

package/composables/useToastifyConfig.ts

@@ -0,0 +1,7 @@
+const toastifyOptions = reactive({
+    autoClose: 5000,
+    position: 'bottom-center',
+    theme: 'colored',
+})
+
+export const useToastifyConfig = () => toastifyOptions

package/eslint.config.mjs

@@ -0,0 +1,14 @@
+// https://eslint.nuxt.com/packages/module
+
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt({
+    rules: {
+        'vue/attribute-hyphenation': 'off',
+        'vue/no-multiple-template-root': 'off',
+        'vue/require-default-prop': 'off',
+        'vue/multi-word-component-names': 'off',
+        '@typescript-eslint/no-explicit-any': 'warn',
+    }
+})

package/models/constants/app.ts

@@ -0,0 +1,8 @@
+export const App = {
+    NAME: 'AirUI',
+}
+
+export const AppSlug = {
+    DOCS: 'docs',
+    COMPONENTS: 'components',
+}

package/models/constants/form.ts

@@ -0,0 +1,22 @@
+
+export const FieldMaxLength = {
+    FULLNAME: 80,
+    LASTNAME: 80,         
+    EMAIL: 254,  
+    PHONE: 15,       
+    SUBJECT: 100,       
+    MESSAGE: 500,
+    PASSWORD: 64, 
+    SEARCH: 80,  
+    DESCRIPTION: 400,     
+}
+
+export const FieldError = {
+    REQUIRED_FIELD: 'This field is required.',
+    REQUIRED_EMAIL: 'Email is required.',
+    INVALID_EMAIL: 'Invalid email address.',
+    REQUIRED_OPTION: 'Please select an option.',
+    INVALID_DATE_RANGE: 'Start date must be before or equal to end date',
+    PASSWORDS_DO_NOT_MATCH: 'Passwords do not match.',
+    INVALID_URL: 'Invalid URL.',
+}

package/models/enums/alerts.ts

@@ -0,0 +1,6 @@
+export enum AlertType {
+    SUCCESS = 'success',
+    DANGER = 'danger',
+    INFO = 'info',
+    WARNING = 'warning'
+}

package/models/enums/aspect-ratios.ts

@@ -0,0 +1,9 @@
+export enum AspectRatio {
+    AR_1_1 = '1:1',
+    AR_4_3 = '4:3',
+    AR_3_2 = '3:2',
+    AR_16_9 = '16:9',
+    AR_3_4 = '3:4',
+    AR_4_5 = '4:5',
+    AR_2_3 = '2:3',
+}

package/models/enums/avatars.ts

@@ -0,0 +1,21 @@
+export enum AvatarSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+    XXL = '2xl',
+    XXXL = '3xl',
+    XXXXL = '4xl',
+}
+
+export enum AvatarShape {
+    CIRCLE = 'circle',
+    SQUARE = 'square',
+}
+
+export enum AvatarStackSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+}

package/models/enums/badges.ts

@@ -0,0 +1,10 @@
+export enum BadgeStyle {
+    BORDER = 'border',
+    FLAT = 'flat',
+    FILLED = 'filled',
+}
+
+export enum BadgeShape {
+    BADGE = 'badge',
+    PILL = 'pill',
+}

package/models/enums/buttons.ts

@@ -0,0 +1,38 @@
+export enum ButtonStyleType {
+    PRIMARY_BRAND_FILLED = 'primary-brand-filled',
+    PRIMARY_BRAND_TRANSPARENT = 'primary-brand-transparent',
+    PRIMARY_BRAND_SOFT = 'primary-brand-soft',
+    SECONDARY_BRAND_FILLED = 'secondary-brand-filled',
+    NEUTRAL_OUTLINED = 'neutral-outlined',
+    NEUTRAL_TRANSPARENT = 'neutral-transparent',
+    NEUTRAL_TRANSPARENT_SUBTLE = 'neutral-transparent-subtle',
+    NEUTRAL_FILLED = 'neutral-filled',
+    DELETE_FILLED = 'delete-filled',
+    DELETE_OUTLINED = 'delete-outlined',
+    DELETE_SOFT = 'delete-soft',
+    DELETE_TRANSPARENT = 'delete-transparent',
+}
+
+export enum ButtonSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+    XXL = '2xl',
+}
+
+export enum ButtonActionType {
+    ACTION = 'action',
+    LINK = 'link',
+}
+
+export enum ToggleButtonGroupStyle {
+    GROUPED = 'grouped', 
+    SEGMENTED = 'segmented' 
+}
+
+export enum ButtonPaginationStyle {
+    BUTTON = 'button',
+    OVERLINE = 'overline',
+}

package/models/enums/colors.ts

@@ -0,0 +1,9 @@
+export enum ColorAccent {
+    NEUTRAL = 'neutral',
+    SUCCESS = 'success',
+    WARNING = 'warning',
+    DANGER = 'danger',
+    INFO = 'info',
+    PRIMARY_BRAND = 'primary-brand',
+    SECONDARY_BRAND = 'secondary-brand',
+}

package/models/enums/content.ts

@@ -0,0 +1,4 @@
+export enum ContentItemType {
+    BASIC = 'basic',
+    CARD = 'card',
+}

package/models/enums/counters.ts

@@ -0,0 +1,4 @@
+export enum StackCounterType {
+    COUNTER = 'counter',
+    ELLIPSIS = 'ellipsis',
+}

package/models/enums/dividers.ts

@@ -0,0 +1,9 @@
+export enum DividerStyle {
+    NEUTRAL = 'neutral',
+    PRIMARY_BRAND = 'primary-brand',
+    SECONDARY_BRAND = 'secondary-brand',
+}
+export enum DividerSize {
+    XS = 'xs',
+    SM = 'sm',
+}

package/models/enums/dropdowns.ts

@@ -0,0 +1,18 @@
+export enum DropdownItemType {
+    TEXT = 'text',
+    ICON = 'icon',
+    DANGER_ICON = 'danger-icon',
+    USER = 'user',
+    IMAGE = 'image',
+}
+
+export enum DropdownItemSize {
+    MD = 'md',
+    LG = 'lg',
+}
+
+export enum DropdownActionType {
+    ACTION = 'action',
+    LINK = 'link',
+    EXPORT_EXCEL = 'export-excel',
+}

package/models/enums/effects.ts

@@ -0,0 +1,6 @@
+export enum ImageHoverEffect {
+    ZOOM_IN = 'zoomIn',
+    ZOOM_OUT = 'zoomOut',
+    OVERLAY = 'overlay',
+    BLUR = 'blur',
+}

package/models/enums/emptyPlaceholders.ts

@@ -0,0 +1,5 @@
+export enum EmptyPlaceholderContainerStyle {
+    DASHED = 'dashed',  
+    FILLED_NEUTRAL = 'filled-neutral',
+    FILLED_PRIMARY_BRAND = 'filled-primary-brand'   
+}

package/models/enums/formFields.ts

@@ -0,0 +1,19 @@
+export enum ControlFieldSize {
+    MD = 'md',
+    LG = 'lg',
+}
+
+export enum InputSize {
+    MD = 'md',
+    LG = 'lg',
+}
+
+export enum RadioType {
+    DEFAULT = 'default',
+    BUTTON = 'button',
+}
+
+export enum SwitchStyle {
+    BRAND = 'brand',
+    SUCCESS = 'success',
+}

package/models/enums/formValidations.ts

@@ -0,0 +1,4 @@
+export enum FormValidationMode {
+    SUBMIT = 'submit',
+    BLUR = 'blur'
+}

package/models/enums/headings.ts

@@ -0,0 +1,11 @@
+export enum HeadingSize {
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+}
+
+export enum HeadingSpacing {
+    NORMAL = 'normal',
+    SPACED = 'spaced',
+}

package/models/enums/icons.ts

@@ -0,0 +1,22 @@
+export enum IconPosition {
+    LEFT = 'left',
+    RIGHT = 'right',
+    NONE = 'none',
+}
+
+export enum IconContainerShape {
+    CIRCLE = 'circle',
+    SQUARE = 'square',
+}
+
+export enum IconContainerStyleType {
+    FLAT = 'flat',
+    FILLED = 'filled',
+}
+
+export enum IconContainerSize {
+    LG = 'lg',
+    XL = 'xl',
+    XXL = '2xl',
+    XXXL = '3xl',
+}

package/models/enums/images.ts

@@ -0,0 +1,16 @@
+export enum QRGradientType {
+    LINEAR = 'linear',
+    RADIAL = 'radial',
+}
+
+export enum QRLevel {
+    L = 'L',
+    M = 'M',
+    Q = 'Q',
+    H = 'H',
+}
+
+export enum QRRenderAs {
+    CANVAS = 'canvas',
+    SVG = 'svg',
+}

package/models/enums/lists.ts

@@ -0,0 +1,10 @@
+export enum ListItemSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+}
+
+export enum ListLayout {
+    LIST = 'list',
+    GRID = 'grid',
+}

package/models/enums/loaders.ts

@@ -0,0 +1,15 @@
+
+export enum LoadingSpinnerSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+    XXL = '2xl',
+    XXXL = '3xl',
+}
+
+export enum LoadingScreenSize {
+    MD = 'md',
+    LG = 'lg',
+}

package/models/enums/navigation.ts

@@ -0,0 +1,18 @@
+export enum NavLinkSize {
+    XS = 'xs',
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+    XXL = '2xl',
+}
+
+export enum MobileNavigationMenuType {
+    DROPDOWN = 'dropdown',
+    SIDEBAR = 'sidebar',
+}
+
+export enum SidebarNavMenuItemStyleType {
+    SPACED = 'spaced',
+    COMPACT = 'sidebar',
+}

package/models/enums/order.ts

@@ -0,0 +1,10 @@
+
+export enum Order {
+    ASC = "asc",
+    DESC = "desc",
+}
+
+export enum OrderPosition {
+    START = "start",
+    END = "end",
+}

package/models/enums/orientations.ts

@@ -0,0 +1,4 @@
+export enum Orientation {
+    VERTICAL = 'vertical',
+    HORIZONTAL = 'horizontal',
+}

package/models/enums/pages.ts

@@ -0,0 +1,10 @@
+export enum PageTitleType {
+    SIMPLE = 'simple',
+    WITH_OVERTITLE = 'withOvertitle',
+    WITH_BREADCRUMBS = 'withBreadcrumbs',
+}
+
+export enum PageTitleFormat {
+    FULL = 'full',  
+    SIMPLE = 'simple',   
+}

package/models/enums/positions.ts

@@ -0,0 +1,21 @@
+export enum Position {
+    TOP = 'top',
+    BOTTOM = 'bottom',
+}
+
+export enum DropdownPosition {
+    LEFT_TOP = 'left-top',
+    LEFT_BOTTOM = 'left-bottom',
+    RIGHT_TOP = 'right-top',
+    RIGHT_BOTTOM = 'right-bottom',
+    TOP_LEFT = 'top-left',
+    TOP_RIGHT = 'top-right',
+    BOTTOM_LEFT = 'bottom-left',
+    BOTTOM_RIGHT = 'bottom-right',
+}
+
+export enum Align {
+    LEFT = 'left',
+    CENTER = 'center',
+    RIGHT = 'right'
+}

package/models/enums/rating.ts

@@ -0,0 +1,12 @@
+export enum RatingItemSize {
+    SM = 'sm',
+    MD = 'md',
+    LG = 'lg',
+    XL = 'xl',
+    XXL = 'xxl',
+}
+
+export enum RatingItemColor {
+    GOLD = 'gold',
+    PRIMARY_BRAND = 'primary-brand',
+}