@cnamts/synapse 1.0.7 → 1.0.9

package/src/components/Amelipro/AmeliproSelect/AmeliproSelect.stories.ts

@@ -158,3 +158,395 @@ export const Default: Story = {
 	}),
 
 }
+
+// --- Disabled ---
+export const Disabled: Story = {
+	args: {
+		items,
+		label: 'Select désactivé',
+		uniqueId: 'amelipro-select-disabled',
+		disabled: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le select est désactivé grâce à la prop <code>disabled</code>.</p>
+  <AmeliproSelect
+    v-model="model"
+    :items="items"
+    label="Select désactivé"
+    unique-id="amelipro-select-disabled"
+    disabled
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproSelect } from '@cnamts/synapse'
+  const model = ref()
+  const items = [
+    { title: 'Lille', value: 1 },
+    { title: 'Paris', value: 2 },
+    { title: 'Bordeaux', value: 3 },
+    { title: 'Tours', value: 4 },
+    { title: 'Marseille', value: 5 },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproSelect },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">Le select est désactivé grâce à la prop <code>disabled</code>.</p>
+<AmeliproSelect v-bind="args" v-model="model" />`,
+	}),
+}
+
+// --- Required ---
+export const Required: Story = {
+	args: {
+		items,
+		label: 'Select obligatoire',
+		uniqueId: 'amelipro-select-required',
+		ariaRequired: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le select est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+  <AmeliproSelect
+    v-model="model"
+    :items="items"
+    label="Select obligatoire"
+    unique-id="amelipro-select-required"
+    aria-required
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproSelect } from '@cnamts/synapse'
+  const model = ref()
+  const items = [
+    { title: 'Lille', value: 1 },
+    { title: 'Paris', value: 2 },
+    { title: 'Bordeaux', value: 3 },
+    { title: 'Tours', value: 4 },
+    { title: 'Marseille', value: 5 },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproSelect },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">Le select est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+<AmeliproSelect v-bind="args" v-model="model" />`,
+	}),
+}
+
+// --- Clearable ---
+export const Clearable: Story = {
+	args: {
+		items,
+		label: 'Select clearable',
+		uniqueId: 'amelipro-select-clearable',
+		clearable: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le select peut être vidé grâce à la prop <code>clearable</code>.</p>
+  <AmeliproSelect
+    v-model="model"
+    :items="items"
+    label="Select clearable"
+    unique-id="amelipro-select-clearable"
+    clearable
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproSelect } from '@cnamts/synapse'
+  const model = ref()
+  const items = [
+    { title: 'Lille', value: 1 },
+    { title: 'Paris', value: 2 },
+    { title: 'Bordeaux', value: 3 },
+    { title: 'Tours', value: 4 },
+    { title: 'Marseille', value: 5 },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproSelect },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">Le select peut être vidé grâce à la prop <code>clearable</code>.</p>
+<AmeliproSelect v-bind="args" v-model="model" />`,
+	}),
+}
+
+// --- Placeholder ---
+export const Placeholder: Story = {
+	args: {
+		items,
+		label: 'Select avec placeholder',
+		uniqueId: 'amelipro-select-placeholder',
+		placeholder: 'Choisissez une ville',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le select affiche un placeholder grâce à la prop <code>placeholder</code>.</p>
+  <AmeliproSelect
+    v-model="model"
+    :items="items"
+    label="Select avec placeholder"
+    unique-id="amelipro-select-placeholder"
+    placeholder="Choisissez une ville"
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproSelect } from '@cnamts/synapse'
+  const model = ref()
+  const items = [
+    { title: 'Lille', value: 1 },
+    { title: 'Paris', value: 2 },
+    { title: 'Bordeaux', value: 3 },
+    { title: 'Tours', value: 4 },
+    { title: 'Marseille', value: 5 },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproSelect },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">Le select affiche un placeholder grâce à la prop <code>placeholder</code>.</p>
+<AmeliproSelect v-bind="args" v-model="model" />`,
+	}),
+}
+
+// --- Readonly ---
+export const Readonly: Story = {
+	args: {
+		items,
+		label: 'Select en lecture seule',
+		uniqueId: 'amelipro-select-readonly',
+		readonly: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le select est en lecture seule grâce à la prop <code>readonly</code>.</p>
+  <AmeliproSelect
+    v-model="model"
+    :items="items"
+    label="Select en lecture seule"
+    unique-id="amelipro-select-readonly"
+    readonly
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproSelect } from '@cnamts/synapse'
+  const model = ref()
+  const items = [
+    { title: 'Lille', value: 1 },
+    { title: 'Paris', value: 2 },
+    { title: 'Bordeaux', value: 3 },
+    { title: 'Tours', value: 4 },
+    { title: 'Marseille', value: 5 },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproSelect },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">Le select est en lecture seule grâce à la prop <code>readonly</code>.</p>
+<AmeliproSelect v-bind="args" v-model="model" />`,
+	}),
+}
+
+// --- Horizontal ---
+export const Horizontal: Story = {
+	args: {
+		items,
+		label: 'Label horizontal',
+		uniqueId: 'amelipro-select-horizontal',
+		horizontal: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le label est affiché à l’horizontal grâce à la prop <code>horizontal</code>.</p>
+  <AmeliproSelect
+    v-model="model"
+    :items="items"
+    label="Label horizontal"
+    unique-id="amelipro-select-horizontal"
+    horizontal
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproSelect } from '@cnamts/synapse'
+  const model = ref()
+  const items = [
+    { title: 'Lille', value: 1 },
+    { title: 'Paris', value: 2 },
+    { title: 'Bordeaux', value: 3 },
+    { title: 'Tours', value: 4 },
+    { title: 'Marseille', value: 5 },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproSelect },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">Le label est affiché à l’horizontal grâce à la prop <code>horizontal</code>.</p>
+<AmeliproSelect v-bind="args" v-model="model" />`,
+	}),
+}
+
+// --- LabelInfo ---
+import AmeliproTooltips from '../AmeliproTooltips/AmeliproTooltips.vue'
+export const LabelInfo: Story = {
+	args: {
+		items,
+		label: 'Label avec info-bulle',
+		uniqueId: 'amelipro-select-labelinfo',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le slot <code>labelInfo</code> permet d’ajouter une info-bulle à droite du label.</p>
+  <AmeliproSelect
+    v-model="model"
+    :items="items"
+    label="Label avec info-bulle"
+    unique-id="amelipro-select-labelinfo"
+  >
+    <template #labelInfo>
+      <AmeliproTooltips
+        tooltip-text="Info-bulle personnalisée"
+        unique-id="amelipro-tooltip-id"
+      />
+    </template>
+  </AmeliproSelect>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproSelect } from '@cnamts/synapse'
+  import AmeliproTooltips from '../AmeliproTooltips/AmeliproTooltips.vue'
+  const model = ref()
+  const items = [
+    { title: 'Lille', value: 1 },
+    { title: 'Paris', value: 2 },
+    { title: 'Bordeaux', value: 3 },
+    { title: 'Tours', value: 4 },
+    { title: 'Marseille', value: 5 },
+  ]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproSelect, AmeliproTooltips },
+		setup() {
+			const model = ref()
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">Le slot <code>labelInfo</code> permet d’ajouter une info-bulle à droite du label.</p>
+<AmeliproSelect v-bind="args" v-model="model">
+  <template #labelInfo>
+    <AmeliproTooltips
+      tooltip-text="Info-bulle personnalisée"
+      unique-id="amelipro-tooltip-id"
+    />
+  </template>
+</AmeliproSelect>`,
+	}),
+}