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

package/src/components/language-switcher/{language-switcher.vue → cl-ui-language-switcher.vue}

@@ -1,6 +1,52 @@
-<script lang="ts" src="./language-switcher"></script>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 
-<style scoped src="./language-switcher.css"></style>
+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)"
@@ -23,7 +69,7 @@
                  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">
+                 @click="$emit('update:current-locale', location.localeCode)">
                 <span class="flag-svg inline-block mr-3"
                       :style="{ 'background': `url('${location.svgCode}')` }"></span>
 

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

@@ -0,0 +1,16 @@
+<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/{login.vue → cl-ui-login.vue}

@@ -1,6 +1,82 @@
-<script lang="ts" src="./login"></script>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 
-<style scoped src="./login.css"></style>
+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"
@@ -17,8 +93,9 @@
 
             <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">
-                    <ph-user class="absolute left-3 top-0.5"
-                             :size="18" />
+                    <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"
@@ -33,8 +110,9 @@
                      class="text-grey-3 text-sm">
                     <div v-show="usernameValid"
                          class="flex mt-2">
-                        <ph-check class="text-primary-default"
-                                  :size="16" />
+                        <icon class="text-primary-default"
+                              icon="ph:check"
+                              :size="16" />
 
                         <em class="align-middle inline-block ml-4">
                             {{ localisations.validEmail }}
@@ -43,7 +121,8 @@
 
                     <div v-show="!usernameValid"
                          class="flex mt-2">
-                        <ph-x class="text-danger-default"
+                        <icon class="text-danger-default"
+                              icon="ph:x"
                               :size="16" />
 
                         <em class="align-middle inline-block ml-4">
@@ -55,18 +134,21 @@
 
             <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">
-                    <ph-lock class="absolute left-3 top-0.5"
-                             :size="18" />
-
-                    <ph-eye v-show="passwordFieldType === 'password'"
-                            class="absolute cursor-pointer right-3 top-0.5"
-                            :size="18"
-                            @click="passwordFieldType = 'text'" />
-
-                    <ph-eye-slash v-show="passwordFieldType === 'text'"
-                                  class="absolute cursor-pointer right-3 top-0.5"
-                                  :size="18"
-                                  @click="passwordFieldType = 'password'" />
+                    <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"

package/src/components/modal/{modal.vue → cl-ui-modal.vue}

@@ -1,4 +1,75 @@
-<script lang="ts" src="./modal"></script>
+<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"
@@ -12,7 +83,8 @@
                  :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)">
-                    <ph-x :size="20" />
+                    <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">

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

@@ -0,0 +1,124 @@
+<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/{notification.vue → cl-ui-notification.vue}

@@ -1,4 +1,22 @@
-<script lang="ts" src="./notification"></script>
+<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">
@@ -27,7 +45,8 @@
                     {{ notification.message }}
                 </span>
 
-                <ph-x class="group-hover:opacity-100 inline-block opacity-0"
+                <icon class="group-hover:opacity-100 inline-block opacity-0"
+                      icon="ph:x"
                       :size="16"
                       weight="bold" />
             </div>

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

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { NumberFormat, SliderLocalisations } from '../../@types';
+import { useDebouncer } from '../../utils';
+
+const props = withDefaults(defineProps<{
+    value: number;
+    min: number;
+    max: number;
+    currentLocale?: string;
+    localisations?: SliderLocalisations;
+    step?: number;
+    enforceStep?: boolean;
+    disabled?: boolean;
+}>(), {
+    currentLocale: 'en-GB',
+    localisations: () => ({
+        invalidProps: 'The current combination of props is invalid. Please confirm the values provided are correct.'
+    }),
+    step: 1,
+    enforceStep: false,
+    disabled: false
+});
+
+const emit = defineEmits({
+    'update:value': null
+});
+
+const { n } = useI18n();
+const { debounce } = useDebouncer();
+
+const currentValue = computed<number>({
+    get: () => props.value,
+    set: (value) => emit('update:value', value)
+});
+
+const colour = computed<string>(() => props.disabled ? 'rgba(153, 153, 153, 0.8)' : '#9acd32');
+const percentage = computed<number>(() => {
+    let value = ((currentValue.value - props.min) / (props.max - props.min)) * 100;
+
+    if (value < 35 && value > 0) {
+        if (value < 20) {
+            value += 0.5;
+        }
+        else {
+            value += 0.25;
+        }
+    }
+    else if (value > 65 && value < 100) {
+        if (value > 80) {
+            value -= 0.5;
+        }
+        else {
+            value -= 0.25;
+        }
+    }
+
+    return value;
+});
+const validProps = computed<boolean>(() => props.min <= props.max && props.step > 0);
+
+/**
+ * Updates the current value and forces a re-render of the input.
+ *
+ * @param target The input event target.
+ * @param forceUpdate $forceUpdate isn't available in the composition API but can be passed in as a parameter.
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+function updateCurrentValue (target: EventTarget | null, forceUpdate: Function): void {
+    const inputValue: string = (target as HTMLInputElement | null)?.value ?? '';
+    const value: number = Math.max(Math.min(parseFloat(inputValue) || props.min, props.max), props.min);
+
+    currentValue.value = props.enforceStep ? Math.ceil(value / props.step) * props.step : value;
+
+    nextTick(() => forceUpdate());
+}
+</script>
+
+<style scoped lang="postcss">
+input[type='range']::-webkit-slider-runnable-track {
+	@apply bg-none h-1;
+}
+
+input[type='range']::-moz-range-track {
+	@apply bg-none rounded-full h-1;
+}
+
+input[type='range']::-webkit-slider-thumb {
+	@apply appearance-none bg-white border border-solid border-grey-2 rounded-full cursor-pointer h-6 w-6;
+
+	margin-top: -0.6rem;
+}
+
+input[type='range']:disabled::-webkit-slider-thumb {
+	@apply hidden;
+}
+
+input[type='range']::-moz-range-thumb {
+	@apply bg-white border border-grey-2 rounded-full cursor-pointer h-6 w-6;
+}
+
+input[type='range']:disabled::-moz-range-thumb {
+	@apply h-0 w-0;
+}
+</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>

package/src/components/accordion/accordion.vue

@@ -1,30 +0,0 @@
-<script lang="ts" src="./accordion"></script>
-
-<template>
-    <ul class="border border-grey-2">
-        <li v-for="(item, index) in itemList"
-            :key="index"
-            class="relative">
-            <div class="border border-grey-2 cursor-pointer ease-in-out focus:border-blue-light focus:outline-none font-semibold hover:scale-101 p-4 scale-100 transform-gpu transition-transform"
-                 :class="{
-                     'border-b-2': item.open,
-                     [`bg-${titleBackground}`]: true
-                 }"
-                 :tabindex="index + 1"
-                 @click="toggleItem(item)"
-                 @keyup.enter="toggleItem(item)">
-                {{ item.title }}
-            </div>
-
-            <div v-show="item.open"
-                 class="border-b border-grey-2 p-6 text-sm"
-                 :class="[ `bg-${contentBackground}` ]">
-                <slot :name="item.id"></slot>
-            </div>
-
-            <ph-caret-down class="absolute cursor-pointer right-4 top-4 transform transition-transform"
-                           :class="{ 'rotate-180': item.open, 'rotate-0': !item.open }"
-                           @click="toggleItem(item)" />
-        </li>
-    </ul>
-</template>