@nil-/doc 0.2.34 → 0.2.35

package/CHANGELOG.md

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

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/Controls.svelte

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

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         props?: Control[] | undefined;
         hide?: boolean | undefined;
-        side?: boolean | undefined;
+        position?: undefined | "bottom" | "right";
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/Template.svelte

@@ -31,7 +31,7 @@
         user-select: none;
     }
 
-    .cside > .misc {
+    .template > .cside > .misc {
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
         user-select: none;
@@ -77,6 +77,7 @@ 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";
 const params = getParams();
 const controls = getControls();
@@ -92,15 +93,24 @@ const reset = () => {
 };
 $:
   $defaultsStore, reset();
-let key = false;
-beforeUpdate(() => key = !key);
 const resolveArgs = resolve;
 $:
   expanded = $controls.length > 0 && !$controlsState.hide;
+let key = false;
+beforeUpdate(() => key = !key);
 </script>
 <div class="template" class:columns>
     {#each $params as param (param.id)}
-        <div class="scrollable" class:cside={$controlsState.side && expanded}>
+        <div
+            class="scrollable"
+            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}>
                     <slot

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

@@ -11,7 +11,7 @@ export type Params = {
 };
 export type ControlState = {
     hide: boolean;
-    side: boolean;
+    position?: "bottom" | "right";
 };
 export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
 export declare const initControls: () => Writable<Control[]>, getControls: () => Writable<Control[]>;

package/components/block/context.js

@@ -11,6 +11,5 @@ 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(() => ({
-    hide: false,
-    side: 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.34",
+  "version": "0.2.35",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"