sb-floating-panel-vue 1.0.0 → 3.0.0

package/dist/types.d.ts

@@ -0,0 +1,169 @@
+/** Side of the reference the panel is placed on. */
+export type SbSide = 'top' | 'right' | 'bottom' | 'left';
+/** Alignment of the panel along the side. */
+export type SbAlignment = 'start' | 'end';
+/** Placement of the panel relative to the reference (same values as Floating UI). */
+export type SbPlacement = SbSide | `${SbSide}-${SbAlignment}`;
+/** CSS position strategy of the panel. */
+export type SbStrategy = 'absolute' | 'fixed';
+/**
+ * How the reference opens the floating panel.
+ * - `click`: clicking (or pressing Enter/Space on) `SbReference` toggles the panel.
+ * - `manual`: the panel opens only through `v-model:open`, the slot props or the exposed methods.
+ */
+export type SbTrigger = 'click' | 'manual';
+/**
+ * Props for the `SbContainer` component: positioning, open state and interaction.
+ */
+export interface SbContainerProps {
+    /**
+     * Preferred placement of the floating panel relative to the reference.
+     * The panel flips to the opposite side when there is not enough space.
+     * @default 'bottom-start'
+     */
+    placement?: SbPlacement;
+    /**
+     * CSS position strategy of the floating panel.
+     * Use `fixed` when the reference lives inside a scroll container or a fixed layout.
+     * @default 'absolute'
+     */
+    strategy?: SbStrategy;
+    /**
+     * Distance in pixels between the reference and the floating panel.
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * Minimum distance in pixels between the floating panel and the viewport edges.
+     * @default 8
+     */
+    padding?: number;
+    /**
+     * Makes the floating panel as wide as the reference.
+     * - `true`: sets `width` to the reference width.
+     * - `'min'`: sets `min-width` to the reference width, so the panel can grow wider.
+     * - `false`: no width is set; `--sbf-reference-width` is still available to your CSS.
+     * @default false
+     */
+    matchWidth?: boolean | 'min';
+    /**
+     * Hides the floating panel (`visibility: hidden`) when the reference is scrolled out of view.
+     * @default false
+     */
+    hideWhenDetached?: boolean;
+    /**
+     * Open state, bound with `v-model:open`. Leave it unset to let the container manage it.
+     */
+    open?: boolean;
+    /**
+     * Initial open state when `v-model:open` is not used.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Prevents the panel from opening and closes it if it is open.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * How the reference opens the panel.
+     * @default 'click'
+     */
+    trigger?: SbTrigger;
+    /**
+     * Closes the panel when the Escape key is pressed.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Closes the panel on a pointer press outside the reference and the panel.
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
+}
+/**
+ * Props passed to the default slot of `SbContainer`.
+ */
+export interface SbContainerSlotProps {
+    /** Whether the panel is open. */
+    isOpen: boolean;
+    /** Opens the panel. */
+    open: () => void;
+    /** Closes the panel. */
+    close: () => void;
+    /** Toggles the panel. */
+    toggle: () => void;
+    /** Placement resolved by Floating UI, after `flip`. */
+    placement: SbPlacement;
+    /** Side of the resolved placement. */
+    side: SbSide;
+}
+/**
+ * Methods exposed by `SbContainer` through a template ref.
+ */
+export interface SbContainerExposed {
+    /** Opens the panel. */
+    open: () => void;
+    /** Closes the panel. */
+    close: () => void;
+    /** Toggles the panel. */
+    toggle: () => void;
+    /** Recomputes the panel position. */
+    update: () => void;
+}
+/**
+ * Props for the `SbReference` component, the element that anchors and toggles the panel.
+ */
+export interface SbReferenceProps {
+    /**
+     * HTML tag to render. A `button` gets `type="button"`; any tag other than `button` and `a`
+     * gets `role="button"`, `tabindex="0"` and Enter/Space handling.
+     * @default 'button'
+     */
+    as?: string;
+    /**
+     * Value of `aria-haspopup`, matching the `role` of `SbFloating`.
+     * @default 'dialog'
+     */
+    ariaHaspopup?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true' | 'false';
+}
+/**
+ * Props for the `SbFloating` component, the teleported floating panel.
+ */
+export interface SbFloatingProps {
+    /**
+     * HTML tag of the panel element (the one that receives your `class`, `style` and attributes).
+     * @default 'div'
+     */
+    as?: string;
+    /**
+     * ARIA role of the panel.
+     * @default 'dialog'
+     */
+    role?: string;
+    /**
+     * Name of a Vue `<Transition>` defined by your CSS (`<name>-enter-active`, …).
+     * The classes are applied to the panel element. No animation when unset.
+     */
+    transition?: string;
+    /**
+     * Teleport target (CSS selector or element).
+     * @default 'body'
+     */
+    teleportTo?: string | HTMLElement;
+    /**
+     * Renders the panel in place instead of teleporting it.
+     * @default false
+     */
+    teleportDisabled?: boolean;
+    /**
+     * `z-index` of the positioned wrapper.
+     */
+    zIndex?: number | string;
+    /**
+     * Moves focus inside the panel once it is positioned: to the first element with
+     * `autofocus`, otherwise to the first focusable element, otherwise to the panel itself.
+     * @default false
+     */
+    autoFocus?: boolean;
+}

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "sb-floating-panel-vue",
-  "version": "1.0.0",
-  "description": "A flexible and lightweight Vue 3 floating panel system powered by @floating-ui/vue — includes composable hooks and plug-and-play components with arrow and resize support.",
+  "version": "3.0.0",
+  "description": "Headless Vue 3 floating panel components (dropdowns, popovers, menus) powered by @floating-ui/vue: positioning, accessibility and open state handled, zero CSS shipped.",
   "keywords": [
     "vue",
     "vue3",
     "floating-ui",
     "floating panel",
-    "tooltip",
     "popover",
     "dropdown",
+    "menu",
     "floating",
     "positioning",
-    "arrow",
+    "headless",
+    "unstyled",
     "teleport",
-    "resize",
-    "resize-observer",
+    "accessibility",
     "vue-components",
-    "composable",
     "vue-library"
   ],
   "author": {
@@ -25,7 +24,7 @@
     "url": "https://www.stefano-biddau.com"
   },
   "license": "MIT",
-    "repository": {
+  "repository": {
     "type": "git",
     "url": "https://github.com/stefanBid/sb-floating-panel-vue"
   },
@@ -41,14 +40,6 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/sb-floating-panel.es.js",
       "require": "./dist/sb-floating-panel.umd.js"
-    },
-    "./style.css": {
-      "default": "./dist/sb-floating-panel-vue.css"
-    }
-  },
-  "typesVersions": {
-    "*": {
-      "*": ["dist/index.d.ts"]
     }
   },
   "files": [
@@ -58,28 +49,35 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint . --ext .ts",
-    "check": "vue-tsc --noEmit"
+    "lint": "eslint .",
+    "check": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.playground.json",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "peerDependencies": {
+    "@floating-ui/vue": "^2.0.1",
     "vue": "^3.5.13"
   },
-  "dependencies": {
-    "@floating-ui/vue": "^1.1.6"
-  },
   "devDependencies": {
-    "@types/node": "^22.15.18",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "eslint": "^9.26.0",
-    "eslint-plugin-prettier": "^5.4.0",
-    "eslint-plugin-vue": "^10.1.0",
-    "vue-eslint-parser": "10.1.3",
-    "prettier": "^3.5.3",
-    "typescript": "~5.7.2",
-    "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.3",
-    "vue-tsc": "^2.2.10"
+    "@floating-ui/vue": "^2.0.1",
+    "@types/node": "^26.6.5",
+    "@typescript-eslint/eslint-plugin": "^8.71.2",
+    "@typescript-eslint/parser": "^8.71.2",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vitest/coverage-v8": "^5.0.5",
+    "@vue/language-core": "^3.3.13",
+    "@vue/test-utils": "^2.5.1",
+    "eslint": "^10.13.0",
+    "eslint-plugin-prettier": "^5.5.7",
+    "eslint-plugin-vue": "^10.11.1",
+    "happy-dom": "^21.0.3",
+    "prettier": "^3.9.10",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.4",
+    "vite-plugin-dts": "^5.1.2",
+    "vitest": "^5.0.5",
+    "vue": "^3.5.44",
+    "vue-eslint-parser": "10.4.1",
+    "vue-tsc": "^3.3.13"
   }
 }

package/dist/sb-floating-panel-vue.css

@@ -1 +0,0 @@
-.floating-container[data-v-33e40585]{width:fit-content;height:fit-content}.fade-enter-active[data-v-366682ad],.fade-leave-active[data-v-366682ad]{transition:opacity var(--sb-transition-duration) ease-in-out}.fade-enter-from[data-v-366682ad],.fade-leave-to[data-v-366682ad]{opacity:0}.fade-enter-to[data-v-366682ad],.fade-leave-from[data-v-366682ad]{opacity:1}.scale-fade-enter-active[data-v-366682ad],.scale-fade-leave-active[data-v-366682ad]{transition:opacity var(--sb-transition-duration) ease-in-out,transform var(--sb-transition-duration) ease-in-out}.scale-fade-enter-from[data-v-366682ad],.scale-fade-leave-to[data-v-366682ad]{opacity:0;transform:scale(.95)}.scale-fade-enter-to[data-v-366682ad],.scale-fade-leave-from[data-v-366682ad]{opacity:1;transform:scale(1)}