@bpmn-io/form-js-playground 1.7.2 → 1.7.3

package/LICENSE

@@ -1,23 +1,23 @@
-Copyright (c) 2021-present Camunda Services GmbH
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in the
-Software without restriction, including without limitation the rights to use, copy,
-modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
-and to permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-The source code responsible for displaying the bpmn.io project watermark that
-links back to https://bpmn.io as part of rendered diagrams MUST NOT be
-removed or changed. When this software is being used in a website or application,
-the watermark must stay fully visible and not visually overlapped by other elements.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+Copyright (c) 2021-present Camunda Services GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The source code responsible for displaying the bpmn.io project watermark that
+links back to https://bpmn.io as part of rendered diagrams MUST NOT be
+removed or changed. When this software is being used in a website or application,
+the watermark must stay fully visible and not visually overlapped by other elements.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
 OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/assets/form-js-playground.css

@@ -1,260 +1,260 @@
-/**
- * file-drop.css
- */
-.drop-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-
-  padding: 50px;
-
-  background: rgba(255, 255, 255, .9);
-
-  z-index: 1000;
-}
-
-.drop-overlay .box {
-  text-align: center;
-  border: dashed 4px #CCC;
-  height: 100%;
-  width: 100%;
-  display: table;
-}
-
-.drop-overlay .label {
-  font-size: 26px;
-  color: #888;
-  margin: auto;
-
-  display: table-cell;
-  vertical-align: middle;
-}
-.fjs-pgl-root {
-  --color-button-hover: var(--color-grey-225-10-95);
-
-  --color-section-border: var(--color-grey-225-10-55);
-  --color-section-header-background: var(--color-grey-225-10-95);
-  --color-section-header-border-bottom: var(--color-grey-225-10-75);
-
-  --color-palette-container-background: var(--color-grey-225-10-97);
-  --color-palette-container-border: var(--color-grey-225-10-80);
-
-  --color-properties-container-background: var(--color-white);
-
-  --color-text: var(--color-grey-225-10-15);
-
-  --font-family: 'IBM Plex Sans', sans-serif;
-  --font-family-monospace: 'IBM Plex Mono', monospace;
-
-  --modal-zindex: 100;
-}
-
-.fjs-pgl-root {
-  width: 100%;
-  height: 100%;
-
-  position: relative;
-  display: flex;
-
-  font-family: var(--font-family);
-}
-
-.fjs-pgl-main {
-  width: calc(100% - 450px);
-  height: 100%;
-
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 70% 30%;
-}
-
-/**
- * Palette
- */
-.fjs-pgl-palette-container {
-  height: 100%;
-  background-color: var(--color-palette-container-background);
-  border-right: solid 1px var(--color-palette-container-border);
-  overflow-y: auto;
-  flex-shrink: 0;
-}
-
-.fjs-pgl-palette-container .fjs-palette-container {
-  height: 100%;
-  border-right: none;
-}
-
-/**
- * Properties Panel
- */
-.fjs-pgl-properties-container {
-  position: relative;
-  display: flex;
-  height: 100%;
-  width: 250px;
-  overflow-y: auto;
-  background-color: var(--color-properties-container-background);
-}
-
-.fjs-pgl-properties-container .fjs-properties-container {
-  --properties-panel-width: 250px;
-}
-
-.fjs-pgl-properties-container .bio-properties-panel {
-  --font-family: var(--font-family);
-}
-
-/**
- * Section
- */
-.fjs-pgl-section {
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
-}
-
-.fjs-pgl-section:nth-child(1),
-.fjs-pgl-section:nth-child(2) {
-  border-bottom: double 3px var(--color-section-border);
-}
-
-.fjs-pgl-section:nth-child(1),
-.fjs-pgl-section:nth-child(3) {
-  border-right: double 3px var(--color-section-border);
-}
-
-.fjs-pgl-section .header {
-  background: var(--color-section-header-background);
-  font-size: 1rem;
-  margin: 0;
-  line-height: 2em;
-  padding: .2em .5em;
-  border-bottom: solid 1px var(--color-section-header-border-bottom);
-}
-
-.fjs-pgl-section .header-items {
-  float: right;
-}
-
-.fjs-pgl-section .body {
-  flex: 1;
-  overflow: hidden;
-}
-
-.fjs-pgl-modal {
-  z-index: var(--modal-zindex);
-}
-
-.fjs-pgl-modal .fjs-pgl-modal-backdrop {
-  background: rgba(0 0 0 / .5);
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: var(--modal-zindex);
-}
-
-.fjs-pgl-modal-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  max-width: 100%;
-  width: 500px;
-  overflow-y: auto;
-  max-height: 80%;
-  transform: translate(-40%, -50%);
-  z-index: var(--modal-zindex);
-
-  font-size: 14px;
-
-  padding: 20px;
-
-  background: var(--color-white);
-}
-
-.fjs-pgl-modal-content textarea {
-  width: 100%;
-  height: 300px;
-  overflow: auto;
-}
-
-.fjs-pgl-modal-footer {
-  margin-top: 20px;
-
-  text-align: right;
-}
-
-.fjs-pgl-form-container {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-.fjs-pgl-form-container .fjs-container .cds--grid .cds--row {
-  margin-left: -1rem;
-  margin-right: -1rem;
-}
-
-.fjs-pgl-form-container .fjs-form-editor {
-  width: 100%;
-}
-
-.fjs-pgl-text-container {
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  border-radius: 0;
-  position: relative;
-}
-
-.fjs-pgl-text-container > .cm-editor {
-  font-size: .9em;
-  height: 100%;
-  position: absolute !important;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.fjs-pgl-text-container > .cm-editor > .cm-scroller {
-  font-family: var(--font-family-monospace);
-  overflow: auto !important;
-}
-
-.fjs-pgl-form-container > .fjs-container {
-  overflow: auto;
-}
-
-.fjs-pgl-button {
-  color: var(--color-text);
-  background-color: var(--color-white);
-
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3px;
-
-  font-family: var(--font-family);
-}
-
-.fjs-pgl-button-default {
-  padding: 7px 10px;
-}
-
-.fjs-pgl-button:hover {
-  background-color: var(--color-button-hover);
-}
-
-.fjs-pgl-button + .fjs-pgl-button {
-  margin-left: 1em;
-}
-
-.fjs-pgl-parent {
-  width: 100%;
-  height: 100%;
-}
+/**
+ * file-drop.css
+ */
+.drop-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  padding: 50px;
+
+  background: rgba(255, 255, 255, .9);
+
+  z-index: 1000;
+}
+
+.drop-overlay .box {
+  text-align: center;
+  border: dashed 4px #CCC;
+  height: 100%;
+  width: 100%;
+  display: table;
+}
+
+.drop-overlay .label {
+  font-size: 26px;
+  color: #888;
+  margin: auto;
+
+  display: table-cell;
+  vertical-align: middle;
+}
+.fjs-pgl-root {
+  --color-button-hover: var(--color-grey-225-10-95);
+
+  --color-section-border: var(--color-grey-225-10-55);
+  --color-section-header-background: var(--color-grey-225-10-95);
+  --color-section-header-border-bottom: var(--color-grey-225-10-75);
+
+  --color-palette-container-background: var(--color-grey-225-10-97);
+  --color-palette-container-border: var(--color-grey-225-10-80);
+
+  --color-properties-container-background: var(--color-white);
+
+  --color-text: var(--color-grey-225-10-15);
+
+  --font-family: 'IBM Plex Sans', sans-serif;
+  --font-family-monospace: 'IBM Plex Mono', monospace;
+
+  --modal-zindex: 100;
+}
+
+.fjs-pgl-root {
+  width: 100%;
+  height: 100%;
+
+  position: relative;
+  display: flex;
+
+  font-family: var(--font-family);
+}
+
+.fjs-pgl-main {
+  width: calc(100% - 450px);
+  height: 100%;
+
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 70% 30%;
+}
+
+/**
+ * Palette
+ */
+.fjs-pgl-palette-container {
+  height: 100%;
+  background-color: var(--color-palette-container-background);
+  border-right: solid 1px var(--color-palette-container-border);
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.fjs-pgl-palette-container .fjs-palette-container {
+  height: 100%;
+  border-right: none;
+}
+
+/**
+ * Properties Panel
+ */
+.fjs-pgl-properties-container {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 250px;
+  overflow-y: auto;
+  background-color: var(--color-properties-container-background);
+}
+
+.fjs-pgl-properties-container .fjs-properties-container {
+  --properties-panel-width: 250px;
+}
+
+.fjs-pgl-properties-container .bio-properties-panel {
+  --font-family: var(--font-family);
+}
+
+/**
+ * Section
+ */
+.fjs-pgl-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+}
+
+.fjs-pgl-section:nth-child(1),
+.fjs-pgl-section:nth-child(2) {
+  border-bottom: double 3px var(--color-section-border);
+}
+
+.fjs-pgl-section:nth-child(1),
+.fjs-pgl-section:nth-child(3) {
+  border-right: double 3px var(--color-section-border);
+}
+
+.fjs-pgl-section .header {
+  background: var(--color-section-header-background);
+  font-size: 1rem;
+  margin: 0;
+  line-height: 2em;
+  padding: .2em .5em;
+  border-bottom: solid 1px var(--color-section-header-border-bottom);
+}
+
+.fjs-pgl-section .header-items {
+  float: right;
+}
+
+.fjs-pgl-section .body {
+  flex: 1;
+  overflow: hidden;
+}
+
+.fjs-pgl-modal {
+  z-index: var(--modal-zindex);
+}
+
+.fjs-pgl-modal .fjs-pgl-modal-backdrop {
+  background: rgba(0 0 0 / .5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: var(--modal-zindex);
+}
+
+.fjs-pgl-modal-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 100%;
+  width: 500px;
+  overflow-y: auto;
+  max-height: 80%;
+  transform: translate(-40%, -50%);
+  z-index: var(--modal-zindex);
+
+  font-size: 14px;
+
+  padding: 20px;
+
+  background: var(--color-white);
+}
+
+.fjs-pgl-modal-content textarea {
+  width: 100%;
+  height: 300px;
+  overflow: auto;
+}
+
+.fjs-pgl-modal-footer {
+  margin-top: 20px;
+
+  text-align: right;
+}
+
+.fjs-pgl-form-container {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.fjs-pgl-form-container .fjs-container .cds--grid .cds--row {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
+.fjs-pgl-form-container .fjs-form-editor {
+  width: 100%;
+}
+
+.fjs-pgl-text-container {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 0;
+  position: relative;
+}
+
+.fjs-pgl-text-container > .cm-editor {
+  font-size: .9em;
+  height: 100%;
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.fjs-pgl-text-container > .cm-editor > .cm-scroller {
+  font-family: var(--font-family-monospace);
+  overflow: auto !important;
+}
+
+.fjs-pgl-form-container > .fjs-container {
+  overflow: auto;
+}
+
+.fjs-pgl-button {
+  color: var(--color-text);
+  background-color: var(--color-white);
+
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+
+  font-family: var(--font-family);
+}
+
+.fjs-pgl-button-default {
+  padding: 7px 10px;
+}
+
+.fjs-pgl-button:hover {
+  background-color: var(--color-button-hover);
+}
+
+.fjs-pgl-button + .fjs-pgl-button {
+  margin-left: 1em;
+}
+
+.fjs-pgl-parent {
+  width: 100%;
+  height: 100%;
+}
 

package/dist/form-playground.umd.js

@@ -59522,9 +59522,9 @@
       };
       const parentExpressionContextInfo = F$1(LocalExpressionContext);
       return e(d$1, {
-        children: displayValues.map((value, index) => e(RepetitionScaffold, {
-          index: index,
-          value: value,
+        children: displayValues.map((itemValue, itemIndex) => e(RepetitionScaffold, {
+          itemIndex: itemIndex,
+          itemValue: itemValue,
           parentExpressionContextInfo: parentExpressionContextInfo,
           repeaterField: repeaterField,
           RowsRenderer: RowsRenderer,
@@ -59532,7 +59532,7 @@
           onDeleteItem: onDeleteItem,
           showRemove: showRemove,
           ...restProps
-        }, index))
+        }, itemIndex))
       });
     }
     RepeatFooter(props) {
@@ -59629,8 +59629,8 @@
    * Individual repetition of a repeated field and context scaffolding.
    *
    * @param {Object} props
-   * @param {number} props.index
-   * @param {Object} props.value
+   * @param {number} props.itemIndex
+   * @param {Object} props.itemValue
    * @param {Object} props.parentExpressionContextInfo
    * @param {Object} props.repeaterField
    * @param {Function} props.RowsRenderer
@@ -59641,8 +59641,8 @@
 
   const RepetitionScaffold = props => {
     const {
-      index,
-      value,
+      itemIndex,
+      itemValue,
       parentExpressionContextInfo,
       repeaterField,
       RowsRenderer,
@@ -59655,15 +59655,15 @@
       ...restProps,
       indexes: {
         ...(indexes || {}),
-        [repeaterField.id]: index
+        [repeaterField.id]: itemIndex
       }
-    }), [index, indexes, repeaterField.id, restProps]);
+    }), [itemIndex, indexes, repeaterField.id, restProps]);
     const localExpressionContextInfo = d(() => ({
       data: parentExpressionContextInfo.data,
-      this: value,
+      this: itemValue,
       parent: buildExpressionContext(parentExpressionContextInfo),
-      i: [...parentExpressionContextInfo.i, index + 1]
-    }), [index, parentExpressionContextInfo, value]);
+      i: [...parentExpressionContextInfo.i, itemIndex + 1]
+    }), [itemIndex, parentExpressionContextInfo, itemValue]);
     return !showRemove ? e(LocalExpressionContext.Provider, {
       value: localExpressionContextInfo,
       children: e(RowsRenderer, {
@@ -59682,8 +59682,8 @@
       }), e("button", {
         type: "button",
         class: "fjs-repeat-row-remove",
-        "aria-label": `Remove list item ${index + 1}`,
-        onClick: () => onDeleteItem(index),
+        "aria-label": `Remove list item ${itemIndex + 1}`,
+        onClick: () => onDeleteItem(itemIndex),
         children: e("div", {
           class: "fjs-repeat-row-remove-icon-container",
           children: e(DeleteSvg, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-playground",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "A form-js playground",
   "files": [
     "dist"
@@ -44,8 +44,8 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js-editor": "^1.7.2",
-    "@bpmn-io/form-js-viewer": "^1.7.2",
+    "@bpmn-io/form-js-editor": "^1.7.3",
+    "@bpmn-io/form-js-viewer": "^1.7.3",
     "@codemirror/autocomplete": "^6.12.0",
     "@codemirror/commands": "^6.1.2",
     "@codemirror/lang-json": "^6.0.1",
@@ -70,5 +70,5 @@
     "rollup-plugin-css-only": "^4.0.0",
     "style-loader": "^3.3.0"
   },
-  "gitHead": "bcedc83096d7db0d89d64b1d6c0faf776d133dab"
+  "gitHead": "495efb051b4ff6a8f8abebedd035a95651345f9f"
 }