@avakhula/ui 0.1.20 → 0.1.22

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
@@ -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;
+      }
     }
   }
 
@@ -244,359 +249,6 @@ ol[type="a"] li {
     flex-wrap: wrap;
     margin: 0 -10px;
     transition: background-color 0.3s;
-    .toolbar-group {
-      position: relative;
-      display: flex;
-      padding: 0 10px;
-
-      &__label {
-        display: none;
-      }
-
-      &: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;
-        }
-      }
-    }
-  }
-
-  .ql-picker.ql-placeholder {
-    width: 118px;
-
-    .ql-picker-options {
-      [data-value='default'] {
-        display: none;
-      }
-    }
-  }
-
-  .ql-picker.ql-placeholder > span.ql-picker-label::before {
-    content: 'Placeholders';
-  }
-
-  .ql-picker.ql-placeholder > span.ql-picker-options > span.ql-picker-item::before {
-    content: attr(data-label);
-  }
-
-  // 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-snow {
-    .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

@@ -14,6 +14,7 @@
     <textarea
       v-bind="$attrs"
       v-model="val"
+      :id="id"
       @input="onInput"
       @blur="onBlur"
       class="ib-textarea"
@@ -111,5 +112,5 @@ export default {
 </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;

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;

package/src/components/IconButton/IconButton.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 // Disabled button colors
 $disabled-btn-background: $gray-100;

package/src/components/IconButton/IconButton.vue

@@ -6,15 +6,15 @@
     :kind="kind"
     :disabled="disabled"
     :prevent-default="preventDefault"
+    v-tooltip="helpText"
   >
     <slot></slot>
-    <ib-tooltip v-if="helpText.length" :text="helpText" />
   </ib-button>
 </template>
 
 <script>
 import IbButton from "../Button/Button.vue";
-import IbTooltip from "../Tooltip/Tooltip.vue";
+import { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip"
 import { iconButtonKindOptions, iconButtonSize } from "./constants.js";
 
 export default {
@@ -95,12 +95,14 @@ export default {
   },
   components: {
     IbButton,
-    IbTooltip,
+  },
+  directives: {
+    Tooltip,
   },
   inheritAttrs: false,
 };
 </script>
 
 <style lang="scss">
-@import "./IconButton.scss";
+@use "./IconButton.scss" as *;
 </style>

package/src/components/List.vue

@@ -86,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../assets/scss/variables/colors.scss";
+@use "../assets/scss/variables/colors.scss" as *;
 
 $item-checked-bg: $gray-100;
 $item-hover-bg: $gray-100;