@avakhula/ui 0.1.20 → 0.1.22

package/src/components/Form/TextEditor/Toolbar.vue

@@ -0,0 +1,723 @@
+<template>
+  <div class="ib-toolbar toolbar" ref="toolbar">
+    <div
+      class="toolbar-group header-toolbar-group"
+      v-show="placeholders.length"
+    >
+      <label class="toolbar-group__label" for="placeholders"
+        >Placeholder Selector</label
+      >
+      <select id="placeholders" class="ql-placeholder">
+        <option selected value="default" class="disabled"></option>
+        <option
+          v-for="placeholder in placeholders"
+          :key="placeholder.id"
+          :value="placeholder.id"
+        >
+          {{ placeholder.label }}
+        </option>
+      </select>
+    </div>
+
+    <div
+      v-if="!isElementHidden('header')"
+      class="toolbar-group header-toolbar-group"
+      v-tooltip="lang('text_style', langComponents.COMPONENT_SYSTEM)"
+    >
+      <label class="toolbar-group__label" :for="'header-selector' + uid"
+        >Header Selector</label
+      >
+      <select :id="'header-selector' + uid" class="ql-header">
+        <option value="1"></option>
+        <option value="2"></option>
+        <option value="3"></option>
+        <option value="4"></option>
+        <option value="5"></option>
+        <option value="6"></option>
+        <option selected></option>
+      </select>
+    </div>
+
+    <div
+      v-if="!isElementHidden('font-size')"
+      class="toolbar-group header-toolbar-group"
+      v-tooltip="lang('font_size', langComponents.COMPONENT_SYSTEM)"
+    >
+      <label class="toolbar-group__label" :for="'font-size-selector' + uid"
+        >Font Size Selector</label
+      >
+      <select :id="'font-size-selector' + uid" class="ql-size ql-header">
+        <option value="12px">12 px</option>
+        <option value="14px">14 px</option>
+        <option value="16px">16 px</option>
+        <option value="20px">20 px</option>
+        <option value="24px">24 px</option>
+        <option value="36px">36 px</option>
+        <option value="48px">48 px</option>
+      </select>
+    </div>
+
+    <div class="toolbar-group">
+      <ib-icon-button
+        v-if="!isElementHidden('bold')"
+        v-tooltip="lang('bold', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-bold"
+        class="toolbar-item ql-bold"
+        kind="ghost"
+      ></ib-icon-button>
+
+      <ib-icon-button
+        v-if="!isElementHidden('italic')"
+        v-tooltip="lang('italic', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-italic"
+        class="toolbar-item ql-italic"
+        kind="ghost"
+      ></ib-icon-button>
+
+      <ib-icon-button
+        v-if="!isElementHidden('underline')"
+        v-tooltip="lang('underline', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-underline"
+        class="toolbar-item ql-underline"
+        kind="ghost"
+      ></ib-icon-button>
+
+      <ib-icon-button
+        v-if="!isElementHidden('strike')"
+        v-tooltip="lang('strikethrough', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-strike"
+        class="toolbar-item ql-strike"
+        kind="ghost"
+      ></ib-icon-button>
+    </div>
+
+    <div class="toolbar-group">
+        <div v-tooltip="lang('highlight_color', langComponents.COMPONENT_SYSTEM)">
+            <label
+                class="toolbar-group__label"
+                :for="'background-selector' + uid"
+                v-tooltip="lang('highlight_color', langComponents.COMPONENT_SYSTEM)"
+            >
+                Background Selector
+            </label>
+
+            <select v-tooltip="lang('highlight_color', langComponents.COMPONENT_SYSTEM)" :id="'background-selector' + uid" class="ql-background"></select>
+        </div>
+
+        <div v-tooltip="lang('text_color', langComponents.COMPONENT_SYSTEM)">
+        <label class="toolbar-group__label" :for="'color-selector' + uid"
+            v-tooltip="lang('text_color', langComponents.COMPONENT_SYSTEM)"
+            >Background Color Selector</label
+        >
+        <select :id="'color-selector' + uid" class="ql-color"></select>
+        </div>
+    </div>
+
+    <div class="toolbar-group">
+      <ib-icon-button
+        v-if="!isElementHidden('code')"
+        v-tooltip="lang('code_snippet', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-code-block"
+        class="toolbar-item ql-code-block"
+        kind="ghost"
+      ></ib-icon-button>
+
+      <ib-icon-button
+        v-if="!isElementHidden('image')"
+        v-tooltip="lang('insert_image', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-image"
+        class="toolbar-item ql-image"
+        kind="ghost"
+      ></ib-icon-button>
+
+      <ib-icon-button
+        v-if="!isElementHidden('link')"
+        v-tooltip="lang('insert_link', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-link"
+        class="toolbar-item ql-link"
+        kind="ghost"
+      ></ib-icon-button>
+    </div>
+
+    <div class="toolbar-group">
+      <ib-icon-button
+        v-if="!isElementHidden('align')"
+        v-tooltip="lang('align_left', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-align"
+        class="toolbar-item ql-align"
+        kind="ghost"
+      ></ib-icon-button>
+
+      <ib-icon-button
+        v-if="!isElementHidden('align-center')"
+        v-tooltip="lang('align_center', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-align-center"
+        class="ql-align toolbar-item"
+        value="center"
+        kind="ghost"
+      ></ib-icon-button>
+
+      <ib-icon-button
+        v-if="!isElementHidden('align-right')"
+        v-tooltip="lang('align_right', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-align-right"
+        class="ql-align toolbar-item"
+        value="right"
+        kind="ghost"
+      ></ib-icon-button>
+
+      <ib-icon-button
+        v-if="!isElementHidden('align-justify')"
+        v-tooltip="lang('justify', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-align-justify"
+        class="ql-align toolbar-item"
+        value="justify"
+        kind="ghost"
+      ></ib-icon-button>
+    </div>
+
+    <div class="toolbar-group">
+      <ib-icon-button
+        v-if="!isElementHidden('ordered-list')"
+        v-tooltip="lang('number_list', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-ordered-list"
+        class="ql-list toolbar-item"
+        value="ordered"
+        kind="ghost"
+      ></ib-icon-button>
+
+      <ib-icon-button
+        v-if="!isElementHidden('bullet-list')"
+        v-tooltip="lang('bullet_list', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-bullet-list"
+        class="ql-list toolbar-item"
+        value="bullet"
+        kind="ghost"
+      ></ib-icon-button>
+
+      <ib-icon-button
+        v-if="!isElementHidden('alphabet-list')"
+        v-tooltip="lang('alphabet_list', langComponents.COMPONENT_SYSTEM)"
+        aria-label="button-alphabet-list"
+        class="ql-alphabet-list alphabet-list toolbar-item"
+        kind="ghost"
+      ></ib-icon-button>
+    </div>
+
+    <div v-if="$slots.actions" class="toolbar-group">
+      <ib-dropdown-list>
+        <template #trigger>
+          <ib-icon-button v-tooltip="lang('actions', langComponents.COMPONENT_SYSTEM)" kind="ghost">
+            <ib-icon name="ellipsis-horizontal-sharp" />
+          </ib-icon-button>
+        </template>
+
+        <template #body>
+          <slot name="actions"></slot>
+        </template>
+      </ib-dropdown-list>
+    </div>
+  </div>
+</template>
+
+<script>
+import IbIconButton from "../../IconButton/IconButton.vue";
+import IbIcon from "../../Icon.vue";
+import IbDropdownList from "../../Dropdown/DropdownList.vue";
+import { TooltipDirective as Tooltip } from "../../../directives/tooltip/tooltip"
+
+export default {
+  props: {
+    placeholders: {
+      type: Array,
+      default: [],
+    },
+    uid: {
+      type: String,
+      default: "",
+    },
+    hiddenElements: {
+      type: Array,
+      default: () => [],
+    },
+
+  },
+  mounted() {
+      this.$nextTick(() => {
+        this.$refs.toolbar?.classList.remove("ql-toolbar");
+      });
+  },
+  methods: {
+    isElementHidden(element) {
+      return this.hiddenElements.includes(element);
+    },
+  },
+  components: {
+    IbIconButton,
+    IbIcon,
+    IbDropdownList,
+    },
+  directives: {
+    Tooltip,
+  },
+};
+</script>
+
+<style lang="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 *;
+
+@use "./textEditor.scss" as *;
+.ib-toolbar.toolbar {
+  padding: 0 !important;
+  border: none !important;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -10px;
+  transition: background-color 0.3s;
+
+  .toolbar-item {
+    &:hover {
+      svg {
+        .fill {
+          fill: $blue-800 !important;
+        }
+        .stroke {
+          stroke: $blue-800 !important;
+        }
+      }
+    }
+
+    &.ql-active {
+      background-color: $blue-200 !important;
+    }
+
+    &.ql-active,
+    &:active {
+      svg {
+        .fill {
+          fill: $blue-900 !important;
+        }
+        .stroke {
+          stroke: $blue-900 !important;
+        }
+      }
+    }
+  }
+
+  .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;
+      }
+    }
+  }
+  .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-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-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;
+          }
+        }
+      }
+    }
+  }
+
+    .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-snow {
+    .toolbar-item {
+      &:hover {
+        svg {
+          .fill {
+            fill: $blue-800;
+          }
+          .stroke {
+            stroke: $blue-800;
+          }
+        }
+      }
+
+      &.ql-active {
+        background-color: $blue-200;
+      }
+
+      &.ql-active,
+      &:active {
+        svg {
+          .fill {
+            fill: $blue-900;
+          }
+          .stroke {
+            stroke: $blue-900;
+          }
+        }
+      }
+    }
+  }
+
+  .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-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);
+  }
+}
+</style>