@bpmn-io/form-js-playground 0.9.6 → 0.9.7

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

@@ -1,36 +1,4 @@
-/**
- * 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 {
+.fjs-pgl-root {
   --color-button-hover: var(--color-grey-225-10-95);
 
   --color-section-border: var(--color-grey-225-10-55);
@@ -257,3 +225,36 @@
   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;
+}

package/dist/form-playground.umd.js

@@ -11250,7 +11250,7 @@ meta:   meta$1,/// [Metadata](#highlight.tags.meta) that applies to the entire
    * @returns {Object}
    */function updateKey(properties,oldKey,newKey){return Object.entries(properties).reduce((newProperties,entry)=>{const[key,value]=entry;return {...newProperties,[key===oldKey?newKey:key]:value};},{});}const VALUES_SOURCES={STATIC:'static',INPUT:'input'};const VALUES_SOURCE_DEFAULT=VALUES_SOURCES.STATIC;const VALUES_SOURCES_LABELS={[VALUES_SOURCES.STATIC]:'Static',[VALUES_SOURCES.INPUT]:'Input data'};const VALUES_SOURCES_PATHS={[VALUES_SOURCES.STATIC]:['values'],[VALUES_SOURCES.INPUT]:['valuesKey']};const VALUES_SOURCES_DEFAULTS={[VALUES_SOURCES.STATIC]:[],[VALUES_SOURCES.INPUT]:''};// helpers ///////////////////
   function getValuesSource(field){for(const source of Object.values(VALUES_SOURCES)){if(get(field,VALUES_SOURCES_PATHS[source])!==undefined){return source;}}return VALUES_SOURCE_DEFAULT;}function ValuesSourceSelectEntry(props){const{editField,field,id}=props;return [{id:id+'-select',component:ValuesSourceSelect,isEdited:isEdited$4,editField,field}];}function ValuesSourceSelect(props){const{editField,field,id}=props;const getValue=getValuesSource;const setValue=value=>{let newField=field;const newProperties={};Object.values(VALUES_SOURCES).forEach(source=>{// Clear all values source definitions and default the newly selected one
-  const newValue=value===source?VALUES_SOURCES_DEFAULTS[source]:undefined;newProperties[VALUES_SOURCES_PATHS[source]]=newValue;});newField=editField(field,newProperties);return newField;};const getValuesSourceOptions=()=>{return Object.values(VALUES_SOURCES).map(valueSource=>({label:VALUES_SOURCES_LABELS[valueSource],value:valueSource}));};return SelectEntry({label:'Type',element:field,getOptions:getValuesSourceOptions,getValue,id,setValue});}function InputKeyValuesSourceEntry(props){const{editField,field,id}=props;return [{id:id+'-key',component:InputValuesKey,label:'Input values key',description:'Define which input property to populate the values from',isEdited:isEdited$1,editField,field}];}function InputValuesKey(props){const{editField,field,id,label,description}=props;const debounce=useService('debounce');const path=VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];const getValue=()=>get(field,path,'');const setValue=value=>editField(field,path,value||'');return TextfieldEntry({debounce,description,element:field,getValue,id,label,setValue});}function StaticValuesSourceEntry(props){const{editField,field,id:idPrefix}=props;const{values}=field;const addEntry=e=>{e.stopPropagation();const index=values.length+1;const entry={label:`Value ${index}`,value:`value${index}`};editField(field,VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC],arrayAdd(values,values.length,entry));};const removeEntry=entry=>{editField(field,VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC],without(values,entry));};const validateFactory=key=>{return value=>{if(value===key){return;}if(isUndefined(value)||!value.length){return 'Must not be empty.';}const isValueAssigned=values.find(entry=>entry.value===value);if(isValueAssigned){return 'Must be unique.';}};};const items=values.map((entry,index)=>{const id=idPrefix+'-'+index;return {id,label:entry.label,entries:ValueEntry({editField,field,idPrefix:id,index,validateFactory}),autoFocusEntry:id+'-label',remove:()=>removeEntry(entry)};});return {items,add:addEntry};}function GeneralGroup(field,editField){const entries=[...IdEntry({field,editField}),...LabelEntry({field,editField}),...DescriptionEntry({field,editField}),...KeyEntry({field,editField}),...DefaultOptionEntry({field,editField}),...ActionEntry({field,editField}),...ColumnsEntry({field,editField}),...TextEntry({field,editField}),...DisabledEntry({field,editField})];return {id:'general',label:'General',entries};}function ValidationGroup(field,editField){const{type}=field;if(!(INPUTS.includes(type)&&type!=='checkbox'&&type!=='checklist'&&type!=='taglist')){return null;}const onChange=key=>{return value=>{const validate=get(field,['validate'],{});editField(field,['validate'],set(validate,[key],value));};};const getValue=key=>{return ()=>{return get(field,['validate',key]);};};let entries=[{id:'required',component:Required,getValue,field,isEdited:isEdited$7,onChange}];if(type==='textfield'){entries.push({id:'minLength',component:MinLength,getValue,field,isEdited:isEdited$5,onChange},{id:'maxLength',component:MaxLength,getValue,field,isEdited:isEdited$5,onChange},{id:'pattern',component:Pattern,getValue,field,isEdited:isEdited$1,onChange});}if(type==='number'){entries.push({id:'min',component:Min,getValue,field,isEdited:isEdited$5,onChange},{id:'max',component:Max,getValue,field,isEdited:isEdited$5,onChange});}return {id:'validation',label:'Validation',entries};}function Required(props){const{field,getValue,id,onChange}=props;return CheckboxEntry({element:field,getValue:getValue('required'),id,label:'Required',setValue:onChange('required')});}function MinLength(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('minLength'),id,label:'Minimum length',min:0,setValue:onChange('minLength')});}function MaxLength(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('maxLength'),id,label:'Maximum length',min:0,setValue:onChange('maxLength')});}function Pattern(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return TextfieldEntry({debounce,element:field,getValue:getValue('pattern'),id,label:'Regular expression pattern',setValue:onChange('pattern')});}function Min(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('min'),id,label:'Minimum',min:0,setValue:onChange('min')});}function Max(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('max'),id,label:'Maximum',min:0,setValue:onChange('max')});}function ValuesGroups(field,editField){const{type,id:fieldId}=field;if(!VALUES_INPUTS.includes(type)){return [];}const context={editField,field};const valuesSourceId=`${fieldId}-valuesSource`;/**
+  const newValue=value===source?VALUES_SOURCES_DEFAULTS[source]:undefined;newProperties[VALUES_SOURCES_PATHS[source]]=newValue;});newField=editField(field,newProperties);return newField;};const getValuesSourceOptions=()=>{return Object.values(VALUES_SOURCES).map(valueSource=>({label:VALUES_SOURCES_LABELS[valueSource],value:valueSource}));};return SelectEntry({label:'Type',element:field,getOptions:getValuesSourceOptions,getValue,id,setValue});}function InputKeyValuesSourceEntry(props){const{editField,field,id}=props;return [{id:id+'-key',component:InputValuesKey,label:'Input values key',description:'Define which input property to populate the values from',isEdited:isEdited$1,editField,field}];}function InputValuesKey(props){const{editField,field,id,label,description}=props;const debounce=useService('debounce');const path=VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];const getValue=()=>get(field,path,'');const setValue=value=>editField(field,path,value||'');return TextfieldEntry({debounce,description,element:field,getValue,id,label,setValue});}function StaticValuesSourceEntry(props){const{editField,field,id:idPrefix}=props;const{values}=field;const addEntry=e=>{e.stopPropagation();const index=values.length+1;const entry={label:`Value ${index}`,value:`value${index}`};editField(field,VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC],arrayAdd(values,values.length,entry));};const removeEntry=entry=>{editField(field,VALUES_SOURCES_PATHS[VALUES_SOURCES.STATIC],without(values,entry));};const validateFactory=key=>{return value=>{if(value===key){return;}if(isUndefined(value)||!value.length){return 'Must not be empty.';}const isValueAssigned=values.find(entry=>entry.value===value);if(isValueAssigned){return 'Must be unique.';}};};const items=values.map((entry,index)=>{const id=idPrefix+'-'+index;return {id,label:entry.label,entries:ValueEntry({editField,field,idPrefix:id,index,validateFactory}),autoFocusEntry:id+'-label',remove:()=>removeEntry(entry)};});return {items,add:addEntry,shouldSort:false};}function GeneralGroup(field,editField){const entries=[...IdEntry({field,editField}),...LabelEntry({field,editField}),...DescriptionEntry({field,editField}),...KeyEntry({field,editField}),...DefaultOptionEntry({field,editField}),...ActionEntry({field,editField}),...ColumnsEntry({field,editField}),...TextEntry({field,editField}),...DisabledEntry({field,editField})];return {id:'general',label:'General',entries};}function ValidationGroup(field,editField){const{type}=field;if(!(INPUTS.includes(type)&&type!=='checkbox'&&type!=='checklist'&&type!=='taglist')){return null;}const onChange=key=>{return value=>{const validate=get(field,['validate'],{});editField(field,['validate'],set(validate,[key],value));};};const getValue=key=>{return ()=>{return get(field,['validate',key]);};};let entries=[{id:'required',component:Required,getValue,field,isEdited:isEdited$7,onChange}];if(type==='textfield'){entries.push({id:'minLength',component:MinLength,getValue,field,isEdited:isEdited$5,onChange},{id:'maxLength',component:MaxLength,getValue,field,isEdited:isEdited$5,onChange},{id:'pattern',component:Pattern,getValue,field,isEdited:isEdited$1,onChange});}if(type==='number'){entries.push({id:'min',component:Min,getValue,field,isEdited:isEdited$5,onChange},{id:'max',component:Max,getValue,field,isEdited:isEdited$5,onChange});}return {id:'validation',label:'Validation',entries};}function Required(props){const{field,getValue,id,onChange}=props;return CheckboxEntry({element:field,getValue:getValue('required'),id,label:'Required',setValue:onChange('required')});}function MinLength(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('minLength'),id,label:'Minimum length',min:0,setValue:onChange('minLength')});}function MaxLength(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('maxLength'),id,label:'Maximum length',min:0,setValue:onChange('maxLength')});}function Pattern(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return TextfieldEntry({debounce,element:field,getValue:getValue('pattern'),id,label:'Regular expression pattern',setValue:onChange('pattern')});}function Min(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('min'),id,label:'Minimum',min:0,setValue:onChange('min')});}function Max(props){const{field,getValue,id,onChange}=props;const debounce=useService('debounce');return NumberFieldEntry({debounce,element:field,getValue:getValue('max'),id,label:'Maximum',min:0,setValue:onChange('max')});}function ValuesGroups(field,editField){const{type,id:fieldId}=field;if(!VALUES_INPUTS.includes(type)){return [];}const context={editField,field};const valuesSourceId=`${fieldId}-valuesSource`;/**
      * @type {Array<Group|ListGroup>}
      */const groups=[{id:valuesSourceId,label:'Options source',component:Group,entries:ValuesSourceSelectEntry({...context,id:valuesSourceId})}];const valuesSource=getValuesSource(field);if(valuesSource===VALUES_SOURCES.INPUT){const dynamicValuesId=`${fieldId}-dynamicValues`;groups.push({id:dynamicValuesId,label:'Dynamic options',component:Group,entries:InputKeyValuesSourceEntry({...context,id:dynamicValuesId})});}else if(valuesSource===VALUES_SOURCES.STATIC){const staticValuesId=`${fieldId}-staticValues`;groups.push({id:staticValuesId,label:'Static options',component:ListGroup,...StaticValuesSourceEntry({...context,id:staticValuesId})});}return groups;}function CustomValuesGroup(field,editField){const{properties={},type}=field;if(type==='default'){return null;}const addEntry=event=>{event.stopPropagation();const index=Object.keys(properties).length+1;const key=`key${index}`,value='value';editField(field,['properties'],{...properties,[key]:value});};const validateFactory=key=>{return value=>{if(value===key){return;}if(isUndefined(value)||!value.length){return 'Must not be empty.';}if(has(properties,value)){return 'Must be unique.';}};};const items=Object.keys(properties).map((key,index)=>{const removeEntry=event=>{event.stopPropagation();return editField(field,['properties'],removeKey(properties,key));};const id=`${field.id}-property-${index}`;return {autoFocusEntry:id+'-key',entries:CustomValueEntry({editField,field,idPrefix:id,index,validateFactory}),id,label:key||'',remove:removeEntry};});return {add:addEntry,component:ListGroup,id:'custom-values',items,label:'Custom properties',shouldSort:false};}// helpers //////////
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmn-io/form-js-playground",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "A form-js playground",
   "files": [
     "dist"
@@ -44,8 +44,8 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js-editor": "^0.9.6",
-    "@bpmn-io/form-js-viewer": "^0.9.5",
+    "@bpmn-io/form-js-editor": "^0.9.7",
+    "@bpmn-io/form-js-viewer": "^0.9.7",
     "@codemirror/lang-json": "^6.0.0",
     "@codemirror/state": "^6.1.1",
     "@codemirror/view": "^6.2.0",
@@ -66,5 +66,5 @@
     "rollup-plugin-css-only": "^3.1.0",
     "style-loader": "^3.3.0"
   },
-  "gitHead": "1e89b2d67898d6839ddf4312b561c1797c4d161e"
+  "gitHead": "1a03c0cf4e21c658387d9f7f52887dd8e0ffc925"
 }