@nuralyui/image 0.0.11 → 0.0.12
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/image.component.d.ts +2 -2
- package/image.component.js.map +1 -1
- package/image.style.js.map +1 -1
- package/image.types.js.map +1 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
package/image.component.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement, PropertyValues } from "lit";
|
|
1
|
+
import { LitElement, type PropertyValues } from "lit";
|
|
2
2
|
import { ImageFit } from "./image.types.js";
|
|
3
3
|
declare const NrImageElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
4
4
|
export declare class NrImageElement extends NrImageElement_base {
|
|
@@ -20,7 +20,7 @@ export declare class NrImageElement extends NrImageElement_base {
|
|
|
20
20
|
private handleLoad;
|
|
21
21
|
private showPreviewModal;
|
|
22
22
|
private closePreviewModal;
|
|
23
|
-
render(): import("lit").TemplateResult<1>;
|
|
23
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
24
24
|
}
|
|
25
25
|
declare global {
|
|
26
26
|
interface HTMLElementTagNameMap {
|
package/image.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.component.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"image.component.js","sourceRoot":"","sources":["../../../../src/components/image/image.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport styles from \"./image.style.js\";\nimport { ImageFit } from \"./image.types.js\";\n\n@customElement('nr-image')\nexport class NrImageElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n @property({ type: String })\n src!: string;\n\n @property({ type: String })\n fallback?: string;\n\n @property({ type: String })\n width = 'auto';\n\n @property({ type: String })\n height = 'auto';\n\n @property({ type: String })\n alt = '';\n\n @property({ type: Boolean })\n previewable = false;\n\n @property({ type: String })\n fit?: ImageFit;\n\n @property({ type: Boolean, reflect: true })\n block = false;\n\n @state()\n private currentSrc = '';\n\n @state()\n private showPreview = false;\n\n @state()\n private hasError = false;\n\n private readonly defaultFallback = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg==';\n\n override willUpdate(changedProperties: PropertyValues): void {\n if (changedProperties.has('src')) {\n this.currentSrc = this.src;\n this.hasError = false;\n }\n }\n\n private handleError() {\n this.hasError = true;\n this.dispatchEvent(new CustomEvent('nr-image-error', {\n bubbles: true,\n composed: true,\n detail: { error: `Error loading image: ${this.currentSrc}`, src: this.currentSrc }\n }));\n if (this.fallback && this.currentSrc !== this.fallback && this.currentSrc !== this.defaultFallback) {\n this.currentSrc = this.fallback;\n } else if (this.currentSrc !== this.defaultFallback) {\n this.currentSrc = this.defaultFallback;\n }\n }\n\n private handleLoad() {\n this.hasError = false;\n this.dispatchEvent(new CustomEvent('nr-image-load', {\n bubbles: true,\n composed: true,\n detail: { src: this.currentSrc }\n }));\n }\n\n private showPreviewModal() {\n if (this.previewable && !this.hasError) {\n this.showPreview = true;\n this.dispatchEvent(new CustomEvent('nr-image-preview-open', {\n bubbles: true,\n composed: true,\n detail: { src: this.currentSrc }\n }));\n }\n }\n\n private closePreviewModal() {\n this.showPreview = false;\n this.dispatchEvent(new CustomEvent('nr-image-preview-close', {\n bubbles: true,\n composed: true,\n detail: { src: this.currentSrc }\n }));\n }\n\n override render() {\n const containerClasses = {\n 'image-container': true,\n 'image--previewable': this.previewable,\n 'image--error': this.hasError\n };\n const imageStyles: Record<string, string> = {\n width: typeof this.width === 'number' ? `${this.width}px` : this.width,\n height: typeof this.height === 'number' ? `${this.height}px` : this.height,\n };\n if (this.fit) {\n imageStyles['object-fit'] = this.fit;\n }\n return html`\n <div class=${classMap(containerClasses)}>\n <img\n src=${this.currentSrc}\n alt=${this.alt}\n style=${styleMap(imageStyles)}\n @error=${this.handleError}\n @load=${this.handleLoad}\n @click=${this.showPreviewModal}\n />\n ${this.showPreview ? html`\n <div class=\"preview-modal\" @click=${this.closePreviewModal}>\n <button class=\"preview-close\" @click=${this.closePreviewModal} aria-label=\"Close preview\">×</button>\n <img src=\"${this.currentSrc}\" alt=\"${this.alt}\" />\n </div>\n ` : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-image': NrImageElement;\n }\n}\n"]}
|
package/image.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"image.style.js","sourceRoot":"","sources":["../../../../src/components/image/image.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAgB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFlB,CAAA","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\nimg{\n border-top-left-radius:var(--nuraly-image-border-top-left-radius,var(--nuraly-image-local-border-top-left-radius)) ;\n border-top-right-radius: var(--nuraly-image-border-top-right-radius,var(--nuraly-image-local-border-top-right-radius));\n border-bottom-left-radius: var(--nuraly-image-border-bottom-left-radius,var(--nuraly-image-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--nuraly-image-border-bottom-right-radius,var(--nuraly-image-local-border-bottom-right-radius));\n}\n.image-container {\n position: relative;\n }\n\n img {\n display: block;\n max-width: 100%;\n }\n\n .preview-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 1000;\n animation: fadeIn 0.3s ease;\n }\n\n .preview-modal img {\n max-width: 90%;\n max-height: 90%;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n animation: zoomIn 0.3s ease;\n }\n\n .preview-close {\n position: absolute;\n top: 20px;\n right: 20px;\n width: 40px;\n height: 40px;\n background: rgba(255, 255, 255, 0.2);\n border: none;\n border-radius: 50%;\n color: white;\n font-size: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n outline: none;\n transition: background-color 0.3s;\n }\n\n .preview-close:hover {\n background: rgba(255, 255, 255, 0.4);\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes zoomIn {\n from {\n transform: scale(0.9);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n }\n`"]}
|
package/image.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"image.types.js","sourceRoot":"","sources":["../../../../src/components/image/image.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Image fit modes\n */\nexport const enum ImageFit {\n /** Default behavior, no scaling */\n None = 'none',\n /** The content is sized to fill the element's box */\n Fill = 'fill',\n /** The content is sized to maintain its aspect ratio while fitting within the element's box */\n Contain = 'contain',\n /** The content is sized to maintain its aspect ratio while filling the element's entire box */\n Cover = 'cover',\n /** The content is sized as if none or contain were specified */\n ScaleDown = 'scale-down',\n}\n\n/**\n * Image placeholder type\n */\nexport const enum ImagePlaceholder {\n /** Default placeholder icon */\n Default = 'default',\n /** Custom placeholder */\n Custom = 'custom',\n}\n\n/**\n * Image configuration interface\n */\nexport interface ImageConfig {\n /** Image source URL */\n src: string;\n \n /** Fallback image URL when loading fails */\n fallback?: string;\n \n /** Image width */\n width?: string | number;\n \n /** Image height */\n height?: string | number;\n \n /** Alternative text for the image */\n alt?: string;\n \n /** Whether the image is previewable (clickable to show fullscreen) */\n previewable?: boolean;\n \n /** Object-fit CSS property value */\n fit?: ImageFit;\n \n /** Whether to show a placeholder while loading */\n placeholder?: boolean | string;\n \n /** Custom CSS class */\n customClass?: string;\n \n /** Callback when image loads successfully */\n onLoad?: () => void;\n \n /** Callback when image fails to load */\n onError?: (error: Error) => void;\n}\n\n/**\n * Image event detail\n */\nexport interface ImageEventDetail {\n /** Original event */\n originalEvent?: Event;\n \n /** Error message if applicable */\n error?: string;\n \n /** Image source */\n src?: string;\n}\n"]}
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './image.component.js';\nexport * from './image.types.js';\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/image/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,aAAa,EAAE,uBAAuB;QACtC,cAAc,EAAE,wBAAwB;KACzC;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrImageElement } from './image.component.js';\n\nexport const NrImage = createComponent({\n tagName: 'nr-image',\n elementClass: NrImageElement,\n react: React,\n events: {\n onLoad: 'nr-image-load',\n onError: 'nr-image-error',\n onPreviewOpen: 'nr-image-preview-open',\n onPreviewClose: 'nr-image-preview-close',\n },\n});\n"]}
|