Skip to content

Commit a04e08f

Browse files
budiadionobudiadiono
committed
[field-base] added disabled prop
1 parent 8806b5d commit a04e08f

File tree

9 files changed

+161
-64
lines changed

9 files changed

+161
-64
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ node_modules/
22
bower_components/
33
npm-debug.log
44
demo/dist/bundle.*
5-
.vscode/
5+
.vscode/
6+
debug.log

‎demo/src/demo/input/basic/index.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<div>
2-
<ui-form>
3-
<ui-input v-model="firstName" label="First Name" placeholder="Please enter your first name"></ui-input>
4-
<ui-input v-model="lastName" label="Last Name" placeholder="Please enter your last name"></ui-input>
5-
<ui-input v-model="password" :password="true" label="Password" placeholder="Please enter password"></ui-input>
6-
<ui-field label="Your name is">{{fullName}}</ui-field>
7-
<ui-button v-on:click="resetFullName">Reset</ui-button>
8-
<ui-input v-model.lazy="lazyName" label="Lazy Name" placeholder="Please enter your lazy name"></ui-input>
9-
<ui-field label="Your lazy name is">{{lazyName}}</ui-field>
10-
<ui-button v-on:click="resetLazyName">Reset</ui-button>
11-
</ui-form>
2+
<ui-form>
3+
<ui-input v-model="firstName" label="First Name" placeholder="Please enter your first name"></ui-input>
4+
<ui-input v-model="lastName" label="Last Name" placeholder="Please enter your last name"></ui-input>
5+
<ui-input v-model="password" :password="true" label="Password" placeholder="Please enter password"></ui-input>
6+
<ui-field label="Your name is">{{fullName}}</ui-field>
7+
<ui-button v-on:click="resetFullName">Reset</ui-button>
8+
<ui-input v-model.lazy="lazyName" label="Lazy Name" placeholder="Please enter your lazy name"></ui-input>
9+
<ui-field label="Your lazy name is">{{lazyName}}</ui-field>
10+
<ui-button v-on:click="resetLazyName">Reset</ui-button>
11+
<ui-input v-model="address" label="Street Address" placeholder="Please enter your street address" :disabled="!allowEditAddress"></ui-input>
12+
<ui-checkbox v-model="allowEditAddress">Allow Edit Address</ui-checkbox>
13+
</ui-form>
1214
</div>

‎demo/src/demo/input/basic/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ export class InputBasic extends Base {
99
firstName: string = 'John'
1010
lastName: string = 'Doe'
1111
password: string = 'supersecretpassword'
12+
address: string = ''
13+
14+
allowEditAddress: boolean = true
1215

1316
get fullName() {
1417
return this.firstName + ' ' + this.lastName;

‎dist/vue-typed-ui.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -640,7 +640,17 @@ var _FieldBaseBase = function (_Vue) {
640640

641641
function _FieldBaseBase() {
642642
classCallCheck(this, _FieldBaseBase);
643-
return possibleConstructorReturn(this, (_FieldBaseBase.__proto__ || Object.getPrototypeOf(_FieldBaseBase)).apply(this, arguments));
643+
644+
/**
645+
* Disabled field
646+
*
647+
* @default false
648+
* @type {boolean}
649+
*/
650+
var _this = possibleConstructorReturn(this, (_FieldBaseBase.__proto__ || Object.getPrototypeOf(_FieldBaseBase)).apply(this, arguments));
651+
652+
_this.disabled = false;
653+
return _this;
644654
}
645655

646656
return _FieldBaseBase;
@@ -653,6 +663,9 @@ __decorate([vueTyped.Prop({
653663
type: Number
654664
})], _FieldBaseBase.prototype, "wide", void 0);
655665
__decorate([vueTyped.Prop()], _FieldBaseBase.prototype, "kind", void 0);
666+
__decorate([vueTyped.Prop({
667+
type: Boolean
668+
})], _FieldBaseBase.prototype, "disabled", void 0);
656669

657670
var FieldBase = function (_FieldBaseBase2) {
658671
inherits(FieldBase, _FieldBaseBase2);
@@ -676,6 +689,9 @@ var FieldBase = function (_FieldBaseBase2) {
676689
if (this.kind) {
677690
style = this.kind + ' fields';
678691
}
692+
if (this.disabled) {
693+
style += ' disabled';
694+
}
679695
var el = ch('div', {
680696
'class': Util.buildClassObject(style, Util.parseWide(this.wide))
681697
}, contents);

‎doc/api.json‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,11 @@
135135
"type": "boolean",
136136
"description": "Enable user to clear the value by clicking clear button on the right side of control"
137137
},
138+
"disabled": {
139+
"type": "boolean",
140+
"description": "Disabled field",
141+
"default": "false"
142+
},
138143
"kind": {
139144
"type": "'default' | 'grouped' | 'inline'",
140145
"description": "Field layout style"
@@ -221,6 +226,11 @@
221226
"type": "string",
222227
"description": "Decimal group separator"
223228
},
229+
"disabled": {
230+
"type": "boolean",
231+
"description": "Disabled field",
232+
"default": "false"
233+
},
224234
"group-separator": {
225235
"type": "string",
226236
"description": "Thousands group separator"
@@ -287,6 +297,11 @@
287297
"type": "boolean",
288298
"description": "Enable user to clear the value by clicking clear button on the right side of control"
289299
},
300+
"disabled": {
301+
"type": "boolean",
302+
"description": "Disabled field",
303+
"default": "false"
304+
},
290305
"format": {
291306
"type": "string",
292307
"description": "Date format"
@@ -340,6 +355,11 @@
340355
"type": "boolean",
341356
"description": "Enable user to clear the value by clicking clear button on the right side of control"
342357
},
358+
"disabled": {
359+
"type": "boolean",
360+
"description": "Disabled field",
361+
"default": "false"
362+
},
343363
"format": {
344364
"type": "string",
345365
"description": "Date format"
@@ -393,6 +413,11 @@
393413
"type": "string",
394414
"description": "Css class(es) applied to dropdown component"
395415
},
416+
"disabled": {
417+
"type": "boolean",
418+
"description": "Disabled field",
419+
"default": "false"
420+
},
396421
"kind": {
397422
"type": "'default' | 'grouped' | 'inline'",
398423
"description": "Field layout style"
@@ -455,6 +480,11 @@
455480
"type": "component",
456481
"readme": false,
457482
"props": {
483+
"disabled": {
484+
"type": "boolean",
485+
"description": "Disabled field",
486+
"default": "false"
487+
},
458488
"kind": {
459489
"type": "'default' | 'grouped' | 'inline'",
460490
"description": "Field layout style"
@@ -481,6 +511,11 @@
481511
"type": "component",
482512
"readme": false,
483513
"props": {
514+
"disabled": {
515+
"type": "boolean",
516+
"description": "Disabled field",
517+
"default": "false"
518+
},
484519
"kind": {
485520
"type": "'default' | 'grouped' | 'inline'",
486521
"description": "Field layout style"
@@ -595,6 +630,11 @@
595630
"type": "string",
596631
"description": "Css class(es) applied to input component"
597632
},
633+
"disabled": {
634+
"type": "boolean",
635+
"description": "Disabled field",
636+
"default": "false"
637+
},
598638
"icon": {
599639
"type": "string",
600640
"description": "Name of icon to be displayed"
@@ -887,6 +927,11 @@
887927
"type": "string",
888928
"description": "Decimal group separator"
889929
},
930+
"disabled": {
931+
"type": "boolean",
932+
"description": "Disabled field",
933+
"default": "false"
934+
},
890935
"group-separator": {
891936
"type": "string",
892937
"description": "Thousands group separator"
@@ -978,6 +1023,11 @@
9781023
"type": "component",
9791024
"readme": false,
9801025
"props": {
1026+
"disabled": {
1027+
"type": "boolean",
1028+
"description": "Disabled field",
1029+
"default": "false"
1030+
},
9811031
"kind": {
9821032
"type": "'default' | 'grouped' | 'inline'",
9831033
"description": "Field layout style"
@@ -1076,6 +1126,11 @@
10761126
"type": "boolean",
10771127
"description": "Enable user to clear the value by clicking clear button on the right side of control"
10781128
},
1129+
"disabled": {
1130+
"type": "boolean",
1131+
"description": "Disabled field",
1132+
"default": "false"
1133+
},
10791134
"format": {
10801135
"type": "string",
10811136
"description": "Date format"

‎src/components/fields/field-base/_base.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,15 @@ export abstract class _FieldBaseBase extends Vue {
3636
@Prop()
3737
kind: 'default' | 'grouped' | 'inline'
3838

39+
/**
40+
* Disabled field
41+
*
42+
* @default false
43+
* @type {boolean}
44+
*/
45+
@Prop({
46+
type: Boolean
47+
})
48+
disabled: boolean = false
49+
3950
}

‎src/components/fields/field-base/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ export abstract class FieldBase extends _FieldBaseBase {
2626
style = this.kind + ' fields'
2727
}
2828

29+
if (this.disabled) {
30+
style += ' disabled'
31+
}
32+
2933
var el = ch('div', {
3034
'class': Util.buildClassObject(style, Util.parseWide(this.wide))
3135
}, contents);

‎src/components/fields/field-base/schema/props.json‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
{
2-
"base": {
3-
"Vue": "vue"
4-
},
5-
"isBase": "true",
6-
"props": {
7-
"label": {
8-
"type": "string",
9-
"description": "Field label text"
10-
},
11-
"wide": {
12-
"type": "number",
13-
"description": "Size of field"
14-
},
15-
"kind": {
16-
"type": "'default' | 'grouped' | 'inline'",
17-
"description": "Field layout style"
18-
}
19-
}
2+
"base": {
3+
"Vue": "vue"
4+
},
5+
"isBase": "true",
6+
"props": {
7+
"label": {
8+
"type": "string",
9+
"description": "Field label text"
10+
},
11+
"wide": {
12+
"type": "number",
13+
"description": "Size of field"
14+
},
15+
"kind": {
16+
"type": "'default' | 'grouped' | 'inline'",
17+
"description": "Field layout style"
18+
},
19+
"disabled": {
20+
"type": "boolean",
21+
"description": "Disabled field",
22+
"default": "false"
23+
}
24+
}
2025
}

‎src/components/form-inputs/input/schema/props.json‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
{
2-
"base": {
3-
"FieldBase": "../../fields/field-base"
4-
},
5-
"props": {
6-
"name": {
7-
"type": "string",
8-
"description": "Input element name"
9-
},
10-
"placeholder": {
11-
"type": "string",
12-
"description": "Input element placeholder"
13-
},
14-
"value": {
15-
"type": "any",
16-
"description": "v-model binding"
17-
},
18-
"password": {
19-
"type": "boolean",
20-
"description": "Input element is password element"
21-
},
22-
"icon": {
23-
"type": "string",
24-
"description": "Name of icon to be displayed"
25-
},
26-
"icon-pos": {
27-
"type": "'left' | 'right' | string",
28-
"description": "Icon position",
29-
"default": "'left'"
30-
},
31-
"css": {
32-
"type": "string",
33-
"description": "Css class(es) applied to input component"
34-
}
35-
}
2+
"base": {
3+
"FieldBase": "../../fields/field-base"
4+
},
5+
"props": {
6+
"name": {
7+
"type": "string",
8+
"description": "Input element name"
9+
},
10+
"placeholder": {
11+
"type": "string",
12+
"description": "Input element placeholder"
13+
},
14+
"value": {
15+
"type": "any",
16+
"description": "v-model binding"
17+
},
18+
"password": {
19+
"type": "boolean",
20+
"description": "Input element is password element"
21+
},
22+
"icon": {
23+
"type": "string",
24+
"description": "Name of icon to be displayed"
25+
},
26+
"icon-pos": {
27+
"type": "'left' | 'right' | string",
28+
"description": "Icon position",
29+
"default": "'left'"
30+
},
31+
"css": {
32+
"type": "string",
33+
"description": "Css class(es) applied to input component"
34+
}
35+
}
3636
}

0 commit comments

Comments
 (0)