@webitel/ui-sdk 3.2.124 → 3.2.126

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

@@ -0,0 +1,177 @@
+<template>
+  <div
+    class="wt-radio"
+    :class="{
+      'wt-radio--active': isChecked,
+      'wt-radio--outline': outline,
+      'wt-radio--disabled': disabled,
+    }"
+  >
+    <wt-label class="wt-radio__wrapper">
+      <input
+        class="wt-radio__input"
+        type="radio"
+        :value="value"
+        :checked="isChecked"
+        :disabled="disabled"
+        @input="inputHandler"
+      >
+      <wt-icon class="wt-radio__icon" :icon="radioIcon"></wt-icon>
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label, isChecked, disabled }">
+        <div v-if="label" class="wt-radio__label">{{ label }}</div>
+      </slot>
+    </wt-label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-radio',
+  props: {
+    // value, set by radio
+    value: {
+      type: [String, Number, Boolean, Object],
+      default: '',
+    },
+    // currently selected value
+    selected: {
+      type: [String, Number, Boolean, Object],
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  model: {
+    prop: 'selected',
+    event: 'input',
+  },
+  computed: {
+    isChecked() {
+      return this.value === this.selected;
+    },
+    radioIcon() {
+      return this.isChecked ? 'radio--checked' : 'radio';
+    },
+  },
+  methods: {
+    inputHandler() {
+      this.$emit('input', this.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+@import './variables.scss';
+
+/* Customize the label (the container) */
+.wt-radio {
+  @include width-fit-content;
+  box-sizing: border-box;
+
+  .wt-label {
+    cursor: pointer;
+  }
+}
+
+.wt-radio__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+}
+
+.wt-radio__label {
+  margin-left: var(--radio-icon-margin);
+  transition: var(--transition);
+}
+
+/* Hide the browser's default radio button */
+.wt-radio__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.wt-radio__icon {
+  flex: 0 0 var(--icon-md-size);
+}
+
+.wt-radio:hover {
+  .wt-radio__label {
+    color: var(--form-label--hover-color);
+  }
+
+  ::v-deep .wt-icon__icon {
+    fill: var(--icon-color--hover);
+  }
+}
+
+.wt-radio--active {
+  .wt-radio__label {
+    color: var(--form-label--active-color);
+  }
+
+  ::v-deep .wt-icon__icon {
+    fill: var(--icon-color-active);
+  }
+}
+
+.wt-radio--outline {
+  .wt-radio__label {
+    color: var(--form-outline-label-color);
+  }
+
+  ::v-deep .wt-icon__icon {
+    fill: var(--icon-outline-color);
+  }
+
+  &.wt-radio--active {
+    .wt-radio__label {
+      color: var(--form-label--active-color);
+    }
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-outline--active-color);
+    }
+  }
+
+  &:hover {
+
+    ::v-deep .wt-icon__icon {
+      fill: var(--icon-outline--hover-color);
+    }
+  }
+}
+
+.wt-radio--disabled {
+  pointer-events: none;
+
+  .wt-radio__label {
+    color: var(--form-label--disabled-color);
+  }
+
+  ::v-deep .wt-icon__icon {
+    fill: var(--icon-color-disabled);
+  }
+}
+</style>

package/src/components/{atoms/wt-rounded-action → wt-rounded-action}/wt-rounded-action.vue

@@ -68,6 +68,8 @@ export default {
 
 <!--not scoped to change .icon colors-->
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-button.wt-rounded-action {
   min-width: auto;
   min-height: 0;

package/src/components/{molecules/wt-search-bar → wt-search-bar}/wt-search-bar.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import debounce from '../../../scripts/debounce';
+import debounce from '../../scripts/debounce';
 
 const props = defineProps({
   /**
@@ -81,6 +81,8 @@ function handleKeyup(event) {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-search-bar {
   cursor: text;
 

package/src/{css/components/molecules → components}/wt-select/_multiselect.scss

@@ -1,4 +1,4 @@
-@import '~vue-multiselect/dist/vue3-multiselect.css';
+@import '../../../node_modules/vue-multiselect/dist/vue3-multiselect.css';
 
 .multiselect ::v-deep {
   cursor: pointer;

package/src/components/{molecules/wt-select → wt-select}/mixins/multiselectMixin.js

@@ -1,9 +1,9 @@
 import VueMultiselect from 'vue-multiselect';
 import { ObserveVisibility } from 'vue-observe-visibility';
 import validationMixin
-  from '../../../../mixins/validationMixin/validationMixin';
-import debounce from '../../../../scripts/debounce';
-import isEmpty from '../../../../scripts/isEmpty';
+  from '../../../mixins/validationMixin/validationMixin';
+import debounce from '../../../scripts/debounce';
+import isEmpty from '../../../scripts/isEmpty';
 import labelUsageMixin from '../../wt-label/mixins/labelUsageMixin';
 
 export default {

package/src/components/{molecules/wt-select → wt-select}/wt-select.vue

@@ -141,7 +141,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../css/components/molecules/wt-select/multiselect';
+@import './variables.scss';
+@import './multiselect.scss';
 
 .wt-select {
   width: 100%;

package/src/components/{molecules/wt-slider → wt-slider}/wt-slider.vue

@@ -95,6 +95,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-slider__wrapper {
   display: flex;
   align-items: center;

package/src/components/{organisms/wt-status-select → wt-status-select}/__tests__/WtStatusSelect.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import WtStatusSelect from '../wt-status-select.vue';
-import WtSelect from '../../../molecules/wt-select/wt-select.vue';
+import WtSelect from '../../wt-select/wt-select.vue';
 
 describe('WtStatusSelect', () => {
   it('renders a component', () => {

package/src/components/{organisms/wt-status-select → wt-status-select}/_internals/StatusOptions.lookup.js

@@ -1,4 +1,4 @@
-import AgentStatus from '../../../../enums/AgentStatus/AgentStatus.enum';
+import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum';
 
 export default [
   {

package/src/components/{organisms/wt-status-select → wt-status-select}/wt-status-select.vue

@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum';
-import convertDuration from '../../../scripts/convertDuration';
+import AgentStatus from '../../enums/AgentStatus/AgentStatus.enum';
+import convertDuration from '../../scripts/convertDuration';
 import StatusOptions from './_internals/StatusOptions.lookup';
 
 export default {
@@ -95,6 +95,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-status-select.wt-select ::v-deep {
   box-shadow: var(--elevation-5);
 

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

@@ -0,0 +1,185 @@
+<template>
+  <div
+    class="wt-switcher"
+    :class="{
+      'wt-switcher--off': !value,
+      'wt-switcher--on': value,
+      'wt-switcher--disabled': disabled,
+    }"
+  >
+    <wt-label
+      class="wt-switcher__wrapper"
+      :class="{'wt-switcher__wrapper--label-left': labelLeft}"
+      v-bind="labelProps"
+    >
+      <input
+        class="wt-switcher__input"
+        type="checkbox"
+        :checked="value"
+        :disabled="disabled"
+        @change="inputHandler"
+      >
+      <span class="wt-switcher__checkmark"></span>
+      <!-- @slot Custom input label -->
+      <slot name="label" v-bind="{ label, value, disabled }">
+        <div v-if="label" class="wt-switcher__label">{{ label }}</div>
+      </slot>
+    </wt-label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'wt-switcher',
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelLeft: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  methods: {
+    inputHandler() {
+      this.$emit('change', !this.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './variables.scss';
+
+.wt-switcher {
+  @include width-fit-content;
+  position: relative;
+  box-sizing: border-box;
+
+  .wt-label {
+    cursor: pointer;
+  }
+}
+
+.wt-switcher__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+
+  &.wt-switcher__wrapper--label-left {
+    flex-direction: row-reverse;
+  }
+}
+
+.wt-switcher__label {
+  margin-left: var(--switcher-icon-margin);
+  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);
+  }
+}
+
+.wt-switcher__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.wt-switcher__checkmark {
+  position: relative;
+  display: block;
+  flex: 0 0 var(--switcher-width);
+  width: var(--switcher-width);
+  height: var(--switcher-height);
+  border-radius: var(--switcher-border-radius);
+  transition: var(--transition);
+
+  &: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%;
+    transition: var(--transition);
+  }
+}
+
+.wt-switcher--off {
+  .wt-switcher__checkmark {
+    background: var(--switcher-bg-color--off);
+  }
+
+  &:hover {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--off--hover);
+    }
+  }
+
+  &.wt-switcher--disabled {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--off--disabled);
+    }
+  }
+}
+
+.wt-switcher--on {
+  .wt-switcher__checkmark {
+    background: var(--switcher-bg-color--on);
+
+    /* Show the indicator (dot/circle) when checked */
+    &:before {
+      transform: translateX(var(--switcher-cicle-translateX));
+    }
+  }
+
+  &:hover {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--on--hover);
+    }
+  }
+
+  &.wt-switcher--disabled {
+    .wt-switcher__checkmark {
+      background: var(--switcher-bg-color--on--disabled);
+    }
+  }
+}
+
+.wt-switcher--disabled {
+  pointer-events: none;
+
+  .wt-switcher__label {
+    color: var(--form-label--disabled-color);
+  }
+}
+</style>

package/src/components/{organisms/wt-table → wt-table}/__tests__/WtTable.spec.js

@@ -1,6 +1,6 @@
 import { mount, shallowMount } from '@vue/test-utils';
 import WtTable from '../wt-table.vue';
-import WtCheckbox from '../../../molecules/wt-checkbox/wt-checkbox.vue';
+import WtCheckbox from '../../wt-checkbox/wt-checkbox.vue';
 
 const headers = [
   {

package/src/components/{organisms/wt-table → wt-table}/wt-table.vue

@@ -177,6 +177,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-table {
   overflow: auto;
 }

package/src/components/{organisms/wt-table-actions → wt-table-actions}/wt-table-actions.vue

@@ -96,6 +96,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-table-actions {
   display: flex;
   align-items: center;

package/src/components/{molecules/wt-tabs → wt-tabs}/wt-tabs.vue

@@ -70,6 +70,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import './variables.scss';
+
 .wt-tabs {
   position: relative;
   display: flex;

package/src/components/{molecules/wt-tags-input → wt-tags-input}/wt-tags-input.vue

@@ -156,7 +156,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../css/components/molecules/wt-select/multiselect';
+@import './variables.scss';
+@import '../wt-select/multiselect.scss';
 
 .wt-tags-input {
   width: 100%;