@nmorph/nmorph-ui-kit 2.2.39 → 2.2.40

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.
Files changed (22) hide show
  1. package/dist/components/basic/nmorph-button/NmorphButton.css +1 -1
  2. package/dist/components/basic/nmorph-button/NmorphButton.vue.js +13 -10
  3. package/dist/components/data/nmorph-image-preview/NmorphImagePreview.css +1 -1
  4. package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js +122 -75
  5. package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue2.js +100 -75
  6. package/dist/components/data/nmorph-tag-list/NmorphTagList.vue.js +7 -7
  7. package/dist/components/data/nmorph-tag-list/NmorphTagList.vue2.js +22 -16
  8. package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.css +1 -1
  9. package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue2.js +8 -8
  10. package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.js +27 -22
  11. package/dist/components/navigation/nmorph-context-menu/NmorphContextMenu.vue2.js +75 -46
  12. package/dist/hooks/use-placement.js +65 -61
  13. package/dist/index.umd.js +26 -26
  14. package/dist/package.json.js +1 -1
  15. package/dist/src/components/data/nmorph-image-preview/NmorphImagePreview.vue.d.ts +6 -0
  16. package/dist/src/components/data/nmorph-image-preview/types.d.ts +4 -0
  17. package/dist/src/components/data/nmorph-tag-list/NmorphTagList.vue.d.ts +4 -1
  18. package/dist/src/components/data/nmorph-tag-list/types.d.ts +1 -0
  19. package/dist/src/components/navigation/nmorph-context-menu/NmorphContextMenu.vue.d.ts +5 -3
  20. package/dist/src/components/navigation/nmorph-context-menu/types.d.ts +8 -2
  21. package/dist/style.css +1 -1
  22. package/package.json +1 -1
package/dist/components/basic/nmorph-button/NmorphButton.css CHANGED
@@ -1 +1 @@
1
- .nmorph-button{display:inline-block;width:auto}.nmorph-button.nmorph--fill{width:100%}.nmorph-button .nmorph-button__content{display:flex;gap:var(--indentation-02);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:var(--height);padding:var(--indentation-00) var(--indentation-04);color:var(--nmorph-button-color, var(--nmorph-text-color));line-height:0;background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);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);cursor:pointer}.nmorph-button .nmorph-button__content span{color:var(--nmorph-button-color, var(--nmorph-text-color));--color: var(--nmorph-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content>.nmorph-icon{flex-shrink:0;--color: var(--nmorph-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content:disabled{pointer-events:none}.nmorph-button .nmorph-button__content[loading=true]{cursor:default}.nmorph-button.nmorph-button--ripple .nmorph-button__content{position:relative;overflow:hidden}.nmorph-button.nmorph-button--ripple .nmorph-button__content:after{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,var(--nmorph-main-color) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .3s,opacity 1s;content:""}.nmorph-button.nmorph-button--ripple .nmorph-button__content:active:after{transform:scale(0);opacity:.3;transition:0s}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-white-color)}.nmorph-button.nmorph-button--round .nmorph-button__content{border-radius:var(--border-radius-200)}.nmorph-button.nmorph-button--circle{width:var(--height)}.nmorph-button.nmorph-button--circle .nmorph-button__content{border-radius:var(--border-radius-circular)}.nmorph-button.nmorph-button--transparent{padding:var(--indentation-00)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-accent-color);background:transparent;box-shadow:none}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-accent-color)}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-button-hover-color);--color: var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-accent-color)}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content{color:var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)));background:transparent;box-shadow:none}.nmorph-button.nmorph-button--transparent .nmorph-button__content span{color:var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)));--color: var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))}.nmorph-button.nmorph-button--transparent .nmorph-button__content .nmorph-icon{--color: var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))}.nmorph-button.nmorph-button--square,.nmorph-button.nmorph-button--icon-only{width:var(--height);height:var(--height)}.nmorph-button.nmorph-button--icon-only .nmorph-button__content{padding:0}.nmorph-button.nmorph-button.nmorph--thin-component{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-button.nmorph-button--disabled{cursor:not-allowed;opacity:.6}
1
+ .nmorph-button{display:inline-block;width:auto;height:auto;min-height:var(--height)}.nmorph-button.nmorph--basic-component,.nmorph-button.nmorph--thin-component,.nmorph-button.nmorph--thick-component{height:auto}.nmorph-button.nmorph--fill{width:100%}.nmorph-button .nmorph-button__content{display:flex;gap:var(--indentation-02);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:auto;min-height:var(--height);padding:var(--indentation-00) var(--indentation-04);color:var(--nmorph-button-color, var(--nmorph-text-color));line-height:var(--line-height-regular);background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);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);cursor:pointer}.nmorph-button .nmorph-button__content span{color:var(--nmorph-button-color, var(--nmorph-text-color));--color: var(--nmorph-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__label{min-width:0;white-space:normal;text-align:center;overflow-wrap:anywhere}.nmorph-button .nmorph-button__content>.nmorph-icon{flex-shrink:0;--color: var(--nmorph-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content:disabled{pointer-events:none}.nmorph-button .nmorph-button__content[loading=true]{cursor:default}.nmorph-button.nmorph-button--ripple .nmorph-button__content{position:relative;overflow:hidden}.nmorph-button.nmorph-button--ripple .nmorph-button__content:after{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,var(--nmorph-main-color) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .3s,opacity 1s;content:""}.nmorph-button.nmorph-button--ripple .nmorph-button__content:active:after{transform:scale(0);opacity:.3;transition:0s}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-white-color)}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-white-color)}.nmorph-button.nmorph-button--round .nmorph-button__content{border-radius:var(--border-radius-200)}.nmorph-button.nmorph-button--circle{width:var(--height);height:var(--height);min-height:var(--height)}.nmorph-button.nmorph-button--circle .nmorph-button__content{height:var(--height);min-height:var(--height);border-radius:var(--border-radius-circular)}.nmorph-button.nmorph-button--transparent{padding:var(--indentation-00)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-accent-color);background:transparent;box-shadow:none}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-accent-color)}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-button-hover-color);--color: var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-accent-color)}.nmorph-button.nmorph-button--transparent.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--color: var(--nmorph-button-hover-color)}.nmorph-button.nmorph-button--transparent .nmorph-button__content{color:var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)));background:transparent;box-shadow:none}.nmorph-button.nmorph-button--transparent .nmorph-button__content span{color:var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)));--color: var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))}.nmorph-button.nmorph-button--transparent .nmorph-button__content .nmorph-icon{--color: var(--nmorph-button-color, var(--transparent-button-color, var(--nmorph-text-color)))}.nmorph-button.nmorph-button--square{width:var(--height);height:var(--height);min-height:var(--height)}.nmorph-button.nmorph-button--square .nmorph-button__content{height:var(--height);min-height:var(--height)}.nmorph-button.nmorph-button--icon-only{width:var(--height);height:var(--height);min-height:var(--height)}.nmorph-button.nmorph-button--icon-only .nmorph-button__content{height:var(--height);min-height:var(--height);padding:0;line-height:0}.nmorph-button.nmorph-button.nmorph--thin-component{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-button.nmorph-button--disabled{cursor:not-allowed;opacity:.6}
package/dist/components/basic/nmorph-button/NmorphButton.vue.js CHANGED
@@ -1,15 +1,18 @@
1
1
  import './NmorphButton.css';
2
- import d from "./NmorphButton.vue2.js";
3
- import { openBlock as e, createElementBlock as r, normalizeStyle as s, normalizeClass as c, createElementVNode as m, createBlock as l, withCtx as a, createVNode as p, renderSlot as n, Fragment as f, createCommentVNode as i, toDisplayString as h } from "vue";
2
+ import s from "./NmorphButton.vue2.js";
3
+ import { openBlock as e, createElementBlock as r, normalizeStyle as d, normalizeClass as c, createElementVNode as m, createBlock as l, withCtx as a, createVNode as p, renderSlot as n, Fragment as f, createCommentVNode as i, toDisplayString as _ } from "vue";
4
4
  /* empty css */
5
- import y from "../../../_virtual/_plugin-vue_export-helper.js";
6
- const _ = ["disabled", "loading", "type", "tabindex"], b = { key: 1 };
5
+ import b from "../../../_virtual/_plugin-vue_export-helper.js";
6
+ const h = ["disabled", "loading", "type", "tabindex"], y = {
7
+ key: 1,
8
+ class: "nmorph-button__label"
9
+ };
7
10
  function k(t, N, g, o, S, B) {
8
11
  return e(), r(
9
12
  "div",
10
13
  {
11
14
  class: c(o.modifiers),
12
- style: s(o.buttonColorStyles)
15
+ style: d(o.buttonColorStyles)
13
16
  },
14
17
  [
15
18
  m("button", {
@@ -49,8 +52,8 @@ function k(t, N, g, o, S, B) {
49
52
  n(t.$slots, "default"),
50
53
  o.props.text !== void 0 ? (e(), r(
51
54
  "span",
52
- b,
53
- h(o.props.text),
55
+ y,
56
+ _(o.props.text),
54
57
  1
55
58
  /* TEXT */
56
59
  )) : i("v-if", !0),
@@ -59,13 +62,13 @@ function k(t, N, g, o, S, B) {
59
62
  64
60
63
  /* STABLE_FRAGMENT */
61
64
  ))
62
- ], 8, _)
65
+ ], 8, h)
63
66
  ],
64
67
  6
65
68
  /* CLASS, STYLE */
66
69
  );
67
70
  }
68
- const u = /* @__PURE__ */ y(d, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-button/NmorphButton.vue"]]);
71
+ const z = /* @__PURE__ */ b(s, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-button/NmorphButton.vue"]]);
69
72
  export {
70
- u as default
73
+ z as default
71
74
  };
package/dist/components/data/nmorph-image-preview/NmorphImagePreview.css CHANGED
@@ -1 +1 @@
1
- .nmorph-image-preview{--width: 50px;--height: 50px;width:var(--width);height:var(--height);overflow:hidden}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{--nmorph-image-preview-content-width: min( calc(100vw - 96px) , 960px);--nmorph-image-preview-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-image-preview-content-width);height:var(--nmorph-image-preview-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}.nmorph-image-preview__portal .nmorph-button__content{box-shadow:none}.nmorph-image-preview__portal .nmorph-image-preview__left,.nmorph-image-preview__portal .nmorph-image-preview__right{z-index:2}.nmorph-image-preview__portal .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview__portal.nmorph-image-preview--opened{--nmorph-image-preview-btn-margin: 20px}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__left{left:var(--nmorph-image-preview-btn-margin)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__right{right:var(--nmorph-image-preview-btn-margin)}
1
+ .nmorph-image-preview{--width: 50px;--height: 50px;width:var(--width);height:var(--height);overflow:hidden}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger{width:auto;height:auto;overflow:visible}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger{display:flex;flex-wrap:wrap;gap:var(--nmorph-image-preview-trigger-gap, 8px);width:auto;height:auto}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger:hover{filter:none}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item{position:relative;display:block;width:var(--width);height:var(--height);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item:hover{filter:brightness(.8)}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-more{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:var(--nmorph-white-color);font-weight:600;line-height:var(--line-height-regular);background:color-mix(in srgb,var(--nmorph-black-color) 60%,transparent);pointer-events:none}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{--nmorph-image-preview-content-width: min( calc(100vw - 96px) , 960px);--nmorph-image-preview-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-image-preview-content-width);height:var(--nmorph-image-preview-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}.nmorph-image-preview__portal .nmorph-button__content{box-shadow:none}.nmorph-image-preview__portal .nmorph-image-preview__left,.nmorph-image-preview__portal .nmorph-image-preview__right{z-index:2}.nmorph-image-preview__portal .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview__portal.nmorph-image-preview--opened{--nmorph-image-preview-btn-margin: 20px}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__left{left:var(--nmorph-image-preview-btn-margin)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__right{right:var(--nmorph-image-preview-btn-margin)}
package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js CHANGED
@@ -1,117 +1,164 @@
1
1
  import './NmorphImagePreview.css';
2
- import p from "./NmorphImagePreview.vue2.js";
3
- import { openBlock as n, createElementBlock as i, Fragment as h, normalizeStyle as m, normalizeClass as v, createElementVNode as a, createVNode as e, createSlots as _, withCtx as r, renderSlot as d, createCommentVNode as t, createBlock as c, Teleport as k, renderList as y, resolveDynamicComponent as f } from "vue";
2
+ import y from "./NmorphImagePreview.vue2.js";
3
+ import { openBlock as o, createElementBlock as a, Fragment as c, normalizeStyle as g, normalizeClass as _, createElementVNode as m, renderList as f, withModifiers as p, createVNode as i, createSlots as h, withCtx as r, renderSlot as t, toDisplayString as w, createCommentVNode as d, createBlock as s, Teleport as N, resolveDynamicComponent as k } from "vue";
4
4
  /* empty css */
5
- import w from "../../../_virtual/_plugin-vue_export-helper.js";
6
- const N = { class: "nmorph-image-preview__content" }, C = {
5
+ import C from "../../../_virtual/_plugin-vue_export-helper.js";
6
+ const b = ["aria-label", "onClick"], I = {
7
+ key: 0,
8
+ class: "nmorph-image-preview__trigger-more"
9
+ }, S = { class: "nmorph-image-preview__content" }, B = {
7
10
  key: 0,
8
11
  class: "nmorph-image-preview__left"
9
- }, I = {
12
+ }, T = {
10
13
  key: 1,
11
14
  class: "nmorph-image-preview__right"
12
- }, S = {
15
+ }, D = {
13
16
  key: 2,
14
17
  class: "nmorph-image-preview__actions"
15
- }, b = { class: "nmorph-image-preview__action-element" };
16
- function B(l, z, D, o, H, L) {
17
- return n(), i(
18
- h,
18
+ }, L = { class: "nmorph-image-preview__action-element" };
19
+ function z(n, H, A, e, O, V) {
20
+ return o(), a(
21
+ c,
19
22
  null,
20
23
  [
21
- o.props.showTrigger ? (n(), i(
24
+ e.props.showTrigger ? (o(), a(
22
25
  "div",
23
26
  {
24
27
  key: 0,
25
- class: v(o.modifiers),
26
- style: m(o.triggerStyle)
28
+ class: _(e.modifiers),
29
+ style: g(e.triggerStyle)
27
30
  },
28
31
  [
29
- a("div", {
32
+ m("div", {
30
33
  class: "nmorph-image-preview__trigger",
31
- onClick: o.clickHandler
34
+ onClick: e.clickHandler
32
35
  }, [
33
- e(o.NmorphImage, {
34
- src: o.triggerSource,
35
- alt: o.props.alt,
36
+ e.showGalleryTrigger ? (o(!0), a(
37
+ c,
38
+ { key: 0 },
39
+ f(e.triggerSources, (l) => (o(), a("button", {
40
+ key: `${l.src}-${l.index}`,
41
+ type: "button",
42
+ class: "nmorph-image-preview__trigger-item",
43
+ "aria-label": e.getTriggerLabel(l.index),
44
+ onClick: p((v) => e.openPreviewAt(l.index), ["stop"])
45
+ }, [
46
+ i(e.NmorphImage, {
47
+ src: l.src,
48
+ alt: e.getTriggerLabel(l.index),
49
+ fit: "cover",
50
+ "frame-border": 0
51
+ }, h({
52
+ _: 2
53
+ /* DYNAMIC */
54
+ }, [
55
+ n.$slots.loading ? {
56
+ name: "loading",
57
+ fn: r(() => [
58
+ t(n.$slots, "loading")
59
+ ]),
60
+ key: "0"
61
+ } : void 0,
62
+ n.$slots.error ? {
63
+ name: "error",
64
+ fn: r(() => [
65
+ t(n.$slots, "error")
66
+ ]),
67
+ key: "1"
68
+ } : void 0
69
+ ]), 1032, ["src", "alt"]),
70
+ l.index === e.lastVisibleTriggerIndex && e.hiddenTriggerCount > 0 ? (o(), a(
71
+ "span",
72
+ I,
73
+ " +" + w(e.hiddenTriggerCount),
74
+ 1
75
+ /* TEXT */
76
+ )) : d("v-if", !0)
77
+ ], 8, b))),
78
+ 128
79
+ /* KEYED_FRAGMENT */
80
+ )) : (o(), s(e.NmorphImage, {
81
+ key: 1,
82
+ src: e.triggerSource,
83
+ alt: e.props.alt,
36
84
  fit: "cover",
37
85
  "frame-border": 0
38
- }, _({
86
+ }, h({
39
87
  _: 2
40
88
  /* DYNAMIC */
41
89
  }, [
42
- l.$slots.loading ? {
90
+ n.$slots.loading ? {
43
91
  name: "loading",
44
92
  fn: r(() => [
45
- d(l.$slots, "loading")
93
+ t(n.$slots, "loading")
46
94
  ]),
47
95
  key: "0"
48
96
  } : void 0,
49
- l.$slots.error ? {
97
+ n.$slots.error ? {
50
98
  name: "error",
51
99
  fn: r(() => [
52
- d(l.$slots, "error")
100
+ t(n.$slots, "error")
53
101
  ]),
54
102
  key: "1"
55
103
  } : void 0
56
- ]), 1032, ["src", "alt"])
104
+ ]), 1032, ["src", "alt"]))
57
105
  ])
58
106
  ],
59
107
  6
60
108
  /* CLASS, STYLE */
61
- )) : t("v-if", !0),
62
- o.open ? (n(), c(k, {
109
+ )) : d("v-if", !0),
110
+ e.open ? (o(), s(N, {
63
111
  key: 1,
64
112
  to: "body"
65
113
  }, [
66
- a(
114
+ m(
67
115
  "div",
68
116
  {
69
- class: v(["nmorph-image-preview__portal", o.modifiers]),
70
- style: m(o.portalStyle)
117
+ class: _(["nmorph-image-preview__portal", e.modifiers]),
118
+ style: g(e.portalStyle)
71
119
  },
72
120
  [
73
- e(o.NmorphOverlay, {
74
- show: o.open,
75
- "z-index": o.props.zIndex,
121
+ i(e.NmorphOverlay, {
122
+ show: e.open,
123
+ "z-index": e.props.zIndex,
76
124
  "disabled-teleport": "",
77
- "trap-focus": "",
78
- onOnOutsideClick: o.closeHandler,
79
- onOnEscapeKeydown: o.closeHandler
125
+ onOnOutsideClick: e.closeHandler,
126
+ onOnEscapeKeydown: e.closeHandler
80
127
  }, {
81
128
  default: r(() => [
82
- a("div", N, [
83
- e(o.NmorphImage, {
84
- src: o.triggerSource,
85
- alt: o.props.alt,
129
+ m("div", S, [
130
+ i(e.NmorphImage, {
131
+ src: e.triggerSource,
132
+ alt: e.props.alt,
86
133
  fit: "contain",
87
134
  "frame-border": 0,
88
- style: m({ transform: `rotate(${o.rotateLevel}deg) scale(${o.scaleLevel})` })
89
- }, _({
135
+ style: g({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
136
+ }, h({
90
137
  _: 2
91
138
  /* DYNAMIC */
92
139
  }, [
93
- l.$slots.loading ? {
140
+ n.$slots.loading ? {
94
141
  name: "loading",
95
142
  fn: r(() => [
96
- d(l.$slots, "loading")
143
+ t(n.$slots, "loading")
97
144
  ]),
98
145
  key: "0"
99
146
  } : void 0,
100
- l.$slots.error ? {
147
+ n.$slots.error ? {
101
148
  name: "error",
102
149
  fn: r(() => [
103
- d(l.$slots, "error")
150
+ t(n.$slots, "error")
104
151
  ]),
105
152
  key: "1"
106
153
  } : void 0
107
154
  ]), 1032, ["src", "alt", "style"])
108
155
  ]),
109
- o.showNavigation ? (n(), i("div", C, [
110
- e(o.NmorphButton, { onClick: o.previousHandler }, {
156
+ e.showNavigation ? (o(), a("div", B, [
157
+ i(e.NmorphButton, { onClick: e.previousHandler }, {
111
158
  default: r(() => [
112
- e(o.NmorphIcon, null, {
159
+ i(e.NmorphIcon, null, {
113
160
  default: r(() => [
114
- e(o.NmorphIconChevronDown)
161
+ i(e.NmorphIconChevronDown)
115
162
  ]),
116
163
  _: 1
117
164
  /* STABLE */
@@ -120,13 +167,13 @@ function B(l, z, D, o, H, L) {
120
167
  _: 1
121
168
  /* STABLE */
122
169
  })
123
- ])) : t("v-if", !0),
124
- o.showNavigation ? (n(), i("div", I, [
125
- e(o.NmorphButton, { onClick: o.nextHandler }, {
170
+ ])) : d("v-if", !0),
171
+ e.showNavigation ? (o(), a("div", T, [
172
+ i(e.NmorphButton, { onClick: e.nextHandler }, {
126
173
  default: r(() => [
127
- e(o.NmorphIcon, null, {
174
+ i(e.NmorphIcon, null, {
128
175
  default: r(() => [
129
- e(o.NmorphIconChevronDown)
176
+ i(e.NmorphIconChevronDown)
130
177
  ]),
131
178
  _: 1
132
179
  /* STABLE */
@@ -135,25 +182,25 @@ function B(l, z, D, o, H, L) {
135
182
  _: 1
136
183
  /* STABLE */
137
184
  })
138
- ])) : t("v-if", !0),
139
- o.props.showActionBar ? (n(), i("div", S, [
140
- (n(), i(
141
- h,
185
+ ])) : d("v-if", !0),
186
+ e.props.showActionBar ? (o(), a("div", D, [
187
+ (o(), a(
188
+ c,
142
189
  null,
143
- y(o.actions, (s, g) => a("div", {
144
- key: g,
190
+ f(e.actions, (l, v) => m("div", {
191
+ key: v,
145
192
  class: "nmorph-image-preview__action-element"
146
193
  }, [
147
- e(o.NmorphButton, {
148
- onClick: s.handler
194
+ i(e.NmorphButton, {
195
+ onClick: l.handler
149
196
  }, {
150
197
  default: r(() => [
151
- e(
152
- o.NmorphIcon,
198
+ i(
199
+ e.NmorphIcon,
153
200
  null,
154
201
  {
155
202
  default: r(() => [
156
- (n(), c(f(s.icon)))
203
+ (o(), s(k(l.icon)))
157
204
  ]),
158
205
  _: 2
159
206
  /* DYNAMIC */
@@ -169,15 +216,15 @@ function B(l, z, D, o, H, L) {
169
216
  64
170
217
  /* STABLE_FRAGMENT */
171
218
  )),
172
- a("div", b, [
173
- e(o.NmorphButton, {
174
- disabled: o.scaleLevel === 1,
175
- onClick: o.enlargeShrinkActionData.handler
219
+ m("div", L, [
220
+ i(e.NmorphButton, {
221
+ disabled: e.scaleLevel === 1,
222
+ onClick: e.enlargeShrinkActionData.handler
176
223
  }, {
177
224
  default: r(() => [
178
- e(o.NmorphIcon, null, {
225
+ i(e.NmorphIcon, null, {
179
226
  default: r(() => [
180
- (n(), c(f(o.enlargeShrinkActionData.icon)))
227
+ (o(), s(k(e.enlargeShrinkActionData.icon)))
181
228
  ]),
182
229
  _: 1
183
230
  /* STABLE */
@@ -187,7 +234,7 @@ function B(l, z, D, o, H, L) {
187
234
  /* STABLE */
188
235
  }, 8, ["disabled", "onClick"])
189
236
  ])
190
- ])) : t("v-if", !0)
237
+ ])) : d("v-if", !0)
191
238
  ]),
192
239
  _: 3
193
240
  /* FORWARDED */
@@ -196,13 +243,13 @@ function B(l, z, D, o, H, L) {
196
243
  6
197
244
  /* CLASS, STYLE */
198
245
  )
199
- ])) : t("v-if", !0)
246
+ ])) : d("v-if", !0)
200
247
  ],
201
248
  64
202
249
  /* STABLE_FRAGMENT */
203
250
  );
204
251
  }
205
- const P = /* @__PURE__ */ w(p, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
252
+ const F = /* @__PURE__ */ C(y, [["render", z], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
206
253
  export {
207
- P as default
254
+ F as default
208
255
  };
package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue2.js CHANGED
@@ -1,19 +1,19 @@
1
1
  import './NmorphImagePreview.css';
2
- import { defineComponent as F, ref as u, watch as H, computed as l } from "vue";
3
- import { useModifiers as M } from "../../../utils/create-modifiers.js";
4
- import { createCssSizeVariables as y } from "../../../utils/common.js";
5
- import R from "../../../assets/icons/shrink.svg.js";
6
- import T from "../../../assets/icons/rotate-right.svg.js";
7
- import V from "../../../assets/icons/rotate-left.svg.js";
8
- import D from "../../../assets/icons/zoom-in.svg.js";
9
- import P from "../../../assets/icons/zoom-out.svg.js";
10
- import Z from "../../../assets/icons/enlarge.svg.js";
11
- import j from "../../../assets/icons/chevron-down.svg.js";
12
- import E from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
13
- import G from "../../basic/nmorph-icon/NmorphIcon.vue.js";
14
- import J from "../../basic/nmorph-button/NmorphButton.vue.js";
15
- import K from "../nmorph-image/NmorphImage.vue.js";
16
- const ue = /* @__PURE__ */ F({
2
+ import { defineComponent as Z, ref as c, watch as x, computed as t } from "vue";
3
+ import { useModifiers as j } from "../../../utils/create-modifiers.js";
4
+ import { createCssSizeVariables as B } from "../../../utils/common.js";
5
+ import E from "../../../assets/icons/shrink.svg.js";
6
+ import J from "../../../assets/icons/rotate-right.svg.js";
7
+ import K from "../../../assets/icons/rotate-left.svg.js";
8
+ import Q from "../../../assets/icons/zoom-in.svg.js";
9
+ import U from "../../../assets/icons/zoom-out.svg.js";
10
+ import W from "../../../assets/icons/enlarge.svg.js";
11
+ import X from "../../../assets/icons/chevron-down.svg.js";
12
+ import Y from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
13
+ import ee from "../../basic/nmorph-icon/NmorphIcon.vue.js";
14
+ import re from "../../basic/nmorph-button/NmorphButton.vue.js";
15
+ import te from "../nmorph-image/NmorphImage.vue.js";
16
+ const Ne = /* @__PURE__ */ Z({
17
17
  __name: "NmorphImagePreview",
18
18
  props: {
19
19
  modelValue: { type: Boolean, required: !1, default: !1 },
@@ -29,91 +29,116 @@ const ue = /* @__PURE__ */ F({
29
29
  showActionBar: { type: Boolean, required: !1, default: !0 },
30
30
  width: { type: [Number, String], required: !1, default: void 0 },
31
31
  height: { type: [Number, String], required: !1, default: void 0 },
32
- navigationButtonMargin: { type: [Number, String], required: !1, default: void 0 }
32
+ navigationButtonMargin: { type: [Number, String], required: !1, default: void 0 },
33
+ triggerView: { type: String, required: !1, default: "single" },
34
+ triggerLimit: { type: Number, required: !1, default: void 0 },
35
+ triggerGap: { type: [Number, String], required: !1, default: 8 }
33
36
  },
34
37
  emits: ["update:model-value"],
35
- setup(S, { expose: I, emit: q }) {
36
- I();
37
- const e = S, n = u(e.modelValue);
38
- H(
38
+ setup(_, { expose: T, emit: C }) {
39
+ T();
40
+ const e = _, i = c(e.modelValue);
41
+ x(
39
42
  () => e.modelValue,
40
- (a) => n.value = a
43
+ (r) => i.value = r
41
44
  );
42
- const w = l(
43
- () => M({
44
- "nmorph-image-preview": [n.value && "opened"]
45
+ const a = t(() => Array.isArray(e.src) ? e.src : [e.src]), s = (r) => {
46
+ const l = a.value.length - 1;
47
+ return l < 0 || r < 0 ? 0 : r > l ? l : r;
48
+ }, u = c(s(e.initialIndex)), m = t(() => s(u.value)), V = t(() => a.value[m.value] || ""), v = t(() => e.triggerView === "gallery" && a.value.length > 1), d = t(() => !e.triggerLimit || e.triggerLimit < 1 ? a.value.length : Math.min(Math.floor(e.triggerLimit), a.value.length)), g = t(
49
+ () => a.value.slice(0, d.value).map((r, l) => ({
50
+ index: l,
51
+ src: r
52
+ }))
53
+ ), A = t(() => a.value.length - g.value.length), M = t(() => g.value[g.value.length - 1]?.index ?? -1), O = t(
54
+ () => j({
55
+ "nmorph-image-preview": [i.value && "opened", v.value && "gallery-trigger"]
45
56
  })
46
- ), o = u(e.initialIndex), b = l(() => typeof e.src == "string" ? e.src : e.src[o.value]), r = u(1), x = () => {
47
- n.value = !0, s("update:model-value", n.value);
48
- }, B = () => {
49
- n.value = !1, s("update:model-value", n.value);
50
- }, m = () => {
51
- t.value = t.value + 90, t.value >= 360 && (t.value = 0);
52
- }, c = () => {
53
- t.value = t.value - 90, t.value <= -360 && (t.value = 0);
54
- }, p = () => {
55
- r.value < e.maxScaleLevel && (r.value += e.scaleStep), r.value = parseFloat(r.value.toFixed(3));
56
- }, d = () => {
57
- r.value > e.minScaleLevel && (r.value -= e.scaleStep), r.value = parseFloat(r.value.toFixed(3));
58
- }, v = l(() => r.value < 1), f = () => {
59
- r.value = 1;
57
+ ), o = c(1);
58
+ x(
59
+ () => [e.initialIndex, a.value.length],
60
+ () => {
61
+ u.value = s(e.initialIndex);
62
+ }
63
+ );
64
+ const f = (r) => {
65
+ u.value = s(r), i.value = !0, p("update:model-value", i.value);
66
+ }, k = () => {
67
+ v.value || f(m.value);
68
+ }, z = () => {
69
+ i.value = !1, p("update:model-value", i.value);
60
70
  }, h = () => {
61
- r.value = 1;
62
- }, t = u(0), _ = () => {
63
- const a = e.src.length - 1, i = o.value - 1;
64
- i < 0 ? o.value = a : o.value = i;
65
- }, L = () => {
66
- const a = e.src.length - 1, i = o.value + 1;
67
- i > a ? o.value = 0 : o.value = i;
68
- }, A = l(() => {
69
- let a = {
70
- icon: R,
71
- handler: h
71
+ n.value = n.value + 90, n.value >= 360 && (n.value = 0);
72
+ }, N = () => {
73
+ n.value = n.value - 90, n.value <= -360 && (n.value = 0);
74
+ }, y = () => {
75
+ o.value < e.maxScaleLevel && (o.value += e.scaleStep), o.value = parseFloat(o.value.toFixed(3));
76
+ }, I = () => {
77
+ o.value > e.minScaleLevel && (o.value -= e.scaleStep), o.value = parseFloat(o.value.toFixed(3));
78
+ }, S = t(() => o.value < 1), w = () => {
79
+ o.value = 1;
80
+ }, b = () => {
81
+ o.value = 1;
82
+ }, n = c(0), F = () => {
83
+ const r = a.value.length;
84
+ if (!r) return;
85
+ const l = m.value - 1;
86
+ u.value = l < 0 ? r - 1 : l;
87
+ }, H = () => {
88
+ const r = a.value.length;
89
+ if (!r) return;
90
+ const l = m.value + 1;
91
+ u.value = l > r - 1 ? 0 : l;
92
+ }, R = t(() => {
93
+ let r = {
94
+ icon: E,
95
+ handler: b
72
96
  };
73
- return v.value && (a = {
74
- icon: Z,
75
- handler: f
76
- }), a;
77
- }), C = [
97
+ return S.value && (r = {
98
+ icon: W,
99
+ handler: w
100
+ }), r;
101
+ }), D = [
78
102
  {
79
- icon: T,
80
- handler: m
103
+ icon: J,
104
+ handler: h
81
105
  },
82
106
  {
83
- icon: V,
84
- handler: c
107
+ icon: K,
108
+ handler: N
85
109
  },
86
110
  {
87
- icon: D,
88
- handler: p
111
+ icon: Q,
112
+ handler: y
89
113
  },
90
114
  {
91
- icon: P,
92
- handler: d
115
+ icon: U,
116
+ handler: I
93
117
  }
94
- ], s = q, g = l(() => Array.isArray(e.src) && e.src.length > 0), O = l(() => e.showNavigationButtons && g.value), k = l(
95
- () => y({
118
+ ], p = C, q = t(() => a.value.length > 1), G = t(() => e.showNavigationButtons && q.value), P = t(
119
+ () => B({
96
120
  "--width": e.width,
97
- "--height": e.height
121
+ "--height": e.height,
122
+ "--nmorph-image-preview-trigger-gap": e.triggerGap
98
123
  })
99
- ), z = l(
100
- () => y({
124
+ ), $ = t(
125
+ () => B({
101
126
  "--nmorph-image-preview-btn-margin": e.navigationButtonMargin
102
127
  })
103
- ), N = { props: e, open: n, modifiers: w, currentIndex: o, triggerSource: b, scaleLevel: r, clickHandler: x, closeHandler: B, rotateRight: m, rotateLeft: c, zoomIn: p, zoomOut: d, isLevelChangedToMin: v, enlargeToNormal: f, shrinkToNormal: h, rotateLevel: t, previousHandler: _, nextHandler: L, enlargeShrinkActionData: A, actions: C, emit: s, multipleSources: g, showNavigation: O, triggerStyle: k, portalStyle: z, get NmorphImage() {
104
- return K;
128
+ ), L = { props: e, open: i, sourceList: a, getClampedIndex: s, currentIndex: u, resolvedCurrentIndex: m, triggerSource: V, showGalleryTrigger: v, triggerSourceLimit: d, triggerSources: g, hiddenTriggerCount: A, lastVisibleTriggerIndex: M, modifiers: O, scaleLevel: o, openPreviewAt: f, clickHandler: k, closeHandler: z, rotateRight: h, rotateLeft: N, zoomIn: y, zoomOut: I, isLevelChangedToMin: S, enlargeToNormal: w, shrinkToNormal: b, rotateLevel: n, previousHandler: F, nextHandler: H, enlargeShrinkActionData: R, actions: D, emit: p, multipleSources: q, showNavigation: G, triggerStyle: P, portalStyle: $, getTriggerLabel: (r) => e.alt ? `${e.alt} ${r + 1}` : `Image ${r + 1}`, get NmorphImage() {
129
+ return te;
105
130
  }, get NmorphButton() {
106
- return J;
131
+ return re;
107
132
  }, get NmorphIcon() {
108
- return G;
133
+ return ee;
109
134
  }, get NmorphOverlay() {
110
- return E;
135
+ return Y;
111
136
  }, get NmorphIconChevronDown() {
112
- return j;
137
+ return X;
113
138
  } };
114
- return Object.defineProperty(N, "__isScriptSetup", { enumerable: !1, value: !0 }), N;
139
+ return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
115
140
  }
116
141
  });
117
142
  export {
118
- ue as default
143
+ Ne as default
119
144
  };