@webitel/ui-sdk 0.1.2 → 0.1.3-vite

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

@@ -1,58 +0,0 @@
-<template>
-  <label
-    class="wt-label"
-    :class="{
-      'wt-label--outline': outline,
-      'wt-label--invalid': invalid,
-      'wt-label--disabled': disabled,
-    }"
-    :for="this.for"
-  >
-    <slot></slot>
-  </label>
-</template>
-
-<script>
-  export default {
-    name: 'wt-label',
-    props: {
-      for: {
-        type: String,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      outline: {
-        type: Boolean,
-        default: false,
-      },
-      invalid: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-label {
-    @extend %typo-body-lg;
-
-    display: block;
-    color: var(--form-label-color);
-    transition: var(--transition);
-
-    &--outline {
-      color: var(--form-outline-label-color);
-    }
-
-    &--invalid {
-      color: var(--label--invalid-color);
-    }
-
-    &--disabled {
-      color: var(--form-label--disabled-color);
-    }
-  }
-</style>

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

@@ -1,54 +0,0 @@
-<template>
-  <span
-    class="wt-tooltip"
-    :class="{
-      'wt-tooltip--visible': visible,
-      'wt-tooltip--contrast': contrast
-    }"
-  >
-    <slot></slot>
-  </span>
-</template>
-
-<script>
-  export default {
-    name: 'wt-tooltip',
-    props: {
-      visible: {
-        type: Boolean,
-        default: false,
-      },
-      contrast: {
-        type: Boolean,
-        default: false,
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-tooltip {
-    @extend %typo-body-lg;
-    display: inline-block;
-    min-width: 0;
-    padding: var(--tooltip-padding);
-    color: var(--tooltip-light-text-color);
-    background: var(--tooltip-light-bg-color);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
-    transition: var(--transition);
-    opacity: 0;
-    pointer-events: none;
-    z-index: var(--tooltip-z-index);
-
-    &--contrast {
-      color: var(--tooltip-dark-text-color);
-      background: var(--tooltip-dark-bg-color);
-    }
-
-    &--visible, &:hover {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-</style>

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

@@ -1,167 +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">
-      <input
-        class="wt-checkbox__input"
-        type="checkbox"
-        :value="value"
-        :checked="isChecked"
-        :disabled="disabled"
-        @change="inputHandler"
-      >
-      <span class="wt-checkbox__checkmark">
-      <wt-icon :icon="checkboxIcon"></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,
-      },
-    },
-    computed: {
-      isChecked() {
-        if (typeof this.selected === 'boolean') {
-          return this.selected;
-        }
-        return this.selected.includes(this.value);
-      },
-      checkboxIcon() {
-        return this.isChecked ? 'checkbox--checked' : 'checkbox';
-      },
-    },
-    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-checkbox__wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-  }
-
-  .wt-checkbox__label {
-    margin-left: var(--checkbox-icon-margin);
-    transition: var(--transition);
-  }
-
-  /* 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--hover-color);
-    }
-  }
-
-  .wt-checkbox--active {
-    .wt-checkbox__label {
-      color: var(--form-label--active-color);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon--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);
-    }
-
-    ::v-deep .wt-icon__icon {
-      fill: var(--icon--disabled-color);
-    }
-  }
-</style>

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

@@ -1,200 +0,0 @@
-<template>
-  <div
-    class="wt-datepicker"
-    :class="{
-      'wt-datepicker--disabled': disabled,
-    }"
-  >
-    <wt-label :disabled="disabled">
-      <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
-    </wt-label>
-    <vue-datepicker
-      class="wt-datepicker__datepicker"
-      :value="+value"
-      :format="format"
-      :maximum-view="maximumView"
-      :disabled="disabled"
-      :disabled-dates="disabledDates"
-      :lang="lang"
-      calendar-button
-      monday-first
-      @input="$emit('input', $event.getTime())"
-    >
-    </vue-datepicker>
-  </div>
-</template>
-
-<script>
-  import VueDatepicker from 'vuejs-datepicker';
-
-  export default {
-    name: 'wt-datepicker',
-    components: {
-      VueDatepicker,
-    },
-    props: {
-      value: {
-        type: [String, Number],
-        default: Date.now(),
-      },
-      /**
-       * label above calendar input
-       */
-      label: {
-        type: String,
-      },
-      format: {
-        type: String,
-      },
-      maximumView: {
-        type: String,
-        default: 'day',
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      disabledDates: {
-        type: Object,
-      },
-      lang: {
-        type: String,
-        default: 'en',
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .wt-label {
-    margin-bottom: var(--label-margin);
-    cursor: text;
-  }
-
-  ::v-deep .vdp-datepicker {
-    min-width: var(--datepicker-width);
-
-    // preview input
-    > div:first-child {
-      position: relative;
-
-      input {
-        @extend %typo-body-lg;
-        box-sizing: border-box;
-        width: 100%;
-        padding: var(--datepicker-padding);
-        border: var(--datepicker-border);
-        border-color: var(--form-border-color);
-        border-radius: var(--border-radius);
-      }
-
-      // arrow down icon
-      .vdp-datepicker__calendar-button {
-        position: absolute;
-        top: 50%;
-        right: var(--datepicker-icon-margin);
-        width: 24px;
-        height: 24px;
-        transform: translateY(-50%);
-
-        &:before {
-          content: '';
-          position: absolute;
-          width: 24px;
-          height: 24px;
-          background: url("../../../assets/icons/arrow-down--md.svg") center center;
-          background-size: contain;
-          transition: var(--transition);
-        }
-
-        // hide defaults
-        span {
-          display: none;
-        }
-      }
-
-      // calendar icon
-      &:before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: var(--datepicker-icon-margin);
-        width: 24px;
-        height: 24px;
-        background: url("../../../assets/icons/calendar--md.svg") center center;
-        background-size: contain;
-        transform: translateY(-50%);
-        pointer-events: none;
-      }
-    }
-    @import '../../../css/components/molecules/wt-datepicker/datepicker-calendar';
-  }
-
-  .wt-datepicker:hover,
-  .wt-datepicker:focus-within {
-    .wt-label {
-      color: var(--form-label--hover-color);
-    }
-
-    ::v-deep .vdp-datepicker {
-      min-width: var(--datepicker-width);
-
-      // preview input
-      > div:first-child {
-
-        input {
-          border-color: var(--form-border--hover-color);
-        }
-
-        // arrow down icon
-        .vdp-datepicker__calendar-button:before {
-          background: url("../../../assets/icons/arrow-down--active--md.svg") center center;
-          background-size: contain;
-        }
-
-        // calendar icon
-        &:before {
-          background: url("../../../assets/icons/calendar--active--md.svg") center center;
-        }
-      }
-    }
-  }
-
-  .wt-datepicker:focus-within {
-    ::v-deep .vdp-datepicker {
-      // arrow down icon
-      .vdp-datepicker__calendar-button:before {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .wt-datepicker--disabled {
-    pointer-events: none;
-
-    ::v-deep .vdp-datepicker {
-      min-width: var(--datepicker-width);
-
-      // preview input
-      > div:first-child {
-
-        input {
-          background: var(--form-border--disabled-color);
-          border-color: var(--form-border--disabled-color);
-        }
-
-        // arrow down icon
-        .vdp-datepicker__calendar-button:before {
-          background: url("../../../assets/icons/arrow-down--disabled--md.svg") center center;
-          background-size: contain;
-        }
-
-        // calendar icon
-        &:before {
-          background: url("../../../assets/icons/calendar--disabled--md.svg") center center;
-        }
-      }
-    }
-  }
-</style>