@itfin/components 1.3.11 → 1.3.14

package/package.json

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

package/src/components/editable/EditButton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="itf-editable-button">
     <slot></slot>
-    <itf-button secondary icon small class="itf-editable-button__button" @click="$emit('click')">
+    <itf-button v-if="canEdit" secondary icon small class="itf-editable-button__button" @click="$emit('click')">
       <itf-icon name="pen" />
     </itf-button>
   </div>
@@ -35,5 +35,6 @@ export default @Component({
   }
 })
 class EditButton extends Vue {
+  @Prop({ type: Boolean, default: true }) canEdit;
 }
 </script>

package/src/components/editor/Editor.vue

@@ -200,6 +200,15 @@ class itfEditor extends Vue {
       minHeight: this.readonly ? 10 : 100,
       placeholder: this.$t('workflows.clickToEdit'),
 
+      onReady: () => {
+        if (!this.readonly) {
+          return;
+        }
+        const links = document.querySelectorAll('.codex-editor a');
+        for (const link of links) {
+          link.setAttribute('target', '_blank');
+        }
+      },
       onChange: async (api, event) => {
         if (!this.editor.save || this.readonly) {
           return;

package/src/components/icon/icons/fi_fingerprint.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512">
+    <path d="M5.972,22.285a1,1,0,0,1-.515-1.857C9,18.3,9,13.73,9,11a3,3,0,0,1,6,0,1,1,0,0,1-2,0,1,1,0,0,0-2,0c0,2.947,0,8.434-4.514,11.143A1,1,0,0,1,5.972,22.285Zm4.963,1.421c2.282-2.3,3.615-5.534,3.961-9.621A1,1,0,0,0,13.985,13a.983.983,0,0,0-1.081.911c-.311,3.657-1.419,6.4-3.388,8.381a1,1,0,0,0,1.419,1.41Zm5.2-.186a17.793,17.793,0,0,0,1.508-3.181,1,1,0,0,0-1.881-.678,15.854,15.854,0,0,1-1.338,2.821,1,1,0,0,0,1.711,1.038ZM18.5,17.191A31.459,31.459,0,0,0,19,11,7,7,0,0,0,6.787,6.333,1,1,0,1,0,8.276,7.667,5,5,0,0,1,17,11a29.686,29.686,0,0,1-.462,5.809,1,1,0,0,0,.79,1.172.979.979,0,0,0,.193.019A1,1,0,0,0,18.5,17.191ZM7,11a5,5,0,0,1,.069-.833A1,1,0,1,0,5.1,9.833,6.971,6.971,0,0,0,5,11c0,4.645-1.346,7-4,7a1,1,0,0,0,0,2C4.869,20,7,16.8,7,11ZM20.7,23.414A29.76,29.76,0,0,0,23,11a10.865,10.865,0,0,0-1.1-4.794,1,1,0,1,0-1.8.875A8.9,8.9,0,0,1,21,11a27.91,27.91,0,0,1-2.119,11.586,1,1,0,0,0,.5,1.324.984.984,0,0,0,.413.09A1,1,0,0,0,20.7,23.414ZM3,14V11a9.01,9.01,0,0,1,9-9,8.911,8.911,0,0,1,5.4,1.8,1,1,0,0,0,1.2-1.6A10.9,10.9,0,0,0,12,0,11.013,11.013,0,0,0,1,11v3a1,1,0,0,0,2,0Z"/>
+</svg>

package/src/components/kanban/Board.vue

@@ -6,7 +6,7 @@
            :data-column="index"
            @mouseover="columnHighlight(index, 'enter')"
            @mouseout="columnHighlight(index, 'leave')"
-           :key="index" class="itf-board-column itf-board-column__title p-2">
+           :key="index" :class="`itf-board-column itf-board-column__title p-2 ${columnEdit ? 'itf-board-column__move' : ''}`">
         <div accept-group="board-columns"
              class="itf-board-header-space"
              @enter="columnHighlight(index, 'enter', 'drop')"
@@ -16,6 +16,7 @@
         </div>
         <itf-edit-button
           accept-group="board-columns"
+          :can-edit="columnEdit"
           @enter="columnHighlight(index, 'enter')"
           @leave="columnHighlight(index, 'leave')"
           @click="$emit('update:columnSettings', column)"
@@ -42,7 +43,7 @@
           <div class="itf-board-header-dropzone"></div>
         </div>
       </div>
-      <div class="align-items-end d-flex pb-1">
+      <div v-if="columnEdit" class="align-items-end d-flex pb-1">
         <slot name="add-column">
           <itf-button icon small @click="$emit('add-сolumn')">
             <itf-icon name="plus" />
@@ -98,6 +99,7 @@ class Board extends Vue {
   @Prop({ type: Function, default: (item, value) => { item.Status = value; } }) updateFunc;
   @Prop({ type: String, default: 'Name' }) columnNameKey;
   @Prop(Boolean) columnSorting;
+  @Prop({ type: Boolean, default: true }) columnEdit;
 
   beforeDestroy() {
     if (this.columnSorting) {

package/src/components/kanban/styles.scss

@@ -129,7 +129,6 @@
     border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
 
     &__title {
-      cursor: move;
       border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
 
       .itf-board-column__header {
@@ -142,6 +141,10 @@
       }
     }
 
+    &__move {
+      cursor: move;
+    }
+
     &.over {
       background-color: var(--itf-board-column-hover-color);
     }
@@ -173,7 +176,7 @@
   border-bottom: 1px solid var(--itf-board-card-border-color);
   position: sticky;
   top: 0;
-  z-index: 101;
+  z-index: 100;
   background-color: var(--bs-light);
 }
 

package/src/components/slider/Slider.vue

@@ -1,26 +1,17 @@
 <template>
 
   <div class="itf-slider">
-    <button @click="$refs.slider.next()">nxet</button>
     <flicking ref="slider" :options="{ align: 'prev' }">
-      <div class="panel">1</div>
-      <div class="panel">2</div>
-      <div class="panel">3</div>
+      <slot />
     </flicking>
   </div>
 
 </template>
 <style lang="scss" scoped>
 @import '~@egjs/vue-flicking/dist/flicking.css';
-
-.itf-slider {
-  .panel {
-    width: 100%;
-  }
-}
 </style>
 <script>
-import { Component, Prop, Provide, Inject, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 import { Flicking } from '@egjs/vue-flicking';
 
 export default
@@ -36,5 +27,37 @@ class itfSlider extends Vue {
   mounted() {
     this.$refs.slider.disableInput();
   }
+
+  async prev() {
+    try {
+      if (this.$refs.slider.index === 0) {
+        await this.$refs.slider.moveTo(this.$refs.slider.panels.length - 1);
+        return;
+      }
+      await this.$refs.slider.prev();
+    } catch (e) {
+      // ignore FlickingError: Animation is already playing.
+    }
+  }
+
+  async next() {
+    try {
+      if (this.$refs.slider.index + 1 > this.$refs.slider.panels.length - 1) {
+        await this.$refs.slider.moveTo(0);
+        return;
+      }
+      await this.$refs.slider.next();
+    } catch (e) {
+      // ignore FlickingError: Animation is already playing.
+    }
+  }
+
+  async moveTo(index) {
+    try {
+      await this.$refs.slider.moveTo(index);
+    } catch (e) {
+      // ignore FlickingError: Animation is already playing.
+    }
+  }
 }
 </script>

package/src/components/slider/SliderPanel.vue

@@ -0,0 +1,22 @@
+<template>
+
+  <div class="panel"><slot /></div>
+
+</template>
+<style lang="scss" scoped>
+.panel {
+  width: 100%;
+}
+</style>
+<script>
+import { Component, Vue } from 'vue-property-decorator';
+
+export default
+@Component({
+  name: 'itfSliderPanel',
+  components: {
+  }
+})
+class itfSliderPanel extends Vue {
+}
+</script>

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

@@ -1,10 +1,14 @@
 import { storiesOf } from '@storybook/vue';
 import itfSlider from './Slider.vue';
+import itfSliderPanel from './SliderPanel.vue';
+import itfDropdown from '../dropdown/Dropdown.vue';
 
 storiesOf('Common', module)
   .add('Slider', () => ({
     components: {
-      itfSlider
+      itfSlider,
+      itfSliderPanel,
+      itfDropdown
     },
     data() {
       return {
@@ -30,20 +34,38 @@ storiesOf('Common', module)
       <h2>Usage</h2>
 
   <pre>
-
-    &lt;itf-datepicker>&lt;/itf-datepicker>
-
-    &lt;button @click="$showSuccess('Success')">Show success&lt;/button>
-    &lt;button @click="$showError('Error')">Show error&lt;/button>
-    &lt;button @click="$try(() => { throw new Error('Invalid function'); })">Try function with error&lt;/button>
   </pre>
 
       <h2>Example</h2>
 
-      <itf-slider>
-        <div>1</div>
-        <div>2</div>
-        <div>3</div>
+      <button @click="$refs.slider.prev()">prev</button>
+      <button @click="$refs.slider.next()">next</button>
+      <button @click="$refs.slider.moveTo(0)">move to 0</button>
+
+
+      <itf-slider ref="slider">
+        <itf-slider-panel>1</itf-slider-panel>
+        <itf-slider-panel>2</itf-slider-panel>
+        <itf-slider-panel>3</itf-slider-panel>
       </itf-slider>
+
+      <itf-dropdown autoclose="outside" :button-options="{ secondary: true }">
+        <template #button>
+          +
+        </template>
+        <itf-slider ref="slider2">
+          <itf-slider-panel>
+            <div>
+                <div><a class="dropdown-item" href="#">Action</a></div>
+            </div>
+          </itf-slider-panel>
+          <itf-slider-panel>2</itf-slider-panel>
+          <itf-slider-panel>3</itf-slider-panel>
+        </itf-slider>
+
+        <button @click="$refs.slider2.prev()">prev</button>
+        <button @click="$refs.slider2.next()">next</button>
+        <button @click="$refs.slider2.moveTo(0)">move to 0</button>
+      </itf-dropdown>
     </div>`,
   }));