@sellmate/design-system 0.0.11 → 0.0.13

package/dist/types/components.d.ts

@@ -9,16 +9,20 @@ import { ButtonSize, ButtonVariant } from "./components/sd-button/sd-button";
 import { Type } from "./components/sd-date-box/sd-date-box";
 import { Event } from "./stencil-public-runtime";
 import { ButtonSize as ButtonSize1, ButtonVariant as ButtonVariant1 } from "./components/sd-button/sd-button";
-import { SelectEvents, SelectOption, SelectStyleProps } from "./components/sd-select/sd-select";
-import { SelectOption as SelectOption1 } from "./types/select";
+import { SelectEvents, SelectOption } from "./components/sd-select/sd-select";
+import { SelectMultipleEvents, SelectOption as SelectOption1 } from "./types/select";
+import { SelectOptionGroup } from "./components/sd-select-multiple-group/sd-select-multiple-group";
+import { SelectMultipleEvents as SelectMultipleEvents1, SelectOption as SelectOption2, SelectOptionGroup as SelectOptionGroup1, SelectStyleProps } from "./components/sd-select/sd-select";
 import { Row, SdTableColumn } from "./components/sd-table/sd-table";
 import { TagColor, TagSize } from "./components/sd-tag/sd-tag";
 export { ButtonSize, ButtonVariant } from "./components/sd-button/sd-button";
 export { Type } from "./components/sd-date-box/sd-date-box";
 export { Event } from "./stencil-public-runtime";
 export { ButtonSize as ButtonSize1, ButtonVariant as ButtonVariant1 } from "./components/sd-button/sd-button";
-export { SelectEvents, SelectOption, SelectStyleProps } from "./components/sd-select/sd-select";
-export { SelectOption as SelectOption1 } from "./types/select";
+export { SelectEvents, SelectOption } from "./components/sd-select/sd-select";
+export { SelectMultipleEvents, SelectOption as SelectOption1 } from "./types/select";
+export { SelectOptionGroup } from "./components/sd-select-multiple-group/sd-select-multiple-group";
+export { SelectMultipleEvents as SelectMultipleEvents1, SelectOption as SelectOption2, SelectOptionGroup as SelectOptionGroup1, SelectStyleProps } from "./components/sd-select/sd-select";
 export { Row, SdTableColumn } from "./components/sd-table/sd-table";
 export { TagColor, TagSize } from "./components/sd-tag/sd-tag";
 export namespace Components {
@@ -345,6 +349,96 @@ export namespace Components {
         "zIndex": number;
     }
     interface SdSelect {
+        /**
+          * @default false
+         */
+        "clearable": boolean;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * @default '260px'
+         */
+        "dropdownHeight": string;
+        /**
+          * @default ''
+         */
+        "label": string;
+        /**
+          * @default '옵션이 없습니다.'
+         */
+        "optionPlaceholder": string;
+        "optionRenderer"?: (option: SelectOption, index: number, isSelected: boolean) => any;
+        /**
+          * @default []
+         */
+        "options": SelectOption[];
+        /**
+          * @default '선택'
+         */
+        "placeholder": string;
+        /**
+          * @default false
+         */
+        "searchable": boolean;
+        /**
+          * @default null
+         */
+        "value": string | number | null;
+        /**
+          * @default '200px'
+         */
+        "width": string;
+    }
+    interface SdSelectMultiple {
+        /**
+          * @default false
+         */
+        "clearable": boolean;
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * @default '260px'
+         */
+        "dropdownHeight": string;
+        /**
+          * @default ''
+         */
+        "label": string;
+        /**
+          * @default '옵션이 없습니다.'
+         */
+        "optionPlaceholder": string;
+        "optionRenderer"?: (option: SelectOption1, index: number, isSelected: boolean) => any;
+        /**
+          * @default []
+         */
+        "options": SelectOption1[];
+        /**
+          * @default '선택'
+         */
+        "placeholder": string;
+        /**
+          * @default false
+         */
+        "searchable": boolean;
+        /**
+          * @default false
+         */
+        "useCheckbox": boolean;
+        /**
+          * @default null
+         */
+        "value": SelectOption1[] | null;
+        /**
+          * @default '200px'
+         */
+        "width": string;
+    }
+    interface SdSelectMultipleGroup {
         /**
           * @default false
          */
@@ -377,7 +471,7 @@ export namespace Components {
           * @default '옵션이 없습니다.'
          */
         "optionPlaceholder": string;
-        "optionRenderer"?: (option: SelectOption, index: number, isSelected: boolean) => any;
+        "optionRenderer"?: (option: SelectOption2, index: number, isSelected: boolean) => any;
         /**
           * @default {}
          */
@@ -385,7 +479,7 @@ export namespace Components {
         /**
           * @default []
          */
-        "options": SelectOption[];
+        "options": SelectOptionGroup[];
         /**
           * @default '선택'
          */
@@ -398,10 +492,14 @@ export namespace Components {
           * @default {}
          */
         "triggerStyle": SelectStyleProps['triggerStyle'];
+        /**
+          * @default false
+         */
+        "useCheckbox": boolean;
         /**
           * @default null
          */
-        "value": string | number | null;
+        "value": SelectOptionGroup[] | null;
         /**
           * @default '200px'
          */
@@ -429,6 +527,28 @@ export namespace Components {
          */
         "useCheckbox": boolean;
     }
+    interface SdSelectOptionGroup {
+        /**
+          * @default false
+         */
+        "disabled": boolean;
+        "index": number;
+        "isDisabled": () => Promise<boolean>;
+        /**
+          * @default false
+         */
+        "isFocused": boolean;
+        /**
+          * @default false
+         */
+        "isSelected": boolean | null;
+        "option": SelectOptionGroup1;
+        "optionStyle"?: { [key: string]: string };
+        /**
+          * @default false
+         */
+        "useCheckbox": boolean;
+    }
     interface SdTable {
         "bodyCellRenderer"?: (
   column: SdTableColumn,
@@ -438,7 +558,7 @@ export namespace Components {
           * @default []
          */
         "columns": SdTableColumn[];
-        "height"?: number;
+        "height"?: string;
         /**
           * @default '데이터가 없습니다.'
          */
@@ -476,6 +596,7 @@ export namespace Components {
           * @default false
          */
         "stickyHeader": boolean;
+        "width"?: string;
     }
     interface SdTag {
         "bgColor"?: string;
@@ -602,10 +723,22 @@ export interface SdSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdSelectElement;
 }
+export interface SdSelectMultipleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdSelectMultipleElement;
+}
+export interface SdSelectMultipleGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdSelectMultipleGroupElement;
+}
 export interface SdSelectOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdSelectOptionElement;
 }
+export interface SdSelectOptionGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSdSelectOptionGroupElement;
+}
 export interface SdTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSdTableElement;
@@ -798,6 +931,42 @@ declare global {
         prototype: HTMLSdSelectElement;
         new (): HTMLSdSelectElement;
     };
+    interface HTMLSdSelectMultipleElementEventMap {
+        "sdChange": SelectMultipleEvents['sdChange'];
+        "dropDownShow": SelectMultipleEvents['dropDownShow'];
+    }
+    interface HTMLSdSelectMultipleElement extends Components.SdSelectMultiple, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdSelectMultipleElementEventMap>(type: K, listener: (this: HTMLSdSelectMultipleElement, ev: SdSelectMultipleCustomEvent<HTMLSdSelectMultipleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdSelectMultipleElementEventMap>(type: K, listener: (this: HTMLSdSelectMultipleElement, ev: SdSelectMultipleCustomEvent<HTMLSdSelectMultipleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdSelectMultipleElement: {
+        prototype: HTMLSdSelectMultipleElement;
+        new (): HTMLSdSelectMultipleElement;
+    };
+    interface HTMLSdSelectMultipleGroupElementEventMap {
+        "sdChange": SelectMultipleEvents1['sdChange'];
+        "dropDownShow": SelectMultipleEvents1['dropDownShow'];
+    }
+    interface HTMLSdSelectMultipleGroupElement extends Components.SdSelectMultipleGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdSelectMultipleGroupElementEventMap>(type: K, listener: (this: HTMLSdSelectMultipleGroupElement, ev: SdSelectMultipleGroupCustomEvent<HTMLSdSelectMultipleGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdSelectMultipleGroupElementEventMap>(type: K, listener: (this: HTMLSdSelectMultipleGroupElement, ev: SdSelectMultipleGroupCustomEvent<HTMLSdSelectMultipleGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdSelectMultipleGroupElement: {
+        prototype: HTMLSdSelectMultipleGroupElement;
+        new (): HTMLSdSelectMultipleGroupElement;
+    };
     interface HTMLSdSelectOptionElementEventMap {
         "optionClick": {
   option: SelectOption1;
@@ -819,6 +988,28 @@ declare global {
         prototype: HTMLSdSelectOptionElement;
         new (): HTMLSdSelectOptionElement;
     };
+    interface HTMLSdSelectOptionGroupElementEventMap {
+        "optionClick": {
+  option: SelectOptionGroup1;
+  isSelected: boolean | null;
+  index: number;
+  event: MouseEvent;
+ };
+    }
+    interface HTMLSdSelectOptionGroupElement extends Components.SdSelectOptionGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSdSelectOptionGroupElementEventMap>(type: K, listener: (this: HTMLSdSelectOptionGroupElement, ev: SdSelectOptionGroupCustomEvent<HTMLSdSelectOptionGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSdSelectOptionGroupElementEventMap>(type: K, listener: (this: HTMLSdSelectOptionGroupElement, ev: SdSelectOptionGroupCustomEvent<HTMLSdSelectOptionGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSdSelectOptionGroupElement: {
+        prototype: HTMLSdSelectOptionGroupElement;
+        new (): HTMLSdSelectOptionGroupElement;
+    };
     interface HTMLSdTableElementEventMap {
         "sdSelectChange": Row[];
         "sdPageChange": number;
@@ -880,7 +1071,10 @@ declare global {
         "sd-popover": HTMLSdPopoverElement;
         "sd-portal": HTMLSdPortalElement;
         "sd-select": HTMLSdSelectElement;
+        "sd-select-multiple": HTMLSdSelectMultipleElement;
+        "sd-select-multiple-group": HTMLSdSelectMultipleGroupElement;
         "sd-select-option": HTMLSdSelectOptionElement;
+        "sd-select-option-group": HTMLSdSelectOptionGroupElement;
         "sd-table": HTMLSdTableElement;
         "sd-tag": HTMLSdTagElement;
         "sd-tooltip": HTMLSdTooltipElement;
@@ -1226,6 +1420,100 @@ declare namespace LocalJSX {
         "zIndex"?: number;
     }
     interface SdSelect {
+        /**
+          * @default false
+         */
+        "clearable"?: boolean;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * @default '260px'
+         */
+        "dropdownHeight"?: string;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        "onDropDownShow"?: (event: SdSelectCustomEvent<SelectEvents['dropDownShow']>) => void;
+        "onSdChange"?: (event: SdSelectCustomEvent<SelectEvents['sdChange']>) => void;
+        /**
+          * @default '옵션이 없습니다.'
+         */
+        "optionPlaceholder"?: string;
+        "optionRenderer"?: (option: SelectOption, index: number, isSelected: boolean) => any;
+        /**
+          * @default []
+         */
+        "options"?: SelectOption[];
+        /**
+          * @default '선택'
+         */
+        "placeholder"?: string;
+        /**
+          * @default false
+         */
+        "searchable"?: boolean;
+        /**
+          * @default null
+         */
+        "value"?: string | number | null;
+        /**
+          * @default '200px'
+         */
+        "width"?: string;
+    }
+    interface SdSelectMultiple {
+        /**
+          * @default false
+         */
+        "clearable"?: boolean;
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * @default '260px'
+         */
+        "dropdownHeight"?: string;
+        /**
+          * @default ''
+         */
+        "label"?: string;
+        "onDropDownShow"?: (event: SdSelectMultipleCustomEvent<SelectMultipleEvents['dropDownShow']>) => void;
+        "onSdChange"?: (event: SdSelectMultipleCustomEvent<SelectMultipleEvents['sdChange']>) => void;
+        /**
+          * @default '옵션이 없습니다.'
+         */
+        "optionPlaceholder"?: string;
+        "optionRenderer"?: (option: SelectOption1, index: number, isSelected: boolean) => any;
+        /**
+          * @default []
+         */
+        "options"?: SelectOption1[];
+        /**
+          * @default '선택'
+         */
+        "placeholder"?: string;
+        /**
+          * @default false
+         */
+        "searchable"?: boolean;
+        /**
+          * @default false
+         */
+        "useCheckbox"?: boolean;
+        /**
+          * @default null
+         */
+        "value"?: SelectOption1[] | null;
+        /**
+          * @default '200px'
+         */
+        "width"?: string;
+    }
+    interface SdSelectMultipleGroup {
         /**
           * @default false
          */
@@ -1254,13 +1542,13 @@ declare namespace LocalJSX {
           * @default {}
          */
         "labelStyle"?: SelectStyleProps['labelStyle'];
-        "onDropDownShow"?: (event: SdSelectCustomEvent<SelectEvents['dropDownShow']>) => void;
-        "onSdChange"?: (event: SdSelectCustomEvent<SelectEvents['sdChange']>) => void;
+        "onDropDownShow"?: (event: SdSelectMultipleGroupCustomEvent<SelectMultipleEvents1['dropDownShow']>) => void;
+        "onSdChange"?: (event: SdSelectMultipleGroupCustomEvent<SelectMultipleEvents1['sdChange']>) => void;
         /**
           * @default '옵션이 없습니다.'
          */
         "optionPlaceholder"?: string;
-        "optionRenderer"?: (option: SelectOption, index: number, isSelected: boolean) => any;
+        "optionRenderer"?: (option: SelectOption2, index: number, isSelected: boolean) => any;
         /**
           * @default {}
          */
@@ -1268,7 +1556,7 @@ declare namespace LocalJSX {
         /**
           * @default []
          */
-        "options"?: SelectOption[];
+        "options"?: SelectOptionGroup[];
         /**
           * @default '선택'
          */
@@ -1281,10 +1569,14 @@ declare namespace LocalJSX {
           * @default {}
          */
         "triggerStyle"?: SelectStyleProps['triggerStyle'];
+        /**
+          * @default false
+         */
+        "useCheckbox"?: boolean;
         /**
           * @default null
          */
-        "value"?: string | number | null;
+        "value"?: SelectOptionGroup[] | null;
         /**
           * @default '200px'
          */
@@ -1316,6 +1608,33 @@ declare namespace LocalJSX {
          */
         "useCheckbox"?: boolean;
     }
+    interface SdSelectOptionGroup {
+        /**
+          * @default false
+         */
+        "disabled"?: boolean;
+        "index": number;
+        /**
+          * @default false
+         */
+        "isFocused"?: boolean;
+        /**
+          * @default false
+         */
+        "isSelected"?: boolean | null;
+        "onOptionClick"?: (event: SdSelectOptionGroupCustomEvent<{
+  option: SelectOptionGroup1;
+  isSelected: boolean | null;
+  index: number;
+  event: MouseEvent;
+ }>) => void;
+        "option": SelectOptionGroup1;
+        "optionStyle"?: { [key: string]: string };
+        /**
+          * @default false
+         */
+        "useCheckbox"?: boolean;
+    }
     interface SdTable {
         "bodyCellRenderer"?: (
   column: SdTableColumn,
@@ -1325,7 +1644,7 @@ declare namespace LocalJSX {
           * @default []
          */
         "columns"?: SdTableColumn[];
-        "height"?: number;
+        "height"?: string;
         /**
           * @default '데이터가 없습니다.'
          */
@@ -1365,6 +1684,7 @@ declare namespace LocalJSX {
           * @default false
          */
         "stickyHeader"?: boolean;
+        "width"?: string;
     }
     interface SdTag {
         "bgColor"?: string;
@@ -1469,7 +1789,10 @@ declare namespace LocalJSX {
         "sd-popover": SdPopover;
         "sd-portal": SdPortal;
         "sd-select": SdSelect;
+        "sd-select-multiple": SdSelectMultiple;
+        "sd-select-multiple-group": SdSelectMultipleGroup;
         "sd-select-option": SdSelectOption;
+        "sd-select-option-group": SdSelectOptionGroup;
         "sd-table": SdTable;
         "sd-tag": SdTag;
         "sd-tooltip": SdTooltip;
@@ -1493,7 +1816,10 @@ declare module "@stencil/core" {
             "sd-popover": LocalJSX.SdPopover & JSXBase.HTMLAttributes<HTMLSdPopoverElement>;
             "sd-portal": LocalJSX.SdPortal & JSXBase.HTMLAttributes<HTMLSdPortalElement>;
             "sd-select": LocalJSX.SdSelect & JSXBase.HTMLAttributes<HTMLSdSelectElement>;
+            "sd-select-multiple": LocalJSX.SdSelectMultiple & JSXBase.HTMLAttributes<HTMLSdSelectMultipleElement>;
+            "sd-select-multiple-group": LocalJSX.SdSelectMultipleGroup & JSXBase.HTMLAttributes<HTMLSdSelectMultipleGroupElement>;
             "sd-select-option": LocalJSX.SdSelectOption & JSXBase.HTMLAttributes<HTMLSdSelectOptionElement>;
+            "sd-select-option-group": LocalJSX.SdSelectOptionGroup & JSXBase.HTMLAttributes<HTMLSdSelectOptionGroupElement>;
             "sd-table": LocalJSX.SdTable & JSXBase.HTMLAttributes<HTMLSdTableElement>;
             "sd-tag": LocalJSX.SdTag & JSXBase.HTMLAttributes<HTMLSdTagElement>;
             "sd-tooltip": LocalJSX.SdTooltip & JSXBase.HTMLAttributes<HTMLSdTooltipElement>;