@sellmate/design-system 1.12.0 → 1.13.0

package/hydrate/index.mjs

@@ -17887,9 +17887,20 @@ class SdTooltip {
     type = 'button';
     useClose = false;
     sdClass = '';
+    /**
+     * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
+     * (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
+     */
+    message = [];
+    /** anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
+    triggerClass = '';
+    /** anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`) */
+    triggerStyle = '';
     showTooltip = false;
     slotContentHTML = '';
     buttonEl;
+    triggerEl;
+    isAnchorMode = false;
     menuEl;
     hideTimeout;
     closeTimeout;
@@ -17944,10 +17955,22 @@ class SdTooltip {
         this.closeTooltip();
     }
     componentWillLoad() {
-        this.slotContentHTML = this.el.innerHTML;
-        this.el.replaceChildren();
+        // slot="anchor" 자식이 있으면 anchor 모드(다른 컴포넌트를 트리거로 사용)
+        this.isAnchorMode = Array.from(this.el.children).some(child => child.getAttribute('slot') === 'anchor');
+        if (!this.isAnchorMode) {
+            // 레거시 모드: 슬롯 내용을 본문으로 캡처하고 자식을 비웁니다.
+            this.slotContentHTML = this.el.innerHTML;
+            this.el.replaceChildren();
+        }
+        // anchor 모드: 자식(slot="anchor")은 그대로 두어 Stencil 슬롯으로 투영합니다.
         this.el.classList.toggle('visible', true);
     }
+    componentDidRender() {
+        // CSS 문자열 스타일은 ref로 직접 적용 (속성/프로퍼티 전달 모두 호환)
+        if (this.triggerEl && this.triggerStyle !== '') {
+            this.triggerEl.setAttribute('style', this.triggerStyle);
+        }
+    }
     render() {
         const trigger = this.trigger ?? 'hover';
         const placement = this.placement ?? 'top';
@@ -17961,9 +17984,21 @@ class SdTooltip {
         };
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const hasLabel = this.label !== undefined && this.label !== '';
-        const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
-        const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
-        return (hAsync(Fragment, { key: '11fbd6ec652363cb49d96f0764361ae3751fc774' }, hAsync("div", { key: 'a7ea602929a7f7cef6b589767b59a389ca6e33c4', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '1123c5ace6539b8f9b92279e2b9d7db74f690755', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '0545b2a282eba7585045a1730c51e66cc5546535', ref: el => (this.menuEl = el), class: {
+        const anchorMode = this.isAnchorMode;
+        const divTrigger = trigger === 'hover'
+            ? hoverTrigger
+            : anchorMode || !hasLabel
+                ? { onClick: toggleTooltip }
+                : {};
+        const buttonClickTrigger = trigger === 'click' && !anchorMode && hasLabel ? { onSdClick: toggleTooltip } : {};
+        const triggerClasses = ['sd-tooltip-trigger', this.sdClass, this.triggerClass]
+            .filter(c => c !== undefined && c !== '')
+            .join(' ');
+        // anchor 모드에서는 slot 을 트리거로 쓰므로 본문은 message 로 받습니다.
+        const bodyHTML = this.message && this.message.length > 0
+            ? this.message.map(line => `<div>${line}</div>`).join('')
+            : this.slotContentHTML;
+        return (hAsync(Fragment, { key: 'be1e7f58505f3689f236559792357ce882f9a5d1' }, hAsync("div", { key: 'c289652eba29ed9526db76794180b192057973d2', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (hAsync("slot", { name: "anchor" })) : hasLabel ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (hAsync("sd-floating-portal", { key: '138bfd2f0c75e7602b3176d1fd1dd2f9da0b624f', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, hAsync("div", { key: '65c82fcb90080898783119232016e6c079d4b183', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -17971,11 +18006,11 @@ class SdTooltip {
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: 'd183dd7bb30444931296342dc0fcf8d5486a3f22', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '69349fa0bc7184112b572153fe9a53a391923869' })), hAsync("div", { key: '5363fbd0178fc893e7c1b194687ce8bada2fdd5a', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }), this.useClose && (hAsync("sd-ghost-button", { key: 'd11ec43d5947bfbfe93961f9b72b15e8b3191e7c', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: this.handleClose })))))));
+            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => this.startHideTimer() }, hAsync("i", { key: '81e2e2cd64f6c656ea307176c58b93a3b886e79d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, hAsync(TooltipArrow, { key: '7ced7bc259479dda4bddf22120cb6c22d61aaf3b' })), hAsync("div", { key: '62b4ed5852825ba3de9095cd1b81423f44a768fb', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (hAsync("sd-ghost-button", { key: 'e0834930b12d7a1e3ff2151d733a84765ecd0535', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: this.handleClose })))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {
-        "$flags$": 512,
+        "$flags$": 772,
         "$tagName$": "sd-tooltip",
         "$members$": {
             "trigger": [1],
@@ -17992,6 +18027,9 @@ class SdTooltip {
             "type": [1],
             "useClose": [4, "use-close"],
             "sdClass": [1, "sd-class"],
+            "message": [16],
+            "triggerClass": [1, "trigger-class"],
+            "triggerStyle": [1, "trigger-style"],
             "showTooltip": [32],
             "slotContentHTML": [32],
             "show": [64],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellmate/design-system",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "Sellmate Design System - Web Components Library built with Stencil",
   "keywords": [
     "web-components",

package/dist/components/p-BMkeoWD7.js

@@ -1 +0,0 @@
-import{p as t,H as s,h as e,F as i,t as o}from"./p-BFjxNqDj.js";import{T as n}from"./p-D9fTZjTl.js";import{d as a}from"./p-BklUnzX5.js";import{d as l}from"./p-DK5GPWo_.js";import{d as c}from"./p-CuuPUA52.js";import{d as r}from"./p-BoXTUvyq.js";import{d}from"./p-CMVIH_LA.js";var h={bg:"#07284A",content:"#FFFFFF"},m={bg:"#FCEFEF",content:"#FB4444"},p={bg:"#FEF1EA",content:"#FF6B00"},b={bg:"#E6F1FF",content:"#0075FF"};const u={default:{bg:h.bg,content:h.content},danger:{bg:m.bg,content:m.content},warning:{bg:p.bg,content:p.content},accent:{bg:b.bg,content:b.content}},f=t(class t extends s{constructor(t){super(),!1!==t&&this.__registerHost()}get el(){return this}trigger="hover";placement="top";color="#01BB4B";tooltipType="default";icon="helpOutline";iconSize=12;label="";name="primary_sm";rightIcon;ariaLabel="";disabled=!1;type="button";useClose=!1;sdClass="";showTooltip=!1;slotContentHTML="";buttonEl;menuEl;hideTimeout;closeTimeout;static CLOSE_ANIM_MS=150;openTooltip=()=>{this.cancelHideTimer(),this.showTooltip=!0,this.menuEl&&this.menuEl.classList.remove("sd-floating-menu--closing")};closeTooltip=()=>{this.menuEl&&this.menuEl.classList.add("sd-floating-menu--closing"),this.closeTimeout=setTimeout((()=>{this.showTooltip=!1}),t.CLOSE_ANIM_MS)};startHideTimer=()=>{this.hideTimeout=setTimeout((()=>this.closeTooltip()),100)};cancelHideTimer=()=>{this.hideTimeout&&(clearTimeout(this.hideTimeout),this.hideTimeout=void 0),this.closeTimeout&&(clearTimeout(this.closeTimeout),this.closeTimeout=void 0)};get tooltipOffset(){switch(this.placement??"top"){case"top":return[0,-4];case"bottom":return[0,4];case"left":case"right":return[4,0]}}handleClose=()=>this.closeTooltip();async show(){this.openTooltip()}async hide(){this.closeTooltip()}componentWillLoad(){this.slotContentHTML=this.el.innerHTML,this.el.replaceChildren(),this.el.classList.toggle("visible",!0)}render(){const t=this.trigger??"hover",s=this.placement??"top",o=this.tooltipType??"default",a=this.icon??"helpOutline",l=this.color??"#01BB4B",c=u[o]??u.default,r=()=>this.showTooltip=!this.showTooltip,d=void 0!==this.label&&""!==this.label;return e(i,{key:"11fbd6ec652363cb49d96f0764361ae3751fc774"},e("div",{key:"a7ea602929a7f7cef6b589767b59a389ca6e33c4",class:`sd-tooltip-trigger ${void 0!==this.sdClass&&""!==this.sdClass?this.sdClass:""}`,..."hover"===t?{onMouseEnter:()=>this.openTooltip(),onMouseLeave:()=>this.startHideTimer()}:d?{}:{onClick:r}},d?e("sd-button",{ref:t=>this.buttonEl=t,name:this.name??"primary_sm",label:this.label,icon:a,rightIcon:this.rightIcon,ariaLabel:this.ariaLabel,disabled:this.disabled,type:this.type??"button",class:"sd-tooltip",..."click"===t&&d?{onSdClick:r}:{}}):e("sd-icon",{ref:t=>this.buttonEl=t,name:a,size:this.iconSize??12,color:l,class:"sd-tooltip"})),this.showTooltip&&e("sd-floating-portal",{key:"1123c5ace6539b8f9b92279e2b9d7db74f690755",parentRef:this.buttonEl,onSdClose:this.handleClose,placement:s,offset:this.tooltipOffset},e("div",{key:"0545b2a282eba7585045a1730c51e66cc5546535",ref:t=>this.menuEl=t,class:{"sd-floating-menu":!0,[`sd-floating-menu--${o}`]:!0,[`sd-floating-menu--${s}`]:!0,"sd-floating-menu--has-close":this.useClose},style:{"--sd-floating-bg":c.bg,"--sd-floating-content":c.content},onMouseEnter:()=>this.openTooltip(),onMouseLeave:()=>this.startHideTimer()},e("i",{key:"d183dd7bb30444931296342dc0fcf8d5486a3f22",class:`sd-floating-menu__arrow sd-floating-menu__arrow--${s}`},e(n,{key:"69349fa0bc7184112b572153fe9a53a391923869"})),e("div",{key:"5363fbd0178fc893e7c1b194687ce8bada2fdd5a",class:"sd-floating-menu__content",innerHTML:this.slotContentHTML}),this.useClose&&e("sd-ghost-button",{key:"d11ec43d5947bfbfe93961f9b72b15e8b3191e7c",class:"sd-floating-menu__close-button",icon:"close",ariaLabel:"close",size:"xxs",onClick:this.handleClose}))))}static get style(){return"sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip-trigger{display:inline-flex;position:relative;cursor:pointer;align-items:center;justify-content:center}"}},[512,"sd-tooltip",{trigger:[1],placement:[1],color:[1],tooltipType:[1,"tooltip-type"],icon:[1],iconSize:[2,"icon-size"],label:[1],name:[1],rightIcon:[1,"right-icon"],ariaLabel:[1,"aria-label"],disabled:[4],type:[1],useClose:[4,"use-close"],sdClass:[1,"sd-class"],showTooltip:[32],slotContentHTML:[32],show:[64],hide:[64]}]);function g(){"undefined"!=typeof customElements&&["sd-tooltip","sd-button","sd-floating-portal","sd-ghost-button","sd-icon","sd-tag"].forEach((t=>{switch(t){case"sd-tooltip":customElements.get(o(t))||customElements.define(o(t),f);break;case"sd-button":customElements.get(o(t))||a();break;case"sd-floating-portal":customElements.get(o(t))||l();break;case"sd-ghost-button":customElements.get(o(t))||c();break;case"sd-icon":customElements.get(o(t))||r();break;case"sd-tag":customElements.get(o(t))||d()}}))}export{f as S,g as d}