@nil-/doc 0.2.44 → 0.2.46

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

@@ -0,0 +1,26 @@
+
+<script>import { getDefault } from "./misc/defaulter";
+import Name from "./misc/Name.svelte";
+export let value;
+export let info;
+export let depth;
+export let disabled = false;
+export let visible = false;
+let ivalue = value ?? getDefault(info);
+let enabled = value !== void 0;
+$:
+  value = enabled && !disabled ? ivalue : void 0;
+</script>
+{#if visible}
+    <div>
+        <Name name={info.name} {depth} />
+        <div>
+            <select bind:value={ivalue} disabled={!enabled || disabled}>
+                {#each info.values as value}
+                    <option {value}>{value}</option>
+                {/each}
+            </select>
+        </div>
+        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+    </div>
+{/if}

package/components/block/controls/{Select.svelte.d.ts → props/Select.svelte.d.ts}

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ControlSelect } from "./types";
+import type { PropSelect } from "../types";
 declare const __propDef: {
     props: {
         value: string | undefined;
-        info: ControlSelect;
+        info: PropSelect;
         depth: number;
         disabled?: boolean | undefined;
+        visible?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/{Number.svelte → props/Switch.svelte}

@@ -5,13 +5,16 @@ export let value;
 export let info;
 export let depth;
 export let disabled = false;
+export let visible = false;
 let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
 </script>
-<div>
-    <Name name={info.name} {depth} />
-    <div><input type="number" bind:value={ivalue} disabled={!enabled || disabled} /></div>
-    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
-</div>
+{#if visible}
+    <div>
+        <Name name={info.name} {depth} />
+        <div><input type="checkbox" bind:checked={ivalue} disabled={!enabled || disabled} /></div>
+        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+    </div>
+{/if}

package/components/block/controls/{Switch.svelte.d.ts → props/Switch.svelte.d.ts}

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ControlSwitch } from "./types";
+import type { PropSwitch } from "../types";
 declare const __propDef: {
     props: {
         value: boolean | undefined;
-        info: ControlSwitch;
+        info: PropSwitch;
         depth: number;
         disabled?: boolean | undefined;
+        visible?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/{Text.svelte → props/Text.svelte}

@@ -5,13 +5,16 @@ export let value;
 export let info;
 export let depth;
 export let disabled = false;
+export let visible = false;
 let ivalue = value ?? getDefault(info);
 let ienabled = value !== void 0;
 $:
   value = ienabled && !disabled ? ivalue : void 0;
 </script>
-<div>
-    <Name name={info.name} {depth} />
-    <div><input type="text" bind:value={ivalue} disabled={!ienabled || disabled} /></div>
-    <div><input type="checkbox" bind:checked={ienabled} {disabled} /></div>
-</div>
+{#if visible}
+    <div>
+        <Name name={info.name} {depth} />
+        <div><input type="text" bind:value={ivalue} disabled={!ienabled || disabled} /></div>
+        <div><input type="checkbox" bind:checked={ienabled} {disabled} /></div>
+    </div>
+{/if}

package/components/block/controls/{Text.svelte.d.ts → props/Text.svelte.d.ts}

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ControlText } from "./types";
+import type { PropText } from "../types";
 declare const __propDef: {
     props: {
         value: string | undefined;
-        info: ControlText;
+        info: PropText;
         depth: number;
         disabled?: boolean | undefined;
+        visible?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/{Tuple.svelte → props/Tuple.svelte}

@@ -6,6 +6,7 @@ export let value;
 export let info;
 export let depth;
 export let disabled = false;
+export let visible = false;
 let ivalue = value ?? getDefault(info);
 let enabled = value !== void 0;
 $:
@@ -14,14 +15,13 @@ $:
   values = info.values;
 let expand = info.values.length > 0 ? true : void 0;
 </script>
-<Header name={info.name} bind:expand bind:checked={enabled} {depth} {disabled} />
-{#if expand && enabled && !disabled}
-    {#each values as info, i (i)}
-        <Component
-            info={{ ...info, name: `${i}` }}
-            bind:value={ivalue[i]}
-            depth={depth + 10}
-            disabled={!enabled || disabled}
-        />
-    {/each}
-{/if}
+<Header name={info.name} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
+{#each values as info, i (i)}
+    <Component
+        info={{ ...info, name: `${i}` }}
+        bind:value={ivalue[i]}
+        depth={depth + 10}
+        disabled={!enabled || disabled}
+        visible={visible && expand && enabled && !disabled}
+    />
+{/each}

package/components/block/controls/{Tuple.svelte.d.ts → props/Tuple.svelte.d.ts}

@@ -1,12 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ValueType } from "../types";
-import type { ControlTuple } from "./types";
+import type { ValueType } from "../../types";
+import type { PropTuple } from "../types";
 declare const __propDef: {
     props: {
         value: ValueType[] | undefined;
-        info: ControlTuple;
+        info: PropTuple;
         depth: number;
         disabled?: boolean | undefined;
+        visible?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,35 @@
+<style>
+    .value {
+        text-align: center;
+    }
+</style>
+
+<script>import Name from "./Name.svelte";
+export let name;
+export let depth;
+export let checked;
+export let disabled = false;
+export let expand = void 0;
+export let visible = false;
+const flip = () => {
+  if (!disabled && checked) {
+    if (expand !== void 0) {
+      expand = !expand;
+    }
+  }
+};
+</script>
+{#if visible}
+    <div class="root" on:click={flip} on:keypress={null}>
+        <Name
+            expand={expand === undefined ? undefined : expand && checked && !disabled}
+            {name}
+            {depth}
+        />
+        <div class="value">-</div>
+        <div>
+            <input type="checkbox" {disabled} bind:checked on:click={(e) => e.stopPropagation()} />
+        </div>
+    </div>
+{/if}
+

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         checked: boolean;
         disabled?: boolean | undefined;
         expand?: boolean | undefined;
+        visible?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,87 @@
+<script>import { getTheme } from "../../../../context";
+const dark = getTheme();
+</script>
+<style>
+    div {
+        width: 100%;
+        min-width: 500px;
+        overflow: hidden;
+        display: grid;
+        grid-auto-rows: 30px;
+        box-sizing: border-box;
+    }
+
+    div :global(*),
+    div :global(*::before),
+    div :global(*::after) {
+        box-sizing: inherit;
+    }
+
+    div > :global(div) {
+        display: grid;
+        width: 100%;
+        padding: 2px 0px;
+        grid-template-columns: minmax(250px, 1fr) 200px 40px;
+    }
+
+    div > :global(div:first-child) {
+        text-align: center;
+    }
+
+    div > :global(div > div:not(:first-child) > *) {
+        width: 100%;
+        height: 100%;
+    }
+
+    /* colors */
+    div {
+        --pri-color: hsl(0, 0%, 100%);
+        --sec-color: hsl(210, 29%, 97%);
+        --hover-color: hsl(210, 100%, 90%);
+        --outline-color: hsl(0, 0%, 0%);
+    }
+
+    div.dark {
+        --pri-color: hsl(213, 26%, 7%);
+        --sec-color: hsl(213, 26%, 11%);
+        --hover-color: hsl(203, 100%, 15%);
+        --outline-color: hsl(200, 6%, 80%);
+    }
+
+    div {
+        transition: background-color 150ms;
+        background-repeat: repeat;
+        background-size: 100% 60px;
+        background-image: linear-gradient(to bottom, var(--pri-color) 30px, var(--sec-color) 30px);
+    }
+
+    div > :global(div:nth-child(n + 2):hover) {
+        background-color: var(--hover-color);
+    }
+
+    div > :global(div:hover .tooltip) {
+        background-color: var(--pri-color);
+        outline: var(--outline-color) 1px solid;
+    }
+</style>
+
+
+<!--
+    <div> this component
+        <div> Header
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+        <div> Controls
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+        ...
+    </div>
+-->
+<div class:dark={$dark}>
+    <slot />
+</div>
+

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type StylerProps = typeof __propDef.props;
+export type StylerEvents = typeof __propDef.events;
+export type StylerSlots = typeof __propDef.slots;
+export default class Styler extends SvelteComponentTyped<StylerProps, StylerEvents, StylerSlots> {
+}
+export {};

package/components/block/controls/props/misc/defaulter.d.ts

@@ -0,0 +1,10 @@
+import type { ValueType } from "../../../types";
+import type { Prop, PropNumber, PropRange, PropSelect, PropSwitch, PropText, PropTuple, PropObject } from "../../types";
+export declare function getDefault(i: PropTuple): ValueType[];
+export declare function getDefault(i: PropObject): Record<string, ValueType>;
+export declare function getDefault(i: PropNumber): number;
+export declare function getDefault(i: PropRange): number;
+export declare function getDefault(i: PropSelect): string;
+export declare function getDefault(i: PropText): string;
+export declare function getDefault(i: PropSwitch): boolean;
+export declare function getDefault(i: Prop): ValueType;

package/components/block/controls/types.d.ts

@@ -1,28 +1,28 @@
-export type ControlTuple = {
+export type PropTuple = {
     name: string;
     type: "tuple";
     // eslint-disable-next-line no-use-before-define
-    values: NonNamedControl[];
+    values: NonNamedProp[];
 };
 
-export type ControlObject = {
+export type PropObject = {
     name: string;
     type: "object";
     // eslint-disable-next-line no-use-before-define
-    values: Control[];
+    values: Prop[];
 };
 
-export type ControlText = {
+export type PropText = {
     name: string;
     type: "text";
 };
 
-export type ControlNumber = {
+export type PropNumber = {
     name: string;
     type: "number";
 };
 
-export type ControlRange = {
+export type PropRange = {
     name: string;
     type: "range";
     min: number;
@@ -30,31 +30,33 @@ export type ControlRange = {
     step: number;
 };
 
-export type ControlSelect = {
+export type PropSelect = {
     name: string;
     type: "select";
     values: string[];
 };
 
-export type ControlSwitch = {
+export type PropSwitch = {
     name: string;
     type: "switch";
 };
 
-export type Control =
-    | ControlTuple
-    | ControlObject
-    | ControlText
-    | ControlNumber
-    | ControlRange
-    | ControlSelect
-    | ControlSwitch;
-
-type NonNamedControl =
-    | Omit<ControlTuple, "name">
-    | Omit<ControlObject, "name">
-    | Omit<ControlText, "name">
-    | Omit<ControlNumber, "name">
-    | Omit<ControlRange, "name">
-    | Omit<ControlSelect, "name">
-    | Omit<ControlSwitch, "name">;
+export type Prop =
+    | PropTuple
+    | PropObject
+    | PropText
+    | PropNumber
+    | PropRange
+    | PropSelect
+    | PropSwitch;
+
+type NonNamedProp =
+    | Omit<PropTuple, "name">
+    | Omit<PropObject, "name">
+    | Omit<PropText, "name">
+    | Omit<PropNumber, "name">
+    | Omit<PropRange, "name">
+    | Omit<PropSelect, "name">
+    | Omit<PropSwitch, "name">;
+
+export type Event = string;

package/index.d.ts

@@ -1,6 +1,6 @@
 export { renamer } from "./components/navigation/utils/renamer";
 export { sorter } from "./components/navigation/utils/sorter";
-export type { Control } from "./components/block/controls/types";
+export type { Prop, Event } from "./components/block/controls/types";
 export { default as Layout } from "./components/Layout.svelte";
 export { default as Instance } from "./components/block/Instance.svelte";
 export { default as Block } from "./components/block/Block.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.44",
+  "version": "0.2.46",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"

package/components/block/controls/Controls.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ValueType } from "../types";
-import type { Control } from "./types";
-declare const __propDef: {
-    props: {
-        infos: Control[];
-        values: Record<string, ValueType>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ControlsProps = typeof __propDef.props;
-export type ControlsEvents = typeof __propDef.events;
-export type ControlsSlots = typeof __propDef.slots;
-export default class Controls extends SvelteComponentTyped<ControlsProps, ControlsEvents, ControlsSlots> {
-}
-export {};

package/components/block/controls/Select.svelte

@@ -1,23 +0,0 @@
-
-<script>import { getDefault } from "./misc/defaulter";
-import Name from "./misc/Name.svelte";
-export let value;
-export let info;
-export let depth;
-export let disabled = false;
-let ivalue = value ?? getDefault(info);
-let enabled = value !== void 0;
-$:
-  value = enabled && !disabled ? ivalue : void 0;
-</script>
-<div>
-    <Name name={info.name} {depth} />
-    <div>
-        <select bind:value={ivalue} disabled={!enabled || disabled}>
-            {#each info.values as value}
-                <option {value}>{value}</option>
-            {/each}
-        </select>
-    </div>
-    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
-</div>

package/components/block/controls/misc/GroupHeader.svelte

@@ -1,32 +0,0 @@
-<style>
-    .value {
-        text-align: center;
-    }
-</style>
-
-<script>import Name from "./Name.svelte";
-export let name;
-export let depth;
-export let checked;
-export let disabled = false;
-export let expand = void 0;
-const flip = () => {
-  if (!disabled && checked) {
-    if (expand !== void 0) {
-      expand = !expand;
-    }
-  }
-};
-</script>
-<div on:click={flip} on:keypress={null}>
-    <Name
-        expand={expand === undefined ? undefined : expand && checked && !disabled}
-        {name}
-        {depth}
-    />
-    <div class="value">-</div>
-    <div>
-        <input type="checkbox" {disabled} bind:checked on:click={(e) => e.stopPropagation()} />
-    </div>
-</div>
-

package/components/block/controls/misc/Styler.svelte

@@ -1,73 +0,0 @@
-<script>import { getTheme } from "../../../context";
-const dark = getTheme();
-</script>
-<style>
-    div {
-        width: 100%;
-        min-width: 500px;
-        overflow: hidden;
-        display: grid;
-        grid-auto-rows: 30px;
-        box-sizing: border-box;
-    }
-
-    div :global(*),
-    div :global(*::before),
-    div :global(*::after) {
-        box-sizing: inherit;
-    }
-
-    div > :global(div) {
-        width: 100%;
-        display: grid;
-        padding: 2px 0px;
-        grid-template-columns: minmax(250px, 1fr) 200px 40px;
-    }
-
-    div > :global(div > div:not(:first-child) > *) {
-        width: 100%;
-        height: 100%;
-    }
-
-    /* colors */
-    div > :global(div) {
-        transition: background-color 350ms;
-        background-color: hsl(0, 0%, 100%);
-    }
-
-    div > :global(div:nth-child(even)) {
-        background-color: hsl(210, 29%, 97%);
-    }
-
-    div > :global(div:nth-child(n + 2):hover) {
-        background-color: hsl(210, 100%, 90%);
-    }
-
-    div > :global(div:hover .tooltip) {
-        background-color: hsl(0, 0%, 100%);
-        outline: hsl(0, 100%, 0%) 1px solid;
-    }
-
-    div.dark > :global(div) {
-        background-color: hsl(213, 26%, 7%);
-    }
-
-    div.dark > :global(div:nth-child(even)) {
-        background-color: hsl(213, 26%, 11%);
-    }
-
-    div.dark > :global(div:nth-child(n + 2):hover) {
-        background-color: hsl(203, 100%, 15%);
-    }
-
-    div.dark > :global(div:hover .tooltip) {
-        background-color: hsl(213, 26%, 7%);
-        outline: hsl(200, 6%, 80%) 1px solid;
-    }
-</style>
-
-
-<div class:dark={$dark}>
-    <slot />
-</div>
-

package/components/block/controls/misc/TopHeader.svelte

@@ -1,12 +0,0 @@
-<style>
-    div > div {
-        text-align: center;
-    }
-</style>
-
-<div>
-    <div>Name</div>
-    <div>Value</div>
-    <div>Use</div>
-</div>
-

package/components/block/controls/misc/TopHeader.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  TopHeaderProps */
-/** @typedef {typeof __propDef.events}  TopHeaderEvents */
-/** @typedef {typeof __propDef.slots}  TopHeaderSlots */
-export default class TopHeader extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TopHeaderProps = typeof __propDef.props;
-export type TopHeaderEvents = typeof __propDef.events;
-export type TopHeaderSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/components/block/controls/misc/defaulter.d.ts

@@ -1,10 +0,0 @@
-import type { ValueType } from "../../types";
-import type { Control, ControlNumber, ControlRange, ControlSelect, ControlSwitch, ControlText, ControlTuple, ControlObject } from "../types";
-export declare function getDefault(i: ControlTuple): ValueType[];
-export declare function getDefault(i: ControlObject): Record<string, ValueType>;
-export declare function getDefault(i: ControlNumber): number;
-export declare function getDefault(i: ControlRange): number;
-export declare function getDefault(i: ControlSelect): string;
-export declare function getDefault(i: ControlText): string;
-export declare function getDefault(i: ControlSwitch): boolean;
-export declare function getDefault(i: Control): ValueType;