svelte-fluentui 1.0.0-rc01

package/dist/components/DataGrid.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">import { provideFluentDesignSystem, fluentDataGrid } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentDataGrid());
+let { class: className = "", style = "", id = undefined, ariaRowCount = undefined, generateHeader = undefined, role = "grid", onCloseColumnOptions = undefined, onCloseColumnResize = undefined, children = undefined, ...restProps } = $props();
+function handleCloseColumnOptions(e) {
+    onCloseColumnOptions?.(e);
+}
+function handleCloseColumnResize(e) {
+    onCloseColumnResize?.(e);
+}
+</script>
+
+<fluent-data-grid
+	class={className}
+	{style}
+	{id}
+	aria-rowcount={ariaRowCount}
+	generate-header={generateHeader}
+	role={role}
+	on:closecolumnoptions={handleCloseColumnOptions}
+	on:closecolumnresize={handleCloseColumnResize}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{/if}
+</fluent-data-grid>

package/dist/components/DataGrid.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    class?: string;
+    style?: string;
+    id?: string;
+    ariaRowCount?: number;
+    generateHeader?: "none" | "default" | "sticky";
+    role?: string;
+    onCloseColumnOptions?: (e: Event) => void;
+    onCloseColumnResize?: (e: Event) => void;
+    children?: SlotType;
+    [prop: string]: any;
+};
+declare const DataGrid: import("svelte").Component<Props, {}, "">;
+type DataGrid = ReturnType<typeof DataGrid>;
+export default DataGrid;

package/dist/components/DataGridCell.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">import { provideFluentDesignSystem, fluentDataGridCell } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentDataGridCell());
+let { class: className = "", style = "", gridColumn = undefined, cellType = "default", colIndex = undefined, role = undefined, tabIndex = undefined, title = undefined, ariaLabel = undefined, onKeyDown = undefined, onClick = undefined, onFocus = undefined, children = undefined, ...restProps } = $props();
+function handleKeyDown(e) {
+    onKeyDown?.(e);
+}
+function handleClick(e) {
+    onClick?.(e);
+}
+function handleFocus(e) {
+    onFocus?.(e);
+}
+</script>
+
+<fluent-data-grid-cell
+	class={className}
+	{style}
+	grid-column={gridColumn}
+	cell-type={cellType}
+	col-index={colIndex}
+	{role}
+	tabindex={tabIndex}
+	{title}
+	aria-label={ariaLabel}
+	on:keydown={handleKeyDown}
+	on:click={handleClick}
+	on:focus={handleFocus}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{/if}
+</fluent-data-grid-cell>

package/dist/components/DataGridCell.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    class?: string;
+    style?: string;
+    gridColumn?: number | string;
+    cellType?: "default" | "columnheader";
+    colIndex?: number;
+    role?: string;
+    tabIndex?: number;
+    title?: string;
+    ariaLabel?: string;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onClick?: (e: MouseEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    children?: SlotType;
+    [prop: string]: any;
+};
+declare const DataGridCell: import("svelte").Component<Props, {}, "">;
+type DataGridCell = ReturnType<typeof DataGridCell>;
+export default DataGridCell;

package/dist/components/DataGridRow.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">import { provideFluentDesignSystem, fluentDataGridRow } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentDataGridRow());
+let { class: className = "", style = "", rowIndex = undefined, rowType = undefined, onKeyDown = undefined, onClick = undefined, onDblClick = undefined, onFocus = undefined, children = undefined, ...restProps } = $props();
+function handleKeyDown(e) {
+    onKeyDown?.(e);
+}
+function handleClick(e) {
+    onClick?.(e);
+}
+function handleDblClick(e) {
+    onDblClick?.(e);
+}
+function handleFocus(e) {
+    onFocus?.(e);
+}
+</script>
+
+<fluent-data-grid-row
+	class={className}
+	{style}
+	data-row-index={rowIndex}
+	row-type={rowType}
+	role="row"
+	on:keydown={handleKeyDown}
+	on:click={handleClick}
+	on:dblclick={handleDblClick}
+	on:focus={handleFocus}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{/if}
+</fluent-data-grid-row>

package/dist/components/DataGridRow.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    class?: string;
+    style?: string;
+    rowIndex?: number;
+    rowType?: string;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onClick?: (e: MouseEvent) => void;
+    onDblClick?: (e: MouseEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    children?: SlotType;
+    [prop: string]: any;
+};
+declare const DataGridRow: import("svelte").Component<Props, {}, "">;
+type DataGridRow = ReturnType<typeof DataGridRow>;
+export default DataGridRow;

package/dist/components/Dialog.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import { fluentDialog, provideFluentDesignSystem } from "@fluentui/web-components";
+import Button from "./Button.svelte";
+provideFluentDesignSystem().register(fluentDialog());
+let { modal = undefined, visible = $bindable(undefined), trapFocus = undefined, ariaDescribedby = undefined, ariaLabelledby = undefined, ariaLabel = undefined, preventClose = false, dismissable = false, children = undefined, actions = undefined, dismissButtonText = undefined, ...restProps } = $props();
+let element = undefined;
+export function show() {
+    if (!element) {
+        return;
+    }
+    visible = true;
+    element.show();
+}
+export function hide() {
+    if (!element) {
+        return;
+    }
+    visible = false;
+    element.hide();
+}
+export function toggle() {
+    if (!element) {
+        return;
+    }
+    visible = !visible;
+    if (visible) {
+        element.show();
+    }
+    else {
+        element.hide();
+    }
+}
+</script>
+
+<fluent-dialog
+	bind:this={element}
+	{...restProps}
+	{modal}
+	hidden={!visible}
+	{trapFocus}
+	{ariaDescribedby}
+	{ariaLabelledby}
+	{ariaLabel}
+>
+	<div class="tw:flex tw:flex-col tw:h-full">
+		{#if !preventClose}
+			<div class="close-button-parent tw:self-end tw:flex-none tw:mt-1 tw:mr-1">
+				<!-- todo: proper close button -->
+				X
+			</div>
+		{/if}
+
+		<div class="tw:flex-1">
+			{@render children?.()}
+		</div>
+
+		{#if dismissable || actions}
+			<div class="tw:flex-none tw:flex tw:justify-between tw:flex-wrap gaptw:-2">
+				{#if dismissable}
+					<div class="close-button-parent tw:flex tw:justify-end tw:flex-none">
+						<Button onClick={hide}>
+							{#if dismissButtonText}
+								{@render dismissButtonText()}
+							{:else}
+								Dismiss
+							{/if}
+						</Button>
+					</div>
+				{/if}
+				{#if actions}
+					<div class="actions tw:flex-1 tw:flex tw:items-baseline tw:gap-1">
+						{@render actions()}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</fluent-dialog>
+
+<style>
+	@reference "tailwindcss";
+
+</style>
+

package/dist/components/Dialog.svelte.d.ts

@@ -0,0 +1,27 @@
+export type HTMLDialogElement = HTMLElement & {
+    show: VoidFunction;
+    hide: VoidFunction;
+    toggle: VoidFunction;
+};
+import type { SlotType } from "../types/index.js";
+type Props = {
+    modal?: boolean;
+    visible?: boolean;
+    preventClose?: boolean;
+    dismissable?: boolean;
+    trapFocus?: boolean;
+    ariaDescribedby?: string;
+    ariaLabelledby?: string;
+    ariaLabel?: string;
+    children?: SlotType;
+    actions?: SlotType;
+    dismissButtonText?: SlotType;
+    [prop: string]: any;
+};
+declare const Dialog: import("svelte").Component<Props, {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+}, "visible">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/Divider.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { fluentDivider, provideFluentDesignSystem } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentDivider());
+let {} = $props();
+</script>
+
+<fluent-divider>
+	<!-- todo: finish Divider -->
+</fluent-divider>
+

package/dist/components/Divider.svelte.d.ts

@@ -0,0 +1,4 @@
+type Props = {};
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/Listbox.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">import { fluentListbox, provideFluentDesignSystem } from "@fluentui/web-components";
+import { setContext, untrack } from "svelte";
+import { createSelectedOptions } from "../data/selected-options.svelte.js";
+provideFluentDesignSystem().register(fluentListbox());
+let { value = $bindable(), multi = undefined, disabled = undefined, readonly = undefined, children = undefined, ...restProps } = $props();
+let element = $state();
+const selectedOptions = createSelectedOptions(value, multi);
+setContext("selected-options", selectedOptions);
+$effect(() => {
+    const current = selectedOptions.value;
+    if (JSON.stringify(current) !== JSON.stringify(value)) {
+        value = current;
+    }
+});
+let selectedOptionsAttr = $derived(() => typeof value === "string" ? value : Array.isArray(value) ? value.join(",") : undefined);
+function handleOnChange(ev) {
+    const target = ev.target;
+    if (!target)
+        return;
+    const selected = Array.from(target.selectedOptions).map((opt) => opt.value);
+    value = multi ? selected : selected[0];
+}
+</script>
+
+<fluent-listbox
+	bind:this={element}
+	selected-options={selectedOptionsAttr}
+	{disabled}
+	multiple={multi}
+	{...restProps}
+	onchange={handleOnChange}
+>
+	{@render children?.()}
+</fluent-listbox>

package/dist/components/Listbox.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { SlotType } from "../types/index.js";
+type ValueType = string | string[] | null | undefined;
+type Props = {
+    value: ValueType;
+    multi?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    children?: SlotType;
+    [prop: string]: any;
+};
+declare const Listbox: import("svelte").Component<Props, {}, "value">;
+type Listbox = ReturnType<typeof Listbox>;
+export default Listbox;

package/dist/components/Menu.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { fluentMenu, fluentMenuItem, provideFluentDesignSystem } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentMenu(), fluentMenuItem());
+let {} = $props();
+</script>
+
+<fluent-menu>
+	<!-- todo: finish Menu -->
+</fluent-menu>
+

package/dist/components/Menu.svelte.d.ts

@@ -0,0 +1,4 @@
+type Props = {};
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/MenuItem.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { fluentMenuItem, provideFluentDesignSystem } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentMenuItem());
+let {} = $props();
+</script>
+
+<fluent-menu-item>
+	<!-- todo: finish MenuItem -->
+</fluent-menu-item>
+

package/dist/components/MenuItem.svelte.d.ts

@@ -0,0 +1,4 @@
+type Props = {};
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/NumberField.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">import { fluentNumberField, provideFluentDesignSystem } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentNumberField());
+let { value = $bindable(), placeholder, appearance, style, disabled, readonly, required, name, label, autofocus, step, min, max, hideStep, children, onInput, onChange, } = $props();
+step ??= 1;
+min ??= -Infinity;
+max ??= Infinity;
+let element;
+// Exposed methods
+export function stepUp() {
+    element?.stepUp();
+}
+export function stepDown() {
+    element?.stepDown();
+}
+export function checkValidity() {
+    return element?.checkValidity();
+}
+export function reportValidity() {
+    return element?.reportValidity();
+}
+export function setCustomValidity(message) {
+    element?.setCustomValidity(message);
+}
+function handleOnInput(event) {
+    const target = event.target;
+    value = target.value;
+    onInput?.(event);
+}
+function handleOnChange(event) {
+    onChange?.(event);
+}
+</script>
+
+<fluent-number-field
+	bind:this={element}
+	{placeholder}
+	{appearance}
+	{style}
+	{disabled}
+	{readonly}
+	{required}
+	{autofocus}
+	{step}
+	{min}
+	{max}
+	{hideStep}
+	{name}
+	value={value}
+	oninput={handleOnInput}
+	onchange={handleOnChange}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{label}
+	{/if}
+</fluent-number-field>

package/dist/components/NumberField.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    value?: string;
+    placeholder?: string;
+    appearance?: string;
+    style?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: string;
+    label?: string;
+    autofocus?: boolean;
+    step?: number;
+    min?: number;
+    max?: number;
+    hideStep?: boolean;
+    children?: SlotType;
+    onInput?: (ev: InputEvent) => void;
+    onChange?: (ev: Event) => void;
+};
+declare const NumberField: import("svelte").Component<Props, {
+    stepUp: () => void;
+    stepDown: () => void;
+    checkValidity: () => boolean;
+    reportValidity: () => boolean;
+    setCustomValidity: (message: string) => void;
+}, "value">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;

package/dist/components/Option.svelte

@@ -0,0 +1,28 @@
+	<script lang="ts">import { fluentOption, provideFluentDesignSystem } from "@fluentui/web-components";
+import { getContext } from "svelte";
+provideFluentDesignSystem().register(fluentOption());
+let { value, label = undefined, disabled = false, selected = undefined, onClick = undefined, children, ...restProps } = $props();
+const selectedValue = getContext("selected-options");
+function handleOnClick(ev) {
+    if (disabled) {
+        return;
+    }
+    console.log("Option on click", {
+        ev,
+        selectedValue: selectedValue.value
+    });
+    selectedValue.toggle(value);
+    onClick?.(ev);
+}
+</script>
+
+	<fluent-option
+		{value}
+		selected={selected !== undefined ? selected : selectedValue.value?.includes(value)}
+		data-option-label={label}
+		{disabled}
+		{...restProps}
+		onclick={handleOnClick}
+	>
+		{@render children()}
+	</fluent-option>

package/dist/components/Option.svelte.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    value: string;
+    label?: string;
+    style?: string;
+    onClick?: Function;
+    selected?: boolean;
+    disabled?: boolean;
+    children: any;
+    [prop: string]: any;
+};
+declare const Option: import("svelte").Component<Props, {}, "">;
+type Option = ReturnType<typeof Option>;
+export default Option;

package/dist/components/Paginator.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">import { fluentButton, provideFluentDesignSystem } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentButton());
+let { class: className = "", style = "", disabled = false, totalItemCount = undefined, currentPageIndex = 0, lastPageIndex = 0, canGoBack = true, canGoForwards = true, onFirst = undefined, onPrevious = undefined, onNext = undefined, onLast = undefined, summaryTemplate = undefined, paginationTextTemplate = undefined, ...restProps } = $props();
+</script>
+
+<div class="paginator {className}" {style} {...restProps}>
+	{#if totalItemCount !== undefined}
+		<div class="summary">
+			{#if summaryTemplate}
+				{@render summaryTemplate?.()}
+			{:else}
+				<strong>{totalItemCount}</strong> items
+			{/if}
+		</div>
+	{/if}
+
+	<nav role="navigation" class="paginator-nav">
+		<fluent-button
+			on:click={() => onFirst?.()}
+			disabled={!canGoBack || disabled}
+			title="Go to first page"
+			aria-label="Go to first page"
+		>
+			<span>&laquo;</span>
+		</fluent-button>
+
+		<fluent-button
+			on:click={() => onPrevious?.()}
+			disabled={!canGoBack || disabled}
+			title="Go to previous page"
+			aria-label="Go to previous page"
+		>
+			<span>&lsaquo;</span>
+		</fluent-button>
+
+		<div class="pagination-text">
+			{#if paginationTextTemplate}
+				{@render paginationTextTemplate?.()}
+			{:else}
+				Page <strong>{currentPageIndex + 1}</strong> of <strong>{lastPageIndex + 1}</strong>
+			{/if}
+		</div>
+
+		<fluent-button
+			on:click={() => onNext?.()}
+			disabled={!canGoForwards || disabled}
+			title="Go to next page"
+			aria-label="Go to next page"
+		>
+			<span>&rsaquo;</span>
+		</fluent-button>
+
+		<fluent-button
+			on:click={() => onLast?.()}
+			disabled={!canGoForwards || disabled}
+			title="Go to last page"
+			aria-label="Go to last page"
+		>
+			<span>&raquo;</span>
+		</fluent-button>
+	</nav>
+</div>
+
+<style>
+	.paginator {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.summary {
+		font-size: 0.9rem;
+	}
+
+	.paginator-nav {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.pagination-text {
+		margin: 0 0.5rem;
+	}
+
+</style>

package/dist/components/Paginator.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    class?: string;
+    style?: string;
+    disabled?: boolean;
+    totalItemCount?: number;
+    currentPageIndex?: number;
+    lastPageIndex?: number;
+    canGoBack?: boolean;
+    canGoForwards?: boolean;
+    onFirst?: () => void;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    onLast?: () => void;
+    summaryTemplate?: SlotType;
+    paginationTextTemplate?: SlotType;
+    [prop: string]: any;
+};
+declare const Paginator: import("svelte").Component<Props, {}, "">;
+type Paginator = ReturnType<typeof Paginator>;
+export default Paginator;

package/dist/components/PositioningRegion.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">let { title = undefined, children = undefined } = $props();
+export {};
+</script>
+
+<div class="positioning-region" {title}>
+	{@render children?.()}
+</div>

package/dist/components/PositioningRegion.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SlotType } from "../types/index.js";
+type Props = {
+    title?: string;
+    children?: SlotType;
+};
+declare const PositioningRegion: import("svelte").Component<Props, {}, "">;
+type PositioningRegion = ReturnType<typeof PositioningRegion>;
+export default PositioningRegion;

package/dist/components/Progress.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { fluentProgress, provideFluentDesignSystem } from "@fluentui/web-components";
+provideFluentDesignSystem().register(fluentProgress());
+let {} = $props();
+</script>
+
+<fluent-progress-bar>
+	<!-- todo: finish ProgressBar -->
+</fluent-progress-bar>
+

package/dist/components/Progress.svelte.d.ts

@@ -0,0 +1,4 @@
+type Props = {};
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;