@ulu/frontend-vue 0.5.2 → 0.5.4

package/lib/components/collapsible/UluAccordionGroup.vue

@@ -31,53 +31,53 @@
 </template>
 
 <script setup>
-import { ref, provide } from 'vue';
-import UluAccordion from './UluAccordion.vue';
+  import { ref, provide } from 'vue';
+  import UluAccordion from './UluAccordion.vue';
 
-const props = defineProps({
-  /**
-   * Array of items to render as accordions.
-   * Each item can have: title, content, isOpen, classes
-   */
-  items: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * If using summary text sets the inner element the text is wrapped in, usually a headline or strong
-   */
-  triggerTextElement: {
-    type: String,
-    default: "strong"
-  },
-  /**
-   * Class modifiers (ie. 'transparent', 'secondary', etc)
-   */
-  modifiers: [String, Array],
-  /**
-   * Enable or configure animations.
-   * - `false` (default) to disable all animations.
-   * - `true` to enable animations with default settings.
-   * - An object to provide custom options to auto-animate (e.g., { duration: 100, easing: 'linear' }).
-   */
-  animate: {
-    type: [Boolean, Object],
-    default: true
-  },
-});
+  const props = defineProps({
+    /**
+     * Array of items to render as accordions.
+     * Each item can have: title, content, isOpen, classes
+     */
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If using summary text sets the inner element the text is wrapped in, usually a headline or strong
+     */
+    triggerTextElement: {
+      type: String,
+      default: "strong"
+    },
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array],
+    /**
+     * Enable or configure animations.
+     * - `false` (default) to disable all animations.
+     * - `true` to enable animations with default settings.
+     * - An object to provide custom options to auto-animate (e.g., { duration: 100, easing: 'linear' }).
+     */
+    animate: {
+      type: [Boolean, Object],
+      default: true
+    },
+  });
 
-const activeAccordionId = ref(null);
+  const activeAccordionId = ref(null);
 
-function toggle(id, isOpen) {
-  if (isOpen) {
-    activeAccordionId.value = id;
-  } else if (activeAccordionId.value === id) {
-    activeAccordionId.value = null;
+  function toggle(id, isOpen) {
+    if (isOpen) {
+      activeAccordionId.value = id;
+    } else if (activeAccordionId.value === id) {
+      activeAccordionId.value = null;
+    }
   }
-}
 
-provide('uluAccordionGroup', {
-  activeAccordionId,
-  toggle
-});
+  provide('uluAccordionGroup', {
+    activeAccordionId,
+    toggle
+  });
 </script>

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

@@ -1,41 +1,44 @@
 <template>
   <dl 
-    v-if="items?.length"
+    v-if="items !== undefined ? items.length : $slots.default"
     class="definition-list" 
     :class="[resolvedModifiers, classes.list]"
   >
-    <div 
-      v-for="(item, index) in items" 
-      :key="index"
-      :class="classes.item"
-    >
-      <dt :class="classes.term">
-        <slot name="term" :item="item" :index="index">
-          {{ item.term }}
-        </slot>
-      </dt>
-      
-      <dd 
-        v-for="(desc, descIndex) in getDescriptions(item)"
-        :key="descIndex"
-        :class="classes.description"
+    <template v-if="items !== undefined">
+      <div 
+        v-for="(item, index) in items" 
+        :key="index"
+        :class="classes.item"
       >
-        <slot 
-          name="description" 
-          :item="item" 
-          :description="desc" 
-          :index="index"
-          :descriptionIndex="descIndex"
+        <dt :class="classes.term">
+          <slot name="term" :item="item" :index="index">
+            {{ item.term }}
+          </slot>
+        </dt>
+        
+        <dd 
+          v-for="(desc, descIndex) in getDescriptions(item)"
+          :key="descIndex"
+          :class="classes.description"
         >
-          {{ desc }}
-        </slot>
-      </dd>
-    </div>
+          <slot 
+            name="description" 
+            :item="item" 
+            :description="desc" 
+            :index="index"
+            :descriptionIndex="descIndex"
+          >
+            {{ desc }}
+          </slot>
+        </dd>
+      </div>
+    </template>
+    <slot v-else />
   </dl>
 </template>
 
 <script setup>
-  import { computed } from 'vue';
+  import { computed, provide } from 'vue';
   import { useModifiers } from "../../composables/useModifiers.js";
 
   const props = defineProps({
@@ -85,6 +88,8 @@
     compact: Boolean,
   });
 
+  provide("uluDefinitionListClasses", computed(() => props.classes));
+
   const internalModifiers = computed(() => ({
     "inline" : props.inline,
     "inline-all" : props.inlineAll,

package/lib/components/elements/UluDefinitionListItem.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="[listClasses.item, classes?.item]">
+    <dt :class="[listClasses.term, classes?.term]">
+      <slot name="term">{{ term }}</slot>
+    </dt>
+    <dd 
+      v-for="(desc, index) in descriptions"
+      :key="index"
+      :class="[listClasses.description, classes?.description]"
+    >
+      <slot name="description" :description="desc" :index="index">
+        {{ desc }}
+      </slot>
+    </dd>
+  </div>
+</template>
+
+<script setup>
+  import { computed, inject } from "vue";
+
+  const props = defineProps({
+    /**
+     * The term text (renders inside dt)
+     */
+    term: String,
+    /**
+     * The description text or array of strings (renders inside dd)
+     */
+    description: [String, Array],
+    /**
+     * Optional classes object to override/append to injected parent classes { item, term, description }
+     */
+    classes: Object
+  });
+
+  const injectedClasses = inject("uluDefinitionListClasses", { value: {} });
+  const listClasses = computed(() => injectedClasses.value || {});
+
+  const descriptions = computed(() => {
+    if (!props.description) return [];
+    return Array.isArray(props.description) ? props.description : [props.description];
+  });
+</script>

package/lib/components/elements/UluList.vue

@@ -1,7 +1,7 @@
 <template>
   <component 
-    v-if="items?.length"
-    :is="listElement"
+    v-if="items !== undefined ? items.length : $slots.default"
+    :is="resolvedElement"
     :class="[
       {
         'list-ordered' : ordered,
@@ -17,23 +17,27 @@
     :reversed="isOrdered ? reversed : null"
     :start="start"
   >
-    <li 
-      v-for="(item, index) in items" 
-      :key="index"
-      :class="[
-        classes.item,
-        item?.classes?.item
-      ]"
-    >
-      <slot :item="item" :index="index">
-        {{ item }}
-      </slot>
-    </li>
+    <template v-if="items !== undefined">
+      <component 
+        :is="itemElement"
+        v-for="(item, index) in items" 
+        :key="index"
+        :class="[
+          classes.item,
+          item?.classes?.item
+        ]"
+      >
+        <slot :item="item" :index="index">
+          {{ item }}
+        </slot>
+      </component>
+    </template>
+    <slot v-else />
   </component>
 </template>
 
 <script setup>
-  import { computed } from "vue";
+  import { computed, provide } from "vue";
 
   const props = defineProps({
     /**
@@ -42,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: {
@@ -82,8 +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("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

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