@avakhula/ui 0.0.505 → 0.0.510-alpha-spa.1

package/src/components/Form/TextEditor/icons/toolbarIcons.js

@@ -109,3 +109,11 @@ export const LIST_ALPHABET = `
 <rect x="7" y="14.5" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
 </svg>
 `;
+
+export const IMAGE = `
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16.25 3.125H3.75C2.71447 3.125 1.875 3.96447 1.875 5V15C1.875 16.0355 2.71447 16.875 3.75 16.875H16.25C17.2855 16.875 18.125 16.0355 18.125 15V5C18.125 3.96447 17.2855 3.125 16.25 3.125Z" stroke="#1A1A1A" stroke-width="1.25" stroke-linejoin="round"/>
+        <path d="M13.125 8.125C13.8154 8.125 14.375 7.56536 14.375 6.875C14.375 6.18464 13.8154 5.625 13.125 5.625C12.4346 5.625 11.875 6.18464 11.875 6.875C11.875 7.56536 12.4346 8.125 13.125 8.125Z" stroke="#1A1A1A" stroke-width="1.25" stroke-miterlimit="10"/>
+        <path d="M8.75 16.8741L13.568 12.0561C13.7883 11.8353 14.0832 11.7049 14.3948 11.6904C14.7064 11.676 15.0121 11.7785 15.252 11.978L18.125 14.3741M11.875 13.1159L8.33359 9.58111C8.10824 9.35581 7.80535 9.22508 7.48684 9.21564C7.16832 9.2062 6.85822 9.31876 6.61992 9.53032L1.875 13.7491L11.875 13.1159Z" stroke="#1A1A1A" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+`;

package/src/components/Form/TextEditor/plugins/imageBlot.js

@@ -0,0 +1,23 @@
+import { Quill } from "@vueup/vue-quill";
+
+const ImageBlot = Quill.import('formats/image');
+
+class CustomImageBlot extends ImageBlot {
+  static create(value) {
+    const node = super.create(value);
+
+    node.setAttribute('data-supernova-id', value);
+
+    node.setAttribute('src', '#');
+    return node;
+  }
+
+  static value(node) {
+    return node.getAttribute('data-supernova-id');
+  }
+}
+
+CustomImageBlot.blotName = 'custom-image';
+CustomImageBlot.tagName = 'img';
+
+export default CustomImageBlot;

package/src/components/Form/TextEditor/setupTextEditor.js

@@ -0,0 +1,71 @@
+import { Quill } from "@vueup/vue-quill";
+import { AlphabetList, AlphabetListItem } from "./plugins/alphabetList.js";
+import CustomImageBlot from "./plugins/imageBlot.js";
+import {
+  ALIGN_CENTER,
+  ALIGN_JUSTIFY,
+  ALIGN_LEFT,
+  ALIGN_RIGHT,
+  BOLD,
+  CODE,
+  ITALIC,
+  LINK,
+  LIST_ALPHABET,
+  LIST_BULLET,
+  LIST_ORDERED,
+  STRIKE,
+  UNDERLINE,
+  IMAGE,
+} from "./icons/toolbarIcons.js";
+
+// Custom size class for pixel values
+const SizeClass = Quill.import('attributors/class/size');
+SizeClass.whitelist = ['12px', '14px', '16px', '20px', '24px', '36px', '48px'];
+
+const SizeStyle = Quill.import('attributors/style/size');
+SizeStyle.whitelist = ['12px', '14px', '16px', '20px', '24px', '36px', '48px'];
+
+export function setupTextEditor() {
+    Quill.register(Quill.import('attributors/attribute/direction'), true);
+    Quill.register(Quill.import('attributors/class/align'), true);
+    Quill.register(Quill.import('attributors/class/direction'), true);
+    Quill.register(Quill.import('attributors/class/font'), true);
+    Quill.register(SizeClass, true);
+    Quill.register(Quill.import('attributors/style/align'), true);
+    Quill.register(Quill.import('attributors/style/background'), true);
+    Quill.register(Quill.import('attributors/style/color'), true);
+    Quill.register(Quill.import('attributors/style/direction'), true);
+    Quill.register(Quill.import('attributors/style/font'), true);
+    Quill.register(SizeStyle, true);
+
+    setupTextEditorIcons();
+    setupTextEditorPlugins();
+}
+
+export function setupTextEditorIcons() {
+    const icons = Quill.import("ui/icons");
+    icons.bold = BOLD;
+    icons.italic = ITALIC;
+    icons.underline = UNDERLINE;
+    icons.strike = STRIKE;
+    icons["code-block"] = CODE;
+    icons.link = LINK;
+    icons.align[""] = ALIGN_LEFT;
+    icons.align.center = ALIGN_CENTER;
+    icons.align.right = ALIGN_RIGHT;
+    icons.align.justify = ALIGN_JUSTIFY;
+    icons.list.ordered = LIST_ORDERED;
+    icons.list.bullet = LIST_BULLET;
+    icons["alphabet-list"] = LIST_ALPHABET;
+    icons.image = IMAGE;
+
+    Quill.register(icons);
+}
+
+export function setupTextEditorPlugins() {
+    Quill.register({
+      "formats/alphabet-list": AlphabetList,
+      "formats/alphabet-list/item": AlphabetListItem,
+      "formats/custom-image": CustomImageBlot,
+    });
+}

package/src/components/Form/TextEditor/textEditor.scss

@@ -1,7 +1,7 @@
-@import "../../../assets/scss/variables/colors.scss";
-@import "../../../assets/scss/variables/shadows.scss";
-@import "../../../assets/scss/mixins.scss";
-@import "../../../assets/scss/typography.scss";
+@use "../../../assets/scss/variables/colors.scss" as *;
+@use "../../../assets/scss/variables/shadows.scss" as *;
+@use "../../../assets/scss/mixins.scss" as *;
+@use "../../../assets/scss/typography.scss" as *;
 
 $textarea-error-outline-color: $red-800;
 // TODO: it's duplicate from /components/Button/button.scss
@@ -30,13 +30,13 @@ $input-hover-error-color: $red-800;
 
 // AlphabeticalList list style
 ol[type="a"] li::before {
-  content: counter(list-1, lower-alpha) ". ";
+  content: counter(list-1, lower-alpha) ". "!important;
 }
 ol[type="a"] li {
-  counter-increment: list-1;
+  counter-increment: list-1!important;
 }
 ol[type="a"] li {
-  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9!important;
 }
 
 .textarea-wrapper {
@@ -84,6 +84,7 @@ ol[type="a"] li {
         color: $neutral-500;
       }
     }
+
     .ql-header.ql-picker {
       .ql-picker-label:hover,
       .ql-picker-label {
@@ -178,6 +179,10 @@ ol[type="a"] li {
 
     .ql-editor {
       padding: 0 0 10px 0;
+
+      img {
+          display: inline-block;
+      }
     }
   }
 
@@ -197,7 +202,7 @@ ol[type="a"] li {
     .ib-text-editor {
       background-color: $blue-100;
       border-bottom-color: $blue-700;
-  
+
       & + .toolbar {
         background-color: $blue-100;
       }
@@ -235,344 +240,15 @@ ol[type="a"] li {
 
   .toolbar {
     position: absolute;
-    bottom: 2px;
+    bottom: 1.5px;
     left: 12px;
     right: 25px;
     padding-top: 10px;
-    padding-bottom: 8px;
+    padding-bottom: 5px;
     display: flex;
     flex-wrap: wrap;
     margin: 0 -10px;
     transition: background-color 0.3s;
-    .toolbar-group {
-      position: relative;
-      display: flex;
-      padding: 0 10px;
-
-      &:last-child {
-        &::before {
-          display: none;
-        }
-      }
-
-      &::before {
-        content: "";
-        height: 16px;
-        width: 2px;
-        background-color: $gray-300;
-        position: absolute;
-        right: -1px;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-
-      button {
-        &:not(:last-child) {
-          margin-right: 4px;
-        }
-      }
-    }
-  }
-
-  // Headings dropdown
-  .ql-snow .ql-picker.ql-header .ql-picker-item {
-    &::before {
-      @include Ib-H4-regular;
-    }
-
-    &[data-value="1"]::before {
-      @include Ib-H1-medium;
-    }
-
-    &[data-value="2"]::before {
-      @include Ib-H2-medium;
-    }
-
-    &[data-value="3"]::before {
-      @include Ib-H3-medium;
-    }
-
-    &[data-value="4"]::before {
-      @include Ib-H4-medium;
-    }
-
-    &[data-value="5"]::before {
-      @include Ib-H5-medium;
-    }
-
-    &[data-value="6"]::before {
-      @include Ib-H6-medium;
-    }
-  }
-
-  .ql-header.ql-picker {
-    width: 98px;
-    border-radius: 4px;
-
-    // Is Open
-    &.ql-expanded {
-      .ql-picker-label {
-        background-color: $blue-200;
-        border-color: transparent;
-
-        &:after {
-          // Transform color from $neutral-900(#1A1A1A) to $blue-900(#0057C2)
-          filter: invert(23%) sepia(50%) saturate(4320%) hue-rotate(204deg)
-            brightness(87%) contrast(101%);
-          transform: translateY(-50%) rotate(180deg);
-        }
-
-        &::before {
-          color: $blue-900;
-        }
-      }
-    }
-
-    .ql-picker-label {
-      padding: 2.5px 3px;
-      border: 2px solid transparent;
-      border-radius: 4px;
-      overflow: hidden;
-      transition: border-color 0.3s, background-color 0.3s;
-
-      &::after {
-        content: "";
-        background-image: url(./icons/svg/chevron-down.svg);
-        width: 16px;
-        height: 16px;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        right: 0;
-        transition: transform 0.3s;
-      }
-
-      &:before {
-        color: $neutral-900;
-        @include Ib-H4-regular;
-        line-height: 15px;
-        transition: color 0.3s;
-      }
-
-      &:focus {
-        border-radius: 4px;
-        @include focus(4px);
-      }
-
-      svg {
-        display: none;
-      }
-
-      &:hover {
-        border-color: $blue-300;
-        background-color: $blue-100;
-
-        &:before {
-          color: $blue-800;
-        }
-
-        &::after {
-          // Transform color from $neutral-900(#1A1A1A) to $blue-800(#0060D6)
-          filter: invert(76%) sepia(94%) saturate(5659%) hue-rotate(215deg)
-            brightness(101%) contrast(100%);
-        }
-      }
-
-      &:active {
-        border-color: transparent;
-        background-color: $blue-200;
-
-        &:before {
-          color: $blue-900;
-        }
-
-        &::after {
-          // Transform color from $neutral-900(#1A1A1A) to $blue-900(#0057C2)
-          filter: invert(23%) sepia(50%) saturate(4320%) hue-rotate(204deg)
-            brightness(87%) contrast(101%);
-        }
-      }
-    }
-  }
-
-  .ql-picker-options {
-    left: -2px;
-    margin-top: 5px !important;
-    border-radius: 4px;
-    padding: 6.5px 0;
-    background-color: $white;
-    box-shadow: $ib-shadow-4;
-
-    .ql-picker-item {
-      height: 36px;
-      padding: 0px 15px 0px 13px;
-      display: flex;
-      align-items: center;
-      border-left: 2px solid transparent;
-      transition: border-color 0.3s, background-color 0.3s;
-      @include focus();
-
-      &:before {
-        color: $neutral-900;
-      }
-
-      &:hover {
-        background-color: $gray-100;
-      }
-
-      &.ql-selected {
-        border-color: $blue-900;
-        background-color: $gray-100;
-
-        &:hover {
-          background-color: $blue-50;
-        }
-      }
-    }
-  }
-
-  .ql-color-picker {
-    .ql-picker-label {
-      padding: 0;
-      width: 24px;
-      height: 24px;
-      max-width: 24px;
-      max-height: 24px;
-      min-width: 24px;
-      min-height: 24px;
-      line-height: 1px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border: 2px solid transparent;
-
-      &:hover {
-        background-color: $blue-100;
-        border-color: $blue-300;
-        border-radius: 4px;
-
-        svg {
-          .ql-stroke {
-            stroke: $blue-800;
-          }
-        }
-      }
-
-      &:active {
-        border-color: transparent;
-        background-color: $blue-200;
-
-        svg {
-          .ql-stroke {
-            stroke: $blue-900;
-          }
-        }
-      }
-
-      &:focus {
-        border-radius: 4px;
-        @include focus(2px);
-      }
-
-      svg {
-        width: 20px;
-        height: 20px;
-
-        .ql-stroke {
-          transition: stroke 0.3s;
-          stroke: $neutral-900;
-        }
-      }
-    }
-
-    &.ql-expanded {
-      .ql-picker-label {
-        border-radius: 4px;
-        background-color: $blue-200;
-
-        svg {
-          .ql-stroke {
-            stroke: $blue-900;
-          }
-        }
-      }
-    }
-
-    &.ql-background {
-      .ql-picker-item {
-        &:not([data-value]) {
-          border: 1px solid $gray-600;
-          background-color: $white!important;
-          position: relative;
-
-          &::after {
-            content: "";
-            width: 14px;
-            height: 1px;
-            background-color: $gray-600;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%) rotate(-45deg);
-            border-radius: 10px;
-          }
-
-          &:hover {
-            background-color: $white!important;
-          }
-        }
-      }
-    }
-
-    .ql-picker-options {
-      padding: 7.5px;
-      width: 162px;
-
-      .ql-picker-item {
-        width: 16px;
-        height: 16px;
-        padding: 0;
-        border: none;
-        border-radius: 4px;
-        margin: 2.5px;
-        transition: transform 0.2s;
-
-        &[data-value="#ffffff"] {
-          border: 1px solid $gray-600;
-          position: relative;
-        }
-
-        &:hover {
-          transform: scale(1.2);
-        }
-
-        &:focus {
-          @include focus(1px);
-        }
-
-        &.ql-selected {
-          position: relative;
-
-          &:first-child {
-            background-color: black;
-          }
-
-          &::before {
-            content: "";
-            width: calc(100% + 5px);
-            height: calc(100% + 5px);
-            border-radius: 4px;
-            background-color: transparent;
-            border: 1px solid $gray-600;
-            position: absolute;
-            top: -2.5px;
-            bottom: -2.5px;
-            right: -2.5px;
-            left: -2.5px;
-          }
-        }
-      }
-    }
   }
 
   // Link tooltip

package/src/components/Form/Textarea/Textarea.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="textarea-wrapper" :class="{ disabled: disabled }">
+  <div
+    class="textarea-wrapper"
+    :class="{ disabled: disabled, hasActins: $slots.actions }"
+    @focusout="onFocusOut"
+  >
     <ib-character-count
       v-if="characterLimit"
       :character-limit="characterLimit"
@@ -14,12 +18,16 @@
     <textarea
       v-bind="$attrs"
       v-model="val"
+      :id="id"
       @input="onInput"
-      @blur="onBlur"
       class="ib-textarea"
       :class="classes"
       :disabled="disabled"
     ></textarea>
+
+    <div class="textarea-actions">
+      <slot name="actions"></slot>
+    </div>
   </div>
 </template>
 
@@ -57,22 +65,31 @@ export default {
       type: String,
       default: "",
     },
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  watch: {
+    value() {
+      this.val = this.value;
+    },
+    val() {
+      this.$emit("update:value", this.val);
+    },
   },
   data() {
     return {
-      val: "",
+      val: this.value,
     };
   },
   methods: {
     onInput() {
-      if (!this.characterOverLimit) {
         this.$emit("input", this.val);
-      }
     },
-    onBlur() {
-      if (!this.characterOverLimit) {
-        this.$emit("blur", this.val);
-      }
+    onFocusOut(event) {
+      if (this.$el.contains(event.relatedTarget)) return;
+      this.$emit("blur", this.val);
     },
   },
   computed: {
@@ -93,10 +110,11 @@ export default {
     IbAlert,
     IbCharacterCount,
   },
+  emits: ["input", "blur", "update:value"],
   inheritAttrs: false,
 };
 </script>
 
 <style lang="scss" scoped>
-@import "./textarea.scss";
+@use "./textarea.scss" as *;
 </style>

package/src/components/Form/Textarea/textarea.scss

@@ -1,6 +1,6 @@
-@import "../../../assets/scss/variables/colors.scss";
-@import "../../../assets/scss/mixins.scss";
-@import "../../../assets/scss/typography.scss";
+@use "../../../assets/scss/variables/colors.scss" as *;
+@use "../../../assets/scss/mixins.scss" as *;
+@use "../../../assets/scss/typography.scss" as *;
 
 $textarea-bg: $gray-100;
 $textarea-text-color: $neutral-900;
@@ -14,8 +14,10 @@ $textarea-hover-border-color: $blue-700;
 $textarea-error-outline-color: $red-800;
 
 .textarea-wrapper {
-  width: fit-content;
+  background-color: $textarea-bg;
+  width: 100%;
   position: relative;
+  border-radius: 4px 4px 0px 0px;
 
   .character-count {
     position: absolute;
@@ -32,14 +34,35 @@ $textarea-error-outline-color: $red-800;
       color: $neutral-500;
     }
   }
+
+  &.hasActins {
+    textarea {
+      padding-bottom: 40px;
+    }
+  }
+
+  .textarea-actions {
+    background-color: inherit;
+    position: absolute;
+    bottom: 3px;
+    left: 0;
+    right: 10px;
+    padding: 0 10px 2px 10px;
+    transition: background-color 0.3s;
+  }
+
+  &:hover {
+        background-color: $textarea-hover-bg;
+  }
 }
 
 textarea.ib-textarea {
   @include Ib-H4-regular;
+  width: 100%;
   height: 80px;
   min-height: 36px;
   border: none;
-  background-color: $textarea-bg;
+  background-color: inherit;
   color: $textarea-text-color;
   padding: 10px 15px;
   resize: vertical;
@@ -76,6 +99,11 @@ textarea.ib-textarea {
     }
   }
 
+  &:read-only:hover {
+    background-color: $textarea-bg;
+    color: $textarea-text-color;
+  }
+
   &.error {
     border-radius: 4px;
     border-bottom-color: transparent;

package/src/components/Form/Toggle/Toggle.vue

@@ -122,5 +122,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./toggle.scss";
+@use "./toggle.scss" as *;
 </style>

package/src/components/Form/Toggle/toggle.scss

@@ -1,6 +1,6 @@
-@import "../../../assets/scss/variables/colors.scss";
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/mixins.scss";
+@use "../../../assets/scss/variables/colors.scss" as *;
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/mixins.scss" as *;
 
 $switcher-slider-on: $blue-800;
 $switcher-slider-on-hover: $blue-700;