@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/TextEditor/TextEditor.vue

@@ -1,530 +0,0 @@
-<template>
-  <div :class="['unnnic-text-editor', loadingValue !== undefined && 'status-loading']">
-    <div v-if="loadingValue !== undefined" class="loading">
-      <div class="indicator" :style="{ width: `${loadingValue * 100}%` }"></div>
-    </div>
-
-    <div class="text-editor" @click="$refs.oDoc.focus()">
-      <textarea
-        class="inside"
-        ref="oDoc"
-        :value="value"
-        @input="$emit('input', $event.srcElement.value)"
-        @keydown="$emit('keydown', $event)"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
-      ></textarea>
-
-      <!-- <div
-        class="inside"
-        contenteditable="true"
-        v-html="initialContent"
-        @input="onInput"
-        @keydown="$emit('keydown', $event)"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
-      ></div> -->
-
-      <div v-if="$slots['footer-input']" class="footer-input" @click.stop>
-        <slot name="footer-input" />
-      </div>
-    </div>
-
-    <div class="actions">
-      <unnnic-tool-tip
-        side="left"
-        :text="text('action')"
-        enabled
-      >
-        <unnnic-button-icon
-          @click="$emit('action')"
-          type="secondary"
-          size="small"
-          icon="flash-1-4"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-button-icon
-        @click="$emit('send')"
-        type="secondary"
-        size="small"
-        icon="send-email-3-1"
-      />
-    </div>
-
-    <div class="format">
-      <unnnic-tool-tip
-        side="top"
-        :text="text('Undo')"
-        enabled
-      >
-        <unnnic-icon
-          icon="arrow-undo"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @click="formatDoc('undo')"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('Redo')"
-        enabled
-      >
-        <unnnic-icon
-          icon="arrow-redo"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @click="formatDoc('redo')"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('RecordAudio')"
-        enabled
-      >
-        <unnnic-icon
-          icon="microphone"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @mousedown="$emit('record-audio-down')"
-          @mouseup="$emit('record-audio-up')"
-          @click="$emit('record-audio')"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('Attach')"
-        :enabled="!attachmentOptionsOpen"
-      >
-        <unnnic-dropdown
-          :open.sync="attachmentOptionsOpen"
-          position="none"
-          class="attachment-options-dropdown"
-        >
-          <unnnic-icon
-            slot="trigger"
-            icon="attachment"
-            size="ant"
-            clickable
-            scheme="neutral-cloudy"
-          />
-
-          <div class="attachment-options-container">
-            <slot name="attachment-options" />
-          </div>
-        </unnnic-dropdown>
-      </unnnic-tool-tip>
-
-      <!-- <unnnic-icon
-        icon="email-action-unread-1"
-        size="ant"
-        clickable
-        scheme="neutral-cloudy"
-      /> -->
-
-      <!--
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('Bold')"
-        enabled
-        :style="{ marginLeft: '1rem', }"
-      >
-        <unnnic-icon
-          icon="text-bold"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @click="formatDoc('bold')"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('Italic')"
-        enabled
-      >
-        <unnnic-icon
-          icon="text-italic"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @click="formatDoc('italic')"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('Underline')"
-        enabled
-      >
-        <unnnic-icon
-          icon="text-underline"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @click="formatDoc('underline')"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('List')"
-        enabled
-      >
-        <unnnic-icon
-          icon="unordered-list"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @click="formatDoc('insertunorderedlist')"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('Left')"
-        enabled
-      >
-        <unnnic-icon
-          icon="text-left"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @click="formatDoc('justifyleft')"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('Center')"
-        enabled
-      >
-        <unnnic-icon
-          icon="text-center"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @click="formatDoc('justifycenter')"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('Right')"
-        enabled
-      >
-        <unnnic-icon
-          icon="text-right"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @click="formatDoc('justifyright')"
-        />
-      </unnnic-tool-tip>
-
-      <unnnic-tool-tip
-        side="top"
-        :text="text('Justify')"
-        enabled
-      >
-        <unnnic-icon
-          icon="text-justified"
-          size="ant"
-          clickable
-          scheme="neutral-cloudy"
-          @click="formatDoc('justifyFull')"
-        />
-      </unnnic-tool-tip>
-
-      -->
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicButtonIcon from '../Button/ButtonIcon.vue';
-import UnnnicToolTip from '../ToolTip/ToolTip.vue';
-import UnnnicIcon from '../Icon.vue';
-import UnnnicDropdown from '../Dropdown/Dropdown.vue';
-
-export default {
-  components: {
-    UnnnicButtonIcon,
-    UnnnicToolTip,
-    UnnnicIcon,
-    UnnnicDropdown,
-  },
-
-  props: {
-    loadingValue: {
-      type: Number,
-    },
-
-    value: {
-      type: String,
-      default: '',
-    },
-
-    texts: {
-      type: Object,
-      default() {
-        return {
-          Undo: 'Undo',
-          Redo: 'Redo',
-          RecordAudio: 'Record Audio',
-          Bold: 'Bold',
-          Italic: 'Italic',
-          Underline: 'Underline',
-          List: 'List',
-          Left: 'Left',
-          Center: 'Center',
-          Right: 'Right',
-          Justify: 'Justify',
-          Attach: 'Attach',
-          action: 'Mensagens rápidas',
-        };
-      },
-    },
-
-    tags: {
-      type: Array,
-      default() {
-        return ['b', 'i', 'u', 'ul', 'li', 'br', 'div'];
-      },
-    },
-
-    attributes: {
-      type: Array,
-      default() {
-        return ['style'];
-      },
-    },
-
-    styleProperties: {
-      type: Array,
-      default() {
-        return ['text-align'];
-      },
-    },
-  },
-
-  data() {
-    return {
-      initialContent: '',
-
-      attachmentOptionsOpen: false,
-
-      isFocused: false,
-
-      lastValueFromInside: '',
-    };
-  },
-
-  computed: {},
-
-  created() {
-    this.initialContent = this.value;
-    document.execCommand('defaultParagraphSeparator', false, 'div');
-  },
-
-  watch: {
-    value: {
-      immediate: true,
-
-      handler() {
-        // if (this.value !== this.lastValueFromInside) {
-        //   this.$refs.oDoc.innerHTML = this.value;
-        // }
-
-        this.$nextTick(() => {
-          this.$refs.oDoc.style.minHeight = 0;
-          this.$refs.oDoc.style.minHeight = `${this.$refs.oDoc.scrollHeight}px`;
-        });
-      },
-    },
-  },
-
-  methods: {
-    formatDoc(sCmd, sValue) {
-      this.$refs.oDoc.focus();
-      document.execCommand(sCmd, false, sValue);
-      this.$refs.oDoc.focus();
-    },
-
-    validateMode() {
-      return this.$refs.oDoc.focus();
-    },
-
-    emitInput() {
-      this.lastValueFromInside = this.$refs.oDoc.innerHTML;
-
-      this.lastValueFromInside = this.lastValueFromInside.replace(/<(\/)?([^> ]+)( [^>]+)?>/gi, ($1, $2 = '', $3, $4 = '') => {
-        if (this.tags.includes($3)) {
-          const complements = [];
-
-          // eslint-disable-next-line no-restricted-syntax
-          for (const i of $4.matchAll(/((?<name1>[^ =]+)="(?<value1>[^"]*)"|(?<name2>[^ =]+)='(?<value2>[^"]*)')/g)) {
-            const name = i.groups.name1 || i.groups.name2;
-            const value = i.groups.value1 || i.groups.value2;
-
-            if (this.attributes.includes('style') && name === 'style') {
-              const styles = [];
-
-              // eslint-disable-next-line no-restricted-syntax
-              for (const j of value.matchAll(/(?<propertyName>[^:]+):(?<propertyValue>[^;]+);?/g)) {
-                if (this.styleProperties.includes(j.groups.propertyName.toLowerCase().trim())) {
-                  styles.push(`${j.groups.propertyName.toLowerCase().trim()}: ${j.groups.propertyValue.trim()}`);
-                }
-              }
-
-              complements.push(`style="${styles.join('; ')};"`);
-            }
-          }
-
-          return `<${$2}${$3}${complements.length ? ` ${complements.join(' ')}` : ''}>`;
-        }
-
-        return '';
-      });
-
-      this.$emit('input', this.lastValueFromInside);
-    },
-
-    onInput() {
-      this.emitInput();
-    },
-
-    setValue(value) {
-      this.$refs.oDoc.innerHTML = value;
-      this.emitInput();
-    },
-
-    clear() {
-      this.$refs.oDoc.innerHTML = '';
-      this.emitInput();
-    },
-
-    text(key) {
-      return this.texts[key];
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.unnnic-text-editor {
-  display: grid;
-  grid-template-areas:
-    "loading loading-side"
-    "text-editor actions"
-    "format empty";
-  grid-template-columns: 1fr auto;
-  grid-column-gap: $unnnic-spacing-inline-xs;
-
-  .loading {
-    grid-area: loading;
-    width: 100%;
-    height: $unnnic-border-width-thin;
-    border-radius: $unnnic-border-radius-sm $unnnic-border-radius-sm 0 0;
-    position: relative;
-    overflow: hidden;
-    background-color: rgba($unnnic-color-neutral-clean, $unnnic-opacity-level-light);
-
-    .indicator {
-      height: $unnnic-border-width-thin;
-      background-color: $unnnic-color-neutral-clean;
-      transition: width 0.2s;
-    }
-  }
-
-  &:not(.status-loading) .text-editor {
-    border-radius: $unnnic-border-radius-sm;
-  }
-
-  .text-editor {
-    grid-area: text-editor;
-    height: 7.25 * $unnnic-font-size;
-    box-sizing: border-box;
-    overflow: auto;
-    background-color: $unnnic-color-neutral-snow;
-    border-radius: 0 0 $unnnic-border-radius-sm $unnnic-border-radius-sm;
-    padding: $unnnic-spacing-inset-sm;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
-    outline: none;
-    color: $unnnic-color-neutral-cloudy;
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-gt;
-    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-    font-weight: $unnnic-font-weight-regular;
-    cursor: text;
-    display: flex;
-    flex-direction: column;
-
-    .inside {
-      color: $unnnic-color-neutral-cloudy;
-      font-family: $unnnic-font-family-secondary;
-      font-size: $unnnic-font-size-body-gt;
-      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-      font-weight: $unnnic-font-weight-regular;
-      border: none;
-      padding: 0;
-      resize: none;
-      overflow-y: hidden;
-
-      flex: 1;
-      outline: none;
-
-      ::v-deep p {
-        margin: 0;
-      }
-    }
-
-    .footer-input {
-      margin-top: $unnnic-spacing-stack-xs;
-      align-self: flex-start;
-      cursor: initial;
-    }
-
-    p {
-      margin: 0;
-    }
-  }
-
-  .actions {
-    grid-area: actions;
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-spacing-stack-xs;
-    place-self: center;
-  }
-
-  .format {
-    grid-area: format;
-    place-self: center;
-    padding: $unnnic-spacing-inset-nano;
-    user-select: none;
-    display: flex;
-    gap: $unnnic-spacing-inline-xs;
-
-    .attachment-options-dropdown ::v-deep .unnnic-dropdown__content {
-      padding: 0;
-      bottom: 100%;
-      margin-bottom: 0.5 * $unnnic-font-size;
-      right: (-10.375 * $unnnic-font-size / 2) + 0.625 * $unnnic-font-size;
-    }
-
-    .attachment-options-container {
-      width: 10.375 * $unnnic-font-size;
-    }
-  }
-}
-</style>

package/src/stories/Autocomplete.stories.js

@@ -1,55 +0,0 @@
-import unnnicAutocomplete from '../components/Input/Autocomplete.vue';
-import iconList from '../utils/iconList';
-
-export default {
-  title: 'Example/Autocomplete',
-  component: unnnicAutocomplete,
-  argTypes: {
-    type: { control: { type: 'select', options: ['normal', 'error'] } },
-    size: { control: { type: 'select', options: ['md', 'sm'] } },
-    placeholder: { control: { type: 'text' } },
-    iconLeft: { control: { type: 'select', options: iconList } },
-    iconRight: { control: { type: 'select', options: iconList } },
-    tooltipIconRight: { control: { type: 'text' } },
-    tooltipSideIconRight: { control: { type: 'select', options: ['top', 'right', 'bottom', 'left'] } },
-    tooltipForceOpenIconRight: { control: { type: 'boolean' } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicAutocomplete },
-  data() {
-    return {
-      v: '',
-      d: [
-        'option 1',
-        { type: 'category', text: 'Artificial Intelligence' },
-        'option 2',
-        'option 3',
-        { type: 'category', text: 'Flows' },
-        'option 4',
-        'option 5',
-      ],
-    };
-  },
-  template: '<unnnic-autocomplete v-model="v" v-bind="$props" :data="d.filter(e => e.includes?.(v))" />',
-});
-
-export const Normal = Template.bind({});
-Normal.args = {
-  type: 'normal',
-  placeholder: 'Placeholder',
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  type: 'error',
-  placeholder: 'Placeholder',
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  placeholder: 'Placeholder',
-};

package/src/stories/AutocompleteSelect.stories.js

@@ -1,45 +0,0 @@
-import unnnicAutocompleteSelect from '../components/AutocompleteSelect/AutocompleteSelect.vue';
-
-export default {
-  title: 'Form/AutocompleteSelect',
-  component: unnnicAutocompleteSelect,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicAutocompleteSelect,
-  },
-
-  data() {
-    return {
-      selecteds: [],
-    };
-  },
-
-  template: `
-    <div>
-      <pre>v-model: {{ selecteds }}</pre>
-      <unnnic-autocomplete-select v-bind="$props" v-model="selecteds">
-      </unnnic-autocomplete-select>
-    </div>
-  `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  items: [
-    { value: 'Item 1', text: 'Item 1', description: 'Description 1' },
-    { value: 'Item 2', text: 'Item 2', description: 'Description 2' },
-    { value: 'Item 3', text: 'Item 3', description: 'Description 3' },
-    { value: 'Item 4', text: 'Item 4', description: 'Description 4' },
-    { value: 'Item 5', text: 'Item 5', description: 'Description 5' },
-    { value: 'Item 6', text: 'Item 6', description: 'Description 6' },
-    { value: 'Item 7', text: 'Item 7', description: 'Description 7' },
-  ],
-};

package/src/stories/CardFlow.stories.js

@@ -1,44 +0,0 @@
-import UnnnicCardFlow from '../components/CardFlow/CardFlow.vue';
-
-export default {
-  title: 'card/CardFlow',
-  component: UnnnicCardFlow,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    UnnnicCardFlow,
-  },
-
-  props: Object.keys(argTypes),
-
-  data() {
-    return {
-      v: false,
-    };
-  },
-
-  template: '<div><unnnic-card-flow v-model="v" v-bind="$props"></unnnic-card-flow></div>',
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Title',
-  description: 'Description',
-  options: [
-    {
-      name: 'Option 1',
-      value: '10',
-    },
-    {
-      name: 'Option 2',
-      value: '8',
-    },
-    {
-      name: 'Option 3',
-      value: '9',
-    },
-  ],
-};