Merge branch 'dev' into fix/modal-store-import

skeletonlabs · May 23, 2023 · b5c1a16 · b5c1a16
2 parents c6858f5 + f94229d
commit b5c1a16
Show file tree

Hide file tree

Showing 16 changed files with 81 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ Skeleton is an open source UI toolkit built with Svelte + Tailwind that allows y
 
 ## 🛠️ Contributions
 
-We've provided a detailed [contribution guide](https://www.skeleton.dev/docs/contributing) to help you get started. [Find an open issue](https://github.com/skeletonlabs/skeleton/issues), discuss the requirements with other contributors, then send a PR!
+We have provided a detailed [contribution guide](https://www.skeleton.dev/docs/contributing) to help you get started. [Find an open issue](https://github.com/skeletonlabs/skeleton/issues), discuss the requirements with other contributors, then send a PR!
 
 ## Maintainers
 

diff --git a/packages/skeleton/scripts/tw-settings.json b/packages/skeleton/scripts/tw-settings.json
@@ -25,6 +25,8 @@
 		"buttonPositive",
 		"buttonTextCancel",
 		"buttonTextConfirm",
+		"buttonTextFirst",
+		"buttonTextLast",
 		"buttonTextNext",
 		"buttonTextPrevious",
 		"buttonTextSubmit",

diff --git a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
@@ -56,7 +56,7 @@
 	const deprecated = [whitelist, blacklist, duration];
 
 	// Local
-	let listedOptions = options;
+	$: listedOptions = options;
 
 	// Allowed Options
 	function filterByAllowed(): void {

diff --git a/packages/skeleton/src/lib/components/Paginator/Paginator.svelte b/packages/skeleton/src/lib/components/Paginator/Paginator.svelte
@@ -29,6 +29,10 @@
 	export let buttonTextPrevious: CssClasses = '&larr;';
 	/** Set the text label for the Next button. */
 	export let buttonTextNext: CssClasses = '&rarr;';
+	/** Set the text label for the First button. */
+	export let buttonTextFirst: CssClasses = '&laquo;';
+	/** Set the text label for the Last button. */
+	export let buttonTextLast: CssClasses = '&raquo;';
 
 	// Base Classes
 	const cBase = 'flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4';
@@ -50,6 +54,14 @@
 		settings.offset++;
 		dispatch('page', settings.offset);
 	}
+	function onFirst(): void {
+		settings.offset = 0;
+		dispatch('page', settings.offset);
+	}
+	function onLast(): void {
+		settings.offset = settings.size / settings.limit - 1;
+		dispatch('page', settings.offset);
+	}
 
 	// Reactive Classes
 	$: classesBase = `${cBase} ${justify} ${$$props.class ?? ''}`;
@@ -72,11 +84,17 @@
 	</span>
 	<!-- Arrows -->
 	<div class="paginator-arrows space-x-2">
+		<button type="button" class="{buttonClasses}" on:click={() => { onFirst() }} disabled={disabled || settings.offset === 0}>
+			{@html buttonTextFirst}
+		</button>
 		<button type="button" class="{buttonClasses}" on:click={() => { onPrev() }} disabled={disabled || settings.offset === 0}>
 			{@html buttonTextPrevious}
 		</button>
 		<button type="button" class="{buttonClasses}" on:click={() => { onNext() }} disabled={disabled || (settings.offset + 1) * settings.limit >= settings.size}>
 			{@html buttonTextNext}
 		</button>
+		<button type="button" class="{buttonClasses}" on:click={() => { onLast() }} disabled={disabled || (settings.offset + 1) * settings.limit >= settings.size}>
+			{@html buttonTextLast}
+		</button>
 	</div>
 </div>
diff --git a/packages/skeleton/src/lib/styles/elements/forms.css b/packages/skeleton/src/lib/styles/elements/forms.css
@@ -193,7 +193,7 @@
 	}
 	.input-group input,
 	.input-group select {
-		@apply border-0 ring-0 bg-transparent;
+		@apply border-0 !ring-0 bg-transparent;
 	}
 	.input-group select option {
 		@apply bg-surface-200-700-token;

diff --git a/packages/skeleton/src/lib/themes/theme-gold-nouveau.css b/packages/skeleton/src/lib/themes/theme-gold-nouveau.css
@@ -136,4 +136,8 @@
 	background-image:
 		radial-gradient(at 0% 100%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
 		radial-gradient(at 98% 100%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
diff --git a/packages/skeleton/src/lib/themes/theme-modern.css b/packages/skeleton/src/lib/themes/theme-modern.css
@@ -116,11 +116,19 @@
 		radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%),
 		radial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%),
 		radial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
 .dark [data-theme='modern'] {
 	/* prettier-ignore */
 	background-image:
 		radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%),
 		radial-gradient(at 1% 0%, hsla(340,100%,76%,0.15) 0px, transparent 50%),
 		radial-gradient(at 20% 100%, hsla(241,100%,70%,0.30) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
diff --git a/packages/skeleton/src/lib/themes/theme-rocket.css b/packages/skeleton/src/lib/themes/theme-rocket.css
@@ -113,4 +113,8 @@
 	background-image:
 			radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
 			radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
diff --git a/packages/skeleton/src/lib/themes/theme-sahara.css b/packages/skeleton/src/lib/themes/theme-sahara.css
@@ -116,10 +116,18 @@
 	background-image:
 		radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
 		radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
 .dark [data-theme='sahara'] {
 	/* prettier-ignore */
 	background-image:
 		radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
 		radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
diff --git a/packages/skeleton/src/lib/themes/theme-seafoam.css b/packages/skeleton/src/lib/themes/theme-seafoam.css
@@ -114,7 +114,15 @@
 /* Created with: https://csshero.org/mesher/ */
 [data-theme='seafoam'] {
 	background: linear-gradient(0deg, rgba(203, 221, 254, 0.75) 0%, rgba(163, 209, 206, 0.75) 100%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
 .dark [data-theme='seafoam'] {
 	background: linear-gradient(0deg, rgba(33, 50, 83, 1) 0%, rgba(8, 132, 124, 1) 100%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
diff --git a/packages/skeleton/src/lib/themes/theme-skeleton.css b/packages/skeleton/src/lib/themes/theme-skeleton.css
@@ -112,4 +112,8 @@
 	background-image:
 			radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
 			radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
diff --git a/packages/skeleton/src/lib/themes/theme-vintage.css b/packages/skeleton/src/lib/themes/theme-vintage.css
@@ -114,10 +114,18 @@
 	background-image:
 		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.20) 0px, transparent 50%),
 		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.20) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
 .dark [data-theme='vintage'] {
 	/* prettier-ignore */
 	background-image:
 		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.14) 0px, transparent 50%),
 		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.14) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
diff --git a/sites/skeleton.dev/src/routes/(inner)/docs/contributing/requirements/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/docs/contributing/requirements/+page.svelte
@@ -107,7 +107,7 @@
 			<li>Install <a class="anchor" href="https://pnpm.io/" target="_blank" rel="noreferrer">pnpm</a> globally using <code class="code">npm install -g pnpm</code>. Confirm via <code class="code">pnpm --version</code> in your terminal.</li>
 			<li>Run <code class="code">git clone https://github.com/skeletonlabs/skeleton.git</code> to clone the monorepo project.</li>
 			<li>Run <code class="code">cd skeleton</code> to move into the cloned monorepo project.</li>
-			<li>Run <code class="code">pnpm i</code> to install depedencies for all projects.</li>
+			<li>Delete your <code class="code">node_modules</code> directory, then run <code class="code">pnpm i</code> to install depedencies for all projects.</li>
 			<li>Run <code class="code">cd sites/skeleton.dev</code> to move into the Skeleton documentation project.</li>
 			<li>Run <code class="code">code .</code> to open the current project directory in VS Code.</li>
 			<li>Run <code class="code">pnpm dev</code> to start a local dev server. You may see a warning the first time.</li>
@@ -116,7 +116,11 @@
 		</ol>
 		<h3 class="h3">Adding New Projects</h3>
 		<p>
-			If you wish to add a new project, first run <code class="code">pnpm getall</code> from the root of the monorepo. This will clone <a class="anchor" href="https://github.com/skeletonlabs/create-skeleton-app" target="_blank" rel="noreferrer">create-skeleton-app</a> into your project under <code class="code">packages/create-skeleton-app</code>. Next run <code class="code">pnpm csa yoursitename</code>. This will generate a brand new Skeleton project in the <code class="code">/sites</code> directory.
+			If you wish to add a new project, first run <code class="code">pnpm getall</code> from the root of the monorepo. This will clone
+			<a class="anchor" href="https://github.com/skeletonlabs/create-skeleton-app" target="_blank" rel="noreferrer">create-skeleton-app</a>
+			into your project under <code class="code">packages/create-skeleton-app</code>. Next run
+			<code class="code">pnpm csa yoursitename</code>. This will generate a brand new Skeleton project in the
+			<code class="code">/sites</code> directory.
 		</p>
 		<h3 class="h3">Importing Skeleton</h3>
 		<p>To import Skeleton features (ex: components) within each monorepo project, use the following structure:</p>

diff --git a/sites/skeleton.dev/src/routes/(inner)/docs/themes/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/docs/themes/+page.svelte
@@ -70,10 +70,15 @@
 		<CodeBlock
 			language="css"
 			code={`
+html, body { @apply h-full; }
 body {
 	background-image:
 		radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
 		radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
+	background-attachment: fixed;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
 }
 		`}
 		/>

diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
@@ -267,9 +267,9 @@ const modal: ModalSettings = {\n
 };`}
 			/>
 		</section>
-		<!-- Async Await -->
+		<!-- Async Response -->
 		<section class="space-y-4">
-			<h2 class="h2">Async Await</h2>
+			<h2 class="h2">Async Response</h2>
 			<!-- prettier-ignore -->
 			<p>You may await a modal response by wrapping it in a <a class="anchor" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" rel="noreferrer">Javascript Promise</a>, which resolves when the response is triggered.</p>
 			<CodeBlock

diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/popups/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/popups/+page.svelte
@@ -97,9 +97,8 @@
 	// ---
 	let comboboxValue: string;
 	const popupCombobox: PopupSettings = {
-		event: 'focus-click',
+		event: 'click',
 		target: 'popupCombobox',
-		placement: 'bottom',
 		closeQuery: '.listbox-item'
 	};
 </script>