@imaginario27/air-ui-ds 1.0.0

package/components/forms/fields/CheckboxField.vue

@@ -0,0 +1,205 @@
+<template>
+    <div :class="[ 'flex flex-col', 'w-full', 'gap-2' ]">
+        <!-- Label -->
+        <legend 
+            v-if="legend"
+            :class="[ 
+                'text-sm', 
+                'font-semibold', 
+                'text-left',
+            ]"
+        >
+            {{ legend }}
+        </legend>
+        <!-- Checkbox with Label -->
+        <div 
+            :class="[ 
+                'flex items-center gap-3',
+                'text-sm',
+                hasError ? 'text-text-error' : 'text-text-default'
+            ]"
+        >
+            <!-- Label (inverted)-->
+            <label 
+                v-if="inverse"
+                :for="id" 
+                :class="[
+                    disabled && 'text-text-neutral-disabled',
+                    labelSizeClass,
+                ]" 
+                v-html="label"
+            />
+
+            <!-- Hidden Native Checkbox -->
+            <input 
+                :id="id" 
+                type="checkbox" 
+                :checked="modelValue" 
+                class="hidden" 
+                :disabled="disabled"
+                @change="handleChange"
+            >
+            
+            <!-- Custom Checkbox -->
+            <div
+                :class="[ 
+                    'flex items-center justify-center',
+                    controlFieldSizeClass, 
+                    'border', 
+                    'rounded', 
+                    'flex items-center justify-center',
+                    'transition-colors',
+                    modelValue ? 'bg-background-primary-brand-checked border-border-primary-brand-active' : 'bg-neutral-white border-border-default',
+                    disabled ? 'bg-background-neutral-disabled cursor-not-allowed' : 'cursor-pointer'
+                ]"
+                @click="toggleCheckbox"
+            >
+                <MdiIcon 
+                    v-if="modelValue" 
+                    icon="mdiCheckBold" 
+                    :size="checkboxIconSizeClass" 
+                    preserveAspectRatio="xMidYMid meet"
+                    :class="disabled ? 'text-icon-neutral-disabled' : 'text-icon-neutral-on-filled-bg'"
+                />
+            </div>
+            
+            <!-- Label (natural position) -->
+            <label 
+                v-if="!inverse"
+                :for="id" 
+                :class="[
+                    disabled && 'text-text-neutral-disabled',
+                    labelSizeClass,
+                ]"  
+                v-html="label"
+            />
+        </div>
+
+        <!-- Help Text -->
+        <p 
+            v-if="helpText || hasError" 
+            :class="[ 
+                'text-xs',
+                'text-left', 
+                hasError ? 'text-text-error' : 'text-text-neutral-subtler' 
+            ]"
+        >
+            {{ hasError ? error : helpText }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    id: { 
+        type: String as PropType<string>, 
+        required: true,
+    },
+    label: { 
+        type: String as PropType<string>, 
+        default: 'Text',
+    },
+    legend: String as PropType<string>,
+    helpText: String as PropType<string>,
+    modelValue: { 
+        type: Boolean as PropType<boolean>, 
+        default: false, 
+    },
+    validator: {
+        type: Function as PropType<(value: boolean) => string | null>,
+        default: () => null,
+    },
+    error: {
+        type: String as PropType<string>,
+        default: '',
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    required: { 
+        type: Boolean as PropType<boolean>, 
+        default: false, 
+    },
+    size: {
+        type: String as PropType<ControlFieldSize>,
+        default: ControlFieldSize.MD,
+        validator: (value: ControlFieldSize) => Object.values(ControlFieldSize).includes(value),
+    },
+    inverse: { // Sets the checkbox on the right side of the text
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'update:error'])
+
+// Composables
+const validationMode = useInjectedValidationMode()
+
+// Computed
+const hasError = computed(() => props.error !== '')
+
+// Computed classes
+const controlFieldSizeClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.MD]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
+        [ControlFieldSize.LG]: 'w-[32px] h-[32px] min-w-[32px] min-h-[32px]',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]'
+})
+
+const checkboxIconSizeClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.MD]: '16',
+        [ControlFieldSize.LG]: '20',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || '16'
+})
+
+const labelSizeClass = computed(() => {
+    const sizeVariant = {
+        [ControlFieldSize.MD]: 'text-sm',
+        [ControlFieldSize.LG]: 'text-base',
+    }
+    return sizeVariant[props.size as ControlFieldSize] || 'text-sm'
+})
+
+// Handlers
+const handleChange = () => {
+    if (validationMode.value === FormValidationMode.BLUR) {
+        runValidation()
+    }
+}
+
+const toggleCheckbox = () => {
+    if (props.disabled) return
+
+    if (validationMode.value === FormValidationMode.BLUR) {
+        runValidation()
+    }
+
+    emit('update:modelValue', !props.modelValue)
+}
+
+const runValidation = () => {
+    if (!props.required || !props.validator) return
+
+    const result = props.validator(props.modelValue)
+
+    emit('update:error', result ?? '')
+}
+
+// Watchers
+watch(
+    () => props.modelValue,
+    value => {
+        if (validationMode.value === FormValidationMode.BLUR && props.validator) {
+            const result = props.validator(value)
+            emit('update:error', result ?? '')
+        }
+    }
+)
+</script>

package/components/forms/fields/DataField.vue

@@ -0,0 +1,99 @@
+<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>
+
+        <template v-if="!$slots.default">
+            <template v-if="!isEmpty">
+                <div 
+                    v-if="text"
+                    class="flex gap-2 items-center"
+                >
+                    <p 
+                        :class="[
+                            'text-sm',
+                        ]"
+                    >
+                        {{ text }}
+                    </p>
+
+                    <ActionIconButton 
+                        v-if="hasCopyToClipboardButton"
+                        icon="mdiContentCopy"
+                        :size="ButtonSize.XS"
+                        @click="copyToClipboard(text.toString(), copyToClipboardMessage)"
+                    />
+                </div>
+            </template>
+            <template v-else>
+                <p 
+                    :class="[
+                        'text-sm text-text-neutral-subtle',
+                    ]"
+                >
+                    {{ emptyText }}
+                </p>
+            </template>
+        </template>
+
+        <!-- Slot for other type of items -->
+        <slot />
+       
+        <!-- Help Text -->
+        <p 
+            v-if="helpText"
+            :class="[ 
+                'text-xs text-left', 
+                'text-text-neutral-subtle',
+            ]" 
+        >
+            {{ helpText }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    id: { 
+        type: String as PropType<string>, 
+        required: true, 
+    },
+    label: String as PropType<string>,
+    text: [String, Number] as PropType<string | number>,
+    emptyText: {
+        type: String as PropType<string>,
+        default: 'Not defined'
+    },
+    helpText: String as PropType<string>,
+    hasCopyToClipboardButton: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    copyToClipboardMessage: {
+        type: String as PropType<string>,
+        default: 'Copied to clipboard'
+    },
+})
+
+// Computed
+const isEmpty = computed(() => {
+    return props.text === '' || props.text === null || props.text === undefined || props.text === 0
+})
+</script>

package/components/forms/fields/FileUploadField.vue

@@ -0,0 +1,326 @@
+<template>
+    <div :class="['flex flex-col', 'w-full', 'gap-2']">
+        <!-- Label -->
+        <label
+            v-if="label"
+            :for="id"
+            :class="['text-sm', 'font-semibold', 'text-left', hasError && 'text-text-error']"
+        >
+            {{ label }}
+        </label>
+
+        <!-- Dropzone Container -->
+        <div class="flex w-full gap-4">
+            <div
+                v-if="showPreview && previewImageUrl && selectedFiles.length === 0"
+                :class="[
+                    'flex flex-col items-center gap-2',
+                    'border border-border-default rounded-lg p-2',
+                    'bg-background-neutral-subtle',
+                    previewContainerClasses,
+                ]"
+            >
+                <img
+                    :src="previewImageUrl"
+                    :alt="label || 'Preview'"
+                    class="w-full h-full object-cover rounded-md"
+                >
+            </div>
+
+            <div
+                :class="[
+                    'flex flex-col gap-2',
+                    showPreview && previewImageUrl && selectedFiles.length === 0
+                        ? 'flex-1'
+                        : 'w-full',
+                ]"
+            >
+                <Vue3Dropzone
+                    :key="dropzoneKey"
+                    v-model="selectedFiles"
+                    :multiple
+                    :accept="normalizedAccept"
+                    :maxFileSize
+                    :maxFiles
+                    :disabled
+                    :height="selectedFiles.length === 0 ? 'auto' : undefined"
+                    :class="['w-full']"
+                    @error="handleError"
+                >
+                    <template #placeholder-img>
+                        <MdiIcon
+                            :icon="icon"
+                            preserveAspectRatio="xMidYMid meet"
+                            class="min-w-[40px] min-h-[40px] aspect-square text-icon-default"
+                        />
+                    </template>
+                    <template #title>
+                        <p class="text-center text-sm text-text-default font-medium">
+                            {{ computedTitleText }}
+                        </p>
+                    </template>
+                    <template #button="{ fileInput }">
+                        <div class="w-full flex justify-center my-4">
+                            <ActionButton
+                                :text="computedButtonText"
+                                :styleType="ButtonStyleType.PRIMARY_BRAND_SOFT"
+                                :disabled="disabled"
+                                @click="fileInput?.click()"
+                            />
+                        </div>
+                    </template>
+                    <template #description>
+                        <p class="text-xs text-text-neutral-subtle text-center">
+                            {{ acceptedFileTypes }} {{ upToText }} {{ maxFileSize }}MB
+                        </p>
+                    </template>
+                    <!-- <template v-if="!isImageFile" #preview>
+                        <div class="w-full flex flex-col gap-2">
+                            <div
+                                v-for="(file, index) in selectedFiles"
+                                :key="index"
+                                class="flex flex-row gap-3 p-3 border border-border-default rounded-md bg-background-neutral w-full"
+                            >
+                                <div class="flex items-start justify-center pt-1">
+                                    <MdiIcon 
+                                        icon="mdiFileDocumentOutline" 
+                                        size="24"
+                                        class="text-icon-default min-w-[24px]" 
+                                    />
+                                </div>
+
+                                <div class="flex flex-col flex-1 overflow-hidden">
+                                    <p class="text-sm font-medium break-words whitespace-normal leading-snug mt-1.5 select-none">
+                                        {{ file.name || (file as any)?.file?.name || 'Unnamed file' }}
+                                    </p>
+                                </div>
+
+                                <ActionIconButton
+                                    icon="mdiClose"
+                                    :styleType="ButtonStyleType.DELETE_FILLED"
+                                    :size="ButtonSize.SM"
+                                    @click="removeFile(index)"
+                                />
+                            </div>
+                        </div>
+                    </template> -->
+                </Vue3Dropzone>
+
+                <!-- Help Text -->
+                <p
+                    v-if="hasError || helpText"
+                    :class="[
+                        'text-xs text-left',
+                        hasError ? 'text-text-error' : 'text-text-neutral-subtle',
+                    ]"
+                >
+                    {{ hasError ? error : helpText }}
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Imports
+//@ts-ignore
+import Vue3Dropzone from '@jaxtheprime/vue3-dropzone'
+import '@jaxtheprime/vue3-dropzone/dist/style.css'
+
+// Props
+const props = defineProps({
+    id: {
+        type: String as PropType<string>,
+        required: true,
+    },
+    label: String as PropType<string>,
+    title: {
+        type: String as PropType<string>,
+        default: undefined,
+    },
+    helpText: String as PropType<string>,
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiUploadOutline',
+    },
+    buttonText: String as PropType<string>,
+    upToText: {
+        type: String as PropType<string>,
+        default: 'up to',
+    },
+    modelValue: {
+        type: Array as () => File[],
+        default: () => [],
+    },
+    validator: {
+        type: Function as PropType<(value: unknown) => string | null>,
+        default: () => null,
+    },
+    error: {
+        type: String as PropType<string>,
+        default: '',
+    },
+    disabled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    required: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    multiple: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    accept: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: () => ['application/pdf'],
+    },
+    maxFileSize: {
+        type: Number as PropType<number>,
+        default: 5,
+    },
+    maxFiles: {
+        type: Number as PropType<number>,
+        default: 1,
+    },
+    fileUploadErrorMessage: {
+        type: String as PropType<string>,
+        default: 'The size or format of one ore more files is incorrect.',
+    },
+    showPreview: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    previewImageUrl: String as PropType<string>,
+    previewContainerClasses: {
+        type: String as PropType<string>,
+        default: 'w-[120px] h-[120px] min-w-[120px]',
+    },
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'update:error'])
+
+// States
+const dropzoneKey = ref(0) // Used to re-render the Dropzone if invalid filetype is passed
+
+// Composables
+const validationMode = useInjectedValidationMode()
+
+// Initialize toast
+const { $toast } = useNuxtApp()
+
+// Computed
+const hasError = computed(() => props.error !== '')
+
+// Used to check if the file is an image or not
+const isImageFile = computed(() => {
+    const accepted = Array.isArray(props.accept) ? props.accept : [props.accept]
+
+    const acceptsImages = accepted.some(type =>
+        typeof type === 'string' && type.startsWith('image/')
+    )
+
+    if (!acceptsImages) return false
+
+    return selectedFiles.value.length > 0 &&
+        selectedFiles.value.every(file => {
+            const realFile = (file as any)?.file || file
+            return realFile?.type?.startsWith('image/')
+        })
+})
+
+// Converts Array of strings into a string
+const normalizedAccept = computed(() => {
+    return Array.isArray(props.accept) ? props.accept.join(',') : props.accept
+})
+
+// Used for description
+const acceptedFileTypes = computed(() => {
+    return (Array.isArray(props.accept) ? props.accept : [props.accept])
+        .map(ext => {
+            // Extract file extension from MIME type
+            const match = ext.match(/\/([a-zA-Z0-9]+)/)
+            return match ? match[1].toUpperCase() : ext.toUpperCase()
+        })
+        .join(', ')
+})
+
+const computedTitleText = computed(() => {
+    if (props.showPreview && props.previewImageUrl && selectedFiles.value.length === 0) {
+        return props.title || 'Upload a new file to replace current one'
+    }
+
+    if (!props.title) {
+        if (props.multiple) return 'Drag & drop files here or click to upload'
+        else return 'Drag & drop a file here or click to upload'
+    } else return props.title
+})
+
+const computedButtonText = computed(() => {
+    if (props.showPreview && props.previewImageUrl && selectedFiles.value.length === 0) {
+        return props.buttonText || 'Replace file'
+    }
+
+    if (!props.buttonText) {
+        if (props.multiple) return 'Upload files'
+        else return 'Upload a file'
+    } else return props.buttonText
+})
+
+const selectedFiles = computed({
+    get: () => props.modelValue,
+    set: (newFiles: File[]) => {
+        emit('update:modelValue', newFiles)
+
+        if (props.required) {
+            runValidation()
+        }
+
+        if (newFiles.length === 0) {
+            dropzoneKey.value++ // This forces Vue3Dropzone to re-render
+        }
+    },
+})
+
+// Handlers
+const handleError = (error: File[]) => {
+    if (error) {
+        $toast.error(props.fileUploadErrorMessage, { toastId: 'files-error' })
+    }
+}
+
+
+// Validation logic
+const runValidation = () => {
+    if (!props.required || !props.validator) return
+
+    const result = props.validator(props.modelValue)
+
+    emit('update:error', result ?? '')
+}
+
+
+watch(selectedFiles, newFiles => {
+    if (props.required && selectedFiles && validationMode.value === FormValidationMode.BLUR) {
+        runValidation()
+    }
+
+    const hasInvalidFile = newFiles.some(file => {
+        const actualFile = (file as any).file || file
+
+        const isMimeAccepted = Array.isArray(props.accept)
+            ? props.accept.includes(actualFile.type)
+            : actualFile.type === props.accept
+
+        return !isMimeAccepted
+    })
+
+    // If one file is invalid, clears the selected files and forces Dropzone re-render
+    if (hasInvalidFile) {
+        emit('update:modelValue', [])
+        dropzoneKey.value++
+    }
+})
+</script>