fix: use v-bind attrs instead of modelValue

EnergySage · Sep 10, 2024 · 27f6e54 · 27f6e54
1 parent f9455c3
commit 27f6e54
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 22 deletions.
diff --git a/es-ds-components/components/es-slider.vue b/es-ds-components/components/es-slider.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts">
 import Slider from 'primevue/slider';
 
-const props = defineProps({
-    /*
-    modelValue: {
-        type: Number,
-        default: 0,
-    },
-    */
+defineProps({
     min: {
         type: Number,
         required: true,
@@ -34,22 +28,13 @@ const props = defineProps({
 
 // allow use of v-model on this component
 const model = defineModel<number>();
-
-/*
-const { modelValue } = props;
-
-watch(model, (newVal) => {
-    if (newVal) {
-        modelValue.valueOf = newVal;
-    }
-});
-*/
 </script>
 
 <template>
     <div class="mb-3">
         <slider
             v-model="model"
+            v-bind="$attrs"
             :pt="{
                 root: {
                     class: 'slider-root',
@@ -62,6 +47,7 @@ watch(model, (newVal) => {
                 },
             }" />
     </div>
+
     <div class="d-flex flex-row justify-content-between w-100">
         <span>{{ labelFormatter(min) }}</span>
         <span>{{ labelFormatter(max) }}</span>

diff --git a/es-ds-docs/pages/molecules/slider.vue b/es-ds-docs/pages/molecules/slider.vue
@@ -1,6 +1,5 @@
 <script setup>
 const model = ref(null);
-// const modelValue = ref(25);
 const min = ref(0);
 const max = ref(1000);
 const step = ref(50);
@@ -48,10 +47,6 @@ const propTableRows = [
             :step="step"
             :label-formatter="(val) => `$${val}`" />
 
-        <!--
-            :model-value="modelValue"
-        -->
-
         <div class="my-500"></div>
 
         <div class="mb-500">