@caipira/tamandua 0.0.1

package/components/Dropdown/Dropdown.vue

@@ -0,0 +1,258 @@
+<script lang="ts" setup>
+import { SelectOption } from "@/types/form";
+
+import { getCurrentInstance, ref } from "vue";
+
+export interface SelectEvent {
+    index: number;
+    option: SelectOption;
+    hold: boolean;
+}
+
+defineOptions({ name: "TDropdown" });
+
+const props = withDefaults(
+    defineProps<{
+        items?: SelectOption[];
+        owner?: string;
+        multiple?: boolean;
+        isVisible?: boolean;
+
+        optionMarginClass?: string;
+        optionPaddingClass?: string;
+        optionRoundnessClass?: string;
+        wrapperRoundnessClass?: string;
+        wrapperPaddingClass?: string;
+    }>(),
+    {
+        items: () => [],
+        multiple: false,
+        isVisible: false,
+
+        optionMarginClass: "",
+        optionPaddingClass: "py-2 px-2",
+        optionRoundnessClass: "",
+        wrapperRoundnessClass: "rounded-md",
+        wrapperPaddingClass: "",
+    },
+);
+
+const emit = defineEmits<{
+    (e: "change", val: SelectEvent): void;
+    (e: "end-reached"): void;
+    (e: "created", val: ReturnType<typeof getCurrentInstance>): void;
+}>();
+
+const current = ref<number>(-1);
+const listRef = ref<InstanceType<typeof HTMLUListElement> | null>(null);
+const itemRefs = ref<InstanceType<typeof HTMLUListElement>[]>([]);
+const movementSource = ref<"mouse" | "keyboard">("keyboard");
+
+const onSelect = (
+    index: number = current.value,
+    option: SelectOption = props.items[index],
+    event: MouseEvent | undefined = undefined,
+) => {
+    event?.stopPropagation();
+
+    emit("change", {
+        index,
+        option,
+        hold: event?.ctrlKey ?? false,
+    });
+
+    if (option.action) {
+        option.action();
+    }
+};
+
+const listen = (e: KeyboardEvent) => {
+    if (!props.isVisible) {
+        return false;
+    }
+
+    e.preventDefault();
+
+    movementSource.value = "keyboard";
+
+    switch (e.key) {
+        case "ArrowUp":
+        case "ArrowDown":
+            return move(e);
+        case "Enter":
+            return onSelect();
+    }
+};
+
+const move = (e: KeyboardEvent) => {
+    const down = e.key === "ArrowDown";
+    const amountOfItems = props.items.length;
+
+    let newIndex = current.value;
+
+    const isNotAnOption = (): boolean => {
+        if (!props.items[newIndex]) {
+            return false;
+        }
+
+        return (
+            "isGroupLabel" in props.items[newIndex] &&
+            (props.items[newIndex].isGroupLabel as boolean)
+        );
+    };
+
+    const increase = () => {
+        if (newIndex === amountOfItems - 1) {
+            newIndex = 0; // If at the last item, jump to the first item
+        } else {
+            newIndex++; // Move to the next item
+        }
+    };
+
+    const decrease = () => {
+        if (newIndex === 0) {
+            newIndex = amountOfItems - 1; // If at the first item, jump to the last item
+        } else {
+            newIndex--; // Move to the previous item
+        }
+    };
+
+    if (down) {
+        do increase();
+        while (isNotAnOption());
+    } else {
+        do decrease();
+        while (isNotAnOption());
+    }
+
+    if (newIndex > -1 && newIndex < amountOfItems) {
+        current.value = newIndex;
+    }
+
+    const ul = listRef.value as HTMLElement;
+    const li = itemRefs.value[current.value] as HTMLUListElement;
+    const liPos = li.offsetTop;
+    const liHeight = li.offsetHeight;
+    const ulHeight = ul.offsetHeight;
+    const scroll = ul.scrollTop;
+
+    let height = 0;
+
+    li.focus();
+
+    if (liPos === 0 || scroll === 0) {
+        height = liPos - ulHeight + liHeight;
+    } else if (down && liPos + liHeight > ulHeight + scroll) {
+        height = scroll + liHeight;
+    } else if (!down && liPos < scroll) {
+        height = scroll - liHeight;
+    } else {
+        return true;
+    }
+
+    ul.scroll({ top: height });
+
+    return true;
+};
+
+const onScrollEnd = (e: MouseEvent) => {
+    const el = e.target as HTMLElement;
+    const li = itemRefs.value[0] as HTMLElement;
+
+    if (!el || !li) {
+        return;
+    }
+
+    if (el.scrollTop + el.clientHeight + li.offsetHeight >= el.scrollHeight) {
+        emit("end-reached");
+    }
+};
+
+defineExpose({ move });
+</script>
+
+<template>
+    <ul
+        ref="listRef"
+        role="listbox"
+        class="text-left max-h-60 min-w-[12rem] z-10 overflow-y-auto scrollbar select-none floatable"
+        :class="[props.wrapperRoundnessClass, props.wrapperPaddingClass]"
+        @scrollend="onScrollEnd"
+        @mousemove="() => (movementSource = 'mouse')"
+        @keydown="listen"
+    >
+        <!-- Empty placeholder -->
+        <li
+            v-if="items.length === 0"
+            role="option"
+            aria-disabled="true"
+            class="whitespace-nowrap text-gray-400"
+            :class="[
+                props.optionPaddingClass,
+                props.optionMarginClass,
+                props.optionRoundnessClass,
+            ]"
+        >
+            Nothing here
+        </li>
+
+        <template
+            v-else
+            v-for="(option, i) in items"
+            :key="i"
+        >
+            <!-- Group label -->
+            <li
+                v-if="option.isGroupLabel"
+                class="text-xs font-bold tracking-wider text-neutral-600"
+                :class="[
+                    props.optionPaddingClass,
+                    props.optionMarginClass,
+                    props.optionRoundnessClass,
+                ]"
+                ref="itemRefs"
+            >
+                {{ option.label }}
+            </li>
+
+            <!-- Dropdown item -->
+            <li
+                v-else
+                :class="{
+                    'bg-hover': i === current && movementSource === 'keyboard',
+                    'hover:bg-hover': movementSource === 'mouse',
+                    [props.optionMarginClass]: true,
+                    [props.optionPaddingClass]: true,
+                    [props.optionRoundnessClass]: true,
+                }"
+                class="flex text-base cursor-pointer whitespace-nowrap items-center focus-visible:outline-none"
+                role="option"
+                ref="itemRefs"
+                :tabindex="0"
+                :aria-selected="i === current"
+                @keydown.enter="onSelect(i, option)"
+                @click="(e) => onSelect(i, option, e)"
+            >
+                <!-- Slot for custom renderer -->
+                <slot
+                    v-if="!!$slots.default"
+                    v-bind="option"
+                />
+
+                <!-- Default renderer -->
+                <div
+                    v-else
+                    class="inline-flex items-center input-label"
+                >
+                    <t-icon
+                        v-if="option.icon"
+                        :icon="option.icon"
+                        class="mr-2"
+                        size="xs"
+                    />
+                    {{ option.label }}
+                </div>
+            </li>
+        </template>
+    </ul>
+</template>

package/components/Dropdown/index.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from "vue";
+import registerComponent from "@/plugins/register-component";
+
+import Dropdown from "./Dropdown.vue";
+
+export default {
+    install(app: App) {
+        registerComponent(app, Dropdown);
+    },
+} as Plugin;
+
+export { Dropdown };

package/components/EventListener/EventListener.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { useSlots } from "vue";
+import { useRender } from "@/composables/useRender";
+
+defineEmits<{
+    (e: "popoverClick"): void;
+}>();
+
+const slots = useSlots();
+
+useRender(() => (slots.default ? slots.default() : [null]));
+</script>

package/components/FileDrop/FileDrop.vue

@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import { ref, inject, computed } from "vue";
+
+defineOptions({ name: "TFileDrop" });
+
+const props = withDefaults(
+    defineProps<{
+        types?: any;
+        multiple?: boolean;
+        modelValue?: File[];
+    }>(),
+    {
+        multiple: true,
+        modelValue: () => [],
+    },
+);
+
+const emit = defineEmits<{
+    (e: "update:modelValue", val: any): void;
+}>();
+
+const files = ref<File[]>([]);
+const formStyle = inject("formStyle", { label: "", input: "" });
+
+const hasFile = computed<boolean>(() => {
+    return props.modelValue.length > 0;
+});
+
+const extensions = computed(() => {
+    switch (props.types) {
+        default:
+            return "SVG, PNG, JPG or GIF";
+    }
+});
+
+const onDeleteFile = (fileName: string) => {};
+
+const onFileChange = (e: Event) => {
+    e.stopPropagation();
+
+    const element: HTMLInputElement = e.target as HTMLInputElement;
+    const localFiles: FileList | null = element.files;
+
+    if (!localFiles || !localFiles.length) {
+        return;
+    }
+
+    files.value = Array.from(localFiles);
+    emit("update:modelValue", localFiles);
+};
+</script>
+
+<template>
+    <div :class="{ [formStyle.input]: true }">
+        <div class="flex items-center justify-center w-full">
+            <label
+                for="dropzone-file"
+                class="flex flex-col items-center justify-center w-full h-full cursor-pointer border input-border border-dashed input-roundness input-text-color input-bg-color hover:bg-caipira-secondary"
+            >
+                <div
+                    v-if="hasFile"
+                    class="my-5"
+                >
+                    <div
+                        v-for="file in files"
+                        :key="file.name"
+                        class="flex items-center"
+                    >
+                        <img
+                            class="fs mr-1"
+                            :class="[file.name.split('.').pop()]"
+                        />
+                        <span class="text-xs">{{ file.name }}</span>
+                        <t-icon
+                            icon="close"
+                            class="ml-2 text-red-400"
+                            size="sm"
+                            role="button"
+                            @click="() => onDeleteFile(file.name)"
+                        />
+                    </div>
+                </div>
+                <div
+                    v-else
+                    class="flex items-center justify-evenly my-4 w-full"
+                >
+                    <t-icon
+                        class="dark:fill-gray-400"
+                        icon="upload"
+                        role="button"
+                        size="lg"
+                    />
+                    <div class="text-center">
+                        <p
+                            class="mb-2 text-sm text-gray-500 dark:text-gray-400"
+                        >
+                            <span class="font-semibold">Click to upload</span>
+                            or drag and drop
+                        </p>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">
+                            {{ extensions }}
+                        </p>
+                    </div>
+                </div>
+
+                <input
+                    id="dropzone-file"
+                    type="file"
+                    class="hidden"
+                    :multiple="multiple"
+                    @change="onFileChange"
+                />
+            </label>
+        </div>
+    </div>
+</template>

package/components/FileDrop/index.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from "vue";
+import registerComponent from "@/plugins/register-component";
+
+import FileDrop from "./FileDrop.vue";
+
+export default {
+    install(app: App) {
+        registerComponent(app, FileDrop);
+    },
+} as Plugin;
+
+export { FileDrop };

package/components/Form/Form.spec.ts

@@ -0,0 +1,72 @@
+import { FormDataTypes } from "@/enums/form";
+
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import Form from "./Form.vue";
+
+describe("Form.vue", () => {
+    it("should render the form element", async () => {
+        const wrapper = mount(Form, {
+            props: {},
+        });
+
+        expect(wrapper.find("form").exists()).toBe(true);
+    });
+
+    it("should render the submit button regardless of the value of the show-submit prop", async () => {
+        const wrapper = mount(Form, {
+            props: {
+                showSubmit: false,
+            },
+        });
+
+        expect(wrapper.find('input[type="submit"]').exists()).toBe(true);
+    });
+
+    it('should emit the "submit" event with form data on submit', async () => {
+        const wrapper = mount(Form, {
+            props: {
+                schema: {
+                    name: FormDataTypes.String,
+                },
+            },
+        });
+
+        await wrapper.find('input[type="submit"]').trigger("click");
+        expect(wrapper.emitted()).toHaveProperty("submit");
+
+        const payload = (wrapper.emitted().submit as any)[0][0];
+        expect(payload).toStrictEqual({
+            isValid: true,
+            form: new FormData(),
+        });
+    });
+
+    it("should set value correctly using setValue method", async () => {
+        const wrapper = mount(Form, {
+            props: {
+                schema: {
+                    name: FormDataTypes.String,
+                },
+            },
+        });
+
+        wrapper.vm.setValue("name", "Bob");
+        expect(wrapper.vm.form).toEqual({ name: "Bob" });
+    });
+
+    it("should set values correctly using setValues method", async () => {
+        const wrapper = mount(Form, {
+            props: {
+                schema: {
+                    name: FormDataTypes.String,
+                    age: FormDataTypes.Number,
+                },
+            },
+        });
+
+        wrapper.vm.setValues({ name: "Alice", age: 30 });
+        expect(wrapper.vm.form).toEqual({ name: "Alice", age: 30 });
+    });
+});

package/components/Form/Form.vue

@@ -0,0 +1,134 @@
+<script lang="ts" setup generic="T extends FormSchema">
+import { ElementVariant } from "@/enums/ui";
+import type { ButtonProps } from "@/components/Button/Button.vue";
+import { FormSubmissionFormat } from "@/enums/form";
+import {
+    FormStyle,
+    FormSchema,
+    FormInstance,
+    ValidationResult,
+} from "@/types/form";
+
+import { transformForm } from "@/services/form/form-transformer";
+import { ref, provide, reactive, watch } from "vue";
+
+defineOptions({ name: "TForm" });
+
+const props = withDefaults(
+    defineProps<{
+        id?: string;
+        idKey?: string;
+        schema?: T;
+        formStyle?: FormStyle;
+        showSubmit?: boolean;
+        submitLabel?: string;
+        buttonProps?: ButtonProps;
+        buttonVariant?: ElementVariant;
+        submissionFormat?: FormSubmissionFormat;
+        buttonWrapperClasses?: string;
+    }>(),
+    {
+        id: "",
+        idKey: "id",
+        schema: () => ({}) as T,
+        formStyle: () => ({}),
+        showSubmit: false,
+        submitLabel: "Submit",
+        buttonVariant: ElementVariant.PRIMARY,
+        submissionFormat: FormSubmissionFormat.FormData,
+        buttonWrapperClasses: "",
+    },
+);
+
+const emit = defineEmits<{
+    (e: "submit", val: ValidationResult<FormSubmissionFormat>): void;
+    (e: "change", val: FormInstance<T>): void;
+}>();
+
+const form = reactive<FormInstance<T>>({} as FormInstance<T>);
+const formReference = ref<HTMLFormElement | null>(null);
+
+const onSubmit = async () => {
+    emit("submit", await submit());
+};
+
+const submit = async (): Promise<
+    ValidationResult<typeof props.submissionFormat>
+> => {
+    const localForm: FormInstance<T> = { ...form } as FormInstance<T>;
+
+    if (props.id) {
+        localForm[props.idKey as keyof T] = props.id;
+    }
+
+    const transformedForm = await transformForm(
+        localForm,
+        props.schema,
+        props.submissionFormat,
+    );
+
+    return {
+        isValid: true,
+        form: transformedForm,
+    };
+};
+
+const reset = () => {
+    Object.assign(form, {});
+};
+
+const setValues = (values: Partial<FormInstance<T>>) => {
+    for (const [key, value] of Object.entries(values)) {
+        form[key as keyof T] = value;
+    }
+};
+
+const getValues = () => {
+    return form;
+};
+
+const setValue = <K extends keyof T>(name: K, value: T[K]) => {
+    form[name] = value;
+};
+
+const getValue = (key: string) => {
+    return form[key];
+};
+
+watch(form as FormInstance<T>, (newValue: FormInstance<T>) => {
+    emit("change", newValue);
+});
+
+provide("formStyle", props.formStyle);
+
+defineExpose({
+    submit: onSubmit,
+    reset,
+    setValues,
+    getValues,
+    setValue,
+    getValue,
+});
+</script>
+
+<template>
+    <form
+        @submit="onSubmit"
+        ref="formReference"
+    >
+        <slot :form="form" />
+        <div :class="[props.buttonWrapperClasses]">
+            <!-- Do not use v-if as the element must exist in the DOM
+                in order for the form submission with enter key to work -->
+            <t-button
+                v-show="props.showSubmit"
+                v-bind="props.buttonProps"
+                type="submit"
+                class="mt-4"
+                :variant="props.buttonVariant"
+                :label="props.submitLabel"
+                @click="onSubmit"
+            />
+        </div>
+    </form>
+</template>

package/components/Form/index.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from "vue";
+import registerComponent from "@/plugins/register-component";
+
+import Form from "./Form.vue";
+
+export default {
+    install(app: App) {
+        registerComponent(app, Form);
+    },
+} as Plugin;
+
+export { Form };