Skip to content

Commit 53c6e0e

Browse files
nasdannasdan
committed
Add basic structure
1 parent 1d462f0 commit 53c6e0e

26 files changed

Lines changed: 755 additions & 0 deletions

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

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {RecipeEntity} from '../../model/recipe';
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+
const save = (recipe: RecipeEntity): Promise<string> => {
12+
const index = recipes.findIndex(r => r.id === recipe.id);
13+
14+
return index >= 0 ?
15+
saveRecipeByIndex(index, recipe) :
16+
Promise.reject<string>('Something was wrong saving recipe :(');
17+
}
18+
19+
const saveRecipeByIndex = (index, recipe) => {
20+
recipes = [
21+
...recipes.slice(0, index),
22+
recipe,
23+
...recipes.slice(index + 1),
24+
];
25+
26+
return Promise.resolve('Save recipe sucess');
27+
}
28+
29+
export const recipeAPI = {
30+
fetchRecipeById,
31+
save,
32+
}

‎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/recipe';
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: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {InputComponent} from './input';
2+
import {ValidationComponent} from './validation';
3+
import {InputButtonComponent} from './inputButton';
4+
import {TextareaComponent} from './textarea';
5+
6+
export {
7+
InputComponent,
8+
ValidationComponent,
9+
InputButtonComponent,
10+
TextareaComponent,
11+
}

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

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

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

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

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Vue from 'vue';
2+
3+
export const TextareaComponent = Vue.extend({
4+
props: [
5+
'className',
6+
'placeholder',
7+
'value',
8+
'inputHandler',
9+
'label',
10+
'name',
11+
'rows',
12+
],
13+
render: function(h) {
14+
return (
15+
<div class={`form-group ${this.className}`}>
16+
<label for={this.name}>
17+
{this.label}
18+
</label>
19+
<textarea
20+
class="form-control"
21+
name={this.name}
22+
placeholder={this.placeholder}
23+
onInput={this.inputHandler}
24+
rows={this.rows}
25+
>
26+
{this.value}
27+
</textarea>
28+
</div>
29+
);
30+
},
31+
});

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

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

0 commit comments

Comments
 (0)