@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/controls/textfield/TextField.demo.svelte

@@ -1,79 +1,79 @@
-<script lang="ts">
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-
-	import TextField from './TextField.svelte';
-	import { componentArgs, parameters } from './types.js';
-
-	let parametersProps: any = {
-		icon: {
-			type: 'icon',
-			values: ['search', undefined]
-		},
-		endIcon: {
-			type: 'endIcon',
-			values: ['search', undefined]
-		},
-		height: {
-			type: 'tall',
-			values: ['small', 'tiny', 'small', 'large']
-		},
-		...parameters
-	};
-
-	let code = `
-<TextField >
-	{#snippet inputFirst()}
-		<Icon icon="close" />
-	{/snippet}
-	{#snippet inputLast()}
-		<Icon icon="close" />
-	{/snippet}
-</TextField>`;
-
-	let codeSlotProps = `
-<Input icon={icon} endIcon={icon} />`;
-</script>
-
-<ComponentDemo component="TextField">
-	<div class="flex-v gap-large">
-		<DemoPage component="TextField" {code}>
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<div class="pad flex-h flex-align-middle flex-wrap">
-						<div class="pad-1">
-							<TextField {...activeParams}>
-								{#snippet inputFirst()}
-									<Icon icon="close" />
-								{/snippet}
-							</TextField>
-						</div>
-						<div class="pad-1">
-							<TextField {...activeParams} />
-						</div>
-						<div class="pad-1">
-							<TextField {...activeParams}>
-								{#snippet inputLast()}
-									<Icon icon="close" />
-								{/snippet}
-							</TextField>
-						</div>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage title="Using props" component="Input" code={codeSlotProps}>
-			<Demoer parameters={parametersProps} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<div class="pad flex-h">
-						<div class="pad-1">
-							<TextField {...activeParams} />
-						</div>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+
+	import TextField from './TextField.svelte';
+	import { componentArgs, parameters } from './types.js';
+
+	let parametersProps: any = {
+		icon: {
+			type: 'icon',
+			values: ['search', undefined]
+		},
+		endIcon: {
+			type: 'endIcon',
+			values: ['search', undefined]
+		},
+		height: {
+			type: 'tall',
+			values: ['small', 'tiny', 'small', 'large']
+		},
+		...parameters
+	};
+
+	let code = `
+<TextField >
+	{#snippet inputFirst()}
+		<Icon icon="close" />
+	{/snippet}
+	{#snippet inputLast()}
+		<Icon icon="close" />
+	{/snippet}
+</TextField>`;
+
+	let codeSlotProps = `
+<Input icon={icon} endIcon={icon} />`;
+</script>
+
+<ComponentDemo component="TextField">
+	<div class="flex-v gap-large">
+		<DemoPage component="TextField" {code}>
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<div class="pad flex-h flex-align-middle flex-wrap">
+						<div class="pad-1">
+							<TextField {...activeParams}>
+								{#snippet inputFirst()}
+									<Icon icon="close" />
+								{/snippet}
+							</TextField>
+						</div>
+						<div class="pad-1">
+							<TextField {...activeParams} />
+						</div>
+						<div class="pad-1">
+							<TextField {...activeParams}>
+								{#snippet inputLast()}
+									<Icon icon="close" />
+								{/snippet}
+							</TextField>
+						</div>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="Using props" component="Input" code={codeSlotProps}>
+			<Demoer parameters={parametersProps} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<div class="pad flex-h">
+						<div class="pad-1">
+							<TextField {...activeParams} />
+						</div>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/controls/textfield/TextField.svelte

@@ -1,88 +1,88 @@
-<svelte:options />
-
-<script lang="ts">
-	import { popper } from '../../ui/popper/usePopper.js';
-	import Button from '../button/Button.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-	import type { TextFieldProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { ExpandProps } from '../../types/index.js';
-
-	let inputType = 'text';
-	export { inputType as type };
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style,
-		icon,
-		iconColor = '#666',
-		endIcon,
-		endIconColor = '#666',
-		usePopper,
-		width = $bindable(),
-		tall = 'default',
-		borderless = false,
-		transparent = false,
-		value = $bindable(),
-		children,
-		inputFirst,
-		inputLast,
-		...rest
-	}: ExpandProps<TextFieldProps> & Partial<HTMLInputElement> = $props();
-
-	let niceIconStyle = $state('');
-
-	niceIconStyle += icon || inputFirst ? 'padding-left:2.2rem;' : '';
-	niceIconStyle += endIcon || inputLast ? 'padding-right:2.2rem;' : '';
-
-	if (usePopper) {
-		usePopper.disabled = false;
-		usePopper.parentNode = element;
-	} else {
-		usePopper = { disabled: true };
-	}
-</script>
-
-<div class="slotui-textfield-container">
-	<div class="slotui-textfield-start">
-		<Slotted child={inputFirst}>
-			<Icon {icon} style="max-width:100%;max-height:100%;color:{iconColor}" />
-		</Slotted>
-	</div>
-
-	{#if inputLast || endIcon || inputType === 'search'}
-		<div class="slotui-textfield-end">
-			{#if inputLast || endIcon}
-				<Slotted child={inputLast}>
-					<Icon icon={endIcon} style="max-width:100%;max-height:100%;color:{endIconColor}" />
-				</Slotted>
-			{/if}
-			{#if inputType === 'search'}
-				<Button
-					onclick={() => {
-						value = null;
-					}}
-					disabled={!value?.length}
-					variant="naked"
-					icon="mdi:close-circle-outline"
-				/>
-			{/if}
-		</div>
-	{/if}
-	<input
-		bind:value
-		bind:this={element}
-		use:popper={usePopper}
-		type="text"
-		class="slotui-textfield width-{width} tall-{tall} {className}"
-		style={niceIconStyle + ';' + style}
-		{tall}
-		{width}
-		{...rest}
-	/>
-</div>
-
+<svelte:options />
+
+<script lang="ts">
+	import { popper } from '../../ui/popper/usePopper.js';
+	import Button from '../button/Button.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { TextFieldProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+
+	let inputType = 'text';
+	export { inputType as type };
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style,
+		icon,
+		iconColor = '#666',
+		endIcon,
+		endIconColor = '#666',
+		usePopper,
+		width = $bindable(),
+		tall = 'default',
+		borderless = false,
+		transparent = false,
+		value = $bindable(),
+		children,
+		inputFirst,
+		inputLast,
+		...rest
+	}: ExpandProps<TextFieldProps> & Partial<HTMLInputElement> = $props();
+
+	let niceIconStyle = $state('');
+
+	niceIconStyle += icon || inputFirst ? 'padding-left:2.2rem;' : '';
+	niceIconStyle += endIcon || inputLast ? 'padding-right:2.2rem;' : '';
+
+	if (usePopper) {
+		usePopper.disabled = false;
+		usePopper.parentNode = element;
+	} else {
+		usePopper = { disabled: true };
+	}
+</script>
+
+<div class="slotui-textfield-container">
+	<div class="slotui-textfield-start">
+		<Slotted child={inputFirst}>
+			<Icon {icon} style="max-width:100%;max-height:100%;color:{iconColor}" />
+		</Slotted>
+	</div>
+
+	{#if inputLast || endIcon || inputType === 'search'}
+		<div class="slotui-textfield-end">
+			{#if inputLast || endIcon}
+				<Slotted child={inputLast}>
+					<Icon icon={endIcon} style="max-width:100%;max-height:100%;color:{endIconColor}" />
+				</Slotted>
+			{/if}
+			{#if inputType === 'search'}
+				<Button
+					onclick={() => {
+						value = null;
+					}}
+					disabled={!value?.length}
+					variant="naked"
+					icon="mdi:close-circle-outline"
+				/>
+			{/if}
+		</div>
+	{/if}
+	<input
+		bind:value
+		bind:this={element}
+		use:popper={usePopper}
+		type="text"
+		class="slotui-textfield width-{width} tall-{tall} {className}"
+		style={niceIconStyle + ';' + style}
+		{tall}
+		{width}
+		{...rest}
+	/>
+</div>
+
 <style>.slotui-textfield {
   --textfield-background: var(--sld-color-background-alpha-high);
   --textfield-border-width: 1px;
@@ -210,4 +210,4 @@
 .slotui-textfield-end > * {
   max-height: calc(100% - 40px) !important;
   border: 1px solid pink;
-}</style>
+}</style>

package/dist/controls/textfield/textfield.scss

@@ -1,68 +1,68 @@
-@use "../../styles/slotui-mixins.scss";
-.slotui-textfield {
-    --textfield-background: var(--sld-color-background-alpha-high);
-    --textfield-border-width: 1px;
-    --textfield-border-color: var(--sld-color-foreground-alpha-mid);
-    --textfield-border-bottom-width: 2px;
-    --textfield-border-bottom-color: var(--sld-color-primary-darker, rgb(208, 191, 151));
-    --textfield-radius: var(--sld-radius-small);
-    --textfield-padding: 0 0.5rem;
-    --textfield-shadow: inset 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
-}
-
-.slotui-textfield {
-    @include slotui-mixins.ui-width-presets;
-    @include slotui-mixins.ui-tall-presets;
-    @include slotui-mixins.data-hover;
-
-    & {
-        border: var(--textfield-border-width) solid var(--textfield-border-color);
-        border-bottom: var(--textfield-border-bottom-width) solid var(--textfield-border-bottom-color);
-        border-radius: var(--textfield-radius);
-        padding: var(--textfield-padding);
-        box-shadow: var(--textfield-shadow);
-        background-color: var(--textfield-background);
-        color: var(--sld-color-foreground);
-    }
-
-    [error] {
-        border-bottom: red;
-    }
-    &-container {
-        position: relative;
-        display: inline-flex;
-        overflow: hidden;
-    }
-
-    &-start {
-        position: absolute;
-        height: 100%;
-        max-height: 100%;
-        width: 24px;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0.25rem;
-        background-color: rgba(255, 255, 255, 0.1);
-        border-radius: var(--textfield-radius, var(--sld-radius-small));
-    }
-
-    &-end {
-        position: absolute;
-        right: 0;
-        height: 100%;
-        max-height: 100%;
-        min-width: 24px;
-        overflow: hidden;
-        display: flex;
-        gap: 4px;
-        padding: 2px;
-        align-items: center;
-        border-radius: var(--textfield-radius, var(--sld-radius-small));
-        & > * {
-            max-height: calc(100% - 40px) !important;
-            border: 1px solid pink;
-        }
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+.slotui-textfield {
+    --textfield-background: var(--sld-color-background-alpha-high);
+    --textfield-border-width: 1px;
+    --textfield-border-color: var(--sld-color-foreground-alpha-mid);
+    --textfield-border-bottom-width: 2px;
+    --textfield-border-bottom-color: var(--sld-color-primary-darker, rgb(208, 191, 151));
+    --textfield-radius: var(--sld-radius-small);
+    --textfield-padding: 0 0.5rem;
+    --textfield-shadow: inset 0px 0px 3px 1px rgba(51, 51, 51, 0.1);
+}
+
+.slotui-textfield {
+    @include slotui-mixins.ui-width-presets;
+    @include slotui-mixins.ui-tall-presets;
+    @include slotui-mixins.data-hover;
+
+    & {
+        border: var(--textfield-border-width) solid var(--textfield-border-color);
+        border-bottom: var(--textfield-border-bottom-width) solid var(--textfield-border-bottom-color);
+        border-radius: var(--textfield-radius);
+        padding: var(--textfield-padding);
+        box-shadow: var(--textfield-shadow);
+        background-color: var(--textfield-background);
+        color: var(--sld-color-foreground);
+    }
+
+    [error] {
+        border-bottom: red;
+    }
+    &-container {
+        position: relative;
+        display: inline-flex;
+        overflow: hidden;
+    }
+
+    &-start {
+        position: absolute;
+        height: 100%;
+        max-height: 100%;
+        width: 24px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.25rem;
+        background-color: rgba(255, 255, 255, 0.1);
+        border-radius: var(--textfield-radius, var(--sld-radius-small));
+    }
+
+    &-end {
+        position: absolute;
+        right: 0;
+        height: 100%;
+        max-height: 100%;
+        min-width: 24px;
+        overflow: hidden;
+        display: flex;
+        gap: 4px;
+        padding: 2px;
+        align-items: center;
+        border-radius: var(--textfield-radius, var(--sld-radius-small));
+        & > * {
+            max-height: calc(100% - 40px) !important;
+            border: 1px solid pink;
+        }
+    }
+}

package/dist/csss/csss.scss

@@ -1,10 +1,10 @@
-@use "../styles/slotui-mixins.scss";
-
-:global {
-    * {
-        @include slotui-mixins.ui-variants;
-        & {
-            border: 1px solid red;
-        }
-    }
-}
+@use "../styles/slotui-mixins.scss";
+
+:global {
+    * {
+        @include slotui-mixins.ui-variants;
+        & {
+            border: 1px solid red;
+        }
+    }
+}