@nmorph/nmorph-ui-kit 2.2.12 → 2.2.13

package/README.md

@@ -1,9 +1,9 @@
-# Neumorphic UI Library for Vue 3
+# Neumorphic UI Library for Vue 3 and Nuxt
 
 ## Overview
 
-This is a UI component library for Vue 3, designed using the neumorphism/skeuomorphism style. It offers a set of simple
-components for creating unique user interfaces with a modern, 3D-like appearance.
+This is a UI component library for Vue 3 and Nuxt, designed using the neumorphism/skeuomorphism style. It offers a set
+of simple components for creating unique user interfaces with a modern, 3D-like appearance.
 
 ### What is Neumorphism/Skeuomorphism?
 
@@ -19,8 +19,7 @@ its stability, fixing bugs, and ensuring high-quality components.
 If you encounter any issues, please don't hesitate to report them. Your feedback is highly appreciated and will help
 enhance the library.
 
-**Documentation:** For detailed instructions and examples, visit the
-[official documentation site](https://nmorph.dev).
+**Documentation:** For detailed instructions and examples, visit the [official documentation site](https://nmorph.dev).
 
 ---
 
@@ -29,14 +28,17 @@ enhance the library.
 - **Neumorphic Design:** 3D-like components with soft shadows and smooth gradients.
 - **Customizable Themes:** Easily modify the base color, text color, and accent color to match your application's
   design.
-- **Lightweight and Intuitive:** Simple integration with Vue 3 using modern tools like Vite and Composition API.
+- **Vue and Nuxt Support:** Use the library in Vue 3 apps or through the Nuxt module.
+- **Nuxt SSR Support:** The Nuxt module installs a universal plugin so component markup can render during SSR while
+  browser-only theme and measurement effects run on the client.
+- **Lightweight and Intuitive:** Simple integration with modern tools like Vite, Nuxt, and Composition API.
 
 ---
 
 ## Requirements
 
 - **Node.js:** Version 18.13.0 or higher is required to use this library.
-- **Vue 3:** Ensure your project is set up with Vue 3 and Vite for best compatibility.
+- **Vue 3 or Nuxt:** Ensure your project is set up with Vue 3 or Nuxt 3 for best compatibility.
 
 ---
 
@@ -45,6 +47,8 @@ enhance the library.
 - Neumorphism
 - Skeuomorphism
 - Vue 3
+- Nuxt
+- Nuxt Module
 - UI Components
 - Neumorphic Design
 - Customizable Themes

package/dist/components/basic/nmorph-icon/NmorphIcon.css

@@ -1 +1 @@
-.nmorph-icon{width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);display:flex;align-items:center;--color: var(--nmorph-icon-color)}.nmorph-icon .nmorph-icon__content{display:flex;align-items:center;justify-content:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-icon path{stroke:var(--color)}.nmorph-icon.nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-icon.nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-icon.nmorph-icon--large{--width: 32px;--height: 32px}
+.nmorph-icon{width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height);display:flex;align-items:center;--color: var(--nmorph-icon-color, var(--nmorph-text-color))}.nmorph-icon .nmorph-icon__content{display:flex;align-items:center;justify-content:center;width:var(--width);min-width:var(--width);height:var(--height);min-height:var(--height)}.nmorph-icon svg{width:100%;height:100%;fill:var(--color);stroke-width:0}.nmorph-icon path{stroke:var(--color)}.nmorph-icon.nmorph-icon--small{--width: 14px;--height: 14px}.nmorph-icon.nmorph-icon--medium{--width: 20px;--height: 20px}.nmorph-icon.nmorph-icon--large{--width: 32px;--height: 32px}

package/dist/components/basic/nmorph-icon/NmorphIcon.vue2.js

@@ -1,31 +1,31 @@
 import './NmorphIcon.css';
-import { defineComponent as d, computed as o } from "vue";
-import { useModifiers as u } from "../../../utils/create-modifiers.js";
-const c = /* @__PURE__ */ d({
+import { defineComponent as h, computed as i } from "vue";
+import { useModifiers as l } from "../../../utils/create-modifiers.js";
+const p = /* @__PURE__ */ h({
   __name: "NmorphIcon",
   props: {
     size: { type: null, required: !1, default: "small" },
     width: { type: String, required: !1, default: void 0 },
     height: { type: String, required: !1, default: void 0 },
-    color: { type: String, required: !1, default: "var(--nmorph-text-color)" }
+    color: { type: String, required: !1, default: void 0 }
   },
   setup(r, { expose: s }) {
     s();
-    const e = r, n = o(
-      () => u({
+    const e = r, d = i(
+      () => l({
         "nmorph-icon": [
           `${!e.width && !e.height && e.size}`,
           `${e.width && "custom-width"}`,
           `${e.height && "custom-height"}`
         ]
       })
-    ), h = o(() => {
+    ), n = i(() => {
       const t = {};
-      return e.width && (t["--width"] = e.width), e.height && (t["--height"] = e.height), t["--nmorph-icon-color"] = e.color, t;
-    }), i = { props: e, modifiers: n, customStyles: h };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+      return e.width && (t["--width"] = e.width), e.height && (t["--height"] = e.height), e.color && (t["--nmorph-icon-color"] = e.color, t["--color"] = e.color), t;
+    }), o = { props: e, modifiers: d, customStyles: n };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
   }
 });
 export {
-  c as default
+  p as default
 };

package/dist/components/data/nmorph-pagination/NmorphPagination.css

@@ -1 +1 @@
-.nmorph-pagination{display:flex;justify-content:center;margin-top:var(--indentation-04)}.nmorph-pagination .nmorph-radio-group__content{display:flex;justify-content:center;gap:8px}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-bottom:0;margin-right:0}.nmorph-pagination .nmorph-pagination__page-group{margin:0 var(--indentation-01)}.nmorph-pagination .nmorph-pagination__prev-icon{rotate:90deg}.nmorph-pagination .nmorph-pagination__next-icon{rotate:-90deg}.nmorph-pagination .nmorph-pagination__prev-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-btn{margin-left:8px}.nmorph-pagination .nmorph-pagination__page-btn{width:40px;height:var(--height)}.nmorph-pagination .nmorph-pagination__page-btn-wrapper{display:flex}.nmorph-pagination .nmorph-pagination__prev-secondary-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-secondary-btn{margin-left:8px}
+.nmorph-pagination{display:flex;justify-content:center;margin-top:var(--indentation-04)}.nmorph-pagination .nmorph-radio-group__content{display:flex;justify-content:center;gap:8px}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-bottom:0;margin-right:0}.nmorph-pagination .nmorph-pagination__page-group{margin:0 var(--indentation-01)}.nmorph-pagination .nmorph-pagination__prev-icon{rotate:90deg}.nmorph-pagination .nmorph-pagination__next-icon{rotate:-90deg}.nmorph-pagination .nmorph-pagination__prev-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-btn{margin-left:8px}.nmorph-pagination .nmorph-pagination__page-btn{--height: var(--nmorph-pagination-height);--size: var(--nmorph-pagination-height);width:40px;min-width:40px;height:var(--height);min-height:var(--height)}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__content,.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__fake{width:100%;height:100%}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio.nmorph-radio--button .nmorph-radio__fake{padding:0}.nmorph-pagination .nmorph-pagination__page-btn-wrapper{display:flex}.nmorph-pagination .nmorph-pagination__prev-secondary-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-secondary-btn{margin-left:8px}

package/dist/components/data/nmorph-pagination/NmorphPagination.vue.js

@@ -1,14 +1,15 @@
 import './NmorphPagination.css';
 import h from "./NmorphPagination.vue2.js";
-import { openBlock as a, createElementBlock as r, normalizeClass as l, createVNode as e, withCtx as i, Fragment as d, renderList as p, createBlock as t, mergeProps as c, createCommentVNode as m } from "vue";
+import { openBlock as a, createElementBlock as r, normalizeStyle as d, normalizeClass as l, createVNode as e, withCtx as i, Fragment as p, renderList as m, createBlock as t, mergeProps as c, createCommentVNode as _ } from "vue";
 /* empty css                      */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-function s(g, b, v, o, f, k) {
+import s from "../../../_virtual/_plugin-vue_export-helper.js";
+function g(b, v, f, o, k, N) {
   return o.show ? (a(), r(
     "div",
     {
       key: 0,
-      class: l(o.modifiers)
+      class: l(o.modifiers),
+      style: d(o.paginationStyle)
     },
     [
       e(o.NmorphButton, {
@@ -38,9 +39,9 @@ function s(g, b, v, o, f, k) {
       }, {
         default: i(() => [
           (a(!0), r(
-            d,
+            p,
             null,
-            p(o.visiblePages, (n) => (a(), r("div", {
+            m(o.visiblePages, (n) => (a(), r("div", {
               key: n.value,
               class: "nmorph-pagination__page-btn-wrapper"
             }, [
@@ -50,7 +51,7 @@ function s(g, b, v, o, f, k) {
                 text: n.label,
                 height: o.props.height,
                 disabled: o.props.disabled,
-                onClick: (N) => o.bigStepUpdate(n.value)
+                onClick: (x) => o.bigStepUpdate(n.value)
               }, null, 8, ["class", "text", "height", "disabled", "onClick"])) : (a(), t(o.NmorphRadio, c({
                 key: 1,
                 ref_for: !0
@@ -86,11 +87,11 @@ function s(g, b, v, o, f, k) {
         /* STABLE */
       }, 8, ["height", "disabled"])
     ],
-    2
-    /* CLASS */
-  )) : m("v-if", !0);
+    6
+    /* CLASS, STYLE */
+  )) : _("v-if", !0);
 }
-const P = /* @__PURE__ */ _(h, [["render", s], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
+const u = /* @__PURE__ */ s(h, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
 export {
-  P as default
+  u as default
 };

package/dist/components/data/nmorph-pagination/NmorphPagination.vue2.js

@@ -1,12 +1,12 @@
 import './NmorphPagination.css';
-import { defineComponent as P, computed as o, ref as _, watch as q } from "vue";
-import { useModifiers as x } from "../../../utils/create-modifiers.js";
-import w from "../../form/nmorph-radio/NmorphRadio.vue.js";
-import B from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import O from "../../basic/nmorph-button/NmorphButton.vue.js";
-import Q from "../../form/nmorph-radio-group/NmorphRadioGroup.vue.js";
-import R from "../../../assets/icons/chevron-down.svg.js";
-const M = /* @__PURE__ */ P({
+import { defineComponent as q, computed as o, ref as x, watch as k } from "vue";
+import { useModifiers as w } from "../../../utils/create-modifiers.js";
+import B from "../../form/nmorph-radio/NmorphRadio.vue.js";
+import O from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import Q from "../../basic/nmorph-button/NmorphButton.vue.js";
+import R from "../../form/nmorph-radio-group/NmorphRadioGroup.vue.js";
+import V from "../../../assets/icons/chevron-down.svg.js";
+const j = /* @__PURE__ */ q({
   __name: "NmorphPagination",
   props: {
     totalElementsQuantity: { type: Number, required: !0 },
@@ -19,55 +19,61 @@ const M = /* @__PURE__ */ P({
     height: { type: null, required: !1, default: "basic" }
   },
   emits: ["update:model-value"],
-  setup(p, { expose: d, emit: c }) {
+  setup(c, { expose: d, emit: f }) {
     d();
-    const a = p, s = c, f = o(
-      () => x({
-        "nmorph-pagination": [`${a.disabled && "disabled"}`]
+    const r = c, i = f, v = o(
+      () => w({
+        "nmorph-pagination": [`${r.disabled && "disabled"}`]
       })
-    ), v = () => {
-      r.value = String(Number(r.value) - 1);
-    }, g = () => {
-      r.value = String(Number(r.value) + 1);
-    }, r = _(String(a.modelValue)), t = o(() => {
-      const e = a.totalElementsQuantity / a.elementsQuantityOnPage + 1, u = e % 1 === 0 ? -1 : 0;
-      return Array.from({ length: e + u }, (n, m) => ({ value: String(m + 1), label: String(m + 1) }));
-    }), b = o(() => a.hideOnSinglePage || a.totalElementsQuantity / a.elementsQuantityOnPage > 1);
-    q(r, (e) => {
-      s("update:model-value", Number(e));
+    ), s = {
+      thick: "var(--thick-component)",
+      basic: "var(--default-thickness-component)",
+      thin: "var(--thin-component)"
+    }, g = o(() => ({
+      "--nmorph-pagination-height": s[r.height]
+    })), h = () => {
+      a.value = String(Number(a.value) - 1);
+    }, b = () => {
+      a.value = String(Number(a.value) + 1);
+    }, a = x(String(r.modelValue)), t = o(() => {
+      const e = r.totalElementsQuantity / r.elementsQuantityOnPage + 1, n = e % 1 === 0 ? -1 : 0;
+      return Array.from({ length: e + n }, (u, p) => ({ value: String(p + 1), label: String(p + 1) }));
+    }), N = o(() => r.hideOnSinglePage || r.totalElementsQuantity / r.elementsQuantityOnPage > 1);
+    k(a, (e) => {
+      i("update:model-value", Number(e));
     });
-    const h = (e) => {
-      r.value = e;
-    }, N = o(() => Number(r.value) === 1), y = o(() => t.value.length === Number(r.value)), S = o(() => {
-      const e = t.value.length, u = Number(r.value), l = a.maxVisiblePages;
+    const y = (e) => {
+      a.value = e;
+    }, S = o(() => Number(a.value) === 1), P = o(() => t.value.length === Number(a.value)), _ = o(() => {
+      const e = t.value.length, n = Number(a.value), l = r.maxVisiblePages;
       if (e <= l)
         return t.value;
-      const n = Math.floor(l / 2);
-      return u <= n ? [...t.value.slice(0, l - 2), { value: "next", label: "..." }, t.value[e - 1]] : u >= e - n ? [t.value[0], { value: "prev", label: "..." }, ...t.value.slice(e - (l - 2))] : [
+      const u = Math.floor(l / 2);
+      return n <= u ? [...t.value.slice(0, l - 2), { value: "next", label: "..." }, t.value[e - 1]] : n >= e - u ? [t.value[0], { value: "prev", label: "..." }, ...t.value.slice(e - (l - 2))] : [
         t.value[0],
         { value: "prev", label: "..." },
-        ...t.value.slice(u - n, u + n - 1),
+        ...t.value.slice(n - u, n + u - 1),
         { value: "next", label: "..." },
         t.value[e - 1]
       ];
-    }), i = { props: a, emit: s, modifiers: f, prevClick: v, nextClick: g, selectedPage: r, pages: t, show: b, updateSelectedValue: h, blockPrevButton: N, blockNextButton: y, visiblePages: S, bigStepUpdate: (e) => {
-      const u = Number(r.value);
-      let l = e === "prev" ? u - a.fastForwardStep : u + a.fastForwardStep;
-      l <= 0 && (l = 1), l >= t.value.length && (l = t.value.length), r.value = String(l);
+    }), m = { props: r, emit: i, modifiers: v, heightMap: s, paginationStyle: g, prevClick: h, nextClick: b, selectedPage: a, pages: t, show: N, updateSelectedValue: y, blockPrevButton: S, blockNextButton: P, visiblePages: _, bigStepUpdate: (e) => {
+      const n = Number(a.value);
+      let l = e === "prev" ? n - r.fastForwardStep : n + r.fastForwardStep;
+      l <= 0 && (l = 1), l >= t.value.length && (l = t.value.length), a.value = String(l);
     }, get NmorphRadioGroup() {
-      return Q;
+      return R;
     }, get NmorphButton() {
-      return O;
+      return Q;
     }, get NmorphIcon() {
-      return B;
+      return O;
     }, get NmorphRadio() {
-      return w;
+      return B;
     }, get NmorphIconChevronDown() {
-      return R;
+      return V;
     } };
-    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
   }
 });
 export {
-  M as default
+  j as default
 };

package/dist/components/data/nmorph-table/NmorphTable.css

@@ -1 +1 @@
-.nmorph-table{--border-color: var(--nmorph-info-text-color);--table-cell-height: auto;--table-background-row-hover: var(--nmorph-info-color)}.nmorph-table .nmorph-table__header th{border-bottom:0}.nmorph-table .nmorph-table__button-wrapper{display:flex;align-items:center;margin-left:var(--indentation-03)}.nmorph-table table{width:calc(100% - 2px);margin-left:1px;border-collapse:collapse;border-spacing:0}.nmorph-table .nmorph-table__table-data{padding:var(--indentation-03) 0;border-bottom:1px solid var(--border-color)}.nmorph-table .nmorph-table__table-data--bordered{border:1px solid var(--border-color)}.nmorph-table .nmorph-table__cell{padding:0 var(--indentation-03)}.nmorph-table .nmorph-table__cell-content{display:flex;align-items:center}.nmorph-table .nmorph-table__cell--data{height:var(--table-cell-height)}.nmorph-table .nmorph-table__body{position:relative}.nmorph-table .nmorph-table__table-data-row--row-hover:hover{background:var(--table-background-row-hover)}.nmorph-table--nmorph{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);overflow:hidden;border-radius:var(--default-border-radius);--border-color: transparent}.nmorph-table--nmorph .nmorph-table__button-wrapper{padding:var(--indentation-02)}.nmorph-table--nmorph .nmorph-table__table-row{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}
+.nmorph-table{--border-color: var(--nmorph-info-text-color);--table-cell-height: auto;--table-background-row-hover: var(--nmorph-info-color)}.nmorph-table .nmorph-table__header th{border-bottom:0}.nmorph-table .nmorph-table__button-wrapper{display:flex;align-items:center;margin-left:var(--indentation-03)}.nmorph-table table{width:calc(100% - 2px);margin-left:1px;border-collapse:collapse;border-spacing:0}.nmorph-table .nmorph-table__table-data{padding:var(--indentation-03) 0;border-bottom:1px solid var(--border-color)}.nmorph-table .nmorph-table__table-data--bordered{border:1px solid var(--border-color)}.nmorph-table .nmorph-table__cell{padding:0 var(--indentation-03)}.nmorph-table .nmorph-table__cell-content{display:flex;align-items:center}.nmorph-table .nmorph-table__cell--data{height:var(--table-cell-height)}.nmorph-table .nmorph-table__body{position:relative}.nmorph-table .nmorph-table__body--virtual{overflow-x:hidden}.nmorph-table .nmorph-table__body--virtual .nmorph-table__table-data{height:var(--table-virtual-row-height);padding-top:0;padding-bottom:0}.nmorph-table .nmorph-table__virtual-spacer{position:relative;min-width:100%}.nmorph-table .nmorph-table__virtual-content{position:absolute;top:0;right:0;left:0}.nmorph-table .nmorph-table__table-data-row--row-hover:hover{background:var(--table-background-row-hover)}.nmorph-table--nmorph{background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color);overflow:hidden;border-radius:var(--default-border-radius);--border-color: transparent}.nmorph-table--nmorph .nmorph-table__button-wrapper{padding:var(--indentation-02)}.nmorph-table--nmorph .nmorph-table__table-row{background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}