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:
parent
eafc9c99c8
commit
c5a270f67a
@ -2,6 +2,8 @@
|
|||||||
|
|
||||||
The basic idea of nodarium is to use the advantages of WebAssembly to create a performant, secure and extandable visual programming language.
|
The basic idea of nodarium is to use the advantages of WebAssembly to create a performant, secure and extandable visual programming language.
|
||||||
|
|
||||||
|
The visual programming language consists of so called `Nodes` which are stored and distributed as single `.wasm` files. Each `node` receives some arguments and generates some output.
|
||||||
|
|
||||||
## What is a node?
|
## What is a node?
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
|
|||||||
@ -13,9 +13,8 @@
|
|||||||
"@nodes/ui": "link:../packages/ui",
|
"@nodes/ui": "link:../packages/ui",
|
||||||
"@nodes/utils": "link:../packages/utils",
|
"@nodes/utils": "link:../packages/utils",
|
||||||
"@sveltejs/kit": "^2.5.7",
|
"@sveltejs/kit": "^2.5.7",
|
||||||
"@threlte/core": "^7.3.0",
|
"@threlte/core": "next",
|
||||||
"@threlte/extras": "^8.11.2",
|
"@threlte/extras": "next",
|
||||||
"@threlte/flex": "^1.0.2",
|
|
||||||
"@types/three": "^0.164.0",
|
"@types/three": "^0.164.0",
|
||||||
"@unocss/reset": "^0.59.4",
|
"@unocss/reset": "^0.59.4",
|
||||||
"comlink": "^4.4.1",
|
"comlink": "^4.4.1",
|
||||||
@ -26,14 +25,11 @@
|
|||||||
"@iconify-json/tabler": "^1.1.110",
|
"@iconify-json/tabler": "^1.1.110",
|
||||||
"@nodes/types": "link:../packages/types",
|
"@nodes/types": "link:../packages/types",
|
||||||
"@sveltejs/adapter-static": "^3.0.1",
|
"@sveltejs/adapter-static": "^3.0.1",
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.1.0",
|
"@sveltejs/vite-plugin-svelte": "next",
|
||||||
"@tsconfig/svelte": "^5.0.4",
|
"@tsconfig/svelte": "^5.0.4",
|
||||||
"@unocss/preset-icons": "^0.59.4",
|
"@unocss/preset-icons": "^0.59.4",
|
||||||
"@zerodevx/svelte-json-view": "^1.0.9",
|
"svelte": "5.0.0-next.118",
|
||||||
"internal-ip": "^8.0.0",
|
|
||||||
"svelte": "^4.2.15",
|
|
||||||
"svelte-check": "^3.7.0",
|
"svelte-check": "^3.7.0",
|
||||||
"three-inspect": "^0.4.5",
|
|
||||||
"tslib": "^2.6.2",
|
"tslib": "^2.6.2",
|
||||||
"typescript": "^5.4.5",
|
"typescript": "^5.4.5",
|
||||||
"unocss": "^0.59.4",
|
"unocss": "^0.59.4",
|
||||||
@ -41,6 +37,6 @@
|
|||||||
"vite-plugin-comlink": "^4.0.3",
|
"vite-plugin-comlink": "^4.0.3",
|
||||||
"vite-plugin-glsl": "^1.3.0",
|
"vite-plugin-glsl": "^1.3.0",
|
||||||
"vite-plugin-wasm": "^3.3.0",
|
"vite-plugin-wasm": "^3.3.0",
|
||||||
"vitest": "^1.5.2"
|
"vitest": "^1.5.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -183,83 +183,101 @@
|
|||||||
{#if data.length !== 0}
|
{#if data.length !== 0}
|
||||||
<h3>General</h3>
|
<h3>General</h3>
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>
|
|
||||||
{round(getTotalPerformance(!showAverage))}<span>ms</span>
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class:active={$activeType === "total"}
|
|
||||||
on:click={() => ($activeType = "total")}
|
|
||||||
>
|
|
||||||
total<span
|
|
||||||
>({Math.floor(1000 / getTotalPerformance(showAverage))}fps)</span
|
|
||||||
>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{#each getPerformanceData(!showAverage) as [key, value]}
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
{round(value)}<span>ms</span>
|
{round(getTotalPerformance(!showAverage))}<span>ms</span>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class:active={$activeType === key}
|
class:active={$activeType === "total"}
|
||||||
on:click={() => ($activeType = key)}
|
on:click={() => ($activeType = "total")}
|
||||||
>
|
>
|
||||||
{key}
|
total<span
|
||||||
|
>({Math.floor(
|
||||||
|
1000 / getTotalPerformance(showAverage),
|
||||||
|
)}fps)</span
|
||||||
|
>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{#each getPerformanceData(!showAverage) as [key, value]}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
{round(value)}<span>ms</span>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class:active={$activeType === key}
|
||||||
|
on:click={() => ($activeType = key)}
|
||||||
|
>
|
||||||
|
{key}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>{data.length}</td>
|
<td>{data.length}</td>
|
||||||
<td>Samples</td>
|
<td>Samples</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
</tbody>
|
||||||
<h3>Nodes</h3>
|
<tbody>
|
||||||
<tr>
|
|
||||||
<td> {getCacheRatio(!showAverage)}<span>%</span> </td>
|
|
||||||
<td
|
|
||||||
class:active={$activeType === "cache-hit"}
|
|
||||||
on:click={() => ($activeType = "cache-hit")}>cache hits</td
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
{#each getNodePerformanceData(!showAverage) as [key, value]}
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
{round(value)}<span>ms</span>
|
<h3>Nodes</h3>
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class:active={$activeType === key}
|
|
||||||
on:click={() => ($activeType = key)}
|
|
||||||
>
|
|
||||||
{key.split("/").slice(-1).join("/")}
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
</tbody>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td> {getCacheRatio(!showAverage)}<span>%</span> </td>
|
||||||
|
<td
|
||||||
|
class:active={$activeType === "cache-hit"}
|
||||||
|
on:click={() => ($activeType = "cache-hit")}>cache hits</td
|
||||||
|
>
|
||||||
|
</tr>
|
||||||
|
{#each getNodePerformanceData(!showAverage) as [key, value]}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
{round(value)}<span>ms</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
<h3>Viewer</h3>
|
<td
|
||||||
<tr>
|
class:active={$activeType === key}
|
||||||
<td>{humanizeNumber(getLast("total-vertices"))}</td>
|
on:click={() => ($activeType = key)}
|
||||||
<td>Vertices</td>
|
>
|
||||||
</tr>
|
{key.split("/").slice(-1).join("/")}
|
||||||
<tr>
|
</td>
|
||||||
<td>{humanizeNumber(getLast("total-faces"))}</td>
|
</tr>
|
||||||
<td>Faces</td>
|
{/each}
|
||||||
</tr>
|
</tbody>
|
||||||
{#each getViewerPerformanceData(!showAverage) as [key, value]}
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
{round(value)}<span>ms</span>
|
<h3>Viewer</h3>
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class:active={$activeType === key}
|
|
||||||
on:click={() => ($activeType = key)}
|
|
||||||
>
|
|
||||||
{key.split("/").slice(-1).join("/")}
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
</tbody>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>{humanizeNumber(getLast("total-vertices"))}</td>
|
||||||
|
<td>Vertices</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>{humanizeNumber(getLast("total-faces"))}</td>
|
||||||
|
<td>Faces</td>
|
||||||
|
</tr>
|
||||||
|
{#each getViewerPerformanceData(!showAverage) as [key, value]}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
{round(value)}<span>ms</span>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class:active={$activeType === key}
|
||||||
|
on:click={() => ($activeType = key)}
|
||||||
|
>
|
||||||
|
{key.split("/").slice(-1).join("/")}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{:else}
|
{:else}
|
||||||
<p>No runs available</p>
|
<p>No runs available</p>
|
||||||
|
|||||||
@ -13,6 +13,6 @@
|
|||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"zod": "^3.23.4"
|
"zod": "^3.23.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,7 +4,8 @@ module.exports = {
|
|||||||
extends: [
|
extends: [
|
||||||
'eslint:recommended',
|
'eslint:recommended',
|
||||||
'plugin:@typescript-eslint/recommended',
|
'plugin:@typescript-eslint/recommended',
|
||||||
'plugin:svelte/recommended'
|
'plugin:svelte/recommended',
|
||||||
|
'prettier'
|
||||||
],
|
],
|
||||||
parser: '@typescript-eslint/parser',
|
parser: '@typescript-eslint/parser',
|
||||||
plugins: ['@typescript-eslint'],
|
plugins: ['@typescript-eslint'],
|
||||||
|
|||||||
16
packages/ui/.histoire/dist/__sandbox.html
vendored
16
packages/ui/.histoire/dist/__sandbox.html
vendored
@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Histoire</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<link rel="stylesheet" href="/assets/style-D55TbI9c.css">
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/assets/bundle-sandbox-CSn-Rucl.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import { _ as _export_sfc } from "./MobileOverlay.vue2-BRmV4xb2.js";
|
|
||||||
import { o as openBlock, b as createElementBlock, aF as renderSlot } from "./vendor-BCKkA27H.js";
|
|
||||||
const _sfc_main = {};
|
|
||||||
const _hoisted_1 = { class: "histoire-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400 htw-text-lg" };
|
|
||||||
function _sfc_render(_ctx, _cache) {
|
|
||||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
||||||
renderSlot(_ctx.$slots, "default", {}, void 0, true)
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
const BaseEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c5ecfead"]]);
|
|
||||||
export {
|
|
||||||
BaseEmpty as B
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,102 +0,0 @@
|
|||||||
import { h as histoireConfig, c as customLogos } from "./GenericMountStory.vue2-BX48YWx2.js";
|
|
||||||
import { u as useStoryStore } from "./story--eZPzd9h.js";
|
|
||||||
import { d as defineComponent, o as openBlock, b as createElementBlock, e as createVNode, g as unref, I as Icon, f as createBaseVNode, t as toDisplayString, c as computed } from "./vendor-BCKkA27H.js";
|
|
||||||
const HistoireLogo = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3c!--%20Created%20with%20Inkscape%20(http://www.inkscape.org/)%20--%3e%3csvg%20width='512'%20height='512'%20viewBox='0%200%20512%20512'%20version='1.1'%20id='svg5'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs2'%20/%3e%3cg%20id='layer1'%3e%3crect%20style='opacity:0.5;fill:%2334d399;fill-opacity:1;stroke-width:1.00375'%20id='rect1372'%20width='314.30923'%20height='406.60901'%20x='-26.565063'%20y='134.75079'%20transform='rotate(-23.821262)'%20ry='8'%20/%3e%3crect%20style='fill:%2334d399;fill-opacity:1;stroke-width:1.00375'%20id='rect850'%20width='314.30923'%20height='406.60901'%20x='77.571838'%20y='72.808708'%20ry='8'%20transform='rotate(-4.5744534)'%20/%3e%3c/g%3e%3cg%20id='layer3'%3e%3cpath%20id='path1657-3'%20style='display:inline;fill:%23b4fae2;fill-opacity:1;stroke:%23b4fae2;stroke-width:8.34923;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%20d='M%20359.38947,355.95134%20320.72935,176.52942%20238.34613,238.94118%20Z%20M%20273.64124,273.06608%20152.59788,156.05591%20191.25804,335.47786%20Z'%20/%3e%3c/g%3e%3cg%20id='layer2'%20style='display:none'%3e%3cpath%20id='path1657'%20style='fill:%23b4fae2;fill-opacity:1;stroke:%23b4fae2;stroke-width:8;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1'%20d='m%20296,103.98242%20-135.53125,177.9668%20h%2088.70117%20z%20M%20262.83008,230.05078%20216,408.01758%20351.53125,230.05078%20Z'%20transform='rotate(-4.156553,256,256.00691)'%20/%3e%3c/g%3e%3c/svg%3e";
|
|
||||||
const _hoisted_1$1 = { class: "htw-p-2 htw-flex htw-items-center htw-gap-x-2" };
|
|
||||||
const _hoisted_2$1 = { class: "htw-flex htw-flex-col htw-leading-none" };
|
|
||||||
const _hoisted_3$1 = { class: "htw-text-primary-500 htw-min-w-[80px] htw-font-bold" };
|
|
||||||
const _hoisted_4 = { class: "htw-text-sm htw-text-gray-900 dark:htw-text-gray-100" };
|
|
||||||
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
||||||
__name: "HomeCounter",
|
|
||||||
props: {
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: "carbon:cube"
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ""
|
|
||||||
},
|
|
||||||
count: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setup(__props) {
|
|
||||||
const props = __props;
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
||||||
createVNode(unref(Icon), {
|
|
||||||
icon: props.icon,
|
|
||||||
class: "htw-text-2xl htw-text-gray-700 dark:htw-text-gray-300 htw-flex-none"
|
|
||||||
}, null, 8, ["icon"]),
|
|
||||||
createBaseVNode("div", _hoisted_2$1, [
|
|
||||||
createBaseVNode("span", _hoisted_3$1, toDisplayString(__props.count), 1),
|
|
||||||
createBaseVNode("span", _hoisted_4, toDisplayString(__props.title), 1)
|
|
||||||
])
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const _hoisted_1 = { class: "histoire-home-view htw-flex md:htw-flex-col htw-gap-12 htw-items-center htw-justify-center htw-h-full" };
|
|
||||||
const _hoisted_2 = ["src"];
|
|
||||||
const _hoisted_3 = { class: "htw-flex !md:htw-flex-col htw-flex-wrap htw-justify-evenly htw-gap-2 htw-px-4 htw-py-2 htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded htw-border htw-border-gray-500/30" };
|
|
||||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
||||||
__name: "HomeView",
|
|
||||||
setup(__props) {
|
|
||||||
const logoUrl = computed(() => {
|
|
||||||
var _a, _b;
|
|
||||||
return ((_b = (_a = histoireConfig.theme) == null ? void 0 : _a.logo) == null ? void 0 : _b.square) ? customLogos.square : HistoireLogo;
|
|
||||||
});
|
|
||||||
const storyStore = useStoryStore();
|
|
||||||
const stats = computed(() => {
|
|
||||||
let storyCount = 0;
|
|
||||||
let variantCount = 0;
|
|
||||||
let docsCount = 0;
|
|
||||||
(storyStore.stories || []).forEach((story) => {
|
|
||||||
if (story.docsOnly) {
|
|
||||||
docsCount++;
|
|
||||||
} else {
|
|
||||||
storyCount++;
|
|
||||||
if (story.variants) {
|
|
||||||
variantCount += story.variants.length;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
storyCount,
|
|
||||||
variantCount,
|
|
||||||
docsCount
|
|
||||||
};
|
|
||||||
});
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
||||||
createBaseVNode("img", {
|
|
||||||
src: logoUrl.value,
|
|
||||||
alt: "Logo",
|
|
||||||
class: "htw-w-64 htw-h-64 htw-opacity-25 htw-mb-8 htw-hidden md:htw-block"
|
|
||||||
}, null, 8, _hoisted_2),
|
|
||||||
createBaseVNode("div", _hoisted_3, [
|
|
||||||
createVNode(_sfc_main$1, {
|
|
||||||
title: "Stories",
|
|
||||||
icon: "carbon:cube",
|
|
||||||
count: stats.value.storyCount
|
|
||||||
}, null, 8, ["count"]),
|
|
||||||
createVNode(_sfc_main$1, {
|
|
||||||
title: "Variants",
|
|
||||||
icon: "carbon:cube-view",
|
|
||||||
count: stats.value.variantCount
|
|
||||||
}, null, 8, ["count"]),
|
|
||||||
createVNode(_sfc_main$1, {
|
|
||||||
title: "Documents",
|
|
||||||
icon: "carbon:document-blank",
|
|
||||||
count: stats.value.docsCount
|
|
||||||
}, null, 8, ["count"])
|
|
||||||
])
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
export {
|
|
||||||
_sfc_main as default
|
|
||||||
};
|
|
||||||
@ -1,308 +0,0 @@
|
|||||||
import { d as defineComponent, l as resolveComponent, o as openBlock, q as createBlock, w as withCtx, f as createBaseVNode, n as normalizeClass, m as withKeys, aF as renderSlot, aD as mergeProps, k as watch, b2 as scrollIntoView, J as onMounted, r as ref, c as computed, a_ as onUnmounted, b as createElementBlock, aL as withModifiers, G as normalizeStyle, b3 as useMediaQuery, t as toDisplayString, e as createVNode, g as unref, I as Icon, h as createCommentVNode, T as Transition } from "./vendor-BCKkA27H.js";
|
|
||||||
const _sfc_main$2 = defineComponent({
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: {
|
|
||||||
isActive: {
|
|
||||||
type: Boolean,
|
|
||||||
default: void 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emits: {
|
|
||||||
navigate: () => true
|
|
||||||
},
|
|
||||||
setup(props, { emit }) {
|
|
||||||
function handleNavigate(event, navigate) {
|
|
||||||
emit("navigate");
|
|
||||||
navigate(event);
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
handleNavigate
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const _export_sfc = (sfc, props) => {
|
|
||||||
const target = sfc.__vccOpts || sfc;
|
|
||||||
for (const [key, val] of props) {
|
|
||||||
target[key] = val;
|
|
||||||
}
|
|
||||||
return target;
|
|
||||||
};
|
|
||||||
const _hoisted_1$2 = ["href", "onClick", "onKeyup"];
|
|
||||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
||||||
const _component_RouterLink = resolveComponent("RouterLink");
|
|
||||||
return openBlock(), createBlock(_component_RouterLink, mergeProps({ class: "histoire-base-list-item-link" }, _ctx.$attrs, { custom: "" }), {
|
|
||||||
default: withCtx(({ isActive: linkIsActive, href, navigate }) => [
|
|
||||||
createBaseVNode("a", {
|
|
||||||
href,
|
|
||||||
class: normalizeClass(["htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100", [
|
|
||||||
_ctx.$attrs.class,
|
|
||||||
(_ctx.isActive != null ? _ctx.isActive : linkIsActive) ? "active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
|
|
||||||
]]),
|
|
||||||
onClick: ($event) => _ctx.handleNavigate($event, navigate),
|
|
||||||
onKeyup: [
|
|
||||||
withKeys(($event) => _ctx.handleNavigate($event, navigate), ["enter"]),
|
|
||||||
withKeys(($event) => _ctx.handleNavigate($event, navigate), ["space"])
|
|
||||||
]
|
|
||||||
}, [
|
|
||||||
renderSlot(_ctx.$slots, "default", {
|
|
||||||
active: _ctx.isActive != null ? _ctx.isActive : linkIsActive
|
|
||||||
})
|
|
||||||
], 42, _hoisted_1$2)
|
|
||||||
]),
|
|
||||||
_: 3
|
|
||||||
}, 16);
|
|
||||||
}
|
|
||||||
const BaseListItemLink = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
|
|
||||||
function useScrollOnActive(active, el) {
|
|
||||||
watch(active, (value) => {
|
|
||||||
if (value) {
|
|
||||||
autoScroll();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
function autoScroll() {
|
|
||||||
if (el.value) {
|
|
||||||
scrollIntoView(el.value, {
|
|
||||||
scrollMode: "if-needed",
|
|
||||||
block: "center",
|
|
||||||
inline: "nearest",
|
|
||||||
behavior: "smooth"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
if (active.value) {
|
|
||||||
autoScroll();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
autoScroll
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const _hoisted_1$1 = ["onMousedown"];
|
|
||||||
const SAVE_PREFIX = "__histoire";
|
|
||||||
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
||||||
__name: "BaseSplitPane",
|
|
||||||
props: {
|
|
||||||
orientation: {
|
|
||||||
type: String,
|
|
||||||
default: "landscape",
|
|
||||||
validator: (value) => ["landscape", "portrait"].includes(value)
|
|
||||||
},
|
|
||||||
defaultSplit: {
|
|
||||||
type: Number,
|
|
||||||
default: 50
|
|
||||||
},
|
|
||||||
split: {
|
|
||||||
type: Number,
|
|
||||||
default: void 0
|
|
||||||
},
|
|
||||||
min: {
|
|
||||||
type: Number,
|
|
||||||
default: 20
|
|
||||||
},
|
|
||||||
max: {
|
|
||||||
type: Number,
|
|
||||||
default: 80
|
|
||||||
},
|
|
||||||
draggerOffset: {
|
|
||||||
type: String,
|
|
||||||
default: "center",
|
|
||||||
validator: (value) => ["before", "center", "after"].includes(value)
|
|
||||||
},
|
|
||||||
saveId: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
fixed: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emits: {
|
|
||||||
"update:split": (_value) => true
|
|
||||||
},
|
|
||||||
setup(__props, { emit: __emit }) {
|
|
||||||
const props = __props;
|
|
||||||
const emit = __emit;
|
|
||||||
const currentSplit = ref(props.defaultSplit);
|
|
||||||
watch(() => props.split, (value) => {
|
|
||||||
if (value !== void 0) {
|
|
||||||
currentSplit.value = value;
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
immediate: true
|
|
||||||
});
|
|
||||||
if (props.saveId) {
|
|
||||||
const storageKey = `${SAVE_PREFIX}-split-pane-${props.saveId}`;
|
|
||||||
const savedValue = localStorage.getItem(storageKey);
|
|
||||||
if (savedValue != null) {
|
|
||||||
let parsedValue;
|
|
||||||
try {
|
|
||||||
parsedValue = JSON.parse(savedValue);
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
if (typeof parsedValue === "number") {
|
|
||||||
currentSplit.value = parsedValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
watch(currentSplit, (value) => {
|
|
||||||
localStorage.setItem(storageKey, JSON.stringify(value));
|
|
||||||
});
|
|
||||||
watch(currentSplit, (value) => {
|
|
||||||
if (value !== props.split) {
|
|
||||||
emit("update:split", value);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
immediate: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const boundSplit = computed(() => {
|
|
||||||
if (currentSplit.value < props.min) {
|
|
||||||
return props.min;
|
|
||||||
} else if (currentSplit.value > props.max) {
|
|
||||||
return props.max;
|
|
||||||
} else {
|
|
||||||
return currentSplit.value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const leftStyle = computed(() => ({
|
|
||||||
[props.orientation === "landscape" ? "width" : "height"]: props.fixed ? `${boundSplit.value}px` : `${boundSplit.value}%`
|
|
||||||
}));
|
|
||||||
const rightStyle = computed(() => ({
|
|
||||||
[props.orientation === "landscape" ? "width" : "height"]: props.fixed ? null : `${100 - boundSplit.value}%`
|
|
||||||
}));
|
|
||||||
const dragging = ref(false);
|
|
||||||
let startPosition = 0;
|
|
||||||
let startSplit = 0;
|
|
||||||
const el = ref(null);
|
|
||||||
function dragStart(e) {
|
|
||||||
dragging.value = true;
|
|
||||||
startPosition = props.orientation === "landscape" ? e.pageX : e.pageY;
|
|
||||||
startSplit = boundSplit.value;
|
|
||||||
window.addEventListener("mousemove", dragMove);
|
|
||||||
window.addEventListener("mouseup", dragEnd);
|
|
||||||
}
|
|
||||||
function dragMove(e) {
|
|
||||||
if (dragging.value) {
|
|
||||||
let position;
|
|
||||||
let totalSize;
|
|
||||||
if (props.orientation === "landscape") {
|
|
||||||
position = e.pageX;
|
|
||||||
totalSize = el.value.offsetWidth;
|
|
||||||
} else {
|
|
||||||
position = e.pageY;
|
|
||||||
totalSize = el.value.offsetHeight;
|
|
||||||
}
|
|
||||||
const dPosition = position - startPosition;
|
|
||||||
if (props.fixed) {
|
|
||||||
currentSplit.value = startSplit + dPosition;
|
|
||||||
} else {
|
|
||||||
currentSplit.value = startSplit + ~~(dPosition / totalSize * 200) / 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function dragEnd() {
|
|
||||||
dragging.value = false;
|
|
||||||
removeDragListeners();
|
|
||||||
}
|
|
||||||
function removeDragListeners() {
|
|
||||||
window.removeEventListener("mousemove", dragMove);
|
|
||||||
window.removeEventListener("mouseup", dragEnd);
|
|
||||||
}
|
|
||||||
onUnmounted(() => {
|
|
||||||
removeDragListeners();
|
|
||||||
});
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
return openBlock(), createElementBlock("div", {
|
|
||||||
ref_key: "el",
|
|
||||||
ref: el,
|
|
||||||
class: normalizeClass(["histoire-base-split-pane htw-flex htw-h-full htw-isolate htw-overflow-auto", {
|
|
||||||
"htw-flex-col": __props.orientation === "portrait",
|
|
||||||
"htw-cursor-ew-resize": dragging.value && __props.orientation === "landscape",
|
|
||||||
"htw-cursor-ns-resize": dragging.value && __props.orientation === "portrait",
|
|
||||||
[__props.orientation]: true
|
|
||||||
}])
|
|
||||||
}, [
|
|
||||||
createBaseVNode("div", {
|
|
||||||
class: normalizeClass(["htw-relative htw-top-0 htw-left-0 htw-z-20", {
|
|
||||||
"htw-pointer-events-none": dragging.value,
|
|
||||||
"htw-border-r htw-border-gray-300/30 dark:htw-border-gray-800": __props.orientation === "landscape",
|
|
||||||
"htw-flex-none": __props.fixed
|
|
||||||
}]),
|
|
||||||
style: normalizeStyle(leftStyle.value)
|
|
||||||
}, [
|
|
||||||
renderSlot(_ctx.$slots, "first", {}, void 0, true),
|
|
||||||
createBaseVNode("div", {
|
|
||||||
class: normalizeClass(["dragger htw-absolute htw-z-100 hover:htw-bg-primary-500/50 htw-transition-colors htw-duration-150 htw-delay-150", {
|
|
||||||
"htw-top-0 htw-bottom-0 htw-cursor-ew-resize": __props.orientation === "landscape",
|
|
||||||
"htw-left-0 htw-right-0 htw-cursor-ns-resize": __props.orientation === "portrait",
|
|
||||||
[`dragger-offset-${__props.draggerOffset}`]: true,
|
|
||||||
"htw-bg-primary-500/25": dragging.value
|
|
||||||
}]),
|
|
||||||
onMousedown: withModifiers(dragStart, ["prevent"])
|
|
||||||
}, null, 42, _hoisted_1$1)
|
|
||||||
], 6),
|
|
||||||
createBaseVNode("div", {
|
|
||||||
class: normalizeClass(["htw-relative htw-bottom-0 htw-right-0", {
|
|
||||||
"htw-pointer-events-none": dragging.value,
|
|
||||||
"htw-border-t htw-border-gray-300/30 dark:htw-border-gray-800": __props.orientation === "portrait",
|
|
||||||
"htw-flex-1": __props.fixed
|
|
||||||
}]),
|
|
||||||
style: normalizeStyle(rightStyle.value)
|
|
||||||
}, [
|
|
||||||
renderSlot(_ctx.$slots, "last", {}, void 0, true)
|
|
||||||
], 6)
|
|
||||||
], 2);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const BaseSplitPane = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4f40a1bb"]]);
|
|
||||||
const isMobile = useMediaQuery("(max-width: 640px)");
|
|
||||||
const _hoisted_1 = {
|
|
||||||
key: 0,
|
|
||||||
class: "histoire-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
|
|
||||||
};
|
|
||||||
const _hoisted_2 = { class: "htw-p-4 htw-h-16 htw-flex htw-border-b htw-border-gray-100 dark:htw-border-gray-800 htw-items-center htw-place-content-between" };
|
|
||||||
const _hoisted_3 = { class: "htw-text-gray-500" };
|
|
||||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
||||||
__name: "MobileOverlay",
|
|
||||||
props: {
|
|
||||||
title: {},
|
|
||||||
opened: { type: Boolean }
|
|
||||||
},
|
|
||||||
emits: ["close"],
|
|
||||||
setup(__props, { emit: __emit }) {
|
|
||||||
const emit = __emit;
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
return openBlock(), createBlock(Transition, { name: "__histoire-fade-bottom" }, {
|
|
||||||
default: withCtx(() => [
|
|
||||||
_ctx.opened ? (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
||||||
createBaseVNode("div", _hoisted_2, [
|
|
||||||
createBaseVNode("span", _hoisted_3, toDisplayString(_ctx.title), 1),
|
|
||||||
createBaseVNode("a", {
|
|
||||||
class: "htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer",
|
|
||||||
onClick: _cache[0] || (_cache[0] = ($event) => emit("close"))
|
|
||||||
}, [
|
|
||||||
createVNode(unref(Icon), {
|
|
||||||
icon: "carbon:close",
|
|
||||||
class: "htw-w-8 htw-h-8 htw-shrink-0"
|
|
||||||
})
|
|
||||||
])
|
|
||||||
]),
|
|
||||||
renderSlot(_ctx.$slots, "default")
|
|
||||||
])) : createCommentVNode("", true)
|
|
||||||
]),
|
|
||||||
_: 3
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
export {
|
|
||||||
BaseListItemLink as B,
|
|
||||||
_export_sfc as _,
|
|
||||||
_sfc_main as a,
|
|
||||||
BaseSplitPane as b,
|
|
||||||
isMobile as i,
|
|
||||||
useScrollOnActive as u
|
|
||||||
};
|
|
||||||
@ -1,549 +0,0 @@
|
|||||||
const __vite__fileDeps=["assets/search-docs-data-JLe790su.js","assets/vendor-BCKkA27H.js"],__vite__mapDeps=i=>i.map(i=>__vite__fileDeps[i]);
|
|
||||||
import { _ as __vitePreload } from "./GenericMountStory.vue2-BX48YWx2.js";
|
|
||||||
import { r as ref, k as watch, c as computed, d as defineComponent, o as openBlock, b as createElementBlock, aF as renderSlot, n as normalizeClass, m as withKeys, q as createBlock, g as unref, I as Icon, e as createVNode, f as createBaseVNode, z as createTextVNode, t as toDisplayString, F as Fragment, p as renderList, h as createCommentVNode, u as useCssVars, aS as toRefs, aT as useRouter, w as withCtx, aB as markRaw, b4 as useFocus, b5 as refDebounced, y as withDirectives, aM as vModelText, aL as withModifiers, b6 as flexsearch_bundleExports } from "./vendor-BCKkA27H.js";
|
|
||||||
import { u as useStoryStore } from "./story--eZPzd9h.js";
|
|
||||||
import { B as BaseEmpty } from "./BaseEmpty.vue-C0i8tRal.js";
|
|
||||||
import { o as onKeyboardShortcut, u as useCommandStore } from "./bundle-main-BYW_JKZH.js";
|
|
||||||
import { _ as _export_sfc, u as useScrollOnActive, B as BaseListItemLink } from "./MobileOverlay.vue2-BRmV4xb2.js";
|
|
||||||
function pipeline(a, b, c, d) {
|
|
||||||
if (a && (b && (a = replace(a, b)), this.matcher && (a = replace(a, this.matcher)), this.stemmer && 1 < a.length && (a = replace(a, this.stemmer)), d && 1 < a.length && (a = collapse(a)), c || "" === c)) {
|
|
||||||
const b2 = a.split(c);
|
|
||||||
return this.filter ? filter$1(b2, this.filter) : b2;
|
|
||||||
}
|
|
||||||
return a;
|
|
||||||
}
|
|
||||||
const regex_whitespace = /[\p{Z}\p{S}\p{P}\p{C}]+/u;
|
|
||||||
const regex_normalize = /[\u0300-\u036f]/g;
|
|
||||||
function normalize(a) {
|
|
||||||
return a.normalize && (a = a.normalize("NFD").replace(regex_normalize, "")), a;
|
|
||||||
}
|
|
||||||
function replace(a, b) {
|
|
||||||
for (let c = 0, d = b.length; c < d && (a = a.replace(b[c], b[c + 1]), !!a); c += 2)
|
|
||||||
;
|
|
||||||
return a;
|
|
||||||
}
|
|
||||||
function regex(a) {
|
|
||||||
return new RegExp(a, "g");
|
|
||||||
}
|
|
||||||
function collapse(a) {
|
|
||||||
let b = "", c = "";
|
|
||||||
for (let d, e = 0, f = a.length; e < f; e++)
|
|
||||||
(d = a[e]) !== c && (b += c = d);
|
|
||||||
return b;
|
|
||||||
}
|
|
||||||
function filter$1(a, b) {
|
|
||||||
const c = a.length, d = [];
|
|
||||||
for (let e = 0, f = 0; e < c; e++) {
|
|
||||||
const c2 = a[e];
|
|
||||||
c2 && !b[c2] && (d[f++] = c2);
|
|
||||||
}
|
|
||||||
return d;
|
|
||||||
}
|
|
||||||
const regex_a = regex("[àáâãäå]"), regex_e = regex("[èéêë]"), regex_i = regex("[ìíîï]"), regex_o = regex("[òóôõöő]"), regex_u = regex("[ùúûüű]"), regex_y = regex("[ýŷÿ]"), regex_n = regex("ñ"), regex_c = regex("[çc]"), regex_s = regex("ß"), regex_and = regex(" & "), pairs$1 = [regex_a, "a", regex_e, "e", regex_i, "i", regex_o, "o", regex_u, "u", regex_y, "y", regex_n, "n", regex_c, "k", regex_s, "s", regex_and, " and "];
|
|
||||||
function encode$2(a) {
|
|
||||||
return a = "" + a, pipeline.call(this, normalize(a).toLowerCase(), !a.normalize && pairs$1, regex_whitespace, false);
|
|
||||||
}
|
|
||||||
const regex_strip = /[^a-z0-9]+/, soundex = { b: "p", v: "f", w: "f", z: "s", x: "s", ß: "s", d: "t", n: "m", c: "k", g: "k", j: "k", q: "k", i: "e", y: "e", u: "o" };
|
|
||||||
function encode$1(a) {
|
|
||||||
a = encode$2.call(this, a).join(" ");
|
|
||||||
const b = [];
|
|
||||||
if (a) {
|
|
||||||
const c = a.split(regex_strip), d = c.length;
|
|
||||||
for (let e, f = 0, g = 0; f < d; f++)
|
|
||||||
if ((a = c[f]) && (!this.filter || !this.filter[a])) {
|
|
||||||
e = a[0];
|
|
||||||
let c2 = soundex[e] || e, d2 = c2;
|
|
||||||
for (let b2 = 1; b2 < a.length; b2++) {
|
|
||||||
e = a[b2];
|
|
||||||
const f2 = soundex[e] || e;
|
|
||||||
f2 && f2 !== d2 && (c2 += f2, d2 = f2);
|
|
||||||
}
|
|
||||||
b[g++] = c2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return b;
|
|
||||||
}
|
|
||||||
const charset = { encode, rtl: false, tokenize: "" };
|
|
||||||
const regex_ae = regex("ae"), regex_oe = regex("oe"), regex_sh = regex("sh"), regex_th = regex("th"), regex_ph = regex("ph"), regex_pf = regex("pf"), pairs = [regex_ae, "a", regex_oe, "o", regex_sh, "s", regex_th, "t", regex_ph, "f", regex_pf, "f", regex("(?![aeo])h(?![aeo])"), "", regex("(?!^[aeo])h(?!^[aeo])"), ""];
|
|
||||||
function encode(a, b) {
|
|
||||||
return a && (a = encode$1.call(this, a).join(" "), 2 < a.length && (a = replace(a, pairs)), !b && (1 < a.length && (a = collapse(a)), a && (a = a.split(" ")))), a;
|
|
||||||
}
|
|
||||||
const filter = ["a", "about", "above", "after", "again", "against", "all", "also", "am", "an", "and", "any", "are", "aren't", "as", "at", "be", "because", "been", "before", "being", "below", "both", "but", "by", "can", "cannot", "can't", "come", "could", "couldn't", "did", "didn't", "do", "does", "doesn't", "doing", "dont", "down", "during", "each", "even", "few", "first", "for", "from", "further", "get", "go", "had", "hadn't", "has", "hasn't", "have", "haven't", "having", "he", "hed", "her", "here", "here's", "hers", "herself", "hes", "him", "himself", "his", "how", "how's", "i", "id", "if", "ill", "im", "in", "into", "is", "isn't", "it", "it's", "itself", "i've", "just", "know", "let's", "like", "make", "me", "more", "most", "mustn't", "my", "myself", "new", "no", "nor", "not", "now", "of", "off", "on", "once", "only", "or", "other", "ought", "our", "our's", "ourselves", "out", "over", "own", "same", "say", "see", "shan't", "she", "she'd", "shell", "shes", "should", "shouldn't", "so", "some", "such", "than", "that", "that's", "the", "their", "theirs", "them", "themselves", "then", "there", "there's", "these", "they", "they'd", "they'll", "they're", "they've", "this", "those", "through", "time", "to", "too", "until", "up", "us", "very", "want", "was", "wasn't", "way", "we", "wed", "well", "were", "weren't", "we've", "what", "what's", "when", "when's", "where", "where's", "which", "while", "who", "whom", "who's", "why", "why's", "will", "with", "won't", "would", "wouldn't", "you", "you'd", "you'll", "your", "you're", "your's", "yourself", "yourselves", "you've"];
|
|
||||||
const stemmer = { ational: "ate", iveness: "ive", fulness: "ful", ousness: "ous", ization: "ize", tional: "tion", biliti: "ble", icate: "ic", ative: "", alize: "al", iciti: "ic", entli: "ent", ousli: "ous", alism: "al", ation: "ate", aliti: "al", iviti: "ive", ement: "", enci: "ence", anci: "ance", izer: "ize", alli: "al", ator: "ate", logi: "log", ical: "ic", ance: "", ence: "", ness: "", able: "", ible: "", ment: "", eli: "e", bli: "ble", ful: "", ant: "", ent: "", ism: "", ate: "", iti: "", ous: "", ive: "", ize: "", al: "", ou: "", er: "", ic: "" };
|
|
||||||
const matcher = {};
|
|
||||||
const language = { filter, stemmer, matcher };
|
|
||||||
function useSelection(list) {
|
|
||||||
const selectedIndex = ref(0);
|
|
||||||
watch(list, () => {
|
|
||||||
selectedIndex.value = 0;
|
|
||||||
});
|
|
||||||
function selectNext() {
|
|
||||||
selectedIndex.value++;
|
|
||||||
if (selectedIndex.value > list.value.length - 1) {
|
|
||||||
selectedIndex.value = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function selectPrevious() {
|
|
||||||
selectedIndex.value--;
|
|
||||||
if (selectedIndex.value < 0) {
|
|
||||||
selectedIndex.value = list.value.length - 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
selectedIndex: computed(() => selectedIndex.value),
|
|
||||||
selectNext,
|
|
||||||
selectPrevious
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
||||||
__name: "BaseListItem",
|
|
||||||
props: {
|
|
||||||
isActive: { type: Boolean }
|
|
||||||
},
|
|
||||||
emits: ["navigate"],
|
|
||||||
setup(__props, { emit: __emit }) {
|
|
||||||
const emit = __emit;
|
|
||||||
function handleNavigate() {
|
|
||||||
emit("navigate");
|
|
||||||
}
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
return openBlock(), createElementBlock("a", {
|
|
||||||
class: normalizeClass(["istoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100", [
|
|
||||||
_ctx.$attrs.class,
|
|
||||||
_ctx.isActive ? "active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black" : "hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
|
|
||||||
]]),
|
|
||||||
onClick: _cache[0] || (_cache[0] = ($event) => handleNavigate()),
|
|
||||||
onKeyup: [
|
|
||||||
_cache[1] || (_cache[1] = withKeys(($event) => handleNavigate(), ["enter"])),
|
|
||||||
_cache[2] || (_cache[2] = withKeys(($event) => handleNavigate(), ["space"]))
|
|
||||||
]
|
|
||||||
}, [
|
|
||||||
renderSlot(_ctx.$slots, "default")
|
|
||||||
], 34);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const _hoisted_1$3 = ["src", "alt"];
|
|
||||||
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
||||||
__name: "BaseIcon",
|
|
||||||
props: {
|
|
||||||
icon: {}
|
|
||||||
},
|
|
||||||
setup(__props) {
|
|
||||||
const props = __props;
|
|
||||||
const isUrl = computed(() => props.icon.startsWith("http") || props.icon.startsWith("data:image") || props.icon.startsWith(".") || props.icon.startsWith("/"));
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
return isUrl.value ? (openBlock(), createElementBlock("img", {
|
|
||||||
key: 0,
|
|
||||||
src: _ctx.icon,
|
|
||||||
alt: _ctx.icon,
|
|
||||||
class: "histoire-base-icon"
|
|
||||||
}, null, 8, _hoisted_1$3)) : (openBlock(), createBlock(unref(Icon), {
|
|
||||||
key: 1,
|
|
||||||
icon: _ctx.icon,
|
|
||||||
class: "histoire-base-icon"
|
|
||||||
}, null, 8, ["icon"]));
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const BaseIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-2114f510"]]);
|
|
||||||
const _hoisted_1$2 = { class: "htw-flex-1" };
|
|
||||||
const _hoisted_2 = { class: "htw-flex" };
|
|
||||||
const _hoisted_3 = { class: "htw-ml-auto htw-opacity-40" };
|
|
||||||
const _hoisted_4 = {
|
|
||||||
key: 0,
|
|
||||||
class: "htw-flex htw-items-center htw-gap-0.5 htw-opacity-60"
|
|
||||||
};
|
|
||||||
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
||||||
__name: "SearchItemContent",
|
|
||||||
props: {
|
|
||||||
result: {},
|
|
||||||
selected: { type: Boolean }
|
|
||||||
},
|
|
||||||
setup(__props) {
|
|
||||||
const defaultIcons = {
|
|
||||||
story: "carbon:cube",
|
|
||||||
variant: "carbon:cube"
|
|
||||||
};
|
|
||||||
const kindLabels = {
|
|
||||||
story: "Story",
|
|
||||||
variant: "Variant",
|
|
||||||
command: "Command"
|
|
||||||
};
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
var _a;
|
|
||||||
return openBlock(), createElementBlock(Fragment, null, [
|
|
||||||
createVNode(BaseIcon, {
|
|
||||||
icon: _ctx.result.icon ?? defaultIcons[_ctx.result.kind],
|
|
||||||
class: normalizeClass(["htw-w-4 htw-h-4", [
|
|
||||||
!_ctx.selected ? [
|
|
||||||
_ctx.result.iconColor ? "bind-icon-color" : {
|
|
||||||
"htw-text-primary-500": _ctx.result.kind === "story",
|
|
||||||
"htw-text-gray-500": _ctx.result.kind === "variant"
|
|
||||||
}
|
|
||||||
] : [],
|
|
||||||
{
|
|
||||||
"colorize-black": _ctx.selected
|
|
||||||
}
|
|
||||||
]])
|
|
||||||
}, null, 8, ["icon", "class"]),
|
|
||||||
createBaseVNode("div", _hoisted_1$2, [
|
|
||||||
createBaseVNode("div", _hoisted_2, [
|
|
||||||
createTextVNode(toDisplayString(_ctx.result.title) + " ", 1),
|
|
||||||
createBaseVNode("span", _hoisted_3, toDisplayString(kindLabels[_ctx.result.kind]), 1)
|
|
||||||
]),
|
|
||||||
((_a = _ctx.result.path) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
|
||||||
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.result.path, (p, index) => {
|
|
||||||
return openBlock(), createElementBlock("div", {
|
|
||||||
key: index,
|
|
||||||
class: "htw-flex htw-items-center htw-gap-0.5"
|
|
||||||
}, [
|
|
||||||
index > 0 ? (openBlock(), createBlock(unref(Icon), {
|
|
||||||
key: 0,
|
|
||||||
icon: "carbon:chevron-right",
|
|
||||||
class: "htw-w-4 htw-h-4 htw-mt-0.5 htw-opacity-50"
|
|
||||||
})) : createCommentVNode("", true),
|
|
||||||
createBaseVNode("span", null, toDisplayString(p), 1)
|
|
||||||
]);
|
|
||||||
}), 128))
|
|
||||||
])) : createCommentVNode("", true)
|
|
||||||
])
|
|
||||||
], 64);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const _hoisted_1$1 = ["data-selected"];
|
|
||||||
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
||||||
__name: "SearchItem",
|
|
||||||
props: {
|
|
||||||
result: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
selected: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emits: {
|
|
||||||
close: () => true
|
|
||||||
},
|
|
||||||
setup(__props, { emit: __emit }) {
|
|
||||||
useCssVars((_ctx) => ({
|
|
||||||
"ddaae392": __props.result.iconColor
|
|
||||||
}));
|
|
||||||
const props = __props;
|
|
||||||
const emit = __emit;
|
|
||||||
const el = ref();
|
|
||||||
const { selected } = toRefs(props);
|
|
||||||
useScrollOnActive(selected, el);
|
|
||||||
const router = useRouter();
|
|
||||||
onKeyboardShortcut(["enter"], () => {
|
|
||||||
if (!props.selected)
|
|
||||||
return;
|
|
||||||
action();
|
|
||||||
});
|
|
||||||
function action(fromClick = false) {
|
|
||||||
if ("route" in props.result && !fromClick) {
|
|
||||||
router.push(props.result.route);
|
|
||||||
}
|
|
||||||
if ("onActivate" in props.result) {
|
|
||||||
props.result.onActivate();
|
|
||||||
}
|
|
||||||
emit("close");
|
|
||||||
}
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
return openBlock(), createElementBlock("div", {
|
|
||||||
ref_key: "el",
|
|
||||||
ref: el,
|
|
||||||
class: "histoire-search-item",
|
|
||||||
"data-test-id": "search-item",
|
|
||||||
"data-selected": unref(selected) ? "" : void 0
|
|
||||||
}, [
|
|
||||||
"route" in __props.result ? (openBlock(), createBlock(BaseListItemLink, {
|
|
||||||
key: 0,
|
|
||||||
to: __props.result.route,
|
|
||||||
"is-active": unref(selected),
|
|
||||||
class: "htw-px-6 htw-py-4 htw-gap-4",
|
|
||||||
onNavigate: _cache[0] || (_cache[0] = ($event) => action(true))
|
|
||||||
}, {
|
|
||||||
default: withCtx(() => [
|
|
||||||
createVNode(_sfc_main$2, {
|
|
||||||
result: __props.result,
|
|
||||||
selected: unref(selected)
|
|
||||||
}, null, 8, ["result", "selected"])
|
|
||||||
]),
|
|
||||||
_: 1
|
|
||||||
}, 8, ["to", "is-active"])) : createCommentVNode("", true),
|
|
||||||
"onActivate" in __props.result ? (openBlock(), createBlock(_sfc_main$4, {
|
|
||||||
key: 1,
|
|
||||||
"is-active": unref(selected),
|
|
||||||
class: "htw-px-6 htw-py-4 htw-gap-4",
|
|
||||||
onNavigate: _cache[1] || (_cache[1] = ($event) => action(true))
|
|
||||||
}, {
|
|
||||||
default: withCtx(() => [
|
|
||||||
createVNode(_sfc_main$2, {
|
|
||||||
result: __props.result,
|
|
||||||
selected: unref(selected)
|
|
||||||
}, null, 8, ["result", "selected"])
|
|
||||||
]),
|
|
||||||
_: 1
|
|
||||||
}, 8, ["is-active"])) : createCommentVNode("", true)
|
|
||||||
], 8, _hoisted_1$1);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const SearchItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-d75a2748"]]);
|
|
||||||
let searchData$1 = { "index": { "reg": '{"0":1,"1":1,"2":1,"3":1,"4":1,"5":1,"6":1,"7":1}', "text.cfg": '{"doc":0,"opt":1}', "text.map": '[{"k":[0,1],"ke":[0,1],"kek":[0,1],"kekp":[0,1],"kekpo":[0,1],"kekpos":[0,1],"f":[2,3],"fl":[2,3],"flo":[2,3],"floa":[2,3],"float":[2,3],"e":[4,5],"em":[4,5],"emt":[4,5],"emte":[4,5],"emtek":[4,5],"emteke":[4,5],"emteker":[4,5],"s":[6,7],"se":[6,7],"sel":[6,7],"sele":[6,7],"selek":[6,7],"selekt":[6,7]},{"t":[1,3,5,7],"te":[1,3,5,7],"tef":[1,3,5,7],"tefa":[1,3,5,7],"tefao":[1,3,5,7],"tefaol":[1,3,5,7],"tefaolt":[1,3,5,7]},{},{},{},{},{},{},{}]', "text.ctx": "[{}]" }, "idMap": { "0": { "id": "src-lib-elements-checkbox-story-svelte", "kind": "story" }, "1": { "id": "src-lib-elements-checkbox-story-svelte:_default", "kind": "variant" }, "2": { "id": "src-lib-elements-float-story-svelte", "kind": "story" }, "3": { "id": "src-lib-elements-float-story-svelte:_default", "kind": "variant" }, "4": { "id": "src-lib-elements-integer-story-svelte", "kind": "story" }, "5": { "id": "src-lib-elements-integer-story-svelte:_default", "kind": "variant" }, "6": { "id": "src-lib-elements-select-story-svelte", "kind": "story" }, "7": { "id": "src-lib-elements-select-story-svelte:_default", "kind": "variant" } } };
|
|
||||||
const searchData = markRaw(searchData$1);
|
|
||||||
const _hoisted_1 = {
|
|
||||||
key: 1,
|
|
||||||
class: "htw-max-h-[400px] htw-overflow-y-auto htw-rounded-b-lg"
|
|
||||||
};
|
|
||||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
||||||
__name: "SearchPane",
|
|
||||||
props: {
|
|
||||||
shown: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emits: {
|
|
||||||
close: () => true
|
|
||||||
},
|
|
||||||
setup(__props, { emit: __emit }) {
|
|
||||||
const DocSearchData = () => __vitePreload(() => import("./search-docs-data-JLe790su.js"), true ? __vite__mapDeps([0,1]) : void 0);
|
|
||||||
const props = __props;
|
|
||||||
const emit = __emit;
|
|
||||||
function close() {
|
|
||||||
emit("close");
|
|
||||||
}
|
|
||||||
const input = ref();
|
|
||||||
const { focused } = useFocus(input, {
|
|
||||||
initialValue: true
|
|
||||||
});
|
|
||||||
watch(() => props.shown, (value) => {
|
|
||||||
if (value) {
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
focused.value = true;
|
|
||||||
input.value.select();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const searchInputText = ref("");
|
|
||||||
const rateLimitedSearch = refDebounced(searchInputText, 50);
|
|
||||||
const storyStore = useStoryStore();
|
|
||||||
let titleSearchIndex;
|
|
||||||
let titleIdMap;
|
|
||||||
function createIndex() {
|
|
||||||
return new flexsearch_bundleExports.Document({
|
|
||||||
preset: "match",
|
|
||||||
document: {
|
|
||||||
id: "id",
|
|
||||||
index: [
|
|
||||||
"text"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
worker: true,
|
|
||||||
charset,
|
|
||||||
language,
|
|
||||||
tokenize: "forward"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
async function loadSearchIndex(data) {
|
|
||||||
titleSearchIndex = createIndex();
|
|
||||||
for (const key of Object.keys(data.index)) {
|
|
||||||
await titleSearchIndex.import(key, data.index[key]);
|
|
||||||
}
|
|
||||||
titleIdMap = data.idMap;
|
|
||||||
}
|
|
||||||
loadSearchIndex(searchData);
|
|
||||||
let docSearchIndex;
|
|
||||||
let docIdMap;
|
|
||||||
async function loadDocSearchIndex() {
|
|
||||||
async function load(data) {
|
|
||||||
docSearchIndex = createIndex();
|
|
||||||
for (const key of Object.keys(data.index)) {
|
|
||||||
await docSearchIndex.import(key, data.index[key]);
|
|
||||||
}
|
|
||||||
docIdMap = data.idMap;
|
|
||||||
if (rateLimitedSearch.value) {
|
|
||||||
searchOnDocField(rateLimitedSearch.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const searchDataModule = await DocSearchData();
|
|
||||||
load(searchDataModule.searchData);
|
|
||||||
searchDataModule.onUpdate((searchData2) => {
|
|
||||||
load(searchData2);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
loadDocSearchIndex();
|
|
||||||
const titleResults = ref([]);
|
|
||||||
watch(rateLimitedSearch, async (value) => {
|
|
||||||
const list = [];
|
|
||||||
const raw = await titleSearchIndex.search(value);
|
|
||||||
let rank = 0;
|
|
||||||
for (const field of raw) {
|
|
||||||
for (const id of field.result) {
|
|
||||||
const idMapData = titleIdMap[id];
|
|
||||||
if (!idMapData)
|
|
||||||
continue;
|
|
||||||
switch (idMapData.kind) {
|
|
||||||
case "story": {
|
|
||||||
list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank));
|
|
||||||
rank++;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "variant": {
|
|
||||||
const [storyId] = idMapData.id.split(":");
|
|
||||||
const story = storyStore.getStoryById(storyId);
|
|
||||||
const variant = storyStore.getVariantById(idMapData.id);
|
|
||||||
list.push(variantResultFactory(story, variant, rank));
|
|
||||||
rank++;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
titleResults.value = list;
|
|
||||||
});
|
|
||||||
const docsResults = ref([]);
|
|
||||||
async function searchOnDocField(query) {
|
|
||||||
if (docSearchIndex) {
|
|
||||||
const list = [];
|
|
||||||
const raw = await docSearchIndex.search(query);
|
|
||||||
let rank = 0;
|
|
||||||
for (const field of raw) {
|
|
||||||
for (const id of field.result) {
|
|
||||||
const idMapData = docIdMap[id];
|
|
||||||
if (!idMapData)
|
|
||||||
continue;
|
|
||||||
switch (idMapData.kind) {
|
|
||||||
case "story": {
|
|
||||||
list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank, "docs"));
|
|
||||||
rank++;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
docsResults.value = list;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
watch(rateLimitedSearch, searchOnDocField);
|
|
||||||
function storyResultFactory(story, rank, type = "title") {
|
|
||||||
return {
|
|
||||||
kind: "story",
|
|
||||||
rank,
|
|
||||||
id: `story:${story.id}`,
|
|
||||||
title: story.title,
|
|
||||||
route: {
|
|
||||||
name: "story",
|
|
||||||
params: {
|
|
||||||
storyId: story.id
|
|
||||||
},
|
|
||||||
query: {
|
|
||||||
...type === "docs" ? { tab: "docs" } : {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
path: story.file.path.slice(0, -1),
|
|
||||||
icon: story.icon,
|
|
||||||
iconColor: story.iconColor
|
|
||||||
};
|
|
||||||
}
|
|
||||||
function variantResultFactory(story, variant, rank, type = "title") {
|
|
||||||
return {
|
|
||||||
kind: "variant",
|
|
||||||
rank,
|
|
||||||
id: `variant:${story.id}:${variant.id}`,
|
|
||||||
title: variant.title,
|
|
||||||
route: {
|
|
||||||
name: "story",
|
|
||||||
params: {
|
|
||||||
storyId: story.id
|
|
||||||
},
|
|
||||||
query: {
|
|
||||||
variantId: variant.id,
|
|
||||||
...type === "docs" ? { tab: "docs" } : {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
path: [...story.file.path ?? [], story.title],
|
|
||||||
icon: variant.icon,
|
|
||||||
iconColor: variant.iconColor
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const commandResults = computed(() => {
|
|
||||||
return [];
|
|
||||||
});
|
|
||||||
useCommandStore();
|
|
||||||
const results = computed(() => {
|
|
||||||
const list = [
|
|
||||||
...commandResults.value,
|
|
||||||
...titleResults.value
|
|
||||||
];
|
|
||||||
const seen = {};
|
|
||||||
for (const r of titleResults.value) {
|
|
||||||
seen[r.id] = true;
|
|
||||||
}
|
|
||||||
for (const r of docsResults.value) {
|
|
||||||
if (!seen[r.id]) {
|
|
||||||
list.push(r);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return list;
|
|
||||||
});
|
|
||||||
const {
|
|
||||||
selectedIndex,
|
|
||||||
selectNext,
|
|
||||||
selectPrevious
|
|
||||||
} = useSelection(results);
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
return openBlock(), createElementBlock(Fragment, null, [
|
|
||||||
createBaseVNode("div", {
|
|
||||||
class: "histoire-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500",
|
|
||||||
onClick: _cache[4] || (_cache[4] = ($event) => focused.value = true)
|
|
||||||
}, [
|
|
||||||
createVNode(unref(Icon), {
|
|
||||||
icon: "carbon:search",
|
|
||||||
class: "flex-none htw-w-4 htw-h-4"
|
|
||||||
}),
|
|
||||||
withDirectives(createBaseVNode("input", {
|
|
||||||
ref_key: "input",
|
|
||||||
ref: input,
|
|
||||||
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchInputText.value = $event),
|
|
||||||
placeholder: "Search for stories, variants...",
|
|
||||||
class: "htw-bg-transparent htw-w-full htw-flex-1 htw-pl-0 htw-pr-6 htw-py-4 htw-outline-none",
|
|
||||||
onKeydown: [
|
|
||||||
_cache[1] || (_cache[1] = withKeys(withModifiers(($event) => unref(selectNext)(), ["prevent"]), ["down"])),
|
|
||||||
_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(selectPrevious)(), ["prevent"]), ["up"])),
|
|
||||||
_cache[3] || (_cache[3] = withKeys(($event) => close(), ["escape"]))
|
|
||||||
]
|
|
||||||
}, null, 544), [
|
|
||||||
[vModelText, searchInputText.value]
|
|
||||||
])
|
|
||||||
]),
|
|
||||||
unref(rateLimitedSearch) && !results.value.length ? (openBlock(), createBlock(BaseEmpty, {
|
|
||||||
key: 0,
|
|
||||||
class: "no-animation"
|
|
||||||
}, {
|
|
||||||
default: withCtx(() => [
|
|
||||||
createTextVNode(" No results ")
|
|
||||||
]),
|
|
||||||
_: 1
|
|
||||||
})) : results.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
|
|
||||||
(openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
|
|
||||||
return openBlock(), createBlock(SearchItem, {
|
|
||||||
key: result.id,
|
|
||||||
result,
|
|
||||||
selected: index === unref(selectedIndex),
|
|
||||||
onClose: _cache[5] || (_cache[5] = ($event) => close())
|
|
||||||
}, null, 8, ["result", "selected"]);
|
|
||||||
}), 128))
|
|
||||||
])) : createCommentVNode("", true)
|
|
||||||
], 64);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
export {
|
|
||||||
_sfc_main as default
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,4 +0,0 @@
|
|||||||
const __resolved__virtual_storySource_srcLibElementsCheckboxStorySvelte = '<script lang="ts">\n import type { Hst } from "@histoire/plugin-svelte";\n export let Hst: Hst;\n import Checkbox from "./Checkbox.svelte";\n<\/script>\n\n<Hst.Story>\n <div>\n <Checkbox checked={false} />\n </div>\n</Hst.Story>\n\n<style>\n div {\n padding: 1em;\n }\n</style>\n';
|
|
||||||
export {
|
|
||||||
__resolved__virtual_storySource_srcLibElementsCheckboxStorySvelte as default
|
|
||||||
};
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
const __resolved__virtual_storySource_srcLibElementsFloatStorySvelte = '<script lang="ts">\n import type { Hst } from "@histoire/plugin-svelte";\n export let Hst: Hst;\n import Float from "./Float.svelte";\n<\/script>\n\n<Hst.Story>\n <div>\n <Float value={0} min={0} max={6.9} />\n </div>\n</Hst.Story>\n\n<style>\n div {\n padding: 1em;\n }\n</style>\n';
|
|
||||||
export {
|
|
||||||
__resolved__virtual_storySource_srcLibElementsFloatStorySvelte as default
|
|
||||||
};
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
const __resolved__virtual_storySource_srcLibElementsIntegerStorySvelte = '<script lang="ts">\n import type { Hst } from "@histoire/plugin-svelte";\n export let Hst: Hst;\n import Integer from "./Integer.svelte";\n import StorySettings from "../helpers/StorySettings.svelte";\n<\/script>\n\n<Hst.Story>\n <div>\n <Integer value={5} min={0} max={42} />\n </div>\n <svelte:fragment slot="controls">\n <StorySettings/>\n </svelte:fragment>\n</Hst.Story>\n\n<style>\n div {\n padding: 1em;\n }\n</style>\n';
|
|
||||||
export {
|
|
||||||
__resolved__virtual_storySource_srcLibElementsIntegerStorySvelte as default
|
|
||||||
};
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
const __resolved__virtual_storySource_srcLibElementsSelectStorySvelte = '<script lang="ts">\n import type { Hst } from "@histoire/plugin-svelte";\n export let Hst: Hst;\n import Select from "./Select.svelte";\n<\/script>\n\n<Hst.Story>\n <div>\n <Select value={"banana"} options={["strawberry", "apple", "banana"]} />\n </div>\n</Hst.Story>\n\n<style>\n div {\n padding: 1em;\n }\n</style>\n';
|
|
||||||
export {
|
|
||||||
__resolved__virtual_storySource_srcLibElementsSelectStorySvelte as default
|
|
||||||
};
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,81 +0,0 @@
|
|||||||
import { N as parseQuery, r as ref, K as createApp, L as createPinia, k as watch, c as computed, J as onMounted, O as h, P as applyState } from "./vendor-BCKkA27H.js";
|
|
||||||
import { m as mapFile, f as files, b as _sfc_main, h as histoireConfig, i as isDark } from "./GenericMountStory.vue2-BX48YWx2.js";
|
|
||||||
import { S as STATE_SYNC, P as PREVIEW_SETTINGS_SYNC, a as applyPreviewSettings, b as SANDBOX_READY, _ as _sfc_main$1, t as toRawDeep } from "./state-BFrY_pEm.js";
|
|
||||||
const query = parseQuery(window.location.search);
|
|
||||||
const file = ref(mapFile(files.find((f) => f.id === query.storyId)));
|
|
||||||
const app = createApp({
|
|
||||||
name: "SandboxApp",
|
|
||||||
setup() {
|
|
||||||
const story = computed(() => file.value.story);
|
|
||||||
const variant = computed(() => {
|
|
||||||
var _a;
|
|
||||||
return (_a = story.value) == null ? void 0 : _a.variants.find((v) => v.id === query.variantId);
|
|
||||||
});
|
|
||||||
let synced = false;
|
|
||||||
let mounted = false;
|
|
||||||
window.addEventListener("message", (event) => {
|
|
||||||
var _a, _b;
|
|
||||||
if (((_a = event.data) == null ? void 0 : _a.type) === STATE_SYNC) {
|
|
||||||
if (!mounted)
|
|
||||||
return;
|
|
||||||
synced = true;
|
|
||||||
applyState(variant.value.state, event.data.state);
|
|
||||||
} else if (((_b = event.data) == null ? void 0 : _b.type) === PREVIEW_SETTINGS_SYNC) {
|
|
||||||
applyPreviewSettings(event.data.settings);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
watch(() => variant.value.state, (value) => {
|
|
||||||
var _a;
|
|
||||||
if (synced && mounted) {
|
|
||||||
synced = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
(_a = window.parent) == null ? void 0 : _a.postMessage({
|
|
||||||
type: STATE_SYNC,
|
|
||||||
state: toRawDeep(value, true)
|
|
||||||
});
|
|
||||||
}, {
|
|
||||||
deep: true
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
mounted = true;
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
story,
|
|
||||||
variant
|
|
||||||
};
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
return [
|
|
||||||
h("div", { class: "htw-sandbox-hidden" }, [
|
|
||||||
h(_sfc_main, {
|
|
||||||
key: file.value.story.id,
|
|
||||||
story: file.value.story
|
|
||||||
})
|
|
||||||
]),
|
|
||||||
this.story && this.variant ? h(_sfc_main$1, {
|
|
||||||
story: this.story,
|
|
||||||
variant: this.variant,
|
|
||||||
onReady: () => {
|
|
||||||
var _a;
|
|
||||||
(_a = window.parent) == null ? void 0 : _a.postMessage({
|
|
||||||
type: SANDBOX_READY
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}) : null
|
|
||||||
];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
app.use(createPinia());
|
|
||||||
app.mount("#app");
|
|
||||||
watch(isDark, (value) => {
|
|
||||||
if (value) {
|
|
||||||
document.documentElement.classList.add(histoireConfig.sandboxDarkClass);
|
|
||||||
document.documentElement.classList.add(histoireConfig.theme.darkClass);
|
|
||||||
} else {
|
|
||||||
document.documentElement.classList.remove(histoireConfig.sandboxDarkClass);
|
|
||||||
document.documentElement.classList.remove(histoireConfig.theme.darkClass);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
immediate: true
|
|
||||||
});
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
|
||||||
width="1536"
|
|
||||||
height="512"
|
|
||||||
viewBox="0 0 1536 512"
|
|
||||||
version="1.1"
|
|
||||||
id="svg5"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
|
||||||
<defs
|
|
||||||
id="defs2" />
|
|
||||||
<g
|
|
||||||
id="layer1">
|
|
||||||
<rect
|
|
||||||
style="opacity:0.5;fill:#ff3e00;fill-opacity:1;stroke-width:1.00375"
|
|
||||||
id="rect1372"
|
|
||||||
width="314.30923"
|
|
||||||
height="406.60901"
|
|
||||||
x="-26.565063"
|
|
||||||
y="134.75079"
|
|
||||||
transform="rotate(-23.821262)"
|
|
||||||
ry="8" />
|
|
||||||
<rect
|
|
||||||
style="fill:#ff3e00;fill-opacity:1;stroke-width:1.00375"
|
|
||||||
id="rect850"
|
|
||||||
width="314.30923"
|
|
||||||
height="406.60901"
|
|
||||||
x="77.571838"
|
|
||||||
y="72.808708"
|
|
||||||
ry="8"
|
|
||||||
transform="rotate(-4.5744534)" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="layer3">
|
|
||||||
<path
|
|
||||||
id="path1657-3"
|
|
||||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:8.34923;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
d="M 359.38947,355.95134 320.72935,176.52942 238.34613,238.94118 Z M 273.64124,273.06608 152.59788,156.05591 191.25804,335.47786 Z" />
|
|
||||||
<g
|
|
||||||
aria-label="Histoire"
|
|
||||||
id="text1821"
|
|
||||||
style="font-size:231.926px;line-height:1.25;font-family:Sen;-inkscape-font-specification:Sen;fill:#ff3e00;stroke-width:5.79813;fill-opacity:1"
|
|
||||||
transform="matrix(1.1500556,0,0,1.1500556,-105.40156,-38.414233)">
|
|
||||||
<path
|
|
||||||
d="M 693.87591,344.24783 V 181.89964 h 25.04801 v 162.34819 z m -105.99018,0 V 181.89964 h 25.04801 v 162.34819 z m 10.90052,-68.88202 v -24.1203 h 106.22211 v 24.1203 z"
|
|
||||||
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
|
||||||
id="path16857" />
|
|
||||||
<path
|
|
||||||
d="M 762.294,344.24783 V 222.48669 h 23.88838 v 121.76114 z m 11.5963,-148.66456 q -7.65356,0 -11.82822,-3.94274 -4.17467,-3.94274 -4.17467,-11.13245 0,-6.72585 4.17467,-10.90052 4.40659,-4.17467 11.82822,-4.17467 7.65356,0 11.82823,3.94274 4.17466,3.94275 4.17466,11.13245 0,6.72585 -4.40659,10.90052 -4.17467,4.17467 -11.5963,4.17467 z"
|
|
||||||
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
|
||||||
id="path16859" />
|
|
||||||
<path
|
|
||||||
d="m 863.41371,346.56709 q -15.30711,0 -27.59919,-5.33429 -12.29208,-5.3343 -20.40949,-15.77097 l 16.23482,-13.91556 q 6.95778,8.11741 15.07519,11.82822 8.34934,3.47889 18.78601,3.47889 4.17466,0 7.65355,-0.9277 3.71082,-1.15963 6.26201,-3.24696 2.78311,-2.08734 4.17466,-4.87045 1.39156,-3.01504 1.39156,-6.49393 0,-6.03007 -4.40659,-9.74089 -2.31926,-1.62348 -7.42164,-3.47889 -4.87044,-2.08733 -12.75593,-4.17467 -13.4517,-3.47889 -22.03297,-7.88548 -8.58126,-4.4066 -13.21978,-9.97282 -3.47889,-4.40659 -5.10237,-9.50897 -1.62348,-5.33429 -1.62348,-11.59629 0,-7.65356 3.24696,-13.91556 3.47889,-6.49393 9.27704,-11.13245 6.03008,-4.87045 13.91556,-7.42163 8.11741,-2.55119 17.16253,-2.55119 8.58126,0 16.93059,2.31926 8.58126,2.31926 15.77097,6.72585 7.18971,4.4066 12.06015,10.43667 l -13.68363,15.07519 q -4.4066,-4.40659 -9.74089,-7.65355 -5.10237,-3.47889 -10.43667,-5.3343 -5.3343,-1.85541 -9.74089,-1.85541 -4.87045,0 -8.81319,0.9277 -3.94274,0.92771 -6.72586,2.78312 -2.55118,1.8554 -3.94274,4.63852 -1.39155,2.78311 -1.39155,6.262 0.23192,3.01504 1.39155,5.79815 1.39156,2.55118 3.71082,4.40659 2.55118,1.85541 7.65356,3.94274 5.10237,2.08734 12.98785,3.94274 11.5963,3.01504 19.01793,6.72586 7.65356,3.47889 12.06015,8.11741 4.63852,4.40659 6.49393,10.20474 1.85541,5.79815 1.85541,12.98786 0,10.43667 -6.03008,18.786 -5.79815,8.11741 -15.77096,12.75593 -9.97282,4.63852 -22.2649,4.63852 z"
|
|
||||||
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
|
||||||
id="path16861" />
|
|
||||||
<path
|
|
||||||
d="M 948.99398,344.24783 V 191.4086 h 23.88838 v 152.83923 z m -25.27993,-98.56854 v -23.1926 h 77.46325 v 23.1926 z"
|
|
||||||
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
|
||||||
id="path16863" />
|
|
||||||
<path
|
|
||||||
d="m 1076.5528,346.56709 q -17.8583,0 -32.0058,-8.11741 -13.9156,-8.34933 -22.033,-22.49682 -8.1174,-14.37941 -8.1174,-32.70156 0,-18.32216 8.1174,-32.46964 8.1174,-14.37941 22.033,-22.49682 14.1475,-8.34934 32.0058,-8.34934 17.6263,0 31.5419,8.34934 14.1475,8.11741 22.2649,22.49682 8.1174,14.14748 8.1174,32.46964 0,18.32215 -8.1174,32.70156 -8.1174,14.14749 -22.2649,22.49682 -13.9156,8.11741 -31.5419,8.11741 z m 0,-21.80104 q 10.9005,0 19.4818,-5.3343 8.5812,-5.56622 13.4517,-14.84326 4.8704,-9.50897 4.6385,-21.33719 0.2319,-12.06016 -4.6385,-21.33719 -4.8705,-9.50897 -13.4517,-14.84327 -8.5813,-5.3343 -19.4818,-5.3343 -10.9005,0 -19.7137,5.56623 -8.5813,5.3343 -13.4517,14.84326 -4.8705,9.27704 -4.6386,21.10527 -0.2319,11.82822 4.6386,21.33719 4.8704,9.27704 13.4517,14.84326 8.8132,5.3343 19.7137,5.3343 z"
|
|
||||||
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
|
||||||
id="path16865" />
|
|
||||||
<path
|
|
||||||
d="M 1168.3954,344.24783 V 222.48669 h 23.8884 v 121.76114 z m 11.5963,-148.66456 q -7.6536,0 -11.8282,-3.94274 -4.1747,-3.94274 -4.1747,-11.13245 0,-6.72585 4.1747,-10.90052 4.4065,-4.17467 11.8282,-4.17467 7.6535,0 11.8282,3.94274 4.1747,3.94275 4.1747,11.13245 0,6.72585 -4.4066,10.90052 -4.1747,4.17467 -11.5963,4.17467 z"
|
|
||||||
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
|
||||||
id="path16867" />
|
|
||||||
<path
|
|
||||||
d="M 1228.928,344.24783 V 222.48669 h 24.1203 v 38.26779 l -2.3192,-9.27704 q 2.5512,-8.81319 8.5812,-16.0029 6.262,-7.1897 14.1475,-11.36437 8.1174,-4.17467 16.6987,-4.17467 3.9427,0 7.4216,0.69578 3.7109,0.69578 5.7982,1.62348 l -6.262,25.97571 q -2.7831,-1.15963 -6.262,-1.85541 -3.247,-0.9277 -6.4939,-0.9277 -6.262,0 -12.0602,2.55119 -5.5662,2.31926 -9.9728,6.72585 -4.1747,4.17467 -6.7259,9.97282 -2.5512,5.56622 -2.5512,12.29207 v 67.25854 z"
|
|
||||||
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
|
||||||
id="path16869" />
|
|
||||||
<path
|
|
||||||
d="m 1374.1134,346.56709 q -18.786,0 -33.3973,-7.88548 -14.3794,-8.11741 -22.7288,-22.03297 -8.1174,-13.91556 -8.1174,-32.00579 0,-14.37941 4.6386,-26.20763 4.6385,-11.82823 12.7559,-20.40949 8.3493,-8.81319 19.7137,-13.45171 11.5963,-4.87045 25.048,-4.87045 11.8282,0 22.033,4.63852 10.2047,4.4066 17.6263,12.29208 7.6536,7.88549 11.5963,18.78601 4.1747,10.66859 3.9428,23.42452 l -0.2319,10.20475 h -99.4963 l -5.3343,-19.01794 h 84.1891 l -3.4788,3.94275 v -5.56623 q -0.6958,-7.65355 -5.1024,-13.68363 -4.4066,-6.03008 -11.1325,-9.50897 -6.7258,-3.47889 -14.6113,-3.47889 -12.524,0 -21.1053,4.87045 -8.5812,4.63852 -12.9878,13.91556 -4.4066,9.04511 -4.4066,22.49682 0,12.75593 5.3343,22.2649 5.3343,9.27704 15.0752,14.37941 9.7409,5.10237 22.4968,5.10237 9.0451,0 16.6987,-3.01504 7.8855,-3.01504 16.9306,-10.90052 l 12.0601,16.9306 q -5.5662,5.56622 -13.6836,9.74089 -7.8855,4.17467 -16.9306,6.72585 -8.8132,2.31926 -17.3945,2.31926 z"
|
|
||||||
style="font-family:'Lexend Deca';-inkscape-font-specification:'Lexend Deca';fill:#ff3e00;fill-opacity:1"
|
|
||||||
id="path16871" />
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
id="layer2"
|
|
||||||
style="display:none">
|
|
||||||
<path
|
|
||||||
id="path1657"
|
|
||||||
style="fill:#b4fae2;fill-opacity:1;stroke:#b4fae2;stroke-width:8;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
|
||||||
d="m 296,103.98242 -135.53125,177.9668 h 88.70117 z M 262.83008,230.05078 216,408.01758 351.53125,230.05078 Z"
|
|
||||||
transform="rotate(-4.156553,256,256.00691)" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 7.7 KiB |
@ -1,9 +0,0 @@
|
|||||||
import { aB as markRaw } from "./vendor-BCKkA27H.js";
|
|
||||||
let searchData$1 = { "index": { "reg": "{}", "text.cfg": '{"doc":0,"opt":1}', "text.map": "[{},{},{},{},{},{},{},{},{}]", "text.ctx": "[{}]" }, "idMap": {} };
|
|
||||||
const searchData = markRaw(searchData$1);
|
|
||||||
function onUpdate(cb) {
|
|
||||||
}
|
|
||||||
export {
|
|
||||||
onUpdate,
|
|
||||||
searchData
|
|
||||||
};
|
|
||||||
100
packages/ui/.histoire/dist/assets/state-BFrY_pEm.js
vendored
100
packages/ui/.histoire/dist/assets/state-BFrY_pEm.js
vendored
@ -1,100 +0,0 @@
|
|||||||
import { d as clientSupportPlugins, h as histoireConfig } from "./GenericMountStory.vue2-BX48YWx2.js";
|
|
||||||
import { d as defineComponent, r as ref, aC as watchEffect, aB as markRaw, o as openBlock, q as createBlock, aD as mergeProps, aE as resolveDynamicComponent, h as createCommentVNode, E as reactive, v as isRef, g as unref } from "./vendor-BCKkA27H.js";
|
|
||||||
const __default__ = {
|
|
||||||
inheritAttrs: false
|
|
||||||
};
|
|
||||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
||||||
...__default__,
|
|
||||||
__name: "GenericRenderStory",
|
|
||||||
props: {
|
|
||||||
story: {}
|
|
||||||
},
|
|
||||||
setup(__props) {
|
|
||||||
const props = __props;
|
|
||||||
const mountComponent = ref(null);
|
|
||||||
watchEffect(async () => {
|
|
||||||
var _a;
|
|
||||||
const clientPlugin = clientSupportPlugins[(_a = props.story.file) == null ? void 0 : _a.supportPluginId];
|
|
||||||
if (clientPlugin) {
|
|
||||||
try {
|
|
||||||
const pluginModule = await clientPlugin();
|
|
||||||
mountComponent.value = markRaw(pluginModule.RenderStory);
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
throw e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return (_ctx, _cache) => {
|
|
||||||
return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({
|
|
||||||
key: 0,
|
|
||||||
class: "histoire-generic-render-story __histoire-render-story",
|
|
||||||
story: _ctx.story
|
|
||||||
}, _ctx.$attrs), null, 16, ["story"])) : createCommentVNode("", true);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const STATE_SYNC = "__histoire:state-sync";
|
|
||||||
const SANDBOX_READY = "__histoire:sandbox-ready";
|
|
||||||
const EVENT_SEND = "__histoire:event";
|
|
||||||
const PREVIEW_SETTINGS_SYNC = "__histoire:preview-settings-sync";
|
|
||||||
const receivedSettings = reactive({});
|
|
||||||
function applyPreviewSettings(settings) {
|
|
||||||
Object.assign(receivedSettings, settings);
|
|
||||||
document.documentElement.setAttribute("dir", settings.textDirection);
|
|
||||||
const contrastColor = getContrastColor(settings);
|
|
||||||
document.documentElement.style.setProperty("--histoire-contrast-color", contrastColor);
|
|
||||||
if (histoireConfig.autoApplyContrastColor) {
|
|
||||||
document.documentElement.style.color = contrastColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function getContrastColor(setting) {
|
|
||||||
var _a;
|
|
||||||
return ((_a = histoireConfig.backgroundPresets.find((preset) => preset.color === setting.backgroundColor)) == null ? void 0 : _a.contrastColor) ?? "unset";
|
|
||||||
}
|
|
||||||
const isObject = (val) => val !== null && typeof val === "object";
|
|
||||||
function toRawDeep(val, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
|
|
||||||
const unwrappedValue = isRef(val) ? unref(val) : val;
|
|
||||||
if (typeof unwrappedValue === "symbol") {
|
|
||||||
return unwrappedValue.toString();
|
|
||||||
}
|
|
||||||
if (!isObject(unwrappedValue)) {
|
|
||||||
return unwrappedValue;
|
|
||||||
}
|
|
||||||
if (seen.has(unwrappedValue)) {
|
|
||||||
return seen.get(unwrappedValue);
|
|
||||||
}
|
|
||||||
if (Array.isArray(unwrappedValue)) {
|
|
||||||
const result = [];
|
|
||||||
seen.set(unwrappedValue, result);
|
|
||||||
let list = unwrappedValue.map((value) => toRawDeep(value, clean, seen));
|
|
||||||
if (clean) {
|
|
||||||
list = list.filter((value) => typeof value !== "function");
|
|
||||||
}
|
|
||||||
result.push(...list);
|
|
||||||
return result;
|
|
||||||
} else {
|
|
||||||
const result = {};
|
|
||||||
seen.set(unwrappedValue, result);
|
|
||||||
toRawObject(unwrappedValue, result, clean, seen);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function toRawObject(obj, target, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
|
|
||||||
Object.keys(obj).forEach((key) => {
|
|
||||||
if (clean && typeof obj[key] === "function") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
target[key] = toRawDeep(obj[key], clean, seen);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
export {
|
|
||||||
EVENT_SEND as E,
|
|
||||||
PREVIEW_SETTINGS_SYNC as P,
|
|
||||||
STATE_SYNC as S,
|
|
||||||
_sfc_main as _,
|
|
||||||
applyPreviewSettings as a,
|
|
||||||
SANDBOX_READY as b,
|
|
||||||
getContrastColor as g,
|
|
||||||
toRawDeep as t
|
|
||||||
};
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import { i as defineStore, r as ref, c as computed } from "./vendor-BCKkA27H.js";
|
|
||||||
import { r as router } from "./GenericMountStory.vue2-BX48YWx2.js";
|
|
||||||
const useStoryStore = defineStore("story", () => {
|
|
||||||
const stories = ref([]);
|
|
||||||
function setStories(value) {
|
|
||||||
stories.value = value;
|
|
||||||
}
|
|
||||||
const currentStory = computed(() => stories.value.find((s) => s.id === router.currentRoute.value.params.storyId));
|
|
||||||
const currentVariant = computed(() => {
|
|
||||||
var _a;
|
|
||||||
return (_a = currentStory.value) == null ? void 0 : _a.variants.find((v) => v.id === router.currentRoute.value.query.variantId);
|
|
||||||
});
|
|
||||||
const maps = computed(() => {
|
|
||||||
const storyMap = /* @__PURE__ */ new Map();
|
|
||||||
const variantMap = /* @__PURE__ */ new Map();
|
|
||||||
for (const story of stories.value) {
|
|
||||||
storyMap.set(story.id, story);
|
|
||||||
for (const variant of story.variants) {
|
|
||||||
variantMap.set(`${story.id}:${variant.id}`, variant);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
stories: storyMap,
|
|
||||||
variants: variantMap
|
|
||||||
};
|
|
||||||
});
|
|
||||||
function getStoryById(id) {
|
|
||||||
return maps.value.stories.get(id);
|
|
||||||
}
|
|
||||||
function getVariantById(idWithStoryId) {
|
|
||||||
return maps.value.variants.get(idWithStoryId);
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
stories,
|
|
||||||
setStories,
|
|
||||||
currentStory,
|
|
||||||
currentVariant,
|
|
||||||
getStoryById,
|
|
||||||
getVariantById
|
|
||||||
};
|
|
||||||
});
|
|
||||||
export {
|
|
||||||
useStoryStore as u
|
|
||||||
};
|
|
||||||
3127
packages/ui/.histoire/dist/assets/style-D55TbI9c.css
vendored
3127
packages/ui/.histoire/dist/assets/style-D55TbI9c.css
vendored
File diff suppressed because it is too large
Load Diff
40964
packages/ui/.histoire/dist/assets/vendor-BCKkA27H.js
vendored
40964
packages/ui/.histoire/dist/assets/vendor-BCKkA27H.js
vendored
File diff suppressed because it is too large
Load Diff
105
packages/ui/.histoire/dist/histoire.json
vendored
105
packages/ui/.histoire/dist/histoire.json
vendored
@ -1,105 +0,0 @@
|
|||||||
{
|
|
||||||
"stories": [
|
|
||||||
{
|
|
||||||
"id": "src-lib-elements-checkbox-story-svelte",
|
|
||||||
"title": "Checkbox",
|
|
||||||
"group": null,
|
|
||||||
"layout": {
|
|
||||||
"type": "single",
|
|
||||||
"iframe": true
|
|
||||||
},
|
|
||||||
"icon": null,
|
|
||||||
"iconColor": null,
|
|
||||||
"docsOnly": false,
|
|
||||||
"variants": [
|
|
||||||
{
|
|
||||||
"id": "_default",
|
|
||||||
"title": "default"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"relativePath": "src/lib/elements/Checkbox.story.svelte",
|
|
||||||
"supportPluginId": "svelte4",
|
|
||||||
"treePath": [
|
|
||||||
"Checkbox"
|
|
||||||
],
|
|
||||||
"virtual": false,
|
|
||||||
"markdownFile": null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "src-lib-elements-float-story-svelte",
|
|
||||||
"title": "Float",
|
|
||||||
"group": null,
|
|
||||||
"layout": {
|
|
||||||
"type": "single",
|
|
||||||
"iframe": true
|
|
||||||
},
|
|
||||||
"icon": null,
|
|
||||||
"iconColor": null,
|
|
||||||
"docsOnly": false,
|
|
||||||
"variants": [
|
|
||||||
{
|
|
||||||
"id": "_default",
|
|
||||||
"title": "default"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"relativePath": "src/lib/elements/Float.story.svelte",
|
|
||||||
"supportPluginId": "svelte4",
|
|
||||||
"treePath": [
|
|
||||||
"Float"
|
|
||||||
],
|
|
||||||
"virtual": false,
|
|
||||||
"markdownFile": null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "src-lib-elements-integer-story-svelte",
|
|
||||||
"title": "Integer",
|
|
||||||
"group": null,
|
|
||||||
"layout": {
|
|
||||||
"type": "single",
|
|
||||||
"iframe": true
|
|
||||||
},
|
|
||||||
"icon": null,
|
|
||||||
"iconColor": null,
|
|
||||||
"docsOnly": false,
|
|
||||||
"variants": [
|
|
||||||
{
|
|
||||||
"id": "_default",
|
|
||||||
"title": "default"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"relativePath": "src/lib/elements/Integer.story.svelte",
|
|
||||||
"supportPluginId": "svelte4",
|
|
||||||
"treePath": [
|
|
||||||
"Integer"
|
|
||||||
],
|
|
||||||
"virtual": false,
|
|
||||||
"markdownFile": null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "src-lib-elements-select-story-svelte",
|
|
||||||
"title": "Select",
|
|
||||||
"group": null,
|
|
||||||
"layout": {
|
|
||||||
"type": "single",
|
|
||||||
"iframe": true
|
|
||||||
},
|
|
||||||
"icon": null,
|
|
||||||
"iconColor": null,
|
|
||||||
"docsOnly": false,
|
|
||||||
"variants": [
|
|
||||||
{
|
|
||||||
"id": "_default",
|
|
||||||
"title": "default"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"relativePath": "src/lib/elements/Select.story.svelte",
|
|
||||||
"supportPluginId": "svelte4",
|
|
||||||
"treePath": [
|
|
||||||
"Select"
|
|
||||||
],
|
|
||||||
"virtual": false,
|
|
||||||
"markdownFile": null
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"markdownFiles": []
|
|
||||||
}
|
|
||||||
16
packages/ui/.histoire/dist/index.html
vendored
16
packages/ui/.histoire/dist/index.html
vendored
@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Histoire</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<link rel="stylesheet" href="/assets/style-D55TbI9c.css">
|
|
||||||
|
|
||||||
<link rel="preload" href="/assets/vendor-BCKkA27H.js" as="script" crossOrigin="anonymous">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/assets/bundle-main-BYW_JKZH.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
4
packages/ui/.prettierignore
Normal file
4
packages/ui/.prettierignore
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
# Ignore files for PNPM, NPM and YARN
|
||||||
|
pnpm-lock.yaml
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
8
packages/ui/.prettierrc
Normal file
8
packages/ui/.prettierrc
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"useTabs": true,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"printWidth": 100,
|
||||||
|
"plugins": ["prettier-plugin-svelte"],
|
||||||
|
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||||
|
}
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import { defineConfig } from 'histoire'
|
|
||||||
import { HstSvelte } from '@histoire/plugin-svelte'
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
setupFile: '/src/histoire.setup.ts',
|
|
||||||
storyMatch: [
|
|
||||||
'./src/lib/**/*.story.svelte',
|
|
||||||
],
|
|
||||||
plugins: [
|
|
||||||
HstSvelte(),
|
|
||||||
],
|
|
||||||
})
|
|
||||||
@ -9,11 +9,8 @@
|
|||||||
"prepublishOnly": "npm run package",
|
"prepublishOnly": "npm run package",
|
||||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||||
"test": "vitest",
|
"lint": "prettier --check . && eslint .",
|
||||||
"lint": "eslint .",
|
"format": "prettier --write ."
|
||||||
"story:dev": "histoire dev",
|
|
||||||
"story:build": "histoire build",
|
|
||||||
"story:preview": "histoire preview"
|
|
||||||
},
|
},
|
||||||
"exports": {
|
"exports": {
|
||||||
".": {
|
".": {
|
||||||
@ -27,34 +24,34 @@
|
|||||||
"!dist/**/*.test.*",
|
"!dist/**/*.test.*",
|
||||||
"!dist/**/*.spec.*"
|
"!dist/**/*.spec.*"
|
||||||
],
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"@nodes/types": "link:../types"
|
||||||
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"svelte": "^4.0.0"
|
"svelte": "^5.0.0-next.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@histoire/plugin-svelte": "^0.17.17",
|
"@sveltejs/adapter-auto": "^3.0.0",
|
||||||
"@sveltejs/adapter-auto": "^3.2.0",
|
"@sveltejs/kit": "^2.0.0",
|
||||||
"@sveltejs/adapter-static": "^3.0.1",
|
"@sveltejs/package": "^2.0.0",
|
||||||
"@sveltejs/kit": "^2.5.7",
|
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||||
"@sveltejs/package": "^2.3.1",
|
"@types/eslint": "^8.56.0",
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.1.0",
|
"@typescript-eslint/eslint-plugin": "^7.0.0",
|
||||||
"@types/eslint": "^8.56.10",
|
"@typescript-eslint/parser": "^7.0.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^7.7.1",
|
"eslint": "^8.56.0",
|
||||||
"@typescript-eslint/parser": "^7.7.1",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
"eslint": "^9.1.1",
|
"eslint-plugin-svelte": "^2.36.0-next.4",
|
||||||
"eslint-plugin-svelte": "^2.38.0",
|
"prettier": "^3.1.1",
|
||||||
"histoire": "^0.17.17",
|
"prettier-plugin-svelte": "^3.1.2",
|
||||||
"publint": "^0.2.7",
|
"publint": "^0.1.9",
|
||||||
"svelte": "^4.2.15",
|
"svelte": "^5.0.0-next.1",
|
||||||
"svelte-check": "^3.7.0",
|
"svelte-check": "^3.6.0",
|
||||||
"tslib": "^2.6.2",
|
"tslib": "^2.4.1",
|
||||||
"typescript": "^5.4.5",
|
"typescript": "^5.0.0",
|
||||||
"vite": "^5.2.10",
|
"vite": "^5.0.11",
|
||||||
"vitest": "^1.5.2"
|
"vitest": "^1.5.3"
|
||||||
},
|
},
|
||||||
"svelte": "./dist/index.js",
|
"svelte": "./dist/index.js",
|
||||||
"types": "./dist/index.d.ts",
|
"types": "./dist/index.d.ts",
|
||||||
"type": "module",
|
"type": "module"
|
||||||
"dependencies": {
|
|
||||||
"@nodes/types": "link:../types"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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">
|
<script lang="ts">
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
|
||||||
export let value = 0.5;
|
export let value = 0.5;
|
||||||
export let step = 0.01;
|
export let step = 0.01;
|
||||||
export let min = 0;
|
export let min = 0;
|
||||||
export let max = 1;
|
export let max = 1;
|
||||||
export let id = "";
|
export let id = '';
|
||||||
|
|
||||||
if (min > max) {
|
if (min > max) {
|
||||||
[min, max] = [max, min];
|
[min, max] = [max, min];
|
||||||
}
|
}
|
||||||
if (value > max) {
|
if (value > max) {
|
||||||
max = value;
|
max = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
function strip(input: number) {
|
function strip(input: number) {
|
||||||
return +parseFloat(input + "").toPrecision(2);
|
return +parseFloat(input + '').toPrecision(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
let inputEl: HTMLInputElement;
|
let inputEl: HTMLInputElement;
|
||||||
|
|
||||||
$: if ((value || 0).toString().length > 5) {
|
$: if ((value || 0).toString().length > 5) {
|
||||||
value = strip(value || 0);
|
value = strip(value || 0);
|
||||||
}
|
}
|
||||||
$: value !== undefined && handleChange();
|
$: value !== undefined && handleChange();
|
||||||
let oldValue: number;
|
let oldValue: number;
|
||||||
function handleChange() {
|
function handleChange() {
|
||||||
if (value === oldValue) return;
|
if (value === oldValue) return;
|
||||||
oldValue = value;
|
oldValue = value;
|
||||||
dispatch("change", parseFloat(value + ""));
|
dispatch('change', parseFloat(value + ''));
|
||||||
}
|
}
|
||||||
|
|
||||||
$: width = Number.isFinite(value)
|
$: width = Number.isFinite(value)
|
||||||
? Math.max((value?.toString().length ?? 1) * 8, 50) + "px"
|
? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px'
|
||||||
: "20px";
|
: '20px';
|
||||||
|
|
||||||
let isMouseDown = false;
|
let isMouseDown = false;
|
||||||
/* let downX = 0; */
|
/* let downX = 0; */
|
||||||
/* let downY = 0; */
|
/* let downY = 0; */
|
||||||
let downV = 0;
|
let downV = 0;
|
||||||
let vx = 0;
|
let vx = 0;
|
||||||
/* let vy = 0; */
|
/* let vy = 0; */
|
||||||
let rect: DOMRect;
|
let rect: DOMRect;
|
||||||
|
|
||||||
function handleMouseDown(ev: MouseEvent) {
|
function handleMouseDown(ev: MouseEvent) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
|
|
||||||
inputEl.focus();
|
inputEl.focus();
|
||||||
|
|
||||||
isMouseDown = true;
|
isMouseDown = true;
|
||||||
|
|
||||||
downV = value;
|
downV = value;
|
||||||
/* downX = ev.clientX; */
|
/* downX = ev.clientX; */
|
||||||
/* downY = ev.clientY; */
|
/* downY = ev.clientY; */
|
||||||
rect = inputEl.getBoundingClientRect();
|
rect = inputEl.getBoundingClientRect();
|
||||||
|
|
||||||
window.removeEventListener("mousemove", handleMouseMove);
|
window.removeEventListener('mousemove', handleMouseMove);
|
||||||
window.addEventListener("mousemove", handleMouseMove);
|
window.addEventListener('mousemove', handleMouseMove);
|
||||||
window.addEventListener("mouseup", handleMouseUp);
|
window.addEventListener('mouseup', handleMouseUp);
|
||||||
document.body.style.cursor = "ew-resize";
|
document.body.style.cursor = 'ew-resize';
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleMouseUp() {
|
function handleMouseUp() {
|
||||||
isMouseDown = false;
|
isMouseDown = false;
|
||||||
|
|
||||||
if (downV === value) {
|
if (downV === value) {
|
||||||
inputEl.focus();
|
inputEl.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (value > max) {
|
if (value > max) {
|
||||||
max = value;
|
max = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (value < min) {
|
if (value < min) {
|
||||||
min = value;
|
min = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
// setTimeout(() => {
|
// setTimeout(() => {
|
||||||
// if (value >= 0) {
|
// if (value >= 0) {
|
||||||
// max = getBoundingValue(value);
|
// max = getBoundingValue(value);
|
||||||
// min = 0;
|
// min = 0;
|
||||||
// } else {
|
// } else {
|
||||||
// min = getBoundingValue(value);
|
// min = getBoundingValue(value);
|
||||||
// max = 0;
|
// max = 0;
|
||||||
// }
|
// }
|
||||||
// }, 500);
|
// }, 500);
|
||||||
|
|
||||||
document.body.style.cursor = "unset";
|
document.body.style.cursor = 'unset';
|
||||||
window.removeEventListener("mouseup", handleMouseUp);
|
window.removeEventListener('mouseup', handleMouseUp);
|
||||||
window.removeEventListener("mousemove", handleMouseMove);
|
window.removeEventListener('mousemove', handleMouseMove);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleKeyDown(ev: KeyboardEvent) {
|
function handleKeyDown(ev: KeyboardEvent) {
|
||||||
if (ev.key === "Escape" || ev.key === "Enter") {
|
if (ev.key === 'Escape' || ev.key === 'Enter') {
|
||||||
handleMouseUp();
|
handleMouseUp();
|
||||||
inputEl.blur();
|
inputEl.blur();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleMouseMove(ev: MouseEvent) {
|
function handleMouseMove(ev: MouseEvent) {
|
||||||
vx = (ev.clientX - rect.left) / rect.width;
|
vx = (ev.clientX - rect.left) / rect.width;
|
||||||
/* vy = ev.clientY - downY; */
|
/* vy = ev.clientY - downY; */
|
||||||
|
|
||||||
if (ev.ctrlKey) {
|
if (ev.ctrlKey) {
|
||||||
let v = min + (max - min) * vx;
|
let v = min + (max - min) * vx;
|
||||||
value = v;
|
value = v;
|
||||||
} else {
|
} else {
|
||||||
value = Math.max(Math.min(min + (max - min) * vx, max), min);
|
value = Math.max(Math.min(min + (max - min) * vx, max), min);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="component-wrapper" class:is-down={isMouseDown}>
|
<div class="component-wrapper" class:is-down={isMouseDown}>
|
||||||
<span
|
<span class="overlay" style={`width: ${((value - min) / (max - min)) * 100}%`}></span>
|
||||||
class="overlay"
|
<input
|
||||||
style={`width: ${((value - min) / (max - min)) * 100}%`}
|
bind:value
|
||||||
/>
|
bind:this={inputEl}
|
||||||
<input
|
{id}
|
||||||
bind:value
|
{step}
|
||||||
bind:this={inputEl}
|
{max}
|
||||||
{id}
|
{min}
|
||||||
{step}
|
on:keydown={handleKeyDown}
|
||||||
{max}
|
on:mousedown={handleMouseDown}
|
||||||
{min}
|
on:mouseup={handleMouseUp}
|
||||||
on:keydown={handleKeyDown}
|
type="number"
|
||||||
on:mousedown={handleMouseDown}
|
style={`width:${width};`}
|
||||||
on:mouseup={handleMouseUp}
|
/>
|
||||||
type="number"
|
|
||||||
style={`width:${width};`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.component-wrapper {
|
.component-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: var(--layer-2, #4b4b4b);
|
background-color: var(--layer-2, #4b4b4b);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: box-shadow 0.3s ease;
|
transition: box-shadow 0.3s ease;
|
||||||
border: solid 1px var(--outline);
|
border: solid 1px var(--outline);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: var(--border-radius, 2px);
|
border-radius: var(--border-radius, 2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"]::-webkit-inner-spin-button,
|
input[type='number']::-webkit-inner-spin-button,
|
||||||
input[type="number"]::-webkit-outer-spin-button {
|
input[type='number']::-webkit-outer-spin-button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="number"] {
|
input[type='number'] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
appearance: textfield;
|
appearance: textfield;
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: var(--padding, 6px);
|
padding: var(--padding, 6px);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
padding-inline: 10px;
|
padding-inline: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: none;
|
border: none;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-down > input {
|
.is-down > input {
|
||||||
cursor: ew-resize !important;
|
cursor: ew-resize !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
background-color: var(--text-color);
|
background-color: var(--text-color);
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: width 0.3s ease;
|
transition: width 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-down > .overlay {
|
.is-down > .overlay {
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
|
||||||
@ -1,18 +1,18 @@
|
|||||||
import adapter from '@sveltejs/adapter-static';
|
import adapter from '@sveltejs/adapter-auto';
|
||||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||||
|
|
||||||
/** @type {import('@sveltejs/kit').Config} */
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||||
// for more information about preprocessors
|
// for more information about preprocessors
|
||||||
preprocess: vitePreprocess(),
|
preprocess: vitePreprocess(),
|
||||||
|
|
||||||
kit: {
|
kit: {
|
||||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
||||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||||
adapter: adapter()
|
adapter: adapter()
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export default config;
|
export default config;
|
||||||
|
|||||||
@ -2,8 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
|
|||||||
import { defineConfig } from 'vitest/config';
|
import { defineConfig } from 'vitest/config';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [sveltekit()],
|
plugins: [sveltekit()],
|
||||||
test: {
|
test: {
|
||||||
include: ['src/**/*.{test,spec}.{js,ts}']
|
include: ['src/**/*.{test,spec}.{js,ts}']
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@ -14,6 +14,6 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vite": "^5.2.10",
|
"vite": "^5.2.10",
|
||||||
"vitest": "^1.5.2"
|
"vitest": "^1.5.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
4196
pnpm-lock.yaml
4196
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user