@weni/unnnic-system 3.31.1 → 3.32.1

package/src/components/CircleProgressBar/CircleProgressBar.vue

@@ -1,150 +0,0 @@
-<template>
-  <div class="unnnic-circle-progress-bar">
-    <svg
-      width="46"
-      height="46"
-      class="semicircle"
-    >
-      <circle
-        cx="23"
-        cy="23"
-        r="21"
-        stroke="black"
-        stroke-width="4px"
-        :class="['background', progress === totalProgress ? 'filled' : '']"
-      />
-
-      <path
-        v-show="progress < totalProgress && progress > 0"
-        id="path"
-        ref="background"
-        fill="none"
-        stroke-linecap="round"
-        class="front"
-        stroke-width="4px"
-      ></path>
-    </svg>
-
-    <div class="content">{{ progress }}/{{ totalProgress }}</div>
-  </div>
-</template>
-
-<script>
-export default {
-  components: {},
-
-  props: {
-    progress: {
-      type: Number,
-    },
-
-    totalProgress: {
-      type: Number,
-    },
-  },
-
-  computed: {
-    progressChange() {
-      return `${this.progress}-${this.totalProgress}`;
-    },
-  },
-
-  watch: {
-    progressChange: {
-      immediate: true,
-      handler() {
-        function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
-          const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
-
-          return {
-            x: centerX + radius * -Math.cos(angleInRadians),
-            y: centerY + radius * -Math.sin(angleInRadians),
-          };
-        }
-
-        function describeArc(
-          x,
-          y,
-          innerRadius,
-          outerRadius,
-          startAngle,
-          endAngle,
-        ) {
-          const radius = innerRadius;
-          const spread = outerRadius - innerRadius;
-          const outerStart = polarToCartesian(x, y, radius + spread, endAngle);
-          const outerEnd = polarToCartesian(x, y, radius + spread, startAngle);
-
-          const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
-
-          const d = [
-            'M',
-            outerStart.x,
-            outerStart.y,
-            'A',
-            radius + spread,
-            radius + spread,
-            0,
-            largeArcFlag,
-            0,
-            outerEnd.x,
-            outerEnd.y,
-          ].join(' ');
-
-          return d;
-        }
-
-        const value = (this.progress / this.totalProgress) * 360;
-
-        const path = describeArc(23, 23, 0, 21, 180 - value.toFixed(), 180);
-
-        this.$nextTick(() => {
-          this.$refs.background.setAttribute('d', path);
-        });
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-circle-progress-bar {
-  position: relative;
-  width: fit-content;
-
-  .semicircle {
-    display: block;
-  }
-
-  .background {
-    fill: transparent;
-    stroke: rgba($unnnic-color-teal-8, $unnnic-opacity-level-extra-light);
-
-    &.filled {
-      stroke: $unnnic-color-teal-8;
-    }
-  }
-
-  .front {
-    stroke: $unnnic-color-teal-8;
-  }
-
-  .content {
-    position: absolute;
-    text-align: center;
-    width: 100%;
-
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    color: $unnnic-color-fg-muted;
-    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;
-  }
-}
-</style>

package/src/components/Indicator/Indicator.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="weni-step-indicator">
-    <div
-      v-for="step in numberOfSteps"
-      :key="step"
-      :class="{
-        'weni-step-indicator__step__wrapper': true,
-        'weni-step-indicator--has-separator': step > 1,
-      }"
-    >
-      <div
-        v-if="step !== 1"
-        :class="{
-          'weni-step-indicator__step__separator': true,
-          'weni-step-indicator__step__separator--active': step <= currentStep,
-        }"
-      />
-      <div
-        :class="{
-          'weni-step-indicator__step': true,
-          'weni-step-indicator__step--active': step <= currentStep,
-        }"
-      >
-        <span class="weni-step-indicator__label">
-          {{ titleForStep(step) }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'UnnnicIndicator',
-  props: {
-    numberOfSteps: {
-      type: Number,
-      required: true,
-    },
-    titles: {
-      type: Array,
-      default: () => [],
-    },
-    currentStep: {
-      type: Number,
-      default: 0,
-    },
-  },
-  methods: {
-    titleForStep(step) {
-      try {
-        return this.titles[step - 1];
-      } catch (e) {
-        return null;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.weni-step-indicator {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  &--has-separator {
-    flex: 1;
-  }
-  &__step {
-    border-radius: 50%;
-    height: $unnnic-avatar-size-nano;
-    width: $unnnic-avatar-size-nano;
-    border: $unnnic-border-width-thick solid $unnnic-color-border-muted;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    position: relative;
-    &__wrapper {
-      display: flex;
-      align-items: center;
-    }
-    &--active {
-      background-color: $unnnic-color-teal-8;
-      border: 4px solid rgba(0, 222, 210, 0.24);
-      background-clip: content-box;
-    }
-    &__separator {
-      border: $unnnic-border-width-thin solid $unnnic-color-border-muted;
-      margin: 0 $unnnic-inline-xs;
-      border-radius: 3px;
-      flex: 1;
-      &--active {
-        border: 2px solid $unnnic-color-teal-8;
-      }
-    }
-  }
-  &__label {
-    position: absolute;
-    white-space: nowrap;
-    text-align: center;
-    transform: translateX(-50%);
-    left: 50%;
-    top: 100%;
-    margin: $unnnic-inline-xs 0 0 0;
-    color: $unnnic-color-fg-base;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-  }
-}
-</style>

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>