UNPKG

@ark-ui/vue

Version:

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

48 lines (45 loc) 1.69 kB
import { defineComponent, mergeDefaults, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue'; import { ark } from '../factory.js'; import { useMenuContext } from './use-menu-context.js'; import { MenuItemProvider } from './use-menu-item-context.js'; import { MenuItemPropsProvider } from './use-menu-option-item-props-context.js'; import { useForwardExpose } from '../../utils/use-forward-expose.js'; const _sfc_main = /* @__PURE__ */ defineComponent({ __name: "menu-checkbox-item", props: /* @__PURE__ */ mergeDefaults({ checked: { type: Boolean }, value: {}, disabled: { type: Boolean }, valueText: {}, closeOnSelect: { type: Boolean }, asChild: { type: Boolean } }, { checked: void 0, disabled: void 0, closeOnSelect: void 0 }), emits: ["update:checked"], setup(__props, { emit: __emit }) { const props = __props; const emits = __emit; const menu = useMenuContext(); const optionItemProps = computed(() => ({ ...props, type: "checkbox", onCheckedChange: (e) => emits("update:checked", e) })); const optionItemState = computed(() => menu.value.getOptionItemState(optionItemProps.value)); MenuItemProvider(optionItemState); MenuItemPropsProvider(optionItemProps); useForwardExpose(); return (_ctx, _cache) => { return openBlock(), createBlock(unref(ark).div, mergeProps(unref(menu).getOptionItemProps(optionItemProps.value), { "as-child": _ctx.asChild }), { default: withCtx(() => [ renderSlot(_ctx.$slots, "default") ]), _: 3 }, 16, ["as-child"]); }; } }); export { _sfc_main as default };