@caipira/tamandua 0.0.2 → 0.0.3

package/components/InputText/index.ts

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

package/components/InputTextarea/InputTextarea.vue

@@ -1,64 +0,0 @@
-<script lang="ts" setup>
-import { ref, inject, watch } from "vue";
-
-defineOptions({ name: "TInputTextarea" });
-
-const props = withDefaults(
-    defineProps<{
-        type?: string;
-        disabled?: boolean;
-        modelValue?: string;
-        placeholder?: string;
-        disableStyle?: boolean;
-    }>(),
-    {
-        type: "text",
-        disabled: false,
-        placeholder: undefined,
-        disableStyle: false,
-    },
-);
-
-const emit = defineEmits<{
-    (e: "update:modelValue", val: string): void;
-}>();
-
-const text = ref<string>("");
-const invalid = inject("invalid", false);
-const formStyle = inject("formStyle", { input: "w-full" });
-const validated = inject("validated", false);
-const errorMessage = ref<string>("");
-
-const onChange = ({ target }: Event) => {
-    const value = (target as HTMLInputElement).value;
-
-    emit("update:modelValue", value);
-};
-
-watch(
-    () => props.modelValue,
-    (value?: string) => {
-        if (value) {
-            text.value = value;
-        }
-    },
-    { immediate: true },
-);
-</script>
-
-<template>
-    <textarea
-        :value="text"
-        :type="type"
-        class="min-h-9 input-bg-color input-text-color input-outline border input-border input-roundnes input-padding input-roundness"
-        :class="{
-            'border rounded h-9': !disableStyle,
-            [formStyle.input]: !disableStyle,
-            'border-red-500': !validated && invalid,
-            'border-emerald-500': validated && !invalid,
-        }"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        @input="onChange"
-    />
-</template>

package/components/InputTextarea/index.ts

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

package/components/LineChart/LineChart.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import { Line } from "vue-chartjs";
-
-defineOptions({ name: "TLineChart" });
-
-const props = defineProps<{
-    data: any;
-    options: any;
-}>();
-</script>
-
-<template>
-    <Line v-bind="props" />
-</template>

package/components/LineChart/index.ts

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

package/components/Modal/Modal.vue

@@ -1,106 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from "vue";
-
-import Backdrop from "@/components/Backdrop/Backdrop.vue";
-
-defineOptions({ name: "TModal" });
-
-const props = withDefaults(
-    defineProps<{
-        title?: string;
-        showHeader?: boolean;
-        injectStyle?: any;
-        hasBackdrop?: boolean;
-        disableStyle?: boolean;
-    }>(),
-    {
-        title: "",
-        showHeader: true,
-        injectStyle: () => ({ wrapper: "", body: "", container: "" }),
-        hasBackdrop: true,
-        disableStyle: false,
-    },
-);
-
-const modal = ref<InstanceType<typeof HTMLElement> | null>(null);
-
-const emit = defineEmits<{
-    (e: "closed"): void;
-}>();
-
-const onClose = (e: KeyboardEvent | MouseEvent) => {
-    e.stopPropagation();
-
-    emit("closed");
-};
-
-onMounted(() => {
-    modal.value?.focus();
-});
-</script>
-
-<template>
-    <div
-        class="fixed inset-0 focus-visible:outline-none z-10"
-        :class="{
-            'flex items-center': !props.disableStyle,
-            [props.injectStyle.wrapper]: true,
-        }"
-        tabindex="-1"
-        ref="modal"
-        @keyup.esc="onClose"
-    >
-        <Backdrop
-            v-if="props.hasBackdrop"
-            class="z-10"
-            @click="onClose"
-        />
-        <div
-            class="z-10 w-full md:w-[36rem] mx-auto"
-            :class="{
-                'bg-caipira-primary input-roundness shadow-2xl':
-                    !props.disableStyle,
-                [props.injectStyle.container]: true,
-            }"
-        >
-            <div
-                v-if="props.showHeader"
-                class="flex justify-between items-center p-4 border-b border-color"
-            >
-                <div class="">
-                    <span
-                        v-if="props.title"
-                        class="inline-block font-semibold uppercase mr-8"
-                    >
-                        {{ props.title }}
-                    </span>
-                    <slot
-                        v-if="$slots.header"
-                        name="header"
-                    />
-                </div>
-                <t-icon
-                    icon="close"
-                    role="button"
-                    class="text-neutral-600"
-                    @click="onClose"
-                />
-            </div>
-            <div
-                class="flex flex-col flex-1 overflow-y-auto scrollbar"
-                style="max-height: 80vh"
-                :class="{
-                    [props.injectStyle.body]: true,
-                }"
-            >
-                <slot />
-            </div>
-            <div
-                v-if="$slots.footer"
-                class="flex flex-row items-center justify-between p-4 border-t border-color"
-            >
-                <slot name="footer" />
-            </div>
-        </div>
-    </div>
-</template>

package/components/Modal/index.ts

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

package/components/ModalForm/ModalForm.vue

@@ -1,141 +0,0 @@
-<script lang="ts" setup>
-import { SelectOption } from "@/types/form";
-
-import CrudService from "@/form/crud";
-import { computed, ref } from "vue";
-
-type Form = {
-    key: string;
-    title: string;
-    component: any;
-    pinnable?: boolean;
-};
-
-defineOptions({ name: "TModalForm" });
-
-const props = withDefaults(
-    defineProps<{
-        forms: Form[];
-        options?: SelectOption[];
-        formClass?: string;
-    }>(),
-    {
-        options: () => [],
-        formClass: "",
-    },
-);
-
-const emit = defineEmits<{
-    (e: "saved"): void;
-    (e: "closed"): void;
-}>();
-
-const form = ref<InstanceType<typeof CrudService> | null>(null);
-const keepOpen = ref<boolean>(false);
-const currentKey = ref<string>("");
-const formReference = ref<any | null>(null);
-
-const current = computed<Form | undefined>(() => {
-    return props.forms.find((form) => form.key === currentKey.value);
-});
-
-const open = (key: string, id?: string) => {
-    currentKey.value = key;
-    form.value = new CrudService(current.value?.title!, formReference);
-
-    if (id) {
-        form.value?.edit(id);
-    } else {
-        form.value?.show();
-    }
-};
-
-const onSave = () => {
-    form.value?.onSave(!keepOpen.value);
-    emit("saved");
-};
-
-const deleteItem = () => {
-    form.value?.delete();
-};
-
-const onClose = () => {
-    form.value?.close();
-    emit("closed");
-};
-
-defineExpose({ open, delete: deleteItem });
-</script>
-
-<template>
-    <t-modal
-        v-if="form?.visible"
-        :title="form?.title"
-        @closed="onClose"
-    >
-        <template v-slot:header>
-            <t-input-switch
-                v-if="current?.pinnable && !form?.isEditing"
-                v-model="keepOpen"
-                label="Keep open"
-                class="mt-4"
-            />
-        </template>
-        <component
-            v-if="current"
-            :is="current.component"
-            :id="`${form?.id}`"
-            :class="[props.formClass]"
-            ref="formReference"
-            @deleted="() => form?.onDelete()"
-            @saved="onSave"
-        />
-        <template v-slot:footer>
-            <div
-                v-if="props.options.length"
-                class="inline-flex"
-            >
-                <t-popover placement="bottom-start">
-                    <t-icon
-                        icon="dots-vertical"
-                        class="text-lg mr-6"
-                        size="xs"
-                        role="button"
-                        aria-describedby="tooltip"
-                    />
-                    <template v-slot:content>
-                        <t-dropdown :items="props.options" />
-                    </template>
-                </t-popover>
-            </div>
-
-            <t-popconfirm
-                v-else
-                :title="`Are you sure you want to delete this ${current?.title}?`"
-                @confirm="() => form?.delete()"
-            >
-                <t-button
-                    v-if="form?.isEditing"
-                    :is-disabled="form?.isLoading"
-                    variant="danger"
-                    icon="trash-can-outline"
-                    label="Delete"
-                    size="sm"
-                    aria-describedby="tooltip"
-                />
-            </t-popconfirm>
-
-            <t-button
-                variant="success"
-                icon="save"
-                :class="{
-                    'ml-auto': !form?.isEditing,
-                }"
-                size="sm"
-                label="Save"
-                :is-disabled="form?.isLoading"
-                @click="() => form?.save()"
-            />
-        </template>
-    </t-modal>
-</template>

package/components/ModalForm/index.ts

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

package/components/Pagination/Pagination.story.ts

@@ -1,15 +0,0 @@
-export default {
-    title: "Pagination",
-};
-
-const Template1: any = (args: any) => ({
-    setup() {
-        return { args };
-    },
-    template: `<t-pagination :info="args.info" />`,
-});
-
-export const Pagination = Template1.bind({});
-Pagination.args = {
-    info: {},
-};

package/components/Pagination/Pagination.vue

@@ -1,138 +0,0 @@
-<script lang="ts" setup>
-import { Pagination } from "@/types/ui";
-import { SelectOption } from "@/types/form";
-
-import { computed, watch } from "vue";
-
-defineOptions({ name: "TPagination" });
-
-const props = withDefaults(
-    defineProps<{
-        disabled?: boolean;
-        pagination?: Pagination;
-        pageLengths?: Array<number>;
-        showDescription: boolean;
-    }>(),
-    {
-        disabled: false,
-        pagination: () => ({}) as Pagination,
-        pageLengths: () => [12, 18, 24, 30, 36, 42],
-        showDescription: false,
-    },
-);
-
-const emit = defineEmits<{
-    (e: "updated", val: Pagination): void;
-}>();
-
-const isFirstPage = computed<boolean>(() => {
-    return props.pagination.page === 1;
-});
-
-const isLastPage = computed<boolean>(() => {
-    return (
-        props.pagination.totalItems - props.pagination?.skip <=
-        props.pagination.perPage
-    );
-});
-
-const pageLengthsOptions = computed<SelectOption[]>(() => {
-    return props.pageLengths.map((l: number) => ({
-        label: `${l} / page`,
-        value: l,
-    }));
-});
-
-const description = computed<string>(() => {
-    const from = props.pagination.skip + 1;
-    const to = props.pagination.skip + props.pagination.items;
-    const total = props.pagination.totalItems;
-
-    return `Showing ${from} to ${to} of ${total} entries`;
-});
-
-const recalculate = (page: number = props.pagination.page) => {
-    const skip = page > 1 ? (page - 1) * props.pagination.perPage : 0;
-    const items = props.pagination.totalItems - skip;
-
-    Object.assign(props.pagination, {
-        ...props.pagination,
-        skip,
-        page,
-        items:
-            items > props.pagination.perPage ? props.pagination.perPage : items,
-    });
-
-    emit("updated", props.pagination);
-};
-
-const onPreviousPage = () => {
-    recalculate(props.pagination.page - 1);
-};
-
-const onNextPage = () => {
-    recalculate(props.pagination.page + 1);
-};
-
-const onPageSizeChange = (length: number) => {
-    Object.assign(props.pagination, {
-        ...props.pagination,
-        perPage: length,
-        page: 1,
-    });
-
-    emit("updated", props.pagination);
-};
-
-watch(
-    () => props.pagination,
-    () => {
-        if (props.pagination.totalItems > 0 && props.pagination.items === 0) {
-            recalculate();
-        }
-    },
-    { deep: true, immediate: true },
-);
-</script>
-
-<template>
-    <div class="flex items-center justify-end w-full flex-wrap">
-        <div
-            v-if="showDescription"
-            class="mr-3 grow md:block hidden"
-        >
-            {{ description }}
-        </div>
-        <div class="h-9 flex">
-            <t-button
-                size="sm"
-                variant="primary"
-                :disable-style="true"
-                class="h-9 px-2 input-roundness rounded-r-none input-border border-r"
-                icon="chevron-left"
-                :class="{ 'opacity-50 cursor-not-allowed': isFirstPage }"
-                :disabled="isFirstPage"
-                @click="onPreviousPage"
-            />
-            <t-button
-                size="sm"
-                variant="primary"
-                :disable-style="true"
-                class="h-9 px-2 rounded-none"
-                icon="chevron-right"
-                :class="{ 'opacity-50 cursor-not-allowed': isLastPage }"
-                :disabled="isLastPage"
-                @click="onNextPage"
-            />
-            <t-input-select
-                v-model="pagination.perPage"
-                :disabled="disabled"
-                :options="pageLengthsOptions"
-                :disable-style="true"
-                dropdown-placement="top"
-                class="h-9 border input-border border-l-0 input-roundness rounded-l-none"
-                @update:modelValue="onPageSizeChange"
-            />
-        </div>
-    </div>
-</template>

package/components/Pagination/index.ts

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

package/components/PieChart/PieChart.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import { Pie } from "vue-chartjs";
-
-defineOptions({ name: "TPieChart" });
-
-const props = defineProps<{
-    data: any;
-    options: any;
-}>();
-</script>
-
-<template>
-    <Pie v-bind="props" />
-</template>

package/components/PieChart/index.ts

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

package/components/Popconfirm/Popconfirm.vue

@@ -1,80 +0,0 @@
-<script lang="ts" setup>
-import { VNodeRef, ref } from "vue";
-import { ElementPosition } from "@/enums/ui";
-
-defineOptions({ name: "TPopconfirm" });
-
-const props = withDefaults(
-    defineProps<{
-        title?: string;
-        placement?: `${ElementPosition}`;
-    }>(),
-    {
-        title: "",
-        placement: ElementPosition.BOTTOM,
-    },
-);
-
-const emit = defineEmits<{
-    (e: "confirm"): void;
-}>();
-
-const popoverRef = ref();
-
-const setPopoverRef = (popover: VNodeRef | undefined) => {
-    popoverRef.value = popover;
-
-    return popover;
-};
-
-const cancel = () => {
-    popoverRef.value.visible = false;
-};
-
-const onClick = () => {
-    popoverRef.value.visible = true;
-};
-</script>
-
-<template>
-    <t-popover
-        :placement="props.placement"
-        slot-wrapper-classes="rounded border border-gray-500"
-        :disable-style="true"
-        :ref="setPopoverRef"
-    >
-        <slot :onClick="onClick" />
-        <template v-slot:content>
-            <div
-                class="mx-2 my-3 select-none"
-                @click="(e) => e.stopPropagation()"
-            >
-                <p class="text-sm mb-6 flex">
-                    <t-icon
-                        icon="info-outline"
-                        class="text-yellow-700 mr-2"
-                        size="sm"
-                    />
-                    <span>
-                        {{ props.title }}
-                    </span>
-                </p>
-                <div class="flex justify-end">
-                    <t-button
-                        variant="warning"
-                        label="Cancel"
-                        size="sm"
-                        class="mr-2"
-                        @click="cancel"
-                    />
-                    <t-button
-                        variant="primary"
-                        label="Confirm"
-                        size="sm"
-                        @click="emit('confirm')"
-                    />
-                </div>
-            </div>
-        </template>
-    </t-popover>
-</template>

package/components/Popconfirm/index.ts

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