@itfin/components 1.3.19 → 1.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.19",
+  "version": "1.3.21",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/scss/components/_segmeneted-control.scss

@@ -88,7 +88,7 @@
         pointer-events: none;
         display: block;
         position: relative;
-        z-index: 2;
+        //z-index: 2;
         -webkit-transition: all .2s ease;
         transition: all .2s ease;
         will-change: transform;
@@ -96,7 +96,7 @@
     }
 
     input {
-      z-index: 2;
+      //z-index: 2;
       position: absolute;
       top: 0;
       left: 0;
@@ -119,7 +119,7 @@
       &:checked + label::before,
       &:checked + label::after {
         background: var(--itf-segmeneted-control--background);
-        z-index: 1;
+        //z-index: 1;
       }
     }
   }
@@ -132,7 +132,7 @@
     border-radius: var(--itf-segmeneted-control--border-radius);
     grid-column: 1;
     grid-row: 1;
-    z-index: 2;
+    //z-index: 2;
     will-change: transform;
     -webkit-transition: transform .2s ease;
     transition: transform .2s ease;

package/src/components/dropdown/Dropdown.vue

@@ -1,13 +1,16 @@
 <script>
 import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button';
+import itfDropdownMenu from './DropdownMenu';
 
 let globalModalIndex = 0; // base modal z-index
 
 export default @Component({
+  functional: true,
   name: 'itfDropdown',
   components: {
-    itfButton
+    itfButton,
+    itfDropdownMenu
   },
 })
 class itfDropdown extends Vue {
@@ -20,88 +23,41 @@ class itfDropdown extends Vue {
   @Prop({ type: Boolean }) shadow;
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: Boolean }) text;
-  @Prop({ type: Boolean, default: true }) appendToBody;
+  @Prop({ type: Boolean }) appendToBody;
   @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
   @Prop({ type: Object, default: () => ({}) }) buttonOptions;
   @Prop({ type: Object, default: () => ({}) }) menuOptions;
 
   modalId = '';
-  modalEl = null;
 
-  beforeDestroy () {
-    // this.hide();
-  }
-
-  // @Watch('value')
-  // onVisibleChanged(newValue) {
-  //   if (!this.modalEl) {
-  //     return;
-  //   }
-  //   if (newValue) {
-  //     this.modalEl.show();
-  //   } else {
-  //     this.modalEl.hide();
-  //   }
-  // }
-
-  render (createElement) {
-    const modalId = `dropdownId${this._uid}`;
-    const { right, shadow, label } = this;
-    return createElement('div', {
-      staticClass: 'dropdown'
-    }, [
+  render (createElement, context) {
+    const { props, slots, data } = context;
+    const modalId = `dropdownId${globalModalIndex++}`;
+    const { buttonOptions, toggle, right, shadow, label, appendToBody } = props;
+    const { button, default: defaultSlot } = slots();
+    let elements = [
       createElement(
-        'itf-button',
+        itfButton,
         {
-          props: this.buttonOptions || {},
-          class: { 'dropdown-toggle': this.toggle },
+          props: buttonOptions || {},
+          class: { 'dropdown-toggle': toggle },
           attrs: { id: modalId, 'data-bs-toggle': 'dropdown', 'aria-expanded': 'false' },
           ref: 'toggle',
         },
-        this.$slots.button || label
+        button || label
       ),
       createElement(
-        'div',
+        itfDropdownMenu,
         {
-          attrs: { rel: 'dropdown' , 'aria-labelledby': modalId},
-          class: { 'dropdown-menu-end': right, 'shadow': shadow },
-          staticClass: 'itf-dropdown__menu dropdown-menu',
-          ref: 'dropdown',
+          props: { ...props, toggleId: modalId },
         },
-        this.$slots.default
+        defaultSlot
       )
-    ]);
-  }
-
-  created() {
-    console.info(this);
-  }
-
-  async mounted() {
-    console.info(this);
-    if (typeof window === 'undefined' || !this.$refs.toggle) {
-      return;
+    ];
+    if (!appendToBody) {
+      elements = [createElement('div', { class: `dropdown ${data.staticClass || ''}` }, elements)];
     }
-    const { default: Dropdown } = await import('bootstrap/js/src/dropdown.js');
-    this.modalEl = new Dropdown(this.$refs.toggle, {
-      reference: 'toggle',
-      autoClose: this.autoclose
-    });
-    let context = document.body;
-    console.info(this.$refs.dropdown);
-    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');
-      }, 500);
-    });
-    this.$el.addEventListener('hidden.bs.dropdown', () => {
-      this.$emit('close');
-    });
+    return elements;
   }
 
   show() {

package/src/components/dropdown/DropdownMenu.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="itf-dropdown__menu dropdown-menu" ref="dropdown" :aria-labelledby="modalId" :class="{'dropdown-menu-end': right, 'shadow': shadow}">
+    <slot></slot>
+  </div>
+</template>
+<script>
+import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
+
+let globalModalIndex = 0; // base modal z-index
+
+export default @Component({
+  name: 'itfDropdownMenu'
+})
+class itfDropdownMenu extends Vue {
+  @PropSync('visible') value;
+  @Prop({ type: String, default: 'down', validator: (value) => ['down', 'start', 'end', 'up'].includes(value) }) placement;
+  @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
+  @Prop({ type: String, default: 'Dropdown' }) label;
+  @Prop({ type: Boolean }) right;
+  @Prop({ type: Boolean }) toggle;
+  @Prop({ type: Boolean }) shadow;
+  @Prop({ type: Boolean }) disabled;
+  @Prop({ type: Boolean }) text;
+  @Prop({ type: Boolean }) appendToBody;
+  @Prop({ type: String }) toggleId;
+  @Prop({ validator: (value) => [true, false, 'inside', 'outside'].includes(value), default: true }) autoclose;
+  @Prop({ type: Object, default: () => ({}) }) buttonOptions;
+  @Prop({ type: Object, default: () => ({}) }) menuOptions;
+
+  modalId = '';
+  modalEl = null;
+
+  async mounted() {
+    this.modalId = `dropdownId${globalModalIndex++}`;
+    const toggle = document.getElementById(this.toggleId);
+    if (typeof window === 'undefined' || !toggle) {
+      return;
+    }
+    const { default: Dropdown } = await import('bootstrap/js/src/dropdown.js');
+    let context = document.body;
+    this.modalEl = new Dropdown(toggle, {
+      reference: 'toggle',
+      autoClose: this.autoclose
+    });
+    if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+      context.appendChild(this.$el); // should append only to body
+    }
+
+    this.$el.addEventListener('shown.bs.dropdown', () => {
+      setTimeout(() => {
+        this.$emit('open');
+      }, 500);
+    });
+    this.$el.addEventListener('hidden.bs.dropdown', () => {
+      this.$emit('close');
+    });
+  }
+
+  show() {
+    if (this.modalEl) {
+      this.modalEl.show();
+    }
+  }
+
+  hide() {
+    if (this.modalEl) {
+      this.modalEl.hide();
+    }
+  }
+}
+</script>