Skip to content

Commit ff95357

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #82 from Lemoncode/feature/81_Add_VueJS_sample
Feature/81 add vue js sample
2 parents 1d462f0 + f4379d6 commit ff95357

26 files changed

Lines changed: 727 additions & 0 deletions

File tree

‎samples/vuejs/typescript/00 Custom Validator/.babelrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": [
3+
"env"
4+
],
5+
"plugins": [
6+
"transform-vue-jsx"
7+
]
8+
}

‎samples/vuejs/typescript/00 Custom Validator/package.json‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "sample-vue-js",
3+
"version": "1.0.0",
4+
"description": "Sample working with VueJS and lc-form-validation",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server",
8+
"build": "webpack"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/Lemoncode/lcFormValidation.git"
13+
},
14+
"keywords": [
15+
"vue.js",
16+
"samples",
17+
"typescript",
18+
"webpack",
19+
"lc-form-validation"
20+
],
21+
"author": "Lemoncode",
22+
"license": "MIT",
23+
"bugs": {
24+
"url": "https://github.com/Lemoncode/lcFormValidation/issues"
25+
},
26+
"homepage": "https://github.com/Lemoncode/lcFormValidation#readme",
27+
"devDependencies": {
28+
"@types/webpack-env": "^1.13.0",
29+
"awesome-typescript-loader": "^3.1.2",
30+
"babel-core": "^6.24.1",
31+
"babel-helper-vue-jsx-merge-props": "^2.0.2",
32+
"babel-plugin-syntax-jsx": "^6.18.0",
33+
"babel-plugin-transform-vue-jsx": "^3.4.2",
34+
"babel-preset-env": "^1.3.3",
35+
"css-loader": "^0.28.0",
36+
"extract-text-webpack-plugin": "^2.1.0",
37+
"file-loader": "^0.11.1",
38+
"html-webpack-plugin": "^2.28.0",
39+
"style-loader": "^0.16.1",
40+
"typescript": "^2.2.2",
41+
"url-loader": "^0.5.8",
42+
"webpack": "^2.3.3",
43+
"webpack-dev-server": "^2.4.2"
44+
},
45+
"dependencies": {
46+
"bootstrap": "^3.3.7",
47+
"lc-form-validation": "^1.0.0",
48+
"vue": "^2.2.6",
49+
"vue-router": "^2.4.0"
50+
}
51+
}

‎samples/vuejs/typescript/00 Custom Validator/src/api/recipe/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import {RecipeEntity} from '../../model';
2+
import {mockRecipes} from './mockData';
3+
4+
let recipes = mockRecipes;
5+
6+
const fetchRecipeById = (id: number): Promise<RecipeEntity> => {
7+
const recipe = recipes.find((r) => r.id === id);
8+
return Promise.resolve(recipe);
9+
}
10+
11+
export const recipeAPI = {
12+
fetchRecipeById,
13+
}

‎samples/vuejs/typescript/00 Custom Validator/src/api/recipe/mockData.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {RecipeEntity} from '../../model';
2+
3+
export const mockRecipes: RecipeEntity[] = [
4+
{
5+
id: 1,
6+
name: 'Omelette',
7+
ingredients: [
8+
'2 eggs',
9+
'cheese',
10+
'salt',
11+
'black pepper',
12+
],
13+
},
14+
]

‎samples/vuejs/typescript/00 Custom Validator/src/app.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from 'vue';
2+
3+
export const App = Vue.extend({
4+
render: function(h) {
5+
return (
6+
<div class="container-fluid">
7+
<router-view></router-view>
8+
</div>
9+
);
10+
},
11+
});

‎samples/vuejs/typescript/00 Custom Validator/src/common/components/form/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {InputComponent} from './input';
2+
import {ValidationComponent} from './validation';
3+
import {InputButtonComponent} from './inputButton';
4+
5+
export {
6+
InputComponent,
7+
ValidationComponent,
8+
InputButtonComponent,
9+
}

‎samples/vuejs/typescript/00 Custom Validator/src/common/components/form/input.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Vue, {ComponentOptions} from 'vue';
2+
3+
interface Props extends Vue {
4+
className: string;
5+
placeholder: string;
6+
type: string;
7+
value: any;
8+
inputHandler: (event) => void;
9+
label: string;
10+
name: string;
11+
}
12+
13+
export const InputComponent = Vue.extend({
14+
props: [
15+
'className',
16+
'placeholder',
17+
'type',
18+
'value',
19+
'inputHandler',
20+
'label',
21+
'name',
22+
],
23+
render: function(h) {
24+
return (
25+
<div class={`form-group ${this.className}`}>
26+
<label for={this.name}>
27+
{this.label}
28+
</label>
29+
<input
30+
class="form-control"
31+
name={this.name}
32+
placeholder={this.placeholder}
33+
type={this.type}
34+
value={this.value}
35+
onInput={this.inputHandler}
36+
/>
37+
</div>
38+
);
39+
},
40+
} as ComponentOptions<Props>);

‎samples/vuejs/typescript/00 Custom Validator/src/common/components/form/inputButton.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import Vue, {ComponentOptions} from 'vue';
2+
3+
interface Props extends Vue {
4+
className: string;
5+
placeholder: string;
6+
type: string;
7+
value: any;
8+
inputHandler: (event) => void;
9+
label: string;
10+
name: string;
11+
buttonText: string;
12+
buttonClickHandler: (event) => void;
13+
buttonClassName: string;
14+
}
15+
16+
export const InputButtonComponent = Vue.extend({
17+
props: [
18+
'className',
19+
'placeholder',
20+
'type',
21+
'value',
22+
'inputHandler',
23+
'label',
24+
'name',
25+
'buttonText',
26+
'buttonClickHandler',
27+
'buttonClassName',
28+
],
29+
render: function(h) {
30+
return (
31+
<div class={`form-group ${this.className}`}>
32+
<label for={this.name}>
33+
{this.label}
34+
</label>
35+
<div class="input-group">
36+
<input
37+
class="form-control"
38+
name={this.name}
39+
placeholder={this.placeholder}
40+
type={this.type}
41+
value={this.value}
42+
onInput={this.inputHandler}
43+
/>
44+
<div class="input-group-btn">
45+
<button
46+
class={this.buttonClassName}
47+
onClick={this.buttonClickHandler}
48+
>
49+
{this.buttonText}
50+
</button>
51+
</div>
52+
</div>
53+
</div>
54+
);
55+
},
56+
} as ComponentOptions<Props>);

‎samples/vuejs/typescript/00 Custom Validator/src/common/components/form/validation.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Vue, {ComponentOptions} from 'vue';
2+
3+
interface Props extends Vue {
4+
hasError: boolean;
5+
errorMessage: string;
6+
className: string;
7+
}
8+
9+
export const ValidationComponent = Vue.extend({
10+
props: [
11+
'hasError',
12+
'errorMessage',
13+
'className',
14+
],
15+
render: function(h) {
16+
let wrapperClass = `${this.className}`;
17+
18+
if(this.hasError) {
19+
wrapperClass = `${wrapperClass} has-error`
20+
}
21+
22+
return (
23+
<div class={wrapperClass}>
24+
{this.$slots.default}
25+
<div class="help-block">
26+
{this.errorMessage}
27+
</div>
28+
</div>
29+
);
30+
},
31+
} as ComponentOptions<Props>);

‎samples/vuejs/typescript/00 Custom Validator/src/common/validations/arrayValidation.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {FieldValidationResult} from 'lc-form-validation';
2+
3+
export const hasItems = (message) => (value: any[]): FieldValidationResult => {
4+
const isValid = value.length > 0;
5+
return {
6+
type: 'ARRAY_HAS_ITEMS',
7+
succeeded: isValid,
8+
errorMessage: isValid ? '' : message,
9+
}
10+
}

0 commit comments

Comments
 (0)