Skip to content

Commit b33b21f

Browse files
andre8244andre8244
authored
fix: add invalidMessage prop to all input components (#68)
Add invalidMessage prop to NeCheckbox, NeRadioSelection and NeToggle. fix: font-weight of NeButton text fix: slot support for NeRadioSelection label fix: add docs page to all components fix: accept prop of NeFileInput is optional fix: add invalidMessage prop to all input components
1 parent 39b8796 commit b33b21f

18 files changed

+149
-44
lines changed

‎src/components/NeButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const loadingSuffix = computed(() => props.loading && props.loadingPosition ===
7272

7373
<template>
7474
<button
75-
class="font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-primary-300"
75+
class="font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-primary-300"
7676
:class="[kindStyle[props.kind], sizeStyle[props.size]]"
7777
:disabled="disabled"
7878
type="button"

‎src/components/NeCheckbox.vue

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ const props = defineProps({
2727
disabled: {
2828
type: Boolean,
2929
default: false
30+
},
31+
invalidMessage: {
32+
type: String,
33+
default: ''
3034
}
3135
})
3236
@@ -44,39 +48,45 @@ const model = computed({
4448
})
4549
</script>
4650
<template>
47-
<div class="relative flex items-start">
48-
<div class="flex h-6 items-center">
49-
<input
50-
:id="componentId"
51-
v-model="model"
52-
:aria-describedby="componentId + '-description'"
53-
:disabled="disabled"
54-
class="h-5 w-5 rounded border-gray-300 text-primary-700 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:text-primary-500 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950 sm:h-4 sm:w-4"
55-
type="checkbox"
56-
v-bind="$attrs"
57-
/>
58-
</div>
59-
<div class="ml-3 text-sm leading-6">
60-
<!-- show label prop or default slot -->
61-
<label
62-
:class="[
63-
'font-medium text-gray-700 dark:text-gray-50',
64-
{ 'cursor-not-allowed opacity-50': disabled }
65-
]"
66-
:for="disableSelectOnLabel ? '' : componentId"
67-
>
68-
<slot>{{ label }}</slot>
69-
</label>
70-
<span v-if="$slots.tooltip" class="ml-2">
71-
<slot name="tooltip"></slot>
72-
</span>
73-
<div
74-
v-if="$slots.description"
75-
:id="componentId + '-description'"
76-
class="text-gray-500 dark:text-gray-400"
77-
>
78-
<slot name="description" />
51+
<div>
52+
<div class="relative flex items-start">
53+
<div class="flex h-6 items-center">
54+
<input
55+
:id="componentId"
56+
v-model="model"
57+
:aria-describedby="componentId + '-description'"
58+
:disabled="disabled"
59+
class="h-5 w-5 rounded border-gray-300 text-primary-700 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:text-primary-500 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950 sm:h-4 sm:w-4"
60+
type="checkbox"
61+
v-bind="$attrs"
62+
/>
63+
</div>
64+
<div class="ml-3 text-sm leading-6">
65+
<!-- show label prop or default slot -->
66+
<label
67+
:class="[
68+
'font-medium text-gray-700 dark:text-gray-50',
69+
{ 'cursor-not-allowed opacity-50': disabled }
70+
]"
71+
:for="disableSelectOnLabel ? '' : componentId"
72+
>
73+
<slot>{{ label }}</slot>
74+
</label>
75+
<span v-if="$slots.tooltip" class="ml-2">
76+
<slot name="tooltip"></slot>
77+
</span>
78+
<div
79+
v-if="$slots.description"
80+
:id="componentId + '-description'"
81+
class="text-gray-500 dark:text-gray-400"
82+
>
83+
<slot name="description" />
84+
</div>
7985
</div>
8086
</div>
87+
<!-- invalid message -->
88+
<p v-if="invalidMessage" class="mt-2 text-sm text-rose-700 dark:text-rose-400">
89+
{{ invalidMessage }}
90+
</p>
8191
</div>
8292
</template>

‎src/components/NeFileInput.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ interface FileInputProps {
1616
dropzoneLabel: string
1717
progress: number
1818
showProgress: boolean
19-
accept: string | undefined
19+
accept?: string | undefined
2020
}
2121
2222
const props = withDefaults(defineProps<FileInputProps>(), {

‎src/components/NeRadioSelection.vue

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ const props = defineProps({
2828
default: ''
2929
},
3030
label: {
31-
required: true,
32-
type: String
31+
type: String,
32+
default: ''
3333
},
3434
description: {
3535
type: String,
@@ -63,6 +63,10 @@ const props = defineProps({
6363
cardSelectionMark: {
6464
type: Boolean,
6565
default: true
66+
},
67+
invalidMessage: {
68+
type: String,
69+
default: ''
6670
}
6771
})
6872
@@ -122,8 +126,10 @@ function focus() {
122126
<template>
123127
<div class="text-sm">
124128
<div class="mb-2">
125-
<NeFormItemLabel class="mb-0">
126-
{{ label }}
129+
<NeFormItemLabel v-if="props.label || $slots.label" class="mb-0">
130+
<slot name="label">
131+
{{ label }}
132+
</slot>
127133
<span v-if="$slots.tooltip" class="ml-1">
128134
<slot name="tooltip"></slot>
129135
</span>
@@ -201,5 +207,9 @@ function focus() {
201207
</div>
202208
</fieldset>
203209
</template>
210+
<!-- invalid message -->
211+
<p v-if="invalidMessage" class="mt-2 text-sm text-rose-700 dark:text-rose-400">
212+
{{ invalidMessage }}
213+
</p>
204214
</div>
205215
</template>

‎src/components/NeToggle.vue

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ const props = defineProps({
2626
disabled: {
2727
type: Boolean,
2828
default: false
29+
},
30+
invalidMessage: {
31+
type: String,
32+
default: ''
2933
}
3034
})
3135
@@ -78,10 +82,10 @@ const toggleBallClasses = computed(() => {
7882
</script>
7983

8084
<template>
81-
<div>
85+
<div class="text-sm">
8286
<label
8387
v-if="topLabel"
84-
class="mb-2 flex items-end justify-between text-sm font-medium leading-6 text-gray-700 dark:text-gray-200"
88+
class="mb-2 flex items-end justify-between font-medium leading-6 text-gray-700 dark:text-gray-200"
8589
>
8690
<span>
8791
{{ topLabel }}
@@ -102,5 +106,9 @@ const toggleBallClasses = computed(() => {
102106
<slot name="tooltip"></slot>
103107
</span>
104108
</div>
109+
<!-- invalid message -->
110+
<p v-if="invalidMessage" class="mt-2 text-sm text-rose-700 dark:text-rose-400">
111+
{{ invalidMessage }}
112+
</p>
105113
</div>
106114
</template>

‎stories/NeCheckbox.stories.ts

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ const meta = {
1313
modelValue: true,
1414
disabled: false,
1515
disableSelectOnLabel: false,
16-
id: ''
16+
id: '',
17+
invalidMessage: ''
1718
}
1819
} satisfies Meta<typeof NeCheckbox>
1920

@@ -104,3 +105,18 @@ export const WithTooltip: Story = {
104105
}),
105106
args: {}
106107
}
108+
109+
export const InvalidMessage: Story = {
110+
render: (args) => ({
111+
components: { NeCheckbox },
112+
setup() {
113+
return { args }
114+
},
115+
template: template
116+
}),
117+
args: {
118+
modelValue: false,
119+
label: 'I agree to the Terms and conditions',
120+
invalidMessage: 'You need to agree to the Terms and conditions'
121+
}
122+
}

‎stories/NeCombobox.stories.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
1010
const meta = {
1111
title: 'NeCombobox',
1212
component: NeCombobox,
13+
tags: ['autodocs'],
1314
args: {
1415
label: 'Choose fruit',
1516
placeholder: 'Placeholder',

‎stories/NeEmptyState.stories.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ library.add(faUsers)
1212
const meta = {
1313
title: 'NeEmptyState',
1414
component: NeEmptyState,
15+
tags: ['autodocs'],
1516
argTypes: {},
1617
args: {
1718
title: 'No user',

‎stories/NeFileInput.stories.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { NeFileInput } from '../src/main'
77
const meta = {
88
title: 'NeFileInput',
99
component: NeFileInput,
10+
tags: ['autodocs'],
1011
argTypes: {},
1112
args: {
1213
label: 'Label',

‎stories/NeFormItemLabel.stories.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { NeFormItemLabel } from '../src/main'
66

77
const meta = {
88
title: 'NeFormItemLabel',
9-
component: NeFormItemLabel
9+
component: NeFormItemLabel,
10+
tags: ['autodocs']
1011
} satisfies Meta<typeof NeFormItemLabel>
1112

1213
export default meta

0 commit comments

Comments
 (0)