Merge branch 'master' into 285-textinput-add-fluid

examples/rollup-typescript/package.json

@@ -16,14 +16,13 @@
     "@rollup/plugin-typescript": "^6.0.0",
     "@tsconfig/svelte": "^1.0.0",
     "carbon-components-svelte": "^0.12.0",
-    "node-sass": "^4.14.1",
     "rollup": "^2.3.4",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^6.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "svelte": "^3.0.0",
     "svelte-check": "^1.0.0",
-    "svelte-preprocess": "^4.0.0",
+    "svelte-preprocess": "^4.3.2",
     "tslib": "^2.0.0",
     "typescript": "^3.9.3"
   }

examples/rollup-typescript/public/index.html

@@ -7,7 +7,11 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>typescript</title>
+    <title>rollup-typescript</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/carbon-components-svelte@0.14.0/css/all.css"
+    />
     <link rel="stylesheet" href="/build/bundle.css" />
     <script defer src="/build/bundle.js"></script>
   </head>

examples/rollup-typescript/src/App.svelte

@@ -18,10 +18,6 @@
   let theme: "g10" = "g10";
 </script>
 
-<style lang="scss" global>
-  @import "carbon-components-svelte/css/all";
-</style>
-
 <Theme persist bind:theme>
   <Header />
   <Content style="background: none; padding: 1rem">

examples/rollup/package.json

@@ -9,14 +9,12 @@
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "carbon-components-svelte": "^0.12.0",
-    "node-sass": "^4.14.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.23.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-serve": "^1.0.3",
     "rollup-plugin-svelte": "^6.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.24.0",
+    "svelte": "^3.24.0"
-    "svelte-preprocess": "^4.0.9"
   }
 }

examples/rollup/public/index.html

@@ -8,6 +8,10 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <title>rollup</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/carbon-components-svelte@0.14.0/css/all.css"
+    />
     <link rel="stylesheet" href="/build/bundle.css" />
     <script defer src="/build/bundle.js"></script>
   </head>

examples/rollup/rollup.config.js

@@ -4,7 +4,6 @@ import resolve from "@rollup/plugin-node-resolve";
 import serve from "rollup-plugin-serve";
 import svelte from "rollup-plugin-svelte";
 import livereload from "rollup-plugin-livereload";
-import sveltePreprocess from "svelte-preprocess";
 
 const PORT = process.env.PORT || 3000;
 const PROD = !process.env.ROLLUP_WATCH;
@@ -20,7 +19,6 @@ export default {
   plugins: [
     svelte({
       dev: !PROD,
-      preprocess: sveltePreprocess(),
       css: (css) => css.write("bundle.css", !PROD),
     }),
     resolve({ browser: true, dedupe: ["svelte"] }),

examples/rollup/src/App.svelte

@@ -18,10 +18,6 @@
   let theme = "g10";
 </script>
 
-<style lang="scss" global>
-  @import "carbon-components-svelte/css/all";
-</style>
-
 <Theme persist bind:theme>
   <Header />
   <Content style="background: none; padding: 1rem">

src/Slider/Slider.Story.svelte

@@ -4,7 +4,7 @@
   import Slider from "./Slider.svelte";
   import SliderSkeleton from "./Slider.Skeleton.svelte";
 
-  $: value = 50;
+  let value = 50;
 </script>
 
 {#if story === 'skeleton'}

src/Slider/Slider.svelte

@@ -1,9 +1,9 @@
 <script>
   /**
    * Specify the value of the slider
-   * @type {string} [value=""]
+   * @type {number} [value=0]
    */
-  export let value = "";
+  export let value = 0;
 
   /**
    * Set the maximum slider value
@@ -101,7 +101,7 @@
    */
   export let ref = null;
 
-  import { createEventDispatcher, afterUpdate } from "svelte";
+  import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -119,9 +119,18 @@
 
   function stopHolding() {
     holding = false;
+    dragging = false;
+  }
+
+  function move() {
+    if (holding) {
+      startDragging();
+    }
   }
 
   function calcValue(e) {
+    if (disabled) return;
+
     const offsetX = e.touches ? e.touches[0].clientX : e.clientX;
     const { left, width } = trackRef.getBoundingClientRect();
     let nextValue =
@@ -137,12 +146,6 @@
     value = nextValue;
   }
 
-  afterUpdate(() => {
-    if (!holding) {
-      dispatch("change", value);
-    }
-  });
-
   $: range = max - min;
   $: left = ((value - min) / range) * 100;
   $: {
@@ -156,9 +159,20 @@
       calcValue(event);
       dragging = false;
     }
+
+    if (!holding && !disabled) {
+      dispatch("change", value);
+    }
   }
 </script>
 
+<svelte:body
+  on:mousemove="{move}"
+  on:touchmove="{move}"
+  on:mouseup="{stopHolding}"
+  on:touchend="{stopHolding}"
+  on:touchcancel="{stopHolding}" />
+
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
@@ -182,21 +196,15 @@
       tabindex="-1"
       class:bx--slider="{true}"
       class:bx--slider--disabled="{disabled}"
-      on:click="{startDragging}"
+      on:mousedown="{startDragging}"
-      on:mousemove="{() => {
+      on:mousedown="{startHolding}"
-        if (holding) {
+      on:touchstart="{startHolding}"
-          startDragging();
+      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];
         }
       }}"
-      on:touchmove="{() => {
-        if (holding) {
-          startDragging();
-        }
-      }}"
-      on:mouseup="{stopHolding}"
-      on:touchup="{stopHolding}"
-      on:touchend="{stopHolding}"
-      on:touchcancel="{stopHolding}"
     >
       <div
         role="slider"
@@ -206,14 +214,6 @@
         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="{id}"
       ></div>
       <div bind:this="{trackRef}" class:bx--slider__track="{true}"></div>

src/UIShell/GlobalHeader/HeaderPanelLink.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <li class:bx--switcher__item="{true}">
-  <a href="{href}" class:bx--switcher__item-link="{true}" {...$$restProps}>
+  <a href="{href}" class:bx--switcher__item-link="{true}" {...$$restProps} on:click>
     <slot />
   </a>
 </li>