@ulu/frontend-vue 0.1.3-beta.4 → 0.1.3-beta.6

package/dist/types/components/elements/UluRule.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    large: boolean;
+    semantic: boolean;
+    short: boolean;
+    light: boolean;
+    margin?: string | undefined;
+    modifiers?: string | unknown[] | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+declare const props: {
+    readonly large: boolean;
+    readonly semantic: boolean;
+    readonly short: boolean;
+    readonly light: boolean;
+    readonly margin?: string | undefined;
+    readonly modifiers?: string | unknown[] | undefined;
+};
+//# sourceMappingURL=UluRule.vue.d.ts.map

package/dist/types/components/elements/UluRule.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluRule.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/elements/UluRule.vue"],"names":[],"mappings":";YAgJmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;;AA3FtC;;;;;;;EAyBG"}

package/dist/types/components/index.d.ts

@@ -20,6 +20,7 @@ export { default as UluExternalLink } from "./elements/UluExternalLink.vue";
 export { default as UluIcon } from "./elements/UluIcon.vue";
 export { default as UluList } from "./elements/UluList.vue";
 export { default as UluMain } from "./elements/UluMain.vue";
+export { default as UluRule } from "./elements/UluRule.vue";
 export { default as UluSpokeSpinner } from "./elements/UluSpokeSpinner.vue";
 export { default as UluTag } from "./elements/UluTag.vue";
 export { default as UluSelectableMenu } from "./forms/UluSelectableMenu.vue";

package/dist/types/components/systems/facets/UluFacetsFilterSelects.vue.d.ts

@@ -1,11 +1,30 @@
-declare const _default: import("vue").DefineComponent<{}, {
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
     $emit: typeof emit;
     $props: Partial<typeof props>;
+    classes: Record<string, any>;
     facets: unknown[];
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;
+type __VLS_Slots = {
+    label?: ((props: {}) => any) | undefined;
+} & {
+    optionAll?: ((props: {
+        group: unknown;
+    }) => any) | undefined;
+} & {
+    option?: ((props: {
+        group: unknown;
+        option: any;
+        index: number;
+    }) => any) | undefined;
+};
 declare const emit: (event: "facet-change", ...args: any[]) => void;
 declare const props: {
+    readonly classes: Record<string, any>;
     readonly facets: unknown[];
 };
 //# sourceMappingURL=UluFacetsFilterSelects.vue.d.ts.map

package/dist/types/components/systems/facets/UluFacetsFilterSelects.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluFacetsFilterSelects.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/facets/UluFacetsFilterSelects.vue"],"names":[],"mappings":";WA+KkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;AA9FxC,oEAA2C;AAP3C;;EAKG"}
+{"version":3,"file":"UluFacetsFilterSelects.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/facets/UluFacetsFilterSelects.vue"],"names":[],"mappings":"wBAqPqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;2OAGrC;;;;;;;;;;;;;;AA5HH,oEAA2C;AApB3C;;;EAeG"}

package/dist/types/plugins/popovers/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../lib/plugins/popovers/defaults.js"],"names":[],"mappings":";gBAGY,MAAM;;;;;;;;;iBAuDN,MAAM"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../lib/plugins/popovers/defaults.js"],"names":[],"mappings":";gBAGY,MAAM;;;;;;;;;iBA8CN,MAAM"}

package/dist/types/plugins/popovers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/plugins/popovers/index.js"],"names":[],"mappings":"AAiDA;;;;GAIG;AACH,qCAHW,MAAM,gBACN,MAAM,QAuIhB;AArLD;;GAEG;AACH,kCAAmC,mBAAmB,CAAC;AAEvD;;GAEG;AACH,gCAAiC,iBAAiB,CAAC;AAEnD;;GAEG;AACH,yBAA0B,oBAAoB,CAAC;;;AAcxC,gDAJI,GAAC,mBACD,MAAM,GACJ,MAAM,GAAC,IAAI,CAgBvB;2BA3C0B,iBAAiB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/plugins/popovers/index.js"],"names":[],"mappings":"AAiDA;;;;GAIG;AACH,qCAHW,MAAM,gBACN,MAAM,QAgJhB;AA9LD;;GAEG;AACH,kCAAmC,mBAAmB,CAAC;AAEvD;;GAEG;AACH,gCAAiC,iBAAiB,CAAC;AAEnD;;GAEG;AACH,yBAA0B,oBAAoB,CAAC;;;AAcxC,gDAJI,GAAC,mBACD,MAAM,GACJ,MAAM,GAAC,IAAI,CAgBvB;2BA3C0B,iBAAiB"}

package/lib/components/collapsible/UluModal.vue

@@ -216,14 +216,14 @@
       // Define the internal modifiers object as a computed property (so it can react to changes)
       const internalModifiers = computed(() => ({
         [props.position]: props.position, 
-        "resize": props.allowResize,
-        "no-resize": !props.allowResize,
-        "no-header": !hasHeader.value,
-        "body-fills": props.bodyFills,
-        "no-backdrop": props.noBackdrop,
-        "no-min-height": props.noMinHeight,
-        "non-modal": props.nonModal,
-        "resizer-active": resizerEnabled.value,
+        "resize" : props.allowResize,
+        "no-resize" : !props.allowResize,
+        "no-header" : !hasHeader.value,
+        "body-fills" : props.bodyFills,
+        "no-backdrop" : props.noBackdrop,
+        "no-min-height" : props.noMinHeight,
+        "non-modal" : props.nonModal,
+        "resizer-active" : resizerEnabled.value,
       }));
 
       const { resolvedModifiers } = useModifiers({ 

package/lib/components/elements/UluRule.vue

@@ -0,0 +1,49 @@
+<template>
+  <hr v-if="semantic" class="rule" :class="resolvedModifiers">
+  <div v-else class="rule" :class="resolvedModifiers"></div>
+</template>
+
+<script setup>
+  import { computed } from "vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  const props = defineProps({
+    /**
+     * Whether to use the actual <hr> vs superficial <div></div> for rule element
+     */
+    semantic: Boolean,
+    /**
+     * Use short modifier
+     */
+    short: Boolean,
+    /**
+     * Optional margin (keyword from your rule margins config in frontend)
+     */
+    margin: String,
+    /**
+     * Add light modifier (if set, usually exists, this is for convenience, use modifiers prop if you have custom naming)
+     */
+    light: Boolean,
+    /**
+     * Add large modifier (if set, usually exists, this is for convenience, use modifiers prop if you have custom naming)
+     */
+    large: Boolean,
+    /**
+     * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
+     */
+    modifiers: [String, Array]
+  });
+
+  const internalModifiers = computed(() => ({
+    "short" : props.short,
+    "light" : props.light,
+    "large" : props.large,
+    [`margin-${ props.margin }`] : props.margin
+  }));
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "rule",
+    internal: internalModifiers 
+  });
+</script>

package/lib/components/index.js

@@ -25,6 +25,7 @@ export { default as UluExternalLink } from './elements/UluExternalLink.vue';
 export { default as UluIcon } from './elements/UluIcon.vue';
 export { default as UluList } from './elements/UluList.vue';
 export { default as UluMain } from './elements/UluMain.vue';
+export { default as UluRule } from './elements/UluRule.vue';
 export { default as UluSpokeSpinner } from './elements/UluSpokeSpinner.vue';
 export { default as UluTag } from './elements/UluTag.vue';
 export { default as UluSelectableMenu } from './forms/UluSelectableMenu.vue';

package/lib/components/systems/facets/UluFacetsFilterSelects.vue

@@ -1,26 +1,40 @@
 <template>
-  <div class="facets-dropdown-filters">
+  <div class="facets-dropdown-filters" :class="classes.container">
     <div
       class="facets-dropdown-filters__group"
+      :class="classes.group"
       v-for="group in facets"
       :key="group.uid"
     >
-      <label :for="`facet-dropdown-${group.uid}`" class="facets-dropdown-filters__label">
-        {{ group.name }}
+      <label 
+        :for="`facet-dropdown-${ group.uid }`" 
+        class="facets-dropdown-filters__label"
+        :class="classes.label"
+      >
+        <slot name="label">
+          {{ group.name }}
+        </slot>
       </label>
       <select
         :id="`facet-dropdown-${group.uid}`"
         class="facets-dropdown-filters__select"
+        :class="classes.select"
         @change="onFilterChange(group, $event)"
       >
-        <option value="">All {{ group.name }}s</option>
+        <option value="">
+          <slot name="optionAll" :group="group">
+            All {{ group.name }}s
+          </slot>
+        </option>
         <option
-          v-for="option in group.children"
+          v-for="(option, index) in group.children"
           :key="option.uid"
           :value="option.uid"
           :selected="option.selected"
         >
-          {{ option.label }}
+          <slot name="option" :group="group" :option="option" :index="index">
+            {{ option.label }}
+          </slot>
         </option>
       </select>
     </div>
@@ -29,12 +43,25 @@
 
 <script setup>
 const props = defineProps({
+  /**
+   * Facets Array
+   */
   facets: {
     type: Array,
     default: () => []
-  }
+  },
+  /**
+   * Optional classes bindings for all elements { container, group, label, select }
+   */
+  classes: {
+    type: Object,
+    default: () => ({})
+  },
 });
 
+console.log(props);
+
+
 const emit = defineEmits(['facet-change']);
 
 function onFilterChange(group, event) {

package/lib/plugins/popovers/defaults.js

@@ -9,16 +9,7 @@ export default {
      * @type {String}
      */
     directiveName: "ulu-tooltip",
-    /**
-     * The element that the tooltip should be rendered within
-     * - Default bottom of the body (on top of everything)
-     * - Doesn't need to be inline for accessibility since tooltips are just an enhancement
-     *   content displayed within them should be hidden for assistive devices, 
-     *   they are not visible to assistive devices
-     * @type {String}
-     */    
-    tooltipTeleportTo: "body",
-  },
+    },
   /**
    * Default Popover Options
    */
@@ -59,6 +50,15 @@ export default {
    * @type {Object}
    */
   tooltip: {
+    /**
+     * The element that the tooltip should be rendered within
+     * - Default bottom of the body if this is unset
+     * - Doesn't need to be inline for accessibility since tooltips are just an enhancement
+     *   content displayed within them should be hidden for assistive devices, 
+     *   they are not visible to assistive devices
+     * @type {String}
+     */    
+    teleportTo: null,
     /**
      * Optional class binding for tooltip element
      * @type {String|Object|Array}

package/lib/plugins/popovers/index.js

@@ -70,6 +70,15 @@ export default function install(app, userOptions = {}) {
     config: {},
   });
   const showTooltip = (triggerEl, configObj) => {
+    // If a teleport target isn't already specified in the config,
+    // try to find a parent dialog to teleport to automatically.
+    if (triggerEl && !configObj.teleportTo) {
+      const dialog = triggerEl.closest("dialog");
+      if (dialog) {
+        configObj.teleportTo = dialog;
+      }
+    }
+    
     // If a tooltip is already active for a different element, remove its attribute.
     if (tooltipState.trigger && tooltipState.trigger !== triggerEl) {
       if (tooltipState.trigger?.removeAttribute) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.3-beta.4",
+  "version": "0.1.3-beta.6",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [