@caipira/tamandua 0.0.1 → 0.0.3

package/components/Table/Table.vue

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

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

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

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

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

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

@@ -1,43 +0,0 @@
-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";

package/components/plugins.ts

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

package/composables/index.ts

@@ -1,2 +0,0 @@
-export * from "./useBreakpoint";
-export * from "./useRender";

package/composables/useBreakpoints.ts

@@ -1,30 +0,0 @@
-import { ref } from "vue";
-
-const BREAKPOINT_SM = 640;
-const BREAKPOINT_MD = 768;
-const BREAKPOINT_LG = 1024;
-const BREAKPOINT_XL = 1280;
-
-const size = ref<number>(window.innerWidth);
-const sm = ref<boolean>(false);
-const md = ref<boolean>(false);
-const lg = ref<boolean>(false);
-
-const refresh = (event?: any) => {
-    size.value = event ? event.target.innerWidth : window.innerWidth;
-    sm.value = size.value >= BREAKPOINT_SM;
-    md.value = size.value >= BREAKPOINT_MD;
-    lg.value = size.value >= BREAKPOINT_LG;
-};
-
-window.addEventListener("resize", refresh);
-
-export default function useBreakpoints() {
-    refresh();
-
-    return {
-        sm,
-        md,
-        lg,
-    };
-}