@imaginario27/air-ui-ds 1.0.0

package/components/empty-states/EmptyState.vue

@@ -0,0 +1,170 @@
+<template>
+    <div
+        :class="hasContainer && containerClasses"
+    >
+        <div 
+            :class="[
+                'py-3',
+                'flex',
+                'items-center',
+                orientationClass,
+            ]"
+        >
+            <!-- Icon -->
+            <MdiIcon
+                v-if="icon"
+                :icon="icon"
+                :size="iconSize"
+                preserveAspectRatio="xMidYMid meet"
+                :class="[
+                    hasContainer ? isContainedIconClass : iconClass,
+                    iconSizeClass,
+                ]"
+            />
+            <div 
+                :class="[
+                    'flex gap-2 flex-col',
+                    'max-w-[400px]',
+                    orientation === Orientation.VERTICAL
+                        ? 'text-center justify-center'
+                        : 'text-center justify-center sm:text-left sm:justify-start',
+                ]"
+            >
+                <span :class="['font-semibold', titleClass && titleClass]">
+                    {{ title }}
+                </span>
+                <p 
+                    v-if="description"
+                    :class="descriptionClass"
+                >
+                    {{ description }}
+                </p>
+            </div>
+            
+            <div
+                v-if="buttonText"
+                :class="[
+                    orientation === Orientation.VERTICAL ? 'pt-4' : 'pt-4 sm:pt-0 sm:ml-4'
+                ]"
+            >
+                <ActionButton 
+                    :text="buttonText"
+                    :styleType="buttonStyleType"
+                    :icon="buttonIcon"
+                    :iconPosition="buttonIconPosition"
+                    @click="emitButtonClick"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+
+// Props
+const props = defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Ups! No data found',
+    },
+    description: String as PropType<string>,
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiDatabaseAlertOutline',
+    },
+    iconClass: {
+        type: String as PropType<string>,
+        default: 'text-icon-neutral-sublest',
+    },
+    titleClass: String as PropType<string>,
+    descriptionClass: {
+        type: String as PropType<string>,
+        default: 'text-sm text-text-neutral-subtle',
+    },
+    orientation: {
+        type: String as PropType<Orientation>,
+        default: Orientation.VERTICAL,
+        validator: (value: Orientation) => Object.values(Orientation).includes(value),
+    },
+    buttonText: String as PropType<string>,
+    buttonIconPosition: String as PropType<IconPosition>,
+    buttonIcon: String as PropType<any>,
+    buttonStyleType: {
+        type: String as PropType<ButtonStyleType>,
+        default: ButtonStyleType.PRIMARY_BRAND_FILLED
+    },
+    hasContainer: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    containerStyle: {
+        type: String as PropType<EmptyPlaceholderContainerStyle>,
+        default: EmptyPlaceholderContainerStyle.FILLED_NEUTRAL, 
+        validator: (value: EmptyPlaceholderContainerStyle) => Object.values(EmptyPlaceholderContainerStyle).includes(value),
+    },
+    styledContainerClass: String as PropType<string>,
+})
+
+// Emits
+const emit = defineEmits(['buttonClick'])
+const emitButtonClick = () => {
+    emit('buttonClick')
+}
+
+// Computed functions
+const orientationClass = computed(() => {
+    const orientationVariant = {
+        [Orientation.VERTICAL]: 'flex-col gap-3',
+        [Orientation.HORIZONTAL]: 'flex-col gap-3 sm:flex-row sm:gap-3',
+    }
+    return orientationVariant[props.orientation as Orientation] || 'flex-col gap-3 sm:flex-row sm:gap-3'
+})
+
+const iconSize = computed(() => {
+    const iconSize = {
+        [Orientation.VERTICAL]: '40px',
+        [Orientation.HORIZONTAL]: '32px',
+    }
+    return iconSize[props.orientation as Orientation] || '32px'
+})
+
+const iconSizeClass = computed(() => {
+    const iconSize = {
+        [Orientation.VERTICAL]: 'min-w-[40px] max-w-[40px]',
+        [Orientation.HORIZONTAL]: 'min-w-[32px] max-w-[32px]',
+    }
+    return iconSize[props.orientation as Orientation] || 'min-w-[32px] max-w-[32px]'
+})
+
+const containerClasses = computed(() => {
+    return [
+        'flex',
+        'w-full',
+        'justify-center',
+        'rounded-md',
+        'p-[5vw]',
+        customContainerClass.value,
+        props.styledContainerClass
+    ]
+})
+
+const customContainerClass = computed(() => {
+    const variant = {
+        [EmptyPlaceholderContainerStyle.DASHED]: 'border-2 border-dashed border-border-default',
+        [EmptyPlaceholderContainerStyle.FILLED_NEUTRAL]: 'bg-background-neutral-subtlest',
+        [EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND]: 'bg-background-primary-brand-soft',
+
+    }
+    return variant[props.containerStyle as EmptyPlaceholderContainerStyle] || 'bg-background-neutral-subtlest'
+})
+
+const isContainedIconClass = computed(() => {
+    const variant = {
+        [EmptyPlaceholderContainerStyle.DASHED]: 'text-icon-neutral-subtlest',
+        [EmptyPlaceholderContainerStyle.FILLED_NEUTRAL]: 'text-icon-neutral-on-subtlest-bg',
+        [EmptyPlaceholderContainerStyle.FILLED_PRIMARY_BRAND]: 'text-icon-neutral-on-primary-brand-soft-bg',
+
+    }
+    return variant[props.containerStyle as EmptyPlaceholderContainerStyle] || 'text-icon-neutral-on-subtlest-bg'
+})
+
+</script>

package/components/features/Feature.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="flex gap-2.5">
+        <div v-if="icon">
+            <MdiIcon
+                v-if="icon && !svgIcon"
+                :icon
+                preserveAspectRatio="xMidYMid meet"
+                :class="[
+                    'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+                    iconColorClass,
+                ]"
+            />
+            <span
+                v-else-if="svgIcon"
+                class="w-[24px] h-[24px] min-w-[24px] min-h-[24px]"
+            >
+                <SVGImage
+                    :src="svgIcon"
+                    :color="resolvedSvgIconColor?.value"
+                />
+            </span>
+        </div>
+
+        <div class="w-full flex flex-col gap-1">
+            <div class="text-base font-semibold">
+                {{ title }}
+            </div>
+            <p 
+                v-if="description" 
+                class="text-base text-text-neutral-subtle"
+            >
+                {{ description }}
+            </p>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Title',
+    },
+    description: String as PropType<string>,
+    icon: String as PropType<any>,
+    iconColor: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.SECONDARY_BRAND, 
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    svgIcon: String as PropType<string>,
+    useSVGIconColor: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// Computed functions
+const resolvedSvgIconColor = computed(() => {
+    return props.useSVGIconColor ? undefined : iconColorClass
+})
+
+// Class
+const iconColorClass = computed(() => {
+    const variant = {
+        [ColorAccent.NEUTRAL]: "text-icon-neutral-subtle",
+        [ColorAccent.SUCCESS]: "text-icon-success",
+        [ColorAccent.WARNING]:  "text-icon-warning",
+        [ColorAccent.DANGER]: "text-icon-danger",
+        [ColorAccent.INFO]: "text-icon-info",
+        [ColorAccent.PRIMARY_BRAND]: "text-icon-primary-brand-default",
+        [ColorAccent.SECONDARY_BRAND]: "text-icon-secondary-brand-default",
+    }
+    return variant[props.iconColor as ColorAccent] || 'text-icon-secondary-brand-default"'
+})
+
+</script>

package/components/forms/DataDetails.vue

@@ -0,0 +1,7 @@
+<template>
+    <div 
+        class="w-full flex flex-col gap-4" 
+    >
+        <slot />
+    </div>
+</template>

package/components/forms/DataDetailsActions.vue

@@ -0,0 +1,23 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'gap-4',
+            'mt-2',
+            '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/forms/DataDetailsFieldGroup.vue

@@ -0,0 +1,35 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'flex-col',
+            'gap-4',
+            dividedRows && '!gap-0 divide-y divide-border-neutral-subtle border-b border-border-neutral-subtle'
+        ]"
+    >
+    <h3
+        :class="[
+            'form-field-group-title',
+            'font-semibold',
+            'text-text-neutral-subtle',
+            dividedRows && 'mb-4'
+        ]"
+    >
+            {{ title }}
+        </h3>
+        <slot />
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Group title',
+    },
+    dividedRows: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+</script>

package/components/forms/DataDetailsRow.vue

@@ -0,0 +1,22 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'gap-column-gap',
+            'flex-col',
+            'md:flex-row',
+            spaced && 'py-6'
+        ]"
+    >
+        <slot />
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    spaced: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+</script>

package/components/forms/Form.vue

@@ -0,0 +1,25 @@
+<template>
+    <form 
+        class="w-full flex flex-col gap-4" 
+        @submit="handleSubmit"
+        @reset="handleReset"
+    >
+        <slot />
+    </form>
+</template>
+
+<script setup lang="ts">
+// Imports
+const emit = defineEmits(['submit', 'reset'])
+
+// Handlers
+const handleSubmit = (event: Event) => {
+    event.preventDefault()
+    emit('submit') 
+}
+
+const handleReset = (event: Event) => {
+    event.preventDefault()
+    emit('reset')
+}
+</script>

package/components/forms/FormActions.vue

@@ -0,0 +1,23 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'gap-4',
+            'mt-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/forms/FormFieldGroup.vue

@@ -0,0 +1,35 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'flex-col',
+            'gap-4',
+            dividedRows && '!gap-0 divide-y divide-border-neutral-subtle border-b border-border-neutral-subtle'
+        ]"
+    >
+    <h3
+        :class="[
+            'form-field-group-title',
+            'font-semibold',
+            'text-text-neutral-subtle',
+            dividedRows && 'mb-4'
+        ]"
+    >
+            {{ title }}
+        </h3>
+        <slot />
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Group title',
+    },
+    dividedRows: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+</script>

package/components/forms/FormRow.vue

@@ -0,0 +1,22 @@
+<template>
+    <div 
+        :class="[
+            'flex',
+            'gap-column-gap',
+            'flex-col',
+            'md:flex-row',
+            spaced && 'py-6'
+        ]"
+    >
+        <slot />
+    </div>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    spaced: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+</script>

package/components/forms/fields/ButtonField.vue

@@ -0,0 +1,119 @@
+<template>
+    <div :class="[ 'flex flex-col', 'w-full', 'gap-2' ]">
+        <!-- Label -->
+        <label 
+            v-if="label"
+            :for="id" 
+            :class="[ 
+                'text-sm', 
+                'font-semibold', 
+                'text-left', 
+            ]"
+        >
+            {{ label }}
+        </label>
+        <ActionButton 
+            :text
+            :size
+            :icon
+            :iconPosition
+            :disabled
+            :isLoading
+            :loadingText
+            :styleType
+            :actionType
+            :svgIcon
+            :useSVGIconColor
+            :isRounded
+            :isFullWidth
+            :isMobileFullWidth
+            :to
+            :isExternal
+            @click="emitClick"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    id: { 
+        type: String as PropType<string>, 
+        required: true,
+    },
+    label: String as PropType<string>,
+    actionType: {
+        type: String as PropType<ButtonActionType>,
+        default: ButtonActionType.ACTION,
+        validator: (value: ButtonActionType) => Object.values(ButtonActionType).includes(value),
+    },
+    styleType: {
+        type: String as PropType<ButtonStyleType>,
+        default: ButtonStyleType.NEUTRAL_OUTLINED,
+        validator: (value: ButtonStyleType) => Object.values(ButtonStyleType).includes(value),
+    },
+    text: {
+        type: String as PropType<string>,
+        default: 'Button text'
+    },
+    size: {
+        type: String as PropType<ButtonSize>,
+        default: ButtonSize.LG,
+        validator: (value: ButtonSize) => Object.values(ButtonSize).includes(value),
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: "mdiHelp"
+    },
+    iconPosition: {
+        type: String as PropType<IconPosition>,
+        default: IconPosition.NONE,
+        validator: (value: IconPosition) => Object.values(IconPosition).includes(value),
+    },
+    svgIcon: String as PropType<string>,
+    useSVGIconColor: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    to: {
+        type: String as PropType<string>,
+        default: ''
+    },
+    isExternal: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    isRounded: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    isFullWidth: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    isMobileFullWidth: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    isLoading: { 
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    loadingText: { 
+        type: String as PropType<string>,
+        default: 'Processing...',
+    }, 
+})
+
+// Emits
+const emit = defineEmits(['click'])
+const emitClick = () => {
+    if (!props.disabled) {
+        emit('click')
+    }
+}
+</script>