@caipira/tamandua 0.0.1

package/components/SensitiveInfo/SensitiveInfo.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+defineOptions({ name: "TSensitiveInfo" });
+
+const props = defineProps<{
+    private: boolean;
+}>();
+</script>
+
+<template>
+    <div
+        :class="{
+            'blur-sm': props.private,
+            'filter grayscale': false,
+        }"
+    >
+        <slot />
+    </div>
+</template>

package/components/SensitiveInfo/index.ts

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

package/components/Tab/Tab.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { Tab } from "@/types/ui";
+
+import { ref } from "vue";
+
+defineOptions({ name: "TTab" });
+
+const props = withDefaults(
+    defineProps<{
+        tabs?: Tab[];
+    }>(),
+    {
+        tabs: () => [],
+    },
+);
+
+const activeTabIndex = ref<number>(0);
+</script>
+
+<template>
+    <ul
+        class="flex flex-col md:flex-row flex-wrap rounded-sm list-none mb-6 pt-1 bg-caipira-tertiary"
+        role="tablist"
+    >
+        <li
+            role="presentation"
+            v-for="(tab, index) in props.tabs"
+            :key="index"
+        >
+            <a
+                class="block uppercase py-2 px-4"
+                :class="{
+                    'bg-caipira-primary': index === activeTabIndex,
+                }"
+                href="#"
+                role="tab"
+                aria-selected="true"
+                @click="activeTabIndex = index"
+            >
+                {{ tab.title }}
+            </a>
+        </li>
+    </ul>
+    <div
+        class="tab-content"
+        id="tabs-tabContent"
+    >
+        <div
+            v-for="(tab, index) in props.tabs"
+            :key="index"
+            class=""
+            :class="{ hidden: index !== activeTabIndex }"
+            role="tabpanel"
+        >
+            <slot :name="tab.slot" />
+        </div>
+    </div>
+</template>

package/components/Tab/index.ts

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

package/components/Table/Table.story.ts

@@ -0,0 +1,32 @@
+import { faker } from "@faker-js/faker";
+
+import UITable from "./Table.vue";
+
+export default {
+    components: UITable,
+    title: "Table",
+};
+
+const Template1 = (args: any) => ({
+    components: { UITable },
+    setup() {
+        return { args };
+    },
+    template: `<UITable v-bind="args" />`,
+});
+
+export const Table: any = Template1.bind({});
+Table.args = {
+    loading: false,
+    data: (Array.from({ length: 10 }) as any).map(() => ({
+        id: faker.string.uuid(),
+        name: faker.person.fullName(),
+        email: faker.internet.email(),
+        job: faker.person.jobTitle(),
+    })),
+    columns: [
+        { title: "Name", property: "name" },
+        { title: "Email", property: "email" },
+        { title: "Job", property: "job" },
+    ],
+};

package/components/Table/Table.vue

@@ -0,0 +1,318 @@
+<script lang="ts" setup generic="T extends object">
+import { TableColumn } from "@/types/ui";
+
+import { computed, reactive, ref, useSlots } from "vue";
+
+export type TableProps<T = object> = {
+    data: T[];
+    rowKey?: string;
+    columns: TableColumn[];
+    loading?: boolean;
+    selectable?: boolean;
+    disableStyle?: boolean;
+    stickyHeader?: boolean;
+
+    rowClass?: string;
+    tableDataClass?: string;
+};
+
+defineOptions({ name: "TTable" });
+
+const props = withDefaults(
+    defineProps<{
+        data: T[];
+        rowKey?: string;
+        columns: TableColumn[];
+        loading?: boolean;
+        selectable?: boolean;
+        disableStyle?: boolean;
+        stickyHeader?: boolean;
+
+        rowClass?: string;
+        tableDataClass?: string;
+    }>(),
+    {
+        data: () => [],
+        rowKey: "id",
+        columns: () => [],
+        loading: false,
+        selectable: false,
+        disableStyle: false,
+        stickyHeader: true,
+
+        rowClass: "hover:bg-hover",
+        tableDataClass: "px-2 py-2",
+    },
+);
+
+const emit = defineEmits<{
+    (e: "selected", val: any): void;
+    (e: "row-click", val: any): void;
+}>();
+
+const slots = useSlots();
+const selectedAll = ref<boolean | undefined>(false);
+const selectedRows = ref<any>({});
+const expandedRows = ref<any>({});
+const inSelectionMode = ref<boolean>(false);
+const isIndeterminate = ref<boolean>(false);
+const selectedRowsMeta = reactive<any>({});
+
+const onClickRow = (e: MouseEvent) => {
+    e.stopPropagation();
+};
+
+const columnsLength = computed<number>(() => {
+    return (
+        props.columns.length +
+        (props.selectable ? 1 : 0) +
+        (slots.details ? 1 : 0) +
+        1
+    );
+});
+
+const refreshSelectAllState = () => {
+    let trueCount = 0;
+    let falseCount = 0;
+
+    props.data.forEach((row: any) => {
+        if (selectedRows.value[row[props.rowKey]]) {
+            trueCount++;
+        } else {
+            falseCount++;
+        }
+    });
+
+    if (falseCount === 0 && trueCount > 0) {
+        isIndeterminate.value = false;
+        selectedAll.value = true;
+    } else if (trueCount === 0) {
+        isIndeterminate.value = false;
+        selectedAll.value = false;
+    } else if (falseCount !== trueCount) {
+        isIndeterminate.value = true;
+        selectedAll.value = undefined;
+    }
+
+    inSelectionMode.value = Object.keys(selectedRows.value).some(
+        (key: string) => selectedRows.value[key],
+    );
+};
+
+const onSelectRow = async (rowId: string, checked: boolean) => {
+    if (!checked) {
+        delete selectedRowsMeta[rowId];
+    } else {
+        selectedRowsMeta[rowId] = props.data.find(
+            (row: any) => row[props.rowKey] === rowId,
+        );
+    }
+
+    emit("selected", selectedRowsMeta);
+    refreshSelectAllState();
+};
+
+const clearSelection = () => {
+    Object.keys(selectedRows.value).forEach((key) => {
+        selectedRows.value[key] = false;
+        selectedAll.value = false;
+        isIndeterminate.value = false;
+        inSelectionMode.value = false;
+    });
+
+    Object.assign(selectedRowsMeta, {});
+    emit("selected", {});
+};
+
+const onSelectAllChange = () => {
+    if (selectedAll.value) {
+        props.data.forEach((row: any) => {
+            selectedRows.value[row[props.rowKey]] = true;
+            selectedRowsMeta[row[props.rowKey]] = row;
+        });
+    } else {
+        props.data.forEach((row: any) => {
+            selectedRows.value[row[props.rowKey]] = false;
+            delete selectedRowsMeta[row[props.rowKey]];
+            inSelectionMode.value = false;
+        });
+    }
+
+    refreshSelectAllState();
+    emit("selected", selectedRowsMeta);
+};
+
+const rows = computed<T[]>(() => {
+    if (props.loading && props.data.length === 0) {
+        return Array.from({ length: 5 }, (_, i) => i as unknown as T);
+    }
+
+    return props.data;
+});
+
+defineExpose({
+    clearSelection,
+    inSelectionMode,
+});
+</script>
+
+<template>
+    <table class="min-w-full relative color-text">
+        <!-- Header -->
+        <thead>
+            <tr>
+                <!-- Collapse/expand details -->
+                <th
+                    v-if="!!slots.details"
+                    class="text-left border bg-caipira-primary"
+                    :class="{
+                        'sticky top-0': props.stickyHeader,
+                        [props.tableDataClass]: true,
+                    }"
+                />
+
+                <!-- Selection -->
+                <th
+                    v-if="props.selectable"
+                    class="text-center w-12 bg-caipira-primary"
+                    :class="{
+                        'sticky top-0': props.stickyHeader,
+                        [props.tableDataClass]: true,
+                    }"
+                >
+                    <t-input-checkbox
+                        v-model="selectedAll"
+                        :is-indeterminate="isIndeterminate"
+                        @input="onSelectAllChange"
+                    />
+                </th>
+
+                <!-- Column header -->
+                <th
+                    v-for="(column, index) in props.columns"
+                    class="text-base text-left select-none px-2 py-2 font-normal bg-caipira-primary"
+                    :key="index"
+                    :class="{
+                        'sticky top-0': props.stickyHeader,
+                        [props.tableDataClass]: true,
+                    }"
+                >
+                    {{ column.title ? column.title : "" }}
+                </th>
+            </tr>
+        </thead>
+
+        <!-- Body -->
+        <tbody>
+            <template
+                v-for="(row, index) in rows"
+                :key="row[props.rowKey]"
+            >
+                <!-- Row -->
+                <tr
+                    class="cursor-pointer"
+                    :class="{
+                        'bg-hover': selectedRows[row[props.rowKey]],
+                        [props.rowClass]: true,
+                    }"
+                    @click="emit('row-click', row)"
+                >
+                    <!-- Row details -->
+                    <td
+                        v-if="!!slots.details"
+                        class="text-left"
+                        :class="[props.tableDataClass]"
+                    >
+                        <div class="flex items-center">
+                            <t-icon-button
+                                v-if="'hasDetails' in row && row.hasDetails"
+                                v-model="expandedRows[row[props.rowKey]]"
+                                size="sm"
+                                :icon="
+                                    expandedRows[row[props.rowKey]]
+                                        ? 'chevron-down'
+                                        : 'chevron-right'
+                                "
+                                @click="
+                                    expandedRows[row[props.rowKey]] =
+                                        !expandedRows[row[props.rowKey]]
+                                "
+                            />
+                        </div>
+                    </td>
+
+                    <!-- Selection -->
+                    <td
+                        v-if="props.selectable"
+                        class="text-center w-12"
+                        :class="[props.tableDataClass]"
+                    >
+                        <t-input-checkbox
+                            v-model="selectedRows[row[props.rowKey]]"
+                            :initialize-value="true"
+                            @click="onClickRow"
+                            @input="
+                                (checked: boolean) =>
+                                    onSelectRow(row[props.rowKey], checked)
+                            "
+                        />
+                    </td>
+
+                    <!-- Columns -->
+                    <td
+                        v-for="(column, index2) in props.columns"
+                        class="whitespace-nowrap"
+                        :class="{
+                            [props.tableDataClass]: true,
+                        }"
+                    >
+                        <!-- Skeleton, if loading -->
+                        <template v-if="props.loading">
+                            <div class="animate-pulse">
+                                <div
+                                    class="h-4 bg-gray-100 my-1 mx-2 dark:bg-neutral-800 rounded"
+                                />
+                            </div>
+                        </template>
+
+                        <!-- Slot -->
+                        <slot
+                            v-else-if="'slot' in column && $slots[column.slot]"
+                            :name="column.slot"
+                            :row="row"
+                        />
+
+                        <!-- Property -->
+                        <template v-else-if="'property' in column">
+                            {{ row[column.property] }}
+                        </template>
+                    </td>
+                </tr>
+
+                <!-- Row details -->
+                <tr
+                    v-if="slots.details && expandedRows[row[props.rowKey]]"
+                    class="border-b"
+                >
+                    <td :colspan="columnsLength">
+                        <slot
+                            name="details"
+                            :row="row"
+                        />
+                    </td>
+                </tr>
+            </template>
+        </tbody>
+    </table>
+</template>
+
+<style scoped>
+table > thead > tr {
+    border-top: 1px solid var(--border-color);
+}
+
+table th,
+table td {
+    border-bottom: 1px solid var(--border-color);
+}
+</style>

package/components/Table/index.ts

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

package/components/Tag/Tag.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { ElementSize } from "@/enums/ui";
+
+defineOptions({ name: "TTag" });
+
+const props = withDefaults(defineProps<TagProps>(), {
+    text: "",
+    size: ElementSize.DEFAULT,
+    role: "",
+    color: "",
+    confirmClose: false,
+    hasCloseButton: false,
+});
+
+const emit = defineEmits<{
+    (e: "close"): void;
+}>();
+</script>
+
+<template>
+    <div
+        :style="`background-color:${props.color}`"
+        :class="{
+            'bg-neutral-700': !props.color,
+        }"
+        :role="props.role"
+        class="inline-flex items-center rounded-sm text-sm text-white w-max select-none"
+    >
+        <div
+            v-if="props.hasCloseButton"
+            class="bg-[#0000006b] hover:bg-[#000000a3] px-1 h-full"
+        >
+            <t-popconfirm
+                v-if="props.confirmClose"
+                title="Are you sure you want to remove this?"
+                placement="top"
+                class="h-full inline-flex items-center justify-center"
+                @confirm="emit('close')"
+            >
+                <t-icon
+                    size="xs"
+                    icon="close"
+                    role="button"
+                    aria-describedby="tooltip"
+                />
+            </t-popconfirm>
+            <t-icon
+                v-else="props.hasCloseButton"
+                size="xs"
+                icon="close"
+                role="button"
+                @click="emit('close')"
+            />
+        </div>
+        <div class="px-2 py-0.5">
+            <slot v-if="$slots.default" />
+            <span v-else>
+                {{ props.text }}
+            </span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export interface TagProps {
+    text?: string;
+    size?: ElementSize;
+    role?: string;
+    color?: string;
+    confirmClose?: boolean;
+    hasCloseButton?: boolean;
+}
+</script>

package/components/Tag/index.ts

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

package/components/Toast/Toast.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { Message } from "@/types/ui";
+import { ElementPosition, ElementVariant, Icon } from "@/enums/ui";
+
+defineOptions({ name: "TToast" });
+
+const props = defineProps<{
+    message: Message;
+}>();
+
+const emit = defineEmits(["close"]);
+
+const getIcon = (variant: `${ElementVariant}`): `${Icon}` => {
+    switch (variant) {
+        case ElementVariant.SUCCESS:
+            return "check-circle";
+        case ElementVariant.WARNING:
+            return "alert-octagon";
+        case ElementVariant.DANGER:
+            return "close-circle";
+        default:
+            return "info-outline";
+    }
+};
+
+const getColor = (variant: `${ElementVariant}`): string => {
+    switch (variant) {
+        case ElementVariant.SUCCESS:
+            return "text-emerald-500";
+        case ElementVariant.WARNING:
+            return "text-amber-500";
+        case ElementVariant.DANGER:
+            return "text-red-400";
+        default:
+            return "text-blue-500";
+    }
+};
+
+const closeMessage = (id: Message["id"]) => {
+    emit("close", id);
+
+    // app.notifications.splice(
+    //     app.notifications.findIndex((message: Message) => message.id === id),
+    //     1
+    // );
+};
+</script>
+
+<template>
+    <div
+        class="shadow-md fixed flex bg-stone-100 dark:bg-zinc-700 w-min z-50 rounded px-4 py-2 text-base select-none"
+        :class="{
+            'top-0 left-1/2 transform -translate-x-1/2':
+                props.message.position === ElementPosition.TOP,
+        }"
+    >
+        <t-icon
+            :icon="getIcon(props.message.variant)"
+            :class="[getColor(props.message.variant)]"
+            class="mr-2"
+            role="button"
+        />
+        <span
+            class="whitespace-nowrap overflow-x-hidden overflow-ellipsis max-w-2xl"
+        >
+            {{ props.message.message }}
+        </span>
+        <t-icon
+            icon="close"
+            class="text-stone-400 ml-4"
+            role="button"
+            @click="closeMessage(props.message.id)"
+        />
+    </div>
+</template>

package/components/Toast/index.ts

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

package/components/index.ts

@@ -0,0 +1,43 @@
+export * from "./Avatar";
+export * from "./Backdrop";
+export * from "./Button";
+export * from "./ButtonCopy";
+export * from "./Drawer";
+export * from "./Dropdown";
+export * from "./FileDrop";
+export * from "./Form";
+export * from "./FormItem";
+export * from "./GraphyEmpty";
+export * from "./GraphyLabel";
+export * from "./GraphyPrice";
+export * from "./GraphySubtitle";
+export * from "./GraphyTitle";
+export * from "./Icon";
+export * from "./IconButton";
+export * from "./InputAvatar";
+export * from "./InputCheckbox";
+export * from "./InputColor";
+export * from "./InputDate";
+export * from "./InputMultiplier";
+export * from "./InputPassword";
+export * from "./InputPhone";
+export * from "./InputPrice";
+export * from "./InputRadio";
+export * from "./InputSelect";
+export * from "./InputSwitch";
+export * from "./InputText";
+export * from "./InputTextarea";
+export * from "./LineChart";
+export * from "./Modal";
+export * from "./ModalForm";
+export * from "./Pagination";
+export * from "./PieChart";
+export * from "./Popconfirm";
+export * from "./Popover";
+export * from "./ProgressCircle";
+export * from "./ProgressLine";
+export * from "./SensitiveInfo";
+export * from "./Tab";
+export * from "./Table";
+export * from "./Tag";
+export * from "./Toast";