feat: migrate to svelte 5
Some checks failed
Deploy to GitHub Pages / build_site (push) Failing after 1m15s
Some checks failed
Deploy to GitHub Pages / build_site (push) Failing after 1m15s
This commit is contained in:
@ -1,17 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Hst } from "@histoire/plugin-svelte";
|
||||
export let Hst: Hst;
|
||||
import Checkbox from "./ShortCut.svelte";
|
||||
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||
import StorySettings from "$lib/helpers/StorySettings.svelte";
|
||||
let theme = "dark";
|
||||
</script>
|
||||
|
||||
<Hst.Story>
|
||||
<StoryContent {theme}>
|
||||
<Checkbox ctrl alt key={"del"} />
|
||||
</StoryContent>
|
||||
<svelte:fragment slot="controls">
|
||||
<StorySettings bind:theme />
|
||||
</svelte:fragment>
|
||||
</Hst.Story>
|
@ -1,17 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Hst } from "@histoire/plugin-svelte";
|
||||
export let Hst: Hst;
|
||||
import Checkbox from "./Checkbox.svelte";
|
||||
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||
import StorySettings from "$lib/helpers/StorySettings.svelte";
|
||||
let theme = "dark";
|
||||
</script>
|
||||
|
||||
<Hst.Story>
|
||||
<StoryContent {theme}>
|
||||
<Checkbox value={false} />
|
||||
</StoryContent>
|
||||
<svelte:fragment slot="controls">
|
||||
<StorySettings bind:theme />
|
||||
</svelte:fragment>
|
||||
</Hst.Story>
|
@ -1,17 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Hst } from "@histoire/plugin-svelte";
|
||||
export let Hst: Hst;
|
||||
import Float from "./Float.svelte";
|
||||
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||
import StorySettings from "$lib/helpers/StorySettings.svelte";
|
||||
let theme = "dark";
|
||||
</script>
|
||||
|
||||
<Hst.Story>
|
||||
<StoryContent {theme}>
|
||||
<Float value={0} min={0} max={6.9} />
|
||||
</StoryContent>
|
||||
<svelte:fragment slot="controls">
|
||||
<StorySettings bind:theme />
|
||||
</svelte:fragment>
|
||||
</Hst.Story>
|
@ -1,192 +1,189 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let value = 0.5;
|
||||
export let step = 0.01;
|
||||
export let min = 0;
|
||||
export let max = 1;
|
||||
export let id = "";
|
||||
export let value = 0.5;
|
||||
export let step = 0.01;
|
||||
export let min = 0;
|
||||
export let max = 1;
|
||||
export let id = '';
|
||||
|
||||
if (min > max) {
|
||||
[min, max] = [max, min];
|
||||
}
|
||||
if (value > max) {
|
||||
max = value;
|
||||
}
|
||||
if (min > max) {
|
||||
[min, max] = [max, min];
|
||||
}
|
||||
if (value > max) {
|
||||
max = value;
|
||||
}
|
||||
|
||||
function strip(input: number) {
|
||||
return +parseFloat(input + "").toPrecision(2);
|
||||
}
|
||||
function strip(input: number) {
|
||||
return +parseFloat(input + '').toPrecision(2);
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let inputEl: HTMLInputElement;
|
||||
let inputEl: HTMLInputElement;
|
||||
|
||||
$: if ((value || 0).toString().length > 5) {
|
||||
value = strip(value || 0);
|
||||
}
|
||||
$: value !== undefined && handleChange();
|
||||
let oldValue: number;
|
||||
function handleChange() {
|
||||
if (value === oldValue) return;
|
||||
oldValue = value;
|
||||
dispatch("change", parseFloat(value + ""));
|
||||
}
|
||||
$: if ((value || 0).toString().length > 5) {
|
||||
value = strip(value || 0);
|
||||
}
|
||||
$: value !== undefined && handleChange();
|
||||
let oldValue: number;
|
||||
function handleChange() {
|
||||
if (value === oldValue) return;
|
||||
oldValue = value;
|
||||
dispatch('change', parseFloat(value + ''));
|
||||
}
|
||||
|
||||
$: width = Number.isFinite(value)
|
||||
? Math.max((value?.toString().length ?? 1) * 8, 50) + "px"
|
||||
: "20px";
|
||||
$: width = Number.isFinite(value)
|
||||
? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px'
|
||||
: '20px';
|
||||
|
||||
let isMouseDown = false;
|
||||
/* let downX = 0; */
|
||||
/* let downY = 0; */
|
||||
let downV = 0;
|
||||
let vx = 0;
|
||||
/* let vy = 0; */
|
||||
let rect: DOMRect;
|
||||
let isMouseDown = false;
|
||||
/* let downX = 0; */
|
||||
/* let downY = 0; */
|
||||
let downV = 0;
|
||||
let vx = 0;
|
||||
/* let vy = 0; */
|
||||
let rect: DOMRect;
|
||||
|
||||
function handleMouseDown(ev: MouseEvent) {
|
||||
ev.preventDefault();
|
||||
function handleMouseDown(ev: MouseEvent) {
|
||||
ev.preventDefault();
|
||||
|
||||
inputEl.focus();
|
||||
inputEl.focus();
|
||||
|
||||
isMouseDown = true;
|
||||
isMouseDown = true;
|
||||
|
||||
downV = value;
|
||||
/* downX = ev.clientX; */
|
||||
/* downY = ev.clientY; */
|
||||
rect = inputEl.getBoundingClientRect();
|
||||
downV = value;
|
||||
/* downX = ev.clientX; */
|
||||
/* downY = ev.clientY; */
|
||||
rect = inputEl.getBoundingClientRect();
|
||||
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
window.addEventListener("mouseup", handleMouseUp);
|
||||
document.body.style.cursor = "ew-resize";
|
||||
}
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
document.body.style.cursor = 'ew-resize';
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
isMouseDown = false;
|
||||
function handleMouseUp() {
|
||||
isMouseDown = false;
|
||||
|
||||
if (downV === value) {
|
||||
inputEl.focus();
|
||||
}
|
||||
if (downV === value) {
|
||||
inputEl.focus();
|
||||
}
|
||||
|
||||
if (value > max) {
|
||||
max = value;
|
||||
}
|
||||
if (value > max) {
|
||||
max = value;
|
||||
}
|
||||
|
||||
if (value < min) {
|
||||
min = value;
|
||||
}
|
||||
if (value < min) {
|
||||
min = value;
|
||||
}
|
||||
|
||||
// setTimeout(() => {
|
||||
// if (value >= 0) {
|
||||
// max = getBoundingValue(value);
|
||||
// min = 0;
|
||||
// } else {
|
||||
// min = getBoundingValue(value);
|
||||
// max = 0;
|
||||
// }
|
||||
// }, 500);
|
||||
// setTimeout(() => {
|
||||
// if (value >= 0) {
|
||||
// max = getBoundingValue(value);
|
||||
// min = 0;
|
||||
// } else {
|
||||
// min = getBoundingValue(value);
|
||||
// max = 0;
|
||||
// }
|
||||
// }, 500);
|
||||
|
||||
document.body.style.cursor = "unset";
|
||||
window.removeEventListener("mouseup", handleMouseUp);
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
}
|
||||
document.body.style.cursor = 'unset';
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
}
|
||||
|
||||
function handleKeyDown(ev: KeyboardEvent) {
|
||||
if (ev.key === "Escape" || ev.key === "Enter") {
|
||||
handleMouseUp();
|
||||
inputEl.blur();
|
||||
}
|
||||
}
|
||||
function handleKeyDown(ev: KeyboardEvent) {
|
||||
if (ev.key === 'Escape' || ev.key === 'Enter') {
|
||||
handleMouseUp();
|
||||
inputEl.blur();
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(ev: MouseEvent) {
|
||||
vx = (ev.clientX - rect.left) / rect.width;
|
||||
/* vy = ev.clientY - downY; */
|
||||
function handleMouseMove(ev: MouseEvent) {
|
||||
vx = (ev.clientX - rect.left) / rect.width;
|
||||
/* vy = ev.clientY - downY; */
|
||||
|
||||
if (ev.ctrlKey) {
|
||||
let v = min + (max - min) * vx;
|
||||
value = v;
|
||||
} else {
|
||||
value = Math.max(Math.min(min + (max - min) * vx, max), min);
|
||||
}
|
||||
}
|
||||
if (ev.ctrlKey) {
|
||||
let v = min + (max - min) * vx;
|
||||
value = v;
|
||||
} else {
|
||||
value = Math.max(Math.min(min + (max - min) * vx, max), min);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="component-wrapper" class:is-down={isMouseDown}>
|
||||
<span
|
||||
class="overlay"
|
||||
style={`width: ${((value - min) / (max - min)) * 100}%`}
|
||||
/>
|
||||
<input
|
||||
bind:value
|
||||
bind:this={inputEl}
|
||||
{id}
|
||||
{step}
|
||||
{max}
|
||||
{min}
|
||||
on:keydown={handleKeyDown}
|
||||
on:mousedown={handleMouseDown}
|
||||
on:mouseup={handleMouseUp}
|
||||
type="number"
|
||||
style={`width:${width};`}
|
||||
/>
|
||||
<span class="overlay" style={`width: ${((value - min) / (max - min)) * 100}%`}></span>
|
||||
<input
|
||||
bind:value
|
||||
bind:this={inputEl}
|
||||
{id}
|
||||
{step}
|
||||
{max}
|
||||
{min}
|
||||
on:keydown={handleKeyDown}
|
||||
on:mousedown={handleMouseDown}
|
||||
on:mouseup={handleMouseUp}
|
||||
type="number"
|
||||
style={`width:${width};`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.component-wrapper {
|
||||
position: relative;
|
||||
background-color: var(--layer-2, #4b4b4b);
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
border: solid 1px var(--outline);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius, 2px);
|
||||
}
|
||||
.component-wrapper {
|
||||
position: relative;
|
||||
background-color: var(--layer-2, #4b4b4b);
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
border: solid 1px var(--outline);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius, 2px);
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type='number']::-webkit-inner-spin-button,
|
||||
input[type='number']::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
font-family: var(--font-family);
|
||||
font-variant-numeric: tabular-nums;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
background-color: transparent;
|
||||
padding: var(--padding, 6px);
|
||||
font-size: 1em;
|
||||
padding-inline: 10px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-style: none;
|
||||
min-width: 100%;
|
||||
}
|
||||
input[type='number'] {
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
font-family: var(--font-family);
|
||||
font-variant-numeric: tabular-nums;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
background-color: transparent;
|
||||
padding: var(--padding, 6px);
|
||||
font-size: 1em;
|
||||
padding-inline: 10px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-style: none;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.is-down > input {
|
||||
cursor: ew-resize !important;
|
||||
}
|
||||
.is-down > input {
|
||||
cursor: ew-resize !important;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--text-color);
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--text-color);
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.is-down > .overlay {
|
||||
transition: none !important;
|
||||
}
|
||||
.is-down > .overlay {
|
||||
transition: none !important;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,24 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Hst } from "@histoire/plugin-svelte";
|
||||
export let Hst: Hst;
|
||||
import Integer from "./Integer.svelte";
|
||||
import StorySettings from "../helpers/StorySettings.svelte";
|
||||
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||
|
||||
let theme = "dark";
|
||||
</script>
|
||||
|
||||
<Hst.Story>
|
||||
<StoryContent {theme}>
|
||||
<Integer value={5} min={0} max={42} />
|
||||
</StoryContent>
|
||||
<svelte:fragment slot="controls">
|
||||
<StorySettings bind:theme />
|
||||
</svelte:fragment>
|
||||
</Hst.Story>
|
||||
|
||||
<style>
|
||||
div {
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
@ -1,18 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Hst } from "@histoire/plugin-svelte";
|
||||
export let Hst: Hst;
|
||||
import Select from "./Select.svelte";
|
||||
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||
import StorySettings from "$lib/helpers/StorySettings.svelte";
|
||||
|
||||
let theme = "dark";
|
||||
</script>
|
||||
|
||||
<Hst.Story>
|
||||
<StoryContent {theme}>
|
||||
<Select id="" options={["strawberry", "apple", "banana"]} />
|
||||
</StoryContent>
|
||||
<svelte:fragment slot="controls">
|
||||
<StorySettings bind:theme />
|
||||
</svelte:fragment>
|
||||
</Hst.Story>
|
@ -1,18 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Hst } from "@histoire/plugin-svelte";
|
||||
export let Hst: Hst;
|
||||
import Vec3 from "./Vec3.svelte";
|
||||
import StoryContent from "$lib/helpers/StoryContent.svelte";
|
||||
import StorySettings from "$lib/helpers/StorySettings.svelte";
|
||||
|
||||
let theme = "dark";
|
||||
</script>
|
||||
|
||||
<Hst.Story>
|
||||
<StoryContent {theme}>
|
||||
<Vec3 value={[0.2, 0.4, 0.6]} />
|
||||
</StoryContent>
|
||||
<svelte:fragment slot="controls">
|
||||
<StorySettings bind:theme />
|
||||
</svelte:fragment>
|
||||
</Hst.Story>
|
@ -1,24 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let theme = "dark";
|
||||
|
||||
$: if (theme !== undefined) {
|
||||
const classes = document.body.classList;
|
||||
const newClassName = `theme-${theme}`;
|
||||
for (const className of classes) {
|
||||
if (className.startsWith("theme-") && className !== newClassName) {
|
||||
classes.remove(className);
|
||||
}
|
||||
}
|
||||
document.body.classList.add(newClassName);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
@ -1,31 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Select } from "$lib/index.js";
|
||||
|
||||
const themes = [
|
||||
"dark",
|
||||
"light",
|
||||
"catppuccin",
|
||||
"solarized",
|
||||
"high-contrast",
|
||||
"nord",
|
||||
"dracula",
|
||||
];
|
||||
|
||||
let value = 0;
|
||||
export let theme = themes[value];
|
||||
$: theme = themes[value];
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<label for="theme-select"> Select Theme </label>
|
||||
<Select id="" bind:value options={themes} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user