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

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

@@ -1,145 +0,0 @@
-<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>