@caipira/tamandua 0.0.1

package/components/FormItem/FormItem.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/components/IconButton/IconButton.vue

@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import {
+    ButtonType,
+    ElementSize,
+    ElementShape,
+    Icon as EIcon,
+    ElementVariant,
+} from "@/enums/ui";
+
+import uiService from "@/services/ui";
+import { computed, ref, getCurrentInstance } from "vue";
+
+import Icon from "@/components/Icon/Icon.vue";
+
+export type ButtonProps = {
+    to?: any;
+    icon: `${EIcon}`;
+    href?: string;
+    type?: `${ButtonType}`;
+    size?: `${ElementSize}`;
+    label?: string;
+    shape?: `${ElementShape}`;
+    target?: string;
+    variant?: `${ElementVariant}`;
+    multiple?: boolean;
+    isOutline?: boolean;
+    isDisabled?: boolean;
+    injectStyle?: { icon: string };
+    disableStyle?: boolean;
+};
+
+defineOptions({ name: "TIconButton" });
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+    href: "",
+    type: ButtonType.BUTTON,
+    size: ElementSize.DEFAULT,
+    label: "",
+    shape: ElementShape.ROUNDED,
+    target: undefined,
+    variant: ElementVariant.DEFAULT,
+    multiple: false,
+    isOutline: false,
+    isDisabled: false,
+    injectStyle: () => ({ icon: "" }),
+    disableStyle: false,
+});
+
+const emit = defineEmits<{
+    (e: "upload", val: FileList): void;
+}>();
+
+const instance = getCurrentInstance();
+const fileInput = ref<HTMLInputElement>();
+const iconReference = ref<InstanceType<typeof Icon> | null>(null);
+
+const link = computed<string | undefined>(() => {
+    return props.href ? props.href : undefined;
+});
+
+const shadowType = computed<string | undefined>(() => {
+    switch (props.type) {
+        case ButtonType.LINK:
+            return undefined;
+        case ButtonType.FILE:
+            return "button";
+        default:
+            return props.type;
+    }
+});
+
+const value = computed<string | undefined>(() => {
+    return props.type === ButtonType.SUBMIT ? props.label : undefined;
+});
+
+const element = computed<string>(() => {
+    switch (props.type) {
+        case ButtonType.SUBMIT:
+            return "input";
+        case ButtonType.LINK:
+            return "a";
+        case ButtonType.ROUTER_LINK:
+            return "router-link";
+        default:
+            return "button";
+    }
+});
+
+const onClick = (e: MouseEvent): void => {
+    if (instance && uiService.isPopoverActivator(instance)) {
+        uiService.onPopoverActivatorClick(e, instance);
+    }
+
+    if (props.type === ButtonType.SUBMIT) {
+        e.preventDefault();
+    }
+
+    if (props.type === ButtonType.FILE) {
+        fileInput.value?.click();
+    }
+};
+
+const onFileChange = (e: Event) => {
+    e.stopPropagation();
+
+    const element: HTMLInputElement = e.target as HTMLInputElement;
+    const files: FileList | null = element.files;
+
+    if (!files || !files.length) {
+        return;
+    }
+
+    emit("upload", files);
+};
+
+defineExpose({ iconReference });
+</script>
+
+<template>
+    <component
+        :is="element"
+        :type="shadowType"
+        :href="link"
+        :value="value"
+        :to="props.to"
+        :disabled="props.isDisabled"
+        :target="props.target"
+        :class="{
+            'opacity-50': props.isDisabled,
+
+            // Padding
+            'px-1 py-0':
+                !props.disableStyle && props.size === ElementSize.EXTRA_SMALL,
+            'px-1': !props.disableStyle && props.size === ElementSize.SMALL,
+            'px-4 py-2 h-10':
+                !props.disableStyle && props.size === ElementSize.DEFAULT,
+
+            // Shape
+            'rounded-full': props.shape === ElementShape.CIRCLE,
+            'input-roundness': props.shape === ElementShape.ROUNDED,
+
+            // Cursor
+            'cursor-pointer': !props.isDisabled,
+            'cursor-not-allowed': props.isDisabled,
+        }"
+        class="input-outline inline-flex items-center justify-center"
+        role="button"
+        @click="onClick"
+    >
+        <slot />
+        <t-icon
+            ref="iconReference"
+            :size="props.size"
+            :icon="props.icon"
+            :class="{
+                [props.injectStyle.icon]: true,
+            }"
+        />
+        <input
+            v-if="props.type === 'file'"
+            :multiple="props.multiple"
+            @change="onFileChange"
+            type="file"
+            ref="fileInput"
+            class="hidden"
+        />
+    </component>
+</template>

package/components/IconButton/index.ts

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