RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2025-01-19 00:41:43 +03:00
Code Issues Projects Releases Wiki Activity

Adds support for buttons

Browse Source
This commit is contained in:
Justin Schroeder 2020-01-28 12:12:08 -05:00
parent d868555be8
commit 4a53d17fc7
17 changed files with 667 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
dist/formulate.esm.js vendored
View File

@ -612,19 +612,20 @@ var rules = {
/**
* Check the minimum value of a particular.
*/
min: function (value, minimum) {
min: function (value, minimum, force) {
if ( minimum === void 0 ) minimum = 1;
return Promise.resolve((function () {
minimum = Number(minimum);
if (!isNaN(value)) {
value = Number(value);
return value >= minimum
}
if (typeof value === 'string') {
if (Array.isArray(value)) {
minimum = !isNaN(minimum) ? Number(minimum) : minimum;
return value.length >= minimum
}
if (Array.isArray(value)) {
if ((!isNaN(value) && force !== 'length') || force === 'value') {
value = !isNaN(value) ? Number(value) : value;
return value >= minimum
}
if (typeof value === 'string' || (force === 'length')) {
value = !isNaN(value) ? value.toString() : value;
return value.length >= minimum
}
return false
@ -838,7 +839,7 @@ var en = {
var name = ref.name;
var args = ref.args;
return ((sentence(name)) + " must of the the type: " + (args[0] || 'No file formats allowed.'))
return ((sentence(name)) + " must be of the the type: " + (args[0] || 'No file formats allowed.'))
},
/**
@ -909,22 +910,15 @@ function fauxUploader (file, progress, error, options) {
return new Promise(function (resolve, reject) {
var totalTime = (options.fauxUploaderDuration || 2000) * (0.5 + Math.random());
var start = performance.now();
/**
* @todo - remove, intentional failure
* Create a recursive timeout that advances the progress.
*/
var fail = (Math.random() > 0.5);
var advance = function () { return setTimeout(function () {
var elapsed = performance.now() - start;
var currentProgress = Math.min(100, Math.round(elapsed / totalTime * 100));
progress(currentProgress);
/**
* @todo - remove, intentional failure
*/
if (fail && currentProgress > 50) {
return error('There was an error uploading the file.')
}
if (currentProgress >= 100) {
return resolve({
url: 'http://via.placeholder.com/350x150.png',
@ -951,6 +945,7 @@ var context = {
classification: this.classification,
component: this.component,
id: this.id || this.defaultId,
hasLabel: (this.label && this.classification !== 'button'),
label: this.label,
labelPosition: this.logicalLabelPosition,
attributes: this.elementAttributes,
@ -1062,10 +1057,10 @@ function showFieldErrors () {
* Return the element’s name, or select a fallback.
*/
function nameOrFallback () {
if (this.name === true) {
if (this.name === true && this.classification !== 'button') {
return ((this.type) + "_" + (this.elementAttributes.id))
}
if (this.name === false) {
if (this.name === false || (this.classification === 'button' && this.name === true)) {
return false
}
return this.name
@ -1272,6 +1267,9 @@ var script = {
},
data: function data () {
return {
/**
* @todo consider swapping out nanoid for this._uid
*/
defaultId: nanoid(9),
localAttributes: {},
internalModelProxy: this.formulateValue,
@ -1454,7 +1452,7 @@ var __vue_render__ = function() {
"div",
{ staticClass: "formulate-input-wrapper" },
[
_vm.context.label && _vm.context.labelPosition === "before"
_vm.context.hasLabel && _vm.context.labelPosition === "before"
? _vm._t(
"label",
[
@ -1471,18 +1469,20 @@ var __vue_render__ = function() {
: _vm._e(),
_vm._v(" "),
_vm._t(
"default",
"element",
[
_c(_vm.context.component, {
tag: "component",
attrs: { context: _vm.context }
})
_c(
_vm.context.component,
{ tag: "component", attrs: { context: _vm.context } },
[_vm._t("default", null, null, _vm.context)],
2
)
],
null,
_vm.context
),
_vm._v(" "),
_vm.context.label && _vm.context.labelPosition === "after"
_vm.context.hasLabel && _vm.context.labelPosition === "after"
? _vm._t(
"label",
[
@ -2580,6 +2580,84 @@ __vue_render__$7._withStripped = true;
//
var script$8 = {
name: 'FormulateInputButton',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$8 = script$8;
/* template */
var __vue_render__$8 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
class:
"formulate-input-element formulate-input-element--" + _vm.context.type,
attrs: { "data-type": _vm.context.type }
},
[
_c(
"button",
_vm._b({ attrs: { type: _vm.type } }, "button", _vm.attributes, false),
[
_vm._t("default", [
_c("span", {
class: "formulate-input-element--" + _vm.context.type + "--label",
domProps: {
textContent: _vm._s(
_vm.context.value ||
_vm.context.label ||
_vm.context.name ||
"Submit"
)
}
})
])
],
2
)
]
)
};
var __vue_staticRenderFns__$8 = [];
__vue_render__$8._withStripped = true;
/* style */
var __vue_inject_styles__$8 = undefined;
/* scoped */
var __vue_scope_id__$8 = undefined;
/* module identifier */
var __vue_module_identifier__$8 = undefined;
/* functional template */
var __vue_is_functional_template__$8 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var FormulateInputButton = normalizeComponent(
{ render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
__vue_inject_styles__$8,
__vue_script__$8,
__vue_scope_id__$8,
__vue_is_functional_template__$8,
__vue_module_identifier__$8,
false,
undefined,
undefined,
undefined
);
//
var script$9 = {
name: 'FormulateInputSelect',
mixins: [FormulateInputMixin],
computed: {
@ -2596,10 +2674,10 @@ var script$8 = {
};
/* script */
var __vue_script__$8 = script$8;
var __vue_script__$9 = script$9;
/* template */
var __vue_render__$8 = function() {
var __vue_render__$9 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
@ -2711,17 +2789,17 @@ var __vue_render__$8 = function() {
]
)
};
var __vue_staticRenderFns__$8 = [];
__vue_render__$8._withStripped = true;
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;
/* style */
var __vue_inject_styles__$8 = undefined;
var __vue_inject_styles__$9 = undefined;
/* scoped */
var __vue_scope_id__$8 = undefined;
var __vue_scope_id__$9 = undefined;
/* module identifier */
var __vue_module_identifier__$8 = undefined;
var __vue_module_identifier__$9 = undefined;
/* functional template */
var __vue_is_functional_template__$8 = false;
var __vue_is_functional_template__$9 = false;
/* style inject */
/* style inject SSR */
@ -2731,12 +2809,12 @@ __vue_render__$8._withStripped = true;
var FormulateInputSelect = normalizeComponent(
{ render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
__vue_inject_styles__$8,
__vue_script__$8,
__vue_scope_id__$8,
__vue_is_functional_template__$8,
__vue_module_identifier__$8,
{ render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
__vue_inject_styles__$9,
__vue_script__$9,
__vue_scope_id__$9,
__vue_is_functional_template__$9,
__vue_module_identifier__$9,
false,
undefined,
undefined,
@ -2745,16 +2823,16 @@ __vue_render__$8._withStripped = true;
//
var script$9 = {
var script$a = {
name: 'FormulateInputSlider',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$9 = script$9;
var __vue_script__$a = script$a;
/* template */
var __vue_render__$9 = function() {
var __vue_render__$a = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
@ -2875,17 +2953,17 @@ var __vue_render__$9 = function() {
]
)
};
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;
var __vue_staticRenderFns__$a = [];
__vue_render__$a._withStripped = true;
/* style */
var __vue_inject_styles__$9 = undefined;
var __vue_inject_styles__$a = undefined;
/* scoped */
var __vue_scope_id__$9 = undefined;
var __vue_scope_id__$a = undefined;
/* module identifier */
var __vue_module_identifier__$9 = undefined;
var __vue_module_identifier__$a = undefined;
/* functional template */
var __vue_is_functional_template__$9 = false;
var __vue_is_functional_template__$a = false;
/* style inject */
/* style inject SSR */
@ -2895,12 +2973,12 @@ __vue_render__$9._withStripped = true;
var FormulateInputSlider = normalizeComponent(
{ render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
__vue_inject_styles__$9,
__vue_script__$9,
__vue_scope_id__$9,
__vue_is_functional_template__$9,
__vue_module_identifier__$9,
{ render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
__vue_inject_styles__$a,
__vue_script__$a,
__vue_scope_id__$a,
__vue_is_functional_template__$a,
__vue_module_identifier__$a,
false,
undefined,
undefined,
@ -2909,16 +2987,16 @@ __vue_render__$9._withStripped = true;
//
var script$a = {
var script$b = {
name: 'FormulateInputTextArea',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$a = script$a;
var __vue_script__$b = script$b;
/* template */
var __vue_render__$a = function() {
var __vue_render__$b = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
@ -2960,17 +3038,17 @@ var __vue_render__$a = function() {
]
)
};
var __vue_staticRenderFns__$a = [];
__vue_render__$a._withStripped = true;
var __vue_staticRenderFns__$b = [];
__vue_render__$b._withStripped = true;
/* style */
var __vue_inject_styles__$a = undefined;
var __vue_inject_styles__$b = undefined;
/* scoped */
var __vue_scope_id__$a = undefined;
var __vue_scope_id__$b = undefined;
/* module identifier */
var __vue_module_identifier__$a = undefined;
var __vue_module_identifier__$b = undefined;
/* functional template */
var __vue_is_functional_template__$a = false;
var __vue_is_functional_template__$b = false;
/* style inject */
/* style inject SSR */
@ -2980,12 +3058,12 @@ __vue_render__$a._withStripped = true;
var FormulateInputTextArea = normalizeComponent(
{ render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
__vue_inject_styles__$a,
__vue_script__$a,
__vue_scope_id__$a,
__vue_is_functional_template__$a,
__vue_module_identifier__$a,
{ render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
__vue_inject_styles__$b,
__vue_script__$b,
__vue_scope_id__$b,
__vue_is_functional_template__$b,
__vue_module_identifier__$b,
false,
undefined,
undefined,
@ -3005,6 +3083,7 @@ var Formulate = function Formulate () {
FormulateInputText: FormulateInputText,
FormulateInputFile: FormulateInputFile,
FormulateInputGroup: FormulateInputGroup,
FormulateInputButton: FormulateInputButton,
FormulateInputSelect: FormulateInputSelect,
FormulateInputSlider: FormulateInputSlider,
FormulateInputTextArea: FormulateInputTextArea

221
dist/formulate.min.js vendored
View File

@ -615,19 +615,20 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
/**
* Check the minimum value of a particular.
*/
min: function (value, minimum) {
min: function (value, minimum, force) {
if ( minimum === void 0 ) minimum = 1;
return Promise.resolve((function () {
minimum = Number(minimum);
if (!isNaN(value)) {
value = Number(value);
return value >= minimum
}
if (typeof value === 'string') {
if (Array.isArray(value)) {
minimum = !isNaN(minimum) ? Number(minimum) : minimum;
return value.length >= minimum
}
if (Array.isArray(value)) {
if ((!isNaN(value) && force !== 'length') || force === 'value') {
value = !isNaN(value) ? Number(value) : value;
return value >= minimum
}
if (typeof value === 'string' || (force === 'length')) {
value = !isNaN(value) ? value.toString() : value;
return value.length >= minimum
}
return false
@ -841,7 +842,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
var name = ref.name;
var args = ref.args;
return ((sentence(name)) + " must of the the type: " + (args[0] || 'No file formats allowed.'))
return ((sentence(name)) + " must be of the the type: " + (args[0] || 'No file formats allowed.'))
},
/**
@ -912,22 +913,15 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
return new Promise(function (resolve, reject) {
var totalTime = (options.fauxUploaderDuration || 2000) * (0.5 + Math.random());
var start = performance.now();
/**
* @todo - remove, intentional failure
* Create a recursive timeout that advances the progress.
*/
var fail = (Math.random() > 0.5);
var advance = function () { return setTimeout(function () {
var elapsed = performance.now() - start;
var currentProgress = Math.min(100, Math.round(elapsed / totalTime * 100));
progress(currentProgress);
/**
* @todo - remove, intentional failure
*/
if (fail && currentProgress > 50) {
return error('There was an error uploading the file.')
}
if (currentProgress >= 100) {
return resolve({
url: 'http://via.placeholder.com/350x150.png',
@ -954,6 +948,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
classification: this.classification,
component: this.component,
id: this.id || this.defaultId,
hasLabel: (this.label && this.classification !== 'button'),
label: this.label,
labelPosition: this.logicalLabelPosition,
attributes: this.elementAttributes,
@ -1065,10 +1060,10 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
* Return the element’s name, or select a fallback.
*/
function nameOrFallback () {
if (this.name === true) {
if (this.name === true && this.classification !== 'button') {
return ((this.type) + "_" + (this.elementAttributes.id))
}
if (this.name === false) {
if (this.name === false || (this.classification === 'button' && this.name === true)) {
return false
}
return this.name
@ -1275,6 +1270,9 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
},
data: function data () {
return {
/**
* @todo consider swapping out nanoid for this._uid
*/
defaultId: nanoid(9),
localAttributes: {},
internalModelProxy: this.formulateValue,
@ -1457,7 +1455,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
"div",
{ staticClass: "formulate-input-wrapper" },
[
_vm.context.label && _vm.context.labelPosition === "before"
_vm.context.hasLabel && _vm.context.labelPosition === "before"
? _vm._t(
"label",
[
@ -1474,18 +1472,20 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
: _vm._e(),
_vm._v(" "),
_vm._t(
"default",
"element",
[
_c(_vm.context.component, {
tag: "component",
attrs: { context: _vm.context }
})
_c(
_vm.context.component,
{ tag: "component", attrs: { context: _vm.context } },
[_vm._t("default", null, null, _vm.context)],
2
)
],
null,
_vm.context
),
_vm._v(" "),
_vm.context.label && _vm.context.labelPosition === "after"
_vm.context.hasLabel && _vm.context.labelPosition === "after"
? _vm._t(
"label",
[
@ -2583,6 +2583,84 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
//
var script$8 = {
name: 'FormulateInputButton',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$8 = script$8;
/* template */
var __vue_render__$8 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
class:
"formulate-input-element formulate-input-element--" + _vm.context.type,
attrs: { "data-type": _vm.context.type }
},
[
_c(
"button",
_vm._b({ attrs: { type: _vm.type } }, "button", _vm.attributes, false),
[
_vm._t("default", [
_c("span", {
class: "formulate-input-element--" + _vm.context.type + "--label",
domProps: {
textContent: _vm._s(
_vm.context.value ||
_vm.context.label ||
_vm.context.name ||
"Submit"
)
}
})
])
],
2
)
]
)
};
var __vue_staticRenderFns__$8 = [];
__vue_render__$8._withStripped = true;
/* style */
var __vue_inject_styles__$8 = undefined;
/* scoped */
var __vue_scope_id__$8 = undefined;
/* module identifier */
var __vue_module_identifier__$8 = undefined;
/* functional template */
var __vue_is_functional_template__$8 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var FormulateInputButton = normalizeComponent(
{ render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
__vue_inject_styles__$8,
__vue_script__$8,
__vue_scope_id__$8,
__vue_is_functional_template__$8,
__vue_module_identifier__$8,
false,
undefined,
undefined,
undefined
);
//
var script$9 = {
name: 'FormulateInputSelect',
mixins: [FormulateInputMixin],
computed: {
@ -2599,10 +2677,10 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
};
/* script */
var __vue_script__$8 = script$8;
var __vue_script__$9 = script$9;
/* template */
var __vue_render__$8 = function() {
var __vue_render__$9 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
@ -2714,17 +2792,17 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
]
)
};
var __vue_staticRenderFns__$8 = [];
__vue_render__$8._withStripped = true;
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;
/* style */
var __vue_inject_styles__$8 = undefined;
var __vue_inject_styles__$9 = undefined;
/* scoped */
var __vue_scope_id__$8 = undefined;
var __vue_scope_id__$9 = undefined;
/* module identifier */
var __vue_module_identifier__$8 = undefined;
var __vue_module_identifier__$9 = undefined;
/* functional template */
var __vue_is_functional_template__$8 = false;
var __vue_is_functional_template__$9 = false;
/* style inject */
/* style inject SSR */
@ -2734,12 +2812,12 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
var FormulateInputSelect = normalizeComponent(
{ render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
__vue_inject_styles__$8,
__vue_script__$8,
__vue_scope_id__$8,
__vue_is_functional_template__$8,
__vue_module_identifier__$8,
{ render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
__vue_inject_styles__$9,
__vue_script__$9,
__vue_scope_id__$9,
__vue_is_functional_template__$9,
__vue_module_identifier__$9,
false,
undefined,
undefined,
@ -2748,16 +2826,16 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
//
var script$9 = {
var script$a = {
name: 'FormulateInputSlider',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$9 = script$9;
var __vue_script__$a = script$a;
/* template */
var __vue_render__$9 = function() {
var __vue_render__$a = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
@ -2878,17 +2956,17 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
]
)
};
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;
var __vue_staticRenderFns__$a = [];
__vue_render__$a._withStripped = true;
/* style */
var __vue_inject_styles__$9 = undefined;
var __vue_inject_styles__$a = undefined;
/* scoped */
var __vue_scope_id__$9 = undefined;
var __vue_scope_id__$a = undefined;
/* module identifier */
var __vue_module_identifier__$9 = undefined;
var __vue_module_identifier__$a = undefined;
/* functional template */
var __vue_is_functional_template__$9 = false;
var __vue_is_functional_template__$a = false;
/* style inject */
/* style inject SSR */
@ -2898,12 +2976,12 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
var FormulateInputSlider = normalizeComponent(
{ render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
__vue_inject_styles__$9,
__vue_script__$9,
__vue_scope_id__$9,
__vue_is_functional_template__$9,
__vue_module_identifier__$9,
{ render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
__vue_inject_styles__$a,
__vue_script__$a,
__vue_scope_id__$a,
__vue_is_functional_template__$a,
__vue_module_identifier__$a,
false,
undefined,
undefined,
@ -2912,16 +2990,16 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
//
var script$a = {
var script$b = {
name: 'FormulateInputTextArea',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$a = script$a;
var __vue_script__$b = script$b;
/* template */
var __vue_render__$a = function() {
var __vue_render__$b = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
@ -2963,17 +3041,17 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
]
)
};
var __vue_staticRenderFns__$a = [];
__vue_render__$a._withStripped = true;
var __vue_staticRenderFns__$b = [];
__vue_render__$b._withStripped = true;
/* style */
var __vue_inject_styles__$a = undefined;
var __vue_inject_styles__$b = undefined;
/* scoped */
var __vue_scope_id__$a = undefined;
var __vue_scope_id__$b = undefined;
/* module identifier */
var __vue_module_identifier__$a = undefined;
var __vue_module_identifier__$b = undefined;
/* functional template */
var __vue_is_functional_template__$a = false;
var __vue_is_functional_template__$b = false;
/* style inject */
/* style inject SSR */
@ -2983,12 +3061,12 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
var FormulateInputTextArea = normalizeComponent(
{ render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
__vue_inject_styles__$a,
__vue_script__$a,
__vue_scope_id__$a,
__vue_is_functional_template__$a,
__vue_module_identifier__$a,
{ render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
__vue_inject_styles__$b,
__vue_script__$b,
__vue_scope_id__$b,
__vue_is_functional_template__$b,
__vue_module_identifier__$b,
false,
undefined,
undefined,
@ -3008,6 +3086,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
FormulateInputText: FormulateInputText,
FormulateInputFile: FormulateInputFile,
FormulateInputGroup: FormulateInputGroup,
FormulateInputButton: FormulateInputButton,
FormulateInputSelect: FormulateInputSelect,
FormulateInputSlider: FormulateInputSlider,
FormulateInputTextArea: FormulateInputTextArea

221
dist/formulate.umd.js vendored
View File

@ -618,19 +618,20 @@
/**
* Check the minimum value of a particular.
*/
min: function (value, minimum) {
min: function (value, minimum, force) {
if ( minimum === void 0 ) minimum = 1;
return Promise.resolve((function () {
minimum = Number(minimum);
if (!isNaN(value)) {
value = Number(value);
return value >= minimum
}
if (typeof value === 'string') {
if (Array.isArray(value)) {
minimum = !isNaN(minimum) ? Number(minimum) : minimum;
return value.length >= minimum
}
if (Array.isArray(value)) {
if ((!isNaN(value) && force !== 'length') || force === 'value') {
value = !isNaN(value) ? Number(value) : value;
return value >= minimum
}
if (typeof value === 'string' || (force === 'length')) {
value = !isNaN(value) ? value.toString() : value;
return value.length >= minimum
}
return false
@ -844,7 +845,7 @@
var name = ref.name;
var args = ref.args;
return ((sentence(name)) + " must of the the type: " + (args[0] || 'No file formats allowed.'))
return ((sentence(name)) + " must be of the the type: " + (args[0] || 'No file formats allowed.'))
},
/**
@ -915,22 +916,15 @@
return new Promise(function (resolve, reject) {
var totalTime = (options.fauxUploaderDuration || 2000) * (0.5 + Math.random());
var start = performance.now();
/**
* @todo - remove, intentional failure
* Create a recursive timeout that advances the progress.
*/
var fail = (Math.random() > 0.5);
var advance = function () { return setTimeout(function () {
var elapsed = performance.now() - start;
var currentProgress = Math.min(100, Math.round(elapsed / totalTime * 100));
progress(currentProgress);
/**
* @todo - remove, intentional failure
*/
if (fail && currentProgress > 50) {
return error('There was an error uploading the file.')
}
if (currentProgress >= 100) {
return resolve({
url: 'http://via.placeholder.com/350x150.png',
@ -957,6 +951,7 @@
classification: this.classification,
component: this.component,
id: this.id || this.defaultId,
hasLabel: (this.label && this.classification !== 'button'),
label: this.label,
labelPosition: this.logicalLabelPosition,
attributes: this.elementAttributes,
@ -1068,10 +1063,10 @@
* Return the element’s name, or select a fallback.
*/
function nameOrFallback () {
if (this.name === true) {
if (this.name === true && this.classification !== 'button') {
return ((this.type) + "_" + (this.elementAttributes.id))
}
if (this.name === false) {
if (this.name === false || (this.classification === 'button' && this.name === true)) {
return false
}
return this.name
@ -1278,6 +1273,9 @@
},
data: function data () {
return {
/**
* @todo consider swapping out nanoid for this._uid
*/
defaultId: nanoid(9),
localAttributes: {},
internalModelProxy: this.formulateValue,
@ -1460,7 +1458,7 @@
"div",
{ staticClass: "formulate-input-wrapper" },
[
_vm.context.label && _vm.context.labelPosition === "before"
_vm.context.hasLabel && _vm.context.labelPosition === "before"
? _vm._t(
"label",
[
@ -1477,18 +1475,20 @@
: _vm._e(),
_vm._v(" "),
_vm._t(
"default",
"element",
[
_c(_vm.context.component, {
tag: "component",
attrs: { context: _vm.context }
})
_c(
_vm.context.component,
{ tag: "component", attrs: { context: _vm.context } },
[_vm._t("default", null, null, _vm.context)],
2
)
],
null,
_vm.context
),
_vm._v(" "),
_vm.context.label && _vm.context.labelPosition === "after"
_vm.context.hasLabel && _vm.context.labelPosition === "after"
? _vm._t(
"label",
[
@ -2586,6 +2586,84 @@
//
var script$8 = {
name: 'FormulateInputButton',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$8 = script$8;
/* template */
var __vue_render__$8 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
class:
"formulate-input-element formulate-input-element--" + _vm.context.type,
attrs: { "data-type": _vm.context.type }
},
[
_c(
"button",
_vm._b({ attrs: { type: _vm.type } }, "button", _vm.attributes, false),
[
_vm._t("default", [
_c("span", {
class: "formulate-input-element--" + _vm.context.type + "--label",
domProps: {
textContent: _vm._s(
_vm.context.value ||
_vm.context.label ||
_vm.context.name ||
"Submit"
)
}
})
])
],
2
)
]
)
};
var __vue_staticRenderFns__$8 = [];
__vue_render__$8._withStripped = true;
/* style */
var __vue_inject_styles__$8 = undefined;
/* scoped */
var __vue_scope_id__$8 = undefined;
/* module identifier */
var __vue_module_identifier__$8 = undefined;
/* functional template */
var __vue_is_functional_template__$8 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var FormulateInputButton = normalizeComponent(
{ render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
__vue_inject_styles__$8,
__vue_script__$8,
__vue_scope_id__$8,
__vue_is_functional_template__$8,
__vue_module_identifier__$8,
false,
undefined,
undefined,
undefined
);
//
var script$9 = {
name: 'FormulateInputSelect',
mixins: [FormulateInputMixin],
computed: {
@ -2602,10 +2680,10 @@
};
/* script */
var __vue_script__$8 = script$8;
var __vue_script__$9 = script$9;
/* template */
var __vue_render__$8 = function() {
var __vue_render__$9 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
@ -2717,17 +2795,17 @@
]
)
};
var __vue_staticRenderFns__$8 = [];
__vue_render__$8._withStripped = true;
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;
/* style */
var __vue_inject_styles__$8 = undefined;
var __vue_inject_styles__$9 = undefined;
/* scoped */
var __vue_scope_id__$8 = undefined;
var __vue_scope_id__$9 = undefined;
/* module identifier */
var __vue_module_identifier__$8 = undefined;
var __vue_module_identifier__$9 = undefined;
/* functional template */
var __vue_is_functional_template__$8 = false;
var __vue_is_functional_template__$9 = false;
/* style inject */
/* style inject SSR */
@ -2737,12 +2815,12 @@
var FormulateInputSelect = normalizeComponent(
{ render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
__vue_inject_styles__$8,
__vue_script__$8,
__vue_scope_id__$8,
__vue_is_functional_template__$8,
__vue_module_identifier__$8,
{ render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
__vue_inject_styles__$9,
__vue_script__$9,
__vue_scope_id__$9,
__vue_is_functional_template__$9,
__vue_module_identifier__$9,
false,
undefined,
undefined,
@ -2751,16 +2829,16 @@
//
var script$9 = {
var script$a = {
name: 'FormulateInputSlider',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$9 = script$9;
var __vue_script__$a = script$a;
/* template */
var __vue_render__$9 = function() {
var __vue_render__$a = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
@ -2881,17 +2959,17 @@
]
)
};
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;
var __vue_staticRenderFns__$a = [];
__vue_render__$a._withStripped = true;
/* style */
var __vue_inject_styles__$9 = undefined;
var __vue_inject_styles__$a = undefined;
/* scoped */
var __vue_scope_id__$9 = undefined;
var __vue_scope_id__$a = undefined;
/* module identifier */
var __vue_module_identifier__$9 = undefined;
var __vue_module_identifier__$a = undefined;
/* functional template */
var __vue_is_functional_template__$9 = false;
var __vue_is_functional_template__$a = false;
/* style inject */
/* style inject SSR */
@ -2901,12 +2979,12 @@
var FormulateInputSlider = normalizeComponent(
{ render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
__vue_inject_styles__$9,
__vue_script__$9,
__vue_scope_id__$9,
__vue_is_functional_template__$9,
__vue_module_identifier__$9,
{ render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
__vue_inject_styles__$a,
__vue_script__$a,
__vue_scope_id__$a,
__vue_is_functional_template__$a,
__vue_module_identifier__$a,
false,
undefined,
undefined,
@ -2915,16 +2993,16 @@
//
var script$a = {
var script$b = {
name: 'FormulateInputTextArea',
mixins: [FormulateInputMixin]
};
/* script */
var __vue_script__$a = script$a;
var __vue_script__$b = script$b;
/* template */
var __vue_render__$a = function() {
var __vue_render__$b = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
@ -2966,17 +3044,17 @@
]
)
};
var __vue_staticRenderFns__$a = [];
__vue_render__$a._withStripped = true;
var __vue_staticRenderFns__$b = [];
__vue_render__$b._withStripped = true;
/* style */
var __vue_inject_styles__$a = undefined;
var __vue_inject_styles__$b = undefined;
/* scoped */
var __vue_scope_id__$a = undefined;
var __vue_scope_id__$b = undefined;
/* module identifier */
var __vue_module_identifier__$a = undefined;
var __vue_module_identifier__$b = undefined;
/* functional template */
var __vue_is_functional_template__$a = false;
var __vue_is_functional_template__$b = false;
/* style inject */
/* style inject SSR */
@ -2986,12 +3064,12 @@
var FormulateInputTextArea = normalizeComponent(
{ render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
__vue_inject_styles__$a,
__vue_script__$a,
__vue_scope_id__$a,
__vue_is_functional_template__$a,
__vue_module_identifier__$a,
{ render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
__vue_inject_styles__$b,
__vue_script__$b,
__vue_scope_id__$b,
__vue_is_functional_template__$b,
__vue_module_identifier__$b,
false,
undefined,
undefined,
@ -3011,6 +3089,7 @@
FormulateInputText: FormulateInputText,
FormulateInputFile: FormulateInputFile,
FormulateInputGroup: FormulateInputGroup,
FormulateInputButton: FormulateInputButton,
FormulateInputSelect: FormulateInputSelect,
FormulateInputSlider: FormulateInputSlider,
FormulateInputTextArea: FormulateInputTextArea

46
dist/snow.css vendored
View File

@ -130,6 +130,35 @@
.formulate-input[data-classification='textarea'] textarea:focus {
outline: 0;
border: 1px solid #41b883; }
.formulate-input[data-classification='button'] button {
appearance: none;
border-radius: .3em;
border: 1px solid #cecece;
box-sizing: border-box;
background-color: transparent;
font-size: .9em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: .75em;
display: block;
width: 100%;
font-weight: 400;
line-height: 1.1em;
margin: 0;
border-color: #41b883;
background-color: #41b883;
color: white;
min-width: 0;
width: auto;
font-weight: bold;
cursor: pointer; }
.formulate-input[data-classification='button'] button::placeholder {
color: #a8a8a8; }
.formulate-input[data-classification='button'] button:focus {
outline: 0;
border: 1px solid #41b883; }
.formulate-input[data-classification='button'] button:active {
background-color: #64c89b;
border-color: #64c89b; }
.formulate-input[data-classification='select'] .formulate-input-element {
position: relative; }
.formulate-input[data-classification='select'] .formulate-input-element::before {
@ -312,7 +341,7 @@
width: .3em;
height: 100%;
right: 0;
border-radius: 0; }
border-radius: 0 .23em .23em 0; }
.formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-is-finished]::before {
transition: opacity .1s;
opacity: 0; }
@ -386,8 +415,7 @@
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
overflow: hidden; }
position: relative; }
.formulate-input[data-classification="file"] .formulate-files .formulate-file::placeholder {
color: #a8a8a8; }
.formulate-input[data-classification="file"] .formulate-files .formulate-file:focus {
@ -404,7 +432,14 @@
position: relative;
z-index: 2;
left: -1px;
box-shadow: 0 0 0 1px #efefef; }
box-shadow: 0 0 0 1px #efefef;
transition: transform .25s, box-shadow .25s, background-color .25s; }
@media (pointer: fine) {
.formulate-input[data-classification="file"] .formulate-files .formulate-file-image-preview:hover {
transition-delay: .2s;
transform: scale(3);
background-color: #ffffff;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1); } }
.formulate-input[data-classification="file"] .formulate-files .formulate-file-image-preview img {
display: block;
position: absolute;
@ -414,6 +449,7 @@
right: 0;
bottom: 0;
top: 0;
object-fit: cover; }
object-fit: contain;
transition: all .25s; }
.formulate-input[data-classification="file"] [data-type="image"] .formulate-input-upload-area .formulate-input-upload-area-mask::before {
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 71.05"><path d="M82.89,0H7.1A7.12,7.12,0,0,0,0,7.11V64a7.11,7.11,0,0,0,7.1,7.1H82.9A7.11,7.11,0,0,0,90,64V7.11A7.12,7.12,0,0,0,82.89,0ZM69.28,39.35a5.44,5.44,0,0,0-8,0L50.58,50.74,32.38,30.88a5.31,5.31,0,0,0-7.92,0L4.74,52.4V7.11A2.37,2.37,0,0,1,7.11,4.74H82.9a2.37,2.37,0,0,1,2.36,2.37V56.3Z"/><circle cx="67.74" cy="22.26" r="8.53"/></svg>'); }

4
dist/snow.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
src/Formulate.js
View File

@ -11,6 +11,7 @@ import FormulateInputGroup from './FormulateInputGroup.vue'
import FormulateInputBox from './inputs/FormulateInputBox.vue'
import FormulateInputText from './inputs/FormulateInputText.vue'
import FormulateInputFile from './inputs/FormulateInputFile.vue'
import FormulateInputButton from './inputs/FormulateInputButton.vue'
import FormulateInputSelect from './inputs/FormulateInputSelect.vue'
import FormulateInputSlider from './inputs/FormulateInputSlider.vue'
import FormulateInputTextArea from './inputs/FormulateInputTextArea.vue'
@ -32,6 +33,7 @@ class Formulate {
FormulateInputText,
FormulateInputFile,
FormulateInputGroup,
FormulateInputButton,
FormulateInputSelect,
FormulateInputSlider,
FormulateInputTextArea

16
src/FormulateInput.vue
View File

@ -8,7 +8,7 @@
>
<div class="formulate-input-wrapper">
<slot
v-if="context.label && context.labelPosition === 'before'"
v-if="context.hasLabel && context.labelPosition === 'before'"
name="label"
v-bind="context"
>
@ -18,14 +18,19 @@
v-text="context.label"
/>
</slot>
<slot v-bind="context">
<slot
name="element"
v-bind="context"
>
<component
:is="context.component"
:context="context"
/>
>
<slot v-bind="context" />
</component>
</slot>
<slot
v-if="context.label && context.labelPosition === 'after'"
v-if="context.hasLabel && context.labelPosition === 'after'"
name="label"
v-bind="context.label"
>
@ -160,6 +165,9 @@ export default {
},
data () {
return {
/**
* @todo consider swapping out nanoid for this._uid
*/
defaultId: nanoid(9),
localAttributes: {},
internalModelProxy: this.formulateValue,

27
src/inputs/FormulateInputButton.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div
:class="`formulate-input-element formulate-input-element--${context.type}`"
:data-type="context.type"
>
<button
:type="type"
v-bind="attributes"
>
<slot>
<span
:class="`formulate-input-element--${context.type}--label`"
v-text="context.value || context.label || context.name || 'Submit'"
/>
</slot>
</button>
</div>
</template>
<script>
import FormulateInputMixin from '../FormulateInputMixin'
export default {
name: 'FormulateInputButton',
mixins: [FormulateInputMixin]
}
</script>

5
src/libs/context.js
View File

@ -15,6 +15,7 @@ export default {
classification: this.classification,
component: this.component,
id: this.id || this.defaultId,
hasLabel: (this.label && this.classification !== 'button'),
label: this.label,
labelPosition: this.logicalLabelPosition,
attributes: this.elementAttributes,
@ -125,10 +126,10 @@ function showFieldErrors () {
* Return the element’s name, or select a fallback.
*/
function nameOrFallback () {
if (this.name === true) {
if (this.name === true && this.classification !== 'button') {
return `${this.type}_${this.elementAttributes.id}`
}
if (this.name === false) {
if (this.name === false || (this.classification === 'button' && this.name === true)) {
return false
}
return this.name

11
src/libs/faux-uploader.js
View File

@ -10,22 +10,15 @@ export default function (file, progress, error, options) {
return new Promise((resolve, reject) => {
const totalTime = (options.fauxUploaderDuration || 2000) * (0.5 + Math.random())
const start = performance.now()
/**
* @todo - remove, intentional failure
* Create a recursive timeout that advances the progress.
*/
const fail = (Math.random() > 0.5)
const advance = () => setTimeout(() => {
const elapsed = performance.now() - start
const currentProgress = Math.min(100, Math.round(elapsed / totalTime * 100))
progress(currentProgress)
/**
* @todo - remove, intentional failure
*/
if (fail && currentProgress > 50) {
return error('There was an error uploading the file.')
}
if (currentProgress >= 100) {
return resolve({
url: 'http://via.placeholder.com/350x150.png',

17
src/libs/rules.js
View File

@ -164,17 +164,18 @@ export default {
/**
* Check the minimum value of a particular.
*/
min: function (value, minimum = 1) {
min: function (value, minimum = 1, force) {
return Promise.resolve((() => {
minimum = Number(minimum)
if (!isNaN(value)) {
value = Number(value)
return value >= minimum
}
if (typeof value === 'string') {
if (Array.isArray(value)) {
minimum = !isNaN(minimum) ? Number(minimum) : minimum
return value.length >= minimum
}
if (Array.isArray(value)) {
if ((!isNaN(value) && force !== 'length') || force === 'value') {
value = !isNaN(value) ? Number(value) : value
return value >= minimum
}
if (typeof value === 'string' || (force === 'length')) {
value = !isNaN(value) ? value.toString() : value
return value.length >= minimum
}
return false

2
src/locales/en.js
View File

@ -117,7 +117,7 @@ export default {
* The (field-level) error message for mime errors.
*/
mime: function ({ name, args }) {
return `${s(name)} must of the the type: ${args[0] || 'No file formats allowed.'}`
return `${s(name)} must be of the the type: ${args[0] || 'No file formats allowed.'}`
},
/**

1
test/Formulate.test.js
View File

@ -55,6 +55,7 @@ test('installs on vue instance', () => {
'FormulateInputText',
'FormulateInputFile',
'FormulateInputGroup',
'FormulateInputButton',
'FormulateInputSelect',
'FormulateInputSlider',
'FormulateInputTextArea'

80
test/FormulateInputButton.test.js Normal file
View File

@ -0,0 +1,80 @@
import Vue from 'vue'
import { mount } from '@vue/test-utils'
import Formulate from '../src/Formulate.js'
import FormulateInput from '@/FormulateInput.vue'
import FormulateInputButton from '@/inputs/FormulateInputButton.vue'
Vue.use(Formulate)
test('type "button" renders a button element', () => {
const wrapper = mount(FormulateInput, { propsData: { type: 'button' } })
expect(wrapper.contains(FormulateInputButton)).toBe(true)
})
test('type "submit" renders a button element', () => {
const wrapper = mount(FormulateInput, { propsData: { type: 'submit' } })
expect(wrapper.contains(FormulateInputButton)).toBe(true)
})
test('type "button" uses value as highest priority content', () => {
const wrapper = mount(FormulateInput, { propsData: {
type: 'submit',
value: 'Value content',
label: 'Label content',
name: 'Name content'
}})
expect(wrapper.find('button').text()).toBe('Value content')
})
test('type "button" uses label as second highest priority content', () => {
const wrapper = mount(FormulateInput, { propsData: {
type: 'submit',
label: 'Label content',
name: 'Name content'
}})
expect(wrapper.find('button').text()).toBe('Label content')
})
test('type "button" uses name as lowest priority content', () => {
const wrapper = mount(FormulateInput, { propsData: {
type: 'submit',
name: 'Name content'
}})
expect(wrapper.find('button').text()).toBe('Name content')
})
test('type "button" uses "Submit" as default content', () => {
const wrapper = mount(FormulateInput, { propsData: {
type: 'submit',
}})
expect(wrapper.find('button').text()).toBe('Submit')
})
test('type "button" with label does not render label element', () => {
const wrapper = mount(FormulateInput, { propsData: {
type: 'button',
label: 'my label'
}})
expect(wrapper.find('label').exists()).toBe(false)
})
test('type "submit" with label does not render label element', () => {
const wrapper = mount(FormulateInput, { propsData: {
type: 'button',
label: 'my label'
}})
expect(wrapper.find('label').exists()).toBe(false)
})
test('type "button" renders slot inside button', () => {
const wrapper = mount(FormulateInput, {
propsData: {
type: 'button',
label: 'my label',
},
slots: {
default: '<span>My custom slot</span>'
}
})
expect(wrapper.find('button > span').html()).toBe('<span>My custom slot</span>')
})

9
test/rules.test.js
View File

@ -330,11 +330,20 @@ describe('min', () => {
it('passes when a array length', async () => expect(await rules.min(Array(6), '6')).toBe(true))
it('passes when string is forced to value', async () => expect(await rules.min('bcd', 'aaa', 'value')).toBe(true))
it('fails when string is forced to lesser value', async () => expect(await rules.min('a', 'b', 'value')).toBe(false))
it('passes when a number is forced to length', async () => expect(await rules.min('000', 3, 'length')).toBe(true))
it('fails when a number is forced to length', async () => expect(await rules.min('44', 3, 'length')).toBe(false))
it('fails when a array length', async () => expect(await rules.min(Array(6), '7')).toBe(false))
it('fails when a string length', async () => expect(await rules.min('bar', 4)).toBe(false))
it('fails when a number', async () => expect(await rules.min(3, '7')).toBe(false))
})
/**

27
themes/snow/_inputs.scss
View File

@ -150,6 +150,33 @@
}
}
// Button inputs
// -----------------------------------------------------------------------------
&[data-classification='button'] {
button {
@include baseinput;
border-color: $formulate-green;
background-color: $formulate-green;
color: white;
min-width: 0;
width: auto;
font-weight: bold;
cursor: pointer;
display: inline-flex;
align-items: center;
&[disabled] {
background-color: $formulate-gray-d;
border-color: $formulate-gray-d;
}
&:active {
background-color: $formulate-green-l;
border-color: $formulate-green-l;
}
}
}
// Select lists
// -----------------------------------------------------------------------------

1
themes/snow/_variables.scss
View File

@ -14,6 +14,7 @@ $formulate-dark: #000000;
$formulate-blue-l: #f3f4f4;
$formulate-green: #41b883;
$formulate-green-l: #64c89b;
$formulate-error: #960505;
$formulate-error-l: #dc2c2c;