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

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

@@ -1,75 +0,0 @@
-<template>
-  <article
-    class="wt-notification"
-    @click="$emit('close')"
-  >
-    <wt-icon
-      class="wt-notification__icon"
-      :icon="notificationIcon"
-      :color="notificationIconColor"
-    ></wt-icon>
-
-    <p class="wt-notification__text">
-      <slot></slot>
-    </p>
-  </article>
-</template>
-
-<script>
-
-  export default {
-    name: 'wt-notification',
-    props: {
-      type: {
-        type: String,
-        default: 'info',
-      },
-    },
-    computed: {
-      notificationIcon() {
-        switch (this.type) {
-          case 'info': return 'done';
-          case 'error': return 'attention';
-          default: return '';
-        }
-      },
-      notificationIconColor() {
-        switch (this.type) {
-          case 'info': return 'success';
-          case 'error': return 'danger';
-          default: return '';
-        }
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-notification {
-    @extend %typo-body-1;
-    @include width-fit-content;
-
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    min-width: var(--notification-min-width);
-    max-width: var(--notification-max-width);
-    padding: var(--notification-padding);
-    color: var(--notification-text-color);
-    background: var(--notification-bg-color);
-    border-radius: var(--border-radius);
-    box-shadow: var(--elevation-1);
-    cursor: pointer;
-  }
-
-  .wt-notification__icon {
-    flex: 0 0 var(--icon-md-size);
-    margin-right: var(--notification-icon-margin);
-  }
-
-  .wt-notification__text {
-    flex-grow: 1;
-    align-self: center;
-    margin: 0;
-  }
-</style>

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

@@ -1,170 +0,0 @@
-<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 :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],
-        default: '',
-      },
-      // currently selected value
-      selected: {
-        type: [String, Number, Boolean],
-        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>
-  /* 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: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/molecules/wt-search-bar/wt-search-bar.vue

@@ -1,194 +0,0 @@
-<template>
-  <div
-    :class="{
-      'wt-search-bar--outline': outline,
-    }"
-    class="wt-search-bar"
-  >
-    <div class="wt-search-bar__wrapper">
-      <input
-        :placeholder="searchBarPlaceholder"
-        :value="value"
-        class="wt-search-bar__input"
-        type="search"
-        v-on="listeners"
-      >
-      <div class="wt-search-bar__search-icon">
-        <slot name="search-icon">
-          <wt-icon
-            icon="search"
-          ></wt-icon>
-        </slot>
-      </div>
-      <wt-icon-btn
-        :class="{ 'hidden': !value }"
-        class="wt-search-bar__reset-icon-btn"
-        icon="close"
-        @click="$emit('input', '')"
-      ></wt-icon-btn>
-    </div>
-  </div>
-</template>
-
-<script>
-import debounce from '../../../scripts/debounce';
-
-export default {
-  name: 'wt-search-bar',
-  props: {
-    /**
-     * Current search-bar value (`v-model`)
-     */
-    value: {
-      type: String,
-      default: '',
-    },
-    /**
-     * search-bar placeholder
-     */
-    placeholder: {
-      type: String,
-    },
-    debounce: {
-      type: Boolean,
-      default: false,
-    },
-    debounceDelay: {
-      type: Number,
-      default: 1000,
-    },
-    outline: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  watch: {
-    value() {
-      this.search.call(this);
-    },
-  },
-
-  created() {
-    if (this.debounce) {
-      this.search = debounce(this.search, this.debounceDelay);
-    }
-  },
-
-  computed: {
-    listeners() {
-      return {
-        ...this.$listeners,
-        input: (event) => this.$emit('input', event.target.value),
-        keyup: this.handleKeyup,
-      };
-    },
-    searchBarPlaceholder() {
-      return this.placeholder || this.$t('webitelUI.searchBar.placeholder');
-    },
-  },
-
-  methods: {
-    search() {
-      this.$emit('search', this.value);
-    },
-    handleKeyup(event) {
-      if (event.key === 'Enter') {
-        this.$emit('enter');
-        event.preventDefault();
-      } else if (event.key === 'Esc') {
-        this.$emit('input', '');
-        event.preventDefault();
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.wt-search-bar {
-  cursor: text;
-
-
-  .wt-search-bar__wrapper {
-    position: relative;
-  }
-
-  .wt-search-bar__search-icon {
-    position: absolute;
-    top: 50%;
-    left: var(--input-icon-margin);
-    transform: translateY(-50%);
-    line-height: 0;
-    pointer-events: none;
-  }
-
-  .wt-search-bar__reset-icon-btn {
-    position: absolute;
-    top: 50%;
-    right: var(--input-icon-margin);
-    transform: translateY(-50%);
-
-    .wt-search-bar:not(:focus-within) & {
-      pointer-events: none;
-      opacity: 0;
-    }
-  }
-
-  .wt-search-bar__input {
-    @extend %typo-body-1;
-    @include wt-placeholder;
-
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    padding: var(--search-bar-padding);
-    transition: var(--transition);
-    color: var(--form-input-color);
-    border: var(--input-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
-
-    &:focus {
-      @include wt-placeholder('focus');
-      border-color: var(--form-border--hover-color);
-    }
-
-    .wt-search-bar--outline & {
-      border-color: var(--form-outline-border-color);
-    }
-
-    .wt-search-bar--outline:hover &,
-    .wt-search-bar--outline &:focus {
-      border-color: var(--form-outline-border--hover-color);
-    }
-  }
-
-  /* make icons black */
-  .wt-search-bar:hover ::v-deep .wt-icon__icon,
-  .wt-search-bar:focus-within ::v-deep .wt-icon__icon {
-    fill: var(--icon-color--hover);
-  }
-
-  /* clears the 'X' from Internet Explorer */
-  .wt-search-bar__input::-ms-clear {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-
-  .wt-search-bar__input::-ms-reveal {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-
-  /* clears the 'X' from Chrome */
-  .wt-search-bar__input::-webkit-search-decoration,
-  .wt-search-bar__input::-webkit-search-cancel-button,
-  .wt-search-bar__input::-webkit-search-results-button,
-  .wt-search-bar__input::-webkit-search-results-decoration {
-    display: none;
-  }
-}
-</style>

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

@@ -1,182 +0,0 @@
-<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>
-  .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>