fluent-svelte-extra 1.7.8 → 1.7.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Acrylic/AcrylicSurface.scss +6 -0
- package/Acrylic/AcrylicSurface.svelte +35 -0
- package/Acrylic/AcrylicSurface.svelte.d.ts +32 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/package.json +3 -1
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<script >import { get_current_component } from "svelte/internal";
|
|
2
|
+
import { createEventForwarder } from "../internal";
|
|
3
|
+
/** @restProps */
|
|
4
|
+
/** Specifies a custom class name for the surface. */
|
|
5
|
+
let className = "";
|
|
6
|
+
export { className as class };
|
|
7
|
+
/** Obtains a bound DOM reference to the surface or anchor element. */
|
|
8
|
+
export let element = null;
|
|
9
|
+
const forwardEvents = createEventForwarder(get_current_component());
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<!--
|
|
13
|
+
@component
|
|
14
|
+
A component that provides an acrylic surface for content.
|
|
15
|
+
- Usage:
|
|
16
|
+
```tsx
|
|
17
|
+
<div>
|
|
18
|
+
<AcrylicSurface></AcrylicSurface>
|
|
19
|
+
<div id="content">
|
|
20
|
+
<h1>Acrylic Surface</h1>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
```
|
|
24
|
+
-->
|
|
25
|
+
<svelte:element
|
|
26
|
+
this="div"
|
|
27
|
+
use:forwardEvents
|
|
28
|
+
bind:this={element}
|
|
29
|
+
class="acrylic-surface {className}"
|
|
30
|
+
{...$$restProps}
|
|
31
|
+
>
|
|
32
|
+
<slot />
|
|
33
|
+
</svelte:element>
|
|
34
|
+
|
|
35
|
+
<style >.acrylic-surface{backdrop-filter:var(--fds-acrylic-blur-factor);-webkit-backdrop-filter:var(--fds-acrylic-blur-factor);background:var(--fds-acrylic-background-default) var(--fds-acrylic-noise-asset-alpha);mix-blend-mode:luminosity}</style>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
class?: string;
|
|
6
|
+
element?: HTMLElement;
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
[evt: string]: CustomEvent<any>;
|
|
10
|
+
};
|
|
11
|
+
slots: {
|
|
12
|
+
default: {};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export declare type AcrylicSurfaceProps = typeof __propDef.props;
|
|
16
|
+
export declare type AcrylicSurfaceEvents = typeof __propDef.events;
|
|
17
|
+
export declare type AcrylicSurfaceSlots = typeof __propDef.slots;
|
|
18
|
+
/**
|
|
19
|
+
* A component that provides an acrylic surface for content.
|
|
20
|
+
* - Usage:
|
|
21
|
+
* ```tsx
|
|
22
|
+
* <div>
|
|
23
|
+
* <AcrylicSurface></AcrylicSurface>
|
|
24
|
+
* <div id="content">
|
|
25
|
+
* <h1>Acrylic Surface</h1>
|
|
26
|
+
* </div>
|
|
27
|
+
* </div>
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
export default class AcrylicSurface extends SvelteComponentTyped<AcrylicSurfaceProps, AcrylicSurfaceEvents, AcrylicSurfaceSlots> {
|
|
31
|
+
}
|
|
32
|
+
export {};
|
package/index.d.ts
CHANGED
|
@@ -34,3 +34,4 @@ export { default as Flipper } from "./Flipper/Flipper.svelte";
|
|
|
34
34
|
export { default as ExpandMenu } from "./ExpandMenu/ExpandMenu.svelte";
|
|
35
35
|
export { default as TextArea } from "./TextArea/TextArea.svelte";
|
|
36
36
|
export { default as GridViewItem } from "./GridView/GridViewItem.svelte";
|
|
37
|
+
export { default as AcrylicSurface } from "./Acrylic/AcrylicSurface.svelte";
|
package/index.js
CHANGED
|
@@ -34,3 +34,4 @@ export { default as Flipper } from "./Flipper/Flipper.svelte";
|
|
|
34
34
|
export { default as ExpandMenu } from "./ExpandMenu/ExpandMenu.svelte";
|
|
35
35
|
export { default as TextArea } from "./TextArea/TextArea.svelte";
|
|
36
36
|
export { default as GridViewItem } from "./GridView/GridViewItem.svelte";
|
|
37
|
+
export { default as AcrylicSurface } from "./Acrylic/AcrylicSurface.svelte";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fluent-svelte-extra",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.9",
|
|
4
4
|
"description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
|
|
5
5
|
"homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
|
|
6
6
|
"license": "MIT",
|
|
@@ -74,6 +74,8 @@
|
|
|
74
74
|
"type": "module",
|
|
75
75
|
"exports": {
|
|
76
76
|
"./package.json": "./package.json",
|
|
77
|
+
"./Acrylic/AcrylicSurface.scss": "./Acrylic/AcrylicSurface.scss",
|
|
78
|
+
"./Acrylic/AcrylicSurface.svelte": "./Acrylic/AcrylicSurface.svelte",
|
|
77
79
|
"./AutoSuggestBox/AutoSuggestBox.scss": "./AutoSuggestBox/AutoSuggestBox.scss",
|
|
78
80
|
"./AutoSuggestBox/AutoSuggestBox.svelte": "./AutoSuggestBox/AutoSuggestBox.svelte",
|
|
79
81
|
"./Button/Button.scss": "./Button/Button.scss",
|