From 6a7f848f611830bfd7bc30c2ef6527188f6ee6d0 Mon Sep 17 00:00:00 2001
From: LrxGaelle <gaelle@bimdata.io>
Date: Fri, 8 Sep 2023 16:45:19 +0200
Subject: [PATCH] MINOR: Feature/bimdata slider (#313)

* create BIMDataSlider component & Slider documentation

* create slider icon

* add tooltip for slider

* add parameters for slider documentation

* delete dead code

* delete dead code

* refacto

* add boolean props for tooltip

* add slider documentation

* add text description for slider component

* fix BIMDataInput for 0 Number

* add tooltip documentation

* fix input modelValue
---
 .../BIMDataInput/BIMDataInput.vue             |  10 +-
 .../BIMDataSlider/BIMDataSlider.vue           | 101 ++++++++++++++++++
 .../BIMDataSlider/_BIMDataSlider.scss         |  80 ++++++++++++++
 src/BIMDataComponents/index.js                |   1 +
 src/web/assets/img/icon-slider.svg            |  24 +++++
 src/web/router.js                             |   5 +
 src/web/store.js                              |   8 ++
 src/web/views/Components/Slider/Slider.vue    | 101 ++++++++++++++++++
 .../views/Components/Slider/events-data.js    |   5 +
 src/web/views/Components/Slider/props-data.js |  59 ++++++++++
 10 files changed, 392 insertions(+), 2 deletions(-)
 create mode 100644 src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
 create mode 100644 src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss
 create mode 100644 src/web/assets/img/icon-slider.svg
 create mode 100644 src/web/views/Components/Slider/Slider.vue
 create mode 100644 src/web/views/Components/Slider/events-data.js
 create mode 100644 src/web/views/Components/Slider/props-data.js

diff --git a/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue b/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
index 1df5fdf2..04822185 100644
--- a/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
+++ b/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
@@ -1,7 +1,13 @@
 <template>
   <div
     class="bimdata-input"
-    :class="{ error, success, disabled, loading, 'not-empty': !!modelValue }"
+    :class="{
+      error,
+      success,
+      disabled,
+      loading,
+      'not-empty': modelValue != null,
+    }"
     :style="style"
   >
     <input
@@ -40,7 +46,7 @@ export default {
   },
   props: {
     modelValue: {
-      type: [String, Number, Boolean],
+      type: [String, Number],
       default: "",
     },
     placeholder: {
diff --git a/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
new file mode 100644
index 00000000..83f5c8a4
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="bimdata-slider">
+    <input
+      ref="input"
+      class="bimdata-slider-input"
+      type="range"
+      :style="`--background-size: ${backgroundSize}%`"
+      :min="min"
+      :max="max"
+      :step="step"
+      :value="modelValue"
+      :disabled="disabled"
+      @input="onInput"
+    />
+    <output
+      v-if="tooltip"
+      class="bimdata-slider-tooltip"
+      :style="{ left: tooltipPosition }"
+      >{{ modelValue }}</output
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    min: {
+      type: [Number, String],
+      default: null,
+    },
+    max: {
+      type: [Number, String],
+      default: null,
+    },
+    step: {
+      type: [Number, String],
+      default: null,
+    },
+    modelValue: {
+      type: Number,
+      default: 0,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    tooltip: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      backgroundSize: 0,
+      tooltipPosition: `calc(${this.modelValue}% + (${
+        8 - this.modelValue * 0.18
+      }px))`,
+    };
+  },
+  watch: {
+    modelValue() {
+      this.$nextTick(() => {
+        this.backgroundSize = this.getBackgroundSize();
+        if (this.tooltip) {
+          this.getTooltipPosition();
+        }
+      });
+    },
+  },
+  mounted() {
+    this.backgroundSize = this.getBackgroundSize();
+  },
+  methods: {
+    getBackgroundSize() {
+      const input = this.$refs.input;
+
+      if (!input) return null;
+
+      const min = +input.min || 0;
+      const max = +input.max || 100;
+      const value = +input.value;
+
+      const size = ((value - min) / (max - min)) * 100;
+
+      return size;
+    },
+    onInput(event) {
+      this.$emit("update:modelValue", +event.target.value);
+    },
+    getTooltipPosition() {
+      const min = this.min ? this.min : 0;
+      const max = this.max ? this.max : 100;
+      const newVal = Number(((this.modelValue - min) * 100) / (max - min));
+      this.tooltipPosition = `calc(${newVal}% + (${8 - newVal * 0.18}px))`;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./_BIMDataSlider.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss b/src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss
new file mode 100644
index 00000000..f26b8dec
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataSlider/_BIMDataSlider.scss
@@ -0,0 +1,80 @@
+.bimdata-slider {
+  position: relative;
+  .bimdata-slider-input {
+    &::-webkit-slider-runnable-track {
+      height: 3px;
+      background: linear-gradient(
+          to right,
+          var(--color-primary),
+          var(--color-primary)
+        ),
+        var(--color-silver);
+      background-size: var(--background-size, 0%) 100%;
+      background-repeat: no-repeat;
+      border-radius: 5px;
+    }
+    &::-webkit-slider-thumb {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+      background: var(--color-primary);
+      border: solid var(--color-white) 1px;
+      border-radius: 50%;
+      margin-top: -6px;
+      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+    }
+    &::-moz-range-progress {
+      background-color: var(--color-primary);
+      border-radius: 5px;
+    }
+    &::-moz-range-track {
+      background-color: var(--color-silver);
+      border-radius: 5px;
+    }
+    &::-moz-range-thumb {
+      width: 15px;
+      height: 15px;
+      cursor: pointer;
+      background: var(--color-primary);
+      border: solid var(--color-white) 1px;
+      border-radius: 50%;
+      margin-top: -6px;
+      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+    }
+  }
+  &:hover {
+    .bimdata-slider-tooltip {
+      opacity: 1;
+      transition: opacity 0.2s ease-out;
+    }
+  }
+  &-tooltip {
+    background: var(--color-primary);
+    color: var(--color-white);
+    padding: calc(var(--spacing-unit) / 2);
+    position: absolute;
+    border-radius: 4px;
+    bottom: calc(var(--spacing-unit) * 3);
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+    &::after {
+      border: 5px solid transparent;
+      border-top-color: var(--color-primary);
+      bottom: 5px * -2;
+      content: "";
+      height: 0;
+      left: 50%;
+      position: absolute;
+      transform: translate(-50%);
+      width: 0;
+    }
+  }
+  .bimdata-slider-input,
+  .bimdata-slider-input::-webkit-slider-runnable-track,
+  .bimdata-slider-input::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+  }
+}
diff --git a/src/BIMDataComponents/index.js b/src/BIMDataComponents/index.js
index 1b55be36..cb169df1 100644
--- a/src/BIMDataComponents/index.js
+++ b/src/BIMDataComponents/index.js
@@ -35,6 +35,7 @@ export { default as BIMDataSearchAutocomplete } from "./BIMDataSearchAutocomplet
 export { default as BIMDataSelect } from "./BIMDataSelect/BIMDataSelect.vue";
 export { default as BIMDataSimplePieChart } from "./BIMDataSimplePieChart/BIMDataSimplePieChart.vue";
 export { default as BIMDataSpinner } from "./BIMDataSpinner/BIMDataSpinner.vue";
+export { default as BIMDataSlider } from "./BIMDataSlider/BIMDataSlider.vue";
 export { default as BIMDataTable } from "./BIMDataTable/BIMDataTable.vue";
 export { default as BIMDataTabs } from "./BIMDataTabs/BIMDataTabs.vue";
 export { default as BIMDataText } from "./BIMDataText/BIMDataText.vue";
diff --git a/src/web/assets/img/icon-slider.svg b/src/web/assets/img/icon-slider.svg
new file mode 100644
index 00000000..42206e53
--- /dev/null
+++ b/src/web/assets/img/icon-slider.svg
@@ -0,0 +1,24 @@
+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.7" cx="47.9688" cy="22.0312" r="18.5" fill="url(#paint0_linear_4888_142)"/>
+<rect width="48.3004" height="5" transform="matrix(1 1.74846e-07 1.74846e-07 -1 10.8497 37.5)" fill="#D8D8D8"/>
+<rect width="21.4761" height="5" transform="matrix(1 1.74846e-07 1.74846e-07 -1 10.8497 37.5)" fill="#2F374A"/>
+<g filter="url(#filter0_d_4888_142)">
+<path d="M31.7856 27.5C35.9278 27.5 39.2856 30.8579 39.2856 35C39.2856 39.1421 35.9278 42.5 31.7856 42.5C27.6435 42.5 24.2856 39.1421 24.2856 35C24.2856 30.8579 27.6435 27.5 31.7856 27.5Z" fill="#2F374A"/>
+<path d="M31.7856 27.5C35.9278 27.5 39.2856 30.8579 39.2856 35C39.2856 39.1421 35.9278 42.5 31.7856 42.5C27.6435 42.5 24.2856 39.1421 24.2856 35C24.2856 30.8579 27.6435 27.5 31.7856 27.5Z" stroke="#D8D8D8"/>
+</g>
+<defs>
+<filter id="filter0_d_4888_142" x="13.7856" y="18" width="36" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4888_142"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4888_142" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_4888_142" x1="62.8437" y1="10.8438" x2="33.9688" y2="33.1563" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8C62C"/>
+<stop offset="1" stop-color="#F8C62C" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/web/router.js b/src/web/router.js
index e708f8f8..f6371625 100644
--- a/src/web/router.js
+++ b/src/web/router.js
@@ -207,6 +207,11 @@ const routes = [
         name: "select",
         component: () => import("./views/Components/Select/Select.vue"),
       },
+      {
+        path: "slider",
+        name: "slider",
+        component: () => import("./views/Components/Slider/Slider.vue"),
+      },
       {
         path: "table",
         name: "table",
diff --git a/src/web/store.js b/src/web/store.js
index 6731e789..0bbb9885 100644
--- a/src/web/store.js
+++ b/src/web/store.js
@@ -31,6 +31,7 @@ import safe_zone_inline from "./assets/img/icon-safe_zone_inline.svg";
 import search from "./assets/img/icon-search.svg";
 import search_autocomplete from "./assets/img/icon-search_autocomplete.svg";
 import select from "./assets/img/icon-select.svg";
+import slider from "./assets/img/icon-slider.svg";
 import table from "./assets/img/icon-table.svg";
 import tabs from "./assets/img/icon-tabs.svg";
 import text from "./assets/img/icon-text.svg";
@@ -282,6 +283,13 @@ export default {
         text: "Select (dropdown) is used to enabled a user to select a single item from a list of options.",
         btn: "View select",
       },
+      {
+        title: "Slider",
+        img: slider,
+        path: "slider",
+        text: "Sliders allow users to make selections from a range of values.",
+        btn: "View slider",
+      },
       {
         title: "Table",
         img: table,
diff --git a/src/web/views/Components/Slider/Slider.vue b/src/web/views/Components/Slider/Slider.vue
new file mode 100644
index 00000000..9d5f0c26
--- /dev/null
+++ b/src/web/views/Components/Slider/Slider.vue
@@ -0,0 +1,101 @@
+<template>
+  <main class="article slider">
+    <div class="article-wrapper">
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
+      <ComponentCode :componentTitle="$route.name" language="javascript">
+        <template #module>
+          <div class="m-t-24">
+            <BIMDataSlider
+              v-model="slider"
+              :min="minRange"
+              :max="maxRange"
+              :step="step"
+              :tooltip="tooltip"
+            />
+          </div>
+        </template>
+
+        <template #parameters>
+          <BIMDataInput
+            type="number"
+            placeholder="Min range"
+            v-model="minRange"
+          />
+          <BIMDataInput
+            type="number"
+            placeholder="Max range"
+            v-model="maxRange"
+          />
+          <BIMDataInput
+            type="number"
+            placeholder="Slider default value"
+            :modelValue="slider"
+            @update:modelValue="slider = +$event"
+          />
+          <BIMDataInput type="number" placeholder="Step value" v-model="step" />
+          <BIMDataCheckbox text="Tooltip" v-model="tooltip" />
+        </template>
+
+        <template #import>
+          import BIMDataSlider from
+          "@bimdata/design-system/src/BIMDataComponents/BIMDataSlider/BIMDataSlider.vue";
+        </template>
+
+        <template #code>
+          &lt;BIMDataSlider v-model="{{ slider }}" :min="{{ minRange }}"
+          :max="{{ maxRange }}" :step="{{ step }}" :tooltip="{{ tooltip }}"
+          /&gt;
+        </template>
+      </ComponentCode>
+
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Props:
+        </BIMDataText>
+        <BIMDataTable
+          :rowHeight="36"
+          :columns="propsData[0]"
+          :rows="propsData.slice(1)"
+        />
+      </div>
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Events:
+        </BIMDataText>
+        <BIMDataTable
+          :rowHeight="36"
+          :columns="eventsData[0]"
+          :rows="eventsData.slice(1)"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import propsData from "./props-data.js";
+import eventsData from "./events-data.js";
+
+import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
+
+export default {
+  components: {
+    ComponentCode,
+  },
+  data() {
+    return {
+      slider: 40,
+      minRange: 0,
+      maxRange: 100,
+      step: null,
+      tooltip: false,
+      propsData,
+      eventsData,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/web/views/Components/Slider/events-data.js b/src/web/views/Components/Slider/events-data.js
new file mode 100644
index 00000000..de4891f9
--- /dev/null
+++ b/src/web/views/Components/Slider/events-data.js
@@ -0,0 +1,5 @@
+/* eslint-disable */
+export default [
+  [ "Event name", "Payload" ],
+  [ "update:modelValue", "The slider input range value." ],
+];
diff --git a/src/web/views/Components/Slider/props-data.js b/src/web/views/Components/Slider/props-data.js
new file mode 100644
index 00000000..96714079
--- /dev/null
+++ b/src/web/views/Components/Slider/props-data.js
@@ -0,0 +1,59 @@
+/* eslint-disable */
+export default [
+  [
+    "Props",
+    "Type",
+    "Required",
+    "Default value",
+    "Description",
+    "Example",
+  ],
+  [
+    "min",
+    "Number, String",
+    "",
+    "null",
+    "Use this props to define min range.",
+    "0",
+  ],
+  [
+    "max",
+    "Number, String",
+    "",
+    "null",
+    "Use this props to define max range.",
+    "100",
+  ],
+  [
+    "step",
+    "Number, String",
+    "",
+    "null",
+    "You can change the default step increment.",
+    "10",
+  ],
+  [
+    "modelValue",
+    "Number",
+    "",
+    "0",
+    "Slider input range value.",
+    "",
+  ],
+  [
+    "disabled",
+    "Boolean",
+    "",
+    "false",
+    "Use this props to disable slider.",
+    "true",
+  ],
+  [
+    "tooltip",
+    "Boolean",
+    "",
+    "false",
+    "Use this props to enable tooltip with slider value.",
+    "true",
+  ],
+];