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

src/components/NeButton.vue

@@ -72,7 +72,7 @@ const loadingSuffix = computed(() => props.loading && props.loadingPosition ===
 
 <template>
   <button
-    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"
+    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"
     :class="[kindStyle[props.kind], sizeStyle[props.size]]"
     :disabled="disabled"
     type="button"

src/components/NeCheckbox.vue

@@ -27,6 +27,10 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     default: false
+  },
+  invalidMessage: {
+    type: String,
+    default: ''
   }
 })
 
@@ -44,39 +48,45 @@ const model = computed({
 })
 </script>
 <template>
-  <div class="relative flex items-start">
-    <div class="flex h-6 items-center">
-      <input
-        :id="componentId"
-        v-model="model"
-        :aria-describedby="componentId + '-description'"
-        :disabled="disabled"
-        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"
-        type="checkbox"
-        v-bind="$attrs"
-      />
-    </div>
-    <div class="ml-3 text-sm leading-6">
-      <!-- show label prop or default slot -->
-      <label
-        :class="[
-          'font-medium text-gray-700 dark:text-gray-50',
-          { 'cursor-not-allowed opacity-50': disabled }
-        ]"
-        :for="disableSelectOnLabel ? '' : componentId"
-      >
-        <slot>{{ label }}</slot>
-      </label>
-      <span v-if="$slots.tooltip" class="ml-2">
-        <slot name="tooltip"></slot>
-      </span>
-      <div
-        v-if="$slots.description"
-        :id="componentId + '-description'"
-        class="text-gray-500 dark:text-gray-400"
-      >
-        <slot name="description" />
+  <div>
+    <div class="relative flex items-start">
+      <div class="flex h-6 items-center">
+        <input
+          :id="componentId"
+          v-model="model"
+          :aria-describedby="componentId + '-description'"
+          :disabled="disabled"
+          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"
+          type="checkbox"
+          v-bind="$attrs"
+        />
+      </div>
+      <div class="ml-3 text-sm leading-6">
+        <!-- show label prop or default slot -->
+        <label
+          :class="[
+            'font-medium text-gray-700 dark:text-gray-50',
+            { 'cursor-not-allowed opacity-50': disabled }
+          ]"
+          :for="disableSelectOnLabel ? '' : componentId"
+        >
+          <slot>{{ label }}</slot>
+        </label>
+        <span v-if="$slots.tooltip" class="ml-2">
+          <slot name="tooltip"></slot>
+        </span>
+        <div
+          v-if="$slots.description"
+          :id="componentId + '-description'"
+          class="text-gray-500 dark:text-gray-400"
+        >
+          <slot name="description" />
+        </div>
       </div>
     </div>
+    <!-- invalid message -->
+    <p v-if="invalidMessage" class="mt-2 text-sm text-rose-700 dark:text-rose-400">
+      {{ invalidMessage }}
+    </p>
   </div>
 </template>

src/components/NeFileInput.vue

@@ -16,7 +16,7 @@ interface FileInputProps {
   dropzoneLabel: string
   progress: number
   showProgress: boolean
-  accept: string | undefined
+  accept?: string | undefined
 }
 
 const props = withDefaults(defineProps<FileInputProps>(), {

src/components/NeRadioSelection.vue

@@ -28,8 +28,8 @@ const props = defineProps({
     default: ''
   },
   label: {
-    required: true,
-    type: String
+    type: String,
+    default: ''
   },
   description: {
     type: String,
@@ -63,6 +63,10 @@ const props = defineProps({
   cardSelectionMark: {
     type: Boolean,
     default: true
+  },
+  invalidMessage: {
+    type: String,
+    default: ''
   }
 })
 
@@ -122,8 +126,10 @@ function focus() {
 <template>
   <div class="text-sm">
     <div class="mb-2">
-      <NeFormItemLabel class="mb-0">
-        {{ label }}
+      <NeFormItemLabel v-if="props.label || $slots.label" class="mb-0">
+        <slot name="label">
+          {{ label }}
+        </slot>
         <span v-if="$slots.tooltip" class="ml-1">
           <slot name="tooltip"></slot>
         </span>
@@ -201,5 +207,9 @@ function focus() {
         </div>
       </fieldset>
     </template>
+    <!-- invalid message -->
+    <p v-if="invalidMessage" class="mt-2 text-sm text-rose-700 dark:text-rose-400">
+      {{ invalidMessage }}
+    </p>
   </div>
 </template>

src/components/NeToggle.vue

@@ -26,6 +26,10 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     default: false
+  },
+  invalidMessage: {
+    type: String,
+    default: ''
   }
 })
 
@@ -78,10 +82,10 @@ const toggleBallClasses = computed(() => {
 </script>
 
 <template>
-  <div>
+  <div class="text-sm">
     <label
       v-if="topLabel"
-      class="mb-2 flex items-end justify-between text-sm font-medium leading-6 text-gray-700 dark:text-gray-200"
+      class="mb-2 flex items-end justify-between font-medium leading-6 text-gray-700 dark:text-gray-200"
     >
       <span>
         {{ topLabel }}
@@ -102,5 +106,9 @@ const toggleBallClasses = computed(() => {
         <slot name="tooltip"></slot>
       </span>
     </div>
+    <!-- invalid message -->
+    <p v-if="invalidMessage" class="mt-2 text-sm text-rose-700 dark:text-rose-400">
+      {{ invalidMessage }}
+    </p>
   </div>
 </template>

stories/NeCheckbox.stories.ts

@@ -13,7 +13,8 @@ const meta = {
     modelValue: true,
     disabled: false,
     disableSelectOnLabel: false,
-    id: ''
+    id: '',
+    invalidMessage: ''
   }
 } satisfies Meta<typeof NeCheckbox>
 
@@ -104,3 +105,18 @@ export const WithTooltip: Story = {
   }),
   args: {}
 }
+
+export const InvalidMessage: Story = {
+  render: (args) => ({
+    components: { NeCheckbox },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {
+    modelValue: false,
+    label: 'I agree to the Terms and conditions',
+    invalidMessage: 'You need to agree to the Terms and conditions'
+  }
+}

stories/NeCombobox.stories.ts

@@ -10,6 +10,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 const meta = {
   title: 'NeCombobox',
   component: NeCombobox,
+  tags: ['autodocs'],
   args: {
     label: 'Choose fruit',
     placeholder: 'Placeholder',

stories/NeEmptyState.stories.ts

@@ -12,6 +12,7 @@ library.add(faUsers)
 const meta = {
   title: 'NeEmptyState',
   component: NeEmptyState,
+  tags: ['autodocs'],
   argTypes: {},
   args: {
     title: 'No user',

stories/NeFileInput.stories.ts

@@ -7,6 +7,7 @@ import { NeFileInput } from '../src/main'
 const meta = {
   title: 'NeFileInput',
   component: NeFileInput,
+  tags: ['autodocs'],
   argTypes: {},
   args: {
     label: 'Label',

stories/NeFormItemLabel.stories.ts

@@ -6,7 +6,8 @@ import { NeFormItemLabel } from '../src/main'
 
 const meta = {
   title: 'NeFormItemLabel',
-  component: NeFormItemLabel
+  component: NeFormItemLabel,
+  tags: ['autodocs']
 } satisfies Meta<typeof NeFormItemLabel>
 
 export default meta

stories/NeListbox.stories.ts

@@ -8,6 +8,7 @@ import { NeListbox, NeTooltip } from '../src/main'
 const meta = {
   title: 'NeListbox',
   component: NeListbox,
+  tags: ['autodocs'],
   args: {
     label: 'Choose fruit',
     placeholder: 'Placeholder',

stories/NeRadioSelection.stories.ts

@@ -22,6 +22,7 @@ library.add(faHardDrive)
 const meta: Meta<typeof NeRadioSelection> = {
   title: 'NeRadioSelection',
   component: NeRadioSelection,
+  tags: ['autodocs'],
   argTypes: {
     cardSize: { control: 'inline-radio', options: ['md', 'lg', 'xl'] }
   },
@@ -49,7 +50,8 @@ const meta: Meta<typeof NeRadioSelection> = {
     modelValue: '1',
     disabled: false,
     cardSize: 'md',
-    cardSelectionMark: true
+    cardSelectionMark: true,
+    invalidMessage: ''
   }
 }
 
@@ -225,3 +227,37 @@ export const OptionsWithDescription: StoryObj<typeof NeRadioSelection> = {
     ]
   }
 }
+
+export const LabelSlot: StoryObj<typeof NeRadioSelection> = {
+  render: (args) => ({
+    components: { NeRadioSelection },
+    setup() {
+      return { args }
+    },
+    template: `
+      <NeRadioSelection v-bind="args">
+        <template #label>
+          Label slot
+        </template>
+      </NeRadioSelection>
+    `
+  }),
+  args: {
+    label: ''
+  }
+}
+
+export const InvalidMessage: StoryObj<typeof NeRadioSelection> = {
+  render: (args) => ({
+    components: { NeRadioSelection },
+    setup() {
+      return { args }
+    },
+    template: `
+      <NeRadioSelection v-bind="args" />
+    `
+  }),
+  args: {
+    invalidMessage: 'Invalid selection'
+  }
+}

stories/NeRoundedIcon.stories.ts

@@ -8,6 +8,7 @@ import { NeRoundedIcon } from '../src/main'
 const meta = {
   title: 'NeRoundedIcon',
   component: NeRoundedIcon,
+  tags: ['autodocs'],
   argTypes: {
     kind: { control: 'inline-radio', options: ['info', 'warning', 'error', 'success'] }
   },

stories/NeTabs.stories.ts

@@ -8,6 +8,7 @@ import { NeTabs } from '../src/main'
 const meta = {
   title: 'NeTabs',
   component: NeTabs,
+  tags: ['autodocs'],
   argTypes: {},
   args: {
     tabs: [

stories/NeTextArea.stories.ts

@@ -8,6 +8,7 @@ import { NeTextArea, NeTooltip } from '../src/main'
 const meta = {
   title: 'NeTextArea',
   component: NeTextArea,
+  tags: ['autodocs'],
   // default values
   args: {
     label: 'Label',

stories/NeTextInput.stories.ts

@@ -8,6 +8,7 @@ import { NeTextInput, NeTooltip } from '../src/main'
 const meta = {
   title: 'NeTextInput',
   component: NeTextInput,
+  tags: ['autodocs'],
   // default values
   args: {
     label: 'Label',

stories/NeToastNotification.stories.ts

@@ -9,6 +9,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 const meta = {
   title: 'NeToastNotification',
   component: NeToastNotification,
+  tags: ['autodocs'],
   args: {
     srCloseLabel: 'Close',
     primaryButtonRightAligned: false,

stories/NeToggle.stories.ts

@@ -8,6 +8,7 @@ import { NeToggle, NeTooltip } from '../src/main'
 const meta = {
   title: 'NeToggle',
   component: NeToggle,
+  tags: ['autodocs'],
   argTypes: {
     size: { control: 'inline-radio', options: ['sm', 'md', 'lg', 'xl'] }
   },
@@ -17,7 +18,8 @@ const meta = {
     topLabel: '',
     size: 'md',
     disabled: false,
-    modelValue: true
+    modelValue: true,
+    invalidMessage: ''
   }
 } satisfies Meta<typeof NeToggle>
 
@@ -96,3 +98,16 @@ export const WithTopLabelAndTooltip: Story = {
   }),
   args: { topLabel: 'Top label' }
 }
+
+export const InvalidMessage: Story = {
+  render: (args) => ({
+    components: { NeToggle },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {
+    invalidMessage: 'Invalid selection'
+  }
+}