@nil-/doc 2.0.0 → 2.0.2

package/package/components/block/controls/props/Color.svelte

@@ -1,120 +0,0 @@
-<script lang="ts" module>const colorSetter = (format, color) => {
-  switch (format) {
-    case "hex":
-      return color.hex.substring(0, 7);
-    case "hexa":
-      return color.hex.substring(0, 9);
-    case "hsl":
-      return color.hslString;
-    case "hsla":
-      return color.hslaString;
-    case "rgb":
-      return color.rgbString;
-    case "rgba":
-    default:
-      return color.rgbaString;
-  }
-};
-</script>
-
-<script lang="ts">import { getName, getFormat } from "./misc/utils";
-import { defaulter } from "./misc/defaulter";
-import NameHeader from "./misc/Name.svelte";
-import Toggle from "./misc/Toggle.svelte";
-let {
-  value = $bindable(),
-  info,
-  depth,
-  disabled = false,
-  visible = false
-} = $props();
-let ivalue = $state(value ?? defaulter(info));
-let enabled = $state(value !== void 0);
-const action = (d, { format, P }) => {
-  d.style.borderColor = ivalue;
-  const picker = new P({
-    parent: d,
-    popup: "left",
-    editorFormat: format.substring(0, 3),
-    editor: true,
-    alpha: 4 === format.length,
-    onChange: (color) => {
-      ivalue = colorSetter(getFormat(info), color);
-      d.style.borderColor = ivalue;
-    },
-    color: ivalue
-  });
-  return {
-    update: (format2) => {
-      picker.setOptions({
-        alpha: 4 === format2.length,
-        editorFormat: format2.substring(0, 3)
-      });
-    },
-    destroy: () => picker.destroy()
-  };
-};
-const set_value = (v) => {
-  value = v;
-};
-$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
-</script>
-
-{#if visible}
-    <div>
-        <NameHeader name={getName(info)} {depth} />
-        <div>
-            {#await import("vanilla-picker")}
-                <button>
-                    {ivalue}
-                </button>
-            {:then { default: P }}
-                <button
-                    style:height="1.5rem"
-                    style:width="12.5rem"
-                    use:action={{ format: getFormat(info), P }}
-                    disabled={!enabled || disabled}
-                >
-                    {ivalue}
-                </button>
-            {/await}
-        </div>
-        <div><Toggle bind:toggled={enabled} {disabled} /></div>
-    </div>
-{/if}
-
-<style>
-    button {
-        font-size: 0.7rem;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-        border-left-width: 10px;
-        border-right-width: 10px;
-        border-style: solid;
-        background-color: var(--i-nil-doc-bg-color);
-        color: var(--i-nil-doc-color);
-        outline: 1px solid gray;
-    }
-
-    button[disabled] {
-        border-color: gray !important;
-    }
-
-    button :global(.popup.popup_top) {
-        left: -1.3rem !important;
-        color: var(--i-nil-doc-color) !important;
-        box-shadow: currentColor 0px 0px 10px 0px !important;
-    }
-
-    button :global(.picker_wrapper),
-    button :global(.picker_arrow),
-    button :global(.picker_arrow::before),
-    button :global(.picker_arrow::after) {
-        background-color: var(--i-nil-doc-bg-color) !important;
-    }
-
-    button :global(.picker_done > button) {
-        background: var(--i-nil-doc-bg-color) !important;
-        color: var(--i-nil-doc-color) !important;
-    }
-</style>

package/package/components/block/controls/props/Color.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Unionized, PropType } from "../types";
-type $$ComponentProps = {
-    value: string | undefined;
-    info: Unionized<PropType<"color">>;
-    depth: number;
-    disabled?: boolean;
-    visible?: boolean;
-};
-declare const Color: import("svelte").Component<$$ComponentProps, {}, "value">;
-type Color = ReturnType<typeof Color>;
-export default Color;

package/package/components/block/controls/props/Component.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">import Text from "./Text.svelte";
-import Number from "./Number.svelte";
-import Range from "./Range.svelte";
-import Toggle from "./Toggle.svelte";
-import Select from "./Select.svelte";
-import Tuple from "./Tuple.svelte";
-import Table from "./Table.svelte";
-import Color from "./Color.svelte";
-import Button from "./Button.svelte";
-let {
-  value = $bindable(),
-  info,
-  depth,
-  disabled = false,
-  visible = false
-} = $props();
-</script>
-
-{#if info instanceof Array}
-    {#if "table" === info[1]}
-        <Table {info} bind:value {depth} {disabled} {visible} />
-    {:else if "tuple" === info[1]}
-        <Tuple {info} bind:value {depth} {disabled} {visible} />
-    {:else if "text" === info[1]}
-        <Text {info} bind:value {depth} {disabled} {visible} />
-    {:else if "color" === info[1]}
-        <Color {info} bind:value {depth} {disabled} {visible} />
-    {:else if "number" === info[1]}
-        <Number {info} bind:value {depth} {disabled} {visible} />
-    {:else if "range" === info[1]}
-        <Range {info} bind:value {depth} {disabled} {visible} />
-    {:else if "select" === info[1]}
-        <Select {info} bind:value {depth} {disabled} {visible} />
-    {:else if "toggle" === info[1]}
-        <Toggle {info} bind:value {depth} {disabled} {visible} />
-    {:else if "button" === info[1]}
-        <Button {info} {visible} />
-    {/if}
-{:else if "table" === info.type}
-    <Table {info} bind:value {depth} {disabled} {visible} />
-{:else if "tuple" === info.type}
-    <Tuple {info} bind:value {depth} {disabled} {visible} />
-{:else if "text" === info.type}
-    <Text {info} bind:value {depth} {disabled} {visible} />
-{:else if "color" === info.type}
-    <Color {info} bind:value {depth} {disabled} {visible} />
-{:else if "number" === info.type}
-    <Number {info} bind:value {depth} {disabled} {visible} />
-{:else if "range" === info.type}
-    <Range {info} bind:value {depth} {disabled} {visible} />
-{:else if "select" === info.type}
-    <Select {info} bind:value {depth} {disabled} {visible} />
-{:else if "toggle" === info.type}
-    <Toggle {info} bind:value {depth} {disabled} {visible} />
-{:else if "button" === info.type}
-    <Button {info} {visible} />
-{/if}

package/package/components/block/controls/props/Component.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { SpecialProp, Prop } from "../types";
-type $$ComponentProps = {
-    value: any;
-    info: Prop | SpecialProp;
-    depth: number;
-    disabled?: boolean;
-    visible?: boolean;
-};
-declare const Component: import("svelte").Component<$$ComponentProps, {}, "value">;
-type Component = ReturnType<typeof Component>;
-export default Component;

package/package/components/block/controls/props/Number.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">import { getName } from "./misc/utils";
-import { defaulter } from "./misc/defaulter";
-import NameHeader from "./misc/Name.svelte";
-import Toggle from "./misc/Toggle.svelte";
-let {
-  value = $bindable(),
-  info,
-  depth,
-  disabled = false,
-  visible = false
-} = $props();
-let ivalue = $state(value ?? defaulter(info));
-let enabled = $state(value !== void 0);
-const set_value = (v) => {
-  value = v;
-};
-$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
-</script>
-
-{#if visible}
-    <div>
-        <NameHeader name={getName(info)} {depth} />
-        <div>
-            <input
-                class="control"
-                type="number"
-                bind:value={ivalue}
-                disabled={!enabled || disabled}
-            />
-        </div>
-        <div><Toggle bind:toggled={enabled} {disabled} /></div>
-    </div>
-{/if}

package/package/components/block/controls/props/Number.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Unionized, PropType } from "../types";
-type $$ComponentProps = {
-    value: number | undefined;
-    info: Unionized<PropType<"number">>;
-    depth: number;
-    disabled?: boolean;
-    visible?: boolean;
-};
-declare const Number: import("svelte").Component<$$ComponentProps, {}, "value">;
-type Number = ReturnType<typeof Number>;
-export default Number;

package/package/components/block/controls/props/Props.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">import Component from "./Component.svelte";
-import { getName } from "./misc/utils";
-let {
-  infos,
-  values,
-  visible
-} = $props();
-</script>
-
-{#each infos as info}
-    <Component
-        {info}
-        depth={1}
-        {visible} 
-        bind:value={$values.props[getName(info)]}
-    />
-{/each}

package/package/components/block/controls/props/Props.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { SpecialProp, Prop } from "../types";
-import type { ControlValue } from "../../context";
-import type { Writable } from "svelte/store";
-type $$ComponentProps = {
-    infos: (SpecialProp | Prop)[];
-    values: Writable<ControlValue>;
-    visible: boolean;
-};
-declare const Props: import("svelte").Component<$$ComponentProps, {}, "">;
-type Props = ReturnType<typeof Props>;
-export default Props;

package/package/components/block/controls/props/Range.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Unionized, PropType } from "../types";
-type $$ComponentProps = {
-    value: number | undefined;
-    info: Unionized<PropType<"range">>;
-    depth: number;
-    disabled?: boolean;
-    visible?: boolean;
-};
-declare const Range: import("svelte").Component<$$ComponentProps, {}, "value">;
-type Range = ReturnType<typeof Range>;
-export default Range;

package/package/components/block/controls/props/Select.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">import { defaulter } from "./misc/defaulter";
-import { getValues, getName } from "./misc/utils";
-import NameHeader from "./misc/Name.svelte";
-import Toggle from "./misc/Toggle.svelte";
-let {
-  value = $bindable(),
-  info,
-  depth,
-  disabled = false,
-  visible = false
-} = $props();
-let ivalue = $state(value ?? defaulter(info));
-let enabled = $state(value !== void 0);
-const set_value = (v) => {
-  value = v;
-};
-$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
-</script>
-
-{#if visible}
-    <div>
-        <NameHeader name={getName(info)} {depth} />
-        <div>
-            <select class="control" bind:value={ivalue} disabled={!enabled || disabled}>
-                {#each getValues(info) as v}
-                    <option value={v}>{v}</option>
-                {/each}
-            </select>
-        </div>
-        <div><Toggle bind:toggled={enabled} {disabled} /></div>
-    </div>
-{/if}
-
-<style>
-    select {
-        text-align: center;
-    }
-</style>

package/package/components/block/controls/props/Select.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Unionized, PropType } from "../types";
-type $$ComponentProps = {
-    value: string | undefined;
-    info: Unionized<PropType<"select">>;
-    depth: number;
-    disabled?: boolean;
-    visible?: boolean;
-};
-declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
-type Select = ReturnType<typeof Select>;
-export default Select;

package/package/components/block/controls/props/Table.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">import Component from "./Component.svelte";
-import Header from "./misc/GroupHeader.svelte";
-import { defaulter } from "./misc/defaulter";
-import { getValues, getName } from "./misc/utils";
-let {
-  value = $bindable(),
-  info,
-  depth,
-  disabled = false,
-  visible = false
-} = $props();
-let ivalue = $state(value ?? defaulter(info));
-let enabled = $state(value !== void 0);
-let expand = $state(getValues(info).length > 0 ? true : void 0);
-const set_value = (v) => {
-  value = v;
-};
-$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
-</script>
-
-<Header name={getName(info)} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
-
-{#each getValues(info) as v, i (i)}
-    <Component
-        info={v}
-        bind:value={ivalue[getName(v)]}
-        depth={depth + 1}
-        disabled={!enabled || disabled}
-        visible={visible && expand && enabled && !disabled}
-    />
-{/each}

package/package/components/block/controls/props/Table.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { ValueType } from "../../types";
-import type { Unionized, PropType } from "../types";
-type $$ComponentProps = {
-    value: Record<string, ValueType> | undefined;
-    info: Unionized<PropType<"table">>;
-    depth: number;
-    disabled?: boolean;
-    visible?: boolean;
-};
-declare const Table: import("svelte").Component<$$ComponentProps, {}, "value">;
-type Table = ReturnType<typeof Table>;
-export default Table;

package/package/components/block/controls/props/Text.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">import { getName } from "./misc/utils";
-import { defaulter } from "./misc/defaulter";
-import NameHeader from "./misc/Name.svelte";
-import Toggle from "./misc/Toggle.svelte";
-let {
-  value = $bindable(),
-  info,
-  depth,
-  disabled = false,
-  visible = false
-} = $props();
-let ivalue = $state(value ?? defaulter(info));
-let enabled = $state(value !== void 0);
-const set_value = (v) => {
-  value = v;
-};
-$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
-</script>
-
-{#if visible}
-    <div>
-        <NameHeader name={getName(info)} {depth} />
-        <div>
-            <input
-                class="control"
-                type="text"
-                bind:value={ivalue}
-                disabled={!enabled || disabled}
-            />
-        </div>
-        <div><Toggle bind:toggled={enabled} {disabled} /></div>
-    </div>
-{/if}

package/package/components/block/controls/props/Text.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Unionized, PropType } from "../types";
-type $$ComponentProps = {
-    value: string | undefined;
-    info: Unionized<PropType<"text">>;
-    depth: number;
-    disabled?: boolean;
-    visible?: boolean;
-};
-declare const Text: import("svelte").Component<$$ComponentProps, {}, "value">;
-type Text = ReturnType<typeof Text>;
-export default Text;

package/package/components/block/controls/props/Toggle.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">import { getName } from "./misc/utils";
-import { defaulter } from "./misc/defaulter";
-import NameHeader from "./misc/Name.svelte";
-import Toggle from "./misc/Toggle.svelte";
-let {
-  value = $bindable(),
-  info,
-  depth,
-  disabled = false,
-  visible = false
-} = $props();
-let ivalue = $state(value ?? defaulter(info));
-let enabled = $state(value !== void 0);
-const set_value = (v) => {
-  value = v;
-};
-$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
-</script>
-
-{#if visible}
-    <div>
-        <NameHeader name={getName(info)} {depth} />
-        <div><Toggle bind:toggled={ivalue} disabled={!enabled || disabled} /></div>
-        <div><Toggle bind:toggled={enabled} {disabled} /></div>
-    </div>
-{/if}

package/package/components/block/controls/props/Toggle.svelte.d.ts

@@ -1,12 +0,0 @@
-import Toggle from "./misc/Toggle.svelte";
-import type { Unionized, PropType } from "../types";
-type $$ComponentProps = {
-    value: boolean | undefined;
-    info: Unionized<PropType<"toggle">>;
-    depth: number;
-    disabled?: boolean;
-    visible?: boolean;
-};
-declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "value">;
-type Toggle = ReturnType<typeof Toggle>;
-export default Toggle;

package/package/components/block/controls/props/Tuple.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">import Component from "./Component.svelte";
-import Header from "./misc/GroupHeader.svelte";
-import { defaulter } from "./misc/defaulter";
-import { getValues, getName, addName } from "./misc/utils";
-let {
-  value = $bindable(),
-  info,
-  depth,
-  disabled = false,
-  visible = false
-} = $props();
-let ivalue = $state(value ?? defaulter(info));
-let enabled = $state(value !== void 0);
-let expand = $state(getValues(info).length > 0 ? true : void 0);
-const set_value = (v) => {
-  value = v;
-};
-$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
-</script>
-
-<Header name={getName(info)} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
-
-{#each getValues(info) as v, i (i)}
-    <Component
-        info={addName(`${i}`, v)}
-        bind:value={ivalue[i]}
-        depth={depth + 1}
-        disabled={!enabled || disabled}
-        visible={visible && expand && enabled && !disabled}
-    />
-{/each}

package/package/components/block/controls/props/Tuple.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { ValueType } from "../../types";
-import type { Unionized, PropType } from "../types";
-type $$ComponentProps = {
-    value: ValueType[] | undefined;
-    info: Unionized<PropType<"tuple">>;
-    depth: number;
-    disabled?: boolean;
-    visible?: boolean;
-};
-declare const Tuple: import("svelte").Component<$$ComponentProps, {}, "value">;
-type Tuple = ReturnType<typeof Tuple>;
-export default Tuple;

package/package/components/block/controls/props/misc/GroupHeader.svelte.d.ts

@@ -1,11 +0,0 @@
-type $$ComponentProps = {
-    name: string;
-    depth: number;
-    checked?: boolean;
-    disabled?: boolean;
-    expand?: boolean;
-    visible?: boolean;
-};
-declare const GroupHeader: import("svelte").Component<$$ComponentProps, {}, "expand" | "checked">;
-type GroupHeader = ReturnType<typeof GroupHeader>;
-export default GroupHeader;

package/package/components/block/controls/props/misc/Name.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">let {
-  depth,
-  name,
-  expand
-} = $props();
-</script>
-
-<div class="override" style:padding-left={`${depth}rem`} title={name}>
-    <div class="icon" class:expand={true === expand}>
-        <div>
-            {undefined === expand ? "-" : ">"}
-        </div>
-    </div>
-    <span>{name}</span>
-</div>
-
-<style>
-    .override {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        padding-right: 0.5rem;
-
-        display: grid;
-        grid-template-columns: 1.25rem 1fr;
-        align-items: center;
-    }
-
-    .icon {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        height: 1rem;
-        width: 1rem;
-        transition: transform var(--i-nil-doc-transition-time);
-    }
-
-    .icon.expand {
-        transform: rotate(90deg);
-    }
-
-    .icon > div {
-        margin: auto;
-    }
-</style>

package/package/components/block/controls/props/misc/Name.svelte.d.ts

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    depth: number;
-    name: string;
-    expand?: boolean;
-};
-declare const Name: import("svelte").Component<$$ComponentProps, {}, "">;
-type Name = ReturnType<typeof Name>;
-export default Name;

package/package/components/block/controls/props/misc/Toggle.svelte

@@ -1,90 +0,0 @@
-<script lang="ts">import { getTheme } from "../../../../context";
-let {
-  disabled = false,
-  toggled = $bindable(false),
-  onkeypress
-} = $props();
-const onclick = (e) => {
-  e.stopPropagation();
-  if (!disabled) {
-    toggled = !toggled;
-  }
-};
-const dark = getTheme();
-</script>
-
-<div>
-    <svg
-        viewBox="-30 -30 60 60"
-        {onclick}
-        {onkeypress}
-        role="none"
-        class:disabled
-        class:dark={$dark}
-    >
-        <rect width="80" height="40" x="-40" y="-20" rx="20" ry="20" />
-        <circle r="16" cx={toggled ? 20 : -20} />
-    </svg>
-</div>
-
-<style>
-    div {
-        width: 2.5rem;
-        height: 1.25rem;
-    }
-
-    svg {
-        cursor: pointer;
-        width: 100%;
-        height: 100%;
-    }
-
-    rect {
-        stroke-width: 2;
-    }
-
-    .disabled {
-        cursor: not-allowed;
-        filter: opacity(0.5);
-    }
-
-    circle {
-        transition: cx 175ms;
-    }
-
-    rect {
-        stroke: hsl(0, 0%, 70%);
-        fill: hsl(0, 0%, 90%);
-    }
-
-    .dark > rect {
-        stroke: hsl(0, 0%, 52%);
-        fill: hsl(0, 0%, 23%);
-    }
-
-    .disabled > rect {
-        stroke: hsl(210, 2%, 81%);
-        fill: hsl(220, 14%, 96%);
-    }
-
-    .dark.disabled > rect {
-        stroke: hsl(0, 0%, 38%);
-        fill: hsl(0, 0%, 21%);
-    }
-
-    circle {
-        fill: hsl(212, 100%, 50%);
-    }
-
-    .dark > circle {
-        fill: hsl(212, 100%, 80%);
-    }
-
-    .disabled > circle {
-        fill: hsl(0, 0%, 80%);
-    }
-
-    .dark.disabled > circle {
-        fill: hsl(0, 0%, 46%);
-    }
-</style>