drab 4.1.4 → 4.1.6

package/dist/components/ContextMenu.svelte

@@ -28,7 +28,7 @@ Displays when the `target` element is right clicked, or long pressed on mobile.
 	let target: HTMLButtonElement;
 </script>
 
-<div class="bg-muted mb-8 flex justify-center rounded border p-12">
+<div class="mb-8 flex justify-center rounded border bg-muted p-12">
 	<div>Parent right click</div>
 	<ContextMenu class="z-10">
 		<div class="card flex w-48 flex-col gap-2 p-2 shadow-md">

package/dist/components/ContextMenu.svelte.d.ts

@@ -46,7 +46,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
  * let target: HTMLButtonElement;
  * </script>
  *
- * <div class="bg-muted mb-8 flex justify-center rounded border p-12">
+ * <div class="mb-8 flex justify-center rounded border bg-muted p-12">
  * <div>Parent right click</div>
  * <ContextMenu class="z-10">
  * 	<div class="card flex w-48 flex-col gap-2 p-2 shadow-md">

package/dist/components/Editor.svelte

@@ -19,6 +19,7 @@
 - `nameTextarea` - `name` of the `textarea` element
 - `placeholderTextarea` - `placeholder` of the `textarea` element
 - `selectionStartTextarea` - `selectionStart` value of the `textarea`
+- `spellcheckTextarea` - `spellcheck` of the `textarea` element
 - `valueTextarea` - `value` of the `textarea` element
 
 @Events
@@ -70,6 +71,7 @@
 export let contentElements = [];
 export let valueTextarea = "";
 export let placeholderTextarea = "";
+export let spellcheckTextarea = true;
 export let classTextarea = "";
 export let idTextarea = "";
 export let nameTextarea = "";
@@ -227,28 +229,29 @@ ${repeat}`,
         });
       }, 0);
     }
-  } else if (e.ctrlKey || e.metaKey) {
-    if (textArea.selectionStart === textArea.selectionEnd) {
-      if (e.key === "c" || e.key === "x") {
-        e.preventDefault();
-        const { lines, lineNumber, columnNumber } = getLineInfo();
-        await navigator.clipboard.writeText(
-          `${lineNumber === 0 && e.key === "x" ? "" : "\n"}${lines[lineNumber]}`
-        );
-        if (e.key === "x") {
-          const newPos = textArea.selectionStart - columnNumber;
-          lines.splice(lineNumber, 1);
-          valueTextarea = lines.join("\n");
-          setTimeout(() => {
-            textArea.setSelectionRange(newPos, newPos);
-          }, 0);
-        }
-      }
-    }
   } else {
     const nextCharIsClosing = Object.values(keyPairs).includes(nextChar);
     const highlighted = textArea.selectionStart !== textArea.selectionEnd;
-    if (e.ctrlKey && e.key) {
+    if (e.ctrlKey || e.metaKey) {
+      if (textArea.selectionStart === textArea.selectionEnd) {
+        if (e.key === "c" || e.key === "x") {
+          e.preventDefault();
+          const { lines, lineNumber, columnNumber } = getLineInfo();
+          await navigator.clipboard.writeText(
+            `${lineNumber === 0 && e.key === "x" ? "" : "\n"}${lines[lineNumber]}`
+          );
+          if (e.key === "x") {
+            const newPos = textArea.selectionStart - columnNumber;
+            lines.splice(lineNumber, 1);
+            valueTextarea = lines.join("\n");
+            setTimeout(() => {
+              textArea.setSelectionRange(newPos, newPos);
+            }, 0);
+          }
+        }
+      }
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key) {
       const matchedEl = contentElements.find((el) => el.key === e.key);
       if (matchedEl)
         addContent(matchedEl);
@@ -369,6 +372,7 @@ onMount(() => clientJs = true);
 	class={classTextarea}
 	name={nameTextarea}
 	placeholder={placeholderTextarea}
+	spellcheck={spellcheckTextarea}
 	on:keydown={onKeyDown}
 	on:keyup={updateSelectionStart}
 	on:dblclick={trimSelection}

package/dist/components/Editor.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
             /** controls how the text is added */
             display: "inline" | "block" | "wrap";
             /** contents of the `button` */
-            icon: string | ComponentType;
+            icon: string | ComponentType<any>;
             /** keyboard shortcut */
             key?: string | undefined;
             /** class to apply to the specific `button` */
@@ -18,6 +18,7 @@ declare const __propDef: {
         }[] | undefined;
         /** `value` of the `textarea` element */ valueTextarea?: string | undefined;
         /** `placeholder` of the `textarea` element */ placeholderTextarea?: string | undefined;
+        /** `spellcheck` of the `textarea` element */ spellcheckTextarea?: boolean | undefined;
         /** `class` of the `textarea` element */ classTextarea?: string | undefined;
         /** `id` of the `textarea` element */ idTextarea?: string | undefined;
         /** `name` of the `textarea` element */ nameTextarea?: string | undefined;
@@ -58,6 +59,7 @@ export type EditorSlots = typeof __propDef.slots;
  * - `nameTextarea` - `name` of the `textarea` element
  * - `placeholderTextarea` - `placeholder` of the `textarea` element
  * - `selectionStartTextarea` - `selectionStart` value of the `textarea`
+ * - `spellcheckTextarea` - `spellcheck` of the `textarea` element
  * - `valueTextarea` - `value` of the `textarea` element
  *
  * @Events

package/dist/components/FullscreenButton.svelte

@@ -31,7 +31,7 @@ Make the document or a `target` element fullscreen.
 
 <FullscreenButton class="button button-primary" />
 
-<div bind:this={target} class="card bg-muted mt-8">
+<div bind:this={target} class="card mt-8 bg-muted">
 	<div class="mb-2">Target element</div>
 	<FullscreenButton {target} class="button button-primary">
 		Enable Element Fullscreen

package/dist/components/FullscreenButton.svelte.d.ts

@@ -49,7 +49,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
  *
  * <FullscreenButton class="button button-primary" />
  *
- * <div bind:this={target} class="card bg-muted mt-8">
+ * <div bind:this={target} class="card mt-8 bg-muted">
  * <div class="mb-2">Target element</div>
  * <FullscreenButton {target} class="button button-primary">
  * 	Enable Element Fullscreen

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "4.1.4",
+	"version": "4.1.6",
 	"description": "An Unstyled Svelte Component Library",
 	"keywords": [
 		"components",
@@ -55,30 +55,30 @@
 		"doc": "bun format && node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
 	},
 	"dependencies": {
-		"svelte": "^4.2.1"
+		"svelte": "^4.2.8"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-vercel": "^3.0.3",
-		"@sveltejs/kit": "^1.25.2",
-		"@sveltejs/package": "^2.2.2",
+		"@sveltejs/adapter-vercel": "^3.1.0",
+		"@sveltejs/kit": "^1.29.1",
+		"@sveltejs/package": "^2.2.3",
 		"@tailwindcss/typography": "^0.5.10",
-		"@types/node": "^20.8.6",
-		"@typescript-eslint/eslint-plugin": "^6.8.0",
-		"@typescript-eslint/parser": "^6.8.0",
+		"@types/node": "^20.10.4",
+		"@typescript-eslint/eslint-plugin": "^6.14.0",
+		"@typescript-eslint/parser": "^6.14.0",
 		"autoprefixer": "^10.4.16",
-		"eslint": "^8.51.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.34.0",
-		"prettier": "^3.0.3",
-		"prettier-plugin-svelte": "^3.0.3",
-		"prettier-plugin-tailwindcss": "^0.5.6",
-		"publint": "^0.2.4",
+		"eslint": "^8.55.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-tailwindcss": "^0.5.9",
+		"publint": "^0.2.6",
 		"robino": "^0.0.39",
-		"svelte-check": "^3.5.2",
-		"tailwindcss": "^3.3.3",
+		"svelte-check": "^3.6.2",
+		"tailwindcss": "^3.3.6",
 		"tslib": "^2.6.2",
-		"typescript": "^5.2.2",
-		"uico": "^0.1.5",
-		"vite": "^4.4.11"
+		"typescript": "^5.3.3",
+		"uico": "^0.1.6",
+		"vite": "^4.5.0"
 	}
 }