apostrophe 3.63.2 → 4.0.0

package/modules/@apostrophecms/ui/ui/apos/components/AposButtonSplit.vue

@@ -6,32 +6,34 @@
       :label="label"
       :disabled="disabled"
       :tooltip="tooltip"
-      @click="$emit('click', action)"
+      @click="emit('click', action)"
     />
     <AposContextMenu
+      ref="contextMenu"
       class="apos-button-split__menu"
       :menu="menu"
       :button="contextMenuButton"
       :disabled="disabled"
       menu-offset="1, 10"
       menu-placement="bottom-end"
-      ref="contextMenu"
       @open="menuOpen"
       @close="menuClose"
     >
       <dl
-        class="apos-button-split__menu__dialog" role="menu"
+        class="apos-button-split__menu__dialog"
+        role="menu"
         :aria-label="menuLabel"
       >
         <button
-          v-for="item in menu" :key="item.action"
+          v-for="item in menu"
+          :key="item.action"
+          ref="choices"
           class="apos-button-split__menu__dialog-item"
           :class="{ 'apos-is-selected': item.action === action }"
-          @click="selectionHandler(item.action)"
           :aria-checked="item.action === action ? 'true' : 'false'"
           role="menuitemradio"
           :value="item.action"
-          ref="choices"
+          @click="selectionHandler(item.action)"
           @keydown="cycleElementsToFocus"
         >
           <AposIndicator
@@ -53,111 +55,117 @@
   </div>
 </template>
 
-<script>
-import AposFocusMixin from 'Modules/@apostrophecms/modal/mixins/AposFocusMixin';
-
-export default {
-  name: 'AposButtonSplit',
-  mixins: [
-    AposFocusMixin
-  ],
-  props: {
-    menu: {
-      type: Array,
-      required: true
-    },
-    menuLabel: {
-      type: String,
-      required: true
-    },
-    type: {
-      type: String,
-      default: 'primary'
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    tooltip: {
-      type: [ String, Object ],
-      default: null
-    },
-    selected: {
-      // corresponds to a menu item action
-      type: String,
-      default: null
-    }
+<script setup>
+import {
+  ref, computed, watch, nextTick
+} from 'vue';
+import { useAposFocus } from 'Modules/@apostrophecms/modal/composables/AposFocus';
+
+const {
+  elementsToFocus,
+  cycleElementsToFocus,
+  focusElement,
+  focuslastmodalfocusedelement
+} = useAposFocus();
+
+const props = defineProps({
+  menu: {
+    type: Array,
+    required: true
   },
-  emits: [ 'click' ],
-  data() {
-    return {
-      label: null,
-      action: null,
-      button: {
-        type: this.type,
-        modifiers: [ 'no-motion' ]
-      },
-      contextMenuButton: {
-        iconOnly: true,
-        icon: 'chevron-down-icon',
-        modifiers: [ 'no-motion' ],
-        type: this.type
-      }
-    };
+  menuLabel: {
+    type: String,
+    required: true
   },
-  computed: {
-    modifiers() {
-      const classes = [];
-      classes.push(`apos-button-split--type-${this.button.type}`);
-      return classes;
-    }
+  type: {
+    type: String,
+    default: 'primary'
   },
-  watch: {
-    menu() {
-      this.initialize();
-    }
+  disabled: {
+    type: Boolean,
+    default: false
   },
-  mounted() {
-    this.initialize();
+  tooltip: {
+    type: [ String, Object ],
+    default: null
   },
-  methods: {
-    // sets the label and emitted action of the button
-    setButton(action) {
-      this.action = action;
-      this.label = this.menu.find(i => i.action === action).label;
-    },
-    selectionHandler(action) {
-      this.setButton(action);
-      this.$refs.contextMenu.hide();
-    },
-    initialize() {
-      let initial = this.menu[0].action || null;
-      if (this.selected && this.menu.find(i => i.action === this.selected)) {
-        initial = this.selected;
-      } else if (this.menu.find(i => i.def)) {
-        initial = this.menu.find(i => i.def).action;
-      }
-      this.setButton(initial);
-    },
-    trapFocus() {
-      const selectedElementIndex = this.menu.findIndex(i => i.action === this.action) || 0;
-
-      // use map to keep items order:
-      this.elementsToFocus = this.menu.map(
-        i => this.$refs.choices.find(choice => choice.value === i.action)
-      );
-
-      this.focusElement(this.elementsToFocus[selectedElementIndex]);
-    },
-    menuOpen() {
-      // TODO: find another way to wait for elements to be visible
-      setTimeout(this.trapFocus, 200);
-    },
-    menuClose() {
-      this.focusLastModalFocusedElement();
-    }
+  selected: {
+    // corresponds to a menu item action
+    type: String,
+    default: null
   }
-};
+});
+
+const emit = defineEmits([ 'click' ]);
+
+const label = ref(null);
+const action = ref(null);
+const button = ref({
+  type: props.type,
+  modifiers: [ 'no-motion' ]
+});
+const contextMenu = ref();
+const choices = ref([]);
+const contextMenuButton = ref({
+  iconOnly: true,
+  icon: 'chevron-down-icon',
+  modifiers: [ 'no-motion' ],
+  type: props.type
+});
+
+const modifiers = computed(() => {
+  const classes = [];
+  classes.push(`apos-button-split--type-${button.value.type}`);
+  return classes;
+});
+
+watch(() => props.menu, () => {
+  initialize();
+}, { immediate: true });
+
+// sets the label and emitted action of the button
+function setButton(btnAction) {
+  action.value = btnAction;
+  label.value = props.menu.find(i => i.action === btnAction).label;
+}
+
+function selectionHandler(btnAction) {
+  setButton(btnAction);
+  contextMenu.value.hide();
+}
+
+function initialize() {
+  let initial = props.menu[0].action || null;
+  if (props.selected && props.menu.find(i => i.action === props.selected)) {
+    initial = props.selected;
+  } else if (props.menu.find(i => i.def)) {
+    initial = props.menu.find(i => i.def).action;
+  }
+
+  setButton(initial);
+}
+
+function trapFocus() {
+  const selectedElementIndex = props.menu.findIndex(i => i.action === action.value) || 0;
+
+  // use map to keep items order:
+  elementsToFocus.value = props.menu.map(
+    ({ action }) => choices.value.find(choice => {
+      return choice.value === action;
+    })
+  );
+
+  focusElement(elementsToFocus.value[selectedElementIndex]);
+}
+function menuOpen() {
+  nextTick(() => {
+    trapFocus();
+  });
+}
+
+function menuClose() {
+  focuslastmodalfocusedelement();
+}
 </script>
 <style lang="scss" scoped>
   .apos-button-split {
@@ -208,7 +216,7 @@ export default {
     font-size: var(--a-type-base);
   }
 
-  .apos-button-split__button ::v-deep .apos-button {
+  .apos-button-split__button :deep(.apos-button) {
     padding-right: $spacing-quadruple + $spacing-base;
     margin-top: 0;
     margin-bottom: 0;
@@ -219,14 +227,13 @@ export default {
     top: 0;
     right: 0;
     height: 100%;
-    ::v-deep {
-      .v-popover,
-      .trigger,
-      .apos-button__wrapper {
-        height: 100%;
-      }
+
+    :deep(.apos-popover__btn),
+    :deep(.trigger),
+    :deep(.apos-button__wrapper) {
+      height: 100%;
     }
-    ::v-deep .apos-button {
+    :deep(.apos-button) {
       display: flex;
       box-sizing: border-box;
       height: 100%;

package/modules/@apostrophecms/ui/ui/apos/components/AposCheckbox.vue

@@ -1,30 +1,35 @@
 <template>
   <label
-    class="apos-choice-label" :for="id"
+    class="apos-choice-label"
+    :for="id"
     :class="{'apos-choice-label--disabled': field.readOnly}"
     :tabindex="{'-1' : field.hideLabel}"
   >
     <input
+      :id="id"
       v-model="checkProxy"
-      type="checkbox" class="apos-sr-only apos-input--choice apos-input--checkbox"
+      type="checkbox"
+      class="apos-sr-only apos-input--choice apos-input--checkbox"
       :value="choice.value"
       :name="field.name"
-      :id="id" :aria-label="choice.label || field.label"
-      :tabindex="tabindex" :disabled="field.readOnly || choice.readOnly"
+      :aria-label="choice.label || field.label"
+      :tabindex="tabindex"
+      :disabled="field.readOnly || choice.readOnly"
       :is-indeterminate="choice.indeterminate === true ? 'true' : 'false'"
       @change="update"
     >
     <span class="apos-input-indicator" aria-hidden="true">
       <component
-        v-if="isChecked(checked)"
         :is="`${
           choice.indeterminate ? 'minus-icon' : 'check-bold-icon'
         }`"
+        v-if="isChecked(modelValue)"
         :size="10"
       />
     </span>
     <span
-      :class="{'apos-sr-only': field.hideLabel }" v-if="choice.label"
+      v-if="choice.label"
+      :class="{'apos-sr-only': field.hideLabel }"
       class="apos-choice-label-text"
     >
       {{ $t(choice.label) }}
@@ -35,13 +40,8 @@
 <script>
 
 export default {
-  // Custom model to handle the v-model connection on the parent.
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
   props: {
-    checked: {
+    modelValue: {
       type: [ Array, Boolean ],
       default: false
     },
@@ -64,7 +64,7 @@ export default {
       default: null
     }
   },
-  emits: [ 'change', 'updated' ],
+  emits: [ 'update:modelValue', 'updated' ],
   data() {
     return {
       tabindex: this.field.disableFocus ? '-1' : '0'
@@ -74,21 +74,21 @@ export default {
     // Handle the local check state within this component.
     checkProxy: {
       get() {
-        return this.checked;
+        return this.modelValue;
       },
       set(val) {
         if (!this.choice.indeterminate || this.choice.triggerIndeterminateEvent) {
           // Only update the model if the box was *not* indeterminate.
-          this.$emit('change', val);
+          this.$emit('update:modelValue', val);
         }
       }
     }
   },
   methods: {
-    isChecked(checked) {
-      return Array.isArray(checked)
-        ? checked.includes(this.choice.value)
-        : checked;
+    isChecked(value) {
+      return Array.isArray(value)
+        ? value.includes(this.choice.value)
+        : value;
     },
     // This event is only necessary if the parent needs to do *more* than simply
     // keep track of an array of checkbox values. For example, AposTagApply

package/modules/@apostrophecms/ui/ui/apos/components/AposCombo.vue

@@ -6,21 +6,21 @@
   >
     <ul
       ref="select"
+      v-click-outside-element="closeList"
       role="button"
       :aria-expanded="showedList.toString()"
       :aria-controls="`${field._id}-combo`"
-      v-click-outside-element="closeList"
       class="apos-input-wrapper apos-combo__select"
-      @click="toggleList"
       :tabindex="field.readOnly ? null : 0"
+      @click="toggleList"
       @keydown.prevent.space="toggleList"
       @keydown.prevent.up="toggleList"
       @keydown.prevent.down="toggleList"
     >
       <li
-        class="apos-combo__selected"
         v-for="checked in selectedItems"
         :key="objectValues ? checked.value : checked"
+        class="apos-combo__selected"
         @click.stop="selectOption(getSelectedOption(checked))"
       >
         {{ getSelectedOption(checked)?.label }}
@@ -49,16 +49,16 @@
     >
       <li
         v-if="typehead"
-        class="apos-combo__list-typehead"
         key="__typehead"
+        class="apos-combo__list-typehead"
         @click.stop="$refs.input.focus()"
       >
         <input
+          ref="input"
           class="apos-combo__typehead"
           type="text"
           :placeholder="$t('apostrophe:search')"
           :value="thInput"
-          ref="input"
           @input="onTypeheadInput"
           @keydown="onTypeheadKey"
         >
@@ -69,11 +69,11 @@
         />
       </li>
       <li
+        v-for="(choice, i) in options"
         :key="choice.value"
         class="apos-combo__list-item"
         role="menuitemcheckbox"
         :class="{focused: focusedItemIndex === i}"
-        v-for="(choice, i) in options"
         @click.stop="selectOption(choice)"
         @mouseover="focusedItemIndex = i"
       >
@@ -101,7 +101,7 @@ export default {
       type: Object,
       required: true
     },
-    value: {
+    modelValue: {
       type: Object,
       required: true
     },
@@ -121,7 +121,7 @@ export default {
     }
   },
 
-  emits: [ 'select-items', 'toggle', 'input' ],
+  emits: [ 'select-items', 'toggle', 'update:modelValue' ],
   data () {
 
     return {
@@ -142,7 +142,7 @@ export default {
     },
     selectedItems() {
       if (!this.showSelectAll || !this.allItemsSelected()) {
-        return this.value.data;
+        return this.modelValue.data;
       }
       if (this.objectValues) {
         const { listLabel } = this.getSelectAllLabel();
@@ -157,13 +157,13 @@ export default {
   mounted() {
     this.boxResizeObserver.observe(this.$refs.select);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.boxResizeObserver.unobserve(this.$refs.select);
   },
   methods: {
     onTypeheadInput(e) {
       this.thInput = e.target.value;
-      this.$emit('input', this.thInput);
+      this.$emit('update:modelValue', this.thInput);
     },
     onTypeheadKey(e) {
       const stop = () => {
@@ -276,7 +276,7 @@ export default {
       this.focusedItemIndex = null;
       this.$refs.list.scrollTo({ top: 0 });
       this.thInput = '';
-      this.$emit('input', this.thInput);
+      this.$emit('update:modelValue', this.thInput);
     },
     getBoxResizeObserver() {
       return new ResizeObserver(([ { target } ]) => {
@@ -307,10 +307,10 @@ export default {
           : entry === choice.value
       );
 
-      return this.value.data.some(condition);
+      return this.modelValue.data.some(condition);
     },
     allItemsSelected () {
-      return this.choices.length && this.value.data.length === this.choices.length;
+      return this.choices.length && this.modelValue.data.length === this.choices.length;
     },
     getSelectedOption(checked) {
       if (this.objectValues) {
@@ -475,7 +475,7 @@ export default {
     cursor: not-allowed;
   }
 
-  ::v-deep .apos-indicator {
+  :deep(.apos-indicator) {
     width: 10px;
     height: 10px;
   }