@nil-/doc 0.2.43 → 0.2.44

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nil-/doc
 
+## 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;
     }
 
@@ -120,7 +121,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>

package/components/block/controls/Number.svelte

@@ -1,5 +1,6 @@
 
 <script>import { getDefault } from "./misc/defaulter";
+import Name from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -10,7 +11,7 @@ $:
   value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</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>

package/components/block/controls/Object.svelte

@@ -12,9 +12,10 @@ $:
   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}
+<Header name={info.name} bind:expand bind:checked={enabled} {depth} {disabled} />
+{#if expand && enabled && !disabled}
     {#each values as info, i (i)}
         <Component
             {info}

package/components/block/controls/Range.svelte

@@ -33,6 +33,7 @@
 </style>
 
 <script>import { getDefault } from "./misc/defaulter";
+import Name from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -45,7 +46,7 @@ $:
   flag = !enabled || disabled;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
+    <Name name={info.name} {depth} />
     <div class="input">
         <div class="tooltip" class:disabled={flag}>
             Current Value: {ivalue}

package/components/block/controls/Select.svelte

@@ -1,5 +1,6 @@
 
 <script>import { getDefault } from "./misc/defaulter";
+import Name from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -10,7 +11,7 @@ $:
   value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</div>
+    <Name name={info.name} {depth} />
     <div>
         <select bind:value={ivalue} disabled={!enabled || disabled}>
             {#each info.values as value}

package/components/block/controls/Switch.svelte

@@ -1,5 +1,6 @@
 
 <script>import { getDefault } from "./misc/defaulter";
+import Name from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -10,7 +11,7 @@ $:
   value = enabled && !disabled ? ivalue : void 0;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</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>

package/components/block/controls/Text.svelte

@@ -1,5 +1,6 @@
 
 <script>import { getDefault } from "./misc/defaulter";
+import Name from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
@@ -10,7 +11,7 @@ $:
   value = ienabled && !disabled ? ivalue : void 0;
 </script>
 <div>
-    <div style:padding-left={`${depth}px`} title={info.name}>- {info.name}</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>

package/components/block/controls/Tuple.svelte

@@ -12,9 +12,10 @@ $:
   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}
+<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}` }}

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

@@ -4,16 +4,29 @@
     }
 </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;
+const flip = () => {
+  if (!disabled && checked) {
+    if (expand !== void 0) {
+      expand = !expand;
+    }
+  }
+};
 </script>
-<div>
-    <div style:padding-left={`${depth}px`} title={name}>
-        {`> ${name}`}
-    </div>
+<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" bind:checked {disabled} /></div>
+    <div>
+        <input type="checkbox" {disabled} bind:checked on:click={(e) => e.stopPropagation()} />
+    </div>
 </div>
 

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         depth: number;
         checked: boolean;
         disabled?: boolean | undefined;
+        expand?: 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

@@ -24,12 +24,7 @@ const dark = getTheme();
         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%;
     }
@@ -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;

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.44",
   "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;
 };