@saasmakers/ui 1.3.8 → 1.3.9
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.
|
@@ -50,6 +50,7 @@ export default {
|
|
|
50
50
|
] satisfies FieldSize[],
|
|
51
51
|
},
|
|
52
52
|
slugOnly: { control: 'boolean' },
|
|
53
|
+
trim: { control: 'boolean' },
|
|
53
54
|
type: {
|
|
54
55
|
control: 'select',
|
|
55
56
|
options: [
|
|
@@ -88,3 +89,12 @@ export const SlugOnly: StoryObj<typeof FieldInput> = {
|
|
|
88
89
|
slugOnly: true,
|
|
89
90
|
} satisfies Partial<FieldInput>,
|
|
90
91
|
}
|
|
92
|
+
|
|
93
|
+
export const Trim: StoryObj<typeof FieldInput> = {
|
|
94
|
+
args: {
|
|
95
|
+
label: 'First name',
|
|
96
|
+
modelValue: 'Julien ',
|
|
97
|
+
placeholder: 'Enter your first name',
|
|
98
|
+
trim: true,
|
|
99
|
+
} satisfies Partial<FieldInput>,
|
|
100
|
+
}
|
|
@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<Omit<FieldInput, 'modelValue'>>(), {
|
|
|
22
22
|
required: false,
|
|
23
23
|
size: 'base',
|
|
24
24
|
slugOnly: false,
|
|
25
|
+
trim: false,
|
|
25
26
|
type: 'text',
|
|
26
27
|
uppercase: false,
|
|
27
28
|
validation: undefined,
|
|
@@ -66,7 +67,14 @@ function focus() {
|
|
|
66
67
|
}
|
|
67
68
|
}
|
|
68
69
|
|
|
70
|
+
function trimModelValue() {
|
|
71
|
+
if (props.trim) {
|
|
72
|
+
modelValue.value = modelValue.value.toString().trim()
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
69
76
|
function onFieldBlur(event: FocusEvent) {
|
|
77
|
+
trimModelValue()
|
|
70
78
|
emit('blur', event)
|
|
71
79
|
}
|
|
72
80
|
|
|
@@ -99,7 +107,8 @@ function onFieldKeyDown(event: KeyboardEvent) {
|
|
|
99
107
|
}
|
|
100
108
|
|
|
101
109
|
else if (event.key === 'Enter' && modelValue.value) {
|
|
102
|
-
|
|
110
|
+
trimModelValue()
|
|
111
|
+
emit('submit', event, (event.target as HTMLInputElement).value)
|
|
103
112
|
}
|
|
104
113
|
|
|
105
114
|
else if (props.type === 'number' && [
|
package/app/types/fields.d.ts
CHANGED