@weni/unnnic-system 2.0.0 → 2.0.2

package/src/components/Input/Autocomplete.vue

@@ -1,325 +0,0 @@
-<template>
-  <div class="unnnic-autocomplete" v-click-outside="onClickOutside">
-    <p v-if="label" class="unnnic-form__label"> {{ label }}  </p>
-      <text-input
-        v-model="val"
-        v-on="inputListeners"
-        :v-bind="$attrs"
-        :icon-left="iconLeft"
-        :icon-right="iconRight"
-        :icon-right-clickable="Object.keys($listeners).includes('icon-right-click')"
-        :tooltip-icon-right="tooltipIconRight"
-        :tooltip-side-icon-right="tooltipSideIconRight"
-        :tooltip-force-open-icon-right="tooltipForceOpenIconRight"
-        :type="type"
-        @focus="onFocus"
-        @blur="onBlur"
-        :size="size"
-        :placeholder="placeholder"
-      />
-
-    <div
-      v-show="(open || (this.openWithFocus && this.isFocused)) && data.length"
-      class="unnnic-autocomplete__container-list"
-    >
-      <div
-        :class="['unnnic-autocomplete__list',
-                  `unnnic-autocomplete__list--size-${size}`,
-                  message && message.length > 0 ? 'unnnic-autocomplete__list--with-message' : '']">
-
-          <template
-            v-for="(option, index) in dataParsed"
-          >
-            <div
-              v-if="option.type === 'category'"
-              :key="index"
-              class="category"
-              :title="option.text"
-            >
-              {{ option.text }}
-            </div>
-
-            <div
-              v-else
-              :key="index"
-              class="unnnic--clickable option"
-              @click="onChoose(option)"
-            >
-              <div class="label" v-html="highlighted(option.text)" :title="option.text"></div>
-            </div>
-          </template>
-      </div>
-    </div>
-    <p v-if="message" class="unnnic-form__message"> {{ message }} </p>
-  </div>
-</template>
-
-<script>
-import vClickOutside from 'v-click-outside';
-import TextInput from './TextInput.vue';
-
-export default {
-  name: 'unnnic-input',
-  components: { TextInput },
-  props: {
-    type: {
-      type: String,
-      default: 'normal',
-      validator(value) {
-        return ['normal', 'error'].indexOf(value) !== -1;
-      },
-    },
-    data: {
-      type: Array,
-      default: () => [],
-    },
-    value: {
-      type: String,
-      default: null,
-    },
-    message: {
-      type: String,
-      default: null,
-    },
-    label: {
-      type: String,
-      default: null,
-    },
-    iconLeft: {
-      type: String,
-      default: null,
-    },
-    iconRight: {
-      type: String,
-      default: null,
-    },
-    tooltipIconRight: {
-      type: String,
-      default: null,
-    },
-    tooltipSideIconRight: {
-      type: String,
-      default: 'right',
-      validator(value) {
-        return ['top', 'right', 'bottom', 'left'].indexOf(value) !== -1;
-      },
-    },
-    tooltipForceOpenIconRight: {
-      type: Boolean,
-      default: false,
-    },
-    highlight: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'md',
-    },
-    placeholder: {
-      type: String,
-    },
-    openWithFocus: {
-      type: Boolean,
-    },
-  },
-  data() {
-    return {
-      val: null,
-      open: false,
-      isFocused: false,
-    };
-  },
-  watch: {
-    val() {
-      this.open = false;
-      if (this.val) this.open = true;
-      this.$emit('input', this.val);
-    },
-    value() {
-      this.val = this.value;
-    },
-  },
-  mounted() {
-    this.val = this.value;
-  },
-  directives: {
-    clickOutside: vClickOutside.directive,
-  },
-  methods: {
-    onFocus() {
-      this.isFocused = true;
-      if (!this.val && !this.openWithFocus) return;
-      this.open = true;
-    },
-    onBlur() {
-      this.isFocused = false;
-    },
-    onChoose(option) {
-      this.val = option.text;
-      this.$emit('choose', option.value ? option.value : option.text);
-
-      this.$nextTick(() => {
-        this.open = false;
-      });
-    },
-    onClickOutside() {
-      if (!this.open) return;
-      this.open = false;
-    },
-    highlighted(text) {
-      if (!this.highlight || !this.val || this.val.length === 0) return text;
-      return text.replaceAll(this.val, (match) => `<span class="unnnic-autocomplete--highlighted">${match.replace(/ /g, '&nbsp;')}</span>`);
-    },
-  },
-  computed: {
-    inputListeners() {
-      return {
-        ...this.$listeners,
-        input: () => {},
-      };
-    },
-
-    dataParsed() {
-      return this.data.map((item) => {
-        if (item.type) {
-          return item;
-        }
-
-        return {
-          type: 'option',
-          text: String(item),
-        };
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-@import '../../assets/scss/unnnic.scss';
-
-$scroll-size: 4px;
-
-.unnnic-autocomplete {
-    position: relative;
-    font-family: $unnnic-font-family-secondary;
-
-    &--highlighted {
-      white-space: nowrap;
-      color: $unnnic-color-brand-weni-soft;
-      display: inline-block;
-      font-weight: $unnnic-font-weight-bold;
-    }
-
-    &__container-list {
-      background-color: $unnnic-color-background-snow;
-      font-family: $unnnic-font-family-secondary;
-      position: absolute;
-      left: 0;
-      right: 0;
-      z-index: 1;
-      top: 100%;
-      border-radius: $unnnic-border-radius-sm;
-      box-shadow: $unnnic-shadow-level-near;
-      margin-top: $unnnic-spacing-stack-nano;
-    }
-
-    &__list {
-      overflow-y: auto;
-      margin: $unnnic-spacing-stack-xs 0 0 0;
-      margin-right: $unnnic-spacing-inline-nano;
-      margin-bottom: $unnnic-spacing-inline-sm;
-
-        &::-webkit-scrollbar {
-          width: $scroll-size;
-          margin: 10px;
-        }
-
-        &::-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;
-        }
-
-        &--with-message {
-          top: calc(100% - 20px);
-        }
-
-        &--size-md {
-          max-height: calc(5*(#{$unnnic-font-size-body-gt} + 16px));
-          font-size: $unnnic-font-size-body-gt;
-
-          > * {
-            line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-          }
-        }
-
-        &--size-sm {
-          max-height: calc(5*(#{$unnnic-font-size-body-md} + 16px));
-          font-size: $unnnic-font-size-body-md;
-
-          > * {
-            line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
-          }
-        }
-
-        > * {
-          overflow: hidden;
-          white-space: nowrap;
-          margin: 0;
-        }
-
-        .category {
-          padding: 0;
-          font-family: $unnnic-font-family-secondary;
-          font-weight: $unnnic-font-weight-bold;
-          font-size: $unnnic-font-size-body-md;
-          line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-          color: $unnnic-color-neutral-cleanest;
-          margin: 0 $unnnic-spacing-inline-sm;
-          margin-top: $unnnic-spacing-stack-sm;
-          margin-bottom: $unnnic-spacing-stack-xs;
-
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .option {
-          background-color: $unnnic-color-background-snow;
-          margin: 0 $unnnic-spacing-inline-xs;
-          border-radius: $unnnic-border-radius-sm;
-
-          &:hover{
-            background-color: $unnnic-color-neutral-light;
-          }
-
-          .label {
-            font-family: $unnnic-font-family-secondary;
-            font-weight: $unnnic-font-weight-regular;
-            font-size: $unnnic-font-size-body-gt;
-            line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-            color: $unnnic-color-neutral-dark;
-            margin: $unnnic-spacing-stack-nano $unnnic-spacing-inline-xs;
-
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-
-        &--size-sm {
-          .option .label {
-            font-size: $unnnic-font-size-body-md;
-            line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-          }
-        }
-    }
-}
-
-</style>

package/src/components/InputNext/InputNext.vue

@@ -1,260 +0,0 @@
-<template>
-  <div :class="['unnnic-input', `size-${size}`, { 'type-error': hasError }]">
-    <span
-      v-if="!!this.$slots.label || label"
-      :class="[
-        'label unnnic-font secondary color-neutral-cloudy',
-        { 'body-md': size === 'sm', 'body-gt': size == 'md' },
-      ]"
-      @click="$refs.input.focus()"
-    >
-      <template v-if="!!this.$slots.label">
-        <slot name="label" />
-      </template>
-
-      <template v-else-if="label">
-        {{ label }}
-      </template>
-    </span>
-
-    <div class="input-container" @click.self="$refs.input.focus()">
-      <unnnic-icon
-        v-if="iconLeft"
-        :icon="iconLeft"
-        size="sm"
-        :scheme="iconScheme"
-        @click.native="
-          $listeners['icon-left-click'] ? $emit('icon-left-click') : $refs.input.focus()
-        "
-        :clickable="!!$listeners['icon-left-click']"
-      />
-
-      <input
-        class="unnnic-font secondary"
-        ref="input"
-        :type="allowTogglePassword ? (showPassword ? 'text' : 'password') : nativeType"
-        :placeholder="placeholder"
-        @focus="focus"
-        @blur="blur"
-        :disabled="disabled"
-        :value="value"
-        @input="$emit('input', $event.srcElement.value)"
-        :maxlength="maxlength"
-      />
-
-      <unnnic-icon
-        v-if="iconRight"
-        :icon="iconRight"
-        size="sm"
-        :scheme="iconScheme"
-        @click.native="
-          $listeners['icon-right-click'] ? $emit('icon-right-click') : $refs.input.focus()
-        "
-        :clickable="!!$listeners['icon-right-click']"
-      />
-
-      <unnnic-icon
-        v-if="allowTogglePassword"
-        :icon="showPassword ? 'view-off-1' : 'view-1-1'"
-        size="sm"
-        :scheme="iconScheme"
-        clickable
-        @click="showPassword = !showPassword"
-      />
-    </div>
-
-    <div
-      v-if="error && error !== true"
-      class="message unnnic-font secondary body-md color-feedback-red"
-    >
-      {{ error }}
-    </div>
-
-    <div v-else-if="message" class="message unnnic-font secondary body-md color-neutral-cloudy">
-      {{ message }}
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  components: {
-    UnnnicIcon,
-  },
-
-  props: {
-    value: String,
-    label: String,
-    iconLeft: String,
-    iconRight: String,
-
-    allowTogglePassword: Boolean,
-    disabled: Boolean,
-
-    maxlength: {
-      type: [String, Number],
-    },
-
-    size: {
-      type: String,
-      default: 'md',
-      validator: (size) => ['md', 'sm'].includes(size),
-    },
-
-    type: {
-      type: String,
-      default: 'normal',
-      validator: (type) => ['normal', 'error'].includes(type),
-    },
-
-    nativeType: {
-      type: String,
-      default: 'text',
-      validator: (type) => ['text', 'password'].includes(type),
-    },
-
-    placeholder: String,
-
-    message: String,
-
-    error: {
-      type: [Boolean, String],
-    },
-  },
-
-  data() {
-    return {
-      isFocused: false,
-      showPassword: false,
-    };
-  },
-
-  computed: {
-    hasError() {
-      return this.error === true || this.error || this.type === 'error';
-    },
-
-    iconScheme() {
-      if (this.hasError) {
-        return 'feedback-red';
-      }
-
-      return this.isFocused ? 'neutral-dark' : 'neutral-cloudy';
-    },
-  },
-
-  methods: {
-    focus() {
-      this.isFocused = true;
-    },
-
-    blur() {
-      this.isFocused = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-
-.unnnic-input {
-  .label {
-    display: inline-block;
-  }
-
-  .input-container {
-    background-color: $unnnic-color-neutral-snow;
-    border-radius: $unnnic-border-radius-sm;
-    outline-style: solid;
-    outline-color: $unnnic-color-neutral-soft;
-    outline-width: $unnnic-border-width-thinner;
-    outline-offset: -$unnnic-border-width-thinner;
-    cursor: text;
-    display: flex;
-    align-items: center;
-    column-gap: $unnnic-spacing-inline-xs;
-
-    &:focus-within {
-      outline-color: $unnnic-color-neutral-clean;
-    }
-
-    &:has(input:disabled) {
-      outline-style: dashed;
-      outline-color: $unnnic-color-neutral-cleanest;
-      background-color: $unnnic-color-neutral-light;
-      cursor: default;
-    }
-
-    input {
-      all: unset;
-
-      flex: 1;
-
-      font-family: $unnnic-font-family-secondary;
-      font-weight: $unnnic-font-weight-regular;
-      color: $unnnic-color-neutral-dark;
-
-      &:focus::placeholder {
-        color: $unnnic-color-neutral-cleanest;
-      }
-
-      &::placeholder {
-        color: $unnnic-color-neutral-cloudy;
-        opacity: 1; /* Firefox */
-        user-select: none;
-      }
-    }
-  }
-
-  .message {
-    margin-top: $unnnic-spacing-stack-nano;
-  }
-
-  &.size-md {
-    .label {
-      margin-bottom: $unnnic-spacing-stack-xs;
-    }
-
-    .input-container {
-      padding: $unnnic-squish-xs;
-
-      input {
-        font-size: $unnnic-font-size-body-gt;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-      }
-    }
-  }
-
-  &.size-sm {
-    .label {
-      margin-bottom: $unnnic-spacing-stack-nano;
-    }
-
-    .input-container {
-      padding: $unnnic-squish-nano;
-
-      input {
-        font-size: $unnnic-font-size-body-md;
-        line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-      }
-    }
-  }
-
-  &.type-error {
-    .input-container {
-      outline-color: $unnnic-color-feedback-red;
-
-      input {
-        color: $unnnic-color-feedback-red;
-
-        &::placeholder {
-          color: $unnnic-color-feedback-red;
-        }
-      }
-    }
-  }
-}
-</style>