@itfin/components 2.0.34 → 2.0.36

package/package.json

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

package/src/assets/scss/components/_segmeneted-control.scss

@@ -36,7 +36,6 @@
 
   .option {
     position: relative;
-    cursor: pointer;
 
     &:hover input:not(:checked) + label span,
     &:active input:not(:checked) + label span,
@@ -76,6 +75,10 @@
       background: rgba(255, 255, 255, 0);
       color: rgba(0, 0, 0, 1);
 
+      &.disabled {
+        cursor: not-allowed;
+        color: rgba(0, 0, 0, .25);
+      }
       &::before,
       &::after {
         content: '';

package/src/components/checkbox/Checkbox.vue

@@ -2,7 +2,7 @@
 
   <div class="itf-checkbox form-check" :class="{ 'form-switch': this.switch, 'itf-checkbox__large': large, 'itf-checkbox__medium': medium }">
     <input class="form-check-input" ref="input" :id="id" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
-    <label :for="id" class="form-check-label">
+    <label :for="id" class="form-check-label w-100" :class="{ 'disabled': isDisabled }">
       <slot name="label">
         {{label}}
         <slot name="icon"></slot>

package/src/components/checkbox/RadioBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-radio-box form-check card" :class="{ 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
+  <div class="itf-radio-box form-check card" :class="{ 'disabled': disabled, 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
     <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">
 
@@ -16,7 +16,17 @@
   padding: 0;
   margin-bottom: .5rem;
   position: relative;
-  cursor: pointer;
+  &:not(.disabled) {
+    cursor: pointer;
+
+    .form-check-label {
+      cursor: pointer;
+    }
+  }
+
+  .form-check-label {
+    cursor: not-allowed;
+  }
 
   &.left {
     padding: 0 0 0 2.5rem;
@@ -38,13 +48,9 @@
   &.active {
     background-color: rgba(var(--bs-primary-rgb),.1) !important;
   }
-  &:hover {
+  &:hover:not(.disabled) {
     background-color: rgba(0,0,0,.05);
   }
-
-  .form-check-label {
-    cursor: pointer;
-  }
 }
 </style>
 <script>

package/src/components/copyToClipboard/CopyToClipboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <itf-button icon small @click.stop="copy">
+  <itf-button :icon="icon" :small="small" @click.stop="copy" :disabled="disabled">
     <slot>
       <itf-icon name="clipboard_copy" />
     </slot>
@@ -18,6 +18,9 @@ export default @Component({
 })
 class CopyToClipboard extends Vue {
   @Prop(String) value;
+  @Prop({ type: Boolean, default: true }) small;
+  @Prop({ type: Boolean, default: true }) icon;
+  @Prop({ type: Boolean, default: false }) disabled;
 
   async copy () {
     const showSuccess = this.$showSuccess;

package/src/components/filter/FilterPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-filter-panel d-flex flex-column gap-3 align-items-start">
+  <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly}">
     <div v-if="!filtersOnly" class="d-flex gap-2 justify-content-between w-100">
       <slot name="search">
         <div>

package/src/components/icon/components/nomi-check.vue

@@ -0,0 +1,4 @@
+<template><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.6936 5.43799C14.8771 5.29535 15.1419 5.29656 15.3254 5.45362C15.5088 5.61084 15.5505 5.87237 15.4377 6.07569L15.3801 6.15869L8.95137 13.6587C8.85689 13.7689 8.71861 13.8328 8.57344 13.8335C8.42843 13.834 8.2899 13.7718 8.19453 13.6626L4.62324 9.57178L4.56465 9.48877C4.45006 9.28652 4.48917 9.02459 4.67109 8.86573C4.85306 8.70687 5.11798 8.70339 5.30293 8.84424L5.37715 8.91358L8.56758 12.5689L14.6203 5.5083L14.6936 5.43799Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-chevron-right.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 8.41421L9 15.5858C9 16.4767 10.0771 16.9229 10.7071 16.2929L14.2929 12.7071C14.6834 12.3166 14.6834 11.6834 14.2929 11.2929L10.7071 7.70711C10.0771 7.07714 9 7.52331 9 8.41421Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-collapse.vue

@@ -0,0 +1,7 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path style="transform: translate(-9px, 9px)" d="M19 10V5.3C19 5.13431 18.8657 5 18.7 5H14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path style="transform: translate(9px, -9px)" d="M5 14V18.7C5 18.8657 5.13431 19 5.3 19H10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5.5 18.5L9.5 14.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14.5 9.5L18.5 5.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-minus.vue

@@ -0,0 +1,4 @@
+<template><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.83325 10H14.1666" stroke="#7A818E" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>