@itfin/components 1.2.88 → 1.2.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.88",
+  "version": "1.2.90",
   "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/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

@@ -33,12 +33,10 @@ import itfTextField from '../../text-field/TextField.vue';
 import itfDatePickerInline from '../../datepicker/DatePickerInline.vue';
 import tippy from 'tippy.js';
 import { formatDate } from '../../../helpers/formatters';
-import PropertyInlineEdit from "@/components/customize/PropertyInlineEdit.vue";
 
 export default @Component({
   name: 'itfCustomizeInlineDate',
   components: {
-    PropertyInlineEdit,
     itfTextField,
     itfDatePickerInline
   },

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

@@ -37,12 +37,10 @@
 <script>
 import { Vue, Component, Model, Prop } from 'vue-property-decorator';
 import itfTextField from '../../text-field/TextField.vue';
-import PropertyInlineEdit from "@/components/customize/PropertyInlineEdit.vue";
 
 export default @Component({
   name: 'itfCustomizeInlineText',
   components: {
-    PropertyInlineEdit,
     itfTextField
   }
 })

package/src/components/customize/PropertiesEditMenu.vue

@@ -91,9 +91,9 @@ 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 "@/components/customize/constants";
-import itfDeleteConfirmModal from "@/components/modal/DeleteConfirmModal.vue";
-import PropertyItem from "@/components/customize/PropertyItem.vue";
+import {INLINE_TYPES} from './constants';
+import itfDeleteConfirmModal from "../modal/DeleteConfirmModal.vue";
+import PropertyItem from "./PropertyItem.vue";
 
 export default @Component({
   components: {

package/src/components/customize/PropertiesList.vue

@@ -13,6 +13,7 @@
         ref="properties"
         :field="field"
         :editable="editable"
+        :lock-fields="lockFields"
         :value="value[field.Id]"
         @input="$emit('input', { ...value, [field.Id]: $event })"
         @delete="onDelete(field)"
@@ -21,20 +22,29 @@
       />
     </sortable>
 
-    <div v-if="editable" class="text-start">
-      <itf-dropdown ref="newItemDd" autoclose="outside" class="flex-grow-1 mw-100" shadow :button-options="{ class: 'text-muted', small: true }">
-        <template #button>
-          <itf-icon name="plus" />
-          Add property
-        </template>
-        <div><h6 class="dropdown-header">{{ $t('components.customize.type') }}</h6></div>
-        <div v-for="type of types" :keys="type.Type">
-          <a class="dropdown-item d-flex align-items-center" @click.prevent="createNewField(type)">
-            <itf-icon :name="type.Icon" :size="16" class="me-1" />
-            {{ type.Name }}
-          </a>
-        </div>
-      </itf-dropdown>
+    <div v-if="editable && !lockFields" class="text-start">
+      <div v-if="isShowAll">
+        <itf-dropdown ref="newItemDd" autoclose="outside" class="flex-grow-1 mw-100" shadow :button-options="{ small: true }">
+          <template #button>
+            <span class="text-muted d-flex align-items-center">
+              <itf-icon name="plus" />
+              Add property
+            </span>
+          </template>
+          <div><h6 class="dropdown-header">{{ $t('components.customize.type') }}</h6></div>
+          <div v-for="type of types" :keys="type.Type">
+            <a class="dropdown-item d-flex align-items-center" @click.prevent="createNewField(type)">
+              <itf-icon :name="type.Icon" :size="16" class="me-1" />
+              {{ type.Name }}
+            </a>
+          </div>
+        </itf-dropdown>
+      </div>
+
+      <itf-button small class="text-muted" @click="toggleShowAll">
+        <itf-icon :name="isShowAll ? 'chevron_up' : 'chevron_down'" />
+        {{isShowAll ? $tc('components.customize.hideMoreProperties', 1, { n: 1 }) : $tc('components.customize.showMoreProperties', 1, { n: 1 })}}
+      </itf-button>
     </div>
   </div>
 </template>
@@ -91,6 +101,13 @@ class itfPropertiesList extends Vue {
   @PropSync('fields') list;
   @Prop({ type: Boolean, default: false }) loading;
   @Prop({ type: Boolean, default: false }) editable;
+  @Prop({ type: Boolean, default: false }) lockFields;
+
+  isShowAll = false;
+
+  toggleShowAll() {
+    this.isShowAll = !this.isShowAll;
+  }
 
   get types() {
     return INLINE_TYPES;
@@ -117,7 +134,6 @@ class itfPropertiesList extends Vue {
     newItem.Name = `${newItem.Name}${index ? ` (${parseInt(index[1], 10) + 1})` : ' (1)'}`;
     list.push(newItem);
     this.$emit('update:fields', list);
-    this.$refs.newItemDd.hide();
 
     this.$nextTick(() => {
       for (const prop of this.$refs.properties) {
@@ -139,7 +155,9 @@ class itfPropertiesList extends Vue {
       Visible: 'show'
     });
     this.$emit('update:fields', list);
-    this.$refs.newItemDd.hide();
+    if (this.$refs.newItemDd) {
+      this.$refs.newItemDd.hide();
+    }
 
     this.$nextTick(() => {
       setTimeout(() => {

package/src/components/customize/PropertyItem.vue

@@ -2,12 +2,12 @@
   <div class="b-properties-list__inner">
     <div class="b-properties-list__name" :class="{'editable': editable}">
       <div class="b-properties-list__icon">
-        <div v-if="editable" role="button" tabindex="-1" class="b-properties-list__draghandler" sortable>
+        <div v-if="editable && !lockFields" role="button" tabindex="-1" class="b-properties-list__draghandler" sortable>
           <itf-icon class="dragHandle" name="drag_vertical" />
         </div>
       </div>
 
-      <itf-dropdown :disabled="!editable" ref="editDd" autoclose="outside" class="flex-grow-1 mw-100" shadow :button-options="{ icon: true, block: true }" @close="onClose">
+      <itf-dropdown :disabled="!editable || lockFields" ref="editDd" autoclose="outside" class="flex-grow-1 mw-100" shadow :button-options="{ icon: true, block: true }" @close="onClose">
         <template #button>
           <div class="d-flex align-items-center">
             <itf-icon :name="field.Icon" :size="16" class="me-1" />
@@ -144,6 +144,7 @@ class itfPropertyItem extends Vue {
   @Prop() field;
   @Prop({ type: Boolean, default: false }) loading;
   @Prop({ type: Boolean, default: false }) editable;
+  @Prop({ type: Boolean, default: false }) lockFields;
 
   isEditMode = false;
   focusId = null;

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

@@ -60,6 +60,8 @@ storiesOf('Common', module)
 
         <itf-properties-list editable :fields.sync="list" v-model="value"></itf-properties-list>
 
+        <itf-properties-list lock-fields editable :fields.sync="list" v-model="value"></itf-properties-list>
+
       </itf-app>
     </div>`,
   }));

package/src/components/icon/MdiIcon.vue

@@ -0,0 +1,70 @@
+<style lang="scss">
+.mdi-icon {
+  align-items: center;
+  display: inline-flex;
+  font-feature-settings: "liga";
+  font-size: 24px;
+  justify-content: center;
+  letter-spacing: normal;
+  line-height: 1;
+  position: relative;
+  text-indent: 0;
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &--left {
+    margin-right: 5px;
+  }
+  &--right {
+    margin-left: 5px;
+  }
+}
+</style>
+<script>
+import { Vue, Component } from 'vue-property-decorator';
+
+export default @Component({
+  functional: true,
+  name: 'mdiIcon'
+})
+class mdiIcon extends Vue {
+  render (createElement, { data, slots, children, props, listeners }) {
+    const defaultSlot = slots().default;
+    if (!defaultSlot) {
+      return;
+    }
+    const [node] = defaultSlot;
+    const icon = (node.text || '').trim();
+    let alignClass = '';
+    if (typeof props.dark !== 'undefined') {
+      alignClass = 'text-white';
+    }
+    if (typeof props.left !== 'undefined') {
+      alignClass = 'mdi-icon--left';
+    }
+    if (typeof props.right !== 'undefined') {
+      alignClass = 'mdi-icon--right';
+    }
+    const attrs = {
+      staticClass: `mdi-icon notranslate mdi ${icon} ${alignClass} ${data.staticClass || ''}`,
+      on: {
+        click: e => listeners.click && listeners.click(e)
+      }
+    };
+    if (typeof props.small !== 'undefined') {
+      attrs.style = { 'font-size': '16px' };
+    }
+    if (typeof props.size !== 'undefined') {
+      attrs.style = { 'font-size': `${props.size}px` };
+    }
+    return createElement(
+      'i',
+      attrs
+    );
+  }
+}
+</script>

package/src/components/popover/IconPopover.vue

@@ -32,7 +32,7 @@
           <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-mdi-icon :name="icon" />
             </itf-button>
           </div>
 
@@ -40,7 +40,7 @@
         </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-mdi-icon>{{ icon }}</itf-mdi-icon>
           </itf-button>
         </div>
         <div v-if="!iconsList.length" class="text-muted pt-1">
@@ -73,6 +73,7 @@
 import { Vue, Component, Model, Prop, PropSync } from 'vue-property-decorator';
 import itfPopover from './Popover';
 import itfIcon from '../icon/Icon';
+import itfMdiIcon from '../icon/MdiIcon';
 import iconsList from '../icon/icons';
 import itfButton from '../button/Button';
 import itfTextField from '../text-field/TextField.vue';
@@ -87,6 +88,7 @@ export default @Component({
   },
   components: {
     itfIcon,
+    itfMdiIcon,
     itfPopover,
     itfButton,
     itfTextField
@@ -101,14 +103,17 @@ class itfIconPopover extends Vue {
 
   isVisible = false;
   search = '';
+  icons = [];
   recentIcons = [];
 
-  created() {
+  async created() {
     this.recentIcons = this.getRecentIcons();
+    this.icons = await import('@mdi/js');
   }
 
   get iconsList() {
-    return Object.keys(iconsList).filter((icon) => icon.includes(this.search.toLowerCase()));
+    // from cames case
+    return Object.keys(this.icons).map(key => key.replace(/([A-Z])/g, '-$1').toLowerCase()).filter((icon) => icon.includes(this.search.toLowerCase()));
   }
 
   onSelectIcon(icon) {

package/src/components/text-field/MoneyField.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-money-field">
+  <div class="itf-money-field" :class="{'currency-arrow': !currencyDisabled}">
     <div :style="`--itf-money-field-padding-left: ${selectedCurrencySymbol.length * 0.6 + 1}rem`">
       <span class="itf-money-field__prepend">{{ selectedCurrencySymbol }}</span>
       <itf-text-field
@@ -12,7 +12,7 @@
     </div>
 
     <div v-if="currencySelect" class="itf-money-field__currency">
-      <span>{{ selectedCurrencyCode }}</span>
+      <span>{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled" name="chevron_down" /></span>
       <select v-if="!disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
         <option v-for="currency in currencies" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
           {{ currency.Symbol }}, {{ currency.Code }} - {{ currency.Title }}
@@ -33,6 +33,11 @@
       padding-right: 4rem;
     }
   }
+  &.currency-arrow {
+    .itf-text-field input {
+      padding-right: 4.5rem;
+    }
+  }
 
   &__prepend {
     z-index: 6;
@@ -64,10 +69,12 @@ import { Component, Emit, Model, Prop, Vue } from 'vue-property-decorator';
 import itfTextField from './TextField';
 import itfSelect from '../select/Select';
 import itfLabel from '../form/Label';
+import itfIcon from '../icon/Icon';
 
 export default @Component({
   name: 'itfMoneyField',
   components: {
+    itfIcon,
     itfLabel,
     itfSelect,
     itfTextField

package/src/locales/en.js

@@ -89,5 +89,7 @@ module.exports = {
     type: 'Type',
     options: 'Options',
     addOption: 'Add an option',
+    showMoreProperties: '{n} more property|{n} more properties',
+    hideMoreProperties: 'Hide {n} property|Hide {n} properties',
   }
 };