Skip to content
This repository has been archived by the owner on Jul 14, 2020. It is now read-only.

Commit

Permalink
Created text-area component
Browse files Browse the repository at this point in the history
ref #24
  • Loading branch information
Sneki committed Jun 28, 2018
1 parent 16056d1 commit 1ab1f19
Show file tree
Hide file tree
Showing 10 changed files with 285 additions and 28 deletions.
2 changes: 0 additions & 2 deletions dev/data/accordion.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
"hint": null,
"persistentHint": false,
"tooltip": null,
"multiLine": false,
"clearable": true,
"validateOn": "blur",
"mask": {
Expand Down Expand Up @@ -77,7 +76,6 @@
"hint": null,
"persistentHint": false,
"tooltip": null,
"multiLine": false,
"clearable": true,
"validateOn": "blur",
"mask": {
Expand Down
23 changes: 19 additions & 4 deletions dev/data/form.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@
"hint": null,
"persistentHint": false,
"tooltip": null,
"multiLine": false,
"clearable": true,
"disabled": false,
"mask": {
Expand Down Expand Up @@ -58,7 +57,6 @@
"hint": null,
"persistentHint": false,
"tooltip": null,
"multiLine": false,
"clearable": true,
"mask": {
"predefined": false,
Expand All @@ -76,6 +74,25 @@
},
"value": "Dragoje"
},
{
"name": "personalData",
"type": "text-area",
"label": "Personal Data",
"prependIcon": "person",
"appendIcon": null,
"rowHeight": 22,
"rows": 5,
"autoGrow": true,
"outline": false,
"clearable": true,
"disabled": false,
"color": "red",
"theme": "light",
"value": "Personal Data ..... ",
"validation": {
"required": true
}
},
{
"name": "fullName",
"type": "calculation",
Expand All @@ -87,7 +104,6 @@
"placeholder": "Please enter formula",
"hint": null,
"tooltip": null,
"multiLine": false,
"clearable": true,
"validation": {
"required": true
Expand Down Expand Up @@ -246,7 +262,6 @@
"hint": "Credit card must have valid expiration date",
"persistentHint": true,
"tooltip": "Some tooltip",
"multiLine": false,
"clearable": true,
"validateOn": "blur",
"mask": {
Expand Down
30 changes: 21 additions & 9 deletions dev/data/page.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,10 @@
"hint": null,
"persistentHint": false,
"tooltip": null,
"multiLine": false,
"clearable": true,
"disabled": false,
"color": "",
"theme": "",
"color": "red",
"theme": "light",
"validateOn": "blur",
"mask": {
"predefined": false,
Expand Down Expand Up @@ -102,7 +101,6 @@
"hint": null,
"persistentHint": false,
"tooltip": null,
"multiLine": false,
"clearable": true,
"validateOn": "blur",
"mask": {
Expand All @@ -121,6 +119,25 @@
},
"value": "Dragoje"
},
{
"name": "personalData",
"type": "text-area",
"label": "Personal Data",
"prependIcon": "person",
"appendIcon": null,
"rowHeight": 22,
"rows": 5,
"autoGrow": false,
"outline": false,
"clearable": true,
"disabled": false,
"color": "red",
"theme": "light",
"value": "Personal Data ..... ",
"validation": {
"required": true
}
},
{
"name": "fullName",
"type": "calculation",
Expand All @@ -132,7 +149,6 @@
"placeholder": "Please enter formula",
"hint": null,
"tooltip": null,
"multiLine": false,
"clearable": true,
"color": "",
"theme": "",
Expand Down Expand Up @@ -300,7 +316,6 @@
"hint": "Credit card must have valid expiration date",
"persistentHint": true,
"tooltip": "Some tooltip",
"multiLine": false,
"clearable": true,
"validateOn": "blur",
"mask": {
Expand Down Expand Up @@ -825,7 +840,6 @@
"hint": null,
"persistentHint": false,
"tooltip": null,
"multiLine": false,
"clearable": true,
"validateOn": "blur",
"mask": {
Expand Down Expand Up @@ -883,7 +897,6 @@
"hint": null,
"persistentHint": false,
"tooltip": null,
"multiLine": false,
"clearable": true,
"validateOn": "blur",
"mask": {
Expand Down Expand Up @@ -921,7 +934,6 @@
"hint": null,
"persistentHint": false,
"tooltip": null,
"multiLine": false,
"clearable": true,
"validateOn": "blur",
"mask": {
Expand Down
6 changes: 0 additions & 6 deletions src/components/CText/index.meta.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,6 @@ export default {
value: false,
priority: 10,
},
multiLine: {
type: 'check',
name: 'Enable Multiline',
value: false,
priority: 11,
},
disabled: {
type: 'check',
name: 'Disable Input',
Expand Down
80 changes: 80 additions & 0 deletions src/components/CTextArea/CTextArea.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { fieldable, validatable } from '@mixins';
import { validator } from '@validators';
import { isNil } from 'lodash';
import Element from '../Element';

const getPropRequired = (config) => {
if (config.validation) {
return !!config.validation.required;
}

return false;
};

const getProps = (context) => {
const config = context.config;

const props = {
label: config.label,
autoGrow: config.autoGrow,
outline: config.outline,
rowHeight: config.rowHeight,
rows: config.rows,
color: config.color,
dark: context.isThemeDark,
light: context.isThemeLight,
prependIcon: config.prependIcon,
appendIcon: config.appendIcon,
tooltip: config.tooltip,
clearable: config.clearable,
disabled: config.disabled,
required: getPropRequired(config),
rules: validator.getRules(config, context.validators),
value: context.value,
};

return props;
};

export default {
extends: Element,
mixins: [
fieldable,
validatable,
],
render(createElement) {
const self = this;
const data = {
attrs: {
name: self.config.name,
title: self.config.tooltip,
},
props: getProps(self),
on: {
focus() {
self.sendToEventBus('FocusedIn', { text: self.value });
},
input(value) {
self.value = value;
if (isNil(value)) {
self.sendToEventBus('Cleared', { text: value });
}
self.sendToEventBus('Changed', { text: value });
self.$emit('input', self.value);
},
blur() {
self.sendToEventBus('FocusedOut', { text: self.value });
},
},
};

const children = [
createElement(
'v-textarea',
data,
),
];

return self.renderElement('div', {}, children);
},
};
13 changes: 13 additions & 0 deletions src/components/CTextArea/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import TextArea from './CTextArea';

export default {
install(Vue, options) {
const name = `${options.namespace}text-area`;

Vue.component(name, {
extends: TextArea,
namespace: options.namespace,
name,
});
},
};
119 changes: 119 additions & 0 deletions src/components/CTextArea/index.meta.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
export default {
group: 'inputs',
type: 'text',
name: 'Text Box',
icon: 'title',
optionGroups: {
validation: {
key: 'validation',
name: 'Validation',
},
},
actions: [
{
name: 'setInputValue',
help: 'Input field updated',
},
{
name: 'setItemDisabledValue',
help: 'Input field disabled value',
},
],
events: [
{
name: 'Changed',
help: 'Input changed',
},
{
name: 'Cleared',
help: 'Input cleared / reset',
},
{
name: 'FocusedIn',
help: 'Input focused',
},
{
name: 'FocusedOut',
help: 'Input focused out / blurred',
},
],
options: {
color: true,
name: {
type: 'input',
name: 'Input Name',
value: null,
priority: 1,
},
label: {
type: 'input',
name: 'TextBox Label',
value: 'Text Field',
priority: 2,
},
prependIcon: {
type: 'input',
name: 'Prepend Icon',
value: null,
priority: 3,
},
appendIcon: {
type: 'input',
name: 'Append Icon',
value: null,
priority: 4,
},
autoGrow: {
type: 'check',
name: 'Auto Grow',
value: false,
priority: 5,
},
placeholder: {
type: 'input',
name: 'Placeholder Text',
value: false,
priority: 6,
},
outline: {
type: 'check',
name: 'Outline',
value: false,
priority: 7,
},
rowHeight: {
type: 'input',
name: 'Row Height',
value: 5,
priority: 8,
},
tooltip: {
type: 'input',
name: 'Tooltip Text',
value: null,
priority: 9,
},
clearable: {
type: 'check',
name: 'Enable Input Reset',
value: false,
priority: 10,
},
disabled: {
type: 'check',
name: 'Disable Input',
value: false,
priority: 12,
},
validation: {
type: 'group',
group: 'validation',
required: {
type: 'check',
name: 'Required',
value: false,
},
},
theme: true,
},
};
1 change: 1 addition & 0 deletions src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export { default as CTable } from './CTable';
export { default as CTabs } from './CTabs';
export { default as CTags } from './CTags';
export { default as CText } from './CText';
export { default as CTextArea } from './CTextArea';
export { default as CVideo } from './CVideo';
export { default as CVideoStream } from './CVideoStream';
export { default as CVlist } from './CVlist';
Expand Down
Loading

0 comments on commit 1ab1f19

Please sign in to comment.