fluent-svelte-extra 1.6.9 → 1.7.0

package/GridView/GridViewItem.scss

@@ -0,0 +1,36 @@
+.grid-view-item {
+	outline: transparent solid;
+	outline-offset: 2px;
+	outline-width: 2px;
+	position: relative;
+	border-radius: var(--fds-control-corner-radius);
+	min-height: 120px;
+	min-width: 120px;
+	transition: outline var(--fds-control-fast-duration);
+
+	&.selected {
+		outline: var(--fds-accent-default) solid;
+		outline-offset: 2px;
+		outline-width: 2px;
+		.inner-grid-item {
+			outline: var(--fds-control-solid-fill-default) solid 2px;
+		}
+	}
+
+	& > .item-checkbox {
+		position: absolute;
+		top: -4px;
+		right: 2px;
+		overflow: hidden;
+		z-index: 1;
+	}
+
+	& > .inner-grid-item {
+		overflow: hidden;
+		display: flex;
+		position: relative;
+		border-radius: var(--fds-control-corner-radius);
+		outline: transparent solid 2px;
+		transition: outline var(--fds-control-fast-duration);
+	}
+}

package/GridView/GridViewItem.svelte

@@ -0,0 +1,33 @@
+<script >import Checkbox from "../Checkbox/Checkbox.svelte";
+/** Indicates the selected state of the grid view item. */
+export let selected = false;
+export let singleSelect = false;
+/**
+ * Sets the selected state of the grid view item.
+ * @param {boolean} value - The new selected state.
+ */
+function setSelected(value) {
+    selected = value;
+}
+</script>
+
+<div class="grid-view-item" class:selected>
+	{#if !singleSelect}
+		<div class="item-checkbox">
+			<Checkbox bind:checked={selected}></Checkbox>
+		</div>
+	{/if}
+
+	<div
+		class="inner-grid-item"
+		on:click={() => {
+			if (singleSelect) {
+				setSelected(!selected);
+			}
+		}}
+	>
+		<slot {setSelected} />
+	</div>
+</div>
+
+<style >.grid-view-item{border-radius:var(--fds-control-corner-radius);min-height:120px;min-width:120px;outline:solid transparent;outline-offset:2px;outline-width:2px;position:relative;transition:outline var(--fds-control-fast-duration)}.grid-view-item.selected{outline:var(--fds-accent-default) solid;outline-offset:2px;outline-width:2px}.grid-view-item.selected .inner-grid-item{outline:var(--fds-control-solid-fill-default) solid 2px}.grid-view-item>.item-checkbox{overflow:hidden;position:absolute;right:2px;top:-4px;z-index:1}.grid-view-item>.inner-grid-item{border-radius:var(--fds-control-corner-radius);display:flex;outline:2px solid transparent;overflow:hidden;position:relative;transition:outline var(--fds-control-fast-duration)}</style>

package/GridView/GridViewItem.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Indicates the selected state of the grid view item. */ selected?: boolean;
+        singleSelect?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            setSelected: (value: boolean) => void;
+        };
+    };
+};
+export declare type GridViewItemProps = typeof __propDef.props;
+export declare type GridViewItemEvents = typeof __propDef.events;
+export declare type GridViewItemSlots = typeof __propDef.slots;
+export default class GridViewItem extends SvelteComponentTyped<GridViewItemProps, GridViewItemEvents, GridViewItemSlots> {
+}
+export {};

package/index.d.ts

@@ -33,3 +33,4 @@ export { default as RangeSlider } from "./RangeSlider/RangeSlider.svelte";
 export { default as Flipper } from "./Flipper/Flipper.svelte";
 export { default as ExpandMenu } from "./ExpandMenu/ExpandMenu.svelte";
 export { default as TextArea } from "./TextArea/TextArea.svelte";
+export { default as GridViewItem } from "./GridView/GridViewItem.svelte";

package/index.js

@@ -33,3 +33,4 @@ export { default as RangeSlider } from "./RangeSlider/RangeSlider.svelte";
 export { default as Flipper } from "./Flipper/Flipper.svelte";
 export { default as ExpandMenu } from "./ExpandMenu/ExpandMenu.svelte";
 export { default as TextArea } from "./TextArea/TextArea.svelte";
+export { default as GridViewItem } from "./GridView/GridViewItem.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluent-svelte-extra",
-  "version": "1.6.9",
+  "version": "1.7.0",
   "description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
   "homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
   "license": "MIT",
@@ -102,6 +102,8 @@
     "./Flyout/FlyoutSurface.svelte": "./Flyout/FlyoutSurface.svelte",
     "./Flyout/FlyoutWrapper.scss": "./Flyout/FlyoutWrapper.scss",
     "./Flyout/FlyoutWrapper.svelte": "./Flyout/FlyoutWrapper.svelte",
+    "./GridView/GridViewItem.scss": "./GridView/GridViewItem.scss",
+    "./GridView/GridViewItem.svelte": "./GridView/GridViewItem.svelte",
     "./IconButton/IconButton.scss": "./IconButton/IconButton.scss",
     "./IconButton/IconButton.svelte": "./IconButton/IconButton.svelte",
     ".": "./index.js",