@medyll/idae-slotui-svelte 0.181.0 → 0.181.4

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 medyll
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 medyll
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,47 +1,47 @@
-# @medyll/idae-slotui-svelte
-
-This package is part of the Idae monorepo and focuses on providing slot UI components for Svelte applications.  
-It aims to offer a set of reusable and customizable slots to enhance the development of web applications.
-
-## Features
-
-- **Reusable Components**: Prebuilt slot-based components to speed up development.
-- **Customizable**: Easily adapt components to fit your application's design and functionality.
-- **Svelte Integration**: Designed specifically for Svelte, ensuring seamless integration.
-- **Lightweight**: Minimal dependencies for optimal performance.
-
-## Installation
-
-To install the package, use your preferred package manager:
-
-```bash
-npm install @medyll/idae-slotui-svelte
-# or
-yarn add @medyll/idae-slotui-svelte
-# or
-pnpm add @medyll/idae-slotui-svelte
-```
-
-## Usage
-
-Import and use the components in your Svelte application:
-
-```svelte
-<script>
-    import { SlotComponent } from '@medyll/idae-slotui-svelte';
-</script>
-
-<SlotComponent>
-    <div slot="header">Header Content</div>
-    <div slot="body">Body Content</div>
-    <div slot="footer">Footer Content</div>
-</SlotComponent>
-```
-
-## Contributing
-
-Contributions are welcome! Please refer to the [contribution guidelines](../../CONTRIBUTING.md) for more details.
-
-## License
-
-This package is licensed under the MIT License. See the [LICENSE](../../LICENSE) file for more information.
+# @medyll/idae-slotui-svelte
+
+This package is part of the Idae monorepo and focuses on providing slot UI components for Svelte applications.  
+It aims to offer a set of reusable and customizable slots to enhance the development of web applications.
+
+## Features
+
+- **Reusable Components**: Prebuilt slot-based components to speed up development.
+- **Customizable**: Easily adapt components to fit your application's design and functionality.
+- **Svelte Integration**: Designed specifically for Svelte, ensuring seamless integration.
+- **Lightweight**: Minimal dependencies for optimal performance.
+
+## Installation
+
+To install the package, use your preferred package manager:
+
+```bash
+npm install @medyll/idae-slotui-svelte
+# or
+yarn add @medyll/idae-slotui-svelte
+# or
+pnpm add @medyll/idae-slotui-svelte
+```
+
+## Usage
+
+Import and use the components in your Svelte application:
+
+```svelte
+<script>
+    import { SlotComponent } from '@medyll/idae-slotui-svelte';
+</script>
+
+<SlotComponent>
+    <div slot="header">Header Content</div>
+    <div slot="body">Body Content</div>
+    <div slot="footer">Footer Content</div>
+</SlotComponent>
+```
+
+## Contributing
+
+Contributions are welcome! Please refer to the [contribution guidelines](../../CONTRIBUTING.md) for more details.
+
+## License
+
+This package is licensed under the MIT License. See the [LICENSE](../../LICENSE) file for more information.

package/cli.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+
+const pkgJson = require(path.join(__dirname, 'package.json'));
+const packageName = pkgJson.name.replace(/^@[^/]+\//, '');
+const cmd = process.argv[2];
+
+
+if (cmd === 'get-readme') {
+  const readmePath = path.join(__dirname, 'README.md');
+  if (fs.existsSync(readmePath)) {
+    const content = fs.readFileSync(readmePath, 'utf8');
+    console.log(content);
+  } else {
+    console.error('README.md not found in this package.');
+    process.exit(1);
+  }
+} else if (cmd === 'install-skill') {
+  const readline = require('readline');
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  const skillSrc = path.join(__dirname, 'SKILL.md');
+  const skillDest = path.resolve(__dirname, `../../../.github/skills/${packageName}/SKILL.md`);
+  if (!fs.existsSync(skillSrc)) {
+    console.error('SKILL.md not found in this package.');
+    process.exit(1);
+  }
+  rl.question(`This will copy SKILL.md to .github/skills/${packageName}/SKILL.md. Continue? (y/n): `, (answer) => {
+    if (answer.trim().toLowerCase() === 'y' || answer.trim().toLowerCase() === 'yes') {
+      fs.mkdirSync(path.dirname(skillDest), { recursive: true });
+      fs.copyFileSync(skillSrc, skillDest);
+      console.log(`SKILL.md installed to .github/skills/${packageName}/SKILL.md`);
+    } else {
+      console.log('Operation cancelled.');
+    }
+    rl.close();
+  });
+} else {
+  console.log('Usage: <cli> get-readme | install-skill');
+  process.exit(1);
+}

package/dist/base/alert/Alert.demo.svelte

@@ -1,62 +1,62 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import Alert from './Alert.svelte';
-	import Demoer from '../demoer/Demoer.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import { parameters, componentArgs } from './types.js';
-
-	let code1 = `
-<Alert {...activeParams}>
-	Simple alert with a button
-	{#snippet topButtonSlot()}
-		<Button>button</Button>
-	{/snippet}
-</Alert>`;
-	let code2 = `
-<Alert />	`;
-</script>
-
-<ComponentDemo
-	component="Alert"
-	cite="Then they were informed, then they were messaged, then they were alerted. Br Jhons, 1752"
->
-	<DemoPage component="Alert" code={code1}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<div class="flex-h flex-wrap flex-align-middle gap-medium">
-					<Alert {...activeParams}>hi !</Alert>
-					<Alert {...activeParams}>
-						Simple alert with a button
-						{#snippet alertTopButton()}
-							<Button>button</Button>
-						{/snippet}
-					</Alert>
-					<Alert
-						{...activeParams}
-						on:alert:closed={() => {
-							alert('closed');
-						}}
-					>
-						Alert with button close
-						{#snippet alertMessage()}
-							description here here
-						{/snippet}
-						{#snippet alertButtonZone()}
-							<Button data-close>close</Button>
-						{/snippet}
-					</Alert>
-				</div>
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-	<DemoPage title="Using props" component="Alert" code={code2}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<div class="flex-h flex-wrap gap-medium">
-					<Alert {...activeParams} />
-				</div>
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import Alert from './Alert.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import { parameters, componentArgs } from './types.js';
+
+	let code1 = `
+<Alert {...activeParams}>
+	Simple alert with a button
+	{#snippet topButtonSlot()}
+		<Button>button</Button>
+	{/snippet}
+</Alert>`;
+	let code2 = `
+<Alert />	`;
+</script>
+
+<ComponentDemo
+	component="Alert"
+	cite="Then they were informed, then they were messaged, then they were alerted. Br Jhons, 1752"
+>
+	<DemoPage component="Alert" code={code1}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<div class="flex-h flex-wrap flex-align-middle gap-medium">
+					<Alert {...activeParams}>hi !</Alert>
+					<Alert {...activeParams}>
+						Simple alert with a button
+						{#snippet alertTopButton()}
+							<Button>button</Button>
+						{/snippet}
+					</Alert>
+					<Alert
+						{...activeParams}
+						on:alert:closed={() => {
+							alert('closed');
+						}}
+					>
+						Alert with button close
+						{#snippet alertMessage()}
+							description here here
+						{/snippet}
+						{#snippet alertButtonZone()}
+							<Button data-close>close</Button>
+						{/snippet}
+					</Alert>
+				</div>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+	<DemoPage title="Using props" component="Alert" code={code2}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<div class="flex-h flex-wrap gap-medium">
+					<Alert {...activeParams} />
+				</div>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/base/alert/Alert.svelte

@@ -1,123 +1,120 @@
-<script module lang="ts">
-	import type { Snippet } from "svelte";
-	import type { ElementProps, CommonProps } from '../../types/index.js'; 
- 
-	export interface AlertProps extends CommonProps {
-		/** alert level */
-		level?: ElementProps["levels"];
-		/** message to be shown */
-		message?: string;
-		/** make the alert draggable */
-		draggable?: boolean;
-		/** show or hide the alert */
-		isOpen?: boolean;
-		children?: Snippet;
-		alertTopButton?: Snippet;
-		alertMessage?: Snippet;
-		alertButtonZone?: Snippet;
-		alertButtonClose?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import Divider from '../divider/Divider.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import type { ExpandProps } from '../../types/index.js';
-	// import type { AlertProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import IconButton from '../../controls/button/IconButton.svelte';
-
-	let {
-		class: className,
-		message,
-		draggable = false,
-		level = $bindable<ElementProps['levels']>('info'),
-		isOpen = $bindable<boolean>(false),
-		element = $bindable<HTMLDialogElement>(),
-		children,
-		alertTopButton,
-		alertMessage,
-		alertButtonZone,
-		alertButtonClose
-	}: AlertProps = $props();
-
-	export const actions: Record<'open' | 'toggle' | 'close', Function> = {
-		open,
-		toggle,
-		close
-	};
-
-	const handleClick = (event: Event) => {
-		if ((event?.target as Element)?.getAttribute('data-close')) {
-			event.stopPropagation();
-			actions.close();
-		}
-	};
-
-	$effect(() => {
-		if (element) {
-			element.addEventListener('click', handleClick, true);
-		}
-		return () => {
-			if (element) {
-				element.removeEventListener('click', handleClick);
-			}
-		};
-	});
-
-	function open() {
-		isOpen = true;
-	}
-	function toggle() {
-		isOpen = !isOpen;
-	}
-	function close() {
-		isOpen = false;
-	}
-</script>
-
-{#if isOpen}
-	<dialog
-		open={isOpen}
-		{draggable}
-		bind:this={element}
-		transition:fade|global
-		class="alert {className}"
-	>
-		<article class="dialog-content border-color-scheme-{level}">
-			<header class="header-bar">
-				<div class="dot bg-themed-scheme-{level}"></div>
-				<div class="title">
-					<Slotted child={children}>{message}</Slotted>
-				</div>
-				<Slotted child={alertTopButton} />
-				<div data-close>
-					<Slotted child={alertButtonClose}
-						><IconButton
-							icon="window-close"
-							variant="naked"
-							onclick={() => {
-								isOpen = !isOpen;
-							}}
-							aria-label="Close"
-						/></Slotted
-					>
-				</div>
-			</header>
-			{#if alertMessage}
-				<Divider />
-				{@render alertMessage()}
-			{/if}
-			{#if alertButtonZone}
-				<footer class="dialog-footer">
-					{@render alertButtonZone()}
-				</footer>
-			{/if}
-		</article>
-	</dialog>
-{/if}
-
+<script module lang="ts">
+	import type { Snippet } from "svelte";
+	import type { ElementProps, CommonProps } from '../../types/index.js'; 
+ 
+	export interface AlertProps extends CommonProps {
+		/** alert level */
+		level?: ElementProps["levels"];
+		/** message to be shown */
+		message?: string;
+		/** make the alert draggable */
+		draggable?: boolean;
+		/** show or hide the alert */
+		isOpen?: boolean;
+		children?: Snippet;
+		alertTopButton?: Snippet;
+		alertMessage?: Snippet;
+		alertButtonZone?: Snippet;
+		alertButtonClose?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Divider from '../divider/Divider.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import IconButton from '../../controls/button/IconButton.svelte';
+
+	let {
+		class: className,
+		message,
+		draggable = false,
+		level = $bindable<ElementProps['levels']>('info'),
+		isOpen = $bindable<boolean>(false),
+		element = $bindable<HTMLDialogElement>(),
+		children,
+		alertTopButton,
+		alertMessage,
+		alertButtonZone,
+		alertButtonClose
+	}: AlertProps = $props();
+
+	export const actions: Record<'open' | 'toggle' | 'close', Function> = {
+		open,
+		toggle,
+		close
+	};
+
+	const handleClick = (event: Event) => {
+		if ((event?.target as Element)?.getAttribute('data-close')) {
+			event.stopPropagation();
+			actions.close();
+		}
+	};
+
+	$effect(() => {
+		if (element) {
+			element.addEventListener('click', handleClick, true);
+		}
+		return () => {
+			if (element) {
+				element.removeEventListener('click', handleClick);
+			}
+		};
+	});
+
+	function open() {
+		isOpen = true;
+	}
+	function toggle() {
+		isOpen = !isOpen;
+	}
+	function close() {
+		isOpen = false;
+	}
+</script>
+
+{#if isOpen}
+	<dialog
+		open={isOpen}
+		{draggable}
+		bind:this={element}
+		transition:fade|global
+		class="alert {className}"
+	>
+		<article class="dialog-content border-color-scheme-{level}">
+			<header class="header-bar">
+				<div class="dot bg-themed-scheme-{level}"></div>
+				<div class="title">
+					<Slotted child={children}>{message}</Slotted>
+				</div>
+				<Slotted child={alertTopButton} />
+				<div data-close>
+					<Slotted child={alertButtonClose}
+						><IconButton
+							icon="window-close"
+							variant="naked"
+							onclick={() => {
+								isOpen = !isOpen;
+							}}
+							aria-label="Close"
+						/></Slotted
+					>
+				</div>
+			</header>
+			{#if alertMessage}
+				<Divider />
+				{@render alertMessage()}
+			{/if}
+			{#if alertButtonZone}
+				<footer class="dialog-footer">
+					{@render alertButtonZone()}
+				</footer>
+			{/if}
+		</article>
+	</dialog>
+{/if}
+
 <style>:root {
   --alert-radius: var(--sld-radius-small);
   --alert-color-border: var(--sld-color-border);
@@ -213,4 +210,4 @@ dialog.alert article.dialog-content footer.dialog-footer button {
   color: white;
   text-shadow: 0 0 0.125rem #cc0000;
   background-color: red;
-}</style>
+}</style>

package/dist/base/alert/Alert.svelte.d.ts

@@ -17,6 +17,6 @@ export interface AlertProps extends CommonProps {
 }
 declare const Alert: import("svelte").Component<AlertProps, {
     actions: Record<"open" | "toggle" | "close", Function>;
-}, "element" | "isOpen" | "level">;
+}, "element" | "level" | "isOpen">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;