@itfin/components 1.2.84 → 1.2.86

package/src/components/popover/SelectPopover.vue

@@ -0,0 +1,127 @@
+<template>
+  <itf-popover :visible.sync="value" ref="popover" :trigger="trigger" custom-class="nopadding" :placement="placement">
+    <template #activator="{ on }">
+      <slot name="activator" :on="on"></slot>
+    </template>
+
+    <div class="modal-body py-2 px-3 text-center itf-select-popover">
+      <div class="d-flex align-items-center justify-content-between">
+        <div class="mb-0" v-if="title" v-html="title"></div>
+
+        <itf-button v-if="removable" small secondary>
+          Remove
+        </itf-button>
+      </div>
+
+      <div class="d-flex py-2">
+        <itf-text-field
+          class="flex-grow-1 me-2"
+          v-model="search"
+          placeholder="Filter"
+          prepend-icon="search"
+          clearable
+        />
+
+        <itf-button v-tooltip="$t('random')">
+          <itf-icon name="shuffle" />
+        </itf-button>
+      </div>
+
+      <div class="itf-select-popover__scroll text-start">
+        <swatches
+          background-color="transparent"
+          :value="value"
+          :swatches="colors"
+          shapes="circles"
+          inline
+          swatch-size="24"
+          show-border
+          @input="$emit('input', $event)"
+        />
+      </div>
+      <slot>
+      </slot>
+    </div>
+  </itf-popover>
+</template>
+<style lang="scss">
+  .itf-select-popover {
+    width: 280px;
+    min-width: 180px;
+    max-width: calc(100vw - 24px);
+    height: 356px;
+    max-height: 70vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    &__scroll {
+      overflow: hidden auto;
+      flex-grow: 1;
+    }
+  }
+</style>
+<script>
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import itfPopover from './Popover';
+import itfIcon from '../icon/Icon';
+import iconsList from '../icon/icons';
+import itfButton from '../button/Button';
+import itfTextField from '../text-field/TextField.vue';
+import tooltip from '../../directives/tooltip';
+import Swatches from 'vue-swatches';
+import 'vue-swatches/dist/vue-swatches.css';
+
+const RECENT_ITEMS_KEY = 'itfSelectPopoverRecent';
+
+export default @Component({
+  name: 'itfSelectPopover',
+  directives: {
+    tooltip
+  },
+  components: {
+    itfIcon,
+    itfPopover,
+    itfButton,
+    itfTextField,
+    Swatches
+  },
+})
+class itfSelectPopover extends Vue {
+  @PropSync('visible') value;
+  @Prop({ type: String, default: '' }) title;
+  @Prop({ type: Boolean, default: '' }) removable;
+  @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
+  @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
+
+  search = '';
+  recentIcons = [];
+
+  colors = [
+    ['#FFFFFF', '#DDE6E8', '#BDC3C8', '#E84B3C', '#F39C19', '#F2C511', '#27AF60', '#3398DB', '#8E43AD']
+  ];
+
+  created() {
+    this.recentIcons = this.getRecentIcons();
+  }
+
+  get iconsList() {
+    return Object.keys(iconsList).filter((icon) => icon.includes(this.search.toLowerCase()));
+  }
+
+  onSelectIcon(icon) {
+    this.search = '';
+    this.$emit('input', icon);
+    this.$refs.popover.hide();
+
+    const icons = this.getRecentIcons();
+    icons.unshift(icon);
+    this.recentIcons = [...new Set(icons.slice(0, 14))];
+    localStorage.setItem(RECENT_ITEMS_KEY, JSON.stringify(this.recentIcons));
+  }
+
+  getRecentIcons() {
+    return localStorage.getItem(RECENT_ITEMS_KEY) ? JSON.parse(localStorage.getItem(RECENT_ITEMS_KEY)) : [];
+  }
+}
+</script>

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

@@ -1,25 +1,32 @@
 import { storiesOf } from '@storybook/vue';
 import itfPopover from './Popover.vue';
 import itfConfirmPopover from './ConfirmPopover.vue';
+import itfIconPopover from './IconPopover.vue';
+import itfSelectPopover from './SelectPopover.vue';
+import itfDeleteConfirmPopover from './DeleteConfirmPopover.vue';
 import itfForm from '../form/Form.vue';
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
 import itfLabel from '../form/Label.vue';
-import itfDatePicker from '../datepicker/DatePicker.vue';
-import itfDateRangePicker from '../datepicker/DateRangePicker.vue';
 import itfApp from '../app/App.vue';
 
 storiesOf('Common', module)
   .add('Popover', () => ({
     components: {
       itfApp,
+      itfIcon,
       itfForm,
+      itfButton,
       itfLabel,
       itfPopover,
-      itfDatePicker,
-      itfDateRangePicker,
-      itfConfirmPopover
+      itfIconPopover,
+      itfSelectPopover,
+      itfConfirmPopover,
+      itfDeleteConfirmPopover
     },
     data() {
       return {
+        icon: 'shuffle',
         isVisible: false,
         from: '2021-01-16',
         to: null,
@@ -44,11 +51,6 @@ storiesOf('Common', module)
 
   <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>
@@ -59,6 +61,20 @@ storiesOf('Common', module)
         <itf-confirm-popover>
           <button slot="activator" class="btn btn-primary" type="button">Show modal</button>
         </itf-confirm-popover>
+
+          <itf-icon-popover title="Icon" removable v-model="icon">
+            <itf-button slot="activator" icon>
+              <itf-icon :name="icon" />
+            </itf-button>
+          </itf-icon-popover>
+
+          <itf-select-popover title="Icon" removable v-model="icon">
+            <itf-button slot="activator" icon>
+              <itf-icon :name="icon" />
+            </itf-button>
+          </itf-select-popover>
+
+          <itf-delete-confirm-popover />
         </div>
       </itf-app>
     </div>`,

package/src/components/sortable/AutoScroll.vue

@@ -0,0 +1,142 @@
+<template>
+  <div @mousemove="onMouseMove" @touchmove="onTouchMove">
+    <!-- @slot Content to scroll -->
+    <slot />
+  </div>
+</template>
+<script>
+const THRESHOLD_MIN = 40;
+const THRESHOLD_MAX = 100;
+const THROTTLE_INDEX = 5;
+
+/**
+ * @description
+ * Automatically scroll window or closest parent element
+ * taken by selector from `parent-selector` prop
+ * when mouse cursor/touch is close to its borders.
+ */
+export default {
+  name: 'itfAutoScroll',
+  props: {
+    /**
+       * Auto scroll disabled if set to true
+       */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+       * Selector for parent which is scrolled. By default it is window.
+       * Can be selected by tag name, class name, element id.
+       */
+    parentSelector: {
+      type: String,
+      default: null
+    }
+  },
+  data () {
+    return {
+      parent: null
+    };
+  },
+  watch: {
+    parentSelector () {
+      this.resolveParentSelector();
+    }
+  },
+  mounted () {
+    this.resolveParentSelector();
+  },
+  methods: {
+    /**
+       * Scroll parent element/window accordingly to received pageX, pageY coordinates
+       *
+       * @param {number} pageX PageX coordinate
+       * @param {number} pageY PageY coordinate
+       * @param {boolean} gradually Scroll gradually. True by default
+       * @public
+       */
+    autoScroll (pageX, pageY, gradually = true) {
+      this.performAutoScroll(pageX, pageY, gradually);
+    },
+    /**
+       * Find parent by selector. Empty parent means `window` by default.
+       */
+    resolveParentSelector () {
+      this.parent = null;
+      if (this.parentSelector && this.parentSelector !== 'window') {
+        this.parent = this.$el.closest(this.parentSelector);
+      }
+    },
+    onMouseMove (event) {
+      const { pageX, pageY } = event;
+      this.performAutoScroll(pageX, pageY, false);
+    },
+    onTouchMove (event) {
+      const { pageX, pageY } = event.targetTouches[0];
+      this.performAutoScroll(pageX, pageY, false);
+    },
+    performAutoScroll (pageX, pageY, gradually = true) {
+      if (this.disabled) {
+        return;
+      }
+      let x;
+      let y;
+      if (this.parent) {
+        const rect = this.parent.getBoundingClientRect();
+        const scrollLeft = document.documentElement
+          ? document.documentElement.scrollLeft
+          : document.body.scrollLeft;
+        const scrollTop = document.documentElement
+          ? document.documentElement.scrollTop
+          : document.body.scrollTop;
+        x = pageX - (rect.left + scrollLeft);
+        y = pageY - (rect.top + scrollTop);
+      } else {
+        x = pageX - window.pageXOffset;
+        y = pageY - window.pageYOffset;
+      }
+      const width = this.parent ? this.parent.clientWidth : window.innerWidth;
+      const height = this.parent
+        ? this.parent.clientHeight
+        : window.innerHeight;
+      const shiftX = this.getShift(width, x, gradually);
+      const shiftY = this.getShift(height, y, gradually);
+      if (shiftX !== 0 || shiftY !== 0) {
+        (this.parent || window).scrollBy(shiftX, shiftY);
+        /**
+           * Autoscroll event
+           * @param {number} shiftX Shift by axis X
+           * @param {number} shiftY Shift by axis Y
+           */
+        this.$emit('autoscroll', shiftX, shiftY);
+      }
+    },
+    /**
+       * Calculate shift x/y for scrolling
+       * @param {number} size
+       * @param {number} position
+       * @param {boolean} gradually
+       * @returns {number}
+       */
+    getShift (size, position, gradually) {
+      if (THRESHOLD_MAX <= size) {
+        let threshold = size / 10;
+        threshold = threshold > THRESHOLD_MAX ? THRESHOLD_MAX : threshold;
+        threshold = threshold < THRESHOLD_MIN ? THRESHOLD_MIN : threshold;
+        const boundTop = threshold;
+        const boundBottom = size - threshold;
+        if (position < boundTop) {
+          return gradually ? -threshold / THROTTLE_INDEX : position - boundTop;
+        }
+        if (position > boundBottom) {
+          return gradually
+            ? threshold / THROTTLE_INDEX
+            : position - boundBottom;
+        }
+      }
+      return 0;
+    }
+  }
+};
+</script>

package/src/components/sortable/Sortable.scss

@@ -0,0 +1,93 @@
+.itf-sortable {
+  .hidden {
+    display: none!important;
+    visibility: hidden!important;
+  }
+
+  .itf-sortable-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .up-source-item {
+    opacity: 0.2;
+  }
+
+  .itf-sortable-list-mocked {
+    position: relative;
+  }
+
+  .itf-sortable-list-mocked,
+  .itf-sortable-list-mocked * {
+    user-select: none;
+  }
+
+  .up-cursor-item {
+    position: absolute;
+    z-index: var(--zindex-dropdown);
+    cursor: move;
+    user-select: none;
+  }
+
+  .up-cursor-item-presentation {
+    box-shadow: var(--pop-shadow);
+  }
+
+  &.up-cursor-item-white {
+    .up-cursor-item-presentation {
+      background-color: var(--bg-inverse);
+    }
+  }
+}
+
+.itf-sortable-y {
+  --sortable-ws: 2rem;
+
+  margin: 0 calc(var(--sortable-ws) / 2 * -1);
+
+  //@include media-breakpoint-up(md) {
+  //  margin: 0 calc(var(--sortable-ws) * -1);
+  //}
+
+  .itf-sortable-drag-icon {
+    padding: calc(var(--sortable-ws) / 2);
+    color: var(--text-2);
+    pointer-events: all;
+    line-height: 0;
+
+    //@include media-breakpoint-up(md) {
+    //  margin-right: var(--sortable-ws);
+    //  padding: 0;
+    //}
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 0;
+    padding-right: calc(var(--sortable-ws) / 2);
+    background: var(--bg-inverse);
+    border-bottom: var(--border-base);
+    pointer-events: none;
+
+    //@include media-breakpoint-up(md) {
+    //  padding: 1rem var(--sortable-ws);
+    //  pointer-events: all;
+    //}
+
+    &:hover {
+      cursor: grab;
+
+      .itf-sortable-drag-icon {
+        color: var(--brand-primary);
+      }
+    }
+  }
+
+  [sortable-skip='true'] {
+    cursor: default;
+    pointer-events: all;
+  }
+}