@hyvor/design 0.0.66 → 0.0.68

package/dist/components/NavLink/NavLink.svelte

@@ -3,93 +3,85 @@ export let active = false;
 export let disabled = false;
 </script>
 
-<a 
-    {href}
-    class:active={active}
-    class:disabled={disabled}
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
+<a
+	{href}
+	class:active
+	class:disabled
+	on:keyup
+	on:keydown
+	on:keypress
+	on:focus
+	on:blur
+	on:click
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:change
 >
-
-
-
-    {#if $$slots.start}
-        <span class="start">
-            <slot name="start" />
-        </span>
-    {/if}
-
-    <span class="middle">
-        <slot />
-    </span>
-    
-    {#if $$slots.end}
-        <span class="end">
-            <slot name="end" />
-        </span>
-    {/if}
+	{#if $$slots.start}
+		<span class="start">
+			<slot name="start" />
+		</span>
+	{/if}
+
+	<span class="middle">
+		<slot />
+	</span>
+
+	{#if $$slots.end}
+		<span class="end">
+			<slot name="end" />
+		</span>
+	{/if}
 </a>
 
-
 <style>
-
-    a {
-        display: flex;
-        padding: 12px 29px;
-        font-size: 14px;
-        letter-spacing: .3px;
-        border-left: 3px solid transparent;
-        cursor: pointer;
-        align-items: center; 
-    }
-
-    a:hover {
-        background-color: var(--hover);
-    
-    }
-
-    a.active {
-        background-color: var(--accent-lightest);
-        border-left: 3px solid var(--accent);
-    }
-
-    a.disabled {
-        cursor: not-allowed;
-        opacity: .5;
-
-        /* hover */
-        background-color: transparent;
-        
-    }
-
-    .start, .middle, .end {
-        display: inline-flex;
-        align-items: center;
-    }
-
-    .middle {
-        flex: 1;
-         /* display: flex;  */
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    
-    .start {
-        margin-right: 8px;
-        
-    }
-
-    .end {
-        margin-left: 8px;
-    }
-
-
-</style>
+	a {
+		display: flex;
+		padding: 12px 29px;
+		font-size: 14px;
+		letter-spacing: 0.3px;
+		border-left: 3px solid transparent;
+		cursor: pointer;
+		align-items: center;
+	}
+
+	a:hover {
+		background-color: var(--hover);
+	}
+
+	a.active {
+		background-color: var(--accent-lightest);
+		border-left: 3px solid var(--accent);
+	}
+
+	a.disabled {
+		cursor: not-allowed;
+		pointer-events: none;
+		opacity: 0.5;
+		/* hover */
+		background-color: transparent;
+	}
+
+	.start,
+	.middle,
+	.end {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.middle {
+		flex: 1;
+		/* display: flex;  */
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.start {
+		margin-right: 8px;
+	}
+
+	.end {
+		margin-left: 8px;
+	}
+</style>

package/dist/components/Radio/Radio.svelte

@@ -4,39 +4,31 @@ export let disabled = false;
 export let input = {};
 </script>
 
-<label
-    class:disabled={disabled}
->
-
-    <input
-        type="radio"
-        disabled={disabled}
-        bind:group
-        bind:this={input}
-        {value}
-
-
-        on:keyup
-        on:keydown
-        on:keypress
-        on:focus
-        on:blur
-        on:click
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-        on:change
-
-        {...$$restProps}
-    />
-
-    <span class="checkmark"></span>
-
-    <slot />
-
+<label class:disabled>
+	<input
+		type="radio"
+		{disabled}
+		bind:group
+		bind:this={input}
+		{value}
+		on:keyup
+		on:keydown
+		on:keypress
+		on:focus
+		on:blur
+		on:click
+		on:mouseover
+		on:mouseenter
+		on:mouseleave
+		on:change
+		{...$$restProps}
+	/>
+
+	<span class="checkmark"></span>
+
+	<slot />
 </label>
 
-
 <style>label {
   position: relative;
   padding-left: 30px;

package/dist/components/Slider/Slider.svelte

@@ -3,7 +3,6 @@ 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) {
@@ -36,93 +35,85 @@ function handleMousemove(event) {
 </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>
+	<!-- 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>
+		{#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;
+	.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;
+		/* from Tooltip */
+		--local-bg: #24292f;
+		--local-color: #fff;
 
-        background-color: var(--local-bg);
-        color: var(--local-color);
-        display: none;
-    }
+		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%);
-    }
+	.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;
-    }
+	.handle:hover .tip,
+	.track.dragging .tip {
+		display: block;
+	}
 
-    .track.dragging,
-    .track.dragging .handle {
-        cursor: grabbing;
-    }
+	.track.dragging,
+	.track.dragging .handle {
+		cursor: grabbing;
+	}
 
-    .track.dragging .handle {
-        box-shadow: 0 0 0 3px var(--accent-light);
-    }
+	.track.dragging .handle {
+		box-shadow: 0 0 0 3px var(--accent-light);
+	}
 </style>

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

@@ -5,7 +5,6 @@ declare const __propDef: {
         max: number;
         value: number;
         step?: number | undefined;
-        disabled?: boolean | undefined;
         dots?: boolean | undefined;
     };
     events: {

package/dist/components/SplitControl/SplitControl.svelte

@@ -6,52 +6,38 @@ export let column = false;
 export let flex = [1, 2];
 </script>
 
+<div class="split-control" class:has-nested={$$slots.nested} class:column>
+	<div class="left" style:flex={flex[0]}>
+		<div class="label-wrap">
+			{#if $$slots.label}
+				<slot name="label" />
+			{:else}
+				<Label>{label}</Label>
+			{/if}
+		</div>
 
-<div 
-    class="split-control" 
-    class:has-nested={$$slots.nested}
-    class:column={column}
->
-
-    <div 
-        class="left"
-        style:flex={flex[0]}
-    >
-
-        <div class="label-wrap">
-            {#if $$slots.label}
-                <slot name="label" />
-            {:else}
-                <Label>{label}</Label>
-            {/if}
-        </div>
-
-        {#if $$slots.caption || caption}
-            <div class="caption-wrap">
-                {#if $$slots.caption}
-                    <slot name="caption" />
-                {:else if caption}
-                    <Caption>{caption}</Caption>
-                {/if}
-            </div>
-        {/if}
-    </div>
-
-    {#if $$slots.default}
-        <div 
-            class="right"
-            style:flex={flex[1]}
-        >
-            <slot></slot>
-        </div>
-    {/if}
+		{#if $$slots.caption || caption}
+			<div class="caption-wrap">
+				{#if $$slots.caption}
+					<slot name="caption" />
+				{:else if caption}
+					<Caption>{caption}</Caption>
+				{/if}
+			</div>
+		{/if}
+	</div>
 
+	{#if $$slots.default}
+		<div class="right" style:flex={flex[1]}>
+			<slot></slot>
+		</div>
+	{/if}
 </div>
 
 {#if $$slots.nested}
-    <div class="nested">
-        <slot name="nested"></slot>
-    </div>
+	<div class="nested">
+		<slot name="nested"></slot>
+	</div>
 {/if}
 
 <style>.split-control {
@@ -89,4 +75,4 @@ export let flex = [1, 2];
 
 .caption-wrap {
   margin-top: 4px;
-}</style>
+}</style>

package/dist/components/Switch/Switch.svelte

@@ -3,60 +3,55 @@ export let input = {};
 </script>
 
 <label class="switch-wrap">
-    <span class="switch">
-        <input 
-            type="checkbox" 
-            bind:checked
-            bind:this={input}
-            {...$$restProps} 
-            
-            on:keyup
-            on:keydown
-            on:keypress
-            on:focus
-            on:blur
-            on:click
-            on:mouseover
-            on:mouseenter
-            on:mouseleave
-            on:change
-        />
-        <span class="slider"></span>
-
-        
-    </span>
-    {#if $$slots.default}
-        <span class="message">
-            <slot />
-        </span>
-    {/if}
+	<span class="switch">
+		<input
+			type="checkbox"
+			bind:checked
+			bind:this={input}
+			{...$$restProps}
+			on:keyup
+			on:keydown
+			on:keypress
+			on:focus
+			on:blur
+			on:click
+			on:mouseover
+			on:mouseenter
+			on:mouseleave
+			on:change
+		/>
+		<span class="slider"></span>
+	</span>
+	{#if $$slots.default}
+		<span class="message">
+			<slot />
+		</span>
+	{/if}
 </label>
 
 <style>
+	.switch-wrap {
+		display: inline-flex;
+		align-items: center;
+		cursor: pointer;
+	}
 
-    .switch-wrap {
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-    }
+	.message {
+		margin-left: 8px;
+	}
 
-    .message {
-        margin-left: 8px;
-    }
+	.switch {
+		position: relative;
+		display: inline-block;
+		width: 40px;
+		height: 24px;
+		vertical-align: middle;
+	}
 
-    .switch {
-        position: relative;
-        display: inline-block;
-        width:40px;
-		height:24px;
-        vertical-align: middle;
-    }
-	
 	input {
-        opacity: 0;
+		opacity: 0;
 	}
 
-
 	.slider {
 		position: absolute;
 		cursor: pointer;
@@ -65,41 +60,41 @@ export let input = {};
 		right: 0;
 		bottom: 0;
 		background-color: var(--input);
-		transition: .2s;
+		transition: 0.2s;
 		border-radius: 30px;
 	}
 
-    .slider:hover {
-        box-shadow: 0 0 0 2px var(--accent-light);
-    }
-	
+	.slider:hover {
+		box-shadow: 0 0 0 2px var(--accent-light);
+	}
+
 	.slider:before {
 		position: absolute;
-		content: "";
+		content: '';
 		border-radius: 50%;
 		background-color: var(--accent-text);
-		transition: .1s;
-        width:18px;
-        height:18px;
-        left:3px;
-        top:3px;
-        bottom:3px;
+		transition: 0.1s;
+		width: 18px;
+		height: 18px;
+		left: 3px;
+		top: 3px;
+		bottom: 3px;
 	}
-	
+
 	input:checked + .slider {
 		background-color: var(--accent);
 	}
-	
+
 	input:focus-visible + .slider {
 		box-shadow: 0 0 0 3px var(--accent-light);
 	}
 
-    .switch:active .slider, input:active + .slider {
-        box-shadow: 0 0 0 3px var(--accent-light);
-    }
-	
+	.switch:active .slider,
+	input:active + .slider {
+		box-shadow: 0 0 0 3px var(--accent-light);
+	}
+
 	input:checked + .slider:before {
 		transform: translateX(16px);
 	}
-
-</style>
+</style>