@itfin/components 1.2.48 → 1.2.50

package/package.json

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

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/app/message.js

@@ -6,6 +6,7 @@ const MessageConstructor = Vue.extend(ToastContainer);
 const instances = [];
 let count = 1;
 const containers = {};
+const instancesIds = {};
 
 const Message = function (options) {
   const userOnClose = options.onClose;
@@ -28,6 +29,11 @@ const Message = function (options) {
     containerEl.style.zIndex = options.zIndex;
   }
 
+  if (options.Id && options.closeById) {
+    Message.closeById(options.Id);
+    return;
+  }
+
   const id = count++;
   options.onClose = function () {
     Message.close(id, userOnClose);
@@ -51,6 +57,7 @@ const Message = function (options) {
   instance.show = true;
 
   instances.push(instance);
+  instancesIds[options.Id] = instance;
 
   return instance;
 };
@@ -97,6 +104,13 @@ Message.closeAll = function () {
   }
 };
 
+Message.closeById = function (id) {
+  if (instancesIds[id]) {
+    instancesIds[id].close();
+    delete instancesIds.id;
+  }
+}
+
 const types = ['info', 'success', 'error', 'warning', 'loading'];
 
 types.forEach((type) => {

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>`,