@ulu/frontend-vue 0.2.0-beta.6 → 0.2.0-beta.7

package/dist/components/collapsible/UluModal.vue.d.ts

@@ -93,7 +93,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
      */
     classes: {
         type: ObjectConstructor;
-        default: () => {};
+        default: () => {
+            close: string;
+        };
     };
     /**
      * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
@@ -216,7 +218,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
      */
     classes: {
         type: ObjectConstructor;
-        default: () => {};
+        default: () => {
+            close: string;
+        };
     };
     /**
      * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])

package/dist/components/collapsible/UluModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluModal.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluModal.vue"],"names":[],"mappings":"AA+DA;;IA2YM;;OAEG;;IAEH;;;;OAIG;;;;;IAKH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;IAKH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;IAlGH;;OAEG;;IAEH;;;;OAIG;;;;;IAKH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;IAKH;;OAEG"}
+{"version":3,"file":"UluModal.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluModal.vue"],"names":[],"mappings":"AAqEA;;IAmZM;;OAEG;;IAEH;;;;OAIG;;;;;IAKH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;IAOH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;IApGH;;OAEG;;IAEH;;;;OAIG;;;;;IAKH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;IAOH;;OAEG"}

package/dist/components/collapsible/UluModal.vue.js

@@ -1,11 +1,11 @@
-import { resolveComponent as v, createBlock as b, openBlock as a, Teleport as S, createElementVNode as d, withModifiers as R, normalizeStyle as _, normalizeClass as c, createElementBlock as z, createCommentVNode as u, renderSlot as h, toDisplayString as I, createVNode as g, useSlots as k, computed as f } from "vue";
+import { resolveComponent as v, createBlock as b, openBlock as d, Teleport as S, createElementVNode as c, withModifiers as R, normalizeStyle as _, normalizeClass as r, createElementBlock as z, createCommentVNode as u, renderSlot as h, toDisplayString as I, createVNode as g, useSlots as k, computed as f } from "vue";
 import C from "../elements/UluIcon.vue.js";
 import { useModifiers as w } from "../../composables/useModifiers.js";
 import { preventScroll as E, wasClickOutside as B } from "@ulu/utils/browser/dom.js";
 import { Resizer as M } from "@ulu/frontend";
 import { newId as V } from "../../utils/dom.js";
-import p from "../../_virtual/_plugin-vue_export-helper.js";
-const T = {
+import T from "../../_virtual/_plugin-vue_export-helper.js";
+const p = {
   name: "UluModal",
   components: {
     UluIcon: C
@@ -107,7 +107,9 @@ const T = {
      */
     classes: {
       type: Object,
-      default: () => ({})
+      default: () => ({
+        close: "button button--icon"
+      })
     },
     /**
      * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
@@ -124,7 +126,7 @@ const T = {
     };
   },
   setup(e) {
-    const t = k(), l = f(() => e.title || t.title), o = f(() => {
+    const l = k(), t = f(() => e.title || l.title), o = f(() => {
       const { allowResize: i, position: m } = e;
       if (!i || !m) return;
       const y = ["left", "right", "center"];
@@ -133,28 +135,28 @@ const T = {
       [e.position]: e.position,
       resize: e.allowResize,
       "no-resize": !e.allowResize,
-      "no-header": !l.value,
+      "no-header": !t.value,
       "body-fills": e.bodyFills,
       "no-backdrop": e.noBackdrop,
       "no-min-height": e.noMinHeight,
       "non-modal": e.nonModal,
       "resizer-active": o.value
-    })), { resolvedModifiers: r } = w({
+    })), { resolvedModifiers: a } = w({
       props: e,
       baseClass: "modal",
       internal: s
     });
     return {
-      resolvedModifiers: r,
-      hasHeader: l,
+      resolvedModifiers: a,
+      hasHeader: t,
       resizerEnabled: o,
       resizerIconType: n
     };
   },
   computed: {
     resolvedLabelledby() {
-      const { labelledby: e, titleId: t } = this;
-      return e || t;
+      const { labelledby: e, titleId: l } = this;
+      return e || l;
     }
   },
   watch: {
@@ -163,8 +165,8 @@ const T = {
       immediate: !0,
       handler(e) {
         this.$nextTick(() => {
-          const { container: t } = this.$refs;
-          e ? (t[this.nonModal ? "show" : "showModal"](), this.$emit("open")) : t.close();
+          const { container: l } = this.$refs;
+          e ? (l[this.nonModal ? "show" : "showModal"](), this.$emit("open")) : l.close();
         });
       }
     },
@@ -177,8 +179,8 @@ const T = {
         }) : this.destroyResizer();
       }
     },
-    position(e, t) {
-      e !== t && (this.destroyResizer(), this.$nextTick(() => {
+    position(e, l) {
+      e !== l && (this.destroyResizer(), this.$nextTick(() => {
         this.setupResizer();
       }));
     }
@@ -192,8 +194,8 @@ const T = {
     },
     handleClick(e) {
       if (this.clickOutsideCloses && !this.isResizing) {
-        const { target: t } = e, { container: l } = this.$refs;
-        t === l && B(l, e) && this.close();
+        const { target: l } = e, { container: t } = this.$refs;
+        l === t && B(t, e) && this.close();
       }
     },
     setupPreventScroll() {
@@ -205,21 +207,21 @@ const T = {
     },
     handleToggle(e) {
       if (!this.nonModal && this.preventScroll) {
-        const { preventScrollShift: t } = this;
-        e.newState === "open" ? this.restoreScroll = E({ preventShift: t }) : this.destroyPreventScroll();
+        const { preventScrollShift: l } = this;
+        e.newState === "open" ? this.restoreScroll = E({ preventShift: l }) : this.destroyPreventScroll();
       }
     },
     setupResizer() {
-      const { position: e, resizerEnabled: t } = this;
-      if (t) {
-        const { container: l, resizer: o } = this.$refs, n = e === "center" ? { fromX: "right", fromY: "bottom", multiplier: 2 } : { fromX: e === "right" ? "left" : "right" };
-        this.resizerInstance = new M(l, o, n), this.handleResizerStart = () => {
+      const { position: e, resizerEnabled: l } = this;
+      if (l) {
+        const { container: t, resizer: o } = this.$refs, n = e === "center" ? { fromX: "right", fromY: "bottom", multiplier: 2 } : { fromX: e === "right" ? "left" : "right" };
+        this.resizerInstance = new M(t, o, n), this.handleResizerStart = () => {
           this.isResizing = !0;
         }, this.handleResizerEnd = () => {
           setTimeout(() => {
             this.isResizing = !1;
           }, 0);
-        }, l.addEventListener("ulu:resizer:start", this.handleResizerStart), l.addEventListener("ulu:resizer:end", this.handleResizerEnd);
+        }, t.addEventListener("ulu:resizer:start", this.handleResizerStart), t.addEventListener("ulu:resizer:end", this.handleResizerEnd);
       }
     },
     destroyResizer() {
@@ -240,77 +242,77 @@ const T = {
   ref: "resizer",
   type: "button"
 };
-function H(e, t, l, o, n, s) {
-  const r = v("UluIcon");
-  return a(), b(S, {
-    to: l.teleport === !1 ? null : l.teleport,
-    disabled: l.teleport === !1
+function H(e, l, t, o, n, s) {
+  const a = v("UluIcon");
+  return d(), b(S, {
+    to: t.teleport === !1 ? null : t.teleport,
+    disabled: t.teleport === !1
   }, [
-    d("dialog", {
-      class: c(["modal", [o.resolvedModifiers, l.classes.container]]),
+    c("dialog", {
+      class: r(["modal", [o.resolvedModifiers, t.classes.container]]),
       "aria-labelledby": s.resolvedLabelledby,
-      "aria-describedby": l.describedby,
+      "aria-describedby": t.describedby,
       ref: "container",
       style: _({ width: n.containerWidth }),
-      onCancel: t[1] || (t[1] = R((...i) => s.close && s.close(...i), ["prevent"])),
-      onClose: t[2] || (t[2] = (...i) => s.handleDialogCloseEvent && s.handleDialogCloseEvent(...i)),
-      onClick: t[3] || (t[3] = (...i) => s.handleClick && s.handleClick(...i)),
-      onToggle: t[4] || (t[4] = (...i) => s.handleToggle && s.handleToggle(...i))
+      onCancel: l[1] || (l[1] = R((...i) => s.close && s.close(...i), ["prevent"])),
+      onClose: l[2] || (l[2] = (...i) => s.handleDialogCloseEvent && s.handleDialogCloseEvent(...i)),
+      onClick: l[3] || (l[3] = (...i) => s.handleClick && s.handleClick(...i)),
+      onToggle: l[4] || (l[4] = (...i) => s.handleToggle && s.handleToggle(...i))
     }, [
-      o.hasHeader ? (a(), z("header", {
+      o.hasHeader ? (d(), z("header", {
         key: 0,
-        class: c(["modal__header", l.classes.header])
+        class: r(["modal__header", t.classes.header])
       }, [
-        d("h2", {
-          class: c(["modal__title", l.classes.title]),
+        c("h2", {
+          class: r(["modal__title", t.classes.title]),
           id: n.titleId
         }, [
           h(e.$slots, "title", { close: s.close }, () => [
-            l.titleIcon ? (a(), b(r, {
+            t.titleIcon ? (d(), b(a, {
               key: 0,
               class: "modal__title-icon",
-              icon: l.titleIcon
+              icon: t.titleIcon
             }, null, 8, ["icon"])) : u("", !0),
-            d("span", L, I(l.title), 1)
+            c("span", L, I(t.title), 1)
           ])
         ], 10, P),
-        d("button", {
-          class: "modal__close",
+        c("button", {
+          class: r(["modal__close", t.classes.close]),
           "aria-label": "Close modal",
-          onClick: t[0] || (t[0] = (...i) => s.close && s.close(...i)),
+          onClick: l[0] || (l[0] = (...i) => s.close && s.close(...i)),
           autofocus: ""
         }, [
           h(e.$slots, "closeIcon", {}, () => [
-            g(r, {
+            g(a, {
               class: "modal__close-icon",
-              icon: l.closeIcon || "type:close"
+              icon: t.closeIcon || "type:close"
             }, null, 8, ["icon"])
           ])
-        ])
+        ], 2)
       ], 2)) : u("", !0),
-      d("div", {
-        class: c(["modal__body", l.classes.body])
+      c("div", {
+        class: r(["modal__body", t.classes.body])
       }, [
         h(e.$slots, "default", { close: s.close })
       ], 2),
-      e.$slots.footer ? (a(), z("div", {
+      e.$slots.footer ? (d(), z("div", {
         key: 1,
-        class: c(["site-modal__footer", l.classes.footer])
+        class: r(["site-modal__footer", t.classes.footer])
       }, [
         h(e.$slots, "footer", { close: s.close })
       ], 2)) : u("", !0),
-      o.resizerEnabled ? (a(), z("button", U, [
+      o.resizerEnabled ? (d(), z("button", U, [
         h(e.$slots, "resizerIcon", {}, () => [
-          g(r, {
+          g(a, {
             class: "modal__resizer-icon",
-            icon: l.resizerIcon || o.resizerIconType
+            icon: t.resizerIcon || o.resizerIconType
           }, null, 8, ["icon"])
         ])
       ], 512)) : u("", !0)
     ], 46, O)
   ], 8, ["to", "disabled"]);
 }
-const A = /* @__PURE__ */ p(T, [["render", H]]);
+const A = /* @__PURE__ */ T(p, [["render", H]]);
 export {
   A as default
 };

package/lib/components/collapsible/UluModal.vue

@@ -31,7 +31,13 @@
             <span class="modal__title-text">{{ title }}</span>
           </slot>
         </h2>
-        <button class="modal__close" aria-label="Close modal" @click="close" autofocus>
+        <button 
+          class="modal__close" 
+          :class="classes.close"
+          aria-label="Close modal" 
+          @click="close" 
+          autofocus
+        >
           <slot name="closeIcon">
             <UluIcon 
               class="modal__close-icon" 
@@ -171,7 +177,9 @@
        */
       classes: {
         type: Object,
-        default: () => ({})
+        default: () => ({
+          close: "button button--icon"
+        })
       },
       /**
        * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.2.0-beta.6",
+  "version": "0.2.0-beta.7",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -32,9 +32,7 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "docs:build": "storybook build -o docs",
-    "build": "vite build",
-    "types_TRASH": "vue-tsc",
-    "deploy_TRASH": "rm -rf dist && npm run types && npm run build && npm run docs:build",
+    "build": "vite build --config library.vite.config.js",
     "deploy": "npm run build && npm run docs:build",
     "update-contexts": "rm -rf .ctx && mkdir -p .ctx/frontend && cp -R node_modules/@ulu/frontend/lib/scss node_modules/@ulu/frontend/lib/js .ctx/frontend/"
   },