@citruslime/ui 2.0.0-beta.5 → 2.0.0-beta.9

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

@@ -1,279 +0,0 @@
-<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/cl-ui-combo-box-header.vue

@@ -1,36 +0,0 @@
-<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">
-        <div v-if="additionalText !== ''"
-             class="w-1/2">
-            {{ additionalText }}
-        </div>
-        <div :class="{
-            'w-1/2': additionalText !== '',
-            'w-full': additionalText === ''
-        }">
-            {{ text }}
-        </div>
-        <div v-show="showClearButton"
-             class="cursor-pointer float-right"
-             @mousedown="$emit('clear-object')">
-            <icon class="hover:text-link-default mt-0.5 rounded-full"
-                  icon="ph:x-circle" />
-        </div>
-    </div>
-</template>

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

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-
-import { ComboBoxItem } from '../../../../@types';
-
-const props = withDefaults(defineProps<{
-    isCreateNewOption?: boolean;
-    selectedIndex?: number;
-    text?: string;
-    option?: ComboBoxItem | null;
-    index: number;
-}>(), {
-    isCreateNewOption: false,
-    selectedIndex: -1,
-    text: '',
-    option: () => null
-});
-
-const emit = defineEmits({
-    'create-object': null,
-    'select-object': null,
-    'option-highlighted': null
-});
-
-const displayedText = computed<string>(() => props.option?.name ?? props.text);
-const displayedParent = computed<string>(() => props.option?.parentName ?? '');
-const isHighlighted = ref<boolean>(false);
-
-/**
- * Event when the option is selected - triggers to either select
- * the highlight object, or prompt to create a new one.
- */
-function optionSelected () : void {
-    if (props.isCreateNewOption === true) {
-        emit('create-object');
-    }
-    else {
-        emit('select-object', props.option?.id);
-    }
-}
-
-/**
- * Event when the mouse hovers over the component.
- *
- * @param {boolean} hovered - Whether the mouse has hovered over or out of the component.
- */
-function onHover (hovered: boolean) : void {
-    if (hovered === true) {
-        isHighlighted.value = true;
-        emit('option-highlighted', props.index);
-    }
-    else {
-        if (props.index !== props.selectedIndex) {
-            isHighlighted.value = false;
-        }
-    }
-}
-
-/**
- * Update the highlight on the component.
- */
-function updateHighlight () : void {
-    if (props.selectedIndex === props.index) {
-        isHighlighted.value = true;
-    }
-    else {
-        isHighlighted.value = false;
-    }
-}
-
-watch(() => props.selectedIndex, () => updateHighlight());
-</script>
-
-<template>
-    <div class="border-b border-grey-0 border-t cursor-pointer flex p-1"
-         :class="{
-             'bg-grey-0': isHighlighted === false,
-             'bg-primary-default text-white': isHighlighted
-         }"
-         @mousedown="optionSelected"
-         @mousemove="onHover(true)"
-         @mouseleave="onHover(false)">
-        <div v-if="option !== null && option.parentId !== 0 && option.parentId !== undefined"
-             class="w-1/2">
-            {{ displayedParent }}
-        </div>
-        <div :class="{
-            'w-1/2': displayedParent !== '',
-            'w-full': displayedParent === ''
-        }">
-            {{ displayedText }}
-        </div>
-        <div v-show="isCreateNewOption"
-             class="float-right py-1.5">
-            <icon class="bg-primary-default rounded-full text-white"
-                  icon="ph:plus-circle" />
-        </div>
-    </div>
-</template>

package/src/components/footer/cl-ui-footer.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-    leftText?: string;
-    rightText?: string;
-}>(), {
-    leftText: '',
-    rightText: ''
-});
-</script>
-
-<template>
-    <div class="flex flex-wrap left-0 w-full">
-        <div v-if="$slots.default"
-             class="w-full">
-            <slot></slot>
-        </div>
-
-        <div v-show="leftText !== '' || rightText !== ''"
-             class="leading-10 text-sm w-full">
-            <strong v-show="leftText !== ''"
-                    class="float-left">
-                {{ leftText }}
-            </strong>
-
-            <strong v-show="rightText !== ''"
-                    class="float-right">
-                {{ rightText }}
-            </strong>
-        </div>
-    </div>
-</template>

package/src/components/grid/cell/cl-ui-grid-cell.vue

@@ -1,158 +0,0 @@
-<script lang="ts">
-export default {
-    inheritAttrs: false
-};
-</script>
-
-<script setup lang="ts">
-import { computed, ref, watch, watchEffect } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { DateFormat, GridColumn, GridColumnType, NumberFormat, StringFormat } from '../../../@types';
-import { copy } from '../../../utils';
-
-const props = withDefaults(defineProps<{
-    currentLocale?: string;
-    column: GridColumn;
-    record: Record<string, unknown>;
-    editMode?: boolean;
-}>(), {
-    currentLocale: 'en-GB',
-    editMode: false
-});
-
-const emit = defineEmits({
-    edit: null,
-    focus: null,
-    'undo-edit': null
-});
-
-const { d, n } = useI18n();
-
-const currentRecord = ref<Record<string, unknown>>(copy(props.record));
-
-const edited = computed<boolean>(() => currentRecord.value[props.column.field ?? ''] !== props.record[props.column.field ?? '']);
-
-/**
- * Retrieve a string value, from the provided record.
- *
- * @param record The record to get the value from.
- * @param key The property to get the value of.
- * @returns The record value, as a string.
- */
-function getStringValue (record: Record<string, unknown>, key: string): string {
-    return record[key] as string;
-}
-
-/**
- * Retrieve a numeric value, from the provided record.
- *
- * @param record The record to get the value from.
- * @param key The property to get the value of.
- * @returns The record value, as a number.
- */
-function getNumericValue (record: Record<string, unknown>, key: string): number {
-    return record[key] as number;
-}
-
-/**
- * Retrieve a boolean value, from the provided record.
- *
- * @param record The record to get the value from.
- * @param key The property to get the value of.
- * @returns The record value, as a boolean.
- */
-function getBooleanValue (record: Record<string, unknown>, key: string): boolean {
-    return record[key] as boolean;
-}
-
-/**
- * Emits an event to indicate that the cell was focused.
- */
-function cellFocused (): void {
-    emit('focus');
-}
-
-watchEffect(() => currentRecord.value = copy(props.record));
-
-watch(currentRecord, (newValue) => {
-    const property: string = props.column.field ?? '';
-
-    if (property !== '') {
-        if (newValue[property] !== props.record[property]) {
-            emit('edit', newValue[property]);
-        }
-        else {
-            emit('undo-edit');
-        }
-    }
-}, {
-    deep: true
-});
-</script>
-
-<template>
-    <td v-if="editMode && column.field && column.editable"
-        v-bind="$attrs"
-        :class="{
-            'bg-link-lighter': edited
-        }">
-        <strong class="lg:hidden mr-2">
-            {{ column.caption }}
-        </strong>
-
-        <slot :name="`${column.name}Edit`"
-              v-bind="{ cellFocused, column, edited, record: currentRecord }"></slot>
-    </td>
-    <td v-else
-        v-bind="$attrs">
-        <strong class="lg:hidden mr-2">
-            {{ column.caption }}
-        </strong>
-
-        <!-- Slot contents -->
-        <slot v-if="column.type === GridColumnType.SLOT"
-              :name="column.name"
-              v-bind="{ column, record }"></slot>
-        <!-- Booleans -->
-        <input v-else-if="column.type === GridColumnType.BOOLEAN && column.field !== undefined"
-               type="checkbox"
-               :checked="getBooleanValue(record, column.field)"
-               disabled>
-        <!-- Dates and datetimes -->
-        <template v-else-if="(column.type === GridColumnType.DATE || column.type === GridColumnType.DATETIME) && column.field !== undefined">
-            <template v-if="column.format !== undefined">
-                {{ d(new Date(getStringValue(record, column.field)), column.format, currentLocale) }}
-            </template>
-            <template v-else-if="column.type === GridColumnType.DATE">
-                {{ d(new Date(getStringValue(record, column.field)), DateFormat.DATE, currentLocale) }}
-            </template>
-            <template v-else>
-                {{ d(new Date(getStringValue(record, column.field)), DateFormat.DATETIME, currentLocale) }}
-            </template>
-        </template>
-        <!-- Numbers -->
-        <template v-else-if="column.type === GridColumnType.NUMBER && column.field">
-            <template v-if="column.format === NumberFormat.MULTIPLIER">
-                &times;{{ getNumericValue(record, column.field) }}
-            </template>
-            <template v-else-if="column.format !== undefined">
-                {{ n(getNumericValue(record, column.field), column.format, currentLocale) }}
-            </template>
-            <template v-else>
-                {{ getNumericValue(record, column.field) }}
-            </template>
-        </template>
-        <!-- Strings -->
-        <template v-else-if="column.field !== undefined">
-            <span v-if="column.maxLength !== undefined"
-                  class="inline-block whitespace-nowrap">
-                {{ getStringValue(record, column.field).trimToLength(column.maxLength, column.format !== undefined ? column.format === StringFormat.ELLIPSIS : false) }}
-            </span>
-            <span v-else
-                  class="inline-block whitespace-nowrap">
-                {{ getStringValue(record, column.field) }}
-            </span>
-        </template>
-    </td>
-</template>