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

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/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>

package/src/components/slider/slider.vue

@@ -1,41 +0,0 @@
-<script lang="ts" src="./slider"/>
-
-<style scoped src="./slider.css"></style>
-
-<template>
-    <div v-if="validProps"
-         v-bind="$attrs"
-         class="flex flex-wrap items-center">
-        <input class="!text-sm md:!h-8 md:!w-auto"
-               type="number"
-               :value="currentValue"
-               :min="min"
-               :max="max"
-               :step="step"
-               :disabled="disabled"
-               @input="debounce(updateCurrentValue, [ $event.target, $forceUpdate ])">
-
-        <div class="flex flex-1 flex-wrap items-center md:mt-0 mt-3">
-            <span class="bg-grey-0 leading-6 md:ml-2 ml-0 px-3 rounded-full text-center text-xs">
-                {{ n(min, Number.isInteger(min) ? NumberFormat.INTEGER : NumberFormat.DECIMAL, currentLocale ) }}
-            </span>
-
-            <input v-model.number="currentValue"
-                   class="align-middle appearance-none bg-gradient-to-r border border-grey-2 delay-500 ease-in flex-1 h-5 ml-2 outline-none rounded-full transition-colors"
-                   :style="{ background: `linear-gradient(to right, ${colour} 0%, ${colour} ${percentage}%, white ${percentage}%, white 100%)` }"
-                   type="range"
-                   :min="min"
-                   :max="max"
-                   :step="step"
-                   :disabled="disabled">
-
-            <span class="bg-grey-0 leading-6 ml-2 px-3 rounded-full text-center text-xs">
-                {{ n(max, Number.isInteger(max) ? NumberFormat.INTEGER : NumberFormat.DECIMAL, currentLocale ) }}
-            </span>
-        </div>
-    </div>
-    <div v-else
-         class="emphasis-danger text-sm w-full">
-        {{ localisations.invalidProps }}
-    </div>
-</template>