@avakhula/ui 0.1.20 → 0.1.21

package/src/components/Form/PhoneInput/PhoneInput.vue

@@ -3,29 +3,44 @@
     {{ errorMessage }}
   </ib-alert>
 
-  <vue-tel-input
-    v-outside="clickOutside"
-    v-model="phone"
-    v-bind="$attrs"
-    @country-changed="countryChanged"
-    :input-options="{ name: inputName, id: inputName, autocomplete: 'off' }"
-    :auto-default-country="autoDefaultCountry"
-    :dropdown-options="{ showSearchBox: true, showFlags: true, tabindex: 0 }"
-    :defaultCountry="defaultCountry"
-    :ignoredCountries="ignoredCountries"
-    :class="{ error: error || errorMessage.length, disabled }"
-    :disabled="disabled"
-    style-classes="ib-phone-input"
-    ref="vueTel"
-  >
-    <template #arrow-icon>
-      <ib-icon name="chevron-down-outline"></ib-icon>
-    </template>
-  </vue-tel-input>
+  <div class="ib-phone-wrapper">
+    <vue-tel-input
+        v-outside="clickOutside"
+        v-model="phone"
+        v-bind="$attrs"
+        @country-changed="countryChanged"
+        :input-options="{ name: inputName, id: inputName, autocomplete: 'tel' }"
+        :auto-default-country="autoDefaultCountry"
+        :dropdown-options="{ showSearchBox: true, showFlags: true, tabindex: 0 }"
+        :defaultCountry="defaultCountry"
+        :ignoredCountries="ignoredCountries"
+        :class="{ error: error || errorMessage.length, disabled }"
+        :disabled="disabled"
+        style-classes="ib-phone-input"
+        ref="vueTel"
+    >
+        <template #arrow-icon>
+        <ib-icon name="chevron-down-outline"></ib-icon>
+        </template>
+
+        <template #icon-right>
+            <ib-icon-button
+                v-if="showClearButton"
+                v-show="phone.length"
+                kind="ghost"
+                class="ib-phone-clear-button"
+                @click="clearPhone"
+            >
+                <ib-icon name="close-outline" />
+            </ib-icon-button>
+        </template>
+    </vue-tel-input>
+  </div>
 </template>
 
 <script>
 import IbIcon from "../../Icon.vue";
+import IbIconButton from "../../IconButton/IconButton.vue";
 import IbAlert from "../../Alert/Alert.vue";
 import { OutsideDirective as Outside } from "../../../directives/outside/outside";
 import { VueTelInput } from 'vue-tel-input';
@@ -61,11 +76,16 @@ export default {
     disabled: {
       type: Boolean,
       default: false,
-    }
+    },
+    showClearButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['update:modelValue', 'onReady'],
   components: {
     VueTelInput,
+    IbIconButton,
     IbAlert,
     IbIcon,
   },
@@ -110,10 +130,25 @@ export default {
         this.vueTel.clickedOutside();
       }
     },
+    clearPhone() {
+        this.phone = "";
+    }
   },
 };
 </script>
 
 <style lang="scss">
-@import "./phoneInput.scss";
+@use "./phoneInput.scss" as *;
+
+.ib-phone-wrapper {
+    position: relative;
+
+    .ib-phone-clear-button {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+
+    }
+}
 </style>

package/src/components/Form/PhoneInput/phoneInput.scss

@@ -1,7 +1,7 @@
-@import "../../../assets/scss/variables/colors.scss";
-@import "../../../assets/scss/variables/shadows.scss";
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/mixins.scss";
+@use "../../../assets/scss/variables/colors.scss" as *;
+@use "../../../assets/scss/variables/shadows.scss" as *;
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/mixins.scss" as *;
 
 $input-bg: $gray-100;
 $input-color: $neutral-900;

package/src/components/Form/Radio/Radio.vue

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

package/src/components/Form/Radio/radio.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 *;
 
 //checkbox
 $radio-text: $neutral-900;

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

@@ -43,187 +43,37 @@
           :modules="modules"
         ></QuillEditor>
       </div>
-      <div id="toolbar" class="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 class="toolbar-group header-toolbar-group">
-          <label class="toolbar-group__label" for="header-selector">Header Selector</label>
-          <select id="header-selector" 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 class="toolbar-group">
-          <ib-icon-button
-            aria-label="button-bold"
-            class="toolbar-item ql-bold"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            aria-label="button-italic"
-            class="toolbar-item ql-italic"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            aria-label="button-underline"
-            class="toolbar-item ql-underline"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            aria-label="button-strike"
-            class="toolbar-item ql-strike"
-            kind="ghost"
-          ></ib-icon-button>
-        </div>
-
-        <div class="toolbar-group">
-          <label class="toolbar-group__label" for="background-selector">Background Selector</label>
-          <select id="background-selector" class="ql-background"></select>
-          <label class="toolbar-group__label" for="color-selector">Background Color Selector</label>
-          <select id="color-selector" class="ql-color"></select>
-        </div>
-
-        <div class="toolbar-group">
-          <ib-icon-button
-              aria-label="button-code-block"
-            class="toolbar-item ql-code-block"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-              aria-label="button-link"
-            class="toolbar-item ql-link"
-            kind="ghost"
-          ></ib-icon-button>
-        </div>
-
-        <div class="toolbar-group">
-          <ib-icon-button
-              aria-label="button-align"
-            class="toolbar-item ql-align"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-              aria-label="button-align-center"
-            class="ql-align toolbar-item"
-            value="center"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-              aria-label="button-align-right"
-            class="ql-align toolbar-item"
-            value="right"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            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
-            aria-label="button-ordered-list"
-            class="ql-list toolbar-item"
-            value="ordered"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-              aria-label="button-bullet-list"
-            class="ql-list toolbar-item"
-            value="bullet"
-            kind="ghost"
-          ></ib-icon-button>
-
-          <ib-icon-button
-            aria-label="button-alphabet-list"
-            class="ql-alphabet-list alphabet-list toolbar-item"
-            kind="ghost"
-          ></ib-icon-button>
-        </div>
-      </div>
+      <Toolbar
+        id="toolbar"
+        class="toolbar"
+        ref="toolbar"
+        :placeholders="placeholders"
+        :uid="uid"
+        :hidden-elements="hiddenElements"
+      />
     </div>
   </div>
 </template>
 
 <script>
+
 import {Quill, QuillEditor} from "@vueup/vue-quill";
 import IbIconButton from "../../IconButton/IconButton.vue";
 import IbAlert from "../../Alert/Alert.vue";
 import IbCharacterCount from "../CharactersCount.vue";
-import {AlphabetList, AlphabetListItem} from "./plugins/alphabetList";
+import Toolbar from "./Toolbar.vue";
 import { stripHtml } from "../../../helpers/stripHtml";
 import getPlaceholderModule from 'quill-placeholder-module';
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
-
-import {
-  ALIGN_CENTER,
-  ALIGN_JUSTIFY,
-  ALIGN_LEFT,
-  ALIGN_RIGHT,
-  BOLD,
-  CODE,
-  ITALIC,
-  LINK,
-  LIST_ALPHABET,
-  LIST_BULLET,
-  LIST_ORDERED,
-  STRIKE,
-  UNDERLINE,
-} from "./icons/toolbarIcons";
-
-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(Quill.import('attributors/class/size'), 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(Quill.import('attributors/style/size'), true);
-
-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;
-
-Quill.register({
-  "formats/alphabet-list": AlphabetList,
-  "formats/alphabet-list/item": AlphabetListItem,
-});
+import { setupTextEditor } from "./setupTextEditor";
 
 Quill.register('modules/placeholder', getPlaceholderModule(Quill, {
   className: 'ql-placeholder-content'
 }))
 
-
-Quill.register(icons);
 Quill.debug("error");
+setupTextEditor();
 
 export default {
   name: "IbTextEditor",
@@ -283,12 +133,13 @@ export default {
       type: String,
       default: "",
     },
+    hiddenElements: {
+        type: Array,
+        default: () => ['font-size', 'image']
+    }
   },
   emits: ['onOverLimitHandler', 'update:modelValue', 'change', 'blur'],
   mounted() {
-    // Reset default styles for toolbar
-    this.$refs.toolbar.classList.remove("ql-toolbar");
-
     // Change default placeholder for link input
     const input = this.$refs.wrapper.querySelector("input[data-link]");
     input.dataset.link = "Enter Link";
@@ -370,12 +221,16 @@ export default {
         readOnly: this.readOnly ? this.readOnly : this.disable,
         enable: this.enable,
         modules: {
-          toolbar: {container: '#toolbar'},
+          toolbar: {
+              container: '#toolbar',
+              handlers: { 'image': this.imageButtonClickHandler }
+          },
           placeholder: {
             delimiters: ['{{', '}}'],
             placeholders: this.placeholders
           }
         },
+
       };
 
       return Object.assign(config, this.options);
@@ -385,16 +240,20 @@ export default {
         !!this.characterLimit && this.characterLength > this.characterLimit
       );
     },
+    uid() {
+      return Math.random().toString(36).substr(2, 9);
+    },
   },
   components: {
     QuillEditor,
     IbIconButton,
     IbAlert,
     IbCharacterCount,
+    Toolbar,
   },
 };
 </script>
 
-<style lang="scss">
-@import "./textEditor.scss";
+<style lang="scss" scoped>
+@use "./textEditor.scss" as *;
 </style>