@ulu/frontend-vue 0.2.0-beta.8 → 0.3.0

package/lib/components/systems/table-sticky/UluTableStickyRows.vue

@@ -1,3 +1,4 @@
+
 <template>
   <tr
     v-for="(row, rowIndex) in rows"
@@ -31,15 +32,6 @@
           :isActual="isActual"
         />
       </template>
-      <!--  
-      <component 
-        v-else-if="column.component" 
-        :is="column.component"
-        :row="row.data" 
-        :column="column"
-        :rowIndex="rowIndex"
-        :index="index"
-      /> -->
       <div 
         v-else-if="column.html" 
         v-html="value({ row, column, rowIndex, isActual, foot })"
@@ -51,23 +43,20 @@
   </tr>
 </template>
 
-<script>
-  export default {
-    name: "UluTableStickyRows",
-    props: {
-      rows: Array,
-      rowColumns: Array,
-      columnWidth: String,
-      optionalAttr: Function,
-      resolveClasses: Function,
-      getCellHeaders: Function,
-      value: Function,
-      isActual: Boolean,
-      classes: Object,
-      foot: {
-        type: Boolean,
-        default: false
-      }
+<script setup>
+  const props = defineProps({
+    rows: Array,
+    rowColumns: Array,
+    columnWidth: String,
+    optionalAttr: Function,
+    resolveClasses: Function,
+    getCellHeaders: Function,
+    value: Function,
+    isActual: Boolean,
+    classes: Object,
+    foot: {
+      type: Boolean,
+      default: false
     }
-  };
+  });
 </script>

package/lib/components/systems/table-sticky/UluTableStickyTable.vue

@@ -1,3 +1,4 @@
+
 <template>
   <table 
     :class="resolveClasses(classes.table, { isActual })"
@@ -132,106 +133,104 @@
   </table>
 </template>
 
-<script>
+<script setup>
   import UluTableStickyRows from "./UluTableStickyRows.vue";
-  export default {
-    name: "UluTableStickyTable",
-    components: {
-      UluTableStickyRows,
+
+  const emit = defineEmits([
+    "column-sorted", 
+    "actual-header-removed", 
+    "actual-header-added"
+  ]);
+
+  const props = defineProps({
+    resolveClasses: Function,
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    caption: String,
+    idPrefix: String,
+    headerRows: {
+      type: Array,
+      required: true
+    },
+    rows: Array,
+    footerRows: Array,
+    rowColumns: Array,
+    /**
+     * Is the actual table not a clone for sticky headers
+     */
+    isActual: {
+      type: Boolean
+    },
+    columnWidth: {
+      type: String
     },
-    props: {
-      resolveClasses: Function,
-      classes: {
-        type: Object,
-        default: () => ({})
-      },
-      caption: String,
-      idPrefix: String,
-      headerRows: {
-        type: Array,
-        required: true
-      },
-      rows: Array,
-      footerRows: Array,
-      rowColumns: Array,
-      /**
-       * Is the actual table not a clone for sticky headers
-       */
-      isActual: {
-        type: Boolean
-      },
-      columnWidth: {
-        type: String
-      },
-      /**
-       * 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 value getter (for rows)
-       * @param {Object} row The current row
-       * @param {Object} column The current column in the row
-       */
-      getColumnTitle: {
-        type: Function,
-        default: ({ column }) => column.title
-      },
+    /**
+     * 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]
     },
-    data() {
-      return {
-        headerRefs: {}
-      };
+    /**
+     * Optional user overridden value getter (for rows)
+     * @param {Object} row The current row
+     * @param {Object} column The current column in the row
+     */
+    getColumnTitle: {
+      type: Function,
+      default: ({ column }) => column.title
     },
-    methods: {
-      handleSortFocus(column, isFocused) {
-        if (this.isActual) {
-          column.sortFocused = isFocused;
-        }
-      },
-      addHeaderRef(column, el) {
-        const { headerRefs, isActual } = this;
-        if (!isActual || !el) return;
-        const { id } = column;
-        const old = headerRefs[id];
-        if (old) {
-          this.$emit("actual-header-removed", old);
-        }
-        this.$emit("actual-header-added", el);
-        headerRefs[id] = el;
-      },
-      /**
-       * False is no longer not printed
-       */
-      optionalAttr(val) {
-        return val ? val : null;
-      },
-      value({ row, column, rowIndex }) {
-        const value = column.value;
-        // Column has value function, pass to user
-        if (value) {
-          return value({ row: row.data, column, rowIndex });
-        } else {
-          // added .value to work with data. Should refactor depending on what we need
-          return this.getRowValue({ row: row.data, column, rowIndex });
-        }
-      },
-      getCellHeaders(column, rowIndex) {
-        const headers = column.headers.join(" ");
-        const rowHeaders = column.getRowHeaders(rowIndex);
-        const s = rowHeaders.length ? " " : "";
-        return `${ headers }${ s }${ rowHeaders }`;
-      },
-      getHeaderHeaders(column) {
-        const headersArray = column.headers.filter(id => id !== column.id);
-        if (headersArray.length) {
-          return headersArray.join(" ");
-        }
-      }
+  });
+
+  const headerRefs = {};
+
+  const handleSortFocus = (column, isFocused) => {
+    if (props.isActual) {
+      column.sortFocused = isFocused;
+    }
+  };
+
+  const addHeaderRef = (column, el) => {
+    if (!props.isActual || !el) return;
+    const { id } = column;
+    const old = headerRefs[id];
+    if (old) {
+      emit("actual-header-removed", old);
+    }
+    emit("actual-header-added", el);
+    headerRefs[id] = el;
+  };
+
+  const optionalAttr = (val) => {
+    return val ? val : null;
+  };
+
+  const value = ({ row, column, rowIndex }) => {
+    const valueFn = column.value;
+    // Column has value function, pass to user
+    if (valueFn) {
+      return valueFn({ row: row.data, column, rowIndex });
+    } else {
+      // added .value to work with data. Should refactor depending on what we need
+      return props.getRowValue({ row: row.data, column, rowIndex });
+    }
+  };
+
+  const getCellHeaders = (column, rowIndex) => {
+    const headers = column.headers.join(" ");
+    const rowHeaders = column.getRowHeaders(rowIndex);
+    const s = rowHeaders.length ? " " : "";
+    return `${ headers }${ s }${ rowHeaders }`;
+  };
+
+  const getHeaderHeaders = (column) => {
+    const headersArray = column.headers.filter(id => id !== column.id);
+    if (headersArray.length) {
+      return headersArray.join(" ");
     }
   };
 </script>

package/lib/components/utils/UluAction.vue

@@ -0,0 +1,81 @@
+<template>
+  <component 
+    :is="resolvedElement" 
+    v-bind="resolvedAttrs"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+  import { RouterLink } from 'vue-router';
+
+  const props = defineProps({
+    /**
+     * Router link target.
+     */
+    to: [String, Object],
+    /**
+     * Alternative to 'to' (used in some legacy or specific data structures like UluMenu items).
+     */
+    path: String,
+    /**
+     * Standard URL for native anchor tags.
+     */
+    href: String,
+    /**
+     * Target attribute for anchor tags (e.g. '_blank').
+     */
+    target: String,
+    /**
+     * Download attribute for anchor tags.
+     */
+    download: [Boolean, String],
+    /**
+     * Optional explicit element to use (e.g., if you need 'div' or 'span' instead of a button).
+     */
+    element: String,
+    /**
+     * Vue Router active class override.
+     */
+    activeClass: String,
+    /**
+     * Vue Router exact active class override.
+     */
+    exactActiveClass: String,
+    /**
+     * Allows passing 'click' as a prop to signify this is an action (used in UluMenu data objects).
+     * Note: The actual @click listener should be attached via fallthrough attrs, this is just for logic routing.
+     */
+    click: Function
+  });
+
+  const resolvedElement = computed(() => {
+    if (props.element) return props.element;
+    if (props.to || props.path) return RouterLink;
+    if (props.href) return "a";
+    return "button";
+  });
+
+  const resolvedAttrs = computed(() => {
+    const attrs = {};
+    
+    if (props.to || props.path) {
+      attrs.to = props.to || props.path;
+      if (props.activeClass) attrs.activeClass = props.activeClass;
+      if (props.exactActiveClass) attrs.exactActiveClass = props.exactActiveClass;
+    } else if (props.href) {
+      attrs.href = props.href;
+      if (props.target) attrs.target = props.target;
+      if (props.download) {
+        attrs.download = typeof props.download === "string" ? props.download : true;
+      }
+    } else if (!props.element || props.element === "button") {
+      // It's a button, ensure it doesn't accidentally submit forms unless requested
+      attrs.type = "button";
+    }
+    
+    return attrs;
+  });
+</script>

package/lib/components/utils/UluConditionalText.vue

@@ -5,24 +5,21 @@
   </component>
 </template>
 
-<script>
+<script setup>
   /**
    * Print out text if set (has value)
    */
-  export default {
-    name: "UluConditionalText",
-    props: {
-      /**
-       * Text to print in element
-       */
-      text: [String, Number, Array, Object],
-      /**
-       * Element type to render (ie. h1, h2, p, etc)
-       */
-      element: {
-        type: String,
-        default: "p"
-      }
+  defineProps({
+    /**
+     * Text to print in element
+     */
+    text: [String, Number, Array, Object],
+    /**
+     * Element type to render (ie. h1, h2, p, etc)
+     */
+    element: {
+      type: String,
+      default: "p"
     }
-  }
+  });
 </script>

package/lib/components/utils/UluConditionalWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <component v-if="!unwrapped" :is="is">
+  <component v-if="!unwrapped" :is="is" v-bind="$attrs">
     <slot></slot>
   </component>
   <template v-else>
@@ -8,6 +8,10 @@
 </template>
 
 <script setup>
+  defineOptions({
+    inheritAttrs: false
+  });
+
   defineProps({
     /**
      * The underlying component or HTML tag to render.

package/lib/components/utils/UluPlaceholderImage.vue

@@ -1,53 +1,51 @@
 <template>
   <img :src="src" :alt="alt">
 </template>
-<script>
+
+<script setup>
+  import { computed } from 'vue';
   import { randomInt } from "@ulu/utils/random.js";
-  export default {
-    name: "UluPlaceholderImage",
-    props: {
-      imageId: String,
-      /**
-       * Width of the image
-       */
-      width: {
-        type: [String, Number],
-        default: "300"
-      },
-      /**
-       * Height of the image
-       */
-      height: {
-        type: [String, Number],
-        default: "400"
-      },
-      /**
-       * Alt text for placeholder image
-       */
-      alt: String,
-      /**
-       * Random size
-       */
-      random: Boolean
+
+  const props = defineProps({
+    imageId: String,
+    /**
+     * Width of the image
+     */
+    width: {
+      type: [String, Number],
+      default: "300"
     },
-    computed: {
-      src() {
-        const { imageId } = this;
-        const { width, height } = this.size;
-        const id = imageId ? `id/${ imageId }/` : "";
-        return `https://picsum.photos/${ id }${ width }/${ height }`;
-      },
-      size() {
-        const { random, width, height } = this;
-        if (random) {
-          return {
-            width: randomInt(500, 1000),
-            height: randomInt(500, 1000),
-          };
-        } else {
-          return { width, height };
-        }
-      }
+    /**
+     * Height of the image
+     */
+    height: {
+      type: [String, Number],
+      default: "400"
+    },
+    /**
+     * Alt text for placeholder image
+     */
+    alt: String,
+    /**
+     * Random size
+     */
+    random: Boolean
+  });
+
+  const size = computed(() => {
+    if (props.random) {
+      return {
+        width: randomInt(500, 1000),
+        height: randomInt(500, 1000),
+      };
+    } else {
+      return { width: props.width, height: props.height };
     }
-  };
+  });
+
+  const src = computed(() => {
+    const { width, height } = size.value;
+    const id = props.imageId ? `id/${ props.imageId }/` : "";
+    return `https://picsum.photos/${ id }${ width }/${ height }`;
+  });
 </script>

package/lib/components/utils/UluPlaceholderText.vue

@@ -8,18 +8,15 @@
   </component>
 </template>
 
-<script>
-  export default {
-    name: "PlaceholderText",
-    props: {
-      amount: {
-        type: Number,
-        default: 1
-      },
-      element: {
-        type: String,
-        default: "p"
-      }
+<script setup>
+  defineProps({
+    amount: {
+      type: Number,
+      default: 1
     },
-  };
+    element: {
+      type: String,
+      default: "p"
+    }
+  });
 </script>

package/lib/components/utils/UluRouteAnnouncer.vue

@@ -20,44 +20,62 @@
   </p>
 </template>
 
-<script>
-  export default {
-    name: "RouteAnnouncer",
-    props: {
-      /**
-       * Allow user to bypass this functionality
-       * - Function should return true if the page should be announced
-       * - Function is passed  (to, from, $route) => {}
-       *   - to/from are path strings
-       */
-      validator: {
-        type: Function,
-        default: () => true
-      },
-      /**
-       * Array of paths to exclude
-       * - Can be exact path "/about" 
-       * - Or can be path with wildcard "/about/*" (match all paths under about)
-       */
-      exclude: {
-        type: Array,
-        default: () => []
-      },
-      /**
-       * Function to retrieve routes title
-       */
-      getTitle: {
-        type: Function,
-        default: (route) => route.meta?.title 
-      }
+<script setup>
+  import { ref, computed, watch, nextTick } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { getRouteTitle } from '../../utils/router.js';
+
+  const props = defineProps({
+    /**
+     * Allow user to bypass this functionality
+     * - Function should return true if the page should be announced
+     * - Function is passed  (to, from, $route) => {}
+     *   - to/from are path strings
+     */
+    validator: {
+      type: Function,
+      default: () => true
+    },
+    /**
+     * Array of paths to exclude
+     * - Can be exact path "/about" 
+     * - Or can be path with wildcard "/about/*" (match all paths under about)
+     */
+    exclude: {
+      type: Array,
+      default: () => []
     },
-    watch: {
-      "$route.path"(to, from) {
-        if (this.$route.hash) {
+    /**
+     * Function to retrieve routes title
+     */
+    getTitle: {
+      type: Function,
+      default: (route) => getRouteTitle(route)
+    }
+  });
+
+  const route = useRoute();
+  const el = ref(null);
+
+  const title = computed(() => {
+    // Check if route exists to prevent crash if not in router context (though required)
+    if (!route) return ""; 
+    const t = props.getTitle(route);
+    if (!t) {
+      console.warn("RouteAnnouncer: No page title!");
+    }
+    return t;
+  });
+
+  if (route) {
+    watch(
+      () => route.path,
+      async (to, from) => {
+        if (route.hash) {
           return;
         }
-        const isValid = this.validator(to, from, this.$route);
-        const isExcluded = this.exclude.some(ex => {
+        const isValid = props.validator(to, from, route);
+        const isExcluded = props.exclude.some(ex => {
           // Allow wildcard at end to exclude entire sections, etc
           if (ex.endsWith("*")) {
             return to.startsWith(ex.slice(0, ex.length - 1));
@@ -66,18 +84,12 @@
           }
         });
         if (isValid && !isExcluded) {
-          this.$refs.el.focus();
-        }
-      }
-    },
-    computed: {
-      title() {
-        const title = this.getTitle(this.$route);
-        if (!title) {
-          console.warn("RouteAnnouncer: No page title!");
+          await nextTick();
+          el.value?.focus();
         }
-        return title;
       }
-    }
-  };
+    );
+  } else {
+    console.error("RouteAnnouncer: No route found (install vue-router).");
+  }
 </script>