@westartcom/bread-quasar-fields 0.0.2

package/fields/ModelSearchField.vue

@@ -0,0 +1,860 @@
+<template>
+    <div class="field-wrap" :id="id" :class="{'disabled': (isDisabled)}">
+        <div class="field-wrap-inner">
+            <div class="field-label-wrap">
+                <label v-if="field.label">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
+            </div>
+
+            <div class="select" :class="{'multiple': (field.extra_data.multiple)}">
+                <div class="selected">
+                    <template v-if="isLoadingInitial">
+                        <div class="label">
+                            {{ $i18n.get('generic.loading') }}
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="label" v-if="selectedOptions.length && !field.extra_data.multiple" @click="toggleOptions">
+                            <template v-for="displayField in displayFields">
+                                {{ selectedOptions[0][displayField] }}
+                            </template>
+                        </div>
+
+                        <div class="label placeholder q-mb-sm" v-else-if="!selectedOptions.length || field.extra_data.multiple" @click="toggleOptions">
+                            <template v-if="field.placeholder">
+                                <q-btn icon="fa-solid fa-add" push :label="field.placeholder" />
+                            </template>
+                            <template v-else-if="field.extra_data.multiple">
+                                {{ $i18n.get('actions.add') }}
+                            </template>
+                            <template v-else>
+                                {{ $i18n.get('actions.select') }}
+                            </template>
+                        </div>
+                    </template>
+
+                    <div class="toggle-button" v-show="!isLoadingInitial" @click="toggleOptions">
+                        <chevron-down-icon v-if="!select.visible"></chevron-down-icon>
+                        <chevron-up-icon v-else></chevron-up-icon>
+                    </div>
+                </div>
+
+                <div class="options" v-if="select.visible">
+                    <div class="search" v-if="select.showSearch">
+                        <q-input
+                            :label="field.placeholder"
+                            class="q-px-md"
+                            :placeholder="$i18n.get('actions.search')"
+                            v-model="select.searchQuery"
+                            borderless
+                            clearable
+                            clear-icon="fa-regular fa-circle-xmark"></q-input>
+                        <span class="query-too-short" v-if="select.searchQuery && select.searchQuery.length < 3">{{ $i18n.get('generic.search_query_too_short') }}</span>
+                    </div>
+
+                    <template v-if="!isLoadingResults">
+                        <div v-if="!field.required && !field.extra_data.multiple" class="option" @click="selectOption(null)">
+                            <slot name="no-option-label">
+                                {{ $i18n.get('generic.no_option') }}
+                            </slot>
+                        </div>
+
+                        <div
+                            v-for="(option, index) in options"
+                            :key="index"
+                            class="option"
+                            :class="{'selected-option': (internalValue && internalValue.includes(option.id))}"
+                            @click="selectOption(option)">
+                            <slot
+                                name="option"
+                                :option="option"
+                                :field="field"
+                                :display-fields="displayFields"
+                                :extra-display-field="field.extra_data.extra_display_field">
+                                <slot name="option-display-fields" :option="option" :field="field" :display-fields="displayFields">
+                                    <template v-for="displayField in displayFields">
+                                        {{ option[displayField] }}
+                                    </template>
+                                </slot>
+                                <span v-if="field.extra_data.extra_display_field" class="extra-label">
+                                    <slot name="option-extra-field" :option="option" :field="field" :extra-display-field="field.extra_data.extra_display_field">
+                                        {{ option[field.extra_data.extra_display_field] }}
+                                    </slot>
+                                </span>
+                            </slot>
+                        </div>
+
+                        <div class="result-totals" v-if="select.showSearch && options.length && select.total > options.length">
+                            {{ $i18n.get('pagination.showing_count_of_total', {count: options.length, total: select.total}) }}
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="loading">{{ $i18n.get('generic.loading') }}</div>
+                    </template>
+
+                    <div class="no-result" v-if="!isLoadingResults && !Object.keys(options).length && (!select.showSearch || select.searchQuery)">
+                        {{ $i18n.get('generic.no_result') }}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="field-description" v-if="field.description">{{ field.description }}</div>
+
+        <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
+            <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
+        </div>
+
+        <div class="selected-options-multiple table-list" v-if="multiValueStyle === 'table' && selectedOptions.length && field.extra_data.multiple">
+            <div class="labels table-header" v-if="showLabels">
+                <div class="label column" v-for="(label, displayField) of field.extra_data.display_field_labels" :key="displayField">
+                    {{ label }}
+                </div>
+            </div>
+            <div class="selected-option-row table-row" v-for="option in selectedOptions" :key="option.id">
+                <template v-if="showLabels">
+                    <slot name="selected-option-label" :option="option" :display-fields="displayFields">
+                        <div class="selected-option-label column" v-for="(label, displayField) of field.extra_data.display_field_labels" :key="displayField">{{ option[displayField] }}</div>
+                    </slot>
+                </template>
+                <template v-else>
+                    <div class="selected-option-label text-weight-bold column">
+                        <slot name="selected-option-label" :option="option" :display-fields="displayFields">
+                            <template v-for="displayField in displayFields">
+                                {{ option[displayField] }}
+                            </template>
+                        </slot>
+                    </div>
+                </template>
+                <div class="column actions">
+                    <slot name="selected-option-actions" :option="option" />
+                    <q-btn
+                        flat
+                        round
+                        icon="fa-solid fa-trash"
+                        color="negative"
+                        :title="$i18n.get('actions.remove')"
+                        @click="removeOption(option)"></q-btn>
+                </div>
+            </div>
+        </div>
+
+        <div class="selected-options-multiple tags" v-else-if="multiValueStyle === 'tags' && selectedOptions.length && field.extra_data.multiple">
+            <div class="selected-option-tag" v-for="option in selectedOptions" :key="option.id">
+                <slot name="selected-option-tag" :option="option">
+                    <div class="selected-option-label">
+                        <slot name="selected-option-tag-label" :option="option" :display-fields="displayFields">
+                            <template v-for="displayField in displayFields">
+                                {{ option[displayField] }}
+                            </template>
+                        </slot>
+                    </div>
+                    <slot name="selected-option-actions" :option="option" />
+                    <button class="btn action delete" type="button" @click="removeOption(option)" :title="$i18n.get('actions.remove')">
+                        <close-icon :title="$i18n.get('actions.remove')" />
+                    </button>
+                </slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent, nextTick, PropType } from 'vue';
+import debounce from 'lodash-es/debounce';
+import concat from 'lodash-es/concat';
+import find from 'lodash-es/find';
+import merge from 'lodash-es/merge';
+import snakeCase from 'lodash-es/snakeCase';
+import { ApiQueryParams } from '@westartcom/bread-quasar-fields/interfaces/ApiQueryParams';
+import { ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces/ModelDefinition';
+import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
+import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
+import { ApiErrorResponse, ApiResponse } from '@westartcom/bread-quasar-fields/interfaces/ApiResponse';
+import { PaginatedApiResponse } from '@westartcom/bread-quasar-fields/interfaces/PaginatedApiResponse';
+
+interface ModelSearchFieldDefinition extends ModelFieldDefinition<FieldType.HASONE | FieldType.HASMANY, InputType.MODEL_SEARCH> {
+    default: number | Array<number | string> | null;
+    disabled?: boolean;
+    extra_data: {
+        multiple?: boolean;
+        prefetch?: boolean;
+        search_field: string;
+        display_field: string;
+        extra_display_field?: false | string;
+        display_field_labels?: false | {
+            [key: string]: string;
+        };
+        relation: string;
+        related_to: string;
+        endpoint: string;
+        split_query: boolean;
+        parent_model: string;
+        styling_format: 'select' | 'tags' | 'table';
+    }
+}
+
+interface SearchOption {
+    id: number | string;
+    [key: string]: any;
+}
+
+export default defineComponent({
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        field: {
+            type: Object as PropType<ModelSearchFieldDefinition>,
+            required: true
+        },
+        disabled: Boolean,
+        modelValue: [String, Number, Array],
+        errors: Array as PropType<string[]>,
+        modelId: [String, Number],
+        fullModel: Object,
+        customParams: Object as PropType<ApiQueryParams>
+    },
+
+    emits: [
+        'update:modelValue',
+        'update:invalid'
+    ],
+
+    components: {
+        ChevronDownIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/ChevronDownIcon.vue')),
+        ChevronUpIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/ChevronUpIcon.vue')),
+        CloseIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CloseIcon.vue'))
+    },
+
+    data() {
+        return {
+            invalid: null as boolean | null,
+            internalValue: [] as Array<number | string>,
+            internalErrors: [] as string[],
+            select: {
+                visible: false,
+                showSearch: false,
+                searchQuery: '',
+                total: 0
+            },
+            isLoadingInitial: true,
+            isLoadingResults: true,
+            hasInitialized: false,
+            options: [] as SearchOption[],
+            selectedOptions: [] as SearchOption[],
+            loadedCustomParams: null as string | null,
+        };
+    },
+
+    mounted() {
+        if (this.modelValue) {
+            this.internalValue = (Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]) as Array<number | string>;
+        } else if (this.field.default) {
+            this.internalValue = Array.isArray(this.field.default) ? this.field.default : [this.field.default];
+        }
+
+        document.addEventListener('click', this.onOutsideClick);
+
+        this.validate(this.internalValue);
+        setTimeout(() => {
+            this.loadInitial();
+        }, 50);
+    },
+
+    beforeUnmount() {
+        document.removeEventListener('click', this.onOutsideClick);
+    },
+
+    computed: {
+        isDisabled: function(): boolean {
+            return !!(this.disabled || this.field.disabled);
+        },
+
+        queryFields: function(): string[] {
+            let queryFields: string[] = (Array.isArray(this.field.extra_data.display_field)) ?
+                this.field.extra_data.display_field :
+                this.field.extra_data.display_field.split(',');
+
+            if (this.field.extra_data.extra_display_field) {
+                queryFields = concat(
+                    queryFields,
+                    (Array.isArray(this.field.extra_data.extra_display_field)) ?
+                        this.field.extra_data.extra_display_field :
+                        this.field.extra_data.extra_display_field.split(',')
+                );
+            }
+
+            if (!queryFields.includes('id')) {
+                queryFields.push('id');
+            }
+
+            return queryFields;
+        },
+
+        displayFields: function(): string[] {
+            return (Array.isArray(this.field.extra_data.display_field)) ?
+                this.field.extra_data.display_field :
+                this.field.extra_data.display_field.split(',');
+        },
+
+        concatenatedDisplayFields: function(): string[] {
+            let displayFields: string[] = [];
+
+            if (this.field.extra_data.extra_display_field) {
+                displayFields = concat(
+                    this.displayFields,
+                    (Array.isArray(this.field.extra_data.extra_display_field)) ?
+                        this.field.extra_data.extra_display_field :
+                        this.field.extra_data.extra_display_field.split(',')
+                );
+            }
+
+            return displayFields;
+        },
+
+        searchFields: function(): string[] {
+            return (Array.isArray(this.field.extra_data.search_field)) ?
+                this.field.extra_data.search_field :
+                this.field.extra_data.search_field.split(',');
+        },
+
+        splitSearchQuery: function(): boolean {
+            return this.field.extra_data?.split_query || false;
+        },
+
+        showLabels: function(): boolean {
+            return !!(Object.keys(this.concatenatedDisplayFields).length > 1 && this.field.extra_data.display_field_labels);
+        },
+
+        multiValueStyle: function(): 'select' | 'tags' | 'table' {
+            return this.field?.extra_data?.styling_format || 'table';
+        }
+    },
+
+    watch: {
+        modelValue: {
+            handler: function(val) {
+                if (val !== this.internalValue) {
+                    if (Array.isArray(val)) {
+                        if (
+                            (!this.internalValue || !Array.isArray(this.internalValue)) ||
+                            (val.toString() !== this.internalValue.toString())
+                        ) {
+                            this.internalValue = val;
+                            this.loadInitial();
+                        }
+                    } else {
+                        if (
+                            !this.internalValue ||
+                            this.internalValue[0] !== val
+                        ) {
+                            this.internalValue = (val) ? [val] : [];
+                            this.loadInitial();
+                        }
+                    }
+
+                    nextTick(() => {
+                        this.selectedOptions = this.selectedOptions.filter(
+                            option => option && this.internalValue.includes(option.id));
+                    });
+                }
+            },
+            deep: true
+        },
+
+        customParams: {
+            handler: function(val: ApiQueryParams | null) {
+                const stringifiedVal = (val) ? val.toString() : null;
+                if (stringifiedVal !== this.loadedCustomParams) {
+                    this.loadedCustomParams = stringifiedVal;
+                    this.loadInitial(true);
+                }
+            },
+            deep: true
+        },
+
+        'select.visible': function(val) {
+            // Reset searchQuery on close
+            if (!val) {
+                this.select.searchQuery = '';
+            }
+        },
+
+        'select.searchQuery': debounce(function(this: any, query) {
+            if (query && query.length >= 3) {
+                this.searchAPI(query);
+            }
+        }, 300),
+
+        selectedOptions: {
+            handler: function(val: SearchOption[]) {
+                if (val.length && val[0]) {
+                    if (this.field.extra_data.multiple) {
+                        const mappedOptions = val.map((option) => {
+                            return option.id;
+                        });
+
+                        if (this.internalValue.toString() !== mappedOptions.toString()) {
+                            this.internalValue = mappedOptions;
+                        }
+                    } else {
+                        this.internalValue = [val[0].id];
+                    }
+                } else {
+                    this.internalValue = [];
+                }
+            },
+            deep: true
+        },
+
+        internalValue: {
+            handler: function(val: Array<number | string>) {
+                this.validate(val);
+
+                if (this.field.extra_data.multiple) {
+                    this.$emit('update:modelValue', val);
+                } else {
+                    this.$emit('update:modelValue', (Array.isArray(val) && val.length) ? val[0] : null);
+                }
+            },
+            deep: true
+        },
+
+        errors: {
+            handler: function(val: string[]) {
+                this.internalErrors = val;
+            },
+            deep: true
+        },
+
+        internalErrors: {
+            handler: function(val: string[]) {
+                this.invalid = !!(val && val.length);
+            },
+            deep: true
+        },
+
+        invalid: function(val: boolean) {
+            this.$emit('update:invalid', val);
+        }
+    },
+
+    methods: {
+        async loadInitial(force = false) {
+            if (this.hasInitialized && (!this.modelValue || (Array.isArray(this.modelValue) && !this.modelValue.length)) && !force) {
+                return;
+            }
+
+            this.isLoadingInitial = true;
+            this.isLoadingResults = true;
+            this.select.showSearch = false;
+
+            // Fetch the currently selected option(s)
+            if (this.internalValue[0] || (this.field.extra_data.multiple && this.modelId)) {
+                if (this.field.extra_data.multiple && this.modelId) {
+                    this.loadInitialMultiOptions();
+                } else {
+                    this.loadInitialSingleOption();
+                }
+            } else {
+                this.isLoadingInitial = false;
+            }
+
+            // Fetch first few options and determine if search is necessary
+            if (!this.hasInitialized || force) {
+                if (this.field.extra_data.prefetch) {
+                    await this.loadPrefetchedOptions();
+                } else {
+                    this.select.showSearch = true;
+                    this.options = [];
+                    this.select.total = 0;
+                    this.isLoadingResults = false;
+                }
+            } else {
+                this.isLoadingResults = false;
+            }
+
+            this.hasInitialized = true;
+        },
+
+        async loadPrefetchedOptions() {
+            let params: ApiQueryParams = {
+                select: this.queryFields,
+                per_page: 20
+            };
+
+            if (this.customParams) {
+                params = merge(params, this.customParams);
+            }
+
+            this.options = await this.$http.get(this.field.extra_data.endpoint, {
+                params: params
+            }).then((response: PaginatedApiResponse) => {
+                this.isLoadingResults = false;
+                let options: SearchOption[] = [];
+
+                if (response.data.data && response.data.data.data.length) {
+                    this.select.showSearch = (response.data.data.last_page > 1);
+                    this.select.total = response.data.data.total;
+                    options = response.data.data.data;
+                }
+
+                return options;
+            }).catch(err => {
+                console.error(err);
+                this.select.total = 0;
+                this.isLoadingResults = false;
+                this.$modal.show('error');
+                return [];
+            });
+        },
+
+        loadInitialMultiOptions() {
+            const relationProp = (this.field.extra_data.relation) ? snakeCase(this.field.extra_data.relation) : null;
+            // If the provided model already has eager-loaded the relation, lets reuse that instead of calling the endpoint again
+            if (
+                relationProp &&
+                this.fullModel &&
+                this.fullModel.hasOwnProperty(relationProp) &&
+                Array.isArray(this.fullModel[relationProp])
+            ) {
+                this.selectedOptions = this.fullModel[relationProp];
+                this.isLoadingInitial = false;
+            } else {
+                let whereHasQuery: {
+                    [column: string]: any
+                } = {};
+                whereHasQuery[this.field.extra_data.parent_model] = {
+                    id: this.modelId
+                };
+
+                let params: ApiQueryParams = {
+                    select: this.queryFields,
+                    whereHas: [whereHasQuery],
+                    paginate: false
+                };
+
+                if (this.customParams) {
+                    params = merge(params, this.customParams);
+                }
+
+                this.$http.get(this.field.extra_data.endpoint, {
+                    params: params
+                }).then((response: ApiResponse) => {
+                    this.selectedOptions = response.data.data;
+                    this.isLoadingInitial = false;
+                }).catch((err: ApiErrorResponse) => {
+                    console.error(err);
+                    this.isLoadingInitial = false;
+                    this.$modal.show('error');
+                });
+            }
+        },
+
+        loadInitialSingleOption() {
+            const relationProp = (this.field.extra_data.relation) ? snakeCase(this.field.extra_data.relation) : null;
+            // If the provided model already has eager-loaded the relation, lets reuse that instead of calling the endpoint again
+            if (
+                relationProp &&
+                this.fullModel &&
+                this.fullModel.hasOwnProperty(relationProp)
+            ) {
+                this.selectedOptions = (this.fullModel[relationProp]) ? [this.fullModel[relationProp]] : [];
+                this.isLoadingInitial = false;
+            } else {
+                // If options has already been loaded once before and the selected option exists there, pluck value from there, otherwise fetch new
+                let selectedOption = find(this.options, (option) => this.internalValue[0] === option.id);
+                if (selectedOption) {
+                    this.selectedOptions = [selectedOption];
+                    this.isLoadingInitial = false;
+                } else {
+                    let params: ApiQueryParams = {
+                        select: this.queryFields,
+                        whereIn: {
+                            id: this.internalValue
+                        },
+                        paginate: false
+                    };
+
+                    if (this.customParams) {
+                        params = merge(params, this.customParams);
+                    }
+
+                    this.$http.get(this.field.extra_data.endpoint, {
+                        params: params
+                    }).then((response: ApiResponse) => {
+                        this.selectedOptions = response.data.data;
+                        this.isLoadingInitial = false;
+                    }).catch((err: ApiErrorResponse) => {
+                        console.error(err);
+                        this.isLoadingInitial = false;
+                        this.$modal.show('error');
+                    });
+                }
+            }
+        },
+
+        async searchAPI(query: string) {
+            this.isLoadingResults = true;
+
+            let params: ApiQueryParams = {
+                select: this.queryFields,
+                search: {
+                    columns: this.searchFields.join(','),
+                    value: query,
+                    split: this.splitSearchQuery
+                },
+                paginate: true,
+                per_page: 20
+            };
+
+            if (this.customParams) {
+                params = merge(params, this.customParams);
+            }
+
+            this.options = await this.$http.get(this.field.extra_data.endpoint, {
+                params: params
+            }).then((response: PaginatedApiResponse) => {
+                this.select.total = response.data.data.total;
+                return response.data.data.data;
+            }).catch((err: ApiErrorResponse) => {
+                console.error(err);
+                this.select.total = 0;
+                this.$modal.show('error');
+                return [];
+            });
+            this.isLoadingResults = false;
+        },
+
+        onOutsideClick(event) {
+            if (this.select.visible && !this.$el.querySelector('.select').contains(event.target)) {
+                this.toggleOptions();
+            }
+        },
+
+        toggleOptions(event?: any) {
+            if (this.isDisabled) {
+                this.select.visible = false;
+                return;
+            }
+
+            this.select.visible = !(this.select.visible);
+
+            if (this.select.visible && this.select.showSearch) {
+                nextTick(() => {
+                    const searchInput = this.$el.querySelector('.select .search > input');
+                    if (searchInput) {
+                        searchInput.focus();
+                    }
+                });
+            }
+        },
+
+        selectOption(option: SearchOption | null) {
+            if (option === null && !this.field.extra_data.multiple) {
+                this.selectedOptions = [];
+            }
+
+            // Only add if it's not added already
+            if (option !== null && !this.selectedOptions.some((selectedOption) => selectedOption.id === option.id)) {
+                if (this.field.extra_data.multiple) {
+                    this.selectedOptions.push(option);
+                } else {
+                    this.selectedOptions = [option];
+                }
+            }
+
+            this.select.visible = false;
+        },
+
+        removeOption(option: SearchOption) {
+            this.selectedOptions = this.selectedOptions.filter((selectedOption) => selectedOption.id !== option.id);
+        },
+
+        validate(val) {
+            this.invalid = (this.field.required && (!val || !val.length));
+        }
+    }
+});
+</script>
+
+<style scoped lang="scss">
+    .field-wrap.disabled {
+         .select {
+             .selected {
+                 cursor: not-allowed;
+                 border-color: var(--color-medium-tint);
+                 color: var(--color-medium);
+
+                 .label {
+                     color: var(--color-medium);
+                 }
+
+                 .toggle-button {
+                     border-color: var(--color-medium-tint);
+                 }
+             }
+        }
+    }
+
+    .select {
+        display: block;
+        position: relative;
+        user-select: none;
+        width: 100%;
+        max-width: var(--max-input-width);
+
+        > .selected {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            border: 2px solid var(--color-medium);
+            border-radius: var(--input-radius);
+            width: 100%;
+            line-height: 1.3;
+
+            .label {
+                flex-grow: 1;
+                padding: var(--global-spacing);
+                white-space: nowrap;
+                text-overflow: ellipsis;
+
+                &.placeholder {
+                    color: var(--color-medium-txt);
+                }
+            }
+
+            .toggle-button {
+                flex-shrink: 1;
+                padding: var(--global-spacing);
+                border-left: 2px solid var(--color-medium);
+            }
+        }
+
+        .options {
+            position: absolute;
+            display: block;
+            width: 100%;
+            background-color: white;
+            border: 1px solid $grey-3;
+            border-radius: 6px;
+            box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
+            z-index: 9999;
+            max-height: 300px;
+            overflow-y: auto;
+            margin-top: -10px;
+
+            .search {
+                .query-too-short {
+                    display: block;
+                    padding: 10px 15px;
+                    font-size: 0.75em;
+                    color: $negative;
+                    border-top: 1px solid $negative;
+                }
+                border-bottom: 1px solid $grey-3;
+            }
+
+            .loading {
+                color: $grey-5;
+                padding: 10px 15px;
+            }
+
+            .result-totals {
+                display: block;
+                color: var(--color-medium);
+                padding: var(--global-spacing-half);
+                font-size: var(--font-size-small);
+            }
+
+            .no-result {
+                color: $grey-5;
+                padding: 10px 15px;
+            }
+
+            .option {
+                display: block;
+                padding: 10px 15px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                cursor: pointer;
+                background: white;
+
+                .extra-label {
+                    display: block;
+                    font-size: var(--font-size-small);
+                }
+
+                &.selected-option {
+                    font-weight: bold;
+                    cursor: default;
+                    background-color: $accent;
+                    text-decoration-color: var(--color-primary);
+                }
+
+                &:hover:not(.selected-option) {
+                    background-color: $grey-2;
+                    color: var(--color-light-txt);
+                }
+            }
+        }
+    }
+
+    .selected-options-multiple {
+        max-width: var(--max-content-width);
+        margin-top: var(--global-spacing);
+        margin-bottom: var(--global-spacing);
+
+        &.tags {
+            display: flex;
+            flex-wrap: wrap;
+
+            .selected-option-tag {
+                display: flex;
+                align-items: center;
+                background-color: var(--color-dark-txt);
+                border-radius: var(--global-radius);
+                color: var(--color-light-txt);
+                margin-right: var(--global-spacing);
+                margin-bottom: var(--global-spacing-half);
+
+                .selected-option-label {
+                    padding: var(--global-spacing-half);
+                    line-height: 1;
+                    margin-top: 2px;
+                }
+
+                button.delete {
+                    border: 0;
+                    padding: var(--global-spacing-half);
+                    margin: 0;
+                    color: var(--color-light-txt);
+                }
+            }
+        }
+
+        &.table-list {
+            display: flex;
+            flex-direction: column;
+
+            .table-header, .table-row {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .table-row {
+                border-bottom: 1px solid $grey-3;
+                padding: 10px 0;
+                &:first-of-type {
+                    border-top: 1px solid $grey-3;
+                }
+                &:last-of-type {
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+</style>