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

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

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { FilterMethod, FilterMethodType, FilterOperation, FilterRequest, GridColumn, GridColumnType, GridFilterLocalisations, NumberFormat } from '../../../@types';
+import { copy } from '../../../utils/copy';
+import { useDebouncer } from '../../../utils/debouncer';
+import { filterMethods } from '../../../utils/filter-methods';
+
+const props = withDefaults(defineProps<{
+    request: FilterRequest;
+    currentLocale?: string;
+    localisations: GridFilterLocalisations;
+    column: GridColumn;
+    firstHalf?: boolean;
+}>(), {
+    currentLocale: 'en-GB',
+    firstHalf: true
+});
+
+const emit = defineEmits({
+    'update:request': null
+});
+
+const { debounce } = useDebouncer(750);
+
+const allowedFilterMethods = computed<FilterMethod[]>(() => {
+    const methods = getAllowedMethods();
+
+    methods.forEach(m => {
+        m.description = props.localisations[m.method as keyof GridFilterLocalisations];
+    });
+
+    return methods;
+});
+
+const currentFilterMethod = computed<FilterMethod | undefined>(() => {
+    let filterMethod: string | undefined = props.request.filters.find(f => f.filterOnColumn === props.column.field)?.filterMethod;
+
+    if (typeof filterMethod === 'undefined') {
+        filterMethod = FilterOperation[getDefaultFilterOperation()];
+    }
+
+    return allowedFilterMethods.value.find(m => m.method.toLowerCase() === filterMethod?.removeNonAlphanumeric()?.toLowerCase());
+});
+
+const currentFilter = computed<string>(() => props.request.filters.find(f => f.filterOnColumn === props.column.field)?.filterValue ?? '');
+const currentNumberFilter = computed<number>(() => Number(currentFilter.value));
+const currentDateFilter = computed<Date | null>(() => currentFilter.value !== '' ? new Date(currentFilter.value) : null);
+
+const decimalSeparator = computed<string>(() =>
+    Intl.NumberFormat(props.currentLocale)
+        .format(1.1)
+        .replace(/[0-9]+/g, ''));
+
+/**
+ * Gets the default operation for the type of the current column.
+ *
+ * @returns The default filter operation.
+ */
+function getDefaultFilterOperation (): FilterOperation {
+    return props.column.type === GridColumnType.STRING || props.column.slotType === GridColumnType.STRING ?
+        FilterOperation.CONTAINS :
+        props.column.type === GridColumnType.DATETIME || props.column.slotType === GridColumnType.DATETIME ? FilterOperation.LESS_THAN : FilterOperation.EQUAL;
+}
+
+/**
+ * Gets a list of allowed filter methods, for the current column, based on the column type.
+ *
+ * @returns The available filter methods.
+ */
+function getAllowedMethods (): FilterMethod[] {
+    let result: FilterMethod[] = [];
+
+    if (props.column.type !== GridColumnType.SLOT) {
+        result = filterMethods.filter(f => f.allowedTypes.includes(props.column.type));
+    }
+    else if (typeof props.column.slotType !== 'undefined' && typeof props.column.field !== 'undefined') {
+        result = filterMethods.filter(f => f.allowedTypes.includes(props.column.slotType as Exclude<GridColumnType, GridColumnType.SLOT>));
+    }
+
+    return result;
+}
+
+/**
+ * Emits an event to update the current filter method, for the current column.
+ *
+ * @param filterMethod The new filter method, for the column.
+ */
+function setFilterMethod (filterMethod: FilterMethodType): void {
+    const filterRequest = copy(props.request);
+    const index: number = filterRequest.filters.findIndex(f => f.filterOnColumn === props.column.field);
+
+    if (index >= 0) {
+        filterRequest.filters[index].filterOperation = FilterOperation[filterMethod.toUpperCase() as keyof typeof FilterOperation];
+        filterRequest.filters[index].filterMethod = filterMethod.toUpperCase() as FilterMethodType;
+    }
+    else if (typeof props.column.field !== 'undefined') {
+        filterRequest.filters.push({
+            filterOnColumn: props.column.field,
+            filterMethod: filterMethod.toUpperCase() as FilterMethodType,
+            filterOperation: FilterOperation[filterMethod.toUpperCase() as keyof typeof FilterOperation],
+            filterValue: ''
+        });
+    }
+
+    emit('update:request', filterRequest);
+}
+
+/**
+ * Emits an event to update the current filter value, for the current column.
+ *
+ * @param target The filter element.
+ * @param defaultValue The value to default to, if the filter element is null.
+ */
+function setFilter (target: EventTarget | null, defaultValue?: string): void {
+    const value = ((target as HTMLInputElement)?.value ?? defaultValue).trim();
+    const filterRequest = copy(props.request);
+    const index: number = filterRequest.filters.findIndex(f => f.filterOnColumn === props.column.field);
+
+    let preventEmit = false;
+
+    filterRequest.pageNumber = 1;
+
+    if (index >= 0) {
+        preventEmit = filterRequest.filters[index].filterValue === value;
+
+        filterRequest.filters[index].filterValue = value;
+    }
+    else if (value !== '' && typeof props.column.field !== 'undefined') {
+        const defaultFilterOperation: FilterOperation = getDefaultFilterOperation();
+
+        filterRequest.filters.push({
+            filterOnColumn: props.column.field,
+            filterMethod: FilterOperation[defaultFilterOperation] as FilterMethodType,
+            filterOperation: defaultFilterOperation,
+            filterValue: value
+        });
+    }
+
+    if (preventEmit === false) {
+        emit('update:request', filterRequest);
+    }
+}
+
+/**
+ * Updates the current filter value, for the current number column.
+ *
+ * @param target The filter element.
+ */
+function setNumberFilter (target: EventTarget | null): void {
+    let inputValue: string = (target as HTMLInputElement | null)?.value?.replace(new RegExp(`[^0-9\\${decimalSeparator.value}]`, 'g'), '') ?? '';
+
+    let value: string | number = '';
+    if (props.column.format === NumberFormat.INTEGER) {
+        value = parseInt(inputValue);
+    }
+    else {
+        inputValue = inputValue.replace(decimalSeparator.value, '.');
+        value = parseFloat(inputValue);
+    }
+
+    if (typeof value === 'number' && isNaN(value)) {
+        value = '';
+    }
+
+    setFilter(null, value.toString());
+}
+
+/**
+ * Updates the current filter value, for the current Date/DateTime column.
+ *
+ * @param value The new filter value, for the column.
+ */
+function setDateFilter (value: Date | null): void {
+    setFilter(null, value?.toISOString() ?? '');
+}
+</script>
+
+<template>
+    <div v-if="column.filterable === undefined || column.filterable === true"
+         class="border-grey-2 flex rounded w-full"
+         :class="{
+             'border-b p-5': column.type === GridColumnType.SLOT && (column.slotType === undefined || column.field === undefined),
+             'border': column.type !== GridColumnType.SLOT || (column.slotType !== undefined && column.field !== undefined)
+         }">
+        <div v-if="column.type !== GridColumnType.SLOT || (column.slotType !== undefined && column.field !== undefined)"
+             class="border-grey-2 border-r capitalize group inline relative w-auto">
+            <div class="bg-off-white flex h-full items-center justify-center w-10">
+                <icon icon="ph:sliders-horizontal"
+                      :size="20" />
+            </div>
+
+            <div class="absolute bg-white flex-wrap font-normal group-hover:flex group-hover:h-auto group-hover:w-52 h-0 hidden pb-2 shadow-lg text-left text-sm top-10 z-10"
+                 :class="{ 'left-0': firstHalf, '-left-44': !firstHalf }">
+                <strong class="p-3">
+                    {{ localisations.currentMethod }}
+                </strong>
+
+                <span class="px-4 py-1 w-full">
+                    {{ currentFilterMethod?.description }}
+
+                    <span class="float-right"
+                          v-html="currentFilterMethod?.icon"></span>
+                </span>
+
+                <strong class="p-3">
+                    {{ localisations.availableMethods }}
+                </strong>
+
+                <span v-for="(filterMethod, index) in allowedFilterMethods"
+                      :key="index"
+                      class="cursor-pointer hover:bg-off-white px-4 py-1 w-full"
+                      @click.prevent="setFilterMethod(filterMethod.method)">
+                    {{ filterMethod.description }}
+
+                    <span class="float-right"
+                          v-html="filterMethod.icon"></span>
+                </span>
+            </div>
+        </div>
+
+        <!-- Booleans -->
+        <select v-if="column.type === GridColumnType.BOOLEAN ||
+                    (column.slotType === GridColumnType.BOOLEAN && typeof column.field !== 'undefined')"
+                class="border-none w-full"
+                @change="setFilter($event.target)">
+            <option :value="undefined"></option>
+
+            <option value="true"
+                    :selected="currentFilter === 'true'">
+                {{ localisations.true }}
+            </option>
+
+            <option value="false"
+                    :selected="currentFilter === 'false'">
+                {{ localisations.false }}
+            </option>
+        </select>
+        <!-- Dates & DateTimes -->
+        <cl-ui-calendar v-else-if="column.type === GridColumnType.DATE || column.type === GridColumnType.DATETIME ||
+                            ((column.slotType === GridColumnType.DATE || column.slotType === GridColumnType.DATETIME) && typeof column.field !== 'undefined')"
+                        :date="currentDateFilter"
+                        class="border-none w-full"
+                        :type="column.type"
+                        :date-placeholder="localisations.selectDate"
+                        :date-time-placeholder="localisations.selectDateTime"
+                        :current-locale="currentLocale"
+                        @update:date="setDateFilter($event)" />
+        <!-- Numbers -->
+        <input v-else-if="column.type === GridColumnType.NUMBER ||
+                   (column.slotType === GridColumnType.NUMBER && typeof column.field !== 'undefined')"
+               :value="currentFilter"
+               class="border-none w-full"
+               type="text"
+               @keyup.arrow-up="setFilter(null, (currentNumberFilter + 1).toString())"
+               @keyup.arrow-down="setFilter(null, (currentNumberFilter - 1).toString())"
+               @input="debounce(setNumberFilter, [ $event.target ])">
+        <!-- Strings -->
+        <input v-else-if="column.type !== GridColumnType.SLOT ||
+                   (column.slotType === GridColumnType.STRING && typeof column.field !== 'undefined')"
+               :value="currentFilter"
+               class="border-none w-full"
+               type="text"
+               @input="debounce(setFilter, [ $event.target ])">
+    </div>
+    <div v-else
+         class="flex w-full">
+        &nbsp;
+    </div>
+</template>

package/src/components/grid/footer/{footer.vue → cl-ui-grid-footer.vue}

@@ -1,4 +1,95 @@
-<script lang="ts" src="./footer"></script>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { FilterRequest, FilterResponse, GridFooterLocalisations, NumberFormat } from '../../../@types';
+import { copy } from '../../../utils/copy';
+import { useDebouncer } from '../../../utils/debouncer';
+
+const props = withDefaults(defineProps<{
+    request: FilterRequest;
+    currentLocale?: string;
+    localisations: GridFooterLocalisations;
+    data?: FilterResponse<Record<string, unknown>> | null;
+}>(), {
+    currentLocale: 'en-GB',
+    data: () => null
+});
+
+const emit = defineEmits({
+    'update:request': null
+});
+
+const pageSizes = [
+    10,
+    20,
+    50,
+    100,
+    200
+];
+
+const { n } = useI18n();
+const { debounce } = useDebouncer();
+
+const totalPages = computed<number>(() => props.data !== null ? Math.ceil(props.data.totalRecords / props.request.pageSize) : 1);
+const pageNumbers = computed<number[]>(() => {
+    const calculatedPageNumbers: number[] = Array.from(Array(totalPages.value + 1).keys());
+    let results: number[] = [];
+
+    calculatedPageNumbers.shift();
+
+    if (calculatedPageNumbers.length) {
+        const startPage = (props.request.pageNumber === totalPages.value || props.request.pageNumber === totalPages.value - 1) ?
+            totalPages.value - 3 :
+            props.request.pageNumber - 1;
+        const endPage = startPage + 3;
+
+        results = calculatedPageNumbers.slice(startPage, endPage);
+    }
+
+    return results;
+});
+
+/**
+ * Sets the page to the selected number.
+ *
+ * @param pageNumber The page to navigate to.
+ */
+function setPage (pageNumber: number): void {
+    const filterRequest = copy(props.request);
+
+    if (filterRequest.pageNumber !== pageNumber) {
+        filterRequest.pageNumber = Math.max(Math.min(Math.trunc(pageNumber), totalPages.value), 1);
+
+        emit('update:request', filterRequest);
+    }
+}
+
+/**
+ * Sets the page to the value in the provided input.
+ *
+ * @param target The input element.
+ */
+function setPageFromInput (target: EventTarget | null): void {
+    const pageNumber: number = parseInt((target as HTMLInputElement)?.value) || 1;
+
+    setPage(pageNumber);
+}
+
+/**
+ * Sets the page size to the selected number.
+ *
+ * @param pageSize The page size to use.
+ */
+function setPageSize (pageSize: number): void {
+    const filterRequest = copy(props.request);
+
+    filterRequest.pageSize = pageSize;
+    filterRequest.pageNumber = 1;
+
+    emit('update:request', filterRequest);
+}
+</script>
 
 <template>
     <div v-if="data && data.results?.length && request"
@@ -29,13 +120,15 @@
                     <li v-show="request.pageNumber > 1"
                         class="cursor-pointer lg:mr-2 mr-1 mt-1"
                         @click="setPage(1)">
-                        <ph-caret-double-left :size="14" />
+                        <icon icon="ph:caret-double-left"
+                              :size="14" />
                     </li>
 
                     <li v-show="request.pageNumber > 1"
                         class="cursor-pointer lg:mr-2 mr-1 mt-1"
                         @click="setPage(request.pageNumber - 1)">
-                        <ph-caret-left :size="14" />
+                        <icon icon="ph:caret-left"
+                              :size="14" />
                     </li>
 
                     <li v-for="(number, index) in pageNumbers"
@@ -52,13 +145,15 @@
                     <li v-show="request.pageNumber < totalPages"
                         class="cursor-pointer lg:mr-2 mr-1 mt-1"
                         @click="setPage(request.pageNumber + 1)">
-                        <ph-caret-right :size="14" />
+                        <icon icon="ph:caret-right"
+                              :size="14" />
                     </li>
 
                     <li v-show="request.pageNumber < totalPages"
                         class="cursor-pointer lg:mr-2 mr-1 mt-1"
                         @click="setPage(totalPages)">
-                        <ph-caret-double-right :size="14" />
+                        <icon icon="ph:caret-double-right"
+                              :size="14" />
                     </li>
                 </ul>
             </div>

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { GridColumn, GridHeaderLocalisations, GridViewManagerLocalisations } from '../../../@types';
+import ClUiGridViewManager from '../view-manager/cl-ui-grid-view-manager.vue';
+
+const props = withDefaults(defineProps<{
+    columns: GridColumn[];
+    editMode: boolean;
+    filterPanelOpen?: boolean;
+    localisations?: GridHeaderLocalisations & GridViewManagerLocalisations;
+}>(), {
+    filterPanelOpen: false,
+    localisations: () => ({
+        editData: 'Edit Data',
+        finishEditing: 'Finish Editing',
+        clearFilters: 'Clear Filters',
+        manageView: 'Manage View',
+        modifyFilters: 'Modify Filters',
+        column: 'Column',
+        visible: 'Visible',
+        order: 'Order',
+        hidden: 'Hidden'
+    })
+});
+
+const emit = defineEmits({
+    'reset-filters': null,
+    'update:columns': null,
+    'update:edit-mode': null,
+    'update:filter-panel-open': null
+});
+
+const currentColumns = computed<GridColumn[]>({
+    get: () => props.columns,
+    set: (value) => emit('update:columns', value)
+});
+</script>
+
+<template>
+    <span class="lg:pb-0 lg:w-auto pb-2 pr-2 w-1/2">
+        <cl-ui-button class="lg:w-auto w-full"
+                      size="small"
+                      colour="default"
+                      @click="$emit('update:edit-mode', !editMode)">
+            <span v-show="!editMode">
+                {{ localisations.editData }}
+            </span>
+            <span v-show="editMode">
+                {{ localisations.finishEditing }}
+            </span>
+        </cl-ui-button>
+    </span>
+
+    <span class="hidden lg:inline-block pr-2">
+        <cl-ui-grid-view-manager v-model:columns="currentColumns"
+                                 :localisations="localisations" />
+    </span>
+
+    <span class="lg:pb-0 lg:pr-0 lg:w-auto pb-2 pr-2 w-1/2">
+        <cl-ui-button class="lg:w-auto w-full"
+                      size="small"
+                      @click.prevent="$emit('reset-filters')">
+            {{ localisations.clearFilters }}
+        </cl-ui-button>
+    </span>
+
+    <span class="lg:hidden pr-2 w-1/2">
+        <cl-ui-button class="w-full"
+                      colour="blue"
+                      size="small"
+                      @click.prevent="$emit('update:filter-panel-open', true)">
+            {{ localisations.modifyFilters }}
+        </cl-ui-button>
+    </span>
+</template>

package/src/components/grid/view-manager/cl-ui-grid-view-manager.vue

@@ -0,0 +1,145 @@
+<script lang="ts">
+export default {
+    inheritAttrs: false
+};
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { GridColumn, GridViewManagerLocalisations } from '../../../@types';
+import { copy } from '../../../utils/copy';
+import ClUiButton from '../../button/cl-ui-button.vue';
+
+const props = defineProps<{
+    localisations: GridViewManagerLocalisations;
+    columns: GridColumn[];
+}>();
+
+const emit = defineEmits({
+    'update:columns': null
+});
+
+const visible = ref<boolean>(false);
+
+/**
+ * Moves the position of a column, in the list of columns.
+ *
+ * @param columns List of columns to update.
+ * @param oldIndex Current index of the column being updated.
+ * @param newIndex New index of the column being updated.
+ */
+function moveColumn (columns: GridColumn[], oldIndex: number, newIndex: number): void {
+    if (newIndex < columns.length && newIndex >= 0) {
+        columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
+    }
+}
+
+/**
+ * Updates a column to either hide or show it, on the grid.
+ *
+ * @param target The selected checkbox.
+ * @param column The column to update.
+ */
+function updateColumnVisibility (target: EventTarget | null, column: GridColumn): void {
+    const gridColumns = copy(props.columns);
+    const checked = (target as HTMLInputElement | null)?.checked ?? false;
+    const targetColumnIndex: number = gridColumns.findIndex(c => c.name === column.name);
+
+    if (targetColumnIndex >= 0) {
+        gridColumns[targetColumnIndex].visible = checked;
+    }
+
+    emit('update:columns', gridColumns);
+}
+
+/**
+ * Moves the column, at the specified index, either one position further up or down, in the current column list.
+ *
+ * @param columnIndex Index of the column to update.
+ * @param direction Whether the column is being moved up or down.
+ */
+function changeColumnOrder (columnIndex: number, direction: 'up' | 'down'): void {
+    const gridColumns = copy(props.columns);
+    const newIndex: number = direction === 'up' ? columnIndex + 1 : columnIndex - 1;
+
+    moveColumn(gridColumns, columnIndex, newIndex);
+
+    emit('update:columns', gridColumns);
+}
+</script>
+
+<template>
+    <cl-ui-button v-bind="$attrs"
+                  class="w-full"
+                  size="small"
+                  @click.prevent="visible = true">
+        {{ localisations.manageView }}
+    </cl-ui-button>
+
+    <teleport to="body">
+        <div v-show="visible"
+             class="fixed flex h-full right-0 top-0 w-full z-40">
+            <div class="bg-black cursor-pointer flex-1 h-full opacity-40"
+                 @click="visible = false"></div>
+
+            <div class="bg-secondary-default h-full overflow-y-auto px-10 py-20 relative text-grey-2 w-80">
+                <icon class="absolute cursor-pointer right-3 text-off-white top-3"
+                      icon="ph:x"
+                      :size="16"
+                      @click="visible = false" />
+
+                <h3 class="mb-4 text-2xl text-off-white">
+                    {{ localisations.manageView }}
+                </h3>
+
+                <ul class="border-grey-3 border-t flex flex-wrap text-sm w-full">
+                    <li class="border-b border-grey-2 flex py-2 text-sm w-full">
+                        <strong class="flex-1 py-2">
+                            {{ localisations.column }}
+                        </strong>
+
+                        <strong class="py-2 w-1/4">
+                            {{ localisations.visible }}
+                        </strong>
+
+                        <strong class="py-2 w-1/5">
+                            {{ localisations.order }}
+                        </strong>
+                    </li>
+
+                    <li v-for="(column, index) in columns"
+                        :key="index"
+                        class="border-b border-grey-2 flex py-2 text-sm w-full">
+                        <div class="flex-1 py-2">
+                            {{ column.caption }}
+                        </div>
+
+                        <div class="py-2 w-1/4">
+                            <input :checked="column.visible === undefined || column.visible === true"
+                                   type="checkbox"
+                                   @click="updateColumnVisibility($event.target, column)">
+                        </div>
+
+                        <div class="py-2 text-off-white w-1/5">
+                            <template v-if="column.visible === undefined || column.visible === true">
+                                <icon v-if="index !== 0"
+                                      class="cursor-pointer inline-block mr-2"
+                                      icon="ph:arrow-left"
+                                      @click="changeColumnOrder(index, 'down')" />
+
+                                <icon v-if="index !== columns.length - 1"
+                                      class="cursor-pointer inline-block"
+                                      icon="ph:arrow-right"
+                                      @click="changeColumnOrder(index, 'up')" />
+                            </template>
+                            <em v-else>
+                                {{ localisations.hidden }}
+                            </em>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </teleport>
+</template>

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

@@ -0,0 +1,11 @@
+<template>
+    <header class="absolute bg-secondary-default flex h-20 items-center justify-between left-0 top-0 w-full z-40">
+        <slot name="logo"></slot>
+
+        <div class="flex flex-nowrap">
+            <slot name="dropdown"></slot>
+
+            <slot name="iconTool"></slot>
+        </div>
+    </header>
+</template>

package/src/components/header-helper/cl-ui-header-helper.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { AppUser } from '../../@types';
+
+withDefaults(defineProps<{
+    user?: AppUser | null;
+}>(), {
+    user: () =>  null
+});
+
+const isOpen = ref<boolean>(false);
+</script>
+
+<template>
+    <div class="md:relative">
+        <div class="bg-blue-light flex items-center md:min-w-[320px] select-none">
+            <template v-if="user">
+                <img v-if="user.userImage"
+                     :src="user.userImage"
+                     class="hidden m-4 max-h-12 max-w-12 md:block ring-2 ring-white rounded-full">
+
+                <div v-if="user.userName || (user.userGroup && user.userGroup.groupName)"
+                     class="cursor-default flex-grow hidden md:block my-4 text-white">
+                    <div v-if="user.userName"
+                         class="cursor-default overflow-ellipsis whitespace-nowrap">
+                        {{ user.userName }}
+                    </div>
+
+                    <div v-if="user.userGroup && user.userGroup.groupName"
+                         class="cursor-default overflow-ellipsis text-xs whitespace-nowrap">
+                        {{ user.userGroup.groupName }}
+                    </div>
+                </div>
+
+                <div class="bg-transparent content-center cursor-pointer flex h-20 hover:bg-opacity-10 hover:bg-white items-center justify-center justify-items-center md:ml-4 md:w-20 transition-colors w-10"
+                     @click="isOpen = !isOpen">
+                    <icon class="text-white transform transition-transform"
+                          :class="{ 'rotate-180' : isOpen }"
+                          icon="ph:caret-down" />
+                </div>
+            </template>
+        </div>
+
+        <div v-if="isOpen"
+             class="absolute bg-white right-0 shadow-2xl top-20 w-full z-20">
+            <slot name="content"></slot>
+        </div>
+    </div>
+</template>