@itfin/components 1.2.49 → 1.2.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.49",
+  "version": "1.2.51",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/scss/components/_tabs.scss

@@ -18,6 +18,9 @@
 
 .itf-tabs {
 
+  &.itf-tabs__simple > .itf-tabs-panel {
+    padding-left: 0 !important;
+  }
   &.itf-tabs__vertical {
     display: flex;
     flex-direction: row-reverse;

package/src/assets/scss/components/_toaster.scss

@@ -9,6 +9,10 @@
   box-sizing: border-box;
   padding: 15px;
 
+  .toast-body {
+    word-break: break-all;
+  }
+  
   &.is-top-left,
   &.is-top-center,
   &.is-top-right {

package/src/assets/scss/directives/tooltip.scss

@@ -25,27 +25,27 @@ $dark-tooltip-color: #7b52eb;
   cursor: default;
 
   &[data-placement^=top] > .tippy-arrow:before {
-    border-top-color: $tooltip-color
+    border-top-color: var(--itf-tooltip-bg-color);
   }
 
   &[data-placement^=bottom] > .tippy-arrow:before {
-    border-bottom-color: $tooltip-color
+    border-bottom-color: var(--itf-tooltip-bg-color);
   }
 
   &[data-placement^=left] > .tippy-arrow:before {
-    border-left-color: $tooltip-color
+    border-left-color: var(--itf-tooltip-bg-color);
   }
 
   &[data-placement^=right] > .tippy-arrow:before {
-    border-right-color: $tooltip-color
+    border-right-color: var(--itf-tooltip-bg-color);
   }
 
   & > .tippy-backdrop {
-    background-color: $tooltip-color
+    background-color: var(--itf-tooltip-bg-color);
   }
 
   & > .tippy-svg-arrow {
-    fill: $tooltip-color
+    fill: var(--itf-tooltip-bg-color);
   }
 }
 

package/src/components/checkbox/RadioBox.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="itf-radio-box form-check card" :class="{ 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked }">
+    <input class="form-check-input" :id="id" type="radio" :name="radioName" v-model="isChecked" :value="true" :disabled="disabled" />
+    <label :for="id" slot="label" class="form-check-label card-body">
+
+      <slot></slot>
+
+    </label>
+  </div>
+</template>
+<style lang="scss">
+.itf-radio-box.card {
+  padding: 0;
+  margin-bottom: .5rem;
+  position: relative;
+
+  &.active {
+    background-color: rgba(var(--bs-primary-rgb),.1) !important;
+  }
+  &:hover {
+    background-color: rgba(0,0,0,.05);
+  }
+
+  .form-check-label {
+    cursor: pointer;
+  }
+
+  .form-check-input {
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+  }
+}
+</style>
+<script>
+import { Vue, Component, Prop, Model, Inject } from 'vue-property-decorator';
+
+let globalRadioId = 0;
+
+export default @Component({
+  name: 'itfRadio',
+  components: {
+  }
+})
+class itfRadio extends Vue {
+  @Inject({ default: null }) radioGroup;
+
+  @Model('input') checked;
+  @Prop(String) label;
+  @Prop() value;
+  @Prop({ type: String }) name;
+
+  @Prop(Boolean) disabled;
+  @Prop(Boolean) medium;
+  @Prop(Boolean) large;
+
+  id = '';
+
+  created() {
+    globalRadioId += 1;
+    this.id = `radio${globalRadioId}`;
+  }
+
+  get radioName() {
+    if (this.radioGroup) {
+      return this.radioGroup.getGroupName();
+    }
+    if (!this.name) {
+      throw new Error('Name for radio should be not empty');
+    }
+    return this.name;
+  }
+
+  set isChecked(val) {
+    if (this.radioGroup) {
+      this.radioGroup.onToggleOption(this.value, val);
+    }
+    this.$emit('input', this.value);
+  }
+
+  get isChecked() {
+    if (this.radioGroup) {
+      return this.radioGroup.isChecked(this.value);
+    }
+    if (this.itemKey) {
+      if (!this.checked || !this.value) {
+        return false;
+      }
+      return this.checked[this.itemKey] === this.value[this.itemKey];
+    }
+    return this.checked === this.value;
+  }
+}
+</script>

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

@@ -1,10 +1,10 @@
 import { storiesOf } from '@storybook/vue';
 import itfCheckbox from './Checkbox';
 import itfCheckboxGroup from './CheckboxGroup';
+import itfRadioGroup from './RadioGroup';
+import itfRadioBox from './RadioBox';
 import itfForm from '../form/Form.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)
@@ -15,13 +15,14 @@ storiesOf('Common', module)
       itfCheckboxGroup,
       itfForm,
       itfLabel,
-      itfDatePicker,
-      itfDateRangePicker,
+      itfRadioGroup,
+      itfRadioBox,
     },
     data() {
       return {
         test: false,
-        group: []
+        group: [],
+        radioValue: null
       }
     },
     methods: {
@@ -68,6 +69,23 @@ storiesOf('Common', module)
         <itf-checkbox large switch label="Test" v-model="test" />
 
 
+        <h3>Radio box</h3>
+
+        <p>Value: {{radioValue}}</p>
+        <itf-radio-group v-model="radioValue">
+
+          <itf-radio-box :value="1">
+            <h4>Test</h4>
+            <div class="text-muted">Шаблон для відпусток</div>
+          </itf-radio-box>
+
+          <itf-radio-box :value="2">
+            <h4>Test2</h4>
+            <div class="text-muted">Шаблон для лікарняних</div>
+          </itf-radio-box>
+
+        </itf-radio-group>
+
 
       </itf-form>
     </div>`,

package/src/components/tabs/TabContent.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="active || (tabsManager && tabsManager.getValue() === id)" :class="{ filled }" class="itf-tab-content" :data-test="`itf-tab-content-${id || _uid}`">
+  <div
+    v-if="active || (tabsManager && tabsManager.getValue() === id)"
+    :class="{ filled, 'itf-tab-content': !simple }"
+    :data-test="`itf-tab-content-${id || _uid}`">
     <slot />
   </div>
 </template>
@@ -16,5 +19,9 @@ class itfTabContent extends Vue {
   @Prop() id;
   @Prop(Boolean) filled;
   @Prop(Boolean) active;
+
+  get simple() {
+    return this.tabsManager && this.tabsManager.simple;
+  }
 }
 </script>

package/src/components/tabs/Tabs.vue

@@ -18,6 +18,7 @@ export default @Component({
 class itfTabs extends Vue {
   @Model('input') value;
   @Prop(Boolean) vertical;
+  @Prop(Boolean) simple;
 
   tabNodes;
 
@@ -29,6 +30,9 @@ class itfTabs extends Vue {
     if (this.vertical) {
       staticClass += ' itf-tabs__vertical';
     }
+    if (this.simple) {
+      staticClass += ' itf-tabs__simple';
+    }
 
     const list = (this.vertical ? tabNodes : [...tabNodes].reverse());
     const tabs = list.map((node) => createElement('a', this.createTab(node), [node]));
@@ -86,7 +90,7 @@ class itfTabs extends Vue {
     }
 
     return {
-      staticClass: 'itf-tab',
+      staticClass: this.simple ? 'text-decoration-none pe-3' : 'itf-tab',
       class: {
         'active': this.isActive(node)
       },

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

@@ -63,5 +63,27 @@ storiesOf('Common', module)
     asd123
     </itf-tab-content>
   </itf-tabs>
+
+  <itf-tabs v-model="tab" simple>
+    <itf-tab id="Test1">
+    Content 1
+      <div class="text-muted">Coming soon...</div>
+    </itf-tab>
+    <itf-tab id="Test2">
+    Content 2
+    </itf-tab>
+    <itf-tab id="Test3">
+    Content 3
+    </itf-tab>
+    <itf-tab id="Test4">
+    Content 4
+    </itf-tab>
+    <itf-tab-content id="Test1" filled>
+    asd
+    </itf-tab-content>
+    <itf-tab-content id="Test2" filled>
+    asd123
+    </itf-tab-content>
+  </itf-tabs>
     </div>`,
   }));

package/src/helpers/formatters.js

@@ -62,8 +62,8 @@ export function formatRangeDates(begin, end = null) {
 
 export function firstLetters(name) {
   let [first, second] = (name || '').trim()
-    .replace(/[\u0250-\u0400\u04FF-\ue0070-9]/g, '')
-    .replace(/ +/g, ' ')
+    .replace(/[\u0250-\u0400\u04FF-\ue007]/g, '')
+    .replace(/[ \.,_!@#$%^&*()«»]+/g, ' ')
     .split(' ');
 
   if (first === 'undefined') {
@@ -73,7 +73,7 @@ export function firstLetters(name) {
     second = '';
   }
   if (!second) {
-    return first[0] || '';
+    return (first[0] || '').toUpperCase();
   }
-  return (first[0] || '') + (second[0] || '');
+  return ((first[0] || '') + (second[0] || '')).toUpperCase();
 }