@nil-/doc 0.2.44 → 0.2.45

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/components/Layout.svelte

@@ -85,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";
@@ -135,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

@@ -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="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,22 +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;
-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}
-            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

@@ -38,6 +38,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;
 $:
@@ -45,22 +46,24 @@ $:
 $:
   flag = !enabled || disabled;
 </script>
-<div>
-    <Name name={info.name} {depth} />
-    <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

@@ -5,19 +5,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 = enabled && !disabled ? ivalue : void 0;
 </script>
-<div>
-    <Name name={info.name} {depth} />
+{#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

@@ -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="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

@@ -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

@@ -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,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

@@ -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

@@ -10,6 +10,7 @@ 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) {
@@ -18,15 +19,17 @@ const flip = () => {
   }
 };
 </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()} />
+{#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>
+{/if}
 

package/components/block/controls/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/misc/Styler.svelte

@@ -18,8 +18,8 @@ const dark = getTheme();
     }
 
     div > :global(div) {
-        width: 100%;
         display: grid;
+        width: 100%;
         padding: 2px 0px;
         grid-template-columns: minmax(250px, 1fr) 200px 40px;
     }
@@ -31,7 +31,7 @@ const dark = getTheme();
 
     /* colors */
     div > :global(div) {
-        transition: background-color 350ms;
+        transition: background-color 150ms;
         background-color: hsl(0, 0%, 100%);
     }
 
@@ -67,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/package.json

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