@sellmate/design-system 0.0.30 → 0.0.31

package/hydrate/index.mjs

@@ -5438,6 +5438,59 @@ class SdPortal {
     }; }
 }
 
+const sdProgressCss = "sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:4px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
+
+class SdProgress {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    type = 'bar';
+    status = 'default';
+    percentage = 0;
+    size = 80;
+    strokeWidth = 12;
+    label;
+    statusColor = {
+        default: '#aaaaaa',
+        progress: '#0075ff',
+        complete: '#12B553',
+        error: '#FB4444',
+    };
+    render() {
+        return (hAsync(Host, { key: '2e2f7cf77bbc63dfb15910a3bc50ac45601020cd', style: {
+                '--progress-color': this.statusColor[this.status],
+                '--progress-percentage': `${this.percentage}%`,
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '3e72a490e148886c59345e5ac3161f760e0f4e85', class: "sd-progress__label" }, this.label)));
+    }
+    renderBarProgress() {
+        return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
+    }
+    renderSpinnerProgress() {
+        const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
+        const circumference = 2 * Math.PI * radius; // 원의 둘레
+        const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset
+        const progressBgSize = `${this.size}px`;
+        const progressSize = `${this.size / 2}px`;
+        return (hAsync("div", { class: `sd-progress__spinner sd-progress__spinner--${this.status}` }, hAsync("svg", { width: progressBgSize, height: progressBgSize }, hAsync("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), hAsync("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.statusColor[this.status], "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), hAsync("strong", { class: "sd-progress__spinner__label" }, this.percentage, " %")));
+    }
+    static get style() { return sdProgressCss; }
+    static get cmpMeta() { return {
+        "$flags$": 768,
+        "$tagName$": "sd-progress",
+        "$members$": {
+            "type": [1],
+            "status": [1],
+            "percentage": [2],
+            "size": [2],
+            "strokeWidth": [2, "stroke-width"],
+            "label": [1]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 class DropdownManager {
     static instance;
     activeDropdowns = new Set();
@@ -6035,11 +6088,11 @@ class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '8f2df6c0a3b6e8d2300a77bd84b993101824cae1', style: style }, hAsync("div", { key: '9587ca5bb88d7767b5f48344063deef220964027', class: {
+        return (hAsync(Host, { key: 'c569bb885003048b6ec22bfb0688c671a70a27d5', style: style }, hAsync("div", { key: '94b43199502f44f7d663981c320696c6e8cf968f', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'f00fa7d7c2cbc6f751cc89411b1d77037a950e3e', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'd4fd6929b78add118c01d7b52c1c1e0be9867924', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -6540,7 +6593,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync(Host, { key: 'f627f75ea5e3765390729eac31e02e78ca084e95' }, hAsync("div", { key: 'ce5f8aa53fb8ae3a3b165c5778aa352a99d0ddf8', class: {
+        return (hAsync(Host, { key: '57acf795fbb642249d9716fc8fa4123f2d939d2b' }, hAsync("div", { key: '6653deafa3142a3bf9b67290dae411c29fc38f41', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -6626,7 +6679,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: '6365bd1ae57487d7bbccf25637770aedecc2bc6c', class: {
+        return (hAsync("div", { key: 'ab10e48405e8457f1319518f9790c5dd94d1b5e6', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -6635,10 +6688,10 @@ class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'b48606dad43a722f434df8b384e3c92332d59f94', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '2c564c5480482ade27ebb0cb066cc3c971d1f8f2', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'e9b0636bc98818aa48b5d486c3e5b4c216b76046', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'b7495da88ddad187588569c64235ccc1697466fe', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: '2175b4ec10bf631a419f5cfa439e0c24f6ccf5a7', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'bbb57f2a8c00e2bb56a4f6a5b68cb5d09d81d9c7', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: 'f8a51d2ea1a99ae17a1ba79fb6f802f0c2a27be1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'ee29e4503321462981c6d6fe497d70f271e5f814', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss; }
     static get cmpMeta() { return {
@@ -7068,20 +7121,20 @@ class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (hAsync(Fragment, { key: '2a4473864df0253d22d03a7b1512d6261d2c5f1e' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: '48ba8d56f7ee68ac71bd7076c98f8e7081635de5', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: 'edb64ac6facd530f02a3c663a4d7e728270bb914', class: {
+        return (hAsync(Fragment, { key: '45dbef1d93b082f8fe42c003f997aa80ad297ee5' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: '7357fe6678832a74c567b24e404d14d75a77b13f', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: '3add41a611cb55fddaae7733b6db9ec996561723', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, hAsync("i", { key: '2907f18d268eed0d0e70707b1fb113ca1b6ce1a6', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'fd6417e7cad6464f5830accca7842f9c2d5431ca', class: {
+            } }, hAsync("i", { key: 'f62cfc386831412cb958da88a41e0487be40d119', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'daab1b1028832d95fb05456b96981cdeb1e31c4e', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), hAsync("div", { key: '30e7d57e6bdd47ca5da01c8e94e6d29cc174de58', class: "sd-tooltip-menu__content", ref: el => {
+            } })), hAsync("div", { key: 'ab7ca38aa68cf8279ff0d372651a4e26b217781c', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && hAsync("span", { key: '9e6afb40c06db772ed94fd90c73713a1134e2866' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '8679d07e7d2e027f4a96ebaecd64b1fac9ecf503', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: 'aa018b14eeeb08f872af25d93c0bd36708bf36e8', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '0a0d3c6c246adccdb9b31502f13a1189a0a94554', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && hAsync("span", { key: 'f5768e8b7e3033f64797aba77a504d57236e51e3' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '94bdf692fabf190912a64d6051957031b2964ae5', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '8826745fb1dab139358bc0d430d622abca333e5e', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '863f114251ec302425224a7385dd23292f7f6340', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get style() { return sdTooltipCss; }
     static get cmpMeta() { return {
@@ -7256,7 +7309,7 @@ class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: '094d59498ba589963103957db54a7eae9e9771c4' });
+        return hAsync("slot", { key: '96e22fb7cd79afbef7bcb1a9b055e6a2bf54dd76' });
     }
     static get cmpMeta() { return {
         "$flags$": 777,
@@ -7290,6 +7343,7 @@ registerComponents([
   SdPagination,
   SdPopover,
   SdPortal,
+  SdProgress,
   SdSelect,
   SdSelectMultiple,
   SdSelectMultipleGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "0.0.30",
+ "version": "0.0.31",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",
@@ -90,5 +90,5 @@
   "@stencil/react-output-target": "^1.2.0",
   "@stencil/vue-output-target": "^0.11.8"
  },
- "gitHead": "1ab846f36402540f9dd1e3da7a308033ca226680"
+ "gitHead": "41f495e4833d6f6ab1be62f7f88272c24a60037e"
 }