Skip to content

Commit

Permalink
Merge branch 'release-2025-winter' into bugfix/FOUR-19579
Browse files Browse the repository at this point in the history
pmPaulis authored Jan 30, 2025
2 parents fa7b555 + 779d69e commit 28c1404
Showing 5 changed files with 58 additions and 19 deletions.
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@processmaker/screen-builder",
"version": "3.0.7",
"version": "3.1.0",
"scripts": {
"dev": "VITE_COVERAGE=true vite",
"build": "vite build",
@@ -57,7 +57,7 @@
"@fortawesome/fontawesome-free": "^5.6.1",
"@originjs/vite-plugin-commonjs": "^1.0.3",
"@panter/vue-i18next": "^0.15.2",
"@processmaker/vue-form-elements": "0.61.2",
"@processmaker/vue-form-elements": "0.62.0",
"@processmaker/vue-multiselect": "2.3.0",
"@storybook/addon-essentials": "^7.6.13",
"@storybook/addon-interactions": "^7.6.13",
@@ -116,7 +116,7 @@
},
"peerDependencies": {
"@panter/vue-i18next": "^0.15.0",
"@processmaker/vue-form-elements": "0.61.2",
"@processmaker/vue-form-elements": "0.62.0",
"i18next": "^15.0.8",
"vue": "^2.6.12",
"vuex": "^3.1.1"
15 changes: 14 additions & 1 deletion src/components/inspector/collection-select-list.vue
Original file line number Diff line number Diff line change
@@ -31,6 +31,16 @@
/>
</div>

<div v-if="fields.length > 1 && renderAs === 'checkbox'" class="mt-3">
<label for="aria-label">{{ $t("Aria Label") }}</label>
<b-form-select
id="aria-label"
v-model="ariaLabelField"
:options="fields"
data-cy="inspector-collection-aria-label"
/>
</div>

<div v-if="fields.length > 1" class="mt-3">
<pmql-input
v-model="pmql"
@@ -72,6 +82,7 @@ const CONFIG_FIELDS = [
"collectionId",
"labelField",
"valueField",
"ariaLabelField",
"pmql",
"unique"
];
@@ -81,14 +92,15 @@ export default {
MustacheHelper,
ScreenVariableSelector
},
props: ["value"],
props: ["value", "renderAs"],
data() {
return {
collections: [],
fields: [],
collectionId: null,
labelField: null,
valueField: null,
ariaLabelField: null,
pmql: "",
unique: false
};
@@ -137,6 +149,7 @@ export default {
resetFields() {
this.labelField = null;
this.valueField = null;
this.ariaLabelField = null;
},
getCollections() {
this.$dataProvider.getCollections().then((response) => {
32 changes: 29 additions & 3 deletions src/components/inspector/options-list.vue
Original file line number Diff line number Diff line change
@@ -28,6 +28,9 @@
</div>
<label class="mt-3" for="option-content">{{ $t('Content') }}</label>
<b-form-input id="option-content" v-model="optionContent" data-cy="inspector-option-content" />

<label v-if="renderAs === 'checkbox'" class="mt-3" for="option-aria-label">{{ $t('Aria Label') }}</label>
<b-form-input v-if="renderAs === 'checkbox'" id="option-aria-label" v-model="optionAriaLabel" data-cy="inspector-option-aria-label" />
</div>

<div class="card-footer text-right p-2">
@@ -74,6 +77,9 @@
</div>
<label class="mt-3" for="option-content">{{ $t('Content') }}</label>
<b-form-input id="option-content" v-model="optionContent" data-cy="inspector-option-content" />

<label v-if="renderAs === 'checkbox'" class="mt-3" for="option-aria-label">{{ $t('Aria Label') }}</label>
<b-form-input v-if="renderAs === 'checkbox'" id="option-aria-label" v-model="optionAriaLabel" data-cy="inspector-option-aria-label" />
</div>

<div class="card-footer text-right p-2">
@@ -131,7 +137,7 @@
</div>

<div v-if="dataSource === dataSourceValues.collection">
<collection-select-list v-model="collectionOptions"></collection-select-list>
<collection-select-list v-model="collectionOptions" :renderAs="renderAs"></collection-select-list>
</div>

<div v-if="showRenderAs">
@@ -203,12 +209,21 @@
<mustache-helper/>
<b-form-input id="value" v-model="value" @change="valueChanged" data-cy="inspector-datasource-content"/>
<small class="form-text text-muted mb-3">{{ $t('Content to display to the user in the select list.') }}</small>

<label v-if="renderAs === 'checkbox'" for="aria-label">{{ $t('Aria Label') }}</label>
<mustache-helper v-if="renderAs === 'checkbox'" />
<b-form-input v-if="renderAs === 'checkbox'" id="aria-label" v-model="optionAriaLabel" data-cy="inspector-datasource-aria-label"/>
<small v-if="renderAs === 'checkbox'" class="form-text text-muted mb-3">{{ $t('Aria label for accessibility support.') }}</small>
</div>

<div v-if="valueTypeReturned === 'single' && dataSource === dataSourceValues.dataObject">
<label for="key">{{ $t('Variable Data Property') }}</label>
<b-form-input id="key" v-model="key" @change="keyChanged" placeholder="Request Variable Property" data-cy="inspector-options-value" />
<small class="form-text text-muted mb-3">{{ $t('Enter the property name from the Request data variable that will be passed as the value when selected.') }}</small>

<label v-if="renderAs === 'checkbox'" for="aria-label">{{ $t('Aria Label') }}</label>
<b-form-input v-if="renderAs === 'checkbox'" id="aria-label" v-model="optionAriaLabel" placeholder="Aria Label Property" data-cy="inspector-options-aria-label" />
<small v-if="renderAs === 'checkbox'" class="form-text text-muted mb-3">{{ $t('Enter the property name for the aria label from the Request data variable.') }}</small>
</div>

<div v-if="dataSource === dataSourceValues.dataConnector">
@@ -287,6 +302,7 @@ export default {
removeIndex: null,
optionValue: '',
optionContent: '',
optionAriaLabel: '',
showRenderAs: false,
renderAs: 'dropdown',
allowMultiSelect: false,
@@ -413,6 +429,9 @@ export default {
valueField() {
return this.value || 'content';
},
ariaLabelField() {
return this.optionAriaLabel || 'ariaLabel';
},
currentItemToDelete() {
if (this.removeIndex !== null
&& this.optionsList.length > 0
@@ -450,6 +469,7 @@ export default {
editIndex: this.editIndex,
removeIndex: this.removeIndex,
valueTypeReturned: this.valueTypeReturned,
optionAriaLabel: this.optionAriaLabel,
};
},
},
@@ -467,6 +487,7 @@ export default {
this.selectedEndPoint = this.options.selectedEndPoint,
this.key = this.options.key;
this.value = this.options.value;
this.optionAriaLabel = this.options.optionAriaLabel;
this.pmqlQuery = this.options.pmqlQuery;
this.defaultOptionKey= this.options.defaultOptionKey;
this.selectedOptions = this.options.selectedOptions;
@@ -530,8 +551,9 @@ export default {
const that = this;
jsonList.forEach (item => {
that.optionsList.push({
[that.keyField] : item[that.keyField],
[that.valueField] : item[that.valueField],
[that.keyField]: item[that.keyField],
[that.valueField]: item[that.valueField],
[that.ariaLabelField]: item[that.ariaLabelField]
});
});
this.jsonError = '';
@@ -560,12 +582,14 @@ export default {
this.editIndex = index;
this.optionContent = this.optionsList[index][this.valueField];
this.optionValue = this.optionsList[index][this.keyField];
this.optionAriaLabel = this.optionsList[index][this.ariaLabelField];
this.optionError = '';
},
showAddOption() {
this.optionCardType = 'insert';
this.optionContent = '';
this.optionValue = '';
this.optionAriaLabel = '';
this.showOptionCard = true;
this.optionError = '';
this.editIndex = null;
@@ -582,6 +606,7 @@ export default {
{
[this.valueField]: this.optionContent,
[this.keyField]: this.optionValue,
[this.ariaLabelField]: this.optionAriaLabel,
}
);
}
@@ -592,6 +617,7 @@ export default {
}
this.optionsList[this.editIndex][this.keyField] = this.optionValue;
this.optionsList[this.editIndex][this.valueField] = this.optionContent;
this.optionsList[this.editIndex][this.ariaLabelField] = this.optionAriaLabel;
}
this.jsonData = JSON.stringify(this.optionsList);
10 changes: 5 additions & 5 deletions tests/e2e/specs/FormSelectList.spec.js
Original file line number Diff line number Diff line change
@@ -348,23 +348,23 @@ describe("Form Select List", () => {
cy.get("[data-cy=inspector-edit-json]").click();

cy.assertComponentValueAsJson('[data-cy="inspector-monaco-json"]', [
{ content: "one", value: "one" }
{ content: "one", value: "one", ariaLabel: "" }
]);

cy.setVueComponentValue(
'[data-cy="inspector-monaco-json"]',
JSON.stringify([
{ content: "one", value: "one" },
{ content: "two", value: "two" }
{ content: "one", value: "one", ariaLabel: "" },
{ content: "two", value: "two", ariaLabel: "" }
])
);
cy.get("[data-cy=inspector-monaco-json-expand]").click();
cy.setVueComponentValue(
'[data-cy="inspector-monaco-json-expanded"]',
JSON.stringify(
[
{ content: "one", value: "one" },
{ content: "two", value: "two" }
{ content: "one", value: "one", ariaLabel: "" },
{ content: "two", value: "two", ariaLabel: "" }
],
null,
2

0 comments on commit 28c1404

Please sign in to comment.