@citruslime/ui 1.2.0-beta.0 → 1.2.1

package/src/components/card/card.vue

@@ -1,54 +0,0 @@
-<script lang="ts" src="./card"></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/combo-box.vue

@@ -1,78 +0,0 @@
-<script lang="ts" src="./combo-box"></script>
-
-<template>
-    <div>
-        <div class="flex">
-            <input v-model="currentText"
-                   :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 }}
-
-                    <ph-warning class="ml-1 mt-1" />
-                </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)">
-                <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-container 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/header-option/header-option.vue

@@ -1,21 +0,0 @@
-<script lang="ts" src="./header-option"></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')">
-            <ph-trash class="hover:text-link-default mt-1 rounded-full" />
-        </div>
-    </div>
-</template>

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

@@ -1,57 +0,0 @@
-<script lang="ts" src="./search-container"></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-option v-if="currentObjectName !== ''"
-                                       :show-clear-button="canClearSelectedObject"
-                                       :text="currentObjectName"
-                                       @clear-object="$emit('clear-object')" />
-
-        <cl-ui-combo-box-header-option v-if="objectParentType !== '' && results !== null && results.length > 0 && errorMessage === ''"
-                                       :text="objectType"
-                                       :additional-text="objectParentType" />
-
-        <cl-ui-combo-box-header-option v-if="results !== null && results.length === 0 && canCreateNewObject === false && errorMessage === ''"
-                                       :text="noResults" />
-
-        <cl-ui-combo-box-header-option v-if="errorMessage !== ''"
-                                       class="!bg-danger-light text-danger-dark"
-                                       :text="combinedErrorMessage" />
-
-        <cl-ui-combo-box-selectable-option 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-option 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/selectable-option/selectable-option.vue

@@ -1,27 +0,0 @@
-<script lang="ts" src="./selectable-option"></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">
-            <ph-plus-circle class="bg-primary-default rounded-full text-white" />
-        </div>
-    </div>
-</template>

package/src/components/footer/footer.vue

@@ -1,23 +0,0 @@
-<script lang="ts" src="./footer"></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 px-8 py-1 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/cell.vue

@@ -1,64 +0,0 @@
-<script lang="ts" src="./cell"></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>

package/src/components/grid/filter/filter.vue

@@ -1,93 +0,0 @@
-<script lang="ts" src="./filter"></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">
-                <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

@@ -1,91 +0,0 @@
-<script lang="ts" src="./footer"></script>
-
-<template>
-    <div v-if="data && data.results?.length && request"
-         class="flex flex-wrap justify-end mt-4 w-full">
-        <div class="bg-off-white border border-grey-0 flex items-center lg:w-auto mb-2 px-3 py-2 rounded shadow-md text-sm w-full">
-            <span class="text-grey-3 w-max">
-                {{ localisations.jumpToPage }}
-            </span>
-
-            <input class="!h-8 !inline-block !ml-2 !text-sm !w-max"
-                   :value="request.pageNumber"
-                   type="number"
-                   @input="debounce(setPageFromInput, [ $event.target ])">
-        </div>
-
-        <div class="bg-off-white border border-grey-0 flex flex-wrap items-center lg:ml-2 lg:w-auto mb-2 mb:flex-nowrap px-3 py-2 rounded shadow-md text-sm w-full">
-            <div class="flex flex-wrap lg:p-2 mb-2 md:mb-0 md:w-auto text-sm w-full">
-                <li class="flex flex-wrap lg:mb-0 lg:mr-2 lg:w-auto mb-2 w-full">
-                    <span class="lg:mr-2 lg:w-auto text-grey-3 w-full">
-                        {{ localisations.page }}
-                    </span>
-                </li>
-                <ul class="flex flex-wrap mb:flex-nowrap text-sm">
-                    <li class="pr-2">
-                        {{ n(request.pageNumber, NumberFormat.INTEGER, currentLocale) }} &#x2F; {{ n(totalPages, NumberFormat.INTEGER, currentLocale) }}
-                    </li>
-
-                    <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" />
-                    </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" />
-                    </li>
-
-                    <li v-for="(number, index) in pageNumbers"
-                        :key="index"
-                        class="cursor-pointer lg:mr-2 mr-1"
-                        :class="{
-                            'text-black font-black': request.pageNumber === number,
-                            'text-grey-6': request.pageNumber !== number
-                        }"
-                        @click="setPage(number)">
-                        {{ n(number, NumberFormat.INTEGER, currentLocale) }}
-                    </li>
-
-                    <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" />
-                    </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" />
-                    </li>
-                </ul>
-            </div>
-
-            <ul class="flex flex-wrap lg:p-2 mb-2 md:mb-0 md:w-auto text-sm w-full">
-                <li class="lg:mb-0 lg:mr-2 lg:w-auto mb-2 text-grey-3 w-full">
-                    {{ localisations.pageSize }}
-                </li>
-
-                <li v-for="(size, index) in pageSizes"
-                    :key="index"
-                    class="cursor-pointer lg:mr-2 mr-1"
-                    :class="{ 'text-black font-black': request.pageSize === size, 'text-grey-6': request.pageSize !== size }"
-                    @click="setPageSize(size)">
-                    {{ n(size, NumberFormat.INTEGER, currentLocale) }}
-                </li>
-            </ul>
-
-            <ul class="lg:p-2 mb-2 md:mb-0 md:w-auto w-full">
-                <li class="block lg:inline-block lg:mb-0 lg:mr-1 lg:w-auto mb-2 text-grey-3 w-full">
-                    {{ localisations.totalRecords }}
-                </li>
-
-                <li class="block lg:inline-block">
-                    {{ n(data.totalRecords, NumberFormat.INTEGER, currentLocale) }}
-                </li>
-            </ul>
-        </div>
-    </div>
-</template>