@profitliga/ui 2.0.0 → 2.0.2
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/components/BottomSheet/BottomSheet.css +1 -1
- package/dist/components/BottomSheet/BottomSheet.vue.js +1 -1
- package/dist/components/BottomSheet/BottomSheet.vue2.js +56 -56
- package/dist/components/Drawer/Drawer.vue.d.ts +1 -1
- package/dist/components/Drawer/Drawer.vue.js +4 -4
- package/dist/components/RangeCalendar/RangeCalendar.css +1 -1
- package/dist/components/RangeCalendar/RangeCalendar.vue.js +2 -2
- package/dist/components/RangeCalendar/RangeCalendar.vue2.js +42 -42
- package/dist/components/v2/Checkbox/Checkbox.css +1 -1
- package/dist/components/v2/Checkbox/Checkbox.vue.js +2 -2
- package/dist/components/v2/Checkbox/Checkbox.vue2.js +26 -26
- package/dist/components/v2/Combobox/Combobox.css +1 -1
- package/dist/components/v2/Combobox/Combobox.types.d.ts +49 -3
- package/dist/components/v2/Combobox/Combobox.vue.d.ts +23 -52
- package/dist/components/v2/Combobox/Combobox.vue.js +2 -2
- package/dist/components/v2/Combobox/Combobox.vue2.js +219 -193
- package/dist/components/v2/DatePicker/DatePicker.vue.d.ts +2 -2
- package/dist/components/v2/Divider/Divider.css +1 -1
- package/dist/components/v2/Divider/Divider.vue.js +1 -1
- package/dist/components/v2/Divider/Divider.vue2.js +10 -10
- package/dist/components/v2/DropdownMenu/DropdownMenu.vue.d.ts +2 -2
- package/dist/components/v2/File/FilePreviewDialog.vue.d.ts +1 -1
- package/dist/components/v2/FileUpload/FileUpload.vue.d.ts +1 -1
- package/dist/components/v2/FileUpload/FileUploadInline.vue.d.ts +1 -1
- package/dist/components/v2/InputNumber/InputNumber.css +1 -1
- package/dist/components/v2/InputNumber/InputNumber.vue.js +2 -2
- package/dist/components/v2/InputNumber/InputNumber.vue2.js +2 -2
- package/dist/components/v2/InputSelect/InputSelect.vue.d.ts +1 -1
- package/dist/components/v2/Popover/Popover.vue.d.ts +1 -1
- package/dist/components/v2/Select/Select.css +1 -1
- package/dist/components/v2/Select/Select.types.d.ts +50 -3
- package/dist/components/v2/Select/Select.vue.d.ts +20 -40
- package/dist/components/v2/Select/Select.vue.js +1 -1
- package/dist/components/v2/Select/Select.vue2.js +187 -164
- package/dist/components/v2/Tooltip/Tooltip.vue.d.ts +1 -1
- package/dist/components/v2/Tooltip/TooltipContent.vue.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { CalendarDate } from '@internationalized/date';
|
|
2
2
|
import { CalendarRangeValue, DatePickerProps, DatePickerLabels } from './DatePicker.types';
|
|
3
3
|
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
4
|
-
import { TBreakpoints } from '../../../types/global.types';
|
|
5
4
|
import { CalendarWeekStartsOn, CalendarWeekdayFormat } from '..';
|
|
5
|
+
import { TBreakpoints } from '../../../types/global.types';
|
|
6
6
|
type __VLS_Props = DatePickerProps;
|
|
7
7
|
type __VLS_PublicProps = {
|
|
8
8
|
modelValue?: CalendarDate | CalendarRangeValue | undefined;
|
|
@@ -17,7 +17,6 @@ declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, Compo
|
|
|
17
17
|
placeholder: string;
|
|
18
18
|
disabled: boolean;
|
|
19
19
|
width: number | "full";
|
|
20
|
-
breakpointMobile: TBreakpoints;
|
|
21
20
|
pagedNavigation: boolean;
|
|
22
21
|
weekStartsOn: CalendarWeekStartsOn;
|
|
23
22
|
weekdayFormat: CalendarWeekdayFormat;
|
|
@@ -27,6 +26,7 @@ declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, Compo
|
|
|
27
26
|
numberOfMonths: number;
|
|
28
27
|
isDateDisabled: (date: CalendarDate) => boolean;
|
|
29
28
|
range: boolean;
|
|
29
|
+
breakpointMobile: TBreakpoints;
|
|
30
30
|
format: string;
|
|
31
31
|
showClear: boolean;
|
|
32
32
|
testId: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.divider[data-v-
|
|
1
|
+
.divider-v2[data-v-c694304a]{--divider-color:var(--theme-neutral-250);--divider-thickness:1px;--divider-spacing:0rem;--divider-align-length:1.5rem;align-items:center;gap:.25rem;display:flex}.divider-v2--spacing-small[data-v-c694304a]{--divider-spacing:.5rem}.divider-v2--spacing-medium[data-v-c694304a]{--divider-spacing:1rem}.divider-v2--spacing-large[data-v-c694304a]{--divider-spacing:1.5rem}.divider-v2__content[data-v-c694304a]{color:var(--theme-neutral-text-caption);flex-shrink:0;font-size:.75rem;font-weight:400;line-height:1rem}.divider-v2__line[data-v-c694304a]{flex:auto}.divider-v2--dashed[data-v-c694304a]{--divider-style:dashed}.divider-v2--dotted[data-v-c694304a]{--divider-style:dotted}.divider-v2--horizontal[data-v-c694304a]{width:100%;margin-block:var(--divider-spacing)}.divider-v2--horizontal.divider-v2--plain[data-v-c694304a],.divider-v2--horizontal .divider-v2__line[data-v-c694304a]{border-block-start:var(--divider-thickness) var(--divider-style,solid) var(--divider-color)}.divider-v2--horizontal.divider-v2--start .divider-v2__line[data-v-c694304a]:first-child,.divider-v2--horizontal.divider-v2--end .divider-v2__line[data-v-c694304a]:last-child{flex:0 0 var(--divider-align-length)}.divider-v2--vertical[data-v-c694304a]{min-height:100%;margin-inline:var(--divider-spacing);flex-direction:column;align-self:stretch}.divider-v2--vertical.divider-v2--plain[data-v-c694304a],.divider-v2--vertical .divider-v2__line[data-v-c694304a]{border-inline-start:var(--divider-thickness) var(--divider-style,solid) var(--divider-color)}.divider-v2--vertical.divider-v2--start .divider-v2__line[data-v-c694304a]:first-child,.divider-v2--vertical.divider-v2--end .divider-v2__line[data-v-c694304a]:last-child{flex:0 0 var(--divider-align-length)}
|
|
@@ -2,7 +2,7 @@ import './Divider.css';
|
|
|
2
2
|
import o from "./Divider.vue2.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import r from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
-
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-
|
|
5
|
+
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c694304a"]]);
|
|
6
6
|
export {
|
|
7
7
|
m as default
|
|
8
8
|
};
|
|
@@ -15,12 +15,12 @@ const C = ["role", "aria-orientation", "aria-hidden"], N = /* @__PURE__ */ m({
|
|
|
15
15
|
testId: { default: void 0 }
|
|
16
16
|
},
|
|
17
17
|
setup(t) {
|
|
18
|
-
const e = t,
|
|
19
|
-
"divider",
|
|
20
|
-
`divider--${e.orientation}`,
|
|
21
|
-
`divider--${e.variant}`,
|
|
22
|
-
`divider--spacing-${e.spacing}`,
|
|
23
|
-
d.value ? `divider--${e.align}` : "divider--plain"
|
|
18
|
+
const e = t, v = p(), o = B(() => e.testId), d = r(() => !!(e.label || v.default)), u = r(() => [
|
|
19
|
+
"divider-v2",
|
|
20
|
+
`divider-v2--${e.orientation}`,
|
|
21
|
+
`divider-v2--${e.variant}`,
|
|
22
|
+
`divider-v2--spacing-${e.spacing}`,
|
|
23
|
+
d.value ? `divider-v2--${e.align}` : "divider-v2--plain"
|
|
24
24
|
]), f = r(() => {
|
|
25
25
|
const i = {
|
|
26
26
|
"--divider-thickness": `${e.thickness}px`
|
|
@@ -28,20 +28,20 @@ const C = ["role", "aria-orientation", "aria-hidden"], N = /* @__PURE__ */ m({
|
|
|
28
28
|
return e.color && (i["--divider-color"] = e.color), i;
|
|
29
29
|
});
|
|
30
30
|
return (i, S) => (s(), c("div", a({
|
|
31
|
-
class:
|
|
31
|
+
class: u.value,
|
|
32
32
|
style: f.value,
|
|
33
33
|
role: t.decorative ? void 0 : "separator",
|
|
34
34
|
"aria-orientation": t.decorative || t.orientation === "horizontal" ? void 0 : "vertical",
|
|
35
35
|
"aria-hidden": t.decorative ? "true" : void 0
|
|
36
36
|
}, { ...i.$attrs, ...n(o)("root") }), [
|
|
37
37
|
d.value ? (s(), c(h, { key: 0 }, [
|
|
38
|
-
l("span", a({ class: "
|
|
39
|
-
l("span", a({ class: "
|
|
38
|
+
l("span", a({ class: "divider-v2__line" }, n(o)("line", "start")), null, 16),
|
|
39
|
+
l("span", a({ class: "divider-v2__content" }, n(o)("content")), [
|
|
40
40
|
g(i.$slots, "default", {}, () => [
|
|
41
41
|
$(k(t.label), 1)
|
|
42
42
|
], !0)
|
|
43
43
|
], 16),
|
|
44
|
-
l("span", a({ class: "
|
|
44
|
+
l("span", a({ class: "divider-v2__line" }, n(o)("line", "end")), null, 16)
|
|
45
45
|
], 64)) : y("", !0)
|
|
46
46
|
], 16, C));
|
|
47
47
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DropdownMenuItemData, DropdownMenuProps } from './DropdownMenu.types';
|
|
2
2
|
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
3
|
-
import { TBreakpoints } from '../../../types/global.types';
|
|
4
3
|
import { PopoverSide, PopoverAlign } from '..';
|
|
4
|
+
import { TBreakpoints } from '../../../types/global.types';
|
|
5
5
|
type __VLS_Props = DropdownMenuProps;
|
|
6
6
|
type __VLS_PublicProps = {
|
|
7
7
|
'open'?: boolean;
|
|
@@ -38,11 +38,11 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
|
|
|
38
38
|
width: number;
|
|
39
39
|
disableOutsidePointerEvents: boolean;
|
|
40
40
|
zIndex: number | "auto";
|
|
41
|
-
breakpointMobile: TBreakpoints;
|
|
42
41
|
side: PopoverSide;
|
|
43
42
|
sideOffset: number;
|
|
44
43
|
align: PopoverAlign;
|
|
45
44
|
alignOffset: number;
|
|
45
|
+
breakpointMobile: TBreakpoints;
|
|
46
46
|
arrow: boolean;
|
|
47
47
|
testId: string;
|
|
48
48
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {
|
|
@@ -24,8 +24,8 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
|
|
|
24
24
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
25
25
|
}>, {
|
|
26
26
|
width: number;
|
|
27
|
-
breakpointMobile: TBreakpoints;
|
|
28
27
|
file: FileItem | null;
|
|
28
|
+
breakpointMobile: TBreakpoints;
|
|
29
29
|
testId: string;
|
|
30
30
|
deletable: boolean;
|
|
31
31
|
deleteText: string;
|
|
@@ -40,8 +40,8 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
|
|
|
40
40
|
required: boolean;
|
|
41
41
|
title: string;
|
|
42
42
|
id: string;
|
|
43
|
-
breakpointMobile: TBreakpoints;
|
|
44
43
|
name: string;
|
|
44
|
+
breakpointMobile: TBreakpoints;
|
|
45
45
|
accept: string;
|
|
46
46
|
testId: string;
|
|
47
47
|
preview: boolean;
|
|
@@ -26,8 +26,8 @@ declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, Compo
|
|
|
26
26
|
disabled: boolean;
|
|
27
27
|
id: string;
|
|
28
28
|
icon: Component;
|
|
29
|
-
breakpointMobile: TBreakpoints;
|
|
30
29
|
name: string;
|
|
30
|
+
breakpointMobile: TBreakpoints;
|
|
31
31
|
accept: string;
|
|
32
32
|
ariaLabel: string;
|
|
33
33
|
testId: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.number-field[data-v-
|
|
1
|
+
.number-field[data-v-6e5e2c7b]{--step-height:2.25rem;--step-radius:.5rem;--step-padding-x:.75rem;--step-gap:.5rem;--step-icon-size:1rem;--step-font-size:.875rem;--step-line-height:1.25rem;--step-value-width:1.75rem;--step-border-color:var(--theme-neutral-border-default);--step-icon-color:var(--theme-secondary-500);--step-text-color:var(--theme-neutral-text-title);width:max-content;height:var(--step-height);justify-content:center;align-items:center;gap:var(--step-gap);padding:0 var(--step-padding-x);background-color:var(--theme-neutral-0);border:.0625rem solid var(--step-border-color);border-radius:var(--step-radius);transition:border-color var(--animation-duration-fast) ease;display:flex}.number-field[data-v-6e5e2c7b]:not(.number-field--disabled):hover{--step-border-color:var(--theme-primary-300)}.number-field[data-v-6e5e2c7b]:not(.number-field--disabled):focus-within{--step-border-color:var(--theme-primary-500)}.number-field__button[data-v-6e5e2c7b]{cursor:pointer;color:var(--step-icon-color);transition:color var(--animation-duration-fast) ease;background-color:#0000;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.number-field__button[data-v-6e5e2c7b] svg{width:var(--step-icon-size);height:var(--step-icon-size)}.number-field__button[data-v-6e5e2c7b]:hover:not(:disabled){color:var(--theme-secondary-600)}.number-field__button[data-v-6e5e2c7b]:disabled{color:var(--theme-neutral-icon-disabled);cursor:not-allowed}.number-field__button[data-v-6e5e2c7b]:focus-visible{outline:.125rem solid var(--theme-primary-500);outline-offset:.125rem;border-radius:.25rem}.number-field__value[data-v-6e5e2c7b]{width:var(--step-value-width);font-family:inherit;font-weight:400;font-size:var(--step-font-size);line-height:var(--step-line-height);text-align:center;color:var(--step-text-color);background-color:#0000;border:none;outline:none;flex-shrink:0}@media (max-width:1009.98px){.number-field__value[data-v-6e5e2c7b]{font-size:1rem}}.number-field__value[data-v-6e5e2c7b]::placeholder{color:var(--theme-neutral-550)}.number-field__value[data-v-6e5e2c7b]:disabled{cursor:not-allowed;-webkit-text-fill-color:var(--step-text-color);opacity:1}.number-field--small[data-v-6e5e2c7b]{--step-height:1.5rem;--step-padding-x:.5rem;--step-icon-size:.75rem;--step-font-size:.75rem;--step-line-height:1rem;--step-value-width:1.5rem}.number-field--medium[data-v-6e5e2c7b]{--step-height:2.5rem;--step-padding-x:1rem;--step-icon-size:1.125rem;--step-font-size:1rem;--step-line-height:1.5rem;--step-value-width:2rem}.number-field--large[data-v-6e5e2c7b]{--step-height:2.75rem;--step-radius:.75rem;--step-padding-x:1rem;--step-icon-size:1.25rem;--step-font-size:1rem;--step-line-height:1.5rem;--step-value-width:2rem}.number-field--error[data-v-6e5e2c7b]{--step-border-color:var(--theme-error-500)}.number-field--disabled[data-v-6e5e2c7b]{--step-border-color:var(--theme-neutral-border-disabled);--step-icon-color:var(--theme-neutral-icon-disabled);--step-text-color:var(--theme-neutral-400);cursor:not-allowed}
|
|
@@ -2,7 +2,7 @@ import './InputNumber.css';
|
|
|
2
2
|
import o from "./InputNumber.vue2.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import t from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
-
const
|
|
5
|
+
const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6e5e2c7b"]]);
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
p as default
|
|
8
8
|
};
|
|
@@ -98,12 +98,12 @@ const ce = ["disabled", "aria-label"], me = ["id", "value", "name", "placeholder
|
|
|
98
98
|
select: () => c.value?.select()
|
|
99
99
|
}), (e, t) => V.value ? (S(), ne(d(de), {
|
|
100
100
|
key: 0,
|
|
101
|
+
id: a.id,
|
|
101
102
|
ref_key: "inputRef",
|
|
102
103
|
ref: x,
|
|
103
104
|
class: "number-field__input",
|
|
104
105
|
"model-value": o.value,
|
|
105
106
|
size: H.value,
|
|
106
|
-
id: a.id,
|
|
107
107
|
label: a.label,
|
|
108
108
|
"support-text": a.supportText,
|
|
109
109
|
error: a.error,
|
|
@@ -121,7 +121,7 @@ const ce = ["disabled", "aria-label"], me = ["id", "value", "name", "placeholder
|
|
|
121
121
|
onBlur: R,
|
|
122
122
|
onFocus: t[0] || (t[0] = (n) => u("focus", n)),
|
|
123
123
|
onKeydown: $
|
|
124
|
-
}, null, 8, ["model-value", "size", "
|
|
124
|
+
}, null, 8, ["id", "model-value", "size", "label", "support-text", "error", "error-message", "placeholder", "disabled", "readonly", "required", "aria-label", "name", "test-id"])) : (S(), re("div", b({
|
|
125
125
|
key: 1,
|
|
126
126
|
class: Z.value
|
|
127
127
|
}, d(p)("root")), [
|
|
@@ -204,10 +204,10 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
|
|
|
204
204
|
disabled: boolean;
|
|
205
205
|
required: boolean;
|
|
206
206
|
id: string;
|
|
207
|
-
breakpointMobile: TBreakpoints;
|
|
208
207
|
error: boolean;
|
|
209
208
|
readonly: boolean;
|
|
210
209
|
name: string;
|
|
210
|
+
breakpointMobile: TBreakpoints;
|
|
211
211
|
rows: number;
|
|
212
212
|
errorMessage: string;
|
|
213
213
|
maxlength: number;
|
|
@@ -39,11 +39,11 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
|
|
|
39
39
|
trapFocus: boolean;
|
|
40
40
|
disableOutsidePointerEvents: boolean;
|
|
41
41
|
zIndex: number | "auto";
|
|
42
|
-
breakpointMobile: TBreakpoints;
|
|
43
42
|
side: PopoverSide;
|
|
44
43
|
sideOffset: number;
|
|
45
44
|
align: PopoverAlign;
|
|
46
45
|
alignOffset: number;
|
|
46
|
+
breakpointMobile: TBreakpoints;
|
|
47
47
|
arrow: boolean;
|
|
48
48
|
testId: string;
|
|
49
49
|
labelledBy: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.select[data-v-
|
|
1
|
+
.select[data-v-e9d9c5e5]{--select-field-height:2.5rem;--select-field-radius:.5rem;--select-font-size:.875rem;--select-line-height:1.25rem;--select-label-font-size:.875rem;--select-label-line-height:1rem;--select-border-color:var(--theme-neutral-border-default);flex-direction:column;display:flex}.select--small[data-v-e9d9c5e5]{--select-field-height:2.25rem;--select-label-font-size:.75rem}.select--large[data-v-e9d9c5e5]{--select-field-height:2.75rem;--select-field-radius:.75rem;--select-font-size:1rem;--select-line-height:1.5rem;--select-label-font-size:1rem;--select-label-line-height:1.25rem}.select__label[data-v-e9d9c5e5]{font-weight:400;font-size:var(--select-label-font-size);line-height:var(--select-label-line-height);color:var(--theme-neutral-text-title);cursor:pointer;padding:.375rem .5rem}.select__field[data-v-e9d9c5e5]{min-height:var(--select-field-height);background-color:var(--theme-neutral-0);border:.0625rem solid var(--select-border-color);border-radius:var(--select-field-radius);transition:border-color var(--animation-duration-fast) ease;align-items:center;gap:.25rem;padding:.25rem .5rem;display:flex;position:relative}.select[data-v-e9d9c5e5] .popover-trigger{position:absolute;inset:0}.select__trigger[data-v-e9d9c5e5]{border-radius:inherit;cursor:pointer;background:0 0;border:none;width:100%;height:100%;padding:0}.select__trigger[data-v-e9d9c5e5]:disabled{cursor:not-allowed}.select__content[data-v-e9d9c5e5]{z-index:1;pointer-events:none;flex:auto;align-items:center;gap:.25rem;min-width:0;display:flex;position:relative}.select__chips[data-v-e9d9c5e5]{flex:0 auto;align-items:center;gap:.25rem;min-width:0;display:flex;overflow:hidden}.select__value[data-v-e9d9c5e5],.select__placeholder[data-v-e9d9c5e5]{min-width:0;font-weight:400;font-size:var(--select-font-size);line-height:var(--select-line-height);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.select__value[data-v-e9d9c5e5]{color:var(--theme-neutral-text-body)}.select__placeholder[data-v-e9d9c5e5]{color:var(--theme-neutral-550)}.select__chip[data-v-e9d9c5e5]{max-width:100%;height:1.125rem;color:var(--theme-neutral-text-subtitle);background-color:var(--theme-neutral-surface-icon);border-radius:.375rem;flex-shrink:0;align-items:center;gap:.5rem;padding:0 .375rem;font-size:.75rem;font-weight:400;line-height:1rem;display:flex}.select__chip-label[data-v-e9d9c5e5]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.select__chip-remove[data-v-e9d9c5e5]{color:var(--theme-neutral-icon-caption);cursor:pointer;pointer-events:auto;transition:color var(--animation-duration-fast) ease;background:0 0;border:none;align-items:center;margin:0;padding:0;display:flex}.select__chip-remove[data-v-e9d9c5e5]:hover:not(:disabled){color:var(--theme-neutral-text-body)}.select__chip-remove[data-v-e9d9c5e5]:focus-visible{outline:.125rem solid var(--theme-primary-500);outline-offset:.125rem}.select__chip-remove[data-v-e9d9c5e5]:disabled{cursor:not-allowed}.select__chip-icon[data-v-e9d9c5e5],.select__chip-avatar[data-v-e9d9c5e5]{flex-shrink:0;width:.75rem;height:.75rem}.select__chip-avatar[data-v-e9d9c5e5]{object-fit:cover;border-radius:50%}.select__chip--measured[data-v-e9d9c5e5]{visibility:hidden;pointer-events:none;position:absolute;top:0;left:-9999px}.select__chip--counter[data-v-e9d9c5e5]{color:var(--theme-neutral-text-caption);flex-shrink:0}.select__arrow[data-v-e9d9c5e5]{width:1.125rem;height:1.125rem;color:var(--theme-neutral-text-body);pointer-events:none;transition:transform var(--animation-duration-fast) ease;flex-shrink:0}.select__message[data-v-e9d9c5e5]{color:var(--theme-neutral-text-body);margin:0;padding:.25rem .5rem;font-size:.625rem;font-weight:400;line-height:1.2}.select[data-v-e9d9c5e5]:hover:not(.select--disabled){--select-border-color:var(--theme-primary-300)}.select--open[data-v-e9d9c5e5],.select--open[data-v-e9d9c5e5]:hover{--select-border-color:var(--theme-primary-500)}.select--open .select__arrow[data-v-e9d9c5e5]{transform:rotate(180deg)}.select--invalid[data-v-e9d9c5e5]{--select-border-color:var(--theme-error-500)}.select--invalid .select__label[data-v-e9d9c5e5],.select--invalid .select__message[data-v-e9d9c5e5]{color:var(--theme-error-500)}.select--invalid[data-v-e9d9c5e5]:hover:not(.select--disabled){--select-border-color:var(--theme-error-500)}.select--disabled[data-v-e9d9c5e5]{--select-border-color:var(--theme-neutral-border-disabled)}.select--disabled .select__label[data-v-e9d9c5e5],.select--disabled .select__value[data-v-e9d9c5e5],.select--disabled .select__placeholder[data-v-e9d9c5e5],.select--disabled .select__message[data-v-e9d9c5e5],.select--disabled .select__arrow[data-v-e9d9c5e5]{color:var(--theme-neutral-text-disabled)}.select--disabled .select__label[data-v-e9d9c5e5]{cursor:not-allowed}.select__field[data-v-e9d9c5e5]:has(.select__trigger:focus-visible){outline:.125rem solid var(--theme-primary-500);outline-offset:.125rem}.select-list[data-v-e9d9c5e5]{outline:none;flex-direction:column;gap:.5rem;padding:.5rem;display:flex}.select-list__option[data-v-e9d9c5e5]{width:100%;min-height:2rem;color:var(--theme-neutral-text-title);text-align:left;cursor:pointer;transition:background-color var(--animation-duration-fast) ease;background-color:#0000;border-radius:.5rem;align-items:flex-start;gap:.5rem;padding:.375rem .5rem;font-size:.875rem;font-weight:400;line-height:1.25rem;display:flex}.select-list__option[data-v-e9d9c5e5]:hover:not(.select-list__option--disabled),.select-list__option--active[data-v-e9d9c5e5]{background-color:var(--theme-secondary-50)}.select-list__option--disabled[data-v-e9d9c5e5]{cursor:not-allowed;opacity:.5}.select-list__label[data-v-e9d9c5e5]{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;overflow:hidden}.select-list__empty[data-v-e9d9c5e5]{color:var(--theme-neutral-text-caption);margin:0;padding:.25rem .5rem;font-size:.875rem;line-height:1.25rem}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component } from 'vue';
|
|
1
|
+
import { Component, VNodeChild } from 'vue';
|
|
2
2
|
import { TBreakpoints } from '../../../types/global.types';
|
|
3
3
|
import { PopoverAlign, PopoverSide } from '../Popover';
|
|
4
4
|
export type SelectSize = 'small' | 'default' | 'large';
|
|
@@ -12,8 +12,55 @@ export interface SelectOptionData {
|
|
|
12
12
|
/** Картинка 12×12 (аватар) перед подписью выбранного значения. */
|
|
13
13
|
avatar?: string;
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Слоты перекрывают то, что компонент рисует по данным варианта: сначала
|
|
17
|
+
* проверяется слот, и только без него в дело идёт `label` и тексты из пропов.
|
|
18
|
+
*
|
|
19
|
+
* Набор намеренно повторяет `ComboboxSlots` — компоненты соседние, и
|
|
20
|
+
* разъехавшийся API слотов заставлял бы переучиваться при переходе с одного
|
|
21
|
+
* на другой. Строки загрузки у `Select` нет, поэтому нет и слота `loading`.
|
|
22
|
+
*/
|
|
23
|
+
export interface SelectSlots<T extends SelectOptionData = SelectOptionData> {
|
|
24
|
+
/**
|
|
25
|
+
* Строка списка. Маркер выбора остаётся снаружи слота — он часть
|
|
26
|
+
* механики выбора, а не содержимого варианта.
|
|
27
|
+
*
|
|
28
|
+
* Внутри `role="option"`, поэтому интерактивные элементы (кнопки, ссылки,
|
|
29
|
+
* поля) сюда класть нельзя: скринридер до них не доберётся.
|
|
30
|
+
*/
|
|
31
|
+
option?: (props: {
|
|
32
|
+
option: T;
|
|
33
|
+
/** Вариант входит в текущее значение. */
|
|
34
|
+
selected: boolean;
|
|
35
|
+
/** Строка под курсором или выбрана с клавиатуры. */
|
|
36
|
+
active: boolean;
|
|
37
|
+
index: number;
|
|
38
|
+
}) => VNodeChild;
|
|
39
|
+
/**
|
|
40
|
+
* Содержимое чипа выбранного значения при `multiple`. Кнопка «убрать»
|
|
41
|
+
* остаётся снаружи — без неё значение нечем снять.
|
|
42
|
+
*
|
|
43
|
+
* Ширину чипов компонент меряет, чтобы спрятать лишние за счётчик «+n»:
|
|
44
|
+
* содержимое переменной ширины это переживает, а вот `width` в процентах
|
|
45
|
+
* внутри слота меряться будет не от того.
|
|
46
|
+
*/
|
|
47
|
+
chip?: (props: {
|
|
48
|
+
option: T;
|
|
49
|
+
index: number;
|
|
50
|
+
}) => VNodeChild;
|
|
51
|
+
/**
|
|
52
|
+
* Выбранное значение в поле — только при одиночном выборе. При `multiple`
|
|
53
|
+
* его место занимают чипы, и слот не вызывается.
|
|
54
|
+
*/
|
|
55
|
+
value?: (props: {
|
|
56
|
+
option: T | undefined;
|
|
57
|
+
displayValue: string;
|
|
58
|
+
}) => VNodeChild;
|
|
59
|
+
/** Пустой список: вариантов не передали вовсе. */
|
|
60
|
+
empty?: () => VNodeChild;
|
|
61
|
+
}
|
|
62
|
+
export interface SelectProps<T extends SelectOptionData = SelectOptionData> {
|
|
63
|
+
options: T[];
|
|
17
64
|
/** Множественный выбор: список не закрывается, значения показываются чипами. */
|
|
18
65
|
multiple?: boolean;
|
|
19
66
|
/** Подпись над полем. */
|
|
@@ -1,41 +1,21 @@
|
|
|
1
|
-
import { SelectOptionData, SelectProps,
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
} &
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
multiple: boolean;
|
|
19
|
-
label: string;
|
|
20
|
-
size: SelectSize;
|
|
21
|
-
placeholder: string;
|
|
22
|
-
disabled: boolean;
|
|
23
|
-
width: number;
|
|
24
|
-
breakpointMobile: TBreakpoints;
|
|
25
|
-
invalid: boolean;
|
|
26
|
-
errorText: string;
|
|
27
|
-
side: PopoverSide;
|
|
28
|
-
sideOffset: number;
|
|
29
|
-
align: PopoverAlign;
|
|
30
|
-
alignOffset: number;
|
|
31
|
-
ariaLabel: string;
|
|
32
|
-
testId: string;
|
|
33
|
-
supportText: string;
|
|
34
|
-
}, {}, {}, {}, string, ComponentProvideOptions, false, {
|
|
35
|
-
fieldRef: HTMLDivElement;
|
|
36
|
-
listRef: HTMLDivElement;
|
|
37
|
-
contentRef: HTMLDivElement;
|
|
38
|
-
chipsRef: HTMLSpanElement;
|
|
39
|
-
counterRef: HTMLSpanElement;
|
|
40
|
-
}, any>;
|
|
1
|
+
import { SelectOptionData, SelectProps, SelectSlots, SelectValue } from './Select.types';
|
|
2
|
+
import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
|
|
3
|
+
declare const _default: <T extends SelectOptionData = SelectOptionData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
4
|
+
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
|
|
5
|
+
readonly "onUpdate:modelValue"?: ((value: SelectValue | SelectValue[] | undefined) => any) | undefined;
|
|
6
|
+
readonly onSelect?: ((option: T) => any) | undefined;
|
|
7
|
+
readonly onChange?: ((value: SelectValue | SelectValue[] | undefined) => any) | undefined;
|
|
8
|
+
} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onUpdate:modelValue" | "onChange" | "onSelect"> & ({
|
|
9
|
+
modelValue?: SelectValue | SelectValue[] | undefined;
|
|
10
|
+
} & SelectProps<T>) & Partial<{}>> & PublicProps;
|
|
11
|
+
expose(exposed: ShallowUnwrapRef<{}>): void;
|
|
12
|
+
attrs: any;
|
|
13
|
+
slots: Readonly<SelectSlots<T>> & SelectSlots<T>;
|
|
14
|
+
emit: (((evt: "select", option: T) => void) & ((evt: "change", value: SelectValue | SelectValue[] | undefined) => void)) & ((evt: "update:modelValue", value: SelectValue | SelectValue[] | undefined) => void);
|
|
15
|
+
}>) => VNode & {
|
|
16
|
+
__ctx?: Awaited<typeof __VLS_setup>;
|
|
17
|
+
};
|
|
41
18
|
export default _default;
|
|
19
|
+
type __VLS_PrettifyLocal<T> = {
|
|
20
|
+
[K in keyof T]: T[K];
|
|
21
|
+
} & {};
|
|
@@ -2,7 +2,7 @@ import './Select.css';
|
|
|
2
2
|
import o from "./Select.vue2.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import t from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
-
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-
|
|
5
|
+
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-e9d9c5e5"]]);
|
|
6
6
|
export {
|
|
7
7
|
m as default
|
|
8
8
|
};
|