@aspectus/vee-control-descriptor
Version:
Control descriptor integrated with vee validate provider. Special wrapper for control element that adds additional description.
259 lines (236 loc) • 8.86 kB
JavaScript
/*!
* vee-control-descriptor v0.10.17
* (c) 2020 Alex Tkachenko
* Released under the MIT License.
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@aspectus/vue-utils'), require('@aspectus/vue-control-descriptor'), require('vee-validate'), require('@aspectus/vue-control-interaction-state-controller')) :
typeof define === 'function' && define.amd ? define(['exports', '@aspectus/vue-utils', '@aspectus/vue-control-descriptor', 'vee-validate', '@aspectus/vue-control-interaction-state-controller'], factory) :
(global = global || self, factory(global.VeeControlDescriptor = {}, global.vueUtils, global.vueControlDescriptor, global.veeValidate, global.vueControlInteractionStateController));
}(this, (function (exports, vueUtils, vueControlDescriptor, veeValidate, vueControlInteractionStateController) { 'use strict';
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
var InteractionHideErrorsController = vueUtils.makeF(function (h, context) {
var _context$props = context.props,
descriptorComponent = _context$props.descriptorComponent,
providerContext = _context$props.providerContext,
errors = _context$props.errors,
value = _context$props.value;
var _context$data$on = context.data.on,
input = _context$data$on.input,
focus = _context$data$on.focus,
blur = _context$data$on.blur,
listeners = _objectWithoutProperties(_context$data$on, ["input", "focus", "blur"]);
var baseHandlers = {
input: input,
focus: focus,
blur: blur
}; // Problems with undefined vue event handlers? Remove them.
Object.keys(baseHandlers).forEach(function (key) {
if (typeof baseHandlers[key] === 'undefined') {
delete baseHandlers[key];
}
});
return h(vueControlInteractionStateController.InteractionStateController, {
// HACK: Tricky hack for vee-validate provider v-model-detection
attrs: {
value: value
},
on: baseHandlers,
scopedSlots: {
default: function _default(_ref) {
var changing = _ref.changing,
interacted = _ref.interacted,
interacting = _ref.interacting,
handlers = _ref.handlers;
var definition = vueUtils.mergeContext(context.data, {
attrs: {
value: value,
'provider-context': providerContext,
errors: !providerContext.pending && (!interacting || interacting && !changing) && (interacted || providerContext.touched) ? errors : []
}
});
definition.on = Object.assign({}, handlers, listeners);
return h(descriptorComponent, definition, context.children);
}
}
}, null);
}, {
descriptorComponent: {},
providerContext: {},
errors: {},
value: {}
}, 'vee-control-descriptor-controller-interaction-hide-errors');
/* eslint-disable prefer-object-spread */
var Gate = {
render: function render(h) {
var context = {
attrs: Object.assign({
value: this.value
}, this.$attrs),
on: Object.assign({}, this.$listeners, {
input: this.input,
blur: this.blur
}),
scopedSlots: this.$scopedSlots
};
return h(this.gatedHandlerComponent, context, null);
},
methods: {
input: function input(e) {
this.$emit('input', e);
},
blur: function blur(e) {
this.$emit('blur', e);
}
},
inheritAttrs: false,
props: {
gatedHandlerComponent: {},
value: {}
},
name: 'vee-validate-input-handler-gate'
};
/* eslint-disable object-property-newline */
var Descriptor = {
name: 'vee-control-descriptor',
functional: true,
props: {
descriptorComponent: {
default: function _default() {
return vueControlDescriptor.ControlDescriptor;
}
},
providerComponent: {
default: function _default() {
return veeValidate.ValidationProvider;
}
},
controllerComponent: {
default: function _default() {
return InteractionHideErrorsController;
}
},
disabled: Boolean,
required: Boolean,
readonly: Boolean,
bails: Boolean,
immediate: Boolean,
debounce: Number,
mode: {},
customMessages: {},
name: String,
vid: {},
value: {},
rules: {}
},
render: function render(h, context) {
var _context$props = context.props,
descriptorComponent = _context$props.descriptorComponent,
providerComponent = _context$props.providerComponent,
controllerComponent = _context$props.controllerComponent,
disabled = _context$props.disabled,
required = _context$props.required,
readonly = _context$props.readonly,
bails = _context$props.bails,
immediate = _context$props.immediate,
debounce = _context$props.debounce,
mode = _context$props.mode,
customMessages = _context$props.customMessages,
name = _context$props.name,
vid = _context$props.vid,
value = _context$props.value,
rules = _context$props.rules;
return h(providerComponent, {
props: {
disabled: disabled,
required: required,
readonly: readonly,
bails: bails,
immediate: immediate,
debounce: debounce,
mode: mode,
customMessages: customMessages,
name: name,
vid: vid,
value: value,
skipIfEmpty: !required,
rules: readonly ? '' : rules,
slim: true
},
scopedSlots: {
default: function _default(props) {
var data = vueUtils.mergeContext(context.data, {
attrs: {
disabled: disabled,
readonly: readonly,
name: name,
vid: vid,
value: value,
rules: rules,
required: required || props.required,
errors: props.errors,
'provider-context': props,
'descriptor-component': descriptorComponent,
'gated-handler-component': controllerComponent
}
}); // FIXME: This gate mechanics unfortunately does not fix the
// constant handlers amount increase issue.
return h(Gate, data, context.children);
}
}
});
}
};
var NoneController = vueUtils.makeF(function (h, context) {
return h(context.props.descriptorComponent, context.data, context.children);
}, {
descriptorComponent: {}
}, 'vee-control-descriptor-controller-none');
function install(Vue) {
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref$name = _ref.name,
name = _ref$name === void 0 ? Descriptor.name : _ref$name,
_ref$noneControllerNa = _ref.noneControllerName,
noneControllerName = _ref$noneControllerNa === void 0 ? NoneController.name : _ref$noneControllerNa,
_ref$interactionHideE = _ref.interactionHideErrorsControllerName,
interactionHideErrorsControllerName = _ref$interactionHideE === void 0 ? InteractionHideErrorsController.name : _ref$interactionHideE;
Vue.component(name, Descriptor);
Vue.component(noneControllerName, NoneController);
Vue.component(interactionHideErrorsControllerName, InteractionHideErrorsController);
}
var main = {
install: install
};
exports.Descriptor = Descriptor;
exports.InteractionHideErrorsController = InteractionHideErrorsController;
exports.NoneController = NoneController;
exports.default = main;
exports.install = install;
Object.defineProperty(exports, '__esModule', { value: true });
})));