{"version":3,"file":"dropdown2.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\r\n  <div class=\"sg-dropdown\" v-click-outside:[dropdownRef]=\"onClickOutside\">\r\n    <details role=\"list\" dir=\"ltr\" :open=\"open\" ref=\"dropdownRef\">\r\n      <summary\r\n        aria-haspopup=\"listbox\"\r\n        ref=\"dropDownTextRef\"\r\n        :class=\"dropdownTriggerKls\"\r\n        @click=\"onClick\"\r\n        @contextmenu=\"onContextMenu\"\r\n        @mouseenter=\"onMouseenter\"\r\n        @mouseleave=\"onMouseleave\"\r\n      >\r\n        <slot>\r\n          {{ title }}\r\n          <sg-icon class=\"sg-icon--right\">\r\n            <ArrowDown />\r\n          </sg-icon>\r\n        </slot>\r\n      </summary>\r\n      <teleport :disabled=\"!transfer\" to=\"body\">\r\n        <ul\r\n          role=\"listbox\"\r\n          :class=\"[ns.e('popper'), ns.b('content'), ns.is(isSimple ? 'simple' : ''), dropClassName]\"\r\n          :style=\"contentStyle\"\r\n          ref=\"dropDownContentRef\"\r\n          @mouseenter=\"onMouseenter\"\r\n          @mouseleave=\"onMouseleave\"\r\n        >\r\n          <template v-if=\"transfer\">\r\n            <template v-if=\"open\">\r\n              <div v-if=\"isSimple\" class=\"popper-arrow\" data-popper-arrow></div>\r\n              <slot name=\"menu\">\r\n              </slot>\r\n            </template>\r\n          </template>\r\n          <template v-else>\r\n            <div v-if=\"isSimple\" class=\"popper-arrow\" data-popper-arrow></div>\r\n            <slot name=\"menu\">\r\n              {{ title }}\r\n            </slot>\r\n          </template>\r\n        </ul>\r\n      </teleport>\r\n    </details>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  ref,\r\n  unref,\r\n  watch,\r\n  computed,\r\n  onMounted,\r\n  provide,\r\n  defineComponent,\r\n  CSSProperties\r\n} from 'vue'\r\nimport { dropdownProps, DropdownContextKey } from './dropdown'\r\nimport { createPopper } from '@popperjs/core'\r\nimport { unwrapMeasurableEl } from './../../popper/src/utils'\r\nimport { useDelayedToggle, useModelToggle, useSize } from '@sgui-plus/hooks'\r\nimport { useNamespace, useZIndex } from '@sgui-plus/hooks'\r\nimport { ClickOutside } from '@sgui-plus/directives'\r\nimport { SgIcon } from '@sgui-plus/components/icon'\r\nimport { ArrowDown } from '@sgui-plus/icons-vue'\r\n\r\nexport default defineComponent({\r\n  name: 'SgDropdown',\r\n  props: dropdownProps,\r\n  components: {\r\n    SgIcon,\r\n    ArrowDown\r\n  },\r\n  directives: {\r\n    'ClickOutside': ClickOutside\r\n  },\r\n  emits: ['on-visible-change', 'on-click', 'on-clickoutside'],\r\n  setup(props, { emit, expose }) {\r\n    const ns = useNamespace('dropdown')\r\n    const { nextZIndex } = useZIndex()\r\n    let instance: ReturnType<typeof createPopperInstance> | null = null\r\n    const contentZIndex = ref(nextZIndex())\r\n    const open = ref(false)\r\n    const dropdownItemMouseEnter = ref(false)\r\n\r\n    const dropdownRef = ref<HTMLElement | null>(null)\r\n    const dropDownTextRef = ref<HTMLElement | null>(null)\r\n    const dropDownContentRef = ref<HTMLElement | null>(null)\r\n    const contentStyle = computed<CSSProperties>(\r\n      () => [{\r\n        minWidth: props.calculateDropdownMinWidth\r\n          ? dropDownTextRef.value\r\n            ? dropDownTextRef.value?.clientWidth + 'px'\r\n            : 'auto'\r\n          : 'auto',\r\n        maxHeight: props.maxHeight,\r\n        overflow: 'inherit',\r\n        zIndex: unref(contentZIndex)\r\n      }] as any\r\n    )\r\n\r\n    const isSimple = computed<Boolean>(() => {\r\n      return props.dropdownStyle === 'simple'\r\n    })\r\n\r\n    const dropdownSize = useSize()\r\n    const dropdownTriggerKls = computed(() => [\r\n      [dropdownSize.value ? `sg-dropdown--${dropdownSize.value}` : '', ns.e('trigger')],\r\n    ])\r\n\r\n    const createPopperInstance = ({\r\n      referenceEl,\r\n      popperContentEl,\r\n    }) => {\r\n      return createPopper(referenceEl, popperContentEl, {\r\n        placement: props.placement,\r\n        modifiers: [{\r\n          name: 'offset',\r\n          options: {\r\n            offset: [0, 2]\r\n          }\r\n        }]\r\n      })\r\n    }\r\n    function updatePopper() {\r\n      contentZIndex.value = nextZIndex()\r\n    }\r\n\r\n    function onClick(event) {\r\n      event?.preventDefault()\r\n      if (isTargetTrigger(['click']) || isTargetTrigger(['contextMenu']) && open.value)\r\n        onTrigger()\r\n    }\r\n    function onContextMenu(event) {\r\n      if (!isTargetTrigger(['contextMenu'])) return\r\n      event?.preventDefault()\r\n      onTrigger()\r\n    }\r\n    function onMouseenter() {\r\n      dropdownItemMouseEnter.value = true\r\n      if (!isTargetTrigger(['hover'])) return\r\n      onOpen()\r\n    }\r\n    function onMouseleave() {\r\n      dropdownItemMouseEnter.value = false\r\n      if (!isTargetTrigger(['hover'])) return\r\n      onClose()\r\n    }\r\n\r\n    const { show, hide } = useModelToggle({\r\n      indicator: open,\r\n      onShow: () => {\r\n        popperRefresh()\r\n      }\r\n    })\r\n\r\n    const { onOpen, onClose } = useDelayedToggle({\r\n      showAfter: ref(0),\r\n      hideAfter: ref(200),\r\n      autoClose: ref(0),\r\n      open: show,\r\n      close: hide\r\n    })\r\n\r\n    function isTargetTrigger(types) {\r\n      if (isTriggerCustom()) return false\r\n      return types.includes(props.trigger)\r\n    }\r\n\r\n    function popperRefresh() {\r\n      const timer = setTimeout(() => {\r\n        instance?.update()\r\n        clearTimeout(timer)\r\n      })\r\n    }\r\n\r\n    function onTrigger() {\r\n      !open.value ? onOpen() : onClose()\r\n    }\r\n\r\n    function onClickItem (val) {\r\n      emit('on-click', val)\r\n      if (!props.hideAfterClick || isTriggerCustom()) return\r\n      onClose()\r\n    }\r\n\r\n    function onClickOutside (event) {\r\n      if (!isTriggerCustom() || dropdownItemMouseEnter.value) return\r\n      emit('on-clickoutside', event)\r\n    }\r\n\r\n    function isTriggerCustom () {\r\n      return props.trigger === 'custom'\r\n    }\r\n\r\n    provide(DropdownContextKey, {\r\n      onClickItem\r\n    })\r\n\r\n    watch(() => open.value, () => {\r\n      emit('on-visible-change', open.value)\r\n    })\r\n\r\n    watch(\r\n      () => props.visible,\r\n      (val) => {\r\n        val ? onOpen() : onClose()\r\n      }\r\n    )\r\n\r\n    onMounted(() => {\r\n      let updateHandle: ReturnType<typeof watch>\r\n      watch(\r\n        () => unwrapMeasurableEl(dropDownTextRef.value),\r\n        (val) => {\r\n          updateHandle?.()\r\n          if (val) {\r\n            const popperContentEl = unref(dropDownContentRef)!\r\n            instance = createPopperInstance({\r\n              referenceEl: val,\r\n              popperContentEl,\r\n            })\r\n\r\n            updateHandle = watch(\r\n              () => val!.getBoundingClientRect(),\r\n              () => {\r\n                updatePopper()\r\n              },\r\n              {\r\n                immediate: true,\r\n              }\r\n            )\r\n          } else {\r\n            dropDownContentRef.value = null\r\n          }\r\n        },\r\n        {\r\n          immediate: true,\r\n        }\r\n      )\r\n    })\r\n\r\n    expose({\r\n      handleOpen: onOpen,\r\n      handleClose: onClose,\r\n      popperRefresh\r\n    })\r\n\r\n    return {\r\n      ns,\r\n      open,\r\n      isSimple,\r\n      onTrigger,\r\n      onClick,\r\n      onContextMenu,\r\n      onMouseenter,\r\n      onMouseleave,\r\n      onClickOutside,\r\n      dropdownRef,\r\n      dropDownTextRef,\r\n      dropDownContentRef,\r\n      contentStyle,\r\n      dropdownTriggerKls\r\n    }\r\n  }\r\n})\r\n</script>\r\n"],"names":["_resolveDirective","_withDirectives","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createVNode","_withCtx","_createBlock","_Teleport","_normalizeStyle","_Fragment","_createCommentVNode"],"mappings":"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"}