@caipira/tamandua 0.0.2 → 0.0.5

package/components/Popover/Popover.vue

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

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

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

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

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

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

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

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

package/components/SensitiveInfo/SensitiveInfo.vue

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

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

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

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

@@ -1,30 +0,0 @@
-import { faker } from "@faker-js/faker";
-
-const story = {
-    title: "Table",
-};
-
-const Template = (args: any) => ({
-    setup() {
-        return { args };
-    },
-    template: `<t-table v-bind="args" />`,
-});
-
-const Default: any = Template.bind({});
-Default.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" },
-    ],
-};
-
-export { story as default, Default };