@ulu/frontend-vue 0.6.2 → 0.6.3

package/dist/plugins/popovers/UluPopover.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluPopover.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/popovers/UluPopover.vue"],"names":[],"mappings":"AAuDA;wBA4aqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QASG"}
+{"version":3,"file":"UluPopover.vue.d.ts","sourceRoot":"","sources":["../../../lib/plugins/popovers/UluPopover.vue"],"names":[],"mappings":"AAuDA;wBAwfqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QASG"}

package/dist/plugins/popovers/UluPopover.vue.js

@@ -10,29 +10,67 @@ const Q = ["id", "disabled", "aria-expanded", "aria-controls", "aria-label"], W
 }, ie = {
   __name: "UluPopover",
   props: {
+    /**
+     * Text for popover button
+     */
     triggerText: String,
+    /**
+     * Add optional aria-label to button for icons/etc
+     */
     triggerAlt: String,
+    /**
+     * Disable trigger button
+     */
     disabled: Boolean,
+    /**
+     * Tooltip text for trigger button
+     */
     tooltip: String,
+    /**
+     * Popover size (ie large, etc)
+     */
     size: String,
+    /**
+     * No padding on popover content
+     */
     noPadding: Boolean,
+    /**
+     * Floating UI config (merged with defaults for popover)
+     * - See useUluFloating() composable for config API
+     */
     config: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * Mount this component already open state
+     */
     startOpen: Boolean,
+    /**
+     * Active class for trigger button
+     */
     activeClass: {
       type: String,
       default: "is-active"
     },
+    /**
+     * Add custom classes to specific elements
+     * { trigger, content }
+     */
     classes: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * Close popover when click is outside
+     */
     clickOutsideCloses: {
       type: Boolean,
       default: !0
     },
+    /**
+     * Direct focus when open/closing popover
+     */
     directFocus: {
       type: Function,
       default: ({ isOpen: e, content: g }) => {

package/lib/composables/useUluFloating.js

@@ -19,10 +19,12 @@ import {
 /**
  * @typedef {object} UluFloatingConfig
  * @property {Placement} placement - The placement of the floating element.
- * @property {boolean} inline - Whether the floating element is inline.
- * @property {number} offset - The offset of the floating element.
- * @property {boolean} arrow - Whether the floating element has an arrow.
- * @property {function} onReady - Callback function when the floating element is ready.
+ * @property {Boolean|Object} inline - Whether the floating element is inline. If object is passed will be passed as configuration for the floating ui "inline" plugin.
+ * @property {Number|Object} offset - The offset of the floating element. If object is passed will be passed as configuration for the floating ui "offset" plugin.
+ * @property {Object} flip - This plugin is always added, if object is passed will be passed as configuration for the floating ui "flip" plugin.
+ * @property {Object} shift - This plugin is always added, if object is passed will be passed as configuration for the floating ui "shift" plugin.
+ * @property {Boolean} arrow - Whether the floating element has an arrow.
+ * @property {Function} onReady - Callback function when the floating element is ready.
  */
 
 /**
@@ -54,10 +56,10 @@ export function useUluFloating(trigger, content, config) {
     ([configValue, arrowEl]) => {
       const mw = [];
       if (!configValue) return;
-      if (configValue.inline) mw.push(inline());
+      if (configValue.inline) mw.push(inline(configValue.inline));
       if (configValue.offset) mw.push(offset(configValue.offset));
-      mw.push(flip());
-      mw.push(shift());
+      mw.push(flip(configValue.flip));
+      mw.push(shift(configValue.shift));
       if (configValue.arrow && arrowEl) {
         mw.push(arrow({ element: arrowEl }));
       }

package/lib/plugins/popovers/UluPopover.vue

@@ -63,29 +63,67 @@
 
   const emit = defineEmits(["toggle"]);
   const props = defineProps({
+    /**
+     * Text for popover button
+     */
     triggerText: String,
+    /**
+     * Add optional aria-label to button for icons/etc
+     */
     triggerAlt: String,
+    /**
+     * Disable trigger button
+     */
     disabled: Boolean,
+    /**
+     * Tooltip text for trigger button
+     */
     tooltip: String,
+    /**
+     * Popover size (ie large, etc)
+     */
     size: String,
+    /**
+     * No padding on popover content
+     */
     noPadding: Boolean,
+    /**
+     * Floating UI config (merged with defaults for popover)
+     * - See useUluFloating() composable for config API
+     */
     config: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * Mount this component already open state
+     */
     startOpen: Boolean,
+    /**
+     * Active class for trigger button
+     */
     activeClass: {
       type: String,
       default: "is-active"
     },
+    /**
+     * Add custom classes to specific elements
+     * { trigger, content }
+     */
     classes: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * Close popover when click is outside
+     */
     clickOutsideCloses: {
       type: Boolean,
       default: true
     },
+    /**
+     * Direct focus when open/closing popover
+     */
     directFocus: {
       type: Function,
       default: ({ isOpen, content }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [