@medyll/idae-slotui-svelte 0.3.0

package/dist/controls/switch/Switch.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" generics="T=Data">import Slotted from "../../utils/slotted/Slotted.svelte";
+let {
+  class: className = "",
+  style = "",
+  element = $bindable(null),
+  name = $bindable(void 0),
+  checked = $bindable(false),
+  disabled = $bindable(false),
+  metaData,
+  onChange = (val, metaData2) => {
+  },
+  children,
+  switchLabel
+} = $props();
+let hiddenRef;
+</script>
+
+<input bind:this={hiddenRef} {name} id={name} value={checked} type="hidden" />
+<label bind:this={element} for="_{name}" class="switch {className}" {style}>
+	<Slotted child={switchLabel} />
+
+	<div class="switchGutter">
+		<input
+			onchange={(event) => {
+				if (hiddenRef) hiddenRef.value = `${event.currentTarget.checked}`;
+				onChange(event.currentTarget.checked, metaData as T);
+			}}
+			id="_{name}"
+			{checked}
+			{disabled}
+			type="checkbox"
+		/>
+		<div class="switchHandle">
+			<Slotted child={children} />
+		</div>
+	</div>
+</label>
+..
+
+<style>:root {
+  --switch-border-radius: var(--sld-radius-large);
+  --switch-background: var(--sld-color-paper);
+  --switch-checked-background: var(--sld-color-primary);
+  --switch-handle-background-color: var(--sld-color-primary);
+  --switch-handle-border: var(--sld-color-secondary-alpha-low);
+  --switch-gutter-border: var(--sld-color-primary-alpha-low);
+  --switch-gutter-background: var(--sld-switch-background);
+  --switch-gutter-padding: 3px;
+}
+
+.switch {
+  display: inline-block;
+  position: relative;
+  border-radius: var(--switch-border-radius);
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.switch :hover .switchHandle {
+  background-color: var(--sld-color-secondary) !important;
+}
+
+.switch :has(input:checked) {
+  background-color: var(--switch-checked-background);
+}
+
+.switch .switchGutter {
+  border: 1px solid var(--switch-gutter-border);
+  border-radius: var(--switch-border-radius);
+  padding: var(--switch-gutter-padding);
+  background-color: var(--switch-gutter-background);
+}
+
+.switch .switchGutter input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: -50px;
+  left: -50px;
+}
+
+.switch .switchGutter input:checked + .switchHandle {
+  left: calc(100% - 16px);
+  border-color: var(--sld-color-secondary-alpha-mid);
+  box-shadow: var(--sld-elevation-3);
+  background-color: var(--sld-color-background);
+}
+
+.switch .switchGutter input + .switchHandle {
+  position: relative;
+  display: block;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: var(--switch-border-radius);
+  left: 0;
+  transition: all 0.1s;
+  background-color: var(--switch-handle-background-color);
+  border: 1px solid var(--switch-handle-border);
+  box-shadow: var(--sld-elevation-1);
+}
+
+label {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  min-width: 42px;
+}</style>

package/dist/controls/switch/Switch.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): {
+        class?: string;
+        style?: string;
+        element?: HTMLElement | null;
+        name?: string;
+        checked: boolean;
+        disabled?: boolean;
+        metaData?: T | undefined;
+        onChange?: ((val: boolean, metaData: T) => void) | undefined;
+        children?: import("svelte").Snippet;
+        switchLabel?: import("svelte").Snippet;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type SwitchProps_<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type SwitchEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type SwitchSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Switch<T = Data> extends SvelteComponent<SwitchProps_<T>, SwitchEvents<T>, SwitchSlots<T>> {
+}
+export {};

package/dist/controls/switch/switch.scss

@@ -0,0 +1,73 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --switch-border-radius: var(--sld-radius-large);
+    --switch-background: var(--sld-color-paper);
+    --switch-checked-background: var(--sld-color-primary);
+    --switch-handle-background-color: var(--sld-color-primary);
+    --switch-handle-border: var(--sld-color-secondary-alpha-low);
+    --switch-gutter-border: var(--sld-color-primary-alpha-low);
+    --switch-gutter-background: var(--sld-switch-background);
+    --switch-gutter-padding: 3px;
+}
+
+.switch {
+    display: inline-block;
+    position: relative;
+    border-radius: var(--switch-border-radius);
+    overflow: hidden;
+    cursor: pointer;
+
+    :hover {
+        .switchHandle {
+            background-color: var(--sld-color-secondary) !important;
+        }
+    }
+
+    :has(input:checked) {
+        background-color: var(--switch-checked-background);
+    }
+
+    .switchGutter {
+        border: 1px solid var(--switch-gutter-border);
+        border-radius: var(--switch-border-radius);
+        padding: var(--switch-gutter-padding);
+        background-color: var(--switch-gutter-background);
+
+        input {
+            position: absolute;
+            width: 0;
+            height: 0;
+            top: -50px;
+            left: -50px;
+        }
+
+        input:checked + .switchHandle {
+            left: calc(100% - 16px);
+            border-color: var(--sld-color-secondary-alpha-mid);
+            box-shadow: var(--sld-elevation-3);
+            background-color: var(--sld-color-background);
+        }
+
+        input + .switchHandle {
+            position: relative;
+            display: block;
+            width: 16px;
+            height: 16px;
+            background: white;
+            border-radius: var(--switch-border-radius);
+            left: 0;
+            transition: all 0.1s;
+            background-color: var(--switch-handle-background-color);
+            border: 1px solid var(--switch-handle-border);
+            box-shadow: var(--sld-elevation-1);
+        }
+    }
+}
+
+label {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    min-width: 42px;
+}

package/dist/controls/switch/types.d.ts

@@ -0,0 +1,24 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { Snippet } from 'svelte';
+export type SwitchProps<T = Record<string, any>> = {
+    /** className off the root component */
+    class?: string;
+    /** css style off the root component */
+    style?: string;
+    /** element root HTMLDivElement props */
+    element?: HTMLElement | null;
+    /** name of the switch */
+    name?: string;
+    /** whether the switch is checked */
+    checked: boolean;
+    /** whether the switch is disabled */
+    disabled?: boolean;
+    /** metadata associated with the switch */
+    metaData?: T;
+    /** function to be called when the switch is toggled */
+    onChange?: (val: boolean, metaData: T) => void;
+    children?: Snippet;
+    switchLabel?: Snippet;
+};
+export declare const SwitchDemoValues: DemoerStoryProps<SwitchProps>;
+export declare let parameters: DemoerStoryProps<SwitchProps<Record<string, any>>>, componentArgs: SwitchProps<Record<string, any>>;

package/dist/controls/switch/types.js

@@ -0,0 +1,10 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+export const SwitchDemoValues = {
+    checked: {
+        type: 'boolean'
+    },
+    disabled: {
+        type: 'boolean'
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(SwitchDemoValues);

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

@@ -0,0 +1,74 @@
+<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 = {
+  icon: {
+    type: "icon",
+    values: ["search", void 0]
+  },
+  endIcon: {
+    type: "endIcon",
+    values: ["search", void 0]
+  },
+  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.demo.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextFieldProps = typeof __propDef.props;
+export type TextFieldEvents = typeof __propDef.events;
+export type TextFieldSlots = typeof __propDef.slots;
+export default class TextField extends SvelteComponent<TextFieldProps, TextFieldEvents, TextFieldSlots> {
+}
+export {};

package/dist/controls/textfield/TextField.svelte

@@ -0,0 +1,227 @@
+<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 Slotted from "../../utils/slotted/Slotted.svelte";
+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
+} = $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="textfield-container">
+	<div class="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="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="textfield width-{width} tall-{tall} {className}"
+		style={niceIconStyle + ';' + style}
+		{tall}
+		{width}
+		{...rest}
+	/>
+</div>
+
+<style>.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);
+}
+
+.textfield {
+  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);
+  --preset-width: var(--sld-width-small);
+  width: var(--preset-width-small);
+}
+
+.textfield [error] {
+  border-bottom: red;
+}
+
+.textfield {
+  --preset-width: var(--sld-width-small);
+  width: var(--preset-width-small);
+  min-width: var(--preset-width-small);
+}
+
+.textfield[width=tiny], .textfield.width-tiny {
+  --preset-width: var(--sld-width-tiny);
+  width: var(--sld-width-tiny) !important;
+}
+
+.textfield[width=mini], .textfield.width-mini {
+  --preset-width: var(--sld-width-mini);
+  width: var(--sld-width-mini) !important;
+}
+
+.textfield[width=small], .textfield.width-small {
+  --preset-width: var(--sld-width-small);
+  width: var(--sld-width-small) !important;
+}
+
+.textfield[width=med], .textfield.width-med {
+  --preset-width: var(--sld-width-med);
+  width: var(--sld-width-med) !important;
+}
+
+.textfield[width=kind], .textfield.width-kind {
+  --preset-width: var(--sld-width-kind);
+  width: var(--sld-width-kind) !important;
+}
+
+.textfield[width=full], .textfield.width-full {
+  --preset-width: var(--sld-width-full);
+  width: var(--sld-width-full) !important;
+}
+
+.textfield[width=auto], .textfield.width-auto {
+  --preset-width: var(--sld-width-auto);
+  width: var(--sld-width-auto) !important;
+}
+
+.textfield[width=default], .textfield.width-default {
+  --preset-width: var(--sld-width-default);
+  width: var(--sld-width-default) !important;
+}
+
+.textfield {
+  --preset-tall: var(--sld-tall-small);
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+
+.textfield[tall=tiny], .textfield.tall-tiny {
+  min-height: var(--sld-tall-tiny) !important;
+}
+
+.textfield[tall=mini], .textfield.tall-mini {
+  min-height: var(--sld-tall-mini) !important;
+}
+
+.textfield[tall=small], .textfield.tall-small {
+  min-height: var(--sld-tall-small) !important;
+}
+
+.textfield[tall=med], .textfield.tall-med {
+  min-height: var(--sld-tall-med) !important;
+}
+
+.textfield[tall=kind], .textfield.tall-kind {
+  min-height: var(--sld-tall-kind) !important;
+}
+
+.textfield[tall=auto], .textfield.tall-auto {
+  min-height: var(--sld-tall-auto) !important;
+}
+
+.textfield[tall=default], .textfield.tall-default {
+  min-height: var(--sld-tall-default) !important;
+}
+
+.textfield:hover {
+  border-color: var(--sld-hover-border-color);
+  background-color: var(--sld-background-disabled);
+}
+
+.textfield-container {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.textfield-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));
+}
+
+.textfield-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));
+}
+
+.textfield-end > * {
+  max-height: calc(100% - 40px) !important;
+  border: 1px solid pink;
+}</style>

package/dist/controls/textfield/TextField.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        'anchor-for'?: string;
+        element?: HTMLElement;
+        class?: string;
+        style?: string;
+        container?: `inline` | `size` | `normal`;
+        hideMaxWidth?: string;
+        hideMaxHeight?: string;
+        hideMinWidth?: string;
+        hideMinHeight?: string;
+        children?: import("svelte").Snippet<[any]>;
+        icon?: import("../../types/index.js").ElementProps["icon"];
+        iconColor?: string;
+        endIcon?: string;
+        endIconColor?: string;
+        usePopper?: import("../../ui/popper/usePopper.js").UsePopperProps;
+        width?: import("../../types/index.js").ElementProps["width"];
+        tall?: import("../../types/index.js").ElementProps["tall"];
+        borderless?: boolean;
+        transparent?: boolean;
+        value?: any;
+        inputLast?: import("svelte").Snippet;
+        inputFirst?: import("svelte").Snippet;
+    } & Partial<HTMLInputElement>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TextFieldProps_ = typeof __propDef.props;
+export { TextFieldProps_ as TextFieldProps };
+export type TextFieldEvents = typeof __propDef.events;
+export type TextFieldSlots = typeof __propDef.slots;
+export default class TextField extends SvelteComponent<TextFieldProps_, TextFieldEvents, TextFieldSlots> {
+}

package/dist/controls/textfield/textfield.scss

@@ -0,0 +1,66 @@
+@import "../../styles/slotui-mixins.scss";
+.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);
+}
+
+.textfield {
+    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;
+    }
+
+    @include ui-width-presets;
+    @include ui-tall-presets;
+    @include data-hover;
+    &-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/controls/textfield/types.d.ts

@@ -0,0 +1,30 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import { type CommonProps, type ElementProps } from '../../types/index.js';
+import type { UsePopperProps } from '../../ui/popper/usePopper.js';
+import type { Snippet } from 'svelte';
+export type TextFieldProps = CommonProps & {
+    /** icon as a parameter */
+    icon?: ElementProps['icon'];
+    /** icon color as a parameter */
+    iconColor?: string;
+    /** end icon as a parameter */
+    endIcon?: string;
+    /** end icon color as a parameter */
+    endIconColor?: string;
+    /** parameters for usePopper */
+    usePopper?: UsePopperProps;
+    /** width of the input using presets */
+    width?: ElementProps['width'];
+    /** height of the input, using preset values */
+    tall?: ElementProps['tall'];
+    /** has no border */
+    borderless?: boolean;
+    /** has no border */
+    transparent?: boolean;
+    /** value of the input */
+    value?: any;
+    inputLast?: Snippet;
+    inputFirst?: Snippet;
+};
+export declare const TextFieldDemoValues: DemoerStoryProps<TextFieldProps>;
+export declare let parameters: DemoerStoryProps<TextFieldProps>, componentArgs: TextFieldProps;