@itfin/components 1.3.10 → 1.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.10",
+  "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/editor/tools/highlightcode/codecup.js

@@ -214,7 +214,7 @@ class EditorJsCodeCup {
     toggleButton.classList.add(this._CSS.settingsButton);
     toggleButton.classList.add('codecup-toggle-linenumbers');
     toggleButton.classList.add('ce-popover-item__title');
-    toggleButton.innerHTML = '<div class="ce-popover-item__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 40 40" width="512" height="512"><path style="stroke: none !important;" d="M13,24c-.552,0-1-.448-1-1V2.011l-5.215,6.608c-.342,.434-.972,.507-1.405,.166-.434-.342-.507-.971-.166-1.405,0,0,5.343-6.767,5.371-6.794C11.16,.012,12.016-.157,12.766,.152c.75,.311,1.234,1.036,1.234,1.848V23c0,.552-.448,1-1,1Z"/></svg></div> Show line numbers'
+    toggleButton.innerHTML = '<div class="ce-popover-item__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 40 40" width="512" height="512"><path style="stroke: none !important;fill: currentColor;" d="M13,24c-.552,0-1-.448-1-1V2.011l-5.215,6.608c-.342,.434-.972,.507-1.405,.166-.434-.342-.507-.971-.166-1.405,0,0,5.343-6.767,5.371-6.794C11.16,.012,12.016-.157,12.766,.152c.75,.311,1.234,1.036,1.234,1.848V23c0,.552-.448,1-1,1Z"/></svg></div> Show line numbers'
     if(this.data.showlinenumbers){
       toggleButton.classList.toggle(this._CSS.settingsButtonActive)
     }
@@ -288,7 +288,7 @@ class EditorJsCodeCup {
   static get toolbox() {
     return {
       icon: '<svg width="24" height="24" viewBox="-5 -6 24 24" xmlns="http://www.w3.org/2000/svg">\n' +
-        '    <path style="stroke: none !important;" d="M3.177 6.852c.205.253.347.572.427.954.078.372.117.844.117 1.417 0 .418.01.725.03.92.02.18.057.314.107.396.046.075.093.117.14.134.075.027.218.056.42.083a.855.855 0 0 1 .56.297c.145.167.215.38.215.636 0 .612-.432.934-1.216.934-.457 0-.87-.087-1.233-.262a1.995 1.995 0 0 1-.853-.751 2.09 2.09 0 0 1-.305-1.097c-.014-.648-.029-1.168-.043-1.56-.013-.383-.034-.631-.06-.733-.064-.263-.158-.455-.276-.578a2.163 2.163 0 0 0-.505-.376c-.238-.134-.41-.256-.519-.371C.058 6.76 0 6.567 0 6.315c0-.37.166-.657.493-.846.329-.186.56-.342.693-.466a.942.942 0 0 0 .26-.447c.056-.2.088-.42.097-.658.01-.25.024-.85.043-1.802.015-.629.239-1.14.672-1.522C2.691.19 3.268 0 3.977 0c.783 0 1.216.317 1.216.921 0 .264-.069.48-.211.643a.858.858 0 0 1-.563.29c-.249.03-.417.076-.498.126-.062.04-.112.134-.139.291-.031.187-.052.562-.061 1.119a8.828 8.828 0 0 1-.112 1.378 2.24 2.24 0 0 1-.404.963c-.159.212-.373.406-.64.583.25.163.454.342.612.538zm7.34 0c.157-.196.362-.375.612-.538a2.544 2.544 0 0 1-.641-.583 2.24 2.24 0 0 1-.404-.963 8.828 8.828 0 0 1-.112-1.378c-.009-.557-.03-.932-.061-1.119-.027-.157-.077-.251-.14-.29-.08-.051-.248-.096-.496-.127a.858.858 0 0 1-.564-.29C8.57 1.401 8.5 1.185 8.5.921 8.5.317 8.933 0 9.716 0c.71 0 1.286.19 1.72.574.432.382.656.893.671 1.522.02.952.033 1.553.043 1.802.009.238.041.458.097.658a.942.942 0 0 0 .26.447c.133.124.364.28.693.466a.926.926 0 0 1 .493.846c0 .252-.058.446-.183.58-.109.115-.281.237-.52.371-.21.118-.377.244-.504.376-.118.123-.212.315-.277.578-.025.102-.045.35-.06.733-.013.392-.027.912-.042 1.56a2.09 2.09 0 0 1-.305 1.097c-.2.323-.486.574-.853.75a2.811 2.811 0 0 1-1.233.263c-.784 0-1.216-.322-1.216-.934 0-.256.07-.47.214-.636a.855.855 0 0 1 .562-.297c.201-.027.344-.056.418-.083.048-.017.096-.06.14-.134a.996.996 0 0 0 .107-.396c.02-.195.031-.502.031-.92 0-.573.039-1.045.117-1.417.08-.382.222-.701.427-.954z"></path>\n' +
+        '    <path style="stroke: none !important; fill: currentColor;" d="M3.177 6.852c.205.253.347.572.427.954.078.372.117.844.117 1.417 0 .418.01.725.03.92.02.18.057.314.107.396.046.075.093.117.14.134.075.027.218.056.42.083a.855.855 0 0 1 .56.297c.145.167.215.38.215.636 0 .612-.432.934-1.216.934-.457 0-.87-.087-1.233-.262a1.995 1.995 0 0 1-.853-.751 2.09 2.09 0 0 1-.305-1.097c-.014-.648-.029-1.168-.043-1.56-.013-.383-.034-.631-.06-.733-.064-.263-.158-.455-.276-.578a2.163 2.163 0 0 0-.505-.376c-.238-.134-.41-.256-.519-.371C.058 6.76 0 6.567 0 6.315c0-.37.166-.657.493-.846.329-.186.56-.342.693-.466a.942.942 0 0 0 .26-.447c.056-.2.088-.42.097-.658.01-.25.024-.85.043-1.802.015-.629.239-1.14.672-1.522C2.691.19 3.268 0 3.977 0c.783 0 1.216.317 1.216.921 0 .264-.069.48-.211.643a.858.858 0 0 1-.563.29c-.249.03-.417.076-.498.126-.062.04-.112.134-.139.291-.031.187-.052.562-.061 1.119a8.828 8.828 0 0 1-.112 1.378 2.24 2.24 0 0 1-.404.963c-.159.212-.373.406-.64.583.25.163.454.342.612.538zm7.34 0c.157-.196.362-.375.612-.538a2.544 2.544 0 0 1-.641-.583 2.24 2.24 0 0 1-.404-.963 8.828 8.828 0 0 1-.112-1.378c-.009-.557-.03-.932-.061-1.119-.027-.157-.077-.251-.14-.29-.08-.051-.248-.096-.496-.127a.858.858 0 0 1-.564-.29C8.57 1.401 8.5 1.185 8.5.921 8.5.317 8.933 0 9.716 0c.71 0 1.286.19 1.72.574.432.382.656.893.671 1.522.02.952.033 1.553.043 1.802.009.238.041.458.097.658a.942.942 0 0 0 .26.447c.133.124.364.28.693.466a.926.926 0 0 1 .493.846c0 .252-.058.446-.183.58-.109.115-.281.237-.52.371-.21.118-.377.244-.504.376-.118.123-.212.315-.277.578-.025.102-.045.35-.06.733-.013.392-.027.912-.042 1.56a2.09 2.09 0 0 1-.305 1.097c-.2.323-.486.574-.853.75a2.811 2.811 0 0 1-1.233.263c-.784 0-1.216-.322-1.216-.934 0-.256.07-.47.214-.636a.855.855 0 0 1 .562-.297c.201-.027.344-.056.418-.083.048-.017.096-.06.14-.134a.996.996 0 0 0 .107-.396c.02-.195.031-.502.031-.92 0-.573.039-1.045.117-1.417.08-.382.222-.701.427-.954z"></path>\n' +
         '</svg>\n',
       title: 'CodeCup'
     };

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