@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/Select/Select.vue

@@ -1,409 +0,0 @@
-<template>
-  <div @keydown="onKeyDownSelect" v-click-outside="onClickOutside" class="unnnic-select">
-    <p v-if="label" class="unnnic-form__label">{{ label }}</p>
-    <dropdown-skeleton type="manual" :value="active" position="bottom" ref="dropdown-skeleton">
-      <text-input
-        :value="valueLabel || labelForValue"
-        :placeholder="placeholder"
-        :icon-right="active ? 'arrow-button-up-1' : 'arrow-button-down-1'"
-        :type="type"
-        icon-right-clickable
-        @icon-right-click="active = !active"
-        :hasCloudyColor="hasCloudyColor"
-        :size="size"
-        @focus="active = true"
-        :disabled="disabled"
-        readonly
-      />
-      <slot />
-      <template v-slot:inside="props">
-        <div
-          v-if="active"
-          :style="{ width: props.width }"
-          :class="{
-            'unnnic-select__options': true,
-            'unnnic-select__options--active': active,
-            'unnnic-select__options--inactive': !active,
-          }"
-        >
-          <div :style="{ overflow: 'auto' }">
-            <select-item
-              v-if="search"
-              class="unnnic-select__header"
-              :selectable="false"
-              :size="size"
-            >
-              <text-input
-                v-model="searchValue"
-                :placeholder="searchPlaceholder"
-                :icon-left="searchIconLeft"
-                :size="searchSize"
-              />
-            </select-item>
-
-            <select-item
-              v-for="(option, index) in optionsHeader"
-              :tabindex="index"
-              :size="size"
-              :key="index"
-              @click="onSelectOption(option, 'header')"
-              :title="option.text"
-            >
-              {{ option.text }}
-            </select-item>
-
-            <select-item
-              v-if="hasHeader()"
-              class="unnnic-select__header"
-              :selectable="false"
-              :size="size"
-            >
-              <slot name="header" />
-            </select-item>
-            <div class="unnnic-select__options__scroll-area">
-              <select-item
-                v-for="(option, index) in filterOptions(options())"
-                :tabindex="index"
-                :size="size"
-                :key="option.value"
-                :active="option.value === value"
-                @click="onSelectOption(option)"
-                :title="option.text"
-              >
-                {{ option.text }}
-              </select-item>
-            </div>
-          </div>
-        </div>
-      </template>
-    </dropdown-skeleton>
-    <p v-if="message" class="unnnic-form__message">{{ message }}</p>
-  </div>
-</template>
-
-<script>
-import vClickOutside from 'v-click-outside';
-import selectItem from './SelectItem.vue';
-import TextInput from '../Input/TextInput.vue';
-import DropdownSkeleton from '../Dropdown/DropdownSkeleton.vue';
-
-export default {
-  name: 'UnnicSelect',
-  components: { TextInput, selectItem, DropdownSkeleton },
-  props: {
-    search: {
-      type: Boolean,
-    },
-
-    searchIconLeft: {
-      type: String,
-      default: 'search-1',
-    },
-
-    searchPlaceholder: {
-      type: String,
-    },
-
-    size: {
-      type: String,
-      default: 'md',
-    },
-    type: {
-      type: String,
-      default: 'normal',
-      validator(value) {
-        return ['normal', 'error'].indexOf(value) !== -1;
-      },
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    value: {
-      type: null,
-    },
-    label: {
-      type: String,
-      default: null,
-    },
-    message: {
-      type: String,
-      default: null,
-    },
-    hasCloudyColor: {
-      type: Boolean,
-      default: false,
-    },
-    optionsHeader: {
-      type: Array,
-    },
-    valueLabel: {
-      type: String,
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      active: false,
-      status: 'not-mounted',
-
-      searchValue: '',
-    };
-  },
-
-  watch: {
-    active() {
-      this.$nextTick(() => {
-        this.$refs['dropdown-skeleton'].calculatePosition();
-      });
-    },
-
-    searchValue() {
-      this.$nextTick(() => {
-        this.$refs['dropdown-skeleton'].calculatePosition();
-      });
-    },
-  },
-
-  computed: {
-    searchSize() {
-      return {
-        md: 'sm',
-        sm: 'sm',
-      }[this.size];
-    },
-
-    labelForValue() {
-      if (this.status !== 'mounted') {
-        return '';
-      }
-
-      const selected = this.options().find(
-        (option) => (option.value === '' && this.value == null) || option.value === this.value,
-      );
-
-      if (selected) {
-        return selected.text;
-      }
-
-      return '';
-    },
-  },
-
-  mounted() {
-    this.status = 'mounted';
-  },
-
-  directives: {
-    clickOutside: vClickOutside.directive,
-  },
-  methods: {
-    filterOptions(options) {
-      return options
-        .filter(({ text }) => String(text).toLowerCase().includes(this.searchValue.toLowerCase()));
-    },
-
-    onClickOutside() {
-      this.active = false;
-    },
-    onKeyDownSelect(event) {
-      if ([13, 38, 40].includes(event.keyCode)) {
-        event.preventDefault();
-        const options = this.filterOptions(this.options());
-        if (!options.length) return;
-        const activeOption = options.findIndex((item) => item.value === this.value);
-        const verifyOption = activeOption === -1 ? 0 : activeOption;
-        const key = event.keyCode;
-        const elementScroll = document.querySelector('.unnnic-select__options__scroll-area');
-        // eslint-disable-next-line prefer-destructuring
-        let value = options[verifyOption].value;
-        if (key === 13) {
-          this.onSelectOption(options[verifyOption]);
-          return;
-        }
-        if (key === 38) {
-          value = options[verifyOption === 0 ? 0 : verifyOption - 1].value;
-        } else if (key === 40) {
-          value = options[verifyOption === options.length - 1
-            ? options.length - 1 : verifyOption + 1].value;
-        }
-        const indexOfValue = options.findIndex((item) => item.value === value);
-        if (this.active) elementScroll.childNodes[value === '' ? 0 : indexOfValue].scrollIntoView();
-        this.$emit('onChange', value);
-        this.$emit('input', value);
-      }
-    },
-    onSelectOption(option, type) {
-      if (type === 'header') {
-        if (option.click) {
-          option.click();
-        }
-      } else {
-        const value = option.value === null || option.value.length === 0 ? null : option.value;
-
-        this.$emit('onChange', value);
-        this.$emit('input', value);
-
-        this.active = false;
-      }
-    },
-    options() {
-      const children = this.$el.querySelectorAll('option');
-      return [...children].map((option) => ({
-        value: option.value,
-        text: option.label || option.innerHtml,
-      }));
-    },
-    hasHeader() {
-      return !!this.$slots.header;
-    },
-    handleClickSelect() {
-      this.active = !this.active;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../assets/scss/unnnic.scss';
-.unnnic-select {
-  cursor: pointer;
-  .unnnic-form__input {
-    cursor: pointer;
-  }
-  option {
-    display: none;
-  }
-}
-
-::-webkit-scrollbar {
-  width: 4px;
-}
-
-::-webkit-scrollbar-track {
-  background: $unnnic-color-neutral-soft;
-}
-
-::-webkit-scrollbar-thumb {
-  background: $unnnic-color-neutral-cleanest;
-  border-radius: $unnnic-border-radius-pill;
-}
-
-.unnnic-select {
-  font-family: $unnnic-font-family-secondary;
-  position: relative;
-
-  &__header {
-    &::after {
-      content: '';
-      display: block;
-      border: 1px $unnnic-color-neutral-lightest solid;
-      margin: $unnnic-spacing-stack-xs 0 0 0;
-    }
-  }
-
-  &__field {
-    display: flex;
-    justify-content: space-between;
-    border: 1px solid $unnnic-color-neutral-soft;
-    border-radius: $unnnic-border-radius-sm;
-    background-color: $unnnic-color-background-snow;
-    padding: $unnnic-squish-nano;
-
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    &__selected {
-      font-family: $unnnic-font-family-secondary;
-      font-weight: $unnnic-font-weight-regular;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      max-width: 100%;
-      -webkit-line-clamp: 1;
-
-      &--md {
-        font-size: $unnnic-font-size-body-gt;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-      }
-      &--sm {
-        font-size: $unnnic-font-size-body-md;
-        line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
-      }
-    }
-
-    &--inactive {
-      border: 1px solid $unnnic-color-neutral-soft;
-      color: $unnnic-color-neutral-cleanest;
-    }
-
-    &--active {
-      border: 1px solid $unnnic-color-brand-weni;
-      color: $unnnic-color-brand-weni;
-    }
-  }
-
-  &__options {
-    margin-top: 4px;
-    box-shadow: $unnnic-shadow-level-near;
-    background-color: $unnnic-color-background-snow;
-    margin-bottom: 4px;
-    left: 0;
-    right: 0;
-    border-radius: $unnnic-border-radius-sm;
-
-    &__scroll-area {
-      max-height: 12.5 * $unnnic-font-size;
-      overflow-y: auto;
-      margin-right: $unnnic-spacing-inline-nano;
-      margin-top: $unnnic-spacing-stack-xs;
-      margin-bottom: $unnnic-spacing-stack-sm;
-
-      &::-webkit-scrollbar {
-        width: $unnnic-spacing-inline-nano;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: $unnnic-color-neutral-cleanest;
-        border-radius: $unnnic-border-radius-pill;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: $unnnic-color-neutral-soft;
-        border-radius: $unnnic-border-radius-pill;
-      }
-    }
-
-    &--inactive {
-      display: none;
-    }
-
-    &--active {
-      display: block;
-      z-index: 2;
-    }
-  }
-}
-
-.unnnic-form {
-  font-family: $unnnic-font-family-secondary;
-  position: relative;
-
-  &__message {
-    font-size: $unnnic-font-size-body-md;
-    margin: $unnnic-spacing-stack-nano 0;
-  }
-
-  &__label {
-    font-weight: $unnnic-font-weight-regular;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-    font-size: $unnnic-font-size-body-gt;
-    color: $unnnic-color-neutral-cloudy;
-    margin: $unnnic-spacing-stack-xs 0;
-  }
-}
-</style>

package/src/components/SelectListItem/SelectListItem.vue

@@ -1,125 +0,0 @@
-<template>
-  <div class="unnnic-select-list-item">
-    <div class="main">
-      <unnnic-checkbox class="unnnic-checkbox" :value="checked" @change="$emit('change', $event)" />
-
-      <span
-        v-if="title"
-        class="title u font secondary body-lg bold color-neutral-darkest"
-        :title="title"
-      >
-        {{ title }}
-      </span>
-
-      <span
-        v-if="description"
-        class="u font secondary body-md color-neutral-cloudy"
-        :title="description"
-      >
-        {{ description }}
-      </span>
-    </div>
-
-    <div class="content">
-      <div class="item" v-for="(item, index) in data" :key="index">
-        <span class="u font secondary body-gt color-neutral-dark">{{ item.name }}</span>
-        <span class="u font secondary body-gt bold color-neutral-darkest">{{ item.value }}</span>
-      </div>
-
-      <unnnic-dropdown v-if="$slots.actions" position="bottom-left">
-        <unnnic-icon
-          slot="trigger"
-          icon="navigation-menu-vertical-1"
-          size="sm"
-          scheme="neutral-cleanest"
-          clickable
-        />
-
-        <slot name="actions" />
-      </unnnic-dropdown>
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicCheckbox from '../Checkbox/Checkbox.vue';
-import UnnnicDropdown from '../Dropdown/Dropdown.vue';
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
-
-  components: {
-    UnnnicCheckbox,
-    UnnnicDropdown,
-    UnnnicIcon,
-  },
-
-  props: {
-    checked: Boolean,
-    title: String,
-    description: String,
-    data: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-
-.unnnic-select-list-item {
-  padding: $unnnic-spacing-inset-sm;
-  border-radius: $unnnic-border-radius-md;
-  background-color: $unnnic-color-background-snow;
-  outline-style: solid;
-  outline-color: $unnnic-color-neutral-soft;
-  outline-width: $unnnic-border-width-thinner;
-  outline-offset: -$unnnic-border-width-thinner;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .main {
-    display: flex;
-    column-gap: $unnnic-spacing-inline-sm;
-    align-items: center;
-    overflow: hidden;
-    min-width: $unnnic-spacing-inline-lg;
-    margin-right: $unnnic-spacing-inline-sm;
-    flex: 1;
-
-    .unnnic-checkbox {
-      margin: $unnnic-spacing-stack-nano $unnnic-spacing-inline-nano;
-    }
-
-    .u.font {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex: 1;
-    }
-
-    .title {
-      max-width: fit-content;
-    }
-  }
-
-  .content {
-    display: flex;
-    column-gap: $unnnic-spacing-inline-xl;
-
-    .item {
-      display: flex;
-      column-gap: $unnnic-spacing-inline-xs;
-    }
-  }
-}
-</style>