@lazhus/kg-ui 0.7.7 → 0.8.0

package/custom-elements.json

@@ -2767,13 +2767,13 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ src: { type: String }, alt: { type: String }, width: { type: String }, height: { type: String }, fit: { type: String }, // 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' shape: { type: String }, // 'square' | 'circle' | 'rounded' lazy: { type: Boolean }, _error: { state: true } }"
+              "default": "{ src: { type: String }, alt: { type: String }, width: { type: String }, height: { type: String }, fit: { type: String }, // 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' shape: { type: String }, // 'square' | 'circle' | 'rounded' lazy: { type: Boolean }, preview: { type: Boolean }, _error: { state: true }, _previewOpen: { state: true } }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; line-height: 0; overflow: hidden; background-color: var(--kg-bg-secondary); } :host([shape=\"circle\"]) { border-radius: 50%; } :host([shape=\"rounded\"]) { border-radius: var(--kg-radius, 8px); } :host([shape=\"square\"]) { border-radius: 0; } .img-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } img { display: block; width: 100%; height: 100%; } .fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--kg-text-muted); font-size: 0.8rem; } `"
+              "default": "css` :host { display: inline-block; line-height: 0; overflow: hidden; background-color: var(--kg-bg-secondary); position: relative; } :host([shape=\"circle\"]) { border-radius: 50%; } :host([shape=\"rounded\"]) { border-radius: var(--kg-radius, 8px); } :host([shape=\"square\"]) { border-radius: 0; } :host([preview]) .img-wrapper { cursor: zoom-in; } .img-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } img { display: block; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s; } .fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--kg-text-muted); font-size: 0.8rem; } /* Preview Overlay */ .preview-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2050; background-color: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(4px); } .preview-overlay.open { opacity: 1; visibility: visible; } .preview-image { max-width: 90vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; transform: scale(0.9); transition: transform 0.3s ease; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); } .preview-overlay.open .preview-image { transform: scale(1); } .preview-close { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.2); border: none; color: white; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 2060; } .preview-close:hover { background: rgba(255, 255, 255, 0.3); } `"
             },
             {
               "kind": "method",
@@ -2784,6 +2784,32 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "updated",
+              "parameters": [
+                {
+                  "name": "changedProperties"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_handleKeyDown"
+            },
+            {
+              "kind": "method",
+              "name": "_handleImageClick"
+            },
+            {
+              "kind": "method",
+              "name": "_closePreview",
+              "parameters": [
+                {
+                  "name": "e"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "render"
@@ -2844,6 +2870,14 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "preview",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_error",
@@ -2851,6 +2885,14 @@
                 "text": "boolean"
               },
               "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_previewOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
             }
           ],
           "superclass": {

package/dist/components/kg-image.js

@@ -1,4 +1,4 @@
-var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r)(t,"symbol"!=typeof i?i+"":i,r);import{LitElement as i,css as r,html as s}from"lit";class h extends i{constructor(){super(),this.src="",this.alt="",this.width="100%",this.height="auto",this.fit="cover",this.shape="square",this.lazy=!1,this._error=!1}willUpdate(e){e.has("src")&&(this._error=!1)}render(){return this.width,this.height,s`
+var e=Object.defineProperty,i=(i,t,r)=>((i,t,r)=>t in i?e(i,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[t]=r)(i,"symbol"!=typeof t?t+"":t,r);import{LitElement as t,css as r,html as o}from"lit";class s extends t{constructor(){super(),i(this,"_handleKeyDown",e=>{"Escape"===e.key&&this._closePreview(e)}),this.src="",this.alt="",this.width="100%",this.height="auto",this.fit="cover",this.shape="square",this.lazy=!1,this.preview=!1,this._error=!1,this._previewOpen=!1}willUpdate(e){e.has("src")&&(this._error=!1)}updated(e){e.has("_previewOpen")&&(this._previewOpen?(document.body.style.overflow="hidden",window.addEventListener("keydown",this._handleKeyDown)):(document.body.style.overflow="",window.removeEventListener("keydown",this._handleKeyDown)))}disconnectedCallback(){super.disconnectedCallback(),this._previewOpen&&(document.body.style.overflow="",window.removeEventListener("keydown",this._handleKeyDown))}_handleImageClick(){this.preview&&!this._error&&(this._previewOpen=!0)}_closePreview(e){e&&e.stopPropagation(),this._previewOpen=!1}render(){return this.width,this.height,o`
       <style>
         :host {
           width: ${this.width};
@@ -8,8 +8,9 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
           object-fit: ${this.fit};
         }
       </style>
-      <div class="img-wrapper">
-        ${this._error||!this.src?s`
+      
+      <div class="img-wrapper" @click="${this._handleImageClick}">
+        ${this._error||!this.src?o`
               <div class="fallback">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
@@ -17,7 +18,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                   <polyline points="21 15 16 10 5 21"></polyline>
                 </svg>
               </div>
-            `:s`
+            `:o`
               <img 
                 src="${this.src}" 
                 alt="${this.alt}"
@@ -26,12 +27,32 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
               />
             `}
       </div>
-    `}}t(h,"properties",{src:{type:String},alt:{type:String},width:{type:String},height:{type:String},fit:{type:String},shape:{type:String},lazy:{type:Boolean},_error:{state:!0}}),t(h,"styles",r`
+
+      ${this.preview?o`
+        <div class="preview-overlay ${this._previewOpen?"open":""}" @click="${this._closePreview}">
+            ${this._previewOpen?o`
+                <button class="preview-close" @click="${this._closePreview}">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                </button>
+                <img 
+                    class="preview-image" 
+                    src="${this.src}" 
+                    alt="${this.alt}" 
+                    @click="${e=>e.stopPropagation()}"
+                />
+            `:""}
+        </div>
+      `:""}
+    `}}i(s,"properties",{src:{type:String},alt:{type:String},width:{type:String},height:{type:String},fit:{type:String},shape:{type:String},lazy:{type:Boolean},preview:{type:Boolean},_error:{state:!0},_previewOpen:{state:!0}}),i(s,"styles",r`
     :host {
       display: inline-block;
       line-height: 0;
       overflow: hidden;
       background-color: var(--kg-bg-secondary);
+      position: relative;
     }
 
     :host([shape="circle"]) {
@@ -46,6 +67,10 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
       border-radius: 0;
     }
 
+    :host([preview]) .img-wrapper {
+        cursor: zoom-in;
+    }
+
     .img-wrapper {
       width: 100%;
       height: 100%;
@@ -58,6 +83,8 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
       display: block;
       width: 100%;
       height: 100%;
+      opacity: 1;
+      transition: opacity 0.3s;
     }
 
     .fallback {
@@ -69,4 +96,64 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
       color: var(--kg-text-muted);
       font-size: 0.8rem;
     }
-  `),"undefined"==typeof customElements||customElements.get("kg-image")||customElements.define("kg-image",h);export{h as kgimage};
+
+    /* Preview Overlay */
+    .preview-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        z-index: 2050;
+        background-color: rgba(0, 0, 0, 0.9);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+        backdrop-filter: blur(4px);
+    }
+
+    .preview-overlay.open {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .preview-image {
+        max-width: 90vw;
+        max-height: 90vh;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+        transform: scale(0.9);
+        transition: transform 0.3s ease;
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+    }
+
+    .preview-overlay.open .preview-image {
+        transform: scale(1);
+    }
+
+    .preview-close {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        background: rgba(255, 255, 255, 0.2);
+        border: none;
+        color: white;
+        cursor: pointer;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background 0.2s;
+        z-index: 2060;
+    }
+
+    .preview-close:hover {
+        background: rgba(255, 255, 255, 0.3);
+    }
+  `),"undefined"==typeof customElements||customElements.get("kg-image")||customElements.define("kg-image",s);export{s as kgimage};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "type": "module",
   "files": [
     "dist",

package/types/components/kg-image.d.ts

@@ -16,6 +16,8 @@ export class kgimage extends LitElement {
   shape: string;
   /**  */
   lazy: boolean;
+  /**  */
+  preview: boolean;
 }
 
 declare global {
@@ -33,6 +35,7 @@ declare global {
       fit?: string;
       shape?: string;
       lazy?: boolean;
+      preview?: boolean;
         [key: string]: any;
       };
     }

package/types/index.d.ts

@@ -239,6 +239,7 @@ declare global {
       fit?: string;
       shape?: string;
       lazy?: boolean;
+      preview?: boolean;
       [key: string]: any;
     };
     'kg-input': {