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

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

@@ -1,14 +1,11 @@
-import { resolveComponent as m, createElementBlock as i, openBlock as s, normalizeClass as r, createElementVNode as o, createVNode as u, createCommentVNode as f, renderSlot as n, toDisplayString as c, createTextVNode as p, computed as _ } from "vue";
-import g from "./UluButton.vue.js";
-import y from "./UluIcon.vue.js";
-import { useModifiers as v } from "../../composables/useModifiers.js";
-import S from "../../_virtual/_plugin-vue_export-helper.js";
-const U = {
-  name: "UluAlert",
-  components: {
-    UluButton: g,
-    UluIcon: y
-  },
+import { computed as d, createElementBlock as s, openBlock as n, normalizeClass as r, unref as m, createElementVNode as t, createVNode as u, createCommentVNode as p, renderSlot as i, toDisplayString as a, createTextVNode as f } from "vue";
+import g from "./UluIcon.vue.js";
+import { useModifiers as y } from "../../composables/useModifiers.js";
+const v = { class: "layout-flex" }, S = { class: "type-small" }, $ = {
+  key: 0,
+  class: "margin-left-auto align-self-center"
+}, B = {
+  __name: "UluAlert",
   props: {
     /**
      * Alert Title
@@ -39,49 +36,41 @@ const U = {
     modifiers: [String, Array]
   },
   setup(e) {
-    const { resolvedModifiers: l } = v({
-      props: e,
+    const o = e, { resolvedModifiers: c } = y({
+      props: o,
       baseClass: "callout",
-      internal: _(() => ({
-        [e.type]: e.type,
-        compact: e.compact
+      internal: d(() => ({
+        [o.type]: o.type,
+        compact: o.compact
       }))
     });
-    return { resolvedModifiers: l };
-  }
-}, h = { class: "layout-flex" }, $ = { class: "type-small" }, B = {
-  key: 0,
-  class: "margin-left-auto align-self-center"
-};
-function C(e, l, t, a, N, V) {
-  const d = m("UluIcon");
-  return s(), i("div", {
-    class: r(["callout", a.resolvedModifiers])
-  }, [
-    o("div", h, [
-      u(d, {
-        class: r(["type-large margin-right-small", `color-${t.type}`]),
-        icon: t.icon || `type:${t.type}`
-      }, null, 8, ["class", "icon"]),
-      o("div", $, [
-        o("div", null, [
-          n(e.$slots, "title", {}, () => [
-            o("strong", null, c(t.title), 1)
+    return (l, h) => (n(), s("div", {
+      class: r(["callout", m(c)])
+    }, [
+      t("div", v, [
+        u(g, {
+          class: r(["type-large margin-right-small", `color-${e.type}`]),
+          icon: e.icon || `type:${e.type}`
+        }, null, 8, ["class", "icon"]),
+        t("div", S, [
+          t("div", null, [
+            i(l.$slots, "title", {}, () => [
+              t("strong", null, a(e.title), 1)
+            ])
+          ]),
+          t("div", null, [
+            i(l.$slots, "description", {}, () => [
+              f(a(e.description), 1)
+            ])
           ])
         ]),
-        o("div", null, [
-          n(e.$slots, "description", {}, () => [
-            p(c(t.description), 1)
-          ])
-        ])
-      ]),
-      e.$slots.action ? (s(), i("div", B, [
-        n(e.$slots, "action")
-      ])) : f("", !0)
-    ])
-  ], 2);
-}
-const b = /* @__PURE__ */ S(U, [["render", C]]);
+        l.$slots.action ? (n(), s("div", $, [
+          i(l.$slots, "action")
+        ])) : p("", !0)
+      ])
+    ], 2));
+  }
+};
 export {
-  b as default
+  B as default
 };

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

@@ -7,20 +7,20 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     skeleton: boolean;
     type?: string | undefined;
     size?: string | undefined;
-    text?: string | undefined;
-    href?: string | undefined;
-    alt?: string | undefined;
     to?: string | Record<string, any> | undefined;
+    href?: string | undefined;
     click?: Function | undefined;
+    text?: string | undefined;
+    alt?: string | undefined;
     $props: {
         readonly skeleton?: boolean | undefined;
         readonly type?: string | undefined;
         readonly size?: string | undefined;
-        readonly text?: string | undefined;
-        readonly href?: string | undefined;
-        readonly alt?: string | undefined;
         readonly to?: string | Record<string, any> | undefined;
+        readonly href?: string | undefined;
         readonly click?: Function | undefined;
+        readonly text?: string | undefined;
+        readonly alt?: string | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 type __VLS_TemplateResult = {

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

@@ -3,6 +3,6 @@ declare const _default: import('vue').DefineComponent<{}, {
     $props: {
         readonly items?: unknown[] | undefined;
     };
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLUListElement>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=UluBadgeStack.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UluBadgeStack.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluBadgeStack.vue"],"names":[],"mappings":"AAWA;"}
+{"version":3,"file":"UluBadgeStack.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluBadgeStack.vue"],"names":[],"mappings":"AAcA;"}

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

@@ -1,6 +1,9 @@
-import { createElementBlock as e, openBlock as r, Fragment as c, renderList as o, createVNode as n, mergeProps as l } from "vue";
-import m from "./UluBadge.vue.js";
-const _ = { class: "badge-stack" }, f = {
+import { createElementBlock as e, createCommentVNode as c, openBlock as t, Fragment as m, renderList as n, createVNode as o, mergeProps as l } from "vue";
+import u from "./UluBadge.vue.js";
+const i = {
+  key: 0,
+  class: "badge-stack"
+}, g = {
   __name: "UluBadgeStack",
   props: {
     /**
@@ -8,17 +11,17 @@ const _ = { class: "badge-stack" }, f = {
      */
     items: Array
   },
-  setup(t) {
-    return (u, i) => (r(), e("ul", _, [
-      (r(!0), e(c, null, o(t.items, (a, s) => (r(), e("li", {
+  setup(r) {
+    return (_, d) => r.items?.length ? (t(), e("ul", i, [
+      (t(!0), e(m, null, n(r.items, (a, s) => (t(), e("li", {
         class: "badge-stack__item",
         key: s
       }, [
-        n(m, l({ ref_for: !0 }, a), null, 16)
+        o(u, l({ ref_for: !0 }, a), null, 16)
       ]))), 128))
-    ]));
+    ])) : c("", !0);
   }
 };
 export {
-  f as default
+  g as default
 };

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

@@ -1,186 +1,56 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    /**
-     * Icon prop, if used will set the icon for the button, will use UluIcon (which uses font-awesome icons conditionally)
-     * - If using custom icons don't use this prop, use before or after slots with correct classes (ie .button__icon)
-     */
-    icon: (StringConstructor | ArrayConstructor)[];
-    /**
-     * If passing an icon (and not using iconOnly) this determines if the icon is before or after (default) the text
-     */
-    iconBefore: BooleanConstructor;
-    /**
-     * Button style for only icon
-     */
-    iconOnly: BooleanConstructor;
-    /**
-     * If set will use router-link for button component and pass to prop
-     */
-    to: (ObjectConstructor | StringConstructor)[];
-    /**
-     * Sets the button to a link with this href
-     */
-    href: StringConstructor;
-    /**
-     * Set a value for target attribute when button is a link
-     */
-    target: StringConstructor;
-    /**
-     * Sets the download attribute on the link (passing string [filename] will populate the download attribute, true will just include it as boolean attribute)
-     */
-    download: (BooleanConstructor | StringConstructor)[];
-    /**
-     * For icon only buttons or buttons that need an explicit label
-     */
-    alt: StringConstructor;
-    /**
-     * If not using slot this sets the buttons text via prop
-     */
-    text: StringConstructor;
-    /**
-     * Pass any sizes setup for button (ie. small, large, etc)
-     */
-    size: StringConstructor;
-    /**
-     * Preset to set primary style (needs to be a button style in ulu scss)
-     */
-    primary: BooleanConstructor;
-    /**
-     * Preset to set secondary style (needs to be a button style in ulu scss)
-     */
-    secondary: BooleanConstructor;
-    /**
-     * Preset to set small size (use "size" for any sizes)
-     */
-    small: BooleanConstructor;
-    /**
-     * Preset to set large size (use "size" for any sizes)
-     */
-    large: BooleanConstructor;
-    /**
-     * Preset to set outline style button (needs to be a button style in ulu scss)
-     */
-    outline: BooleanConstructor;
-    /**
-     * Preset to set transparent style button (needs to be a button style in ulu scss)
-     */
-    transparent: BooleanConstructor;
-    /**
-     * Add no-margin utility
-     */
-    noMargin: BooleanConstructor;
-    /**
-     * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
-     */
-    modifiers: (StringConstructor | ArrayConstructor)[];
-}>, {
-    resolvedModifiers: any;
-}, {}, {
-    resolvedAriaLabel(): string | null;
-    classes(): string[];
-    element(): "button" | import('vue-router')._RouterLinkI | "a";
-    attrs(): {
-        to: string | Record<string, any>;
-        href?: undefined;
-    } | {
-        href: string;
-        to?: undefined;
-    } | {
-        to?: undefined;
-        href?: undefined;
-    };
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    /**
-     * Icon prop, if used will set the icon for the button, will use UluIcon (which uses font-awesome icons conditionally)
-     * - If using custom icons don't use this prop, use before or after slots with correct classes (ie .button__icon)
-     */
-    icon: (StringConstructor | ArrayConstructor)[];
-    /**
-     * If passing an icon (and not using iconOnly) this determines if the icon is before or after (default) the text
-     */
-    iconBefore: BooleanConstructor;
-    /**
-     * Button style for only icon
-     */
-    iconOnly: BooleanConstructor;
-    /**
-     * If set will use router-link for button component and pass to prop
-     */
-    to: (ObjectConstructor | StringConstructor)[];
-    /**
-     * Sets the button to a link with this href
-     */
-    href: StringConstructor;
-    /**
-     * Set a value for target attribute when button is a link
-     */
-    target: StringConstructor;
-    /**
-     * Sets the download attribute on the link (passing string [filename] will populate the download attribute, true will just include it as boolean attribute)
-     */
-    download: (BooleanConstructor | StringConstructor)[];
-    /**
-     * For icon only buttons or buttons that need an explicit label
-     */
-    alt: StringConstructor;
-    /**
-     * If not using slot this sets the buttons text via prop
-     */
-    text: StringConstructor;
-    /**
-     * Pass any sizes setup for button (ie. small, large, etc)
-     */
-    size: StringConstructor;
-    /**
-     * Preset to set primary style (needs to be a button style in ulu scss)
-     */
-    primary: BooleanConstructor;
-    /**
-     * Preset to set secondary style (needs to be a button style in ulu scss)
-     */
-    secondary: BooleanConstructor;
-    /**
-     * Preset to set small size (use "size" for any sizes)
-     */
-    small: BooleanConstructor;
-    /**
-     * Preset to set large size (use "size" for any sizes)
-     */
-    large: BooleanConstructor;
-    /**
-     * Preset to set outline style button (needs to be a button style in ulu scss)
-     */
-    outline: BooleanConstructor;
-    /**
-     * Preset to set transparent style button (needs to be a button style in ulu scss)
-     */
-    transparent: BooleanConstructor;
-    /**
-     * Add no-margin utility
-     */
-    noMargin: BooleanConstructor;
-    /**
-     * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
-     */
-    modifiers: (StringConstructor | ArrayConstructor)[];
-}>> & Readonly<{}>, {
-    small: boolean;
+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<{}, {
     iconOnly: boolean;
     iconBefore: boolean;
     primary: boolean;
     secondary: boolean;
+    small: boolean;
     large: boolean;
     outline: boolean;
     transparent: boolean;
     noMargin: boolean;
-}, {}, {
-    UluIcon: import('vue').DefineComponent<{}, {
-        spaced: boolean;
-        icon?: string | boolean | Record<string, any> | unknown[] | undefined;
-        $props: {
-            readonly spaced?: boolean | undefined;
-            readonly icon?: string | boolean | Record<string, any> | unknown[] | undefined;
-        };
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
+    size?: string | undefined;
+    icon?: string | unknown[] | undefined;
+    modifiers?: string | unknown[] | undefined;
+    to?: string | Record<string, any> | undefined;
+    target?: string | undefined;
+    href?: string | undefined;
+    download?: string | boolean | undefined;
+    text?: string | undefined;
+    alt?: string | undefined;
+    $props: {
+        readonly iconOnly?: boolean | undefined;
+        readonly iconBefore?: boolean | undefined;
+        readonly primary?: boolean | undefined;
+        readonly secondary?: boolean | undefined;
+        readonly small?: boolean | undefined;
+        readonly large?: boolean | undefined;
+        readonly outline?: boolean | undefined;
+        readonly transparent?: boolean | undefined;
+        readonly noMargin?: boolean | undefined;
+        readonly size?: string | undefined;
+        readonly icon?: string | unknown[] | undefined;
+        readonly modifiers?: string | unknown[] | undefined;
+        readonly to?: string | Record<string, any> | undefined;
+        readonly target?: string | undefined;
+        readonly href?: string | undefined;
+        readonly download?: string | boolean | undefined;
+        readonly text?: string | undefined;
+        readonly alt?: string | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+type __VLS_TemplateResult = {
+    attrs: Partial<{}>;
+    slots: {
+        before?(_: {}): any;
+        default?(_: {}): any;
+        after?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
 //# sourceMappingURL=UluButton.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UluButton.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluButton.vue"],"names":[],"mappings":"AAwCA;;IA2KM;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;IAvEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG"}
+{"version":3,"file":"UluButton.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluButton.vue"],"names":[],"mappings":"AAkCA;wBA0WqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2OAQG"}

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

@@ -1,13 +1,9 @@
-import { RouterLink as m } from "vue-router";
-import f from "./UluIcon.vue.js";
-import { useModifiers as d } from "../../composables/useModifiers.js";
-import { resolveComponent as b, createBlock as i, openBlock as l, resolveDynamicComponent as g, mergeProps as y, withCtx as B, renderSlot as s, createCommentVNode as c, createElementBlock as _, createTextVNode as h, toDisplayString as S } from "vue";
-import k from "../../_virtual/_plugin-vue_export-helper.js";
-const O = {
-  name: "UluButton",
-  components: {
-    UluIcon: f
-  },
+import { computed as i, createBlock as a, openBlock as t, normalizeClass as d, unref as m, withCtx as f, renderSlot as l, createCommentVNode as r, createElementBlock as g, createTextVNode as y, toDisplayString as B } from "vue";
+import b from "../utils/UluAction.vue.js";
+import c from "./UluIcon.vue.js";
+import { useModifiers as S } from "../../composables/useModifiers.js";
+const h = { key: 1 }, z = {
+  __name: "UluButton",
   props: {
     /**
      * Icon prop, if used will set the icon for the button, will use UluIcon (which uses font-awesome icons conditionally)
@@ -84,68 +80,59 @@ const O = {
     modifiers: [String, Array]
   },
   setup(e) {
-    const { resolvedModifiers: n } = d({ props: e, baseClass: "button" });
-    return { resolvedModifiers: n };
-  },
-  computed: {
-    resolvedAriaLabel() {
-      const e = this.alt || this.iconOnly && this.text;
-      return e || null;
-    },
-    classes() {
-      const e = [], { size: n } = this;
-      return n && e.push(`button--${n}`), e;
-    },
-    element() {
-      return this.to ? m : this.href ? "a" : "button";
-    },
-    attrs() {
-      const { to: e, href: n, download: t, target: o } = this, r = e ? { to: e } : n ? { href: n } : {};
-      return n && (o && (r.target = o), t && (r.download = typeof t == "string" ? t : !0)), r;
-    }
+    const n = e, { resolvedModifiers: s } = S({
+      props: n,
+      baseClass: "button",
+      internal: i(() => ({
+        transparent: n.transparent,
+        primary: n.primary,
+        secondary: n.secondary,
+        outline: n.outline,
+        small: n.small,
+        large: n.large,
+        icon: n.iconOnly,
+        [n.size]: n.size
+      }))
+    }), u = i(() => {
+      const o = n.alt || n.iconOnly && n.text;
+      return o || null;
+    });
+    return (o, O) => (t(), a(b, {
+      to: e.to,
+      href: e.href,
+      target: e.target,
+      download: e.download,
+      class: d(["button", [
+        {
+          "no-margin": e.noMargin
+        },
+        m(s)
+      ]]),
+      "aria-label": u.value
+    }, {
+      default: f(() => [
+        l(o.$slots, "before"),
+        e.icon && (e.iconBefore || e.iconOnly) ? (t(), a(c, {
+          key: 0,
+          icon: e.icon,
+          class: "button__icon"
+        }, null, 8, ["icon"])) : r("", !0),
+        (o.$slots.default || e.text) && !e.iconOnly ? (t(), g("span", h, [
+          l(o.$slots, "default", {}, () => [
+            y(B(e.text), 1)
+          ])
+        ])) : r("", !0),
+        e.icon && !e.iconBefore && !e.iconOnly ? (t(), a(c, {
+          key: 2,
+          icon: e.icon,
+          class: "button__icon"
+        }, null, 8, ["icon"])) : r("", !0),
+        l(o.$slots, "after")
+      ]),
+      _: 3
+    }, 8, ["to", "href", "target", "download", "class", "aria-label"]));
   }
-}, v = { key: 1 };
-function x(e, n, t, o, r, a) {
-  const u = b("UluIcon");
-  return l(), i(g(a.element), y({
-    class: ["button", [
-      {
-        "button--transparent": t.transparent,
-        "button--primary": t.primary,
-        "button--secondary": t.secondary,
-        "button--outline": t.outline,
-        "button--small": t.small,
-        "button--large": t.large,
-        "button--icon": t.iconOnly,
-        "no-margin": t.noMargin
-      },
-      a.classes,
-      o.resolvedModifiers
-    ]]
-  }, a.attrs, { "aria-label": a.resolvedAriaLabel }), {
-    default: B(() => [
-      s(e.$slots, "before"),
-      t.icon && (t.iconBefore || t.iconOnly) ? (l(), i(u, {
-        key: 0,
-        icon: t.icon,
-        class: "button__icon"
-      }, null, 8, ["icon"])) : c("", !0),
-      (e.$slots.default || t.text) && !t.iconOnly ? (l(), _("span", v, [
-        s(e.$slots, "default", {}, () => [
-          h(S(t.text), 1)
-        ])
-      ])) : c("", !0),
-      t.icon && !t.iconBefore && !t.iconOnly ? (l(), i(u, {
-        key: 2,
-        icon: t.icon,
-        class: "button__icon"
-      }, null, 8, ["icon"])) : c("", !0),
-      s(e.$slots, "after")
-    ]),
-    _: 3
-  }, 16, ["class", "aria-label"]);
-}
-const I = /* @__PURE__ */ k(O, [["render", x]]);
+};
 export {
-  I as default
+  z as default
 };