@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-image.js

@@ -1 +1,289 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["1:1","16:9","4:3","3:2","3:4","2:1","auto"],i=["cover","contain","fill","none","scale-down"],s=["lazy","eager"],a=["skeleton","blur","none"],l=["s","m","l","full"],r=["s","m","l"];class DbImage extends HTMLElement{constructor(){super(...arguments),this.imageState="loading",this.currentSrc="",this.showPlaceholder=!1,this.imgEl=null,this.placeholderEl=null,this.errorEl=null,this.initialized=!1,this.handleLoad=()=>{"loaded"!==this.imageState&&(this.imageState="loaded",this.showPlaceholder=!1,this.syncVisualState(),this.dispatchEvent(new CustomEvent("db-load",{bubbles:!0,composed:!0})))},this.handleError=()=>{const e=this.getAttribute("fallback-src")||"";if(e&&this.currentSrc!==e)return this.currentSrc=e,this.imageState="loading",this.updateImageSource(),void this.syncVisualState();this.imageState="error",this.showPlaceholder=!1,this.syncVisualState(),this.dispatchEvent(new CustomEvent("db-error",{bubbles:!0,composed:!0}))},this.handleClick=()=>{this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=e=>{this.hasAttribute("clickable")&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["src","alt","ratio","fit","loading","fallback-src","placeholder","rounded","width","height","max-width","max-height","full-width","full-height","shadow","hover","clickable"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.resetFromAttributes(),this.ensureStructure(),this.syncVisualState()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,i){if(t!==i||"src"===e){if("src"===e){const e=i||"";if(e!==this.currentSrc){this.currentSrc=e,this.imageState="loading";const t=this.getAttribute("placeholder")||"none";this.showPlaceholder="none"!==t,this.updateImageSource()}}"placeholder"===e&&(this.showPlaceholder="none"!==(i||"none")&&"loading"===this.imageState),this.ensureStructure(),this.syncVisualState()}else this.syncVisualState()}resetFromAttributes(){this.currentSrc=this.getAttribute("src")||"";const e=this.getAttribute("placeholder")||"none";this.showPlaceholder="none"!==e,this.imageState="loading"}getRoundedClass(){const e=this.getAttribute("rounded");return e?"true"===e||""===e?"designbase-wc-image--rounded":"s"===e?"designbase-wc-image--rounded-sm":"m"===e?"designbase-wc-image--rounded-md":"l"===e?"designbase-wc-image--rounded-lg":l.includes(e)?"full"===e?"designbase-wc-image--rounded-full":`designbase-wc-image--rounded-${e}`:"":""}getShadowClass(){const e=this.getAttribute("shadow");return e?"true"===e||""===e?"designbase-wc-image--shadow":r.includes(e)?`designbase-wc-image--shadow-${e}`:"":""}getRatioClass(){const e=this.getAttribute("ratio")||"auto";return"auto"===e?"designbase-wc-image--ratio-auto":t.includes(e)?`designbase-wc-image--ratio-${e.replace(":","-")}`:"designbase-wc-image--ratio-auto"}applyContainerStyle(){const e=this.style,t=this.hasAttribute("full-width"),i=this.hasAttribute("full-height"),s=this.getAttribute("width"),a=this.getAttribute("height"),l=this.getAttribute("max-width"),r=this.getAttribute("max-height");e.width=t?"100%":s||"",e.height=i?"100%":a||"",e.maxWidth=l||"",e.maxHeight=r||""}ensureStructure(){if(!this.initialized){this.placeholderEl=document.createElement("div"),this.placeholderEl.className="designbase-wc-image__placeholder",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-image__error",this.errorEl.append(e("gallery",20));const t=document.createElement("span");t.className="designbase-wc-image__error-text",this.errorEl.append(t),this.imgEl=document.createElement("img"),this.imgEl.className="designbase-wc-image__img",this.imgEl.draggable=!1,this.imgEl.addEventListener("load",this.handleLoad),this.imgEl.addEventListener("error",this.handleError),this.append(this.placeholderEl,this.errorEl,this.imgEl),this.initialized=!0}this.updateImageSource(),this.updatePlaceholderContent(),this.updateErrorContent()}updateImageSource(){if(!this.imgEl)return;const e=this.getAttribute("alt")||"",t=this.getAttribute("loading")||"lazy",i=s.includes(t)?t:"lazy";this.imgEl.alt=e,this.imgEl.loading=i;const a=this.currentSrc;if(!a)return void this.imgEl.removeAttribute("src");const l=new URL(a,window.location.href).href;this.imgEl.src!==l?this.imgEl.src=a:this.imgEl.complete&&this.imgEl.naturalWidth>0&&"loading"===this.imageState&&this.handleLoad()}updatePlaceholderContent(){if(!this.placeholderEl)return;const e=this.getAttribute("placeholder")||"none",t=a.includes(e)?e:"none";if(this.placeholderEl.className=["designbase-wc-image__placeholder",`designbase-wc-image__placeholder--${t}`].join(" "),this.placeholderEl.replaceChildren(),"skeleton"===t){const e=document.createElement("div");e.className="designbase-wc-image__skeleton",this.placeholderEl.append(e)}if("blur"===t){const e=document.createElement("div");e.className="designbase-wc-image__blur",this.placeholderEl.append(e)}}updateErrorContent(){if(!this.errorEl)return;const e=this.errorEl.querySelector(".designbase-wc-image__error-text");e&&(e.textContent=this.getAttribute("alt")||"이미지를 불러올 수 없습니다")}syncVisualState(){const e=this.getAttribute("fit")||"cover",t=i.includes(e)?e:"cover",s=this.hasAttribute("clickable"),a=this.hasAttribute("hover");if(this.className=["designbase-wc-image",this.getRatioClass(),`designbase-wc-image--fit-${t}`,this.getRoundedClass(),this.getShadowClass(),a&&"designbase-wc-image--hover",this.hasAttribute("full-width")&&"designbase-wc-image--full-width",this.hasAttribute("full-height")&&"designbase-wc-image--full-height",s&&"designbase-wc-image--clickable","loading"===this.imageState&&"designbase-wc-image--loading","error"===this.imageState&&"designbase-wc-image--error"].filter(Boolean).join(" "),this.applyContainerStyle(),s?(this.setAttribute("role","button"),this.setAttribute("tabindex","0")):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.placeholderEl){const e=this.showPlaceholder&&"loading"===this.imageState;this.placeholderEl.classList.toggle("designbase-wc-image__placeholder--visible",e),this.placeholderEl.hidden=!e}if(this.errorEl){const e="error"===this.imageState;this.errorEl.hidden=!e}if(this.imgEl){const e=Boolean(this.currentSrc)&&"error"!==this.imageState;this.imgEl.hidden=!e,this.imgEl.classList.toggle("designbase-wc-image__img--loaded","loaded"===this.imageState),this.imgEl.classList.toggle("designbase-wc-image__img--error","error"===this.imageState)}}}customElements.get("db-image")||customElements.define("db-image",DbImage);export{DbImage};
+import { createDbIcon } from './db-icons.js';
+
+const RATIOS = ['1:1', '16:9', '4:3', '3:2', '3:4', '2:1', 'auto'];
+const FITS = ['cover', 'contain', 'fill', 'none', 'scale-down'];
+const LOADINGS = ['lazy', 'eager'];
+const PLACEHOLDERS = ['skeleton', 'blur', 'none'];
+const ROUNDED = ['s', 'm', 'l', 'full'];
+const SHADOWS = ['s', 'm', 'l'];
+class DbImage extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.imageState = 'loading';
+        this.currentSrc = '';
+        this.showPlaceholder = false;
+        this.imgEl = null;
+        this.placeholderEl = null;
+        this.errorEl = null;
+        this.initialized = false;
+        this.handleLoad = () => {
+            if (this.imageState === 'loaded')
+                return;
+            this.imageState = 'loaded';
+            this.showPlaceholder = false;
+            this.syncVisualState();
+            this.dispatchEvent(new CustomEvent('db-load', { bubbles: true, composed: true }));
+        };
+        this.handleError = () => {
+            const fallbackSrc = this.getAttribute('fallback-src') || '';
+            if (fallbackSrc && this.currentSrc !== fallbackSrc) {
+                this.currentSrc = fallbackSrc;
+                this.imageState = 'loading';
+                this.updateImageSource();
+                this.syncVisualState();
+                return;
+            }
+            this.imageState = 'error';
+            this.showPlaceholder = false;
+            this.syncVisualState();
+            this.dispatchEvent(new CustomEvent('db-error', { bubbles: true, composed: true }));
+        };
+        this.handleClick = () => {
+            if (!this.hasAttribute('clickable'))
+                return;
+            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
+        };
+        this.handleKeyDown = (e) => {
+            if (!this.hasAttribute('clickable'))
+                return;
+            if (e.key !== 'Enter' && e.key !== ' ')
+                return;
+            e.preventDefault();
+            this.handleClick();
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'src',
+            'alt',
+            'ratio',
+            'fit',
+            'loading',
+            'fallback-src',
+            'placeholder',
+            'rounded',
+            'width',
+            'height',
+            'max-width',
+            'max-height',
+            'full-width',
+            'full-height',
+            'shadow',
+            'hover',
+            'clickable',
+        ];
+    }
+    connectedCallback() {
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeyDown);
+        this.resetFromAttributes();
+        this.ensureStructure();
+        this.syncVisualState();
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleKeyDown);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue && name !== 'src') {
+            this.syncVisualState();
+            return;
+        }
+        if (name === 'src') {
+            const nextSrc = newValue || '';
+            if (nextSrc !== this.currentSrc) {
+                this.currentSrc = nextSrc;
+                this.imageState = 'loading';
+                const placeholder = this.getAttribute('placeholder') || 'none';
+                this.showPlaceholder = placeholder !== 'none';
+                this.updateImageSource();
+            }
+        }
+        if (name === 'placeholder') {
+            this.showPlaceholder = (newValue || 'none') !== 'none' && this.imageState === 'loading';
+        }
+        this.ensureStructure();
+        this.syncVisualState();
+    }
+    resetFromAttributes() {
+        this.currentSrc = this.getAttribute('src') || '';
+        const placeholder = this.getAttribute('placeholder') || 'none';
+        this.showPlaceholder = placeholder !== 'none';
+        this.imageState = 'loading';
+    }
+    getRoundedClass() {
+        const rounded = this.getAttribute('rounded');
+        if (!rounded)
+            return '';
+        if (rounded === 'true' || rounded === '')
+            return 'designbase-wc-image--rounded';
+        if (rounded === 's')
+            return 'designbase-wc-image--rounded-sm';
+        if (rounded === 'm')
+            return 'designbase-wc-image--rounded-md';
+        if (rounded === 'l')
+            return 'designbase-wc-image--rounded-lg';
+        if (ROUNDED.includes(rounded)) {
+            if (rounded === 'full')
+                return 'designbase-wc-image--rounded-full';
+            return `designbase-wc-image--rounded-${rounded}`;
+        }
+        return '';
+    }
+    getShadowClass() {
+        const shadow = this.getAttribute('shadow');
+        if (!shadow)
+            return '';
+        if (shadow === 'true' || shadow === '')
+            return 'designbase-wc-image--shadow';
+        if (SHADOWS.includes(shadow)) {
+            return `designbase-wc-image--shadow-${shadow}`;
+        }
+        return '';
+    }
+    getRatioClass() {
+        const ratio = this.getAttribute('ratio') || 'auto';
+        if (ratio === 'auto')
+            return 'designbase-wc-image--ratio-auto';
+        if (RATIOS.includes(ratio)) {
+            return `designbase-wc-image--ratio-${ratio.replace(':', '-')}`;
+        }
+        return 'designbase-wc-image--ratio-auto';
+    }
+    applyContainerStyle() {
+        const style = this.style;
+        const fullWidth = this.hasAttribute('full-width');
+        const fullHeight = this.hasAttribute('full-height');
+        const width = this.getAttribute('width');
+        const height = this.getAttribute('height');
+        const maxWidth = this.getAttribute('max-width');
+        const maxHeight = this.getAttribute('max-height');
+        style.width = fullWidth ? '100%' : width || '';
+        style.height = fullHeight ? '100%' : height || '';
+        style.maxWidth = maxWidth || '';
+        style.maxHeight = maxHeight || '';
+    }
+    ensureStructure() {
+        if (!this.initialized) {
+            this.placeholderEl = document.createElement('div');
+            this.placeholderEl.className = 'designbase-wc-image__placeholder';
+            this.errorEl = document.createElement('div');
+            this.errorEl.className = 'designbase-wc-image__error';
+            this.errorEl.append(createDbIcon('gallery', 20));
+            const errorText = document.createElement('span');
+            errorText.className = 'designbase-wc-image__error-text';
+            this.errorEl.append(errorText);
+            this.imgEl = document.createElement('img');
+            this.imgEl.className = 'designbase-wc-image__img';
+            this.imgEl.draggable = false;
+            this.imgEl.addEventListener('load', this.handleLoad);
+            this.imgEl.addEventListener('error', this.handleError);
+            this.append(this.placeholderEl, this.errorEl, this.imgEl);
+            this.initialized = true;
+        }
+        this.updateImageSource();
+        this.updatePlaceholderContent();
+        this.updateErrorContent();
+    }
+    updateImageSource() {
+        if (!this.imgEl)
+            return;
+        const alt = this.getAttribute('alt') || '';
+        const rawLoading = this.getAttribute('loading') || 'lazy';
+        const loading = LOADINGS.includes(rawLoading) ? rawLoading : 'lazy';
+        this.imgEl.alt = alt;
+        this.imgEl.loading = loading;
+        const resolvedSrc = this.currentSrc;
+        if (!resolvedSrc) {
+            this.imgEl.removeAttribute('src');
+            return;
+        }
+        const absoluteSrc = new URL(resolvedSrc, window.location.href).href;
+        if (this.imgEl.src !== absoluteSrc) {
+            this.imgEl.src = resolvedSrc;
+        }
+        else if (this.imgEl.complete && this.imgEl.naturalWidth > 0 && this.imageState === 'loading') {
+            this.handleLoad();
+        }
+    }
+    updatePlaceholderContent() {
+        if (!this.placeholderEl)
+            return;
+        const placeholder = this.getAttribute('placeholder') || 'none';
+        const placeholderMode = PLACEHOLDERS.includes(placeholder)
+            ? placeholder
+            : 'none';
+        this.placeholderEl.className = [
+            'designbase-wc-image__placeholder',
+            `designbase-wc-image__placeholder--${placeholderMode}`,
+        ].join(' ');
+        this.placeholderEl.replaceChildren();
+        if (placeholderMode === 'skeleton') {
+            const skeleton = document.createElement('div');
+            skeleton.className = 'designbase-wc-image__skeleton';
+            this.placeholderEl.append(skeleton);
+        }
+        if (placeholderMode === 'blur') {
+            const blur = document.createElement('div');
+            blur.className = 'designbase-wc-image__blur';
+            this.placeholderEl.append(blur);
+        }
+    }
+    updateErrorContent() {
+        if (!this.errorEl)
+            return;
+        const errorText = this.errorEl.querySelector('.designbase-wc-image__error-text');
+        if (errorText) {
+            errorText.textContent = this.getAttribute('alt') || '이미지를 불러올 수 없습니다';
+        }
+    }
+    syncVisualState() {
+        const rawFit = this.getAttribute('fit') || 'cover';
+        const fit = FITS.includes(rawFit) ? rawFit : 'cover';
+        const clickable = this.hasAttribute('clickable');
+        const hover = this.hasAttribute('hover');
+        this.className = [
+            'designbase-wc-image',
+            this.getRatioClass(),
+            `designbase-wc-image--fit-${fit}`,
+            this.getRoundedClass(),
+            this.getShadowClass(),
+            hover && 'designbase-wc-image--hover',
+            this.hasAttribute('full-width') && 'designbase-wc-image--full-width',
+            this.hasAttribute('full-height') && 'designbase-wc-image--full-height',
+            clickable && 'designbase-wc-image--clickable',
+            this.imageState === 'loading' && 'designbase-wc-image--loading',
+            this.imageState === 'error' && 'designbase-wc-image--error',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.applyContainerStyle();
+        if (clickable) {
+            this.setAttribute('role', 'button');
+            this.setAttribute('tabindex', '0');
+        }
+        else {
+            this.removeAttribute('role');
+            this.removeAttribute('tabindex');
+        }
+        if (this.placeholderEl) {
+            const visible = this.showPlaceholder && this.imageState === 'loading';
+            this.placeholderEl.classList.toggle('designbase-wc-image__placeholder--visible', visible);
+            this.placeholderEl.hidden = !visible;
+        }
+        if (this.errorEl) {
+            const visible = this.imageState === 'error';
+            this.errorEl.hidden = !visible;
+        }
+        if (this.imgEl) {
+            const visible = Boolean(this.currentSrc) && this.imageState !== 'error';
+            this.imgEl.hidden = !visible;
+            this.imgEl.classList.toggle('designbase-wc-image__img--loaded', this.imageState === 'loaded');
+            this.imgEl.classList.toggle('designbase-wc-image__img--error', this.imageState === 'error');
+        }
+    }
+}
+if (!customElements.get('db-image'))
+    customElements.define('db-image', DbImage);
+
+export { DbImage };