feat(LcRadio): [ch5583] LcRadio component

README.md

@@ -15,6 +15,7 @@ This repo provides a basic setup for developing component libraries in Vite with
 - [x] LcInput
 - [x] LcModal
 - [x] LcPagination
+- [x] LcRadioGroup & LcRadio
 - [x] LcTable
 - [x] LcTooltip
 

src/components/LcForm.vue

@@ -33,6 +33,12 @@
           v-model="field.model"
           v-bind="field.attr"
         />
+        <lc-radio-group
+          v-if="field.inputType === 'radio' && !field.hidden"
+          v-model="field.model"
+          :options="field.options || []"
+          v-bind="field.attr"
+        />
       </div>
 
       <slot name="before-submit-button" />
@@ -86,6 +92,7 @@ import LcMultiselect from './LcMultiselect/LcMultiselect.vue'
 import LcCheckbox from './LcCheckbox.vue'
 import LcInput from './LcInput.vue'
 import LcTextarea from './LcTextarea'
+import { LcRadioGroup } from './LcRadio'
 
 configure({
   generateMessage: localize({
@@ -108,6 +115,7 @@ export default defineComponent({
     LcInput,
     LcMultiselect,
     LcTextarea,
+    LcRadioGroup,
     vForm,
   },
   props: {

src/components/LcRadio/LcRadio.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent } from 'vue'
+const component: DefineComponent<{}, {}, any>
+export default component

src/components/LcRadio/LcRadio.stories.ts

@@ -0,0 +1,34 @@
+import { action } from '@storybook/addon-actions'
+
+import LcRadio from './LcRadio.vue'
+
+export default {
+  title: 'Example/LcRadio',
+  component: LcRadio,
+}
+
+const Template = (args: any) => ({
+  components: { LcRadio },
+  setup() {
+    return { args }
+  },
+  template: '<lc-radio v-bind="args" @update:modelValue="onChange" />',
+  methods: {
+    onChange: action('onChange'),
+  },
+})
+
+export const Base = Template.bind({}) as any
+Base.args = {
+  label: 'Monsieur',
+  modelValue: '',
+  name: 'civility',
+  value: 'mr',
+  vertical: false,
+}
+
+export const Disabled = Template.bind({}) as any
+Disabled.args = {
+  ...Base.args,
+  disabled: true,
+}

src/components/LcRadio/LcRadio.vue

@@ -0,0 +1,107 @@
+<template>
+  <label
+    :class="[
+      'lc-radio-label',
+      {'lc-radio-label--disabled': disabled },
+      {'lc-radio-label--vertical': vertical },
+    ]
+    "
+    :for="value"
+  >
+    <input
+      :id="value"
+      :checked="modelValue === value"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      class="lc-radio"
+      type="radio"
+      v-bind="$attrs"
+      @change="onChange"
+    >
+    <span class="radio" />
+    {{ label }}
+  </label>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'LcRadio',
+  inheritAttrs: false,
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: [Number, String],
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [Number, String],
+      required: true,
+    },
+    vertical: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(_, { emit }) {
+    function onChange(event: Event & { target: HTMLInputElement }): void {
+      emit('update:modelValue', event.target.value)
+    }
+
+    return {
+      onChange,
+    }
+  },
+})
+</script>
+<style scoped>
+.lc-radio-label {
+  @apply inline-flex justify-start items-center mr-4 cursor-pointer;
+}
+
+.lc-radio-label--disabled {
+  @apply text-gray-500 cursor-not-allowed;
+}
+
+.lc-radio-label--vertical {
+  @apply mb-2 mr-0;
+}
+
+.lc-radio {
+  @apply appearance-none cursor-pointer mr-2 border border-gray-400 rounded-full checked:bg-primary-500 checked:border-primary-500 w-6 h-6 md:w-4 md:h-4;
+}
+
+.lc-radio:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-size: 120% 120%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+.lc-radio:hover:not(:checked) {
+  @apply bg-gray-200;
+}
+
+.lc-radio:disabled {
+  @apply bg-gray-300 cursor-not-allowed;
+}
+
+.lc-radio:hover:disabled {
+  @apply bg-gray-300;
+}
+</style>

src/components/LcRadio/LcRadioGroup.stories.ts

@@ -0,0 +1,79 @@
+import { action } from '@storybook/addon-actions'
+
+import LcRadio from './LcRadio.vue'
+import LcRadioGroup from './LcRadioGroup.vue'
+
+export default {
+  title: 'Example/LcRadioGroup',
+  component: LcRadioGroup,
+  subcomponents: { LcRadio },
+}
+
+const Template = (args: any) => ({
+  components: { LcRadioGroup, LcRadio },
+  setup() {
+    return { args }
+  },
+  template: '<lc-radio-group v-bind="args" @update:modelValue="onChange" />',
+  methods: {
+    onChange: action('onChange'),
+  },
+})
+
+export const Base = Template.bind({}) as any
+Base.args = {
+  modelValue: '',
+  name: 'civility',
+  options: [
+    {
+      label: 'Monsieur',
+      value: 'mr',
+    },
+    {
+      label: 'Madame',
+      value: 'ms',
+    },
+    {
+      label: 'Non binaire',
+      value: 'unknown',
+    },
+  ],
+}
+
+export const WithLabel = Template.bind({}) as any
+WithLabel.args = {
+  ...Base.args,
+  label: 'Choisir votre civilité :',
+}
+
+export const Vertical = Template.bind({}) as any
+Vertical.args = {
+  ...Base.args,
+  vertical: true,
+}
+
+export const VerticalWithLabel = Template.bind({}) as any
+VerticalWithLabel.args = {
+  ...WithLabel.args,
+  vertical: true,
+}
+
+export const Disabled = Template.bind({}) as any
+Disabled.args = {
+  ...WithLabel.args,
+  options: [
+    {
+      label: 'Monsieur',
+      value: 'mr',
+      disabled: true,
+    },
+    {
+      label: 'Madame',
+      value: 'ms',
+    },
+    {
+      label: 'Non binaire',
+      value: 'unknown',
+    },
+  ],
+}

src/components/LcRadio/LcRadioGroup.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="wrapperClass">
+    <label v-if="label" class="lc-radiogroup-label">
+      {{ label }}
+    </label>
+    <div :class="['lc-radiogroup-layout', {'lc-radiogroup-layout--vertical': vertical }]">
+      <lc-radio
+        v-for="option in options"
+        :key="option.value"
+        :model-value="inputValue"
+        :name="name"
+        :vertical="vertical"
+        v-bind="{...option}"
+        @update:modelValue="onChange"
+      />
+    </div>
+    <error-message :name="name" as="span" class="lc-radiogroup--error" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { ErrorMessage, useField } from 'vee-validate'
+import LcRadio from './LcRadio.vue'
+
+interface Option {
+  disabled?: boolean
+  label: string
+  value: string|number
+}
+
+export default defineComponent({
+  name: 'LcRadioGroup',
+  components: { LcRadio, ErrorMessage },
+  props: {
+    rules: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array as PropType<Option[]>,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: [String, Number],
+      required: true,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+    wrapperClass: {
+      type: String,
+      default: 'w-full flex flex-col mb-4',
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const {
+      value: inputValue,
+      handleChange,
+    } = useField<number|string>(props.name, props.rules, {
+      initialValue: props.modelValue,
+    })
+
+    function onChange(payload: string): void {
+      handleChange(payload)
+      emit('update:modelValue', payload)
+    }
+
+    return {
+      onChange,
+      inputValue,
+    }
+  },
+})
+</script>
+<style scoped>
+.lc-radiogroup-label {
+  @apply mb-2;
+}
+
+.lc-radiogroup-layout {
+  @apply flex;
+}
+
+.lc-radiogroup-layout--vertical {
+  @apply flex-col;
+}
+
+.lc-radiogroup--error {
+  @apply text-sm text-error mt-1;
+}
+</style>