@itfin/components 1.3.11 → 1.3.12

package/package.json

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

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/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>`,
   }));