@citruslime/ui 1.2.1-beta.0 → 2.0.0-beta.3

package/src/components/combo-box/cl-ui-combo-box.vue

@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { ComboBoxItem, ComboBoxCreateRequest, ComboBoxCreateResponse, ComboBoxLocalisations, ComboBoxSearchContainerLocalisations } from '../../@types';
+import { showNotification } from '../../composables/notification';
+
+import ClUiComboBoxSearch from './search-container/cl-ui-combo-box-search.vue';
+
+const props = withDefaults(defineProps<{
+    localisations?: ComboBoxLocalisations & ComboBoxSearchContainerLocalisations;
+    loading?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    objectType: string;
+    objectParentType?: string;
+    canCreateNewObject?: boolean;
+    canClearSelectedObject?: boolean;
+    errorMessage?: string;
+    objectCreatedResponse?: ComboBoxCreateResponse | null;
+    parentObjectCreatedResponse?: ComboBoxCreateResponse | null;
+    results?: ComboBoxItem[];
+    parentResults?: ComboBoxItem[];
+    currentObject?: ComboBoxItem | null;
+}>(), {
+    localisations: () => ({
+        emptyHintText: 'Choose a {0}',
+        createTitle: 'Create {0}',
+        createProperty: 'Name',
+        createParentTitle: 'Create {0}',
+        createParentyProperty: 'Name',
+        parentName: 'Object',
+        create: 'Create',
+        cancel: 'Cancel',
+        createSuccessful: 'Successfully created the {0} \'{1}\'',
+        createFailed: 'Could not create \'{0}\' - {1}',
+        required: 'Required',
+
+        searchHintText: 'Enter the {0} name',
+        errorMessage: 'An error has occurred: {0}',
+        addPrompt: 'Add \'{0}\' as new {1}',
+        noResults: '0 matching results for \'{0}\''
+    }),
+    loading: false,
+    disabled: false,
+    required: false,
+    objectParentType: '',
+    canCreateNewObject: false,
+    canClearSelectedObject: true,
+    errorMessage: '',
+    objectCreatedResponse: () => null,
+    parentObjectCreatedResponse: () => null,
+    results: () => [],
+    parentResults: () => [],
+    currentObject: () => null
+});
+
+const emit = defineEmits({
+    search: null,
+    'search-parent': null,
+    'create-object': null,
+    'create-parent-object': null,
+    'update:current-object': null
+});
+
+const searchContainerVisible = ref<boolean>(false);
+
+const selectedItem = computed<ComboBoxItem | null>({
+    get: () => props.currentObject,
+    set: (value) => emit('update:current-object', value)
+});
+
+const parentItem = ref<ComboBoxItem | null>(null);
+const currentText = computed<string>(() => getDisplayName());
+const hintText = computed<string>(() => props.localisations.emptyHintText.replacePlaceholders(props.objectType));
+const createHeader = computed<string>(() => props.localisations.createTitle.replacePlaceholders(props.objectType));
+
+const objectToCreateValue = ref<string>('');
+const parentObjectToCreateValue = ref<string>('');
+const createObjectRequest = ref<ComboBoxCreateRequest>();
+const objectToCreateValid = ref<boolean>(true);
+
+/**
+ * Toggles the visibility of the dropdown.
+ *
+ * @param {boolean} forcedState - The state to force the visibility to.
+ */
+function toggleDropdown (forcedState?: boolean) : void {
+    if (!props.disabled) {
+        if (typeof forcedState !== 'undefined') {
+            searchContainerVisible.value = forcedState;
+        }
+        else {
+            searchContainerVisible.value = !searchContainerVisible.value;
+        }
+    }
+}
+
+/**
+ * Emit an event to get data filtered by the search term.
+ *
+ * @param {string} searchTerm - The search term.
+ */
+function search (searchTerm: string) : void {
+    objectToCreateValue.value = searchTerm;
+    emit('search', searchTerm);
+}
+
+/**
+ * Emit an event to get data for the parent, filtered by the search term.
+ *
+ * @param searchTerm - The search term.
+ */
+function searchParent (searchTerm: string) : void {
+    parentObjectToCreateValue.value = searchTerm;
+    emit('search-parent', searchTerm);
+}
+
+/**
+ * Clear the object that is currently set.
+ */
+function clearObject () : void {
+    selectedItem.value = null;
+    toggleDropdown(false);
+}
+
+/**
+ * Select an object by an id.
+ *
+ * @param {number} id - The id of the object.
+ */
+function selectObject (id: number) : void {
+    const item = getComboBoxItemById(id);
+
+    selectedItem.value = item;
+    toggleDropdown(false);
+}
+
+/**
+ * Get a combo box item by an id.
+ *
+ * @param {number} id - The id of the item.
+ * @returns {ComboBoxItem | null} - The combo box item with the id.
+ */
+function getComboBoxItemById (id: number) : ComboBoxItem | null {
+    let currentItem = null;
+
+    if (props.results !== null) {
+        for (let i = 0; i < props.results.length; i++) {
+            if (props.results[i].id === id) {
+                currentItem = props.results[i];
+                break;
+            }
+        }
+    }
+
+    return currentItem;
+}
+
+/**
+ * Emit an event to create a new object.
+ */
+function createObject () : void {
+    createObjectRequest.value = {
+        name: objectToCreateValue.value,
+        parentId: parentItem.value?.id ?? 0
+    };
+
+    emit('create-object', createObjectRequest.value);
+}
+
+/**
+ * Emit an event to create a new parent object.
+ */
+function createParentObject () : void {
+    createObjectRequest.value = {
+        name: parentObjectToCreateValue.value,
+        parentId: 0
+    };
+
+    emit('create-parent-object', createObjectRequest.value);
+}
+
+/**
+ * Handle the response after trying to create an object.
+ */
+function handleObjectCreateResponse () : void {
+    if (props.objectCreatedResponse?.error) {
+        showNotification({
+            message: props.localisations.createFailed.replacePlaceholders(objectToCreateValue.value, props.objectCreatedResponse.error),
+            colour: 'danger',
+            duration: 10000
+        });
+    }
+    else if (props.objectCreatedResponse?.id) {
+        handleSuccessfulObjectCreation();
+    }
+}
+
+/**
+ * Handle the response after creating a parent object.
+ */
+function handleParentObjectCreateResponse (): void {
+    if (props.parentObjectCreatedResponse?.id) {
+        parentItem.value = {
+            id: props.parentObjectCreatedResponse.id,
+            name: props.parentObjectCreatedResponse.name ?? ''
+        };
+    }
+}
+
+/**
+ * Handle the successful creation of an object.
+ */
+function handleSuccessfulObjectCreation () : void {
+    showNotification({
+        message: props.localisations.createSuccessful.replacePlaceholders(props.objectType, props.objectCreatedResponse?.name ?? ''),
+        colour: 'primary',
+        duration: 10000
+    });
+
+    let parentName = '';
+
+    if (parentItem.value && parentItem.value.id === props.objectCreatedResponse?.parentId) {
+        parentName = parentItem.value.name;
+    }
+
+    selectedItem.value = {
+        id: props.objectCreatedResponse?.id ?? 0,
+        name: props.objectCreatedResponse?.name ?? '',
+        parentId: props.objectCreatedResponse?.parentId ?? 0,
+        parentName
+    };
+}
+
+/**
+ * Get the name of the selected object to display on the root input.
+ *
+ * @returns {string} - The name to display.
+ */
+function getDisplayName () : string {
+    let name = '';
+
+    if (selectedItem.value) {
+        if (selectedItem.value.parentName) {
+            name = selectedItem.value.parentName + '; ' + selectedItem.value.name;
+        }
+        else {
+            name = selectedItem.value.name;
+        }
+    }
+
+    return name;
+}
+
+/**
+ * Validate the object that will be created to determine whether
+ * a name has been entered and a parent object has been selected.
+ */
+function validateObjectToCreate () : void {
+    let valid = true;
+
+    if (objectToCreateValue.value === '') {
+        valid = false;
+    }
+
+    if (props.objectParentType !== '' && parentItem.value === null) {
+        valid = false;
+    }
+
+    objectToCreateValid.value = valid;
+}
+
+watch(() => props.objectCreatedResponse, () => handleObjectCreateResponse());
+watch(() => props.parentObjectCreatedResponse, () => handleParentObjectCreateResponse());
+watch(() => objectToCreateValue.value, () => validateObjectToCreate());
+watch(() => parentItem.value, () => validateObjectToCreate());
+</script>
+
+<template>
+    <div>
+        <div class="flex">
+            <input v-model="currentText"
+                   class="!bg-transparent z-10"
+                   :class="{ 'cursor-pointer': disabled === false }"
+                   type="text"
+                   :placeholder="hintText"
+                   :disabled="disabled"
+                   @focus="toggleDropdown(true)">
+
+            <div v-if="required && disabled === false"
+                 class="relative right-20">
+                <div class="absolute flex float-right font-semibold mt-2 text-danger-default text-sm">
+                    {{ localisations.required }}
+
+                    <icon class="ml-1 mt-1"
+                          icon="ph:warning" />
+                </div>
+            </div>
+
+            <div class="border border-grey-1 float-right hover:bg-primary-default hover:text-white px-1 py-2.5 text-grey-3 w-min"
+                 :class="{
+                     'bg-off-white cursor-default hover:bg-off-white hover:text-grey-3': disabled,
+                     'cursor-pointer': disabled === false
+                 }"
+                 @click="toggleDropdown(true)">
+                <icon icon="ph:caret-down"
+                      weight="fill" />
+            </div>
+        </div>
+
+        <cl-ui-modal size="x-small"
+                     :title="createHeader"
+                     :confirm-button="localisations.create"
+                     :cancel-button="localisations.cancel"
+                     :confirm-enabled="objectToCreateValid"
+                     @confirm="createObject">
+            <template #trigger="{toggleModal}">
+                <cl-ui-combo-box-search v-show="searchContainerVisible"
+                                        :can-create-new-object="canCreateNewObject"
+                                        :can-clear-selected-object="canClearSelectedObject"
+                                        :localisations="localisations"
+                                        :loading="loading"
+                                        :results="results"
+                                        :object-type="objectType"
+                                        :object-parent-type="objectParentType"
+                                        :error-message="errorMessage"
+                                        :current-object-name="currentText"
+                                        :is-visible="searchContainerVisible"
+                                        @create-object="toggleModal"
+                                        @select-object="selectObject"
+                                        @clear-object="clearObject"
+                                        @search="search"
+                                        @hide-dropdown="toggleDropdown(false)" />
+            </template>
+
+            <cl-ui-combo-box v-if="objectParentType !== ''"
+                             v-model:current-object="parentItem"
+                             class="mt-3"
+                             :results="parentResults"
+                             :loading="loading"
+                             :object-type="objectParentType"
+                             :object-created-response="parentObjectCreatedResponse"
+                             :can-create-new-object="canCreateNewObject"
+                             :can-clear-selected-object="canClearSelectedObject"
+                             :error-message="errorMessage"
+                             @search="searchParent"
+                             @create-object="createParentObject" />
+
+            <label class="mt-3">
+                {{ localisations.createProperty }}
+            </label>
+
+            <input v-model="objectToCreateValue"
+                   type="text">
+        </cl-ui-modal>
+    </div>
+</template>

package/src/components/combo-box/search-container/cl-ui-combo-box-search.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { ComboBoxItem, ComboBoxSearchContainerLocalisations } from '../../../@types';
+
+import ClUiComboBoxHeader from './header/cl-ui-combo-box-header.vue';
+import ClUiComboBoxSelectable from './selectable/cl-ui-combo-box-selectable.vue';
+
+const props = withDefaults(defineProps<{
+    localisations: ComboBoxSearchContainerLocalisations;
+    loading?: boolean;
+    objectType: string;
+    objectParentType?: string;
+    errorMessage?: string;
+    canCreateNewObject?: boolean;
+    canClearSelectedObject?: boolean;
+    currentObjectName?: string;
+    results?: ComboBoxItem[];
+    isVisible?: boolean;
+}>(), {
+    loading: false,
+    objectParentType: '',
+    errorMessage: '',
+    canCreateNewObject: false,
+    canClearSelectedObject: true,
+    currentObjectName: '',
+    results: () => [],
+    isVisible: false
+});
+
+const emit = defineEmits({
+    'clear-object': null,
+    'create-object': null,
+    'select-object': null,
+    search: null,
+    'hide-dropdown': null
+});
+
+const searchText = ref<string>('');
+const showAddNewOption = ref<boolean>(false);
+const currentSelection = ref<number>(-1);
+const firstIndexInResults = computed<number>(() => showAddNewOption.value ? -1 : 0);
+
+const combinedErrorMessage = computed<string>(() => props.localisations.errorMessage.replacePlaceholders(props.errorMessage));
+const searchHint = computed<string>(() => props.localisations.searchHintText.replacePlaceholders(props.objectType));
+const addPrompt = computed<string>(() => props.localisations.addPrompt.replacePlaceholders(searchText.value, props.objectType));
+const noResults = computed<string>(() => props.localisations.noResults.replacePlaceholders(searchText.value));
+
+const container = ref<HTMLElement>();
+const searchBox = ref<HTMLInputElement>();
+
+/**
+ * Event when the text in the search box is updated that will trigger
+ * the search call.
+ *
+ * @param {KeyboardEvent} keyboardEvent - The keyboard event on the input.
+ */
+function search (keyboardEvent?: KeyboardEvent) : void {
+    if (keyboardEvent === undefined || (
+        keyboardEvent?.code.startsWith('Arrow') === false
+                    && keyboardEvent?.code.startsWith('Control') === false
+                    && keyboardEvent?.code.startsWith('Shift') === false
+                    && keyboardEvent?.code.startsWith('Tab') === false
+                    && keyboardEvent?.code !== 'Enter')) {
+        emit('search', searchText.value);
+
+        currentSelection.value = -2;
+    }
+}
+
+/**
+ * Emits up to the combo box to select the object with the given id.
+ *
+ * @param {number} id - The object's id.
+ */
+function selectObject (id: number) : void {
+    emit('select-object', id);
+}
+
+/**
+ * Emits up to the combo box to create a new object.
+ */
+function createObject () : void {
+    emit('create-object', searchText.value);
+    hideDropdown();
+}
+
+/**
+ * Emits up to the combo box to hide the dropdown.
+ */
+function hideDropdown () : void {
+    emit('hide-dropdown');
+}
+
+/**
+ * Update the current selection when the Down arrow on the keyboard is pressed.
+ *
+ * @param {number} firstIndex - The index of the first item that can be selected.
+ */
+function onKeyboardArrowDown (firstIndex: number): void {
+    if (currentSelection.value < props.results.length - 1) {
+
+        if (currentSelection.value === -2 && searchText.value === '') {
+            currentSelection.value++;
+        }
+
+        currentSelection.value++;
+    }
+    else {
+        currentSelection.value = firstIndex;
+    }
+
+    scroll();
+}
+
+/**
+ * Update the current selection when the Up arrow on the keyboard is pressed.
+ *
+ * @param {number} firstIndex - The index of the first item that can be selected.
+ */
+function onKeyboardArrowUp (firstIndex: number): void {
+    if (currentSelection.value > firstIndex) {
+        currentSelection.value--;
+    }
+    else {
+        currentSelection.value = props.results.length - 1;
+    }
+
+    scroll();
+}
+
+/**
+ * Select the currently highlighted object in the list when the Enter button on the keyboard is pressed.
+ */
+function onKeyboardEnter (): void {
+    if (currentSelection.value >= 0 && props.results !== undefined) {
+        selectObject(props.results[currentSelection.value].id);
+    }
+    else if (currentSelection.value === -1) {
+        createObject();
+    }
+}
+
+/**
+ * Ensure the focus leaves the control when pressing Shift+Tab by forcing focus on
+ * the previously selectable input.
+ *
+ * @param {KeyboardEvent} keyboardEvent - The keyboard event.
+ */
+function onKeyboardShiftTab (keyboardEvent: KeyboardEvent) : void {
+    if (keyboardEvent.key === 'Tab' && keyboardEvent.shiftKey === true) {
+        const selectableElements = document.getElementsByTagName('input');
+        let indexOfPreviouslySelectableItem = -1;
+
+        for (let i = 0; i < selectableElements.length; i++) {
+            if (selectableElements[i] === keyboardEvent.target) {
+                indexOfPreviouslySelectableItem = i - 1;
+            }
+        }
+
+        if (indexOfPreviouslySelectableItem >= 0) {
+            selectableElements[indexOfPreviouslySelectableItem].focus();
+            hideDropdown();
+        }
+    }
+}
+
+/**
+ * Scroll the results to the highlighted object.
+ */
+function scroll () : void {
+    if (props.results && props.results.length > 1) {
+        const heightOffset = 34;
+        container.value?.scrollTo(0, ((currentSelection.value + 1) * heightOffset) - (heightOffset * 2));
+    }
+}
+
+/**
+ * Update the add new option to determine whether it should be displayed.
+ */
+function updateAddNewOption () : void {
+    let finalResultMatches = false;
+
+    if (props.results !== null && props.results.length === 1) {
+        finalResultMatches = searchText.value.toUpperCase().trim() === props.results[0].name.toUpperCase().trim();
+    }
+
+    showAddNewOption.value = props.canCreateNewObject === true
+                && props.errorMessage === ''
+                && searchText.value.trim() !== ''
+                && finalResultMatches === false;
+}
+
+/**
+ * Update the index of the selected object.
+ *
+ * @param {number} index - The index.
+ */
+function updateSelectedObjectIndex (index: number) : void {
+    currentSelection.value = index;
+}
+
+/**
+ * Event when visibility of the search container changes. If visible,
+ * makes a call to get the data and then sets the focus on the search box.
+ */
+function onVisibilityChanged () : void {
+    if (props.isVisible === true) {
+        searchText.value = '';
+        search();
+
+        nextTick(() => searchBox.value?.focus());
+    }
+}
+
+watch(() => props.results, () => updateAddNewOption());
+watch(() => props.errorMessage, () => updateAddNewOption());
+watch(() => props.isVisible, () => onVisibilityChanged());
+
+onMounted(() => container.value?.addEventListener('keydown', onKeyboardShiftTab));
+
+onUnmounted(() => container.value?.removeEventListener('keydown', onKeyboardShiftTab));
+</script>
+
+<template>
+    <div ref="container"
+         class="bg-white border border-collapse border-grey-0 h-52 overflow-y-auto p-2 text-sm"
+         @keydown.up.prevent.stop="onKeyboardArrowUp(firstIndexInResults)"
+         @keydown.down.prevent.stop="onKeyboardArrowDown(firstIndexInResults)"
+         @keyup.enter.prevent.stop="onKeyboardEnter">
+        <div class="flex">
+            <input ref="searchBox"
+                   v-model="searchText"
+                   type="text"
+                   :placeholder="searchHint"
+                   @keyup="search"
+                   @blur="hideDropdown">
+
+            <cl-ui-loading-spinner v-if="loading"
+                                   class="absolute ml-2 mt-11" />
+        </div>
+
+        <cl-ui-combo-box-header v-if="currentObjectName !== ''"
+                                :show-clear-button="canClearSelectedObject"
+                                :text="currentObjectName"
+                                @clear-object="$emit('clear-object')" />
+
+        <cl-ui-combo-box-header v-if="objectParentType !== '' && results !== null && results.length > 0 && errorMessage === ''"
+                                :text="objectType"
+                                :additional-text="objectParentType" />
+
+        <cl-ui-combo-box-header v-if="results !== null && results.length === 0 && searchText.trim() !== '' && canCreateNewObject === false && errorMessage === ''"
+                                :text="noResults" />
+
+        <cl-ui-combo-box-header v-if="errorMessage !== ''"
+                                class="!bg-danger-light text-danger-dark"
+                                :text="combinedErrorMessage" />
+
+        <cl-ui-combo-box-selectable v-if="showAddNewOption"
+                                    :is-create-new-option="true"
+                                    :text="addPrompt"
+                                    :index="-1"
+                                    :localisations="localisations"
+                                    :selected-index="currentSelection"
+                                    @create-object="createObject"
+                                    @option-highlighted="updateSelectedObjectIndex" />
+
+        <div v-if="errorMessage === '' && results !== null">
+            <cl-ui-combo-box-selectable v-for="(result, index) in results"
+                                        :key="index"
+                                        :localisations="localisations"
+                                        :option="result"
+                                        :index="index"
+                                        :selected-index="currentSelection"
+                                        @select-object="selectObject"
+                                        @option-highlighted="updateSelectedObjectIndex" />
+        </div>
+    </div>
+</template>

package/src/components/combo-box/search-container/{header-option/header-option.vue → header/cl-ui-combo-box-header.vue}

@@ -1,4 +1,18 @@
-<script lang="ts" src="./header-option"></script>
+<script setup lang="ts">
+withDefaults(defineProps<{
+    showClearButton?: boolean;
+    text?: string;
+    additionalText?: string;
+}>(), {
+    showClearButton: false,
+    text: '',
+    additionalText: ''
+});
+
+defineEmits({
+    'clear-object': null
+});
+</script>
 
 <template>
     <div class="bg-grey-2 border-b border-grey-2 border-t flex p-1">
@@ -15,7 +29,8 @@
         <div v-show="showClearButton"
              class="cursor-pointer float-right"
              @mousedown="$emit('clear-object')">
-            <ph-x-circle class="hover:text-link-default mt-0.5 rounded-full" />
+            <icon class="hover:text-link-default mt-0.5 rounded-full"
+                  icon="ph:x-circle" />
         </div>
     </div>
 </template>