@ulu/frontend-vue 0.1.3-beta.5 → 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/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/package.json

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