@caipira/tamandua 0.0.2 → 0.0.5

package/components/ButtonCopy/ButtonCopy.vue

@@ -1,61 +0,0 @@
-<template>
-    <t-icon-button
-        :is-disabled="isLoading || props.isDisabled"
-        icon="copy"
-        size="xs"
-        ref="buttonRef"
-        @click="onCopy"
-    />
-</template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-import { gsap } from "gsap";
-import copyToClipboard from "@/services/clipboard";
-
-import UiButton from "@/components/Button/Button.vue";
-
-defineOptions({ name: "TButtonCopy" });
-
-const buttonRef = ref<InstanceType<typeof UiButton> | null>(null);
-const isLoading = ref<boolean>(false);
-
-type Text = (() => Promise<string>) | string;
-
-const props = withDefaults(
-    defineProps<{
-        text: Text;
-        isDisabled?: boolean;
-    }>(),
-    {
-        isDisabled: false,
-    },
-);
-
-const onCopy = async (e: MouseEvent) => {
-    isLoading.value = true;
-
-    e.stopPropagation();
-
-    const text =
-        typeof props.text === "function" ? await props.text() : props.text;
-    const copyElement = buttonRef.value?.iconReference?.reference;
-
-    await copyToClipboard(text);
-
-    if (copyElement) {
-        gsap.to(copyElement, {
-            scale: 4,
-            yoyo: true,
-            opacity: 0,
-            duration: 0.2,
-            ease: "power3.easeInOut",
-            onComplete: () => {
-                gsap.set(copyElement, { opacity: 1, scale: 1 });
-            },
-        });
-    }
-
-    isLoading.value = false;
-};
-</script>

package/components/ButtonCopy/index.ts

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

package/components/Drawer/Drawer.vue

@@ -1,102 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from "vue";
-
-import Backdrop from "@/components/Backdrop/Backdrop.vue";
-
-defineOptions({ name: "TDrawer" });
-
-const props = withDefaults(
-    defineProps<{
-        title?: string;
-        style?: { footer: string };
-        direction?: "rtl" | "ltr";
-        showHeader?: boolean;
-    }>(),
-    {
-        title: "",
-        style: () => ({
-            footer: "",
-        }),
-        direction: "rtl",
-        showHeader: true,
-    },
-);
-
-const emit = defineEmits<{
-    (e: "closed"): void;
-}>();
-
-const modal = ref<InstanceType<typeof HTMLElement> | null>(null);
-
-const onClose = (e: MouseEvent | KeyboardEvent) => {
-    e.stopPropagation();
-
-    emit("closed");
-};
-
-onMounted(() => {
-    modal.value?.focus();
-});
-</script>
-
-<template>
-    <div
-        class="fixed inset-0 flex items-center z-10"
-        tabindex="0"
-        ref="modal"
-        @keyup.esc="onClose"
-    >
-        <Backdrop @click="onClose" />
-        <div
-            class="w-[38rem] absolute inset-y-0 z-20 flex flex-col bg-caipira-primary drawer"
-            :class="{
-                'right-0 drop-shadow-lg': props.direction === 'ltr',
-                'left-0': props.direction === 'rtl',
-            }"
-        >
-            <div
-                v-if="props.showHeader"
-                class="flex justify-between items-center p-4 border-b border-color"
-            >
-                <div v-if="$slots.header">
-                    <slot name="header" />
-                </div>
-                <span
-                    v-else
-                    class="inline-block text-base"
-                >
-                    {{ props.title }}
-                </span>
-                <t-icon
-                    icon="close"
-                    role="button"
-                    @click="onClose"
-                    size="sm"
-                />
-            </div>
-            <div
-                class="flex flex-col flex-1 relative overflow-y-auto scrollbar"
-            >
-                <slot />
-            </div>
-            <div
-                v-if="$slots.footer"
-                class="p-4 border-t border-color"
-                :class="{
-                    [style.footer]: true,
-                }"
-            >
-                <slot name="footer" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.drawer {
-    box-shadow:
-        rgba(0, 0, 0, 0.2) 0px 8px 10px -5px,
-        rgba(0, 0, 0, 0.14) 0px 16px 24px 2px,
-        rgba(0, 0, 0, 0.12) 0px 6px 30px 5px;
-}
-</style>

package/components/Drawer/index.ts

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

package/components/Dropdown/Dropdown.vue

@@ -1,258 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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

@@ -1,12 +0,0 @@
-<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

@@ -1,116 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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 });
-    });
-});