@isoftdata/svelte-textarea - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

dist/TextArea.svelte

@@ -1,25 +0,58 @@
-<script>import Label from "@isoftdata/svelte-label";
-import { v4 as uuid } from "@lukeed/uuid";
-let classNames = "";
-export { classNames as class };
-export let id = uuid();
-export let label = null;
-export let labelClass = void 0;
-export let labelParentClass = void 0;
-export let showLabel = true;
-export let isLoading = false;
-export let required = false;
-export let hint = null;
-export let hintClass = void 0;
-export let hintClickable = false;
-export let selectOnFocus = false;
-export let textEllipsis = false;
-export let title = void 0;
-export let value;
-export let textarea = void 0;
-function doSelectOnFocus(event) {
-  if (selectOnFocus) {
-    event.target instanceof HTMLInputElement && event.target.select();
-  }
-}
+<script lang="ts">
+	import Label from '@isoftdata/svelte-label'
+	import type { ComponentProps, Snippet } from 'svelte'
+	import type { ClassValue, HTMLTextareaAttributes } from 'svelte/elements'
+
+	const uid = $props.id()
+
+	interface Props extends Omit<HTMLTextareaAttributes, `on:${string}` | `aria-${string}` | `bind:${string}`> {
+		class?: ClassValue
+		id?: any
+		label?: string | null
+		labelClass?: ClassValue | undefined
+		labelParentClass?: ClassValue | undefined
+		showLabel?: boolean
+		isLoading?: boolean
+		required?: boolean
+		hint?: string | null
+		hintClass?: string | undefined
+		hintClickable?: boolean
+		selectOnFocus?: boolean
+		textEllipsis?: boolean
+		title?: string | undefined
+		value: string | null
+		textarea?: HTMLTextAreaElement | undefined
+		prepend?: Snippet
+		append?: Snippet
+		hintClick?: ComponentProps<typeof Label>['hintClick']
+	}
+
+	let {
+		class: classNames = '',
+		id = uid,
+		label = null,
+		labelClass = undefined,
+		labelParentClass = undefined,
+		showLabel = true,
+		isLoading = false,
+		required = false,
+		hint = null,
+		hintClass = undefined,
+		hintClickable = false,
+		selectOnFocus = false,
+		textEllipsis = false,
+		title = undefined,
+		value = $bindable(),
+		textarea = $bindable(undefined),
+		prepend,
+		append,
+		hintClick,
+		...rest
+	}: Props = $props()
+
+	function doSelectOnFocus(event: FocusEvent) {
+		if (selectOnFocus) {
+			event.target instanceof HTMLInputElement && event.target.select()
+		}
+	}
 </script>
@@ -40,29 +73,20 @@
 	{hintClickable}
-	prepend={!!$$slots.prepend}
-	append={!!$$slots.append}
+	{append}
+	{prepend}
+	showPrepend={!!prepend}
+	showAppend={!!append}
 	controlFor={id}
-	on:hintClick
+	{hintClick}
 >
-	<slot
-		slot="prepend"
-		name="prepend"
-	/>
 	<textarea
 		bind:this={textarea}
 		{id}
-		class="form-control {classNames}"
+		class={['form-control', classNames]}
+		{...rest}
 		bind:value
-		on:focus={doSelectOnFocus}
-		on:focus
-		on:change
-		on:input
-		on:keyup
-		on:click
-		on:blur
-		{...$$restProps}
-	/>
-	<slot
-		slot="append"
-		name="append"
-	/>
+		onfocus={event => {
+			doSelectOnFocus(event)
+			rest?.onfocus?.(event)
+		}}
+	></textarea>
 </Label>

dist/TextArea.svelte.d.ts

@@ -1,47 +0,27 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        id?: string | undefined;
-        label?: string | null | undefined;
-        labelClass?: string | undefined;
-        labelParentClass?: string | undefined;
-        showLabel?: boolean | undefined;
-        isLoading?: boolean | undefined;
-        required?: boolean | undefined;
-        hint?: string | null | undefined;
-        hintClass?: string | undefined;
-        hintClickable?: boolean | undefined;
-        selectOnFocus?: boolean | undefined;
-        textEllipsis?: boolean | undefined;
-        title?: string | undefined;
-        value: string | null;
-        textarea?: HTMLTextAreaElement | undefined;
-    };
-    events: {
-        hintClick: CustomEvent<any>;
-        focus: FocusEvent;
-        change: Event;
-        input: Event;
-        keyup: KeyboardEvent;
-        click: MouseEvent;
-        blur: FocusEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        prepend: {
-            slot: string;
-        };
-        append: {
-            slot: string;
-        };
-    };
-};
-export type TextAreaProps = typeof __propDef.props;
-export type TextAreaEvents = typeof __propDef.events;
-export type TextAreaSlots = typeof __propDef.slots;
-export default class TextArea extends SvelteComponent<TextAreaProps, TextAreaEvents, TextAreaSlots> {
+import Label from '@isoftdata/svelte-label';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { ClassValue, HTMLTextareaAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLTextareaAttributes, `on:${string}` | `aria-${string}` | `bind:${string}`> {
+    class?: ClassValue;
+    id?: any;
+    label?: string | null;
+    labelClass?: ClassValue | undefined;
+    labelParentClass?: ClassValue | undefined;
+    showLabel?: boolean;
+    isLoading?: boolean;
+    required?: boolean;
+    hint?: string | null;
+    hintClass?: string | undefined;
+    hintClickable?: boolean;
+    selectOnFocus?: boolean;
+    textEllipsis?: boolean;
+    title?: string | undefined;
+    value: string | null;
+    textarea?: HTMLTextAreaElement | undefined;
+    prepend?: Snippet;
+    append?: Snippet;
+    hintClick?: ComponentProps<typeof Label>['hintClick'];
 }
-export {};
+declare const TextArea: import("svelte").Component<Props, {}, "value" | "textarea">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;

package.json

 {
-	"name": "@isoftdata/svelte-textarea",
-	"version": "1.3.0",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"peerDependencies": {
-		"svelte": "^4.0.0 || ^5.1.6"
-	},
-	"devDependencies": {
-		"@isoftdata/prettier-config": "^1.0.0",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.27.0",
-		"@sveltejs/package": "^2.0.0",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"publint": "^0.1.9",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"prettier": "@isoftdata/prettier-config",
-	"dependencies": {
-		"@isoftdata/svelte-label": "^1.1.3",
-		"@isoftdata/utility-bootstrap": "^2.2.0",
-		"@lukeed/uuid": "^2.0.1"
-	}
+  "name": "@isoftdata/svelte-textarea",
+  "version": "2.0.0",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.23.2"
+  },
+  "devDependencies": {
+    "@isoftdata/prettier-config": "^2.0.4",
+    "@isoftdata/svelte-bootstrap-version-switcher": "^1.1.0",
+    "@sveltejs/adapter-auto": "^5.0.0",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.45.1",
+    "prettier": "^3.1.0",
+    "prettier-plugin-svelte": "^3.2.6",
+    "publint": "^0.1.9",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.5.0",
+    "vite": "^6.2.4"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "prettier": "@isoftdata/prettier-config",
+  "dependencies": {
+    "@isoftdata/svelte-label": "^2.0.0",
+    "@isoftdata/utility-bootstrap": "^2.2.0",
+    "svelte": "^5.23.2"
+  }
 }

README.md

@@ -9,2 +9,9 @@ # Svelte Textarea
 
+## Breaking changes
+
+### 2.0.0
+- Require Svelte 5
+- Slots -> Snippets
+- Events -> Callbacks
+
 ## Props
@@ -15,4 +22,4 @@
 | class | `string` | The class name(s) to add to the `textarea`. | `undefined` |
-| hint | `string \| null` | Hint text to be displayed as part of the label	 | `null` |
-| hintClass | `string` | The class name(s) to add to the hint text. | `undefined` |
+| hint | `string \| Snippet \| null` | Hint text to be displayed as part of the label	 | `null` |
+| hintClass | `ClassValue` | The class name(s) to add to the hint text. | `undefined` |
 | hintClickable | `boolean` | Whether the hint is clickable or not. | `false` |
@@ -22,4 +29,4 @@ | id | `string` | The unique identifier . | `uuid()` |
 | label | `string \| null` | The label text for the component. | `null` |
-| labelClass | `string` | The class name(s) to add to the label element. | `undefined` |
-| labelParentClass | `string` | The class name(s) to add to the label's parent. | `undefined` |
+| labelClass | `ClassValue` | The class name(s) to add to the label element. | `undefined` |
+| labelParentClass | `ClassValue` | The class name(s) to add to the label's parent. | `undefined` |
 | required | `boolean` | Whether the field is required or not. | `false` |
@@ -33,16 +40,10 @@ | selectOnFocus | `boolean` | Whether to select the text on focus or not. | `false` |
 
-## Slots
+## Snippets
 * append - Any content you want to append to the input.
 * prepend - Any content you want to prepend to the input.
+* hint - Passed to the label component
 
 ## Events
-The following events are forwarded:
 
-- blur
-- change
-- click
-- focus
-- hintClick (from Label component)
-- input
-- keyup
+All event callbacks/handlers are passed to the underlying textarea as normal
 
@@ -49,0 +50,0 @@ ## Example

No alert changes

Improved metrics

Total package byte prevSize

7066

9.19%

Number of lines in readme file

67

1.52%

Worsened metrics

Dev dependency count

19

11.76%

Lines of code

29

-40.82%

Dependency changes

• + Added

  svelte@^5.23.2

• - Removed

  @lukeed/uuid@^2.0.1

• - Removed

  @lukeed/csprng@1.1.0
  (transitive)

• - Removed

  @lukeed/uuid@2.0.1
  (transitive)

• Updated

  @isoftdata/svelte-label@^2.0.0