@ulu/frontend-vue 0.2.0-beta.3 → 0.2.0-beta.5

package/dist/components/forms/UluFormText.vue.d.ts

@@ -0,0 +1,27 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    $emit: (event: "update:modelValue", ...args: any[]) => void;
+    required: boolean;
+    labelHidden: boolean;
+    modelValue?: string | undefined;
+    label?: string | undefined;
+    $props: {
+        readonly required?: boolean | undefined;
+        readonly labelHidden?: boolean | undefined;
+        readonly modelValue?: string | undefined;
+        readonly label?: string | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        label?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+//# sourceMappingURL=UluFormText.vue.d.ts.map

package/dist/components/forms/UluFormText.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluFormText.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/forms/UluFormText.vue"],"names":[],"mappings":"AAcA;wBA8IqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;2OAQG"}

package/dist/components/forms/UluFormText.vue.js

@@ -0,0 +1,49 @@
+import { createElementBlock as i, openBlock as o, Fragment as u, createElementVNode as a, unref as n, normalizeClass as m, renderSlot as s, createTextVNode as c, createBlock as f, createCommentVNode as V, toDisplayString as b } from "vue";
+import { newId as p } from "../../utils/dom.js";
+import g from "./UluFormRequiredChar.vue.js";
+const q = ["for"], B = ["value", "id", "required"], S = {
+  __name: "UluFormText",
+  props: {
+    /**
+     * The label for the text input.
+     */
+    label: String,
+    /**
+     * The value of the text input (for v-model).
+     */
+    modelValue: String,
+    /**
+     * If true, the label will be visually hidden.
+     */
+    labelHidden: Boolean,
+    /**
+     * If true, the field will be required.
+     */
+    required: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    const l = p();
+    return (t, r) => (o(), i(u, null, [
+      a("label", {
+        class: m({ "hidden-visually": e.labelHidden }),
+        for: n(l)
+      }, [
+        s(t.$slots, "label", {}, () => [
+          c(b(e.label), 1),
+          e.required ? (o(), f(g, { key: 0 })) : V("", !0)
+        ])
+      ], 10, q),
+      a("input", {
+        type: "text",
+        value: e.modelValue,
+        onInput: r[0] || (r[0] = (d) => t.$emit("update:modelValue", d.target.value)),
+        id: n(l),
+        required: e.required
+      }, null, 40, B)
+    ], 64));
+  }
+};
+export {
+  S as default
+};

package/dist/components/forms/UluFormTextarea.vue.d.ts

@@ -0,0 +1,27 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    $emit: (event: "update:modelValue", ...args: any[]) => void;
+    required: boolean;
+    labelHidden: boolean;
+    modelValue?: string | undefined;
+    label?: string | undefined;
+    $props: {
+        readonly required?: boolean | undefined;
+        readonly labelHidden?: boolean | undefined;
+        readonly modelValue?: string | undefined;
+        readonly label?: string | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        label?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+//# sourceMappingURL=UluFormTextarea.vue.d.ts.map

package/dist/components/forms/UluFormTextarea.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluFormTextarea.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/forms/UluFormTextarea.vue"],"names":[],"mappings":"AAaA;wBA4IqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;2OAQG"}

package/dist/components/forms/UluFormTextarea.vue.js

@@ -0,0 +1,48 @@
+import { createElementBlock as i, openBlock as a, Fragment as u, createElementVNode as o, unref as n, normalizeClass as m, renderSlot as s, createTextVNode as c, createBlock as f, createCommentVNode as V, toDisplayString as b } from "vue";
+import { newId as g } from "../../utils/dom.js";
+import q from "./UluFormRequiredChar.vue.js";
+const B = ["for"], k = ["value", "id", "required"], x = {
+  __name: "UluFormTextarea",
+  props: {
+    /**
+     * The label for the textarea.
+     */
+    label: String,
+    /**
+     * The value of the textarea (for v-model).
+     */
+    modelValue: String,
+    /**
+     * If true, the label will be visually hidden.
+     */
+    labelHidden: Boolean,
+    /**
+     * If true, the field will be required.
+     */
+    required: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(e) {
+    const l = g();
+    return (t, r) => (a(), i(u, null, [
+      o("label", {
+        class: m({ "hidden-visually": e.labelHidden }),
+        for: n(l)
+      }, [
+        s(t.$slots, "label", {}, () => [
+          c(b(e.label), 1),
+          e.required ? (a(), f(q, { key: 0 })) : V("", !0)
+        ])
+      ], 10, B),
+      o("textarea", {
+        value: e.modelValue,
+        onInput: r[0] || (r[0] = (d) => t.$emit("update:modelValue", d.target.value)),
+        id: n(l),
+        required: e.required
+      }, null, 40, k)
+    ], 64));
+  }
+};
+export {
+  x as default
+};

package/dist/components/forms/UluSearchForm.vue.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    placeholder: string;
+    $props: {
+        readonly placeholder?: string | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=UluSearchForm.vue.d.ts.map

package/dist/components/forms/UluSearchForm.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluSearchForm.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/forms/UluSearchForm.vue"],"names":[],"mappings":"AAmBA;"}

package/dist/components/forms/UluSearchForm.vue.js

@@ -0,0 +1,36 @@
+import { createElementBlock as o, openBlock as a, createElementVNode as e, createVNode as l } from "vue";
+import s from "../elements/UluIcon.vue.js";
+const c = { class: "form-theme search-form type-small" }, i = { class: "search-form__field" }, n = ["placeholder"], m = {
+  class: "search-form__submit button button--primary",
+  "aria-label": "Submit Search"
+}, h = {
+  __name: "UluSearchForm",
+  props: {
+    /**
+     * The placeholder text for the search input.
+     */
+    placeholder: {
+      type: String,
+      default: "Titles, keyword…"
+    }
+  },
+  setup(r) {
+    return (p, t) => (a(), o("div", c, [
+      e("div", i, [
+        t[0] || (t[0] = e("label", { class: "hidden-visually" }, "Search", -1)),
+        e("input", {
+          class: "search-form__input",
+          type: "text",
+          id: "example-input",
+          placeholder: r.placeholder
+        }, null, 8, n)
+      ]),
+      e("button", m, [
+        l(s, { icon: "type:search" })
+      ])
+    ]));
+  }
+};
+export {
+  h as default
+};

package/dist/components/forms/UluSelectableMenu.vue.d.ts

@@ -0,0 +1,33 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    $emit: (event: "update:modelValue", ...args: any[]) => void;
+    type: string;
+    compact: boolean;
+    hideInputs: boolean;
+    modelValue?: string | unknown[] | undefined;
+    legend?: string | undefined;
+    options?: unknown[] | undefined;
+    $props: {
+        readonly type?: string | undefined;
+        readonly compact?: boolean | undefined;
+        readonly hideInputs?: boolean | undefined;
+        readonly modelValue?: string | unknown[] | undefined;
+        readonly legend?: string | undefined;
+        readonly options?: unknown[] | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            option: unknown;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+//# sourceMappingURL=UluSelectableMenu.vue.d.ts.map

package/dist/components/forms/UluSelectableMenu.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluSelectableMenu.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/forms/UluSelectableMenu.vue"],"names":[],"mappings":"AAgCA;wBAqRqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;;;;;;sPASG"}

package/dist/components/forms/UluSelectableMenu.vue.js

@@ -0,0 +1,86 @@
+import { computed as r, createElementBlock as s, openBlock as u, normalizeClass as V, createCommentVNode as p, createElementVNode as c, toDisplayString as g, Fragment as b, renderList as _, renderSlot as x, createTextVNode as C } from "vue";
+const S = ["role", "aria-labelledby"], A = ["id"], $ = { class: "menu-stack__list" }, B = { class: "menu-stack__selectable" }, I = ["type", "id", "name", "value", "checked", "onChange"], N = ["for"], E = {
+  __name: "UluSelectableMenu",
+  props: {
+    /**
+     * The legend for the menu.
+     */
+    legend: String,
+    /**
+     * An array of options for the menu.
+     */
+    options: Array,
+    /**
+     * Use compact modifier on menu stack
+     */
+    compact: Boolean,
+    /**
+     * The type of input to use ('checkbox' or 'radio').
+     */
+    type: {
+      type: String,
+      default: "checkbox"
+    },
+    /**
+     * The value of the menu (for v-model).
+     */
+    modelValue: [String, Array],
+    /**
+     * If true, the input elements will be visually hidden.
+     */
+    hideInputs: Boolean
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: y }) {
+    const t = a, i = y, d = r(() => t.legend ? t.legend.toLowerCase().replace(/\s+/g, "-") : `menu-${Math.random().toString(36).substring(7)}`), o = r(() => d.value ? `${d.value}-legend` : null), k = r(() => t.type === "radio" ? "radiogroup" : "group"), m = (l) => `${d.value}-${l.uid}`, f = (l) => t.type === "radio" ? t.modelValue === l.uid : Array.isArray(t.modelValue) ? t.modelValue.includes(l.uid) : t.type === "checkbox" && l.checked || !1, v = (l, h) => {
+      if (t.type === "radio")
+        i("update:modelValue", l.uid);
+      else if (Array.isArray(t.modelValue)) {
+        const e = [...t.modelValue], n = e.indexOf(l.uid);
+        n > -1 ? e.splice(n, 1) : e.push(l.uid), i("update:modelValue", e);
+      } else
+        l.checked = h.target.checked;
+    };
+    return (l, h) => (u(), s("div", {
+      class: V(["menu-stack form-theme", {
+        "menu-stack--hide-inputs": a.hideInputs,
+        "menu-stack--compact": a.compact
+      }]),
+      role: k.value,
+      "aria-labelledby": o.value
+    }, [
+      a.legend ? (u(), s("div", {
+        key: 0,
+        id: o.value,
+        class: "hidden-visually"
+      }, g(a.legend), 9, A)) : p("", !0),
+      c("ul", $, [
+        (u(!0), s(b, null, _(a.options, (e) => (u(), s("li", {
+          class: "menu-stack__item",
+          key: e.uid
+        }, [
+          c("div", B, [
+            c("input", {
+              type: a.type,
+              id: m(e),
+              name: d.value,
+              value: e.uid,
+              checked: f(e),
+              onChange: (n) => v(e, n)
+            }, null, 40, I),
+            c("label", {
+              for: m(e)
+            }, [
+              x(l.$slots, "default", { option: e }, () => [
+                C(g(e?.label || e?.title || e?.text), 1)
+              ])
+            ], 8, N)
+          ])
+        ]))), 128))
+      ])
+    ], 10, S));
+  }
+};
+export {
+  E as default
+};

package/dist/components/index.d.ts

@@ -0,0 +1,65 @@
+export { default as UluAccordion } from './collapsible/UluAccordion.vue';
+export { default as UluAccordionGroup } from './collapsible/UluAccordionGroup.vue';
+export { default as UluCollapsible } from './collapsible/UluCollapsible.vue';
+export { default as UluDropdown } from './collapsible/UluDropdown.vue';
+export { default as UluModal } from './collapsible/UluModal.vue';
+export { default as UluOverflowPopover } from './collapsible/UluOverflowPopover.vue';
+export { default as UluTab } from './collapsible/UluTab.vue';
+export { default as UluTabGroup } from './collapsible/UluTabGroup.vue';
+export { default as UluTabList } from './collapsible/UluTabList.vue';
+export { default as UluTabPanel } from './collapsible/UluTabPanel.vue';
+export { default as UluTabPanels } from './collapsible/UluTabPanels.vue';
+export { default as UluAlert } from './elements/UluAlert.vue';
+export { default as UluBadge } from './elements/UluBadge.vue';
+export { default as UluBadgeStack } from './elements/UluBadgeStack.vue';
+export { default as UluButton } from './elements/UluButton.vue';
+export { default as UluButtonVerbose } from './elements/UluButtonVerbose.vue';
+export { default as UluCallout } from './elements/UluCallout.vue';
+export { default as UluCard } from './elements/UluCard.vue';
+export { default as UluDefinitionList } from './elements/UluDefinitionList.vue';
+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';
+export { default as UluFileDisplay } from './forms/UluFileDisplay.vue';
+export { default as UluFormFile } from './forms/UluFormFile.vue';
+export { default as UluFormMessage } from './forms/UluFormMessage.vue';
+export { default as UluFormSelect } from './forms/UluFormSelect.vue';
+export { default as UluFormText } from './forms/UluFormText.vue';
+export { default as UluSearchForm } from './forms/UluSearchForm.vue';
+export { default as UluForm } from './forms/UluForm.vue';
+export { default as UluFormActions } from './forms/UluFormActions.vue';
+export { default as UluFormCheckbox } from './forms/UluFormCheckbox.vue';
+export { default as UluFormFieldset } from './forms/UluFormFieldset.vue';
+export { default as UluFormItem } from './forms/UluFormItem.vue';
+export { default as UluFormItemsInline } from './forms/UluFormItemsInline.vue';
+export { default as UluFormRadio } from './forms/UluFormRadio.vue';
+export { default as UluFormRequiredChar } from './forms/UluFormRequiredChar.vue';
+export { default as UluFormTextarea } from './forms/UluFormTextarea.vue';
+export { default as UluAdaptiveLayout } from './layout/UluAdaptiveLayout.vue';
+export { default as UluDataGrid } from './layout/UluDataGrid.vue';
+export { default as UluTitleRail } from './layout/UluTitleRail.vue';
+export { default as UluWhenBreakpoint } from './layout/UluWhenBreakpoint.vue';
+export { default as UluBreadcrumb } from './navigation/UluBreadcrumb.vue';
+export { default as UluMenu } from './navigation/UluMenu.vue';
+export { default as UluMenuStack } from './navigation/UluMenuStack.vue';
+export { default as UluNavStrip } from './navigation/UluNavStrip.vue';
+export { default as UluPager } from './navigation/UluPager.vue';
+export { default as UluSkipLink } from './navigation/UluSkipLink.vue';
+export { default as UluConditionalText } from './utils/UluConditionalText.vue';
+export { default as UluConditionalWrapper } from './utils/UluConditionalWrapper.vue';
+export { default as UluEmpty } from './utils/UluEmpty.vue';
+export { default as UluEmptyView } from './utils/UluEmptyView.vue';
+export { default as UluPlaceholderImage } from './utils/UluPlaceholderImage.vue';
+export { default as UluPlaceholderText } from './utils/UluPlaceholderText.vue';
+export { default as UluRouteAnnouncer } from './utils/UluRouteAnnouncer.vue';
+export { default as UluSanityRichText } from './utils/UluSanityRichText.vue';
+export { default as UluAnimateNumber } from './visualizations/UluAnimateNumber.vue';
+export { default as UluProgressBar } from './visualizations/UluProgressBar.vue';
+export { default as UluProgressCircle } from './visualizations/UluProgressCircle.vue';
+export * from './systems/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/{types/plugins → components}/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.js"],"names":[],"mappings":""}

package/dist/components/layout/UluAdaptiveLayout.vue.d.ts

@@ -0,0 +1,16 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        mobile?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+//# sourceMappingURL=UluAdaptiveLayout.vue.d.ts.map

package/dist/components/layout/UluAdaptiveLayout.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluAdaptiveLayout.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/layout/UluAdaptiveLayout.vue"],"names":[],"mappings":"AAIA;wBA8DqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AARjC,6SAKG"}

package/dist/components/layout/UluAdaptiveLayout.vue.js

@@ -0,0 +1,12 @@
+import { renderSlot as o, unref as t } from "vue";
+import { useRequiredInject as r } from "../../composables/useRequiredInject.js";
+const a = {
+  __name: "UluAdaptiveLayout",
+  setup(u) {
+    const s = r("uluIsMobile");
+    return (e, l) => !t(s) || !e.$slots.mobile ? o(e.$slots, "default", { key: 0 }) : o(e.$slots, "mobile", { key: 1 });
+  }
+};
+export {
+  a as default
+};

package/dist/components/layout/UluDataGrid.vue.d.ts

@@ -0,0 +1,26 @@
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import('vue').DefineComponent<{}, {
+    element: string;
+    hidden: boolean;
+    $props: {
+        readonly element?: string | undefined;
+        readonly hidden?: boolean | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    rootElement: unknown;
+}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        rootElement: unknown;
+    };
+    rootEl: any;
+};
+//# sourceMappingURL=UluDataGrid.vue.d.ts.map

package/dist/components/layout/UluDataGrid.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/layout/UluDataGrid.vue"],"names":[],"mappings":"AA0BA;wBAwMqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;QASG"}

package/dist/components/layout/UluDataGrid.vue.js

@@ -0,0 +1,46 @@
+import { ref as a, onMounted as d, onBeforeUnmount as u, watch as c, createBlock as f, openBlock as m, resolveDynamicComponent as p, withCtx as v, renderSlot as h } from "vue";
+import { debounce as w } from "@ulu/utils/performance.js";
+import { setPositionClasses as _ } from "@ulu/frontend";
+const C = {
+  __name: "UluDataGrid",
+  props: {
+    /**
+     * The element to use on data-grid container
+     */
+    element: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * Tell the component when this grid is actually in a hidden container 
+     * - When value changes the component will properly update position classes
+     */
+    hidden: Boolean
+    // New prop from SSR version
+  },
+  setup(o) {
+    const s = o, n = a(null), i = a(null);
+    let e = null, t = null;
+    return d(async () => {
+      e = () => {
+        n.value && _(n.value);
+      }, e(), i.value = !0, t = w(e, 200, !1), window.addEventListener("resize", t);
+    }), u(() => {
+      t && (t.cancel(), window.removeEventListener("resize", t), t = null, e = null);
+    }), c(() => s.hidden, (l, r) => {
+      r && !l && e && e();
+    }), (l, r) => (m(), f(p(o.element), {
+      "data-grid-init": i.value,
+      ref_key: "rootElement",
+      ref: n
+    }, {
+      default: v(() => [
+        h(l.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["data-grid-init"]));
+  }
+};
+export {
+  C as default
+};

package/dist/{types/components → components}/layout/UluTitleRail.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     /**
      * Icon to display next to the title.
      */
@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
      * If true, a rule will be displayed under the title.
      */
     rule: BooleanConstructor;
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /**
      * Icon to display next to the title.
      */
@@ -78,14 +78,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     rule: boolean;
     iconAlign: string;
 }, {}, {
-    UluIcon: import("vue").DefineComponent<{}, {
-        $props: Partial<{
-            readonly spaced: boolean;
-            readonly icon?: string | boolean | Record<string, any> | unknown[] | undefined;
-        }>;
+    UluIcon: import('vue').DefineComponent<{}, {
         spaced: boolean;
         icon?: string | boolean | Record<string, any> | unknown[] | undefined;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        $props: {
+            readonly spaced?: boolean | undefined;
+            readonly icon?: string | boolean | Record<string, any> | unknown[] | undefined;
+        };
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=UluTitleRail.vue.d.ts.map

package/dist/components/layout/UluTitleRail.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluTitleRail.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/layout/UluTitleRail.vue"],"names":[],"mappings":"AA6BA;;IAwFM;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;;;;;;IAQH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;IAlCH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;;;;;;IAQH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG"}

package/dist/components/layout/UluTitleRail.vue.js

@@ -0,0 +1,86 @@
+import r from "../elements/UluIcon.vue.js";
+import { resolveComponent as m, createElementBlock as n, openBlock as t, normalizeClass as l, createElementVNode as u, createCommentVNode as a, createBlock as o, resolveDynamicComponent as d, normalizeStyle as _, withCtx as f, renderSlot as s, createTextVNode as y, toDisplayString as g } from "vue";
+import h from "../../_virtual/_plugin-vue_export-helper.js";
+const S = {
+  name: "UluTitleRail",
+  components: {
+    UluIcon: r
+  },
+  props: {
+    /**
+     * Icon to display next to the title.
+     */
+    icon: String,
+    /**
+     * The alignment of the icon with the title.
+     */
+    iconAlign: {
+      type: String,
+      default: "baseline"
+    },
+    /**
+     * Classes for the different elements in the component.
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        title: "h2",
+        icon: "margin-right-small"
+      })
+    },
+    /**
+     * The title to display.
+     */
+    title: String,
+    /**
+     * The HTML element to use for the title.
+     */
+    titleElement: {
+      type: String,
+      default: "h2"
+    },
+    /**
+     * If true, a rule will be displayed under the title.
+     */
+    rule: Boolean
+  }
+}, k = {
+  key: 0,
+  class: "rail__item rail__item--pull"
+};
+function v(i, C, e, U, p, x) {
+  const c = m("UluIcon");
+  return t(), n("div", {
+    class: l(["rail rail--title-rail", {
+      "rail--rule": e.rule
+    }])
+  }, [
+    u("div", {
+      class: l(["rail__item rail__item--title", e.classes.itemTitle])
+    }, [
+      (t(), o(d(e.titleElement), {
+        class: l(["layout-flex type-max-width-small no-margin", e.classes.title]),
+        style: _({ alignItems: e.iconAlign })
+      }, {
+        default: f(() => [
+          e.icon ? (t(), o(c, {
+            key: 0,
+            class: l(e.classes.icon),
+            icon: e.icon
+          }, null, 8, ["class", "icon"])) : a("", !0),
+          s(i.$slots, "default", {}, () => [
+            y(g(e.title), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["class", "style"]))
+    ], 2),
+    i.$slots.end ? (t(), n("div", k, [
+      s(i.$slots, "end")
+    ])) : a("", !0)
+  ], 2);
+}
+const T = /* @__PURE__ */ h(S, [["render", v]]);
+export {
+  T as default
+};