@medyll/idae-slotui-svelte 0.3.0

package/dist/controls/button/ButtonAction.svelte.d.ts

@@ -0,0 +1,45 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
+import type { PopperProps } from '../../ui/popper/types.js';
+import type { MenuProps } from '../../ui/menu/types.js';
+declare const __propDef: {
+    props: {
+        element?: HTMLButtonElement;
+        type?: "button" | "submit" | "reset";
+        icon?: import("../../types/index.js").ElementProps["icon"];
+        wrap?: import("../../types/index.js").ElementProps["wrap"];
+        iconEnd?: import("../../types/index.js").ElementProps["icon"];
+        bgTheme?: string;
+        usePopper?: import("../..").UsePopperProps;
+        popperOpen?: boolean;
+        loading?: boolean;
+        showChip?: boolean;
+        variant?: import("../../types/index.js").ElementProps["buttonVariant"];
+        width?: import("../../types/index.js").ElementProps["width"];
+        nowrap?: boolean;
+        tall?: import("../../types/index.js").ElementProps["tall"];
+        selected?: boolean;
+        value?: string;
+        reverse?: boolean;
+        rounded?: boolean | string;
+        ratio?: string;
+        children?: Snippet;
+        buttonPopper?: Snippet;
+        buttonStart?: Snippet;
+        buttonEnd?: Snippet;
+        buttonLoadingIcon?: Snippet;
+        menuProps?: MenuProps;
+        popperProps?: PopperProps;
+        popperContent?: Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ButtonActionProps_ = typeof __propDef.props;
+export { ButtonActionProps_ as ButtonActionProps };
+export type ButtonActionEvents = typeof __propDef.events;
+export type ButtonActionSlots = typeof __propDef.slots;
+export default class ButtonAction extends SvelteComponent<ButtonActionProps_, ButtonActionEvents, ButtonActionSlots> {
+}

package/dist/controls/button/ButtonMenu.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" generics="T">import Popper from "../../ui/popper/Popper.svelte";
+import MenuList from "../../ui/menuList/MenuList.svelte";
+import Button from "./Button.svelte";
+import MenuListItem from "../../ui/menuList/MenuListItem.svelte";
+let {
+  menuProps = {},
+  popperProps = {},
+  disabled = false,
+  element = $bindable(),
+  popperElement,
+  menuItem,
+  children,
+  ...rest
+} = $props();
+let isOpen = $state(popperProps?.isOpen);
+let chevron = $derived(disabled ? "fluent:chevron-up-20-regular" : "fluent:chevron-up-12-down");
+</script>
+
+<Button
+	onclick={() => {
+		isOpen = true;
+	}}
+	{...rest}
+	bind:element
+	iconEnd={{ icon: chevron, rotation: isOpen ? 180 : 0 }}
+	{children}
+/>
+{#if isOpen && !disabled}
+	<Popper
+		bind:element={popperElement}
+		bind:isOpen
+		parentNode={element}
+		{...popperProps}
+		position="BC"
+		stickToHookWidth={true}
+	>
+		<MenuList {...menuProps}>
+			{#snippet children({ item })}
+				{#if menuItem}
+					{@render menuItem?.({ item })}
+				{:else}
+					<MenuListItem {...item} />
+				{/if}
+			{/snippet}
+		</MenuList>
+	</Popper>
+{/if}
+
+<style>.buttonActionRoot {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+}
+
+.buttonText {
+  text-align: center;
+}
+
+.button {
+  display: block;
+  width: 64px;
+}
+
+.button:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.action {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  width: 30%;
+  padding: 0.5rem;
+}
+
+.action:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}</style>

package/dist/controls/button/ButtonMenu.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { ButtonMenuProps } from './types.js';
+declare class __sveltets_Render<T> {
+    props(): ButtonMenuProps<T>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type ButtonMenuProps_<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type ButtonMenuEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type ButtonMenuSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class ButtonMenu<T> extends SvelteComponent<ButtonMenuProps_<T>, ButtonMenuEvents<T>, ButtonMenuSlots<T>> {
+}
+export {};

package/dist/controls/button/IconButton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">import Icon from "../../base/icon/Icon.svelte";
+import Button from "./Button.svelte";
+let {
+  element,
+  icon,
+  ratio = "1/1",
+  iconFontSize = "full",
+  rotation = 0,
+  size = "mini",
+  children,
+  ...rest
+} = $props();
+</script>
+
+<Button variant="square" bind:element width={size} tall="unset" {ratio} {...rest}>
+	<Icon style="display:block; " {rotation} {icon} iconSize={iconFontSize} />
+</Button>

package/dist/controls/button/IconButton.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import type { ButtonProps } from './types.js';
+declare const __propDef: {
+    props: {
+        /** Icon to be displayed */
+        icon: ElementProps["icon"];
+        showShip?: boolean;
+        /** Font size of the icon */
+        iconFontSize?: ElementProps["iconSize"];
+        element?: HTMLButtonElement | null;
+        /** Aspect ratio of the icon button */
+        ratio?: string;
+        /** Whether to show the chip or not */
+        showChip?: boolean;
+        /** Rotation of the icon */
+        rotation?: number;
+        size?: ElementProps["width"];
+        /** Children   for the default content */
+        children?: Snippet;
+    } & Partial<ButtonProps>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type IconButtonProps_ = typeof __propDef.props;
+export { IconButtonProps_ as IconButtonProps };
+export type IconButtonEvents = typeof __propDef.events;
+export type IconButtonSlots = typeof __propDef.slots;
+export default class IconButton extends SvelteComponent<IconButtonProps_, IconButtonEvents, IconButtonSlots> {
+}

package/dist/controls/button/button-action.scss

@@ -0,0 +1,8 @@
+.button-action {
+  display: inline-flex;
+  position: relative;
+
+  .chevron {
+    flex-shrink: 1;
+  }
+}

package/dist/controls/button/button-menu.scss

@@ -0,0 +1,36 @@
+.buttonActionRoot {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+
+ 
+}
+
+.buttonText {
+  text-align: center;
+}
+.button {
+  display: block;
+  width: 64px;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+
+
+}
+
+.action {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  width: 30%;
+  padding: 0.5rem;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}

package/dist/controls/button/button.scss

@@ -0,0 +1,335 @@
+@import "../../styles/slotui-mixins.scss";
+
+:global(:root) {
+    --sld-button-font-size: inherit;
+    --sld-button-radius: var(--sld-radius-small);
+    --sld-button-border-color: var(--sld-color-primary);
+    --sld-button-border-width: 1px;
+    --sld-button-text-align: center;
+    --sld-button-padding: 0;
+    --sld-button-background: var(--sld-color-foreground-alpha-high);
+    --sld-button-contained-background: var(--sld-color-primary);
+    --sld-button-hover-border-color: var(--sld-color-primary);
+    --sld-button-active-border-color: var(--sld-color-secondary);
+    --sld-button-focus-border-color: var(--sld-color-primary);
+    --sld-button-hover-shadow: var(--sld-elevation-3);
+    --sld-button-active-shadow: var(--sld-elevation-4);
+    --sld-button-focus-shadow: var(--sld-elevation-4);
+}
+
+.actionButton {
+    height: 100%;
+    width: var(--w-tiny);
+    cursor: pointer;
+
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.5);
+    }
+}
+
+:global(button),
+:global(.button),
+:global(button.button),
+:global(input[type="button"]),
+:global(input[type="submit"]) {
+    @include ui-width-presets;
+    @include ui-tall-presets;
+    @include ui-variants;
+    @include elevation;
+
+    border: none;
+    margin: 0;
+
+    text-align: var(--sld-button-text-align);
+    font-size: var(--sld-button-font-size);
+    border-radius: var(--sld-button-radius);
+
+    color: var(--sld-color-foreground);
+    padding: var(--sld-button-padding);
+    position: relative;
+
+    display: inline-block;
+
+    transition: all 0.2s ease-in-out;
+    overflow: hidden;
+    cursor: pointer;
+
+    align-content: center;
+    align-items: center;
+
+    background: var(--sld-button-background);
+
+    & {
+        :focus {
+            outline: 1px solid var(--sld-button-focus-border-color);
+            outline-offset: 2px;
+            box-shadow: var(--sld-button-focus-shadow);
+        }
+        :focus-visible {
+            outline: 1px solid var(--sld-button-focus-border-color);
+            outline-offset: -2px;
+            box-shadow: var(--sld-button-focus-shadow);
+        }
+        :hover {
+            background-color: var(--sld-button-hover-background);
+            box-shadow: var(--sld-button-hover-shadow);
+        }
+        :active {
+            transform: translateY(1px);
+            box-shadow: var(--sld-button-active-shadow);
+        }
+        :focus:not(:focus-visible) {
+            box-shadow: var(--sld-button-focus-shadow);
+        }
+    }
+    /*  &:focus {
+        outline: 1px solid var(--sld-button-focus-border-color);
+        outline-offset: 2px;
+        box-shadow: var(--sld-button-focus-shadow);
+    }
+    &:focus-visible {
+        outline: 1px solid var(--sld-button-focus-border-color);
+        outline-offset: -2px;
+        box-shadow: var(--sld-button-focus-shadow);
+    }
+    &:focus:not(:focus-visible) {
+        box-shadow: var(--sld-button-focus-shadow);
+    }
+    &:hover {
+        background-color: var(--sld-button-hover-background);
+        box-shadow: var(--sld-button-hover-shadow);
+    }
+
+    &:active {
+        transform: translateY(1px);
+        box-shadow: var(--sld-button-active-shadow);
+    } */
+
+    .button-start {
+        @include ui-ellipsises-presets;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0.5rem;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    .button-central {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0.5rem; //var(--content-padding, 0.25rem);
+        text-align: var(--sld-button-text-align);
+        &:empty {
+            display: none;
+        }
+    }
+
+    .button-action {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--w-tiny);
+        padding: 0 0.5rem;
+        cursor: pointer;
+
+        &:empty {
+            display: none;
+        }
+
+        &:hover {
+            background-color: var(--sld-button-action-hover-background);
+        }
+    }
+
+    &.loading,
+    &[aria-busy="true"] {
+        position: relative;
+        color: transparent;
+        pointer-events: none;
+
+        &::after {
+            content: " ";
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            top: 50%;
+            left: 50%;
+            margin-top: -8px;
+            margin-left: -8px;
+            border: 2px solid var(--sld-color-secondary);
+            border-top-color: transparent;
+            border-bottom-color: transparent;
+            border-radius: 50%;
+            animation: button-spinner 0.6s linear infinite;
+        }
+    }
+    &[disabled],
+    &.disabled,
+    &[aria-disabled="true"] {
+        color: var(--color-gray-800);
+        border-color: var(--color-gray-400);
+        opacity: 0.6;
+        cursor: not-allowed;
+        box-shadow: none;
+        pointer-events: none;
+    }
+
+    &[aria-pressed="true"],
+    &.selected {
+        box-shadow: var(--sld-elevation-3);
+        // border: 0.5px solid var(--sld-color-paper-alpha-low);
+        background-color: var(--sld-color-secondary);
+        font-weight: bold;
+    }
+    .chip {
+        position: absolute;
+        z-index: 2;
+        height: 3px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        width: 50%;
+        background-color: var(--css-button-chip-color, var(--sld-color-primary));
+        border-radius: var(--sld-radius-large);
+        bottom: 2px;
+    }
+
+    .loadingButtonZone {
+        z-index: 010;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        height: 100%;
+        overflow: hidden;
+        align-content: center;
+        justify-content: space-around;
+    }
+
+    //
+    @include ui-width-presets;
+    @include ui-tall-presets;
+    @include ui-variants;
+
+    &[variant*="bordered"],
+    &[bordered="true"],
+    &.bordered {
+        color: var(--sld-color-foreground);
+        border: var(--sld-button-border-width) solid var(--sld-button-border-color);
+        box-shadow: var(--sld-elevation-1);
+        background-color: var(--sld-button-background);
+        &:hover {
+            border-color: var(--sld-color-primary);
+            box-shadow: var(--sld-button-hover-shadow);
+        }
+
+        &:focus,
+        &:active {
+            border-color: var(--sld-button-active-border-color);
+            box-shadow: var(--sld-button-active-shadow);
+        }
+    }
+
+    &[variant*="contained"],
+    &[contained="true"],
+    &.contained {
+        border: var(--sld-button-border-width) solid var(--sld-button-border-color);
+        color: var(--sld-color-on-primary);
+        background-color: var(--sld-button-contained-background);
+        background-clip: padding-box;
+        box-shadow: var(--sld-elevation-1);
+        &:hover {
+            background-color: var(--sld-color-secondary);
+            color: var(--sld-color-on-secondary);
+        }
+
+        &:focus,
+        &:active {
+            background-color: var(--sld-color-tertiary);
+            color: var(--sld-color-on-tertiary);
+            box-shadow: var(--sld-button-active-shadow);
+        }
+    }
+
+    &[variant*="link"],
+    &[link="true"],
+    &.link,
+    &[role="link"] {
+        color: var(--sld-color-primary);
+        text-decoration: underline;
+        text-underline-offset: 0.35rem;
+        background-color: transparent;
+        cursor: pointer;
+        border: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        &:focus,
+        &:active {
+            text-decoration: underline;
+            outline: none;
+            box-shadow: none;
+        }
+    }
+
+    &[variant*="naked"],
+    &[naked="true"],
+    &.naked {
+        color: inherit;
+        background-color: transparent;
+        border: 0px solid transparent;
+        cursor: pointer;
+        @include data-hover;
+        &:hover {
+            background-color: var(--sld-button-hover-background);
+        }
+        &:active,
+        &:focus {
+            background-color: transparent;
+            border: 0.5px solid transparent;
+            color: inherit;
+        }
+    }
+
+    &[variant*="flat"],
+    &[flat="true"],
+    &.flat {
+        color: inherit;
+        background-color: transparent;
+        border: none;
+        border-radius: 0;
+        cursor: pointer;
+        &:hover {
+            background-color: var(--sld-button-hover-background);
+        }
+        &:active,
+        &:focus {
+            background-color: transparent;
+            border: none;
+            border-radius: 0;
+            color: inherit;
+        }
+    }
+}
+
+@keyframes button-spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}

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

@@ -0,0 +1,56 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import { type ElementProps } from '../../types/index.js';
+import type { MenuListProps } from '../../ui/menuList/types.js';
+import type { PopperProps } from '../../ui/popper/types.js';
+import type { UsePopperProps } from '../../ui/popper/usePopper.js';
+import type { Snippet } from 'svelte';
+export type ButtonProps = {
+    element?: HTMLButtonElement;
+    /** button type */
+    type?: 'button' | 'submit' | 'reset';
+    icon?: ElementProps['icon'];
+    wrap?: ElementProps['wrap'];
+    /** endIcon as a parameter */
+    iconEnd?: ElementProps['icon'];
+    /** background color theme */
+    bgTheme?: string;
+    /** paramters for usePopper */
+    usePopper?: UsePopperProps;
+    /** show / hide popper   */
+    popperOpen?: boolean;
+    /** show loading state */
+    loading?: boolean;
+    /** show chip */
+    showChip?: boolean;
+    /** button style */
+    variant?: ElementProps['buttonVariant'];
+    /** preset width of the button */
+    width?: ElementProps['width'];
+    /** add ellipsis on overflowed text */
+    nowrap?: boolean;
+    tall?: ElementProps['tall'];
+    /**  button selected */
+    selected?: boolean;
+    /** button value */
+    value?: string;
+    /** reverse the order of the button zone*/
+    reverse?: boolean;
+    /** rounded or rounded corners size */
+    rounded?: boolean | string;
+    /** aspect ratio of the button */
+    ratio?: string;
+    children?: Snippet;
+    buttonPopper?: Snippet;
+    buttonStart?: Snippet;
+    buttonEnd?: Snippet;
+    buttonLoadingIcon?: Snippet;
+};
+export type ButtonMenuProps<T> = ButtonProps & {
+    menuProps?: MenuListProps<T>;
+    popperProps?: PopperProps;
+    popperElement?: HTMLElement;
+    menuItem?: Snippet<[{
+        item: T;
+    }]>;
+};
+export declare let parameters: DemoerStoryProps<ButtonProps>, componentArgs: ButtonProps;

package/dist/controls/button/types.js

@@ -0,0 +1,45 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+import { buttonVariant, densePreset, uiPresets, widthPreset } from '../../types/index.js';
+const ButtonDemoValues = {
+    type: {
+        type: 'string',
+        values: ['button', 'submit', 'reset'],
+        default: 'button'
+    },
+    icon: {
+        type: 'icon'
+    },
+    width: {
+        type: 'width',
+        default: widthPreset.med
+    },
+    tall: {
+        type: 'tall',
+        default: densePreset.default
+    },
+    bgTheme: {
+        type: 'theme',
+        default: 'primary'
+    },
+    variant: {
+        type: 'buttonVariant',
+        default: buttonVariant.contained
+    },
+    nowrap: {
+        type: 'boolean',
+        default: false
+    },
+    selected: {
+        type: 'boolean',
+        default: false
+    },
+    reverse: {
+        type: 'boolean',
+        default: false
+    },
+    loading: {
+        type: 'boolean',
+        default: false
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(ButtonDemoValues);

package/dist/controls/checkbox/Checkbox.demo.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import Checkbox from "./Checkbox.svelte";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import { defaultsArgs } from "../../base/demoer/demoer.utils.js";
+import { CheckboxDemoValues } from "./types.js";
+let parameters = CheckboxDemoValues;
+let componentArgs = defaultsArgs(parameters);
+let code = `
+<Checkbox>
+	label
+</Checkbox>`;
+</script>
+
+<ComponentDemo component="Checkbox">
+	<div class="flex-v gap-medium">
+		<DemoPage {code} component="Checkbox">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Checkbox {...activeParams}>label</Checkbox>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>