@citruslime/ui 2.0.0-beta.2 → 2.0.0-beta.20

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,153 +0,0 @@
-<script lang="ts">
-export default {
-    inheritAttrs: false
-};
-</script>
-
-<script setup lang="ts">
-import { 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));
-
-/**
- * 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">
-        <strong class="lg:hidden mr-2">
-            {{ column.caption }}
-        </strong>
-
-        <slot :name="`${column.name}Edit`"
-              v-bind="{ cellFocused, column, 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>