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

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

@@ -1,277 +0,0 @@
-<script setup lang="ts">
-import Flatpickr from 'flatpickr';
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { DateFormat } from '../../@types';
-
-import { generateFixedDate, getLocale, replaceDateWithPlaceholders } from './calendar-utilities';
-
-type CalendarType = 'date' | 'datetime';
-
-const props = withDefaults(defineProps<{
-    date?: Date | null;
-    currentLocale?: string;
-    datePlaceholder?: string;
-    dateTimePlaceholder?: string;
-    type?: CalendarType;
-    disabled?: boolean;
-}>(), {
-    date: () => null,
-    currentLocale: 'en-GB',
-    datePlaceholder: 'Select date.',
-    dateTimePlaceholder: 'Select date & time.',
-    type: 'datetime',
-    disabled: false
-});
-
-const emit = defineEmits({
-    'update:date': null
-});
-
-const { d, getDateTimeFormat } = useI18n();
-
-const flatpickrInstance = ref<Flatpickr.Instance | null>(null);
-const element = ref<Node | null>(null);
-
-const date = computed<string>(() => d(generateFixedDate(), props.type, props.currentLocale));
-const dateFormat = computed(() => getDateTimeFormat(props.currentLocale)[props.type]);
-const format = computed<string>(() => {
-    let hourPlaceholder = 'H';
-    let yearPlaceholder = 'Y';
-
-    if (dateFormat.value?.hour12 === true) {
-        hourPlaceholder = 'h';
-    }
-
-    if (dateFormat.value.year === '2-digit') {
-        yearPlaceholder = 'y';
-    }
-
-    const format = replaceDateWithPlaceholders(date.value, hourPlaceholder, yearPlaceholder);
-
-    return format;
-});
-const options = computed<Flatpickr.Options.Options>(() => {
-    const config: Flatpickr.Options.Options = {
-        ...Flatpickr.defaultConfig,
-        allowInput: true,
-        dateFormat: format.value,
-        disableMobile: true,
-        enableTime: props.type === DateFormat.DATETIME,
-        locale: getLocale(props.currentLocale),
-        minuteIncrement: 1,
-        monthSelectorType: 'static',
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        time_24hr: typeof dateFormat.value.hour12 === 'undefined' || dateFormat.value.hour12 === false
-    };
-
-    if (props.date !== null) {
-        config.defaultDate = props.date;
-    }
-
-    return config;
-});
-
-/**
- * Emits an update to the model value, for the value provided from flatpickr.
- *
- * @param selectedDates List of raw selected values.
- * @param _date Formatted selected value.
- * @param _instance The current flatpickr instance.
- */
-function onChange (selectedDates: Date[], _date: string, _instance: Flatpickr.Instance): void {
-    emit('update:date', selectedDates.length > 0 ? selectedDates[0] : null);
-}
-
-/**
- * Emits an update to the model value, to reset it.
- */
-function clearValue (): void {
-    emit('update:date', null);
-}
-
-/**
- * Reset the value to the current day.
- */
-function resetValue (): void {
-    if (flatpickrInstance.value !== null) {
-        const date = new Date();
-
-        date.setHours(12, 0, 0, 0);
-
-        emit('update:date', date);
-    }
-}
-
-/**
- * Creates a new flatpickr instance and adds an event handler for the OnChange event.
- */
-function createInstance (): void {
-    if (flatpickrInstance.value === null && element.value !== null) {
-        flatpickrInstance.value = Flatpickr(element.value as Node, options.value);
-
-        flatpickrInstance.value.config.onChange.push(onChange);
-    }
-}
-
-/**
- * Updates the current flatpickr instance and re-adds an event handler for the OnChange event.
- */
-function updateInstance (): void {
-    if (flatpickrInstance.value !== null) {
-        flatpickrInstance.value.set(options.value);
-
-        flatpickrInstance.value.config.onChange.push(onChange);
-    }
-}
-
-/**
- * Updates the selected value, in the flatpickr instance.
- *
- * @param value The new value.
- */
-function updateInstanceValue (value: Date): void {
-    if (flatpickrInstance.value !== null) {
-        flatpickrInstance.value.setDate(value, true);
-    }
-}
-
-/**
- * Removes the selected value, in the flatpickr instance.
- */
-function clearInstanceValue (): void {
-    if (flatpickrInstance.value !== null) {
-        flatpickrInstance.value.clear();
-    }
-}
-
-/**
- * Destroys the current flatpickr instance.
- */
-function destroyInstance (): void {
-    if (flatpickrInstance.value !== null) {
-        flatpickrInstance.value.destroy();
-
-        flatpickrInstance.value = null;
-    }
-}
-
-watch(() => props.date, (newValue, oldValue) => {
-    if (newValue !== null && oldValue !== null) {
-        if (newValue.getTime() !== oldValue.getTime()) {
-            updateInstanceValue(newValue);
-        }
-    }
-    else if (newValue === null && oldValue !== null) {
-        clearInstanceValue();
-    }
-}, {
-    deep: true
-});
-
-watch(() => options.value, updateInstance, {
-    deep: true
-});
-
-watch(() => props.type, () => {
-    destroyInstance();
-
-    nextTick(() => createInstance());
-}, {
-    immediate: false
-});
-
-onMounted(() => createInstance());
-
-onUnmounted(() => destroyInstance());
-</script>
-
-<style lang="postcss">
-@import 'flatpickr/dist/flatpickr.css';
-
-.flatpickr-calendar {
-	@apply shadow-lg;
-}
-
-.flatpickr-months {
-	@apply border-b border-grey-1 py-2 px-1;
-}
-
-.flatpickr-prev-month,
-.flatpickr-next-month {
-	@apply mt-2;
-}
-
-.flatpickr-months .flatpickr-next-month:hover svg,
-.flatpickr-months .flatpickr-prev-month:hover svg {
-	@apply text-primary-default fill-current;
-}
-
-.cur-month {
-	@apply mr-1;
-}
-
-.flatpickr-current-month span.cur-month:hover {
-	@apply bg-white;
-}
-
-/* stylelint-disable selector-class-pattern */
-
-.flatpickr-innerContainer {
-	@apply mb-1;
-}
-
-/* stylelint-enable selector-class-pattern */
-
-.flatpickr-weekdays {
-	@apply bg-off-white mb-1 py-2;
-}
-
-.flatpickr-day.selected {
-	@apply bg-primary-default border-primary-default hover:bg-primary-light hover:border-primary-light;
-}
-
-.flatpickr-day.today {
-	@apply border-primary-default;
-}
-
-.flatpickr-day.today:hover {
-	@apply bg-grey-1 text-grey-7;
-}
-</style>
-
-<template>
-    <div v-bind="$attrs"
-         class="relative">
-        <input ref="element"
-               v-bind="$attrs"
-               class="!text-base !text-sm"
-               :class="{
-                   '!pr-12': date !== null,
-                   '!pr-8': date === null
-               }"
-               type="text"
-               :placeholder="type === 'date' ? datePlaceholder : dateTimePlaceholder"
-               :disabled="disabled">
-
-        <icon v-show="date === null || disabled"
-              class="absolute bg-white right-2 text-grey-4 top-3"
-              icon="ph:calendar"
-              weight="light"
-              :size="18" />
-
-        <div v-show="date !== null && !disabled"
-             class="absolute bg-white flex right-2 text-grey-4 top-3">
-            <icon class="cursor-pointer md:mr-1 mr-0.5"
-                  icon="ph:arrow-counter-clockwise"
-                  :size="16"
-                  @click="resetValue" />
-
-            <icon class="cursor-pointer"
-                  icon="ph:x"
-                  :size="16"
-                  @click="clearValue" />
-        </div>
-    </div>
-</template>

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

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-type CardSize = 'small' | 'medium' | 'large';
-
-withDefaults(defineProps<{
-    size?: CardSize;
-    title?: string;
-    hover?: boolean;
-    shadowSize?: CardSize;
-    padImage?: boolean;
-}>(), {
-    size: 'medium',
-    title: '',
-    hover: false,
-    shadowSize: 'medium',
-    padImage: false
-});
-</script>
-
-<template>
-    <div class="overflow-hidden relative"
-         :class="{
-             'shadow': shadowSize === 'small',
-             'shadow-md': shadowSize === 'medium',
-             'shadow-lg': shadowSize === 'large',
-
-             'hover:shadow-md': hover && shadowSize === 'small',
-             'hover:shadow-lg': hover && shadowSize === 'medium',
-             'hover:shadow-xl': hover && shadowSize === 'large'
-         }">
-        <div v-if="$slots.image"
-             :class="{
-                 'p-2': size === 'small' && padImage,
-                 'p-4': size === 'medium' && padImage,
-                 'p-8': size === 'large' && padImage
-             }">
-            <slot name="image"></slot>
-        </div>
-
-        <div v-if="title !== ''"
-             class="border-grey-2 font-normal"
-             :class="{
-                 'p-2 text-xl leading-8': size === 'small',
-                 'p-4 text-2xl leading-9': size === 'medium',
-                 'p-8 text-4xl leading-10': size === 'large',
-                 'border-t': $slots.image && padImage
-             }">
-            {{ title }}
-        </div>
-
-        <div class="border-grey-2"
-             :class="{
-                 'p-2': size === 'small',
-                 'p-4': size === 'medium',
-                 'p-8': size === 'large',
-                 'border-t': ($slots.image && padImage && title === '') || title !== ''
-             }">
-            <slot></slot>
-        </div>
-
-        <div v-if="$slots.footer"
-             class="border-grey-2 border-t"
-             :class="{
-                 'p-2': size === 'small',
-                 'p-4': size === 'medium',
-                 'p-8': size === 'large'
-             }">
-            <slot name="footer"></slot>
-        </div>
-    </div>
-</template>

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

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