@webitel/ui-sdk 23.12.41 → 23.12.44

package/src/components/wt-switcher/wt-switcher.vue

@@ -1,31 +1,37 @@
 <template>
   <div
-    class="wt-switcher"
     :class="{
       'wt-switcher--off': !value,
       'wt-switcher--on': value,
       'wt-switcher--disabled': disabled,
     }"
+    class="wt-switcher"
   >
     <wt-label
-      v-bind="labelProps"
-      class="wt-switcher__wrapper"
       :class="{'wt-switcher__wrapper--label-left': labelLeft}"
+      :disabled="disabled"
+      class="wt-switcher__wrapper"
+      v-bind="labelProps"
     >
       <input
-        class="wt-switcher__input"
-        type="checkbox"
         :checked="value"
         :disabled="disabled"
+        class="wt-switcher__input"
+        type="checkbox"
         @change="inputHandler"
       >
-      <span class="wt-switcher__checkmark"></span>
+      <span class="wt-switcher__checkmark" />
       <!-- @slot Custom input label -->
       <slot
-        v-bind="{ label, value, disabled }"
         name="label"
+        v-bind="{ label, value, disabled }"
       >
-        <div v-if="label" class="wt-switcher__label">{{ label }}</div>
+        <div
+          v-if="label"
+          class="wt-switcher__label"
+        >
+          {{ label }}
+        </div>
       </slot>
     </wt-label>
   </div>
@@ -33,7 +39,11 @@
 
 <script>
 export default {
-  name: 'wt-switcher',
+  name: 'WtSwitcher',
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
   props: {
     value: {
       type: Boolean,
@@ -56,10 +66,9 @@ export default {
       description: 'Object with props, passed down to wt-label as props',
     },
   },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
+  emits: [
+    'change',
+  ],
   methods: {
     inputHandler() {
       this.$emit('change', !this.value);
@@ -88,8 +97,8 @@ export default {
   position: relative;
   display: flex;
   align-items: center;
-  user-select: none;
   cursor: pointer;
+  user-select: none;
 
   &.wt-switcher__wrapper--label-left {
     flex-direction: row-reverse;
@@ -101,12 +110,8 @@ export default {
   transition: var(--transition);
 
   .wt-switcher__wrapper--label-left & {
-    margin-left: 0;
     margin-right: var(--switcher-icon-margin);
-  }
-
-  .wt-switcher:hover & {
-    color: var(--form-label--hover-color);
+    margin-left: 0;
   }
 }
 
@@ -114,8 +119,8 @@ export default {
   position: absolute;
   width: 0;
   height: 0;
-  opacity: 0;
   pointer-events: none;
+  opacity: 0;
 }
 
 .wt-switcher__checkmark {
@@ -124,68 +129,84 @@ export default {
   flex: 0 0 var(--switcher-width);
   width: var(--switcher-width);
   height: var(--switcher-height);
-  border-radius: var(--switcher-border-radius);
   transition: var(--transition);
+  border-radius: var(--switcher-border-radius);
 
   &:before {
-    content: '';
     position: absolute;
     bottom: var(--switcher-cicle-margin);
     left: var(--switcher-cicle-margin);
-    height: var(--switcher-cicle-size);
     width: var(--switcher-cicle-size);
-    background: var(--switcher-circle-bg-color);
-    border-radius: 50%;
+    height: var(--switcher-cicle-size);
+    content: '';
     transition: var(--transition);
+    border-radius: 50%;
   }
 }
 
 .wt-switcher--off {
   .wt-switcher__checkmark {
-    background: var(--switcher-bg-color--off);
+    background: var(--wt-switcher-background-color-off);
+
+    &:before {
+      background: var(--wt-switcher-circle-background-color-off);
+    }
   }
 
   &:hover {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--off--hover);
+      background: var(--wt-switcher-background-color-off-hover);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-off-hover);
+      }
     }
   }
 
   &.wt-switcher--disabled {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--off--disabled);
+      background: var(--wt-switcher-background-color-off-disabled);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-off-disabled);
+      }
     }
   }
 }
 
 .wt-switcher--on {
   .wt-switcher__checkmark {
-    background: var(--switcher-bg-color--on);
+    background: var(--wt-switcher-background-color-on);
 
     /* Show the indicator (dot/circle) when checked */
     &:before {
       transform: translateX(var(--switcher-cicle-translateX));
+      background: var(--wt-switcher-circle-background-color-on);
     }
   }
 
   &:hover {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--on--hover);
+      background: var(--wt-switcher-background-color-on-hover);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-on-hover);
+      }
     }
   }
 
   &.wt-switcher--disabled {
     .wt-switcher__checkmark {
-      background: var(--switcher-bg-color--on--disabled);
+      background: var(--wt-switcher-background-color-on-disabled);
+
+      &:before {
+        background: var(--wt-switcher-circle-background-color-on-disabled);
+      }
     }
   }
 }
 
 .wt-switcher--disabled {
   pointer-events: none;
-
-  .wt-switcher__label {
-    color: var(--form-label--disabled-color);
-  }
 }
 </style>

package/src/components/wt-table/_variables.scss

@@ -4,13 +4,16 @@
 
   --table-head-sort-arrow-margin: var(--spacing-xs);
   --table-head-border: 1px solid;
-  --table-head-border-color: var(--secondary-color);
 
   --table-min-height: 24px; // 24px icon size or body-1 lh
   --table-column-gap: var(--spacing-xs);
   --table-row-padding: var(--spacing-xs);
 
-  --table-primary-color: var(--main-color);
-  --table--hover-color: var(--accent-secondary-color);
-  --table-secondary-color: var(--secondary-color-50); // zebra
-}
+  --wt-table-head-border-color: var(--grey-lighten-1);
+  --wt-table-primary-color: var(--content-wrapper-color);
+  --wt-table-zebra-color: var(--dp-18-surface-color);
+}
+
+:root.theme--dark {
+  --table-head-border-color: var(--grey-darken-1);
+}

package/src/components/wt-table/wt-table.vue

@@ -2,86 +2,124 @@
   <div class="wt-table">
     <table class="wt-table__table">
       <thead class="wt-table__head">
-      <tr :style="columnsStyle" class="wt-table__tr wt-table__tr__head">
-        <th v-if="selectable" class="wt-table__th wt-table__th--checkbox">
-          <wt-checkbox
-            :selected="isAllSelected"
-            @change="selectAll"
-          ></wt-checkbox>
-        </th>
-        <th
-          v-for="(col, key) of dataHeaders"
-          :key="key"
-          :class="[
-           {'wt-table__th--sortable': isColSortable(col)},
-           `wt-table__th--sort-${col.sort}`,
-        ]"
-          class="wt-table__th"
-          @click="sort(col)"
+        <tr
+          :style="columnsStyle"
+          class="wt-table__tr wt-table__tr__head"
         >
-          <div class="wt-table__th__text">{{ col.text }}</div>
-          <wt-icon
-            v-if="sortable"
-            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
-            icon="sort-arrow-up"
-            size="sm"
-          ></wt-icon>
-          <wt-icon
-            v-if="sortable"
-            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
-            icon="sort-arrow-down"
-            size="sm"
-          ></wt-icon>
-        </th>
-        <th v-if="gridActions" class="wt-table__th__actions">
-          <slot name="actions-header"></slot>
-        </th>
-      </tr>
+          <th
+            v-if="selectable"
+            class="wt-table__th wt-table__th--checkbox"
+          >
+            <wt-checkbox
+              :selected="isAllSelected"
+              @change="selectAll"
+            />
+          </th>
+          <th
+            v-for="(col, key) of dataHeaders"
+            :key="key"
+            :class="[
+              {'wt-table__th--sortable': isColSortable(col)},
+              `wt-table__th--sort-${col.sort}`,
+            ]"
+            class="wt-table__th"
+            @click="sort(col)"
+          >
+            <div class="wt-table__th__text">
+              {{ col.text }}
+            </div>
+            <wt-icon
+              v-if="sortable"
+              class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
+              icon="sort-arrow-up"
+              size="sm"
+            />
+            <wt-icon
+              v-if="sortable"
+              class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
+              icon="sort-arrow-down"
+              size="sm"
+            />
+          </th>
+          <th
+            v-if="gridActions"
+            class="wt-table__th__actions"
+          >
+            <slot name="actions-header" />
+          </th>
+        </tr>
       </thead>
 
       <tbody class="wt-table__body">
-      <tr
-        v-for="(row, dataKey) of data"
-        :key="dataKey"
-        :class="`wt-table__tr__${row.id || dataKey}`"
-        :style="columnsStyle"
-        class="wt-table__tr wt-table__tr__body"
-      >
-        <td v-if="selectable" class="wt-table__td wt-table__td--checkbox">
-          <wt-checkbox
-            :selected="row._isSelected"
-            @change="row._isSelected = !row._isSelected"
-          ></wt-checkbox>
-        </td>
-
-        <td
-          v-for="(col, headerKey) of dataHeaders"
-          :key="headerKey"
-          class="wt-table__td"
+        <tr
+          v-for="(row, dataKey) of data"
+          :key="dataKey"
+          :class="`wt-table__tr__${row.id || dataKey}`"
+          :style="columnsStyle"
+          class="wt-table__tr wt-table__tr__body"
         >
-          <slot :index="dataKey" :item="row" :name="col.value">
-            <div>{{ row[col.value] }}</div>
-          </slot>
-        </td>
+          <td
+            v-if="selectable"
+            class="wt-table__td wt-table__td--checkbox"
+          >
+            <wt-checkbox
+              :selected="row._isSelected"
+              @change="row._isSelected = !row._isSelected"
+            />
+          </td>
 
-        <td v-if="gridActions" class="wt-table__td__actions">
-          <slot :index="dataKey" :item="row" name="actions"></slot>
-        </td>
-      </tr>
+          <td
+            v-for="(col, headerKey) of dataHeaders"
+            :key="headerKey"
+            class="wt-table__td"
+          >
+            <slot
+              :index="dataKey"
+              :item="row"
+              :name="col.value"
+            >
+              <div>{{ row[col.value] }}</div>
+            </slot>
+          </td>
+
+          <td
+            v-if="gridActions"
+            class="wt-table__td__actions"
+          >
+            <slot
+              :index="dataKey"
+              :item="row"
+              name="actions"
+            />
+          </td>
+        </tr>
       </tbody>
 
-      <tfoot v-if="isTableFooter" class="wt-table__foot">
-      <tr :style="columnsStyle" class="wt-table__tr wt-table__tr__foot">
-        <!--        empty checkbox column -->
-        <th v-if="selectable" class="wt-table__th__checkbox"></th>
-        <td
-          v-for="(col, headerKey) of dataHeaders"
-          :key="headerKey"
-          class="wt-table__td"
+      <tfoot
+        v-if="isTableFooter"
+        class="wt-table__foot"
+      >
+        <tr
+          :style="columnsStyle"
+          class="wt-table__tr wt-table__tr__foot"
         >
-          <slot :header="col" :index="headerKey" :name="`${col.value}-footer`"></slot>
-        </td>
-      </tr>
+          <!--        empty checkbox column -->
+          <th
+            v-if="selectable"
+            class="wt-table__th__checkbox"
+          />
+          <td
+            v-for="(col, headerKey) of dataHeaders"
+            :key="headerKey"
+            class="wt-table__td"
+          >
+            <slot
+              :header="col"
+              :index="headerKey"
+              :name="`${col.value}-footer`"
+            />
+          </td>
+        </tr>
       </tfoot>
     </table>
   </div>
@@ -91,7 +129,7 @@
 import getNextSortOrder from './_internals/getSortOrder';
 
 export default {
-  name: 'wt-table',
+  name: 'WtTable',
   props: {
     headers: {
       type: Array,
@@ -191,31 +229,26 @@ export default {
   border-collapse: collapse;
 }
 
-.wt-table__head {
-  display: block;
-  box-sizing: border-box;
-  background: var(--table-primary-color);
-  border: var(--table-head-border);
-  border-color: var(--table-head-border-color);
-  border-radius: var(--border-radius);
-}
-
-//.wt-table__head {
-//  display: block;
-//}
-
 .wt-table__tr {
   display: grid;
   padding: var(--table-row-padding);
   transition: var(--transition);
   grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
   grid-column-gap: var(--table-column-gap);
+  background: var(--wt-table-primary-color);
 
   &:nth-child(2n) {
-    background: var(--table-secondary-color);
+    background: var(--wt-table-zebra-color);
   }
 }
 
+.wt-table__tr__head {
+  border: var(--table-head-border);
+  border-color: var(--wt-table-head-border-color);
+  border-radius: var(--border-radius);
+  background: transparent;
+}
+
 .wt-table__th,
 .wt-table__td {
   @extend %typo-body-1;
@@ -243,8 +276,8 @@ export default {
   &--sortable {
     cursor: pointer;
 
-    &:hover ::v-deep .wt-icon__icon {
-      fill: var(--icon-color--hover);
+    &:hover :deep .wt-icon__icon {
+      fill: var(--icon-active-color);
     }
   }
 
@@ -263,7 +296,7 @@ export default {
 }
 
 .wt-table__foot {
-  border-color: var(--table-head-border-color);
-  border-top: var(--table-head-border);
+  border-color: var(--wt-table-head-border-color);
+  border-top: var(--wt-table-head-border-color);
 }
 </style>

package/src/components/wt-table-actions/wt-table-actions.vue

@@ -1,58 +1,58 @@
 <template>
   <aside class="wt-table-actions">
-    <slot></slot>
+    <slot />
     <wt-tooltip v-if="isImport">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="download"
           @click="$emit('input', 'import')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('reusable.import') }}
     </wt-tooltip>
     <wt-tooltip v-if="isExport">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="upload"
           @click="$emit('input', 'export')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('reusable.export') }}
     </wt-tooltip>
     <wt-tooltip v-if="isFilterReset">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="clear"
           @click="$emit('input', 'filterReset')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.tableActions.filterReset') }}
     </wt-tooltip>
     <wt-tooltip v-if="isColumnSelect">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="column-select"
           @click="$emit('input', 'columnSelect')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.tableActions.columnSelect') }}
     </wt-tooltip>
     <wt-tooltip v-if="isRefresh">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           icon="refresh"
           @click="$emit('input', 'refresh')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.tableActions.refreshTable') }}
     </wt-tooltip>
     <wt-tooltip v-if="isSettings">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           :class="{'active': isSettingsActive}"
           icon="filter"
           @click="$emit('input', 'settings')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('webitelUI.tableActions.expandFilters') }}
     </wt-tooltip>
@@ -61,7 +61,7 @@
 
 <script>
 export default {
-  name: 'wt-table-actions',
+  name: 'WtTableActions',
   props: {
     icons: {
       type: Array,