@ulu/frontend-vue 0.5.3 → 0.5.5

package/lib/components/elements/UluCounterList.vue

@@ -0,0 +1,77 @@
+<template>
+  <UluList
+    class="counter-list"
+    :class="resolvedModifiers"
+    :items="items"
+    :element="element"
+    :itemElement="itemElement"
+    :classes="resolvedClasses"
+  >
+    <template v-if="$slots.default" #default="slotProps">
+      <slot v-bind="slotProps" />
+    </template>
+  </UluList>
+</template>
+
+<script setup>
+  import { computed } from "vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
+  import UluList from "./UluList.vue";
+
+  const props = defineProps({
+    /**
+     * Array of list items, output as is or use slot to template the item
+     * - Note item can add classes by defining { classes: { item } }
+     */
+    items: Array,
+    /**
+     * HTML element for the list
+     */
+    element: {
+      type: String,
+      default: "ol"
+    },
+    /**
+     * HTML element for the list items (when using items array)
+     */
+    itemElement: {
+      type: String,
+      default: "li"
+    },
+    /**
+     * Classes object (keys are { list, item } to be applied to list and item elements)
+     */
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Use alphabetical counter
+     */
+    alphabetical: Boolean,
+    /**
+     * Remove counter reset
+     */
+    noReset: Boolean,
+    /**
+     * Modifiers (to add any modifier classes based on base class [ie. 'alphabetical'])
+     */
+    modifiers: [String, Array]
+  });
+
+  const { resolvedModifiers } = useModifiers({
+    props,
+    baseClass: "counter-list",
+    internal: computed(() => ({
+      "alphabetical": props.alphabetical,
+      "no-reset": props.noReset
+    }))
+  });
+
+  const resolvedClasses = computed(() => {
+    return {
+      list: props.classes.list,
+      item: ["counter-list__item", props.classes.item]
+    };
+  });
+</script>

package/lib/components/elements/UluDataTable.vue

@@ -0,0 +1,115 @@
+<template>
+  <UluTable
+    class="data-table"
+    v-bind="$attrs"
+    :columns="columns"
+    :rows="rows"
+    :footerRows="footerRows"
+    :caption="caption"
+    :idPrefix="idPrefix"
+    :getRowValue="getRowValue"
+    :getColumnTitle="getColumnTitle"
+    :classes="{
+      ...classes,
+      table: [resolvedModifiers, classes?.table]
+    }"
+  >
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </UluTable>
+</template>
+
+<script setup>
+  import { computed } from "vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
+  import UluTable from "./UluTable.vue";
+  import { isArrayOfObjects } from "../../utils/props.js";
+
+  const props = defineProps({
+    /**
+     * 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: isArrayOfObjects
+    },
+    /**
+     * Array of tables rows (tbody)
+     * - Each row is an object who's value will be matched to columns
+     */
+    rows: {
+      type: Array,
+      validator: isArrayOfObjects
+    },
+    /**
+     * Array of rows for footer (tfoot)
+     */
+    footerRows: {
+      type: Array,
+      validator: isArrayOfObjects
+    },
+    /**
+     * Hidden caption for accessibility (or visible depending on styles). Can also be passed via slot.
+     */
+    caption: String,
+    /**
+     * Prefix used for id generation
+     */
+    idPrefix: String,
+    /**
+     * Optional user overridden value getter (for rows)
+     * @param {Object} row The current row
+     * @param {Object} column The current column in the row
+     */
+    getRowValue: Function,
+    /**
+     * Optional user overridden title getter (for headers)
+     * @param {Object} column The current column
+     */
+    getColumnTitle: Function,
+    
+    /**
+     * Applies striped row styling
+     */
+    striped: Boolean,
+    /**
+     * Enhances the first column's visual prominence
+     */
+    largeFirst: Boolean,
+    /**
+     * Additional style modifiers
+     */
+    modifiers: [String, Array],
+
+    /**
+     * Allows user to pass classes object to add custom classes to parts of the component
+     */
+    classes: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+
+  const { resolvedModifiers } = useModifiers({
+    props,
+    baseClass: "data-table",
+    internal: computed(() => ({
+      'striped': props.striped,
+      'large-first': props.largeFirst
+    }))
+  });
+  
+</script>

package/lib/components/elements/UluDefinitionList.vue

@@ -33,7 +33,7 @@
         </dd>
       </div>
     </template>
-    <slot v-else></slot>
+    <slot v-else />
   </dl>
 </template>
 

package/lib/components/elements/UluList.vue

@@ -1,7 +1,7 @@
 <template>
   <component 
     v-if="items !== undefined ? items.length : $slots.default"
-    :is="listElement"
+    :is="resolvedElement"
     :class="[
       {
         'list-ordered' : ordered,
@@ -18,7 +18,8 @@
     :start="start"
   >
     <template v-if="items !== undefined">
-      <li 
+      <component 
+        :is="itemElement"
         v-for="(item, index) in items" 
         :key="index"
         :class="[
@@ -29,9 +30,9 @@
         <slot :item="item" :index="index">
           {{ item }}
         </slot>
-      </li>
+      </component>
     </template>
-    <slot v-else></slot>
+    <slot v-else />
   </component>
 </template>
 
@@ -45,7 +46,7 @@
      */
     items: Array,
     /**
-     * Classes object (keys are { list, item } to be applied to <ul> and <li>)
+     * Classes object (keys are { list, item } to be applied to list and item elements)
      * - Any valid class binding for each
      */
     classes: {
@@ -85,10 +86,24 @@
      * Define list style type (ie. disc, decimal, etc)
      */
     listStyleType: String,
+    /**
+     * Element to render the list as (overrides ul/ol)
+     */
+    element: String,
+    /**
+     * Element to render items as when using items array
+     */
+    itemElement: {
+      type: String,
+      default: "li"
+    }
   });
 
-  provide("uluListClasses", computed(() => props.classes));
+  provide("uluListContext", computed(() => ({
+    classes: props.classes,
+    itemElement: props.itemElement
+  })));
 
   const isOrdered = computed(() => props.ordered || props.forceOrdered);
-  const listElement = computed(() => isOrdered.value ? "ol" : "ul");
-</script>
+  const resolvedElement = computed(() => props.element || (isOrdered.value ? "ol" : "ul"));
+</script>

package/lib/components/elements/UluListItem.vue

@@ -1,19 +1,24 @@
 <template>
-  <li :class="[listClasses.item, classes]">
+  <component :is="resolvedElement" :class="[listClasses.item, classes]">
     <slot></slot>
-  </li>
+  </component>
 </template>
 
 <script setup>
   import { computed, inject } from "vue";
 
-  defineProps({
+  const props = defineProps({
     /**
      * Optional class binding to append to the injected parent classes
      */
-    classes: [String, Array, Object]
+    classes: [String, Array, Object],
+    /**
+     * The HTML element to render the item as
+     */
+    element: String
   });
 
-  const injectedClasses = inject("uluListClasses", { value: {} });
-  const listClasses = computed(() => injectedClasses.value || {});
+  const injectedContext = inject("uluListContext", { value: {} });
+  const listClasses = computed(() => injectedContext.value?.classes || {});
+  const resolvedElement = computed(() => props.element || injectedContext.value?.itemElement || "li");
 </script>

package/lib/components/elements/UluTable.vue

@@ -0,0 +1,217 @@
+<template>
+  <table :class="classes?.table">
+    <template v-if="columns && rows">
+      <caption v-if="caption || $slots.caption" :class="classes?.caption">
+        <slot name="caption">{{ caption }}</slot>
+      </caption>
+      <thead :class="classes?.thead">
+        <tr 
+          v-for="(row, rowIndex) in headerRows" 
+          :key="`hr-${rowIndex}`"
+          :class="resolveClasses(classes?.rowHeader, { row, rowIndex })"
+        >
+          <th 
+            v-for="(column, colIndex) in row.columns" 
+            :key="`hc-${colIndex}`"
+            :id="column.id"
+            :rowspan="column.rowspan"
+            :colspan="column.colspan"
+            :class="resolveClasses(column.classHeader, { column, index: colIndex })"
+            :scope="column.colspan > 1 ? 'colgroup' : 'col'"
+            :headers="getHeaderHeaders(column)"
+          >
+            <template v-if="$slots[column.slotHeader]">
+              <slot :name="column.slotHeader" :column="column" :index="colIndex"></slot>
+            </template>
+            <div v-else-if="column.htmlTitle" v-html="getColumnTitle({ column, index: colIndex })"></div>
+            <template v-else>{{ getColumnTitle({ column, index: colIndex }) }}</template>
+          </th>
+        </tr>
+      </thead>
+      <tbody :class="classes?.tbody">
+        <tr
+          v-for="(row, rowIndex) in currentRows"
+          :key="`br-${rowIndex}`"
+          :id="row.id"
+          :class="resolveClasses(classes?.row, { row: row.data, rowIndex })"
+        >
+          <component
+            v-for="(column, colIndex) in rowColumns"
+            :key="`bc-${colIndex}`"
+            :is="column.rowHeader ? 'th' : 'td'"
+            :id="column.rowHeader ? column.getRowHeaderId(rowIndex) : undefined"
+            :scope="column.rowHeader ? 'row' : undefined"
+            :headers="getCellHeaders(column, rowIndex)"
+            :class="resolveClasses(column.class, { column, index: colIndex, row, rowIndex })"
+          >
+            <template v-if="$slots[column.slot]">
+              <slot 
+                :name="column.slot" 
+                :row="row.data" 
+                :column="column"
+                :rowIndex="rowIndex"
+                :index="colIndex"
+              />
+            </template>
+            <div 
+              v-else-if="column.html" 
+              v-html="getValue({ row, column, rowIndex })"
+            ></div>
+            <template v-else>
+              {{ getValue({ row, column, rowIndex }) }}
+            </template>
+          </component>
+        </tr>
+      </tbody>
+      <tfoot v-if="currentFooterRows.length" :class="classes?.tfoot">
+        <tr
+          v-for="(row, rowIndex) in currentFooterRows"
+          :key="`fr-${rowIndex}`"
+          :id="row.id"
+          :class="resolveClasses(classes?.rowFooter, { row: row.data, rowIndex })"
+        >
+          <component
+            v-for="(column, colIndex) in rowColumns"
+            :key="`fc-${colIndex}`"
+            :is="column.rowHeader ? 'th' : 'td'"
+            :id="column.rowHeader ? column.getRowHeaderId(rowIndex) : undefined"
+            :scope="column.rowHeader ? 'row' : undefined"
+            :headers="getCellHeaders(column, rowIndex)"
+            :class="resolveClasses(column.class, { column, index: colIndex, row, rowIndex })"
+          >
+            <template v-if="$slots[column.slot]">
+              <slot 
+                :name="column.slot" 
+                :row="row.data" 
+                :column="column"
+                :rowIndex="rowIndex"
+                :index="colIndex"
+              />
+            </template>
+            <div 
+              v-else-if="column.html" 
+              v-html="getValue({ row, column, rowIndex })"
+            ></div>
+            <template v-else>
+              {{ getValue({ row, column, rowIndex }) }}
+            </template>
+          </component>
+        </tr>
+      </tfoot>
+    </template>
+    <slot v-else />
+  </table>
+</template>
+
+<script setup>
+  import { isArrayOfObjects } from "../../utils/props.js";
+  import { useTableData } from "../../composables/useTableData.js";
+
+  const props = defineProps({
+    /**
+     * 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: isArrayOfObjects
+    },
+    /**
+     * Array of tables rows (tbody)
+     * - Each row is an object who's value will be matched to columns
+     */
+    rows: {
+      type: Array,
+      validator: isArrayOfObjects
+    },
+    /**
+     * Array of rows for footer (tfoot)
+     */
+    footerRows: {
+      type: Array,
+      validator: isArrayOfObjects
+    },
+    /**
+     * 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, column }) => row[column.key]
+    },
+    /**
+     * Optional user overridden title getter (for headers)
+     * @param {Object} column The current column
+     */
+    getColumnTitle: {
+      type: Function,
+      default: ({ column }) => column.title
+    }
+  });
+
+  const { 
+    currentRows, 
+    currentFooterRows, 
+    headerRows, 
+    rowColumns 
+  } = useTableData(props);
+
+  const resolveClasses = (passed, args = null) => {
+    if (typeof passed === "undefined") return;
+    if (typeof passed === "function") return passed(args);
+    return passed;
+  };
+
+  const getHeaderHeaders = (column) => {
+    const headersArray = column.headers.filter(id => id !== column.id);
+    if (headersArray.length) {
+      return headersArray.join(" ");
+    }
+  };
+
+  const getCellHeaders = (column, rowIndex) => {
+    const headers = column.headers.join(" ");
+    const rowHeaders = column.getRowHeaders(rowIndex);
+    const s = rowHeaders.length ? " " : "";
+    return `${ headers }${ s }${ rowHeaders }`;
+  };
+
+  const getValue = ({ row, column, rowIndex }) => {
+    const valueFn = column.value;
+    if (valueFn) {
+      return valueFn({ row: row.data, column, rowIndex });
+    } else {
+      return props.getRowValue({ row: row.data, column, rowIndex });
+    }
+  };
+</script>

package/lib/components/index.js

@@ -22,6 +22,7 @@ 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';
@@ -33,12 +34,14 @@ 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';