@medyll/idae-slotui-svelte 0.3.0

package/dist/types/index.d.ts

@@ -0,0 +1,202 @@
+import type { BreakPointsKeys } from '../utils/stylesheet/types.js';
+import type { StickToPositionType } from '../utils/uses/stickTo/stickTo.js';
+import type { IconProps } from '@iconify/svelte';
+import type { Snippet } from 'svelte';
+export type AppIcon = string;
+export declare enum fontSize {
+    small = "small",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge"
+}
+export declare enum theme {
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary",
+    success = "success",
+    warning = "warning",
+    danger = "danger",
+    light = "light",
+    medium = "medium",
+    dark = "dark"
+}
+export declare enum levels {
+    success = "success",
+    warning = "warning",
+    alert = "alert",
+    error = "error",
+    info = "info",
+    discrete = "discrete"
+}
+export declare enum statusPreset {
+    success = "success",
+    warning = "warning",
+    alert = "alert",
+    error = "error",
+    info = "info",
+    discrete = "discrete"
+}
+export declare enum densePreset {
+    default = "default",
+    small = "small",
+    medium = "medium",
+    kind = "kind"
+}
+export declare enum gutterPreset {
+    default = "default",
+    small = "small",
+    med = "med",
+    kind = "kind"
+}
+export declare enum tallPreset {
+    default = "default",
+    mini = "mini",
+    tiny = "tiny",
+    small = "small",
+    med = "med",
+    kind = "kind"
+}
+export declare enum buttonVariant {
+    link = "link",
+    contained = "contained",
+    bordered = "bordered",
+    naked = "naked",
+    flat = "flat",
+    square = "square",
+    rounded = "rounded"
+}
+export declare enum iconSize {
+    auto = "auto",
+    tiny = "tiny",
+    small = "small",
+    medium = "medium",
+    large = "large",
+    big = "big",
+    full = "full"
+}
+export declare const iconFontSize: Record<iconSize, string>;
+export declare enum flowPreset {
+    relative = "relative",
+    absolute = "absolute",
+    fixed = "fixed"
+}
+export declare enum widthPreset {
+    tiny = "tiny",
+    mini = "mini",
+    small = "small",
+    med = "med",
+    kind = "kind",
+    full = "full",
+    auto = "auto"
+}
+export declare enum positionPreset {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right"
+}
+export declare enum orientation {
+    vertical = "vertical",
+    horizontal = "horizontal"
+}
+export declare enum wrapPreset {
+    vertical = "vertical",
+    horizontal = "horizontal"
+}
+declare const elevation: number[];
+export interface ElementProps {
+    density: 'none' | 'tight' | 'default' | 'medium' | 'kind';
+    wrap: wrapPreset | keyof typeof wrapPreset;
+    dense: densePreset | keyof typeof densePreset;
+    gutter: gutterPreset | keyof typeof gutterPreset;
+    theme: theme | keyof typeof theme;
+    width: widthPreset | keyof typeof widthPreset;
+    tall: tallPreset | keyof typeof tallPreset;
+    levels: levels | keyof typeof levels;
+    status: statusPreset | keyof typeof statusPreset;
+    buttonVariant: buttonVariant | keyof typeof buttonVariant;
+    alignment: 'center' | 'left' | 'right';
+    flow: keyof typeof flowPreset;
+    position: keyof typeof positionPreset;
+    popperPosition: StickToPositionType;
+    action: (event: any, data?: Data) => void;
+    iconSize: keyof typeof iconSize;
+    icon: string | IconObj;
+    orientation?: keyof typeof orientation;
+    elevation?: keyof typeof elevation;
+}
+export declare enum StickyPosition {
+    TC = "TC",// Top Center
+    TL = "TL",// Top Left
+    TR = "TR",// Top Right
+    BC = "BC",// Bottom Center
+    BL = "BL",// Bottom Left
+    BR = "BR",// Bottom Right
+    T = "T",// Top
+    R = "R",// Right
+    B = "B",// Bottom
+    L = "L",// Left
+    C = "C"
+}
+export declare const uiPresets: {
+    buttonVariant: string[];
+    dense: string[];
+    tall: string[];
+    status: string[];
+    theme: string[];
+    density: {
+        none: string;
+        tight: string;
+        default: string;
+        medium: string;
+        kind: string;
+        unset: string;
+    };
+    width: string[];
+    iconSize: string[];
+    stickyPosition: string[];
+    position: string[];
+    flow: string[];
+    levels: string[];
+    orientation: string[];
+    gutter: string[];
+    elevation: number[];
+};
+export type Data = Record<string, any>;
+export interface CommonProps {
+    'anchor-for'?: string;
+    element?: HTMLElement;
+    class?: string;
+    style?: string;
+    container?: `inline` | `size` | `normal`;
+    hideMaxWidth?: string;
+    hideMaxHeight?: string;
+    hideMinWidth?: string;
+    hideMinHeight?: string;
+    children?: Snippet<[any]>;
+}
+export type IconObj = IconProps & {
+    icon: string;
+    rotate?: boolean;
+    color?: string;
+    rotation?: number;
+    iconSize?: keyof typeof iconSize;
+    class?: string;
+};
+/** @deprecated use demoer/DemoerStoryProps */
+export type DemoStoryProps<T> = {
+    [K in keyof T]: {
+        type: T[K] | K | string;
+        values: T[K][] | any[];
+        default?: T[K];
+    };
+};
+export type ExpandProps<T> = T extends infer O ? {
+    [K in keyof O]: O[K];
+} : never;
+export type ContainerQueriesUnits = '%' | 'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | `cqw` | `cqh` | `cqi` | `cqb` | `cqmin` | `cqmax` | `normal`;
+export type ContainerQueriesUnitsAttributes = `${string}${ContainerQueriesUnits}`;
+export type BreakPointsAttribute = `hide-more-${BreakPointsKeys}` | `hide-less-${BreakPointsKeys}`;
+export type BreakPointsAttributes = `hide-more-${BreakPointsKeys}` | `hide-less-${BreakPointsKeys}`;
+export type CombineElements<T extends string, U extends string = T> = T extends any ? T | `${T} ${CombineElements<Exclude<U, T>>}` : never;
+export {};

package/dist/types/index.js

@@ -0,0 +1,161 @@
+export var fontSize;
+(function (fontSize) {
+    fontSize["small"] = "small";
+    fontSize["medium"] = "medium";
+    fontSize["large"] = "large";
+    fontSize["xlarge"] = "xlarge";
+})(fontSize || (fontSize = {}));
+export var theme;
+(function (theme) {
+    theme["primary"] = "primary";
+    theme["secondary"] = "secondary";
+    theme["tertiary"] = "tertiary";
+    theme["success"] = "success";
+    theme["warning"] = "warning";
+    theme["danger"] = "danger";
+    theme["light"] = "light";
+    theme["medium"] = "medium";
+    theme["dark"] = "dark";
+})(theme || (theme = {}));
+export var levels;
+(function (levels) {
+    levels["success"] = "success";
+    levels["warning"] = "warning";
+    levels["alert"] = "alert";
+    levels["error"] = "error";
+    levels["info"] = "info";
+    levels["discrete"] = "discrete";
+})(levels || (levels = {}));
+export var statusPreset;
+(function (statusPreset) {
+    statusPreset["success"] = "success";
+    statusPreset["warning"] = "warning";
+    statusPreset["alert"] = "alert";
+    statusPreset["error"] = "error";
+    statusPreset["info"] = "info";
+    statusPreset["discrete"] = "discrete";
+})(statusPreset || (statusPreset = {}));
+export var densePreset;
+(function (densePreset) {
+    densePreset["default"] = "default";
+    densePreset["small"] = "small";
+    densePreset["medium"] = "medium";
+    densePreset["kind"] = "kind";
+})(densePreset || (densePreset = {}));
+export var gutterPreset;
+(function (gutterPreset) {
+    gutterPreset["default"] = "default";
+    gutterPreset["small"] = "small";
+    gutterPreset["med"] = "med";
+    gutterPreset["kind"] = "kind";
+})(gutterPreset || (gutterPreset = {}));
+export var tallPreset;
+(function (tallPreset) {
+    tallPreset["default"] = "default";
+    tallPreset["mini"] = "mini";
+    tallPreset["tiny"] = "tiny";
+    tallPreset["small"] = "small";
+    tallPreset["med"] = "med";
+    tallPreset["kind"] = "kind";
+})(tallPreset || (tallPreset = {}));
+export var buttonVariant;
+(function (buttonVariant) {
+    buttonVariant["link"] = "link";
+    buttonVariant["contained"] = "contained";
+    buttonVariant["bordered"] = "bordered";
+    buttonVariant["naked"] = "naked";
+    buttonVariant["flat"] = "flat";
+    buttonVariant["square"] = "square";
+    buttonVariant["rounded"] = "rounded";
+})(buttonVariant || (buttonVariant = {}));
+export var iconSize;
+(function (iconSize) {
+    iconSize["auto"] = "auto";
+    iconSize["tiny"] = "tiny";
+    iconSize["small"] = "small";
+    iconSize["medium"] = "medium";
+    iconSize["large"] = "large";
+    iconSize["big"] = "big";
+    iconSize["full"] = "full";
+})(iconSize || (iconSize = {}));
+export const iconFontSize = {
+    auto: 'auto',
+    tiny: '1rem',
+    small: '1.5rem',
+    medium: '4rem',
+    large: '12rem',
+    big: '16rem',
+    full: '100%'
+};
+export var flowPreset;
+(function (flowPreset) {
+    flowPreset["relative"] = "relative";
+    flowPreset["absolute"] = "absolute";
+    flowPreset["fixed"] = "fixed";
+})(flowPreset || (flowPreset = {}));
+export var widthPreset;
+(function (widthPreset) {
+    widthPreset["tiny"] = "tiny";
+    widthPreset["mini"] = "mini";
+    widthPreset["small"] = "small";
+    widthPreset["med"] = "med";
+    widthPreset["kind"] = "kind";
+    widthPreset["full"] = "full";
+    widthPreset["auto"] = "auto";
+})(widthPreset || (widthPreset = {}));
+export var positionPreset;
+(function (positionPreset) {
+    positionPreset["top"] = "top";
+    positionPreset["bottom"] = "bottom";
+    positionPreset["left"] = "left";
+    positionPreset["right"] = "right";
+})(positionPreset || (positionPreset = {}));
+export var orientation;
+(function (orientation) {
+    orientation["vertical"] = "vertical";
+    orientation["horizontal"] = "horizontal";
+})(orientation || (orientation = {}));
+export var wrapPreset;
+(function (wrapPreset) {
+    wrapPreset["vertical"] = "vertical";
+    wrapPreset["horizontal"] = "horizontal";
+})(wrapPreset || (wrapPreset = {}));
+const elevation = [0, 1, 2, 3, 4, 5];
+export var StickyPosition;
+(function (StickyPosition) {
+    StickyPosition["TC"] = "TC";
+    StickyPosition["TL"] = "TL";
+    StickyPosition["TR"] = "TR";
+    StickyPosition["BC"] = "BC";
+    StickyPosition["BL"] = "BL";
+    StickyPosition["BR"] = "BR";
+    StickyPosition["T"] = "T";
+    StickyPosition["R"] = "R";
+    StickyPosition["B"] = "B";
+    StickyPosition["L"] = "L";
+    StickyPosition["C"] = "C"; // Center
+})(StickyPosition || (StickyPosition = {}));
+export const uiPresets = {
+    buttonVariant: Object.keys(buttonVariant),
+    dense: Object.keys(densePreset),
+    tall: Object.keys(tallPreset),
+    status: Object.keys(statusPreset),
+    theme: Object.keys(theme),
+    density: {
+        none: '0',
+        tight: '0.25rem',
+        default: '0.5rem',
+        medium: '1rem',
+        kind: '1.5rem',
+        unset: '1.5rem'
+    },
+    width: Object.keys(widthPreset),
+    iconSize: Object.keys(iconSize),
+    stickyPosition: Object.keys(StickyPosition),
+    position: Object.keys(positionPreset),
+    flow: Object.keys(flowPreset),
+    levels: Object.keys(levels),
+    orientation: Object.keys(orientation),
+    gutter: Object.keys(gutterPreset),
+    elevation: elevation
+};

package/dist/types/slotui-ambient.d.ts

@@ -0,0 +1,27 @@
+import { type ElementProps, type ContainerQueriesUnitsAttributes } from './index.ts';
+
+declare module 'svelte/elements' {
+	export interface SvelteHTMLElements {
+		full: HTMLButtonAttributes;
+	}
+
+	export interface HTMLAttributes<T> {
+		width?: ElementProps['width'];
+		tall?: ElementProps['tall'];
+		gutter?: ElementProps['gutter'];
+		variant?: ElementProps['variant'];
+		ratio?: string | `true` | `false`;
+		square?: string | boolean | `true` | `false`;
+		rotation?: string | number;
+		/** media queries */
+		'hide-more-than'?: string;
+		/** for container of containerQueries */
+		container?: `inline` | `size` | `normal`;
+		'hide-max-width'?: ContainerQueriesUnitsAttributes;
+		'hide-max-height'?: ContainerQueriesUnitsAttributes;
+		'hide-min-width'?: ContainerQueriesUnitsAttributes;
+		'hide-min-height'?: ContainerQueriesUnitsAttributes;
+	}
+}
+
+export {};

package/dist/ui/bootstrapp/BootStrApp.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">import ChromeFrameButtonList from "../chromeFrame/ChromeFrameButtonList.svelte";
+import Frame from "../frame/Frame.svelte";
+import Login from "../login/Login.svelte";
+import Taskbar from "../taskbar/Taskbar.svelte";
+import { link, push } from "svelte-spa-router";
+import Drawer from "../../navigation/drawer/Drawer.svelte";
+import TopBar from "../toggleBar/ToggleBar.svelte";
+import { page } from "$app/stores";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+import MenuListItem from "../menuList/MenuListItem.svelte";
+import MenuList from "../menuList/MenuList.svelte";
+let { children, ...rest } = $props();
+function signOut() {
+  push("/#login");
+}
+</script>
+
+<svelte:head>
+	{#key $page.url}
+		<title>slotui</title>
+		<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet" />
+		<style>
+			 {@html cssfabric}
+
+		</style>
+		<style></style>
+		<!-- <link href="src/theme/cssfabric.scss" lang="scss" rel="stylesheet" /> -->
+	{/key}
+</svelte:head>
+red
+<Login showLogin={false}>
+	<div class="h-full overflow-hidden flex-v">
+		<Taskbar>
+			{#snippet taskBarLeft()}
+				<box class="pad-1">
+					<h5>slotui</h5>
+				</box>
+				<a href="/tooling" use:link>link </a>
+			{/snippet}
+			<ChromeFrameButtonList />
+			{#snippet taskBarRight()}<button onclick={signOut}>signOut</button>{/snippet}
+		</Taskbar>
+		<div id="layout" class="pos-rel flex-main overflow-hidden">
+			<!-- <Router {routes} /> -->
+			<Frame>
+				{#snippet drawerContent()}
+					nav left
+				{/snippet}
+				{#snippet frameContent()}
+					<Slotted child={children} />
+				{/snippet}
+			</Frame>
+			<!-- <ChromeFrameList
+				chromeListConfig={{
+					showCommandBar: false,
+					parent: '#layout',
+					onClose: (chromeFrame) => {
+						// on:chromeframe:close
+						push('/');
+						console.log('closed ', chromeFrame);
+					}
+				}}
+			/> -->
+		</div>
+		<Drawer isOpen={false}>
+			{#snippet drawerTop()}
+				<TopBar title="Drawer with menu bar ">
+					{#snippet menuBarSwitcher()}
+						<div class="pad-1">
+							<input placeholder="Search in Bar" style="width:100%;" type="text" />
+						</div>
+					{/snippet}
+				</TopBar>
+			{/snippet}
+			<div class="pad-2">
+				<MenuList onItemClick={() => {}}>
+					{#each [...Array(10)] as key, val}
+						<MenuListItem>
+							{#snippet menuItemFirst()}
+								<span>Some idioms {val}</span>
+								<span>secondary {val}</span>
+							{/snippet}
+							{#snippet menuItemLast()}
+								<span><button>fds de action</button></span>
+							{/snippet}
+						</MenuListItem>
+					{/each}
+				</MenuList>
+			</div>
+		</Drawer>
+	</div>
+</Login>

package/dist/ui/bootstrapp/BootStrApp.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        children: unknown;
+    } & Record<string, unknown>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BootStrAppProps = typeof __propDef.props;
+export type BootStrAppEvents = typeof __propDef.events;
+export type BootStrAppSlots = typeof __propDef.slots;
+export default class BootStrApp extends SvelteComponent<BootStrAppProps, BootStrAppEvents, BootStrAppSlots> {
+}
+export {};

package/dist/ui/chromeFrame/ChromeFrame.svelte

@@ -0,0 +1,69 @@
+<svelte:options />
+
+<script lang="ts">import { onEvent } from "../../utils/uses/event.js";
+import { getChromeFrame } from "./chromeFrame.utils.js";
+let { frameId, showCommands } = $props();
+const frameStore = getChromeFrame(frameId);
+function handleRemove() {
+  frameStore.remove();
+}
+function handleHide() {
+  frameStore.toggle();
+}
+</script>
+
+<div
+	use:onEvent={{ event: 'chromeframe:hide', action: handleHide }}
+	use:onEvent={{ event: 'chromeframe:close', action: handleRemove }}
+	class="chrome-frame"
+	style="z-index:{$frameStore?.zIndex};display:{$frameStore?.minimized ? 'none' : ''}"
+>
+	{#if $frameStore?.showCommandBar}
+		<div class="chrome-frame-bar">
+			<div class="flex-main h3">{frameId}</div>
+			<div>{frameId}</div>
+			<button onclick={handleHide}>hide</button>
+			<button onclick={handleRemove}>close</button>
+		</div>
+	{/if}
+	<div class="chrome-frame-content">
+		<svelte:component this={$frameStore?.component} {...$frameStore?.componentProps} />
+	</div>
+</div>
+
+<style global>:root {
+  --chrome-frame-color: var(--sld-color-foreground);
+  --chrome-frame-background-color: var(--sld-color-background);
+  --chrome-frame-bar-gap: var(--sld-gap-med);
+  --chrome-frame-bar-padding: var(--sld-pad-medium);
+  --chrome-frame-bar-border-bottom: var(--sld-color-border);
+  --chrome-frame-content-flex: 1;
+}
+
+.chrome-frame {
+  display: flex;
+  flex-direction: "column";
+  align-items: flex-start;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  color: var(--chrome-frame-color);
+  background-color: var(--chrome-frame-background-color);
+  overflow: hidden;
+}
+
+.chrome-frame-bar {
+  display: flex;
+  flex-direction: "row";
+  align-items: center;
+  gap: var(--chrome-frame-bar-gap);
+  padding: var(--chrome-frame-bar-padding);
+  border-bottom: 1px solid var(--chrome-frame-bar-border-bottom);
+}
+
+.chrome-frame-content {
+  flex: var(--chrome-frame-content-flex);
+  overflow: hidden;
+  position: relative;
+}</style>

package/dist/ui/chromeFrame/ChromeFrame.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        frameId: string;
+        showCommands: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ChromeFrameProps_ = typeof __propDef.props;
+export { ChromeFrameProps_ as ChromeFrameProps };
+export type ChromeFrameEvents = typeof __propDef.events;
+export type ChromeFrameSlots = typeof __propDef.slots;
+export default class ChromeFrame extends SvelteComponent<ChromeFrameProps_, ChromeFrameEvents, ChromeFrameSlots> {
+}

package/dist/ui/chromeFrame/ChromeFrameButtonList.svelte

@@ -0,0 +1,40 @@
+<svelte:options />
+
+<script lang="ts">import { chromeFrameStore } from "./chromeFrame.store.js";
+import Button from "../../controls/button/Button.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+let { class: className = "", element, children, ...rest } = $props();
+</script>
+
+<div bind:this={element} class="flex-h gap-small {className}" {...rest}>
+	{#each [...$chromeFrameStore.values()] as value, key}
+		<div class="buttonRail">
+			<Slotted child={children} slotArgs={{ chromeFrame: value }}>
+				<Button
+					style="position:relative"
+					onclick={() => {
+						chromeFrameStore.toggle(value.frameId);
+					}}
+					ondblclick={() => {
+						chromeFrameStore.remove(value.frameId);
+					}}
+					class={value.active ? 'active' : ''}
+					iconEnd="window-close"
+				>
+					{value.title ?? value.frameId}
+				</Button>
+			</Slotted>
+		</div>
+	{/each}
+</div>
+
+<style global>.buttonRail button:not(.active) {
+  border: 1px solid transparent;
+  background-color: transparent;
+}
+.buttonRail button.active {
+  border: 1px solid var(--sld-color-border);
+}
+.buttonRail button:hover {
+  border: 1px solid var(--sld-color-primary);
+}</style>

package/dist/ui/chromeFrame/ChromeFrameButtonList.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        element: unknown;
+        children: unknown;
+    } & Record<string, unknown>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChromeFrameButtonListProps = typeof __propDef.props;
+export type ChromeFrameButtonListEvents = typeof __propDef.events;
+export type ChromeFrameButtonListSlots = typeof __propDef.slots;
+export default class ChromeFrameButtonList extends SvelteComponent<ChromeFrameButtonListProps, ChromeFrameButtonListEvents, ChromeFrameButtonListSlots> {
+}
+export {};