master < dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lc-component-library",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "license": "MIT",
   "files": [
     "dist"
@@ -33,18 +33,19 @@
     "@vee-validate/rules": "^4.1.20",
     "@vueform/multiselect": "^2.0.1",
     "esno": "0.4.4",
+    "maska": "^1.4.4",
     "vee-validate": "4.4.4",
-    "vue": "3.1.1"
+    "vue": "3.2.3"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.4.3",
     "@babel/core": "^7.13.14",
-    "@storybook/addon-a11y": "^6.3.2",
-    "@storybook/addon-actions": "^6.3.2",
-    "@storybook/addon-essentials": "^6.3.2",
-    "@storybook/addon-links": "^6.3.2",
+    "@storybook/addon-a11y": "^6.3.6",
+    "@storybook/addon-actions": "^6.3.6",
+    "@storybook/addon-essentials": "^6.3.6",
+    "@storybook/addon-links": "^6.3.6",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/vue3": "^6.3.2",
+    "@storybook/vue3": "^6.3.6",
     "@tailwindcss/postcss7-compat": "^2.1.0",
     "@types/jest": "^26.0.23",
     "@typescript-eslint/eslint-plugin": "4.21.0",
@@ -63,10 +64,10 @@
     "ts-jest": "^26.5.6",
     "tsup": "^4.3.1",
     "typescript": "4.2.3",
-    "vite": "2.1.5",
+    "vite": "2.5.0",
     "vue-jest": "^5.0.0-alpha.9",
     "vue-loader": "^16.2.0",
-    "vue-tsc": "^0.0.24"
+    "vue-tsc": "0.2.3"
   },
   "eslintConfig": {
     "extends": "@antfu/eslint-config",

src/components/LcCount/LcCount.d.ts

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

src/components/LcCount/LcCount.stories.ts

@@ -0,0 +1,20 @@
+import LcCount from './LcCount'
+
+export default {
+  title: 'Example/LcCount',
+  component: LcCount,
+}
+
+const Template = (args: any) => ({
+  components: { LcCount },
+  setup() {
+    return { args }
+  },
+  template: '<lc-count v-bind="args"/>',
+})
+
+export const Base = Template.bind({}) as any
+Base.args = {
+  nbCount: 1,
+  totalCount: 10,
+}

src/components/LcCount/LcCount.vue

@@ -0,0 +1,33 @@
+<template>
+  <span
+    v-if="nbCount < totalCount && nbCount > 0"
+    class="lc-count"
+    data-testid="lc-count"
+  >
+    {{ nbCount }}/{{ totalCount }}
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCount',
+  props: {
+    nbCount: {
+      type: Number,
+      default: 0,
+    },
+    totalCount: {
+      type: Number,
+      required: true,
+    },
+  },
+})
+</script>
+
+<style>
+.lc-count {
+  @apply border border-gray-200 bg-gray-200 rounded-full w-8 h-8 flex text-xs items-center justify-center text-gray-400 mx-1;
+}
+</style>

src/components/LcCount/__tests__/LcCount.spec.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { mount } from '@vue/test-utils'
+
+import LcCount from '../LcCount'
+
+let wrapper: any = {}
+
+beforeEach(() => {
+  wrapper = mount(LcCount, { props: { totalCount: 6 } })
+})
+
+afterEach(() => {
+  wrapper.unmount()
+})
+
+describe('LcCount.vue', () => {
+  it('is a Vue instance', () => {
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  it('should not show counts with no count', async() => {
+    await wrapper.setProps({ nbCount: 0 })
+    const countElt = wrapper.find('[data-testid="lc-count"]')
+
+    expect(countElt.exists()).toBeFalsy()
+  })
+
+  it('should not show counts with equality', async() => {
+    await wrapper.setProps({ nbCount: 6 })
+    const countElt = wrapper.find('[data-testid="lc-count"]')
+
+    expect(countElt.exists()).toBeFalsy()
+  })
+
+  it('should show the number of count', async() => {
+    await wrapper.setProps({ nbCount: 5 })
+    const countElt = wrapper.find('[data-testid="lc-count"]')
+
+    expect(countElt.text()).toBe('5/6')
+  })
+})

src/components/LcCount/index.ts

@@ -0,0 +1 @@
+export { default } from './LcCount.vue'

src/components/LcForm/LcForm.stories.ts

@@ -1,3 +1,5 @@
+import { action } from '@storybook/addon-actions'
+
 import LcForm from './LcForm'
 
 export default {
@@ -10,7 +12,11 @@ const Template = (args: any) => ({
   setup() {
     return { args }
   },
-  template: '<lc-form v-bind="args"/>',
+  template: '<lc-form v-bind="args" @onSubmit="onSubmit" @onCancel="onCancel"/>',
+  methods: {
+    onSubmit: action('onSubmit'),
+    onCancel: action('onCancel'),
+  },
 })
 
 export const Base = Template.bind({}) as any
@@ -34,7 +40,7 @@ Base.args = {
   },
   fields: [
     {
-      model: '',
+      model: 'Bob',
       inputType: 'input',
       attr: {
         disabled: true,
@@ -104,5 +110,17 @@ Base.args = {
         wrapperClass: 'mb-4',
       },
     },
+    {
+      model: '',
+      inputType: 'mask',
+      attr: {
+        label: 'Siret',
+        mask: '### ### ### #####',
+        name: 'siret',
+        placeholder: '### ### ### #####',
+        rules: { required: true, regex: /^[0-9]{3} [0-9]{3} [0-9]{3} [0-9]{5}$/ },
+        wrapperClass: 'w-full lc-col mb-4',
+      },
+    },
   ],
 }

src/components/LcForm/LcForm.vue

@@ -40,6 +40,11 @@
           :options="field.options || []"
           v-bind="field.attr"
         />
+        <lc-mask-input
+          v-if="field.inputType === 'mask' && !field.hidden"
+          v-model="field.model"
+          v-bind="field.attr"
+        />
       </div>
 
       <slot name="before-submit-button" />
@@ -76,6 +81,7 @@ import { defineComponent, ref } from 'vue'
 
 import { Form as vForm, defineRule, configure } from 'vee-validate'
 import {
+  regex,
   required,
   email,
   min,
@@ -90,6 +96,7 @@ import LcButton from '../LcButton'
 import LcMultiselect from '../LcMultiselect'
 import LcCheckbox from '../LcCheckbox'
 import LcInput from '../LcInput'
+import LcMaskInput from '../LcMaskInput'
 import LcTextarea from '../LcTextarea'
 import { LcRadioGroup } from '../LcRadio'
 import { FieldClassContainer, FormValues } from './types'
@@ -101,6 +108,7 @@ configure({
 })
 
 defineRule('required', required)
+defineRule('regex', regex)
 defineRule('email', email)
 defineRule('min', min)
 defineRule('numeric', numeric)
@@ -113,6 +121,7 @@ export default defineComponent({
     LcButton,
     LcCheckbox,
     LcInput,
+    LcMaskInput,
     LcMultiselect,
     LcTextarea,
     LcRadioGroup,

src/components/LcInput/LcInput.vue

@@ -22,7 +22,7 @@
       @blur="onBlur"
     >
 
-    <error-message :name="name" as="span" class="lc-input--error" />
+    <error-message :name="name" as="span" class="lc-form--error" />
   </div>
 </template>
 
@@ -136,7 +136,4 @@ export default defineComponent({
 .lc-input[disabled=disabled] {
   -webkit-text-fill-color: #aaaaaa;
 }
-.lc-input--error {
-  @apply text-sm text-error;
-}
 </style>

src/components/LcMaskInput/LcMaskInput.d.ts

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

src/components/LcMaskInput/LcMaskInput.stories.ts

@@ -0,0 +1,39 @@
+import { action } from '@storybook/addon-actions'
+
+import LcMaskInput from './LcMaskInput'
+
+export default {
+  title: 'Example/LcMaskInput',
+  component: LcMaskInput,
+}
+
+const Template = (args: any) => ({
+  components: { LcMaskInput },
+  setup() {
+    return { args }
+  },
+  template: `<lc-mask-input
+    v-bind="args"
+    @blur="onBlur"
+    @raw-value="rawValue"
+  />`,
+  methods: {
+    onBlur: action('onBlur'),
+    rawValue: action('rawValue'),
+  },
+})
+
+export const Base = Template.bind({}) as any
+Base.args = {
+  label: 'Siret',
+  name: 'siret',
+  modelValue: '',
+  wrapperClass: 'w-full',
+  mask: '### ### ### #####',
+}
+
+export const Value = Template.bind({}) as any
+Value.args = {
+  ...Base.args,
+  modelValue: '11122233355555',
+}