@webitel/ui-sdk 0.1.3 → 0.1.4-vite

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

@@ -0,0 +1,130 @@
+<template>
+  <div
+    v-clickaway="atClickaway"
+    class="wt-button-select"
+  >
+    <wt-button
+      v-bind="$attrs"
+      :color="color"
+      :disabled="disabled"
+      class="wt-button-select__button"
+      @click="$emit('click', $event)"
+    >
+      <slot></slot>
+    </wt-button>
+
+    <wt-context-menu
+      :options="options"
+      :visible="isOpened"
+      @click="selectOption"
+    >
+      <template v-slot:activator>
+        <wt-button
+          v-bind="$attrs"
+          :color="color"
+          :disabled="disabled"
+          :loading="false"
+          class="wt-button-select__select-btn"
+          @click="isOpened = !isOpened"
+        >
+          <wt-icon
+            :class="{'wt-button-select__select-arrow--active': isOpened}"
+            :color="color === 'primary' ? 'on-primary' : 'default'"
+            :disabled="disabled"
+            class="wt-button-select__select-arrow"
+            icon="arrow-down"
+          ></wt-icon>
+        </wt-button>
+      </template>
+    </wt-context-menu>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  /**
+   * See context-menu component docs
+   */
+  options: {
+    type: Array,
+    required: true,
+  },
+  /**
+   * @values 'primary', 'secondary'
+   * @example <wt-button color="secondary"></wt-button>
+   */
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  /**
+   * @event click
+   */
+  'click',
+  /**
+   * Click on option in context-menu
+   *
+   * @event click:option
+   *
+   * @property {object} option clicked option object
+   * @property {index} index clicked option index in options list
+   */
+  'click:option',
+]);
+
+const isOpened = ref(false);
+
+function selectOption({ option, index }) {
+  emit('click:option', option, index);
+  isOpened.value = false;
+}
+
+function atClickaway() {
+  isOpened.value = false;
+}
+
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<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;
+
+  // OPEN AND SHUT ARROW
+  .wt-button-select__select-arrow {
+    display: flex;
+    transform: rotate(0);
+
+    &--active {
+      transform: rotate(180deg);
+    }
+  }
+}
+</style>

package/src/components/wt-checkbox/__tests__/WtCheckbox.spec.js

@@ -0,0 +1,41 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import WtCheckbox from '../wt-checkbox.vue';
+import WtLabel from '../../wt-label/wt-label.vue';
+import WtIcon from '../../wt-icon/wt-icon.vue';
+
+describe('WtCheckbox', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCheckbox, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+    });
+    expect(wrapper.classes('wt-checkbox')).toBe(true);
+  });
+
+  it('renders label text when passed', () => {
+    const label = 'Hello there';
+    const wrapper = mount(WtCheckbox, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      props: { label },
+    });
+    expect(wrapper.find('.wt-checkbox__label').text()).toBe(label);
+  });
+
+  it('toggles passed value at click', () => {
+    const selected = true;
+    const wrapper = mount(WtCheckbox, {
+      stubs: {
+        WtLabel,
+        WtIcon,
+      },
+      props: { selected },
+    });
+    wrapper.find('.wt-checkbox__input').trigger('change');
+    expect(wrapper.emitted().change[0]).toEqual([!selected]);
+  });
+});

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

@@ -0,0 +1,4 @@
+
+:root {
+  --checkbox-icon-margin: var(--spacing-xs);
+}

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

@@ -0,0 +1,191 @@
+<template>
+  <div
+    class="wt-checkbox"
+    :class="{
+      'wt-checkbox--active': isChecked,
+      'wt-checkbox--outline': outline,
+      'wt-checkbox--disabled': disabled,
+    }"
+  >
+    <wt-label
+      v-bind="labelProps"
+      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"
+        :color="iconColor"
+      ></wt-icon>
+    </span>
+      <!-- @slot Custom label markup -->
+      <slot
+        v-bind="{ label, isChecked, disabled }"
+        name="label"
+      >
+        <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',
+    },
+  },
+  emits: ['change'],
+  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">
+@import './variables.scss';
+</style>
+
+<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>

package/src/components/wt-chip/__tests__/WtChip.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils';
+import WtChip from '../wt-chip.vue';
+
+describe('WtChip', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtChip);
+    expect(wrapper.classes('wt-chip')).toBe(true);
+  });
+
+  it('renders a chip content via default slot', () => {
+    const content = 'chip content';
+    const wrapper = shallowMount(WtChip, {
+      slots: {
+        default: content,
+      },
+    });
+    expect(wrapper.find('.wt-chip').text()).toBe(content);
+  });
+});

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

@@ -0,0 +1,7 @@
+
+:root {
+  --chip-padding: var(--spacing-2xs) var(--spacing-sm);
+  --chip-border-radius: var(--spacing-lg);
+  --chip-bg-color: var(--accent-secondary-color);
+  --chip-bg-color--outline: var(--secondary-color);
+}

package/src/components/wt-chip/wt-chip.scss

@@ -0,0 +1,41 @@
+.wt-chip {
+  @extend %typo-body-2;
+
+  display: inline-block;
+  padding: var(--chip-padding);
+  color: var(--text-primary-color);
+  border-radius: var(--chip-border-radius);
+  background: var(--chip-bg-color);
+
+  &--main-color {
+    background: var(--chip-bg-color);
+  }
+
+  &--outline-color {
+    background: var(--chip-bg-color--outline);
+  }
+
+  &--accent-color {
+    background: var(--primary-color);
+  }
+
+  &--secondary-color {
+    background: var(--secondary-color);
+  }
+
+  &--secondary-50-color {
+    background: var(--secondary-color-50);
+  }
+
+  &--success-color {
+    background: var(--true-color);
+  }
+
+  &--danger-color {
+    background: var(--false-color);
+  }
+
+  &--transfer-color {
+    background: var(--transfer-color);
+  }
+}

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

@@ -0,0 +1,24 @@
+<template>
+  <span class="wt-chip" :class="`wt-chip--${color}-color`">
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'wt-chip',
+  props: {
+    color: {
+      type: String,
+      default: 'main',
+      options: ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer'],
+      notes: '"main" and "outline" are chip-specific colors',
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import './wt-chip.scss';
+@import './variables.scss';
+</style>

package/src/components/wt-context-menu/__tests__/WtContextMenu.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtContextMenu from '../wt-context-menu.vue';
+
+describe('WtContextMenu', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtContextMenu, { props: { options: [] } });
+    expect(wrapper.classes('wt-context-menu')).toBe(true);
+  });
+});

package/src/components/wt-context-menu/_variables.scss

@@ -0,0 +1,9 @@
+:root {
+  --context-menu-option-color--hover: var(--secondary-color);
+
+  --context-menu-background-color: var(--main-color);
+
+  --context-menu-option-padding: var(--spacing-xs);
+
+  --context-menu-option-color--disabled: var(--text--disabled-color);
+}

package/src/components/wt-context-menu/wt-context-menu.vue

@@ -0,0 +1,131 @@
+<template>
+  <wt-tooltip
+    class="wt-context-menu"
+    :visible="visible"
+    :triggers="['click', 'touch']"
+    placement="bottom-end"
+    popper-class="wt-context-menu__floating-wrapper"
+  >
+    <template v-slot:activator>
+      <slot name="activator"></slot>
+    </template>
+    <template v-slot:default="{ hide }">
+      <ul
+        class="wt-context-menu__menu"
+        :style="`width: ${width}; min-width: ${minWidth}; max-width: ${maxWidth};`"
+      >
+        <li
+          class="wt-context-menu__option-wrapper"
+          v-for="(option, index) of options"
+          :key="index"
+        >
+          <!--      <a> click.prevent prevents redirect to # -->
+          <a
+            :class="[
+              { 'wt-context-menu__option--disabled': option.disabled },
+            ]"
+            class="wt-context-menu__option"
+            href="#"
+            @click.prevent="handleOptionClick({ option, index, hide })"
+          >
+            <slot
+              v-bind="option"
+              name="option"
+            >
+              {{ option.text || option }}
+            </slot>
+          </a>
+        </li>
+      </ul>
+    </template>
+  </wt-tooltip>
+</template>
+
+<script setup>
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+    description: '[{ text, disabled, ... anything you need }]',
+  },
+  visible: {
+    type: Boolean,
+  },
+  width: {
+    type: [String],
+    default: 'auto',
+  },
+  minWidth: {
+    type: [String],
+    default: '160px',
+  },
+  maxWidth: {
+    type: [String],
+    default: '300px',
+  },
+});
+
+const emit = defineEmits([
+  'click',
+]);
+
+function handleOptionClick({ option, index, hide }) {
+  emit('click', { option, index });
+  hide();
+}
+
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+
+.wt-context-menu {
+  line-height: 0;
+
+  &.wt-tooltip :deep(.wt-context-menu__floating-wrapper) {
+    padding: 0;
+  }
+}
+
+.wt-context-menu__menu {
+  @extend %typo-body-2;
+  background-color: var(--context-menu-background-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  transition: var(--transition);
+  z-index: 1;
+}
+
+.wt-context-menu__option-wrapper {
+  &:first-of-type {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+  }
+
+  &:last-of-type {
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+  }
+
+  &:only-of-type {
+    border-radius: var(--border-radius);
+  }
+}
+
+.wt-context-menu__option {
+  display: block;
+  padding: var(--context-menu-option-padding);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--context-menu-option-color--hover);
+    transition: var(--transition);
+  }
+
+  &--disabled {
+    pointer-events: none;
+    color: var(--context-menu-option-color--disabled);
+  }
+}
+</style>

package/src/components/wt-copy-action/__tests__/WtCopyAction.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import WtIconBtn from '../../wt-icon-btn/wt-icon-btn.vue';
+import WtCopyAction from '../wt-copy-action.vue';
+
+describe('WtCopyAction', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCopyAction, {
+      stubs: {
+        WtIconBtn,
+      },
+    });
+    expect(wrapper.classes('wt-copy-action')).toBe(true);
+  });
+});

package/src/components/wt-copy-action/wt-copy-action.vue

@@ -0,0 +1,63 @@
+<template>
+  <wt-tooltip class="wt-copy-action">
+    <template v-slot:activator>
+      <wt-icon-btn
+        v-bind="$attrs"
+        :icon="copied ? 'done' : 'copy'"
+        class="copy-action"
+        @click="copy"
+      ></wt-icon-btn>
+    </template>
+    {{ copied ? copiedTooltip : copyTooltip }}
+  </wt-tooltip>
+</template>
+
+<script>
+import copy from 'clipboard-copy';
+
+let copiedIdTimeout = null;
+
+export default {
+  name: 'wt-copy-action',
+  data: () => ({
+    copied: false,
+  }),
+  props: {
+    value: {
+      type: String,
+    },
+    tooltips: {
+      type: Object,
+      default: () => ({
+        copy: '',
+        copied: '',
+      }),
+    },
+  },
+  computed: {
+    copyTooltip() {
+      return this.tooltips.copy || this.$t('webitelUI.copyAction.copy');
+    },
+    copiedTooltip() {
+      return this.tooltips.copied || this.$t('webitelUI.copyAction.copied');
+    },
+  },
+  methods: {
+    async copy() {
+      try {
+        await copy(this.value);
+        this.copied = this.value;
+        if (copiedIdTimeout) window.clearTimeout(copiedIdTimeout);
+        copiedIdTimeout = setTimeout(() => {
+          this.copied = null;
+        }, 1500);
+      } catch (err) {
+        throw err;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>