@caipira/tamandua 0.0.1

package/components/InputMultiplier/InputMultiplier.vue

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

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

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

package/components/InputPassword/index.ts

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

package/components/InputPhone/InputPhone.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import { Country } from "@/types/address";
+import { SelectOption, SelectValue } from "@/types/form";
+
+import { ref, watch, inject, onBeforeMount } from "vue";
+
+type PhoneNumber = {
+    iso2: string;
+    dialCode: string;
+    number: string;
+};
+
+defineOptions({ name: "TInputPhone" });
+
+const props = withDefaults(
+    defineProps<{
+        resource: any;
+        modelValue?: PhoneNumber;
+    }>(),
+    {
+        modelValue: () => ({}) as any,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "update:modelValue", val: PhoneNumber): void;
+}>();
+
+const number = ref<string>("");
+const country = ref<SelectValue>();
+const options = ref<SelectOption[]>([]);
+const countries = ref<Country[]>([]);
+const formStyle = inject("formStyle", { label: "", input: "" });
+
+const emitInput = () => {
+    if (!country.value) {
+        return;
+    }
+
+    const localCountry = countries.value.find(
+        (c) => c.dialCode === country.value,
+    );
+
+    if (!localCountry) {
+        return;
+    }
+
+    emit("update:modelValue", {
+        iso2: localCountry.iso2,
+        dialCode: localCountry.dialCode,
+        number: number.value ?? "",
+    });
+};
+
+const fetchCountries = async () => {
+    countries.value = await props.resource();
+
+    options.value =
+        countries.value.map(
+            (country: Country): SelectOption => ({
+                label: country,
+                value: country.dialCode,
+            }),
+        ) ?? [];
+};
+
+const setValue = async (value: any) => {
+    if (!value) {
+        return;
+    }
+
+    if (typeof value === "object") {
+        country.value = value.dialCode;
+
+        if ("number" in value) {
+            number.value = value.number;
+        }
+    }
+};
+
+onBeforeMount(async () => {
+    await fetchCountries();
+    setValue(props.modelValue);
+});
+
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        setValue(newValue);
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <div
+        class="flex border h-9 input-bg-color input-text-color input-border input-roundness"
+        :class="{ [formStyle.input]: true }"
+    >
+        <t-input-select
+            v-model="country"
+            :options="options"
+            :disable-style="true"
+            class="border-r w-min-20 flex justify-center items-center input-border"
+            @update:modelValue="emitInput"
+        >
+            <template v-slot:default="option">
+                <span
+                    >{{ option.flag }} {{ option.name }} +{{
+                        option.dialCode
+                    }}</span
+                >
+            </template>
+            <template v-slot:selection="option">
+                <span>{{ option.flag }} +{{ option.dialCode }}</span>
+            </template>
+        </t-input-select>
+        <t-input-text
+            v-model="number"
+            :disable-style="true"
+            class="w-full input-bg-color input-text-color input-outline input-roundness input-padding"
+            @input="emitInput"
+        />
+    </div>
+</template>

package/components/InputPhone/index.ts

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

package/components/InputPrice/InputPrice.vue

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import { InputPriceModel, SelectOption } from "@/types/form";
+
+import { ref, watch, inject, onBeforeMount } from "vue";
+
+defineOptions({ name: "TInputPrice", inheritAttrs: false });
+
+const props = withDefaults(
+    defineProps<{
+        modelValue?: InputPriceModel;
+        wrapperClass?: string;
+        resource?: any;
+    }>(),
+    {
+        modelValue: () => ({}) as any,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "update:modelValue", val: InputPriceModel): void;
+}>();
+
+const price = ref<string>("");
+const currency = ref<string>("");
+const formStyle = inject("formStyle", { label: "", input: "" });
+const currencies = ref<SelectOption[]>([]);
+
+const fetchCurrencies = async () => {
+    currencies.value = (await props.resource()).map(
+        (currency: any): SelectOption => ({
+            label: currency.symbol,
+            value: currency.iso,
+        }),
+    );
+};
+
+const emitInput = () => {
+    emit("update:modelValue", {
+        iso: currency.value,
+        value: parseFloat(price.value),
+    });
+};
+
+const setValue = (value: any) => {
+    if (!value || typeof value !== "object") {
+        return;
+    }
+
+    if (props.modelValue?.value) {
+        price.value = `${props.modelValue.value}`;
+    }
+
+    if (props.modelValue?.iso) {
+        currency.value = props.modelValue.iso;
+    }
+};
+
+onBeforeMount(async () => {
+    await fetchCurrencies();
+});
+
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        setValue(newValue);
+    },
+    { immediate: true },
+);
+</script>
+
+<template>
+    <div
+        class="flex h-9"
+        :class="{
+            [formStyle.input]: true,
+            'input-bg-color input-text-color border input-border input-roundness':
+                props.wrapperClass ? false : true,
+        }"
+    >
+        <t-input-select
+            v-model="currency"
+            :options="currencies"
+            :disable-style="true"
+            class="w-20 flex justify-center items-center border-r input-border"
+            v-bind="$attrs"
+            @update:modelValue="emitInput"
+        />
+        <t-input-text
+            v-model="price"
+            :disable-style="true"
+            class="w-full input-bg-color input-text-color input-outline input-roundness input-padding"
+            v-bind="$attrs"
+            @update:modelValue="emitInput"
+        />
+    </div>
+</template>

package/components/InputPrice/index.ts

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

package/components/InputRadio/InputRadio.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+let id = 0;
+</script>
+
+<script lang="ts" setup>
+import { inject } from "vue";
+
+defineOptions({ name: "TInputRadio" });
+
+const props = defineProps<{
+    value?: any;
+    label?: string;
+}>();
+
+const ref = `radio_${++id}`;
+const name = inject("name", "");
+const model = inject<string>("model", "");
+const change = inject<(value: string) => void>("change", () => {});
+const disabled = inject<boolean>("disabled", false);
+</script>
+
+<template>
+    <div class="h-9 inline-flex items-center">
+        <input
+            :value="props.value"
+            :name="name"
+            :id="ref"
+            :disabled="disabled"
+            :checked="props.value === model"
+            type="radio"
+            class="form-radio relative w-5 h-5 border border-caipira-primary-inverted checked:hover:border-caipira-primary-inverted checked:focus:border-caipira-primary-inverted checked:border-caipira-primary-inverted input-outline focus:input-outline bg-caipira-primary color-caipira-primary cursor-pointer bg-[length:30px]"
+            @change="change(props.value)"
+        />
+        <label
+            class="cursor-pointer pl-2 mr-3 input-label"
+            :for="ref"
+        >
+            {{ label }}
+        </label>
+    </div>
+</template>

package/components/InputRadio/InputRadioGroup.story.ts

@@ -0,0 +1,24 @@
+export default {
+    title: "Form/Radio Group",
+    args: {},
+};
+
+const defaultArgs = {};
+
+const Template = (args: typeof defaultArgs) => ({
+    setup() {
+        return { args };
+    },
+    template: `
+        <t-input-radio-group v-bind="args">
+            <t-input-radio value="1" label="Option 1" />
+            <t-input-radio value="2" label="Option 2" />
+            <t-input-radio value="3" label="Option 3" />
+        </t-input-radio-group>
+    `,
+});
+
+const Default: any = Template.bind({});
+Default.args = defaultArgs;
+
+export { Default };

package/components/InputRadio/InputRadioGroup.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { computed, provide, inject, onBeforeMount } from "vue";
+
+defineOptions({ name: "TInputRadioGroup" });
+
+const props = withDefaults(
+    defineProps<{
+        disabled?: boolean;
+        modelValue?: any;
+        initialValue?: any;
+    }>(),
+    {
+        disabled: false,
+    },
+);
+
+const formStyle = inject("formStyle", { input: "w-full" });
+
+const emit = defineEmits<{
+    (e: "update:modelValue", val: string): void;
+}>();
+
+const change = (value: string) => {
+    emit("update:modelValue", value);
+};
+
+const name: string = `radio_${Math.floor(Math.random() * 1000)}`;
+
+onBeforeMount(() => {
+    if (!props.modelValue && props.initialValue) {
+        change(props.initialValue);
+    }
+});
+
+provide("name", name);
+provide(
+    "model",
+    computed(() => props.modelValue),
+);
+provide("change", change);
+provide("disabled", props.disabled);
+</script>
+
+<template>
+    <div :class="{ [formStyle.input]: true }">
+        <slot />
+    </div>
+</template>