@nil-/doc 0.2.20 → 0.2.22

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nil-/doc
 
+## 0.2.22
+
+### Patch Changes
+
+-   3ce0a62: [doc] support for touch event via pointerevent (draggable container)
+
+## 0.2.21
+
+### Patch Changes
+
+-   0398a72: [doc][fix] remove dependency on box-sizing
+    [doc][fix] control min width
+    [doc][feature] made template configurable by column prop
+
 ## 0.2.20
 
 ### Patch Changes

package/components/Layout.svelte

@@ -12,6 +12,7 @@
         padding: 5px;
         display: flex;
         flex-direction: column;
+        box-sizing: border-box;
     }
 
     /* reset block */
@@ -27,12 +28,6 @@
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
 
-    .reset :global(*),
-    .reset :global(*::before),
-    .reset :global(*::after) {
-        box-sizing: inherit;
-    }
-
     /* scrollable */
     .scrollable {
         overflow: scroll;

package/components/block/Block.svelte

@@ -26,12 +26,6 @@ const r = inRoot();
         box-sizing: border-box;
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
-
-    .reset :global(*),
-    .reset :global(*::before),
-    .reset :global(*::after) {
-        box-sizing: inherit;
-    }
 </style>
 
 

package/components/block/Template.svelte

@@ -1,20 +1,24 @@
 <style>
     .template {
-        display: flex;
-        flex-direction: column;
-        font-family: "Fira Code", "Courier New", Courier, monospace;
-        gap: 20px;
+        display: grid;
+        gap: 5px;
         padding-bottom: 10px;
         padding-top: 10px;
     }
 
-    .instance {
-        display: flex;
-        flex-direction: column;
+    .template:not(.column) {
+        grid-auto-rows: 1fr;
+        grid-auto-columns: auto;
+        grid-auto-flow: row;
+    }
+
+    .template.columns {
+        grid-auto-rows: auto;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
     }
 
     .content {
-        padding: 3px;
         min-height: 100px;
         border-radius: 5px 5px 5px 5px;
         border: rgb(100, 96, 96) solid 1px;
@@ -22,13 +26,16 @@
     }
 
     .misc {
-        margin-top: 2px;
         outline: rgb(100, 96, 96) solid 1px;
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
         user-select: none;
     }
 
+    .template > div > div {
+        margin: 3px;
+    }
+
     /* scrollable */
     .scrollable {
         overflow: scroll;
@@ -55,6 +62,7 @@ const controlsState = getControlsState();
 const defaultsStore = getDefaults();
 export let defaults = undefined;
 export let noreset = false;
+export let columns = false;
 function reset() {
     $params = [];
     $defaultsStore = defaults;
@@ -76,10 +84,10 @@ let key = false;
 beforeUpdate(() => (key = !key));
 const resolveArgs = (resolve);
 </script>
-<div class="template">
+<div class="template" class:columns>
     {#each $params as param (param.id)}
         <div
-            class="instance"
+            class="scrollable"
             on:click|stopPropagation={() => ($current = param.id)}
             on:mouseenter={() => (hovered = param.id)}
             on:mouseleave={() => (hovered = null)}

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

@@ -3,6 +3,7 @@ declare class __sveltets_Render<Args> {
     props(): {
         defaults?: Args | undefined;
         noreset?: boolean | undefined;
+        columns?: boolean | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/Range.svelte

@@ -19,10 +19,10 @@
     }
 
     .tooltip {
+        padding-right: 10px;
         width: 100%;
         height: 100%;
-        /* top: -100%; */
-        left: -100%;
+        left: -110%;
         position: absolute;
         visibility: hidden;
     }

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

@@ -1,15 +1,22 @@
 <style>
     div {
         width: 100%;
+        min-width: 500px;
+        overflow: hidden;
         display: grid;
         grid-auto-rows: 30px;
+        box-sizing: border-box;
+    }
+
+    div :global(*) {
+        box-sizing: inherit;
     }
 
     div > :global(div) {
         width: 100%;
         display: grid;
         padding: 2px 0px;
-        grid-template-columns: 1fr 200px 75px;
+        grid-template-columns: minmax(250px, 1fr) 200px 40px;
         background-color: hsl(205, 50%, 5%);
     }
 
@@ -17,8 +24,9 @@
         background-color: hsl(205, 15%, 15%);
     }
 
-    div > :global(div:hover) {
-        background-color: rgba(2, 156, 253, 0.07);
+    div > :global(div:hover .tooltip),
+    div > :global(div:nth-child(n + 2):hover) {
+        background-color: hsl(203, 100%, 15%);
     }
 
     div > :global(div > div) {

package/components/etc/Container.svelte

@@ -18,7 +18,6 @@
         width: 100%;
         height: 100%;
         overflow: hidden;
-        outline: rgb(100, 96, 96) solid 1px;
     }
 
     /* need higher specificity than above */
@@ -29,6 +28,11 @@
         overflow: visible;
         user-select: none;
         grid-area: divider;
+        outline: rgb(100, 96, 96) solid 1px;
+    }
+
+    .container > .divider.moving {
+        outline: rgb(255, 255, 255) solid 1px;
     }
 
     .container > .divider.vertical {
@@ -38,20 +42,22 @@
 
     .container > .divider > .overlay {
         width: 100%;
-        height: 10px;
+        height: 20px;
         cursor: row-resize;
-        translate: translateX(-50%);
+        transform: translateY(-50%);
+        touch-action: none;
     }
 
     .container > .divider.vertical > .overlay {
-        width: 10px;
+        width: 20px;
         height: 100%;
         cursor: col-resize;
-        translate: translateY(-50%);
+        transform: translateX(-50%);
     }
 </style>
 
-<script>import { createDraggable } from "./action";
+<script>import { writable } from "svelte/store";
+import { createDraggable } from "./action";
 // orientation of the layout
 export let vertical = false;
 // initial value where the divider is located
@@ -75,6 +81,7 @@ function update(w, h, limit, value) {
 $: update(width, height, padding, $position);
 $: offsetpx = collapse ? "10px" : `${offset}px`;
 $: style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
+const moving = writable(false);
 </script>
 <div
     class="container"
@@ -90,11 +97,16 @@ $: style = !secondary ? `auto 0px ${offsetpx}` : `${offsetpx} 0px auto`;
                 <slot name="primary" />
             {/if}
         </div>
-        <div class="divider" class:vertical>
+        <div class="divider" class:vertical class:moving={$moving}>
             <div
                 class="overlay"
-                use:draggable={{ reset: () => offset, reversed: !secondary, vertical }}
-                on:dblclick={() => (collapse = !collapse)}
+                use:draggable={{
+                    reset: () => offset,
+                    reversed: !secondary,
+                    vertical,
+                    dbltap: () => (collapse = !collapse),
+                    moving
+                }}
             />
         </div>
         <div style:grid-area="secondary">

package/components/etc/action.d.ts

@@ -4,6 +4,8 @@ type Parameter = {
     reset: () => number;
     vertical: boolean;
     reversed: boolean;
+    dbltap?: () => void;
+    moving: Writable<boolean>;
 };
 type Return = {
     position: Writable<number>;

package/components/etc/action.js

@@ -1,43 +1,50 @@
-import { writable } from "svelte/store";
+import { get, writable } from "svelte/store";
 export const createDraggable = (offset) => {
     const position = writable(offset);
     function draggable(div, parameter) {
+        let tm = new Date().getTime();
         let param = parameter ?? { reset: () => 0, vertical: true, reversed: false };
-        let moving = false;
         position.set(param.reset());
         let current_page = 0;
+        function disengage() {
+            param.moving.set(false);
+        }
+        function checkDoubleTap() {
+            const tm2 = new Date().getTime();
+            const diff = tm2 - tm;
+            tm = tm2;
+            return diff < 200;
+        }
         function engage(e) {
-            moving = true;
+            if (checkDoubleTap()) {
+                param?.dbltap?.();
+                disengage();
+                return;
+            }
+            param.moving.set(true);
             position.set(param.reset());
             current_page = param.vertical ? e.pageX : e.pageY;
         }
-        function disengage() {
-            moving = false;
-        }
         function move(e) {
-            if (moving) {
+            if (get(param.moving)) {
                 const page = param.vertical ? e.pageX : e.pageY;
                 position.update((v) => v + (page - current_page) * (param.reversed ? -1 : 1));
                 current_page = page;
             }
         }
-        div.addEventListener("mousedown", engage);
-        document.addEventListener("mouseup", disengage);
-        document.addEventListener("mousemove", move);
-        document.addEventListener("dblclick", disengage);
+        div.addEventListener("pointerdown", engage);
+        window.addEventListener("pointerup", disengage);
+        window.addEventListener("pointercancel", disengage);
+        window.addEventListener("pointermove", move);
         return {
             update: (parameter) => {
-                if (param.reversed !== parameter.reversed ||
-                    param.vertical !== parameter.vertical) {
-                    moving = false;
-                }
                 param = parameter;
             },
             destroy: () => {
-                div.removeEventListener("mousedown", engage);
-                document.removeEventListener("mouseup", disengage);
-                document.removeEventListener("mousemove", move);
-                document.removeEventListener("dblclick", disengage);
+                div.removeEventListener("pointerdown", engage);
+                window.removeEventListener("pointerup", disengage);
+                window.removeEventListener("pointercancel", disengage);
+                window.removeEventListener("pointermove", move);
             }
         };
     }

package/package.json

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