feat(forms): add useMaskedField and useMaskedInput composables for input masking

vue/primitives/src/menu/MenuRoot.vue

@@ -1,14 +1,22 @@
 <script lang="ts">
 import type { Direction } from '../config-provider';
 
+/**
+ * The unstyled, low-level menu engine that powers DropdownMenu, ContextMenu, and
+ * Menubar. It is built on Popper and wires up roving-focus keyboard navigation,
+ * typeahead, nested submenus, checkbox/radio items, and modal vs. non-modal
+ * dismissal — but it is deliberately trigger-agnostic, so consumers supply their
+ * own anchor and open logic.
+ *
+ * Use this directly only when composing a new menu-like primitive; for ordinary
+ * app menus reach for DropdownMenu or ContextMenu instead. MenuRoot owns open
+ * state and provides context to every part; bind `v-model:open` (or listen to
+ * `update:open`) to control or observe whether the menu is open.
+ */
 export interface MenuRootProps {
-  open?: boolean;
   dir?: Direction;
   modal?: boolean;
 }
-export interface MenuRootEmits {
-  'update:open': [value: boolean];
-}
 </script>
 
 <script setup lang="ts">
@@ -20,12 +28,11 @@ import { provideMenuContext, provideMenuRootContext } from './context';
 import { useIsUsingKeyboard } from './useIsUsingKeyboard';
 
 const {
-  open = false,
   dir: dirProp,
   modal = true,
 } = defineProps<MenuRootProps>();
 
-const emit = defineEmits<MenuRootEmits>();
+const open = defineModel<boolean>('open', { default: false });
 
 defineSlots<{ default?: () => unknown }>();
 
@@ -33,17 +40,16 @@ const config = useConfig();
 const dirRef = toRef(() => dirProp ?? config.dir.value);
 const isUsingKeyboardRef = useIsUsingKeyboard();
 const content = shallowRef<HTMLElement | null>(null);
-const openRef = toRef(() => open);
 
 provideMenuContext({
-  open: openRef,
-  onOpenChange: v => emit('update:open', v),
+  open,
+  onOpenChange: (v) => { open.value = v; },
   content,
   onContentChange: (el) => { content.value = el; },
 });
 
 provideMenuRootContext({
-  onClose: () => emit('update:open', false),
+  onClose: () => { open.value = false; },
   dir: dirRef,
   isUsingKeyboardRef,
   modal: toRef(() => modal),