fluent-svelte-extra 1.5.2 → 1.5.4
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/Flipper/Flipper.svelte +34 -20
- package/Flipper/Flipper.svelte.d.ts +7 -16
- package/RangeSlider/RangeSlider.svelte +34 -21
- package/package.json +1 -1
package/Flipper/Flipper.svelte
CHANGED
|
@@ -1,24 +1,38 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { createEventDispatcher } from "svelte"
|
|
3
|
-
|
|
4
|
-
let dispatch = createEventDispatcher()
|
|
5
|
-
export let direction;
|
|
1
|
+
<script >export let direction;
|
|
6
2
|
</script>
|
|
7
3
|
|
|
8
|
-
<div
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
4
|
+
<div class="flipper" on:click>
|
|
5
|
+
{#if direction === "right"}
|
|
6
|
+
<svg
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
9
|
+
width="16px"
|
|
10
|
+
height="16px"
|
|
11
|
+
viewBox="0 0 16 16"
|
|
12
|
+
version="1.1"
|
|
13
|
+
>
|
|
14
|
+
<g id="surface1">
|
|
15
|
+
<path
|
|
16
|
+
d="M 6 11.933594 C 6 12.644531 6.84375 13.03125 7.378906 12.558594 L 11.589844 8.878906 C 11.84375 8.65625 11.988281 8.339844 11.988281 8 C 11.988281 7.660156 11.84375 7.34375 11.589844 7.121094 L 7.378906 3.441406 C 6.84375 2.96875 6 3.355469 6 4.066406 Z M 6 11.933594 "
|
|
17
|
+
/>
|
|
18
|
+
</g>
|
|
19
|
+
</svg>
|
|
20
|
+
{:else if direction === "left"}
|
|
21
|
+
<svg
|
|
22
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
23
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
24
|
+
width="16px"
|
|
25
|
+
height="16px"
|
|
26
|
+
viewBox="0 0 16 16"
|
|
27
|
+
version="1.1"
|
|
28
|
+
>
|
|
29
|
+
<g id="surface1">
|
|
30
|
+
<path
|
|
31
|
+
d="M 10 11.933594 C 10 12.648438 9.15625 13.03125 8.617188 12.558594 L 4.410156 8.878906 C 4.15625 8.65625 4.011719 8.335938 4.011719 8 C 4.011719 7.664062 4.15625 7.34375 4.410156 7.121094 L 8.617188 3.441406 C 9.15625 2.96875 10 3.351562 10 4.066406 Z M 10 11.933594 "
|
|
32
|
+
/>
|
|
33
|
+
</g>
|
|
34
|
+
</svg>
|
|
35
|
+
{/if}
|
|
22
36
|
</div>
|
|
23
37
|
|
|
24
|
-
<style
|
|
38
|
+
<style>.flipper{fill:currentColor;align-items:center;-webkit-backdrop-filter:blur(30px) saturate(125%);backdrop-filter:blur(30px) saturate(125%);background-color:var(--fds-control-fill-default);border:1px solid var(--fds-control-border-default);border-radius:3px;display:flex;height:35px;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.flipper>svg{transform:scale(.9)}.flipper:hover{fill:currentColor}.flipper:hover>svg{transform:scale(1)}.flipper:active>svg{transform:scale(.8)}</style>
|
|
@@ -1,27 +1,18 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} FlipperProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} FlipperEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} FlipperSlots */
|
|
4
|
-
export default class Flipper extends SvelteComponentTyped<{
|
|
5
|
-
direction: any;
|
|
6
|
-
}, {
|
|
7
|
-
click: CustomEvent<any>;
|
|
8
|
-
} & {
|
|
9
|
-
[evt: string]: CustomEvent<any>;
|
|
10
|
-
}, {}> {
|
|
11
|
-
}
|
|
12
|
-
export type FlipperProps = typeof __propDef.props;
|
|
13
|
-
export type FlipperEvents = typeof __propDef.events;
|
|
14
|
-
export type FlipperSlots = typeof __propDef.slots;
|
|
15
1
|
import { SvelteComponentTyped } from "svelte";
|
|
16
2
|
declare const __propDef: {
|
|
17
3
|
props: {
|
|
18
|
-
direction:
|
|
4
|
+
direction: "left" | "right";
|
|
19
5
|
};
|
|
20
6
|
events: {
|
|
21
|
-
click:
|
|
7
|
+
click: MouseEvent;
|
|
22
8
|
} & {
|
|
23
9
|
[evt: string]: CustomEvent<any>;
|
|
24
10
|
};
|
|
25
11
|
slots: {};
|
|
26
12
|
};
|
|
13
|
+
export declare type FlipperProps = typeof __propDef.props;
|
|
14
|
+
export declare type FlipperEvents = typeof __propDef.events;
|
|
15
|
+
export declare type FlipperSlots = typeof __propDef.slots;
|
|
16
|
+
export default class Flipper extends SvelteComponentTyped<FlipperProps, FlipperEvents, FlipperSlots> {
|
|
17
|
+
}
|
|
27
18
|
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<script >import { createEventDispatcher } from
|
|
1
|
+
<script >import { createEventDispatcher } from "svelte";
|
|
2
2
|
const dispatch = createEventDispatcher();
|
|
3
|
-
import Slider from
|
|
4
|
-
import { TextBlock } from
|
|
3
|
+
import Slider from "@bulatdashiev/svelte-slider";
|
|
4
|
+
import { TextBlock } from "fluent-svelte";
|
|
5
5
|
export let min = 1;
|
|
6
6
|
export let max = 100;
|
|
7
7
|
export let step = 1;
|
|
8
|
-
let valuesText = min +
|
|
8
|
+
let valuesText = min + "," + max;
|
|
9
9
|
export let values = [min, max];
|
|
10
10
|
function escapeFloatingPoint(number) {
|
|
11
11
|
return Number(parseFloat(number).toPrecision(12));
|
|
@@ -16,29 +16,42 @@ $: {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
function handleChange(event) {
|
|
19
|
-
valuesText =
|
|
20
|
-
|
|
19
|
+
valuesText =
|
|
20
|
+
escapeFloatingPoint(event.detail[0]) + "," + escapeFloatingPoint(event.detail[1]);
|
|
21
|
+
dispatch("change", event.detail);
|
|
21
22
|
}
|
|
22
23
|
function handleMouseDown() {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
["touchend", "touchcancel", "mouseup"].forEach(ev => {
|
|
25
|
+
document.addEventListener(ev, () => {
|
|
26
|
+
dispatch("finish", valuesText.toString());
|
|
27
|
+
}, {
|
|
28
|
+
once: true
|
|
29
|
+
});
|
|
27
30
|
});
|
|
28
31
|
}
|
|
29
32
|
</script>
|
|
30
33
|
|
|
31
34
|
<div id="sliderHolder">
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
<div id="sliderComp" {...$$restProps}>
|
|
36
|
+
<Slider bind:value={values} {min} {max} {step} range order on:input={handleChange}>
|
|
37
|
+
<div
|
|
38
|
+
slot="left"
|
|
39
|
+
class="handle"
|
|
40
|
+
on:mousedown={handleMouseDown}
|
|
41
|
+
on:touchstart={handleMouseDown}
|
|
42
|
+
/>
|
|
43
|
+
<div
|
|
44
|
+
slot="right"
|
|
45
|
+
class="handle"
|
|
46
|
+
on:mousedown={handleMouseDown}
|
|
47
|
+
on:touchstart={handleMouseDown}
|
|
48
|
+
/>
|
|
49
|
+
</Slider>
|
|
50
|
+
<div id="vals">
|
|
51
|
+
<TextBlock>{valuesText.split(",")[0]}</TextBlock>
|
|
52
|
+
<TextBlock>{valuesText.split(",")[1]}</TextBlock>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
42
55
|
</div>
|
|
43
56
|
|
|
44
|
-
<style>#vals{justify-content:space-between}#vals,.handle{align-items:center;display:flex}.handle{background-color:var(--fds-control-solid-fill-default);block-size:20px;border-radius:100%;box-shadow:0 0 0 1px var(--fds-control-stroke-default);inline-size:20px;justify-content:center;z-index:10}.handle:before{background-color:var(--fds-accent-default);block-size:12px;border-radius:100%;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.handle:hover:before{transform:scale(1.167)}.handle:active:before{background-color:var(--fds-accent-tertiary);transform:scale(.833)}#sliderHolder :global(.thumb-content:before){background:none!important}#sliderHolder :global(.track){background:var(--fds-control-strong-fill-default)!important}#sliderHolder :global(.progress){background:var(--fds-accent-text-primary)!important}</style>
|
|
57
|
+
<style>#vals{justify-content:space-between}#vals,.handle{align-items:center;display:flex}.handle{background-color:var(--fds-control-solid-fill-default);block-size:20px;border-radius:100%;box-shadow:0 0 0 1px var(--fds-control-stroke-default);inline-size:20px;justify-content:center;z-index:10}.handle:before{background-color:var(--fds-accent-default);block-size:12px;border-radius:100%;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.handle:hover:before{transform:scale(1.167)}.handle:active:before{background-color:var(--fds-accent-tertiary);transform:scale(.833)}#sliderHolder :global(.thumb-content:before){background:none!important}#sliderHolder :global(.track){background:var(--fds-control-strong-fill-default)!important}#sliderHolder :global(.progress){background:var(--fds-accent-text-primary)!important}</style>
|
package/package.json
CHANGED