@weni/unnnic-system 1.3.2 → 1.4.1

package/src/components/Checkbox/Checkbox.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import unnnicIconSvg from '../Icon-svg.vue';
+import unnnicIconSvg from '../Icon.vue';
 
 export default {
   model: {

package/src/components/DatePicker/DatePicker.vue

@@ -162,12 +162,12 @@ export default {
 
   data() {
     const today = new Date();
-    const referenceDate = `${today.getMonth() + 1}-1-${today.getFullYear()}`;
+    const referenceDate = `${today.getMonth() + 1} 1 ${today.getFullYear()}`;
 
     return {
       referenceDate,
-      startDate: this.initialStartDate || '',
-      endDate: this.initialEndDate || '',
+      startDate: this.initialStartDate.replace(/-/g, ' ') || '',
+      endDate: this.initialEndDate.replace(/-/g, ' ') || '',
       optionSelected: '',
     };
   },
@@ -198,7 +198,7 @@ export default {
 
   methods: {
     dateToString(date) {
-      return `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`;
+      return `${date.getMonth() + 1} ${date.getDate()} ${date.getFullYear()}`;
     },
 
     stringToTime(date) {
@@ -206,7 +206,7 @@ export default {
     },
 
     getDate(date) {
-      return new Date(date).getDate();
+      return new Date(date.toString()).getDate();
     },
 
     getMonth(date) {
@@ -353,7 +353,7 @@ export default {
 
       if (this.endDate) {
         const secondMonth = this.addMonth(this.referenceDate, 1);
-        const firstDateOfEndDate = `${this.getMonth(this.endDate) + 1}-1-${this.getFullYear(this.endDate)}`;
+        const firstDateOfEndDate = `${this.getMonth(this.endDate) + 1} 1 ${this.getFullYear(this.endDate)}`;
 
         if (![this.referenceDate, secondMonth].includes(firstDateOfEndDate)) {
           this.referenceDate = firstDateOfEndDate;

package/src/components/Dropdown/LanguageSelect.vue

@@ -77,7 +77,7 @@
 <script>
 import vClickOutside from 'v-click-outside';
 import unnnicFlag from '../Flag.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'LanguageSelect',

package/src/components/Flag.vue

@@ -8,7 +8,7 @@
 <script>
 /* eslint-disable global-require */
 /* eslint-disable import/no-dynamic-require */
-import UnnnicIconSvg from './Icon-svg.vue';
+import UnnnicIconSvg from './Icon.vue';
 
 export default {
   name: 'Flag',

package/src/components/Icon.vue

@@ -1,14 +1,19 @@
 <template>
-    <span
-      @click="onClick"
-      :class="`unnnic-icon icon-${icon} unnnic-icon-${size || 'md'}
-        ${scheme ? `unnnic-icon-scheme--${scheme}` : ''}
-        ${scheme && hasBackground ? `unnnic-icon-background-scheme--${scheme}` : ''}
-        icon-${size} ${ clickable ? 'unnnic--clickable' : '' }`">
-    </span>
+<span
+    @click="onClick"
+    :class="[
+      'unnnic-icon',
+      `unnnic-icon__size--${size}`,
+      clickable ? 'unnnic--clickable' : '',
+      lineHeight ? `unnnic-icon__line-height--${lineHeight}` : '',
+      scheme ? `unnnic-icon-scheme--${scheme}` : '',
+    ]"
+    v-html="svg" />
 </template>
 
 <script>
+import icons from '../utils/icons';
+
 export default {
   name: 'uIcon',
   props: {
@@ -24,17 +29,25 @@ export default {
       type: String,
       default: 'md',
       validator(value) {
-        if (!value) return true;
         return ['nano', 'xs', 'sm', 'ant', 'md', 'lg', 'xl'].indexOf(value) !== -1;
       },
     },
+    lineHeight: {
+      type: String,
+      default: null,
+      validator(value) {
+        return !value || ['sm', 'md', 'lg'].indexOf(value) !== -1;
+      },
+    },
     scheme: {
       type: String,
       default: '',
     },
-    hasBackground: {
-      type: Boolean,
-      default: false,
+  },
+  mounted() {},
+  computed: {
+    svg() {
+      return icons[this.icon];
     },
   },
   methods: {
@@ -46,71 +59,89 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+@import "../assets/scss/unnnic.scss";
+
+.unnnic-icon ::v-deep svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>
+
 <style lang="scss">
-@import '../assets/scss/unnnic.scss';
-@import '../assets/fonts/icons.css';
+@import "../assets/scss/unnnic.scss";
 
-$scheme-colors:
-  'feedback-red' $unnnic-color-feedback-red,
-  'feedback-green' $unnnic-color-feedback-green,
-  'feedback-yellow' $unnnic-color-feedback-yellow,
-  'feedback-blue' $unnnic-color-feedback-blue,
-  'feedback-grey' $unnnic-color-feedback-grey,
-   'aux-blue' $unnnic-color-aux-blue,
-   'aux-purple' $unnnic-color-aux-purple,
-   'aux-orange' $unnnic-color-aux-orange,
-   'aux-lemon' $unnnic-color-aux-lemon,
-   'aux-pink' $unnnic-color-aux-pink,
-   'neutral-soft' $unnnic-color-neutral-soft;
+$scheme-colors: "feedback-red" $unnnic-color-feedback-red,
+  "feedback-green" $unnnic-color-feedback-green, "feedback-yellow" $unnnic-color-feedback-yellow,
+  "feedback-blue" $unnnic-color-feedback-blue, "feedback-grey" $unnnic-color-feedback-grey,
+  "aux-blue" $unnnic-color-aux-blue, "aux-purple" $unnnic-color-aux-purple,
+  "aux-orange" $unnnic-color-aux-orange, "aux-lemon" $unnnic-color-aux-lemon,
+  "aux-pink" $unnnic-color-aux-pink,
+  "brand-weni" $unnnic-color-brand-weni,
+  "brand-weni-soft" $unnnic-color-brand-weni-soft,
+  "brand-weni-dark" $unnnic-color-brand-weni-dark,
+  "brand-sec" $unnnic-color-brand-sec,
+  "neutral-clean" $unnnic-color-neutral-clean,
+  "neutral-cleanest" $unnnic-color-neutral-cleanest,
+  "neutral-dark" $unnnic-color-neutral-dark,
+  "neutral-soft" $unnnic-color-neutral-soft,
+  "neutral-darkest" $unnnic-color-neutral-darkest,
+  "neutral-cloudy" $unnnic-color-neutral-cloudy,
+  "neutral-snow" $unnnic-color-neutral-snow,
+  "background-snow" $unnnic-color-background-snow;
 
 @each $name, $color in $scheme-colors {
   .unnnic-icon-scheme {
     &--#{$name} {
-      color: $color;
-
-      &--icon {
-        color: $color;
+      & .primary {
+        fill: $color;
       }
-    }
-  }
-
-  .unnnic-icon-background-scheme {
-    &--#{$name} {
-      background-color: rgba($color, $unnnic-opacity-level-extra-light);
-      border-radius: $unnnic-border-radius-sm;
-      padding: $unnnic-inset-nano;
-    }
 
-    &--border {
-      border-left: 4px solid $color;
+      & .primary-stroke {
+        stroke: $color;
+      }
     }
   }
 }
 
-.unnnic-icon {
-  &-xs {
-    font-size: $unnnic-icon-size-xs;
-  }
-
-  &-sm {
-    font-size: $unnnic-icon-size-sm;
-  }
+$icon-sizes:
+    'xl' $unnnic-icon-size-xl,
+    'lg' $unnnic-icon-size-lg,
+    'md' $unnnic-icon-size-md,
+    'ant' $unnnic-icon-size-ant,
+    'sm' $unnnic-icon-size-sm,
+    'xs' $unnnic-icon-size-xs;
 
-  &-ant {
-    font-size: $unnnic-icon-size-ant;
-  }
+$line-heights:
+  'sm' $unnnic-line-height-small,
+  'md' $unnnic-line-height-medium,
+  'lg' $unnnic-line-height-large;
 
-  &-md {
-    font-size: $unnnic-icon-size-md;
-  }
+    .unnnic-icon {
+      position: relative;
+      display: inline-block;
+      vertical-align: middle;
 
-  &-lg {
-    font-size: $unnnic-icon-size-lg;
-  }
+        @each $name, $size in $icon-sizes {
+            &__size--#{$name} {
+                width: $size;
+                height: $size;
+                min-width: $size;
+                min-height: $size;
 
-  &-xl {
-    font-size: $unnnic-icon-size-xl;
-  }
-}
+                @each $line-name, $line-size in $line-heights {
+                  &.unnnic-icon__line-height--#{$line-name} svg {
+                    position: relative;
+                    top: (($size + $line-size) - ($size*1.2))/1.2;
+                  }
+              }
+            }
+        }
 
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
 </style>

package/src/components/Input/TextInput.vue

@@ -38,7 +38,7 @@
 
 <script>
 import BaseInput from './BaseInput.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {

package/src/components/Modal/Modal.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-modal',

package/src/components/ModalUpload/ModalUpload.vue

@@ -47,7 +47,7 @@
 
 <script>
 import UnnnicUploadArea from '../UploadArea/UploadArea.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 import UnnnicButton from '../Button/Button.vue';
 
 export default {

package/src/components/MultiSelect/MultiSelect.vue

@@ -45,7 +45,7 @@
 
 <script>
 import vClickOutside from 'v-click-outside';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 import UnnnicRadio from '../Radio/Radio.vue';
 
 export default {

package/src/components/Radio/Radio.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import unnnicIconSvg from '../Icon-svg.vue';
+import unnnicIconSvg from '../Icon.vue';
 
 export default {
   model: {

package/src/components/Sidebar/SidebarItem.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import UIcon from '../Icon-svg.vue';
+import UIcon from '../Icon.vue';
 import ToolTip from '../ToolTip/ToolTip.vue';
 
 export default {

package/src/components/Sidebar/SidebarPrimary.vue

@@ -77,7 +77,7 @@
 <script>
 import ToolTip from '../ToolTip/ToolTip.vue';
 import languageSelect from '../Dropdown/LanguageSelect.vue';
-import iconSvg from '../Icon-svg.vue';
+import iconSvg from '../Icon.vue';
 
 export default {
   components: {

package/src/components/Switch/Switch.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-switch',

package/src/components/Tag/BrandTag.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-brand-tag',

package/src/components/Tag/DefaultTag.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-tag',

package/src/components/Tag/IndicatorTag.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 import ToolTip from '../ToolTip/ToolTip.vue';
 
 export default {

package/src/components/TextEditor/TextEditor.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="unnnic-text-editor">
+    <div
+      class="text-editor"
+      contenteditable="true"
+      ref="oDoc"
+      v-html="initialContent"
+      @input="onInput"
+    ></div>
+
+    <div class="actions">
+      <unnnic-button-icon
+        @click="$emit('action')"
+        type="secondary"
+        size="small"
+        icon="flash-1-3"
+      />
+
+      <unnnic-button-icon
+        @click="$emit('send')"
+        type="primary"
+        size="small"
+        icon="send-email-3-1"
+      />
+    </div>
+
+    <div class="format">
+      <unnnic-icon
+        icon="arrow-undo"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('undo')"
+      />
+      <unnnic-icon
+        icon="arrow-redo"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('redo')"
+      />
+      <!-- <unnnic-icon
+        icon="email-action-unread-1"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+      /> -->
+      <unnnic-icon
+        :style="{ marginLeft: '1rem', }"
+        icon="text-bold"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('bold')"
+      />
+      <unnnic-icon
+        icon="text-italic"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('italic')"
+      />
+      <unnnic-icon
+        icon="text-underline"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('underline')"
+      />
+      <unnnic-icon
+        icon="unordered-list"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('insertunorderedlist')"
+      />
+      <unnnic-icon
+        icon="text-left"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('justifyleft')"
+      />
+      <unnnic-icon
+        icon="text-center"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('justifycenter')"
+      />
+      <unnnic-icon
+        icon="text-right"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('justifyright')"
+      />
+      <unnnic-icon
+        icon="text-justified"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('justifyFull')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import UnnnicButtonIcon from '../Button/ButtonIcon.vue';
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  components: {
+    UnnnicButtonIcon,
+    UnnnicIcon,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      initialContent: '',
+    };
+  },
+
+  created() {
+    this.initialContent = this.value;
+  },
+
+  methods: {
+    formatDoc(sCmd, sValue) {
+      this.$refs.oDoc.focus();
+      document.execCommand(sCmd, false, sValue);
+      this.$refs.oDoc.focus();
+    },
+
+    validateMode() {
+      return this.$refs.oDoc.focus();
+    },
+
+    onInput(event) {
+      this.$emit('input', event.srcElement.innerHTML);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-text-editor {
+  display: grid;
+  grid-template-areas:
+    "text-editor actions"
+    "format empty";
+  grid-template-columns: 1fr auto;
+  grid-column-gap: $unnnic-spacing-inline-xs;
+
+  .text-editor {
+    grid-area: text-editor;
+    height: 7.25rem;
+    box-sizing: border-box;
+    overflow: auto;
+    background-color: $unnnic-color-neutral-snow;
+    border-radius: $unnnic-border-radius-sm;
+    padding: $unnnic-spacing-inset-sm;
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+    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;
+
+    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;
+  }
+}
+</style>

package/src/components/UploadArea/UploadArea.vue

@@ -70,7 +70,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 import UnnnicImportCard from '../ImportCard/ImportCard.vue';
 
 export default {

package/src/components/index.js

@@ -12,7 +12,6 @@ import dropdown from './Dropdown/Dropdown.vue';
 import dropdownItem from './Dropdown/DropdownItem.vue';
 import avatarIcon from './AvatarIcon/AvatarIcon.vue';
 import icon from './Icon.vue';
-import iconSvg from './Icon-svg.vue';
 import toolTip from './ToolTip/ToolTip.vue';
 import card from './Card/Card.vue';
 import cardCompany from './Card/CardCompany.vue';
@@ -51,6 +50,7 @@ import ChatText from './ChatText/ChatText.vue';
 import TextArea from './TextArea/TextArea.vue';
 import CardNumber from './CardNumber/CardNumber.vue';
 import chartRainbow from './ChartRainbow/ChartRainbow.vue';
+import textEditor from './TextEditor/TextEditor.vue';
 
 const components = {
   unnnicInput: input,
@@ -64,7 +64,7 @@ const components = {
   unnnicTableRow: tableRow,
   unnnicAvatarIcon: avatarIcon,
   unnnicIcon: icon,
-  unnnicIconSvg: iconSvg,
+  unnnicIconSvg: icon,
   unnnicDropdown: dropdown,
   unnnicDropdownItem: dropdownItem,
   unnnicToolTip: toolTip,
@@ -104,6 +104,7 @@ const components = {
   unnnicTextArea: TextArea,
   unnnicCardNumber: CardNumber,
   unnnicChartRainbow: chartRainbow,
+  unnnicTextEditor: textEditor,
 };
 
 Object.keys(components).forEach((name) => {
@@ -123,7 +124,7 @@ export const unnnicDropdown = dropdown;
 export const unnnicDropdownItem = dropdownItem;
 export const unnnicAvatarIcon = avatarIcon;
 export const unnnicIcon = icon;
-export const unnnicIconSvg = iconSvg;
+export const unnnicIconSvg = icon;
 export const unnnicToolTip = toolTip;
 export const unnnicCard = card;
 export const unnnicCardCompany = cardCompany;
@@ -163,3 +164,4 @@ export const unnnicChatText = ChatText;
 export const unnnicTextArea = TextArea;
 export const unnnicCardNumber = CardNumber;
 export const unnnicChartRainbow = chartRainbow;
+export const unnnicTextEditor = textEditor;

package/src/locales/en.json

@@ -1,15 +1,15 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Drag your file here or",
-      "highlight": "search it"
-    },
-    "invalid": {
-      "subtitle": "File not supported, select supported formats:"
-    },
-    "subtitle": "Supported formats:"
-  },
-  "import_card": {
-    "importing": "Importing"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Drag your file here or",
+      "highlight": "search it"
+    },
+    "invalid": {
+      "subtitle": "File not supported, select supported formats:"
+    },
+    "subtitle": "Supported formats:"
+  },
+  "import_card": {
+    "importing": "Importing"
+  }
+}