@itfin/components 1.2.96 → 1.2.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.96",
+  "version": "1.2.98",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -26,21 +26,22 @@
     "@vue/cli-service": "^5.0.1",
     "@vue/composition-api": "^1.7.1",
     "air-datepicker": "^3.3.5",
-    "bootstrap": "=5.2.3",
-    "core-js": "^3.31.1",
+    "bootstrap": "^5.2.3",
+    "core-js": "^3.7.0",
     "debug": "^4.2.0",
     "intersection-observer": "^0.12.2",
     "lodash": "^4.17.20",
     "luxon": "^3.3.0",
-    "pdfjs-dist": "^3.8.162",
+    "pdfjs-dist": "^2.10.377",
     "tippy.js": "^6.3.2",
+    "vue": "^2.6.12",
     "vue-imask": "^6.6.3",
     "vue-property-decorator": "^9.1.2",
     "vue-swatches": "^2.1.1",
     "vue-virtual-scroller": "^1.1.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.22.9",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",
     "@storybook/addon-docs": "=6.3.8",
@@ -52,15 +53,14 @@
     "@vue/eslint-config-airbnb": "^7.0.0",
     "@vue/test-utils": "^1.1.1",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.45.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint": "^8.30.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.15.1",
+    "eslint-plugin-vue": "^9.9.0",
     "fibers": "^5.0.0",
     "marked": "^4.2.5",
     "sass": "^1.29.0",
     "sass-loader": "^10.0.5",
-    "vue": "^2.6.12",
     "vue-class-component": "^7.2.6",
     "vue-eslint-parser": "^9.1.0",
     "vue-template-compiler": "=2.6.14"

package/src/assets/scss/_css_variables.scss

@@ -9,10 +9,21 @@ $color-outcome: #b91e1e;
   --color-outcome: #{$color-outcome};
   --color-primary: #{$primary};
   --body-bg: #{$body-bg};
+
+  .modal-backdrop {
+    --bs-backdrop-bg: #{$body-bg};
+    --bs-backdrop-opacity: 0.75;
+  }
 }
 
 [data-theme="dark"] {
   --color-primary: #{$dark-primary};
   --body-bg: #{$dark-body-bg};
+  --bs-backdrop-bg: #{$dark-body-bg};
   --color-primary-hover: #{darken($dark-primary, 10%)};
+
+  .modal-backdrop {
+    --bs-backdrop-opacity: 0.5;
+    --bs-backdrop-bg: #{$dark-body-bg};
+  }
 }

package/src/components/datepicker/DatePicker.vue

@@ -21,6 +21,7 @@
       :unmask="false"
       :lazy="!focused"
       :placeholder="placeholder"
+      :disabled="disabled"
     />
 
     <div class="addon-end" v-if="clearable && value">
@@ -85,6 +86,7 @@ class itfDatePicker extends Vue {
   @Prop({ type: String, default: 'bottom-start' }) placement;
   @Prop({ type:  [String, Date], default: '' }) minDate;
   @Prop(Boolean) clearable;
+  @Prop(Boolean) disabled;
 
   focused = false;
 
@@ -117,6 +119,9 @@ class itfDatePicker extends Vue {
   }
 
   mounted() {
+    if (this.disabled) {
+      return;
+    }
     // якщо в модалці, то контекст модалки, якщо ні, то аплікейшена
     const context = this.$el.closest('.itf-append-context') || document.body;
     this.tooltip = tippy(this.$refs.input.$el, {
@@ -183,10 +188,16 @@ class itfDatePicker extends Vue {
   }
 
   onFocus() {
+    if (this.disabled) {
+      return;
+    }
     this.focused = true;
   }
 
   onBlur(e) {
+    if (this.disabled) {
+      return;
+    }
     this.focused = false;
     this.updateValue(e.target.value, !!e.target.value);
   }

package/src/components/datepicker/DateRangePicker.vue

@@ -19,6 +19,7 @@
         :mask="Date"
         :pattern="dateFormat"
         :blocks="blocks"
+        :disabled="disabled"
         :format="format"
         :parse="parse"
         :unmask="false"
@@ -105,6 +106,7 @@ class itfDateRangePicker extends Vue {
   @Prop({ type: String, default: 'bottom-start' }) placement;
   @Prop({ type: [String, Date], default: '' }) minDate;
   @Prop({ type: [String, Date], default: ''}) maxDate;
+  @Prop(Boolean) disabled;
 
   focused = false;
 

package/src/components/dropdown/Dropdown.vue

@@ -3,7 +3,7 @@
   <div class="itf-dropdown" :class="`drop${placement}`">
     <div v-if="disabled"><slot name="button">{{label}}</slot></div>
     <itf-button
-      v-else
+      v-else-if="!text"
       :class="{ 'dropdown-toggle': toggle }"
       v-bind="buttonOptions"
       ref="toggle"
@@ -13,6 +13,9 @@
     >
       <slot name="button">{{label}}</slot>
     </itf-button>
+    <div v-else :class="{ 'dropdown-toggle': toggle }" ref="toggle" :id="modalId" data-bs-toggle="dropdown" aria-expanded="false">
+      <slot name="button">{{label}}</slot>
+    </div>
     <div
       class="itf-dropdown__menu dropdown-menu"
       :class="{'dropdown-menu-end': right, 'shadow': shadow}"
@@ -44,6 +47,8 @@ class itfDropdown extends Vue {
   @Prop({ type: Boolean }) toggle;
   @Prop({ type: Boolean }) shadow;
   @Prop({ type: Boolean }) disabled;
+  @Prop({ type: Boolean }) text;
+  @Prop({ type: Boolean }) appendToBody;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
 
@@ -80,6 +85,12 @@ class itfDropdown extends Vue {
       reference: 'toggle',
       autoClose: this.autoclose
     });
+    let context = document.body;
+    if (this.appendToBody && this.$refs.dropdown instanceof Node && this.$refs.dropdown.parentNode) {
+      this.$refs.dropdown.parentNode.removeChild(this.$refs.dropdown);
+      context.appendChild(this.$refs.dropdown); // should append only to body
+    }
+
     this.$el.addEventListener('shown.bs.dropdown', () => {
       setTimeout(() => {
         this.$emit('open');

package/src/components/editable/EditableElement.vue

@@ -0,0 +1,112 @@
+<template>
+
+  <div>
+    <div ref="element">
+      <slot name="activator" :open="open">
+        <div @click.prevent.stop="open">
+          <slot :open="open" :hide="hide">
+          </slot>
+        </div>
+      </slot>
+    </div>
+  </div>
+
+</template>
+<style lang="scss">
+.itf-editable-element {
+  z-index: 1060;
+  position: fixed;
+}
+</style>
+<script>
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+import FocusTrap from "bootstrap/js/src/util/focustrap";
+
+export default @Component({
+  name: 'itfEditableElement',
+  components: {
+    itfButton,
+    itfIcon,
+  }
+})
+class itfEditableElement extends Vue {
+  _backdrop = null;
+  _context = null;
+  _focusTrap = null;
+  _elContainer = null;
+  _tempContainer = null;
+
+  isOpen = false;
+
+  async mounted() {
+    this._context = this.$el.closest('.itf-append-context:not(.modal-content)') || document.body;
+
+    const { default: Backdrop } = await import('../modal/backdrop');
+    this._backdrop = new Backdrop({
+      rootElement: this._context,
+      isVisible: true,
+      isAnimated: true,
+      clickCallback: () => {
+        this.hide();
+      }
+    });
+    this._focusTrap = new FocusTrap({
+      trapElement: this.$el
+    });
+  }
+
+  open() {
+    if (this.isOpen) {
+      return;
+    }
+    this.isOpen = true;
+
+    this.$emit('open');
+    this._backdrop.show();
+    this._focusTrap.activate();
+
+    this._tempContainer = document.createElement('div');
+    this.applyPosition(this._tempContainer, this.$refs.element)
+    this._tempContainer.classList.add('itf-editable-element');
+    this.$el.removeChild(this.$refs.element);
+    this._tempContainer.appendChild(this.$refs.element);
+    this._context.appendChild(this._tempContainer);
+  }
+
+  applyPosition(container, el) {
+    const box = el.getBoundingClientRect();
+    const left = box.left + document.body.scrollLeft;
+    const top = box.top + document.body.scrollTop;
+    container.style.left = `${left}px`;
+    container.style.top = `${top}px`;
+    container.style.width = `${box.width}px`;
+    container.style.height = `${box.height}px`;
+    this.$el.style.width = `${box.width}px`;
+    this.$el.style.height = `${box.height}px`;
+  }
+
+  hide() {
+    if (!this.isOpen) {
+      return;
+    }
+    this._focusTrap.deactivate();
+    this._backdrop.hide(() => {
+      this._tempContainer.removeChild(this.$refs.element);
+      this.$el.appendChild(this.$refs.element);
+      this._context.removeChild(this._tempContainer); // remove the temporary div
+
+      this.$el.style.width = null;
+      this.$el.style.height = null;
+      this.isOpen = false;
+      this.$emit('hide');
+    });
+  }
+
+  beforeDestroy() {
+    this._backdrop.dispose();
+    this._focusTrap.deactivate();
+  }
+}
+</script>

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

@@ -0,0 +1,53 @@
+import { storiesOf } from '@storybook/vue';
+import itfButton from '../button/Button.vue';
+import itfEditableElement from './EditableElement.vue';
+
+storiesOf('Common', module)
+  .add('Editable element', () => ({
+    components: {
+      itfButton,
+      itfEditableElement
+    },
+    data() {
+      return {}
+    },
+    template: `<div>
+      <p>You need wrap whole application with this tag</p>
+
+      <h2>Usage</h2>
+
+<pre>
+  &lt;itf-table
+    :columns="columns"
+    :rows="list"
+  >
+    &lt;template #column.Employee="&#123; item }">&lt;/template>
+  &lt;/itf-table>
+</pre>
+
+      <h3>Example</h3>
+
+      <itf-editable-element>
+        <template v-slot="{ hide }">
+
+        <div class="card" style="width: 300px">
+          <div class="card-body">
+            asdadas
+
+            <a href="#" @click="hide">Close</a>
+          </div>
+        </div>
+        </template>
+      </itf-editable-element>
+
+      <!--itf-table
+        :columns="columns"
+        :rows="list"
+      >
+        <template #column.Employee="{ item }">
+          {{item.Employee}}
+        </template>
+      </itf-table-->
+
+    </div>`,
+  }));

package/src/components/table/Sortable.js

@@ -0,0 +1,288 @@
+import Vue from 'vue';
+import { Draggable } from './draggable'
+import DraggableEvent from './event'
+
+
+Vue.directive("sortable-item", {
+  inserted(el, { value }) {
+    el.sortableItemPayload = value?.payload;
+    el.classList.add(draggableNode.options.draggableClass);
+    el.getAttribute("with-handle") && el.classList.add(draggableNode.options.dragHandleClass);
+    value?.mirror && (el.dataset.draggableMirror = JSON.stringify(value.mirror));
+  },
+  update(el, {value}) {
+    el.sortableItemPayload = value?.payload;
+    el.classList.add(draggableNode.options.draggableClass);
+    el.getAttribute("with-handle") && el.classList.add(draggableNode.options.dragHandleClass);
+    value?.mirror && (el.dataset.draggableMirror = JSON.stringify(value.mirror))
+  }
+});
+
+
+const SORT_TAG = "sort";
+function someFunc({ source, over, overContainer, children }) {
+  const isDelete = !children.length
+    , isInContainer = source.parentNode !== overContainer
+    , Q = over && !isInContainer;
+  if (isDelete) {
+    return moveToContainer(source, overContainer)
+  }
+  return Q ? $(source, over) : isInContainer ? insertBefore(source, over, overContainer) : null
+}
+
+function moveToContainer(el, newContainer) {
+  const oldContainer = el.parentNode;
+  newContainer.appendChild(el);
+  return {
+    oldContainer,
+    newContainer
+  };
+}
+function $(el, container) {
+  console.info('$')
+  const tt = indexOf(el)
+    , ot = indexOf(container);
+  if (tt < ot) {
+    el.parentNode.insertBefore(el, container.nextElementSibling);
+  } else {
+    el.parentNode.insertBefore(el, container);
+  }
+  return {
+    oldContainer: el.parentNode,
+    newContainer: el.parentNode
+  };
+}
+function indexOf(A) {
+  return Array.prototype.indexOf.call(A.parentNode.children, A)
+}
+function insertBefore(A, H, tt) {
+  console.info('insertBefore')
+  const ot = A.parentNode;
+  return H ? H.parentNode.insertBefore(A, H) : tt.appendChild(A),
+    {
+      oldContainer: ot,
+      newContainer: A.parentNode
+    }
+}
+function c(A, H, tt) {
+  const ot = [...A.slice(0, H), ...A.slice(H + 1, A.length)];
+  return [...ot.slice(0, tt), A[H], ...ot.slice(tt, ot.length)]
+}
+
+export
+const Sortable = {
+  name: 'Sortable',
+  render: function() {
+    return this._self._c(this.tag, {
+      ref: "sortable",
+      tag: "component"
+    }, [this._t("default", null, {
+      items: this.value
+    })], 2)
+  },
+  props: {
+    value: {
+      default: ()=>[],
+      type: Array
+    },
+    group: {
+      type: String,
+      default: "defaultGroup"
+    },
+    tag: {
+      type: String,
+      default: "div"
+    }
+  },
+  mounted() {
+    Draggable.addContainer(this.$refs.sortable);
+    this.$refs.sortable.dataset.group = this.group;
+    this.handler = event=>{
+      const H = [...this.value];
+      H.splice(event.detail.newIndex, 0, event.detail.item),
+        this.$emit("input", H),
+        this.$emit("receive", {
+          ...event.detail,
+          newItems: H
+        })
+    };
+
+    this.$refs.sortable.addEventListener(SORT_TAG, this.handler);
+    Draggable.on("drag:start", this.onDragStart);
+  },
+  beforeDestroy() {
+    this.$refs.sortable.removeEventListener(SORT_TAG, this.handler)
+  },
+  destroyed() {
+    Draggable.removeContainer(this.$refs.sortable),
+      Draggable.off("drag:start", this.onDragStart),
+      this.destroyMirror()
+  },
+  methods: {
+    stopListening() {
+      Draggable
+        .off("drag:move", this.dragMove)
+        .off("drag:over:container", this.onDragOverContainer)
+        .off("drag:out:container", this.onDragOutContainer)
+        .off("drag:over", this.onDragOver)
+        .off("drag:stop", this.onDragStop)
+        .off("mirror:created", this.createMirror)
+        .off("mirror:destroy", this.destroyMirror);
+      this.destroyMirror();
+    },
+    createMirror(el) {
+      console.info(el, this.dragging)
+      if (this.dragging && this.$scopedSlots.mirror) {
+        const H = this.$scopedSlots.mirror({
+          item: this.source.item
+        });
+        const tt = Vue.ZP.extend({
+          parent: this,
+          render() {
+            return H
+          }
+        });
+        const Y = new tt().$mount();
+        this.mirrorComponent = Y;
+        el.mirror.innerHTML = "";
+        el.mirror.appendChild(Y.$el);
+      }
+    },
+    destroyMirror() {
+      if (this.mirrorComponent) {
+        this.mirrorComponent.$destroy();
+        this.mirrorComponent = null;
+      }
+    },
+    getDraggableElementsForContainer(el) {
+      return [...el.children].filter(item => item !== Draggable.originalSource && item !== Draggable.mirror)
+    },
+    index(el) {
+      return this.getDraggableElementsForContainer(el.parentNode).indexOf(el)
+    },
+    onDragStart(event) {
+      if (event.originalEvent.target.tagName === "INPUT") {
+        event.cancel();
+        return
+      }
+      if (event.sourceContainer !== this.$refs.sortable) {
+        return;
+      }
+      Draggable
+        .on("drag:move", this.dragMove)
+        .on("drag:over:container", this.onDragOverContainer)
+        .on("drag:out:container", this.onDragOutContainer)
+        .on("drag:over", this.onDragOver)
+        .on("drag:stop", this.onDragStop)
+        .on("mirror:created", this.createMirror)
+        .on("mirror:destroy", this.destroyMirror);
+      const oldIndex = this.index(event.source);
+      this.$emit("start");
+      this.oldIndex = oldIndex;
+      this.source = {
+        oldIndex,
+        item: this.value[oldIndex]
+      };
+    },
+    dragMove(el) {
+      Draggable.trigger(new DraggableEvent({
+        ...el.data,
+        sourceComponent: this.$refs.sortable,
+        group: this.group,
+        draggablePayload: {
+          item: this.value[this.oldIndex],
+          ...el.originalSource.sortableItemPayload
+        }
+      }))
+    },
+    onDragOverContainer(event) {
+      const {source, over, overContainer} = event;
+      if (overContainer.dataset.group !== this.group) {
+        return;
+      }
+      const children = this.getDraggableElementsForContainer(overContainer);
+      this.destinationContainer = overContainer;
+
+      console.info('onDragOverContainer', overContainer, children)
+      someFunc({
+        source,
+        over,
+        overContainer,
+        children
+      });
+    },
+    onDragOutContainer(el) {
+      this.destinationContainer = null;
+      const overContainer = this.$refs.sortable
+        , children = this.getDraggableElementsForContainer(overContainer)
+        , over = children[this.source.oldIndex];
+      someFunc({
+        source: el.source,
+        over,
+        overContainer,
+        children
+      })
+    },
+    onDragOver(A) {
+      const { source, over, overContainer } = A;
+      if (overContainer.dataset.group !== this.group || over === A.originalSource || over === source) {
+        return;
+      }
+      const Y = this.getDraggableElementsForContainer(overContainer);
+      if (Y.includes(over)) {
+        someFunc({
+          source: source,
+          over: over,
+          overContainer: overContainer,
+          children: Y
+        });
+      }
+    },
+    onDragStop(item) {
+      this.stopListening();
+      if (!this.destinationContainer || this.destinationContainer.dataset.group !== this.group) {
+        return;
+      }
+      const { source } = this;
+      source.newIndex = this.index(item.source);
+      source.sortableItemPayload = { ...item.originalSource.sortableItemPayload };
+      console.info(item.source, item.originalSource)
+      item.originalSource.parentNode.insertBefore(item.source, item.originalSource);
+      if (item.sourceContainer === this.destinationContainer) {
+        this.onSortItems(source);
+      } else {
+        this.onRemoveItem(source);
+        this.onReceiveItem(source, this.destinationContainer);
+      }
+      this.$emit("stop");
+    },
+    onSortItems(item) {
+      if (item.oldIndex === item.newIndex) {
+        return;
+      }
+      const newItems = c(this.value, item.oldIndex, item.newIndex);
+      this.$emit("input", newItems);
+      this.$emit("move", {
+        newItems,
+        ...item
+      });
+    },
+    onReceiveItem(el, H) {
+      H.dispatchEvent(new CustomEvent(SORT_TAG,{
+        detail: {
+          item: el.item,
+          newIndex: el.newIndex,
+          oldIndex: el.oldIndex,
+          sortableItemPayload: el.sortableItemPayload
+        }
+      }))
+    },
+    onRemoveItem(el) {
+      const H = this.value.filter(tt=>tt !== el.item);
+      this.$emit("input", H)
+    }
+  }
+};
+
+
+Vue.component("Sortable", Sortable)