@reco-inc/upbox-ui 1.1.4 → 1.2.0

package/FigmaConnect.md

@@ -136,6 +136,7 @@
 | Vue Prop | 타입 | 기본값 | 설명 |
 |---|---|---|---|
 | `loading` | `boolean` | `false` | 로딩 스피너 자동 노출, 클릭 무시 |
+| `autoLoading` | `boolean` | `false` | 클릭 핸들러가 돌려준 Promise 가 끝날 때까지 스스로 loading |
 | `block` | `boolean` | `false` | 가로 100% |
 | `type` | `button / submit / reset` | `button` | 네이티브 `type` |
 | `class` | `string` | - | 추가 클래스 |

package/dist/FigmaConnect.md

@@ -136,6 +136,7 @@
 | Vue Prop | 타입 | 기본값 | 설명 |
 |---|---|---|---|
 | `loading` | `boolean` | `false` | 로딩 스피너 자동 노출, 클릭 무시 |
+| `autoLoading` | `boolean` | `false` | 클릭 핸들러가 돌려준 Promise 가 끝날 때까지 스스로 loading |
 | `block` | `boolean` | `false` | 가로 100% |
 | `type` | `button / submit / reset` | `button` | 네이티브 `type` |
 | `class` | `string` | - | 추가 클래스 |

package/dist/components/button/Button.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'vue';
+export type ButtonClickHandler = (event: MouseEvent) => unknown;
 export interface ButtonProps {
     variant?: 'primary' | 'destructive' | 'secondary' | 'tertiary';
     theme?: 'filled' | 'outlined';
@@ -6,6 +7,18 @@ export interface ButtonProps {
     block?: boolean;
     disabled?: boolean;
     loading?: boolean;
+    /**
+     * 클릭 핸들러가 Promise 를 돌려주면 끝날 때까지 스스로 loading 상태를 유지한다.
+     * 그 사이 다시 누른 클릭은 무시한다. 핸들러는 API 호출(과 성공 후 화면 이동)을 `await` 하거나 `return` 해야 한다
+     */
+    autoLoading?: boolean;
+    /**
+     * `@click` 핸들러. emit 이 아니라 prop 으로 받아야 핸들러가 돌려준 Promise 를 기다릴 수 있다.
+     * reka 트리거의 `as-child` 로 감싸면 트리거 핸들러와 합쳐져 배열로 들어온다
+     */
+    onClick?: ButtonClickHandler | ButtonClickHandler[];
+    /** `@click.once` 핸들러. emit 을 쓰던 때처럼 처음 한 번만 부른다 */
+    onClickOnce?: ButtonClickHandler | ButtonClickHandler[];
     type?: 'button' | 'submit' | 'reset';
     class?: HTMLAttributes['class'];
 }
@@ -18,11 +31,7 @@ declare function __VLS_template(): {
     rootEl: HTMLButtonElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    click: (event: MouseEvent) => any;
-}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{
-    onClick?: ((event: MouseEvent) => any) | undefined;
-}>, {
+declare const __VLS_component: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     disabled: boolean;
     type: "button" | "submit" | "reset";
     size: "xsmall" | "small" | "regular" | "large" | "xlarge";
@@ -30,6 +39,7 @@ declare const __VLS_component: import('vue').DefineComponent<ButtonProps, {}, {}
     loading: boolean;
     variant: "primary" | "destructive" | "secondary" | "tertiary";
     block: boolean;
+    autoLoading: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/button/Button.stories.d.ts

@@ -2,11 +2,7 @@ import { StoryObj } from '@storybook/vue3-vite';
 declare const meta: {
     title: string;
     component: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./Button').ButtonProps> & Readonly<{
-            onClick?: ((event: MouseEvent) => any) | undefined;
-        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            click: (event: MouseEvent) => any;
-        }, import('vue').PublicProps, {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./Button').ButtonProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
             disabled: boolean;
             type: "button" | "submit" | "reset";
             size: "xsmall" | "small" | "regular" | "large" | "xlarge";
@@ -14,6 +10,7 @@ declare const meta: {
             loading: boolean;
             variant: "primary" | "destructive" | "secondary" | "tertiary";
             block: boolean;
+            autoLoading: boolean;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLButtonElement, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -21,9 +18,7 @@ declare const meta: {
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<import('./Button').ButtonProps> & Readonly<{
-            onClick?: ((event: MouseEvent) => any) | undefined;
-        }>, {}, {}, {}, {}, {
+        }, Readonly<import('./Button').ButtonProps> & Readonly<{}>, {}, {}, {}, {}, {
             disabled: boolean;
             type: "button" | "submit" | "reset";
             size: "xsmall" | "small" | "regular" | "large" | "xlarge";
@@ -31,15 +26,12 @@ declare const meta: {
             loading: boolean;
             variant: "primary" | "destructive" | "secondary" | "tertiary";
             block: boolean;
+            autoLoading: boolean;
         }>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<import('./Button').ButtonProps> & Readonly<{
-        onClick?: ((event: MouseEvent) => any) | undefined;
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        click: (event: MouseEvent) => any;
-    }, string, {
+    } & import('vue').ComponentOptionsBase<Readonly<import('./Button').ButtonProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
         disabled: boolean;
         type: "button" | "submit" | "reset";
         size: "xsmall" | "small" | "regular" | "large" | "xlarge";
@@ -47,6 +39,7 @@ declare const meta: {
         loading: boolean;
         variant: "primary" | "destructive" | "secondary" | "tertiary";
         block: boolean;
+        autoLoading: boolean;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: {
             default?(_: {}): any;
@@ -86,6 +79,11 @@ export declare const Primary: Story;
 export declare const Variants: Story;
 export declare const Sizes: Story;
 export declare const Loading: Story;
+/**
+ * `auto-loading` 을 붙이면 클릭 핸들러가 돌려준 Promise 가 끝날 때까지 스스로 loading 이 된다.
+ * 그 사이 다시 누른 클릭은 무시되어, 저장 요청이 두 번 나가지 않는다.
+ */
+export declare const AutoLoading: Story;
 export declare const Disabled: Story;
 /**
  * 특정 조건에 걸려 액션을 수행할 수 없는 경우에는 버튼을 `disabled` 로 막지 않는다.