@ulu/frontend-vue 0.3.2 → 0.4.1

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

@@ -1 +1 @@
-{"version":3,"file":"UluList.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluList.vue"],"names":[],"mappings":"AA8BA;wBA2OqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;;;;;;;;;;;;;;;;;2OAOG"}
+{"version":3,"file":"UluList.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluList.vue"],"names":[],"mappings":"AAiCA;wBAmPqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;;;;;;;;;;;;;;;;;2OAOG"}

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

@@ -1,13 +1,14 @@
-import { computed as n, createBlock as m, createCommentVNode as u, openBlock as t, resolveDynamicComponent as y, normalizeStyle as B, normalizeClass as o, withCtx as f, createElementBlock as d, Fragment as v, renderList as S, renderSlot as g, createTextVNode as k, toDisplayString as C } from "vue";
+import { computed as n, createBlock as m, createCommentVNode as u, openBlock as l, resolveDynamicComponent as y, normalizeStyle as B, normalizeClass as o, withCtx as f, createElementBlock as d, Fragment as v, renderList as S, renderSlot as g, createTextVNode as k, toDisplayString as C } from "vue";
 const h = {
   __name: "UluList",
   props: {
     /**
      * 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,
     /**
-     * Classes object (keys are list and listItem to be applied to <ul> and <li>)
+     * Classes object (keys are { list, item } to be applied to <ul> and <li>)
      * - Any valid class binding for each
      */
     classes: {
@@ -49,8 +50,8 @@ const h = {
     listStyleType: String
   },
   setup(e) {
-    const l = e, r = n(() => l.ordered || l.forceOrdered), c = n(() => r.value ? "ol" : "ul");
-    return (i, O) => e.items?.length ? (t(), m(y(c.value), {
+    const r = e, s = n(() => r.ordered || r.forceOrdered), c = n(() => s.value ? "ol" : "ul");
+    return (i, O) => e.items?.length ? (l(), m(y(c.value), {
       key: 0,
       class: o([
         {
@@ -64,19 +65,22 @@ const h = {
       style: B({
         listStyleType: e.listStyleType
       }),
-      reversed: r.value ? e.reversed : null,
+      reversed: s.value ? e.reversed : null,
       start: e.start
     }, {
       default: f(() => [
-        (t(!0), d(v, null, S(e.items, (s, a) => (t(), d("li", {
+        (l(!0), d(v, null, S(e.items, (t, a) => (l(), d("li", {
           key: a,
-          class: o(e.classes.listItem)
+          class: o([
+            e.classes.item,
+            t?.classes?.item
+          ])
         }, [
           g(i.$slots, "default", {
-            item: s,
+            item: t,
             index: a
           }, () => [
-            k(C(s), 1)
+            k(C(t), 1)
           ])
         ], 2))), 128))
       ]),

package/dist/components/navigation/UluMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluMenu.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation/UluMenu.vue"],"names":[],"mappings":"AAiDA;wBAyTqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;2OAQG"}
+{"version":3,"file":"UluMenu.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/navigation/UluMenu.vue"],"names":[],"mappings":"AAsDA;wBAwUqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;2OAQG"}

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

@@ -1,7 +1,7 @@
-import { resolveComponent as O, resolveDirective as $, createElementBlock as r, createCommentVNode as n, openBlock as t, normalizeClass as a, Fragment as S, renderList as d, withDirectives as x, renderSlot as u, createBlock as i, mergeProps as f, withCtx as y, createElementVNode as b, toDisplayString as D, createSlots as E } from "vue";
-import I from "../utils/UluAction.vue.js";
-import M from "../elements/UluIcon.vue.js";
-import U from "../elements/UluTag.vue.js";
+import { resolveComponent as O, resolveDirective as $, createElementBlock as i, createCommentVNode as c, openBlock as t, normalizeClass as a, Fragment as w, renderList as k, withDirectives as S, renderSlot as u, createBlock as o, withCtx as h, createElementVNode as x, toDisplayString as b, mergeProps as m, createSlots as D } from "vue";
+import E from "../utils/UluAction.vue.js";
+import I from "../elements/UluIcon.vue.js";
+import M from "../elements/UluTag.vue.js";
 const j = {
   __name: "UluMenu",
   props: {
@@ -41,18 +41,18 @@ const j = {
      */
     "item-click"
   ],
-  setup(l, { emit: C }) {
-    const h = C, v = (s, c) => {
-      c.click && c.click(s), h("item-click", { item: c, event: s });
+  setup(l, { emit: y }) {
+    const C = y, g = (s, n) => {
+      n.click && n.click(s), C("item-click", { item: n, event: s });
     };
-    return (s, c) => {
-      const g = O("UluMenu", !0), A = $("ulu-tooltip");
-      return l.items?.length ? (t(), r("ul", {
+    return (s, n) => {
+      const v = O("UluMenu", !0), A = $("ulu-tooltip");
+      return l.items?.length ? (t(), i("ul", {
         key: 0,
         class: a(l.classes.list)
       }, [
-        (t(!0), r(S, null, d(l.items, (e, o) => (t(), r("li", {
-          key: o,
+        (t(!0), i(w, null, k(l.items, (e, r) => (t(), i("li", {
+          key: r,
           class: a([
             l.classes.item,
             e?.classes?.item,
@@ -60,58 +60,64 @@ const j = {
             e.separatorAfter ? l.classes.itemSeparatorAfter : ""
           ])
         }, [
-          x((t(), i(I, f({ ref_for: !0 }, e, {
+          S((t(), o(E, {
+            to: e.to,
+            path: e.path,
+            href: e.href,
+            target: e.target,
+            download: e.download,
+            element: e.element,
             activeClass: l.classes.linkActive,
             exactActiveClass: l.classes.linkExactActive,
-            onClick: (k) => {
-              v(k, e);
+            onClick: (f) => {
+              g(f, e);
             },
-            class: [l.classes.link, e?.classes?.link],
+            class: a([l.classes.link, e?.classes?.link]),
             "aria-label": l.iconOnly ? e.title : null,
             id: e.id
-          }), {
-            default: y(() => [
+          }, {
+            default: h(() => [
               u(s.$slots, "default", {
                 item: e,
-                index: o
+                index: r
               }, () => [
-                e.icon ? (t(), i(M, {
+                e.icon ? (t(), o(I, {
                   key: 0,
                   icon: e.icon,
                   class: a([l.classes.linkIcon, e?.classes?.linkIcon])
-                }, null, 8, ["icon", "class"])) : n("", !0),
-                b("span", {
+                }, null, 8, ["icon", "class"])) : c("", !0),
+                x("span", {
                   class: a([l.classes.linkText, e?.classes?.linkText])
-                }, D(e.title), 3),
-                e.tag ? (t(), i(U, f({
+                }, b(e.title), 3),
+                e.tag ? (t(), o(M, m({
                   key: 1,
                   ref_for: !0
-                }, e.tag), null, 16)) : n("", !0)
+                }, e.tag), null, 16)) : c("", !0)
               ])
             ]),
             _: 2
-          }, 1040, ["activeClass", "exactActiveClass", "onClick", "class", "aria-label", "id"])), [
+          }, 1032, ["to", "path", "href", "target", "download", "element", "activeClass", "exactActiveClass", "onClick", "class", "aria-label", "id"])), [
             [A, l.iconOnly ? e.title : e.tooltip || null]
           ]),
           u(s.$slots, "item", {
             item: e,
-            index: o
+            index: r
           }),
-          !l.noChildren && e?.children?.length ? (t(), i(g, {
+          !l.noChildren && e?.children?.length ? (t(), o(v, {
             key: 0,
             iconOnly: l.iconOnly,
             classes: l.classes,
             items: e.children
-          }, E({ _: 2 }, [
-            d(s.$slots, (k, m) => ({
-              name: m,
-              fn: y((B) => [
-                u(s.$slots, m, f({ ref_for: !0 }, B))
+          }, D({ _: 2 }, [
+            k(s.$slots, (f, d) => ({
+              name: d,
+              fn: h((B) => [
+                u(s.$slots, d, m({ ref_for: !0 }, B))
               ])
             }))
-          ]), 1032, ["iconOnly", "classes", "items"])) : n("", !0)
+          ]), 1032, ["iconOnly", "classes", "items"])) : c("", !0)
         ], 2))), 128))
-      ], 2)) : n("", !0);
+      ], 2)) : c("", !0);
     };
   }
 };

package/lib/components/elements/UluList.vue

@@ -20,7 +20,10 @@
     <li 
       v-for="(item, index) in items" 
       :key="index"
-      :class="classes.listItem"
+      :class="[
+        classes.item,
+        item?.classes?.item
+      ]"
     >
       <slot :item="item" :index="index">
         {{ item }}
@@ -35,10 +38,11 @@
   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,
     /**
-     * Classes object (keys are list and listItem to be applied to <ul> and <li>)
+     * Classes object (keys are { list, item } to be applied to <ul> and <li>)
      * - Any valid class binding for each
      */
     classes: {

package/lib/components/navigation/UluMenu.vue

@@ -14,7 +14,12 @@
       ]"
     >
       <UluAction
-        v-bind="item"
+        :to="item.to"
+        :path="item.path"
+        :href="item.href"
+        :target="item.target"
+        :download="item.download"
+        :element="item.element"
         :activeClass="classes.linkActive"
         :exactActiveClass="classes.linkExactActive"
         @click="(event) => { handleItemClick(event, item) }"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [
@@ -65,7 +65,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@headlessui/vue": "^1.7.23",
     "@portabletext/vue": "^1.0.14",
-    "@ulu/frontend": "^0.3.0",
+    "@ulu/frontend": "^0.3.6",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "fuse.js": "^6.6.2",
@@ -87,7 +87,7 @@
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.3.3",
+    "@ulu/frontend": "^0.3.6",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",