@caipira/tamandua 0.0.2 → 0.0.3

package/components/Button/Button.vue

@@ -1,230 +0,0 @@
-<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";
-
-defineOptions({ name: "TButton" });
-
-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;
-};
-
-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="{
-            'font-bold': !props.disableStyle,
-            'opacity-50': props.isDisabled,
-
-            // Padding
-            'px-1 py-0':
-                !props.disableStyle && props.size === ElementSize.EXTRA_SMALL,
-            'px-4 h-9': !props.disableStyle && props.size === ElementSize.SMALL,
-            'px-4 py-2 h-10':
-                !props.disableStyle && props.size === ElementSize.DEFAULT,
-
-            // Border
-            border: props.isOutline,
-
-            // Shape
-            'rounded-full': props.shape === ElementShape.CIRCLE,
-            'input-roundness': props.shape === ElementShape.ROUNDED,
-
-            // Cursor
-            'cursor-pointer': !props.isDisabled,
-            'cursor-not-allowed': props.isDisabled,
-
-            // Default color
-            'border-caipira-primary-inverted fill-caipira-primary-inverted':
-                props.variant === ElementVariant.DEFAULT,
-            'bg-transparent color-caipira-primary-inverted hover:bg-caipira-primary-inverted hover:color-caipira-primary hover:fill-white':
-                props.variant === ElementVariant.DEFAULT && props.isOutline,
-            'bg-caipira-primary-inverted color-caipira-primary':
-                props.variant === ElementVariant.DEFAULT && !props.isOutline,
-
-            // Primary color
-            'fill-caipira-primary': props.variant === ElementVariant.PRIMARY,
-            'bg-transparent border-caipira-blue color-caipira-blue hover:bg-caipira-blue hover:color-caipira-primary hover:fill-white':
-                props.variant === ElementVariant.PRIMARY && props.isOutline,
-            'bg-caipira-blue color-caipira-primary':
-                props.variant === ElementVariant.PRIMARY && !props.isOutline,
-
-            // Success color
-            'fill-caipira-green': props.variant === ElementVariant.SUCCESS,
-            'bg-transparent border-caipira-green color-caipira-green hover:bg-caipira-green hover:color-caipira-primary hover:fill-white':
-                props.variant === ElementVariant.SUCCESS && props.isOutline,
-            'bg-caipira-green color-caipira-primary':
-                props.variant === ElementVariant.SUCCESS && !props.isOutline,
-
-            // Warning color
-            'fill-caipira-yellow': props.variant === ElementVariant.WARNING,
-            'bg-transparent border-caipira-yellow color-caipira-yellow hover:bg-caipira-yellow hover:color-caipira-primary hover:fill-white':
-                props.variant === ElementVariant.WARNING && props.isOutline,
-            'bg-caipira-yellow color-caipira-primary':
-                props.variant === ElementVariant.WARNING && !props.isOutline,
-
-            // Danger color
-            'fill-caipira-red': props.variant === ElementVariant.DANGER,
-            'bg-transparent border-caipira-red color-caipira-red hover:bg-caipira-red hover:color-caipira-primary hover:fill-white':
-                props.variant === ElementVariant.DANGER && props.isOutline,
-            'bg-caipira-red color-caipira-primary':
-                props.variant === ElementVariant.DANGER && !props.isOutline,
-
-            // Transparent color
-            'transparent-button': props.variant === ElementVariant.TRANSPARENT,
-        }"
-        class="input-outline inline-flex items-center"
-        role="button"
-        @click="onClick"
-    >
-        <slot />
-        <t-icon
-            v-if="props.icon"
-            ref="iconReference"
-            :size="props.size"
-            :icon="props.icon"
-            :is-outline="props.isOutline"
-            :class="{
-                [props.injectStyle.icon]: true,
-            }"
-        />
-        <span
-            v-if="props.label && props.type !== ButtonType.SUBMIT"
-            :class="{
-                'ml-2': !!props.icon,
-                'text-lg': props.size === ElementSize.LARGE,
-                'text-sm': props.size === ElementSize.SMALL,
-                'text-xs': props.size === ElementSize.EXTRA_SMALL,
-            }"
-            class="whitespace-nowrap"
-            >{{ props.label }}</span
-        >
-        <input
-            v-if="props.type === 'file'"
-            :multiple="props.multiple"
-            @change="onFileChange"
-            type="file"
-            ref="fileInput"
-            class="hidden"
-        />
-    </component>
-</template>
-
-<style scoped>
-.transparent-button:hover {
-    background-color: rgb(from var(--caipira-primary) r g b / 45%);
-}
-</style>

package/components/Button/index.ts

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

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