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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@citruslime/ui",
-    "version": "1.2.1-beta.0",
+    "version": "2.0.0-beta.3",
     "author": {
         "name": "Citrus-Lime Ltd",
         "url": "https://citruslime.com"
@@ -24,11 +24,14 @@
         "build": "vite build && tsc -p tsconfig.build.json && copyfiles -f ../../theme.js ../../.eslintrc.js ../../.stylelintrc.js dist"
     },
     "dependencies": {
-        "flatpickr": "^4.6.9",
-        "vue": "^3.1.5",
-        "vue-i18n": "^9.1.7"
+        "flatpickr": "^4.6.9"
     },
     "devDependencies": {
         "copyfiles": "^2.4.1"
+    },
+    "peerDependencies": {
+        "@iconify/vue": "^3.0.0",
+        "vue": "^3.2.11",
+        "vue-i18n": "^9.1.7"
     }
 }

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { AccordionItem } from '../../@types';
+
+interface Item {
+    id: string;
+    title: string;
+    open: boolean;
+}
+
+const props = withDefaults(defineProps<{
+    items: AccordionItem[];
+    exclusive?: boolean;
+    openFirst?: boolean;
+}>(), {
+    exclusive: false,
+    openFirst: false
+});
+
+const itemList = ref<Item[]>([]);
+
+/**
+ * Initialises the internal item list, from the provided list of items.
+ */
+function initialiseItems (): void {
+    itemList.value = props.items.map(v => {
+        return {
+            id: v.id,
+            title: v.title,
+            open: false
+        };
+    });
+
+    if (props.openFirst && itemList.value.length > 0) {
+        itemList.value[0].open = true;
+    }
+}
+
+/**
+ * Opens/closes the item.
+ *
+ * @param {Item} item The item to open/close.
+ */
+function toggleItem (item: Item): void {
+    if (!item.open) {
+        itemList.value.forEach(i => {
+            if (props.exclusive) {
+                i.open = false;
+            }
+        });
+    }
+
+    item.open = !item.open;
+}
+
+watch(() => props.items, () => initialiseItems(), {
+    deep: true,
+    immediate: true
+});
+</script>
+
+<template>
+    <ul class="border border-grey-2">
+        <li v-for="(item, index) in itemList"
+            :key="index"
+            class="relative">
+            <div class="bg-white 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
+                 }"
+                 :tabindex="index + 1"
+                 @click="toggleItem(item)"
+                 @keyup.enter="toggleItem(item)">
+                {{ item.title }}
+            </div>
+
+            <div v-show="item.open"
+                 class="bg-white border-b border-grey-2 p-6 text-sm">
+                <slot :name="item.id"></slot>
+            </div>
+
+            <icon class="absolute cursor-pointer right-4 top-4 transform transition-transform"
+                  :class="{ 'rotate-180': item.open, 'rotate-0': !item.open }"
+                  icon="ph:caret-down"
+                  @click="toggleItem(item)" />
+        </li>
+    </ul>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+
+import ClUiNotification from '../notification/cl-ui-notification.vue';
+
+withDefaults(defineProps<{
+    removePadding?: boolean;
+}>(), {
+    removePadding: false
+});
+
+const slots = useSlots();
+
+const hasAppHeader = computed(() => slots?.header !== undefined);
+</script>
+
+<template>
+    <cl-ui-notification />
+
+    <div class="absolute flex flex-wrap h-screen max-h-screen max-w-full min-h-screen min-w-full w-full">
+        <slot name="header"></slot>
+
+        <div class="content-start flex flex-nowrap items-stretch max-h-screen relative w-full"
+             :class="{ 'pt-20' : hasAppHeader }">
+            <slot name="navigation"></slot>
+
+            <div class="flex-grow max-h-full overflow-x-hidden overflow-y-auto w-auto"
+                 :class="{
+                     'md:p-8': !removePadding
+                 }">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -1,8 +1,32 @@
-<script lang="ts" src="./button"></script>
+<script lang="ts">
+export default {
+    inheritAttrs: false
+};
+</script>
 
-<style scoped src="./button.css"></style>
+<script setup lang="ts">
+import ClUiLoadingSpinner from '../loading-spinner/cl-ui-loading-spinner.vue';
+
+type ButtonColour = 'default' | 'primary' | 'secondary' | 'danger' | 'blue';
+type ButtonSize = 'small' | 'medium' | 'large';
+
+withDefaults(defineProps<{
+    colour?: ButtonColour;
+    size?: ButtonSize;
+    loading?: boolean;
+    disabled?: boolean;
+}>(), {
+    colour: 'default',
+    size: 'medium',
+    loading: false,
+    disabled: false
+});
+</script>
 
 <template>
+    <cl-ui-loading-spinner v-show="loading"
+                           class="absolute" />
+
     <button v-show="!loading"
             v-bind="$attrs"
             class="align-middle border focus:outline-none font-semibold inline-block overflow-visible rounded shadow text-center"
@@ -21,8 +45,4 @@
             :disabled="disabled">
         <slot></slot>
     </button>
-
-    <div v-show="loading"
-         class="loading-spinner relative">
-    </div>
 </template>

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

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import Flatpickr from 'flatpickr';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { DateFormat } from '../../@types';
+
+import { generateFixedDate, getLocale, replaceDateWithPlaceholders } from './calendar-utilities';
+
+type CalendarType = 'date' | 'datetime';
+
+const props = withDefaults(defineProps<{
+    date?: Date | null;
+    currentLocale?: string;
+    datePlaceholder?: string;
+    dateTimePlaceholder?: string;
+    type?: CalendarType;
+    disabled?: boolean;
+}>(), {
+    date: () => null,
+    currentLocale: 'en-GB',
+    datePlaceholder: 'Select date.',
+    dateTimePlaceholder: 'Select date & time.',
+    type: 'datetime',
+    disabled: false
+});
+
+const emit = defineEmits({
+    'update:date': null
+});
+
+const { d, getDateTimeFormat } = useI18n();
+
+const flatpickrInstance = ref<Flatpickr.Instance | null>(null);
+const element = ref<Node | null>(null);
+
+const date = computed<string>(() => d(generateFixedDate(), props.type, props.currentLocale));
+const dateFormat = computed(() => getDateTimeFormat(props.currentLocale)[props.type]);
+const format = computed<string>(() => {
+    let hourPlaceholder = 'H';
+    let yearPlaceholder = 'Y';
+
+    if (dateFormat.value?.hour12 === true) {
+        hourPlaceholder = 'h';
+    }
+
+    if (dateFormat.value.year === '2-digit') {
+        yearPlaceholder = 'y';
+    }
+
+    const format = replaceDateWithPlaceholders(date.value, hourPlaceholder, yearPlaceholder);
+
+    return format;
+});
+const options = computed<Flatpickr.Options.Options>(() => {
+    const config: Flatpickr.Options.Options = {
+        ...Flatpickr.defaultConfig,
+        allowInput: true,
+        dateFormat: format.value,
+        disableMobile: true,
+        enableTime: props.type === DateFormat.DATETIME,
+        locale: getLocale(props.currentLocale),
+        minuteIncrement: 1,
+        monthSelectorType: 'static',
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        time_24hr: typeof dateFormat.value.hour12 === 'undefined' || dateFormat.value.hour12 === false
+    };
+
+    if (props.date !== null) {
+        config.defaultDate = props.date;
+    }
+
+    return config;
+});
+
+/**
+ * Emits an update to the model value, for the value provided from flatpickr.
+ *
+ * @param selectedDates List of raw selected values.
+ * @param _date Formatted selected value.
+ * @param _instance The current flatpickr instance.
+ */
+function onChange (selectedDates: Date[], _date: string, _instance: Flatpickr.Instance): void {
+    emit('update:date', selectedDates.length > 0 ? selectedDates[0] : null);
+}
+
+/**
+ * Emits an update to the model value, to reset it.
+ */
+function clearValue (): void {
+    emit('update:date', null);
+}
+
+/**
+ * Reset the value to the current day.
+ */
+function resetValue (): void {
+    if (flatpickrInstance.value !== null) {
+        const date = new Date();
+
+        date.setHours(12, 0, 0, 0);
+
+        emit('update:date', date);
+    }
+}
+
+/**
+ * Creates a new flatpickr instance and adds an event handler for the OnChange event.
+ */
+function createInstance (): void {
+    if (flatpickrInstance.value === null && element.value !== null) {
+        flatpickrInstance.value = Flatpickr(element.value as Node, options.value);
+
+        flatpickrInstance.value.config.onChange.push(onChange);
+    }
+}
+
+/**
+ * Updates the current flatpickr instance and re-adds an event handler for the OnChange event.
+ */
+function updateInstance (): void {
+    if (flatpickrInstance.value !== null) {
+        flatpickrInstance.value.set(options.value);
+
+        flatpickrInstance.value.config.onChange.push(onChange);
+    }
+}
+
+/**
+ * Updates the selected value, in the flatpickr instance.
+ *
+ * @param value The new value.
+ */
+function updateInstanceValue (value: Date): void {
+    if (flatpickrInstance.value !== null) {
+        flatpickrInstance.value.setDate(value, true);
+    }
+}
+
+/**
+ * Removes the selected value, in the flatpickr instance.
+ */
+function clearInstanceValue (): void {
+    if (flatpickrInstance.value !== null) {
+        flatpickrInstance.value.clear();
+    }
+}
+
+/**
+ * Destroys the current flatpickr instance.
+ */
+function destroyInstance (): void {
+    if (flatpickrInstance.value !== null) {
+        flatpickrInstance.value.destroy();
+
+        flatpickrInstance.value = null;
+    }
+}
+
+watch(() => props.date, (newValue, oldValue) => {
+    if (newValue !== null && oldValue !== null) {
+        if (newValue.getTime() !== oldValue.getTime()) {
+            updateInstanceValue(newValue);
+        }
+    }
+    else if (newValue === null && oldValue !== null) {
+        clearInstanceValue();
+    }
+}, {
+    deep: true
+});
+
+watch(() => options.value, updateInstance, {
+    deep: true
+});
+
+watch(() => props.type, () => {
+    destroyInstance();
+
+    nextTick(() => createInstance());
+}, {
+    immediate: false
+});
+
+onMounted(() => createInstance());
+
+onUnmounted(() => destroyInstance());
+</script>
+
+<style lang="postcss">
+@import 'flatpickr/dist/flatpickr.css';
+
+.flatpickr-calendar {
+	@apply shadow-lg;
+}
+
+.flatpickr-months {
+	@apply border-b border-grey-1 py-2 px-1;
+}
+
+.flatpickr-prev-month,
+.flatpickr-next-month {
+	@apply mt-2;
+}
+
+.flatpickr-months .flatpickr-next-month:hover svg,
+.flatpickr-months .flatpickr-prev-month:hover svg {
+	@apply text-primary-default fill-current;
+}
+
+.cur-month {
+	@apply mr-1;
+}
+
+.flatpickr-current-month span.cur-month:hover {
+	@apply bg-white;
+}
+
+/* stylelint-disable selector-class-pattern */
+
+.flatpickr-innerContainer {
+	@apply mb-1;
+}
+
+/* stylelint-enable selector-class-pattern */
+
+.flatpickr-weekdays {
+	@apply bg-off-white mb-1 py-2;
+}
+
+.flatpickr-day.selected {
+	@apply bg-primary-default border-primary-default hover:bg-primary-light hover:border-primary-light;
+}
+
+.flatpickr-day.today {
+	@apply border-primary-default;
+}
+
+.flatpickr-day.today:hover {
+	@apply bg-grey-1 text-grey-7;
+}
+</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">
+
+        <icon v-show="date === null || disabled"
+              class="absolute bg-white right-2 text-grey-4 top-3"
+              icon="ph:calendar"
+              weight="light"
+              :size="18" />
+
+        <div v-show="date !== null && !disabled"
+             class="absolute bg-white flex right-2 text-grey-4 top-3">
+            <icon class="cursor-pointer md:mr-1 mr-0.5"
+                  icon="ph:arrow-counter-clockwise"
+                  :size="16"
+                  @click="resetValue" />
+
+            <icon class="cursor-pointer"
+                  icon="ph:x"
+                  :size="16"
+                  @click="clearValue" />
+        </div>
+    </div>
+</template>

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

@@ -1,4 +1,20 @@
-<script lang="ts" src="./card"></script>
+<script setup lang="ts">
+type CardSize = 'small' | 'medium' | 'large';
+
+withDefaults(defineProps<{
+    size?: CardSize;
+    title?: string;
+    hover?: boolean;
+    shadowSize?: CardSize;
+    padImage?: boolean;
+}>(), {
+    size: 'medium',
+    title: '',
+    hover: false,
+    shadowSize: 'medium',
+    padImage: false
+});
+</script>
 
 <template>
     <div class="overflow-hidden relative"