@functionalcms/svelte-components 4.9.8 → 4.10.2

package/dist/components/form/Select.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	interface Props {
+		uniqueId: string;
+		name: string;
+		labelCopy: string;
+		options: Array<{ value: string; label: string }>;
+		size: string;
+		multipleSize: number;
+		isMultiple: boolean;
+		defaultOptionLabel: string;
+		isDisabled: boolean;
+		isSkinned: boolean;
+		css: string;
+		singleSelected?: string; // singleSelected can be used for two-way bindings
+		multiSelected?: Array<string>; // If we don't make it seems Svelte gets confused:
+		selected: (value: string | Array<string>) => void: 
+	}
+
+	let {
+		uniqueId = '',
+		name = '',
+		labelCopy = '',
+		options = [],
+		size = '',
+		multipleSize = 1,
+		isMultiple = false,
+		defaultOptionLabel = 'Please select an option',
+		isDisabled = false,
+		isSkinned = true,
+		css = '',
+		singleSelected = $bindable(''),
+		multiSelected = $bindable([]), // multiSelected can be used for two-way bindings
+		selected = () => {},
+	}: Partial<Props> = $props();
+
+	const changeHandler = () => {
+		// dispatch('selected', isMultiple ? multiSelected : singleSelected);
+		selected(isMultiple ? multiSelected : singleSelected);
+	};
+
+	let disable = isDisabled;
+	let classes = $derived(
+		cn(
+			isSkinned ? 'select' : 'select-base',
+			size ? `select-${size}` : '',
+			css ? `${css}` : ''));
+</script>
+
+<label class="screenreader-only" for={uniqueId}> {labelCopy} </label>
+{#if isMultiple}
+	<select
+		id={uniqueId}
+		class={classes}
+		{name}
+		disabled={disable}
+		multiple
+		size={multipleSize}
+		bind:value={multiSelected}
+		onchange={changeHandler}
+	>
+		{#each options as { value, label }}
+			<option {value}>{label}</option>
+		{/each}
+	</select>
+{:else}
+	<select
+		id={uniqueId}
+		class={classes}
+		{name}
+		disabled={disable}
+		bind:value={singleSelected}
+		onchange={changeHandler}
+	>
+		<option value="" disabled selected>
+			{defaultOptionLabel}
+		</option>
+		{#each options as { value, label }}
+			<option {value}>{label}</option>
+		{/each}
+	</select>
+{/if}
+
+<style>
+	.select,
+	.select-base {
+		display: block;
+		width: 100%;
+		/* stylelint-disable-next-line property-no-vendor-prefix */
+		-webkit-appearance: none;
+		/* stylelint-disable-next-line property-no-vendor-prefix */
+		-moz-appearance: none;
+		appearance: none;
+	}
+
+	.select,
+	.select-skin {
+		padding: var(--fluid-6) var(--fluid-32) var(--fluid-6) var(--fluid-12);
+		-moz-padding-start: calc(var(--fluid-12) - 3px);
+		font-size: var(--fluid-16);
+		font-weight: 400;
+		line-height: 1.5;
+		color: var(--agnostic-dark);
+		border: 1px solid var(--agnostic-select-border-color, var(--agnostic-gray-light));
+		border-radius: var(--agnostic-radius);
+		transition:
+			border-color var(--agnostic-timing-fast) ease-in-out,
+			box-shadow var(--agnostic-timing-fast) ease-in-out;
+	}
+
+	/* Only shows the down arrow SVG if in single mode */
+	.select:not([multiple]) {
+		background-color: inherit;
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333330' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+		background-repeat: no-repeat;
+		background-position: right var(--fluid-12) center;
+		background-size: var(--fluid-16) var(--fluid-12);
+	}
+
+	.select:focus {
+		border-color: var(--agnostic-focus-ring-color);
+		box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
+
+		/* Needed for High Contrast mode */
+		outline: var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
+			var(--agnostic-focus-ring-outline-color);
+		transition: box-shadow var(--agnostic-timing-fast) ease-out;
+	}
+
+	.select-base,
+	.select:disabled {
+		background-color: var(--agnostic-disabled-bg);
+	}
+
+	.select-base,
+	.select:-moz-focusring {
+		color: transparent;
+		text-shadow: 0 0 0 var(--agnostic-dark);
+	}
+
+	@media (prefers-reduced-motion), (update: slow) {
+		.select,
+		.select-base,
+		.select:focus {
+			transition: none;
+		}
+	}
+
+	.select-small {
+		padding-top: var(--fluid-4);
+		padding-bottom: var(--fluid-4);
+		padding-left: var(--fluid-8);
+		font-size: var(--fluid-14);
+	}
+
+	.select-large {
+		padding-top: var(--fluid-8);
+		padding-bottom: var(--fluid-8);
+		padding-left: var(--fluid-16);
+		font-size: var(--fluid-18);
+	}
+</style>

package/dist/components/form/Select.svelte.d.ts

@@ -0,0 +1,21 @@
+declare const Select: import("svelte").Component<Partial<{
+    uniqueId: string;
+    name: string;
+    labelCopy: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    size: string;
+    multipleSize: number;
+    isMultiple: boolean;
+    defaultOptionLabel: string;
+    isDisabled: boolean;
+    isSkinned: boolean;
+    css: string;
+    singleSelected?: string;
+    multiSelected?: Array<string>;
+    selected: (value: string | Array<string>) => void;
+}>, {}, "singleSelected" | "multiSelected">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/form/Switch.svelte

@@ -3,6 +3,7 @@
 
 	interface Props {
 		id: string;
+		name: string;
 		label: string;
 		css: string;
 		labelPosition: string;
@@ -14,6 +15,7 @@
 	}
 	let {
 		id = '',
+		name= '',
 		label = '',
 		css = '',
 		labelPosition = 'left',
@@ -68,6 +70,7 @@
 		type="checkbox"
 		class="switch-input"
 		{id}
+		{name}
 		bind:checked={isChecked}
 		disabled={isDisabled}
 		onclick={handleClick}

package/dist/components/form/Switch.svelte.d.ts

@@ -1,5 +1,6 @@
 declare const Switch: import("svelte").Component<Partial<{
     id: string;
+    name: string;
     label: string;
     css: string;
     labelPosition: string;

package/dist/components/layouts/FoldablePanel.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props(); 
+</script>
+
+<aside>
+	{@render children()}
+</aside>
+
+<style>
+</style>

package/dist/components/layouts/FoldablePanel.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+}
+declare const FoldablePanel: import("svelte").Component<Props, {}, "">;
+type FoldablePanel = ReturnType<typeof FoldablePanel>;
+export default FoldablePanel;

package/dist/index.d.ts

@@ -32,6 +32,7 @@ export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
 export type { ChoiceInputOption } from './components/form/utils.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as Dropzone } from './components/form/Dropzone.svelte';
+export { default as Select } from './components/form/Select.svelte';
 export { default as Markdown } from './components/content/Markdown.svelte';
 export { type BlogPost, listAllPosts, importPost } from './components/blog/blog.js';
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';

package/dist/index.js

@@ -44,6 +44,7 @@ export { default as Switch } from './components/form/Switch.svelte';
 export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as Dropzone } from './components/form/Dropzone.svelte';
+export { default as Select } from './components/form/Select.svelte';
 /*
  * Content
  */

package/dist/index.server.d.ts

@@ -0,0 +1,10 @@
+export { authenticationHandle } from './auth/authenticationHandle.ts';
+export { default as authorizationHandle } from './auth/authorizationHandle.ts';
+export { default as errorHandler } from './auth/errorHandle.ts';
+export { redisSessionProvider } from './auth/redisSessionProvider.ts';
+export { machineAuthenticationProvider } from './auth/machineAuthenticationProvider.ts';
+export { userAuthenticationProvider } from './auth/userAuthenticationProvider.ts';
+export { getBlobService, getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAIService, getAuthService, } from './server-side/getServices.ts';
+export type { RedirectResponse } from './auth/RedirectResponse.ts';
+export { createMachineTokenApprovedLocals } from './auth/getMachineAccessToken.ts';
+export { isHuman } from './components/form/AntiBot.ts';

package/dist/index.server.js

@@ -0,0 +1,9 @@
+export { authenticationHandle } from './auth/authenticationHandle.ts';
+export { default as authorizationHandle } from './auth/authorizationHandle.ts';
+export { default as errorHandler } from './auth/errorHandle.ts';
+export { redisSessionProvider } from './auth/redisSessionProvider.ts';
+export { machineAuthenticationProvider } from './auth/machineAuthenticationProvider.ts';
+export { userAuthenticationProvider } from './auth/userAuthenticationProvider.ts';
+export { getBlobService, getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAIService, getAuthService, } from './server-side/getServices.ts';
+export { createMachineTokenApprovedLocals } from './auth/getMachineAccessToken.ts';
+export { isHuman } from './components/form/AntiBot.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.9.8",
+	"version": "4.10.2",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -53,7 +53,6 @@
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
-		"npm-watch": "^0.13.0",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
 		"publint": "^0.3.8",
@@ -64,14 +63,14 @@
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0",
 		"vite": "^5.4.11",
+		"npm-watch": "^0.13.0",
 		"zod": "^3.24.1"
 	},
 	"dependencies": {
-		"@lucide/svelte": "^0.501.0",
-		"embla-carousel-svelte": "^8.5.2",
 		"ioredis": "^5.4.2",
+		"embla-carousel-svelte": "^8.5.2",
 		"marked": "^15.0.6",
-		"oauth4webapi": "^3.1.4"
+		"oauth4webapi": "^3.1.4"		
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.15.3",