orio-ui 1.13.1 → 1.14.0
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/Button.vue +3 -3
- package/dist/runtime/components/CheckBox.vue +4 -4
- package/dist/runtime/components/ControlElement.d.vue.ts +6 -0
- package/dist/runtime/components/ControlElement.vue +56 -5
- package/dist/runtime/components/ControlElement.vue.d.ts +6 -0
- package/dist/runtime/components/Input.vue +8 -8
- package/dist/runtime/components/NavButton.vue +4 -4
- package/dist/runtime/components/NumberInput/index.vue +6 -6
- package/dist/runtime/components/Selector.vue +4 -4
- package/dist/runtime/components/SwitchButton.vue +3 -3
- package/dist/runtime/components/Textarea.vue +7 -7
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -56,13 +56,13 @@ button {
|
|
|
56
56
|
background-color: var(--color-accent);
|
|
57
57
|
color: var(--color-accent-ink);
|
|
58
58
|
border: 1px solid transparent;
|
|
59
|
-
border-radius: var(--
|
|
60
|
-
padding:
|
|
59
|
+
border-radius: var(--control-radius);
|
|
60
|
+
padding: var(--control-py) var(--control-px);
|
|
61
61
|
cursor: pointer;
|
|
62
62
|
display: inline-flex;
|
|
63
63
|
justify-content: center;
|
|
64
64
|
align-items: center;
|
|
65
|
-
gap:
|
|
65
|
+
gap: var(--control-gap);
|
|
66
66
|
user-select: none;
|
|
67
67
|
}
|
|
68
68
|
button.icon-only {
|
|
@@ -37,14 +37,14 @@ defineProps({
|
|
|
37
37
|
|
|
38
38
|
<style scoped>
|
|
39
39
|
.checkbox {
|
|
40
|
-
--box-size: 1rem;
|
|
40
|
+
--box-size: var(--control-icon-size, 1rem);
|
|
41
41
|
}
|
|
42
42
|
.checkbox-label {
|
|
43
43
|
position: relative;
|
|
44
44
|
user-select: none;
|
|
45
45
|
display: inline-flex;
|
|
46
46
|
align-items: center;
|
|
47
|
-
gap: 0.4rem;
|
|
47
|
+
gap: var(--control-gap, 0.4rem);
|
|
48
48
|
cursor: pointer;
|
|
49
49
|
color: var(--color-text);
|
|
50
50
|
}
|
|
@@ -73,8 +73,8 @@ defineProps({
|
|
|
73
73
|
}
|
|
74
74
|
.checkbox .checkbox-input:checked + .checkbox-box.defaultChecked::after {
|
|
75
75
|
content: "";
|
|
76
|
-
width: 0.
|
|
77
|
-
height: 0.
|
|
76
|
+
width: calc(var(--box-size) * 0.3);
|
|
77
|
+
height: calc(var(--box-size) * 0.6);
|
|
78
78
|
position: relative;
|
|
79
79
|
bottom: 0.1rem;
|
|
80
80
|
border: solid var(--color-accent-ink);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export type ControlLayout = "vertical" | "horizontal";
|
|
2
|
+
export type ControlSize = "sm" | "md" | "lg" | "xl";
|
|
2
3
|
export interface ControlProps {
|
|
3
4
|
/**
|
|
4
5
|
* Minimal will reset margin and remove border and box shadow from every element inside the slot
|
|
@@ -16,6 +17,10 @@ export interface ControlProps {
|
|
|
16
17
|
* Label position relative to the control
|
|
17
18
|
*/
|
|
18
19
|
layout?: ControlLayout;
|
|
20
|
+
/**
|
|
21
|
+
* Size of the control and its inner elements
|
|
22
|
+
*/
|
|
23
|
+
size?: ControlSize;
|
|
19
24
|
}
|
|
20
25
|
declare var __VLS_1: {
|
|
21
26
|
id: string;
|
|
@@ -28,6 +33,7 @@ declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}
|
|
|
28
33
|
error: string | null;
|
|
29
34
|
id: string;
|
|
30
35
|
layout: ControlLayout;
|
|
36
|
+
size: ControlSize;
|
|
31
37
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
32
38
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
33
39
|
declare const _default: typeof __VLS_export;
|
|
@@ -4,12 +4,16 @@ const props = defineProps({
|
|
|
4
4
|
appearance: { type: String, required: false, default: "normal" },
|
|
5
5
|
error: { type: [String, null], required: false, default: null },
|
|
6
6
|
id: { type: String, required: false, default: () => useId() },
|
|
7
|
-
layout: { type: String, required: false, default: "vertical" }
|
|
7
|
+
layout: { type: String, required: false, default: "vertical" },
|
|
8
|
+
size: { type: String, required: false, default: "md" }
|
|
8
9
|
});
|
|
9
10
|
</script>
|
|
10
11
|
|
|
11
12
|
<template>
|
|
12
|
-
<div
|
|
13
|
+
<div
|
|
14
|
+
class="control"
|
|
15
|
+
:class="[appearance, layout, `size-${size}`, { 'has-error': error }]"
|
|
16
|
+
>
|
|
13
17
|
<label v-if="$attrs.label" class="control-label" :for="id">
|
|
14
18
|
{{ $attrs.label }}
|
|
15
19
|
</label>
|
|
@@ -23,6 +27,50 @@ const props = defineProps({
|
|
|
23
27
|
</template>
|
|
24
28
|
|
|
25
29
|
<style scoped>
|
|
30
|
+
.control {
|
|
31
|
+
--control-font-size: var(--font-md);
|
|
32
|
+
--control-py: 0.5rem;
|
|
33
|
+
--control-px: 0.75rem;
|
|
34
|
+
--control-gap: 0.5rem;
|
|
35
|
+
--control-radius: var(--border-radius-md);
|
|
36
|
+
--control-icon-size: 1rem;
|
|
37
|
+
--control-inner-block-start: 1.25rem;
|
|
38
|
+
--control-inner-block-end: 0.25rem;
|
|
39
|
+
--control-label-block-start: 0.25rem;
|
|
40
|
+
}
|
|
41
|
+
.control.size-sm {
|
|
42
|
+
--control-font-size: var(--font-sm);
|
|
43
|
+
--control-py: 0.25rem;
|
|
44
|
+
--control-px: 0.5rem;
|
|
45
|
+
--control-gap: 0.25rem;
|
|
46
|
+
--control-radius: var(--border-radius-sm);
|
|
47
|
+
--control-icon-size: 0.75rem;
|
|
48
|
+
--control-inner-block-start: 1rem;
|
|
49
|
+
--control-inner-block-end: 0.15rem;
|
|
50
|
+
--control-label-block-start: 0.2rem;
|
|
51
|
+
}
|
|
52
|
+
.control.size-lg {
|
|
53
|
+
--control-font-size: var(--font-lg);
|
|
54
|
+
--control-py: 0.625rem;
|
|
55
|
+
--control-px: 1rem;
|
|
56
|
+
--control-gap: 0.5rem;
|
|
57
|
+
--control-radius: var(--border-radius-md);
|
|
58
|
+
--control-icon-size: 1.25rem;
|
|
59
|
+
--control-inner-block-start: 1.75rem;
|
|
60
|
+
--control-inner-block-end: 0.25rem;
|
|
61
|
+
--control-label-block-start: 0.25rem;
|
|
62
|
+
}
|
|
63
|
+
.control.size-xl {
|
|
64
|
+
--control-font-size: var(--font-xl);
|
|
65
|
+
--control-py: 0.75rem;
|
|
66
|
+
--control-px: 1.25rem;
|
|
67
|
+
--control-gap: 0.75rem;
|
|
68
|
+
--control-radius: var(--border-radius-lg);
|
|
69
|
+
--control-icon-size: 1.5rem;
|
|
70
|
+
--control-inner-block-start: 2.25rem;
|
|
71
|
+
--control-inner-block-end: 0.375rem;
|
|
72
|
+
--control-label-block-start: 0.25rem;
|
|
73
|
+
}
|
|
26
74
|
.control {
|
|
27
75
|
margin: 0.5rem;
|
|
28
76
|
display: flex;
|
|
@@ -30,7 +78,7 @@ const props = defineProps({
|
|
|
30
78
|
gap: 0.1rem;
|
|
31
79
|
}
|
|
32
80
|
.control .control-label {
|
|
33
|
-
font-size: var(--font-
|
|
81
|
+
font-size: var(--control-font-size);
|
|
34
82
|
user-select: none;
|
|
35
83
|
}
|
|
36
84
|
.control .control-group {
|
|
@@ -38,11 +86,14 @@ const props = defineProps({
|
|
|
38
86
|
}
|
|
39
87
|
.control .control-error {
|
|
40
88
|
color: var(--color-danger);
|
|
41
|
-
font-size: var(--font-
|
|
89
|
+
font-size: var(--control-font-size);
|
|
90
|
+
}
|
|
91
|
+
.control .slot-wrapper :deep(*) {
|
|
92
|
+
font-size: var(--control-font-size);
|
|
42
93
|
}
|
|
43
94
|
.control.has-error .slot-wrapper :deep(*) {
|
|
44
95
|
border-color: var(--color-danger);
|
|
45
|
-
font-size: var(--font-
|
|
96
|
+
font-size: var(--control-font-size);
|
|
46
97
|
}
|
|
47
98
|
.control.minimal {
|
|
48
99
|
margin: 0;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export type ControlLayout = "vertical" | "horizontal";
|
|
2
|
+
export type ControlSize = "sm" | "md" | "lg" | "xl";
|
|
2
3
|
export interface ControlProps {
|
|
3
4
|
/**
|
|
4
5
|
* Minimal will reset margin and remove border and box shadow from every element inside the slot
|
|
@@ -16,6 +17,10 @@ export interface ControlProps {
|
|
|
16
17
|
* Label position relative to the control
|
|
17
18
|
*/
|
|
18
19
|
layout?: ControlLayout;
|
|
20
|
+
/**
|
|
21
|
+
* Size of the control and its inner elements
|
|
22
|
+
*/
|
|
23
|
+
size?: ControlSize;
|
|
19
24
|
}
|
|
20
25
|
declare var __VLS_1: {
|
|
21
26
|
id: string;
|
|
@@ -28,6 +33,7 @@ declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}
|
|
|
28
33
|
error: string | null;
|
|
29
34
|
id: string;
|
|
30
35
|
layout: ControlLayout;
|
|
36
|
+
size: ControlSize;
|
|
31
37
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
32
38
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
33
39
|
declare const _default: typeof __VLS_export;
|
|
@@ -21,7 +21,7 @@ const modelValue = defineModel({ type: String, ...{ default: "" } });
|
|
|
21
21
|
<style scoped>
|
|
22
22
|
:deep(.slot-wrapper) {
|
|
23
23
|
border: 1px solid var(--color-border);
|
|
24
|
-
border-radius: var(--
|
|
24
|
+
border-radius: var(--control-radius);
|
|
25
25
|
background-color: var(--color-bg);
|
|
26
26
|
transition: border-color 0.2s ease;
|
|
27
27
|
}
|
|
@@ -39,15 +39,15 @@ const modelValue = defineModel({ type: String, ...{ default: "" } });
|
|
|
39
39
|
:deep(.slot-wrapper) {
|
|
40
40
|
display: flex;
|
|
41
41
|
align-items: center;
|
|
42
|
-
gap:
|
|
43
|
-
padding: 0
|
|
42
|
+
gap: var(--control-gap);
|
|
43
|
+
padding: 0 var(--control-px);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
input {
|
|
47
47
|
border: 0;
|
|
48
48
|
background: transparent;
|
|
49
49
|
outline: none;
|
|
50
|
-
font-size: var(--font-
|
|
50
|
+
font-size: var(--control-font-size);
|
|
51
51
|
color: var(--color-text);
|
|
52
52
|
}
|
|
53
53
|
input::placeholder {
|
|
@@ -57,7 +57,7 @@ input::placeholder {
|
|
|
57
57
|
input {
|
|
58
58
|
flex: 1;
|
|
59
59
|
min-width: 0;
|
|
60
|
-
padding:
|
|
60
|
+
padding: var(--control-py) 0;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.inner {
|
|
@@ -67,11 +67,11 @@ input {
|
|
|
67
67
|
position: absolute;
|
|
68
68
|
z-index: 1;
|
|
69
69
|
pointer-events: none;
|
|
70
|
-
left:
|
|
71
|
-
top:
|
|
70
|
+
left: var(--control-px);
|
|
71
|
+
top: var(--control-label-block-start);
|
|
72
72
|
color: var(--color-muted);
|
|
73
73
|
}
|
|
74
74
|
.inner input {
|
|
75
|
-
padding:
|
|
75
|
+
padding: var(--control-inner-block-start) 0 var(--control-inner-block-end);
|
|
76
76
|
}
|
|
77
77
|
</style>
|
|
@@ -42,17 +42,17 @@ button {
|
|
|
42
42
|
background-color: transparent;
|
|
43
43
|
color: var(--color-text);
|
|
44
44
|
border: none;
|
|
45
|
-
border-radius: var(--
|
|
46
|
-
padding:
|
|
45
|
+
border-radius: var(--control-radius);
|
|
46
|
+
padding: var(--control-py) var(--control-px);
|
|
47
47
|
cursor: pointer;
|
|
48
48
|
display: inline-flex;
|
|
49
49
|
align-items: center;
|
|
50
|
-
gap:
|
|
50
|
+
gap: var(--control-gap);
|
|
51
51
|
user-select: none;
|
|
52
52
|
transition: color 0.2s ease;
|
|
53
53
|
}
|
|
54
54
|
button.icon-only {
|
|
55
|
-
padding:
|
|
55
|
+
padding: var(--control-py);
|
|
56
56
|
border-radius: 50%;
|
|
57
57
|
aspect-ratio: 1;
|
|
58
58
|
justify-content: center;
|
|
@@ -85,10 +85,10 @@ input[type=number] {
|
|
|
85
85
|
|
|
86
86
|
.number-input {
|
|
87
87
|
width: 100%;
|
|
88
|
-
padding:
|
|
88
|
+
padding: var(--control-py) var(--control-px);
|
|
89
89
|
border: 1px solid var(--color-border);
|
|
90
|
-
border-radius: var(--
|
|
91
|
-
font-size: var(--font-
|
|
90
|
+
border-radius: var(--control-radius);
|
|
91
|
+
font-size: var(--control-font-size);
|
|
92
92
|
color: var(--color-text);
|
|
93
93
|
background-color: var(--color-bg);
|
|
94
94
|
box-sizing: border-box;
|
|
@@ -118,12 +118,12 @@ input[type=number] {
|
|
|
118
118
|
position: absolute;
|
|
119
119
|
z-index: 1;
|
|
120
120
|
pointer-events: none;
|
|
121
|
-
left:
|
|
122
|
-
top:
|
|
121
|
+
left: var(--control-px);
|
|
122
|
+
top: var(--control-label-block-start);
|
|
123
123
|
color: var(--color-muted);
|
|
124
124
|
}
|
|
125
125
|
.inner .number-input {
|
|
126
|
-
padding:
|
|
126
|
+
padding: var(--control-inner-block-start) var(--control-px) var(--control-inner-block-end);
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
.controls {
|
|
@@ -136,8 +136,8 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
|
|
|
136
136
|
cursor: pointer;
|
|
137
137
|
background: var(--color-bg);
|
|
138
138
|
border: 1px solid var(--color-border);
|
|
139
|
-
border-radius: var(--
|
|
140
|
-
padding:
|
|
139
|
+
border-radius: var(--control-radius);
|
|
140
|
+
padding: var(--control-py) var(--control-px);
|
|
141
141
|
color: var(--color-text);
|
|
142
142
|
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
|
143
143
|
}
|
|
@@ -163,7 +163,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
|
|
|
163
163
|
overflow: auto;
|
|
164
164
|
background: var(--color-bg);
|
|
165
165
|
border: 1px solid var(--color-border);
|
|
166
|
-
border-radius: var(--
|
|
166
|
+
border-radius: var(--control-radius);
|
|
167
167
|
margin-top: 0.25rem;
|
|
168
168
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
169
169
|
}
|
|
@@ -173,7 +173,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
|
|
|
173
173
|
margin: 0;
|
|
174
174
|
}
|
|
175
175
|
.selector-content ul li {
|
|
176
|
-
padding:
|
|
176
|
+
padding: var(--control-py) var(--control-px);
|
|
177
177
|
cursor: pointer;
|
|
178
178
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
179
179
|
color: var(--color-text);
|
|
@@ -30,12 +30,12 @@ function toggle() {
|
|
|
30
30
|
display: inline-flex;
|
|
31
31
|
align-items: center;
|
|
32
32
|
justify-content: center;
|
|
33
|
-
gap:
|
|
34
|
-
border-radius: var(--
|
|
33
|
+
gap: var(--control-gap);
|
|
34
|
+
border-radius: var(--control-radius);
|
|
35
35
|
background-color: var(--color-surface);
|
|
36
36
|
color: var(--color-muted);
|
|
37
37
|
border: 1px solid var(--color-border);
|
|
38
|
-
padding:
|
|
38
|
+
padding: var(--control-py) var(--control-px);
|
|
39
39
|
cursor: pointer;
|
|
40
40
|
user-select: none;
|
|
41
41
|
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
|
@@ -23,12 +23,12 @@ defineProps({
|
|
|
23
23
|
align-items: flex-start;
|
|
24
24
|
}
|
|
25
25
|
.control.horizontal :deep(.control-label) {
|
|
26
|
-
padding-top:
|
|
26
|
+
padding-top: var(--control-py);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
:deep(.slot-wrapper) {
|
|
30
30
|
border: 1px solid var(--color-border);
|
|
31
|
-
border-radius: var(--
|
|
31
|
+
border-radius: var(--control-radius);
|
|
32
32
|
background-color: var(--color-bg);
|
|
33
33
|
transition: border-color 0.2s ease;
|
|
34
34
|
}
|
|
@@ -48,7 +48,7 @@ textarea {
|
|
|
48
48
|
border: 0;
|
|
49
49
|
background: transparent;
|
|
50
50
|
outline: none;
|
|
51
|
-
font-size: var(--font-
|
|
51
|
+
font-size: var(--control-font-size);
|
|
52
52
|
color: var(--color-text);
|
|
53
53
|
}
|
|
54
54
|
textarea::placeholder {
|
|
@@ -57,7 +57,7 @@ textarea::placeholder {
|
|
|
57
57
|
}
|
|
58
58
|
textarea {
|
|
59
59
|
width: 100%;
|
|
60
|
-
padding:
|
|
60
|
+
padding: var(--control-py) var(--control-px);
|
|
61
61
|
resize: vertical;
|
|
62
62
|
}
|
|
63
63
|
|
|
@@ -68,11 +68,11 @@ textarea {
|
|
|
68
68
|
position: absolute;
|
|
69
69
|
z-index: 1;
|
|
70
70
|
pointer-events: none;
|
|
71
|
-
left:
|
|
72
|
-
top:
|
|
71
|
+
left: var(--control-px);
|
|
72
|
+
top: var(--control-label-block-start);
|
|
73
73
|
color: var(--color-muted);
|
|
74
74
|
}
|
|
75
75
|
.inner textarea {
|
|
76
|
-
padding:
|
|
76
|
+
padding: var(--control-inner-block-start) var(--control-px) var(--control-inner-block-end);
|
|
77
77
|
}
|
|
78
78
|
</style>
|