@ulu/frontend-vue 0.6.1 → 0.6.3

package/dist/plugins/index.d.ts

@@ -1,6 +1,6 @@
 export { default as corePlugin } from './core/index.js';
-export { default as modalsPlugin } from './modals/index.js';
 export { default as toastPlugin } from './toast/index.js';
 export { default as breakpointsPlugin } from './breakpoints/index.js';
 export { default as popoversPlugin, useTooltip, useTooltipFollow } from './popovers/index.js';
+export { default as modalsPlugin, useModals } from './modals/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/plugins/modals/index.d.ts

@@ -1,9 +1,11 @@
+import { useModals } from './useModals.js';
 /**
  * Modals Vue Plugin
  * @param {Object} App Vue app instance passed to plugin
  * @param {UluModalsPluginOptions} userOptions Options to change (see defaults)
  */
 export default function install(app: any, userOptions: UluModalsPluginOptions): void;
+export { useModals };
 /**
  * Default plugin options
  */

package/dist/plugins/modals/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/modals/index.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH,uDAFW,sBAAsB,QA8BhC;;;;;;;;;;;;kBAxCa,eAAe"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/modals/index.js"],"names":[],"mappings":"AAsBA;;;;GAIG;AACH,uDAFW,sBAAsB,QA8BhC;;;;;;;;;;;;;kBAxCa,eAAe;;0BANH,gBAAgB"}

package/dist/plugins/modals/useModals.js

@@ -0,0 +1,10 @@
+import { inject as r } from "vue";
+const l = () => {
+  const o = r("uluModals");
+  if (!o)
+    throw new Error("Modals plugin not installed");
+  return o;
+};
+export {
+  l as useModals
+};

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/index.js

@@ -7,6 +7,6 @@
 
 export { default as corePlugin } from './core/index.js';
 export { default as popoversPlugin, useTooltip, useTooltipFollow } from './popovers/index.js';
-export { default as modalsPlugin } from './modals/index.js';
+export { default as modalsPlugin, useModals } from './modals/index.js';
 export { default as toastPlugin } from './toast/index.js';
 export { default as breakpointsPlugin } from './breakpoints/index.js';

package/lib/plugins/modals/index.js

@@ -7,6 +7,7 @@
 import UluModalsDisplay from "./UluModalsDisplay.vue";
 import UluModal from "../../components/collapsible/UluModal.vue";
 import { createApi, modalsState } from "./api.js";
+import { useModals } from "./useModals.js";
 
 /**
  * Default plugin options
@@ -52,4 +53,9 @@ export default function install(app, userOptions) {
   // Global property for modals component to access state
   // and for debugging logging if needed
   app.config.globalProperties.$uluModalsState = modalsState;
-}
+}
+
+/**
+ * Public export for composable function
+ */
+export { useModals };

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.1",
+  "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": [