@caipira/tamandua 0.0.2 → 0.0.3

package/components/InputPassword/InputPassword.vue

@@ -1,170 +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";
-
-export type InputPasswordProps = {
-    autocomplete?: string;
-    canCopy?: boolean;
-    encryptor?: (value: string) => Promise<string>;
-    keyup?: any;
-    modelValue?: InputPasswordModel;
-    showRefresh?: boolean;
-    showStrength?: boolean;
-    simpleMode?: boolean;
-};
-
-defineOptions({ name: "TInputPassword" });
-
-const props = withDefaults(defineProps<InputPasswordProps>(), {
-    autocomplete: "current-password",
-    canCopy: true,
-    encryptor: undefined,
-    keyup: () => () => {},
-    modelValue: undefined,
-    showRefresh: false,
-    showStrength: false,
-    simpleMode: false,
-});
-
-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>();
-
-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;
-};
-
-const passwordToPayload = async (
-    password: string,
-): Promise<InputPasswordModel> => {
-    strength.value = passwordService.getPasswordStrength(password).score;
-
-    return {
-        value: password,
-        strength: strength.value,
-        encrypted: props.encryptor ? await props.encryptor(password) : password,
-        updatedAt: updatedAt.value,
-    };
-};
-
-const onInput = async (password: string) => {
-    emit("update:modelValue", await 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", await 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

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

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

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

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

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

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

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

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

package/components/InputRadio/index.ts

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

package/components/InputSelect/InputSelect.story.ts

@@ -1,87 +0,0 @@
-import { faker } from "@faker-js/faker";
-
-const story = {
-    title: "Form/Select",
-};
-
-const Template1 = (args: any) => ({
-    setup() {
-        return { args };
-    },
-    template: `
-        <t-input-select
-            v-model="args.value"
-            :options="args.items"
-            :placeholder="args.placeholder"
-            @change="args.change"
-        />
-  `,
-});
-
-const Template2 = (args: any) => ({
-    setup() {
-        return { args };
-    },
-    template: `
-        <t-input-select
-            v-model="args.value"
-            :options="args.items"
-            :placeholder="args.placeholder"
-        >
-            <template v-slot:default="option">
-                <img
-                    v-if="option.thumbnail" :src="option.thumbnail"
-                    class="favicon"
-                />
-                {{ option.name }}
-            </template>
-        </t-input-select>
-  `,
-});
-
-const defaultArgs: any = {
-    value: "",
-    placeholder: "Select an option",
-};
-
-const Default: any = Template1.bind({});
-Default.args = {
-    ...defaultArgs,
-    items: Array.from({ length: 10 }).map(() => ({
-        label: faker.person.fullName(),
-        value: faker.string.uuid(),
-    })),
-};
-
-const With_Images: any = Template2.bind({});
-With_Images.args = {
-    ...defaultArgs,
-    items: [
-        {
-            id: 1,
-            name: "DuckDuckGo",
-            thumbnail:
-                "https://upload.wikimedia.org/wikipedia/en/9/90/The_DuckDuckGo_Duck.png",
-        },
-        {
-            id: 2,
-            name: "Google",
-            thumbnail:
-                "https://banner2.cleanpng.com/20180324/sww/kisspng-google-logo-g-suite-chrome-5ab6e618b3b2c3.5810634915219358967361.jpg",
-        },
-        {
-            id: 3,
-            name: "Bing",
-            thumbnail:
-                "https://img.favpng.com/16/14/8/bing-news-logo-microsoft-msn-png-favpng-mwugypPENzFKWhVQQZnuGbvfD.jpg",
-        },
-        {
-            id: 4,
-            name: "Wikipedia",
-            thumbnail:
-                "https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png",
-        },
-    ].map((seller) => ({ label: seller, value: seller.id })),
-};
-
-export { story as default, Default, With_Images };