types: props and events

Author: Akryum

docs/.vitepress/components/DropdownSimpleExample.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+function log (...args) {
+  console.log(...args)
+}
+</script>
+
 <template>
   <div class="example flex justify-center">
     <VDropdown
@@ -19,13 +25,3 @@
     </VDropdown>
   </div>
 </template>
-
-<script>
-export default {
-  methods: {
-    log (...args) {
-      console.log(...args)
-    },
-  },
-}
-</script>

docs/.vitepress/theme/global.d.ts

@@ -0,0 +1,9 @@
+import { Dropdown, Tooltip, Menu } from 'floating-vue'
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VDropdown: typeof Dropdown
+    VTooltip: typeof Tooltip
+    VMenu: typeof Menu
+  }
+}

docs/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "include": [
+    ".vitepress/**/*.ts",
+    ".vitepress/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.js"
+  ]
+}

packages/floating-vue/src/components/Popper.ts

@@ -273,18 +273,18 @@ export default () => defineComponent({
     },
   },
 
-  emits: [
-    'show',
-    'hide',
-    'update:shown',
-    'apply-show',
-    'apply-hide',
-    'close-group',
-    'close-directive',
-    'auto-hide',
-    'resize',
-    'dispose',
-  ],
+  emits: {
+    show: () => true,
+    hide: () => true,
+    'update:shown': (shown: boolean) => true,
+    'apply-show': () => true,
+    'apply-hide': () => true,
+    'close-group': () => true,
+    'close-directive': () => true,
+    'auto-hide': () => true,
+    'resize': () => true,
+    'dispose': () => true,
+  },
 
   data () {
     return {

packages/floating-vue/src/components/PopperWrapper.vue

@@ -14,12 +14,23 @@
       classes,
       result,
     }"
+    v-bind="$props"
     :theme="finalTheme"
     :target-nodes="getTargetNodes"
     :popper-node="() => ($refs as any).popperContent.$el"
     :class="[
       themeClass,
     ]"
+    @show="() => $emit('show')"
+    @hide="() => $emit('hide')"
+    @update:shown="(shown) => $emit('update:shown', shown)"
+    @apply-show="() => $emit('apply-show')"
+    @apply-hide="() => $emit('apply-hide')"
+    @close-group="() => $emit('close-group')"
+    @close-directive="() => $emit('close-directive')"
+    @auto-hide="() => $emit('auto-hide')"
+    @resize="() => $emit('resize')"
+    @dispose="() => $emit('dispose')"
   >
     <slot
       :shown="isShown"
@@ -51,12 +62,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import Popper from './Popper.vue'
 import PopperContent from './PopperContent.vue'
 import PopperMethods from './PopperMethods'
 import ThemeClass from './ThemeClass'
 
+export type TriggerEvent = 'hover' | 'click' | 'focus' | 'touch'
+
 export default defineComponent({
   name: 'VPopperWrapper',
 
@@ -75,6 +88,215 @@ export default defineComponent({
       type: String,
       default: null,
     },
+
+    referenceNode: {
+      type: Function as PropType<() => Element>,
+      default: null,
+    },
+
+    shown: {
+      type: Boolean,
+      default: false,
+    },
+
+    showGroup: {
+      type: String,
+      default: null,
+    },
+
+    // eslint-disable-next-line vue/require-prop-types
+    ariaId: {
+      default: null,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    positioningDisabled: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    placement: {
+      type: String,
+      default: undefined,
+    },
+
+    delay: {
+      type: [String, Number, Object] as PropType<string | number | { show: number, hide: number }>,
+      default: undefined,
+    },
+
+    distance: {
+      type: [Number, String],
+      default: undefined,
+    },
+
+    skidding: {
+      type: [Number, String],
+      default: undefined,
+    },
+
+    triggers: {
+      type: Array as PropType<Array<TriggerEvent>>,
+      default: undefined,
+    },
+
+    showTriggers: {
+      type: [Array, Function] as PropType<Array<TriggerEvent> | ((triggers: Array<TriggerEvent>) => Array<TriggerEvent>)>,
+      default: undefined,
+    },
+
+    hideTriggers: {
+      type: [Array, Function] as PropType<Array<TriggerEvent> | ((triggers: Array<TriggerEvent>) => Array<TriggerEvent>)>,
+      default: undefined,
+    },
+
+    popperTriggers: {
+      type: Array as PropType<Array<TriggerEvent>>,
+      default: undefined,
+    },
+
+    popperShowTriggers: {
+      type: [Array, Function] as PropType<Array<TriggerEvent> | ((triggers: Array<TriggerEvent>) => Array<TriggerEvent>)>,
+      default: undefined,
+    },
+
+    popperHideTriggers: {
+      type: [Array, Function] as PropType<Array<TriggerEvent> | ((triggers: Array<TriggerEvent>) => Array<TriggerEvent>)>,
+      default: undefined,
+    },
+
+    container: {
+      type: [String, Object, Element, Boolean],
+      default: undefined,
+    },
+
+    boundary: {
+      type: [String, Element],
+      default: undefined,
+    },
+
+    strategy: {
+      type: String,
+      default: undefined,
+    },
+
+    autoHide: {
+      type: [Boolean, Function] as PropType<boolean | ((event: Event) => boolean)>,
+      default: undefined,
+    },
+
+    handleResize: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    instantMove: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    eagerMount: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    popperClass: {
+      type: [String, Array, Object],
+      default: undefined,
+    },
+
+    computeTransformOrigin: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    /**
+     * @deprecated
+     */
+    autoMinSize: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    autoSize: {
+      type: [Boolean, String],
+      default: undefined,
+    },
+
+    /**
+     * @deprecated
+     */
+    autoMaxSize: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    autoBoundaryMaxSize: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    preventOverflow: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    overflowPadding: {
+      type: [Number, String],
+      default: undefined,
+    },
+
+    arrowPadding: {
+      type: [Number, String],
+      default: undefined,
+    },
+
+    arrowOverflow: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    flip: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    shift: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    shiftCrossAxis: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    noAutoFocus: {
+      type: Boolean,
+      default: undefined,
+    },
+
+    disposeTimeout: {
+      type: Number,
+      default: undefined,
+    },
+  },
+
+  emits: {
+    show: () => true,
+    hide: () => true,
+    'update:shown': (shown: boolean) => true,
+    'apply-show': () => true,
+    'apply-hide': () => true,
+    'close-group': () => true,
+    'close-directive': () => true,
+    'auto-hide': () => true,
+    'resize': () => true,
+    'dispose': () => true,
   },
 
   computed: {

packages/floating-vue/src/index.ts

@@ -40,6 +40,8 @@ export { hideAllPoppers } from './components/Popper'
 export * from './util/events'
 export { placements } from './util/popper'
 export type { Placement } from './util/popper'
+// Types
+export type { TriggerEvent } from './components/PopperWrapper.vue'
 
 /* Vue plugin */