@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/menu/MenuTitle.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">import MenuItem from "./MenuItem.svelte";
+let { ...rest } = $props();
+</script>
+
+<MenuItem {...rest} class="menuTitle" />
+
+<style>:root {
+  --menu-min-width: 150px;
+  --menu-padding: 0.25rem;
+  --menu-color: var(--sld-color-foreground);
+  --menu-item-border-radius: var(--sld-radius-small);
+  --menu-item-icon-width: 16px;
+  --menu-item-text-padding-left: 0.25rem;
+}
+
+ul.menu {
+  margin: 0;
+  min-width: var(--menu-min-width);
+  padding: var(--menu-padding);
+  cursor: pointer;
+  display: block;
+  color: var(--menu-color);
+}
+
+ul.menu li.menuTitle {
+  position: sticky;
+  margin-top: 0px !important;
+  top: 0px;
+  z-index: 1;
+}
+
+li.menuItem {
+  border-radius: var(--menu-item-border-radius);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent;
+}
+
+li.menuItem:hover {
+  border-color: var(--sld-hover-border-color);
+  background-color: var(--sld-background-disabled);
+}
+
+li.menuItem.selected, li.menuItem[aria-selected=true], li.menuItem[data-selected=true] {
+  border-color: none;
+  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
+  box-shadow: var(--sld-selected-shadow);
+}
+
+li.menuItem.selected .listItemChip,
+li.menuItem.selected .menuItemChip, li.menuItem[aria-selected=true] .listItemChip,
+li.menuItem[aria-selected=true] .menuItemChip, li.menuItem[data-selected=true] .listItemChip,
+li.menuItem[data-selected=true] .menuItemChip {
+  position: absolute;
+  min-height: 16px;
+  height: 50%;
+  width: 3px;
+  background-color: var(--sld-color-primary);
+  border-radius: var(--sld-radius-med);
+  left: 0;
+  border: 1px solid var(--sld-color-primary-alpha-mid);
+}
+
+li.menuItem {
+  --preset-tall: var(--sld-tall-small);
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+
+li.menuItem[tall=tiny], li.menuItem.tall-tiny {
+  min-height: var(--sld-tall-tiny) !important;
+}
+
+li.menuItem[tall=mini], li.menuItem.tall-mini {
+  min-height: var(--sld-tall-mini) !important;
+}
+
+li.menuItem[tall=small], li.menuItem.tall-small {
+  min-height: var(--sld-tall-small) !important;
+}
+
+li.menuItem[tall=med], li.menuItem.tall-med {
+  min-height: var(--sld-tall-med) !important;
+}
+
+li.menuItem[tall=kind], li.menuItem.tall-kind {
+  min-height: var(--sld-tall-kind) !important;
+}
+
+li.menuItem[tall=auto], li.menuItem.tall-auto {
+  min-height: var(--sld-tall-auto) !important;
+}
+
+li.menuItem[tall=default], li.menuItem.tall-default {
+  min-height: var(--sld-tall-default) !important;
+}
+
+li.menuItem .menuListItemIcon {
+  width: var(--menu-item-icon-width);
+  max-width: var(--menu-item-icon-width);
+  text-align: center;
+  overflow: hidden;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+li.menuItem .menu-list-item-text {
+  flex: 1;
+  padding-left: var(--menu-item-text-padding-left);
+}
+
+li.menuItem .menu-list-item-action {
+  display: block;
+}</style>

package/dist/ui/menu/MenuTitle.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { MenuItemProps } from './types.js';
+declare const __propDef: {
+    props: MenuItemProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuTitleProps = typeof __propDef.props;
+export type MenuTitleEvents = typeof __propDef.events;
+export type MenuTitleSlots = typeof __propDef.slots;
+export default class MenuTitle extends SvelteComponent<MenuTitleProps, MenuTitleEvents, MenuTitleSlots> {
+}
+export {};

package/dist/ui/menu/menu.scss

@@ -0,0 +1,56 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+  --menu-min-width: 150px;
+  --menu-padding: 0.25rem;
+  --menu-color: var(--sld-color-foreground);
+  --menu-item-border-radius: var(--sld-radius-small);
+  --menu-item-icon-width: 16px;
+  --menu-item-text-padding-left: 0.25rem;
+}
+
+ul.menu {
+  margin: 0;
+  min-width: var(--menu-min-width);
+  padding: var(--menu-padding);
+  cursor: pointer;
+  display: block;
+  color: var(--menu-color);
+
+  li.menuTitle {
+    position: sticky;
+    margin-top: 0px !important;
+    top: 0px;
+    z-index: 1;
+  }
+}
+
+li.menuItem {
+  @include data-hover;
+  @include data-selected;
+  @include ui-tall-presets;
+  border-radius: var(--menu-item-border-radius);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent;
+
+  .menuListItemIcon {
+    width: var(--menu-item-icon-width);
+    max-width: var(--menu-item-icon-width);
+    text-align: center;
+    overflow: hidden;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  .menu-list-item-text {
+    flex: 1;
+    padding-left: var(--menu-item-text-padding-left);
+  }
+
+  .menu-list-item-action {
+    display: block;
+  }
+}

package/dist/ui/menu/types.d.ts

@@ -0,0 +1,81 @@
+import type { CommonProps, Data } from '../../types/index.js';
+import type { ElementProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+/**
+ * Represents the props for the Menu component.
+ *
+ * @template T - The type of data for the menu items.
+ */
+export type MenuProps<T = Data> = CommonProps & {
+    menuItemsInstances?: any[];
+    hasIcon?: boolean;
+    onMenuItemClick?: Function;
+    element?: HTMLElement;
+    menuItemsList?: MenuItemProps[];
+    data?: T[];
+    /** @deprecated use dense*/
+    density?: 'none' | 'tight' | 'default' | 'medium' | 'kind';
+    /** @deprecated use tall*/
+    dense?: ElementProps['dense'];
+    /** preset value for the box-size of the component */
+    tall?: ElementProps['dense'];
+    /** index to select the item */
+    selectedIndex?: number;
+    /** menu can have no border */
+    bordered?: boolean;
+    /**  field used to  select the item */
+    selectorField?: keyof T;
+    /**  selected data */
+    selectedData?: T;
+    /** role  available for li element */
+    role?: 'directory' | 'group' | 'listbox' | 'menu' | 'menubar' | 'tablist' | 'toolbar' | 'tree';
+    /**  actions to be performed on the menu */
+    actions?: {
+        navigate: (idx: number) => void;
+    };
+    /** @deprecated */
+    menuList?: MenuItemProps[];
+    children?: Snippet<[{
+        item: Data;
+        itemIndex: number;
+    }]>;
+};
+export type MenuItemProps<T = any> = CommonProps & {
+    /** element root HTMLDivElement props */
+    element?: HTMLElement | null;
+    /** text displayed in the menu item */
+    text?: string;
+    /** text props, shown on the right side of the menuItem */
+    action?: string;
+    /** icon displayed in the menu item */
+    icon?: string;
+    /** color of the icon */
+    iconColor?: string;
+    /** size of the icon */
+    iconSize?: ElementProps['sizeType'];
+    /** whether to show a divider after the menu item */
+    divider?: boolean;
+    /** whether to show a divider before the menu item */
+    dividerBefore?: MenuItemProps['divider'];
+    /** data associated with the menu item */
+    data?: T;
+    /** whether the menu item is selected */
+    selected?: boolean;
+    /** @deprecated
+     * function to be called when the menu item is clicked */
+    onMenuItemClick?: (data: T) => void;
+    /** function to be called when the menu item is clicked */
+    onclick?: (data: T) => void;
+    /** position in the list */
+    itemIndex?: number;
+    /** role  available for li element */
+    role?: 'listitem' | 'option' | 'tab' | 'treeitem' | 'menuitem' | 'menuitemradio' | 'menuitemcheckbox';
+    menuItemStart?: Snippet;
+    menuItemEnd?: Snippet;
+    children?: Snippet<[{
+        item: T;
+        itemIndex: number;
+        selected: number;
+    }]>;
+    rest?: any;
+};

package/dist/ui/menu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/menuList/MenuList.demo.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">import MenuList from "./MenuList.svelte";
+import MenuItem from "./MenuListItem.svelte";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import { uiPresets } from "../../utils/engine/presets.js";
+import { defaultsArgs, defaultsArgsFromProps } from "../../base/demoer/demoer.utils.js";
+import { parameters, componentArgs } from "./types.js";
+let codeSlot = `
+<Menu>
+	<MenuItem divider={true}>menu item</MenuItem>
+	<MenuItem icon="home" selected={true}>menu item</MenuItem>
+	<MenuItem icon="close">menu item</MenuItem>
+	<MenuItem divider={true}>menu item</MenuItem>
+	<MenuItem>menu item</MenuItem>
+</Menu>`;
+</script>
+
+<ComponentDemo
+	component="Menu"
+	cite="A menu is not a list, it's just like a list but more and less"
+>
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Popper">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<div class="flex-h flex-align-bottom gap-small">
+						<div class="pad-tiny">
+							<MenuList {...activeParams}>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+							</MenuList>
+							<h6 class="pad">A menu</h6>
+						</div>
+						<div class="pad">
+							<MenuList {...activeParams}>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem icon="home" selected={true}>menu item</MenuItem>
+								<MenuItem icon="close">menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+							</MenuList>
+							<h6 class="pad">A menu with icons</h6>
+						</div>
+						<div class="pad">
+							<MenuList {...activeParams}>
+								<MenuItem divider={true}>menu item</MenuItem>
+								<MenuItem icon="home" selected={true}>menu item</MenuItem>
+								<MenuItem icon="close">menu item</MenuItem>
+								<MenuItem divider={true}>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+							</MenuList>
+							<h6 class="pad">A menu with some dividers</h6>
+						</div>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div></ComponentDemo
+>
+<br />
+<br />
+<br />
+<br />
+<ComponentDemo component="MenuItem" cite="A MenuItem gets one place to stay" />

package/dist/ui/menuList/MenuList.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 MenuListProps = typeof __propDef.props;
+export type MenuListEvents = typeof __propDef.events;
+export type MenuListSlots = typeof __propDef.slots;
+export default class MenuList extends SvelteComponent<MenuListProps, MenuListEvents, MenuListSlots> {
+}
+export {};