@madgex/design-system-ce 5.6.0 → 5.6.2

package/components/combobox/Combobox.ce.vue

@@ -1,17 +1,19 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div
+    ref="$el"
     class="mds-combobox"
     :class="{ 'mds-combobox--active': !listBoxHidden }"
-    @keydown.down="hiddenGuard(onKeyDown)"
-    @keydown.up="hiddenGuard(onKeyUp)"
-    @keydown.home="hiddenGuard(onKeyHome)"
-    @keydown.end="hiddenGuard(onKeyEnd)"
+    @keydown.down="onKeyDown"
+    @keydown.up="onKeyUp"
+    @keydown.home="onKeyHome"
+    @keydown.end="onKeyEnd"
     @keydown.esc="makeInactive"
     @keydown.enter="handleKeyDownEnter"
   >
     <input
       :id="comboboxid"
-      ref="comboInput"
+      ref="$comboInput"
       :value="inputValue"
       class="mds-form-control"
       autocomplete="off"
@@ -43,271 +45,233 @@
         @mousedown="clickOption(option)"
       />
     </ListBox>
-    <div aria-live="polite" role="status" class="mds-visually-hidden">{{ resultCountMessage }}</div>
+    <div aria-live="polite" role="status" class="mds-visually-hidden">
+      {{ resultCountMessage }}
+    </div>
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, provide, ref, useTemplateRef } from 'vue';
 import ComboboxClear from './ComboboxClear.vue';
 import ListBox from './ListBox.vue';
 import ListBoxOption from './ListBoxOption.vue';
 
-export default {
-  name: 'Combobox',
-  components: {
-    ComboboxClear,
-    ListBox,
-    ListBoxOption,
+const props = defineProps({
+  comboboxid: { type: String, required: true },
+  placeholder: { type: String, default: '' },
+  name: { type: [String, Boolean], default: false },
+  value: { type: String, default: '' },
+  options: { type: Array, default: () => [] },
+  filterOptions: { type: Boolean, default: true },
+  iconpath: { type: String, default: '/assets/icons.svg' },
+  dataAriaInvalid: { type: String, default: '' },
+  i18n: { type: String, default: '' },
+  describedbyId: { type: String, default: '' },
+  minSearchCharacters: { type: Number, default: 2 },
+});
+const emit = defineEmits(['search', 'select-option', 'clear-all']);
+
+const $el = useTemplateRef('$el');
+const $comboInput = useTemplateRef('$comboInput');
+
+const expanded = ref(false);
+const selected = ref(null);
+const chosen = ref(null);
+const searchValue = ref(props.value);
+const resultCountMessage = ref(null);
+
+const i18nText = computed(() => {
+  return props.i18n
+    ? JSON.parse(props.i18n)
+    : {
+        loadingText: 'Loading',
+        resultsMessage: '{count} result available',
+        resultsMessage_plural: '{count} results available',
+        clearInput: 'clear input',
+      };
+});
+const inputValue = computed(() => {
+  if (chosenOption.value) {
+    return chosenOption.value.label;
+  }
+
+  return searchValue.value;
+});
+const visibleOptions = computed(() => {
+  if (props.filterOptions) {
+    return props.options.filter((opt) => opt.label.toLowerCase().includes(searchValue.value.toLowerCase()));
+  }
+
+  return props.options;
+});
+const listBoxId = computed(() => {
+  return `${props.comboboxid}-listbox`;
+});
+const optionId = computed(() => {
+  return `${props.comboboxid}-option`;
+});
+const isLoading = computed(() => {
+  return props.options.length === 0 && expanded.value;
+});
+const selectedOptionId = computed(() => {
+  // make sure comparison is treated as strings (in case option value Number etc)
+  const index = visibleOptions.value.findIndex((obj) => String(obj.value) === String(selectedOption.value?.value));
+
+  if (index > -1) {
+    return `${optionId.value}-${index}`;
+  }
+
+  return undefined;
+});
+const listBoxHidden = computed(() => {
+  return !expanded.value;
+});
+const lastOptionIndex = computed(() => {
+  return visibleOptions.value.length - 1;
+});
+const ariaExpanded = computed(() => {
+  // These must be strings to apply as an aria attribute of the same name
+  return expanded.value ? 'true' : 'false';
+});
+
+const ariaInvalid = computed(() => {
+  return props.dataAriaInvalid ? 'true' : 'false';
+});
+
+const selectedOption = computed({
+  get() {
+    return selected.value;
   },
-  provide() {
-    return {
-      iconPath: this.iconpath,
-      loadingText: this.i18nText.loadingText,
-      clearInput: this.i18nText.clearInput,
-    };
+  set(newOption) {
+    selected.value = newOption;
   },
-  props: {
-    comboboxid: {
-      type: String,
-      required: true,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: [String, Boolean],
-      default: false,
-    },
-    value: {
-      type: String,
-      default: '',
-    },
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    filterOptions: {
-      type: Boolean,
-      default: true,
-    },
-    iconpath: {
-      type: String,
-      default: '/assets/icons.svg',
-    },
-    dataAriaInvalid: {
-      type: String,
-      default: '',
-    },
-    i18n: {
-      type: String,
-      default: '',
-    },
-    describedbyId: {
-      type: String,
-      default: ''
-    },
-    minSearchCharacters: {
-      type: Number,
-      default: 2
-    }
+});
+const chosenOption = computed({
+  get() {
+    return chosen.value;
   },
-  emits: ['search', 'select-option', 'clear-all'],
-  data() {
-    return {
-      expanded: false,
-      selected: null,
-      chosen: null,
-      searchValue: this.$props.value,
-      resultCountMessage: null,
-    };
+  set(newOption) {
+    chosen.value = newOption;
+    selectedOption.value = newOption;
+    emit('select-option', chosen.value);
   },
-  computed: {
-    inputValue() {
-      if (this.chosenOption) {
-        return this.chosenOption.label;
-      }
+});
 
-      return this.searchValue;
-    },
-    selectedOption: {
-      get() {
-        return this.selected;
-      },
-      set(newOption) {
-        this.selected = newOption;
-      },
-    },
-    chosenOption: {
-      get() {
-        return this.chosen;
-      },
-      set(newOption) {
-        this.chosen = newOption;
-        this.selectedOption = newOption;
-        this.$emit('select-option', this.chosen);
-      },
-    },
-    visibleOptions() {
-      if (this.filterOptions) {
-        return this.options.filter((opt) => opt.label.toLowerCase().includes(this.searchValue.toLowerCase()));
-      }
+onMounted(() => {
+  // TODO: Get rid of code which couples to the nunjucks MdsCombobox template!
+  const fallbackInput = $el.value?.parentElement?.parentElement?.querySelector('.mds-form-element__fallback input');
+  const fallbackSelect = $el.value?.parentElement?.parentElement?.querySelector('.mds-form-element__fallback select');
 
-      return this.options;
-    },
-    listBoxId() {
-      return `${this.comboboxid}-listbox`;
-    },
-    optionId() {
-      return `${this.comboboxid}-option`;
-    },
-    isLoading() {
-      return this.options.length === 0 && this.expanded;
-    },
-    selectedOptionId() {
-      const index = this.visibleOptions.findIndex((obj) => obj.value == this.selectedOption?.value);
+  if (fallbackInput) fallbackInput.remove();
+  if (fallbackSelect) fallbackSelect.removeAttribute('id');
+});
 
-      if (index > -1) {
-        return `${this.optionId}-${index}`;
-      }
+function makeActive() {
+  expanded.value = true;
+}
+function makeInactive() {
+  expanded.value = false;
+}
+function handleInput(event) {
+  // Reset any chosen option if user is typing again
+  chosenOption.value = null;
+  searchValue.value = event.target ? event.target.value : '';
+  handleChange();
+  emit('search', searchValue.value);
+  if (visibleOptions.value.length > 0) {
+    updateCount();
+  }
+}
+function handleChange() {
+  if (searchValue.value.length === 0) clearField();
+  if (searchValue.value.length >= props.minSearchCharacters) {
+    makeActive();
+    updateCount();
+  } else {
+    makeInactive();
+  }
+}
+function handleFocus() {
+  handleChange();
+  if (visibleOptions.value.length > 1) {
+    updateCount();
+  }
+}
+function handleClear() {
+  clearField();
+  $comboInput.value?.focus();
+}
+function clearField() {
+  searchValue.value = '';
+  chosenOption.value = null;
+  emit('clear-all');
+}
+function clickOption(option = selectedOption.value) {
+  chosenOption.value = option;
+  makeInactive();
+}
+/* When expanded then enter key down selects an option, otherwise enter key will be native behaviour, eg submit form */
+function handleKeyDownEnter(event) {
+  if (expanded.value) {
+    event.preventDefault();
+    chooseOption();
+  }
+}
+function chooseOption() {
+  chosenOption.value = selectedOption.value;
+  makeInactive();
+  clearCount();
+}
 
-      return undefined;
-    },
-    listBoxHidden() {
-      return !this.expanded;
-    },
-    lastOptionIndex() {
-      return this.visibleOptions.length - 1;
-    },
-    ariaExpanded() {
-      // These must be strings to apply as an aria attribute of the same name
-      return this.expanded ? 'true' : 'false';
-    },
-    ariaInvalid() {
-      return this.dataAriaInvalid ? 'true' : 'false';
-    },
-    i18nText() {
-      return this.i18n
-        ? JSON.parse(this.i18n)
-        : {
-            loadingText: 'Loading',
-            resultsMessage: '{count} result available',
-            resultsMessage_plural: '{count} results available',
-            clearInput: 'clear input',
-          };
-    },
-  },
-  mounted() {
-    // TODO: Get rid of this code which couples this to the nunjucks MdsCombobox template!
-    const fallbackInput = this.$el.parentElement?.parentElement?.querySelector('.mds-form-element__fallback input');
-    const fallbackSelect = this.$el.parentElement?.parentElement?.querySelector('.mds-form-element__fallback select');
+function onInputBlur() {
+  makeInactive();
+  clearCount();
+}
+function onKeyDown() {
+  if (listBoxHidden.value) return;
+  if (selectedOption.value) {
+    const currentIndex = visibleOptions.value.findIndex((item) => item.value === selectedOption.value.value);
+    const nextIndex = currentIndex === lastOptionIndex.value ? currentIndex : currentIndex + 1;
 
-    if (fallbackInput) fallbackInput.remove();
-    if (fallbackSelect) fallbackSelect.removeAttribute('id');
-  },
-  methods: {
-    makeActive() {
-      this.expanded = true;
-    },
-    makeInactive() {
-      this.expanded = false;
-    },
-    handleInput(event) {
-      // Reset any chosen option if user is typing again
-      this.chosenOption = null;
-      this.searchValue = event.target ? event.target.value : '';
-      this.handleChange();
-      this.$emit('search', this.searchValue);
-      if (this.visibleOptions.length > 0) {
-        this.updateCount();
-      }
-    },
-    handleChange() {
-      if (this.searchValue.length === 0) this.clearField();
-      if (this.searchValue.length >= this.minSearchCharacters) {
-        this.makeActive();
-        this.updateCount();
-      } else {
-        this.makeInactive();
-      }
-    },
-    handleFocus() {
-      this.handleChange();
-      if (this.visibleOptions.length > 1) {
-        this.updateCount();
-      }
-    },
-    handleClear() {
-      this.clearField();
-      this.$refs.comboInput.focus();
-    },
-    clearField() {
-      this.searchValue = '';
-      this.chosenOption = null;
-      this.$emit('clear-all');
-    },
-    clickOption(option = this.selectedOption) {
-      this.chosenOption = option;
-      this.makeInactive();
-    },
-    /* When expanded then enter key down selects an option, otherwise enter key will be native behaviour, eg submit form */
-    handleKeyDownEnter(event) {
-      if (this.expanded) {
-        event.preventDefault();
-        this.chooseOption();
-      }
-    },
-    chooseOption() {
-      this.chosenOption = this.selectedOption;
-      this.makeInactive();
-      this.clearCount();
-    },
-    hiddenGuard(fn) {
-      if (this.listBoxHidden) return;
-      fn.call(this);
-    },
-    onInputBlur() {
-      this.makeInactive();
-      this.clearCount();
-    },
-    onKeyDown() {
-      if (this.selectedOption) {
-        const currentIndex = this.visibleOptions.findIndex((item) => item.value === this.selectedOption.value);
-        const nextIndex = currentIndex === this.lastOptionIndex ? currentIndex : currentIndex + 1;
+    selectedOption.value = visibleOptions.value[nextIndex];
+  } else {
+    [selectedOption.value] = visibleOptions.value;
+  }
+}
+function onKeyUp() {
+  if (listBoxHidden.value) return;
+  if (selectedOption.value) {
+    const currentIndex = visibleOptions.value.findIndex((item) => item.value === selectedOption.value.value);
+    const nextIndex = currentIndex === 0 ? currentIndex : currentIndex - 1;
 
-        this.selectedOption = this.visibleOptions[nextIndex];
-      } else {
-        [this.selectedOption] = this.visibleOptions;
-      }
-    },
-    onKeyUp() {
-      if (this.selectedOption) {
-        const currentIndex = this.visibleOptions.findIndex((item) => item.value === this.selectedOption.value);
-        const nextIndex = currentIndex === 0 ? currentIndex : currentIndex - 1;
+    selectedOption.value = visibleOptions.value[nextIndex];
+  } else {
+    selectedOption.value = visibleOptions.value[lastOptionIndex.value];
+  }
+}
+function onKeyHome() {
+  if (listBoxHidden.value) return;
+  [selectedOption.value] = visibleOptions.value;
+}
+function onKeyEnd() {
+  if (listBoxHidden.value) return;
+  selectedOption.value = visibleOptions.value[lastOptionIndex.value];
+}
+function updateCount() {
+  clearCount();
+  setTimeout(() => {
+    const message =
+      visibleOptions.value.length === 1 ? i18nText.value.resultsMessage : i18nText.value.resultsMessage_plural;
 
-        this.selectedOption = this.visibleOptions[nextIndex];
-      } else {
-        this.selectedOption = this.visibleOptions[this.lastOptionIndex];
-      }
-    },
-    onKeyHome() {
-      [this.selectedOption] = this.visibleOptions;
-    },
-    onKeyEnd() {
-      this.selectedOption = this.visibleOptions[this.lastOptionIndex];
-    },
-    updateCount() {
-      this.clearCount();
-      setTimeout(() => {
-        const message =
-          this.visibleOptions.length === 1 ? this.i18nText.resultsMessage : this.i18nText.resultsMessage_plural;
+    resultCountMessage.value = message.replace('{count}', visibleOptions.value.length);
+  }, 1400);
+}
+function clearCount() {
+  resultCountMessage.value = null;
+}
 
-        this.resultCountMessage = message.replace('{count}', this.visibleOptions.length);
-      }, 1400);
-    },
-    clearCount() {
-      this.resultCountMessage = null;
-    },
-  },
-};
+provide('iconPath', props.iconpath);
+provide('loadingText', i18nText.value.loadingText);
+provide('clearInput', i18nText.value.clearInput);
 </script>

package/components/combobox/ComboboxClear.vue

@@ -13,9 +13,9 @@
   </button>
 </template>
 
-<script>
-export default {
-  name: 'ComboboxClear',
-  inject: ['iconPath', 'clearInput'],
-};
+<script setup>
+import { inject } from 'vue';
+
+const iconPath = inject('iconPath');
+const clearInput = inject('clearInput');
 </script>

package/components/combobox/ListBox.vue

@@ -12,19 +12,14 @@
   </ul>
 </template>
 
-<script>
-export default {
-  name: 'ListBox',
-  props: {
-    hidden: {
-      type: Boolean,
-      default: true,
-    },
-    isLoading: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  inject: ['iconPath', 'loadingText'],
-};
+<script setup>
+import { inject } from 'vue';
+
+defineProps({
+  hidden: { type: Boolean, default: true },
+  isLoading: { type: Boolean, default: true },
+});
+
+const iconPath = inject('iconPath');
+const loadingText = inject('loadingText');
 </script>

package/components/combobox/ListBoxOption.vue

@@ -1,6 +1,6 @@
 <template>
   <li
-    ref="listItem"
+    ref="$listItem"
     class="mds-combobox__option"
     role="option"
     :class="{ 'mds-combobox__option--focused': focused }"
@@ -10,41 +10,30 @@
   />
 </template>
 
-<script>
-export default {
-  name: 'ListBoxOption',
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-    focused: {
-      type: Boolean,
-      default: false,
-    },
-    searchValue: {
-      type: String,
-      default: '',
-    },
-  },
-  watch: {
-    searchValue(newSearchValue) {
-      return newSearchValue;
-    },
-    focused(value) {
-      if (value) {
-        this.$refs.listItem.scrollIntoView({block: 'nearest', inline: 'nearest'});
-      }
-    },
-  },
-  methods: {
-    highlightOption() {
-      const optionLabelHtml = this.option.label.replace(
-        new RegExp(this.searchValue, 'gi'),
-        (match) => `<span class="mds-combobox__option--marked">${match}</span>`
-      );
-      return optionLabelHtml;
-    },
+<script setup>
+import { useTemplateRef, watch } from 'vue';
+
+const props = defineProps({
+  option: { type: Object, required: true },
+  focused: { type: Boolean, default: false },
+  searchValue: { type: String, default: '' },
+});
+
+const $listItem = useTemplateRef('$listItem');
+
+watch(
+  () => props.focused,
+  (value) => {
+    if (value) {
+      $listItem.value?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
   },
-};
+);
+function highlightOption() {
+  const optionLabelHtml = props.option.label.replace(
+    new RegExp(props.searchValue, 'gi'),
+    (match) => `<span class="mds-combobox__option--marked">${match}</span>`,
+  );
+  return optionLabelHtml;
+}
 </script>

package/custom-elements/mds-combobox.js

@@ -1,10 +1,5 @@
 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 { defineCustomElement } from 'vue';
 // --- Components ---
 import Combobox from '../components/combobox/Combobox.ce.vue';
 

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

@@ -1,10 +1,5 @@
 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 { defineCustomElement } from 'vue';
 import TextEditor from '../components/text-editor/TextEditor.ce.vue';
 
 const MdsTextEditor = defineCustomElement(TextEditor, { shadowRoot: false });