fluent-svelte-extra 1.1.4 → 1.1.6

package/RangeSlider/RangeSlider.svelte

@@ -1,43 +1,50 @@
-<script>
- import { createEventDispatcher } from 'svelte'
- import Slider from '@bulatdashiev/svelte-slider'
- import { TextBlock } from 'fluent-svelte'
- export let min
- export let max
- export let width;
- let values = min + ',' + max
- let range = [min, max]
-
- const dispatch = createEventDispatcher()
-
- function handleChange(event) {
-     values = event.detail.toString()
-     dispatch('change', event.detail)
- }
+<script >import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+import Slider from '@bulatdashiev/svelte-slider';
+import { TextBlock } from 'fluent-svelte';
+export let min = 1;
+export let max = 100;
+let valuesText = min + ',' + max;
+export let values = [min, max];
+$: {
+    if (values.toString() !== valuesText) {
+        valuesText = values[0] + "," + values[1];
+    }
+}
+function handleChange(event) {
+    valuesText = event.detail.toString();
+    dispatch('change', event.detail);
+}
+function handleMouseDown() {
+    document.addEventListener("mouseup", () => {
+        dispatch('finish', valuesText.toString());
+    }, { once: true });
+}
 </script>
 
-<div id="sliderComp" style="width: {width}">
+<div id="sliderComp" {...$$restProps}>
  <Slider
-     bind:value={range}
+     bind:value={values}
      {min}
      {max}
      range
-     on:input={(e) => handleChange(e)}
+     order
+     on:input={handleChange}
  >
      <div
          slot="left"
          class="handle"
-         on:mouseup={() => dispatch('finish', values.toString())}
+         on:mousedown={handleMouseDown}
      />
      <div
          slot="right"
          class="handle"
-         on:mouseup={() => dispatch('finish', values.toString())}
+         on:mousedown={handleMouseDown}
      />
  </Slider>
  <div id="vals">
-     <TextBlock>{values.split(',')[0]}</TextBlock>
-     <TextBlock>{values.split(',')[1]}</TextBlock>
+     <TextBlock>{valuesText.split(',')[0]}</TextBlock>
+     <TextBlock>{valuesText.split(',')[1]}</TextBlock>
  </div>
 </div>
 

package/RangeSlider/RangeSlider.svelte.d.ts

@@ -1,33 +1,22 @@
-/** @typedef {typeof __propDef.props}  RangeSliderProps */
-/** @typedef {typeof __propDef.events}  RangeSliderEvents */
-/** @typedef {typeof __propDef.slots}  RangeSliderSlots */
-export default class RangeSlider extends SvelteComponentTyped<{
-    min: any;
-    max: any;
-    width: any;
-}, {
-    finish: CustomEvent<any>;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type RangeSliderProps = typeof __propDef.props;
-export type RangeSliderEvents = typeof __propDef.events;
-export type RangeSliderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        min: any;
-        max: any;
-        width: any;
+        [x: string]: any;
+        min?: number;
+        max?: number;
+        values?: number[];
     };
     events: {
-        finish: CustomEvent<any>;
         change: CustomEvent<any>;
+        finish: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export declare type RangeSliderProps = typeof __propDef.props;
+export declare type RangeSliderEvents = typeof __propDef.events;
+export declare type RangeSliderSlots = typeof __propDef.slots;
+export default class RangeSlider extends SvelteComponentTyped<RangeSliderProps, RangeSliderEvents, RangeSliderSlots> {
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluent-svelte-extra",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
   "homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
   "license": "MIT",