@nil-/doc 0.2.33 → 0.2.35

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nil-/doc
 
+## 0.2.35
+
+### Patch Changes
+
+-   [doc] changed Control "side" flag to "position" prop ([#53](https://github.com/njaldea/mono/pull/53))
+
+-   [misc] added nil icon ([#53](https://github.com/njaldea/mono/pull/53))
+
+## 0.2.34
+
+### Patch Changes
+
+-   [doc][new] added Control hide property ([#51](https://github.com/njaldea/mono/pull/51))
+    [doc][break] renamed Control expand property to hide
+    [doc][break] Control now defaults to show
+
 ## 0.2.33
 
 ### Patch Changes

package/components/Layout.svelte

@@ -12,10 +12,10 @@
 
     .top {
         display: grid;
-        grid-template-columns: 1fr 40px;
+        grid-template-columns: 1fr 40px 40px;
         align-items: center;
-        padding-left: 20px;
-        padding-right: 20px;
+        padding-left: 10px;
+        padding-right: 10px;
         box-sizing: border-box;
         user-select: none;
     }
@@ -76,6 +76,7 @@
 import Nav from "./navigation/Nav.svelte";
 import { inRoot, getTheme, initTheme, evalTheme } from "./context";
 import ThemeIcon from "./etc/ThemeIcon.svelte";
+import NilIcon from "./etc/NilIcon.svelte";
 export let data;
 export let current = null;
 export let sorter = null;
@@ -91,6 +92,7 @@ $:
     <div class="top">
         <slot name="title"><span>@nil-/doc</span></slot>
         <ThemeIcon bind:dark={$isDark} />
+        <NilIcon />
     </div>
     <Container offset={250} vertical secondary>
         <svelte:fragment slot="primary">

package/components/block/Block.svelte

@@ -27,16 +27,9 @@
     }
 </style>
 
-<script>import {
-  initParams,
-  initCurrent,
-  initDefaults,
-  initControls,
-  initControlsState
-} from "./context";
+<script>import { initParams, initDefaults, initControls, initControlsState } from "./context";
 import { inRoot, getTheme, initTheme, evalTheme } from "../context";
 initParams();
-initCurrent();
 initDefaults();
 initControls();
 initControlsState();

package/components/block/Controls.svelte

@@ -1,10 +1,13 @@
 
 <script>import { getControls, getControlsState } from "./context";
 export let props = [];
-export let expand = false;
+export let hide = false;
+export let position = void 0;
 const controls = getControls();
 $controls = props;
 const state = getControlsState();
 $:
-  $state.expand = expand;
+  $state.hide = hide;
+$:
+  $state.position = position;
 </script>

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

@@ -3,7 +3,8 @@ import type { Control } from "./controls/types";
 declare const __propDef: {
     props: {
         props?: Control[] | undefined;
-        expand?: boolean | undefined;
+        hide?: boolean | undefined;
+        position?: undefined | "bottom" | "right";
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/Template.svelte

@@ -4,9 +4,6 @@
         gap: 5px;
         padding-bottom: 10px;
         padding-top: 10px;
-    }
-
-    .template:not(.column) {
         grid-auto-rows: 1fr;
         grid-auto-columns: auto;
         grid-auto-flow: row;
@@ -18,17 +15,28 @@
         grid-auto-flow: column;
     }
 
+    .template > .cside {
+        display: grid;
+        grid-template-columns: 1fr 550px;
+    }
+
     .content {
         min-height: 100px;
         border-radius: 5px 5px 5px 5px;
     }
 
-    .misc {
+    div:not(.cside) > .misc {
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
         user-select: none;
     }
 
+    .template > .cside > .misc {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        user-select: none;
+    }
+
     .template > div > div {
         margin: 3px;
     }
@@ -63,17 +71,15 @@
         outline: hsl(0, 2%, 40%) solid 1px;
     }
 </style>
-<svelte:window on:click={() => ($current = null)} />
 
-<script>import { getParams, getCurrent, getDefaults } from "./context";
+<script>import { getParams, getDefaults } from "./context";
 import { getControls, getControlsState } from "./context";
 import { resolve } from "./utils";
 import { getTheme } from "../context";
 import Controls from "./controls/Controls.svelte";
+import { cquery } from "./action";
 import { beforeUpdate } from "svelte";
-import { slide } from "svelte/transition";
 const params = getParams();
-const current = getCurrent();
 const controls = getControls();
 const controlsState = getControlsState();
 const defaultsStore = getDefaults();
@@ -87,19 +93,23 @@ const reset = () => {
 };
 $:
   $defaultsStore, reset();
-let hovered = null;
+const resolveArgs = resolve;
+$:
+  expanded = $controls.length > 0 && !$controlsState.hide;
 let key = false;
 beforeUpdate(() => key = !key);
-const resolveArgs = resolve;
 </script>
 <div class="template" class:columns>
     {#each $params as param (param.id)}
         <div
             class="scrollable"
-            on:click|stopPropagation={() => ($current = param.id)}
-            on:mouseenter={() => (hovered = param.id)}
-            on:mouseleave={() => (hovered = null)}
-            on:keypress={null}
+            class:cside={expanded && "right" === $controlsState.position}
+            use:cquery={{
+                class: "cside",
+                min: 1000,
+                w: true,
+                enabled: expanded && $controlsState.position === undefined
+            }}
         >
             {#if noreset}
                 <div class="content scrollable" class:dark={$isDark}>
@@ -122,8 +132,8 @@ const resolveArgs = resolve;
                     </div>
                 {/key}
             {/if}
-            {#if $controls.length > 0 && ($controlsState.expand || $current === param.id || hovered === param.id)}
-                <div class="misc scrollable" class:dark={$isDark} transition:slide|local>
+            {#if expanded}
+                <div class="misc scrollable" class:dark={$isDark}>
                     <Controls infos={$controls} bind:values={param.values} />
                 </div>
             {/if}

package/components/block/action.d.ts

@@ -0,0 +1,12 @@
+import type { ActionReturn } from "svelte/action";
+type Options = {
+    class: string;
+    min: number;
+    w: boolean;
+    enabled: boolean;
+};
+/**
+ *  Temporary support for container query until svelte supports it
+ */
+export declare const cquery: (div: HTMLDivElement, options: Options) => ActionReturn<Options>;
+export {};

package/components/block/action.js

@@ -0,0 +1,26 @@
+/**
+ *  Temporary support for container query until svelte supports it
+ */
+export const cquery = (div, options) => {
+    let o = options;
+    const check = () => div.classList.toggle(o.class, (o.w ? div.clientWidth : div.clientHeight) > o.min);
+    const observer = new ResizeObserver(check);
+    if (o.enabled) {
+        observer.observe(div);
+    }
+    return {
+        update: (options) => {
+            if (o.enabled !== options.enabled) {
+                if (!o.enabled && options.enabled) {
+                    observer.observe(div);
+                }
+                else {
+                    observer.disconnect();
+                }
+            }
+            o = options;
+            check();
+        },
+        destroy: () => o.enabled && observer.disconnect()
+    };
+};

package/components/block/context.d.ts

@@ -10,9 +10,9 @@ export type Params = {
     defaults: Record<string, ValueType>;
 };
 export type ControlState = {
-    expand: boolean;
+    hide: boolean;
+    position?: "bottom" | "right";
 };
-export declare const initCurrent: () => Writable<number | null>, getCurrent: () => Writable<number | null>;
 export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
 export declare const initControls: () => Writable<Control[]>, getControls: () => Writable<Control[]>;
 export declare const initDefaults: () => Writable<Record<string, ValueType> | null>, getDefaults: () => Writable<Record<string, ValueType> | null>;

package/components/block/context.js

@@ -7,10 +7,9 @@ const create = (defaulter) => {
         get: () => getContext(symbol)
     };
 };
-export const { init: initCurrent, get: getCurrent } = create(() => null);
 export const { init: initParams, get: getParams } = create(() => []);
 export const { init: initControls, get: getControls } = create(() => []);
 export const { init: initDefaults, get: getDefaults } = create(() => null);
 export const { init: initControlsState, get: getControlsState } = create(() => ({
-    expand: false
+    hide: false
 }));

package/components/etc/NilIcon.svelte

@@ -0,0 +1,47 @@
+<style>
+    svg {
+        width: 100%;
+        height: 100%;
+        fill: transparent;
+        stroke: currentColor;
+        stroke-width: 4;
+        stroke-linejoin: miter;
+        cursor: pointer;
+    }
+</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(0);
+let out = false;
+const click = () => {
+  if (0 === $length) {
+    $length = 1;
+    out = false;
+  } else if (!out) {
+    $length = 0;
+    out = true;
+  }
+};
+$:
+  0 === $length && click();
+</script>
+<svg viewBox="-35 -35 70 70" on:click={click} on:keypress={null}>
+    <g transform="rotate(45 0 0)">
+        <path {d} use:action={{ length: $length }} />
+    </g>
+    <g transform="rotate(225 0 0)">
+        <path {d} use:action={{ length: $length }} />
+    </g>
+</svg>
+

package/components/etc/NilIcon.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NilIconProps = typeof __propDef.props;
+export type NilIconEvents = typeof __propDef.events;
+export type NilIconSlots = typeof __propDef.slots;
+export default class NilIcon extends SvelteComponentTyped<NilIconProps, NilIconEvents, NilIconSlots> {
+}
+export {};

package/package.json

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