@caipira/tamandua 0.0.1

package/components/Pagination/Pagination.vue

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

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

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

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

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

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

package/components/Popover/Popover.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import { ElementPosition, ElementTrigger } from "@/enums/ui";
+
+import uiService from "@/services/ui";
+import { createPopper } from "@popperjs/core";
+import { ref, computed, onMounted, onBeforeMount, onBeforeUnmount } from "vue";
+
+import EventListener from "@/components/EventListener/EventListener.vue";
+
+defineOptions({ name: "TPopover" });
+
+const props = withDefaults(
+    defineProps<{
+        trigger?: `${ElementTrigger}`;
+        disabled?: boolean;
+        isVisible?: boolean | null;
+        placement?: `${ElementPosition}`;
+        disableStyle?: boolean;
+        slotWrapperClasses?: string;
+    }>(),
+    {
+        trigger: ElementTrigger.CLICK,
+        disabled: false,
+        isVisible: null,
+        placement: ElementPosition.BOTTOM,
+        disableStyle: false,
+        slotWrapperClasses: "",
+    },
+);
+
+const visible = ref<boolean>(false);
+const popoverRef = ref<HTMLElement>();
+const wrapperRef = ref<HTMLElement>();
+
+const classes = computed<string>(() => {
+    return props.slotWrapperClasses;
+});
+
+const onTogglePopover = (isVisible: boolean = !visible.value) => {
+    visible.value = isVisible;
+};
+
+const onGlobalClick = (event: any) => {
+    if (
+        wrapperRef.value &&
+        uiService.wasClickOutsideOfContainer(event, wrapperRef.value)
+    ) {
+        visible.value = false;
+
+        return false;
+    }
+
+    return true;
+};
+
+onBeforeMount(() => {
+    document.addEventListener("click", onGlobalClick);
+});
+
+/**
+ * Get the first element inside the default slot that has the aria-describedby=tooltip
+ */
+onMounted(() => {
+    if (!wrapperRef.value || !popoverRef.value) {
+        return;
+    }
+
+    let parent: HTMLElement | undefined = undefined;
+
+    for (const node of wrapperRef.value.childNodes.values()) {
+        if (
+            "hasAttribute" in node &&
+            (node as Element).hasAttribute("aria-describedby") &&
+            (node as Element).getAttribute("aria-describedby") === "tooltip"
+        ) {
+            parent = node as HTMLElement;
+
+            break;
+        }
+    }
+
+    if (!parent) {
+        console.error(
+            '[caipira-cloud-ui]: Popover activator not found (aria-describedby="tooltip")',
+        );
+
+        return;
+    }
+
+    createPopper(parent, popoverRef.value, {
+        placement: props.placement,
+        strategy: "fixed",
+    });
+});
+
+onBeforeUnmount(() => {
+    document.removeEventListener("click", onGlobalClick);
+});
+
+defineExpose({ visible });
+</script>
+
+<template>
+    <div
+        ref="wrapperRef"
+        class="inline"
+    >
+        <event-listener
+            v-if="$slots.default"
+            @popover-click="onTogglePopover"
+        >
+            <slot />
+        </event-listener>
+        <div
+            v-if="!props.disabled"
+            ref="popoverRef"
+            role="tooltip"
+            class="shadow bg-caipira-primary border-color z-10"
+            :class="{
+                hidden:
+                    (props.isVisible !== null && props.isVisible === false) ||
+                    (props.isVisible === null && visible === false),
+                'rounded-lg': !props.disableStyle,
+                [classes]: true,
+            }"
+        >
+            <slot
+                name="content"
+                v-bind="{ onTogglePopover }"
+            />
+        </div>
+    </div>
+</template>

package/components/Popover/index.ts

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

package/components/ProgressCircle/ProgressCircle.story.ts

@@ -0,0 +1,31 @@
+const story = {
+    title: "Progress/Circle",
+};
+
+const Template = (args: any) => ({
+    setup() {
+        return { args };
+    },
+    template: `
+        <t-progress-circle
+            :value="value"
+            :width="width"
+            :strokeWidth="strokeWidth"
+            :strokeColor="strokeColor"
+            :backgroundColor="backgroundColor"
+        >
+            <span class="text-2xl">{{ value }}%</span>
+        </t-progress-circle>
+  `,
+});
+
+const defaultArgs: any = {
+    value: 75,
+    width: 100,
+    strokeWidth: 13,
+};
+
+const Default: any = Template.bind({});
+Default.args = { ...defaultArgs };
+
+export { story as default, Default };

package/components/ProgressCircle/ProgressCircle.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+
+defineOptions({ name: "TProgressCircle" });
+
+const props = withDefaults(
+    defineProps<{
+        value?: number;
+        width?: number;
+        strokeWidth?: number;
+        strokeColor?: string;
+        backgroundColor?: string;
+    }>(),
+    {
+        value: 0,
+        width: 90,
+        strokeWidth: 1,
+        strokeColor: "var(--caipira-blue)",
+        backgroundColor: "var(--caipira-tertiary)",
+    },
+);
+
+const radius = 90;
+
+const dashOffset = computed(() => {
+    const c = Math.PI * (radius * 2);
+    let value = props.value;
+
+    if (props.value < 0) {
+        value = 0;
+    }
+
+    if (props.value > 100) {
+        value = 100;
+    }
+
+    return ((100 - value) / 100) * c;
+});
+</script>
+
+<style scoped>
+svg circle {
+    transition: stroke-dashoffset 1s linear;
+}
+</style>
+
+<template>
+    <div class="relative w-min">
+        <svg
+            viewBox="0 0 200 200"
+            :width="props.width"
+            :heigh="props.width"
+        >
+            <circle
+                cy="100"
+                cx="100"
+                fill="transparent"
+                stroke-dasharray="565.48"
+                :r="radius"
+                :stroke-width="props.strokeWidth"
+                :stroke="props.backgroundColor"
+                stroke-dashoffset="0"
+            />
+            <circle
+                cy="100"
+                cx="100"
+                fill="transparent"
+                stroke-dasharray="565.48"
+                :r="radius"
+                :stroke-width="props.strokeWidth"
+                :stroke="props.strokeColor"
+                :stroke-dashoffset="dashOffset"
+            />
+        </svg>
+        <div
+            v-if="$slots.default"
+            class="absolute transform -translate-x-1/2 -translate-y-1/2 top-2/4 left-2/4"
+        >
+            <slot />
+        </div>
+    </div>
+</template>

package/components/ProgressCircle/index.ts

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

package/components/ProgressLine/ProgressLine.story.ts

@@ -0,0 +1,27 @@
+const story = {
+    title: "Progress/Line",
+};
+
+const Template = (args: any) => ({
+    setup() {
+        return { args };
+    },
+    template: `
+        <div class="w-96">
+            <c-progress-line
+                :value="value"
+                :height="height"
+            />
+        </div>
+  `,
+});
+
+const defaultArgs: any = {
+    value: 25,
+    height: 5,
+};
+
+const Default: any = Template.bind({});
+Default.args = { ...defaultArgs };
+
+export { story as default, Default };

package/components/ProgressLine/ProgressLine.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue";
+
+defineOptions({ name: "TProgressLine" });
+
+const props = withDefaults(
+    defineProps<{
+        value?: number;
+        height?: number;
+        borderRadius?: number;
+        showPercentage?: boolean;
+
+        // CSS classes
+        svgClass?: string;
+        labelClass?: string;
+
+        // Colors
+        overColor?: string;
+        progressColor?: string;
+        finishedColor?: string;
+        backgroundColor?: string;
+    }>(),
+    {
+        value: 0,
+        height: 10,
+        borderRadius: 2,
+        showPercentage: true,
+
+        // Colors
+        overColor: "#f38ba8",
+        progressColor: "#89b4fa",
+        finishedColor: "#a6e3a1",
+        backgroundColor: "var(--caipira-tertiary)",
+    },
+);
+
+const percentage = ref<number>(0);
+
+watch(
+    () => props.value,
+    (value: number) => {
+        if (value) {
+            percentage.value = Math.round(value);
+        }
+    },
+    { immediate: true },
+);
+
+const fillColor = computed<string>(() => {
+    if (percentage.value === 100) {
+        return props.finishedColor;
+    } else if (percentage.value > 100) {
+        return props.overColor;
+    }
+
+    return props.progressColor;
+});
+</script>
+
+<template>
+    <div class="flex items-center">
+        <svg
+            width="100%"
+            :height="props.height"
+            class="inline-block flex-grow"
+            :class="props.svgClass"
+        >
+            <rect
+                width="100%"
+                height="100%"
+                :rx="props.borderRadius"
+                :fill="props.backgroundColor"
+            />
+            <rect
+                height="100%"
+                :width="`${props.value}%`"
+                :rx="props.borderRadius"
+                :fill="fillColor"
+            />
+        </svg>
+        <div
+            v-if="props.showPercentage"
+            class="flex-none ml-2"
+            :class="labelClass"
+        >
+            <slot
+                v-if="$slots.label"
+                name="label"
+            />
+            <span
+                v-else
+                class="text-sm"
+            >
+                {{ percentage }}%
+            </span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+svg rect {
+    transition: width 0.3s linear;
+}
+</style>

package/components/ProgressLine/index.ts

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