@caipira/tamandua 0.0.1

package/components/InputRadio/index.ts

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

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

package/components/InputSelect/InputSelect.vue

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

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

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