@itfin/components 1.3.21 → 1.3.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.21",
+  "version": "1.3.22",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -41,12 +41,14 @@
     "@vue/composition-api": "^1.7.1",
     "air-datepicker": "^3.3.5",
     "bootstrap": "^5.3.x",
+    "bpmn-js": "^17.0.2",
     "core-js": "^3.7.0",
     "debug": "^4.2.0",
     "intersection-observer": "^0.12.2",
     "lodash": "^4.17.20",
     "luxon": "^3.3.0",
     "pdfjs-dist": "^2.10.377",
+    "storybook-dark-mode": "^3.0.3",
     "tippy.js": "^6.3.2",
     "vue-imask": "^6.6.3",
     "vue-property-decorator": "^9.1.2",

package/src/assets/scss/_dark-theme.scss

@@ -18,6 +18,7 @@ body[data-theme="dark"] {
     background-color: $dark-input-bg;
     border-color: $dark-input-bg;
     color: $dark-body-color;
+    box-shadow: 0 2px 10px rgba(255,255,255,.05);
 
     &:focus, &:active {
       background-color: #3d3d3d;

package/src/assets/scss/main.scss

@@ -28,6 +28,7 @@
 
 .form-control {
   min-height: 2.5rem;
+  box-shadow: 0 2px 10px rgba(0,0,0,.05);
 }
 
 .color-project-tnm {

package/src/components/editor/Editor.vue

@@ -8,7 +8,7 @@
 }
 @font-face {
   font-family: "Cascadia";
-  src: url("https://unpkg.com/@excalidraw/excalidraw@undefined/dist/excalidraw-assets/Cascadia.woff2");
+  src: url("https://unpkg.com/@excalidraw/excalidraw@0.16.1/dist/excalidraw-assets/Cascadia.woff2");
 }
 .editor {
   &.readonly {
@@ -67,6 +67,7 @@ import AttachesTool from '@editorjs/attaches';
 import NestedList from '@editorjs/nested-list';
 import editorjsCodecup from './tools/highlightcode/codecup';
 import Drawing from './tools/drawing/drawing';
+import Bpmn from './tools/bpmn/bpmn';
 import cloneDeep from 'lodash/cloneDeep';
 
 export default @Component({
@@ -133,6 +134,10 @@ class itfEditor extends Vue {
           inlineToolbar: true,
           class: Drawing
         },
+        bpmn: {
+          inlineToolbar: true,
+          class: Bpmn
+        },
         // warning: Warning,
         table: {
           inlineToolbar: true,

package/src/components/editor/tools/bpmn/bpmn.js

@@ -0,0 +1,187 @@
+import './bpmn.scss';
+import cloneDeep from 'lodash/cloneDeep';
+import 'bpmn-js/dist/assets/bpmn-js.css';
+import 'bpmn-js/dist/assets/diagram-js.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+
+const icon = '<svg height="24" width="24" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="m96-593.63783v1280h1856v-1280zm1756 97.69925v1091.54297h-1372v-1091.54103l1372-.002zm-1660 .002 192-.00021v1091.54108l-192 .00021z" transform="translate(0 995.63783)"/></svg>';
+const xml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
+  '<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
+  '  <bpmn2:process id="Process_1" isExecutable="false">\n' +
+  '    <bpmn2:startEvent id="StartEvent_1"/>\n' +
+  '  </bpmn2:process>\n' +
+  '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
+  '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
+  '      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
+  '        <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>\n' +
+  '      </bpmndi:BPMNShape>\n' +
+  '    </bpmndi:BPMNPlane>\n' +
+  '  </bpmndi:BPMNDiagram>\n' +
+  '</bpmn2:definitions>';
+
+export default class Bpmn {
+  data = null;
+  readOnly = false;
+
+  static get sanitize(){
+    return {
+      svg: true,
+      files: true,
+      caption: {} // only tags from Inline Toolbar
+    }
+  }
+
+  /**
+   * Allow to use this tool in read only mode
+   */
+  static get isReadOnlySupported() {
+    return true;
+  }
+
+  constructor({ data, readOnly }){
+    this.data = data;
+    this.readOnly = readOnly;
+  }
+
+  static get toolbox() {
+    return {
+      title: 'BPMN',
+      icon
+    };
+  }
+
+  render(){
+    const wrapper = createWrapper(this.data, this.readOnly);
+    if (!this.readOnly) {
+      wrapper.classList.remove('readonly');
+      wrapper.addEventListener('dblclick', async () => {
+        const modal = document.createElement('div');
+        modal.classList.add('itf-modal');
+        modal.classList.add('modal');
+        modal.classList.add('fade');
+        modal.classList.add('editorjs-bpmn-modal');
+        const modalDialog = document.createElement('div');
+        modalDialog.classList.add('modal-dialog');
+        modalDialog.classList.add('modal-fullscreen');
+        const modalContent = document.createElement('div');
+        modalContent.classList.add('modal-content');
+        const modalHeader = document.createElement('div');
+        modalHeader.classList.add('modal-header');
+        const modalTitle = document.createElement('h5');
+        modalTitle.classList.add('modal-title');
+        modalTitle.textContent = 'BPMN Editor';
+        modalHeader.appendChild(modalTitle);
+        const btnHolder = document.createElement('div');
+        btnHolder.classList.add('d-flex');
+        const modalSaveBtn = document.createElement('button');
+        modalSaveBtn.classList.add('btn');
+        modalSaveBtn.classList.add('btn-primary');
+        modalSaveBtn.classList.add('itf-button');
+        modalSaveBtn.textContent = 'Save & Close';
+        const modalCancelBtn = document.createElement('button');
+        modalCancelBtn.classList.add('btn');
+        modalCancelBtn.classList.add('btn-secondary');
+        modalCancelBtn.classList.add('itf-button');
+        modalCancelBtn.classList.add('me-2');
+        modalCancelBtn.textContent = 'Cancel';
+        btnHolder.appendChild(modalCancelBtn);
+        btnHolder.appendChild(modalSaveBtn);
+        modalHeader.appendChild(modalTitle);
+        modalHeader.appendChild(btnHolder);
+        modalContent.appendChild(modalHeader);
+        const modalBody = document.createElement('div');
+        modalBody.classList.add('modal-body');
+        const frame = document.createElement('div');
+        modalBody.appendChild(frame);
+        modalContent.appendChild(modalBody);
+        modalDialog.appendChild(modalContent);
+        modal.appendChild(modalDialog);
+        document.body.appendChild(modal);
+        const {default: Modal} = await import('../../../modal/modalSrc');
+        const modalEl = new Modal(modal, {context: document.body, backdrop: 'static'});
+        modalEl.show();
+        modal.addEventListener('hidden.bs.modal', () => {
+          document.body.removeChild(modal);
+        });
+
+        frame.classList.add('modal-body-content');
+
+        let modeler;
+        setTimeout(async () => {
+          const { default: BpmnModeler } = await import('bpmn-js/dist/bpmn-modeler.production.min');
+          modeler = new BpmnModeler({
+            container: frame,
+            keyboard: {
+              bindTo: window
+            }
+          });
+
+          try {
+            await modeler.importXML(this.data?.xml || xml);
+          } catch (err) {
+            console.error('error loading BPMN 2.0 XML', err);
+          }
+        }, 500)
+
+        modalSaveBtn.addEventListener('click', async () => {
+          this.data = {
+            svg: (await modeler.saveSVG())?.svg,
+            xml: (await modeler.saveXML({ format: true }))?.xml
+          };
+          if (this.data.svg) {
+            createSvg(wrapper, this.data, this.readOnly);
+          }
+          modalEl.hide();
+        });
+        modalCancelBtn.addEventListener('click', () => {
+          modalEl.hide();
+        });
+      });
+    } else {
+      wrapper.classList.add('readonly');
+    }
+    return wrapper;
+
+    function createWrapper(data, readOnly) {
+      const wrapper = document.createElement('div');
+      wrapper.classList.add('editorjs-bpmn');
+      if (data.svg) {
+        wrapper.classList.remove('empty');
+        createSvg(wrapper, data, readOnly);
+      } else if (!readOnly) {
+        wrapper.classList.add('empty');
+        wrapper.innerHTML = `<div class="text-muted icon me-2">${icon}</div><div class="text-muted text">Double click to start diagramming your business processes.</div>`;
+      }
+      return wrapper;
+    }
+
+    function createSvg(wrapper, { svg, caption }, readOnly) {
+      const svgContainer = document.createElement('div');
+      svgContainer.innerHTML = svg;
+
+      const divSvg = document.createElement('div');
+      wrapper.innerHTML = '';
+      wrapper.classList.remove('empty');
+      wrapper.appendChild(divSvg);
+      divSvg.appendChild(svgContainer);
+
+      const captionEl = document.createElement('div');
+      captionEl.contentEditable = !readOnly;
+      captionEl.classList.add('editorjs-bpmn-caption');
+      captionEl.textContent = caption;
+      if (!readOnly) {
+        captionEl.setAttribute('data-text', 'Caption');
+        captionEl.addEventListener('dblclick', (e) => {
+          e.stopPropagation();
+        });
+      }
+      wrapper.appendChild(captionEl);
+    }
+  }
+  save(blockContent){
+    const caption = blockContent.querySelector('[contenteditable]');
+    const data = cloneDeep(this.data);
+    data.caption = caption ? caption.innerHTML : '';
+    return data;
+  }
+}

package/src/components/editor/tools/bpmn/bpmn.scss

@@ -0,0 +1,63 @@
+.editorjs-bpmn {
+    --editorjs-drawing-border: #dcdfe6;
+
+    &.empty {
+        border: 1px dashed var(--editorjs-drawing-border);
+        min-height: 150px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    position: relative;
+    z-index: 0;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    height: max-content !important;
+
+    &:not(.readonly) {
+        cursor: pointer;
+
+        &:hover {
+            outline: 3px solid var(--editorjs-drawing-border);
+        }
+    }
+
+    .editorjs-bpmn-caption {
+        margin-top: 1rem;
+        text-align: center;
+        &:empty:not(:focus):before {
+            content: attr(data-text);
+            opacity: .5;
+        }
+    }
+    svg {
+        width: 100%;
+        height: auto;
+        user-select: none;
+        pointer-events: none;
+    }
+    .icon {
+        width: 48px;
+        height: 48px;
+
+        path {
+            fill: currentColor;
+            stroke: none;
+        }
+    }
+    .text {
+
+    }
+}
+
+.editorjs-bpmn-modal .modal-body {
+    padding: 0;
+    display: flex;
+}
+.editorjs-bpmn-modal .modal-body-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}

package/src/components/editor/tools/drawing/drawing.js

@@ -130,7 +130,7 @@ export default class Drawing {
 
     function createSvg(wrapper, { svg, caption }, readOnly) {
       const svgContainer = document.createElement('div');
-      svgContainer.innerHTML = svg.replace('@undefined', '@0.16.1'); // глючить версія в excalidraw
+      svgContainer.innerHTML = svg.replace(/@undefined/g, '@0.16.1'); // глючить версія в excalidraw
 
       const divSvg = document.createElement('div');
       wrapper.innerHTML = '';

package/src/components/filter/FilterBadge.vue

@@ -0,0 +1,61 @@
+<template>
+
+
+  <span class="border rounded d-inline-flex ps-3 pe-1 gap-1 align-items-center">
+    Status
+
+
+      <select class="form-control input-sm filter-operation" v-model="operator">
+        <option v-for="option in operators" :value="option.id">
+          {{option.title}}
+        </option>
+      </select>
+
+    <div>
+      asda
+    </div>
+
+    <itf-button icon>
+      <itf-icon name="close" />
+    </itf-button>
+  </span>
+
+</template>
+<style>
+.form-control.filter-operation {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+
+  &:focus, &:active {
+    box-shadow: none;
+    outline: none;
+  }
+  &:hover {
+    background-color: var(--bs-tertiary-bg);
+  }
+}
+</style>
+<script>
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
+import {getOperatorsByType} from "./constants";
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+
+
+export default @Component({
+  name: 'itfFilterBadge',
+  components: {
+    itfButton,
+    itfIcon
+  }
+})
+class itfFilterBadge extends Vue {
+  @Prop({ type: String, required: true }) type;
+
+  get operators() {
+    return getOperatorsByType(this.type);
+  }
+}
+</script>

package/src/components/filter/Rule.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-group and-or-rule row">
+  <div class="form-group and-or-rule d-flex">
     <div class="col-3">
       <select class="form-control input-sm" v-model="key">
         <option v-for="option in options.keys" :value="option.id">
@@ -8,10 +8,10 @@
       </select>
     </div>
 
-    <div class="col-3">
-      <select class="form-control input-sm" v-model="operator">
-        <option v-for="option in options.operators" :value="option.id">
-          {{option.name}}
+    <div style="width: 150px" class="px-2">
+      <select class="form-control input-sm input-filter" v-model="operator">
+        <option v-for="option in operators" :value="option.id">
+          {{option.title}}
         </option>
       </select>
     </div>
@@ -27,6 +27,9 @@
   </div>
 </template>
 <style>
+.input-filter {
+  background: var(--bs-primary-bg-subtle);
+}
 .and-or-rule {
   position: relative;
   margin-left: 15px !important;
@@ -63,12 +66,27 @@ import { Component, Prop, Watch, Vue } from "vue-property-decorator";
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 
+const operations = [
+  {
+    type: 'string',
+    operators: [
+      { id: 'eq', title: 'equal' },
+      { id: 'notEq', title: 'not equal' },
+      { id: 'contains', title: 'contains' },
+      { id: 'noContains', title: 'not contains' },
+      { id: 'startsWith', title: 'starts with' },
+      { id: 'endsWith', title: 'ends with' }
+    ]
+  }
+];
+
 export default @Component({
   name: 'itfRule',
   components: { itfButton, itfIcon }
 })
 class itfRule extends Vue {
   @Prop() options;
+  @Prop() type;
 
   key = -99;
 
@@ -76,6 +94,10 @@ class itfRule extends Vue {
 
   value = '';
 
+  get operators() {
+    return operations.find(op => op.type === this.type)?.operators || [];
+  }
+
   @Watch('options.keys.options')
   onOptionUpdated() {
     this.key = -99;

package/src/components/filter/RuleGroup.vue

@@ -1,5 +1,14 @@
 <template>
-  <div class="and-or-template col-12" :class="first ? 'and-or-first' : '' ">
+  <div>
+    <itf-dropdown>
+      <template #button>
+        <itf-icon name="filter" />
+        Filter
+      </template>
+
+      <div class="dropdown-item" @click="addGroup">Add group</div>
+      <div class="dropdown-item" @click="addRule">Add condition</div>
+    </itf-dropdown>
     <div class="form-group and-or-top col-12">
       <div class="col-5" style="padding: 0">
         <button class="btn btn-xs btn-purple-outline btn-radius"
@@ -16,14 +25,16 @@
         <itf-button v-if="!first" class="btn btn-xs btn-purple pull-right" @click.prevent="deleteSelf()">
           <i class="fa fa-fw fa-close"></i>
         </itf-button>
-        <button class="btn btn-xs btn-purple pull-right" @click.prevent="addGroup"> + ( group ) </button>
-        <button class="btn btn-xs btn-purple add-rule pull-right" @click.prevent="addRule"> + add </button>
       </div>
     </div>
 
     <rule
-        v-for="(rule, index) in rules" ref="rules"
-        :options="options" :key="rule" @delete-rule="deleteRule(index)">
+        v-for="(rule, index) in rules"
+        ref="rules"
+        :options="options"
+        :key="rule"
+        type="string"
+        @delete-rule="deleteRule(index)">
     </rule>
 
     <itf-rule-group
@@ -36,16 +47,8 @@
 </template>
 <style>
 .and-or-template {
-  padding: 8px;
   position: relative;
-  border-radius: 3px;
-  border: 1px solid #6d77b8;
-  border-top: 3px solid #d2d6de;
   margin-bottom: 20px;
-  /* width: 100%; */
-  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-  border-top-color: #6d77b8;
-  background-color: rgba(255, 255, 255, 0.9);
 }
 
 .and-or-template:before,
@@ -91,11 +94,18 @@
 <script>
 import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
 import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+import itfDropdown from '../dropdown/Dropdown.vue';
 import Rule from './Rule'
 
 export default @Component({
   name: 'itfRuleGroup',
-  components: { itfButton, Rule }
+  components: {
+    itfIcon,
+    itfButton,
+    itfDropdown,
+    Rule
+  }
 })
 class itfRule extends Vue {
   @Prop({ type: Object, required: true }) options;

package/src/components/filter/constants.js

@@ -0,0 +1,19 @@
+
+
+export function getOperatorsByType(type) {
+  const operations = [
+    {
+      type: 'string',
+      operators: [
+        { id: 'eq', title: 'equal' },
+        { id: 'notEq', title: 'not equal' },
+        { id: 'contains', title: 'contains' },
+        { id: 'noContains', title: 'not contains' },
+        { id: 'startsWith', title: 'starts with' },
+        { id: 'endsWith', title: 'ends with' }
+      ]
+    }
+  ];
+
+  return operations.find((operation) => operation.type === type).operators;
+}

package/src/components/filter/index.stories.js

@@ -1,12 +1,14 @@
 import { storiesOf } from '@storybook/vue';
 import itfRule from './Rule.vue';
 import itfRuleGroup from './RuleGroup.vue';
+import itfFilterBadge from './FilterBadge.vue';
 
 storiesOf('Common', module)
   .add('Filter', () => ({
     components: {
       itfRule,
-      itfRuleGroup
+      itfRuleGroup,
+      itfFilterBadge
     },
     data() {
       return {
@@ -62,6 +64,10 @@ storiesOf('Common', module)
 
   </pre>
 
+
+      <itf-filter-badge type="string" />
+
+
       <h2>Example</h2>
 
       <itf-rule-group :options="options" first />