@avakhula/ui 0.0.10

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

@@ -0,0 +1,111 @@
+export const BOLD = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.31836 14.9023V5.09961H9.88672C10.9805 5.09961 11.8213 5.30013 12.4092 5.70117C12.9971 6.10221 13.291 6.66732 13.291 7.39648C13.291 7.92513 13.111 8.3877 12.751 8.78418C12.3955 9.18066 11.9398 9.45638 11.3838 9.61133V9.63867C12.0811 9.72526 12.637 9.98275 13.0518 10.4111C13.471 10.8395 13.6807 11.3613 13.6807 11.9766C13.6807 12.8743 13.3594 13.5876 12.7168 14.1162C12.0742 14.6403 11.1969 14.9023 10.085 14.9023H6.31836ZM8.52637 6.72656V9.05078H9.49707C9.9528 9.05078 10.3105 8.94141 10.5703 8.72266C10.8346 8.49935 10.9668 8.19401 10.9668 7.80664C10.9668 7.08659 10.429 6.72656 9.35352 6.72656H8.52637ZM8.52637 10.6914V13.2754H9.72266C10.2331 13.2754 10.6318 13.1569 10.9189 12.9199C11.2106 12.6829 11.3564 12.3594 11.3564 11.9492C11.3564 11.5573 11.2129 11.2497 10.9258 11.0264C10.6432 10.8031 10.2467 10.6914 9.73633 10.6914H8.52637Z" class="fill" fill="#1A1A1A"/>
+</svg>
+`;
+
+export const ITALIC = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.54492 14.9023H8.36914L10.4404 5.09961H11.6299L9.54492 14.9023Z" class="fill" fill="#1A1A1A"/>
+</svg>
+`;
+
+export const UNDERLINE = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6475 10.7197C13.6475 13.4723 12.4056 14.8486 9.92188 14.8486C7.54297 14.8486 6.35352 13.5247 6.35352 10.877V4.88184H7.50195V10.8018C7.50195 12.8115 8.34961 13.8164 10.0449 13.8164C11.681 13.8164 12.499 12.8457 12.499 10.9043V4.88184H13.6475V10.7197Z" class="fill" fill="#1A1A1A"/>
+<path d="M5.19141 16.3047H14.8096V17.1182H5.19141V16.3047Z" class="fill" fill="#1A1A1A"/>
+</svg>
+`;
+
+export const STRIKE = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6668 9.99805L5.33594 9.99805" class="stroke" stroke="#1A1A1A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.9158 5.33398H8.83776C8.25237 5.33398 6.03696 5.3923 6.50351 7.9583" class="stroke" stroke="#1A1A1A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.43941 14.6624H10.5174C11.1028 14.6624 14.0882 14.953 12.3364 10.2886" class="stroke" stroke="#1A1A1A" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+export const LINK = `
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 11H4.5C3.70435 11 2.94129 10.6839 2.37868 10.1213C1.81607 9.55871 1.5 8.79565 1.5 8C1.5 7.20435 1.81607 6.44129 2.37868 5.87868C2.94129 5.31607 3.70435 5 4.5 5H6.5M9.5 5H11.5C12.2956 5 13.0587 5.31607 13.6213 5.87868C14.1839 6.44129 14.5 7.20435 14.5 8C14.5 8.79565 14.1839 9.55871 13.6213 10.1213C13.0587 10.6839 12.2956 11 11.5 11H9.5M5.10281 8H10.9597" class="stroke" stroke="#1A1A1A" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+`;
+
+export const CODE = `
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 11.5L1 8L5 4.5M11 11.5L15 8L11 4.5M9.5 3L6.5 13" class="stroke" stroke="#1A1A1A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+`;
+
+export const ALIGN_LEFT = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="14" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="3" y="7" width="10" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="3" y="11" width="14" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="3" y="15" width="10" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+</svg>
+
+`;
+
+export const ALIGN_CENTER = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="14" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="5" y="7" width="10" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="3" y="11" width="14" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="5" y="15" width="10" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+</svg>
+`;
+
+export const ALIGN_RIGHT = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="2" rx="1" transform="matrix(-1 0 0 1 17 3)" class="fill" fill="#1A1A1A"/>
+<rect width="10" height="2" rx="1" transform="matrix(-1 0 0 1 17 7)" class="fill" fill="#1A1A1A"/>
+<rect width="14" height="2" rx="1" transform="matrix(-1 0 0 1 17 11)" class="fill" fill="#1A1A1A"/>
+<rect width="10" height="2" rx="1" transform="matrix(-1 0 0 1 17 15)" class="fill" fill="#1A1A1A"/>
+</svg>
+
+`;
+
+export const ALIGN_JUSTIFY = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="14" height="2" rx="1" transform="matrix(-1 0 0 1 17 3)" class="fill" fill="#1A1A1A"/>
+<rect width="14" height="2" rx="1" transform="matrix(-1 0 0 1 17 7)" class="fill" fill="#1A1A1A"/>
+<rect width="14" height="2" rx="1" transform="matrix(-1 0 0 1 17 11)" class="fill" fill="#1A1A1A"/>
+<rect width="14" height="2" rx="1" transform="matrix(-1 0 0 1 17 15)" class="fill" fill="#1A1A1A"/>
+</svg>
+`;
+
+export const LIST_ORDERED = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.625 3.63672V6.5H3.00977V4.33203C2.97591 4.36198 2.93555 4.39062 2.88867 4.41797C2.8431 4.44401 2.79427 4.4681 2.74219 4.49023C2.6901 4.51107 2.63607 4.5293 2.58008 4.54492C2.52409 4.55924 2.46875 4.56966 2.41406 4.57617V4.05664C2.57422 4.00977 2.72526 3.94987 2.86719 3.87695C3.00911 3.80404 3.13737 3.72396 3.25195 3.63672H3.625Z" class="fill" fill="#1A1A1A"/>
+<path d="M2.83789 10.9883H4.02539V11.5H2.16211V11.2891C2.16211 11.1458 2.1862 11.0176 2.23438 10.9043C2.28255 10.7897 2.3431 10.6875 2.41602 10.5977C2.48893 10.5065 2.56836 10.4264 2.6543 10.3574C2.74154 10.2871 2.82422 10.224 2.90234 10.168C2.98438 10.1094 3.05599 10.0534 3.11719 10C3.17969 9.94661 3.23177 9.89388 3.27344 9.8418C3.31641 9.78841 3.34831 9.73503 3.36914 9.68164C3.38997 9.62695 3.40039 9.56901 3.40039 9.50781C3.40039 9.38802 3.36654 9.29753 3.29883 9.23633C3.23112 9.17513 3.1276 9.14453 2.98828 9.14453C2.7474 9.14453 2.51693 9.24023 2.29688 9.43164V8.88867C2.54036 8.73112 2.8151 8.65234 3.12109 8.65234C3.26302 8.65234 3.38997 8.67122 3.50195 8.70898C3.61523 8.74544 3.71094 8.79818 3.78906 8.86719C3.86719 8.9362 3.92643 9.02018 3.9668 9.11914C4.00846 9.2168 4.0293 9.32617 4.0293 9.44727C4.0293 9.57617 4.00911 9.69076 3.96875 9.79102C3.92969 9.89128 3.87695 9.98242 3.81055 10.0645C3.74544 10.1465 3.66992 10.222 3.58398 10.291C3.49805 10.3587 3.40885 10.4245 3.31641 10.4883C3.25391 10.5326 3.19336 10.5768 3.13477 10.6211C3.07747 10.6641 3.02669 10.707 2.98242 10.75C2.93815 10.7917 2.90299 10.8327 2.87695 10.873C2.85091 10.9134 2.83789 10.9518 2.83789 10.9883Z" class="fill" fill="#1A1A1A"/>
+<path d="M2.22852 16.4082V15.8711C2.41602 16.0078 2.63477 16.0762 2.88477 16.0762C3.04232 16.0762 3.16471 16.0423 3.25195 15.9746C3.34049 15.9069 3.38477 15.8125 3.38477 15.6914C3.38477 15.5664 3.33008 15.4701 3.2207 15.4023C3.11263 15.3346 2.96354 15.3008 2.77344 15.3008H2.51367V14.8281H2.75391C3.11849 14.8281 3.30078 14.707 3.30078 14.4648C3.30078 14.237 3.16081 14.123 2.88086 14.123C2.69336 14.123 2.51107 14.1836 2.33398 14.3047V13.8008C2.5306 13.7018 2.75977 13.6523 3.02148 13.6523C3.30794 13.6523 3.5306 13.7168 3.68945 13.8457C3.84961 13.9746 3.92969 14.1419 3.92969 14.3477C3.92969 14.7135 3.74414 14.9427 3.37305 15.0352V15.0449C3.57096 15.0697 3.72721 15.1419 3.8418 15.2617C3.95638 15.3802 4.01367 15.526 4.01367 15.6992C4.01367 15.9609 3.91797 16.168 3.72656 16.3203C3.53516 16.4727 3.27083 16.5488 2.93359 16.5488C2.64453 16.5488 2.40951 16.502 2.22852 16.4082Z" class="fill" fill="#1A1A1A"/>
+<rect x="7" y="4.5" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="7" y="9.5" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="7" y="14.5" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+</svg>
+`;
+
+export const LIST_BULLET = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6.5" y="4" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="6.5" y="9" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="6.5" y="14" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<circle cx="3.5" cy="15" r="1" class="fill" fill="#1A1A1A"/>
+<circle cx="3.5" cy="10" r="1" class="fill" fill="#1A1A1A"/>
+<circle cx="3.5" cy="5" r="1" class="fill" fill="#1A1A1A"/>
+</svg>
+`;
+
+export const LIST_ALPHABET = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.92383 6.5H3.33984V6.21289H3.33203C3.19792 6.43685 2.99935 6.54883 2.73633 6.54883C2.54232 6.54883 2.38932 6.49414 2.27734 6.38477C2.16667 6.27409 2.11133 6.12695 2.11133 5.94336C2.11133 5.55534 2.34115 5.33138 2.80078 5.27148L3.34375 5.19922C3.34375 4.98047 3.22526 4.87109 2.98828 4.87109C2.75 4.87109 2.52344 4.94206 2.30859 5.08398V4.61914C2.39453 4.57487 2.51172 4.53581 2.66016 4.50195C2.8099 4.4681 2.94596 4.45117 3.06836 4.45117C3.63867 4.45117 3.92383 4.73568 3.92383 5.30469V6.5ZM3.34375 5.6875V5.55273L2.98047 5.59961C2.77995 5.62565 2.67969 5.71615 2.67969 5.87109C2.67969 5.94141 2.70378 5.99935 2.75195 6.04492C2.80143 6.08919 2.86784 6.11133 2.95117 6.11133C3.06706 6.11133 3.16146 6.07161 3.23438 5.99219C3.30729 5.91146 3.34375 5.8099 3.34375 5.6875Z" class="fill" fill="#1A1A1A"/>
+<path d="M2.88477 11.2676H2.87695V11.5H2.25977V8.53906H2.87695V9.80078H2.88477C3.03711 9.56771 3.25391 9.45117 3.53516 9.45117C3.79297 9.45117 3.99154 9.53971 4.13086 9.7168C4.27018 9.89388 4.33984 10.1361 4.33984 10.4434C4.33984 10.7767 4.25846 11.0443 4.0957 11.2461C3.93294 11.4479 3.71549 11.5488 3.44336 11.5488C3.19727 11.5488 3.01107 11.4551 2.88477 11.2676ZM2.86719 10.4238V10.6289C2.86719 10.7578 2.9043 10.8646 2.97852 10.9492C3.05273 11.0339 3.14779 11.0762 3.26367 11.0762C3.4043 11.0762 3.51302 11.0221 3.58984 10.9141C3.66797 10.8047 3.70703 10.6504 3.70703 10.4512C3.70703 10.2858 3.67122 10.1569 3.59961 10.0645C3.5293 9.9707 3.42839 9.92383 3.29688 9.92383C3.17318 9.92383 3.07031 9.97005 2.98828 10.0625C2.90755 10.1549 2.86719 10.2754 2.86719 10.4238Z" class="fill" fill="#1A1A1A"/>
+<path d="M3.77539 16.4277C3.63607 16.5085 3.4349 16.5488 3.17188 16.5488C2.86458 16.5488 2.61589 16.4557 2.42578 16.2695C2.23568 16.0833 2.14062 15.8431 2.14062 15.5488C2.14062 15.209 2.24219 14.9414 2.44531 14.7461C2.64974 14.5495 2.92253 14.4512 3.26367 14.4512C3.49935 14.4512 3.66992 14.4824 3.77539 14.5449V15.0684C3.64648 14.972 3.5026 14.9238 3.34375 14.9238C3.16667 14.9238 3.02604 14.9759 2.92188 15.0801C2.81901 15.1829 2.76758 15.3255 2.76758 15.5078C2.76758 15.6849 2.81706 15.8242 2.91602 15.9258C3.01497 16.026 3.15104 16.0762 3.32422 16.0762C3.47786 16.0762 3.62826 16.028 3.77539 15.9316V16.4277Z" class="fill" fill="#1A1A1A"/>
+<rect x="7" y="4.5" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="7" y="9.5" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+<rect x="7" y="14.5" width="11" height="2" rx="1" class="fill" fill="#1A1A1A"/>
+</svg>
+`;

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

@@ -0,0 +1,43 @@
+import { Quill } from "@vueup/vue-quill";
+
+const List = Quill.import("formats/list");
+const ListItem = Quill.import("formats/list/item");
+const Parchment = Quill.import("parchment");
+
+class AlphabetListItem extends ListItem {
+  format(name, value) {
+    if (name === AlphabetList.blotName && !value) {
+      this.replaceWith(Parchment.create(this.statics.scope));
+    } else {
+      super.format(name, value);
+    }
+  }
+
+  clone() {
+    const clone = super.clone();
+    clone.domNode.classList.remove("checked");
+    return clone;
+  }
+}
+
+AlphabetListItem.blotName = "alphabet-list-item";
+AlphabetListItem.tagName = "LI";
+
+class AlphabetList extends List {
+  static create() {
+    const node = super.create("bullet");
+    node.setAttribute("type", "a");
+    return node;
+  }
+  static formats() {
+    return "bullet";
+  }
+}
+
+AlphabetList.blotName = "alphabet-list";
+AlphabetList.tagName = "OL";
+AlphabetList.className = "alphabet-list";
+AlphabetList.defaultChild = "alphabet-list-item";
+AlphabetList.allowedChildren = [AlphabetListItem];
+
+export { AlphabetList, AlphabetListItem };

package/src/components/Form/TextEditor/readme.mdx

@@ -0,0 +1,59 @@
+# IbTextEditor
+
+import { Story, Canvas } from "@storybook/addon-docs";
+
+Text inputs enable users to enter free-form text data. The type of text field used should reflect the length of the content you expect the user to enter. The default text input is for short, one-line content, whereas text area is for longer, multi-line entries.
+
+### When to use:
+
+- A user needs to input unique information that cannot be predicted with a preset of options.
+- A user needs to input memorable data that can be entered more quickly in a free-hand format versus a more complex control.
+
+### When not to use:
+
+- If a user can only enter an option from a predefined list then avoid using a free-form text input as it is likely to result in an error. Consider using a selection control such as a select dropdown, or radio button group instead.
+
+<Canvas>
+  <Story id="form-text-editor--default" />
+</Canvas>
+
+### Props
+
+| Prop name                  | Type             | Default | Description                                                                                                                                                  |
+| -------------------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| placeholder                | String           | ''      | The placeholder text to display in the text editor when no content is present.                                                                               |
+| modelValue                 | String           | ''      | The value of the content to display in the text editor. This prop should be used with v-model directive for two-way data binding.                            |
+| content                    | String           | ''      | Content for the editor                                                                                                                                       |
+| readOnly                   | Boolean          | false   | If true, the editor won't allow changing its contents.                                                                                                       |
+| enable                     | Boolean          | true    | Set ability for user to edit, via input devices like the mouse or keyboard.                                                                                  |
+| modules                    | Object or Array  | {}      | List of custom modules.                                                                                                                                      |
+| options                    | Object           | {}      | Config.                                                                                                                                                      |
+| error                      | Boolean          | false   | Whether the Text editor has error state                                                                                                                      |
+| errorMessage               | String           | ''      | Show error message and Text editor has error state                                                                                                           |
+| disable                    | Boolean          | false   | Whether the Text editor is disabled                                                                                                                          |
+| characterLimit             | String or Number | ''      | Sets the character limit for the Text editor. If set, the component will display the character count and limit the user Text editor to the specified amount. |
+| characterLimitErrorMessage | String or Number | ''      | Show error message to be displayed when the user has exceeded the character limit.                                                                           |
+| height                     | String           | ''      | Initial height.                                                                                                                                              |
+
+### Events
+
+| Event name | Parameters | Description                                                                                                  |
+| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------ |
+| change     | string     | This event is emitted when the content of the text editor changes. The new content is passed as a parameter. |
+| blur       | string     | The event emitted when the input field loses focus. The new content is passed as a parameter.                |
+
+### Slots
+
+This component don't support slots
+
+### Used in form group
+
+<Canvas>
+  <Story id="form-text-editor--width-form-group" />
+</Canvas>
+
+### Error state
+
+<Canvas>
+  <Story id="form-text-editor--width-form-group" />
+</Canvas>