@weni/unnnic-system 3.31.1 → 3.32.0

package/src/components/InputNext/InputNext.vue

@@ -1,282 +0,0 @@
-<template>
-  <div :class="['unnnic-input', `size-${size}`, { 'type-error': hasError }]">
-    <span
-      v-if="!!$slots.label || label"
-      :class="[
-        'label unnnic-font secondary color-fg-base',
-        { 'body-md': size === 'sm', 'body-gt': size == 'md' },
-      ]"
-      @click="$refs.input.focus()"
-    >
-      <template v-if="!!$slots.label">
-        <slot name="label" />
-      </template>
-
-      <template v-else-if="label">
-        {{ label }}
-      </template>
-    </span>
-
-    <div
-      class="input-container"
-      @click="$refs.input.focus()"
-    >
-      <UnnnicIcon
-        v-if="iconLeft"
-        :icon="iconLeft"
-        size="sm"
-        :scheme="iconScheme"
-        :clickable="!!$attrs['icon-left-click']"
-        @click="
-          $attrs['icon-left-click']
-            ? $emit('icon-left-click')
-            : $refs.input.focus()
-        "
-      />
-
-      <input
-        ref="input"
-        class="unnnic-font secondary"
-        :type="
-          allowTogglePassword
-            ? showPassword
-              ? 'text'
-              : 'password'
-            : nativeType
-        "
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :value="modelValue"
-        :maxlength="maxlength"
-        :readonly="readonly"
-        @focus="focus"
-        @blur="blur"
-        @input="$emit('update:model-value', $event.srcElement.value)"
-      />
-
-      <UnnnicIcon
-        v-if="iconRight"
-        :icon="iconRight"
-        size="sm"
-        :scheme="iconScheme"
-        :clickable="!!$attrs['icon-right-click']"
-        @click="
-          $attrs['icon-right-click']
-            ? $emit('icon-right-click')
-            : $refs.input.focus()
-        "
-      />
-
-      <UnnnicIcon
-        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-fg-base"
-    >
-      {{ message }}
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  components: {
-    UnnnicIcon,
-  },
-
-  props: {
-    modelValue: 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],
-    },
-
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  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 'fg-base';
-    },
-  },
-
-  methods: {
-    focus() {
-      this.isFocused = true;
-    },
-
-    blur() {
-      this.isFocused = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-input {
-  .label {
-    display: inline-block;
-  }
-
-  .input-container {
-    background-color: $unnnic-color-bg-base;
-    border-radius: $unnnic-border-radius-sm;
-    outline-style: solid;
-    outline-color: $unnnic-color-bg-muted;
-    outline-width: 1px;
-    outline-offset: -1px;
-    cursor: text;
-    display: flex;
-    align-items: center;
-    column-gap: $unnnic-spacing-inline-xs;
-
-    &:focus-within {
-      outline-color: $unnnic-color-fg-base;
-    }
-
-    &:has(input:disabled) {
-      outline-style: dashed;
-      outline-color: $unnnic-color-fg-muted;
-      background-color: $unnnic-color-bg-base-soft;
-      cursor: default;
-    }
-
-    input {
-      all: unset;
-
-      flex: 1;
-
-      font-family: $unnnic-font-family-secondary;
-      font-weight: $unnnic-font-weight-regular;
-      color: $unnnic-color-fg-base;
-
-      &:focus::placeholder {
-        color: $unnnic-color-fg-muted;
-      }
-
-      &::placeholder {
-        color: $unnnic-color-fg-base;
-        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-fg-critical;
-
-      input {
-        color: $unnnic-color-fg-critical;
-
-        &::placeholder {
-          color: $unnnic-color-fg-critical;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/ModalUpload/ModalUpload.vue

@@ -1,181 +0,0 @@
-<template>
-  <div class="modal-upload">
-    <div class="close-button-container">
-      <UnnnicIcon
-        class="close-button"
-        icon="close-1"
-        scheme="fg-base"
-        size="sm"
-        clickable
-        @click="$emit('close')"
-      />
-    </div>
-
-    <div class="title">
-      {{ textTitle }}
-    </div>
-
-    <UnnnicUploadArea
-      :acceptMultiple="acceptMultiple"
-      :supportedFormats="supportedFormats"
-      :maximumUploads="maximumUploads"
-      :filesProgress="filesProgress"
-      :isUploading="isUploading"
-      :canImport="canImport"
-      :canDelete="canDelete"
-      :maxFileSize="maxFileSize"
-      :files="files"
-      :subtitle="subtitle"
-      @file-change="$emit('file-change', $event)"
-    />
-
-    <div class="footer">
-      <UnnnicButton
-        size="large"
-        type="tertiary"
-        :text="textCancel"
-        @click="$emit('cancel')"
-      />
-
-      <UnnnicButton
-        size="large"
-        type="primary"
-        :text="textAction"
-        @click="$emit('action')"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicUploadArea from '../UploadArea/UploadArea.vue';
-import UnnnicIcon from '../Icon.vue';
-import UnnnicButton from '../Button/Button.vue';
-
-export default {
-  components: {
-    UnnnicUploadArea,
-    UnnnicIcon,
-    UnnnicButton,
-  },
-  model: {
-    prop: 'files',
-    event: 'file-change',
-  },
-
-  props: {
-    textCancel: {
-      type: String,
-      default: 'Cancelar',
-    },
-
-    textAction: {
-      type: String,
-      default: 'Importar tudo',
-    },
-
-    textTitle: {
-      type: String,
-      default: 'Importar sentenças',
-    },
-
-    acceptMultiple: {
-      type: Boolean,
-      default: true,
-    },
-
-    supportedFormats: {
-      type: String,
-      default: '.png',
-    },
-
-    maximumUploads: {
-      type: Number,
-      default: 1,
-    },
-
-    filesProgress: {
-      type: Array,
-      default: () => [],
-    },
-
-    isUploading: {
-      type: Boolean,
-      default: false,
-    },
-
-    canImport: {
-      type: Boolean,
-      default: false,
-    },
-
-    canDelete: {
-      type: Boolean,
-      default: true,
-    },
-
-    maxFileSize: {
-      type: Number,
-      default: undefined,
-    },
-
-    files: {
-      type: Array,
-      default: () => [],
-    },
-    subtitle: {
-      required: false,
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['close', 'file-change', 'cancel', 'action'],
-
-  data() {
-    return {};
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.modal-upload {
-  background-color: $unnnic-color-bg-base-soft;
-  border-radius: $unnnic-border-radius-sm;
-  padding: 0 $unnnic-spacing-inline-md;
-  padding-top: $unnnic-spacing-stack-sm;
-  padding-bottom: $unnnic-spacing-stack-giant;
-  box-shadow: $unnnic-shadow-1;
-
-  .close-button-container {
-    text-align: right;
-    margin-bottom: $unnnic-spacing-stack-xs;
-
-    .close-button {
-      cursor: pointer;
-    }
-  }
-
-  .title {
-    text-align: center;
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-black;
-    font-size: $unnnic-font-size-title-sm;
-    line-height: $unnnic-font-size-title-sm + $unnnic-line-height-md;
-    color: $unnnic-color-fg-emphasized;
-    margin-bottom: $unnnic-spacing-stack-md;
-  }
-
-  .footer {
-    margin-top: $unnnic-spacing-stack-md;
-    margin-bottom: -$unnnic-spacing-stack-sm;
-    display: grid;
-    grid-gap: $unnnic-spacing-inline-lg;
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(10 * $unnnic-font-size, 1fr)
-    );
-  }
-}
-</style>

package/src/components/MoodRating/MoodRating.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="unnnic-mood-rating">
-    <div class="title">{{ title }}</div>
-
-    <div :class="['moods', { selected: modelValue !== null }]">
-      <div
-        v-for="(mood, index) in moods"
-        :key="index"
-        class="mood"
-      >
-        <UnnnicToolTip
-          side="bottom"
-          :text="titlesMoods[index]"
-          enabled
-        >
-          <img
-            :src="mood.image"
-            :class="{
-              active: modelValue && index === modelValue - 1,
-            }"
-            @click="
-              modelValue && index === modelValue - 1
-                ? $emit('update:model-value', null)
-                : $emit('update:model-value', index + 1)
-            "
-          />
-        </UnnnicToolTip>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicToolTip from '../ToolTip/ToolTip.vue';
-
-import mood1 from '../../assets/emoji/u1F625.png';
-import mood2 from '../../assets/emoji/u1F641.png';
-import mood3 from '../../assets/emoji/u1F610.png';
-import mood4 from '../../assets/emoji/u1F645.png';
-import mood5 from '../../assets/emoji/u1F601.png';
-
-export default {
-  components: {
-    UnnnicToolTip,
-  },
-
-  props: {
-    modelValue: {
-      type: Number,
-    },
-
-    title: {
-      type: String,
-    },
-
-    titlesMoods: {
-      type: Array,
-      default() {
-        return ['Decepcionado', 'Insatisfeito', 'Neutro', 'Feliz', 'Produtivo'];
-      },
-    },
-  },
-
-  data() {
-    return {
-      moods: [
-        {
-          image: mood1,
-        },
-        {
-          image: mood2,
-        },
-        {
-          image: mood3,
-        },
-        {
-          image: mood4,
-        },
-        {
-          image: mood5,
-        },
-      ],
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-mood-rating {
-  text-align: center;
-
-  .title {
-    margin-bottom: $unnnic-spacing-stack-xs;
-    font-family: $unnnic-font-family-secondary;
-    font-weight: $unnnic-font-weight-bold;
-    font-size: $unnnic-font-size-body-lg;
-    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
-    color: $unnnic-color-fg-base;
-  }
-
-  .moods {
-    display: flex;
-    justify-content: center;
-    column-gap: $unnnic-spacing-inline-sm;
-    height: 2.5 * $unnnic-font-size;
-
-    &.selected .mood img {
-      opacity: $unnnic-opacity-level-overlay;
-    }
-
-    .mood {
-      padding-top: $unnnic-spacing-stack-nano;
-
-      img {
-        cursor: pointer;
-        width: $unnnic-icon-size-lg;
-        transition: all 300ms;
-
-        &:hover,
-        &.active {
-          opacity: 1;
-          width: $unnnic-icon-size-xl;
-        }
-      }
-    }
-  }
-}
-</style>