@ouestfrance/sipa-bms-ui 8.22.2 → 8.23.0

package/src/components/form/BmsInputRadioCaptionGroup.stories.js

@@ -1,17 +1,18 @@
 import BmsInputRadioCaptionGroup from '@/components/form/BmsInputRadioCaptionGroup.vue';
 import BmsInputRadioCaption from '@/components/form/BmsInputRadioCaption.vue';
 import { StatusType } from '@/models/status-type.model';
+import { ref } from 'vue';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/InputRadioCaptionGroup',
+  component: BmsInputRadioCaptionGroup,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/InputRadioCaptionGroup',
-  component: BmsInputRadioCaptionGroup,
 };
 
 const Template = (args) => ({
@@ -164,3 +165,138 @@ Slot.args = {
   label: 'This is a field label',
   slot: true,
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || '');
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputRadioCaptionGroup,
+  },
+  template: `
+  <BmsInputRadioCaptionGroup v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundRadioCaptionGroup = SimpleTemplate.bind({});
+PlaygroundRadioCaptionGroup.parameters = { chromatic: { disable: true } };
+PlaygroundRadioCaptionGroup.args = {
+  label: 'Payment method',
+  modelValue: '',
+  options: [
+    {
+      value: 'credit',
+      label: 'Credit Card',
+      captions: ['Visa, Mastercard, Amex'],
+    },
+    { value: 'paypal', label: 'PayPal', captions: ['Pay with PayPal account'] },
+    {
+      value: 'bank',
+      label: 'Bank Transfer',
+      captions: ['Direct bank transfer'],
+    },
+  ],
+};
+
+// Do: Radio caption group with clear labels
+export const DoWithClearLabels = SimpleTemplate.bind({});
+DoWithClearLabels.parameters = { chromatic: { disable: true } };
+DoWithClearLabels.args = {
+  label: 'Subscription plan',
+  modelValue: '',
+  options: [
+    { value: 'basic', label: 'Basic', captions: ['$9/month'] },
+    { value: 'pro', label: 'Pro', captions: ['$29/month'] },
+    { value: 'enterprise', label: 'Enterprise', captions: ['Custom pricing'] },
+  ],
+};
+
+// Do: Radio caption group with helpful captions
+export const DoWithHelpfulCaptions = SimpleTemplate.bind({});
+DoWithHelpfulCaptions.parameters = { chromatic: { disable: true } };
+DoWithHelpfulCaptions.args = {
+  label: 'Delivery option',
+  modelValue: '',
+  options: [
+    { value: 'standard', label: 'Standard', captions: ['5-7 business days'] },
+    { value: 'express', label: 'Express', captions: ['2-3 business days'] },
+    { value: 'overnight', label: 'Overnight', captions: ['Next business day'] },
+  ],
+};
+
+// Do: Radio caption group with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Payment method',
+  modelValue: '',
+  errors: ['Please select a payment method'],
+  options: [
+    { value: 'credit', label: 'Credit Card', captions: ['Visa, Mastercard'] },
+    { value: 'paypal', label: 'PayPal', captions: ['Pay with PayPal'] },
+  ],
+};
+
+// Don't: Missing labels
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  modelValue: '',
+  options: [
+    { value: 'option1', label: 'Option 1', captions: ['Description'] },
+    { value: 'option2', label: 'Option 2', captions: ['Description'] },
+  ],
+};
+
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Choose an option',
+  modelValue: '',
+  options: [
+    { value: 'option1', label: 'Option 1', captions: ['Description'] },
+    { value: 'option2', label: 'Option 2', captions: ['Description'] },
+  ],
+};
+
+// Don't: No captions when needed
+export const DontNoCaptions = SimpleTemplate.bind({});
+DontNoCaptions.parameters = { chromatic: { disable: true } };
+DontNoCaptions.args = {
+  label: 'Subscription plan',
+  modelValue: '',
+  options: [
+    { value: 'basic', label: 'Basic' },
+    { value: 'pro', label: 'Pro' },
+    { value: 'enterprise', label: 'Enterprise' },
+  ],
+};
+
+// Do: Radio caption group in column layout
+export const DoWithColumnLayout = SimpleTemplate.bind({});
+DoWithColumnLayout.parameters = { chromatic: { disable: true } };
+DoWithColumnLayout.args = {
+  label: 'Delivery option',
+  modelValue: '',
+  align: 'column',
+  options: [
+    {
+      value: 'standard',
+      label: 'Standard Delivery',
+      captions: ['5-7 business days - Free'],
+    },
+    {
+      value: 'express',
+      label: 'Express Delivery',
+      captions: ['2-3 business days - $10'],
+    },
+    {
+      value: 'overnight',
+      label: 'Overnight Delivery',
+      captions: ['Next business day - $25'],
+    },
+  ],
+};

package/src/components/form/BmsInputRadioGroup.stories.js

@@ -1,17 +1,18 @@
 import BmsInputRadioGroup from '@/components/form/BmsInputRadioGroup.vue';
 import BmsInputRadio from '@/components/form/BmsInputRadio.vue';
 import { StatusType } from '@/models/status-type.model';
+import { ref } from 'vue';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/InputRadioGroup',
+  component: BmsInputRadioGroup,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/InputRadioGroup',
-  component: BmsInputRadioGroup,
 };
 
 const Template = (args) => ({
@@ -118,3 +119,120 @@ Slot.args = {
   label: 'This is a field label',
   slot: true,
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || '');
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputRadioGroup,
+  },
+  template: `
+  <BmsInputRadioGroup v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundRadioGroup = SimpleTemplate.bind({});
+PlaygroundRadioGroup.parameters = { chromatic: { disable: true } };
+PlaygroundRadioGroup.args = {
+  label: 'Gender',
+  modelValue: '',
+  values: [
+    { value: 'male', label: 'Male' },
+    { value: 'female', label: 'Female' },
+    { value: 'other', label: 'Other' },
+  ],
+};
+
+// Do: Radio group with clear labels
+export const DoWithClearLabels = SimpleTemplate.bind({});
+DoWithClearLabels.parameters = { chromatic: { disable: true } };
+DoWithClearLabels.args = {
+  label: 'Notification preference',
+  modelValue: '',
+  values: [
+    { value: 'email', label: 'Email' },
+    { value: 'sms', label: 'SMS' },
+    { value: 'push', label: 'Push notifications' },
+  ],
+};
+
+// Do: Radio group with caption
+export const DoWithCaption = SimpleTemplate.bind({});
+DoWithCaption.parameters = { chromatic: { disable: true } };
+DoWithCaption.args = {
+  label: 'Account type',
+  modelValue: '',
+  captions: ['Select the type of account you want to create'],
+  values: [
+    { value: 'personal', label: 'Personal' },
+    { value: 'business', label: 'Business' },
+  ],
+};
+
+// Do: Radio group with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Gender',
+  modelValue: '',
+  errors: ['Please select a gender'],
+  values: [
+    { value: 'male', label: 'Male' },
+    { value: 'female', label: 'Female' },
+    { value: 'other', label: 'Other' },
+  ],
+};
+
+// Don't: Missing labels
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  modelValue: '',
+  values: [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+  ],
+};
+
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Choose an option',
+  modelValue: '',
+  values: [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+  ],
+};
+
+// Don't: No error feedback
+export const DontNoErrorFeedback = SimpleTemplate.bind({});
+DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
+DontNoErrorFeedback.args = {
+  label: 'Gender',
+  modelValue: '',
+  values: [
+    { value: 'male', label: 'Male' },
+    { value: 'female', label: 'Female' },
+  ],
+};
+
+// Do: Radio group in column layout
+export const DoWithColumnLayout = SimpleTemplate.bind({});
+DoWithColumnLayout.parameters = { chromatic: { disable: true } };
+DoWithColumnLayout.args = {
+  label: 'Notification preference',
+  modelValue: '',
+  align: 'column',
+  captions: ['Choose how you want to receive notifications'],
+  values: [
+    { value: 'email', label: 'Email notifications' },
+    { value: 'sms', label: 'SMS notifications' },
+    { value: 'push', label: 'Push notifications' },
+    { value: 'none', label: 'No notifications' },
+  ],
+};

package/src/components/form/BmsInputText.stories.js

@@ -1,6 +1,6 @@
 import BmsInputText from '@/components/form/BmsInputText.vue';
 import { within } from 'storybook/test';
-import { BookOpen, CloudLightning } from 'lucide-vue-next';
+import { BookOpen, CloudLightning, Mail, Eye } from 'lucide-vue-next';
 import template from '@/documentation/template_field_dependency.mdx';
 import { ref } from 'vue';
 
@@ -85,6 +85,15 @@ WithLimitEqual.args = {
   maxlength: 16,
 };
 
+export const WithLimitAndEmptyValue = Template.bind({});
+WithLimitAndEmptyValue.args = {
+  label: 'My label',
+  modelValue: null,
+  modelValueSmall: undefined,
+  maxlength: 15,
+  minlength: 1,
+};
+
 export const WithLimitExceeded = Template.bind({});
 WithLimitExceeded.args = {
   label: 'My label',
@@ -114,3 +123,271 @@ export const WithFocusState = {
     await canvas.getByRole('input').focus();
   },
 };
+
+// Simple template for documentation (without small variant)
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || '');
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputText,
+    BookOpen,
+    CloudLightning,
+  },
+  template: `
+  <BmsInputText v-bind="args" v-model="modelValue">
+    <template v-if="args.iconStart" #icon-start><BookOpen/></template>
+    <template v-if="args.iconEnd" #icon-end><CloudLightning/></template>
+  </BmsInputText>
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundInputText = SimpleTemplate.bind({});
+PlaygroundInputText.parameters = { chromatic: { disable: true } };
+PlaygroundInputText.args = {
+  label: 'Email address',
+  placeholder: 'example@email.com',
+};
+
+// Do: Simple input with label
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Full name',
+  placeholder: 'John Doe',
+};
+
+// Do: Input with placeholder
+export const DoWithPlaceholder = SimpleTemplate.bind({});
+DoWithPlaceholder.parameters = { chromatic: { disable: true } };
+DoWithPlaceholder.args = {
+  label: 'Email address',
+  placeholder: 'example@email.com',
+};
+
+// Do: Input with caption
+export const DoWithCaption = SimpleTemplate.bind({});
+DoWithCaption.parameters = { chromatic: { disable: true } };
+DoWithCaption.args = {
+  label: 'Password',
+  placeholder: 'Enter your password',
+  captions: ['Must be at least 8 characters'],
+};
+
+// Do: Input with icon at start
+export const DoWithIconStart = () => ({
+  components: { BmsInputText, Mail },
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+  template: `
+    <BmsInputText 
+      label="Email" 
+      v-model="value"
+      placeholder="example@email.com"
+    >
+      <template #icon-start><Mail /></template>
+    </BmsInputText>
+  `,
+});
+DoWithIconStart.parameters = { chromatic: { disable: true } };
+
+// Do: Input with icon at end
+export const DoWithIconEnd = () => ({
+  components: { BmsInputText, Eye },
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+  template: `
+    <BmsInputText 
+      label="Password" 
+      v-model="value"
+      placeholder="Enter your password"
+    >
+      <template #icon-end><Eye /></template>
+    </BmsInputText>
+  `,
+});
+DoWithIconEnd.parameters = { chromatic: { disable: true } };
+
+// Do: Input with both icons
+export const DoWithIcons = () => ({
+  components: { BmsInputText, Mail, Eye },
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+  template: `
+    <BmsInputText 
+      label="Email" 
+      v-model="value"
+      placeholder="example@email.com"
+    >
+      <template #icon-start><Mail /></template>
+      <template #icon-end><Eye /></template>
+    </BmsInputText>
+  `,
+});
+DoWithIcons.parameters = { chromatic: { disable: true } };
+
+// Do: Disabled state
+export const DoDisabled = SimpleTemplate.bind({});
+DoDisabled.parameters = { chromatic: { disable: true } };
+DoDisabled.args = {
+  label: 'Account ID',
+  modelValue: 'ACC-12345',
+  disabled: true,
+};
+
+// Do: Loading state
+export const DoLoading = SimpleTemplate.bind({});
+DoLoading.parameters = { chromatic: { disable: true } };
+DoLoading.args = {
+  label: 'Email',
+  placeholder: 'Loading...',
+  loading: true,
+};
+
+// Do: Input with max length
+export const DoWithMaxLength = SimpleTemplate.bind({});
+DoWithMaxLength.parameters = { chromatic: { disable: true } };
+DoWithMaxLength.args = {
+  label: 'Username',
+  placeholder: 'Enter username',
+  maxlength: 20,
+  modelValue: 'myusernameiswaytoolong',
+};
+
+// Do: Input with min and max length
+export const DoWithMinMaxLength = SimpleTemplate.bind({});
+DoWithMinMaxLength.parameters = { chromatic: { disable: true } };
+DoWithMinMaxLength.args = {
+  label: 'Password',
+  placeholder: 'Enter password',
+  minlength: 8,
+  maxlength: 20,
+  modelValue: 'pass123',
+};
+
+// Don't: Long labels
+export const DontLongLabel = SimpleTemplate.bind({});
+DontLongLabel.parameters = { chromatic: { disable: true } };
+DontLongLabel.args = {
+  label:
+    'Please enter your complete full name including first name, middle name if applicable, and last name',
+  placeholder: 'Name',
+};
+
+export const DoShortLabel = SimpleTemplate.bind({});
+DoShortLabel.parameters = { chromatic: { disable: true } };
+DoShortLabel.args = {
+  label: 'Full name',
+  placeholder: 'John Doe',
+};
+
+// Don't: No label
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  placeholder: 'Enter your email',
+};
+
+// Don't: Generic placeholder
+export const DontGenericPlaceholder = SimpleTemplate.bind({});
+DontGenericPlaceholder.parameters = { chromatic: { disable: true } };
+DontGenericPlaceholder.args = {
+  label: 'Email',
+  placeholder: 'Enter text here',
+};
+
+export const DoSpecificPlaceholder = SimpleTemplate.bind({});
+DoSpecificPlaceholder.parameters = { chromatic: { disable: true } };
+DoSpecificPlaceholder.args = {
+  label: 'Email',
+  placeholder: 'example@email.com',
+};
+
+// Don't: Too many icons
+export const DontTooManyIcons = () => ({
+  components: { BmsInputText, Mail, Eye, BookOpen },
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+  template: `
+    <BmsInputText 
+      label="Email" 
+      v-model="value"
+      placeholder="example@email.com"
+    >
+      <template #icon-start>
+        <Mail />
+        <BookOpen />
+      </template>
+      <template #icon-end>
+        <Eye />
+        <BookOpen />
+      </template>
+    </BmsInputText>
+  `,
+});
+DontTooManyIcons.parameters = { chromatic: { disable: true } };
+
+export const DoOneIcon = () => ({
+  components: { BmsInputText, Mail },
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+  template: `
+    <BmsInputText 
+      label="Email" 
+      v-model="value"
+      placeholder="example@email.com"
+    >
+      <template #icon-start><Mail /></template>
+    </BmsInputText>
+  `,
+});
+DoOneIcon.parameters = { chromatic: { disable: true } };
+
+// Don't: No error feedback
+export const DontNoErrorFeedback = SimpleTemplate.bind({});
+DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
+DontNoErrorFeedback.args = {
+  label: 'Email',
+  placeholder: 'email@example.com',
+  modelValue: 'invalid-email',
+};
+
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Email',
+  placeholder: 'email@example.com',
+  modelValue: 'invalid-email',
+  errors: ['Please enter a valid email address'],
+};
+
+// Don't: No caption for complex requirements
+export const DontNoCaption = SimpleTemplate.bind({});
+DontNoCaption.parameters = { chromatic: { disable: true } };
+DontNoCaption.args = {
+  label: 'Username',
+  placeholder: 'Enter username',
+  modelValue: 'JohnDoe',
+  errors: ['Error'],
+};
+
+export const DoWithHelpfulCaption = SimpleTemplate.bind({});
+DoWithHelpfulCaption.parameters = { chromatic: { disable: true } };
+DoWithHelpfulCaption.args = {
+  label: 'Username',
+  placeholder: 'Enter username',
+  modelValue: 'JohnDoe',
+  errors: ['Username is already taken'],
+};

package/src/components/form/BmsInputText.vue

@@ -88,7 +88,9 @@ const onInput = (e: Event) => {
 const checkLimit = () => {
   internalErrors.value = [];
   internalCaptions.value = [];
+  const hasValue = props.modelValue !== null && props.modelValue !== undefined;
   if (
+    hasValue &&
     props.inputType === InputType.TEXT &&
     typeof props.modelValue === 'string'
   ) {

package/src/components/form/BmsMultiSelect.vue

@@ -108,7 +108,9 @@ onKeyUp('Tab', closeDatalist);
 onKeyDown('Backspace', onBackspace);
 
 const onSelectClick = () => {
-  isDatalistOpen.value = !isDatalistOpen.value;
+  if (!props.disabled) {
+    isDatalistOpen.value = !isDatalistOpen.value;
+  }
 };
 const onInput = (e: InputEvent) => {
   emits('input', e);