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

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

@@ -1,48 +0,0 @@
-<script lang="ts">
-export default {
-    inheritAttrs: false
-};
-</script>
-
-<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"
-            :class="{
-                'leading-8 px-4 text-sm': size === 'small',
-                'leading-10 px-8 text-sm': size === 'medium',
-                'leading-10 px-10 py-2': size === 'large',
-
-                'bg-white border-grey-0 hover:border-grey-2 text-secondary': colour === 'default',
-                'border-primary-default bg-primary-default text-white hover:bg-primary-light hover:border-primary-light': colour === 'primary',
-                'border-secondary-default bg-secondary-default text-white hover:bg-secondary-light hover:border-secondary-light': colour === 'secondary',
-                'border-danger-default bg-danger-default text-white hover:bg-danger-dark hover:border-danger-dark': colour === 'danger',
-                'border-link-default bg-link-default text-white hover:bg-link-light hover:border-link-light': colour === 'blue',
-                '!border-grey-3 !bg-grey-3 text-grey-0 hover:!bg-grey-3 hover:!border-grey-3 cursor-default': disabled
-            }"
-            :disabled="disabled">
-        <slot></slot>
-    </button>
-</template>

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

@@ -1,277 +0,0 @@
-<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/cl-ui-card.vue

@@ -1,70 +0,0 @@
-<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"
-         :class="{
-             'shadow': shadowSize === 'small',
-             'shadow-md': shadowSize === 'medium',
-             'shadow-lg': shadowSize === 'large',
-
-             'hover:shadow-md': hover && shadowSize === 'small',
-             'hover:shadow-lg': hover && shadowSize === 'medium',
-             'hover:shadow-xl': hover && shadowSize === 'large'
-         }">
-        <div v-if="$slots.image"
-             :class="{
-                 'p-2': size === 'small' && padImage,
-                 'p-4': size === 'medium' && padImage,
-                 'p-8': size === 'large' && padImage
-             }">
-            <slot name="image"></slot>
-        </div>
-
-        <div v-if="title !== ''"
-             class="border-grey-2 font-normal"
-             :class="{
-                 'p-2 text-xl leading-8': size === 'small',
-                 'p-4 text-2xl leading-9': size === 'medium',
-                 'p-8 text-4xl leading-10': size === 'large',
-                 'border-t': $slots.image && padImage
-             }">
-            {{ title }}
-        </div>
-
-        <div class="border-grey-2"
-             :class="{
-                 'p-2': size === 'small',
-                 'p-4': size === 'medium',
-                 'p-8': size === 'large',
-                 'border-t': ($slots.image && padImage && title === '') || title !== ''
-             }">
-            <slot></slot>
-        </div>
-
-        <div v-if="$slots.footer"
-             class="border-grey-2 border-t"
-             :class="{
-                 'p-2': size === 'small',
-                 'p-4': size === 'medium',
-                 'p-8': size === 'large'
-             }">
-            <slot name="footer"></slot>
-        </div>
-    </div>
-</template>