pui9-components 1.16.4

package/package.json

@@ -0,0 +1,78 @@
+{
+	"name": "pui9-components",
+	"description": "PUI9 Basic Form Components",
+	"author": {
+		"name": "Prodevelop S.L."
+	},
+	"version": "1.16.4",
+	"license": "Copyright",
+	"main": "dist/pui9-components.common.js",
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build-bundle": "vue-cli-service build --target lib --name pui9-components ./src/index.js",
+		"prepare": "npm run build-bundle",
+		"lint": "vue-cli-service lint"
+	},
+	"dependencies": {
+		"@tinymce/tinymce-vue": "3.2.0",
+		"current-device": "0.10.2",
+		"moment": "2.29.1",
+		"moment-timezone": "0.5.33",
+		"vue-codemirror": "4.0.6",
+		"vue-infinite-loading": "2.4.5",
+		"sanitize-html": "2.7.3",
+		"vuedraggable": "2.24.3"
+	},
+	"devDependencies": {
+		"@fortawesome/fontawesome-pro": "5.15.4",
+		"@vue/cli-plugin-babel": "4.5.13",
+		"@vue/cli-plugin-eslint": "4.5.13",
+		"@vue/cli-service": "4.5.13",
+		"autoprefixer": "9.8.6",
+		"babel-eslint": "10.1.0",
+		"css-loader": "0.28.11",
+		"core-js": "3.17.2",
+		"deepmerge": "4.2.2",
+		"eslint": "6.8.0",
+		"eslint-plugin-vue": "6.2.2",
+		"postcss-css-variables": "0.18.0",
+		"postcss-import": "12.0.1",
+		"postcss-loader": "4.1.0",
+		"postcss-nested": "4.2.3",
+		"postcss-url": "8.0.0",
+		"sass": "1.27.0",
+		"sass-loader": "10.0.2",
+		"stylus": "0.54.8",
+		"stylus-loader": "3.0.2",
+		"vue": "2.6.14",
+		"vue-i18n": "8.25.0",
+		"vue-cli-plugin-vuetify": "2.4.1",
+		"vue-template-compiler": "2.6.14",
+		"vuetify-loader": "1.7.3",
+		"vuetify": "2.3.23",
+		"vuex": "3.6.2"
+	},
+	"eslintConfig": {
+		"root": true,
+		"env": {
+			"node": true
+		},
+		"extends": [
+			"plugin:vue/essential",
+			"eslint:recommended"
+		],
+		"parserOptions": {
+			"parser": "babel-eslint"
+		},
+		"rules": {}
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions"
+	],
+	"files": [
+		"dist/*",
+		"src/*",
+		"*.json"
+	]
+}

package/src/App.vue

@@ -0,0 +1,117 @@
+<template>
+	<v-app>
+		<v-app-bar app color="primary" dark>
+			<div class="d-flex align-center">
+				<h2>PUI9 Basic Components Library</h2>
+			</div>
+
+			<v-spacer></v-spacer>
+
+			<v-btn href="https://confluence.prodevelop.es/pages/viewpage.action?pageId=163217879" target="_blank" text>
+				<span class="mr-2">Documentation</span>
+				<v-icon>mdi-open-in-new</v-icon>
+			</v-btn>
+		</v-app-bar>
+
+		<v-content style="height: 100vh; overflow-y: auto;">
+			<v-container>
+				<v-tabs show-arrows>
+					<v-tab ripple>PuiFieldSet</v-tab>
+					<v-tab ripple>PuiField</v-tab>
+					<v-tab ripple>PuiTextArea</v-tab>
+					<v-tab ripple>PuiTextField</v-tab>
+					<v-tab ripple>PuiNumberField</v-tab>
+					<v-tab ripple>PuiSpinnerField</v-tab>
+					<v-tab ripple>PuiDateField</v-tab>
+					<v-tab ripple>PuiRadioGroup</v-tab>
+					<v-tab ripple>PuiCheckbox</v-tab>
+					<v-tab ripple>PuiSwitch</v-tab>
+					<v-tab ripple>PuiMultiSelect</v-tab>
+					<v-tab ripple>PuiCodeEditor</v-tab>
+					<v-tab ripple>PuiRichTextEditor</v-tab>
+					<v-tab ripple>PuiForm</v-tab>
+
+					<v-tab-item lazy>
+						<test-field-set></test-field-set>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-field></test-field>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-input-text-area></test-input-text-area>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-input-text></test-input-text>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-input-number></test-input-number>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-input-spinner></test-input-spinner>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-input-date></test-input-date>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-input-radio-group></test-input-radio-group>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-input-checkbox></test-input-checkbox>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-input-switch></test-input-switch>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-multi-select></test-multi-select>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-code-editor></test-code-editor>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-rich-text-editor></test-rich-text-editor>
+					</v-tab-item>
+					<v-tab-item lazy>
+						<test-pui-form></test-pui-form>
+					</v-tab-item>
+				</v-tabs>
+			</v-container>
+		</v-content>
+	</v-app>
+</template>
+
+<script>
+import TestFieldSet from '@/tests/TestFieldSet';
+import TestField from '@/tests/TestField';
+import TestInputTextArea from '@/tests/TestInputTextArea';
+import TestInputText from '@/tests/TestInputText';
+import TestInputNumber from '@/tests/TestInputNumber';
+import TestInputSpinner from '@/tests/TestInputSpinner';
+import TestInputDate from '@/tests/TestInputDate';
+import TestInputRadioGroup from '@/tests/TestInputRadioGroup';
+import TestInputCheckbox from '@/tests/TestInputCheckbox';
+import TestInputSwitch from '@/tests/TestInputSwitch';
+import TestMultiSelect from '@/tests/TestMultiSelect';
+import TestCodeEditor from '@/tests/TestCodeEditor';
+import TestRichTextEditor from '@/tests/TestRichTextEditor';
+import TestPuiForm from '@/tests/TestPuiForm';
+
+export default {
+	name: 'App',
+	components: {
+		TestFieldSet,
+		TestField,
+		TestInputTextArea,
+		TestInputText,
+		TestInputNumber,
+		TestInputSpinner,
+		TestInputDate,
+		TestInputRadioGroup,
+		TestInputCheckbox,
+		TestInputSwitch,
+		TestMultiSelect,
+		TestCodeEditor,
+		TestRichTextEditor,
+		TestPuiForm
+	}
+};
+</script>

package/src/components/PuiCheckbox.vue

@@ -0,0 +1,105 @@
+<template>
+	<v-checkbox
+		:class="isRequired"
+		class="ml-2 mr-2"
+		:label="getLabel"
+		:rules="getRules"
+		v-model="internalModel"
+		@change="updateValue"
+		v-bind="allProps"
+		:ripple="false"
+		:false-value="falseValue"
+		:true-value="trueValue"
+		color="primary"
+		:error="internalError"
+	></v-checkbox>
+</template>
+
+<script>
+import PuiFormComponentMixin from '../mixins/PuiFormComponentMixin';
+
+export default {
+	name: 'PuiCheckbox',
+	mixins: [PuiFormComponentMixin],
+	props: {
+		value: {
+			required: false
+		},
+		rules: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		// falseValue en lugar de 'false-value' para que funcione. Lo mismo con el true
+		falseValue: {
+			type: [Boolean, String, Number],
+			default: false,
+			required: false
+		},
+		trueValue: {
+			type: [Boolean, String, Number],
+			default: true,
+			required: false
+		}
+	},
+	computed: {
+		getRules() {
+			const rules = [...this.rules];
+			if (this.required) {
+				var func = (value) => !!value || this.requiredMessage;
+				var func2 = () => !this.internalError;
+				var func3 = () => {
+					if (this.internalModel === false) {
+						return this.requiredMessage;
+					}
+					return true;
+				};
+				rules.push(func, func2, func3);
+			}
+			return rules;
+		},
+		isRequired() {
+			return { 'v-input--checkbox--required': this.required };
+		},
+		requiredMessage() {
+			return this.$t('pui9.error.field_selected');
+		}
+	},
+	watch: {
+		value(val) {
+			this.internalModel = val;
+		}
+	},
+	created() {
+		this.initialValue = this.value;
+		this.internalModel = this.value;
+
+		// Hay que pasar el value a string para que si llega del servidor '1' (por poner un ejemplo) el
+		// checkbox lo detecte como activo
+		if (this.value && typeof this.value !== 'boolean') {
+			this.internalModel = this.value.toString();
+		}
+	},
+	methods: {
+		updateValue(value) {
+			this.$emit('input', value);
+			this.checkValue();
+		},
+		checkValue() {
+			this.clearMessages();
+			if (this.required) {
+				if (this.internalModel === false) {
+					this.showErrorMessage();
+				}
+			}
+		},
+		clearMessages() {
+			this.internalError = false;
+		},
+		showErrorMessage() {
+			this.internalError = true;
+		}
+	}
+};
+</script>

package/src/components/PuiCodeEditor.vue

@@ -0,0 +1,123 @@
+<template>
+	<v-layout lazy>
+		<div v-if="hasLabel()">
+			<label>{{ this.label }}</label>
+			<label class="codemirror-label-required" v-if="required">*</label>
+		</div>
+		<v-flex xs12 md12 lg12>
+			<v-layout wrap>
+				<textarea id="codemirror" name="codemirror" ref="codemirror" v-model="data"></textarea>
+				<v-text-field v-if="required" v-model="data" :rules="getRules" style="display: none"></v-text-field>
+				<div class="codemirror-error-message">
+					<label class="codemirror-label-error">{{ $t('pui9.error.field_selected') }}</label>
+				</div>
+			</v-layout>
+		</v-flex>
+	</v-layout>
+</template>
+
+<script>
+import CodeMirror from 'codemirror';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/base16-dark.css';
+import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/htmlmixed/htmlmixed.js';
+import 'codemirror/mode/css/css.js';
+import 'codemirror/mode/xml/xml.js';
+import 'codemirror/mode/python/python.js';
+
+export default {
+	name: 'PuiCodeEditor',
+	props: {
+		mode: {
+			type: String,
+			required: true
+		},
+		label: {
+			type: String,
+			default: ''
+		},
+		value: {
+			type: String,
+			default: ''
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		validationErrors: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		externalValue() {
+			return this.value;
+		},
+		getRules() {
+			const rules = [];
+			if (this.required) {
+				rules.push((data) => !!data || 'error');
+			}
+			return rules;
+		}
+	},
+	data() {
+		return {
+			data: this.value,
+			editor: null
+		};
+	},
+	mounted() {
+		this.createEditor();
+	},
+	watch: {
+		data(newValue) {
+			this.checkContent();
+			const cursor = this.editor.getCursor();
+			this.editor.setValue(newValue);
+			this.$emit('input', newValue);
+			this.editor.setCursor(cursor);
+		},
+		externalValue(newValue) {
+			this.data = newValue;
+		},
+		validationErrors() {
+			this.checkContent();
+		}
+	},
+	methods: {
+		createEditor() {
+			const self = this;
+			this.editor = CodeMirror.fromTextArea(this.$refs.codemirror, {
+				mode: this.mode,
+				lineNumbers: true
+			});
+			this.editor.on('change', (editor) => {
+				this.data = editor.getValue();
+				self.$emit('input', this.data);
+			});
+			this.editor.on('blur', () => {
+				this.checkContent();
+			});
+		},
+		hasLabel() {
+			return this.label !== undefined;
+		},
+		checkContent() {
+			var errorMsg = this.$el.getElementsByClassName('codemirror-error-message');
+			var codeContainer = this.$el.getElementsByClassName('CodeMirror');
+
+			if (this.required) {
+				if (this.data === null || this.data === '') {
+					errorMsg[0].style.display = 'block';
+					codeContainer[0].classList.add('codemirror-error-code');
+				} else {
+					errorMsg[0].style.display = 'none';
+					codeContainer[0].classList.remove('codemirror-error-code');
+				}
+			}
+		}
+	}
+};
+</script>