@caipira/tamandua 0.0.2 → 0.0.5

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

package/components/GraphyTitle/GraphyTitle.vue

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-defineOptions({ name: "TGraphyTitle" });
-
-const props = defineProps<{
-    text: string;
-}>();
-</script>
-
-<template>
-    <h1 class="color-caipira-primary-inverted text-3xl select-none">
-        {{ props.text }}
-    </h1>
-</template>

package/components/GraphyTitle/index.ts

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

package/components/Icon/Icon.vue

@@ -1,84 +0,0 @@
-<script lang="ts" setup>
-import { Icon, ElementSize } from "@/enums/ui";
-
-import uiService from "@/services/ui";
-import { ref, computed, getCurrentInstance, watch } from "vue";
-
-defineOptions({ name: "TIcon" });
-
-const props = withDefaults(
-    defineProps<{
-        icon: `${Icon}`;
-        role?: string;
-        size?: `${ElementSize}`;
-    }>(),
-    {
-        role: "",
-        size: ElementSize.DEFAULT,
-    },
-);
-
-const content = ref<string>("");
-const instance = getCurrentInstance();
-const reference = ref<InstanceType<typeof HTMLElement> | null>(null);
-
-const isButton = computed<boolean>(() => {
-    return props.role === "button";
-});
-
-const shadowRole = computed<string>(() => {
-    if (props.role !== "") {
-        return props.role;
-    }
-
-    if (instance && uiService.isPopoverActivator(instance)) {
-        return "button";
-    }
-
-    return "";
-});
-
-const onClick = (e: MouseEvent) => {
-    if (instance && uiService.isPopoverActivator(instance)) {
-        uiService.onPopoverActivatorClick(e, instance);
-    }
-};
-
-const refreshContent = async (): Promise<string> => {
-    const content = await import(`../../assets/icons/${props.icon}.svg?raw`);
-
-    return content.default;
-};
-
-watch(
-    () => props.icon,
-    async (newIcon, oldIcon) => {
-        if (newIcon === oldIcon) {
-            return;
-        }
-
-        content.value = await refreshContent();
-    },
-    { immediate: true },
-);
-
-defineExpose({ reference });
-</script>
-
-<template>
-    <i
-        v-html="content"
-        ref="reference"
-        class="inline-block fill-current"
-        :class="{
-            'w-4': size === ElementSize.EXTRA_SMALL,
-            'w-5': size === ElementSize.SMALL,
-            'w-6': size === ElementSize.DEFAULT,
-            'w-10': size === ElementSize.LARGE,
-            'w-12': size === ElementSize.EXTRA_LARGE,
-            'cursor-pointer': isButton,
-        }"
-        :role="shadowRole"
-        @click="onClick"
-    />
-</template>

package/components/Icon/index.ts

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