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

package/src/components/calendar/calendar.vue

@@ -1,35 +0,0 @@
-<script lang="ts" src="./calendar"></script>
-
-<style src="./calendar-global.css"></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">
-
-        <ph-calendar v-show="date === null || disabled"
-                     class="absolute bg-white right-2 text-grey-4 top-3"
-                     weight="light"
-                     :size="18" />
-
-        <div v-show="date !== null && !disabled"
-             class="absolute bg-white flex right-2 text-grey-4 top-3">
-            <ph-arrow-counter-clockwise class="cursor-pointer md:mr-1 mr-0.5"
-                                        :size="16"
-                                        @click="resetValue" />
-
-            <ph-x class="cursor-pointer"
-                  :size="16"
-                  @click="clearValue" />
-        </div>
-    </div>
-</template>

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

@@ -1,79 +0,0 @@
-<script lang="ts" src="./combo-box"></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 }}
-
-                    <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/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 && searchText.trim() !== '' && 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/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/grid.vue

@@ -1,194 +0,0 @@
-<script lang="ts" src="./grid"></script>
-
-<style scoped src="./grid.css"></style>
-
-<template>
-    <div class="hidden lg:block lg:text-right mb-4 w-full">
-        <cl-ui-grid-header v-model:columns="currentColumns"
-                           v-model:edit-mode="editMode"
-                           :localisations="localisations"
-                           @reset-filters="resetFilters" />
-    </div>
-
-    <div class="grid-wrapper relative w-full"
-         :data-loading="loading">
-        <div v-show="loading"
-             class="absolute bg-white h-full opacity-40 w-full z-20"></div>
-
-        <div class="bg-white flex flex-wrap lg:hidden sticky top-0 w-full">
-            <div class="border-b border-grey-2 flex flex-wrap px-2 py-4 w-full">
-                <strong class="mb-4 text-sm w-full">
-                    {{ localisations.gridTools }}
-                </strong>
-
-                <div class="flex flex-wrap w-full">
-                    <cl-ui-grid-header v-model:columns="currentColumns"
-                                       v-model:edit-mode="editMode"
-                                       v-model:filter-panel-open="filterPanelOpen"
-                                       :localisations="localisations"
-                                       @reset-filters="resetFilters" />
-                </div>
-            </div>
-
-            <div v-show="filterPanelOpen"
-                 class="absolute bg-white h-screen overflow-x-auto p-4 text-sm w-full z-10">
-                <div class="border-b border-grey-3 mb-2 pb-2 text-right w-full">
-                    <cl-ui-button colour="blue"
-                                  size="small"
-                                  @click.prevent="filterPanelOpen = false;">
-                        <ph-x class="-mt-1 inline-block"
-                              :size="16" />
-
-                        {{ localisations.confirmFilters }}
-                    </cl-ui-button>
-                </div>
-
-                <div class="grid grid-cols-3">
-                    <div>
-                        {{ localisations.field }}
-                    </div>
-
-                    <div>
-                        {{ localisations.filter }}
-                    </div>
-
-                    <div>
-                        {{ localisations.sortBy }}
-                    </div>
-                </div>
-
-                <div v-for="(column, index) in visibleColumns"
-                     :key="index"
-                     class="grid grid-cols-3 mb-4 w-full">
-                    <div>
-                        {{ column.caption }}
-                    </div>
-
-                    <cl-ui-grid-filter v-model:request="currentRequest"
-                                       :localisations="localisations"
-                                       :column="column"
-                                       :current-locale="currentLocale" />
-
-                    <template v-if="(column.type !== GridColumnType.SLOT || (column.slotType !== undefined) && column.field !== undefined) &&
-                        (column.sortable === undefined || column.sortable === true)">
-                        <ph-minus v-if="currentRequest.sort === null || currentRequest.sort.sortOnColumn !== column.field"
-                                  class="cursor-pointer ml-2"
-                                  @click="setSort(column.field)" />
-                        <ph-caret-down v-else-if="currentRequest.sort.sortByAscending === false"
-                                       class="cursor-pointer ml-2"
-                                       @click="setSort(column.field)" />
-                        <ph-caret-up v-else
-                                     class="cursor-pointer ml-2"
-                                     @click="setSort(column.field)" />
-                    </template>
-                    <div v-else
-                         class="ml-2">
-                        &nbsp;
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="overflow-auto w-full">
-            <table class="min-w-full table-fixed">
-                <colgroup class="hidden lg:table-column-group">
-                    <col v-for="(column, index) in visibleColumns"
-                         :key="index"
-                         :style="getStyleForColumn(column.name)"
-                         :span="1">
-                </colgroup>
-
-                <thead class="hidden lg:table-header-group">
-                    <tr>
-                        <th v-for="(column, index) in visibleColumns"
-                            :key="index"
-                            class="border-b border-grey-2 font-semibold p-1 text-grey-3 text-left text-sm uppercase"
-                            :style="getStyleForColumn(column.name)">
-                            <span v-if="data && data.results?.length &&
-                                      (column.type !== GridColumnType.SLOT || (column.slotType !== undefined && column.field !== undefined)) &&
-                                      (column.sortable === undefined || column.sortable === true)"
-                                  class="cursor-pointer"
-                                  @click="setSort(column.field)">
-                                {{ column.caption }}
-
-                                <ph-caret-up v-show="currentRequest.sort !== null && currentRequest.sort.sortOnColumn === column.field && currentRequest.sort.sortByAscending === true"
-                                             class="-mt-1 inline-block" />
-
-                                <ph-caret-down v-show="currentRequest.sort !== null && currentRequest.sort.sortOnColumn === column.field && currentRequest.sort.sortByAscending === false"
-                                               class="-mt-1 inline-block" />
-                            </span>
-                            <span v-else>
-                                {{ column.caption }}
-                            </span>
-                        </th>
-                    </tr>
-
-                    <tr v-if="(data && data.results?.length) || currentRequest.filters.length > 0">
-                        <th v-for="(column, index) in visibleColumns"
-                            :key="index"
-                            class="p-1"
-                            :style="getStyleForColumn(column.name)">
-                            <cl-ui-grid-filter v-model:request="currentRequest"
-                                               :localisations="localisations"
-                                               :column="column"
-                                               :current-locale="currentLocale"
-                                               :first-half="index <= visibleColumns.length / 2" />
-                        </th>
-                    </tr>
-                </thead>
-
-                <tbody>
-                    <template v-if="data && data.results?.length">
-                        <tr v-for="(record, recordIndex) in data.results"
-                            :key="recordIndex"
-                            :class="{
-                                'bg-white': (recordIndex % 2) !== 1,
-                                'bg-off-white': (recordIndex % 2) === 1
-                            }">
-                            <cl-ui-grid-cell v-for="(column, columnIndex) in visibleColumns"
-                                             :key="columnIndex"
-                                             class="align-top p-2 whitespace-nowrap"
-                                             :style="getStyleForColumn(column.name)"
-                                             :current-locale="currentLocale"
-                                             :column="column"
-                                             :record="record"
-                                             :edit-mode="editMode"
-                                             @focus="cellFocused(recordIndex)"
-                                             @edit="cellFocused(recordIndex); cellChanged($event, column.field);"
-                                             @undo-edit="cellReverted(column.field)">
-                                <template v-for="(_, name) in $slots"
-                                          #[name]="data">
-                                    <slot :name="name"
-                                          v-bind="data"></slot>
-                                </template>
-                            </cl-ui-grid-cell>
-                        </tr>
-                    </template>
-                    <tr v-else>
-                        <td :colspan="visibleColumns.length">
-                            <div class="my-10 py-1 text-center text-sm w-full">
-                                <strong>
-                                    {{ localisations.noData }}
-                                </strong>
-
-                                <div v-if="currentRequest.filters.length > 0"
-                                     class="w-full">
-                                    {{ localisations.noDataFiltersPresent }}
-
-                                    <cl-ui-button size="small"
-                                                  @click.prevent="resetFilters">
-                                        {{ localisations.clearFilters }}
-                                    </cl-ui-button>
-                                </div>
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <cl-ui-grid-footer v-model:request="currentRequest"
-                           :localisations="localisations"
-                           :data="data" />
-    </div>
-</template>

package/src/components/grid/header/header.vue

@@ -1,39 +0,0 @@
-<script lang="ts" src="./header"></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-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/view-manager.vue

@@ -1,73 +0,0 @@
-<script lang="ts" src="./view-manager"></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">
-                <ph-x class="absolute cursor-pointer right-3 text-off-white top-3"
-                      :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">
-                                <ph-arrow-left v-if="index !== 0"
-                                               class="cursor-pointer inline-block mr-2"
-                                               @click="changeColumnOrder(index, 'down')" />
-
-                                <ph-arrow-right v-if="index !== columns.length - 1"
-                                                class="cursor-pointer inline-block"
-                                                @click="changeColumnOrder(index, 'up')" />
-                            </template>
-                            <em v-else>
-                                {{ localisations.hidden }}
-                            </em>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </teleport>
-</template>