From bb253f8b6417f9e9a483531803f382a487cd2514 Mon Sep 17 00:00:00 2001 From: joffrey Date: Fri, 2 Apr 2021 11:34:03 +0200 Subject: [PATCH 1/2] base input --- demo/App.vue | 201 +++++++++++++-------- demo/main.ts | 2 +- src/components/LcErrors.vue | 33 ++++ src/components/LcFieldRules.vue | 66 +++++++ src/components/LcForm.vue | 310 ++++++++++++++++++++++++++++++++ src/components/LcInput.vue | 152 ++++++++++++++++ src/main.ts | 1 + vite.config.ts | 8 + 8 files changed, 693 insertions(+), 80 deletions(-) create mode 100644 src/components/LcErrors.vue create mode 100644 src/components/LcFieldRules.vue create mode 100644 src/components/LcForm.vue create mode 100644 src/components/LcInput.vue diff --git a/demo/App.vue b/demo/App.vue index 5143a6b..4cb3f26 100644 --- a/demo/App.vue +++ b/demo/App.vue @@ -2,25 +2,24 @@

Component library

-

- LcButton -

- -
-

- Variants : +
+

+ LcButton

-
-

- Btn : -

-
-
+ +
+

+ Variants : +

+
+

+ Btn : +

+
-
-
-

- Link : -

-
-
+
+

+ Link : +

+
-
-
-

- Outline : -

-
-
+
+

+ Outline : +

+
-
-

- Sizes : -

-
-
-
+ Sizes : +

+
+ - - {{ size }} - -
+ {{ size }} +
-
-

- Loader : -

-
-
+

+ Loader : +

+
primary -
-
secondary -
-
-

- LcIcon -

- -

- Sizes : -

-
-
- {{ size }} - +

+ LcIcon +

+ +
+

+ Sizes : +

+
+ +
+
+
+ +
+

+ LcInput +

+ +
+ + 
{{ formInput[0].model }}
+
+
+ +
+

+ LcForm +

+ +
+ + 
{{ formInput }}
@@ -154,6 +170,27 @@ export default defineComponent({ name: 'App', data() { return { + lcButton: false, + lcIcon: false, + lcFormButtonPrimary: { + attrs: { + color: 'secondary', + class: 'btn-primary', + }, + full: true, + text: 'Valider', + }, + formInput: [{ + model: '', + inputType: 'input', + inputClass: 'w-full lc-col', + attr: { + placeholder: 'Ecrit dedans :)', + label: 'addresse', + name: 'address', + rules: 'required', + }, + }], buttonSizes: ['sm', 'md', 'lg', 'xl'], iconSizes: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'], btnColors: ['primary', @@ -162,6 +199,7 @@ export default defineComponent({ 'grey', 'black'], btnIsDisable: false, + name: '', colors: [ 'primary', 'primary-light', @@ -176,6 +214,11 @@ export default defineComponent({ outlineIsDisable: false, } }, + methods: { + onSubmit() { + console.log('on submit') + }, + }, }) diff --git a/demo/main.ts b/demo/main.ts index ab8eb25..9d2e5ef 100644 --- a/demo/main.ts +++ b/demo/main.ts @@ -1,5 +1,5 @@ import { createApp } from 'vue' -import { LcComponents } from '../src/main' +import { LcComponents } from '@/main' import App from './App.vue' const app = createApp(App) diff --git a/src/components/LcErrors.vue b/src/components/LcErrors.vue new file mode 100644 index 0000000..bae7e15 --- /dev/null +++ b/src/components/LcErrors.vue @@ -0,0 +1,33 @@ + + + diff --git a/src/components/LcFieldRules.vue b/src/components/LcFieldRules.vue new file mode 100644 index 0000000..ba006e8 --- /dev/null +++ b/src/components/LcFieldRules.vue @@ -0,0 +1,66 @@ + + + diff --git a/src/components/LcForm.vue b/src/components/LcForm.vue new file mode 100644 index 0000000..f17b76d --- /dev/null +++ b/src/components/LcForm.vue @@ -0,0 +1,310 @@ + + + + + diff --git a/src/components/LcInput.vue b/src/components/LcInput.vue new file mode 100644 index 0000000..1294d98 --- /dev/null +++ b/src/components/LcInput.vue @@ -0,0 +1,152 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index 945838b..b970581 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,6 +14,7 @@ export const LcComponents: Plugin = { // START_EXPORTS export { default as LcButton } from './components/LcButton.vue' +export { default as LcForm } from './components/LcForm.vue' export { default as LcIcon } from './components/LcIcon.vue' export { default as LcModal } from './components/LcModal.vue' export { default as LcTable } from './components/LcTable.vue' diff --git a/vite.config.ts b/vite.config.ts index f177cfa..41d53d7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -21,6 +21,14 @@ export default defineConfig({ }, }, }, + resolve: { + alias: { + '@': path.resolve(__dirname, '/src'), + }, + }, + server: { + open: true, + }, plugins: [ vue(), WindiCSS({ From 02e249cd86130033e5cb0bca003d02c702945fad Mon Sep 17 00:00:00 2001 From: Florian Le Heurte Date: Tue, 6 Apr 2021 18:04:37 +0200 Subject: [PATCH 2/2] component lc-input lc-form --- demo/App.vue | 53 ++++- package.json | 5 +- src/components/LcErrors.vue | 33 ---- src/components/LcFieldRules.vue | 66 ------- src/components/LcForm.vue | 338 ++++++++------------------------ src/components/LcInput.vue | 132 ++++++------- src/main.ts | 1 + src/types/LcForm.ts | 12 ++ yarn.lock | 15 ++ 9 files changed, 219 insertions(+), 436 deletions(-) delete mode 100644 src/components/LcErrors.vue delete mode 100644 src/components/LcFieldRules.vue create mode 100644 src/types/LcForm.ts diff --git a/demo/App.vue b/demo/App.vue index 4cb3f26..d8e1321 100644 --- a/demo/App.vue +++ b/demo/App.vue @@ -152,12 +152,13 @@
- 
{{ formInput }}
+ 
{{ formFields }}
@@ -180,17 +181,49 @@ export default defineComponent({ full: true, text: 'Valider', }, + lcFormButtonSecondary: { + attrs: { + color: 'secondary', + class: 'btn-secondary', + }, + full: true, + text: 'Annuler', + }, formInput: [{ model: '', inputType: 'input', - inputClass: 'w-full lc-col', attr: { + inputClass: 'w-full lc-col', placeholder: 'Ecrit dedans :)', - label: 'addresse', - name: 'address', + label: 'Nom', + name: 'lastname', rules: 'required', }, }], + formFields: [ + { + model: '', + inputType: 'input', + attr: { + disabled: true, + inputClass: 'w-full lc-col', + placeholder: 'Ecrit dedans :)', + label: 'Prénom', + name: 'firstname', + rules: 'required', + }, + }, + { + model: '', + inputType: 'input', + attr: { + inputClass: 'w-full lc-col', + label: 'addresse', + name: 'address', + rules: 'required', + }, + }, + ], buttonSizes: ['sm', 'md', 'lg', 'xl'], iconSizes: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'], btnColors: ['primary', @@ -215,8 +248,12 @@ export default defineComponent({ } }, methods: { - onSubmit() { - console.log('on submit') + onSubmit(values: Object) { + console.log('onSubmit', values) + }, + onCancel(group: String, oldFields: Array) { + console.log('onCancel', group, oldFields) + this.formFields = oldFields }, }, }) diff --git a/package.json b/package.json index 5003d5b..308c5fe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lc-component-library", - "version": "1.0.94", + "version": "1.0.2", "files": [ "dist" ], @@ -22,7 +22,10 @@ } }, "dependencies": { + "@vee-validate/i18n": "^4.1.20", + "@vee-validate/rules": "^4.1.20", "esno": "0.4.4", + "vee-validate": "^4.2.4", "vue": "^3.0.5" }, "devDependencies": { diff --git a/src/components/LcErrors.vue b/src/components/LcErrors.vue deleted file mode 100644 index bae7e15..0000000 --- a/src/components/LcErrors.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - diff --git a/src/components/LcFieldRules.vue b/src/components/LcFieldRules.vue deleted file mode 100644 index ba006e8..0000000 --- a/src/components/LcFieldRules.vue +++ /dev/null @@ -1,66 +0,0 @@ - - - diff --git a/src/components/LcForm.vue b/src/components/LcForm.vue index f17b76d..feb5346 100644 --- a/src/components/LcForm.vue +++ b/src/components/LcForm.vue @@ -1,97 +1,81 @@ - + - - diff --git a/src/components/LcInput.vue b/src/components/LcInput.vue index 1294d98..7a63044 100644 --- a/src/components/LcInput.vue +++ b/src/components/LcInput.vue @@ -1,5 +1,5 @@ @@ -146,7 +127,4 @@ export default defineComponent({ .base-input--input[disabled=disabled] { -webkit-text-fill-color: #aaaaaa; } -.base-input--input:focus { - outline: 0; -} diff --git a/src/main.ts b/src/main.ts index b970581..ca26076 100644 --- a/src/main.ts +++ b/src/main.ts @@ -16,6 +16,7 @@ export const LcComponents: Plugin = { export { default as LcButton } from './components/LcButton.vue' export { default as LcForm } from './components/LcForm.vue' export { default as LcIcon } from './components/LcIcon.vue' +export { default as LcInput } from './components/LcInput.vue' export { default as LcModal } from './components/LcModal.vue' export { default as LcTable } from './components/LcTable.vue' // END_EXPORTS diff --git a/src/types/LcForm.ts b/src/types/LcForm.ts new file mode 100644 index 0000000..110ffff --- /dev/null +++ b/src/types/LcForm.ts @@ -0,0 +1,12 @@ +interface FieldClassContainer { + containerInputClass: string +} + +interface FormValues { + [key: string]: string|number +} + +export { + FieldClassContainer, + FormValues, +} diff --git a/yarn.lock b/yarn.lock index 02097c7..817e8f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -424,6 +424,16 @@ "@typescript-eslint/types" "4.15.2" eslint-visitor-keys "^2.0.0" +"@vee-validate/i18n@^4.1.20": + version "4.1.20" + resolved "https://registry.yarnpkg.com/@vee-validate/i18n/-/i18n-4.1.20.tgz#1f3a3a5da83217fc77fd32e5da6c9d714e91c515" + integrity sha512-3K7R3m3Z206Hq6iJpXHJNSYDjJFFHzZrA7wjowTts52iEsv9kNpA/WCkdJsQLae8J+QLiKyK53ma35gAet8yFg== + +"@vee-validate/rules@^4.1.20": + version "4.1.20" + resolved "https://registry.yarnpkg.com/@vee-validate/rules/-/rules-4.1.20.tgz#50c8cdf92df18560b6c6e8772399df88c44b7de3" + integrity sha512-DsG+NrCv/rEIpEEOqv+R7Za5rsA9xdIq4XEARjcHI3liXgkd8aeNWCnnmGyDbkz2BVav7n37IhP16ceJHnFXBA== + "@vitejs/plugin-vue@^1.1.4": version "1.1.4" resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.1.4.tgz" @@ -2754,6 +2764,11 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +vee-validate@^4.2.4: + version "4.2.4" + resolved "https://registry.yarnpkg.com/vee-validate/-/vee-validate-4.2.4.tgz#98d81231ba9509c143d261e15c83b9b8bac7994e" + integrity sha512-6C7Nwy2+ZwWUYjGYDi+KXAkDk+ngLa2Gi+9bHcsp+fAxwfX8s8giU/2RERA2ki7EPR5P3VFFyyFSNHhPbYEHaA== + vite-plugin-windicss@^0.6.10: version "0.6.10" resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-0.6.10.tgz#b2719bc9f29220208162e04c342a8983f7536fdb"