diff --git a/demo/App.vue b/demo/App.vue index 5143a6b..d8e1321 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 +

+ +
+ + 
{{ formFields }}
@@ -154,6 +171,59 @@ export default defineComponent({ name: 'App', data() { return { + lcButton: false, + lcIcon: false, + lcFormButtonPrimary: { + attrs: { + color: 'secondary', + class: 'btn-primary', + }, + full: true, + text: 'Valider', + }, + lcFormButtonSecondary: { + attrs: { + color: 'secondary', + class: 'btn-secondary', + }, + full: true, + text: 'Annuler', + }, + formInput: [{ + model: '', + inputType: 'input', + attr: { + inputClass: 'w-full lc-col', + placeholder: 'Ecrit dedans :)', + 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', @@ -162,6 +232,7 @@ export default defineComponent({ 'grey', 'black'], btnIsDisable: false, + name: '', colors: [ 'primary', 'primary-light', @@ -176,6 +247,15 @@ export default defineComponent({ outlineIsDisable: false, } }, + methods: { + onSubmit(values: Object) { + console.log('onSubmit', values) + }, + onCancel(group: String, oldFields: Array) { + console.log('onCancel', group, oldFields) + this.formFields = oldFields + }, + }, }) 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/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/LcForm.vue b/src/components/LcForm.vue new file mode 100644 index 0000000..feb5346 --- /dev/null +++ b/src/components/LcForm.vue @@ -0,0 +1,146 @@ + + + diff --git a/src/components/LcInput.vue b/src/components/LcInput.vue new file mode 100644 index 0000000..7a63044 --- /dev/null +++ b/src/components/LcInput.vue @@ -0,0 +1,130 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index 945838b..ca26076 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,7 +14,9 @@ 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 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/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({ 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"