@avakhula/ui 0.1.13 → 0.1.15

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

@@ -8,12 +8,13 @@
     v-model="phone"
     v-bind="$attrs"
     @country-changed="countryChanged"
-    :input-options="{ name: inputName, id: inputName }"
+    :input-options="{ name: inputName, id: inputName, autocomplete: 'off' }"
     :auto-default-country="autoDefaultCountry"
-    :dropdown-options="{ showSearchBox: true, showFlags: true }"
+    :dropdown-options="{ showSearchBox: true, showFlags: true, tabindex: 0 }"
     :defaultCountry="defaultCountry"
     :ignoredCountries="ignoredCountries"
-    :class="{ error: error || errorMessage.length }"
+    :class="{ error: error || errorMessage.length, disabled }"
+    :disabled="disabled"
     style-classes="ib-phone-input"
     ref="vueTel"
   >
@@ -24,14 +25,19 @@
 </template>
 
 <script>
-import { VueTelInput } from "vue-tel-input";
 import IbIcon from "../../Icon.vue";
 import IbAlert from "../../Alert/Alert.vue";
 import { OutsideDirective as Outside } from "../../../directives/outside/outside";
+import { VueTelInput } from 'vue-tel-input';
+import 'vue-tel-input/vue-tel-input.css'
 
 export default {
   directives: { Outside },
   props: {
+    modelValue: {
+      type: String
+    },
+    value: String,
     inputName: {
       type: String,
       default: "phone",
@@ -40,10 +46,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    value: {
-      type: String,
-      default: "",
-    },
     ignoredCountries: {
       type: Array,
       default: () => [],
@@ -56,7 +58,12 @@ export default {
       type: String,
       default: "",
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    }
   },
+  emits: ['update:modelValue', 'onReady'],
   components: {
     VueTelInput,
     IbAlert,
@@ -65,16 +72,24 @@ export default {
   data() {
     return {
       vueTel: null,
-      phone: "",
       dialCode: "",
       defaultCountry: "US",
+      allowChange: false
     };
   },
   mounted() {
     this.vueTel = this.$refs.vueTel;
 
-    if (this.value) {
-      this.phone = this.value[0] === "+" ? this.value : "+" + this.value;
+    this.$emit('onReady');
+  },
+  computed: {
+    phone: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:modelValue', value)
+      }
     }
   },
   methods: {
@@ -102,4 +117,3 @@ export default {
 <style lang="scss">
 @import "./phoneInput.scss";
 </style>
-<style src="vue-tel-input/vue-tel-input.css"></style>

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

@@ -43,6 +43,39 @@ $dropdown-item-selected-border-color: $blue-900;
     }
   }
 
+  &.disabled {
+    .vti__input {
+      background-color: $gray-100 !important;
+      color: $neutral-500 !important;
+      border-color: $input-border-color !important;
+
+      &:focus {
+        outline: none !important;
+        border-bottom: 1px solid $input-border-color !important;
+        border-radius: 4px 4px 0 0 !important;
+      }
+    }
+
+    .vti__dropdown {
+        background-color: $gray-100 !important;
+        border-color: $input-border-color !important;
+        cursor: not-allowed;
+
+        .vti__selection {
+            filter:grayscale(1);
+        }
+
+        &:focus {
+          .vti__selection {
+            outline: none !important;
+            background-color: $gray-100 !important;
+            border-bottom: 1px solid $input-border-color !important;
+            border-radius: 4px 4px 0 0 !important;
+          }
+        }
+    }
+  }
+
   .vti__dropdown {
     padding: 0;
     border-radius: 4px 4px 0 0;
@@ -100,17 +133,16 @@ $dropdown-item-selected-border-color: $blue-900;
     .vti__input {
       background-color: transparent;
       width: 100%;
-      margin: 0;
-      margin-bottom: 6.5px;
-      border-left: 0px;
-      border-right: 0px;
-      border-top: 0px;
+      margin: 0 0 6.5px;
+      border-left: 0;
+      border-right: 0;
+      border-top: 0;
       border-radius: 0;
 
       &::placeholder {
         @include Ib-H4-regular-italic;
         color: $input-placeholder-color;
-      }  
+      }
 
       &:focus {
         border-radius: 0;

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

@@ -3,19 +3,17 @@
     role="radio"
     :class="classes"
     :for="id"
-    :aria-checked="checked"
-    @click.prevent="onClick"
+    :aria-checked="isChecked"
   >
     <input
       type="radio"
       :name="name"
       :id="id"
       :value="value"
-      :checked="checked"
+      :checked="isChecked"
       :disabled="disabled"
       ref="radio"
-      @input.stop
-      @change="onChange"
+      @change="checkHandler"
     />
     <span class="ib-radio-body" :class="{ 'without-text': !label?.length }">
       <span class="ib-radio-input"></span>
@@ -29,11 +27,8 @@ import generateUID from "../../../helpers/generateUID";
 
 export default {
   name: "IbRadio",
-  model: {
-    prop: "isChecked",
-    event: "input",
-  },
   props: {
+    modelValue: '',
     label: String,
     error: {
       type: Boolean,
@@ -49,63 +44,40 @@ export default {
       },
     },
     value: {
-      type: String,
+      type: [String, Number],
       required: true,
     },
-    isChecked: {
-      type: Boolean,
-      default: false,
-    },
     disabled: {
       type: Boolean,
       default: false,
     },
   },
-  watch: {
-    isChecked(value) {
-      this.checked = value;
-    },
-  },
-  mounted() {
-    this.$globalEvents.$on(`radio:update:${this.name}`, (uid) => {
-      if (this.uid !== uid) {
-        this.checked = false;
-      }
-    });
-  },
+  emits: ['update:modelValue'],
   data() {
     return {
-      checked: this.isChecked,
       uid: generateUID(),
     };
   },
+  mounted() {
+    this.checked = this.isChecked;
+  },
   methods: {
-    onClick() {
-      if (!this.disabled) {
-        this.checked = !this.checked;
-        this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);
-        this.$emit("input", this.checked);
-        this.$emit("change", this.checked);
-      }
-    },
-    onChange() {
-      if (!this.disabled) {
-        this.checked = !this.checked;
-        this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);
-        this.$emit("change", this.checked);
-        this.$emit("input", this.checked);
-      }
-    },
+    checkHandler() {
+      this.$emit('update:modelValue', this.value)
+    }
   },
   computed: {
     classes() {
       return {
         "ib-radio": true,
         "has-error": this.error,
-        "radio-filled": this.checked,
+        "radio-filled": this.isChecked,
         "radio-disabled": this.disabled,
       };
     },
+    isChecked() {
+      return this.modelValue === this.value
+    }
   },
 };
 </script>

package/src/components/Form/Radio/radio.scss

@@ -30,12 +30,15 @@ $radio-border-filled-disabled: $neutral-500;
 .ib-radio {
   display: inline-flex;
   cursor: pointer;
+  position: relative;
 
   input {
     opacity: 0;
     position: absolute;
-    top: -100%;
-    right: -100%;
+    width: 1px;
+    height: 1px;
+    z-index: -1;
+
 
     &:focus + .ib-radio-body {
       border-radius: 4px;

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

@@ -7,6 +7,7 @@
       disable: disable,
     }"
   >
+
     <ib-character-count
       v-if="characterLimit"
       :character-limit="characterLimit"
@@ -23,18 +24,19 @@
       {{ characterLimitErrorMessage }}
     </ib-alert>
 
+    <input :name="name" type="hidden" :disabled="disable" :value="data">
+
     <div class="ib-text-editor-wrapper" :class="{ disable: disable }">
       <div
         class="ib-text-editor"
-        :style="{ height: height ? height + 'px' : '' }"
         ref="wrapper"
       >
         <QuillEditor
+          aria-label="text-editor"
           @textChange="onChange"
           @blur="onBlur"
           @focus="onFocus"
           ref="quill"
-          toolbar="#toolbar"
           v-model:content="data"
           contentType="html"
           :options="config"
@@ -42,8 +44,17 @@
         ></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">
-          <select class="ql-header">
+          <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>
@@ -56,34 +67,42 @@
 
         <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">
-          <select class="ql-background"></select>
-          <select class="ql-color"></select>
+          <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>
@@ -91,20 +110,24 @@
 
         <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"
@@ -113,17 +136,20 @@
 
         <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>
@@ -134,29 +160,43 @@
 </template>
 
 <script>
-import { QuillEditor, Quill } from "@vueup/vue-quill";
+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 {AlphabetList, AlphabetListItem} from "./plugins/alphabetList";
+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,
-  ITALIC,
-  UNDERLINE,
-  STRIKE,
   CODE,
+  ITALIC,
   LINK,
-  ALIGN_LEFT,
-  ALIGN_CENTER,
-  ALIGN_RIGHT,
-  ALIGN_JUSTIFY,
-  LIST_ORDERED,
-  LIST_BULLET,
   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;
@@ -177,16 +217,29 @@ Quill.register({
   "formats/alphabet-list/item": AlphabetListItem,
 });
 
+Quill.register('modules/placeholder', getPlaceholderModule(Quill, {
+  className: 'ql-placeholder-content'
+}))
+
+
 Quill.register(icons);
 Quill.debug("error");
 
 export default {
   name: "IbTextEditor",
   props: {
+    name: {
+      type: String,
+      required: true
+    },
     placeholder: {
       type: String,
       default: "",
     },
+    placeholders: {
+      type: Array,
+      default: () => []
+    },
     modelValue: {
       type: String,
     },
@@ -230,10 +283,8 @@ export default {
       type: String,
       default: "",
     },
-    height: {
-      type: String,
-    },
   },
+  emits: ['onOverLimitHandler', 'update:modelValue', 'change', 'blur'],
   mounted() {
     // Reset default styles for toolbar
     this.$refs.toolbar.classList.remove("ql-toolbar");
@@ -256,24 +307,61 @@ export default {
       this.data = val;
     },
     data(val) {
-      this.$emit("update:modelValue", val);
+      const cleanedData = this.cleanPlaceholderSpans(val);
+      this.$emit("update:modelValue", cleanedData);
     },
+    characterOverLimit(value) {
+      this.$emit('onOverLimitHandler', value);
+    }
   },
   methods: {
     onChange() {
+      let data = this.cleanPlaceholderSpans(this.data);
+      this.data = this.patchListStylePosition(data);
+
       this.updateCharacterLength();
       this.$emit("change", this.data);
     },
     onBlur(instance) {
-      this.$emit("blur", this.data, instance);
+      this.$emit("blur", this.cleanPlaceholderSpans(this.data), instance);
       this.isFocus = false;
     },
     onFocus() {
       this.isFocus = true;
     },
     updateCharacterLength() {
-      this.characterLength = this.$refs.quill.getText().length - 1;
+      this.characterLength = stripHtml(this.data).length;
     },
+    cleanPlaceholderSpans(html) {
+      if (!html) return html;
+
+      let prevHtml;
+      do {
+        prevHtml = html;
+        html = html.replace(/<span contenteditable="false">([\s\S]*?)<\/span>/g, (_, content) => {
+          return content.replace(/[\u200B-\u200F\uFEFF]/g, '');
+        });
+      } while (prevHtml !== html);
+
+      return html;
+    },
+    patchListStylePosition(html) {
+      const tmp = document.createElement('div');
+      tmp.innerHTML = html;
+
+      tmp.querySelectorAll('ul[style*="text-align"], ol[style*="text-align"], li[style*="text-align"]').forEach(el => {
+        const style = el.getAttribute('style') ?? '';
+
+        if (!/list-style-position\s*:\s*inside/i.test(style)) {
+          const newStyle =
+            (style.trim().endsWith(';') || style.trim() === '' ? style : style + ';') +
+            ' list-style-position: inside;';
+          el.setAttribute('style', newStyle);
+        }
+      });
+
+      return tmp.innerHTML;
+    }
   },
   computed: {
     config() {
@@ -281,6 +369,13 @@ export default {
         placeholder: this.data.length ? "" : this.placeholder,
         readOnly: this.readOnly ? this.readOnly : this.disable,
         enable: this.enable,
+        modules: {
+          toolbar: {container: '#toolbar'},
+          placeholder: {
+            delimiters: ['{{', '}}'],
+            placeholders: this.placeholders
+          }
+        },
       };
 
       return Object.assign(config, this.options);