@nil-/doc 0.2.29 → 0.2.30

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nil-/doc
 
+## 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;

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

@@ -1,25 +1,8 @@
-<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);
-$:
-  cr.set(dark ? 5 : 9);
+import { tweened } from "svelte/motion";
+const values = tweened(dark ? vdark : vlight, { duration: 350 });
 $:
-  opacity.set(dark ? 1 : 0);
+  values.set(dark ? vdark : vlight);
 const index = indexer++;
 </script>
 <style>
@@ -27,14 +10,21 @@ const index = indexer++;
         all: unset;
         width: 50%;
         height: 50%;
+        margin: auto;
+
+        cursor: pointer;
+        color: black;
         fill: none;
+
         stroke: currentColor;
         stroke-width: 2;
         stroke-linecap: round;
         stroke-linejoin: round;
-        cursor: pointer;
-        color: black;
-        margin: auto;
+
+        -webkit-tap-highlight-color: transparent;
+        -moz-tap-highlight-color: transparent;
+        -o-tap-highlight-color: transparent;
+        tap-highlight-color: transparent;
     }
 
     svg.dark {
@@ -42,20 +32,39 @@ const index = indexer++;
     }
 </style>
 
-
+<script context="module">let indexer = 0;
+const vlight = {
+  rotate: 40,
+  mask: {
+    cx: 12,
+    cy: 4
+  },
+  cr: 10,
+  opacity: 0
+};
+const vdark = {
+  rotate: 180,
+  mask: {
+    cx: 30,
+    cy: 0
+  },
+  cr: 5,
+  opacity: 1
+};
+</script>
 <svg
-    on:click={iter}
-    on:keypress={null}
-    viewBox="0 0 24 24"
     class:dark
-    style={`transform: rotate(${$rotate}deg)`}
+    viewBox="0 0 24 24"
+    style={`transform: rotate(${$values.rotate}deg)`}
+    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" />
+        <circle cx={$values.mask.cx} cy={$values.mask.cy} r="11" fill="currentColor" />
     </mask>
-    <circle cx="12" cy="12" r={$cr} fill="currentColor" mask={`url(#theme_icon_${index})`} />
-    <g style={`opacity: ${$opacity}`}>
+    <circle cx="12" cy="12" r={$values.cr} fill="currentColor" mask={`url(#theme_icon_${index})`} />
+    <g style={`opacity: ${$values.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" />

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.30",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"