@leveluptuts/bookit - npm Package Compare versions

Comparing version 0.0.20 to 0.0.24

Book.svelte

@@ -5,6 +5,7 @@ <script>import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { bookit_state } from './state';
+export let title = 'Bookit';
 </script>
 
 <div class="book-wrapper">
-	<BookHeader />
+	<BookHeader {title} />
 
@@ -11,0 +12,0 @@ <Splitpanes theme="level-up-split">

Book.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        title?: string | undefined;
+    };
     events: {
@@ -5,0 +7,0 @@ [evt: string]: CustomEvent<any>;

BookHeader.svelte

 <script>import { bookit_state } from './state';
 import BookDropMenu from './BookDropMenu.svelte';
 import BookIcon from './BookIcon.svelte';
+export let title;
 </script>
 
 <div class="wrapper">
+	<h5>{title}</h5>
 	<button
@@ -32,5 +34,10 @@ class="nav_toggle"
 <style>
+	h5 {
+		margin: 0;
+		color: white;
+	}
+
 	.nav_toggle {
-		position: absolute;
-		left: 0;
+		margin-right: auto;
+		left: 100px;
 		width: auto;
@@ -37,0 +44,0 @@ }

BookHeader.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        title: string;
+    };
     events: {
@@ -5,0 +7,0 @@ [evt: string]: CustomEvent<any>;

BookNav.svelte

@@ -39,3 +39,9 @@ <script>// This is the side nav aka BookNav
 										{#each Object.entries(story.frames) as [key, frame] (key)}
-											<li class="bookit_link"><BookIcon name="frame" />{frame.title}</li>
+											<li
+												on:click={() => ($bookit_state.selected_frame = encodeURI(frame.title))}
+												class="bookit_link"
+												class:active={$bookit_state?.selected_frame === encodeURI(frame.title)}
+											>
+												<BookIcon name="frame" />{frame.title}
+											</li>
 										{/each}
@@ -75,3 +81,3 @@ </ul>
 
-a.active.bookit_link {
+.active {
   color: var(--bookit_accent, #f0c05e);
@@ -78,0 +84,0 @@ }

Canvas.svelte

@@ -22,3 +22,3 @@ <script>import { onMount } from 'svelte';
 				<Splitpanes horizontal={true} theme="level-up-split">
-					<Pane size={$bookit_state.code === 'VISIBLE' ? '80' : '100'}>
+					<Pane size={$bookit_state.code === 'VISIBLE' ? 80 : 100}>
 						<div class="bookit_viewport">
@@ -29,3 +29,3 @@ <slot />
 					{#if $bookit_state.code === 'VISIBLE'}
-						<Pane size="20">
+						<Pane size={20}>
 							<Code />
@@ -36,4 +36,4 @@ </Pane>
 			</Pane>
-			{#if $bookit_state?.selected_frame?.title}
-				<Pane size="20">
+			{#if $bookit_state?.selected_frame}
+				<Pane size={20}>
 					<FrameControls />
@@ -40,0 +40,0 @@ <Controls />

Controls.svelte

@@ -1,12 +0,19 @@
-<script>import ControlsRow from './ControlsRow.svelte';
+<script>import { slide } from 'svelte/transition';
+import ControlsRow from './ControlsRow.svelte';
 import SideBarHeading from './elements/SideBarHeading.svelte';
 import { bookit_state } from './state';
+$: selected_title = $bookit_state === null || $bookit_state === void 0 ? void 0 : $bookit_state.selected_frame;
+let is_toggled = true;
 </script>
 
-<SideBarHeading>🛠️ Controls</SideBarHeading>
+<SideBarHeading on:click={() => (is_toggled = !is_toggled)}>🛠️ Controls</SideBarHeading>
 
-{#if $bookit_state?.selected_frame?.controls}
-	{#each Object.entries($bookit_state?.selected_frame?.controls) as [key, value]}
-		<ControlsRow {key} {value} path={key} />
-	{/each}
+{#if is_toggled}
+	<div transition:slide>
+		{#if $bookit_state?.loaded.frames?.[selected_title]?.controls}
+			{#each Object.entries($bookit_state.loaded.frames[selected_title]?.controls) as [key, value]}
+				<ControlsRow {key} {value} path={key} />
+			{/each}
+		{/if}
+	</div>
 {/if}

ControlsRow.svelte

@@ -6,2 +6,3 @@ <script>import { bookit_state } from './state';
 export let path;
+$: selected_title = $bookit_state === null || $bookit_state === void 0 ? void 0 : $bookit_state.selected_frame;
 function updateStore(value) {
@@ -11,3 +12,3 @@ // If it's single value
         let newData = { ...u };
-        set(newData, 'selected_frame.controls.' + path, value);
+        set(newData, 'loaded.frames.' + selected_title + '.controls.' + path, value);
         return newData;
@@ -90,3 +91,3 @@ });
 		width: 100%;
-		background: var(--toy-background-int);
+		background: transparent;
 	}
@@ -93,0 +94,0 @@

ControlsRow.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        key: any;
-        value: any;
-        path: any;
+        key: string;
+        value: string | boolean | number;
+        path: string;
     };
@@ -8,0 +8,0 @@ events: {

docs/PropTable.svelte

@@ -48,4 +48,4 @@ <script>export let props = {};
 		border-spacing: 0;
-		font-family: var(--bodyFont);
-		font-size: var(--smallFontSize);
+		font-family: var(--body_font);
+		font-size: var(--small_font_size);
 		border-radius: 5px;
@@ -52,0 +52,0 @@ overflow: hidden;

elements/SideBarHeading.svelte

@@ -1,5 +0,7 @@
-<script>export let active = false;
+<script>import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
+export let active = false;
 </script>
 
-<h4 class:active>
+<h4 class:active on:click={() => dispatch('click')}>
 	<slot />
@@ -6,0 +8,0 @@ </h4>

elements/SideBarHeading.svelte.d.ts

@@ -7,2 +7,4 @@ import { SvelteComponentTyped } from "svelte";
     events: {
+        click: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
@@ -9,0 +11,0 @@ };

Frame.svelte

@@ -1,2 +0,2 @@
-<script>var _a, _b;
+<script>var _a, _b, _c, _d, _e, _f;
 import Portal from './utils/Portal.svelte';
@@ -13,16 +13,23 @@ import { bookit_state } from './state';
 export let controls = null;
-$bookit_state.loaded.frames[title] = { title, padding, border, bg, size, checker };
+let encoded_title = encodeURI(title);
+$: encoded_title = encodeURI(title);
+$bookit_state.loaded.frames[encoded_title] = {
+    title,
+    padding,
+    border,
+    bg,
+    size,
+    checker,
+    controls
+};
 // Local controls are what passes the props from the "Controls" section to the slot props
 // This makes props available to the story component
-$: localControls = controls;
-$: local_bg = $bookit_state.loaded.frames[title].bg;
-$: local_size = $bookit_state.loaded.frames[title].size;
-$: height = local_size[1] + (typeof local_size[1] === 'number' ? 'px' : '');
-$: width = local_size[0] + (typeof local_size[0] === 'number' ? 'px' : '');
-$: local_border = $bookit_state.loaded.frames[title].border;
-$: local_checker = $bookit_state.loaded.frames[title].checker;
-$: local_padding = $bookit_state.loaded.frames[title].padding;
-$: if (title === ((_a = $bookit_state === null || $bookit_state === void 0 ? void 0 : $bookit_state.selected_frame) === null || _a === void 0 ? void 0 : _a.title)) {
-    localControls = (_b = $bookit_state === null || $bookit_state === void 0 ? void 0 : $bookit_state.selected_frame) === null || _b === void 0 ? void 0 : _b.controls;
-}
+$: local_bg = (_a = $bookit_state.loaded.frames[encoded_title]) === null || _a === void 0 ? void 0 : _a.bg;
+$: local_size = (_b = $bookit_state.loaded.frames[encoded_title]) === null || _b === void 0 ? void 0 : _b.size;
+$: height = (local_size === null || local_size === void 0 ? void 0 : local_size[1]) + (typeof (local_size === null || local_size === void 0 ? void 0 : local_size[1]) === 'number' ? 'px' : '');
+$: width = (local_size === null || local_size === void 0 ? void 0 : local_size[0]) + (typeof (local_size === null || local_size === void 0 ? void 0 : local_size[0]) === 'number' ? 'px' : '');
+$: local_border = (_c = $bookit_state.loaded.frames[encoded_title]) === null || _c === void 0 ? void 0 : _c.border;
+$: local_checker = (_d = $bookit_state.loaded.frames[encoded_title]) === null || _d === void 0 ? void 0 : _d.checker;
+$: local_padding = (_e = $bookit_state.loaded.frames[encoded_title]) === null || _e === void 0 ? void 0 : _e.padding;
+$: local_controls = (_f = $bookit_state.loaded.frames[encoded_title]) === null || _f === void 0 ? void 0 : _f.controls;
 </script>
@@ -33,12 +40,6 @@
 	style:width
-	class:selected={$bookit_state?.selected_frame?.title === title}
+	class:selected={$bookit_state?.selected_frame === encoded_title}
 >
 	<!-- Change how controls are loaded. These should probably be put into the tree or something -->
-	<h4
-		on:click={() =>
-			($bookit_state.selected_frame = {
-				title,
-				controls
-			})}
-	>
+	<h4 on:click={() => ($bookit_state.selected_frame = encoded_title)}>
 		<BookIcon name="frame" />
@@ -68,3 +69,3 @@ {title}
 			<Portal>
-				<slot props={localControls} />
+				<slot props={local_controls} />
 			</Portal>
@@ -71,0 +72,0 @@ </div>

FrameControls.svelte

@@ -1,2 +0,2 @@
-<script>var _a, _b;
+<script>import { slide } from 'svelte/transition';
 import BookDropMenu from './BookDropMenu.svelte';
@@ -6,4 +6,5 @@ import BookIcon from './BookIcon.svelte';
 import { bookit_state } from './state';
-let selected_title = (_a = $bookit_state.selected_frame) === null || _a === void 0 ? void 0 : _a.title;
-$: selected_title = (_b = $bookit_state === null || $bookit_state === void 0 ? void 0 : $bookit_state.selected_frame) === null || _b === void 0 ? void 0 : _b.title;
+// let selected_title = $bookit_state.selected_frame;
+$: selected_title = $bookit_state === null || $bookit_state === void 0 ? void 0 : $bookit_state.selected_frame;
+let is_toggled = true;
 </script>
@@ -13,40 +14,51 @@
 	<div class="wrapper">
-		<SideBarHeading><BookIcon name="frame" /> Controls</SideBarHeading>
-		<div class="inputs">
-			<label>
-				Padding
-				<input type="number" bind:value={$bookit_state.loaded.frames[selected_title].padding} />
-			</label>
-			<label>
-				Checker
-				<input type="checkbox" bind:checked={$bookit_state.loaded.frames[selected_title].checker} />
-			</label>
-			<label>
-				Border
-				<input type="checkbox" bind:checked={$bookit_state.loaded.frames[selected_title].border} />
-			</label>
-			<label>
-				Background
-				<input type="text" bind:value={$bookit_state.loaded.frames[selected_title].bg} />
-			</label>
+		<SideBarHeading on:click={() => (is_toggled = !is_toggled)}
+			><BookIcon name="frame" /> Controls</SideBarHeading
+		>
 
-			<label>Size:</label>
-			<BookDropMenu
-				icon="size"
-				buttonText="Size Presets"
-				onUpdate={(size) => ($bookit_state.loaded.frames[selected_title].size = size)}
-				options={[
-					{ label: 'Small 320px', value: [320, 'auto'] },
-					{ label: 'iPhone 13 Pro Max', value: [428, 926] },
-					{ label: 'Med 640px', value: [640, 'auto'] },
-					{ label: 'Large 960px', value: [960, 'auto'] }
-				]}
-			/>
-			<div style:padding="6px" />
+		{#if is_toggled}
+			<div class="inputs" transition:slide>
+				<label>
+					Padding
+					<input type="number" bind:value={$bookit_state.loaded.frames[selected_title].padding} />
+				</label>
+				<label>
+					Checker
+					<input
+						type="checkbox"
+						bind:checked={$bookit_state.loaded.frames[selected_title].checker}
+					/>
+				</label>
+				<label>
+					Border
+					<input
+						type="checkbox"
+						bind:checked={$bookit_state.loaded.frames[selected_title].border}
+					/>
+				</label>
+				<label>
+					Background
+					<input type="text" bind:value={$bookit_state.loaded.frames[selected_title].bg} />
+				</label>
 
-			<div class="joint-input">
-				<input type="number" bind:value={$bookit_state.loaded.frames[selected_title].size[0]} /> x
-				<input type="number" bind:value={$bookit_state.loaded.frames[selected_title].size[1]} />
+				<label>Size:</label>
+				<BookDropMenu
+					icon="size"
+					buttonText="Size Presets"
+					onUpdate={(size) => ($bookit_state.loaded.frames[selected_title].size = size)}
+					options={[
+						{ label: 'Small 320px', value: [320, 'auto'] },
+						{ label: 'iPhone 13 Pro Max', value: [428, 926] },
+						{ label: 'Med 640px', value: [640, 'auto'] },
+						{ label: 'Large 960px', value: [960, 'auto'] }
+					]}
+				/>
+				<div style:padding="6px" />
+
+				<div class="joint-input">
+					<input type="number" bind:value={$bookit_state.loaded.frames[selected_title].size[0]} /> x
+					<input type="number" bind:value={$bookit_state.loaded.frames[selected_title].size[1]} />
+				</div>
 			</div>
-		</div>
+		{/if}
 	</div>
@@ -74,3 +86,2 @@ {/if}
 	.wrapper {
-		padding: 0 0 20px 0;
 		border-bottom: var(--bookit_line);
@@ -80,3 +91,3 @@ }
 	.inputs {
-		padding: 5px;
+		padding: 5px 5px 20px;
 	}
@@ -83,0 +94,0 @@

package.json

@@ -35,3 +35,3 @@ {
   "type": "module",
-  "version": "0.0.20",
+  "version": "0.0.24",
   "exports": {
@@ -38,0 +38,0 @@ "./package.json": "./package.json",

No alert changes

Improved metrics

Total package byte prevSize

53283

2.89%

Lines of code

561

1.08%

No dependency changes