@caipira/tamandua 0.0.2 → 0.0.3

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 });
-    });
-});

package/components/Form/Form.vue

@@ -1,134 +0,0 @@
-<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 "@/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

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

package/components/FormItem/FormItem.vue

@@ -1,85 +0,0 @@
-<script lang="ts">
-let localId = 0;
-</script>
-
-<script lang="ts" setup>
-import { useSlots, computed, provide } from "vue";
-
-defineOptions({ name: "TFormItem" });
-
-const props = withDefaults(
-    defineProps<{
-        label?: string;
-        rules?: any;
-        inline?: boolean;
-    }>(),
-    {
-        inline: true,
-    },
-);
-
-const id = `formitem_${++localId}`;
-const slots = useSlots();
-const errors: string[] = [];
-
-const isCheckbox = computed<boolean>(() => {
-    if (!slots || !slots.default) {
-        return false;
-    }
-
-    const slot: any = slots?.default();
-    if (!slot) {
-        return false;
-    }
-
-    return (slot[0].type?.props?.key?.default ?? "") === "checkbox";
-});
-
-provide("id", id);
-</script>
-
-<template>
-    <div class="w-full">
-        <div
-            class="flex items-start my-3"
-            :class="{ 'flex-col': !props.inline }"
-        >
-            <t-graphy-label
-                v-if="!isCheckbox && (props.label || slots.label)"
-                :text="props.label"
-                :for="id"
-                :class="{
-                    'cursor-pointer': isCheckbox,
-                }"
-                class="text-right"
-            >
-                <slot name="label" />
-            </t-graphy-label>
-            <slot />
-            <t-graphy-label
-                v-if="isCheckbox && (props.label || slots.label)"
-                :invert-controls="true"
-                :text="props.label"
-                :for="id"
-                :class="{
-                    'cursor-pointer': isCheckbox,
-                }"
-                class="text-left"
-            >
-                <slot name="label" />
-            </t-graphy-label>
-        </div>
-        <div
-            v-if="errors"
-            class="float-right"
-        >
-            <span
-                v-for="(error, index) in errors"
-                class="text-sm text-red-600"
-                :key="index"
-            >
-                {{ error }}
-            </span>
-        </div>
-    </div>
-</template>

package/components/FormItem/index.ts

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

package/components/GraphyEmpty/GraphyEmpty.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-defineOptions({ name: "TGraphyEmpty" });
-
-const props = withDefaults(
-    defineProps<{
-        text?: string;
-    }>(),
-    {},
-);
-</script>
-
-<template>
-    <span class="text-gray-400 select-none">
-        {{ props.text }}
-    </span>
-</template>

package/components/GraphyEmpty/index.ts

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

package/components/GraphyLabel/GraphyLabel.vue

@@ -1,34 +0,0 @@
-<script lang="ts" setup>
-import { inject } from "vue";
-
-defineOptions({ name: "TGraphyLabel" });
-
-const props = withDefaults(
-    defineProps<{
-        text?: string;
-        invertControls?: boolean;
-        injectFormStyle?: boolean;
-    }>(),
-    {
-        invertControls: false,
-        injectFormStyle: true,
-    },
-);
-
-const formStyle = inject("formStyle", { input: "", label: "" });
-</script>
-
-<template>
-    <label
-        class="input-label"
-        :class="{
-            [formStyle.label]: props.injectFormStyle && !props.invertControls,
-            [formStyle.input]: props.injectFormStyle && props.invertControls,
-            'mr-2': props.injectFormStyle && !props.invertControls,
-            'ml-2': props.injectFormStyle && props.invertControls,
-        }"
-    >
-        {{ props.text }}
-        <slot />
-    </label>
-</template>

package/components/GraphyLabel/index.ts

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

package/components/GraphyPrice/GraphyPrice.story.ts

@@ -1,37 +0,0 @@
-import { GraphyPriceVariant } from "@/enums/ui";
-
-export default {
-    title: "Typography",
-};
-
-const Template1 = (args: any) => ({
-    setup() {
-        return { args };
-    },
-    template: `
-        <t-graphy-price
-            :value="args.value"
-            :currency="args.currency"
-            :variant="args.variant"
-            class="text-2xl"
-        />
-  `,
-});
-
-export const Increase: any = Template1.bind({});
-Increase.args = {
-    value: 10.99,
-    variant: GraphyPriceVariant.INCREASE,
-    currency: {
-        symbol: "USD",
-    },
-};
-
-export const Decrease: any = Template1.bind({});
-Decrease.args = {
-    value: 10.99,
-    variant: GraphyPriceVariant.DECREASE,
-    currency: {
-        symbol: "USD",
-    },
-};

package/components/GraphyPrice/GraphyPrice.vue

@@ -1,65 +0,0 @@
-<script lang="ts" setup>
-import { GraphyPriceVariant } from "@/enums/ui";
-
-import gsap from "gsap";
-import { useI18n } from "vue-i18n";
-import { reactive, watch } from "vue";
-
-defineOptions({ name: "TGraphyPrice" });
-
-const props = withDefaults(
-    defineProps<{
-        value: number;
-        currency: string;
-        animate?: boolean;
-        variant?: `${GraphyPriceVariant}`;
-        priceColor?: string;
-    }>(),
-    {
-        animate: false,
-        variant: GraphyPriceVariant.DEFAULT,
-        priceColor: "color-text",
-    },
-);
-
-const { n } = useI18n();
-const price = reactive<{ value: number }>({ value: 0 });
-
-watch(
-    () => props.value,
-    (newValue) => {
-        if (!props.animate) {
-            price.value = newValue;
-
-            return;
-        }
-
-        gsap.to(price, {
-            duration: 0.5,
-            ease: "power3.in",
-            value: newValue,
-        });
-    },
-    { immediate: true },
-);
-</script>
-
-<template>
-    <span
-        class="tracking-tighter"
-        :class="{
-            'color-caipira-green':
-                props.variant === GraphyPriceVariant.INCREASE ||
-                (props.variant === GraphyPriceVariant.AUTO && price.value > 0),
-            'color-caipira-red':
-                props.variant === GraphyPriceVariant.DECREASE ||
-                (props.variant === GraphyPriceVariant.AUTO && price.value < 0),
-            [props.priceColor]:
-                props.variant === GraphyPriceVariant.DEFAULT ||
-                (props.variant === GraphyPriceVariant.AUTO &&
-                    price.value === 0),
-        }"
-    >
-        {{ n(price.value, "currency", props.currency.toUpperCase()) }}
-    </span>
-</template>

package/components/GraphyPrice/index.ts

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

package/components/GraphySubtitle/GraphySubtitle.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-defineOptions({ name: "TGraphySubtitle" });
-
-const props = withDefaults(
-    defineProps<{
-        text: string;
-        textColor?: string;
-    }>(),
-    {
-        textColor: "color-text",
-    },
-);
-</script>
-
-<template>
-    <h2
-        class="text-2xl font-bold mr-2"
-        :class="[textColor]"
-    >
-        {{ props.text }}
-    </h2>
-</template>

package/components/GraphySubtitle/index.ts

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