Merge pull request skeletonlabs#2186 from skeletonlabs/dev

Merge for release
Carlosg19 · Oct 24, 2023 · 58695fd · 58695fd
2 parents 1e3d182 + ede42ee
commit 58695fd
Show file tree

Hide file tree

Showing 48 changed files with 800 additions and 130 deletions.
diff --git a/.changeset/early-beans-listen.md b/.changeset/early-beans-listen.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/tw-plugin": patch
+---
+
+bugfix: Added disabled state styles for `.btn-group` children, such as buttons
diff --git a/.changeset/polite-walls-repair.md b/.changeset/polite-walls-repair.md
@@ -0,0 +1,8 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: Added recursive Tree View component enhancements including:
+
+- Added `click` and `toggle` events.
+- The `lead` and `content` props now accepts Svelte components and HTML content.
diff --git a/.changeset/red-oranges-sneeze.md b/.changeset/red-oranges-sneeze.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: Added a transition `duration` property to the Drawer component as well as `DrawerSettings`
diff --git a/.changeset/shy-llamas-laugh.md b/.changeset/shy-llamas-laugh.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/tw-plugin": patch
+---
+
+chore: Improved the default modal focus state styles. Focus should now be shown by default.
diff --git a/.changeset/yellow-guests-warn.md b/.changeset/yellow-guests-warn.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: Fixed a linting error on the linting error on Progress Radial component
diff --git a/packages/plugin/src/styles/components/buttons.css b/packages/plugin/src/styles/components/buttons.css
@@ -1,8 +1,6 @@
 /* Tailwind Elements: button.css */
 
 @layer components {
-	/* === States === */
-
 	.button-base-styles {
 		/* Size (match base) */
 		@apply text-base;
@@ -18,18 +16,21 @@
 		@apply transition-all;
 	}
 
+	/* === State === */
+
+	.btn:disabled,
+	.btn-icon:disabled,
+	.btn-group > *:disabled {
+		@apply !opacity-50 !cursor-not-allowed active:scale-100 hover:brightness-100;
+	}
+
 	/* === Button === */
 	/* Standard button/anchor tag elements. */
 
 	.btn {
 		@apply button-base-styles rounded-token active:scale-[95%] active:brightness-90;
 	}
 
-	.btn:disabled,
-	.btn-icon:disabled {
-		@apply !opacity-50 !cursor-not-allowed active:scale-100 hover:brightness-100;
-	}
-
 	/* Button: Sizes */
 	/* Note: Default values are built into `.btn` */
 	.btn-sm {

diff --git a/packages/plugin/src/styles/components/modals.css b/packages/plugin/src/styles/components/modals.css
@@ -14,4 +14,10 @@
 	.w-modal-wide {
 		@apply w-full max-w-[80%];
 	}
+
+	/* Provides initial focus selection styles on opening the modal */
+	.modal *:focus:not([tabindex='-1']):not(.input):not(.textarea):not(.select):not(.input-group) {
+		outline-style: auto;
+		@apply outline-[-webkit-focus-ring-color];
+	}
 }
diff --git a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte
@@ -44,7 +44,7 @@
 	let dashoffset: number;
 
 	// Set Progress Amount
-	function setProgress(percent: any) {
+	function setProgress(percent: number) {
 		circumference = radius * 2 * Math.PI;
 		dashoffset = circumference - (percent / 100) * circumference;
 	}

diff --git a/packages/skeleton/src/lib/components/Table/Table.svelte b/packages/skeleton/src/lib/components/Table/Table.svelte
@@ -99,7 +99,7 @@
 							aria-colindex={cellIndex + 1}
 							tabindex={cellIndex === 0 ? 0 : -1}
 						>
-							{@html cell ? cell : '-'}
+							{@html Number(cell) === 0 ? cell : (cell ? cell : '-')}
 						</td>
 					{/each}
 				</tr>

diff --git a/packages/skeleton/src/lib/components/TreeView/RecursiveTreeView.svelte b/packages/skeleton/src/lib/components/TreeView/RecursiveTreeView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setContext } from 'svelte';
+	import { createEventDispatcher, setContext } from 'svelte';
 
 	// Types
 	import type { CssClasses, TreeViewNode } from '../../index.js';
@@ -93,6 +93,23 @@
 	setContext('regionSymbol', regionSymbol);
 	setContext('regionChildren', regionChildren);
 
+	// events
+	const dispatch = createEventDispatcher();
+
+	function onClick(event: CustomEvent<{ id: string }>) {
+		/** @event {{id:string}} click - Fires on tree item click */
+		dispatch('click', {
+			id: event.detail.id
+		});
+	}
+
+	function onToggle(event: CustomEvent<{ id: string }>) {
+		/** @event {{id:string}} toggle - Fires on tree item toggle */
+		dispatch('toggle', {
+			id: event.detail.id
+		});
+	}
+
 	// Reactive
 	$: classesBase = `${width} ${spacing} ${$$props.class ?? ''}`;
 </script>
@@ -106,6 +123,14 @@
 	aria-disabled={disabled}
 >
 	{#if nodes && nodes.length > 0}
-		<RecursiveTreeViewItem {nodes} bind:expandedNodes bind:disabledNodes bind:checkedNodes bind:indeterminateNodes />
+		<RecursiveTreeViewItem
+			{nodes}
+			bind:expandedNodes
+			bind:disabledNodes
+			bind:checkedNodes
+			bind:indeterminateNodes
+			on:click={onClick}
+			on:toggle={onToggle}
+		/>
 	{/if}
 </div>
diff --git a/packages/skeleton/src/lib/components/TreeView/RecursiveTreeViewItem.svelte b/packages/skeleton/src/lib/components/TreeView/RecursiveTreeViewItem.svelte
@@ -2,7 +2,7 @@
 	import TreeViewItem from './TreeViewItem.svelte';
 	import RecursiveTreeViewItem from './RecursiveTreeViewItem.svelte';
 	import type { TreeViewNode } from './types.js';
-	import { getContext, onMount, tick } from 'svelte';
+	import { createEventDispatcher, getContext, onMount, tick } from 'svelte';
 
 	// this can't be passed using context, since we have to pass it to recursive children.
 	/** Provide data-driven nodes. */
@@ -40,6 +40,9 @@
 	let group: unknown;
 	let name = '';
 
+	// events
+	const dispatch = createEventDispatcher();
+
 	function toggleNode(node: TreeViewNode, open: boolean) {
 		// toggle only nodes with children
 		if (!node.children?.length) return;
@@ -141,10 +144,27 @@
 			indeterminate={indeterminateNodes.includes(node.id)}
 			on:toggle={(e) => toggleNode(node, e.detail.open)}
 			on:groupChange={(e) => checkNode(node, e.detail.checked, e.detail.indeterminate)}
+			on:click={() =>
+				dispatch('click', {
+					id: node.id
+				})}
+			on:toggle={() => {
+				dispatch('toggle', {
+					id: node.id
+				});
+			}}
 		>
-			{@html node.content}
+			{#if typeof node.content === 'string'}
+				{@html node.content}
+			{:else}
+				<svelte:component this={node.content} {...node.contentProps} />
+			{/if}
 			<svelte:fragment slot="lead">
-				{@html node.lead}
+				{#if typeof node.lead === 'string'}
+					{@html node.lead}
+				{:else}
+					<svelte:component this={node.lead} {...node.leadProps} />
+				{/if}
 			</svelte:fragment>
 			<svelte:fragment slot="children">
 				<RecursiveTreeViewItem
@@ -154,6 +174,14 @@
 					bind:checkedNodes
 					bind:indeterminateNodes
 					bind:treeItems={children[i]}
+					on:click={(e) =>
+						dispatch('click', {
+							id: e.detail.id
+						})}
+					on:toggle={(e) =>
+						dispatch('toggle', {
+							id: e.detail.id
+						})}
 				/>
 			</svelte:fragment>
 		</TreeViewItem>

diff --git a/packages/skeleton/src/lib/components/TreeView/types.ts b/packages/skeleton/src/lib/components/TreeView/types.ts
@@ -1,10 +1,16 @@
+import type { ComponentType } from 'svelte';
+
 export interface TreeViewNode {
 	/** Nodes Unique ID */
 	id: string;
-	/** Main content. accepts HTML. */
-	content: string;
-	/** Lead content. accepts HTML. */
-	lead?: string;
+	/** Main content. accepts HTML or svelte component. */
+	content: string | ComponentType;
+	/** Main content props. only used when the Content is a svelte component. */
+	contentProps?: object;
+	/** Lead content. accepts HTML or svelte component. */
+	lead?: string | ComponentType;
+	/** lead props. only used when the Lead is a svelte component. */
+	leadProps?: object;
 	/** children nodes. */
 	children?: TreeViewNode[];
 	/** Set the input's value. */

diff --git a/packages/skeleton/src/lib/utilities/Drawer/Drawer.svelte b/packages/skeleton/src/lib/utilities/Drawer/Drawer.svelte
@@ -27,14 +27,6 @@
 	 */
 	export let position: 'left' | 'top' | 'right' | 'bottom' = 'left';
 
-	// Props (backdrop)
-	/** Backdrop - Provide classes to set the backdrop background color */
-	export let bgBackdrop: CssClasses = 'bg-surface-backdrop-token';
-	/** Backdrop - Provide classes to set the blur style. */
-	export let blur: CssClasses = '';
-	/** Backdrop - Provide classes to set padding. */
-	export let padding: CssClasses = '';
-
 	// Props (drawer)
 	/** Drawer - Provide classes to set the drawer background color. */
 	export let bgDrawer: CssClasses = 'bg-surface-100-800-token';
@@ -48,7 +40,15 @@
 	export let width: CssClasses = '';
 	/** Drawer - Provide classes to override the height. */
 	export let height: CssClasses = '';
-	/** Provide a class to override the z-index */
+
+	// Props (backdrop)
+	/** Backdrop - Provide classes to set the backdrop background color */
+	export let bgBackdrop: CssClasses = 'bg-surface-backdrop-token';
+	/** Backdrop - Provide classes to set the blur style. */
+	export let blur: CssClasses = '';
+	/** Backdrop - Provide classes to set padding. */
+	export let padding: CssClasses = '';
+	/** Backdrop - Provide a class to override the z-index */
 	export let zIndex: CssClasses = 'z-40';
 
 	// Props (regions)
@@ -64,12 +64,14 @@
 	export let describedby = '';
 
 	// Props (transition)
+	/** Set the transition duration in milliseconds. */
+	export let duration: number = 200;
 	/**
 	 * Enable/Disable transitions
 	 * @type {boolean}
 	 */
 	export let transitions = !$prefersReducedMotionStore;
-	/** Drawer - Enable/Disable opacity transition */
+	/** Enable/Disable opacity transition of Drawer */
 	export let opacityTransition = true;
 
 	// Presets
@@ -99,14 +101,16 @@
 		bgBackdrop, blur, padding,
 		bgDrawer, border, rounded, shadow,
 		width, height, opacityTransition,
+		regionBackdrop, regionDrawer,
 		labelledby, describedby,
-		regionBackdrop, regionDrawer
+		duration
 	};
 
 	// Override provided props, else restore prop defaults
 	// NOTE: these must stay in sync with the props implemented above.
 	function applyPropSettings(settings: DrawerSettings): void {
 		position = settings.position || propDefaults.position;
+
 		// Backdrop
 		bgBackdrop = settings.bgBackdrop || propDefaults.bgBackdrop;
 		blur = settings.blur || propDefaults.blur;
@@ -118,13 +122,15 @@
 		shadow = settings.shadow || propDefaults.shadow;
 		width = settings.width || propDefaults.width;
 		height = settings.height || propDefaults.height;
-		opacityTransition = settings.opacityTransition || propDefaults.opacityTransition;
 		// Regions
 		regionBackdrop = settings.regionBackdrop || propDefaults.regionBackdrop;
 		regionDrawer = settings.regionDrawer || propDefaults.regionDrawer;
 		// A11y
 		labelledby = settings.labelledby || propDefaults.labelledby;
 		describedby = settings.describedby || propDefaults.describedby;
+		// Transitions
+		opacityTransition = settings.opacityTransition || propDefaults.opacityTransition;
+		duration = settings.duration || propDefaults.duration;
 	}
 
 	function applyAnimationSettings(): void {
@@ -190,12 +196,12 @@
 		on:keypress
 		in:dynamicTransition|local={{
 			transition: fade,
-			params: { duration: 150 },
+			params: { duration },
 			enabled: transitions && opacityTransition
 		}}
 		out:dynamicTransition|local={{
 			transition: fade,
-			params: { duration: 150 },
+			params: { duration },
 			enabled: transitions && opacityTransition
 		}}
 		use:focusTrap={true}
@@ -212,12 +218,12 @@
 			aria-describedby={describedby}
 			in:dynamicTransition|local={{
 				transition: fly,
-				params: { x: anim.x, y: anim.y, duration: 150, opacity: opacityTransition ? undefined : 1 },
+				params: { x: anim.x, y: anim.y, duration, opacity: opacityTransition ? undefined : 1 },
 				enabled: transitions
 			}}
 			out:dynamicTransition|local={{
 				transition: fly,
-				params: { x: anim.x, y: anim.y, duration: 150, opacity: opacityTransition ? undefined : 1 },
+				params: { x: anim.x, y: anim.y, duration, opacity: opacityTransition ? undefined : 1 },
 				enabled: transitions
 			}}
 		>

diff --git a/packages/skeleton/src/lib/utilities/Drawer/types.ts b/packages/skeleton/src/lib/utilities/Drawer/types.ts
@@ -18,8 +18,6 @@ export interface DrawerSettings {
 	 * @type {'left' | 'top' | 'right' | 'bottom'}
 	 */
 	position?: 'left' | 'top' | 'right' | 'bottom';
-	/** Define the Svelte transition animation duration.*/
-	duration?: number;
 
 	// --- Backdrop ---
 	/** Backdrop - Provide classes to set the backdrop background color*/
@@ -42,6 +40,10 @@ export interface DrawerSettings {
 	width?: string;
 	/** Drawer - Provide classes to override the height.*/
 	height?: string;
+
+	// -- Transitions ---
+	/** Define the Svelte transition animation duration.*/
+	duration?: number;
 	/** Drawer - Enable/Disable opacity transition */
 	opacityTransition?: boolean;
 

diff --git a/sites/skeleton.dev/.eslintrc.cjs b/sites/skeleton.dev/.eslintrc.cjs
@@ -26,6 +26,13 @@ module.exports = {
 	},
 	rules: {
 		'no-useless-escape': 'off',
-		'svelte/no-at-html-tags': 'off'
+		'svelte/no-at-html-tags': 'off',
+		'@typescript-eslint/no-unused-vars': [
+			'warn',
+			{
+				argsIgnorePattern: '^_',
+				varsIgnorePattern: '^\\$\\$(Props|Events|Slots|Generic)$'
+			}
+		]
 	}
 };
diff --git a/sites/skeleton.dev/src/lib/components/DocsIcon/icons.ts b/sites/skeleton.dev/src/lib/components/DocsIcon/icons.ts
@@ -3,8 +3,19 @@
     License - https://fontawesome.com/license (Commercial License)
     Copyright 2022 Fonticons, Inc
 */
+export type Icon = {
+	viewBox?: string;
+	path: string;
+};
+
+export type Icons = {
+	[key: string]: Icon;
+	placeholder: Icon;
+	svelte: Icon;
+	tailwind: Icon;
+};
 
-export const icons: any = {
+export const icons: Icons = {
 	// Default Placeholder
 	// Source: https://fontawesome.com/icons/image?s=solid
 	placeholder: {