Feature/bimdata slider

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: {

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>

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;
+  }
+}

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";

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",

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,

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>

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." ],
+];