@caipira/tamandua 0.0.2 → 0.0.5

package/components/InputSelect/InputSelect.vue

@@ -1,507 +0,0 @@
-<script lang="ts">
-let id = 0;
-</script>
-
-<script lang="ts" setup>
-import type Dropdown from "@/components/Dropdown/Dropdown.vue";
-import { Pagination } from "@/types/ui";
-import { ElementSize } from "@/enums/ui";
-import { ElementPosition } from "@/enums/ui";
-import { APISearchFilters } from "@/types/api";
-import { SelectOption, SelectValue, SelectValuePrimitives } from "@/types/form";
-
-import uiService from "@/services/ui";
-import {
-    ref,
-    watch,
-    inject,
-    computed,
-    nextTick,
-    onBeforeMount,
-    onBeforeUnmount,
-} from "vue";
-
-defineOptions({ name: "TInputSelect" });
-
-const props = withDefaults(
-    defineProps<{
-        size?: ElementSize;
-        options?: SelectOption[];
-
-        /** Mapper to convert search results to SelectOption  */
-        mapper?: (i: any) => SelectOption;
-
-        /** Filter function */
-        filter?: (input: string, option: SelectOption) => boolean;
-
-        tooltip?: string;
-        disabled?: boolean;
-        resource?: (
-            filters?: APISearchFilters | undefined,
-        ) => Promise<{ items: unknown[]; pagination: Pagination }>;
-        multiple?: boolean;
-        identifier?: string;
-        modelValue?: SelectValue;
-        placeholder?: string;
-        initialValue?: any;
-        disableStyle?: boolean;
-
-        /** Indicates whether the user can search the options */
-        isSearchable?: boolean;
-
-        dropdownPlacement?: `${ElementPosition}`;
-    }>(),
-    {
-        size: ElementSize.DEFAULT,
-        options: () => [],
-        mapper: (i: any): SelectOption => ({ value: i.id ?? i.uuid, label: i }),
-        filter: (input: string, option: SelectOption): boolean =>
-            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
-        tooltip: "",
-        multiple: false,
-        identifier: "id",
-        placeholder: "",
-        disableStyle: false,
-        isSearchable: false,
-        dropdownPlacement: ElementPosition.BOTTOM,
-    },
-);
-
-let bubble: boolean = false;
-let timeout!: any;
-let lastSearch: string = "";
-
-const name = `checkbox_${++id}`;
-const search = ref<string>("");
-const items = ref<SelectOption[]>([]);
-const inputRef = ref<HTMLInputElement | null>(null);
-const formStyle = inject("formStyle", { label: "", input: "" });
-const wrapperRef = ref<InstanceType<typeof HTMLDivElement> | null>(null);
-const listVisible = ref<boolean>(false);
-const dropdownRef = ref<InstanceType<typeof Dropdown> | null>(null);
-const selectedIndexes = ref<number[]>([]);
-
-/**
- * If the options come from the API and we know the backend response includes the pagination,
- * we can load either more or all the options once the user hits the end of the list,
- * so store that pagination for tracking here
- *
- */
-const backendPagination = ref<Pagination | null>(null);
-
-const emit = defineEmits<{
-    (e: "update:modelValue", val: any): void;
-}>();
-
-const hasValue = computed((): boolean => {
-    return selectedIndexes.value.length > 0;
-});
-
-const showSearchbox = computed((): boolean => {
-    return props.isSearchable && listVisible.value;
-});
-
-const isRemote = computed((): boolean => {
-    return typeof props.resource === "function";
-});
-
-const isOptionSelected = (item: any): boolean => {
-    if (
-        !props.multiple ||
-        !props.modelValue ||
-        !Array.isArray(props.modelValue)
-    ) {
-        return false;
-    }
-
-    return props.modelValue.includes(item.option[props.identifier]);
-};
-
-const isValidValue = (
-    value: SelectValue | undefined = props.modelValue,
-): boolean => {
-    return !(
-        value === undefined ||
-        value === "" ||
-        (Array.isArray(value) && value.length === 0)
-    );
-};
-
-const emitValue = (value: any) => {
-    emit("update:modelValue", value);
-};
-
-const setValue = (value: any = props.modelValue) => {
-    if (!isValidValue(value)) {
-        return;
-    }
-
-    if (props.multiple) {
-        if (Array.isArray(value)) {
-            selectedIndexes.value = value
-                .map((item: SelectValuePrimitives) =>
-                    findOptionIndexByValue(item),
-                )
-                .filter((item: number) => item > -1);
-        }
-    } else {
-        const index = findOptionIndexByValue(value);
-
-        if (~index) {
-            selectedIndexes.value = [index];
-        }
-    }
-};
-
-const toggleDropdown = (e: Event) => {
-    listVisible.value = !listVisible.value;
-
-    if (listVisible.value && showSearchbox.value) {
-        nextTick(() => {
-            inputRef.value?.focus();
-        });
-    }
-
-    e.stopPropagation();
-};
-
-const findOptionIndexByValue = (value: SelectValue): number => {
-    return items.value.findIndex(
-        (option: SelectOption) => option.value === value,
-    );
-};
-
-const off = (event: any) => {
-    if (
-        wrapperRef.value &&
-        uiService.wasClickOutsideOfContainer(event, wrapperRef.value)
-    ) {
-        listVisible.value = false;
-    }
-};
-
-const fetch = async (loadNextPage = false) => {
-    if (!props.resource) {
-        return;
-    }
-
-    const filters: APISearchFilters = {
-        t: search.value,
-        r: "option",
-    };
-
-    if (
-        loadNextPage &&
-        backendPagination.value &&
-        backendPagination.value.pages > backendPagination.value.page
-    ) {
-        filters.page = backendPagination.value.page + 1;
-    } else {
-        loadNextPage = false;
-    }
-
-    // @todo: if multiple, send array of values
-    if (!search.value && props.modelValue) {
-        filters.i = props.modelValue as string;
-    }
-
-    const data = await props.resource(filters);
-
-    if (loadNextPage) {
-        items.value.push(...data.items.map(props.mapper));
-    } else {
-        items.value = data.items.map(props.mapper);
-    }
-
-    backendPagination.value = data.pagination;
-
-    if (!isRemote.value && search.value) {
-        setValue(search.value);
-    }
-};
-
-const throttle = () => {
-    if (lastSearch === search.value) {
-        return;
-    }
-
-    if (timeout) {
-        clearTimeout(timeout);
-
-        timeout = null;
-    }
-
-    timeout = setTimeout(() => {
-        lastSearch = search.value;
-
-        if (isRemote.value) {
-            if (!listVisible.value) {
-                listVisible.value = true;
-            }
-
-            fetch();
-        } else if (props.isSearchable) {
-            items.value = props.options.filter((option: any) =>
-                props.filter(search.value, option),
-            );
-        }
-    }, 500);
-};
-
-const onBlur = () => {
-    listVisible.value = false;
-};
-
-const onEsc = (event: KeyboardEvent) => {
-    listVisible.value = false;
-
-    event.stopPropagation();
-};
-
-const onSelect = ({
-    index,
-    hold,
-}: {
-    index: number;
-    option: SelectOption;
-    hold: boolean;
-}) => {
-    bubble = true;
-
-    if (props.multiple) {
-        const existingIndex = selectedIndexes.value.findIndex(
-            (index2: number) => index2 === index,
-        );
-
-        if (~existingIndex) {
-            selectedIndexes.value.splice(existingIndex, 1);
-        } else {
-            selectedIndexes.value.push(index);
-        }
-    } else {
-        selectedIndexes.value = [index];
-    }
-
-    if (!props.multiple || !hold) {
-        listVisible.value = false;
-    }
-};
-
-const onListEnd = () => {
-    if (
-        isRemote.value &&
-        backendPagination.value &&
-        backendPagination.value.pages > backendPagination.value.page
-    ) {
-        fetch(true);
-    }
-};
-
-const onKeyDown = async (e: KeyboardEvent) => {
-    const key = e.key;
-
-    switch (key) {
-        case "ArrowDown":
-            dropdownRef.value?.move(e);
-            break;
-    }
-};
-
-onBeforeMount(async () => {
-    if (isRemote.value) {
-        await fetch();
-
-        /**
-         * Instead of using { immediate: true } in the modelValue watcher, if the options come
-         * from the network, we need to wait for them to be loaded, so we wait for that and then call
-         * the setValue to update to ti's current value
-         *
-         */
-        setValue();
-    } else if (props.options.length > 0) {
-        items.value = props.options;
-    }
-
-    if (!props.modelValue && props.initialValue) {
-        setValue(props.initialValue);
-    } else {
-        setValue(props.modelValue);
-    }
-
-    document.addEventListener("click", off);
-});
-
-onBeforeUnmount(() => {
-    document.removeEventListener("click", off);
-});
-
-watch(
-    () => props.modelValue,
-    async (newValue) => {
-        if (!newValue) {
-            return;
-        }
-
-        /**
-         * If the value is not in the options and the options come from the netwoek, fetch the option for the value
-         * and use it to hydrate the select
-         *
-         */
-        if (findOptionIndexByValue(newValue) < 0 && isRemote.value) {
-            await fetch();
-        }
-
-        setValue(newValue);
-    },
-);
-
-watch(
-    selectedIndexes,
-    (newValue) => {
-        const value = props.multiple
-            ? items.value
-                  .filter((option: SelectOption, index) =>
-                      selectedIndexes.value.includes(index),
-                  )
-                  .map((option: SelectOption) => option.value)
-            : items.value[selectedIndexes.value[0]].value;
-
-        if (bubble) {
-            bubble = false;
-            emitValue(value);
-        }
-    },
-    { deep: true },
-);
-
-watch(
-    () => props.options,
-    (newOptions: SelectOption[]) => {
-        if (newOptions.length > 0) {
-            items.value = newOptions;
-
-            if (props.modelValue && selectedIndexes.value.length === 0) {
-                setValue(props.modelValue);
-            }
-        }
-    },
-);
-</script>
-
-<template>
-    <div :class="{ [formStyle.input]: !props.disableStyle }">
-        <div
-            ref="wrapperRef"
-            :class="{
-                'h-9': !props.disableStyle && !props.multiple,
-                'min-h-9': !props.disableStyle && props.multiple,
-                'text-left select-none input-bg-color input-text-color border input-border input-roundness':
-                    !props.disableStyle,
-                [formStyle.input]: !props.disableStyle,
-            }"
-            class="inline-flex justify-between items-center w-full text-left"
-            role="button"
-            @click="toggleDropdown"
-            @blur="onBlur"
-            @keyup.esc="onEsc"
-        >
-            <div
-                v-if="!showSearchbox"
-                class="flex items-center ml-2"
-                :class="{
-                    'overflow-hidden whitespace-nowrap': !props.multiple,
-                    'flex-wrap': props.multiple,
-                }"
-            >
-                <!-- Render selection with 'selection' slot, highest priority -->
-                <template v-if="$slots.selection && hasValue">
-                    <slot
-                        name="selection"
-                        v-bind="items[selectedIndexes[0]].label"
-                    />
-                </template>
-
-                <!-- Render selection with default slot passed -->
-                <template v-else-if="$slots.default && hasValue">
-                    <template v-if="props.multiple">
-                        <template v-for="selection in selectedIndexes">
-                            <slot v-bind="items[selection].label" />
-                        </template>
-                    </template>
-                    <slot
-                        v-else
-                        v-bind="items[selectedIndexes[0]].label"
-                    />
-                </template>
-
-                <!-- No slot passed, render selection ourselves -->
-                <template v-else-if="hasValue">
-                    <template v-if="props.multiple">
-                        <t-tag
-                            v-for="selection in selectedIndexes"
-                            :key="selection"
-                            :text="items[selection].label"
-                            color="#6e6e6e"
-                        />
-                    </template>
-                    <span v-else>{{ items[selectedIndexes[0]]?.label }}</span>
-                </template>
-            </div>
-            <input
-                v-else
-                v-model="search"
-                type="text"
-                ref="inputRef"
-                :placeholder="props.placeholder"
-                :disabled="props.disabled"
-                :readonly="!props.isSearchable"
-                :class="{ 'cursor-pointer': !props.isSearchable }"
-                class="w-full h-9 bg-transparent input-padding input-roundness input-outline"
-                @click="(e) => e.stopPropagation()"
-                @input="throttle"
-                @keydown="onKeyDown"
-            />
-            <t-icon-button
-                :disable-style="true"
-                class="h-9"
-                :icon="listVisible === true ? 'chevron-up' : 'chevron-down'"
-                @click="toggleDropdown"
-            />
-        </div>
-        <t-popover
-            :placement="props.dropdownPlacement"
-            :is-visible="listVisible"
-        >
-            <template v-slot:content>
-                <t-dropdown
-                    ref="dropdownRef"
-                    :owner="name"
-                    :items="items"
-                    :is-visible="listVisible"
-                    :multiple="props.multiple"
-                    class="fixed"
-                    aria-describedby="tooltip"
-                    @change="onSelect"
-                    @end-reached="onListEnd"
-                >
-                    <template
-                        v-if="$slots.default"
-                        #default="data"
-                    >
-                        <div class="flex w-full justify-between items-center">
-                            <div class="flex items-center">
-                                <slot v-bind="data.label" />
-                            </div>
-                            <t-icon
-                                v-if="isOptionSelected(data)"
-                                icon="check"
-                                size="sm"
-                                class="float-right ml-2"
-                            />
-                        </div>
-                    </template>
-                </t-dropdown>
-            </template>
-        </t-popover>
-    </div>
-</template>

package/components/InputSelect/index.ts

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

package/components/InputSwitch/InputSwitch.story.ts

@@ -1,34 +0,0 @@
-export default {
-    title: "Form/Switch",
-    args: {},
-    argTypes: {
-        disabled: {
-            options: [true, false],
-            control: "boolean",
-            description: "Disable input",
-            table: {
-                type: { summary: "bool" },
-                defaultValue: { summary: false },
-            },
-        },
-        label: {
-            table: { type: { summary: "string" } },
-        },
-    },
-};
-
-const defaultArgs = {
-    label: "Encrypt files",
-};
-
-const Template = (args: typeof defaultArgs) => ({
-    setup() {
-        return { args };
-    },
-    template: `<t-input-switch v-bind="args" />`,
-});
-
-const Default: any = Template.bind({});
-Default.args = defaultArgs;
-
-export { Default };

package/components/InputSwitch/InputSwitch.vue

@@ -1,82 +0,0 @@
-<script lang="ts">
-let id = 0;
-</script>
-
-<script lang="ts" setup>
-import { ref, watch } from "vue";
-
-defineOptions({ name: "TInputSwitch" });
-
-const props = withDefaults(
-    defineProps<{
-        label?: string;
-        disabled?: boolean;
-        modelValue?: boolean;
-    }>(),
-    {
-        label: "",
-        disabled: false,
-    },
-);
-
-const emit = defineEmits<{
-    (e: "update:modelValue", val: boolean): void;
-}>();
-
-const name = `switch_${++id}`;
-const checked = ref<boolean>(false);
-
-const onInput = () => {
-    const value = !checked.value;
-
-    emit("update:modelValue", value);
-};
-
-watch(
-    () => props.modelValue,
-    (newValue?: boolean) => {
-        checked.value = !!newValue;
-    },
-    { immediate: true },
-);
-</script>
-
-<template>
-    <div>
-        <div
-            class="relative inline-block w-12 mr-2 align-middle select-none"
-            :class="{
-                'rounded-full': !checked,
-            }"
-        >
-            <input
-                v-model="checked"
-                type="checkbox"
-                class="absolute block w-6 h-6 rounded-full appearance-none cursor-pointer bg-caipira-primary border input-outline"
-                :class="{
-                    'right-0 border-caipira-primary-inverted': checked,
-                    'border-caipira-tertiary': !checked,
-                }"
-                :name="name"
-                :id="name"
-                :disabled="disabled"
-                @input="onInput"
-            />
-            <label
-                :for="name"
-                :class="{
-                    'bg-caipira-primary-inverted': checked,
-                    'bg-caipira-tertiary': !checked,
-                }"
-                class="block overflow-hidden h-6 rounded-full cursor-pointer"
-            />
-        </div>
-        <label
-            v-if="label"
-            class="text-base cursor-pointer"
-            :for="name"
-        >
-            {{ label }}
-        </label>
-    </div>
-</template>

package/components/InputSwitch/index.ts

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

package/components/InputText/InputText.vue

@@ -1,62 +0,0 @@
-<script lang="ts" setup>
-import { computed, inject } from "vue";
-
-defineOptions({ name: "TInputText" });
-
-const props = withDefaults(
-    defineProps<{
-        modelValue?: string;
-        type?: string;
-        placeholder?: string;
-        autocomplete?: string;
-        disabled?: boolean;
-        disableStyle?: boolean;
-    }>(),
-    {
-        modelValue: "",
-        type: "text",
-        placeholder: undefined,
-        autocomplete: undefined,
-        disabled: false,
-        disableStyle: false,
-    },
-);
-
-const emit = defineEmits<{
-    (e: "update:model-value", val: string): void;
-    (e: "keyup.enter", val: any): void;
-}>();
-
-const id = inject("id", "");
-const invalid = inject("invalid", false);
-const formStyle = inject("formStyle", { input: "w-full" });
-const validated = inject("validated", false);
-
-const value = computed({
-    get: () => {
-        return props.modelValue;
-    },
-    set: (value: string) => {
-        emit("update:model-value", value);
-    },
-});
-</script>
-
-<template>
-    <input
-        v-model="value"
-        :type="props.type"
-        :class="{
-            'h-9 input-bg-color input-text-color input-outline border input-border input-roundnes input-padding input-roundness':
-                !props.disableStyle,
-            [formStyle.input]: !props.disableStyle,
-            'border-red-500': !validated && invalid,
-            'border-emerald-500': validated && !invalid,
-        }"
-        :id="id"
-        :placeholder="props.placeholder"
-        :autocomplete="props.autocomplete"
-        :disabled="props.disabled"
-        v-bind="$attrs"
-    />
-</template>