@webitel/ui-sdk 0.1.2-vue3 → 0.1.3-vite

package/src/components/atoms/wt-rounded-action/wt-rounded-action.vue

@@ -1,156 +0,0 @@
-<template>
-  <wt-button
-    v-bind="{ ...$attrs, ...$props }"
-    :class="[
-      `wt-rounded-action--color-${color}`,
-      { 'wt-rounded-action--active': active },
-      { 'wt-rounded-action--disabled': disabled },
-      { 'wt-rounded-action--filled': filled },
-    ]"
-    :size="size"
-    color="secondary"
-    class="wt-rounded-action"
-    @click="$emit('click', $event)"
-  >
-    <wt-icon
-      :color="iColor"
-      :icon="icon"
-      :size="size"
-    ></wt-icon>
-  </wt-button>
-</template>
-
-<script>
-export default {
-  name: 'wt-rounded-action',
-  props: {
-    icon: {
-      type: String,
-    },
-    color: {
-      type: String,
-      options: ['secondary', 'accent', 'success', 'danger', 'hold', 'transfer'],
-    },
-    iconColor: {
-      type: String,
-      default: null,
-    },
-    size: {
-      type: String,
-      default: 'md',
-      options: ['sm', 'md'],
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    filled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    iColor() {
-      if (this.iconColor) return this.iconColor;
-      if (this.disabled) return 'secondary-50';
-      if (this.color === 'secondary') return null; // dont change icon color
-      if (this.filled && this.color) return 'contrast';
-      return this.color;
-    },
-  },
-};
-</script>
-
-<!--not scoped to change .icon colors-->
-<style lang="scss" scoped>
-.wt-button.wt-rounded-action {
-  min-width: auto;
-  min-height: 0;
-  padding: var(--rounded-action-padding);
-  line-height: 0;
-  border: var(--btn-border);
-  border-color: transparent;
-  background: var(--rounded-action-bg-color);
-  box-shadow: var(--elevation-1);
-
-  &:hover {
-    background: var(--rounded-action-bg-color); // override default wt-button hover
-    box-shadow: var(--elevation-2);
-  }
-
-  &--active {
-    border-color: var(--icon-color);
-
-    &.wt-rounded-action--color-secondary {
-      border-color: var(--icon-color);
-    }
-
-    &.wt-rounded-action--color-accent {
-      border-color: var(--btn-accent--hover-color);
-    }
-
-    &.wt-rounded-action--color-success {
-      border-color: var(--btn-true--hover-color);
-    }
-
-    &.wt-rounded-action--color-danger {
-      border-color: var(--btn-false--hover-color);
-    }
-
-    &.wt-rounded-action--color-hold {
-      border-color: var(--btn-hold--hover-color);
-    }
-
-    &.wt-rounded-action--color-transfer {
-      border-color: var(--btn-transfer--hover-color);
-    }
-  }
-
-  &--filled {
-
-    &:hover {
-      box-shadow: var(--elevation-5);
-      border-color: var(--rounded-action-bg-color);
-    }
-
-    &.wt-rounded-action--color-secondary {
-      background-color: var(--btn-secondary-color);
-      border-color: var(--btn-secondary-color);
-    }
-
-    &.wt-rounded-action--color-accent {
-      background-color: var(--btn-accent--hover-color);
-      border-color: var(--btn-accent--hover-color);
-    }
-
-    &.wt-rounded-action--color-success {
-      background-color: var(--btn-true--hover-color);
-      border-color: var(--btn-true--hover-color);
-    }
-
-    &.wt-rounded-action--color-danger {
-      background-color: var(--btn-false--hover-color);
-      border-color: var(--btn-false--hover-color);
-    }
-
-    &.wt-rounded-action--color-hold {
-      background-color: var(--btn-false--hover-color);
-      border-color: var(--btn-false--hover-color);
-    }
-
-    &.wt-rounded-action--color-transfer {
-      background-color: var(--btn-false--hover-color);
-      border-color: var(--btn-false--hover-color);
-    }
-  }
-
-  &.wt-rounded-action--disabled {
-    border-color: transparent;
-    box-shadow: none;
-  }
-}
-</style>

package/src/components/atoms/wt-tooltip/wt-tooltip.vue

@@ -1,48 +0,0 @@
-<template>
-  <v-tooltip
-    :class="{
-      'wt-tooltip--contrast': contrast
-    }"
-    :placement="placement"
-    :popper-class="[
-      'wt-tooltip__popper',
-       { 'wt-tooltip--contrast__popper': contrast },
-       popperClass,
-     ]"
-    :triggers="['hover', 'focus', 'touch']"
-    class="wt-tooltip"
-  >
-    <slot name="activator"></slot>
-    <template #popper>
-      <slot></slot>
-    </template>
-  </v-tooltip>
-</template>
-
-<script>
-export default {
-  name: 'wt-tooltip',
-  props: {
-    contrast: {
-      type: Boolean,
-      default: false,
-    },
-    placement: {
-      type: String,
-      default: 'auto',
-    },
-    popperClass: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.wt-tooltip {
-  display: inline-block;
-  line-height: 0;
-  height: fit-content;
-}
-</style>

package/src/components/molecules/wt-button-select/wt-button-select.vue

@@ -1,184 +0,0 @@
-<template>
-  <div
-    class="wt-button-select"
-    v-clickaway="away">
-
-    <wt-button
-      class="wt-button-select__button"
-      v-bind="$attrs"
-      :disabled="disabled"
-      @click="$emit('click', $event)"
-    >
-      <slot></slot>
-    </wt-button>
-
-    <wt-context-menu
-      :options="options"
-      :visible="isOpened"
-      @click="selectOption"
-    >
-      <template v-slot:activator>
-        <wt-button
-          class="wt-button-select__select-btn"
-          v-bind="$attrs"
-          :disabled="disabled"
-          :loading="false"
-          @click="isOpened = !isOpened"
-        >
-          <wt-icon
-            class="wt-button-select__select-arrow"
-            :class="{'wt-button-select__select-arrow--active': isOpened}"
-            icon="arrow-down"
-            :disabled="disabled"
-          ></wt-icon>
-        </wt-button>
-      </template>
-    </wt-context-menu>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'wt-button-select',
-  data: () => ({
-    isOpened: false,
-  }),
-  props: {
-    // all buttons props are passed as "$attrs"
-    options: {
-      type: Array,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    selectOption({ option, index }) {
-      this.$emit('click:option', option, index);
-      this.isOpened = false;
-    },
-    away() {
-      this.isOpened = false;
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.wt-button-select {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--button-select-buttons-gap);
-}
-
-.wt-button-select__button {
-  padding: var(--button-select-button-padding);
-  border-radius: var(--border-radius) 0 0 var(--border-radius);
-}
-
-.wt-button-select__select-btn {
-  min-width: auto;
-  padding: var(--button-select-icon-button-padding);
-  border-radius: 0 var(--border-radius) var(--border-radius) 0;
-
-  // NORMAL MODE
-  &:not(.wt-button--outline)::v-deep {
-    & .wt-icon__icon {
-      fill: var(--button-select-icon-color-dark);
-    }
-
-    // For secondary color, the icon color and icon hover color are the same as in primary color mode
-
-    &.danger,
-    &.success,
-    &.transfer {
-      .wt-icon__icon {
-        fill: var(--button-select-icon-color-ligth);
-      }
-    }
-  }
-
-  //OUTLINE MODE
-  &.wt-button--outline::v-deep {
-    & .wt-icon__icon {
-      fill: var(--button-select-icon-color-primary);
-    }
-
-    &:hover,
-    &:active {
-      .wt-icon__icon {
-        fill: var(--button-select-icon-color-primary--hover);
-      }
-    }
-
-    &.danger {
-      & .wt-icon__icon {
-        fill: var(--icon-color-danger)
-      }
-
-      &:hover,
-      &:active {
-        .wt-icon__icon {
-          fill: var(--button-select-icon-color-danger--hover);
-        }
-      }
-    }
-
-    &.success {
-      & .wt-icon__icon {
-        fill: var(--icon-color-success)
-      }
-
-      &:hover,
-      &:active {
-        .wt-icon__icon {
-          fill: var(--button-select-icon-color-success--hover);
-        }
-      }
-    }
-
-    &.transfer {
-      & .wt-icon__icon {
-        fill: var(--icon-color-transfer)
-      }
-
-      &:hover,
-      &:active {
-        .wt-icon__icon {
-          fill: var(--button-select-icon-color-transfer--hover);
-        }
-      }
-    }
-
-    &.secondary {
-      .wt-icon__icon {
-        fill: var(--button-select-icon-color-secondary);
-      }
-
-      &:hover,
-      &:active {
-        .wt-icon__icon {
-          fill: var(--button-select-icon-color-secondary--hover);
-        }
-      }
-    }
-  }
-
-  // DISABLED MODE
-  &.wt-button--disabled .wt-icon::v-deep .wt-icon__icon {
-    fill: var(--icon-color-secondary-50);
-  }
-
-  // OPEN AND SHUT ARROW
-  .wt-button-select__select-arrow {
-    display: flex;
-    transform: rotate(0);
-
-    &--active {
-      transform: rotate(180deg);
-    }
-  }
-}
-</style>

package/src/components/molecules/wt-checkbox/wt-checkbox.vue

@@ -1,179 +0,0 @@
-<template>
-  <div
-    class="wt-checkbox"
-    :class="{
-      'wt-checkbox--active': isChecked,
-      'wt-checkbox--outline': outline,
-      'wt-checkbox--disabled': disabled,
-    }"
-  >
-    <wt-label class="wt-checkbox__wrapper" v-bind="labelProps">
-      <input
-        class="wt-checkbox__input"
-        type="checkbox"
-        :value="value"
-        :checked="isChecked"
-        :disabled="disabled"
-        @change="inputHandler"
-      >
-      <span class="wt-checkbox__checkmark">
-      <wt-icon
-        :icon="checkboxIcon"
-        :color="iconColor"
-      ></wt-icon>
-    </span>
-      <!-- @slot Custom label markup -->
-      <slot name="label" v-bind="{ label, isChecked, disabled }">
-        <div v-if="label" class="wt-checkbox__label">{{ label }}</div>
-      </slot>
-    </wt-label>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'wt-checkbox',
-    model: {
-      prop: 'selected',
-      event: 'change',
-    },
-    props: {
-      value: {
-        type: [String, Boolean],
-        default: '',
-      },
-      selected: {
-        type: [Array, Boolean],
-        default: () => [],
-      },
-      label: {
-        type: String,
-        default: '',
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      outline: {
-        type: Boolean,
-        default: false,
-      },
-      labelProps: {
-        type: Object,
-        description: 'Object with props, passed down to wt-label as props',
-      },
-    },
-    computed: {
-      isChecked() {
-        if (typeof this.selected === 'boolean') {
-          return this.selected;
-        }
-        return this.selected.includes(this.value);
-      },
-      checkboxIcon() {
-        return this.isChecked ? 'checkbox--checked' : 'checkbox';
-      },
-      iconColor() {
-        if (this.disabled) return 'disabled';
-        if (this.isChecked) return 'active';
-        return null;
-      },
-    },
-    methods: {
-      inputHandler() {
-        if (typeof this.selected === 'boolean') {
-          this.$emit('change', !this.selected);
-        } else {
-          let selected = [...this.selected];
-          if (selected.includes(this.value)) {
-            selected = selected.filter((value) => value !== this.value);
-          } else {
-            selected.push(this.value);
-          }
-          this.$emit('change', selected);
-        }
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-checkbox {
-    @include width-fit-content;
-    box-sizing: border-box;
-
-    .wt-label {
-      cursor: pointer;
-    }
-  }
-
-  .wt-checkbox__wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    user-select: none;
-
-    .wt-checkbox__checkmark {
-      line-height: 0; // prevent icon height >> content
-    }
-  }
-
-  .wt-checkbox__label {
-    margin-left: var(--checkbox-icon-margin);
-    transition: var(--transition);
-    cursor: pointer;
-  }
-
-  /* Hide the browser's default checkbox */
-  .wt-checkbox__input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .wt-checkbox:hover {
-    .wt-checkbox__label {
-      color: var(--form-label--hover-color);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-color--hover);
-    }
-  }
-
-  .wt-checkbox--active {
-    .wt-checkbox__label {
-      color: var(--form-label--active-color);
-    }
-  }
-
-  .wt-checkbox--outline {
-    .wt-checkbox__label {
-      color: var(--form-outline-label-color);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon-outline-color);
-    }
-
-    &.wt-checkbox--active {
-      .wt-checkbox__label {
-        color: var(--form-label--active-color);
-      }
-
-      ::v-deep .wt-icon__icon {
-        fill: var(--icon-outline--active-color);
-      }
-    }
-  }
-
-  .wt-checkbox--disabled {
-    pointer-events: none;
-
-    .wt-checkbox__label {
-      color: var(--form-label--disabled-color);
-    }
-  }
-</style>