@policystudio/policy-studio-ui-vue 1.2.0-access.75 → 1.2.0-access.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.2.0-access.75",
+  "version": "1.2.0-access.77",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/components/accordion/PsAccordionItem.vue

@@ -12,6 +12,8 @@
         <div
           @click="toggle"
           @keydown.enter.stop="toggle"
+          @focusin="onHeaderFocusIn"
+          @focusout="onHeaderFocusOut"
           class="psui-el-accordion-item-header-wrapper"
           tabindex="0"
           v-if="!hasCustomHeader"
@@ -55,8 +57,11 @@ import { useCollapseAnimation } from '../../../dist/composables/useCollapseAnima
 import { ref, computed, getCurrentInstance  } from 'vue'
 
 const { beforeEnter, enter, afterEnter, beforeLeave, leave } = useCollapseAnimation()
+
+const emit = defineEmits(['header-focusin', 'header-focusout'])
+
 defineExpose({
-  toggle: () => toggle()  
+  toggle: () => _toggle()
 })
 
 const localOpened = ref(null)
@@ -97,6 +102,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * A callback called before toggling. If it returns false, the toggle is prevented.
+   * Only affects user-initiated interactions (click/Enter), not programmatic calls.
+   */
+  beforeToggle: {
+    type: Function,
+    default: null,
+  },
 })
 
 const isOpen = computed(() => {
@@ -127,7 +140,7 @@ const getIcon = computed(() => {
   return `${props.icon}`
 })
 
-const toggle = () => {
+const _toggle = () => {
   if (localOpened.value === null) {
     localOpened.value = !props.opened
   } else {
@@ -135,6 +148,20 @@ const toggle = () => {
   }
 }
 
+const toggle = () => {
+  if (props.disabled) return
+  if (props.beforeToggle && props.beforeToggle() === false) return
+  _toggle()
+}
+
+const onHeaderFocusIn = (e) => emit('header-focusin', e)
+
+const onHeaderFocusOut = (e) => {
+  if (!e.currentTarget.contains(e.relatedTarget)) {
+    emit('header-focusout', e)
+  }
+}
+
 </script>
 
 <style>

package/src/components/controls/PsSwitch.vue

@@ -3,6 +3,7 @@
     class="psui-el-switch"
     :class="[getComponentClass, { disabled: disabled }]"
     @click="change()"
+    @keydown.enter.stop="change()"
     tabindex="0"
   >
     <span

package/src/components/forms/PsDropdown.vue

@@ -4,6 +4,7 @@
       ref="PSDropdownTrigger"
       @click="toggle"
       @keydown.enter.stop.prevent="toggle"
+      @keydown.space.stop.prevent="toggle"
     >
       <slot
         v-if="hasDropdownTrigger"
@@ -159,9 +160,10 @@ const moveFocus = (offset) => {
   focusable[nextIndex].focus()
 }
 
-const open = () => {
+const open = async () => {
   show.value = true
   emit('open')
+  await focusFirstElement()
 }
 
 const close = (event) => {
@@ -176,14 +178,12 @@ const toggle = async (event) => {
 
   if (event) event.stopPropagation()
 
-  show.value = !show.value
-
-  if (show.value) {
-    await focusFirstElement()
+  if (!show.value) {
+    await open()
   } else {
-    emit('close')
+    close()
   }
 }
 
-defineExpose({ open, close })
+defineExpose({ open, close, toggle })
 </script>