@ulu/frontend-vue 0.5.2 → 0.5.4

package/dist/components/elements/UluListItem.vue.js

@@ -0,0 +1,28 @@
+import { inject as c, computed as s, createBlock as r, openBlock as i, resolveDynamicComponent as m, normalizeClass as u, withCtx as p, renderSlot as d } from "vue";
+const f = {
+  __name: "UluListItem",
+  props: {
+    /**
+     * Optional class binding to append to the injected parent classes
+     */
+    classes: [String, Array, Object],
+    /**
+     * The HTML element to render the item as
+     */
+    element: String
+  },
+  setup(e) {
+    const l = e, t = c("uluListContext", { value: {} }), n = s(() => t.value?.classes || {}), a = s(() => l.element || t.value?.itemElement || "li");
+    return (o, v) => (i(), r(m(a.value), {
+      class: u([n.value.item, e.classes])
+    }, {
+      default: p(() => [
+        d(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+};
+export {
+  f as default
+};

package/dist/components/elements/UluTable.vue.d.ts

@@ -0,0 +1,48 @@
+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<{}, {
+    classes: Record<string, any>;
+    idPrefix: string;
+    columns?: unknown[] | undefined;
+    rows?: unknown[] | undefined;
+    footerRows?: unknown[] | undefined;
+    caption?: string | undefined;
+    getRowValue?: Function | undefined;
+    getColumnTitle?: Function | undefined;
+    $props: {
+        readonly classes?: Record<string, any> | undefined;
+        readonly idPrefix?: string | undefined;
+        readonly columns?: unknown[] | undefined;
+        readonly rows?: unknown[] | undefined;
+        readonly footerRows?: unknown[] | undefined;
+        readonly caption?: string | undefined;
+        readonly getRowValue?: Function | undefined;
+        readonly getColumnTitle?: Function | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLTableElement>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: Partial<Record<any, (_: {
+        column: never;
+        index: number;
+    }) => any>> & Partial<Record<any, (_: {
+        row: any;
+        column: any;
+        rowIndex: number;
+        index: number;
+    }) => any>> & Partial<Record<any, (_: {
+        row: any;
+        column: any;
+        rowIndex: number;
+        index: number;
+    }) => any>> & {
+        caption?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLTableElement;
+};
+//# sourceMappingURL=UluTable.vue.d.ts.map

package/dist/components/elements/UluTable.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluTable.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluTable.vue"],"names":[],"mappings":"AAwGA;wBAshBqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;wPAQG"}

package/dist/components/elements/UluTable.vue.js

@@ -0,0 +1,211 @@
+import { createElementBlock as i, openBlock as r, normalizeClass as o, renderSlot as u, Fragment as y, createCommentVNode as C, createElementVNode as R, createTextVNode as g, toDisplayString as $, renderList as f, unref as h, createBlock as w, resolveDynamicComponent as L, withCtx as F } from "vue";
+import { isArrayOfObjects as T } from "../../utils/props.js";
+import { useTableData as j } from "../../composables/useTableData.js";
+const S = ["id", "rowspan", "colspan", "scope", "headers"], B = ["innerHTML"], D = ["id"], N = ["innerHTML"], O = ["id"], E = ["innerHTML"], q = {
+  __name: "UluTable",
+  props: {
+    /**
+     * Array of column configurations to convert to list output
+     * 
+     * @property {Object} column A column config
+     * @property {String|Boolean} column.title The title to output for the column if set to a falsey value nothing will print
+     * @property {Array} column.columns Array of child columns
+     * @property {String} column.key The key that should be usec to grab column's value from rows
+     * @property {Function} column.value A function that returns the column's value used instead of key passed (row, column)
+     * @property {String} column.slot Register custom slot name to use as a template for this column. Passing a slot with this name will link them. The slot are passed the ({row, column}). Note this will disable output of the column's value
+     * @property {String} column.slotHeader Register custom slot name to use in the header
+     * @property {String} column.classHeader Custom class(s) to be set to column <th>
+     * @property {String} column.class Custom class(s) to be set to column's value <td>       
+     * @property {String} column.html Use v-html output for value      
+     * @property {String} column.rowHeader When this column is printed in the <tbody> it should be a header for the row. Note supports multiple row headers from left to right only. No rowspan support for rowHeaders. 
+     */
+    columns: {
+      type: Array,
+      validator: T
+    },
+    /**
+     * Array of tables rows (tbody)
+     * - Each row is an object who's value will be matched to columns
+     */
+    rows: {
+      type: Array,
+      validator: T
+    },
+    /**
+     * Array of rows for footer (tfoot)
+     */
+    footerRows: {
+      type: Array,
+      validator: T
+    },
+    /**
+     * Hidden caption for accessibility (or visible depending on styles). Can also be passed via slot.
+     */
+    caption: String,
+    /**
+     * Allows user to pass classes object to add custom classes to parts of the component
+     */
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Prefix used for id generation
+     */
+    idPrefix: {
+      type: String,
+      default: "table"
+    },
+    /**
+     * Optional user overridden value getter (for rows)
+     * @param {Object} row The current row
+     * @param {Object} column The current column in the row
+     */
+    getRowValue: {
+      type: Function,
+      default: ({ row: l, column: k }) => l[k.key]
+    },
+    /**
+     * Optional user overridden title getter (for headers)
+     * @param {Object} column The current column
+     */
+    getColumnTitle: {
+      type: Function,
+      default: ({ column: l }) => l.title
+    }
+  },
+  setup(l) {
+    const k = l, {
+      currentRows: M,
+      currentFooterRows: b,
+      headerRows: V,
+      rowColumns: p
+    } = j(k), c = (s, n = null) => {
+      if (!(typeof s > "u"))
+        return typeof s == "function" ? s(n) : s;
+    }, A = (s) => {
+      const n = s.headers.filter((a) => a !== s.id);
+      if (n.length)
+        return n.join(" ");
+    }, v = (s, n) => {
+      const a = s.headers.join(" "), t = s.getRowHeaders(n), e = t.length ? " " : "";
+      return `${a}${e}${t}`;
+    }, H = ({ row: s, column: n, rowIndex: a }) => {
+      const t = n.value;
+      return t ? t({ row: s.data, column: n, rowIndex: a }) : k.getRowValue({ row: s.data, column: n, rowIndex: a });
+    };
+    return (s, n) => (r(), i("table", {
+      class: o(l.classes?.table)
+    }, [
+      l.columns && l.rows ? (r(), i(y, { key: 0 }, [
+        l.caption || s.$slots.caption ? (r(), i("caption", {
+          key: 0,
+          class: o(l.classes?.caption)
+        }, [
+          u(s.$slots, "caption", {}, () => [
+            g($(l.caption), 1)
+          ])
+        ], 2)) : C("", !0),
+        R("thead", {
+          class: o(l.classes?.thead)
+        }, [
+          (r(!0), i(y, null, f(h(V), (a, t) => (r(), i("tr", {
+            key: `hr-${t}`,
+            class: o(c(l.classes?.rowHeader, { row: a, rowIndex: t }))
+          }, [
+            (r(!0), i(y, null, f(a.columns, (e, d) => (r(), i("th", {
+              key: `hc-${d}`,
+              id: e.id,
+              rowspan: e.rowspan,
+              colspan: e.colspan,
+              class: o(c(e.classHeader, { column: e, index: d })),
+              scope: e.colspan > 1 ? "colgroup" : "col",
+              headers: A(e)
+            }, [
+              s.$slots[e.slotHeader] ? u(s.$slots, e.slotHeader, {
+                key: 0,
+                column: e,
+                index: d
+              }) : e.htmlTitle ? (r(), i("div", {
+                key: 1,
+                innerHTML: l.getColumnTitle({ column: e, index: d })
+              }, null, 8, B)) : (r(), i(y, { key: 2 }, [
+                g($(l.getColumnTitle({ column: e, index: d })), 1)
+              ], 64))
+            ], 10, S))), 128))
+          ], 2))), 128))
+        ], 2),
+        R("tbody", {
+          class: o(l.classes?.tbody)
+        }, [
+          (r(!0), i(y, null, f(h(M), (a, t) => (r(), i("tr", {
+            key: `br-${t}`,
+            id: a.id,
+            class: o(c(l.classes?.row, { row: a.data, rowIndex: t }))
+          }, [
+            (r(!0), i(y, null, f(h(p), (e, d) => (r(), w(L(e.rowHeader ? "th" : "td"), {
+              key: `bc-${d}`,
+              id: e.rowHeader ? e.getRowHeaderId(t) : void 0,
+              scope: e.rowHeader ? "row" : void 0,
+              headers: v(e, t),
+              class: o(c(e.class, { column: e, index: d, row: a, rowIndex: t }))
+            }, {
+              default: F(() => [
+                s.$slots[e.slot] ? u(s.$slots, e.slot, {
+                  key: 0,
+                  row: a.data,
+                  column: e,
+                  rowIndex: t,
+                  index: d
+                }) : e.html ? (r(), i("div", {
+                  key: 1,
+                  innerHTML: H({ row: a, column: e, rowIndex: t })
+                }, null, 8, N)) : (r(), i(y, { key: 2 }, [
+                  g($(H({ row: a, column: e, rowIndex: t })), 1)
+                ], 64))
+              ]),
+              _: 2
+            }, 1032, ["id", "scope", "headers", "class"]))), 128))
+          ], 10, D))), 128))
+        ], 2),
+        h(b).length ? (r(), i("tfoot", {
+          key: 1,
+          class: o(l.classes?.tfoot)
+        }, [
+          (r(!0), i(y, null, f(h(b), (a, t) => (r(), i("tr", {
+            key: `fr-${t}`,
+            id: a.id,
+            class: o(c(l.classes?.rowFooter, { row: a.data, rowIndex: t }))
+          }, [
+            (r(!0), i(y, null, f(h(p), (e, d) => (r(), w(L(e.rowHeader ? "th" : "td"), {
+              key: `fc-${d}`,
+              id: e.rowHeader ? e.getRowHeaderId(t) : void 0,
+              scope: e.rowHeader ? "row" : void 0,
+              headers: v(e, t),
+              class: o(c(e.class, { column: e, index: d, row: a, rowIndex: t }))
+            }, {
+              default: F(() => [
+                s.$slots[e.slot] ? u(s.$slots, e.slot, {
+                  key: 0,
+                  row: a.data,
+                  column: e,
+                  rowIndex: t,
+                  index: d
+                }) : e.html ? (r(), i("div", {
+                  key: 1,
+                  innerHTML: H({ row: a, column: e, rowIndex: t })
+                }, null, 8, E)) : (r(), i(y, { key: 2 }, [
+                  g($(H({ row: a, column: e, rowIndex: t })), 1)
+                ], 64))
+              ]),
+              _: 2
+            }, 1032, ["id", "scope", "headers", "class"]))), 128))
+          ], 10, O))), 128))
+        ], 2)) : C("", !0)
+      ], 64)) : u(s.$slots, "default", { key: 1 })
+    ], 2));
+  }
+};
+export {
+  q as default
+};

package/dist/components/index.d.ts

@@ -17,17 +17,22 @@ export { default as UluButtonVerbose } from './elements/UluButtonVerbose.vue';
 export { default as UluCallout } from './elements/UluCallout.vue';
 export { default as UluCaptionedFigure } from './elements/UluCaptionedFigure.vue';
 export { default as UluCard } from './elements/UluCard.vue';
+export { default as UluDataTable } from './elements/UluDataTable.vue';
 export { default as UluDefinitionList } from './elements/UluDefinitionList.vue';
+export { default as UluDefinitionListItem } from './elements/UluDefinitionListItem.vue';
 export { default as UluExternalLink } from './elements/UluExternalLink.vue';
 export { default as UluIcon } from './elements/UluIcon.vue';
 export { default as UluImage } from './elements/UluImage.vue';
 export { default as UluList } from './elements/UluList.vue';
+export { default as UluListItem } from './elements/UluListItem.vue';
+export { default as UluCounterList } from './elements/UluCounterList.vue';
 export { default as UluMain } from './elements/UluMain.vue';
 export { default as UluOverflowScroller } from './elements/UluOverflowScroller.vue';
 export { default as UluRule } from './elements/UluRule.vue';
 export { default as UluScrollSlider } from './elements/UluScrollSlider.vue';
 export { default as UluSlider } from './elements/UluSlider.vue';
 export { default as UluSpokeSpinner } from './elements/UluSpokeSpinner.vue';
+export { default as UluTable } from './elements/UluTable.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';

package/dist/components/navigation/UluBreadcrumb.vue.js

@@ -1,4 +1,4 @@
-import { resolveComponent as d, createElementBlock as s, createCommentVNode as o, openBlock as a, normalizeClass as t, createElementVNode as b, Fragment as k, renderList as f, createBlock as y, renderSlot as c, withCtx as p, createTextVNode as u, toDisplayString as i, createVNode as g } from "vue";
+import { resolveComponent as d, createElementBlock as s, createCommentVNode as o, openBlock as t, normalizeClass as r, createElementVNode as b, Fragment as k, renderList as f, createBlock as y, renderSlot as c, withCtx as g, createTextVNode as u, toDisplayString as i, createVNode as p } from "vue";
 import h from "../elements/UluIcon.vue.js";
 const N = {
   __name: "UluBreadcrumb",
@@ -17,7 +17,7 @@ const N = {
     separatorIcon: String,
     /**
      * Classes object to be applied to elements.
-     * Keys: nav, list, item, link, icon
+     * Keys: nav, list, item, link, current, separator
      */
     classes: {
       type: Object,
@@ -31,45 +31,45 @@ const N = {
       })
     }
   },
-  setup(e) {
+  setup(a) {
     return (l, B) => {
       const m = d("router-link");
-      return e.items.length ? (a(), s("nav", {
+      return a.items.length ? (t(), s("nav", {
         key: 0,
-        class: t(e.classes.nav),
+        class: r(a.classes.nav),
         "aria-label": "Breadcrumb"
       }, [
         b("ol", {
-          class: t(e.classes.list)
+          class: r(a.classes.list)
         }, [
-          (a(!0), s(k, null, f(e.items, (r, n) => (a(), s("li", {
+          (t(!0), s(k, null, f(a.items, (e, n) => (t(), s("li", {
             key: n,
-            class: t(e.classes.item)
+            class: r([a.classes.item, e?.classes?.item])
           }, [
-            r.current ? (a(), s("span", {
+            e.current ? (t(), s("span", {
               key: 1,
-              class: t(r.current)
+              class: r([a.classes.current, e?.classes?.current])
             }, [
-              c(l.$slots, "default", { item: r }, () => [
-                u(i(r.title), 1)
+              c(l.$slots, "default", { item: e }, () => [
+                u(i(e.title), 1)
               ])
-            ], 2)) : (a(), y(m, {
+            ], 2)) : (t(), y(m, {
               key: 0,
-              to: r.to,
-              class: t(e.classes.link),
-              "aria-current": r.current ? "page" : null
+              to: e.to,
+              class: r([a.classes.link, e?.classes?.link]),
+              "aria-current": e.current ? "page" : null
             }, {
-              default: p(() => [
-                c(l.$slots, "default", { item: r }, () => [
-                  u(i(r.title), 1)
+              default: g(() => [
+                c(l.$slots, "default", { item: e }, () => [
+                  u(i(e.title), 1)
                 ])
               ]),
               _: 2
             }, 1032, ["to", "class", "aria-current"])),
-            n < e.items.length - 1 ? c(l.$slots, "separator", { key: 2 }, () => [
-              g(h, {
-                class: t(e.classes.separator),
-                icon: e.separatorIcon || "type:pathSeparator"
+            n < a.items.length - 1 ? c(l.$slots, "separator", { key: 2 }, () => [
+              p(h, {
+                class: r([a.classes.separator, e?.classes?.separator]),
+                icon: a.separatorIcon || "type:pathSeparator"
               }, null, 8, ["class", "icon"])
             ]) : o("", !0)
           ], 2))), 128))