nuance-ui 0.2.17 → 0.2.19
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/center.d.vue.ts +18 -0
- package/dist/runtime/components/center.vue +26 -0
- package/dist/runtime/components/center.vue.d.ts +18 -0
- 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/group.d.vue.ts +28 -0
- package/dist/runtime/components/group.vue +39 -0
- package/dist/runtime/components/group.vue.d.ts +28 -0
- package/dist/runtime/components/index.d.ts +2 -0
- package/dist/runtime/components/input/ui/input-base.d.vue.ts +1 -0
- package/dist/runtime/components/input/ui/input-base.vue +3 -2
- package/dist/runtime/components/input/ui/input-base.vue.d.ts +1 -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/pin-input/lib.d.ts +2 -0
- package/dist/runtime/components/pin-input/lib.js +19 -0
- package/dist/runtime/components/pin-input/pin-input.d.vue.ts +55 -0
- package/dist/runtime/components/pin-input/pin-input.vue +171 -0
- package/dist/runtime/components/pin-input/pin-input.vue.d.ts +55 -0
- package/dist/runtime/components/pin-input/use-pin-input.d.ts +18 -0
- package/dist/runtime/components/pin-input/use-pin-input.js +94 -0
- 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/stack.d.vue.ts +24 -0
- package/dist/runtime/components/stack.vue +33 -0
- package/dist/runtime/components/stack.vue.d.ts +24 -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
|
@@ -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") {
|