@itfin/components 1.2.84 → 1.2.86

package/src/components/modal/DeleteConfirmModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <slot name="activator" :on="{ click: onClick }" :loading="loading">
+      <itf-button
+        icon
+        :disabled="loading || disabled"
+        :loading="loading"
+        @click.stop.prevent="onClick"
+      >
+        <itf-icon name="trash" />
+      </itf-button>
+    </slot>
+
+    <itf-modal :visible.sync="isModalShown" @keyup.native.enter="onConfirm">
+      <div slot="content" class="modal-content rounded-3 shadow itf-append-context">
+        <div class="modal-body p-4 text-center">
+          <slot>
+            <h5 class="mb-0">{{$t('components.popover.confirmDelete')}}</h5>
+            <p class="mb-0">{{$t('components.popover.areYouSureToDeleteThis')}}</p>
+          </slot>
+        </div>
+        <div class="modal-footer flex-nowrap p-0">
+          <button
+            type="button"
+            class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0"
+            data-bs-dismiss="modal"
+            @click="$emit('cancel')"
+          >
+            <span v-html="$t('components.popover.noKeepIt')"></span>
+            <kbd>Esc</kbd>
+          </button>
+          <button
+            type="button"
+            class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end fw-bold"
+            :class="confirmClass"
+            @click="onConfirm"
+          >
+            <span v-html="$t('components.popover.yesDelete')"></span>
+            <kbd>↵</kbd>
+          </button>
+        </div>
+      </div>
+
+    </itf-modal>
+  </div>
+</template>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import itfModal from './Modal.vue';
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfButton,
+    itfModal
+  }
+})
+class itfDeleteConfirmModal extends Vue {
+  @Prop(Boolean) loading;
+  @Prop({ type: Boolean, default: false }) disabled;
+  @Prop({ type: String, default: 'text-danger' }) confirmClass;
+  @Prop({ type: String, default () { return this.$t('noKeepIt'); } }) cancelCaption;
+  @Prop({ type: String, default () { return this.$t('yesDelete'); } }) deleteCaption;
+
+  isModalShown = false;
+
+  onClick() {
+    this.isModalShown = true;
+  }
+
+  onConfirm() {
+    this.isModalShown = false;
+    this.$emit('delete');
+  }
+}
+</script>

package/src/components/modal/ItemEditor.vue

@@ -0,0 +1,219 @@
+<template>
+  <itf-modal
+    ref="modal"
+    :data-test="dataTest"
+    append-to-body
+    :visible="value"
+    persistent
+    close-icon
+    :fullscreen="fullscreen"
+    :title="title"
+    content
+    :size="size"
+    @keyup.native.enter="submitSaveItem()"
+    @update:visible="$emit('input', $event)"
+    @close="onClose"
+  >
+    <itf-alert
+      v-if="showError"
+      outlined
+      type="danger"
+      dismissible
+      :message="errorMessage"
+    />
+
+    <itf-form v-if="showContent" ref="form">
+      <slot />
+    </itf-form>
+
+    <slot name="after-body" />
+
+    <template #footer>
+      <slot name="footer">
+        <itf-delete-confirm-popover v-if="canDelete" :loading="loading" @delete="deleteItem">
+          <template #activator="{ on }">
+            <itf-button color="outline-danger" v-on="on">
+              {{ $t('components.modal.delete') }}
+            </itf-button>
+          </template>
+        </itf-delete-confirm-popover>
+        <slot name="help"></slot>
+
+        <div class="itf-spacer" />
+
+        <itf-button
+          v-if="!readonly"
+          squircle
+          data-test="item-editor-cancel"
+          :disabled="loading"
+          secondary
+          class="me-2"
+          @click="$emit('input', false)"
+        >
+          <span class="me-1">{{ $t('components.modal.cancel') }}</span>
+          <kbd>Esc</kbd>
+        </itf-button>
+
+        <slot
+          name="save-btn"
+          :loading="loading"
+        >
+          <itf-button
+            primary
+            squircle
+            data-test="item-editor-save"
+            :disabled="loading"
+            :loading="loading"
+            @click="submitSaveItem()"
+          >
+            <span class="me-1">{{ saveBtnCaption }}</span>
+            <kbd>↵</kbd>
+          </itf-button>
+        </slot>
+      </slot>
+    </template>
+  </itf-modal>
+</template>
+<script>
+import { Vue, Component, Model, Prop, Watch, Provide } from 'vue-property-decorator';
+import itfAlert from '../alert/Alert';
+import itfForm from '../form/Form';
+import itfModal from '../modal/Modal';
+import itfButton from '../button/Button';
+import itfIcon from '../icon/Icon';
+import itfDeleteConfirmPopover from '../popover/DeleteConfirmPopover.vue';
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfAlert,
+    itfForm,
+    itfModal,
+    itfButton,
+    itfDeleteConfirmPopover
+  }
+})
+class itfItemEditor extends Vue {
+  @Provide('itemEditorForm')
+  getForm () {
+    return this.$refs.form;
+  }
+
+  @Model('input') value;
+  @Prop({ type: String, default () { return this.$t('components.modal.itemHasBeenSuccessfullySaved'); } }) successMessage;
+  @Prop({ type: String, default () { return this.$t('components.modal.itemHasBeenSuccessfullyDeleted'); } }) successDeleteMessage;
+  @Prop() saveFunc;
+  @Prop() deleteFunc;
+  @Prop() dataTest;
+  @Prop(String) title;
+  @Prop({ type: String, default () { return this.$t('components.modal.save'); } }) saveBtnCaption;
+  @Prop({ type: String, default: 'lg' }) size;
+  @Prop(Boolean) canDelete;
+  @Prop(Boolean) fullscreen;
+  @Prop(Boolean) readonly; // показує форму, але кнопка Save не викликає saveFunc
+  @Prop() createdAt;
+  @Prop() creator;
+
+  loading = false;
+  showError = false;
+  showContent = false;
+
+  errorMessage = null;
+
+  details = {};
+
+  mounted () {
+    this.onShowChange();
+  }
+
+  resetValidation () {
+    this.$refs.form.resetValidation();
+  }
+
+  reassignFormInputs (form) {
+    const inputs = [];
+    // Copied from VForm's previous life* which had a getInputs() function
+    const search = (children, depth = 0) => {
+      for (let index = 0; index < children.length; index++) {
+        const child = children[index];
+        if (child.errorBucket !== undefined) { inputs.push(child); } else { search(child.$children, depth + 1); }
+      }
+      if (depth === 0) { return inputs; }
+    };
+    search(form.$children);
+    form.components = inputs;
+  }
+
+  async submitSaveItem (successCallback) {
+    if (!this.$refs.form) {
+      return;
+    }
+    this.reassignFormInputs(this.$refs.form); // це потрібно щоб працювала валідація вкладених v-form, наприклад, кастомні поля
+
+    if (!this.readonly && !this.$refs.form.doValidation()) {
+      this.$refs.modal.scrollModalTop();
+      return;
+    }
+
+    this.loading = true;
+    this.showError = false;
+
+    try {
+      if (!this.readonly) {
+        const data = await this.saveFunc();
+        if (this.successMessage) {
+          this.$showSuccess(this.successMessage);
+        }
+        setTimeout(() => {
+          this.$emit('saved', data);
+          if (typeof successCallback === 'function') {
+            successCallback();
+          }
+        }, 600); // modal animation 500 + 100 delay
+      }
+      this.$emit('input', false);
+    } catch (err) {
+      this.$emit('save-error');
+      this.errorMessage = err.message || this.$t('components.modal.networkProblem');
+      this.$refs.modal && this.$refs.modal.scrollModalTop();
+      this.$showError(this.$t('components.modal.pleaseFixTheErrorsBelowToProceed'));
+
+      this.showError = true;
+    }
+    this.loading = false;
+  }
+
+  async deleteItem () {
+    this.loading = true;
+    this.showError = false;
+
+    try {
+      const data = await this.deleteFunc();
+
+      this.$emit('deleted', data);
+
+      this.$emit('input', false);
+
+      this.$showSuccess(this.successDeleteMessage);
+    } catch (err) {
+      this.errorMessage = err.message || this.$t('components.modal.networkProblem');
+
+      this.showError = true;
+    }
+    this.loading = false;
+  }
+
+  @Watch('value')
+  onShowChange () {
+    this.$nextTick(() => this.$refs.form && this.$refs.form.resetValidation());
+    this.showError = false;
+    if (this.value) {
+      this.showContent = true;
+    }
+  }
+
+  onClose() {
+    this.showContent = false;
+  }
+}
+</script>

package/src/components/modal/Modal.vue

@@ -5,20 +5,22 @@
       class="modal-dialog"
       :class="{[`modal-${size}`]: size, 'modal-fullscreen': fullscreen, 'modal-fullscreen-sm-down': !fullscreen}"
     >
-      <div class="modal-content itf-append-context" ref="content" @click.stop>
-        <div class="modal-header">
-          <slot name="title">
-            <h5 class="modal-title" :id="modalId">{{title}}</h5>
-          </slot>
-          <itf-button icon @click="close" :aria-label="$t('components.close')" class="btn-close"></itf-button>
+      <slot name="content">
+        <div class="modal-content itf-append-context" ref="content" @click.stop>
+          <div v-if="title" class="modal-header">
+            <slot name="title">
+              <h5 class="modal-title" :id="modalId">{{title}}</h5>
+            </slot>
+            <itf-button icon @click="close" :aria-label="$t('components.close')" class="btn-close"></itf-button>
+          </div>
+          <div class="modal-body" v-if="value">
+            <slot></slot>
+          </div>
+          <div class="modal-footer" v-if="$slots.footer">
+            <slot name="footer"></slot>
+          </div>
         </div>
-        <div class="modal-body" v-if="value">
-          <slot></slot>
-        </div>
-        <div class="modal-footer" v-if="$slots.footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
+      </slot>
     </div>
   </div>
 

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

@@ -1,9 +1,10 @@
 import { storiesOf } from '@storybook/vue';
 import itfModal from './Modal.vue';
+import itfDeleteConfirmModal from './DeleteConfirmModal.vue';
+import itfItemEditor from './ItemEditor.vue';
 import itfForm from '../form/Form.vue';
+import itfTextField from '../text-field/TextField.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)
@@ -13,12 +14,14 @@ storiesOf('Common', module)
       itfForm,
       itfLabel,
       itfModal,
-      itfDatePicker,
-      itfDateRangePicker
+      itfTextField,
+      itfDeleteConfirmModal,
+      itfItemEditor
     },
     data() {
       return {
         isVisible: false,
+        isItemEdit: false,
         from: '2021-01-16',
         to: null,
         dates: [],
@@ -29,7 +32,7 @@ storiesOf('Common', module)
     },
     methods: {
       submit() {
-        this.$refs.form.doValidation();
+        console.info('saved');
       },
       reset() {
         this.$refs.form.resetValidation();
@@ -42,17 +45,19 @@ 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>
 
       <itf-app ref="app">
 
+        <itf-delete-confirm-modal></itf-delete-confirm-modal>
+
+        <button @click="isItemEdit = !isItemEdit" class="btn btn-primary" type="button">Show item edit</button>
+        <itf-item-editor v-model="isItemEdit" :save-func="submit" title="Edit item">
+          <itf-text-field />
+        </itf-item-editor>
+
         <button @click="isVisible = !isVisible" class="btn btn-primary" type="button">Show modal</button>
 {{isVisible}}
         <itf-modal title="Test" :visible.sync="isVisible">

package/src/components/popover/ConfirmPopover.vue

@@ -1,5 +1,5 @@
 <template>
-  <itf-popover :visible.sync="value" ref="popover" :trigger="trigger" custom-class="nopadding">
+  <itf-popover :visible.sync="value" ref="popover" :trigger="trigger" custom-class="nopadding" :placement="placement">
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>
     </template>

package/src/components/popover/DeleteConfirmPopover.vue

@@ -0,0 +1,39 @@
+<template>
+  <itf-confirm-popover :cancel-caption="cancelCaption" :confirm-class="confirmClass" :confirm-caption="deleteCaption" @confirm="$emit('delete')">
+    <template #activator="{ on }">
+      <slot name="activator" :on="on" :loading="loading">
+        <itf-button
+          icon
+          :disabled="loading || disabled"
+          :loading="loading"
+          v-on="on"
+          @click.stop.prevent
+        >
+          <itf-icon name="trash" />
+        </itf-button>
+      </slot>
+    </template>
+    <slot>{{$t('components.popover.areYouSureToDeleteThis')}}</slot>
+  </itf-confirm-popover>
+</template>
+<script>
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import itfConfirmPopover from './ConfirmPopover';
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfButton,
+    itfConfirmPopover
+  }
+})
+class itfDeletePopover extends Vue {
+  @Prop(Boolean) loading;
+  @Prop({ type: Boolean, default: false }) disabled;
+  @Prop({ type: String, default: 'text-danger' }) confirmClass;
+  @Prop({ type: String, default () { return this.$t('components.popover.noKeepIt'); } }) cancelCaption;
+  @Prop({ type: String, default () { return this.$t('components.popover.yesDelete'); } }) deleteCaption;
+}
+</script>

package/src/components/popover/IconPopover.vue

@@ -0,0 +1,136 @@
+<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 @click="onSelectIcon(null)">
+          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')" @click="onRandom">
+          <itf-icon name="shuffle" />
+        </itf-button>
+      </div>
+
+      <div class="itf-select-popover__scroll text-start">
+        <template v-if="!search && recentIcons.length">
+          <div class="py-1 text-muted">Recent</div>
+          <div class="d-flex align-items-start flex-wrap flex-grow-0">
+            <itf-button v-for="icon of recentIcons" :key="icon" icon v-tooltip="icon" @click="onSelectIcon(icon)">
+              <itf-icon :name="icon" />
+            </itf-button>
+          </div>
+
+          <div class="py-1 text-muted">Icons</div>
+        </template>
+        <div class="d-flex align-items-start flex-wrap flex-grow-0">
+          <itf-button v-for="icon of iconsList" :key="icon" icon v-tooltip="icon" @click="onSelectIcon(icon)">
+            <itf-icon :name="icon" />
+          </itf-button>
+        </div>
+        <div v-if="!iconsList.length" class="text-muted pt-1">
+          No results
+        </div>
+      </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';
+
+const RECENT_ITEMS_KEY = 'itfSelectPopoverRecent';
+
+export default @Component({
+  name: 'itfSelectPopover',
+  directives: {
+    tooltip
+  },
+  components: {
+    itfIcon,
+    itfPopover,
+    itfButton,
+    itfTextField
+  },
+})
+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 = [];
+
+  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();
+
+    if (icon) {
+      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)) : [];
+  }
+
+  onRandom() {
+    const keys = Object.keys(iconsList);
+    const icon = keys[Math.floor(Math.random() * keys.length)];
+    this.onSelectIcon(icon);
+  }
+}
+</script>