@nmorph/nmorph-ui-kit 2.2.25 → 2.2.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data/nmorph-badge/NmorphBadge.css +1 -1
- package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js +29 -27
- package/dist/components/data/nmorph-card/NmorphCard.vue.js +26 -18
- package/dist/components/data/nmorph-card/NmorphCard.vue2.js +8 -7
- package/dist/components/feedback/nmorph-dialog/NmorphDialog.css +1 -1
- package/dist/index.umd.js +10 -10
- package/dist/package.json.js +1 -1
- package/dist/src/components/data/nmorph-badge/NmorphBadge.vue.d.ts +2 -2
- package/dist/src/components/data/nmorph-card/NmorphCard.vue.d.ts +2 -0
- package/dist/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue.d.ts +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-badge-dot-size: 4px;--nmorph-badge-ribbon-height: 24px;--nmorph-badge-ribbon-corner-size: 62px;--nmorph-badge-ribbon-width: 116px;--nmorph-badge-ribbon-offset-x: 0px;--nmorph-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-badge-ribbon-corner-size);height:var(--nmorph-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;padding:0 var(--indentation-03);overflow:hidden;font-weight:600;font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis
|
|
1
|
+
.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-badge-dot-size: 4px;--nmorph-badge-ribbon-height: 24px;--nmorph-badge-ribbon-corner-size: 62px;--nmorph-badge-ribbon-width: 116px;--nmorph-badge-ribbon-offset-x: 0px;--nmorph-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-badge-ribbon-corner-size);height:var(--nmorph-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;height:100%;padding:0 var(--indentation-03);overflow:hidden;font-weight:600;font-size:var(--font-size-extra-small);line-height:1;white-space:nowrap;text-overflow:ellipsis}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-badge-ribbon-offset-y);right:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-badge-ribbon-offset-x);bottom:var(--nmorph-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-badge-dot-size);height:var(--nmorph-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-badge-dot-size: 3px;--nmorph-badge-ribbon-height: 18px;--nmorph-badge-ribbon-corner-size: 50px;--nmorph-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-badge-dot-size: 4px;--nmorph-badge-ribbon-height: 20px;--nmorph-badge-ribbon-corner-size: 56px;--nmorph-badge-ribbon-width: 104px}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import './NmorphBadge.css';
|
|
2
|
-
import { defineComponent as
|
|
2
|
+
import { defineComponent as N, computed as t, ref as b, onMounted as I, watch as T, nextTick as V } from "vue";
|
|
3
3
|
import { useModifiers as p } from "../../../utils/create-modifiers.js";
|
|
4
|
-
const
|
|
4
|
+
const F = /* @__PURE__ */ N({
|
|
5
5
|
__name: "NmorphBadge",
|
|
6
6
|
props: {
|
|
7
7
|
value: { type: [Number, String], required: !1, default: void 0 },
|
|
@@ -11,66 +11,68 @@ const X = /* @__PURE__ */ C({
|
|
|
11
11
|
isDot: { type: Boolean, required: !1, default: !1 },
|
|
12
12
|
isTag: { type: Boolean, required: !1, default: !1 },
|
|
13
13
|
hidden: { type: Boolean, required: !1, default: !1 },
|
|
14
|
+
hideOnFalsyValue: { type: Boolean, required: !1, default: !1 },
|
|
14
15
|
color: { type: String, required: !1, default: "var(--nmorph-accent-color)" },
|
|
15
16
|
size: { type: String, required: !1, default: "base" },
|
|
16
17
|
offsetY: { type: Number, required: !1, default: 0 },
|
|
17
18
|
offsetX: { type: Number, required: !1, default: 0 },
|
|
18
19
|
zIndex: { type: Number, required: !1, default: 1 },
|
|
19
|
-
disabled: { type: Boolean, required: !1, default: !1 }
|
|
20
|
-
dotSize: { type: [Number, String], required: !1, default: void 0 }
|
|
20
|
+
disabled: { type: Boolean, required: !1, default: !1 }
|
|
21
21
|
},
|
|
22
22
|
setup(m, { expose: g }) {
|
|
23
23
|
g();
|
|
24
|
-
const e = m,
|
|
24
|
+
const e = m, o = t(() => e.type !== "default" ? e.type : e.isDot ? "dot" : e.isTag ? "tag" : "default"), c = t(() => o.value === "dot"), n = t(() => o.value === "tag"), a = t(() => o.value === "ribbon"), h = t(
|
|
25
25
|
() => p({
|
|
26
26
|
"nmorph-badge": [
|
|
27
27
|
`${e.hidden && "hidden"}`,
|
|
28
28
|
`${n.value && "tag"}`,
|
|
29
|
-
`${
|
|
30
|
-
`${
|
|
29
|
+
`${a.value && "ribbon"}`,
|
|
30
|
+
`${a.value && `ribbon-${e.ribbonCorner}`}`,
|
|
31
31
|
e.size
|
|
32
32
|
]
|
|
33
33
|
})
|
|
34
|
-
),
|
|
34
|
+
), x = t(
|
|
35
35
|
() => p({
|
|
36
36
|
"nmorph-badge__container": [
|
|
37
37
|
`${e.hidden && "hidden"}`,
|
|
38
38
|
`${n.value && "tag"}`,
|
|
39
|
-
`${
|
|
40
|
-
`${
|
|
39
|
+
`${a.value && "ribbon"}`,
|
|
40
|
+
`${a.value && `ribbon-${e.ribbonCorner}`}`
|
|
41
41
|
]
|
|
42
42
|
})
|
|
43
|
-
),
|
|
43
|
+
), $ = t(
|
|
44
44
|
() => p({
|
|
45
45
|
"nmorph-badge__ribbon-corner": [`${e.ribbonCorner}`]
|
|
46
46
|
})
|
|
47
|
-
),
|
|
48
|
-
const
|
|
47
|
+
), q = t(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), v = t(() => e.hideOnFalsyValue && !e.value), _ = t(() => (c.value || e.value !== void 0) && !v.value), u = t(() => {
|
|
48
|
+
const r = `${(s?.value / 2 + e.offsetX) * -1}px`, C = `${(d?.value / 2 + e.offsetY) * -1}px`;
|
|
49
49
|
return {
|
|
50
|
-
x:
|
|
51
|
-
y:
|
|
50
|
+
x: r,
|
|
51
|
+
y: C
|
|
52
52
|
};
|
|
53
|
-
}),
|
|
53
|
+
}), z = t(() => n.value || a.value ? {
|
|
54
54
|
zIndex: e.zIndex
|
|
55
55
|
} : {
|
|
56
|
-
right:
|
|
57
|
-
top:
|
|
56
|
+
right: u.value.x,
|
|
57
|
+
top: u.value.y,
|
|
58
58
|
zIndex: e.zIndex
|
|
59
|
-
}), i = (
|
|
59
|
+
}), i = (r) => typeof r == "number" ? `${r}px` : r, l = b(null), s = b(0), d = b(0), S = t(() => ({
|
|
60
60
|
"--nmorph-badge-color": e.color,
|
|
61
61
|
...e.offsetX !== 0 && { "--nmorph-badge-ribbon-offset-x": i(e.offsetX) },
|
|
62
|
-
...e.offsetY !== 0 && { "--nmorph-badge-ribbon-offset-y": i(e.offsetY) }
|
|
63
|
-
...e.dotSize !== void 0 && { "--nmorph-badge-dot-size": i(e.dotSize) }
|
|
62
|
+
...e.offsetY !== 0 && { "--nmorph-badge-ribbon-offset-y": i(e.offsetY) }
|
|
64
63
|
})), f = async () => {
|
|
65
|
-
await
|
|
66
|
-
},
|
|
64
|
+
await V(), !(!l.value || n.value || a.value) && (s.value = l.value.clientWidth, d.value = l.value.clientHeight);
|
|
65
|
+
}, B = t(() => ({
|
|
67
66
|
zIndex: e.zIndex
|
|
68
67
|
}));
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
I(f), T(
|
|
69
|
+
() => [e.value, e.max, o.value, e.ribbonCorner, e.size, e.hideOnFalsyValue],
|
|
70
|
+
f
|
|
71
|
+
);
|
|
72
|
+
const y = { props: e, resolvedType: o, isDotType: c, isTagType: n, isRibbon: a, modifiers: h, containerModifiers: x, ribbonCornerModifiers: $, displayValue: q, shouldHideOnFalsyValue: v, shouldShowBadge: _, appliedOffset: u, containerStyle: z, getCssSize: i, badge: l, badgeWidth: s, badgeHeight: d, styles: S, updateBadgeSize: f, ribbonFrameStyle: B };
|
|
73
|
+
return Object.defineProperty(y, "__isScriptSetup", { enumerable: !1, value: !0 }), y;
|
|
72
74
|
}
|
|
73
75
|
});
|
|
74
76
|
export {
|
|
75
|
-
|
|
77
|
+
F as default
|
|
76
78
|
};
|
|
@@ -1,36 +1,44 @@
|
|
|
1
1
|
import './NmorphCard.css';
|
|
2
|
-
import
|
|
3
|
-
import { openBlock as r, createBlock as
|
|
2
|
+
import n from "./NmorphCard.vue2.js";
|
|
3
|
+
import { openBlock as r, createBlock as c, resolveDynamicComponent as d, normalizeStyle as m, normalizeClass as s, withCtx as i, createElementBlock as a, renderSlot as t, createCommentVNode as l, createElementVNode as p } from "vue";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import
|
|
6
|
-
const
|
|
5
|
+
import _ from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
|
+
const f = {
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "nmorph-card__header"
|
|
9
|
-
}, h = {
|
|
9
|
+
}, h = {
|
|
10
10
|
key: 1,
|
|
11
11
|
class: "nmorph-card__footer"
|
|
12
12
|
};
|
|
13
|
-
function
|
|
14
|
-
return r(),
|
|
15
|
-
class:
|
|
16
|
-
style:
|
|
13
|
+
function y(e, v, C, o, k, u) {
|
|
14
|
+
return r(), c(d(o.props.tag), {
|
|
15
|
+
class: s(o.modifiers),
|
|
16
|
+
style: m(o.styles)
|
|
17
17
|
}, {
|
|
18
18
|
default: i(() => [
|
|
19
|
-
o.slots.header ? (r(),
|
|
19
|
+
o.slots.header ? (r(), a("div", f, [
|
|
20
20
|
t(e.$slots, "header")
|
|
21
|
-
])) :
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
])) : l("v-if", !0),
|
|
22
|
+
p(
|
|
23
|
+
"div",
|
|
24
|
+
{
|
|
25
|
+
class: s(["nmorph-card__content", o.props.contentClass])
|
|
26
|
+
},
|
|
27
|
+
[
|
|
28
|
+
t(e.$slots, "default")
|
|
29
|
+
],
|
|
30
|
+
2
|
|
31
|
+
/* CLASS */
|
|
32
|
+
),
|
|
33
|
+
o.slots.footer ? (r(), a("div", h, [
|
|
26
34
|
t(e.$slots, "footer")
|
|
27
|
-
])) :
|
|
35
|
+
])) : l("v-if", !0)
|
|
28
36
|
]),
|
|
29
37
|
_: 3
|
|
30
38
|
/* FORWARDED */
|
|
31
39
|
}, 8, ["class", "style"]);
|
|
32
40
|
}
|
|
33
|
-
const
|
|
41
|
+
const E = /* @__PURE__ */ _(n, [["render", y], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-card/NmorphCard.vue"]]);
|
|
34
42
|
export {
|
|
35
|
-
|
|
43
|
+
E as default
|
|
36
44
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './NmorphCard.css';
|
|
2
|
-
import { defineComponent as f, useSlots as
|
|
3
|
-
import { NmorphShadowType as
|
|
2
|
+
import { defineComponent as f, useSlots as l, computed as o } from "vue";
|
|
3
|
+
import { NmorphShadowType as u } from "../../../types/index.js";
|
|
4
4
|
import { useModifiers as m } from "../../../utils/create-modifiers.js";
|
|
5
5
|
const b = /* @__PURE__ */ f({
|
|
6
6
|
__name: "NmorphCard",
|
|
@@ -8,23 +8,24 @@ const b = /* @__PURE__ */ f({
|
|
|
8
8
|
shadowType: { type: null, required: !1, default: "outset" },
|
|
9
9
|
combinedShadowBorderWidth: { type: Number, required: !1, default: 0 },
|
|
10
10
|
cardPadding: { type: [Number, String], required: !1, default: void 0 },
|
|
11
|
+
contentClass: { type: String, required: !1, default: "" },
|
|
11
12
|
fill: { type: Boolean, required: !1, default: !0 },
|
|
12
13
|
tag: { type: String, required: !1, default: "div" }
|
|
13
14
|
},
|
|
14
15
|
setup(i, { expose: s }) {
|
|
15
16
|
s();
|
|
16
|
-
const e = i, a =
|
|
17
|
+
const e = i, a = l(), n = o(
|
|
17
18
|
() => m({
|
|
18
|
-
nmorph: [
|
|
19
|
+
nmorph: [u[e.shadowType]],
|
|
19
20
|
"nmorph-card": [e.shadowType, e.fill ? "fill" : "fit-content"]
|
|
20
21
|
})
|
|
21
|
-
), d = (r) => typeof r == "number" ? `${r}px` : r, p =
|
|
22
|
+
), d = (r) => typeof r == "number" ? `${r}px` : r, p = o(() => ({
|
|
22
23
|
...e.shadowType === "combined" && {
|
|
23
24
|
"--nmorph-card-combined-border-width": `${e.combinedShadowBorderWidth}px`
|
|
24
25
|
},
|
|
25
26
|
...e.cardPadding !== void 0 && { "--card-padding": d(e.cardPadding) }
|
|
26
|
-
})),
|
|
27
|
-
return Object.defineProperty(
|
|
27
|
+
})), t = { props: e, slots: a, modifiers: n, getCssSize: d, styles: p };
|
|
28
|
+
return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
|
|
28
29
|
}
|
|
29
30
|
});
|
|
30
31
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-dialog{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;box-sizing:border-box;width:var(--width);max-width:var(--nmorph-dialog-max-width, calc(100vw - 32px) );max-height:var(--nmorph-dialog-max-height, var(--nmorph-dialog-default-max-height));padding:var(--indentation-
|
|
1
|
+
.nmorph-dialog{position:absolute;top:50%;left:50%;display:flex;flex-direction:column;box-sizing:border-box;width:var(--width);max-width:var(--nmorph-dialog-max-width, calc(100vw - 32px) );max-height:var(--nmorph-dialog-max-height, var(--nmorph-dialog-default-max-height));padding:var(--indentation-02);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);transform:translate(-50%,-50%);--width: var(--nmorph-dialog-width);--nmorph-dialog-default-max-height: calc(100vh - 32px) }@supports (height: 100dvh){.nmorph-dialog{--nmorph-dialog-default-max-height: calc(100dvh - 32px) }}.nmorph-dialog .nmorph-dialog__header{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--indentation-02);font-weight:600;font-size:var(--font-size-large);line-height:var(--line-height-loose)}.nmorph-dialog .nmorph-dialog__close-icon{flex:0 0 auto;cursor:pointer}.nmorph-dialog .nmorph-dialog__content{flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--indentation-02);overflow-y:auto}
|