@madgex/design-system-ce 5.1.2 → 5.3.0

package/components/text-editor/TextEditorToolbar.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="mds-text-editor__menu" role="toolbar" :aria-label="i18nText.toolbarLabel" :aria-controls="id">
+    <TextEditorButton
+      v-for="button in menuButtons"
+      :id="button.id"
+      ref="menuButton"
+      :key="button.id"
+      :label="button.label"
+      :icon-name="button.iconName"
+      :is-active="button.isActive?.(editor)"
+      :disabled="button.isDisabled?.(editor)"
+      :initial-tabindex="firstFocusableButton.id === button.id ? 0 : -1"
+      :aria-pressed="button.id === 'undo' || button.id === 'redo' ? null : button.isActive?.(editor)"
+      :aria-expanded="button.ariaExpanded?.()"
+      @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"
+    />
+    <!-- <TextEditorPopoverLink v-if="editor" v-model:linkUrl="linkUrl" v-model:visible="showLinkEditor" :editor="editor" /> -->
+  </div>
+</template>
+
+<script>
+import TextEditorButton from './TextEditorButton.vue';
+// import TextEditorPopoverLink from './TextEditorPopoverLink.vue';
+
+export default {
+  name: 'TextEditorToolbar',
+
+  components: {
+    TextEditorButton,
+    // TextEditorPopoverLink,
+  },
+
+  inject: ['id', 'customMenuButtons', 'i18nText'],
+
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  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: 'link',
+          label: 'Link',
+          iconName: 'text-link',
+          ariaExpanded: () => this.showLinkEditor,
+          onClick: (editor) => {
+            if (this.shouldShowLinkEditor()) {
+              // only show the bubble menu for links
+              this.showLinkEditor = true;
+              // update link in text input if we should show it
+              const previousUrl = editor.getAttributes('link').href;
+              this.linkUrl = previousUrl ?? '';
+            }
+          },
+          isActive: (editor) => editor.isActive('link'),
+          isDisabled: () => {
+            return !this.shouldShowLinkEditor();
+          },
+        }, */
+        {
+          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(),
+        },
+      ],
+      // showLinkEditor: false,
+      // linkUrl: '',
+    };
+  },
+  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;
+        }
+      });
+    },
+    /* shouldShowLinkEditor() {
+      // no selection, so cant open link editor
+      const hasSelection = this.editor.state.selection.$from.pos !== this.editor.state.selection.$to.pos;
+      const cursorIsAtLink = this.editor.isActive('link');
+      return hasSelection || cursorIsAtLink;
+    }, */
+  },
+};
+</script>

package/components/text-editor/apply-missing-protocol.js

@@ -0,0 +1,7 @@
+const isValidProtocol = (href) => /^https?:\/\/|mailto:/.test(href);
+
+export const applyMissingProtocol = (href) => {
+  const isValid = isValidProtocol(href);
+  if (!isValid) return `http://${href}`;
+  return href;
+};

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};