@caipira/tamandua 0.0.1

package/components/InputSwitch/InputSwitch.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+let id = 0;
+</script>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+
+defineOptions({ name: "TInputSwitch" });
+
+const props = withDefaults(
+    defineProps<{
+        label?: string;
+        disabled?: boolean;
+        modelValue?: boolean;
+    }>(),
+    {
+        label: "",
+        disabled: false,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "update:modelValue", val: boolean): void;
+}>();
+
+const name = `switch_${++id}`;
+const checked = ref<boolean>(false);
+
+const onInput = () => {
+    const value = !checked.value;
+
+    emit("update:modelValue", value);
+};
+
+watch(
+    () => props.modelValue,
+    (newValue?: boolean) => {
+        checked.value = !!newValue;
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <div>
+        <div
+            class="relative inline-block w-12 mr-2 align-middle select-none"
+            :class="{
+                'rounded-full': !checked,
+            }"
+        >
+            <input
+                v-model="checked"
+                type="checkbox"
+                class="absolute block w-6 h-6 rounded-full appearance-none cursor-pointer bg-caipira-primary border input-outline"
+                :class="{
+                    'right-0 border-caipira-primary-inverted': checked,
+                    'border-caipira-tertiary': !checked,
+                }"
+                :name="name"
+                :id="name"
+                :disabled="disabled"
+                @input="onInput"
+            />
+            <label
+                :for="name"
+                :class="{
+                    'bg-caipira-primary-inverted': checked,
+                    'bg-caipira-tertiary': !checked,
+                }"
+                class="block overflow-hidden h-6 rounded-full cursor-pointer"
+            />
+        </div>
+        <label
+            v-if="label"
+            class="text-base cursor-pointer"
+            :for="name"
+        >
+            {{ label }}
+        </label>
+    </div>
+</template>

package/components/InputSwitch/index.ts

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

package/components/InputText/InputText.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+
+defineOptions({ name: "TInputText" });
+
+const props = withDefaults(
+    defineProps<{
+        modelValue?: string;
+        type?: string;
+        placeholder?: string;
+        autocomplete?: string;
+        disabled?: boolean;
+        disableStyle?: boolean;
+    }>(),
+    {
+        modelValue: "",
+        type: "text",
+        placeholder: undefined,
+        autocomplete: undefined,
+        disabled: false,
+        disableStyle: false,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "update:modelValue", val: string): void;
+    (e: "keyup.enter", val: any): void;
+}>();
+
+const id = inject("id", "");
+const invalid = inject("invalid", false);
+const formStyle = inject("formStyle", { input: "w-full" });
+const validated = inject("validated", false);
+
+const value = computed({
+    get: () => {
+        return props.modelValue;
+    },
+    set: (value: string) => {
+        emit("update:modelValue", value);
+    },
+});
+</script>
+
+<template>
+    <input
+        v-model="value"
+        :type="props.type"
+        :class="{
+            'h-9 input-bg-color input-text-color input-outline border input-border input-roundnes input-padding input-roundness':
+                !props.disableStyle,
+            [formStyle.input]: !props.disableStyle,
+            'border-red-500': !validated && invalid,
+            'border-emerald-500': validated && !invalid,
+        }"
+        :id="id"
+        :placeholder="props.placeholder"
+        :autocomplete="props.autocomplete"
+        :disabled="props.disabled"
+        v-bind="$attrs"
+    />
+</template>

package/components/InputText/index.ts

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

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

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

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

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

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

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

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import { SelectOption } from "@/types/form";
+
+import CrudService from "@/services/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

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

@@ -0,0 +1,15 @@
+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: {},
+};