@nil-/doc 0.2.29 → 0.2.31

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nil-/doc
 
+## 0.2.31
+
+### Patch Changes
+
+-   [doc] better container style ([#45](https://github.com/njaldea/mono/pull/45))
+
+-   [doc] improved ThemeIcon ([#45](https://github.com/njaldea/mono/pull/45))
+
+## 0.2.30
+
+### Patch Changes
+
+-   [doc] Added color transition in Layout ([#43](https://github.com/njaldea/mono/pull/43))
+
+-   [doc] added Instance component ([#43](https://github.com/njaldea/mono/pull/43))
+
 ## 0.2.29
 
 ### Patch Changes

package/components/Layout.svelte

@@ -49,6 +49,7 @@
 
     /* colors */
     .layout {
+        transition: color 350ms, background-color 350ms;
         background-color: hsl(0, 0%, 100%);
         color: hsl(0, 100%, 0%);
         color-scheme: light;
@@ -89,7 +90,7 @@ $:
         <slot name="title"><span>@nil-/doc</span></slot>
         <ThemeIcon bind:dark={$isDark} />
     </div>
-    <Container offset={250} padding={250} vertical secondary>
+    <Container offset={250} vertical secondary>
         <svelte:fragment slot="primary">
             <div class="content scrollable">
                 <Nav

package/components/block/Instance.svelte

@@ -0,0 +1,11 @@
+
+<script>import Template from "./Template.svelte";
+import Params from "./Params.svelte";
+export let defaults = void 0;
+export let noreset = false;
+const cast = (t) => t;
+</script>
+<Template {defaults} {noreset} let:props let:key>
+    <slot props={cast(props)} {key} />
+</Template>
+<Params />

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<Args> {
+    props(): {
+        defaults?: Args | undefined;
+        noreset?: boolean | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            props: Args;
+            key: boolean;
+        };
+    };
+}
+export type InstanceProps<Args> = ReturnType<__sveltets_Render<Args>['props']>;
+export type InstanceEvents<Args> = ReturnType<__sveltets_Render<Args>['events']>;
+export type InstanceSlots<Args> = ReturnType<__sveltets_Render<Args>['slots']>;
+export default class Instance<Args> extends SvelteComponentTyped<InstanceProps<Args>, InstanceEvents<Args>, InstanceSlots<Args>> {
+}
+export {};

package/components/etc/Container.svelte

@@ -1,4 +1,8 @@
 <style>
+    div {
+        box-sizing: border-box;
+    }
+
     .container {
         width: 100%;
         height: 100%;
@@ -20,110 +24,156 @@
         overflow: hidden;
     }
 
-    /* need higher specificity than above */
     .container > .divider {
         z-index: 10;
-        width: auto;
-        height: 0px;
         overflow: visible;
         user-select: none;
         grid-area: divider;
     }
 
-    .container > .divider.vertical {
-        width: 0px;
-        height: auto;
+    .overlay {
+        touch-action: none;
     }
 
     .container > .divider > .overlay {
         width: 100%;
         height: 20px;
-        cursor: row-resize;
+        cursor: ns-resize;
         transform: translateY(-50%);
-        touch-action: none;
     }
 
-    .container > .divider.vertical > .overlay {
+    .container.vertical > .divider > .overlay {
         width: 20px;
         height: 100%;
-        cursor: col-resize;
+        cursor: ew-resize;
         transform: translateX(-50%);
     }
 
     /* colors */
-    .container > .divider {
-        outline: hsl(0, 2%, 70%) solid 1px;
+    .container {
+        --color-p: hsl(0, 2%, 70%);
+        --color-s: hsl(0, 0%, 0%);
+    }
+
+    .container.dark {
+        --color-p: hsl(0, 2%, 38%);
+        --color-s: hsl(0, 0%, 100%);
+    }
+
+    .container:not(.vertical) > .divider {
+        border-bottom: var(--color-p) solid 2.5px;
+        border-top: var(--color-p) solid 2.5px;
+        background-color: var(--color-p);
+    }
+
+    .container.vertical > .divider {
+        border-right: var(--color-p) solid 2.5px;
+        border-left: var(--color-p) solid 2.5px;
+        background-color: var(--color-p);
     }
 
-    .container > .divider.moving {
-        outline: hsl(0, 0%, 0%) solid 1px;
+    .container.moving:not(.secondary):not(.vertical) > .divider {
+        border-bottom: var(--color-s) solid 2.5px;
     }
 
-    .container.dark > .divider {
-        outline: hsl(0, 2%, 38%) solid 1px;
+    .container.moving.secondary:not(.vertical) > .divider {
+        border-top: var(--color-s) solid 2.5px;
     }
 
-    .container.dark > .divider.moving {
-        outline: hsl(0, 0%, 100%) solid 1px;
+    .container.moving:not(.secondary).vertical > .divider {
+        border-right: var(--color-s) solid 2.5px;
+    }
+
+    .container.moving.vertical.secondary > .divider {
+        border-left: var(--color-s) solid 2.5px;
     }
 </style>
 
 <script>import { writable } from "svelte/store";
+import { tweened } from "svelte/motion";
 import { createDraggable } from "./action";
 import { getTheme } from "../context";
 const isDark = getTheme();
 export let vertical = false;
 export let offset = 0;
 export let secondary = false;
-export let padding = 0;
 let width;
 let height;
-let collapse = false;
 const { position, draggable } = createDraggable(offset);
-function update(w, h, limit, value) {
-  if (w == null || h == null || collapse) {
+$:
+  span = vertical ? width : height;
+function update(limit, value) {
+  if (span == null) {
     return;
   }
-  const span = vertical ? w : h;
   offset = Math.max(Math.min(value, span - limit), limit);
 }
+const off = tweened(offset, { duration: 50 });
+let last = [];
 $:
-  update(width, height, padding, $position);
+  update(10, $position);
 $:
-  offsetpx = collapse ? "10px" : `${offset}px`;
+  $off = offset;
 $:
-  style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
+  style = !secondary ? `auto 5px ${$off}px` : `${$off}px 5px auto`;
 const moving = writable(false);
+function addLast(v) {
+  if (v > 10) {
+    if (last.length < 2) {
+      last = [...last, v];
+    } else {
+      last = [last[1], v];
+    }
+  }
+}
+function dbltap() {
+  if ($off > 10) {
+    addLast(offset);
+    offset = 10;
+  } else if (last.length > 0) {
+    offset = last.pop();
+  }
+}
+function check(v, flag, s) {
+  if (flag) {
+    return v < s - 10;
+  } else {
+    return v > 10;
+  }
+}
 </script>
 <div
     class="container"
     class:vertical
+    class:secondary
     class:dark={$isDark}
-    bind:clientHeight={height}
+    class:moving={$moving}
     bind:clientWidth={width}
+    bind:clientHeight={height}
     style:grid-template-columns={vertical ? style : null}
     style:grid-template-rows={!vertical ? style : null}
 >
     {#if width != null && height != null}
         <div style:grid-area="primary">
-            {#if !collapse || !secondary}
+            {#if check($off, !secondary, span)}
                 <slot name="primary" />
             {/if}
         </div>
-        <div class="divider" class:vertical class:moving={$moving}>
+        <div class="divider">
             <div
                 class="overlay"
                 use:draggable={{
                     reset: () => offset,
                     reversed: !secondary,
                     vertical,
-                    dbltap: () => (collapse = !collapse),
+                    dbltap: dbltap,
+                    tap: () => addLast($off),
                     moving
                 }}
             />
         </div>
         <div style:grid-area="secondary">
-            {#if !collapse || secondary}
+            {#if check($off, secondary, span)}
                 <slot name="secondary" />
             {/if}
         </div>

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

@@ -4,7 +4,6 @@ declare const __propDef: {
         vertical?: boolean | undefined;
         offset?: number | undefined;
         secondary?: boolean | undefined;
-        padding?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/etc/ThemeIcon.svelte

@@ -1,69 +1,76 @@
-<script context="module">let indexer = 0;
-</script>
-<script>export let dark = true;
-import { spring } from "svelte/motion";
-function iter() {
-  dark = !dark;
-}
-const rotate = spring(dark ? 90 : 40);
-const mcx = spring(dark ? 30 : 12);
-const mcy = spring(dark ? 0 : 4);
-const cr = spring(dark ? 5 : 9);
-const opacity = spring(dark ? 0 : 1);
-$:
-  rotate.set(dark ? 90 : 40);
-$:
-  mcx.set(dark ? 30 : 12);
-$:
-  mcy.set(dark ? 0 : 4);
+<script>import { tweened } from "svelte/motion";
+import { elasticOut } from "svelte/easing";
+export let dark = true;
+const values = tweened(dark ? vdark : vlight, { duration: 1e3, easing: elasticOut });
 $:
-  cr.set(dark ? 5 : 9);
-$:
-  opacity.set(dark ? 1 : 0);
+  $values = dark ? vdark : vlight;
 const index = indexer++;
 </script>
 <style>
     svg {
-        all: unset;
-        width: 50%;
-        height: 50%;
-        fill: none;
+        cursor: pointer;
+        fill: currentColor;
         stroke: currentColor;
+
+        -webkit-tap-highlight-color: transparent;
+        -moz-tap-highlight-color: transparent;
+        -o-tap-highlight-color: transparent;
+        tap-highlight-color: transparent;
+    }
+
+    svg,
+    rect {
+        width: 100%;
+        height: 100%;
+    }
+
+    line {
         stroke-width: 2;
         stroke-linecap: round;
         stroke-linejoin: round;
-        cursor: pointer;
-        color: black;
-        margin: auto;
-    }
-
-    svg.dark {
-        color: white;
     }
 </style>
 
-
+<script context="module">let indexer = 0;
+const vlight = {
+  rotate: 40,
+  mcy: -8,
+  cr: 10,
+  v: 0
+};
+const vdark = {
+  rotate: 180,
+  mcy: -24,
+  cr: 5,
+  v: 1
+};
+</script>
 <svg
-    on:click={iter}
-    on:keypress={null}
-    viewBox="0 0 24 24"
     class:dark
-    style={`transform: rotate(${$rotate}deg)`}
+    viewBox="-25 -25 50 50"
+    transform={`rotate(${$values.rotate})`}
+    style={`color: hsl(0, 0%, ${$values.v * 100}%);`}
+    on:click={() => (dark = !dark)}
+    on:keypress={null}
 >
-    <mask id={`theme_icon_${index}`}>
-        <rect x="0" y="0" width="100%" height="100%" fill="white" />
-        <circle cx={$mcx} cy={$mcy} r="9" fill="currentColor" />
+    <mask id={`nil_doc_theme_icon_${index}`}>
+        <rect x="-25" y="-25" fill="white" />
+        <circle cy={$values.mcy} r="11" />
     </mask>
-    <circle cx="12" cy="12" r={$cr} fill="currentColor" mask={`url(#theme_icon_${index})`} />
-    <g style={`opacity: ${$opacity}`}>
-        <line x1="12" y1="1" x2="12" y2="3" />
-        <line x1="12" y1="21" x2="12" y2="23" />
-        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-        <line x1="1" y1="12" x2="3" y2="12" />
-        <line x1="21" y1="12" x2="23" y2="12" />
-        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    <circle r={$values.cr} mask={`url(#nil_doc_theme_icon_${index})`} />
+    <g style={`opacity: ${$values.v}`}>
+        <g>
+            <line x1="0" y1="9" x2="0" y2="11" />
+            <line x1="9" y1="0" x2="11" y2="0" />
+            <line x1="0" y1="-11" x2="0" y2="-9" />
+            <line x1="-11" y1="0" x2="-9" y2="0" />
+        </g>
+        <g transform="rotate(45)">
+            <line x1="0" y1="9" x2="0" y2="11" />
+            <line x1="9" y1="0" x2="11" y2="0" />
+            <line x1="0" y1="-11" x2="0" y2="-9" />
+            <line x1="-11" y1="0" x2="-9" y2="0" />
+        </g>
     </g>
 </svg>
 

package/components/etc/action.d.ts

@@ -5,6 +5,7 @@ type Parameter = {
     vertical: boolean;
     reversed: boolean;
     dbltap?: () => void;
+    tap?: () => void;
     moving: Writable<boolean>;
 };
 type Return = {

package/components/etc/action.js

@@ -24,6 +24,7 @@ export const createDraggable = (offset) => {
             param.moving.set(true);
             position.set(param.reset());
             current_page = param.vertical ? e.pageX : e.pageY;
+            param?.tap?.();
         }
         function move(e) {
             if (get(param.moving)) {

package/components/navigation/Nav.svelte

@@ -3,7 +3,6 @@
         width: 100%;
         height: 100%;
         gap: 10px;
-        padding-top: 20px;
         display: flex;
         flex-direction: column;
     }

package/index.d.ts

@@ -1,6 +1,7 @@
 export { renamer, sorter } from "./components/navigation/utils";
 export type { Control } from "./components/block/controls/types";
 export { default as Layout } from "./components/Layout.svelte";
+export { default as Instance } from "./components/block/Instance.svelte";
 export { default as Block } from "./components/block/Block.svelte";
 export { default as Template } from "./components/block/Template.svelte";
 export { default as Controls } from "./components/block/Controls.svelte";

package/index.js

@@ -1,5 +1,6 @@
 export { renamer, sorter } from "./components/navigation/utils";
 export { default as Layout } from "./components/Layout.svelte";
+export { default as Instance } from "./components/block/Instance.svelte";
 export { default as Block } from "./components/block/Block.svelte";
 export { default as Template } from "./components/block/Template.svelte";
 export { default as Controls } from "./components/block/Controls.svelte";

package/package.json

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