@caipira/tamandua 0.0.1

package/components/InputAvatar/InputAvatar.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+
+defineOptions({ name: "TInputAvatar" });
+
+const props = defineProps<{
+    modelValue?: File | string;
+}>();
+
+const emit = defineEmits<{
+    (e: "update:modelValue", val: File): void;
+}>();
+
+const src = ref<string>();
+const value = ref<FileList>();
+
+const onChangeAvatar = async (event: Event): Promise<void> => {
+    const target = event.target as HTMLInputElement;
+    const files = target.files as FileList;
+
+    src.value = URL.createObjectURL(files[0]);
+
+    emit("update:modelValue", files[0]);
+};
+
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        if (typeof newValue === "string") {
+            src.value = newValue;
+        }
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <div class="relative h-40 w-40">
+        <t-avatar
+            size="xl"
+            :image="src"
+            icon="account"
+            class="text-white"
+        />
+        <label
+            for="file"
+            class="absolute transform bottom-1 right-2"
+        >
+            <t-icon
+                icon="camera"
+                size="lg"
+                class="rounded-full cursor-pointer p-2 color-caipira-primary-inverted bg-caipira-primary"
+            />
+        </label>
+        <input
+            id="file"
+            :value="value"
+            type="file"
+            class="hidden"
+            @change="onChangeAvatar"
+        />
+    </div>
+</template>

package/components/InputAvatar/index.ts

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

package/components/InputCheckbox/InputCheckbox.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { ref, watch, inject } from "vue";
+
+defineOptions({ name: "TInputCheckbox" });
+
+const props = withDefaults(
+    defineProps<{
+        key?: string;
+        disabled?: boolean;
+        modelValue?: boolean;
+        isIndeterminate?: boolean;
+        initializeValue?: boolean;
+    }>(),
+    {
+        key: "checkbox",
+        disabled: false,
+        isIndeterminate: false,
+        initializeValue: false,
+    },
+);
+
+/**
+ * "update:model-value" is emitted whenever the model value changes, even if that change
+ * was triggered by the component itself, and the "input" event is emitted only when the
+ * user interacts with the component.
+ */
+const emit = defineEmits<{
+    "update:model-value": [boolean];
+    input: [boolean];
+}>();
+
+const name = inject("id", "");
+const checked = ref<boolean | undefined>(false);
+const formStyle = inject("formStyle", { label: "", input: "" });
+
+const onInput = () => {
+    const value = !checked.value;
+
+    /**
+     * Always emit "update:model-value" first, so that we can safely check the model value
+     * in the input event handler.
+     */
+    emit("update:model-value", value);
+    emit("input", value);
+};
+
+watch(
+    () => props.modelValue,
+    (newValue?: boolean | undefined) => {
+        if (props.initializeValue && typeof newValue === "undefined") {
+            emit("update:model-value", false);
+        }
+
+        checked.value = newValue;
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <div
+        :class="{
+            [formStyle.label]: true,
+        }"
+    >
+        <input
+            v-model="checked"
+            v-bind="$attrs"
+            type="checkbox"
+            class="form-checkbox relative w-5 h-5 border input-border input-roundness color-caipira-primary-inverted bg-caipira-primary checked:bg-caipira-primary-inverted cursor-pointer input-outline"
+            :indeterminate="props.isIndeterminate"
+            :id="name"
+            :disabled="disabled"
+            @input="onInput"
+        />
+    </div>
+</template>

package/components/InputCheckbox/index.ts

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

package/components/InputColor/InputColor.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { inject, ref, watch } from "vue";
+
+defineOptions({ name: "TInputColor" });
+
+const props = withDefaults(
+    defineProps<{
+        disabled?: boolean;
+        modelValue?: string;
+        disableStyle?: boolean;
+    }>(),
+    {
+        disabled: false,
+        disableStyle: false,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "update:modelValue", val: string): void;
+}>();
+
+const color = ref<string>("");
+const formStyle = inject("formStyle", { label: "", input: "" });
+
+const onChange = ({ target }: Event) => {
+    const value = (target as HTMLInputElement).value;
+
+    if (!value) {
+        return;
+    }
+
+    emit("update:modelValue", value);
+};
+
+watch(
+    () => props.modelValue,
+    (value?: string) => {
+        if (value && value !== color.value) {
+            color.value = value;
+        }
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <input
+        type="color"
+        class="h-10 border-0 input-bg-color input-text-color input-outline input-roundnes input-roundness w-12"
+        :value="color"
+        :disabled="props.disabled"
+        @input="onChange"
+    />
+</template>

package/components/InputColor/index.ts

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

package/components/InputDate/InputDate.story.ts

@@ -0,0 +1,15 @@
+export default {
+    title: "Form/Date",
+};
+
+const Template1 = (args: any) => ({
+    setup() {
+        return { args };
+    },
+    template: `<t-input-date v-model="args.value" />`,
+});
+
+const Default: any = Template1.bind({});
+Default.args = { value: "1996-10-06" };
+
+export { Default };

package/components/InputDate/InputDate.vue

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

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