@knime/kds-components 0.5.6 → 0.5.7
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/Modal/KdsModal.vue.d.ts +1 -1
- package/dist/forms/KdsLabel.vue.d.ts +6 -0
- package/dist/forms/KdsLabel.vue.d.ts.map +1 -0
- package/dist/forms/KdsSubText.vue.d.ts +7 -0
- package/dist/forms/KdsSubText.vue.d.ts.map +1 -0
- package/dist/forms/RadioButton/KdsRadioButtonGroup.vue.d.ts +15 -1
- package/dist/forms/RadioButton/KdsRadioButtonGroup.vue.d.ts.map +1 -1
- package/dist/forms/RadioButton/KdsValueSwitch.vue.d.ts +19 -0
- package/dist/forms/RadioButton/KdsValueSwitch.vue.d.ts.map +1 -0
- package/dist/forms/RadioButton/ValueSwitchItem.vue.d.ts +3 -0
- package/dist/forms/RadioButton/ValueSwitchItem.vue.d.ts.map +1 -0
- package/dist/forms/RadioButton/types.d.ts +46 -4
- package/dist/forms/RadioButton/types.d.ts.map +1 -1
- package/dist/forms/RadioButton/useRadioSelection.d.ts +22 -0
- package/dist/forms/RadioButton/useRadioSelection.d.ts.map +1 -0
- package/dist/forms/RadioButton/useValueSwitchIconHiding.d.ts +20 -0
- package/dist/forms/RadioButton/useValueSwitchIconHiding.d.ts.map +1 -0
- package/dist/forms/index.d.ts +4 -1
- package/dist/forms/index.d.ts.map +1 -1
- package/dist/forms/types.d.ts +16 -4
- package/dist/forms/types.d.ts.map +1 -1
- package/dist/index.css +144 -20
- package/dist/index.js +480 -177
- package/dist/index.js.map +1 -1
- package/dist/local-filesystem-hArfE0_N.js +23 -0
- package/dist/local-filesystem-hArfE0_N.js.map +1 -0
- package/dist/minimize-side-panel-Brx7aXNg.js +23 -0
- package/dist/minimize-side-panel-Brx7aXNg.js.map +1 -0
- package/dist/util/index.d.ts +1 -0
- package/dist/util/index.d.ts.map +1 -1
- package/dist/util/useKdsIsTruncated.d.ts +18 -0
- package/dist/util/useKdsIsTruncated.d.ts.map +1 -0
- package/package.json +2 -2
- package/dist/local-filesystem-D9Znqo5U.js +0 -23
- package/dist/local-filesystem-D9Znqo5U.js.map +0 -1
|
@@ -4,7 +4,7 @@ declare function __VLS_template(): {
|
|
|
4
4
|
slots: {
|
|
5
5
|
default?(_: {
|
|
6
6
|
title: string;
|
|
7
|
-
icon: "ai-general" | "annotation-mode" | "arrow-down" | "arrow-up" | "arrows-expand" | "arrows-move" | "arrows-order" | "back" | "bold" | "calendar" | "case-sensitive" | "center-aligned" | "checkmark" | "chevron-down" | "chevron-left-double" | "chevron-left" | "chevron-right-double" | "chevron-right" | "chevron-up" | "circle-error" | "circle-info" | "circle-question" | "circle-success" | "cloud-download" | "cloud-knime" | "cloud-pending-changes" | "cloud-synced" | "cloud-upload" | "cloud-workflow" | "code-block" | "color-picker" | "comment" | "component" | "connection" | "copy" | "cursor" | "data-app" | "data-value-view" | "date-time" | "db-database" | "db-schema" | "db-table-view" | "db-table" | "deploy" | "detect" | "divider" | "duration" | "edit" | "education" | "error-panel" | "execute-all" | "execute" | "expand-panel" | "extension-community" | "extension" | "external-link" | "eye" | "file-export" | "file-text" | "file" | "filter" | "flow-variable-default" | "flow-variable-in-out" | "flow-variable-in" | "flow-variable-out" | "folder-plus" | "folder-workflow" | "folder" | "forum" | "function-catalog" | "home" | "import" | "info" | "interval" | "italic" | "layout-editor" | "left-aligned" | "like" | "limit" | "link" | "linked-metanode" | "list-bulletpoint" | "list-number" | "list-thumbs" | "list" | "local-filesystem" | "lock" | "metanode" | "mini-map" | "minimize-dialog" | "minus" | "more-actions" | "node-stack" | "nodes-align-horiz" | "nodes-align-vert" | "open-in-new-window" | "pan-mode" | "parameter" | "pending-changes" | "placeholder" | "plus" | "quote" | "re-execution" | "redo" | "regex" | "reload" | "rename" | "replace" | "reset-all" | "resume-execution" | "right-aligned" | "rocket" | "save-as" | "save" | "schedule" | "search" | "selected-cancel" | "selected-execution" | "selected-reset" | "send" | "server-rack-workflow" | "settings" | "share" | "shortcuts" | "sort-ascending" | "sort-descending" | "space-local" | "space-private" | "space" | "stepwise-execution" | "strikethrough" | "text" | "textstyles" | "thumbs-down" | "thumbs-up" | "time" | "to-bottom" | "to-top" | "trash" | "trigger" | "underline" | "undo" | "unlink" | "user" | "view-cards" | "warning" | "workflow" | "x-close";
|
|
7
|
+
icon: "ai-general" | "annotation-mode" | "arrow-down" | "arrow-up" | "arrows-expand" | "arrows-move" | "arrows-order" | "back" | "bold" | "calendar" | "case-sensitive" | "center-aligned" | "checkmark" | "chevron-down" | "chevron-left-double" | "chevron-left" | "chevron-right-double" | "chevron-right" | "chevron-up" | "circle-error" | "circle-info" | "circle-question" | "circle-success" | "cloud-download" | "cloud-knime" | "cloud-pending-changes" | "cloud-synced" | "cloud-upload" | "cloud-workflow" | "code-block" | "color-picker" | "comment" | "component" | "connection" | "copy" | "cursor" | "data-app" | "data-value-view" | "date-time" | "db-database" | "db-schema" | "db-table-view" | "db-table" | "deploy" | "detect" | "divider" | "duration" | "edit" | "education" | "error-panel" | "execute-all" | "execute" | "expand-panel" | "extension-community" | "extension" | "external-link" | "eye" | "file-export" | "file-text" | "file" | "filter" | "flow-variable-default" | "flow-variable-in-out" | "flow-variable-in" | "flow-variable-out" | "folder-plus" | "folder-workflow" | "folder" | "forum" | "function-catalog" | "home" | "import" | "info" | "interval" | "italic" | "layout-editor" | "left-aligned" | "like" | "limit" | "link" | "linked-metanode" | "list-bulletpoint" | "list-number" | "list-thumbs" | "list" | "local-filesystem" | "lock" | "metanode" | "mini-map" | "minimize-dialog" | "minimize-side-panel" | "minus" | "more-actions" | "node-stack" | "nodes-align-horiz" | "nodes-align-vert" | "open-in-new-window" | "pan-mode" | "parameter" | "pending-changes" | "placeholder" | "plus" | "quote" | "re-execution" | "redo" | "regex" | "reload" | "rename" | "replace" | "reset-all" | "resume-execution" | "right-aligned" | "rocket" | "save-as" | "save" | "schedule" | "search" | "selected-cancel" | "selected-execution" | "selected-reset" | "send" | "server-rack-workflow" | "settings" | "share" | "shortcuts" | "sort-ascending" | "sort-descending" | "space-local" | "space-private" | "space" | "stepwise-execution" | "strikethrough" | "text" | "textstyles" | "thumbs-down" | "thumbs-up" | "time" | "to-bottom" | "to-top" | "trash" | "trigger" | "underline" | "undo" | "unlink" | "user" | "view-cards" | "warning" | "workflow" | "x-close";
|
|
8
8
|
variant: "padded" | "plain";
|
|
9
9
|
overflow: "auto" | "hidden" | "visible";
|
|
10
10
|
onClose: (event?: Event) => void;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { KdsLabelProps } from './types';
|
|
2
|
+
declare const _default: import('vue').DefineComponent<KdsLabelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<KdsLabelProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
3
|
+
labelEl: HTMLLabelElement;
|
|
4
|
+
}, HTMLLabelElement>;
|
|
5
|
+
export default _default;
|
|
6
|
+
//# sourceMappingURL=KdsLabel.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KdsLabel.vue.d.ts","sourceRoot":"","sources":["../../src/forms/KdsLabel.vue"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;;;AA0D7C,wBAQG"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { KdsSubTextProps } from './types';
|
|
2
|
+
declare const _default: import('vue').DefineComponent<KdsSubTextProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<KdsSubTextProps> & Readonly<{}>, {
|
|
3
|
+
error: boolean;
|
|
4
|
+
preserveSubTextSpace: boolean;
|
|
5
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
6
|
+
export default _default;
|
|
7
|
+
//# sourceMappingURL=KdsSubText.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KdsSubText.vue.d.ts","sourceRoot":"","sources":["../../src/forms/KdsSubText.vue"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;;;;;AA8E/C,wBAOG"}
|
|
@@ -1,3 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
import { KdsRadioButtonGroupProps } from './types';
|
|
2
|
+
type __VLS_Props = KdsRadioButtonGroupProps;
|
|
3
|
+
type __VLS_PublicProps = {
|
|
4
|
+
modelValue?: string | undefined;
|
|
5
|
+
} & __VLS_Props;
|
|
6
|
+
declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
7
|
+
"update:modelValue": (value: string | undefined) => any;
|
|
8
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
9
|
+
"onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
|
|
10
|
+
}>, {
|
|
11
|
+
disabled: boolean;
|
|
12
|
+
alignment: import('./types').KdsRadioButtonGroupAlignment;
|
|
13
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
14
|
+
optionContainer: HTMLDivElement;
|
|
15
|
+
}, HTMLDivElement>;
|
|
2
16
|
export default _default;
|
|
3
17
|
//# sourceMappingURL=KdsRadioButtonGroup.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KdsRadioButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/KdsRadioButtonGroup.vue"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"KdsRadioButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/KdsRadioButtonGroup.vue"],"names":[],"mappings":"AA6GA,OAAO,KAAK,EAEV,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAGjB,KAAK,WAAW,GAAG,wBAAwB,CAAC;AAuC5C,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,GAAG,WAAW,CAAC;;;;;;;;;;;AA2IhB,wBAUG"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { KdsValueSwitchProps } from './types';
|
|
2
|
+
type __VLS_Props = KdsValueSwitchProps;
|
|
3
|
+
type __VLS_PublicProps = {
|
|
4
|
+
modelValue?: string | undefined;
|
|
5
|
+
} & __VLS_Props;
|
|
6
|
+
declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
7
|
+
"update:modelValue": (value: string | undefined) => any;
|
|
8
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
9
|
+
"onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
|
|
10
|
+
}>, {
|
|
11
|
+
size: import('./types').KdsValueSwitchSize;
|
|
12
|
+
variant: import('./types').KdsValueSwitchVariant;
|
|
13
|
+
disabled: boolean;
|
|
14
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
15
|
+
availableWidthContainer: HTMLDivElement;
|
|
16
|
+
optionContainer: HTMLDivElement;
|
|
17
|
+
}, HTMLDivElement>;
|
|
18
|
+
export default _default;
|
|
19
|
+
//# sourceMappingURL=KdsValueSwitch.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KdsValueSwitch.vue.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/KdsValueSwitch.vue"],"names":[],"mappings":"AA0IA,OAAO,KAAK,EAAwB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAIzE,KAAK,WAAW,GAAG,mBAAmB,CAAC;AA6CvC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,GAAG,WAAW,CAAC;;;;;;;;;;;;;AAsJhB,wBAUG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ValueSwitchItem.vue.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/ValueSwitchItem.vue"],"names":[],"mappings":";AAsQA,wBASG"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { KdsIconName } from '../../Icon/types';
|
|
2
2
|
export type KdsRadioButtonProps = {
|
|
3
3
|
text: string;
|
|
4
4
|
helperText?: string;
|
|
@@ -6,7 +6,6 @@ export type KdsRadioButtonProps = {
|
|
|
6
6
|
error?: boolean;
|
|
7
7
|
};
|
|
8
8
|
export type KdsRadioButtonGroupAlignment = "vertical" | "horizontal";
|
|
9
|
-
type AtLeastTwo<T> = [T, T, ...T[]];
|
|
10
9
|
export type KdsRadioButtonGroupOption = {
|
|
11
10
|
text: string;
|
|
12
11
|
id: string;
|
|
@@ -15,9 +14,52 @@ export type KdsRadioButtonGroupOption = {
|
|
|
15
14
|
error?: boolean;
|
|
16
15
|
};
|
|
17
16
|
export type KdsRadioButtonGroupProps = {
|
|
18
|
-
|
|
17
|
+
id?: string;
|
|
18
|
+
label?: string;
|
|
19
|
+
possibleValues: (string | KdsRadioButtonGroupOption)[];
|
|
19
20
|
alignment?: KdsRadioButtonGroupAlignment;
|
|
20
21
|
disabled?: boolean;
|
|
21
|
-
|
|
22
|
+
subText?: string;
|
|
23
|
+
preserveSubTextSpace?: boolean;
|
|
24
|
+
};
|
|
25
|
+
export type KdsValueSwitchSize = "small" | "medium";
|
|
26
|
+
export type KdsValueSwitchVariant = "default" | "muted";
|
|
27
|
+
export type KdsValueSwitchItemProps = {
|
|
28
|
+
selected: boolean;
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
size?: KdsValueSwitchSize;
|
|
31
|
+
variant?: KdsValueSwitchVariant;
|
|
32
|
+
tabIndex?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Internal/responsive: when true, leading/trailing icons are not rendered.
|
|
35
|
+
*/
|
|
36
|
+
hideIcons?: boolean;
|
|
37
|
+
} & KdsValueSwitchItemContent;
|
|
38
|
+
type KdsValueSwitchItemContent = {
|
|
39
|
+
text: string;
|
|
40
|
+
leadingIcon?: KdsIconName;
|
|
41
|
+
trailingIcon?: KdsIconName;
|
|
42
|
+
title?: undefined;
|
|
43
|
+
} | {
|
|
44
|
+
text?: never;
|
|
45
|
+
leadingIcon: KdsIconName;
|
|
46
|
+
title: string;
|
|
47
|
+
trailingIcon?: never;
|
|
48
|
+
};
|
|
49
|
+
export type KdsValueSwitchOption = {
|
|
50
|
+
id: string;
|
|
51
|
+
disabled?: boolean;
|
|
52
|
+
} & KdsValueSwitchItemContent;
|
|
53
|
+
export type KdsValueSwitchProps = {
|
|
54
|
+
id?: string;
|
|
55
|
+
label?: string;
|
|
56
|
+
possibleValues: (string | KdsValueSwitchOption)[];
|
|
57
|
+
size?: KdsValueSwitchSize;
|
|
58
|
+
variant?: KdsValueSwitchVariant;
|
|
59
|
+
disabled?: boolean;
|
|
60
|
+
subText?: string;
|
|
61
|
+
error?: boolean;
|
|
62
|
+
preserveSubTextSpace?: boolean;
|
|
63
|
+
};
|
|
22
64
|
export {};
|
|
23
65
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,UAAU,GAAG,YAAY,CAAC;AAErE,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,MAAM,GAAG,yBAAyB,CAAC,EAAE,CAAC;IACvD,SAAS,CAAC,EAAE,4BAA4B,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,yBAAyB,CAAC;AAE9B,KAAK,yBAAyB,GAC1B;IACE,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,GACD;IACE,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,CAAC;AAEN,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,yBAAyB,CAAC;AAE9B,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,MAAM,GAAG,oBAAoB,CAAC,EAAE,CAAC;IAClD,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Ref } from 'vue';
|
|
2
|
+
type KdsIndexSelectionOption = {
|
|
3
|
+
id: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
error?: boolean;
|
|
6
|
+
[x: string]: unknown;
|
|
7
|
+
};
|
|
8
|
+
export declare const useRadioSelection: ({ selectedId, options, globalDisable, globalError, optionContainer, }: {
|
|
9
|
+
selectedId: Ref<string | undefined>;
|
|
10
|
+
options: Ref<readonly KdsIndexSelectionOption[]>;
|
|
11
|
+
globalDisable?: Ref<boolean>;
|
|
12
|
+
globalError?: Ref<boolean>;
|
|
13
|
+
optionContainer?: Ref<HTMLElement | null>;
|
|
14
|
+
}) => {
|
|
15
|
+
hasError: import('vue').ComputedRef<boolean>;
|
|
16
|
+
selectedIndex: import('vue').ComputedRef<number>;
|
|
17
|
+
tabIndexForOption: (index: number) => 0 | -1 | undefined;
|
|
18
|
+
handleClick: (index: number) => void;
|
|
19
|
+
handleKeyDown: (event: KeyboardEvent, currentIndex: number) => void;
|
|
20
|
+
};
|
|
21
|
+
export {};
|
|
22
|
+
//# sourceMappingURL=useRadioSelection.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRadioSelection.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/useRadioSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG/B,KAAK,uBAAuB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,uEAM/B;IACD,UAAU,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,OAAO,EAAE,GAAG,CAAC,SAAS,uBAAuB,EAAE,CAAC,CAAC;IACjD,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IAC3B,eAAe,CAAC,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC3C;;;+BAuBmC,MAAM;yBAYZ,MAAM;2BAwDJ,aAAa,gBAAgB,MAAM;CA+ClE,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Ref } from 'vue';
|
|
2
|
+
import { KdsValueSwitchOption } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Computes whether icons in ValueSwitch items should be hidden.
|
|
5
|
+
*
|
|
6
|
+
* Global logic: as soon as at least one text+icon item ellipsizes its label
|
|
7
|
+
* (`scrollWidth > clientWidth`), icons are hidden for all text+icon items.
|
|
8
|
+
* Icon-only items are never affected.
|
|
9
|
+
*/
|
|
10
|
+
export declare const useValueSwitchIconHiding: ({ width, options, }: {
|
|
11
|
+
/**
|
|
12
|
+
* Potentially available width to render options
|
|
13
|
+
*/
|
|
14
|
+
width: Ref<number>;
|
|
15
|
+
options: Ref<readonly KdsValueSwitchOption[]>;
|
|
16
|
+
}) => {
|
|
17
|
+
shouldHideIcons: Ref<boolean, boolean>;
|
|
18
|
+
setItemEl: (id: string, el: unknown) => void;
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=useValueSwitchIconHiding.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useValueSwitchIconHiding.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/useValueSwitchIconHiding.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAK/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,GAAI,qBAGtC;IACD;;OAEG;IACH,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACnB,OAAO,EAAE,GAAG,CAAC,SAAS,oBAAoB,EAAE,CAAC,CAAC;CAC/C;;oBAOwB,MAAM,MAAM,OAAO;CAuD3C,CAAC"}
|
package/dist/forms/index.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
1
|
export { default as KdsRadioButtonGroup } from './RadioButton/KdsRadioButtonGroup.vue';
|
|
2
|
-
export
|
|
2
|
+
export { default as KdsValueSwitch } from './RadioButton/KdsValueSwitch.vue';
|
|
3
|
+
export { default as KdsLabel } from './KdsLabel.vue';
|
|
4
|
+
export { default as KdsSubText } from './KdsSubText.vue';
|
|
5
|
+
export type { KdsRadioButtonGroupAlignment, KdsRadioButtonGroupOption, KdsRadioButtonGroupProps, KdsValueSwitchOption, KdsValueSwitchProps, KdsValueSwitchSize, } from './RadioButton/types';
|
|
3
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGzD,YAAY,EACV,4BAA4B,EAC5B,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC"}
|
package/dist/forms/types.d.ts
CHANGED
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
export type KdsLabelProps = {
|
|
2
|
-
label?: string;
|
|
3
|
-
id: string;
|
|
4
|
-
} | {
|
|
5
2
|
label: string;
|
|
6
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Id to link the label to form elements via `aria-labelledby`.
|
|
5
|
+
*/
|
|
6
|
+
id: string;
|
|
7
|
+
/**
|
|
8
|
+
* Id of the form control this label is for.
|
|
9
|
+
*/
|
|
10
|
+
for?: string;
|
|
7
11
|
};
|
|
8
12
|
export type KdsSubTextProps = {
|
|
13
|
+
/**
|
|
14
|
+
* Id to link the subtext to form elements via `aria-describedby`.
|
|
15
|
+
*/
|
|
16
|
+
id: string;
|
|
9
17
|
subText?: string;
|
|
18
|
+
/**
|
|
19
|
+
* When true, applies error styling to the subtext and shows the error icon.
|
|
20
|
+
*/
|
|
21
|
+
error?: boolean;
|
|
10
22
|
/**
|
|
11
23
|
* Reserve space for subtext to prevent layout shifts when helper text or errors appear
|
|
12
24
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/forms/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/forms/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC"}
|
package/dist/index.css
CHANGED
|
@@ -659,6 +659,35 @@ to {
|
|
|
659
659
|
}
|
|
660
660
|
}
|
|
661
661
|
|
|
662
|
+
.label[data-v-174d476a] {
|
|
663
|
+
display: block;
|
|
664
|
+
max-width: 100%;
|
|
665
|
+
min-height: var(--kds-dimension-component-height-0-75x);
|
|
666
|
+
padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
|
|
667
|
+
overflow: hidden;
|
|
668
|
+
text-overflow: ellipsis;
|
|
669
|
+
font: var(--kds-font-base-title-small-strong);
|
|
670
|
+
color: var(--kds-color-text-and-icon-neutral);
|
|
671
|
+
white-space: nowrap;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
.subtext {
|
|
675
|
+
&[data-v-8fccdd6d] {
|
|
676
|
+
display: flex;
|
|
677
|
+
gap: var(--kds-spacing-container-0-25x);
|
|
678
|
+
min-height: 1lh;
|
|
679
|
+
margin-top: var(--kds-spacing-container-0-25x);
|
|
680
|
+
font: var(--kds-font-base-subtext-small);
|
|
681
|
+
color: var(--kds-color-text-and-icon-muted);
|
|
682
|
+
}
|
|
683
|
+
&.error[data-v-8fccdd6d] {
|
|
684
|
+
color: var(--kds-color-text-and-icon-danger);
|
|
685
|
+
}
|
|
686
|
+
& .subtext-text[data-v-8fccdd6d] {
|
|
687
|
+
min-width: 0;
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
|
|
662
691
|
.radio {
|
|
663
692
|
&[data-v-f6d4be71] {
|
|
664
693
|
--bg-initial: var(--kds-color-background-input-initial);
|
|
@@ -764,37 +793,132 @@ to {
|
|
|
764
793
|
}
|
|
765
794
|
}
|
|
766
795
|
|
|
767
|
-
.
|
|
768
|
-
display: flex;
|
|
769
|
-
gap: var(--kds-spacing-container-0-25x);
|
|
770
|
-
align-items: center;
|
|
771
|
-
min-height: var(--kds-dimension-component-height-0-75x);
|
|
772
|
-
padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
|
|
773
|
-
font: var(--kds-font-base-title-small-strong);
|
|
774
|
-
color: var(--kds-color-text-and-icon-neutral);
|
|
775
|
-
}
|
|
776
|
-
.radio-button-group[data-v-fd7ae250] {
|
|
796
|
+
.radio-button-group[data-v-9ef66ae5] {
|
|
777
797
|
padding: 0;
|
|
778
798
|
margin: 0;
|
|
779
799
|
border: none;
|
|
780
800
|
}
|
|
781
|
-
.options[data-v-
|
|
801
|
+
.options[data-v-9ef66ae5] {
|
|
782
802
|
display: flex;
|
|
783
803
|
flex-direction: column;
|
|
784
804
|
gap: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-75x);
|
|
785
805
|
}
|
|
786
|
-
.options.horizontal[data-v-
|
|
806
|
+
.options.horizontal[data-v-9ef66ae5] {
|
|
787
807
|
flex-flow: row wrap;
|
|
788
808
|
align-items: flex-start;
|
|
789
809
|
}
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
810
|
+
|
|
811
|
+
.option {
|
|
812
|
+
&[data-v-469c6983] {
|
|
813
|
+
display: flex;
|
|
814
|
+
flex: 0 1 auto;
|
|
815
|
+
gap: var(--kds-spacing-container-0-25x);
|
|
816
|
+
align-items: center;
|
|
817
|
+
justify-content: center;
|
|
818
|
+
min-width: calc(
|
|
819
|
+
var(--kds-dimension-icon-1x) + (2 * var(--kds-spacing-container-0-37x))
|
|
820
|
+
);
|
|
821
|
+
max-width: 100%;
|
|
822
|
+
height: var(--kds-dimension-component-height-1-5x);
|
|
823
|
+
padding: 0 var(--kds-spacing-container-0-37x);
|
|
824
|
+
font: var(--kds-font-base-interactive-medium-strong);
|
|
825
|
+
color: var(--kds-color-text-and-icon-neutral);
|
|
826
|
+
text-align: center;
|
|
827
|
+
cursor: pointer;
|
|
828
|
+
|
|
829
|
+
/* variant=default */
|
|
830
|
+
background: var(--kds-color-background-neutral-initial);
|
|
831
|
+
border: var(--kds-border-action-transparent);
|
|
832
|
+
border-radius: var(--kds-border-radius-container-0-25x);
|
|
833
|
+
}
|
|
834
|
+
&.size-small[data-v-469c6983] {
|
|
835
|
+
height: var(--kds-dimension-component-height-1-25x);
|
|
836
|
+
font: var(--kds-font-base-interactive-small-strong);
|
|
837
|
+
}
|
|
838
|
+
&[data-v-469c6983]:focus-visible {
|
|
839
|
+
outline: none;
|
|
840
|
+
}
|
|
841
|
+
&[data-v-469c6983]:hover:not(:disabled) {
|
|
842
|
+
background: var(--kds-color-background-neutral-hover);
|
|
843
|
+
}
|
|
844
|
+
&[data-v-469c6983]:active:not(:disabled) {
|
|
845
|
+
background: var(--kds-color-background-neutral-active);
|
|
846
|
+
}
|
|
847
|
+
&.selected {
|
|
848
|
+
&[data-v-469c6983] {
|
|
849
|
+
color: var(--kds-color-text-and-icon-selected);
|
|
850
|
+
background: var(--kds-color-background-selected-initial);
|
|
851
|
+
border: var(--kds-border-action-selected);
|
|
852
|
+
}
|
|
853
|
+
&[data-v-469c6983]:hover:not(:disabled) {
|
|
854
|
+
background: var(--kds-color-background-selected-hover);
|
|
855
|
+
}
|
|
856
|
+
&[data-v-469c6983]:active:not(:disabled) {
|
|
857
|
+
background: var(--kds-color-background-selected-active);
|
|
858
|
+
}
|
|
859
|
+
&.variant-muted {
|
|
860
|
+
&[data-v-469c6983] {
|
|
861
|
+
color: var(--kds-color-text-and-icon-neutral);
|
|
862
|
+
background: var(--kds-color-background-input-initial);
|
|
863
|
+
}
|
|
864
|
+
&[data-v-469c6983]:hover:not(:disabled) {
|
|
865
|
+
background: var(--kds-color-background-input-hover);
|
|
866
|
+
}
|
|
867
|
+
&[data-v-469c6983]:active:not(:disabled) {
|
|
868
|
+
background: var(--kds-color-background-input-active);
|
|
869
|
+
}
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
&.disabled[data-v-469c6983] {
|
|
873
|
+
color: var(--kds-color-text-and-icon-disabled);
|
|
874
|
+
cursor: default;
|
|
875
|
+
}
|
|
876
|
+
&.disabled.selected[data-v-469c6983] {
|
|
877
|
+
color: var(--kds-color-text-and-icon-disabled);
|
|
878
|
+
border: var(--kds-border-action-disabled);
|
|
879
|
+
}
|
|
880
|
+
}
|
|
881
|
+
.option-label[data-v-469c6983] {
|
|
882
|
+
min-width: 0;
|
|
883
|
+
padding: 0 var(--kds-spacing-container-0-12x);
|
|
884
|
+
overflow: hidden;
|
|
885
|
+
text-overflow: ellipsis;
|
|
886
|
+
font: inherit;
|
|
887
|
+
white-space: nowrap;
|
|
888
|
+
}
|
|
889
|
+
|
|
890
|
+
.value-switch[data-v-d3b2c85d] {
|
|
891
|
+
display: flex;
|
|
892
|
+
flex-direction: column;
|
|
893
|
+
align-items: flex-start;
|
|
894
|
+
padding: 0;
|
|
895
|
+
margin: 0;
|
|
896
|
+
border: none;
|
|
897
|
+
}
|
|
898
|
+
.options {
|
|
899
|
+
&[data-v-d3b2c85d] {
|
|
900
|
+
display: flex;
|
|
901
|
+
flex-flow: row nowrap;
|
|
902
|
+
gap: var(--kds-spacing-container-none);
|
|
903
|
+
align-items: flex-start;
|
|
904
|
+
width: fit-content;
|
|
905
|
+
min-width: 0;
|
|
906
|
+
max-width: 100%;
|
|
907
|
+
padding: calc(
|
|
908
|
+
var(--kds-spacing-container-0-12x) - var(--kds-core-border-width-xs)
|
|
909
|
+
);
|
|
910
|
+
overflow: hidden;
|
|
911
|
+
background: var(--kds-color-surface-muted);
|
|
912
|
+
border: var(--kds-border-action-transparent);
|
|
913
|
+
border-radius: var(--kds-border-radius-container-0-37x);
|
|
914
|
+
box-shadow: var(--kds-fake-border-xs-muted);
|
|
796
915
|
}
|
|
797
|
-
|
|
798
|
-
|
|
916
|
+
&[data-v-d3b2c85d]:focus-within:has(:focus-visible) {
|
|
917
|
+
outline: var(--kds-border-action-focused);
|
|
918
|
+
outline-offset: var(--kds-spacing-offset-focus);
|
|
919
|
+
border-radius: var(--kds-border-radius-container-0-44x);
|
|
920
|
+
}
|
|
921
|
+
&.error[data-v-d3b2c85d] {
|
|
922
|
+
border: var(--kds-border-action-error);
|
|
799
923
|
}
|
|
800
924
|
}
|