@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,96 +1 @@
-class DbImagePlaceholder extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        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 [
-            'label',
-            'show-label',
-            'pattern-size',
-            'pattern-color',
-            'background-color',
-            'width',
-            'height',
-            'aspect-ratio',
-            'hover-effect',
-            'clickable',
-        ];
-    }
-    connectedCallback() {
-        this.addEventListener('click', this.handleClick);
-        this.addEventListener('keydown', this.handleKeyDown);
-        this.render();
-    }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.handleClick);
-        this.removeEventListener('keydown', this.handleKeyDown);
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    render() {
-        const label = this.getAttribute('label') || '';
-        const showLabel = this.hasAttribute('show-label');
-        const patternSize = Number(this.getAttribute('pattern-size') || 20);
-        const patternColor = this.getAttribute('pattern-color') || '#f3f3f3';
-        const backgroundColor = this.getAttribute('background-color') || '#e7e7e7';
-        const width = this.getAttribute('width') || '100%';
-        const height = this.getAttribute('height') || '';
-        const aspectRatio = this.getAttribute('aspect-ratio') || '';
-        const hoverEffect = this.hasAttribute('hover-effect');
-        const clickable = this.hasAttribute('clickable');
-        this.className = [
-            'designbase-wc-image-placeholder',
-            hoverEffect && 'designbase-wc-image-placeholder--hover',
-            clickable && 'designbase-wc-image-placeholder--clickable',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.style.width = width;
-        this.style.height = height;
-        this.style.aspectRatio = aspectRatio;
-        if (clickable) {
-            this.setAttribute('role', 'button');
-            this.setAttribute('tabindex', '0');
-        }
-        else {
-            this.removeAttribute('role');
-            this.removeAttribute('tabindex');
-        }
-        this.replaceChildren();
-        const pattern = document.createElement('div');
-        pattern.className = 'designbase-wc-image-placeholder__pattern';
-        pattern.style.setProperty('--db-placeholder-bg', backgroundColor);
-        pattern.style.setProperty('--db-placeholder-pattern', patternColor);
-        pattern.style.setProperty('--db-placeholder-size', `${patternSize}px`);
-        pattern.style.setProperty('--db-placeholder-half-size', `${patternSize / 2}px`);
-        this.append(pattern);
-        if (showLabel && label) {
-            const labelWrap = document.createElement('div');
-            labelWrap.className = 'designbase-wc-image-placeholder__label-wrap';
-            const labelEl = document.createElement('span');
-            labelEl.className = 'designbase-wc-image-placeholder__label';
-            labelEl.textContent = label;
-            labelWrap.append(labelEl);
-            this.append(labelWrap);
-        }
-    }
-}
-if (!customElements.get('db-image-placeholder')) {
-    customElements.define('db-image-placeholder', DbImagePlaceholder);
-}
-
-export { DbImagePlaceholder };
+class DbImagePlaceholder extends HTMLElement{constructor(){super(...arguments),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["label","show-label","pattern-size","pattern-color","background-color","width","height","aspect-ratio","hover-effect","clickable"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.render()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("label")||"",t=this.hasAttribute("show-label"),i=Number(this.getAttribute("pattern-size")||20),s=this.getAttribute("pattern-color")||"#f3f3f3",a=this.getAttribute("background-color")||"#e7e7e7",l=this.getAttribute("width")||"100%",r=this.getAttribute("height")||"",c=this.getAttribute("aspect-ratio")||"",h=this.hasAttribute("hover-effect"),n=this.hasAttribute("clickable");this.className=["designbase-wc-image-placeholder",h&&"designbase-wc-image-placeholder--hover",n&&"designbase-wc-image-placeholder--clickable"].filter(Boolean).join(" "),this.style.width=l,this.style.height=r,this.style.aspectRatio=c,n?(this.setAttribute("role","button"),this.setAttribute("tabindex","0")):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.replaceChildren();const o=document.createElement("div");if(o.className="designbase-wc-image-placeholder__pattern",o.style.setProperty("--db-placeholder-bg",a),o.style.setProperty("--db-placeholder-pattern",s),o.style.setProperty("--db-placeholder-size",`${i}px`),o.style.setProperty("--db-placeholder-half-size",i/2+"px"),this.append(o),t&&e){const t=document.createElement("div");t.className="designbase-wc-image-placeholder__label-wrap";const i=document.createElement("span");i.className="designbase-wc-image-placeholder__label",i.textContent=e,t.append(i),this.append(t)}}}customElements.get("db-image-placeholder")||customElements.define("db-image-placeholder",DbImagePlaceholder);export{DbImagePlaceholder};

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

@@ -1,289 +1 @@
-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 };
+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};