Merge pull request #1518 from EnergySage/CED-1755-slider

feat: v3 slider

es-ds-components/components/es-slider.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import Slider from 'primevue/slider';
+
+const props = defineProps({
+    /**
+     * Starting value of slider thumb
+     */
+    startingValue: {
+        type: Number,
+        required: true,
+        default: 1,
+    },
+    /**
+     * Minimum value of slider
+     */
+    min: {
+        type: Number,
+        required: true,
+        default: 1,
+    },
+    /**
+     * Maximum value of slider
+     */
+    max: {
+        type: Number,
+        required: true,
+        default: 100,
+    },
+    /**
+     * Step increment
+     */
+    step: {
+        type: Number,
+        default: 1,
+    },
+    /**
+     * Aria label for slider handle
+     */
+    ariaLabel: {
+        type: String,
+        required: false,
+        default: 'Select a number',
+    },
+    /**
+     * Function that modifies label value
+     */
+    labelFormatter: {
+        type: Function,
+        required: false,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        default: (val: any) => val,
+    },
+    /**
+     * Function that modifies tooltip value
+     */
+    tooltipFormatter: {
+        type: Function,
+        required: false,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        default: (val: any) => val,
+    },
+});
+
+// allow use of v-model on this component
+const model = defineModel<number | number[]>();
+model.value = props.startingValue;
+</script>
+
+<template>
+    <div>
+        <slider
+            v-model="model"
+            v-bind="$attrs"
+            :min="min"
+            :max="max"
+            :step="step"
+            :aria-label="ariaLabel"
+            :pt="{
+                root: {
+                    class: 'slider-root',
+                },
+                range: {
+                    class: 'slider-range',
+                },
+                handle: {
+                    class: 'slider-handle',
+                },
+            }" />
+
+        <div class="d-flex flex-row justify-content-between">
+            <span>{{ labelFormatter(min) }}</span>
+            <span>{{ labelFormatter(max) }}</span>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+:deep(.slider-root) {
+    background-color: variables.$gray-300;
+    border-radius: 15px;
+    height: 10px;
+    margin-bottom: 0.75rem;
+    position: relative;
+}
+
+:deep(.slider-range) {
+    background: linear-gradient(90deg, #688aea, #162676);
+    border-radius: 15px;
+    height: 10px;
+}
+
+:deep(.slider-handle) {
+    background-color: variables.$white;
+    border: 9px solid variables.$blue-600;
+    border-radius: 50%;
+    box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
+    cursor: pointer;
+    filter: drop-shadow(0 1px 6px rgba(34, 38, 51, 0.25));
+    height: 28px;
+    transform: translate(-54%, -32%);
+    width: 28px;
+
+    &:focus-visible {
+        outline: none;
+    }
+}
+
+// "tooltip"
+:deep(.slider-handle::before) {
+    align-items: center;
+    background-color: variables.$blue-600;
+    border-radius: 50%;
+    bottom: 27px;
+    box-shadow: 0 1px 6px 0 rgba(34, 38, 51, 0.25);
+    color: variables.$white;
+    content: v-bind("`'${tooltipFormatter(model)}'`");
+    display: flex;
+    font-weight: variables.$font-weight-boldest;
+    height: 52px;
+    justify-content: center;
+    padding-bottom: 2px;
+    position: absolute;
+    right: -22px;
+    width: 52px;
+}
+</style>

es-ds-components/nuxt.config.ts

@@ -66,6 +66,7 @@ export default defineNuxtConfig({
                 'primevue/progressbar',
                 'primevue/radiobutton',
                 'primevue/rating',
+                'primevue/slider',
                 'primevue/tabpanel',
                 'primevue/tabview',
             ],

es-ds-docs/components/ds-molecules-list.vue

@@ -57,6 +57,9 @@
         <li>
             <ds-link to="/molecules/rating"> Rating </ds-link>
         </li>
+        <li>
+            <ds-link to="/molecules/slider"> Slider </ds-link>
+        </li>
         <li>
             <ds-link to="/molecules/support"> Support </ds-link>
         </li>

es-ds-docs/pages/molecules/slider.vue

@@ -0,0 +1,72 @@
+<script setup>
+const startValue = 150;
+const sliderVal = ref(startValue);
+const min = ref(0);
+const max = ref(1000);
+const step = ref(50);
+const ariaLabel = ref('Sample aria-label');
+
+const propTableRows = [
+    ['starting-value', 'Number', '1', 'Required. Initial value of slider.'],
+    ['min', 'Number', '1', 'Required. Minimum value of slider.'],
+    ['max', 'Number', '100', 'Required. Maximum value of slider.'],
+    ['step', 'Number', '1', 'Step factor to increment/decrement the value.'],
+    ['aria-label', 'String', '"Pick a number"', 'Aria-label for slider handle.'],
+    ['label-formatter', 'Function', 'n/a', 'Function that modifies min and max labels.'],
+    ['tooltip-formatter', 'Function', 'n/a', 'Function that modifies tooltip label.'],
+];
+
+const { $prism } = useNuxtApp();
+const compCode = ref('');
+const docCode = ref('');
+
+onMounted(async () => {
+    if ($prism) {
+        const compSource = await import('@energysage/es-ds-components/components/es-slider.vue?raw');
+        // eslint-disable-next-line import/no-self-import
+        const docSource = await import('./slider.vue?raw');
+
+        compCode.value = $prism.normalizeCode(compSource.default);
+        docCode.value = $prism.normalizeCode(docSource.default);
+        $prism.highlight();
+    }
+});
+</script>
+
+<template>
+    <div>
+        <h1>Slider</h1>
+
+        <p class="pb-200">
+            Extended from
+            <nuxt-link
+                href="https://v3.primevue.org/slider/"
+                target="_blank">
+                PrimeVue Slider
+            </nuxt-link>
+        </p>
+
+        <div class="my-500">
+            <es-slider
+                v-model="sliderVal"
+                :min="min"
+                :max="max"
+                :step="step"
+                :starting-value="startValue"
+                :aria-label="ariaLabel"
+                :label-formatter="(val) => `$${val}`"
+                :tooltip-formatter="(val) => `$${val}`" />
+        </div>
+
+        <div class="mb-500">
+            <h2>EsSlider props</h2>
+            <ds-prop-table :rows="propTableRows" />
+        </div>
+
+        <ds-doc-source
+            :comp-code="compCode"
+            comp-source="es-ds-components/components/es-slider.vue"
+            :doc-code="docCode"
+            doc-source="es-ds-docs/pages/molecules/slider.vue" />
+    </div>
+</template>