Skip to content

Commit 68c7950

Browse files
sfxcodesfxcode
committed
refactor(RadioButton): use flex styling for better aligning in default
1 parent 206fbea commit 68c7950

File tree

2 files changed

+145
-112
lines changed

2 files changed

+145
-112
lines changed

‎src/components/PrimeRadioButton.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@ export interface FormKitPrimeRadioButtonProps {
1010
ptOptions?: RadioButtonProps['ptOptions']
1111
unstyled?: RadioButtonProps['unstyled']
1212
options?: { label: string, value: any }[]
13+
optionsClass?: string
1314
optionClass?: string
14-
labelClass?: string
15-
1615
}
1716
1817
const props = defineProps({
@@ -26,8 +25,8 @@ const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
2625
</script>
2726

2827
<template>
29-
<div class="p-formkit">
30-
<div v-for="option in context.options" :key="option.value" :class="context.optionClass">
28+
<div class="p-formkit p-formkit-options" :class="context.optionsClass">
29+
<div v-for="option in context.options" :key="option.value" class="p-formkit-option" :class="context.optionClass">
3130
<RadioButton
3231
:id="context.id"
3332
v-model="context._value"
@@ -45,7 +44,7 @@ const { styleClass, handleChange, handleBlur } = useFormKitInput(props.context)
4544
@change="handleChange"
4645
@blur="handleBlur"
4746
/>
48-
<label :for="option.value" :class="context.labelClass" class="p-formkit-radio-label">{{ option.label }}</label>
47+
<label :for="option.value" :class="context.labelClass">{{ option.label }}</label>
4948
</div>
5049
</div>
5150
</template>

‎src/sass/formkit-primevue.scss‎

Lines changed: 141 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,175 @@
1-
:root {
2-
--formkit-error-color: #ef9a9a;
3-
}
1+
@use 'sass:math';
42

5-
.formkit-form > .formkit-messages {
6-
margin: 4px 0;
7-
.formkit-message {
8-
font-size: 0.8rem;
9-
}
10-
}
3+
$gutter-width: 0.5rem;
114

12-
.formkit-outer {
13-
margin: 0;
14-
padding-bottom: 0.8rem;
15-
16-
.formkit-inner {.p-formkit { .p-formkit-icon {
17-
box-sizing: border-box;
18-
width: 100%;
19-
} .p-inputtext, .p-textarea, .p-password, .p-multiselect, .p-select, .p-editor {
20-
box-sizing: border-box;
21-
width: 100%;
22-
&.p-colorpicker-preview {
23-
width: 2rem;
24-
}
25-
}}
26-
}
5+
// Breakpoints e.g. https://tailwindcss.com/docs/responsive-design
6+
$grid-breakpoints: (
7+
sm: 640px,
8+
md: 768px,
9+
lg: 1024px,
10+
xl: 1280px,
11+
xxl: 1536px
12+
) !default;
2713

28-
ul {
29-
margin-block-start: 2px;
30-
margin-block-end: 2px;
31-
}
32-
.formkit-messages {
33-
padding: 4px 0 0 0;.formkit-message {
34-
padding: 0;
35-
margin: 0;
36-
color: var(--formkit-error-color);
37-
list-style: none;
38-
font-size: 0.8rem;
39-
}
40-
}
14+
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
15+
$min: map-get($breakpoints, $name);
16+
@return if($min != 0, $min, null);
4117
}
4218

43-
.formkit-outer[data-type="primeToggleSwitch"], .formkit-outer[data-type="primeCheckbox"], .formkit-outer[data-type="primeTriStateCheckbox"], .formkit-outer[data-type="primeRadioButton"] {
44-
.formkit-inner {.formkit-prime-right {
45-
margin-left: 10px;
46-
font-size: 1rem;
47-
}.formkit-prime-left {
48-
margin-right: 10px;
49-
font-size: 1rem;
19+
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
20+
$min: breakpoint-min($name, $breakpoints);
21+
@if $min {
22+
@media (min-width: $min) {
23+
@content;
5024
}
25+
} @else {
26+
@content;
5127
}
5228
}
5329

54-
.formkit-label {
55-
display: block;
56-
margin: 0;
57-
padding-bottom: 0.5rem;
58-
font-weight: bold;
59-
font-size: 0.8rem;
30+
:root {
31+
--formkit-error-color: #ef9a9a;
6032
}
6133

62-
.formkit-fieldset {
63-
margin: 0;
64-
padding: 0;
65-
border-radius: 0;
66-
border: 0;
67-
68-
&:focus-within {
69-
border: 0;
34+
.formkit-form {
35+
// General message item styling
36+
.formkit-messages {
37+
margin: 0.125rem 0;
38+
padding-top: 0.25rem;
39+
padding-left: 0;
7040
}
7141

72-
& > .formkit-help {
73-
margin-top: 0;
74-
margin-bottom: 0;
42+
.formkit-message {
43+
list-style: none;
44+
padding: 0;
45+
margin: 0;
46+
color: var(--formkit-error-color);
47+
font-size: 0.8rem;
7548
}
76-
}
7749

78-
.formkit-legend {
79-
display: block;
80-
margin: 0;
81-
padding: 0;
82-
}
50+
// Single form element
51+
.formkit-outer {
52+
padding-bottom: 0.8rem;
8353

84-
.formkit-help {
85-
margin: 4px 0 0 0 ;
86-
font-size: 0.8rem;
87-
color: var(--text-color-secondary);
88-
}
54+
.formkit-inner {
55+
.p-formkit {
56+
.p-formkit-icon {
57+
box-sizing: border-box;
58+
width: 100%;
59+
}
8960

90-
.formkit-messages {
91-
padding: 0;
92-
}
61+
.p-inputtext, .p-textarea, .p-password, .p-multiselect, .p-select, .p-editor {
62+
box-sizing: border-box;
63+
width: 100%;
9364

94-
.formkit-message {
95-
padding: 0;
96-
margin: 0;
97-
color: var(--formkit-error-color);
98-
list-style: none;
99-
font-size: 0.8rem;
100-
}
65+
&.p-colorpicker-preview {
66+
width: 2rem;
67+
}
68+
}
69+
70+
}
71+
}
10172

102-
.formkit-actions {
103-
padding-top: 0.5rem;
73+
.formkit-help {
74+
margin: 0.25rem 0 0 0;
75+
font-size: 0.8rem;
76+
color: var(--text-color-secondary);
77+
}
10478

105-
}
79+
}
10680

107-
.p-formkit-radio-label {
108-
margin-left: 1rem;
109-
}
81+
// Label for single form element
82+
.formkit-label {
83+
display: block;
84+
margin: 0;
85+
padding-bottom: 0.5rem;
86+
font-weight: bold;
87+
font-size: 0.8rem;
88+
}
11089

111-
.formkit-prefix-icon {
112-
padding-right: 0.5rem;
113-
}
90+
// Wrapper for input element plus prefix, suffix and icons
91+
.p-formkit {
92+
> * {
93+
margin-right: 0.5rem;
11494

115-
.formkit-prefix {
116-
padding-right: 0.5rem;
117-
}
95+
&:last-child, &:only-child {
96+
margin-right: 0;
97+
}
98+
}
99+
}
118100

119-
.formkit-suffix-icon {
120-
padding-left: 0.5rem;
121-
}
101+
// Used in Prime RadioButton
102+
.p-formkit-options {
103+
display: flex;
104+
flex-wrap: wrap;
105+
gap: 0.5rem;
106+
107+
.p-formkit-option {
108+
display: flex;
109+
align-items: center;
110+
label {
111+
margin-left: 0.5rem;
112+
}
113+
}
114+
}
122115

123-
.formkit-suffix {
124-
padding-left: 0.5rem;
125-
}
116+
// Do we need this?
117+
.formkit-fieldset {
118+
margin: 0;
119+
padding: 0;
120+
border-radius: 0;
121+
border: 0;
126122

123+
&:focus-within {
124+
border: 0;
125+
}
127126

127+
& > .formkit-help {
128+
margin-top: 0;
129+
margin-bottom: 0;
130+
}
131+
}
128132

129-
.p-formkit-data-debug {
130-
pre, span {
131-
font-size: 0.75rem;line-height: 1rem;
133+
// Do we need this?
134+
.formkit-legend {
135+
display: block;
136+
margin: 0;
137+
padding: 0;
132138
}
133-
}
134139

135-
.p-formkit-data-view {
140+
// Submit button etc.
141+
.formkit-actions {
142+
padding-top: 0.5rem;
143+
}
136144

145+
// Debug
146+
.p-formkit-data-debug {
147+
pre, span {
148+
font-size: 0.75rem;
149+
line-height: 1rem;
150+
}
151+
}
137152
}
138153

139-
.p-formkit-data-edit {
140-
154+
// Change column behaviour in larger views
155+
@include media-breakpoint-up(lg) {
156+
.formkit-form {
157+
display: flex;
158+
flex-wrap: wrap;
159+
margin-left: -$gutter-width;
160+
margin-right: -$gutter-width;
161+
162+
& > * {
163+
flex-shrink: 0;
164+
width: 100%;
165+
max-width: 100%;
166+
padding-left: $gutter-width;
167+
padding-right: $gutter-width;
168+
}
169+
}
170+
@for $i from 1 through 12 {
171+
.col-#{$i} {
172+
width: percentage(math.div($i, 12));
173+
}
174+
}
141175
}

0 commit comments

Comments
 (0)