nuance-ui 0.2.17 → 0.2.18
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/dist/module.json +1 -1
- package/dist/runtime/components/alert.vue +1 -1
- package/dist/runtime/components/app-shell/app-shell-main.vue +1 -1
- package/dist/runtime/components/app-shell/app-shell.vue +1 -1
- package/dist/runtime/components/badge.d.vue.ts +4 -1
- package/dist/runtime/components/badge.vue +5 -2
- package/dist/runtime/components/badge.vue.d.ts +4 -1
- package/dist/runtime/components/button/button.module.css +1 -1
- package/dist/runtime/components/floating-indicator.d.vue.ts +20 -0
- package/dist/runtime/components/floating-indicator.vue +50 -0
- package/dist/runtime/components/floating-indicator.vue.d.ts +20 -0
- package/dist/runtime/components/index.d.ts +2 -0
- package/dist/runtime/components/link/lib.d.ts +2 -2
- package/dist/runtime/components/nav-link/nav-link.vue +1 -1
- package/dist/runtime/components/paper.vue +1 -1
- package/dist/runtime/components/roving-focus/lib/context.d.ts +2 -2
- package/dist/runtime/components/segmented-control.d.vue.ts +46 -0
- package/dist/runtime/components/segmented-control.vue +130 -0
- package/dist/runtime/components/segmented-control.vue.d.ts +46 -0
- package/dist/runtime/components/switch/switch.vue +1 -1
- package/dist/runtime/components/table/ui/table.vue +1 -1
- package/dist/runtime/components/theme-toggle.d.vue.ts +14 -0
- package/dist/runtime/components/theme-toggle.vue +27 -0
- package/dist/runtime/components/theme-toggle.vue.d.ts +14 -0
- package/dist/runtime/composables/index.d.ts +1 -0
- package/dist/runtime/composables/index.js +1 -0
- package/dist/runtime/composables/use-floating-indicator.d.ts +11 -0
- package/dist/runtime/composables/use-floating-indicator.js +30 -0
- package/dist/runtime/form/segmented-control-field.d.vue.ts +7 -0
- package/dist/runtime/form/segmented-control-field.vue +45 -0
- package/dist/runtime/form/segmented-control-field.vue.d.ts +7 -0
- package/dist/runtime/styles/colors.css +1 -1
- package/dist/runtime/styles/const.css +1 -1
- package/dist/runtime/styles/dark-theme.css +1 -1
- package/dist/runtime/types/theme.d.ts +3 -3
- package/dist/runtime/utils/color/get-color-var.js +1 -2
- package/dist/runtime/utils/color/parse-theme-color.js +1 -2
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -88,5 +88,5 @@ const style = useVarsResolver((theme) => {
|
|
|
88
88
|
</template>
|
|
89
89
|
|
|
90
90
|
<style module>
|
|
91
|
-
.root{--alert-radius:var(--radius-default);--alert-bg:var(--color-primary-light);--alert-bd:1px solid transparent;--alert-color:var(--color-primary-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);gap:var(--spacing-
|
|
91
|
+
.root{--alert-radius:var(--radius-default);--alert-bg:var(--color-primary-light);--alert-bd:1px solid transparent;--alert-color:var(--color-primary-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);gap:var(--spacing-sm);overflow:hidden;padding:var(--spacing-sm);position:relative}.body,.root{display:flex}.body{flex:1;flex-direction:column;gap:var(--spacing-xs)}.title{align-items:center;display:flex;font-size:var(--font-size-sm);font-weight:700;justify-content:space-between}.label{display:block;overflow:hidden;text-overflow:ellipsis}.icon{align-items:center;display:flex;height:1.25rem;justify-content:flex-start;line-height:1;margin-top:1px;width:1.25rem}.message{font-size:var(--font-size-sm);overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .message{color:var(--color-black)}:where([data-mantine-color-scheme=dark]) .message{color:var(--color-white)}.message:where([data-variant=filled]){color:var(--alert-color)}.message:where([data-variant=white]){color:var(--color-black)}.closeButton{color:var(--alert-color);height:20px;width:20px}
|
|
92
92
|
</style>
|
|
@@ -13,5 +13,5 @@ const { mod } = defineProps({
|
|
|
13
13
|
</template>
|
|
14
14
|
|
|
15
15
|
<style module>
|
|
16
|
-
.root{
|
|
16
|
+
.root{min-height:100dvh;padding-bottom:calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));padding-inline-end:calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));padding-top:calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));padding-inline-start:calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));transition-duration:var(--app-shell-transition-duration);transition-property:padding;transition-timing-function:var(--app-shell-transition-timing-function)}
|
|
17
17
|
</style>
|
|
@@ -51,5 +51,5 @@ const style = useVarsResolver(() => ({
|
|
|
51
51
|
</template>
|
|
52
52
|
|
|
53
53
|
<style module>
|
|
54
|
-
.root{--app-shell-padding:var(--spacing-sm);--app-shell-element-padding:.25rem;--app-shell-transition-duration:200ms;--app-shell-transition-timing-function:ease;--app-shell-navbar-width:rem(56px);--app-shell-navbar-offset:var(--app-shell-navbar-width);--app-shell-navbar-transform:none;--app-shell-aside-width:rem(56px);--app-shell-aside-offset:var(--app-shell-aside-width);--app-shell-aside-transform:none;--app-shell-header-height:rem(56px);--app-shell-header-offset:var(--app-shell-header-height);--app-shell-header-transform:none;--app-shell-footer-height:rem(100px);--app-shell-footer-offset:var(--app-shell-footer-height);--app-shell-footer-transform:none;@mixin where-light{--app-shell-border-color:var(--color-gray-3)}@mixin where-dark{--app-shell-border-color:var(--color-
|
|
54
|
+
.root{--app-shell-padding:var(--spacing-sm);--app-shell-element-padding:.25rem;--app-shell-transition-duration:200ms;--app-shell-transition-timing-function:ease;--app-shell-navbar-width:rem(56px);--app-shell-navbar-offset:var(--app-shell-navbar-width);--app-shell-navbar-transform:none;--app-shell-aside-width:rem(56px);--app-shell-aside-offset:var(--app-shell-aside-width);--app-shell-aside-transform:none;--app-shell-header-height:rem(56px);--app-shell-header-offset:var(--app-shell-header-height);--app-shell-header-transform:none;--app-shell-footer-height:rem(100px);--app-shell-footer-offset:var(--app-shell-footer-height);--app-shell-footer-transform:none;@mixin where-light{--app-shell-border-color:var(--color-gray-3)}@mixin where-dark{--app-shell-border-color:var(--color-dark-8)}}
|
|
55
55
|
</style>
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { AnyString, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
|
|
2
|
+
import type { CSSProperties } from 'vue';
|
|
2
3
|
import type { BoxProps } from './box.vue.js';
|
|
3
4
|
export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'default' | 'gradient';
|
|
4
5
|
export interface BadgeVars {
|
|
5
|
-
root: '--badge-height' | '--badge-padding-x' | '--badge-fz' | '--badge-radius' | '--badge-bg' | '--badge-color' | '--badge-bd' | '--badge-dot-color';
|
|
6
|
+
root: '--badge-height' | '--badge-padding-x' | '--badge-fz' | '--badge-fw' | '--badge-radius' | '--badge-bg' | '--badge-color' | '--badge-bd' | '--badge-dot-color';
|
|
6
7
|
}
|
|
7
8
|
export interface BadgeProps extends BoxProps {
|
|
8
9
|
/**
|
|
@@ -30,6 +31,8 @@ export interface BadgeProps extends BoxProps {
|
|
|
30
31
|
icon?: string;
|
|
31
32
|
/** Visual variant */
|
|
32
33
|
variant?: BadgeVariant;
|
|
34
|
+
/** Font weight */
|
|
35
|
+
fw?: CSSProperties['font-weight'];
|
|
33
36
|
}
|
|
34
37
|
declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {};
|
|
35
38
|
type __VLS_Slots = {} & {
|
|
@@ -9,7 +9,8 @@ const {
|
|
|
9
9
|
color,
|
|
10
10
|
fullWidth = false,
|
|
11
11
|
circle,
|
|
12
|
-
icon
|
|
12
|
+
icon,
|
|
13
|
+
fw
|
|
13
14
|
} = defineProps({
|
|
14
15
|
size: { type: [String, Object], required: false },
|
|
15
16
|
circle: { type: Boolean, required: false },
|
|
@@ -19,6 +20,7 @@ const {
|
|
|
19
20
|
fullWidth: { type: Boolean, required: false },
|
|
20
21
|
icon: { type: String, required: false },
|
|
21
22
|
variant: { type: String, required: false },
|
|
23
|
+
fw: { type: void 0, required: false },
|
|
22
24
|
is: { type: null, required: false },
|
|
23
25
|
mod: { type: [Object, Array, null], required: false }
|
|
24
26
|
});
|
|
@@ -33,6 +35,7 @@ const style = useVarsResolver((theme) => {
|
|
|
33
35
|
"--badge-height": getSize(size, "badge-height"),
|
|
34
36
|
"--badge-padding-x": getSize(size, "badge-padding-x"),
|
|
35
37
|
"--badge-fz": getSize(size, "badge-fz"),
|
|
38
|
+
"--badge-fw": fw,
|
|
36
39
|
"--badge-radius": circle || radius === void 0 ? void 0 : getRadius(radius),
|
|
37
40
|
"--badge-bg": color || variant ? background : void 0,
|
|
38
41
|
"--badge-color": color || variant ? text : void 0,
|
|
@@ -77,5 +80,5 @@ const style = useVarsResolver((theme) => {
|
|
|
77
80
|
</template>
|
|
78
81
|
|
|
79
82
|
<style module>
|
|
80
|
-
.root{--badge-height-xs:rem(16px);--badge-height-sm:rem(18px);--badge-height-md:rem(20px);--badge-height-lg:rem(26px);--badge-height-xl:rem(32px);--badge-fz-xs:rem(8px);--badge-fz-sm:rem(10px);--badge-fz-md:rem(12px);--badge-fz-lg:rem(14px);--badge-fz-xl:rem(16px);--badge-padding-x-xs:rem(6px);--badge-padding-x-sm:rem(8px);--badge-padding-x-md:rem(10px);--badge-padding-x-lg:rem(12px);--badge-padding-x-xl:rem(16px);--badge-height:var(--badge-height-md);--badge-fz:var(--badge-fz-md);--badge-padding-x:var(--badge-padding-x-md);--badge-radius:100%;--badge-lh:calc(var(--badge-height) - rem(2px));--badge-color:var(--color-white);--badge-bg:var(--color-primary-filled);--badge-border-width:1px;--badge-bd:var(--badge-border-width) solid transparent;align-items:center;background:var(--badge-bg);border:var(--badge-bd);border-radius:var(--badge-radius);color:var(--badge-color);cursor:default;display:inline-grid;font-size:var(--badge-fz);font-weight:
|
|
83
|
+
.root{--badge-height-xs:rem(16px);--badge-height-sm:rem(18px);--badge-height-md:rem(20px);--badge-height-lg:rem(26px);--badge-height-xl:rem(32px);--badge-fz-xs:rem(8px);--badge-fz-sm:rem(10px);--badge-fz-md:rem(12px);--badge-fz-lg:rem(14px);--badge-fz-xl:rem(16px);--badge-fw:400;--badge-padding-x-xs:rem(6px);--badge-padding-x-sm:rem(8px);--badge-padding-x-md:rem(10px);--badge-padding-x-lg:rem(12px);--badge-padding-x-xl:rem(16px);--badge-height:var(--badge-height-md);--badge-fz:var(--badge-fz-md);--badge-padding-x:var(--badge-padding-x-md);--badge-radius:100%;--badge-lh:calc(var(--badge-height) - rem(2px));--badge-color:var(--color-white);--badge-bg:var(--color-primary-filled);--badge-border-width:1px;--badge-bd:var(--badge-border-width) solid transparent;align-items:center;background:var(--badge-bg);border:var(--badge-bd);border-radius:var(--badge-radius);color:var(--badge-color);cursor:default;display:inline-grid;font-size:var(--badge-fz);font-weight:var(--badge-fw);height:var(--badge-height);justify-content:center;letter-spacing:.25px;line-height:var(--badge-lh);overflow:hidden;padding:0 var(--badge-padding-x);text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:-moz-fit-content;width:fit-content;-webkit-tap-highlight-color:transparent}.root:where([data-with-left-section],[data-variant=dot]){grid-template-columns:auto 1fr;padding-left:calc(var(--badge-padding-x) - var(--spacing-xs)/2)}.root:where([data-with-right-section]){grid-template-columns:1fr auto;padding-right:calc(var(--badge-padding-x) - var(--spacing-xs)/2)}.root:where([data-with-left-section][data-with-right-section],[data-variant=dot][data-with-right-section]){grid-template-columns:auto 1fr auto;padding:0 calc(var(--spacing-xs)/2)}.root:where([data-block]){display:flex;width:100%}.root:where([data-circle]){display:flex;padding-inline:2px;width:var(--badge-height)}.root:where([data-variant=dot]){@mixin where-light{--badge-color:var(--color-black)}@mixin where-dark{--badge-color:var(--color-white)}}.dot{--badge-dot-size:calc(var(--badge-height)/2);background-color:var(--badge-dot-color,var(--badge-color));border-radius:var(--badge-dot-size);display:block;height:var(--badge-dot-size);margin-inline-end:calc(var(--badge-dot-size)/2);width:var(--badge-dot-size)}.label{cursor:inherit;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.section{--badge-section-margin:calc(var(--spacing-xs)/2);align-items:center;display:inline-flex;justify-content:center;max-height:calc(var(--badge-height) - var(--badge-border-width)*2)}.section:where([data-position=left]){margin-inline-end:var(--badge-section-margin)}.section:where([data-position=right]){margin-inline-start:var(--badge-section-margin)}
|
|
81
84
|
</style>
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { AnyString, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
|
|
2
|
+
import type { CSSProperties } from 'vue';
|
|
2
3
|
import type { BoxProps } from './box.vue.js';
|
|
3
4
|
export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'default' | 'gradient';
|
|
4
5
|
export interface BadgeVars {
|
|
5
|
-
root: '--badge-height' | '--badge-padding-x' | '--badge-fz' | '--badge-radius' | '--badge-bg' | '--badge-color' | '--badge-bd' | '--badge-dot-color';
|
|
6
|
+
root: '--badge-height' | '--badge-padding-x' | '--badge-fz' | '--badge-fw' | '--badge-radius' | '--badge-bg' | '--badge-color' | '--badge-bd' | '--badge-dot-color';
|
|
6
7
|
}
|
|
7
8
|
export interface BadgeProps extends BoxProps {
|
|
8
9
|
/**
|
|
@@ -30,6 +31,8 @@ export interface BadgeProps extends BoxProps {
|
|
|
30
31
|
icon?: string;
|
|
31
32
|
/** Visual variant */
|
|
32
33
|
variant?: BadgeVariant;
|
|
34
|
+
/** Font weight */
|
|
35
|
+
fw?: CSSProperties['font-weight'];
|
|
33
36
|
}
|
|
34
37
|
declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {};
|
|
35
38
|
type __VLS_Slots = {} & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--button-justify:center;--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--button-spacing);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;justify-content:var(--button-justify);opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--group-border-width:1px;display:flex}.group>:where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal]>:where(*):not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--group-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--group-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--group-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical]>:where(*):not(:only-child):first-child{border-bottom-width:calc(var(--group-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical]>:where(*):not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--group-border-width)/2)}.group[data-orientation=vertical]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--group-border-width)/2);border-radius:0;border-top-width:calc(var(--group-border-width)/2)}
|
|
1
|
+
.root{--button-height-xs:rem(30px);--button-height-sm:rem(36px);--button-height-md:rem(42px);--button-height-lg:rem(50px);--button-height-xl:rem(60px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-sm);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--button-justify:center;--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled-text);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--button-spacing);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;justify-content:var(--button-justify);opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--group-border-width:1px;display:flex}.group>:where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal]>:where(*):not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--group-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--group-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--group-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical]>:where(*):not(:only-child):first-child{border-bottom-width:calc(var(--group-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical]>:where(*):not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--group-border-width)/2)}.group[data-orientation=vertical]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--group-border-width)/2);border-radius:0;border-top-width:calc(var(--group-border-width)/2)}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { BoxProps } from './box.vue.js';
|
|
2
|
+
export interface FloatingIndicatorProps extends BoxProps {
|
|
3
|
+
/**
|
|
4
|
+
* Target element over which the indicator is displayed.
|
|
5
|
+
* The indicator will be positioned to match the target's size and position.
|
|
6
|
+
*/
|
|
7
|
+
target: HTMLElement | null | undefined;
|
|
8
|
+
/**
|
|
9
|
+
* Parent container element that must have `position: relative`.
|
|
10
|
+
* The indicator's position is calculated relative to this element.
|
|
11
|
+
*/
|
|
12
|
+
parent: HTMLElement | null | undefined;
|
|
13
|
+
/** Component orientation */
|
|
14
|
+
orientation?: 'horizontal' | 'vertical';
|
|
15
|
+
/** Transition duration in ms or CSS time value @default `150` */
|
|
16
|
+
transitionDuration?: number | string;
|
|
17
|
+
}
|
|
18
|
+
declare const __VLS_export: import("vue").DefineComponent<FloatingIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FloatingIndicatorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
19
|
+
declare const _default: typeof __VLS_export;
|
|
20
|
+
export default _default;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useFloatingIndicator, useVarsResolver } from "@nui/composables";
|
|
3
|
+
import { shallowRef, watch } from "vue";
|
|
4
|
+
import Box from "./box.vue";
|
|
5
|
+
const {
|
|
6
|
+
is = "span",
|
|
7
|
+
mod,
|
|
8
|
+
target,
|
|
9
|
+
parent,
|
|
10
|
+
orientation = "horizontal",
|
|
11
|
+
transitionDuration: duration
|
|
12
|
+
} = defineProps({
|
|
13
|
+
target: { type: null, required: true },
|
|
14
|
+
parent: { type: null, required: true },
|
|
15
|
+
orientation: { type: String, required: false },
|
|
16
|
+
transitionDuration: { type: [Number, String], required: false },
|
|
17
|
+
is: { type: null, required: false },
|
|
18
|
+
mod: { type: [Object, Array, null], required: false }
|
|
19
|
+
});
|
|
20
|
+
const _target = shallowRef(target ?? null);
|
|
21
|
+
const _parent = shallowRef(parent ?? null);
|
|
22
|
+
watch(() => target, (v) => _target.value = v ?? null);
|
|
23
|
+
watch(() => parent, (v) => _parent.value = v ?? null);
|
|
24
|
+
const { size, position } = useFloatingIndicator({
|
|
25
|
+
target: _target,
|
|
26
|
+
parent: _parent,
|
|
27
|
+
orientation
|
|
28
|
+
});
|
|
29
|
+
const style = useVarsResolver(() => ({
|
|
30
|
+
root: {
|
|
31
|
+
"--fi-duration": duration === void 0 ? void 0 : duration === "number" ? `${duration}ms` : duration,
|
|
32
|
+
"--fi-size": `${size.value ?? 0}px`,
|
|
33
|
+
"--fi-position": `${position.value ?? 0}px`
|
|
34
|
+
}
|
|
35
|
+
}));
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<Box
|
|
40
|
+
:is
|
|
41
|
+
v-if='target && parent && size !== null'
|
|
42
|
+
:style='style.root'
|
|
43
|
+
:class='$style.root'
|
|
44
|
+
:mod='[{ orientation }, mod]'
|
|
45
|
+
/>
|
|
46
|
+
</template>
|
|
47
|
+
|
|
48
|
+
<style module>
|
|
49
|
+
.root{position:absolute;transition-duration:var(--fi-duration,.15s);transition-property:width,height,transform;transition-timing-function:ease;z-index:0}.root:where([data-orientation=horizontal]){bottom:0;left:0;top:0;transform:translateX(var(--fi-position));width:var(--fi-size)}.root:where([data-orientation=vertical]){height:var(--fi-size);left:0;right:0;top:0;transform:translateY(var(--fi-position))}
|
|
50
|
+
</style>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { BoxProps } from './box.vue.js';
|
|
2
|
+
export interface FloatingIndicatorProps extends BoxProps {
|
|
3
|
+
/**
|
|
4
|
+
* Target element over which the indicator is displayed.
|
|
5
|
+
* The indicator will be positioned to match the target's size and position.
|
|
6
|
+
*/
|
|
7
|
+
target: HTMLElement | null | undefined;
|
|
8
|
+
/**
|
|
9
|
+
* Parent container element that must have `position: relative`.
|
|
10
|
+
* The indicator's position is calculated relative to this element.
|
|
11
|
+
*/
|
|
12
|
+
parent: HTMLElement | null | undefined;
|
|
13
|
+
/** Component orientation */
|
|
14
|
+
orientation?: 'horizontal' | 'vertical';
|
|
15
|
+
/** Transition duration in ms or CSS time value @default `150` */
|
|
16
|
+
transitionDuration?: number | string;
|
|
17
|
+
}
|
|
18
|
+
declare const __VLS_export: import("vue").DefineComponent<FloatingIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FloatingIndicatorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
19
|
+
declare const _default: typeof __VLS_export;
|
|
20
|
+
export default _default;
|
|
@@ -16,6 +16,7 @@ export type * from './date-time-picker.vue';
|
|
|
16
16
|
export * from './dialog/index.js';
|
|
17
17
|
export * from './drawer/index.js';
|
|
18
18
|
export * from './files/index.js';
|
|
19
|
+
export type * from './floating-indicator.vue';
|
|
19
20
|
export * from './input/index.js';
|
|
20
21
|
export * from './link/index.js';
|
|
21
22
|
export * from './loader/index.js';
|
|
@@ -25,6 +26,7 @@ export type * from './paper.vue';
|
|
|
25
26
|
export * from './popover/index.js';
|
|
26
27
|
export * from './progress/index.js';
|
|
27
28
|
export * from './roving-focus/index.js';
|
|
29
|
+
export type * from './segmented-control.vue';
|
|
28
30
|
export type * from './select.vue';
|
|
29
31
|
export * from './switch/index.js';
|
|
30
32
|
export * from './table/index.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { NuxtLinkProps } from '#app';
|
|
2
2
|
export declare function pickLinkProps<T extends NuxtLinkProps>(props: T): {
|
|
3
|
-
link: Pick<T, "
|
|
4
|
-
rest: Omit<T, "
|
|
3
|
+
link: Pick<T, "target" | "to" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "replace" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
|
|
4
|
+
rest: Omit<T, "target" | "to" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "replace" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
|
|
5
5
|
};
|
|
@@ -69,7 +69,7 @@ const style = useVarsResolver((theme) => {
|
|
|
69
69
|
:href
|
|
70
70
|
:style='style.root'
|
|
71
71
|
:class='$style.root'
|
|
72
|
-
:mod='[{ active: active
|
|
72
|
+
:mod='[{ active: active || isActive, disabled }, mod]'
|
|
73
73
|
:aria-current="isActive ? 'page' : void 0"
|
|
74
74
|
:rel='"rel" in linkProps ? linkProps?.rel : void 0'
|
|
75
75
|
:target='"target" in linkProps ? linkProps?.target : void 0'
|
|
@@ -22,5 +22,5 @@ const style = computed(() => ({
|
|
|
22
22
|
</template>
|
|
23
23
|
|
|
24
24
|
<style module>
|
|
25
|
-
.root{--paper-radius:var(--radius-default);--paper-shadow:none;background-color:var(--color-body);border-radius:var(--paper-radius);box-shadow:var(--paper-shadow);display:block;outline:0;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.root:where([data-with-border]){border:rem(1px) solid var(--paper-border-color)}.root{@mixin light{--paper-border-color:var(--color-gray-3)}}.root{@mixin dark{--paper-border-color:var(--color-
|
|
25
|
+
.root{--paper-radius:var(--radius-default);--paper-shadow:none;background-color:var(--color-body);border-radius:var(--paper-radius);box-shadow:var(--paper-shadow);display:block;outline:0;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.root:where([data-with-border]){border:rem(1px) solid var(--paper-border-color)}.root{@mixin light{--paper-border-color:var(--color-gray-3)}}.root{@mixin dark{--paper-border-color:var(--color-dark-7)}}
|
|
26
26
|
</style>
|
|
@@ -20,7 +20,7 @@ export declare const useProvideRovingFocus: (args_0: State) => {
|
|
|
20
20
|
attr: string;
|
|
21
21
|
list: Readonly<ShallowRef<HTMLElement | null>>;
|
|
22
22
|
loop: boolean | undefined;
|
|
23
|
-
orientation: "
|
|
23
|
+
orientation: "horizontal" | "vertical" | "both" | undefined;
|
|
24
24
|
init: () => number;
|
|
25
25
|
focus: {
|
|
26
26
|
(dir: "first" | "last"): void;
|
|
@@ -38,7 +38,7 @@ export declare const useRovingFocus: () => {
|
|
|
38
38
|
attr: string;
|
|
39
39
|
list: Readonly<ShallowRef<HTMLElement | null>>;
|
|
40
40
|
loop: boolean | undefined;
|
|
41
|
-
orientation: "
|
|
41
|
+
orientation: "horizontal" | "vertical" | "both" | undefined;
|
|
42
42
|
init: () => number;
|
|
43
43
|
focus: {
|
|
44
44
|
(dir: "first" | "last"): void;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { AnyString, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
|
|
2
|
+
import type { BoxProps } from './box.vue.js';
|
|
3
|
+
export interface SegmentedControlItem {
|
|
4
|
+
value: string;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface SegmentedControlProps extends BoxProps {
|
|
9
|
+
/** Items to render as controls */
|
|
10
|
+
data: (string | SegmentedControlItem)[];
|
|
11
|
+
/** Component size */
|
|
12
|
+
size?: NuanceSize | AnyString;
|
|
13
|
+
/** Border radius */
|
|
14
|
+
radius?: NuanceRadius;
|
|
15
|
+
/** Color from theme */
|
|
16
|
+
color?: NuanceColor;
|
|
17
|
+
/** Indicator `transition-duration` in ms */
|
|
18
|
+
transitionDuration?: number;
|
|
19
|
+
/** Indicator `transition-timing-function` */
|
|
20
|
+
transitionTimingFunction?: string;
|
|
21
|
+
/** Fills parent width */
|
|
22
|
+
fullWidth?: boolean;
|
|
23
|
+
/** Component orientation */
|
|
24
|
+
orientation?: 'horizontal' | 'vertical';
|
|
25
|
+
/** Disables the component */
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/** Prevents value changes */
|
|
28
|
+
readOnly?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Show borders between items
|
|
31
|
+
* @default `true`
|
|
32
|
+
*/
|
|
33
|
+
withItemsBorders?: boolean;
|
|
34
|
+
}
|
|
35
|
+
type __VLS_Props = SegmentedControlProps;
|
|
36
|
+
type __VLS_ModelProps = {
|
|
37
|
+
modelValue?: string;
|
|
38
|
+
};
|
|
39
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
40
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
41
|
+
"update:modelValue": (value: string | undefined) => any;
|
|
42
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
43
|
+
"onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
|
|
44
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
45
|
+
declare const _default: typeof __VLS_export;
|
|
46
|
+
export default _default;
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useVarsResolver } from "@nui/composables";
|
|
3
|
+
import { getFontSize, getRadius, getSize, getThemeColor } from "@nui/utils";
|
|
4
|
+
import { useTemplateRefsList } from "@vueuse/core";
|
|
5
|
+
import { computed, useId, useTemplateRef } from "vue";
|
|
6
|
+
import Box from "./box.vue";
|
|
7
|
+
import FloatingIndicator from "./floating-indicator.vue";
|
|
8
|
+
const {
|
|
9
|
+
is,
|
|
10
|
+
mod,
|
|
11
|
+
data,
|
|
12
|
+
size,
|
|
13
|
+
radius,
|
|
14
|
+
color,
|
|
15
|
+
transitionDuration,
|
|
16
|
+
transitionTimingFunction,
|
|
17
|
+
fullWidth,
|
|
18
|
+
orientation = "horizontal",
|
|
19
|
+
disabled,
|
|
20
|
+
readOnly,
|
|
21
|
+
withItemsBorders = true
|
|
22
|
+
} = defineProps({
|
|
23
|
+
data: { type: Array, required: true },
|
|
24
|
+
size: { type: [String, Object], required: false },
|
|
25
|
+
radius: { type: [String, Number], required: false },
|
|
26
|
+
color: { type: null, required: false },
|
|
27
|
+
transitionDuration: { type: Number, required: false },
|
|
28
|
+
transitionTimingFunction: { type: String, required: false },
|
|
29
|
+
fullWidth: { type: Boolean, required: false },
|
|
30
|
+
orientation: { type: String, required: false },
|
|
31
|
+
disabled: { type: Boolean, required: false },
|
|
32
|
+
readOnly: { type: Boolean, required: false },
|
|
33
|
+
withItemsBorders: { type: Boolean, required: false },
|
|
34
|
+
is: { type: null, required: false },
|
|
35
|
+
mod: { type: [Object, Array, null], required: false }
|
|
36
|
+
});
|
|
37
|
+
const value = defineModel({ type: String });
|
|
38
|
+
const items = computed(
|
|
39
|
+
() => data.map((item) => typeof item === "string" ? { value: item, label: item } : item)
|
|
40
|
+
);
|
|
41
|
+
if (value.value === void 0) {
|
|
42
|
+
const first = items.value.find((i) => !i.disabled);
|
|
43
|
+
if (first)
|
|
44
|
+
value.value = first.value;
|
|
45
|
+
}
|
|
46
|
+
const groupName = useId();
|
|
47
|
+
const rootRef = useTemplateRef("root");
|
|
48
|
+
const labelRefs = useTemplateRefsList();
|
|
49
|
+
const activeTarget = computed(() => {
|
|
50
|
+
if (value.value === void 0)
|
|
51
|
+
return null;
|
|
52
|
+
const index = items.value.findIndex((i) => i.value === value.value);
|
|
53
|
+
return index !== -1 ? labelRefs.value[index] ?? null : null;
|
|
54
|
+
});
|
|
55
|
+
const style = useVarsResolver((theme) => ({
|
|
56
|
+
root: {
|
|
57
|
+
"--sc-radius": getRadius(radius),
|
|
58
|
+
"--sc-color": color ? getThemeColor(color, theme) : void 0,
|
|
59
|
+
"--sc-shadow": color ? void 0 : "var(--shadow-xs)",
|
|
60
|
+
"--sc-transition-duration": transitionDuration === void 0 ? void 0 : `${transitionDuration}ms`,
|
|
61
|
+
"--sc-transition-timing-function": transitionTimingFunction,
|
|
62
|
+
"--sc-padding": getSize(size, "sc-padding"),
|
|
63
|
+
"--sc-font-size": getFontSize(size)
|
|
64
|
+
}
|
|
65
|
+
}));
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<template>
|
|
69
|
+
<Box
|
|
70
|
+
:is
|
|
71
|
+
ref='root'
|
|
72
|
+
:style='style.root'
|
|
73
|
+
:class='$style.root'
|
|
74
|
+
:mod='[{
|
|
75
|
+
"full-width": fullWidth,
|
|
76
|
+
orientation,
|
|
77
|
+
disabled,
|
|
78
|
+
"with-items-borders": withItemsBorders
|
|
79
|
+
}, mod]'
|
|
80
|
+
role='radiogroup'
|
|
81
|
+
>
|
|
82
|
+
<FloatingIndicator
|
|
83
|
+
v-if='typeof value !== void 0'
|
|
84
|
+
:target='activeTarget'
|
|
85
|
+
:parent='rootRef'
|
|
86
|
+
:class='$style.indicator'
|
|
87
|
+
:orientation
|
|
88
|
+
/>
|
|
89
|
+
|
|
90
|
+
<Box
|
|
91
|
+
v-for='item in items'
|
|
92
|
+
:key='item.value'
|
|
93
|
+
:class='$style.control'
|
|
94
|
+
:mod='{ active: value === item.value, orientation }'
|
|
95
|
+
>
|
|
96
|
+
<input
|
|
97
|
+
:id='`${groupName}-${item.value}`'
|
|
98
|
+
:key='`${item.value}-input`'
|
|
99
|
+
:class='$style.input'
|
|
100
|
+
type='radio'
|
|
101
|
+
:name='groupName'
|
|
102
|
+
:value='item.value'
|
|
103
|
+
:checked='value === item.value'
|
|
104
|
+
:disabled='disabled || item.disabled'
|
|
105
|
+
@change='!readOnly && (value = item.value)'
|
|
106
|
+
>
|
|
107
|
+
|
|
108
|
+
<Box
|
|
109
|
+
is='label'
|
|
110
|
+
:ref='labelRefs.set'
|
|
111
|
+
:for='`${groupName}-${item.value}`'
|
|
112
|
+
:class='$style.label'
|
|
113
|
+
:style='{
|
|
114
|
+
"--sc-label-color": !!color && "var(--color-white)"
|
|
115
|
+
}'
|
|
116
|
+
:mod='{
|
|
117
|
+
"active": value === item.value && !(disabled || item.disabled),
|
|
118
|
+
"disabled": disabled || item.disabled,
|
|
119
|
+
"read-only": readOnly
|
|
120
|
+
}'
|
|
121
|
+
>
|
|
122
|
+
<span :class='$style.innerLabel'>{{ item.label }}</span>
|
|
123
|
+
</Box>
|
|
124
|
+
</Box>
|
|
125
|
+
</Box>
|
|
126
|
+
</template>
|
|
127
|
+
|
|
128
|
+
<style module>
|
|
129
|
+
.root{--sc-padding-xs:2px 6px;--sc-padding-sm:3px 10px;--sc-padding-md:4px 14px;--sc-padding-lg:7px 16px;--sc-padding-xl:10px 20px;--sc-padding:var(--sc-padding-sm);--sc-radius:var(--radius-md);--sc-transition-duration:200ms;--sc-transition-timing-function:ease;--sc-font-size:var(--font-size-sm);border-radius:var(--sc-radius,var(--radius-md));display:inline-flex;flex-direction:row;overflow:hidden;padding:4px;position:relative;width:auto}.root:where([data-full-width]){display:flex}.root:where([data-orientation=vertical]){display:flex;flex-direction:column;width:-moz-max-content;width:max-content}.root:where([data-orientation=vertical]):where([data-full-width]){width:auto}.root{@mixin where-light{background-color:var(--color-gray-1)}}.root{@mixin where-dark{background-color:var(--color-dark-8)}}.indicator{border-radius:calc(var(--sc-radius, var(--radius-md)) + 2px);display:block;position:absolute;z-index:1}.indicator:where([data-orientation=horizontal]){bottom:4px;top:4px}.indicator:where([data-orientation=vertical]){left:4px;right:4px}.indicator{@mixin where-light{background-color:var(--sc-color,var(--color-white));box-shadow:var(--sc-shadow,none)}}.indicator{@mixin where-dark{background-color:var(--sc-color,var(--color-dark-5));box-shadow:none}}.label{border-radius:calc(var(--sc-radius, var(--radius-md)) + 2px);cursor:pointer;display:block;font-size:var(--sc-font-size);font-weight:500;outline:var(--segmented-control-outline,none);overflow:hidden;padding:var(--sc-padding);text-align:center;text-overflow:ellipsis;transition:color var(--sc-transition-duration) var(--sc-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;@mixin where-light{color:var(--color-gray-7)}@mixin where-dark{color:var(--color-dark-1)}}.label:where([data-read-only]){cursor:default}.label:where([data-active]){@mixin where-light{color:var(--sc-label-color,var(--color-black))}@mixin where-dark{color:var(--sc-label-color,var(--color-white))}}.label:where([data-active]):before{border-radius:calc(var(--sc-radius, var(--radius-md)) + 2px);content:"";inset:0;position:absolute;z-index:0}.root:where([data-initialized]) .label:where([data-active]):before{display:none}.label:where([data-active]):before{@mixin where-light{box-shadow:var(--sc-shadow,none)}}.label:where([data-active]):before{@mixin where-dark{box-shadow:none}}.label:where([data-active])[data-disabled],fieldset:disabled .label:where([data-active]){color:var(--color-disabled-text);cursor:not-allowed}.label:where(:not([data-disabled],[data-active],[data-read-only])){@mixin hover{@mixin where-light{color:var(--color-black)}@mixin where-dark{color:var(--color-white)}}}fieldset:disabled .label{@mixin hover{color:var(--color-disabled-text)!important}}.input{height:0;opacity:0;overflow:hidden;position:absolute;white-space:nowrap;width:0}.input:focus-visible+.label{--segmented-control-outline:2px solid var(--color-primary-filled)}.control{flex:1;position:relative;transition:border-color var(--sc-transition-duration) var(--sc-transition-timing-function);z-index:2}.root[data-with-items-borders] :where(.control):before{background-color:var(--separator-color);bottom:0;content:"";inset-inline-start:0;position:absolute;top:0;transition:background-color var(--sc-transition-duration) var(--sc-transition-timing-function);width:1px}.control[data-orientation=vertical]:before{bottom:auto;height:1px;top:0;inset-inline:0;width:auto}.control:first-of-type:before,[data-mantine-color-scheme] .control[data-active]+.control:before,[data-mantine-color-scheme] .control[data-active]:before{--separator-color:transparent}.control{@mixin where-light{--separator-color:var(--color-gray-3)}}.control{@mixin where-dark{--separator-color:var(--color-dark-4)}}.innerLabel{position:relative;z-index:2}
|
|
130
|
+
</style>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { AnyString, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
|
|
2
|
+
import type { BoxProps } from './box.vue.js';
|
|
3
|
+
export interface SegmentedControlItem {
|
|
4
|
+
value: string;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface SegmentedControlProps extends BoxProps {
|
|
9
|
+
/** Items to render as controls */
|
|
10
|
+
data: (string | SegmentedControlItem)[];
|
|
11
|
+
/** Component size */
|
|
12
|
+
size?: NuanceSize | AnyString;
|
|
13
|
+
/** Border radius */
|
|
14
|
+
radius?: NuanceRadius;
|
|
15
|
+
/** Color from theme */
|
|
16
|
+
color?: NuanceColor;
|
|
17
|
+
/** Indicator `transition-duration` in ms */
|
|
18
|
+
transitionDuration?: number;
|
|
19
|
+
/** Indicator `transition-timing-function` */
|
|
20
|
+
transitionTimingFunction?: string;
|
|
21
|
+
/** Fills parent width */
|
|
22
|
+
fullWidth?: boolean;
|
|
23
|
+
/** Component orientation */
|
|
24
|
+
orientation?: 'horizontal' | 'vertical';
|
|
25
|
+
/** Disables the component */
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/** Prevents value changes */
|
|
28
|
+
readOnly?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Show borders between items
|
|
31
|
+
* @default `true`
|
|
32
|
+
*/
|
|
33
|
+
withItemsBorders?: boolean;
|
|
34
|
+
}
|
|
35
|
+
type __VLS_Props = SegmentedControlProps;
|
|
36
|
+
type __VLS_ModelProps = {
|
|
37
|
+
modelValue?: string;
|
|
38
|
+
};
|
|
39
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
40
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
41
|
+
"update:modelValue": (value: string | undefined) => any;
|
|
42
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
43
|
+
"onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
|
|
44
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
45
|
+
declare const _default: typeof __VLS_export;
|
|
46
|
+
export default _default;
|
|
@@ -134,5 +134,5 @@ const style = useVarsResolver((theme) => ({
|
|
|
134
134
|
</template>
|
|
135
135
|
|
|
136
136
|
<style module>
|
|
137
|
-
.root{--switch-height-xs:rem(16px);--switch-height-sm:rem(20px);--switch-height-md:rem(24px);--switch-height-lg:rem(30px);--switch-height-xl:rem(36px);--switch-width-xs:rem(32px);--switch-width-sm:rem(38px);--switch-width-md:rem(46px);--switch-width-lg:rem(56px);--switch-width-xl:rem(72px);--switch-thumb-size-xs:rem(12px);--switch-thumb-size-sm:rem(14px);--switch-thumb-size-md:rem(18px);--switch-thumb-size-lg:rem(22px);--switch-thumb-size-xl:rem(28px);--switch-label-font-size-xs:rem(7px);--switch-label-font-size-sm:rem(9px);--switch-label-font-size-md:rem(10px);--switch-label-font-size-lg:rem(12px);--switch-label-font-size-xl:rem(16px);--switch-track-label-padding-xs:rem(3px);--switch-track-label-padding-sm:rem(3px);--switch-track-label-padding-md:rem(3.5px);--switch-track-label-padding-lg:rem(3.5px);--switch-track-label-padding-xl:rem(4px);--switch-height:var(--switch-height-sm);--switch-width:var(--switch-width-sm);--switch-thumb-size:var(--switch-thumb-size-sm);--switch-label-font-size:var(--switch-label-font-size-sm);--switch-track-label-padding:var(--switch-track-label-padding-sm);--switch-radius:1000px;--switch-color:var(--color-primary-filled);--switch-disabled-color:var(--color-disabled);position:relative}.input{height:100%;opacity:0;padding:0;position:absolute;white-space:nowrap;width:100%}.input,.track{margin:0;overflow:hidden}.track{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--switch-bg);border-radius:var(--switch-radius);color:var(--switch-text-color);cursor:var(--switch-cursor,pointer);display:flex;font-size:var(--switch-label-font-size);font-weight:
|
|
137
|
+
.root{--switch-height-xs:rem(16px);--switch-height-sm:rem(20px);--switch-height-md:rem(24px);--switch-height-lg:rem(30px);--switch-height-xl:rem(36px);--switch-width-xs:rem(32px);--switch-width-sm:rem(38px);--switch-width-md:rem(46px);--switch-width-lg:rem(56px);--switch-width-xl:rem(72px);--switch-thumb-size-xs:rem(12px);--switch-thumb-size-sm:rem(14px);--switch-thumb-size-md:rem(18px);--switch-thumb-size-lg:rem(22px);--switch-thumb-size-xl:rem(28px);--switch-label-font-size-xs:rem(7px);--switch-label-font-size-sm:rem(9px);--switch-label-font-size-md:rem(10px);--switch-label-font-size-lg:rem(12px);--switch-label-font-size-xl:rem(16px);--switch-track-label-padding-xs:rem(3px);--switch-track-label-padding-sm:rem(3px);--switch-track-label-padding-md:rem(3.5px);--switch-track-label-padding-lg:rem(3.5px);--switch-track-label-padding-xl:rem(4px);--switch-height:var(--switch-height-sm);--switch-width:var(--switch-width-sm);--switch-thumb-size:var(--switch-thumb-size-sm);--switch-label-font-size:var(--switch-label-font-size-sm);--switch-track-label-padding:var(--switch-track-label-padding-sm);--switch-radius:1000px;--switch-color:var(--color-primary-filled);--switch-disabled-color:var(--color-disabled);position:relative}.input{height:100%;opacity:0;padding:0;position:absolute;white-space:nowrap;width:100%}.input,.track{margin:0;overflow:hidden}.track{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--switch-bg);border-radius:var(--switch-radius);color:var(--switch-text-color);cursor:var(--switch-cursor,pointer);display:flex;font-size:var(--switch-label-font-size);font-weight:500;height:var(--switch-height);line-height:0;min-width:var(--switch-width);order:var(--switch-order,1);position:relative;transition:background-color .15s ease,border-color .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:0;-webkit-tap-highlight-color:transparent}.track:where([data-without-labels]){width:var(--switch-width)}.input:focus-visible+.track{outline:2px solid var(--color-primary-filled);outline-offset:2px}.input:checked+.track{--switch-bg:var(--switch-color);--switch-text-color:var(--color-white)}.input:disabled+.track,.input[data-disabled]+.track{--switch-bg:var(--switch-disabled-color);--switch-cursor:not-allowed}.track[data-label-position=left]{--switch-order:2}.track{@mixin where-light{--switch-bg:var(--color-gray-3);--switch-text-color:var(--color-gray-6)}}.track{@mixin where-dark{--switch-bg:var(--color-dark-5);--switch-text-color:var(--color-dark-1)}}.thumb{background-color:var(--switch-thumb-bg,var(--color-white));border-radius:var(--switch-radius);display:flex;height:var(--switch-thumb-size);inset-inline-start:var(--switch-thumb-start,var(--switch-track-label-padding));position:absolute;transition:inset-inline-start .15s ease;width:var(--switch-thumb-size);z-index:1}.thumb:where([data-with-indicator]):before{background-color:var(--switch-bg);border-radius:var(--switch-radius);content:"";height:40%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:40%}.thumb>*{margin:auto}.input:checked+*>.thumb{--switch-thumb-start:calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding))}.input:disabled+*>.thumb,.input[data-disabled]+*>.thumb{--switch-thumb-bg:var(--switch-thumb-bg-disabled)}.thumb{@mixin where-light{--switch-thumb-bg-disabled:var(--color-gray-0)}}.thumb{@mixin where-dark{--switch-thumb-bg-disabled:var(--color-dark-3)}}.trackLabel{display:grid;height:100%;margin-inline-start:calc(var(--switch-thumb-size) + var(--switch-track-label-padding));min-width:calc(var(--switch-width) - var(--switch-thumb-size));padding-inline:var(--switch-track-label-padding);place-content:center;transition:margin .15s ease}.input:checked+*>.trackLabel{margin-inline-end:calc(var(--switch-thumb-size) + var(--switch-track-label-padding));margin-inline-start:0}
|
|
138
138
|
</style>
|
|
@@ -365,5 +365,5 @@ defineExpose({
|
|
|
365
365
|
</template>
|
|
366
366
|
|
|
367
367
|
<style module>
|
|
368
|
-
.root{--table-color:var(--color-primary-4);--table-loader-color:var(--table-color);--table-loader-animation:carousel 2s ease-in-out infinite;--table-padding-x:.5rem;--table-padding-y:.5rem;--vertical-align:baseline;overflow:auto;position:relative}.root:not([data-virtualize]) .table{overflow:clip}.root:not([data-virtualize]) .tbody>tr:not(:last-of-type){border-bottom:1px solid var(--table-bd-color)}.root{@mixin where-light{--table-active-bg:alpha(var(--color-
|
|
368
|
+
.root{--table-color:var(--color-primary-4);--table-loader-color:var(--table-color);--table-loader-animation:carousel 2s ease-in-out infinite;--table-padding-x:.5rem;--table-padding-y:.5rem;--vertical-align:baseline;overflow:auto;position:relative}.root:not([data-virtualize]) .table{overflow:clip}.root:not([data-virtualize]) .tbody>tr:not(:last-of-type){border-bottom:1px solid var(--table-bd-color)}.root{@mixin where-light{--table-active-bg:alpha(var(--color-dark-1),.5);--table-c:var(--color-dark-7);--table-bd-color:var(--color-dark-3)}}.root{@mixin where-dark{--table-active-bg:alpha(var(--color-dark-7),.5);--table-c:var(--color-dark-4);--table-bd-color:var(--color-dark-7)}}.table{border-collapse:collapse;min-width:100%}.thead{position:relative}.thead[data-loading]:after{animation:var(--table-loader-animation);background-color:alpha(var(--table-loader-color),.75);content:"";height:1px;position:absolute;z-index:1}.thead[data-sticky]{backdrop-filter:blur(8px);background-color:alpha(var(--color-body),.75);position:sticky;top:0;inset-inline:0;z-index:1}.th{color:var(--table-c);font-weight:600;padding-block:var(--table-padding-y);padding-inline:var(--table-padding-x);text-align:left;vertical-align:var(--vertical-align)}.th:has([role=checkbox]){padding-inline-end:0}.th[data-pinned],.tr td[data-pinned]{background-color:alpha(var(--color-body),.75);position:sticky;z-index:1}.tbody{isolation:isolate}.tfoot{position:relative}.tfoot[data-sticky]{backdrop-filter:blur(8px);background-color:var(--color-body);bottom:0;inset-inline:0;position:sticky;z-index:1}.tr[data-selectable]:hover{background-color:var(--table-active-bg)}.tr[data-selectable]:focus-visible{outline:1px solid var(--table-color)}.tr[data-selected]{background-color:var(--table-active-bg)}.tr td{color:var(--table-c);padding-block:var(--table-padding-y);padding-inline:var(--table-padding-x);vertical-align:var(--vertical-align);white-space:nowrap}.tr td:has([role=checkbox]){padding-inline-end:0}.separator{background-color:var(--table-bd-color);height:1px;left:0;position:absolute;width:100%;z-index:1}.empty,.loading{padding-inline:1.5rem;text-align:center}@keyframes carousel{0%{transform:translate(-100%);width:50%}to{transform:translate(200%);width:50%}}
|
|
369
369
|
</style>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ActionIconProps } from './action-icon/index.js';
|
|
2
|
+
declare var __VLS_10: {};
|
|
3
|
+
type __VLS_Slots = {} & {
|
|
4
|
+
default?: (props: typeof __VLS_10) => any;
|
|
5
|
+
};
|
|
6
|
+
declare const __VLS_base: import("vue").DefineComponent<ActionIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
7
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
8
|
+
declare const _default: typeof __VLS_export;
|
|
9
|
+
export default _default;
|
|
10
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
11
|
+
new (): {
|
|
12
|
+
$slots: S;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useTheme } from "@nui/composables";
|
|
3
|
+
import ActionIcon from "./action-icon/action-icon.vue";
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
size: { type: null, required: false },
|
|
6
|
+
gradient: { type: Object, required: false },
|
|
7
|
+
color: { type: null, required: false },
|
|
8
|
+
radius: { type: [String, Number, Object], required: false },
|
|
9
|
+
loading: { type: Boolean, required: false },
|
|
10
|
+
icon: { type: String, required: false },
|
|
11
|
+
disabled: { type: Boolean, required: false },
|
|
12
|
+
mod: { type: [Object, Array, null], required: false },
|
|
13
|
+
variant: { type: String, required: false },
|
|
14
|
+
classes: { type: Object, required: false }
|
|
15
|
+
});
|
|
16
|
+
const theme = useTheme();
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<template>
|
|
20
|
+
<ActionIcon
|
|
21
|
+
v-bind='props'
|
|
22
|
+
:icon='theme.value === "light" ? "gravity-ui:moon" : "gravity-ui:sun"'
|
|
23
|
+
@click='theme.preference = theme.value === "light" ? "dark" : "light"'
|
|
24
|
+
>
|
|
25
|
+
<slot />
|
|
26
|
+
</ActionIcon>
|
|
27
|
+
</template>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ActionIconProps } from './action-icon/index.js';
|
|
2
|
+
declare var __VLS_10: {};
|
|
3
|
+
type __VLS_Slots = {} & {
|
|
4
|
+
default?: (props: typeof __VLS_10) => any;
|
|
5
|
+
};
|
|
6
|
+
declare const __VLS_base: import("vue").DefineComponent<ActionIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
7
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
8
|
+
declare const _default: typeof __VLS_export;
|
|
9
|
+
export default _default;
|
|
10
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
11
|
+
new (): {
|
|
12
|
+
$slots: S;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from './create-strict-injection.js';
|
|
2
2
|
export * from './use-active-link.js';
|
|
3
3
|
export * from './use-date-config.js';
|
|
4
|
+
export * from './use-floating-indicator.js';
|
|
4
5
|
export * from './use-selectable-group.js';
|
|
5
6
|
export * from './use-theme.js';
|
|
6
7
|
export * from './use-vars-resolver.js';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from "./create-strict-injection.js";
|
|
2
2
|
export * from "./use-active-link.js";
|
|
3
3
|
export * from "./use-date-config.js";
|
|
4
|
+
export * from "./use-floating-indicator.js";
|
|
4
5
|
export * from "./use-selectable-group.js";
|
|
5
6
|
export * from "./use-theme.js";
|
|
6
7
|
export * from "./use-vars-resolver.js";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Ref } from 'vue';
|
|
2
|
+
export interface UseFloatingIndicatorOptions {
|
|
3
|
+
target: Readonly<Ref<HTMLElement | null>>;
|
|
4
|
+
parent: Readonly<Ref<HTMLElement | null>>;
|
|
5
|
+
orientation?: 'horizontal' | 'vertical';
|
|
6
|
+
}
|
|
7
|
+
export interface UseFloatingIndicatorReturn {
|
|
8
|
+
size: Readonly<Ref<number | null>>;
|
|
9
|
+
position: Readonly<Ref<number | null>>;
|
|
10
|
+
}
|
|
11
|
+
export declare function useFloatingIndicator({ target, parent, orientation, }: UseFloatingIndicatorOptions): UseFloatingIndicatorReturn;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { unrefElement, useResizeObserver } from "@vueuse/core";
|
|
2
|
+
import { nextTick, onMounted, ref, watch } from "vue";
|
|
3
|
+
export function useFloatingIndicator({
|
|
4
|
+
target,
|
|
5
|
+
parent,
|
|
6
|
+
orientation = "horizontal"
|
|
7
|
+
}) {
|
|
8
|
+
const size = ref(null);
|
|
9
|
+
const position = ref(null);
|
|
10
|
+
function updatePosition() {
|
|
11
|
+
const targetEl = unrefElement(target);
|
|
12
|
+
const parentEl = unrefElement(parent);
|
|
13
|
+
if (!targetEl || !parentEl)
|
|
14
|
+
return;
|
|
15
|
+
const targetRect = targetEl.getBoundingClientRect();
|
|
16
|
+
const parentRect = parentEl.getBoundingClientRect();
|
|
17
|
+
if (orientation === "horizontal") {
|
|
18
|
+
size.value = targetEl.offsetWidth;
|
|
19
|
+
position.value = targetRect.left - parentRect.left;
|
|
20
|
+
} else {
|
|
21
|
+
size.value = targetEl.offsetHeight;
|
|
22
|
+
position.value = targetRect.top - parentRect.top;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
watch(target, () => nextTick(updatePosition));
|
|
26
|
+
watch(parent, () => nextTick(updatePosition));
|
|
27
|
+
useResizeObserver([target, parent], updatePosition);
|
|
28
|
+
onMounted(updatePosition);
|
|
29
|
+
return { size, position };
|
|
30
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { SegmentedControlProps } from '../components/segmented-control.vue.js';
|
|
2
|
+
import type { FieldBaseProps } from './types.js';
|
|
3
|
+
export interface SegmentedControlFieldProps extends SegmentedControlProps, Omit<FieldBaseProps<string>, 'initialValue'> {
|
|
4
|
+
}
|
|
5
|
+
declare const __VLS_export: import("vue").DefineComponent<SegmentedControlFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SegmentedControlFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
6
|
+
declare const _default: typeof __VLS_export;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useField } from "vee-validate";
|
|
3
|
+
import SegmentedControl from "../components/segmented-control.vue";
|
|
4
|
+
const {
|
|
5
|
+
name,
|
|
6
|
+
rules,
|
|
7
|
+
validateOn = "change",
|
|
8
|
+
controlled = true,
|
|
9
|
+
...props
|
|
10
|
+
} = defineProps({
|
|
11
|
+
data: { type: Array, required: true },
|
|
12
|
+
size: { type: [String, Object], required: false },
|
|
13
|
+
radius: { type: [String, Number], required: false },
|
|
14
|
+
color: { type: null, required: false },
|
|
15
|
+
transitionDuration: { type: Number, required: false },
|
|
16
|
+
transitionTimingFunction: { type: String, required: false },
|
|
17
|
+
fullWidth: { type: Boolean, required: false },
|
|
18
|
+
orientation: { type: String, required: false },
|
|
19
|
+
disabled: { type: Boolean, required: false },
|
|
20
|
+
readOnly: { type: Boolean, required: false },
|
|
21
|
+
withItemsBorders: { type: Boolean, required: false },
|
|
22
|
+
is: { type: null, required: false },
|
|
23
|
+
mod: { type: [Object, Array, null], required: false },
|
|
24
|
+
name: { type: String, required: true },
|
|
25
|
+
controlled: { type: Boolean, required: false },
|
|
26
|
+
rules: { type: null, required: false },
|
|
27
|
+
validateOn: { type: String, required: false }
|
|
28
|
+
});
|
|
29
|
+
const {
|
|
30
|
+
value,
|
|
31
|
+
handleChange
|
|
32
|
+
} = useField(() => name, rules, {
|
|
33
|
+
validateOnValueUpdate: false,
|
|
34
|
+
validateOnMount: false,
|
|
35
|
+
controlled
|
|
36
|
+
});
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<template>
|
|
40
|
+
<SegmentedControl
|
|
41
|
+
v-bind='props'
|
|
42
|
+
v-model='value'
|
|
43
|
+
@update:model-value='handleChange($event, validateOn === "change")'
|
|
44
|
+
/>
|
|
45
|
+
</template>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { SegmentedControlProps } from '../components/segmented-control.vue.js';
|
|
2
|
+
import type { FieldBaseProps } from './types.js';
|
|
3
|
+
export interface SegmentedControlFieldProps extends SegmentedControlProps, Omit<FieldBaseProps<string>, 'initialValue'> {
|
|
4
|
+
}
|
|
5
|
+
declare const __VLS_export: import("vue").DefineComponent<SegmentedControlFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SegmentedControlFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
6
|
+
declare const _default: typeof __VLS_export;
|
|
7
|
+
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-white:#fff;--color-black:#000;--color-primary-0:var(--color-blue-0);--color-primary-1:var(--color-blue-1);--color-primary-2:var(--color-blue-2);--color-primary-3:var(--color-blue-3);--color-primary-4:var(--color-blue-4);--color-primary-5:var(--color-blue-5);--color-primary-6:var(--color-blue-6);--color-primary-7:var(--color-blue-7);--color-primary-8:var(--color-blue-8);--color-primary-9:var(--color-blue-9);--color-primary-filled:var(--color-blue-filled);--color-primary-filled-hover:var(--color-blue-filled-hover);--color-primary-light:alpha(var(--color-blue-light),.15);--color-primary-light-hover:var(--color-blue-light-hover);--color-primary-light-color:var(--color-blue-light-color);--color-primary-outline:var(--color-blue-outline);--color-primary-outline-hover:alpha(var(--color-blue-outline),.1);--color-dark-0:#c9c9c9;--color-dark-1:#b8b8b8;--color-dark-2:#828282;--color-dark-3:#696969;--color-dark-4:#424242;--color-dark-5:#3b3b3b;--color-dark-6:#2e2e2e;--color-dark-7:#242424;--color-dark-8:#1f1f1f;--color-dark-9:#141414;--color-
|
|
1
|
+
:root{--color-white:#fff;--color-black:#000;--color-primary-0:var(--color-blue-0);--color-primary-1:var(--color-blue-1);--color-primary-2:var(--color-blue-2);--color-primary-3:var(--color-blue-3);--color-primary-4:var(--color-blue-4);--color-primary-5:var(--color-blue-5);--color-primary-6:var(--color-blue-6);--color-primary-7:var(--color-blue-7);--color-primary-8:var(--color-blue-8);--color-primary-9:var(--color-blue-9);--color-primary-filled:var(--color-blue-filled);--color-primary-filled-hover:var(--color-blue-filled-hover);--color-primary-light:alpha(var(--color-blue-light),.15);--color-primary-light-hover:var(--color-blue-light-hover);--color-primary-light-color:var(--color-blue-light-color);--color-primary-outline:var(--color-blue-outline);--color-primary-outline-hover:alpha(var(--color-blue-outline),.1);--color-dark-0:#c9c9c9;--color-dark-1:#b8b8b8;--color-dark-2:#828282;--color-dark-3:#696969;--color-dark-4:#424242;--color-dark-5:#3b3b3b;--color-dark-6:#2e2e2e;--color-dark-7:#242424;--color-dark-8:#1f1f1f;--color-dark-9:#141414;--color-gray-0:#f8f9fa;--color-gray-1:#f1f3f5;--color-gray-2:#e9ecef;--color-gray-3:#dee2e6;--color-gray-4:#ced4da;--color-gray-5:#adb5bd;--color-gray-6:#868e96;--color-gray-7:#495057;--color-gray-8:#343a40;--color-gray-9:#212529;--color-red-0:#fff5f5;--color-red-1:#ffe3e3;--color-red-2:#ffc9c9;--color-red-3:#ffa8a8;--color-red-4:#ff8787;--color-red-5:#ff6b6b;--color-red-6:#fa5252;--color-red-7:#f03e3e;--color-red-8:#e03131;--color-red-9:#c92a2a;--color-pink-0:#fdf6f8;--color-pink-1:#f7e4e9;--color-pink-2:#edc2d0;--color-pink-3:#dd9bb0;--color-pink-4:#c97a93;--color-pink-5:#b26179;--color-pink-6:#954d65;--color-pink-7:#7a3e52;--color-pink-8:#603140;--color-pink-9:#4d2733;--color-grape-0:#f8f0fc;--color-grape-1:#f3d9fa;--color-grape-2:#eebefa;--color-grape-3:#e599f7;--color-grape-4:#da77f2;--color-grape-5:#cc5de8;--color-grape-6:#be4bdb;--color-grape-7:#ae3ec9;--color-grape-8:#9c36b5;--color-grape-9:#862e9c;--color-violet-0:#f3f0ff;--color-violet-1:#e5dbff;--color-violet-2:#d0bfff;--color-violet-3:#b197fc;--color-violet-4:#9775fa;--color-violet-5:#845ef7;--color-violet-6:#7950f2;--color-violet-7:#7048e8;--color-violet-8:#6741d9;--color-violet-9:#5f3dc4;--color-indigo-0:#edf2ff;--color-indigo-1:#dbe4ff;--color-indigo-2:#bac8ff;--color-indigo-3:#91a7ff;--color-indigo-4:#748ffc;--color-indigo-5:#5c7cfa;--color-indigo-6:#4c6ef5;--color-indigo-7:#4263eb;--color-indigo-8:#3b5bdb;--color-indigo-9:#364fc7;--color-blue-0:#e7f5ff;--color-blue-1:#d0ebff;--color-blue-2:#a5d8ff;--color-blue-3:#74c0fc;--color-blue-4:#4dabf7;--color-blue-5:#339af0;--color-blue-6:#228be6;--color-blue-7:#1c7ed6;--color-blue-8:#1971c2;--color-blue-9:#1864ab;--color-green-0:#ebfbee;--color-green-1:#d3f9d8;--color-green-2:#b2f2bb;--color-green-3:#8ce99a;--color-green-4:#69db7c;--color-green-5:#51cf66;--color-green-6:#40c057;--color-green-7:#37b24d;--color-green-8:#2f9e44;--color-green-9:#2b8a3e;--color-lime-0:#f4fce3;--color-lime-1:#e9fac8;--color-lime-2:#d8f5a2;--color-lime-3:#c0eb75;--color-lime-4:#a9e34b;--color-lime-5:#94d82d;--color-lime-6:#82c91e;--color-lime-7:#74b816;--color-lime-8:#66a80f;--color-lime-9:#5c940d;--color-yellow-0:#fff9db;--color-yellow-1:#fff3bf;--color-yellow-2:#ffec99;--color-yellow-3:#ffe066;--color-yellow-4:#ffd43b;--color-yellow-5:#fcc419;--color-yellow-6:#fab005;--color-yellow-7:#f59f00;--color-yellow-8:#f08c00;--color-yellow-9:#e67700;--color-orange-0:#fff4e6;--color-orange-1:#ffe8cc;--color-orange-2:#ffd8a8;--color-orange-3:#ffc078;--color-orange-4:#ffa94d;--color-orange-5:#ff922b;--color-orange-6:#fd7e14;--color-orange-7:#f76707;--color-orange-8:#e8590c;--color-orange-9:#d9480f}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--mantine-scale:1;--font-family
|
|
1
|
+
:root{--mantine-scale:1;--font-family:Inter,Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--font-family-headings:Inter,Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--font-family-mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--heading-text-wrap:wrap;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-h1:2.125rem;--line-height-h1:1.3;--font-weight-h1:700;--font-size-h2:1.625rem;--line-height-h2:1.35;--font-weight-h2:700;--font-size-h3:1.375rem;--line-height-h3:1.4;--font-weight-h3:700;--font-size-h4:1.125rem;--line-height-h4:1.45;--font-weight-h4:700;--font-size-h5:1rem;--line-height-h5:1.5;--font-weight-h5:700;--font-size-h6:0.875rem;--line-height-h6:1.5;--font-weight-h6:700;--spacing-2xs:0.25rem;--spacing-xs:0.5rem;--spacing-sm:0.75rem;--spacing-md:1rem;--spacing-lg:1.25rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:1rem;--radius-xl:2rem;--radius-default:var(--radius-sm);--line-height:1.55;--line-height-xs:1.4;--line-height-sm:1.45;--line-height-md:1.55;--line-height-lg:1.6;--line-height-xl:1.65;--shadow-xs:0 0.0625rem 0.1875rem rgba(0,0,0,.05),0 0.0625rem 0.125rem rgba(0,0,0,.1);--shadow-sm:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 0.625rem 0.9375rem -0.3125rem,rgba(0,0,0,.04) 0 0.4375rem 0.4375rem -0.3125rem;--shadow-md:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 1.25rem 1.5625rem -0.3125rem,rgba(0,0,0,.04) 0 0.625rem 0.625rem -0.3125rem;--shadow-lg:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 1.75rem 1.4375rem -0.4375rem,rgba(0,0,0,.04) 0 0.75rem 0.75rem -0.4375rem;--shadow-xl:0 0.0625rem 0.1875rem rgba(0,0,0,.05),rgba(0,0,0,.05) 0 2.25rem 1.75rem -0.4375rem,rgba(0,0,0,.04) 0 1.0625rem 1.0625rem -0.4375rem;--breakpoint-xs:36em;--breakpoint-sm:48em;--breakpoint-md:62em;--breakpoint-lg:75em;--breakpoint-xl:88em}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{@mixin dark-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-white);--color-text:var(--color-
|
|
1
|
+
:root{@mixin dark-root{--primary-color-contrast:var(--color-white);--color-bright:var(--color-white);--color-text:var(--color-dark-0);--color-body:var(--color-dark-7);--color-aside:var(--color-dark-7);--color-header:var(--color-dark-8);--color-error:var(--color-red-8);--color-placeholder:var(--color-dark-3);--color-anchor:var(--color-blue-4);--color-default:var(--color-dark-6);--color-default-hover:var(--color-dark-5);--color-default-color:var(--color-white);--color-default-border:var(--color-dark-4);--color-dimmed:var(--color-dark-2);--color-disabled:var(--color-dark-6);--color-disabled-text:var(--color-dark-3);--color-disabled-border:var(--color-dark-4);--color-dark-color:var(--color-dark-4);--color-dark-filled:var(--color-dark-8);--color-dark-filled-hover:var(--color-dark-9);--color-dark-light:alpha(var(--color-dark-6),0.15);--color-dark-light-hover:alpha(var(--color-dark-6),0.2);--color-dark-light-color:var(--color-dark-0);--color-dark-outline:var(--color-dark-4);--color-dark-outline-hover:alpha(var(--color-dark-4),0.05);--color-gray-color:var(--color-gray-4);--color-gray-filled:var(--color-gray-8);--color-gray-filled-hover:var(--color-gray-9);--color-gray-light:alpha(var(--color-gray-6),0.15);--color-gray-light-hover:alpha(var(--color-gray-6),0.2);--color-gray-light-color:var(--color-gray-0);--color-gray-outline:var(--color-gray-4);--color-gray-outline-hover:alpha(var(--color-gray-4),0.05);--color-red-color:var(--color-red-4);--color-red-filled:var(--color-red-8);--color-red-filled-hover:var(--color-red-9);--color-red-light:alpha(var(--color-red-8),0.15);--color-red-light-hover:alpha(var(--color-red-8),0.2);--color-red-light-color:var(--color-red-0);--color-red-outline:var(--color-red-4);--color-red-outline-hover:alpha(var(--color-red-4),0.05);--color-pink-color:var(--color-pink-4);--color-pink-filled:var(--color-pink-8);--color-pink-filled-hover:var(--color-pink-9);--color-pink-light:alpha(var(--color-pink-8),0.15);--color-pink-light-hover:alpha(var(--color-pink-8),0.2);--color-pink-light-color:var(--color-pink-0);--color-pink-outline:var(--color-pink-4);--color-pink-outline-hover:alpha(var(--color-pink-4),0.05);--color-grape-color:var(--color-grape-4);--color-grape-filled:var(--color-grape-8);--color-grape-filled-hover:var(--color-grape-9);--color-grape-light:alpha(var(--color-grape-8),0.15);--color-grape-light-hover:alpha(var(--color-grape-8),0.2);--color-grape-light-color:var(--color-grape-0);--color-grape-outline:var(--color-grape-4);--color-grape-outline-hover:alpha(var(--color-grape-4),0.05);--color-violet-color:var(--color-violet-4);--color-violet-filled:var(--color-violet-8);--color-violet-filled-hover:var(--color-violet-9);--color-violet-light:alpha(var(--color-violet-8),0.15);--color-violet-light-hover:alpha(var(--color-violet-8),0.2);--color-violet-light-color:var(--color-violet-0);--color-violet-outline:var(--color-violet-4);--color-violet-outline-hover:alpha(var(--color-violet-4),0.05);--color-indigo-color:var(--color-indigo-4);--color-indigo-filled:var(--color-indigo-8);--color-indigo-filled-hover:var(--color-indigo-9);--color-indigo-light:alpha(var(--color-indigo-8),0.15);--color-indigo-light-hover:alpha(var(--color-indigo-8),0.2);--color-indigo-light-color:var(--color-indigo-0);--color-indigo-outline:var(--color-indigo-4);--color-indigo-outline-hover:alpha(var(--color-indigo-4),0.05);--color-blue-color:var(--color-blue-4);--color-blue-filled:var(--color-blue-8);--color-blue-filled-hover:var(--color-blue-9);--color-blue-light:alpha(var(--color-blue-8),0.15);--color-blue-light-hover:alpha(var(--color-blue-8),0.2);--color-blue-light-color:var(--color-blue-0);--color-blue-outline:var(--color-blue-4);--color-blue-outline-hover:alpha(var(--color-blue-4),0.05);--color-cyan-color:var(--color-cyan-4);--color-cyan-filled:var(--color-cyan-8);--color-cyan-filled-hover:var(--color-cyan-9);--color-cyan-light:alpha(var(--color-cyan-8),0.15);--color-cyan-light-hover:alpha(var(--color-cyan-8),0.2);--color-cyan-light-color:var(--color-cyan-0);--color-cyan-outline:var(--color-cyan-4);--color-cyan-outline-hover:alpha(var(--color-cyan-4),0.05);--color-teal-color:var(--color-teal-4);--color-teal-filled:var(--color-teal-8);--color-teal-filled-hover:var(--color-teal-9);--color-teal-light:alpha(var(--color-teal-8),0.15);--color-teal-light-hover:alpha(var(--color-teal-8),0.2);--color-teal-light-color:var(--color-teal-0);--color-teal-outline:var(--color-teal-4);--color-teal-outline-hover:alpha(var(--color-teal-4),0.05);--color-green-color:var(--color-green-4);--color-green-filled:var(--color-green-8);--color-green-filled-hover:var(--color-green-9);--color-green-light:alpha(var(--color-green-8),0.15);--color-green-light-hover:alpha(var(--color-green-8),0.2);--color-green-light-color:var(--color-green-0);--color-green-outline:var(--color-green-4);--color-green-outline-hover:alpha(var(--color-green-4),0.05);--color-lime-color:var(--color-lime-4);--color-lime-filled:var(--color-lime-8);--color-lime-filled-hover:var(--color-lime-9);--color-lime-light:alpha(var(--color-lime-8),0.15);--color-lime-light-hover:alpha(var(--color-lime-8),0.2);--color-lime-light-color:var(--color-lime-0);--color-lime-outline:var(--color-lime-4);--color-lime-outline-hover:alpha(var(--color-lime-4),0.05);--color-yellow-color:var(--color-yellow-4);--color-yellow-filled:var(--color-yellow-8);--color-yellow-filled-hover:var(--color-yellow-9);--color-yellow-light:alpha(var(--color-yellow-8),0.15);--color-yellow-light-hover:alpha(var(--color-yellow-8),0.2);--color-yellow-light-color:var(--color-yellow-0);--color-yellow-outline:var(--color-yellow-4);--color-yellow-outline-hover:alpha(var(--color-yellow-4),0.05);--color-orange-color:var(--color-orange-4);--color-orange-filled:var(--color-orange-8);--color-orange-filled-hover:var(--color-orange-9);--color-orange-light:alpha(var(--color-orange-8),0.15);--color-orange-light-hover:alpha(var(--color-orange-8),0.2);--color-orange-light-color:var(--color-orange-0);--color-orange-outline:var(--color-orange-4);--color-orange-outline-hover:alpha(var(--color-orange-4),0.05)}}
|
|
@@ -4,13 +4,13 @@ export type NuanceSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
4
4
|
export type NuanceBreakpoint = NuanceSize | 'base';
|
|
5
5
|
export type NuanceFontSize = NuanceSize;
|
|
6
6
|
export type NuanceRadius = NuanceSize | 'full' | number;
|
|
7
|
-
export type NuanceSpacing = NuanceSize | number;
|
|
7
|
+
export type NuanceSpacing = NuanceSize | '2xs' | '2xl' | number;
|
|
8
8
|
export type NuanceShadow = NuanceSize;
|
|
9
9
|
export type NuanceLineHeight = NuanceSize;
|
|
10
10
|
/** Numeric shade index within a color palette, from lightest (0) to darkest (9). */
|
|
11
11
|
export type NuanceColorShade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
|
|
12
|
-
type ShadedColor = `dark.${NuanceColorShade}` | `
|
|
13
|
-
export type NuanceDefaultThemeColor = 'dark' | '
|
|
12
|
+
type ShadedColor = `dark.${NuanceColorShade}` | `gray.${NuanceColorShade}` | `red.${NuanceColorShade}` | `pink.${NuanceColorShade}` | `grape.${NuanceColorShade}` | `violet.${NuanceColorShade}` | `indigo.${NuanceColorShade}` | `blue.${NuanceColorShade}` | `cyan.${NuanceColorShade}` | `green.${NuanceColorShade}` | `lime.${NuanceColorShade}` | `yellow.${NuanceColorShade}` | `orange.${NuanceColorShade}` | `teal.${NuanceColorShade}` | `primary.${NuanceColorShade}`;
|
|
13
|
+
export type NuanceDefaultThemeColor = 'dark' | 'gray' | 'red' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'teal' | 'black' | 'white' | 'primary';
|
|
14
14
|
/** Theme color token, optionally suffixed with a shade (e.g. `blue.6`). */
|
|
15
15
|
export type NuanceColor = NuanceDefaultThemeColor | ShadedColor;
|
|
16
16
|
/** Resolved color scheme currently applied to the document. */
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { getColorVar } from "./get-color-var.js";
|
|
2
2
|
const themeColors = [
|
|
3
3
|
"dark",
|
|
4
|
-
"slate",
|
|
5
4
|
"gray",
|
|
6
5
|
"red",
|
|
7
6
|
"pink",
|
|
@@ -25,7 +24,7 @@ export function parseThemeColor({
|
|
|
25
24
|
}) {
|
|
26
25
|
if (typeof color !== "string") {
|
|
27
26
|
throw new TypeError(
|
|
28
|
-
`[@ui
|
|
27
|
+
`[@nuance-ui] Failed to parse color. Expected color to be a string, instead got ${typeof color}`
|
|
29
28
|
);
|
|
30
29
|
}
|
|
31
30
|
if (color === "dimmed") {
|