@caipira/tamandua 0.0.1 → 0.0.3

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,144 +0,0 @@
-<script lang="ts" setup>
-import { SocialDirectory } from "@/types/social-network";
-
-import { ref, watch, inject } from "vue";
-
-defineOptions({ name: "TInputMultiplier" });
-
-const props = withDefaults(
-    defineProps<{
-        modelValue?: any[];
-        type?: string;
-        label?: string;
-        inputProps?: any;
-    }>(),
-    {
-        type: "",
-        label: "",
-        inputProps: {},
-    },
-);
-
-const values = ref<any[]>([]);
-const formStyle = inject("formStyle", { label: "", input: "" });
-
-const emit = defineEmits<{
-    (e: "update:modelValue", val: any): void;
-    (e: "on-fetch-directory", val: SocialDirectory): void;
-}>();
-
-const add = () => {
-    // @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;
-    }
-};
-
-const onFetchDirectory = (directory: SocialDirectory) => {
-    values.value = [
-        ...values.value,
-        ...directory.social_networks
-            .filter(
-                (network) =>
-                    !!!values.value.find(
-                        (value) =>
-                            value.network === network.network &&
-                            value.profile === network.path,
-                    ),
-            )
-            .map((network) => ({
-                network: network.network,
-                profile: network.path,
-            })),
-    ];
-
-    emit("on-fetch-directory", directory);
-};
-
-watch(
-    values,
-    (newValues: any[]) => {
-        emit("update:modelValue", 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="add"
-            />
-        </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 }" />
-            <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/InputPassword/InputPassword.vue

@@ -1,168 +0,0 @@
-<script lang="ts" setup>
-import { InputPasswordModel } from "@/types/form";
-
-import dateService from "@/services/date";
-import passwordService from "@/services/password";
-import { inject, ref, watch } from "vue";
-
-import InputText from "@/components/InputText/InputText.vue";
-import ButtonCopy from "@/components/ButtonCopy/ButtonCopy.vue";
-
-defineOptions({ name: "TInputPassword" });
-
-const props = withDefaults(
-    defineProps<{
-        keyup?: any;
-        encrypt?: boolean;
-        canCopy?: boolean;
-        modelValue?: InputPasswordModel;
-        simpleMode?: boolean;
-        showRefresh?: boolean;
-        showStrength?: boolean;
-        autocomplete?: string;
-    }>(),
-    {
-        keyup: () => () => {},
-        encrypt: true,
-        canCopy: true,
-        simpleMode: false,
-        showRefresh: false,
-        showStrength: false,
-        autocomplete: "current-password",
-    },
-);
-
-const emit = defineEmits<{
-    (e: "generate", val: InputPasswordModel): void;
-    (e: "update:modelValue", val: InputPasswordModel): void;
-    (e: "enter"): void;
-}>();
-
-const type = ref<"password" | "text">("password");
-const input = ref<InstanceType<typeof InputText> | null>(null);
-const strength = ref<number>(0);
-const password = ref<string>("");
-const isLoading = ref<boolean>(false);
-const formStyle = inject("formStyle", { input: "w-full" });
-const updatedAt = ref<Date | null>(null);
-
-const setValue = (localPassword?: InputPasswordModel) => {
-    if (typeof localPassword !== "object") {
-        return;
-    }
-
-    password.value = localPassword.value;
-    strength.value = localPassword.strength
-        ? localPassword.strength
-        : passwordService.getPasswordStrength(localPassword.value).score;
-    updatedAt.value = localPassword.updatedAt ? localPassword.updatedAt : null;
-};
-
-const passwordToPayload = (password: string): InputPasswordModel => {
-    strength.value = passwordService.getPasswordStrength(password).score;
-
-    return {
-        value: password,
-        strength: strength.value,
-        encrypt: props.encrypt,
-        updatedAt: updatedAt.value ? updatedAt.value : null,
-    } as InputPasswordModel;
-};
-
-const onInput = (password: string) => {
-    emit("update:modelValue", passwordToPayload(password));
-};
-
-const focus = () => {
-    if (input.value && input.value.$el) {
-        input.value.$el.focus();
-    }
-};
-
-const generatePassword = async () => {
-    isLoading.value = true;
-
-    // const { data } = await api.get("passwords/generate");
-    const data = "asdasdasd545";
-
-    isLoading.value = false;
-
-    emit("generate", passwordToPayload(password.value));
-    onInput(data);
-};
-
-watch(() => props.modelValue, setValue, { immediate: true });
-
-defineExpose({ focus });
-</script>
-
-<template>
-    <div :class="{ [formStyle.input]: true }">
-        <div class="flex border h-9 relative input-roundness input-border">
-            <div
-                v-if="props.canCopy"
-                class="border-r select-none input-border input-control"
-                :class="{ 'w-12': props.canCopy }"
-            >
-                <ButtonCopy
-                    class="mx-1"
-                    :text="password"
-                    :is-disabled="isLoading"
-                />
-            </div>
-            <div
-                v-if="props.showRefresh"
-                class="border-r select-none input-border input-control"
-                :class="{ 'w-12': props.showRefresh }"
-            >
-                <t-icon
-                    icon="refresh"
-                    size="sm"
-                    role="button"
-                    :disabled="isLoading"
-                    @click="generatePassword"
-                />
-            </div>
-            <t-input-text
-                v-model="password"
-                :type="type"
-                :autocomplete="props.autocomplete"
-                :disabled="isLoading"
-                :disable-style="true"
-                ref="input"
-                class="w-full px-2 input-bg-color input-text-color input-outline input-roundness"
-                @keyup.enter="emit('enter')"
-                @input="onInput(password)"
-                @keyup="props.keyup"
-            />
-            <div class="border-l select-none input-border input-control">
-                <t-icon
-                    :icon="type === 'password' ? 'eye' : 'eye-off'"
-                    :disabled="isLoading"
-                    size="sm"
-                    role="button"
-                    @click="type = type === 'password' ? 'text' : 'password'"
-                />
-            </div>
-        </div>
-        <t-progress-line
-            v-if="props.showStrength"
-            :value="strength"
-            :height="1"
-            :show-percentage="false"
-            class="rounded-sm"
-        />
-        <small
-            v-if="updatedAt"
-            class="inline-block float-right select-none"
-        >
-            Last updated
-            {{
-                dateService.format(
-                    new Date(updatedAt),
-                    "MMMM do yyyy, hh:mm:ss",
-                )
-            }}
-        </small>
-    </div>
-</template>