feat: migrate to svelte 5
Some checks failed
Deploy to GitHub Pages / build_site (push) Failing after 1m15s

This commit is contained in:
2024-04-30 14:20:12 +02:00
parent eafc9c99c8
commit c5a270f67a
43 changed files with 932 additions and 55714 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>