@itfin/components 1.2.87 → 1.2.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.87",
+  "version": "1.2.89",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -20,6 +20,7 @@
   ],
   "dependencies": {
     "@egjs/vue-flicking": "^4.10.4",
+    "@mdi/js": "^7.2.96",
     "@popperjs/core": "^2.11.8",
     "@vue/cli-service": "^5.0.1",
     "@vue/composition-api": "^1.7.1",

package/src/assets/scss/boostrap.scss

@@ -0,0 +1,124 @@
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import "~bootstrap/scss/functions.scss";
+
+// 2. Include any default variable overrides here
+$font-family-base: 'Fira Sans', sans-serif;
+$headings-font-family: 'Fira Sans', sans-serif;
+$font-family-monospace: "Fira Mono", "Courier New", monospace;
+
+$headings-font-size-base:     1rem;
+$h1-font-size:                $headings-font-size-base * 2;
+$h2-font-size:                $headings-font-size-base * 1.75;
+$h3-font-size:                $headings-font-size-base * 1.5;
+$h4-font-size:                $headings-font-size-base * 1.25;
+$h5-font-size:                $headings-font-size-base * 1.125;
+$h6-font-size:                $headings-font-size-base;
+
+$zindex-toaster:                    1071 !default;
+
+$border-radius: .5rem;
+$border-radius-sm: .375rem;
+$border-radius-lg: .75rem;
+
+$project-tnm: #311b92;
+$project-fixed: #388E3C;
+$project-nonprofit: #D32F2F;
+
+$info: #5981c0;
+$success: #10834e;
+$warning: #cda277;
+$danger: #cb4839;
+
+$primary: #0B314F;
+$link-color: #0B314F;
+$input-btn-focus-width: .125rem;
+
+$input-bg: #f3f3f3;
+$input-border-color: rgba(#000, .08);
+$input-border-radius: 10px;
+$input-font-size: 0.875rem;
+$input-font-family: "Fira Mono", "Courier New", monospace;
+
+$input-focus-bg: #fff;
+$input-focus-border-color: #fff;
+
+$form-label-margin-bottom: .1rem;
+$input-focus-border: rgb(11 49 79 / 25%);
+
+$form-check-input-border: 1px solid rgba(#000, .08);
+$form-switch-focus-color: tint-color($primary, 50%);
+
+$modal-backdrop-bg: #999;
+$modal-backdrop-opacity: .25;
+$modal-content-border-radius: 0;
+
+$secondary: #dfe1e6;
+
+// popover
+$popover-border-width: 2px;
+
+// dropdown
+
+// Dark theme
+$dark-body-bg: #2e3136;
+$dark-border-color: #4a4a4a;
+$dark-body-color: #ddd;
+$dark-input-bg: #383b41;
+
+$dark-primary: #FFCC00;
+$dark-link-color: #ead272;
+$dark-secondary: #464a53;
+$dark-input-focus-border-color: #3d3d3d;
+$dark-btn-primary-color: $dark-primary;
+$dark-btn-secondary-color: $dark-secondary;
+$dark-input-box-shadow: #3d3d3d;
+$dark-input-focus-border: rgb(244 206 176 / 25%);
+
+$pagination-border-width: 0;
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import "~bootstrap/scss/variables.scss";
+@import "~bootstrap/scss/mixins.scss";
+@import "~bootstrap/scss/maps.scss";
+@import "~bootstrap/scss/utilities.scss";
+
+$custom-colors: (
+  "white": #fff,
+  "black": #1e1e1e
+);
+$theme-colors: map-merge($theme-colors, $custom-colors);
+
+// Text colors
+$all-colors: map-merge-multiple($theme-colors, $custom-colors, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
+$utilities: map-merge(
+    $utilities,
+    (
+      "color": map-merge(
+          map-get($utilities, "color"),
+          (
+            values: map-merge(
+                map-get(map-get($utilities, "color"), "values"),
+                  (
+                    $all-colors
+                  ),
+            ),
+          ),
+      ),
+    )
+);
+@import "~bootstrap/scss/utilities/api";
+
+// Fonts
+$baseFontSize: 16px;
+$hintFontSize: 12px;
+
+// Border radius
+$borderRadiusM: 4px;
+$borderRadiusL: 8px;
+
+// Colors
+$primaryColor: #0B314F;
+$primaryColor15: #DAE0E5;
+$baseText: #1e1e1e;
+$gray5: #F0F0F1;
+$gray50: #787885;

package/src/assets/scss/components/_icon.scss

@@ -1,5 +1,7 @@
 @import '../variables';
 
 .itf-icon {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
 }

package/src/assets/scss/main.scss

@@ -47,3 +47,14 @@
 .color-outcome {
   color: #b91e1e !important;
 }
+
+kbd {
+  background-color: rgba(0, 0, 0, .15) !important;
+  color: #000 !important;
+  font-size: .75rem !important;
+
+  [data-theme="dark"] &, .btn-primary & {
+    background-color: rgba(255, 255, 255, .25) !important;
+    color: #fff !important;
+  }
+}

package/src/components/customize/Inline/Date.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="itf-inline-edit">
+    <div ref="input" class="input" :role="editable ? 'button' : 'textbox'" tabindex="1" @keydown.space="onEnter" @keydown.enter="onEnter" @focus="$emit('focus')" @blur="$emit('blur')">
+      <span v-if="value">{{ value | formatDate }}</span>
+      <span v-else class="text-muted">Empty</span>
+    </div>
+
+    <div style="display: none">
+      <div ref="dropdown" class="itf-datepicker__dropdown">
+        <itf-date-picker-inline
+          :value="value"
+          start-view="days"
+          display-format="MM/dd/yyyy"
+          value-format="yyyy-MM-dd"
+          @input="selectInlineDate"
+        ></itf-date-picker-inline>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.itf-inline-edit .input {
+  border: 0 none;
+  margin: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+}
+</style>
+<script>
+import {Vue, Component, Model, Watch, Prop} from 'vue-property-decorator';
+import itfTextField from '../../text-field/TextField.vue';
+import itfDatePickerInline from '../../datepicker/DatePickerInline.vue';
+import tippy from 'tippy.js';
+import { formatDate } from '../../../helpers/formatters';
+
+export default @Component({
+  name: 'itfCustomizeInlineDate',
+  components: {
+    itfTextField,
+    itfDatePickerInline
+  },
+  filters: {
+    formatDate
+  }
+})
+
+class itfCustomizeInlineText extends Vue {
+  @Model('input') value;
+  @Prop({ type: String, default: 'bottom-start' }) placement;
+  @Prop({ type: Boolean, default: false }) editable;
+
+  tooltip = null;
+
+  mounted() {
+    if (!this.editable) {
+      return;
+    }
+    const context = this.$el.closest('.itf-append-context') || document.body;
+    this.tooltip = tippy(this.$refs.input, {
+      interactiveBorder: 30,
+      interactiveDebounce: 75,
+      animation: 'scale',
+      arrow: true,
+      content: this.$refs.dropdown,
+      allowHTML: true,
+      trigger: 'click',
+      interactive: true,
+      placement: this.placement,
+      appendTo: context
+    });
+  }
+
+  selectInlineDate(date) {
+    this.$emit('input', date);
+    this.tooltip.hide();
+    this.isFocused = false;
+  }
+
+  onEnter() {
+    this.tooltip.show();
+  }
+}
+</script>

package/src/components/customize/Inline/Multiselect.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="itf-inline-edit">
+    <itf-select
+      ref="input"
+      class="input"
+      role="button"
+      multiple
+      :placeholder="focused ? 'Search for an option...' : 'Empty'"
+      :tabindex="1"
+      :disabled="!editable"
+      :options="field && field.Options"
+      :reduce="option => option.Name"
+      :get-option-label="option => option.Name"
+      @search:focus="$emit('focus')"
+      @search:blur="$emit('blur')">
+      <template #option="{ option }">
+        <div>{{ option.Name }}</div>
+      </template>
+    </itf-select>
+  </div>
+</template>
+<style lang="scss">
+.itf-inline-edit .itf-select .form-control {
+  border: 0 none;
+  margin: 0;
+  outline: 0;
+  resize: none;
+  min-height: auto;
+  padding: 0.1rem 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  box-shadow: none !important;
+  background: transparent !important;
+}
+</style>
+<script>
+import {Vue, Component, Model, Watch, Prop} from 'vue-property-decorator';
+import itfTextField from '../../text-field/TextField.vue';
+import itfSelect from '../../select/Select.vue';
+
+export default @Component({
+  name: 'itfCustomizeInlineMultiselect',
+  components: {
+    itfTextField,
+    itfSelect
+  }
+})
+
+class itfCustomizeInlineMultiselect extends Vue {
+  @Model('input') value;
+  @Prop(Boolean) focused;
+  @Prop(Boolean) editable;
+  @Prop() field;
+}
+</script>

package/src/components/customize/Inline/Text.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="itf-inline-edit">
+    <div
+      :role="editable ? 'button' : 'textbox'"
+      tabindex="1"
+      ref="input"
+      @focus="onFocus"
+      @blur="onBlur"
+      @keydown.enter="onEnter"
+      @keydown.esc="onCancel"
+      class="notranslate"
+      spellcheck="true"
+      placeholder=" "
+      :contenteditable="editable"
+      v-html="value">
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.itf-inline-edit {
+  margin: -5px;
+  padding: 5px;
+}
+.notranslate {
+  border: 0 none;
+  margin: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+  max-width: 100%;
+  width: 100%;
+  white-space: pre-wrap;
+  word-break: break-word;
+  caret-color: var(--bs-body-color);
+}
+</style>
+<script>
+import { Vue, Component, Model, Prop } from 'vue-property-decorator';
+import itfTextField from '../../text-field/TextField.vue';
+
+export default @Component({
+  name: 'itfCustomizeInlineText',
+  components: {
+    itfTextField
+  }
+})
+
+class itfCustomizeInlineText extends Vue {
+  @Model('input') value;
+  @Prop(Boolean) editable;
+
+  mounted() {
+    this.$refs.input.addEventListener('paste', function(e) {
+      // cancel paste
+      e.preventDefault();
+
+      // get text representation of clipboard
+      var text = (e.originalEvent || e).clipboardData.getData('text/plain');
+
+      // insert text manually
+      document.execCommand("insertHTML", false, text);
+    });
+  }
+
+  onEnter(event) {
+    if (event.shiftKey) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.$refs.input.blur();
+  }
+
+  onBlur() {
+    this.$emit('input', this.$refs.input.innerHTML);
+    this.$emit('blur');
+  }
+
+  onCancel(event) {
+    event.target.value = this.value;
+    this.$refs.input.blur();
+  }
+
+  onFocus() {
+    this.$emit('focus');
+  }
+}
+</script>

package/src/components/customize/PropertiesEditMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-append-context">
+  <div class="itf-append-context" style="min-width: 300px">
     <div class="d-flex align-items-center px-3 py-2">
       <div class="me-1">
         <itf-icon-popover title="Icon" removable :value="value.Icon" @input="setParam({ Icon: $event })">
@@ -10,20 +10,77 @@
       </div>
 
       <div class="flex-grow-1">
-        <itf-text-field :value="value.Name"  @input="setParam({ Name: $event })" />
+        <itf-text-field ref="input" :value="value.Name"  @input="setParam({ Name: $event })" />
       </div>
     </div>
     <div>
       <a class="dropdown-item d-flex justify-content-between" @click.prevent="$emit('edit')">
         <span>{{ $t('components.customize.type') }}</span>
-        <span class="text-muted">{{ $t('components.customize.select') }} ></span>
+        <span class="text-muted">{{ itemType }} ></span>
       </a>
+      <ul class="itf-dropdown__menu shadow dropdown-menu dropdown-submenu">
+        <li><h6 class="dropdown-header">{{ $t('components.customize.type') }}</h6></li>
+        <li v-for="(type) of types">
+          <a class="dropdown-item d-flex align-items-center" href="" @click.prevent="setParam({ Type: type.Type })">
+            <itf-icon :name="type.Icon" :size="16" class="me-1" />
+            <span v-text="type.Name"></span>
+            <itf-icon v-if="value.Type === type.Type" name="check" />
+          </a>
+        </li>
+      </ul>
     </div>
+    <div v-if="value.Type === 'multiselect'" sortable-skip>
+      <div class="d-flex justify-content-between pe-2">
+        <h6 class="dropdown-header">{{ $t('components.customize.options') }}</h6>
+        <div v-if="value.Options && value.Options.length">
+          <itf-button icon small @click.prevent="addNewOption">
+            <itf-icon name="plus" />
+          </itf-button>
+        </div>
+      </div>
+
+      <div v-if="isNewOptionVisible" class="px-3">
+        <itf-text-field
+          ref="newOptionInput"
+          v-model="newOption"
+          placeholder="Type a new option..."
+          @blur="onBlurOption"
+          @keydown.enter="submitNewOption"
+        />
+      </div>
+      <div v-else-if="!value.Options || !value.Options.length" class="px-3">
+        <itf-button small block class="text-start" @click="addNewOption">
+          <itf-icon name="plus" />
+          {{ $t('components.customize.addOption') }}
+        </itf-button>
+      </div>
+
+      <sortable
+        :value="value.Options"
+        @input="setParam({ Options: $event })"
+        axis="y"
+        require-sortable-attribute
+        auto-scroll="window"
+      >
+        <div v-for="option of value.Options" class="dropdown-item d-flex justify-content-between" sortable>
+          <div>
+            <itf-icon class="dragHandle" name="drag_vertical" />
+            <span>{{ option.Name }}</span>
+          </div>
+          <span class="text-muted">></span>
+        </div>
+      </sortable>
+    </div>
+    <div><hr class="dropdown-divider"></div>
+    <div><a class="dropdown-item" @click.prevent="$emit('duplicate')"><itf-icon name="duplicate" /> {{ $t('components.customize.duplicateProperty') }}</a></div>
     <div>
-      <a class="dropdown-item d-flex justify-content-between" @click.prevent="$emit('edit')">
-        <span>{{ $t('components.customize.numberFormat') }}</span>
-        <span class="text-muted">{{ $t('components.customize.money') }} ></span>
-      </a>
+      <itf-delete-confirm-modal class="me-1" @delete="$emit('delete')">
+        <template #activator="{ on }">
+          <a class="dropdown-item text-danger" @click.prevent="on.click"><itf-icon name="trash" /> {{ $t('components.customize.deleteProperty') }}</a>
+        </template>
+        <h5 class="mb-0">{{$t('components.popover.confirmDelete')}}</h5>
+        <p class="mb-0">{{ $t('components.customize.areYouSureYouWantToDeleteThisField') }}</p>
+      </itf-delete-confirm-modal>
     </div>
   </div>
 </template>
@@ -32,22 +89,67 @@ import { Vue, Component, Model } from 'vue-property-decorator';
 import itfTextField from '../text-field/TextField.vue';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
+import Sortable from '../sortable/Sortable';
 import itfIconPopover from '../popover/IconPopover.vue';
+import {INLINE_TYPES} from './constants';
+import itfDeleteConfirmModal from "../modal/DeleteConfirmModal.vue";
+import PropertyItem from "./PropertyItem.vue";
 
 export default @Component({
   components: {
+    PropertyItem,
+    itfDeleteConfirmModal,
     itfButton,
     itfIcon,
     itfTextField,
-    itfIconPopover
+    itfIconPopover,
+    Sortable
   }
 })
 
 class PropertiesEditMenu extends Vue {
   @Model('input') value;
 
+  isNewOptionVisible = false;
+  newOption = '';
+
+  get types() {
+    return INLINE_TYPES;
+  }
+
+  get itemType() {
+    const type = INLINE_TYPES.find((type) => type.Type === this.value.Type);
+    return type ? type.Name : '';
+  }
+
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.input.focus();
+    });
+  }
+
   setParam(obj) {
     this.$emit('input', { ...this.value, ...obj });
   }
+
+  onBlurOption() {
+    this.isNewOptionVisible = false;
+  }
+
+  addNewOption() {
+    this.isNewOptionVisible = true;
+    this.$nextTick(() => {
+      this.$refs.newOptionInput.focus();
+    });
+  }
+
+  submitNewOption() {
+    const newOption = this.newOption;
+    if (newOption) {
+      this.setParam({ Options: [{ Name: newOption }, ...(this.value.Options || [])] });
+      this.newOption = '';
+      this.isNewOptionVisible = false;
+    }
+  }
 }
 </script>