@nmorph/nmorph-ui-kit 2.2.51 → 2.2.53

package/dist/outside-hooks/use-nmorph-theme.js

@@ -23,7 +23,7 @@ const $ = {
   scrollThumb: "#687b9e",
   accent: "#4a90e2",
   focusText: "#ffffff",
-  placeholderText: "#c1c9cf",
+  placeholderText: "#9aa8b3",
   semiContrastText: "#8a9dc0",
   contrastText: "#b4c4de"
 }, F = {
@@ -34,7 +34,7 @@ const $ = {
   scrollThumb: "#778288",
   accent: "#006cb6",
   focusText: "#ffffff",
-  placeholderText: "#575757",
+  placeholderText: "#68747b",
   semiContrastText: "#9caab0",
   contrastText: "#c3cdd1"
 }, T = "nmorph-data-theme", R = "dark", C = {
@@ -64,8 +64,8 @@ const $ = {
 }, y = (r, e) => {
   let n = parseInt(r.substring(1, 3), 16), a = parseInt(r.substring(3, 5), 16), s = parseInt(r.substring(5, 7), 16);
   n = Math.round(n * (1 + e / 100)), a = Math.round(a * (1 + e / 100)), s = Math.round(s * (1 + e / 100)), n = Math.min(255, Math.max(0, n)), a = Math.min(255, Math.max(0, a)), s = Math.min(255, Math.max(0, s));
-  const c = n.toString(16).padStart(2, "0"), i = a.toString(16).padStart(2, "0"), l = s.toString(16).padStart(2, "0");
-  return `#${c}${i}${l}`;
+  const i = n.toString(16).padStart(2, "0"), c = a.toString(16).padStart(2, "0"), l = s.toString(16).padStart(2, "0");
+  return `#${i}${c}${l}`;
 }, G = (r) => ({
   themes: r?.themes ?? C.themes,
   defaultTheme: r?.defaultTheme ?? C.defaultTheme,
@@ -87,14 +87,14 @@ const $ = {
   name: `--nmorph-${E(e)}-color`,
   color: n
 })), P = (r, e) => {
-  const n = (c) => c.map((i) => `${i.name}: ${i.color};`).join(" "), a = Object.entries(e).map(([c, i]) => `--${E(c)}: ${i};`).join(" "), s = [];
-  return Object.entries(r).forEach(([c, i]) => {
+  const n = (i) => i.map((c) => `${c.name}: ${c.color};`).join(" "), a = Object.entries(e).map(([i, c]) => `--${E(i)}: ${c};`).join(" "), s = [];
+  return Object.entries(r).forEach(([i, c]) => {
     const l = x($);
-    if (c === "common") s.push(n(A(l, i)));
+    if (i === "common") s.push(n(A(l, c)));
     else {
       const S = `
-        &[${T}='${c}'] {
-          ${n(i)}
+        &[${T}='${i}'] {
+          ${n(c)}
         }
       `;
       s.push(S);
@@ -109,8 +109,8 @@ const $ = {
   const e = {};
   return Object.entries(r.themes).forEach(([n, a]) => {
     e[n] = [];
-    const s = !!a.darkShade, c = !!a.lightShade;
-    !!a.main && !s && !c && a.main && (e[n] = x(N(r, a.main))), e[n] = [...e[n], ...x(a)];
+    const s = !!a.darkShade, i = !!a.lightShade;
+    !!a.main && !s && !i && a.main && (e[n] = x(N(r, a.main))), e[n] = [...e[n], ...x(a)];
   }), e;
 }, J = (r) => {
   const e = G(r);
@@ -133,7 +133,7 @@ const $ = {
   }, s = (o) => Object.entries(o).filter(([, t]) => typeof t == "string").map(([t, h]) => ({
     name: `--nmorph-${E(t)}-color`,
     color: h
-  })), c = (o, t) => {
+  })), i = (o, t) => {
     const h = (f) => f.map((u) => `${u.name}: ${u.color};`).join(" "), m = Object.entries(t).map(([f, u]) => `--${E(f)}: ${u};`).join(" "), b = [];
     return Object.entries(o).forEach(([f, u]) => {
       const k = s($);
@@ -152,7 +152,7 @@ const $ = {
         ${m}
       }
     `;
-  }, i = (o) => {
+  }, c = (o) => {
     const t = {};
     return Object.entries(o).forEach(([h, m]) => {
       t[h] = [];
@@ -160,10 +160,10 @@ const $ = {
       !!m.main && !b && !f && m.main && (t[h] = a(m.main)), t[h] = [...t[h], ...s(m)];
     }), t;
   }, l = typeof document < "u", S = H(e.defaultTheme);
-  let g = i(e.themes), d = null;
-  l && (d = document.getElementById("nmorph-theme-styles"), d || (d = document.createElement("style"), d.id = "nmorph-theme-styles", d.type = "text/css", document.head.appendChild(d)), d.innerHTML = c(g, e.other));
+  let g = c(e.themes), d = null;
+  l && (d = document.getElementById("nmorph-theme-styles"), d || (d = document.createElement("style"), d.id = "nmorph-theme-styles", d.type = "text/css", document.head.appendChild(d)), d.innerHTML = i(g, e.other));
   const D = () => {
-    g = i(e.themes), d && (d.innerHTML = c(g, e.other));
+    g = c(e.themes), d && (d.innerHTML = i(g, e.other));
   }, p = (o) => {
     S.value = o, l && (document.documentElement.setAttribute(T, S.value), !(typeof localStorage > "u") && (e.saveCurrentThemeToLS ? localStorage.setItem(T, o) : localStorage.removeItem(T)));
   }, M = (o, t) => {

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const a = "2.2.51", e = {
+const a = "2.2.53", e = {
   version: a
 };
 export {

package/dist/src/components/data/index.d.ts

@@ -23,6 +23,8 @@ export * from './nmorph-file-card/types';
 export { default as NmorphImage } from './nmorph-image/NmorphImage.vue';
 export { default as NmorphImagePreview } from './nmorph-image-preview/NmorphImagePreview.vue';
 export * from './nmorph-image-preview/types';
+export { default as NmorphMediaGallery } from './nmorph-media-gallery/NmorphMediaGallery.vue';
+export * from './nmorph-media-gallery/types';
 export { default as NmorphMediaTile } from './nmorph-media-tile/NmorphMediaTile.vue';
 export * from './nmorph-media-tile/types';
 export { default as NmorphPagination } from './nmorph-pagination/NmorphPagination.vue';

package/dist/src/components/data/nmorph-card/NmorphCard.vue.d.ts

@@ -3,13 +3,13 @@ import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOp
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphCardProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<INmorphCardProps> & Readonly<{}>, {
     fill: boolean;
     tag: string;
+    contentClass: string;
     radius: string | number;
     shadowType: "inset" | "outset" | "combined" | "not-defined";
     combinedShadowBorderWidth: number;
     cardPadding: string | number;
     padding: string | number;
     contentPadding: string | number;
-    contentClass: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, any>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/src/components/data/nmorph-file-card/NmorphFileCard.vue.d.ts

@@ -1,6 +1,6 @@
 import { INmorphFileCardProps } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { NmorphFileCardSurface, NmorphFileCardMediaPreview } from '../..';
+import { NmorphFileCardSurface, NmorphFileCardPreviewMode, NmorphFileCardMediaPreview } from '../..';
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphFileCardProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     error: () => any;
     download: () => any;
@@ -19,12 +19,13 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphFileCard
     downloadHref: string;
     errorText: string;
     showDefaultActions: boolean;
+    previewMode: NmorphFileCardPreviewMode;
     extension: string;
     mimeType: string;
     mediaPreview: NmorphFileCardMediaPreview;
     showExtensionBadge: boolean;
     iconSurface: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>, {
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     actions?(_: {}): any;
 }>;
 export default _default;

package/dist/src/components/data/nmorph-file-card/types.d.ts

@@ -1,5 +1,6 @@
 export type NmorphFileCardSurface = 'card' | 'soft' | 'plain';
-export type NmorphFileCardMediaPreview = 'none' | 'audio' | 'video';
+export type NmorphFileCardMediaPreview = 'none' | 'audio' | 'video' | 'image';
+export type NmorphFileCardPreviewMode = 'internal' | 'emit' | 'none';
 export interface INmorphFileCardProps {
     name: string;
     extension?: string;
@@ -8,6 +9,7 @@ export interface INmorphFileCardProps {
     previewSrc?: string;
     downloadHref?: string;
     mediaPreview?: NmorphFileCardMediaPreview;
+    previewMode?: NmorphFileCardPreviewMode;
     surface?: NmorphFileCardSurface;
     showExtensionBadge?: boolean;
     iconSurface?: boolean;

package/dist/src/components/data/nmorph-image-preview/NmorphImagePreview.vue.d.ts

@@ -9,18 +9,18 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphImagePre
     modelValue: boolean;
     height: string | number;
     width: string | number;
+    zIndex: number;
+    navigationButtonMargin: string | number;
+    showActionBar: boolean;
     alt: string;
     initialIndex: number;
     scaleStep: number;
     minScaleLevel: number;
     maxScaleLevel: number;
-    zIndex: number;
     showTrigger: boolean;
     showNavigationButtons: boolean;
-    showActionBar: boolean;
     radius: string | number;
     fit: NmorphImagePreviewFit;
-    navigationButtonMargin: string | number;
     triggerView: NmorphImagePreviewTriggerView;
     triggerLimit: number;
     triggerGap: string | number;

package/dist/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.d.ts

@@ -0,0 +1,31 @@
+import { INmorphMediaGalleryProps, NmorphMediaGalleryItem } from './types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { NmorphMediaGalleryFit } from '../..';
+declare const _default: DefineComponent<INmorphMediaGalleryProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:model-value": (value: boolean) => any;
+    change: (item: NmorphMediaGalleryItem, index: number) => any;
+    close: () => any;
+    download: (item: NmorphMediaGalleryItem, index: number) => any;
+    "update:active-index": (value: number) => any;
+    fullscreen: (item: NmorphMediaGalleryItem, index: number) => any;
+}, string, PublicProps, Readonly<INmorphMediaGalleryProps> & Readonly<{
+    "onUpdate:model-value"?: (value: boolean) => any;
+    onChange?: (item: NmorphMediaGalleryItem, index: number) => any;
+    onClose?: () => any;
+    onDownload?: (item: NmorphMediaGalleryItem, index: number) => any;
+    "onUpdate:active-index"?: (value: number) => any;
+    onFullscreen?: (item: NmorphMediaGalleryItem, index: number) => any;
+}>, {
+    modelValue: boolean;
+    zIndex: number;
+    showActionBar: boolean;
+    initialIndex: number;
+    showTrigger: boolean;
+    showNavigationButtons: boolean;
+    activeIndex: number;
+    imageFit: NmorphMediaGalleryFit;
+    videoFit: NmorphMediaGalleryFit;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    currentVideoRef: HTMLVideoElement;
+}, any>;
+export default _default;

package/dist/src/components/data/nmorph-media-gallery/types.d.ts

@@ -0,0 +1,39 @@
+export type NmorphMediaGalleryFit = 'cover' | 'contain';
+export type NmorphMediaGalleryVideoPreload = 'none' | 'metadata' | 'auto';
+export interface INmorphMediaGalleryItemBase {
+    src: string;
+    name?: string;
+    size?: number;
+    downloadHref?: string;
+}
+export type NmorphMediaGalleryItem = (INmorphMediaGalleryItemBase & {
+    kind: 'image';
+    alt?: string;
+}) | (INmorphMediaGalleryItemBase & {
+    kind: 'video';
+    poster?: string;
+    controls?: boolean;
+    muted?: boolean;
+    playsinline?: boolean;
+    preload?: NmorphMediaGalleryVideoPreload;
+});
+export interface INmorphMediaGalleryProps {
+    modelValue?: boolean;
+    items: NmorphMediaGalleryItem[];
+    initialIndex?: number;
+    activeIndex?: number;
+    zIndex?: number;
+    showTrigger?: boolean;
+    showNavigationButtons?: boolean;
+    showActionBar?: boolean;
+    imageFit?: NmorphMediaGalleryFit;
+    videoFit?: NmorphMediaGalleryFit;
+}
+export interface INmorphMediaGalleryEmit {
+    (e: 'update:model-value', value: boolean): void;
+    (e: 'update:active-index', value: number): void;
+    (e: 'close'): void;
+    (e: 'change', item: NmorphMediaGalleryItem, index: number): void;
+    (e: 'download', item: NmorphMediaGalleryItem, index: number): void;
+    (e: 'fullscreen', item: NmorphMediaGalleryItem, index: number): void;
+}

package/dist/src/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue.d.ts

@@ -0,0 +1,43 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    show: boolean;
+    zIndex?: number;
+    rootClass?: string;
+    stateClass?: string;
+    contentClass?: string;
+    leftClass?: string;
+    rightClass?: string;
+    actionsClass?: string;
+    navigationButtonMargin?: number | string;
+    showNavigation?: boolean;
+    showActionBar?: boolean;
+};
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    close: () => any;
+    previous: () => any;
+    next: () => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: () => any;
+    onPrevious?: () => any;
+    onNext?: () => any;
+}>, {
+    zIndex: number;
+    rootClass: string;
+    stateClass: string;
+    contentClass: string;
+    leftClass: string;
+    rightClass: string;
+    actionsClass: string;
+    navigationButtonMargin: string | number;
+    showNavigation: boolean;
+    showActionBar: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?(_: {}): any;
+    actions?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/data/nmorph-video-preview/NmorphVideoPreview.vue.d.ts

@@ -1,6 +1,6 @@
 import { INmorphVideoPreviewProps } from './types';
 import { DefineComponent, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { NmorphVideoPreviewFit, NmorphVideoPreviewSurface } from '../..';
+import { NmorphVideoPreviewFit, NmorphVideoPreviewSurface, NmorphVideoPreviewPreviewMode } from '../..';
 declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphVideoPreviewProps, {
     videoRef: Ref<HTMLVideoElement, HTMLVideoElement>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -35,12 +35,13 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphVideoPre
     errorText: string;
     showDefaultActions: boolean;
     poster: string;
-    showMeta: boolean;
-    controls: boolean;
     muted: boolean;
     playsinline: boolean;
+    controls: boolean;
+    showMeta: boolean;
     showPreviewAction: boolean;
     showFullscreenAction: boolean;
+    previewMode: NmorphVideoPreviewPreviewMode;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
     videoRef: HTMLVideoElement;
 }, any>, {

package/dist/src/components/data/nmorph-video-preview/types.d.ts

@@ -1,5 +1,6 @@
 export type NmorphVideoPreviewFit = 'cover' | 'contain';
 export type NmorphVideoPreviewSurface = 'card' | 'soft' | 'plain';
+export type NmorphVideoPreviewPreviewMode = 'internal' | 'emit';
 export interface INmorphVideoPreviewProps {
     src: string;
     poster?: string;
@@ -23,6 +24,7 @@ export interface INmorphVideoPreviewProps {
     showDefaultActions?: boolean;
     showPreviewAction?: boolean;
     showFullscreenAction?: boolean;
+    previewMode?: NmorphVideoPreviewPreviewMode;
 }
 export interface INmorphVideoPreviewEmit {
     (e: 'play', val: Event): void;

package/dist/src/components/feedback/nmorph-drawer/NmorphDrawer.vue.d.ts

@@ -11,10 +11,10 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphDrawerPr
     modelValue: boolean;
     size: string | number;
     zIndex: number;
+    contentClass: string;
     teleportTo: string | HTMLElement;
     disabledTeleport: boolean;
     closeOnEscape: boolean;
-    contentClass: string;
     showClose: boolean;
     closeOnOverlay: boolean;
     placement: NmorphDrawerPlacementType;

package/dist/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue.d.ts

@@ -12,11 +12,11 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphDropdown
     ariaLabel: string;
     minWidth: string | number;
     zIndex: number;
+    contentClass: string;
     closeOnEscape: boolean;
     trapFocus: boolean;
     restoreFocus: boolean;
     role: string;
-    contentClass: string;
     hideShadow: boolean;
     placement: NmorphPlacementType;
     yOffset: number;