chore: lift components folder

src/Slider/Slider.Skeleton.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let hideLabel = false;
+</script>
+
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  {#if !hideLabel}
+    <span class:bx--label={true} class:bx--skeleton={true} />
+  {/if}
+  <div class:bx--slider-container={true} class:bx--skeleton={true}>
+    <span class:bx--slider__range-label={true} />
+    <div class:bx--slider={true}>
+      <div class:bx--slider__track={true} />
+      <div class:bx--slider__filled-track={true} />
+      <div class:bx--slider__thumb={true} />
+    </div>
+    <span class:bx--slider__range-label={true} />
+  </div>
+</div>

src/Slider/Slider.Story.svelte

@@ -0,0 +1,20 @@
+<script>
+  export let story = undefined;
+
+  import Slider from "./Slider.svelte";
+  import SliderSkeleton from "./Slider.Skeleton.svelte";
+
+  $: value = 50;
+</script>
+
+{#if story === 'skeleton'}
+  <SliderSkeleton {...$$props} />
+{:else}
+  <Slider
+    {...$$props}
+    id="slider-id"
+    bind:value
+    on:change={({ detail }) => {
+      console.log('on:change', detail);
+    }} />
+{/if}

src/Slider/Slider.stories.js

@@ -0,0 +1,39 @@
+import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
+import Component from "./Slider.Story.svelte";
+
+export default { title: "Slider", decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    id: text("Slider id", "slider-id"),
+    name: text("Form item name (name)", ""),
+    inputType: text("The form element type (inputType)", "number"),
+    ariaLabelInput: text(
+      "The ARIA label for the <input> (ariaLabelInput)",
+      "Label for slider value"
+    ),
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+    hideTextInput: boolean("Without text input (hideTextInput)", false),
+    min: number("The minimum value (min)", 0),
+    max: number("The maximum value (max)", 100),
+    step: number("The step (step)", 1),
+    stepMuliplier: number(
+      "The step factor for Shift+arrow keys (stepMuliplier)",
+      4
+    ),
+    labelText: text("Label text (labelText)", "Slider Label"),
+    minLabel: text("Label for minimum value (minLabel)", ""),
+    maxLabel: text("Label for maximum value (maxLabel)", ""),
+    hideLabel: boolean("Hide label (hideLabel)", false),
+  },
+});
+
+export const Skeleton = () => ({
+  Component,
+  props: {
+    story: "skeleton",
+    hideLabel: boolean("Hide label (hideLabel)", false),
+  },
+});

src/Slider/Slider.svelte

@@ -0,0 +1,159 @@
+<script>
+  export let disabled = false;
+  export let hideTextInput = false;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let inputType = "number";
+  export let invalid = false;
+  export let labelText = "";
+  export let light = false;
+  export let max = 100;
+  export let maxLabel = "";
+  export let min = 0;
+  export let minLabel = "";
+  export let name = "";
+  export let required = false;
+  export let step = 1;
+  export let stepMultiplier = 4;
+  export let value = "";
+  export let ref = null;
+
+  import { createEventDispatcher, afterUpdate } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let trackRef = null;
+  let dragging = false;
+  let holding = false;
+
+  function startDragging() {
+    dragging = true;
+  }
+
+  function startHolding() {
+    holding = true;
+  }
+
+  function stopHolding() {
+    holding = false;
+  }
+
+  function calcValue(e) {
+    const offsetX = e.touches ? e.touches[0].clientX : e.clientX;
+    const { left, width } = trackRef.getBoundingClientRect();
+    let nextValue =
+      min +
+      Math.round(((max - min) * ((offsetX - left) / width)) / step) * step;
+
+    if (nextValue <= min) {
+      nextValue = min;
+    } else if (nextValue >= max) {
+      nextValue = max;
+    }
+
+    value = nextValue;
+  }
+
+  afterUpdate(() => {
+    if (!holding) {
+      dispatch("change", value);
+    }
+  });
+
+  $: range = max - min;
+  $: left = ((value - min) / range) * 100;
+  $: {
+    if (value <= min) {
+      value = min;
+    } else if (value >= max) {
+      value = max;
+    }
+
+    if (dragging) {
+      calcValue(event);
+      dragging = false;
+    }
+  }
+</script>
+
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
+    {labelText}
+  </label>
+  <div class:bx--slider-container={true}>
+    <span class:bx--slider__range-label={true}>{minLabel || min}</span>
+    <div
+      bind:this={ref}
+      role="presentation"
+      tabindex="-1"
+      class:bx--slider={true}
+      class:bx--slider--disabled={disabled}
+      on:click={startDragging}
+      on:mousemove={() => {
+        if (holding) {
+          startDragging();
+        }
+      }}
+      on:touchmove={() => {
+        if (holding) {
+          startDragging();
+        }
+      }}
+      on:mouseup={stopHolding}
+      on:touchup={stopHolding}
+      on:touchend={stopHolding}
+      on:touchcancel={stopHolding}>
+      <div
+        role="slider"
+        tabindex="0"
+        class:bx--slider__thumb={true}
+        style="left: {left}%"
+        aria-valuemax={max}
+        aria-valuemin={min}
+        aria-valuenow={value}
+        on:mousedown={startHolding}
+        on:touchstart={startHolding}
+        on:keydown={({ shiftKey, key }) => {
+          const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 };
+          if (keys[key]) {
+            value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
+          }
+        }}
+        {id} />
+      <div bind:this={trackRef} class:bx--slider__track={true} />
+      <div
+        class:bx--slider__filled-track={true}
+        style="transform: translate(0, -50%) scaleX({left / 100})" />
+      <input
+        type="hidden"
+        class:bx--slider__input={true}
+        {name}
+        {value}
+        {required}
+        {min}
+        {max}
+        {step} />
+    </div>
+    <span class:bx--slider__range-label={true}>{maxLabel || max}</span>
+    {#if !hideTextInput}
+      <input
+        type={inputType}
+        id="input-{id}"
+        aria-label={$$props['aria-label'] || 'Slider number input'}
+        class:bx--text-input={true}
+        class:bx--slider-text-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--invalid={invalid}
+        on:change={({ target }) => {
+          value = Number(target.value);
+        }}
+        {disabled}
+        {value} />
+    {/if}
+  </div>
+</div>

src/Slider/index.js

@@ -0,0 +1,2 @@
+export { default as Slider } from "./Slider.svelte";
+export { default as SliderSkeleton } from "./Slider.Skeleton.svelte";