@nil-/doc 0.2.43 → 0.2.45

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nil-/doc
 
+## 0.2.45
+
+### Patch Changes
+
+-   [doc][fix] keep control state when disabled after tuple/object parent toggles expand #[75](https://github.com/njaldea/mono/issues/75) ([#74](https://github.com/njaldea/mono/pull/74))
+
+## 0.2.44
+
+### Patch Changes
+
+-   [doc][new] tuple and object controls now collapsible without disabling ([#72](https://github.com/njaldea/mono/pull/72))
+
 ## 0.2.43
 
 ### Patch Changes

package/components/Layout.svelte

@@ -31,6 +31,7 @@
     .icon {
         width: 100%;
         height: 100%;
+        cursor: pointer;
         transition: transform 350ms;
     }
 
@@ -84,6 +85,7 @@
 </style>
 
 <script context="module">const defaultSorter = (l, r) => l.localeCompare(r);
+const defaultRenamer = (s) => s;
 </script>
 <script>import Container from "./etc/Container.svelte";
 import Nav from "./navigation/Nav.svelte";
@@ -120,7 +122,8 @@ const toggle = () => {
         <div
             class="icon"
             title="Double click to open repo: https://github.com/njaldea/mono"
-            on:dblclick={() => window.open("https://github.com/njaldea/mono", "_blank")}
+            on:click={() => window.open("https://github.com/njaldea/mono", "_blank")}
+            on:keypress={null}
         >
             <NilIcon />
         </div>
@@ -133,7 +136,7 @@ const toggle = () => {
                         info={data}
                         selected={current ?? ""}
                         sorter={sorter ?? defaultSorter}
-                        renamer={renamer ?? ((s) => s)}
+                        renamer={renamer ?? defaultRenamer}
                         on:navigate
                     />
                 </div>

package/components/block/controls/Component.svelte

@@ -10,19 +10,20 @@ export let value;
 export let info;
 export let depth;
 export let disabled = false;
+export let visible = false;
 </script>
 {#if "object" === info.type}
-    <Object {info} bind:value {depth} {disabled} />
+    <Object {info} bind:value {depth} {disabled} {visible} />
 {:else if "tuple" === info.type}
-    <Tuple {info} bind:value {depth} {disabled} />
+    <Tuple {info} bind:value {depth} {disabled} {visible} />
 {:else if "text" === info.type}
-    <Text {info} bind:value {depth} {disabled} />
+    <Text {info} bind:value {depth} {disabled} {visible} />
 {:else if "number" === info.type}
-    <Number {info} bind:value {depth} {disabled} />
+    <Number {info} bind:value {depth} {disabled} {visible} />
 {:else if "range" === info.type}
-    <Range {info} bind:value {depth} {disabled} />
+    <Range {info} bind:value {depth} {disabled} {visible} />
 {:else if "select" === info.type}
-    <Select {info} bind:value {depth} {disabled} />
+    <Select {info} bind:value {depth} {disabled} {visible} />
 {:else if "switch" === info.type}
-    <Switch {info} bind:value {depth} {disabled} />
+    <Switch {info} bind:value {depth} {disabled} {visible} />
 {/if}

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

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

package/components/block/controls/Controls.svelte

@@ -8,6 +8,6 @@ export let values;
 <Styler>
     <Header />
     {#each infos as info}
-        <Component {info} bind:value={values[info.name]} depth={10} disabled={false} />
+        <Component {info} bind:value={values[info.name]} depth={10} visible />
     {/each}
 </Styler>

package/components/block/controls/Number.svelte

@@ -1,16 +1,20 @@
 
 <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>
-<div>
-    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
-    <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="number" bind:value={ivalue} disabled={!enabled || disabled} /></div>
+        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+    </div>
+{/if}

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

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

package/components/block/controls/Object.svelte

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

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

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

package/components/block/controls/Range.svelte

@@ -33,10 +33,12 @@
 </style>
 
 <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;
 $:
@@ -44,22 +46,24 @@ $:
 $:
   flag = !enabled || disabled;
 </script>
-<div>
-    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
-    <div class="input">
-        <div class="tooltip" class:disabled={flag}>
-            Current Value: {ivalue}
+{#if visible}
+    <div>
+        <Name name={info.name} {depth} />
+        <div class="input">
+            <div class="tooltip" class:disabled={flag}>
+                Current Value: {ivalue}
+            </div>
+            <div>{ivalue.toFixed(2)}</div>
+            <input
+                type="range"
+                bind:value={ivalue}
+                min={info.min}
+                max={info.max}
+                step={info.step}
+                disabled={flag}
+            />
         </div>
-        <div>{ivalue.toFixed(2)}</div>
-        <input
-            type="range"
-            bind:value={ivalue}
-            min={info.min}
-            max={info.max}
-            step={info.step}
-            disabled={flag}
-        />
+        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
     </div>
-    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
-</div>
+{/if}
 

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

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

package/components/block/controls/Select.svelte

@@ -1,22 +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>
-<div>
-    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
+{#if visible}
     <div>
-        <select bind:value={ivalue} disabled={!enabled || disabled}>
-            {#each info.values as value}
-                <option {value}>{value}</option>
-            {/each}
-        </select>
+        <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>
-    <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
-</div>
+{/if}

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

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

package/components/block/controls/Switch.svelte

@@ -1,16 +1,20 @@
 
 <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>
-<div>
-    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
-    <div><input type="checkbox" bind:checked={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

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

package/components/block/controls/Text.svelte

@@ -1,16 +1,20 @@
 
 <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 ienabled = value !== void 0;
 $:
   value = ienabled && !disabled ? ivalue : void 0;
 </script>
-<div>
-    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
-    <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

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

package/components/block/controls/Tuple.svelte

@@ -6,21 +6,22 @@ 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 = !disabled && enabled ? ivalue : void 0;
 $:
   values = info.values;
+let expand = info.values.length > 0 ? true : void 0;
 </script>
-<Header name={info.name} bind:checked={enabled} {depth} {disabled} />
-{#if 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

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

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

@@ -4,16 +4,32 @@
     }
 </style>
 
-<script>export let name;
+<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>
-<div>
-    <div style:padding-left={`${depth}px`} title={name}>
-        {`> ${name}`}
+{#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>
-    <div class="value">-</div>
-    <div><input type="checkbox" bind:checked {disabled} /></div>
-</div>
+{/if}
 

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

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

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

@@ -0,0 +1,44 @@
+<style>
+    .override {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-right: 10px;
+
+        display: grid;
+        grid-template-columns: 20px 1fr;
+        align-items: center;
+        box-sizing: border-box;
+    }
+
+    .icon {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 15px;
+        width: 15px;
+        transition: transform 350ms;
+    }
+
+    .icon.expand {
+        transform: rotate(90deg);
+    }
+
+    .icon > div {
+        margin: auto;
+    }
+</style>
+
+<script>export let depth;
+export let name;
+export let expand = void 0;
+</script>
+<div class="override" style:padding-left={`${depth}px`} title={name}>
+    <div class="icon" class:expand={expand === true}>
+        <div>
+            {expand === undefined ? "-" : ">"}
+        </div>
+    </div>
+    <span>{name}</span>
+</div>
+

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        depth: number;
+        name: string;
+        expand?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NameProps = typeof __propDef.props;
+export type NameEvents = typeof __propDef.events;
+export type NameSlots = typeof __propDef.slots;
+export default class Name extends SvelteComponentTyped<NameProps, NameEvents, NameSlots> {
+}
+export {};

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

@@ -18,25 +18,20 @@ const dark = getTheme();
     }
 
     div > :global(div) {
-        width: 100%;
         display: grid;
+        width: 100%;
         padding: 2px 0px;
         grid-template-columns: minmax(250px, 1fr) 200px 40px;
     }
 
-    div > :global(div > div) {
-        display: grid;
-        align-items: center;
-    }
-
-    div > :global(div > div > *) {
+    div > :global(div > div:not(:first-child) > *) {
         width: 100%;
         height: 100%;
     }
 
     /* colors */
     div > :global(div) {
-        transition: background-color 350ms;
+        transition: background-color 150ms;
         background-color: hsl(0, 0%, 100%);
     }
 
@@ -48,14 +43,6 @@ const dark = getTheme();
         background-color: hsl(210, 100%, 90%);
     }
 
-    div > :global(div:nth-child(n + 2) > div:first-child) {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        padding-right: 10px;
-        display: block;
-    }
-
     div > :global(div:hover .tooltip) {
         background-color: hsl(0, 0%, 100%);
         outline: hsl(0, 100%, 0%) 1px solid;
@@ -80,6 +67,21 @@ const dark = getTheme();
 </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/etc/NilIcon.svelte

@@ -1,47 +1,39 @@
+<script>import { tweened } from "svelte/motion";
+const d = "M 0 -15 L 15 -15 L 15 0 L 0 0 -9 0 A 6 8 135 0 1 9 0";
+const length = tweened(100);
+const trigger = () => {
+  if (0 === $length) {
+    $length = 100;
+  } else if (100 === $length) {
+    $length = 0;
+  }
+};
+$:
+  0 === $length && trigger();
+</script>
 <style>
     svg {
         width: 100%;
         height: 100%;
-        fill: transparent;
-        stroke: currentColor;
         stroke-width: 4;
         stroke-linejoin: miter;
-        cursor: pointer;
+        stroke: currentColor;
+        fill: transparent;
     }
 </style>
 
-<script>import { tweened } from "svelte/motion";
-const action = (p, options) => {
-  const total = p.getTotalLength();
-  p.style.strokeDasharray = `${total * options.length} ${total}`;
-  return {
-    update: (options2) => {
-      const total2 = p.getTotalLength();
-      p.style.strokeDasharray = `${total2 * options2.length} ${total2}`;
-    }
-  };
-};
-const d = "M 0 -15 L 15 -15 L 15 0 L 0 0 -9 0 A 6 8 135 0 1 9 0";
-const length = tweened(1);
-let out = false;
-const click = () => {
-  if (0 === $length) {
-    $length = 1;
-    out = false;
-  } else if (!out) {
-    $length = 0;
-    out = true;
-  }
+<script context="module">const action = (p, length) => {
+  const update = (length2) => p.style.strokeDasharray = `${length2} 100`;
+  update(length);
+  return { update };
 };
-$:
-  0 === $length && click();
 </script>
-<svg viewBox="-35 -35 70 70" on:click={click} on:keypress={null}>
+<svg viewBox="-35 -35 70 70" on:pointerenter={trigger}>
     <g transform="rotate(45 0 0)">
-        <path {d} use:action={{ length: $length }} />
+        <path {d} use:action={$length} />
     </g>
     <g transform="rotate(225 0 0)">
-        <path {d} use:action={{ length: $length }} />
+        <path {d} use:action={$length} />
     </g>
 </svg>
 

package/components/etc/ThemeIcon.svelte

@@ -7,7 +7,6 @@ const index = indexer++;
 </script>
 <style>
     svg {
-        cursor: pointer;
         fill: currentColor;
         stroke: currentColor;
 

package/package.json

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

package/sveltekit/index.js

@@ -20,8 +20,6 @@ const isRouteDynamic = (p) => null == routeIsDynamic.exec(p);
 export const sveltekit = (detail, prefix = null) => {
     const key = "@nil-/doc/theme";
     const initialValue = browser && "light" === localStorage.getItem(key) ? "light" : "dark";
-    const theme = writable(initialValue);
-    theme.subscribe((v) => browser && localStorage.setItem(key, v));
     const result = {
         data: Object.keys(detail)
             .map(toRoute)
@@ -38,7 +36,8 @@ export const sveltekit = (detail, prefix = null) => {
             return null;
         }),
         navigate: prefix ? (e) => goto(`${prefix}${e.detail}`) : (e) => goto(e.detail),
-        theme
+        theme: writable(initialValue)
     };
+    browser && result.theme.subscribe((v) => localStorage.setItem(key, v));
     return result;
 };