@citruslime/ui 1.2.1-beta.0 → 1.2.1

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>

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

@@ -1,95 +0,0 @@
-<script lang="ts" src="./header-helper"></script>
-
-<template>
-    <div class="flex items-center z-30"
-         :class="{
-             'cursor-pointer': !disabled
-         }">
-        <cl-ui-language-switcher v-model:current-locale="selectedLocale"
-                                 :supported-locales="supportedLocales"
-                                 :disabled="disabled" />
-
-        <div v-if="user !== null"
-             class="bg-blue-light ease-in-out flex h-14 hover:bg-blue-hover items-center lg:w-64 select-none text-white transition-colors uppercase w-12"
-             @click="toggleBox">
-            <div class="w-auto">
-                <div class="bg-secondary-default font-semibold h-8 leading-8 mx-2 rounded-full text-center text-xs w-8">
-                    {{ user.userInitial }}
-                </div>
-            </div>
-
-            <div class="flex-1 hidden lg:inline-block ml-2">
-                <div class="flex font-semibold text-sm">
-                    <div class="lg:w-36 overflow-ellipsis overflow-hidden whitespace-nowrap">
-                        {{ user.userName }}
-                    </div>
-
-                    <div v-if="user.userGroup !== undefined && user.userGroup.groupName !== 'NOT LOGGED IN'"
-                         class="hidden lg:inline-block mx-2">
-                        #{{ user.userGroup.groupId }}
-                    </div>
-                </div>
-
-                <div v-if="user.userGroup !== undefined"
-                     class="lg:w-44 overflow-ellipsis overflow-hidden text-xs uppercase whitespace-nowrap">
-                    {{ user.userGroup.groupName }}
-                </div>
-            </div>
-        </div>
-
-        <div class="bg-blue-default ease-in-out font-semibold h-14 hidden hover:bg-blue-hover items-center lg:flex px-4 select-none text-white transition-colors uppercase"
-             @click="toggleBox">
-            {{ helperLocalisations.helpLabel }}
-        </div>
-    </div>
-
-    <div class="absolute bg-white border border-grey-2 lg:w-80 right-4 shadow-xl top-20 w-72 z-30"
-         :class="{ 'block': display, 'hidden': !display }">
-        <div v-if="user"
-             class="bg-blue-default font-semibold p-2.5 text-white">
-            {{ helperLocalisations.helpMessage }}
-        </div>
-
-        <!--
-            TODO
-            <TawkTo v-if="showChildComponents" />
-        -->
-
-        <a v-if="supportLink !== null"
-           :href="supportLink"
-           target="_blank"
-           rel="noreferrer"
-           class="block border-b border-grey-2 cursor-pointer font-semibold hover:bg-grey-1 hover:text-grey-4 p-2.5 text-grey-4 text-sm">
-            <img class="inline-block mr-1"
-                 src="../../../assets/images/feedback.png">
-
-            {{ helperLocalisations.support }}
-        </a>
-
-        <a v-if="feedbackLink !== null"
-           :href="feedbackLink"
-           target="_blank"
-           rel="noreferrer"
-           class="block border-b border-grey-2 cursor-pointer font-semibold hover:bg-grey-1 hover:text-grey-4 p-2.5 text-grey-4 text-sm">
-            <img class="inline-block mr-1"
-                 src="../../../assets/images/portal.png">
-
-            {{ helperLocalisations.feedback }}
-        </a>
-
-        <a v-if="websiteLink !== null"
-           :href="websiteLink"
-           target="_blank"
-           rel="noreferrer"
-           class="block border-b border-grey-2 cursor-pointer font-semibold hover:bg-grey-1 hover:text-grey-4 p-2 text-grey-4 text-xs">
-            {{ helperLocalisations.website }}
-        </a>
-
-        <a v-if="userLoggedIn == true && logoutEnabled"
-           href="#"
-           class="block border-b border-grey-2 cursor-pointer font-semibold hover:bg-grey-1 hover:text-grey-4 p-2 text-grey-4 text-xs"
-           @click.prevent="logout">
-            {{ helperLocalisations.logout }}
-        </a>
-    </div>
-</template>

package/src/components/header/header.vue

@@ -1,33 +0,0 @@
-<script lang="ts" src="./header"></script>
-
-<template>
-    <div class="w-full">
-        <nav class="bg-secondary-default flex items-center justify-between min-h-[56px] relative w-full">
-            <div class="flex-1 ml-14 text-center z-30">
-                <img class="box-border h-6 inline-block lg:h-10 mx-4"
-                     :class="{ 'cursor-pointer': !additionalActionsDisabled }"
-                     :src="logoPath"
-                     loading="lazy"
-                     @click="logoSelected">
-            </div>
-
-            <cl-ui-header-helper v-if="!noHelper"
-                                 v-model:current-locale="selectedLocale"
-                                 :supported-locales="supportedLocales"
-                                 :disabled="additionalActionsDisabled"
-                                 :localisations="localisations"
-                                 :feedback-link="feedbackLink"
-                                 :support-link="supportLink"
-                                 :website-link="websiteLink"
-                                 :user-logged-in="userLoggedIn"
-                                 :logout-enabled="true"
-                                 :user="user"
-                                 @logout="logout" />
-        </nav>
-
-        <cl-ui-navigation :navigation="navigation"
-                          @item-select="itemSelected"
-                          @group-select="groupSelected"
-                          @state-change="stateChanged" />
-    </div>
-</template>

package/src/components/header/navigation/navigation.vue

@@ -1,84 +0,0 @@
-<script lang="ts" src="./navigation"></script>
-
-<template>
-    <div v-if="navigation"
-         class="absolute h-full left-0 overflow-hidden top-0 w-full">
-        <div class="bg-link-default cursor-pointer delay-200 duration-200 ease-in-out flex h-14 hover:bg-link-light items-center relative transform transition-all w-14 z-40"
-             :class="{ 'lg:translate-x-80 translate-x-44': isOpen }"
-             @click.prevent="isOpen ? close() : open()">
-            <ph-list class="leading-10 text-white w-full"
-                     :size="24"
-                     weight="bold" />
-        </div>
-
-        <div v-show="isOpen"
-             class="bg-black cursor-pointer h-full opacity-40 relative w-full z-40"
-             @click="close">
-        </div>
-
-        <div class="absolute bg-white border border-grey-0 duration-200 ease-in-out h-full left-0 lg:w-80 overflow-y-auto top-0 transform transition-transform w-44 z-[45]"
-             :class="{ 'lg:-translate-x-96 -translate-x-48': !isOpen }">
-            <div class="h-14 p-4 relative">
-                <input class="!h-6 !p-1 !px-1.5 !text-xs"
-                       :value="filter"
-                       type="text"
-                       @input="debounce(setFilter, [ $event.target?.value ])">
-
-                <ph-magnifying-glass v-show="filter === ''"
-                                     class="absolute right-5 text-grey-3 top-5"
-                                     :size="16" />
-
-                <ph-x v-show="filter !== ''"
-                      class="absolute cursor-pointer right-5 text-grey-3 top-5"
-                      :size="16"
-                      @click="filter = ''" />
-            </div>
-
-            <div v-for="(group, index) in navigationList"
-                 :key="index">
-                <div class="bg-grey-1 capitalize flex font-semibold items-center px-1 py-2 text-sm w-full"
-                     :class="{ 'cursor-pointer': !group.disabled }"
-                     @click="group.disabled ? null : groupSelected(group)">
-                    <ph-caret-right v-show="group.collapsed"
-                                    class="mr-2"
-                                    :size="16" />
-
-                    <ph-caret-down v-show="!group.collapsed"
-                                   class="mr-2"
-                                   :size="16" />
-
-                    <span class="flex-1 min-w-min">
-                        {{ group.caption }}
-                    </span>
-
-                    <component :is="group.icon"
-                               v-if="group.icon !== null"
-                               class="mr-1 w-auto"
-                               :size="18" />
-                </div>
-
-                <template v-if="!group.collapsed">
-                    <div v-for="(groupItem, groupIndex) in group.records"
-                         :key="groupIndex"
-                         class="border-link-default cursor-pointer text-xs w-full"
-                         :class="{ 'border-l-4': groupItem.active }">
-                        <a v-if="!groupItem.linkIsExternal"
-                           class="bg-grey-0 block hover:bg-link-default hover:text-white py-1.5 text-black w-full"
-                           :class="{ 'pl-5': groupItem.active, 'pl-6': !groupItem.active }"
-                           @click="itemSelected(groupItem); close();">
-                            {{ groupItem.caption }}
-                        </a>
-                        <a v-else
-                           class="bg-grey-0 block hover:bg-link-default hover:text-white pl-6 py-1.5 text-black w-full"
-                           :href="groupItem.link"
-                           target="_blank "
-                           rel="noreferrer"
-                           @click="close">
-                            {{ groupItem.caption }}
-                        </a>
-                    </div>
-                </template>
-            </div>
-        </div>
-    </div>
-</template>

package/src/components/language-switcher/language-switcher.vue

@@ -1,36 +0,0 @@
-<script lang="ts" src="./language-switcher"></script>
-
-<style scoped src="./language-switcher.css"></style>
-
-<template>
-    <div v-if="selectedLanguage !== null && isLanguageLocaleFormat(selectedLanguage)"
-         class="flex relative select-none w-auto z-30">
-        <div class="flex items-center"
-             :class="{ 'cursor-pointer': !disabled }"
-             @click="toggleLocaleSwitcher">
-            <span class="flag-svg inline-block mr-3"
-                  :style="{ 'background': `url('${selectedLanguage.svgCode}')` }"></span>
-
-            <span class="font-semibold hidden lg:inline-block mr-4 text-white text-xs">
-                {{ selectedLanguage.nativeName }}
-            </span>
-        </div>
-
-        <div v-show="localeToggleOpen"
-             class="absolute bg-white overflow-hidden right-0 rounded shadow-xl top-6 z-30">
-            <div v-for="(location, index) in validLanguages"
-                 :key="index"
-                 class="border-b border-grey-0 content-center cursor-pointer flex hover:bg-grey-0 items-center last-child:border-b-0 last:border-b-0 p-2 text-center transition-colors"
-                 :data-localename="location.name"
-                 :data-localecode="location.localeCode"
-                 @click="selectedLocale = location.localeCode">
-                <span class="flag-svg inline-block mr-3"
-                      :style="{ 'background': `url('${location.svgCode}')` }"></span>
-
-                <span class="hidden lg:inline-flex ml-2 text-xs">
-                    {{ location.nativeName }}
-                </span>
-            </div>
-        </div>
-    </div>
-</template>

package/src/components/loading-spinner/loading-spinner.vue

@@ -1,8 +0,0 @@
-<script lang="ts" src="./loading-spinner"></script>
-
-<style scoped src="./loading-spinner.css"></style>
-
-<template>
-    <div class="loading-spinner">
-    </div>
-</template>