@itfin/components 1.2.23 → 1.2.25

package/package.json

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

package/src/components/segmented-control/SegmentedControl.vue

@@ -1,20 +1,31 @@
 <template>
-  <div class="itf-segmeneted-control">
-    <span v-if="!isUndefined" ref="slider" class="selection" :class="{'elevation-1': !disabled}"></span>
-
-    <div class="option" v-for="(item, n) in itemsWithNames" :key="n">
-      <label>
-        <input
-          ref="input"
-          type="radio"
-          :name="name"
-          :value="n"
-          :checked="isChecked(item)"
-          @change="onItemChanged(item)" />
-        <span>
+  <div>
+    <div class="itf-segmeneted-control d-none d-lg-grid">
+      <span v-if="!isUndefined" ref="slider" class="selection" :class="{'elevation-1': !disabled}"></span>
+
+      <div class="option" v-for="(item, n) in itemsWithNames" :key="n">
+        <label>
+          <input
+            ref="input"
+            type="radio"
+            :name="name"
+            :value="n"
+            :checked="isChecked(item)"
+            @change="onItemChanged(item)" />
+          <span>
           <slot name="item" :item="item" :itemKey="n">{{item[itemText]}}</slot>
         </span>
-      </label>
+        </label>
+      </div>
+    </div>
+    <div class="d-lg-none">
+      <itf-select
+        :value="value"
+        @input="$emit('input', $event)"
+        :options="itemsWithNames"
+        :reduce="(item) => item[itemKey]"
+        :get-option-label="(item) => item[itemText]"
+      />
     </div>
   </div>
 </template>
@@ -67,15 +78,22 @@
         opacity: 0;
       }
     }
+    &:last-of-type {
+      label::after {
+        opacity: 0;
+      }
+    }
     label {
+      justify-content: center;
+      height: 100%;
+      align-items: center;
+      display: flex;
       cursor: pointer;
       position: relative;
-      display: block;
       text-align: center;
       padding: .25rem 1.5rem;
       background: rgba(255, 255, 255, 0);
       color: rgba(0, 0, 0, 1);
-      font-size: 14px;
 
       &::before,
       &::after {
@@ -136,6 +154,7 @@
     }
   }
   .selection {
+    margin-right: 1px;
     background: rgba(255, 255, 255, 1);
     border: .5px solid rgba(0, 0, 0, 0.04);
     box-shadow: var(--itf-segmeneted-control--shadow);
@@ -152,10 +171,13 @@
 </style>
 <script>
 import { Vue, Component, Model, Prop, Watch } from 'vue-property-decorator';
+import itfSelect from '../select/Select';
 
 export default @Component({
   name: 'itfSegmentedControl',
-  components: {}
+  components: {
+    itfSelect
+  }
 })
 class itfSegmentedControl extends Vue {
   @Model('input') value;

package/src/helpers/formatters.js

@@ -57,13 +57,19 @@ export function formatRangeDates(begin, end = null) {
 }
 
 export function firstLetters(name) {
-  const [first, second] = (name || '').trim()
+  let [first, second] = (name || '').trim()
     .replace(/[\u0250-\u0400\u04FF-\ue0070-9]/g, '')
     .replace(/ +/g, ' ')
-    .split(' ')
-  ;
+    .split(' ');
+
+  if (first === 'undefined') {
+    first = '';
+  }
+  if (second === 'undefined') {
+    second = '';
+  }
   if (!second) {
-    return first[0];
+    return first[0] || '';
   }
-  return first[0] + second[0];
+  return (first[0] || '') + (second[0] || '');
 }