@caipira/tamandua 0.0.2 → 0.0.5

package/components/InputDate/InputDate.vue

@@ -1,368 +0,0 @@
-<script lang="ts" setup>
-import uiService from "@/services/ui";
-import dateService from "@/services/date";
-import { watch, ref, computed, inject, onBeforeMount } from "vue";
-
-type Day = {
-    key: string;
-    day: number;
-    isToday: boolean;
-    overflow: number;
-    selected: boolean;
-};
-
-defineOptions({ name: "TInputDate" });
-
-const props = defineProps<{
-    value?: Date | string;
-    modelValue?: Date | string;
-    initialValue?: Date;
-}>();
-
-const emit = defineEmits<{
-    (e: "update:model-value", val: Date): void;
-}>();
-
-const today = new Date();
-const days: any = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-const formStyle = inject("formStyle", { input: "w-full" });
-const wrapperRef = ref<HTMLElement | null>(null);
-const showDatepicker = ref<boolean>(false);
-const canGoNextMonth = true;
-const canGoPreviousMonth = true;
-
-/**
- * Date being displayed in the datepicker dropdown
- */
-const date = ref<Date>(new Date());
-const displayYear = ref<number>(date.value.getFullYear());
-const displayMonth = ref<number>(date.value.getMonth());
-
-watch(
-    () => date.value,
-    (newDate: Date) => {
-        displayMonth.value = newDate.getMonth();
-        displayYear.value = newDate.getFullYear();
-    },
-    { immediate: true },
-);
-
-/**
- * v-model
- */
-let selectedDay: number;
-let selectedYear: number;
-let selectedMonth: number;
-
-watch(
-    () => props.modelValue,
-    () => {
-        if (props.modelValue) {
-            switch (typeof props.modelValue) {
-                case "string":
-                    const newDate = new Date(props.modelValue);
-
-                    if (newDate) {
-                        emit("update:model-value", newDate);
-                    }
-                    break;
-                case "object":
-                    date.value = props.modelValue;
-
-                    selectedDay = date.value.getDate();
-                    selectedYear = date.value.getFullYear();
-                    selectedMonth = date.value.getMonth();
-
-                    break;
-            }
-        }
-    },
-    { immediate: true },
-);
-
-/**
- * Value shown in the input field
- */
-const inputValue = computed<string>(() => {
-    if (!props.modelValue) {
-        return "";
-    }
-
-    const localDate =
-        typeof props.modelValue === "string"
-            ? new Date(props.modelValue)
-            : props.modelValue;
-
-    return dateService.format(localDate, "yyyy-MM-dd");
-});
-
-/**
- * Year select
- */
-const yearOptions = computed(() => {
-    const currentYear = today.getFullYear();
-
-    return Array.from({ length: 49 }, (_, i) => currentYear - 1 - i)
-        .reverse()
-        .concat(Array.from({ length: 51 }, (_, i) => currentYear + i));
-});
-
-const onSelectYear = (event: Event) =>
-    (date.value = dateService.setYear(
-        date.value,
-        (event?.target as HTMLInputElement)?.value as unknown as number,
-    ));
-
-/**
- * Reset datepicker display and close it
- */
-const closeDatepicker = () => {
-    showDatepicker.value = false;
-    date.value = selectedDay ? (props.modelValue as Date) : new Date();
-};
-
-const setDay = (localDay: Day) => {
-    if (localDay.overflow) {
-        date.value =
-            localDay.overflow > 0
-                ? dateService.addMonths(date.value, localDay.overflow)
-                : dateService.subMonths(date.value, ~localDay.overflow + 1);
-    }
-
-    date.value = dateService.setDate(date.value, localDay.day);
-
-    emit("update:model-value", date.value);
-    closeDatepicker();
-};
-
-const goPreviousMonth = () => {
-    date.value = dateService.subMonths(date.value, 1);
-};
-
-const goNextMonth = () => {
-    date.value = dateService.addMonths(date.value, 1);
-};
-
-const items = computed<Day[]>(() => {
-    const total = 42;
-    const days: Day[] = [];
-
-    const dayOfWeek = new Date(displayYear.value, displayMonth.value).getDay();
-    const daysLastMonth = dateService.getDaysInMonth(
-        dateService.subMonths(date.value, 1),
-    );
-    const daysCurrentMonth = dateService.getDaysInMonth(date.value);
-
-    const todayDay = today.getDate();
-    const todayYear = today.getFullYear();
-    const todayMonth = today.getMonth();
-
-    let index = 1;
-    let hoistedMonth = displayMonth.value - 1;
-
-    for (let i = daysLastMonth - (dayOfWeek - 1); i <= daysLastMonth; i++) {
-        days.push({
-            key: `${i}-${todayMonth - 1}`,
-            day: i,
-            isToday:
-                todayDay === i &&
-                todayMonth === hoistedMonth &&
-                todayYear === displayYear.value,
-            selected:
-                selectedDay === i &&
-                selectedMonth === hoistedMonth &&
-                selectedYear === displayYear.value,
-            overflow: -1,
-        });
-
-        index++;
-    }
-
-    hoistedMonth = displayMonth.value;
-
-    for (let i = 1; i <= daysCurrentMonth; i++) {
-        days.push({
-            key: `${i}-${todayMonth}`,
-            day: i,
-            isToday:
-                todayDay === i &&
-                todayMonth === hoistedMonth &&
-                todayYear === displayYear.value,
-            selected:
-                selectedDay === i &&
-                selectedMonth === hoistedMonth &&
-                selectedYear === displayYear.value,
-            overflow: 0,
-        });
-
-        index++;
-    }
-
-    hoistedMonth = displayMonth.value + 1;
-
-    for (let i = 1; index <= total; i++) {
-        days.push({
-            key: `${i}-${todayMonth + 1}`,
-            day: i,
-            isToday:
-                todayDay === i &&
-                todayMonth === hoistedMonth &&
-                todayYear === displayYear.value,
-            selected:
-                selectedDay === i &&
-                selectedMonth === hoistedMonth &&
-                selectedYear === displayYear.value,
-            overflow: 1,
-        });
-
-        index++;
-    }
-
-    return days;
-});
-
-const onInputClick = () => {
-    if (showDatepicker.value) {
-        closeDatepicker();
-    } else {
-        showDatepicker.value = true;
-    }
-};
-
-const off = (event: MouseEvent) => {
-    if (
-        wrapperRef.value &&
-        uiService.wasClickOutsideOfContainer(event, wrapperRef.value)
-    ) {
-        closeDatepicker();
-    }
-};
-
-onBeforeMount(() => {
-    document.addEventListener("click", off);
-
-    if (!props.modelValue && props.initialValue) {
-        emit("update:model-value", props.initialValue);
-    }
-});
-</script>
-
-<template>
-    <div
-        class="inline-block relative"
-        ref="wrapperRef"
-        :class="{ [formStyle.input]: true }"
-    >
-        <input
-            type="text"
-            readonly
-            :value="inputValue"
-            @click="onInputClick"
-            @keydown.escape="closeDatepicker"
-            class="w-full pl-2 pr-10 py-2 leading-none input-bg-color input-text-color border input-border input-roundness input-outline"
-            placeholder="Select date"
-        />
-        <div
-            class="mt-9 shadow-md p-4 absolute top-0 left-0 select-none z-10 bg-caipira-primary border input-border input-roundness"
-            style="width: 17rem"
-            v-show="showDatepicker"
-        >
-            <!-- Header -->
-            <div class="flex justify-between items-center mb-2">
-                <div>
-                    <!-- Month -->
-                    <span class="text-lg font-bold">
-                        {{ dateService.format(date, "MMMM") }}
-                    </span>
-
-                    <select
-                        class="ml-2 text-lg input-bg-color border input-border input-outline"
-                        @change="onSelectYear"
-                    >
-                        <option
-                            v-for="year in yearOptions"
-                            :key="year"
-                            :value="year"
-                            :selected="year === displayYear"
-                        >
-                            {{ year }}
-                        </option>
-                    </select>
-                </div>
-
-                <!-- Previous/Next month -->
-                <div>
-                    <button
-                        type="button"
-                        class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-hover p-1 rounded-full"
-                        :class="{
-                            'cursor-not-allowed opacity-25':
-                                !canGoPreviousMonth,
-                        }"
-                        :disabled="!canGoPreviousMonth"
-                        @click="goPreviousMonth"
-                    >
-                        <t-icon icon="chevron-left" />
-                    </button>
-                    <button
-                        type="button"
-                        class="transition ease-in-out duration-100 inline-flex cursor-pointer p-1 rounded-full hover:bg-hover"
-                        :class="{
-                            'cursor-not-allowed opacity-25':
-                                !canGoPreviousMonth,
-                        }"
-                        :disabled="!canGoPreviousMonth"
-                        @click="goNextMonth"
-                    >
-                        <t-icon icon="chevron-right" />
-                    </button>
-                </div>
-            </div>
-
-            <!-- Week days -->
-            <div class="flex flex-wrap mb-3 -mx-1">
-                <template
-                    v-for="localDay in days"
-                    :key="localDay"
-                >
-                    <div
-                        style="width: 14.26%"
-                        class="px-1"
-                    >
-                        <div class="font-medium text-center text-xs">
-                            {{ localDay }}
-                        </div>
-                    </div>
-                </template>
-            </div>
-
-            <!-- Month days -->
-            <div class="flex flex-wrap -mx-1">
-                <template
-                    v-for="localDay in items"
-                    :key="localDay.key"
-                >
-                    <div
-                        style="width: 14.28%"
-                        class="px-1 mb-1"
-                    >
-                        <div
-                            @click="setDay(localDay)"
-                            class="cursor-pointer text-center text-sm rounded leading-loose transition ease-in-out duration-100"
-                            :class="{
-                                'hover:bg-hover': !localDay.selected,
-                                'color-unfocused-text': localDay.overflow !== 0,
-                                'border border-caipira-primary-inverted':
-                                    localDay.isToday,
-                                'color-caipira-primary bg-caipira-primary-inverted':
-                                    localDay.selected,
-                            }"
-                        >
-                            {{ localDay.day }}
-                        </div>
-                    </div>
-                </template>
-            </div>
-        </div>
-    </div>
-</template>

package/components/InputDate/index.ts

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

package/components/InputMultiplier/InputMultiplier.vue

@@ -1,119 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch, inject } from "vue";
-import { InputMultiplierEvents, InputMultiplierProps } from "./types";
-
-defineOptions({ name: "TInputMultiplier" });
-
-const props = withDefaults(defineProps<InputMultiplierProps>(), {
-    type: "t-input-text",
-    label: "",
-    listeners: () => ({}),
-    inputProps: () => ({}),
-});
-
-const emit = defineEmits<InputMultiplierEvents>();
-
-const values = ref<any[]>([]);
-const formStyle = inject("formStyle", { label: "", input: "" });
-
-const addNewItem = () => {
-    // @todo: Add an switch case that adds an value according to the input type
-    values.value.push({});
-};
-
-const setValue = (value: any[]) => {
-    values.value = value;
-};
-
-const onRemoveItem = (index: number) => {
-    values.value.splice(index, 1);
-};
-
-const getItemKey = (value: any, index: number): string | number => {
-    switch (props.type) {
-        case "social":
-            return `${value.network}-${value.profile}`;
-        default:
-            return index;
-    }
-};
-
-watch(
-    values,
-    (newValues: any[]) => {
-        emit("update:model-value", newValues);
-    },
-    { deep: true },
-);
-
-watch(
-    () => props.modelValue,
-    (newValue) => {
-        setValue(newValue ?? []);
-    },
-    { immediate: true },
-);
-</script>
-
-<template>
-    <div>
-        <div class="inline-flex w-full items-center my-3">
-            <t-graphy-label
-                v-if="label"
-                :text="label"
-                class="text-right"
-            />
-            <t-button
-                :label="`Add ${label}`"
-                variant="primary"
-                :is-outline="true"
-                icon="plus"
-                size="sm"
-                @click="addNewItem"
-            />
-        </div>
-        <div
-            v-for="(value, index) in values"
-            :key="getItemKey(value, index)"
-            :label="`${label} ${index + 1}`"
-            class="flex items-center justify-start mt-1 ml-2"
-        >
-            <div :class="{ [formStyle.label]: true }" />
-            <component
-                :is="props.component"
-                v-model="values[index]"
-                v-bind="props.inputProps"
-                v-on="props.listeners"
-                class="my-1"
-            />
-            <!-- <t-input-social
-                v-if="type === 'social'"
-                v-model="values[index]"
-                class="my-1"
-                @onFetchDirectory="onFetchDirectory"
-            />
-            <t-input-text
-                v-else-if="type === 'text'"
-                v-model="values[index]"
-                class="my-1"
-            />
-            <t-input-phone
-                v-else-if="type === 'phone'"
-                v-model="values[index]"
-                class="my-1"
-            />
-            <t-input-website
-                v-else-if="type === 'website'"
-                v-model="values[index]"
-                v-bind="props.inputProps"
-                class="my-1"
-            /> -->
-            <t-icon-button
-                icon="close"
-                size="sm"
-                class="ml-2"
-                @click="() => onRemoveItem(index)"
-            />
-        </div>
-    </div>
-</template>

package/components/InputMultiplier/index.ts

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

package/components/InputMultiplier/input-multiplier.story.ts

@@ -1,30 +0,0 @@
-const story = {
-    title: "Form/Input multiplier",
-    args: {
-        label: "Name",
-        component: "t-input-text",
-        listeners: {
-            "update:model-value": (newValue: string) => {
-                console.log("new value from child: ", newValue);
-            },
-        },
-    },
-    argTypes: {
-        component: {
-            options: ["t-input-text", "t-input-phone"],
-            control: "radio",
-            description: "Set component",
-        },
-    },
-};
-
-const Template = (args: any) => ({
-    setup() {
-        return { args };
-    },
-    template: `<t-input-multiplier v-bind="args" />`,
-});
-
-const Default: any = Template.bind({});
-
-export { story as default, Default };