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

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

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { AppUser } from '../../@types';
-
-withDefaults(defineProps<{
-    user?: AppUser | null;
-}>(), {
-    user: () =>  null
-});
-
-const isOpen = ref<boolean>(false);
-</script>
-
-<template>
-    <div class="md:relative">
-        <div class="bg-blue-light flex items-center md:min-w-[320px] select-none">
-            <template v-if="user">
-                <img v-if="user.userImage"
-                     :src="user.userImage"
-                     class="hidden m-4 max-h-12 max-w-12 md:block ring-2 ring-white rounded-full">
-
-                <div v-if="user.userName || (user.userGroup && user.userGroup.groupName)"
-                     class="cursor-default flex-grow hidden md:block my-4 text-white">
-                    <div v-if="user.userName"
-                         class="cursor-default overflow-ellipsis whitespace-nowrap">
-                        {{ user.userName }}
-                    </div>
-
-                    <div v-if="user.userGroup && user.userGroup.groupName"
-                         class="cursor-default overflow-ellipsis text-xs whitespace-nowrap">
-                        {{ user.userGroup.groupName }}
-                    </div>
-                </div>
-
-                <div class="bg-transparent content-center cursor-pointer flex h-20 hover:bg-opacity-10 hover:bg-white items-center justify-center justify-items-center md:ml-4 md:w-20 transition-colors w-10"
-                     @click="isOpen = !isOpen">
-                    <icon class="text-white transform transition-transform"
-                          :class="{ 'rotate-180' : isOpen }"
-                          icon="ph:caret-down" />
-                </div>
-            </template>
-        </div>
-
-        <div v-if="isOpen"
-             class="absolute bg-white right-0 shadow-2xl top-20 w-full z-20">
-            <slot name="content"></slot>
-        </div>
-    </div>
-</template>

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

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-
-import { isLanguageLocaleFormat, Language } from '../../@types';
-
-const props = withDefaults(defineProps<{
-    currentLocale: string;
-    supportedLocales: Language[];
-    disabled?: boolean;
-}>(), {
-    disabled: false
-});
-
-defineEmits({
-    'update:current-locale': null
-});
-
-const localeToggleOpen = ref<boolean>(false);
-
-const selectedLanguage = computed<Language | null>(() => props.supportedLocales.find(loc => loc.localeCode === props.currentLocale) ?? null);
-
-const validLanguages = computed<Language[]>(() => props.supportedLocales.filter(e => isLanguageLocaleFormat(e)).sort((a,b) => (a.nativeName > b.nativeName) ? 1 : ((b.nativeName > a.nativeName) ? -1 : 0)));
-
-/**
- * Toggles whether the locale dropdown is shown or hidden.
- */
-function toggleLocaleSwitcher (): void {
-    if (!props.disabled) {
-        localeToggleOpen.value = !localeToggleOpen.value;
-    }
-}
-
-watch(() => props.disabled, (newValue) => {
-    if (newValue) {
-        localeToggleOpen.value = false;
-    }
-});
-</script>
-
-<style scoped lang="postcss">
-.flag-svg,
-.flag-svg[data-size='small'] {
-	background-position: center center !important;
-	background-repeat: no-repeat !important;
-	background-size: cover !important;
-	height: 12px;
-	width: 16px;
-}
-</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="$emit('update:current-locale', 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/cl-ui-loading-spinner.vue

@@ -1,16 +0,0 @@
-<style scoped lang="postcss">
-.loading-spinner {
-	@apply h-8 w-8;
-}
-
-.loading-spinner:after {
-	@apply absolute animate-spin border-2 border-primary-default rounded-full h-8 w-8;
-
-	border-bottom: 2px solid transparent;
-	content: '';
-}
-</style>
-
-<template>
-    <div class="loading-spinner"></div>
-</template>

package/src/components/login/cl-ui-login.vue

@@ -1,183 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-
-import { Authentication, Language, LoginLocalisations } from '../../@types';
-import ClUiLanguageSwitcher from '../language-switcher/cl-ui-language-switcher.vue';
-
-type PasswordFieldType = 'text' | 'password';
-
-const props = withDefaults(defineProps<{
-    errors?: string[];
-    currentLocale?: string;
-    supportedLocales: Language[];
-    localisations?: LoginLocalisations;
-    logo: string;
-    backgroundImage: string;
-    loading?: false;
-}>(), {
-    errors: () => [],
-    currentLocale: 'en-GB',
-    localisations: () => ({
-        login: 'Login',
-        email: 'Email Address',
-        password: 'Password',
-        validEmail: 'Username is a valid email address.',
-        invalidEmail: 'Username must be a valid email address.'
-    }),
-    loading: false
-});
-
-const emit = defineEmits({
-    login: null,
-    'update:errors': null,
-    'update:current-locale': null
-});
-
-const username = ref('');
-const password = ref('');
-
-const passwordFieldType = ref<PasswordFieldType>('password');
-const usernameValid = ref<boolean>(false);
-
-const selectedLocale = computed<string>({
-    get: () => props.currentLocale,
-    set: (value) => emit('update:current-locale', value)
-});
-
-/**
- * Emits the current username and password values.
- */
-function login (): void {
-    emit('login', {
-        username: username.value,
-        password: password.value
-    } as Authentication);
-}
-
-/**
- * Emits an event to clear the currently displayed error.
- */
-function clearErrors (): void {
-    emit('update:errors', []);
-}
-
-watch(username, () => {
-    const emailRegex = /[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)/gi;
-
-    usernameValid.value = emailRegex.test(username.value);
-});
-</script>
-
-<style scoped lang="postcss">
-*[data-valid='true'] {
-	@apply border-2 border-primary-default;
-}
-
-*[data-valid='false'] {
-	@apply border-2 border-danger-default;
-}
-</style>
-
-<template>
-    <div class="bg-cover bg-left-bottom h-screen"
-         :style="{ 'background-image': `url('${backgroundImage}')` }">
-        <form class="bg-secondary-default flex flex-wrap opacity-95 p-10 pb-12 w-full">
-            <div class="md:flex-1 md:pb-0 pb-8 w-full">
-                <img :src="logo">
-            </div>
-
-            <div class="content-center flex items-center md:pb-0 md:pr-2 md:w-auto pb-2 w-auto">
-                <cl-ui-language-switcher v-model:current-locale="selectedLocale"
-                                         :supported-locales="supportedLocales" />
-            </div>
-
-            <div class="md:pb-0 md:pr-2 md:w-1/4 pb-2 w-full">
-                <div class="inline relative text-grey-4 w-full">
-                    <icon class="absolute left-3 top-0.5"
-                          icon="ph:user"
-                          :size="18" />
-
-                    <input v-model.trim="username"
-                           class="!pb-1 !pl-9 w-full"
-                           type="email"
-                           :data-valid="usernameValid"
-                           :placeholder="localisations.email"
-                           autocomplete="username"
-                           @input="clearErrors">
-                </div>
-
-                <div v-show="username !== ''"
-                     class="text-grey-3 text-sm">
-                    <div v-show="usernameValid"
-                         class="flex mt-2">
-                        <icon class="text-primary-default"
-                              icon="ph:check"
-                              :size="16" />
-
-                        <em class="align-middle inline-block ml-4">
-                            {{ localisations.validEmail }}
-                        </em>
-                    </div>
-
-                    <div v-show="!usernameValid"
-                         class="flex mt-2">
-                        <icon class="text-danger-default"
-                              icon="ph:x"
-                              :size="16" />
-
-                        <em class="align-middle inline-block ml-4">
-                            {{ localisations.invalidEmail }}
-                        </em>
-                    </div>
-                </div>
-            </div>
-
-            <div class="md:pb-0 md:pr-2 md:w-1/4 pb-2 w-full">
-                <div class="inline relative text-grey-4 w-full">
-                    <icon class="absolute left-3 top-0.5"
-                          icon="ph:lock"
-                          :size="18" />
-
-                    <icon v-show="passwordFieldType === 'password'"
-                          class="absolute cursor-pointer right-3 top-0.5"
-                          icon="ph:eye"
-                          :size="18"
-                          @click="passwordFieldType = 'text'" />
-
-                    <icon v-show="passwordFieldType === 'text'"
-                          class="absolute cursor-pointer right-3 top-0.5"
-                          icon="ph:eye-slash"
-                          :size="18"
-                          @click="passwordFieldType = 'password'" />
-
-                    <input v-model="password"
-                           class="!pb-1 !pl-9 !pr-9 w-full"
-                           :type="passwordFieldType"
-                           :data-valid="password !== ''"
-                           :placeholder="localisations.password"
-                           autocomplete="current-password"
-                           @input="clearErrors">
-                </div>
-            </div>
-
-            <div class="md:w-1/4 w-full">
-                <cl-ui-button class="w-full"
-                              colour="blue"
-                              :loading="loading"
-                              :disabled="!usernameValid || password === ''"
-                              @click.prevent="login">
-                    {{ localisations.login }}
-                </cl-ui-button>
-            </div>
-
-            <span v-show="errors.length"
-                  class="emphasis-danger mt-4 p-4 text-sm w-full">
-                <div v-for="(error, index) in errors"
-                     :key="index"
-                     class="font-semibold">
-                    {{ error }}
-                </div>
-            </span>
-        </form>
-    </div>
-</template>

package/src/components/modal/cl-ui-modal.vue

@@ -1,120 +0,0 @@
-<script lang="ts">
-export default {
-    inheritAttrs: false
-};
-</script>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-type ModalSize = 'x-small' | 'small' | 'medium' | 'large';
-
-const props = withDefaults(defineProps<{
-    title: string;
-    size?: ModalSize;
-    confirmButton?: string;
-    cancelButton?: string;
-    confirmEnabled?: boolean;
-}>(), {
-    size: 'medium',
-    confirmButton: '',
-    cancelButton: '',
-    confirmEnabled: true
-});
-
-const emit = defineEmits({
-    confirm: null,
-    cancel: null
-});
-
-const visible = ref<boolean>(false);
-
-const showConfirmButton = computed(() => props.confirmButton !== '');
-const showCancelButton = computed(() => props.cancelButton !== '');
-
-/**
- * Gets the text for a button, either the default or overridden text.
- *
- * @param buttonValue Enable/disable flag or button override text.
- * @returns The label value to use.
- */
-function getButtonText (buttonValue: string | boolean): string {
-    return typeof buttonValue === 'string' ? buttonValue : '';
-}
-
-const confirmButtonText = computed(() => getButtonText(props.confirmButton));
-const cancelButtonText = computed(() => getButtonText(props.cancelButton));
-
-/**
- * Toggles the visibility of the model, either to the opposite of its current value or to the provided value.
- *
- * @param show Whether to show or hide the modal.
- */
-function toggleModal (show?: boolean): void {
-    visible.value = typeof show !== 'undefined' ? show : !visible.value;
-}
-
-/**
- * Emits an event depending on if the modal has been confirmed or cancelled.
- *
- * @param action Whether the confirm or cancel/close button has been selected.
- */
-function modalAction (action: boolean): void {
-    toggleModal(false);
-
-    if (action) {
-        emit('confirm', action);
-    }
-    else {
-        emit('cancel', action);
-    }
-}
-</script>
-
-<template>
-    <slot name="trigger"
-          v-bind="{ toggleModal }"></slot>
-
-    <teleport to="body">
-        <div v-show="visible"
-             class="align-items-center bg-black bg-opacity-40 bottom-0 fixed flex h-full justify-center left-0 right-0 top-0 w-full z-40">
-            <div v-bind="$attrs"
-                 class="bg-white flex flex-wrap mx-0 my-auto overflow-y-auto relative rounded shadow-lg"
-                 :class="{ 'lg:w-2/12 w-10/12': size === 'x-small', 'w-6/12': size === 'small', 'w-8/12': size === 'medium', 'w-10/12': size === 'large' }">
-                <div class="absolute cursor-pointer h-2 leading-5 right-3 text-black text-center top-3 w-5"
-                     @click="modalAction(false)">
-                    <icon icon="ph:x"
-                          :size="20" />
-                </div>
-
-                <div class="border-b border-grey-2 font-semibold h-11 leading-10 overflow-ellipsis overflow-hidden pl-2 pr-8 text-2xl w-full whitespace-nowrap">
-                    {{ title }}
-                </div>
-
-                <div class="overflow-y-auto p-2 w-full"
-                     v-bind="{ toggleModal }">
-                    <slot></slot>
-                </div>
-
-                <div v-show="showCancelButton || showConfirmButton"
-                     class="p-2 text-right text-sm w-full">
-                    <cl-ui-button v-if="showConfirmButton"
-                                  class="mr-2"
-                                  colour="primary"
-                                  size="small"
-                                  :disabled="confirmEnabled === false"
-                                  @click.prevent="modalAction(true)">
-                        {{ confirmButtonText }}
-                    </cl-ui-button>
-
-                    <cl-ui-button v-if="showCancelButton"
-                                  colour="danger"
-                                  size="small"
-                                  @click.prevent="modalAction(false)">
-                        {{ cancelButtonText }}
-                    </cl-ui-button>
-                </div>
-            </div>
-        </div>
-    </teleport>
-</template>

package/src/components/navigation/cl-ui-navigation.vue

@@ -1,124 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { NavigationGroup } from '../../@types';
-
-withDefaults(defineProps<{
-    groups?: NavigationGroup[];
-}>(), {
-    groups: () => []
-});
-
-defineEmits({
-    'item-select': null
-});
-
-const activeGroup = ref<NavigationGroup | null>(null);
-const menuPinned = ref(false);
-
-/**
- * Selects a given navigation group.
- *
- * @param group The group which has been selected.
- */
-function selectNavigationGroup (group: NavigationGroup): void {
-    activeGroup.value = (activeGroup.value?.name === group.name ? null : group);
-}
-
-/**
- * Toggles the pinned state of the navigation.
- */
-function toggleMenuPinned (): void {
-    menuPinned.value = !menuPinned.value;
-}
-</script>
-
-<style scoped lang="postcss">
-.navslide-enter-from,
-.navslide-leave-to {
-	@apply -left-full;
-}
-
-#group-container {
-	scrollbar-width: 0;
-}
-
-#group-container::-webkit-scrollbar {
-	@apply hidden;
-}
-</style>
-
-<template>
-    <div class="flex flex-nowrap h-full max-h-full min-h-full min-w-20 relative self-start w-auto">
-        <div v-if="groups"
-             id="group-container"
-             class="bg-blue-default h-full left-0 max-h-full min-h-full min-w-20 overflow-y-auto self-start sticky w-20 z-30">
-            <div v-for="(group, index) in groups"
-                 :key="index"
-                 class="flex-grow w-full">
-                <div class="cursor-pointer h-20 hover:bg-blue-light transition-colors w-20"
-                     :class="{ 'bg-blue-light' : group.name === activeGroup?.name }"
-                     @click="selectNavigationGroup(group);">
-                    <icon v-if="group.icon !== null"
-                          class="block h-20 p-7 w-20"
-                          :icon="group.icon"
-                          color="#FFFFFF" />
-                </div>
-            </div>
-        </div>
-
-        <transition name="navslide">
-            <div v-if="activeGroup"
-                 class="bg-grey-0 border-grey-2 border-r max-h-full min-h-full min-w-[260px] p-8 self-start top-0 transition-all z-20"
-                 :class="{ 'relative' : menuPinned, 'absolute left-20': !menuPinned }">
-                <div class="font-bold leading-8 mb-8 pr-8 relative w-full">
-                    <span class="select-none text-blue-light text-lg">
-                        {{ activeGroup.caption }}
-                    </span>
-
-                    <span class="absolute cursor-pointer h-8 hidden leading-8 md:inline-block right-0 text-center top-0 w-8"
-                          @click="toggleMenuPinned">
-                        <icon v-if="!menuPinned"
-                              class="inline-block"
-                              icon="ph:push-pin" />
-                        <icon v-else
-                              class="inline-block"
-                              icon="ph:push-pin-slash" />
-                    </span>
-                </div>
-                <div v-for="(section, sectionIndex) in activeGroup.sections"
-                     :key="sectionIndex"
-                     class="mb-8 text-sm w-full">
-                    <div class="font-bold mb-4 select-none w-full">
-                        {{ section.caption }}
-                    </div>
-
-                    <span v-for="(record, recordIndex) in section.records"
-                          :key="recordIndex"
-                          class="block cursor-pointer hover:text-blue-light mb-2 transition-colors">
-                        <template v-if="record.component">
-                            <component :is="record.component"
-                                       :to="record.link"
-                                       @click="$emit('item-select', record)">
-                                {{ record.caption }}
-                            </component>
-                        </template>
-                        <a v-else
-                           :href="record.link"
-                           :alt="`External link to: ${record.link}`"
-                           :title="`External link to: ${record.link}`"
-                           target="new"
-                           @click="$emit('item-select', record)">
-                            <icon
-                                class="inline-block"
-                                icon="ph:arrow-square-out"
-                                alt="External Link" />
-
-                            {{ record.caption }}
-                        </a>
-                    </span>
-                </div>
-            </div>
-        </transition>
-    </div>
-</template>

package/src/components/notification/cl-ui-notification.vue

@@ -1,55 +0,0 @@
-<script lang="ts">
-export default {
-    inheritAttrs: false
-};
-</script>
-
-<script setup lang="ts">
-import { notifications, removeNotification } from '../../composables/notification';
-
-type NotificationPosition = 'top-left' | 'top-centre' | 'top-right' | 'bottom-left' | 'bottom-centre' | 'bottom-right';
-
-withDefaults(defineProps<{
-    container?: string;
-    position?: NotificationPosition;
-}>(), {
-    container: 'body',
-    position: 'top-right'
-});
-</script>
-
-<template>
-    <teleport :to="container">
-        <div class="fixed w-80 z-40"
-             :class="{
-                 'top-5 left-5': position === 'top-left',
-                 'top-5 left-1/2': position === 'top-centre',
-                 'top-5 right-5': position === 'top-right',
-                 'bottom-5 left-5': position === 'bottom-left',
-                 'bottom-5 left-1/2': position === 'bottom-centre',
-                 'bottom-5 right-5': position === 'bottom-right'
-             }">
-            <div v-for="(notification, index) in notifications"
-                 v-bind="$attrs"
-                 :key="index"
-                 class="break-words cursor-pointer flex font-semibold group mb-2 overflow-hidden p-4 rounded shadow-lg text-sm"
-                 :class="{
-                     'bg-white': notification.colour === 'default',
-                     'bg-primary-default': notification.colour === 'primary',
-                     'bg-secondary-default': notification.colour === 'secondary',
-                     'bg-danger-default': notification.colour === 'danger',
-                     'bg-warning-default': notification.colour === 'warning'
-                 }"
-                 @click="removeNotification(notification)">
-                <span class="flex-1 overflow-ellipsis select-none w-64">
-                    {{ notification.message }}
-                </span>
-
-                <icon class="group-hover:opacity-100 inline-block opacity-0"
-                      icon="ph:x"
-                      :size="16"
-                      weight="bold" />
-            </div>
-        </div>
-    </teleport>
-</template>