@madgex/design-system-ce 5.1.2 → 5.2.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.2.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.1.2&sourceBranch=refs/tags/@madgex/design-system-ce@5.2.0) (2022-08-18)
+
+
+### Features
+
+* add text editor (wip) ([1d424b3](https://github.com/projects/MDS/repos/mds-branding/commits/1d424b399f1ce71a1db99b644dc72aa650eee1f0))
+* add text editor (wip) ([804cabe](https://github.com/projects/MDS/repos/mds-branding/commits/804cabee541b65e8943a3e29b9c6108313a3400a))
+* manage tabindex in toolbar, add examples and documentation ([74e1442](https://github.com/projects/MDS/repos/mds-branding/commits/74e1442437e9f27580b9f3f56d2c37a3874e98f6))
+* refactoring toolbar, adding keyboard interaction and fixing icons ([b4c5121](https://github.com/projects/MDS/repos/mds-branding/commits/b4c5121ddfd1d1323ac3fb3d87ca52b85470768a))
+
+
+### Bug Fixes
+
+* adding reusable icon vue component + svgs for editor menu ([f8bfaae](https://github.com/projects/MDS/repos/mds-branding/commits/f8bfaae311d607ce1ef15cf65f857b442d1fcbc5))
+* export each custom element separately ([da9f94d](https://github.com/projects/MDS/repos/mds-branding/commits/da9f94de94c6612c8a645855f9e32a6abeee9194))
+* move aria-pressed to toolbar instead of button ([5114f9d](https://github.com/projects/MDS/repos/mds-branding/commits/5114f9dd829ca10a5dbfd88a5784163575c2ac12))
+* removed the disabled attribute to only aria-disabled to avoid focus issue ([2076227](https://github.com/projects/MDS/repos/mds-branding/commits/2076227c8a98c5eb359320271ccf5dc6e6a5bded))
+* trying to separate the text editor from the main js ([db089b8](https://github.com/projects/MDS/repos/mds-branding/commits/db089b8779bbbf0d4a7c1bfbb2de6c9fc20d947d))
+* update filenames ([7ad354f](https://github.com/projects/MDS/repos/mds-branding/commits/7ad354fb77629e738ca55a00f71dc87f365382ae))
+
+
+
 ## [5.1.2](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.1.1&sourceBranch=refs/tags/@madgex/design-system-ce@5.1.2) (2022-07-12)
 
 **Note:** Version bump only for package @madgex/design-system-ce

package/components/internals/MdsIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <span>
+    <svg aria-hidden="true" focusable="false" class="mds-icon" :class="`mds-icon--${iconName} ${classes}`">
+      <use :href="`${iconPath}#icon-${iconName}`" />
+    </svg>
+    <span v-if="visuallyHiddenLabel" class="mds-visually-hidden">{{ visuallyHiddenLabel }}</span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'MdsIcon',
+  props: {
+    iconName: {
+      type: String,
+      default: '',
+    },
+    classes: {
+      type: String,
+      default: '',
+    },
+    visuallyHiddenLabel: {
+      type: String,
+      default: '',
+    },
+  },
+  inject: ['iconPath'],
+};
+</script>

package/components/text-editor/TextEditor.ce.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <TextEditorContent v-model="content" />
+    <input type="hidden" :name="editorid" :value="content" />
+  </div>
+</template>
+
+<script>
+import TextEditorContent from './TextEditorContent.vue';
+
+export default {
+  name: 'TextEditor',
+  components: {
+    TextEditorContent,
+  },
+  props: {
+    editorid: {
+      type: String,
+      required: true,
+    },
+    iconpath: {
+      type: String,
+      default: '/assets/icons.svg',
+    },
+    menuButtons: {
+      type: String,
+      default: '',
+    },
+    i18n: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      content: this.value,
+    };
+  },
+  computed: {
+    customMenuButtons() {
+      return this.menuButtons ? JSON.parse(this.menuButtons) : null;
+    },
+    i18nText() {
+      return this.i18n
+        ? JSON.parse(this.i18n)
+        : {
+            toolbarLabel: 'Text formatting',
+          };
+    },
+  },
+  provide() {
+    return {
+      iconPath: this.iconpath,
+      id: this.editorid,
+      customMenuButtons: this.customMenuButtons,
+      i18nText: this.i18nText,
+    };
+  },
+  mounted() {
+    const fallback = document.querySelector(`#text-editor-fallback-${this.editorid}`);
+    if (fallback) fallback.remove();
+  },
+};
+</script>

package/components/text-editor/TextEditorButton.vue

@@ -0,0 +1,60 @@
+<template>
+  <button
+    type="button"
+    :title="label"
+    :aria-label="label"
+    class="mds-text-editor__button"
+    :class="{ 'mds-text-editor__button--active': isActive }"
+    :tabindex="tabindex"
+    :aria-disabled="disabled"
+    :aria-pressed="ariaPressed"
+    @focus="$emit('updateTabIndex', id)"
+  >
+    <MdsIcon :icon-name="iconName" />
+  </button>
+</template>
+
+<script>
+import MdsIcon from '../internals/MdsIcon.vue';
+export default {
+  name: 'TextEditorButton',
+  components: {
+    MdsIcon,
+  },
+  emits: ['updateTabIndex'],
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    iconName: {
+      type: String,
+      default: '',
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+    initialTabindex: {
+      type: Number,
+      default: -1,
+    },
+    ariaPressed: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      tabindex: this.initialTabindex,
+    };
+  },
+};
+</script>

package/components/text-editor/TextEditorContent.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="mds-text-editor" v-if="editor">
+    <TextEditorToolbar :editor="editor" />
+    <EditorContent :editor="editor" />
+  </div>
+</template>
+
+<script>
+import StarterKit from '@tiptap/starter-kit';
+import { Editor, EditorContent } from '@tiptap/vue-3';
+import TextEditorToolbar from './TextEditorToolbar.vue';
+
+export default {
+  name: 'TextEditorContent',
+  components: {
+    EditorContent,
+    TextEditorToolbar,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  inject: ['id'],
+
+  emits: ['update:modelValue'],
+
+  data() {
+    return {
+      editor: null,
+    };
+  },
+
+  watch: {
+    modelValue(value) {
+      const isSame = this.editor.getHTML() === value;
+
+      if (isSame) {
+        return;
+      }
+
+      this.editor.commands.setContent(value, false);
+    },
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [StarterKit],
+      editorProps: {
+        attributes: {
+          class: 'mds-text-editor__content mds-edited-text',
+          id: this.id,
+          role: 'textbox',
+          [`aria-labelledby`]: `text-editor-label-${this.id}`,
+        },
+      },
+      content: this.modelValue,
+      onUpdate: () => {
+        this.$emit('update:modelValue', this.editor.getHTML());
+      },
+    });
+  },
+
+  beforeUnmount() {
+    this.editor.destroy();
+  },
+};
+</script>

package/components/text-editor/TextEditorToolbar.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="mds-text-editor__menu" role="toolbar" :aria-label="i18nText.toolbarLabel" :aria-controls="id">
+    <TextEditorButton
+      ref="menuButton"
+      v-for="button in menuButtons"
+      :key="button.id"
+      :id="button.id"
+      :label="button.label"
+      :icon-name="button.iconName"
+      :isActive="button.isActive?.(editor)"
+      :disabled="button.isDisabled?.(editor)"
+      :initialTabindex="firstFocusableButton.id === button.id ? 0 : -1"
+      :aria-pressed="button.id === 'undo' || button.id === 'redo' ? null : button.isActive?.(editor)"
+      @click="button.onClick(editor)"
+      @keyup.left="setFocusToSibling('previous', $event)"
+      @keyup.up="setFocusToSibling('previous', $event)"
+      @keyup.right="setFocusToSibling('next', $event)"
+      @keyup.down="setFocusToSibling('next', $event)"
+      @update-tab-index="updateTabIndex"
+    />
+  </div>
+</template>
+
+<script>
+import TextEditorButton from './TextEditorButton.vue';
+
+export default {
+  name: 'TextEditorToolbar',
+
+  components: {
+    TextEditorButton,
+  },
+
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  inject: ['id', 'customMenuButtons', 'i18nText'],
+
+  data() {
+    return {
+      defaultMenuButtons: [
+        {
+          id: 'bold',
+          label: 'Bold',
+          iconName: 'text-bold',
+          onClick: (editor) => editor.commands.toggleBold(),
+          isActive: (editor) => editor.isActive('bold'),
+        },
+        {
+          id: 'italic',
+          label: 'Italic',
+          iconName: 'text-italic',
+          onClick: (editor) => editor.commands.toggleItalic(),
+          isActive: (editor) => editor.isActive('italic'),
+        },
+        {
+          id: 'strike',
+          label: 'Strike',
+          iconName: 'text-strike-through',
+          onClick: (editor) => editor.commands.toggleStrike(),
+          isActive: (editor) => editor.isActive('strike'),
+        },
+        {
+          id: 'bulletList',
+          label: 'Bullet list',
+          iconName: 'list-bullets',
+          onClick: (editor) => editor.commands.toggleBulletList(),
+          isActive: (editor) => editor.isActive('bulletList'),
+        },
+        {
+          id: 'orderedList',
+          label: 'Ordered list',
+          iconName: 'list-numbers',
+          onClick: (editor) => editor.commands.toggleOrderedList(),
+          isActive: (editor) => editor.isActive('orderedList'),
+        },
+        {
+          id: 'undo',
+          label: 'Undo',
+          iconName: 'undo',
+          onClick: (editor) => editor.commands.undo(),
+          isDisabled: (editor) => !editor.can().undo(),
+        },
+        {
+          id: 'redo',
+          label: 'Redo',
+          iconName: 'redo',
+          onClick: (editor) => editor.commands.redo(),
+          isDisabled: (editor) => !editor.can().redo(),
+        },
+      ],
+    };
+  },
+
+  computed: {
+    menuButtons() {
+      if (this.customMenuButtons?.length) {
+        const toolbar = [];
+        this.customMenuButtons.forEach((customBtn) => {
+          const defaultButton = this.defaultMenuButtons.find((defaultBtn) => defaultBtn.id === customBtn.id);
+          toolbar.push({
+            ...defaultButton,
+            ...customBtn,
+          });
+        });
+        return toolbar;
+      }
+      return this.defaultMenuButtons;
+    },
+    firstFocusableButton() {
+      return this.menuButtons.find((button) => !button.isDisabled?.(this.editor));
+    },
+  },
+
+  methods: {
+    findSiblings(currentElement, position) {
+      let sibling = position === 'previous' ? currentElement.previousElementSibling : currentElement.nextElementSibling;
+
+      if (sibling?.hasAttribute('disabled')) {
+        sibling = this.findSiblings(sibling, position);
+      }
+      return sibling;
+    },
+    setFocusToSibling(position, event) {
+      const element = this.findSiblings(event.target, position);
+      if (element) {
+        element.focus();
+      }
+    },
+    updateTabIndex(buttonId) {
+      // if the id of the button is not passed we get the first focusable button from the list instead
+      if (!buttonId) {
+        buttonId = this.firstFocusableButton.id;
+      }
+      this.$refs.menuButton.forEach((button) => {
+        if (button.id === buttonId) {
+          button.tabindex = 0;
+        } else {
+          button.tabindex = -1;
+        }
+      });
+    },
+  },
+};
+</script>

package/custom-elements/mds-combobox.js

@@ -0,0 +1,13 @@
+import '@ungap/custom-elements';
+/**
+ * We're using a modified `defineCustomElement` where we can choose not to use shadowDom
+ * shadowDom prevents access to external CSS, which is how design-system css works!
+ * https://github.com/vuejs/core/issues/4314#issuecomment-1021393430
+ */
+import { defineCustomElement } from '../temp-define-custom-element';
+// --- Components ---
+import Combobox from '../components/combobox/Combobox.ce.vue';
+
+const MdsCombobox = defineCustomElement(Combobox, { shadowRoot: false });
+
+export default MdsCombobox;

package/custom-elements/mds-text-editor.js

@@ -0,0 +1,12 @@
+import '@ungap/custom-elements';
+/**
+ * We're using a modified `defineCustomElement` where we can choose not to use shadowDom
+ * shadowDom prevents access to external CSS, which is how design-system css works!
+ * https://github.com/vuejs/core/issues/4314#issuecomment-1021393430
+ */
+import { defineCustomElement } from '../temp-define-custom-element';
+import TextEditor from '../components/text-editor/TextEditor.ce.vue';
+
+const MdsTextEditor = defineCustomElement(TextEditor, { shadowRoot: false });
+
+export default MdsTextEditor;

package/dist/custom-elements/mds-combobox.js

@@ -0,0 +1 @@
+import{_ as h,o as a,c as l,a as c,w as r,t as m,b as v,r as I,n as g,d as p,e as x,f as _,g as C,h as B,F as k,i as w,j as L}from"../plugin-vue_export-helper.js";const V={name:"ComboboxClear",inject:["iconPath","clearInput"]},S=["aria-label","title"],T={"aria-hidden":"true",focusable:"false",class:"mds-icon mds-icon--close mds-icon--sm"},M=["href"];function E(t,i,n,u,o,e){return a(),l("button",{class:"mds-combobox__clear mds-button mds-button--plain",type:"button",onClick:i[0]||(i[0]=d=>t.$emit("clear",d)),onKeydown:i[1]||(i[1]=r(d=>t.$emit("clear",d),["enter"])),"aria-label":e.clearInput,title:e.clearInput},[(a(),l("svg",T,[c("use",{href:`${e.iconPath}#icon-close`},null,8,M)]))],40,S)}var H=h(V,[["render",E]]);const K={name:"ListBox",props:{hidden:{type:Boolean,default:!0},isLoading:{type:Boolean,default:!0},comboboxid:{type:String,required:!0}},inject:["iconPath","loadingText"]},F=["aria-labelledby","hidden"],A={key:0,class:"mds-combobox-loading"},q={"aria-hidden":"true",focusable:"true",class:"mds-icon mds-icon--spinner mds-icon--after"},G=["href"],P={class:"mds-visually-hidden"};function j(t,i,n,u,o,e){return a(),l("ul",{class:"mds-combobox__listbox",role:"listbox","aria-labelledby":`${n.comboboxid}-label`,hidden:n.hidden},[n.isLoading?(a(),l("li",A,[(a(),l("svg",q,[c("use",{href:`${e.iconPath}#icon-spinner`},null,8,G)])),c("span",P,m(e.loadingText),1)])):v("",!0),I(t.$slots,"default")],8,F)}var N=h(K,[["render",j]]);const D={name:"ListBoxOption",props:{option:{type:Object,required:!0},focused:{type:Boolean,default:!1},searchValue:{type:String,default:""}},watch:{searchValue(t){return t},focused(t){t&&this.$refs.listItem.scrollIntoView(!1)}},methods:{highlightOption(){return this.option.label.replace(new RegExp(this.searchValue,"gi"),i=>`<span class="mds-combobox__option--marked">${i}</span>`)}}},R=["aria-selected","innerHTML"];function U(t,i,n,u,o,e){return a(),l("li",{ref:"listItem",class:g(["mds-combobox__option",{"mds-combobox__option--focused":n.focused}]),role:"option","aria-selected":n.focused.toString(),onMousedown:i[0]||(i[0]=d=>t.$emit("mousedown",d)),innerHTML:e.highlightOption()},null,42,R)}var $=h(D,[["render",U]]);const z={name:"Combobox",components:{ComboboxClear:H,ListBox:N,ListBoxOption:$},emits:["search","select-option","clear-all"],props:{comboboxid:{type:String,required:!0},placeholder:{type:String,default:""},name:{type:[String,Boolean],default:!1},value:{type:String,default:""},options:{type:Array,default:()=>[]},filterOptions:{type:Boolean,default:!0},iconpath:{type:String,default:"/assets/icons.svg"},dataAriaInvalid:{type:String,default:""},i18n:{type:String,default:""}},data(){return{expanded:!1,selected:null,chosen:null,searchValue:this.$props.value,resultCountMessage:null}},provide(){return{iconPath:this.iconpath,loadingText:this.i18nText.loadingText,clearInput:this.i18nText.clearInput}},mounted(){var n,u,o,e;const t=(u=(n=this.$el.parentElement)==null?void 0:n.parentElement)==null?void 0:u.querySelector(".mds-form-element__fallback input"),i=(e=(o=this.$el.parentElement)==null?void 0:o.parentElement)==null?void 0:e.querySelector(".mds-form-element__fallback select");t&&t.remove(),i&&i.removeAttribute("id")},computed:{inputValue(){return this.chosenOption?this.chosenOption.label:this.searchValue},selectedOption:{get(){return this.selected},set(t){this.selected=t}},chosenOption:{get(){return this.chosen},set(t){this.chosen=t,this.selectedOption=t,this.$emit("select-option",this.chosen)}},visibleOptions(){return this.filterOptions?this.options.filter(t=>t.label.toLowerCase().includes(this.searchValue.toLowerCase())):this.options},listBoxId(){return`${this.comboboxid}-listbox`},optionId(){return`${this.comboboxid}-option`},describedBy(){return`${this.comboboxid}-assistiveHint`},isLoading(){return this.options.length===0&&this.expanded},selectedOptionId(){const t=this.visibleOptions.indexOf(this.selectedOption);if(t>-1)return`${this.optionId}-${t}`},listBoxHidden(){return!this.expanded},lastOptionIndex(){return this.visibleOptions.length-1},ariaExpanded(){return this.expanded?"true":"false"},ariaInvalid(){return this.dataAriaInvalid?"true":"false"},i18nText(){return this.i18n?JSON.parse(this.i18n):{loadingText:"Loading",describedByText:"When autocomplete results are available, use up and down arrows to review and enter to select.",resultsMessage:"{count} result available",resultsMessage_plural:"{count} results available",clearInput:"clear input"}}},methods:{makeActive(){this.expanded=!0},makeInactive(){this.expanded=!1},handleInput(t){this.chosenOption=null,this.searchValue=t.target?t.target.value:"",this.handleChange(),this.$emit("search",this.searchValue),this.visibleOptions.length>0&&this.updateCount()},handleChange(){this.searchValue.length===0&&this.clearField(),this.searchValue.length>1?(this.makeActive(),this.updateCount()):this.makeInactive()},handleFocus(){this.handleChange(),this.visibleOptions.length>1&&this.updateCount()},handleClear(){this.clearField(),this.$refs.comboInput.focus()},clearField(){this.searchValue="",this.chosenOption=null,this.$emit("clear-all")},clickOption(t=this.selectedOption){this.chosenOption=t,this.makeInactive()},chooseOption(){this.chosenOption=this.selectedOption,this.makeInactive(),this.clearCount()},hiddenGuard(t){this.listBoxHidden||t.call(this)},onInputBlur(){this.makeInactive(),this.clearCount()},onKeyDown(){if(this.selectedOption){const t=this.visibleOptions.findIndex(n=>n.value===this.selectedOption.value),i=t===this.lastOptionIndex?t:t+1;this.selectedOption=this.visibleOptions[i]}else[this.selectedOption]=this.visibleOptions},onKeyUp(){if(this.selectedOption){const t=this.visibleOptions.findIndex(n=>n.value===this.selectedOption.value),i=t===0?t:t-1;this.selectedOption=this.visibleOptions[i]}else this.selectedOption=this.visibleOptions[this.lastOptionIndex]},onKeyHome(){[this.selectedOption]=this.visibleOptions},onKeyEnd(){this.selectedOption=this.visibleOptions[this.lastOptionIndex]},updateCount(){this.clearCount(),setTimeout(()=>{const t=this.visibleOptions.length===1?this.i18nText.resultsMessage:this.i18nText.resultsMessage_plural;this.resultCountMessage=t.replace("{count}",this.visibleOptions.length)},1400)},clearCount(){this.resultCountMessage=null}}},J=["value","id","name","placeholder","aria-owns","aria-expanded","aria-activedescendant","aria-invalid","aria-describedby"],W={"aria-live":"polite",role:"status",class:"mds-visually-hidden"},Q=["id"];function X(t,i,n,u,o,e){const d=p("ComboboxClear"),O=p("ListBoxOption"),y=p("ListBox");return a(),l("div",{class:g(["mds-combobox",{"mds-combobox--active":!e.listBoxHidden}]),onKeydown:[i[4]||(i[4]=r(s=>e.hiddenGuard(e.onKeyDown),["down"])),i[5]||(i[5]=r(s=>e.hiddenGuard(e.onKeyUp),["up"])),i[6]||(i[6]=r(s=>e.hiddenGuard(e.onKeyHome),["home"])),i[7]||(i[7]=r(s=>e.hiddenGuard(e.onKeyEnd),["end"])),i[8]||(i[8]=r((...s)=>e.makeInactive&&e.makeInactive(...s),["esc"])),i[9]||(i[9]=r(B((...s)=>e.chooseOption&&e.chooseOption(...s),["stop","prevent"]),["enter"]))]},[c("input",{onInput:i[0]||(i[0]=(...s)=>e.handleInput&&e.handleInput(...s)),value:e.inputValue,class:"mds-form-control",autocomplete:"off",type:"text",role:"combobox",ref:"comboInput",id:n.comboboxid,name:n.name,placeholder:n.placeholder,"aria-owns":e.listBoxId,"aria-expanded":e.ariaExpanded,"aria-autocomplete":"list","aria-activedescendant":e.selectedOptionId,"aria-invalid":e.ariaInvalid,"aria-describedby":e.describedBy,onChange:i[1]||(i[1]=(...s)=>e.handleChange&&e.handleChange(...s)),onBlur:i[2]||(i[2]=(...s)=>e.onInputBlur&&e.onInputBlur(...s)),onFocus:i[3]||(i[3]=(...s)=>e.handleFocus&&e.handleFocus(...s))},null,40,J),o.searchValue.length>0?(a(),x(d,{key:0,onClear:e.handleClear},null,8,["onClear"])):v("",!0),_(y,{id:e.listBoxId,hidden:e.listBoxHidden,isLoading:e.isLoading,comboboxid:n.comboboxid},{default:C(()=>[(a(!0),l(k,null,w(e.visibleOptions,(s,b)=>{var f;return a(),x(O,{key:b,option:s,id:`${e.optionId}-${b}`,focused:((f=e.selectedOption)==null?void 0:f.value)===(s==null?void 0:s.value),onMousedown:Z=>e.clickOption(s),searchValue:o.searchValue},null,8,["option","id","focused","onMousedown","searchValue"])}),128))]),_:1},8,["id","hidden","isLoading","comboboxid"]),c("div",W,m(o.resultCountMessage),1),c("span",{id:e.describedBy,style:{display:"none"}},m(e.i18nText.describedByText),9,Q)],34)}var Y=h(z,[["render",X]]);const te=L(Y,{shadowRoot:!1});export{te as default};