@hyvor/design 0.0.63 → 0.0.66

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -3,7 +3,7 @@ import { clickOutside } from "../index.js";
 import { createEventDispatcher } from "svelte";
 export let color = "#000000";
 export let size = 30;
-let show = false;
+export let show = false;
 const dispatch = createEventDispatcher();
 function handleInput() {
   dispatch("input", color);
@@ -19,7 +19,13 @@ function handleClose() {
         style:width="{size}px"
         style:height="{size}px"
         style:background-color={color}
-        on:click={() => show = true}
+        on:click={() => {
+            if (show) {
+                handleClose();
+            } else {
+                show = true;
+            }
+        }}
     ></button>
 
     {#if show}
@@ -29,9 +35,9 @@ function handleClose() {
                 callback: () => handleClose(),
             }}
         >
-            <ColorPicker 
+            <ColorPicker
                 bind:hex={color}
-                --input-size={size + 'px'}
+                --input-size={size + "px"}
                 isDialog={false}
                 isAlpha={false}
                 on:input={handleInput}
@@ -55,4 +61,4 @@ function handleClose() {
         width: 0;
         z-index: 1000;
     }
-</style>
+</style>

package/dist/components/ColorPicker/ColorPicker.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         color?: string | undefined;
         size?: number | undefined;
+        show?: boolean | undefined;
     };
     events: {
         input: CustomEvent<string>;

package/dist/components/Slider/Slider.svelte

@@ -0,0 +1,128 @@
+<script>import { createEventDispatcher } from "svelte";
+export let min;
+export let max;
+export let value;
+export let step = 1;
+export let disabled = false;
+export let dots = false;
+const dispatch = createEventDispatcher();
+function toStep(value2) {
+  return Math.max(min, Math.min(max, Math.round(value2 / step) * step));
+}
+$:
+  progress = (value - min) / (max - min) * 100;
+let dragging = false;
+let trackEl;
+function handleMousedown(event) {
+  dragging = true;
+  handleMousemove(event);
+  window.addEventListener("mousemove", handleMousemove);
+  window.addEventListener("mouseup", handleMouseup);
+}
+function handleMouseup() {
+  dragging = false;
+  window.removeEventListener("mousemove", handleMousemove);
+}
+function handleMousemove(event) {
+  if (dragging) {
+    const rect = trackEl.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const width = rect.width;
+    const newValue = min + x / width * (max - min);
+    value = toStep(newValue);
+    dispatch("change", value);
+  }
+}
+</script>
+
+<div class="slider">
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+        class="track"
+        bind:this={trackEl}
+        class:dragging
+        on:mousedown={handleMousedown}
+    >
+        <div class="progress" style="width: {progress}%"></div>
+        <button class="handle" style="left: {progress}%">
+            <span class="tip">
+                {value}
+            </span>
+        </button>
+
+        {#if dots}
+            {#each Array.from({ length: (max - min) / step + 1 }, (_, i) => i) as i}
+                <div
+                    class="dot"
+                    style="left: {(i * 100) / ((max - min) / step)}%"
+                ></div>
+            {/each}
+        {/if}
+    </div>
+</div>
+
+<style>
+    .track {
+        background-color: var(--input);
+        height: 10px;
+        border-radius: 20px;
+        position: relative;
+    }
+    .handle {
+        background-color: var(--accent);
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        cursor: grab;
+        z-index: 1;
+        transition: 0.2s box-shadow;
+    }
+    .handle:hover {
+        box-shadow: 0 0 0 2px var(--accent-light);
+    }
+    .tip {
+        position: absolute;
+        bottom: 100%;
+        margin-bottom: 3px;
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 3px 6px;
+        border-radius: 5px;
+
+        /* from Tooltip */
+        --local-bg: #24292f;
+        --local-color: #fff;
+
+        background-color: var(--local-bg);
+        color: var(--local-color);
+        display: none;
+    }
+
+    .dot {
+        background-color: var(--accent-light);
+        z-index: 0;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .handle:hover .tip,
+    .track.dragging .tip {
+        display: block;
+    }
+
+    .track.dragging,
+    .track.dragging .handle {
+        cursor: grabbing;
+    }
+
+    .track.dragging .handle {
+        box-shadow: 0 0 0 3px var(--accent-light);
+    }
+</style>

package/dist/components/Slider/Slider.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        min: number;
+        max: number;
+        value: number;
+        step?: number | undefined;
+        disabled?: boolean | undefined;
+        dots?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<number>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+export default class Slider extends SvelteComponent<SliderProps, SliderEvents, SliderSlots> {
+}
+export {};

package/dist/components/index.d.ts

@@ -27,6 +27,7 @@ export { default as Modal } from './Modal/Modal.svelte';
 export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
+export { default as Slider } from './Slider/Slider.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';
 export { default as Switch } from './Switch/Switch.svelte';
 export { default as Table } from './Table/Table.svelte';

package/dist/components/index.js

@@ -27,6 +27,7 @@ export { default as Modal } from './Modal/Modal.svelte';
 export { confirm } from './Modal/confirm.js';
 export { default as NavLink } from './NavLink/NavLink.svelte';
 export { default as Radio } from './Radio/Radio.svelte';
+export { default as Slider } from './Slider/Slider.svelte';
 export { default as SplitControl } from './SplitControl/SplitControl.svelte';
 export { default as Switch } from './Switch/Switch.svelte';
 export { default as Table } from './Table/Table.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hyvor/design",
-    "version": "0.0.63",
+    "version": "0.0.66",
     "license": "MIT",
     "private": false,
     "scripts": {