@nil-/doc 2.0.0 → 2.0.1

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

@@ -1,82 +0,0 @@
-<script lang="ts">import { defaulter } from "./misc/defaulter";
-import NameHeader from "./misc/Name.svelte";
-import { nformat } from "./misc/nformat";
-import { getName } from "./misc/utils";
-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));
-let i = $derived(info instanceof Array ? {
-  min: info[2],
-  max: info[3],
-  step: info[4]
-} : {
-  min: info.min,
-  max: info.max,
-  step: info.step
-});
-</script>
-
-{#if visible}
-    <div>
-        <NameHeader name={getName(info)} {depth} />
-        <div class="input" class:disabled={!enabled || disabled}>
-            <div class="tooltip">Value: {nformat(ivalue, 6, 11)}</div>
-            <div>{nformat(ivalue, 3, 5)}</div>
-            <input type="range" bind:value={ivalue} {...i} disabled={!enabled || disabled} />
-        </div>
-        <div><Toggle bind:toggled={enabled} {disabled} /></div>
-    </div>
-{/if}
-
-<style>
-    .input {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 4rem 1fr;
-        gap: 0.25rem;
-        position: relative;
-        box-sizing: border-box;
-    }
-
-    .input > div {
-        width: 100%;
-        height: 80%;
-        display: grid;
-        font-size: 0.8rem;
-        place-items: center;
-    }
-
-    input {
-        width: 100%;
-    }
-
-    .tooltip {
-        left: -110%;
-        visibility: hidden;
-        position: absolute;
-    }
-
-    .input.disabled {
-        cursor: not-allowed;
-        filter: opacity(0.5);
-    }
-
-    .input:hover > .tooltip {
-        visibility: visible;
-    }
-
-    .input.disabled:hover > .tooltip {
-        visibility: hidden;
-    }
-</style>

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

@@ -1,35 +0,0 @@
-<script lang="ts">import Name from "./Name.svelte";
-import Toggle from "./Toggle.svelte";
-let {
-  name,
-  depth,
-  checked = $bindable(),
-  disabled = false,
-  expand = $bindable(false),
-  visible = false
-} = $props();
-const flip = () => {
-  if (!disabled && checked) {
-    expand = !expand;
-  }
-};
-</script>
-
-{#if visible}
-    <div onclick={flip} onkeypress={null} role="none">
-        <Name
-            expand={expand === undefined ? undefined : expand && checked && !disabled}
-            {name}
-            {depth}
-        />
-        <div class:disabled={!checked}>-</div>
-        <div><Toggle bind:toggled={checked} {disabled} /></div>
-    </div>
-{/if}
-
-<style>
-    .disabled {
-        color: hsl(0, 0%, 50%);
-    }
-</style>
-    

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;