@jsonforms/vue-vuetify
Version:
Vue Vuetify renderers for JSON Forms
1,264 lines (1,263 loc) • 289 kB
JavaScript
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@jsonforms/core"), require("@jsonforms/vue"), require("vue"), require("vuetify/components"), require("lodash/cloneDeep"), require("lodash/debounce"), require("lodash/get"), require("lodash/isPlainObject"), require("lodash/merge"), require("lodash/mergeWith"), require("dayjs"), require("dayjs/plugin/customParseFormat"), require("dayjs/plugin/localeData"), require("dayjs/plugin/localizedFormat"), require("dayjs/plugin/timezone"), require("dayjs/plugin/utc"), require("ajv"), require("lodash/findIndex"), require("vuetify/labs/VStepperVertical"), require("vuetify"), require("lodash/startCase"), require("lodash/isEqual"), require("lodash/omit"), require("lodash/isEmpty"), require("lodash/isObject"), require("maska"), require("vuetify/labs/VTimePicker"), require("vuetify/labs/VNumberInput"), require("lodash/every"), require("lodash/isArray"), require("lodash/isString")) : typeof define === "function" && define.amd ? define(["exports", "@jsonforms/core", "@jsonforms/vue", "vue", "vuetify/components", "lodash/cloneDeep", "lodash/debounce", "lodash/get", "lodash/isPlainObject", "lodash/merge", "lodash/mergeWith", "dayjs", "dayjs/plugin/customParseFormat", "dayjs/plugin/localeData", "dayjs/plugin/localizedFormat", "dayjs/plugin/timezone", "dayjs/plugin/utc", "ajv", "lodash/findIndex", "vuetify/labs/VStepperVertical", "vuetify", "lodash/startCase", "lodash/isEqual", "lodash/omit", "lodash/isEmpty", "lodash/isObject", "maska", "vuetify/labs/VTimePicker", "vuetify/labs/VNumberInput", "lodash/every", "lodash/isArray", "lodash/isString"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["@jsonforms/vue-vuetify"] = {}, global["@jsonforms/core"], global["@jsonforms/vue"], global.Vue, global.Vuetify.components, global._.cloneDeep, global._.debounce, global._.get, global._.isPlainObject, global._.merge, global._.mergeWith, global.dayjs, global.dayjs_plugin_customParseFormat, global.dayjs_plugin_localeData, global.dayjs_plugin_localizedFormat, global.dayjs_plugin_timezone, global.dayjs_plugin_utc, global.ajv, global._.findIndex, global.Vuetify.labs.VStepperVertical, global.Vuetify, global._.startCase, global._.isEqual, global._.omit, global._.isEmpty, global._.isObject, global.maska, global.Vuetify.labs.VTimePicker, global.Vuetify.labs.VNumberInput, global._.every, global._.isArray, global._.isString));
})(this, function(exports2, core, vue$1, vue, components, cloneDeep, debounce, get, isPlainObject, merge, mergeWith, dayjs, customParseFormat, localeData, localizedFormat, timezone, utc, ajv, findIndex, VStepperVertical, vuetify, startCase, isEqual, omit, isEmpty, isObject, maska, VTimePicker, VNumberInput, every, isArray, isString) {
"use strict";var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
const aliases$1 = {
itemAdd: "fas fa-plus",
itemMoveUp: "fas fa-arrow-up",
itemMoveDown: "fas fa-arrow-down",
itemDelete: "fas fa-trash",
calendarClock: "fas fa-calendar",
clock: "far fa-clock",
passwordHide: "far fa-eye-slash",
passwordShow: "far fa-eye",
validationError: "fas fa-circle-exclamation"
};
const aliases = {
itemAdd: "mdi-plus",
itemMoveUp: "mdi-arrow-up",
itemMoveDown: "mdi-arrow-down",
itemDelete: "mdi-delete",
calendarClock: "mdi-calendar-clock",
clock: "mdi-clock-outline",
passwordHide: "mdi-eye-off",
passwordShow: "mdi-eye",
validationError: "mdi-alert-circle-outline"
};
const defaultStyles = {
control: {
root: "control",
input: "input"
},
verticalLayout: {
root: "vertical-layout",
item: "vertical-layout-item"
},
horizontalLayout: {
root: "horizontal-layout",
item: "horizontal-layout-item"
},
group: {
root: "group",
label: "group-label",
item: "group-item",
bare: "group-bare",
alignLeft: "group-align-left"
},
arrayList: {
root: "array-list",
toolbar: "array-list-toolbar",
title: "array-list-title",
validationIcon: "array-list-validation",
addButton: "array-list-add",
label: "array-list-label",
noData: "array-list-no-data",
item: "array-list-item",
itemHeader: "array-list-item-header",
itemLabel: "array-list-item-label",
itemContent: "array-list-item-content",
itemMoveUp: "array-list-item-move-up",
itemMoveDown: "array-list-item-move-down",
itemDelete: "array-list-item-delete"
},
listWithDetail: {
root: "list-with-detail",
toolbar: "list-with-detail-toolbar",
addButton: "list-with-detail-add",
label: "list-with-detail-label",
noData: "list-with-detail-no-data",
item: "list-with-detail-item",
itemLabel: "list-with-detail-item-label",
itemContent: "list-with-detail-item-content",
itemMoveUp: "list-with-detail-item-move-up",
itemMoveDown: "list-with-detail-item-move-down",
itemDelete: "list-with-detail-item-delete"
},
label: {
root: "label-element"
},
categorization: {
root: "categorization"
}
};
const createEmptyStyles = () => ({
control: {},
verticalLayout: {},
horizontalLayout: {},
group: {},
arrayList: {},
listWithDetail: {},
label: {},
categorization: {}
});
const useStyles = (element) => {
var _a, _b;
const userStyles = vue.inject("styles", defaultStyles);
if (!((_a = element == null ? void 0 : element.options) == null ? void 0 : _a.styles)) {
return userStyles;
}
const styles = createEmptyStyles();
if (userStyles) {
merge(styles, userStyles);
} else {
merge(styles, defaultStyles);
}
if ((_b = element == null ? void 0 : element.options) == null ? void 0 : _b.styles) {
merge(styles, element.options.styles);
}
return styles;
};
const classes = (strings, ...variables) => {
return strings.reduce((acc, curr, index) => {
return `${acc}${curr}${variables[index] || ""}`;
}, "").trim();
};
const mergeStyles = (stylesA, stylesB) => {
const styles = cloneDeep(stylesA);
mergeWith(styles, stylesB, (aValue, bValue) => {
if (typeof aValue === "string" && typeof bValue === "string") {
return `${aValue} ${bValue}`;
}
return void 0;
});
return styles;
};
const IconSymbol = Symbol.for("vuetify:icons");
const useControlAppliedOptions = (input) => {
return vue.computed(
() => merge(
{},
cloneDeep(input.control.value.config),
cloneDeep(input.control.value.uischema.options)
)
);
};
const useLayoutAppliedOptions = (input) => {
return vue.computed(
() => merge(
{},
cloneDeep(input.layout.value.config),
cloneDeep(input.layout.value.uischema.options)
)
);
};
const useComputedLabel = (input, appliedOptions) => {
return vue.computed(() => {
var _a;
return core.computeLabel(
input.control.value.label,
input.control.value.required,
!!((_a = appliedOptions.value) == null ? void 0 : _a.hideRequiredAsterisk)
);
});
};
const useVuetifyLabel = (input) => {
const styles = useStyles(input.label.value.uischema);
const appliedOptions = vue.computed(
() => merge(
{},
cloneDeep(input.label.value.config),
cloneDeep(input.label.value.uischema.options)
)
);
const vuetifyProps = (path) => {
var _a;
const props = get((_a = appliedOptions.value) == null ? void 0 : _a.vuetify, path);
return props && isPlainObject(props) ? props : {};
};
return {
...input,
appliedOptions,
vuetifyProps,
styles
};
};
const useVuetifyControl = (input, adaptValue = (v) => v, debounceWait) => {
const touched = vue.ref(false);
const changeEmitter = typeof debounceWait === "number" && input.handleChange ? debounce(input.handleChange, debounceWait) : input.handleChange;
const onChange = (value) => {
if (changeEmitter) {
changeEmitter(input.control.value.path, adaptValue(value));
}
};
const appliedOptions = useControlAppliedOptions(input);
const isFocused = vue.ref(false);
const handleFocus = () => {
isFocused.value = true;
};
const handleBlur = () => {
touched.value = true;
isFocused.value = false;
};
const filteredErrors = vue.computed(() => {
return touched.value || !appliedOptions.value.enableFilterErrorsBeforeTouch ? input.control.value.errors : "";
});
const persistentHint = () => {
var _a;
return !core.isDescriptionHidden(
input.control.value.visible,
input.control.value.description,
isFocused.value,
!!((_a = appliedOptions.value) == null ? void 0 : _a.showUnfocusedDescription)
);
};
const computedLabel = useComputedLabel(input, appliedOptions);
const controlWrapper = vue.computed(() => {
const { id, description, errors, label, visible, required } = input.control.value;
return { id, description, errors, label, visible, required };
});
const styles = useStyles(input.control.value.uischema);
const vuetifyProps = (path) => {
var _a;
const props = get((_a = appliedOptions.value) == null ? void 0 : _a.vuetify, path);
return props && isPlainObject(props) ? props : {};
};
const overwrittenControl = vue.computed(() => {
return {
...input.control.value,
errors: filteredErrors.value
};
});
const rawErrors = vue.computed(() => input.control.value.errors);
return {
...input,
control: overwrittenControl,
styles,
isFocused,
appliedOptions,
controlWrapper,
onChange,
vuetifyProps,
persistentHint,
computedLabel,
touched,
handleBlur,
handleFocus,
rawErrors
};
};
const useCombinatorTranslations = (input) => {
var _a;
const jsonforms = vue.inject("jsonforms");
const translations = core.getCombinatorTranslations(
((_a = jsonforms == null ? void 0 : jsonforms.i18n) == null ? void 0 : _a.translate) ?? core.defaultJsonFormsI18nState.translate,
core.combinatorDefaultTranslations,
input.control.value.i18nKeyPrefix,
input.control.value.label
);
const overwrittenControl = vue.computed(() => {
return {
...input.control.value,
translations
};
});
return {
...input,
control: overwrittenControl
};
};
const useJsonForms = () => {
const jsonforms = vue.inject("jsonforms");
if (!jsonforms) {
throw new Error(
"'jsonforms couldn't be injected. Are you within JSON Forms?"
);
}
return jsonforms;
};
const useTranslator = () => {
const jsonforms = useJsonForms();
if (!jsonforms.i18n || !jsonforms.i18n.translate) {
throw new Error(
"'jsonforms i18n couldn't be injected. Are you within JSON Forms?"
);
}
const translate = vue.computed(() => {
return jsonforms.i18n.translate;
});
return translate;
};
const useVuetifyLayout = (input) => {
const appliedOptions = useLayoutAppliedOptions(input);
const vuetifyProps = (path) => {
var _a;
const props = get((_a = appliedOptions.value) == null ? void 0 : _a.vuetify, path);
return props && isPlainObject(props) ? props : {};
};
return {
...input,
styles: useStyles(input.layout.value.uischema),
appliedOptions,
vuetifyProps
};
};
const useVuetifyArrayControl = (input) => {
var _a;
const appliedOptions = useControlAppliedOptions(input);
const computedLabel = useComputedLabel(input, appliedOptions);
const vuetifyProps = (path) => {
var _a2;
const props = get((_a2 = appliedOptions.value) == null ? void 0 : _a2.vuetify, path);
return props && isPlainObject(props) ? props : {};
};
const childLabelForIndex = (index) => {
var _a2;
if (index === null) {
return "";
}
const childLabelProp = ((_a2 = input.control.value.uischema.options) == null ? void 0 : _a2.childLabelProp) ?? core.getFirstPrimitiveProp(input.control.value.schema);
if (!childLabelProp) {
return `${index}`;
}
const labelValue = core.Resolve.data(
input.control.value.data,
core.composePaths(`${index}`, childLabelProp)
);
if (labelValue === void 0 || labelValue === null || Number.isNaN(labelValue)) {
return "";
}
return `${labelValue}`;
};
const filteredChildErrors = vue.computed(() => {
var _a2;
const filtered = ((_a2 = appliedOptions.value) == null ? void 0 : _a2.enableFilterErrorsBeforeTouch) ? [] : input.control.value.childErrors;
return filtered;
});
const jsonforms = vue.inject("jsonforms");
const translations = core.getArrayTranslations(
((_a = jsonforms == null ? void 0 : jsonforms.i18n) == null ? void 0 : _a.translate) ?? core.defaultJsonFormsI18nState.translate,
core.arrayDefaultTranslations,
input.control.value.i18nKeyPrefix,
input.control.value.label
);
const overwrittenControl = vue.computed(() => {
return {
...input.control.value,
childErrors: filteredChildErrors.value,
translations
};
});
return {
...input,
control: overwrittenControl,
styles: useStyles(input.control.value.uischema),
appliedOptions,
childLabelForIndex,
computedLabel,
vuetifyProps,
rawChildErrors: input.control.value.childErrors
};
};
const useVuetifyBasicControl = (input) => {
const appliedOptions = useControlAppliedOptions(input);
const vuetifyProps = (path) => {
var _a;
const props = get((_a = appliedOptions.value) == null ? void 0 : _a.vuetify, path);
return props && isPlainObject(props) ? props : {};
};
return {
...input,
styles: useStyles(input.control.value.uischema),
appliedOptions,
vuetifyProps
};
};
const useAjv = () => {
var _a;
const jsonforms = useJsonForms();
return (_a = jsonforms.core) == null ? void 0 : _a.ajv;
};
const useNested = (element) => {
const nestedInfo = vue.inject("jsonforms.nestedInfo", { level: 0 });
if (element) {
vue.provide("jsonforms.nestedInfo", {
level: nestedInfo.level + 1,
parentElement: element
});
}
return nestedInfo;
};
const useIcons = () => {
const iconSet = vue.computed(() => {
const icons = vue.inject(IconSymbol);
if (!icons) throw new Error("Missing Vuetify Icons provide!");
let result = aliases;
const overrides = icons.aliases;
if (icons.defaultSet === "fa") {
result = aliases$1;
}
return overrides ? { ...result, ...overrides } : result;
});
return {
current: iconSet
};
};
dayjs.extend(customParseFormat);
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(localeData);
dayjs.extend(localizedFormat);
const expandLocaleFormat = (format) => {
return format.replace(/\b(LT|LTS|L{1,4})\b/g, function(match, p1) {
switch (p1) {
case "LT":
case "LTS":
case "L":
case "LL":
case "LLL":
case "LLLL":
return dayjs.localeData().longDateFormat(p1);
default:
return match;
}
});
};
const parseDateTime = (data, format) => {
if (!data) {
return null;
}
const dayjsData = dayjs(data, format);
if (!dayjsData.isValid()) {
return null;
}
return dayjsData;
};
const convertDayjsToMaskaFormat = (dayjsFormat) => {
function* nextKey(preservedKeys) {
let currentCharCode = "A".charCodeAt(0);
while (currentCharCode <= 65535) {
const currentChar = String.fromCharCode(currentCharCode);
if (!preservedKeys.includes(currentChar)) {
yield currentChar;
}
currentCharCode++;
}
}
function RegExpLiteral(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
class Tokens {
constructor(preservedKeys) {
__publicField(this, "tokens");
__publicField(this, "charGenerator");
this.tokens = {};
this.charGenerator = nextKey(preservedKeys);
}
getTokens() {
return this.tokens;
}
getTokenKey(token) {
const entry2 = Object.entries(this.tokens).find(
(entry22) => entry22[1].pattern.toString() === token.pattern.toString() && entry22[1].optional === token.optional
);
if (entry2) {
return entry2[0];
}
throw new Error(
"Key for pattern " + token.pattern.toString() + " not found."
);
}
registerToken(token) {
const entry2 = Object.entries(this.tokens).find(
(entry22) => entry22[1].pattern.toString() === token.pattern.toString() && entry22[1].optional === token.optional
);
if (entry2) {
return entry2[0];
}
const key = this.charGenerator.next().value;
this.tokens[key] = token;
return key;
}
}
const dayjsTokens = [
"YYYY",
// Four-digit year - example: 2001
"YY",
//Two-digit year - example: 01
"M",
// Month, beginning at 1 - example: 1-12
"MM",
// Month, 2-digits - example: 01-12
"MMM",
// The abbreviated month name - example: Jan-Dec
"MMMM",
// The full month name - example: January-December
"D",
// Day of month - example: 1-31
"DD",
// Day of month, 2-digits - example: 01-31
"H",
// Hours - example: 0-23
"HH",
// Hours, 2-digits - example: 00-23
"h",
// Hours, 12-hour clock - example: 1-12
"hh",
// Hours, 12-hour clock, 2-digits - example: 01-12
"m",
// Minutes - example: 0-59
"mm",
// Minutes, 2-digits - example: 00-59
"s",
// Seconds - example: 0-59
"ss",
// Seconds, 2-digits - example: 00-59
"S",
// Hundreds of milliseconds, 1-digit - example: 0-9
"SS",
// Tens of milliseconds, 2-digits - example: 00-99
"SSS",
// Milliseconds, 3-digits - example: 000-999
"Z",
// Offset from UTC - example: -05:00
"ZZ",
// Compact offset from UTC, 2-digits - example: -0500
"A",
// Post or ante meridiem, upper-case - example: AM PM
"a",
// Post or ante meridiem, lower-case - example: am pm,
"X",
// Unix timestamp - example 1410715640.579,
"x"
// Unix ms timestamp - example 1410715640579
].sort((a, b) => b.length - a.length);
const parts = dayjsFormat.split(new RegExp(`(${dayjsTokens.join("|")})`)).filter(Boolean);
const reservedChars = parts.filter((part) => !dayjsTokens.includes(part)).join("");
const tokens = new Tokens(reservedChars);
tokens.registerToken({ pattern: /[0-9]/ });
tokens.registerToken({ pattern: /1/ });
tokens.registerToken({ pattern: /[0-2]/ });
tokens.registerToken({ pattern: /[0-2]/, optional: true });
tokens.registerToken({ pattern: /[0-1]/ });
tokens.registerToken({ pattern: /[1-9]/ });
let escapedMonths = dayjs.monthsShort().map((month) => RegExpLiteral(month));
let regexPattern = `\\b(${escapedMonths.join("|")})\\b`;
tokens.registerToken({ pattern: new RegExp(regexPattern, "i") });
escapedMonths = dayjs.months().map((month) => RegExpLiteral(month));
regexPattern = `\\b(${escapedMonths.join("|")})\\b`;
tokens.registerToken({ pattern: new RegExp(regexPattern, "i") });
tokens.registerToken({ pattern: /[1-3]/ });
tokens.registerToken({ pattern: /[0-1]/, optional: true });
tokens.registerToken({ pattern: /[0-9]/, optional: true });
tokens.registerToken({ pattern: /[0-3]/ });
tokens.registerToken({ pattern: /[0-3]/, optional: true });
tokens.registerToken({ pattern: /[0-5]/ });
tokens.registerToken({ pattern: /[ap]/ });
tokens.registerToken({ pattern: /m/ });
tokens.registerToken({ pattern: /[AP]/ });
tokens.registerToken({ pattern: /M/ });
tokens.registerToken({ pattern: /[+-]/ });
tokens.registerToken({ pattern: /[0-4]/ });
tokens.registerToken({ pattern: /:/ });
tokens.registerToken({ pattern: /[.]/ });
tokens.registerToken({ pattern: /[.]/, optional: true });
const tokenFunction = (value) => {
let index = 0;
const result = [];
for (const part of parts) {
if (!part || part === "") {
continue;
}
if (index > value.length) {
break;
}
if (part === "YYYY") {
result.push({ pattern: /[0-9]/ });
result.push({ pattern: /[0-9]/ });
result.push({ pattern: /[0-9]/ });
result.push({ pattern: /[0-9]/ });
index += 4;
} else if (part === "YY" || part == "SS") {
result.push({ pattern: /[0-9]/ });
result.push({ pattern: /[0-9]/ });
index += 2;
} else if (part === "M") {
result.push({ pattern: /1/ });
if (value.charAt(index) === "1") {
if (/[0-2]/.test(value.charAt(index + 1))) {
result.push({ pattern: /[0-2]/ });
index += 1;
} else if (value.charAt(index + 1) === "") {
result.push({ pattern: /[0-2]/, optional: true });
}
}
index += 1;
} else if (part === "MM" || part == "hh") {
result.push({ pattern: /[0-1]/ });
result.push(
value.charAt(index) === "0" ? { pattern: /[1-9]/ } : { pattern: /[0-2]/ }
);
index += 2;
} else if (part === "MMM") {
const escapedMonths2 = dayjs.monthsShort().map((month) => RegExpLiteral(month));
const regexPattern2 = `\\b(${escapedMonths2.join("|")})\\b`;
result.push({ pattern: new RegExp(regexPattern2, "i") });
let monthSpecified = false;
for (const month of dayjs.monthsShort()) {
if (index < value.length && value.substring(index).startsWith(month)) {
index += month.length;
monthSpecified = true;
break;
}
}
if (!monthSpecified) {
break;
}
} else if (part === "MMMM") {
const escapedMonths2 = dayjs.months().map((month) => RegExpLiteral(month));
const regexPattern2 = `\\b(${escapedMonths2.join("|")})\\b`;
result.push({ pattern: new RegExp(regexPattern2, "i") });
let monthSpecified = false;
for (const month of dayjs.months()) {
if (index < value.length && value.substring(index).startsWith(month)) {
index += month.length;
monthSpecified = true;
break;
}
}
if (!monthSpecified) {
break;
}
} else if (part === "D") {
result.push({ pattern: /[1-9]/ });
if (/[1-3]/.test(value.charAt(index))) {
if (value.charAt(index) === "3") {
if (/[0-1]/.test(value.charAt(index + 1))) {
result.push({ pattern: /[0-1]/ });
index += 1;
} else if (value.charAt(index + 1) === "") {
result.push({ pattern: /[0-1]/, optional: true });
}
} else {
if (/\d/.test(value.charAt(index + 1))) {
result.push({ pattern: /[0-9]/ });
index += 1;
} else if (value.charAt(index + 1) === "") {
result.push({ pattern: /[0-9]/, optional: true });
}
}
}
index += 1;
} else if (part === "DD") {
result.push({ pattern: /[0-3]/ });
if (value.charAt(index) === "3") {
result.push({ pattern: /[0-1]/ });
} else if (value.charAt(index) === "0") {
result.push({ pattern: /[1-9]/ });
} else {
result.push({ pattern: /[0-9]/ });
}
index += 2;
} else if (part == "H") {
result.push({ pattern: /[0-9]/ });
if (value.charAt(index) === "2") {
if (/[0-3]/.test(value.charAt(index + 1))) {
result.push({ pattern: /[0-3]/ });
index += 1;
} else if (value.charAt(index + 1) === "") {
result.push({ pattern: /[0-3]/, optional: true });
}
} else if (value.charAt(index) === "1") {
if (/\d/.test(value.charAt(index + 1))) {
result.push({ pattern: /[0-9]/ });
index += 1;
} else if (value.charAt(index + 1) === "") {
result.push({ pattern: /[0-9]/, optional: true });
}
}
index += 1;
} else if (part == "HH") {
result.push({ pattern: /[0-2]/ });
if (/[0-1]/.test(value.charAt(index))) {
result.push({ pattern: /[0-9]/ });
} else if (value.charAt(index) === "2") {
result.push({ pattern: /[0-3]/ });
}
index += 2;
} else if (part == "h") {
result.push({ pattern: /[1-9]/ });
if (value.charAt(index) === "1") {
if (/[0-2]/.test(value.charAt(index + 1))) {
result.push({ pattern: /[0-2]/ });
index += 1;
} else if (value.charAt(index + 1) === "") {
result.push({ pattern: /[0-2]/, optional: true });
}
}
index += 1;
} else if (part == "m" || part == "s") {
result.push({ pattern: /[0-9]/ });
if (/[1-5]/.test(value.charAt(index))) {
if (/\d/.test(value.charAt(index + 1))) {
result.push({ pattern: /[0-9]/ });
index += 1;
} else if (value.charAt(index + 1) === "") {
result.push({ pattern: /[0-9]/, optional: true });
}
}
index += 1;
} else if (part == "mm" || part == "ss") {
result.push({ pattern: /[0-5]/ });
result.push({ pattern: /[0-9]/ });
index += 2;
} else if (part == "a") {
result.push({ pattern: /[ap]/ });
result.push({ pattern: /m/ });
index += 2;
} else if (part == "A") {
result.push({ pattern: /[AP]/ });
result.push({ pattern: /M/ });
index += 2;
} else if (part == "Z" || part == "ZZ") {
result.push({ pattern: /[+-]/ });
result.push({ pattern: /[0-1]/ });
if (value.charAt(index + 1) === "0") {
result.push({ pattern: /[0-9]/ });
} else if (value.charAt(index + 1) === "1") {
result.push(
value.charAt(index) === "+" ? { pattern: /[0-4]/ } : { pattern: /[0-2]/ }
);
}
if (part === "Z") {
result.push({ pattern: /:/ });
index += 1;
}
result.push({ pattern: /[0-5]/ });
result.push({ pattern: /[0-9]/ });
index += 5;
} else if (part == "S") {
result.push({ pattern: /[0-9]/ });
index += 1;
} else if (part == "SSS") {
result.push({ pattern: /[0-9]/ });
result.push({ pattern: /[0-9]/ });
result.push({ pattern: /[0-9]/ });
index += 3;
} else if (part == "X") {
const times = 13;
for (let i = 0; i < times; i++) {
result.push({ pattern: /[0-9]/ });
}
index += times;
} else if (part == "x") {
const times = 10;
for (let i = 0; i < times; i++) {
result.push({ pattern: /[0-9]/ });
}
if (value.charAt(index + times) === ".") {
result.push({ pattern: /[.]/ });
index += 1;
for (let i = 0; i < 3; i++) {
if (/\d/.test(value.charAt(index + times + 1 + i))) {
result.push({ pattern: /[0-9]/ });
index += 1;
} else if (value.charAt(index + times + 1 + i) === "") {
result.push({ pattern: /[0-9]/, optional: true });
break;
}
}
} else if (value.charAt(index + times) === "") {
result.push({ pattern: /[.]/, optional: true });
}
index += times;
} else {
result.push(part);
index += part.length;
}
}
const mask = result.map(
(part) => typeof part === "string" ? part : tokens.getTokenKey(part)
).join("");
return mask;
};
return { mask: tokenFunction, tokens: tokens.getTokens() };
};
const createAjv = (options) => {
const ajv2 = core.createAjv(options);
ajv2.addFormat("password", () => true);
return ajv2;
};
const labelRenderer$1 = vue.defineComponent({
name: "label-renderer",
components: {
VLabel: components.VLabel
},
props: {
...vue$1.rendererProps()
},
setup(props) {
return useVuetifyLabel(vue$1.useJsonFormsLabel(props));
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
const _component_v_label = vue.resolveComponent("v-label");
return _ctx.label.visible ? (vue.openBlock(), vue.createBlock(_component_v_label, vue.mergeProps({
key: 0,
class: _ctx.styles.label.root
}, _ctx.vuetifyProps("v-label")), {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.label.text), 1)
]),
_: 1
}, 16, ["class"])) : vue.createCommentVNode("", true);
}
const labelRenderer = /* @__PURE__ */ _export_sfc(labelRenderer$1, [["render", _sfc_render$C]]);
const _sfc_main$4 = vue.defineComponent({
name: "validation-badge",
components: {
VBadge: components.VBadge,
VTooltip: components.VTooltip
},
props: {
errors: {
required: true,
type: Array
},
bordered: {
type: Boolean,
default: false
},
color: {
type: String,
default: "error"
},
inline: {
type: Boolean,
default: false
},
offsetX: {
type: [Number, String],
default: void 0
},
offsetY: {
type: [Number, String],
default: void 0
},
floating: {
type: Boolean,
default: false
}
},
computed: {
tooltipMessages() {
const error = [];
for (const e of this.errors) {
const errorObject = e;
const index = findIndex(error, { schemaPath: errorObject.schemaPath });
if (errorObject.message) {
if (index == -1) {
error.push({
schemaPath: errorObject.schemaPath,
instancePath: errorObject.instancePath,
labels: [
core.createLabelDescriptionFrom(
core.createControlElement(errorObject.instancePath),
errorObject.schema
).text
],
message: errorObject.message
});
} else {
error[index].labels.push(
core.createLabelDescriptionFrom(
core.createControlElement(errorObject.instancePath),
errorObject.schema
).text
);
}
}
}
return error.map((v) => v.labels.join(",") + ": " + v.message);
}
}
});
const _hoisted_1$a = /* @__PURE__ */ vue.createElementVNode("p", null, "Validation Errors", -1);
function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
const _component_v_badge = vue.resolveComponent("v-badge");
const _component_v_tooltip = vue.resolveComponent("v-tooltip");
return vue.openBlock(), vue.createElementBlock("div", null, [
_ctx.errors.length > 0 ? (vue.openBlock(), vue.createBlock(_component_v_tooltip, {
key: 0,
bottom: ""
}, {
activator: vue.withCtx(({ props }) => [
vue.createVNode(_component_v_badge, {
color: _ctx.color,
bordered: _ctx.bordered,
inline: _ctx.inline,
offsetX: _ctx.offsetX,
offsetY: _ctx.offsetY,
floating: _ctx.floating
}, {
badge: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.errors.length), 1)
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", vue.normalizeProps(vue.guardReactiveProps(props)), [
vue.renderSlot(_ctx.$slots, "default")
], 16)
]),
_: 2
}, 1032, ["color", "bordered", "inline", "offsetX", "offsetY", "floating"])
]),
default: vue.withCtx(() => [
_hoisted_1$a,
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.tooltipMessages, (message, index) => {
return vue.openBlock(), vue.createElementBlock("p", {
key: `${index}`,
class: "mb-0"
}, vue.toDisplayString(message), 1);
}), 128))
]),
_: 3
})) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
]);
}
const ValidationBadge = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$B]]);
const _sfc_main$3 = vue.defineComponent({
name: "validation-icon",
components: {
ValidationBadge,
VIcon: components.VIcon
},
props: {
errors: {
required: true,
type: Array
}
},
setup() {
const icons = useIcons();
return { icons };
}
});
function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
const _component_v_icon = vue.resolveComponent("v-icon");
const _component_validation_badge = vue.resolveComponent("validation-badge");
return _ctx.errors && _ctx.errors.length > 0 ? (vue.openBlock(), vue.createBlock(_component_validation_badge, {
key: 0,
errors: _ctx.errors,
floating: ""
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_v_icon, { color: "error" }, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.icons.current.value.validationError), 1)
]),
_: 1
})
]),
_: 1
}, 8, ["errors"])) : vue.createCommentVNode("", true);
}
const ValidationIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$A]]);
const controlRenderer$S = vue.defineComponent({
name: "list-with-detail-renderer",
components: {
DispatchRenderer: vue$1.DispatchRenderer,
VList: components.VList,
VListItem: components.VListItem,
VListItemTitle: components.VListItemTitle,
VAvatar: components.VAvatar,
VRow: components.VRow,
VCol: components.VCol,
VToolbar: components.VToolbar,
VToolbarTitle: components.VToolbarTitle,
VTooltip: components.VTooltip,
VBtn: components.VBtn,
VIcon: components.VIcon,
VSpacer: components.VSpacer,
VContainer: components.VContainer,
VVirtualScroll: components.VVirtualScroll,
ValidationIcon,
ValidationBadge
},
props: {
...vue$1.rendererProps()
},
setup(props) {
const selectedIndex = vue.ref(void 0);
const icons = useIcons();
return {
...useVuetifyArrayControl(vue$1.useJsonFormsArrayControl(props)),
selectedIndex,
icons
};
},
computed: {
dataLength() {
return this.control.data ? this.control.data.length : 0;
},
foundUISchema() {
return core.findUISchema(
this.control.uischemas,
this.control.schema,
this.control.uischema.scope,
this.control.path,
void 0,
this.control.uischema
);
},
arraySchema() {
return core.Resolve.schema(
this.control.rootSchema,
this.control.uischema.scope,
this.control.rootSchema
);
}
},
methods: {
composePaths: core.composePaths,
createDefaultValue: core.createDefaultValue,
addButtonClick() {
this.addItem(
this.control.path,
core.createDefaultValue(this.control.schema, this.control.rootSchema)
)();
},
moveUpClick(event, toMove) {
var _a;
event.stopPropagation();
(_a = this.moveUp) == null ? void 0 : _a.call(this, this.control.path, toMove)();
},
moveDownClick(event, toMove) {
var _a;
event.stopPropagation();
(_a = this.moveDown) == null ? void 0 : _a.call(this, this.control.path, toMove)();
},
removeItemsClick(event, toDelete) {
var _a;
event.stopPropagation();
(_a = this.removeItems) == null ? void 0 : _a.call(this, this.control.path, toDelete)();
},
childErrors(index) {
return this.control.childErrors.filter(
(e) => e.instancePath.startsWith(
this.composePaths(this.control.path, `${index}`)
)
);
}
}
});
const _hoisted_1$9 = { class: "text-h6" };
function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
const _component_v_toolbar_title = vue.resolveComponent("v-toolbar-title");
const _component_v_spacer = vue.resolveComponent("v-spacer");
const _component_validation_icon = vue.resolveComponent("validation-icon");
const _component_v_icon = vue.resolveComponent("v-icon");
const _component_v_btn = vue.resolveComponent("v-btn");
const _component_v_tooltip = vue.resolveComponent("v-tooltip");
const _component_v_toolbar = vue.resolveComponent("v-toolbar");
const _component_v_col = vue.resolveComponent("v-col");
const _component_v_row = vue.resolveComponent("v-row");
const _component_v_avatar = vue.resolveComponent("v-avatar");
const _component_validation_badge = vue.resolveComponent("validation-badge");
const _component_v_list_item_title = vue.resolveComponent("v-list-item-title");
const _component_v_list_item = vue.resolveComponent("v-list-item");
const _component_v_virtual_scroll = vue.resolveComponent("v-virtual-scroll");
const _component_v_list = vue.resolveComponent("v-list");
const _component_dispatch_renderer = vue.resolveComponent("dispatch-renderer");
const _component_v_container = vue.resolveComponent("v-container");
return _ctx.control.visible ? (vue.openBlock(), vue.createBlock(_component_v_container, {
key: 0,
"fill-height": "",
class: vue.normalizeClass(_ctx.styles.listWithDetail.root)
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_v_row, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_v_col, { class: "pa-0" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_v_toolbar, {
flat: "",
class: vue.normalizeClass(_ctx.styles.listWithDetail.toolbar)
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_v_toolbar_title, {
class: vue.normalizeClass(_ctx.styles.listWithDetail.label)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.computedLabel), 1)
]),
_: 1
}, 8, ["class"]),
vue.createVNode(_component_v_spacer),
_ctx.control.childErrors.length > 0 ? (vue.openBlock(), vue.createBlock(_component_validation_icon, {
key: 0,
errors: _ctx.control.childErrors
}, null, 8, ["errors"])) : vue.createCommentVNode("", true),
vue.createVNode(_component_v_tooltip, { bottom: "" }, {
activator: vue.withCtx(({ props }) => [
vue.createVNode(_component_v_btn, vue.mergeProps({
icon: "",
variant: "text",
elevation: "0",
small: "",
"aria-label": _ctx.control.translations.addAriaLabel
}, props, {
class: _ctx.styles.listWithDetail.addButton,
onClick: _ctx.addButtonClick,
disabled: !_ctx.control.enabled || _ctx.appliedOptions.restrict && _ctx.arraySchema !== void 0 && _ctx.arraySchema.maxItems !== void 0 && _ctx.dataLength >= _ctx.arraySchema.maxItems
}), {
default: vue.withCtx(() => [
vue.createVNode(_component_v_icon, null, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.icons.current.value.itemAdd), 1)
]),
_: 1
})
]),
_: 2
}, 1040, ["aria-label", "class", "onClick", "disabled"])
]),
default: vue.withCtx(() => [
vue.createTextVNode(" " + vue.toDisplayString(_ctx.control.translations.addTooltip), 1)
]),
_: 1
})
]),
_: 1
}, 8, ["class"])
]),
_: 1
})
]),
_: 1
}),
_ctx.dataLength === 0 ? (vue.openBlock(), vue.createBlock(_component_v_row, {
key: 0,
class: vue.normalizeClass(_ctx.styles.listWithDetail.noData)
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_v_col, null, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.control.translations.noDataMessage), 1)
]),
_: 1
})
]),
_: 1
}, 8, ["class"])) : (vue.openBlock(), vue.createBlock(_component_v_row, { key: 1 }, {
default: vue.withCtx(() => [
vue.createVNode(_component_v_col, { class: "flex-shrink-1 flex-grow-0 pa-0" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_v_list, {
selected: _ctx.selectedIndex,
"onUpdate:selected": _cache[0] || (_cache[0] = ($event) => _ctx.selectedIndex = $event)
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_v_virtual_scroll, {
items: _ctx.control.data,
"item-height": 64,
"min-height": `${4 * 64}`,
"max-height": `${6 * 64}`,
"min-width": _ctx.appliedOptions.showSortButtons ? 350 : 250,
"max-width": "350"
}, {
default: vue.withCtx(({ index }) => [
vue.createVNode(_component_v_list_item, {
dense: "",
value: index,
class: vue.normalizeClass(_ctx.styles.listWithDetail.item)
}, {
prepend: vue.withCtx(({ isSelected }) => [
vue.createVNode(_component_validation_badge, {
overlap: "",
bordered: "",
errors: _ctx.childErrors(index),
style: { "margin-right": "8px" }
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_v_avatar, {
size: "40",
"aria-label": "Index",
color: isSelected ? "primary" : void 0
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", null, vue.toDisplayString(index + 1), 1)
]),
_: 2
}, 1032, ["color"])
]),
_: 2
}, 1032, ["errors"])
]),
append: vue.withCtx(() => [
_ctx.appliedOptions.showSortButtons ? (vue.openBlock(), vue.createBlock(_component_v_tooltip, {
key: 0,
bottom: ""
}, {
activator: vue.withCtx(({ props }) => [
vue.createVNode(_component_v_btn, vue.mergeProps(props, {
icon: "",
variant: "text",
elevation: "0",
small: "",
class: ["ma-0", _ctx.styles.listWithDetail.itemMoveUp],
"aria-label": _ctx.control.translations.upAriaLabel,
disabled: index <= 0 || !_ctx.control.enabled,
onClick: ($event) => _ctx.moveUpClick($event, index)
}), {
default: vue.withCtx(() => [
vue.createVNode(_component_v_icon, { class: "notranslate" }, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.icons.current.value.itemMoveUp), 1)
]),
_: 1
})
]),
_: 2
}, 1040, ["aria-label", "disabled", "class", "onClick"])
]),
default: vue.withCtx(() => [
vue.createTextVNode(" " + vue.toDisplayString(_ctx.control.translations.up), 1)
]),
_: 2
}, 1024)) : vue.createCommentVNode("", true),
_ctx.appliedOptions.showSortButtons ? (vue.openBlock(), vue.createBlock(_component_v_tooltip, {
key: 1,
bottom: ""
}, {
activator: vue.withCtx(({ props }) => [
vue.createVNode(_component_v_btn, vue.mergeProps(props, {
icon: "",
variant: "text",
elevation: "0",
small: "",
class: ["ma-0", _ctx.styles.listWithDetail.itemMoveDown],
"aria-label": _ctx.control.translations.downAriaLabel,
disabled: index >= _ctx.dataLength - 1 || !_ctx.control.enabled,
onClick: ($event) => _ctx.moveDownClick($event, index)
}), {
default: vue.withCtx(() => [
vue.createVNode(_component_v_icon, { class: "notranslate" }, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.icons.current.value.itemMoveDown), 1)
]),
_: 1
})
]),
_: 2
}, 1040, ["aria-label", "disabled", "class", "onClick"])
]),
default: vue.withCtx(() => [
vue.createTextVNode(" " + vue.toDisplayString(_ctx.control.translations.down), 1)
]),
_: 2
}, 1024)) : vue.createCommentVNode("", true),
vue.createVNode(_component_v_tooltip, { bottom: "" }, {
activator: vue.withCtx(({ props }) => [
vue.createVNode(_component_v_btn, vue.mergeProps(props, {
icon: "",
variant: "text",
elevation: "0",
s