@reco-inc/upbox-ui 1.2.0 → 1.4.0

package/FigmaConnect.md

@@ -136,7 +136,6 @@
 | Vue Prop | 타입 | 기본값 | 설명 |
 |---|---|---|---|
 | `loading` | `boolean` | `false` | 로딩 스피너 자동 노출, 클릭 무시 |
-| `autoLoading` | `boolean` | `false` | 클릭 핸들러가 돌려준 Promise 가 끝날 때까지 스스로 loading |
 | `block` | `boolean` | `false` | 가로 100% |
 | `type` | `button / submit / reset` | `button` | 네이티브 `type` |
 | `class` | `string` | - | 추가 클래스 |
@@ -151,7 +150,7 @@
 
 | Slot | 설명 |
 |---|---|
-| `default` | 본문 텍스트. 좌·우 아이콘은 슬롯 안에 `<lucide />` 직접 배치 |
+| `default` | 본문 텍스트. 좌·우 아이콘은 슬롯 안에 `<Icon src="..." />` 또는 `<lucide />` 직접 배치. `Icon` 은 색을 variant 텍스트 색(currentColor)으로, 크기를 size 에 맞춰(16/16/20/20/24) 자동 적용 |
 
 ### Code Example
 

package/dist/FigmaConnect.md

@@ -136,7 +136,6 @@
 | Vue Prop | 타입 | 기본값 | 설명 |
 |---|---|---|---|
 | `loading` | `boolean` | `false` | 로딩 스피너 자동 노출, 클릭 무시 |
-| `autoLoading` | `boolean` | `false` | 클릭 핸들러가 돌려준 Promise 가 끝날 때까지 스스로 loading |
 | `block` | `boolean` | `false` | 가로 100% |
 | `type` | `button / submit / reset` | `button` | 네이티브 `type` |
 | `class` | `string` | - | 추가 클래스 |
@@ -151,7 +150,7 @@
 
 | Slot | 설명 |
 |---|---|
-| `default` | 본문 텍스트. 좌·우 아이콘은 슬롯 안에 `<lucide />` 직접 배치 |
+| `default` | 본문 텍스트. 좌·우 아이콘은 슬롯 안에 `<Icon src="..." />` 또는 `<lucide />` 직접 배치. `Icon` 은 색을 variant 텍스트 색(currentColor)으로, 크기를 size 에 맞춰(16/16/20/20/24) 자동 적용 |
 
 ### Code Example
 

package/dist/components/badge-divider/index.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'vue';
 import { VariantProps } from 'class-variance-authority';
 export { default as BadgeDivider } from './BadgeDivider';
 export declare const badgeDividerVariants: (props?: ({
-    variant?: "navy" | "green" | null | undefined;
+    variant?: "green" | "navy" | null | undefined;
     size?: "3xsmall" | "2xsmall" | "xsmall" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type BadgeDividerVariants = VariantProps<typeof badgeDividerVariants>;

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from 'vue';
-export type ButtonClickHandler = (event: MouseEvent) => unknown;
 export interface ButtonProps {
     variant?: 'primary' | 'destructive' | 'secondary' | 'tertiary';
     theme?: 'filled' | 'outlined';
@@ -7,18 +6,6 @@ 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'];
 }
@@ -31,7 +18,11 @@ 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, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+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;
+}>, {
     disabled: boolean;
     type: "button" | "submit" | "reset";
     size: "xsmall" | "small" | "regular" | "large" | "xlarge";
@@ -39,7 +30,6 @@ 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,7 +2,11 @@ import { StoryObj } from '@storybook/vue3-vite';
 declare const meta: {
     title: string;
     component: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./Button').ButtonProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        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, {
             disabled: boolean;
             type: "button" | "submit" | "reset";
             size: "xsmall" | "small" | "regular" | "large" | "xlarge";
@@ -10,7 +14,6 @@ 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: {};
@@ -18,7 +21,9 @@ declare const meta: {
             C: {};
             M: {};
             Defaults: {};
-        }, Readonly<import('./Button').ButtonProps> & Readonly<{}>, {}, {}, {}, {}, {
+        }, Readonly<import('./Button').ButtonProps> & Readonly<{
+            onClick?: ((event: MouseEvent) => any) | undefined;
+        }>, {}, {}, {}, {}, {
             disabled: boolean;
             type: "button" | "submit" | "reset";
             size: "xsmall" | "small" | "regular" | "large" | "xlarge";
@@ -26,12 +31,15 @@ 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<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    } & import('vue').ComponentOptionsBase<Readonly<import('./Button').ButtonProps> & Readonly<{
+        onClick?: ((event: MouseEvent) => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        click: (event: MouseEvent) => any;
+    }, string, {
         disabled: boolean;
         type: "button" | "submit" | "reset";
         size: "xsmall" | "small" | "regular" | "large" | "xlarge";
@@ -39,7 +47,6 @@ 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;
@@ -79,11 +86,6 @@ 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` 로 막지 않는다.

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,18 @@
+import { IconProps } from '.';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/icon/Icon.stories.d.ts

@@ -0,0 +1,40 @@
+import { StoryObj } from '@storybook/vue3-vite';
+declare const meta: {
+    title: string;
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('.').IconProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLSpanElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('.').IconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('.').IconProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+        };
+    });
+    tags: string[];
+    argTypes: {
+        src: {
+            control: "text";
+        };
+        size: {
+            control: "number";
+        };
+        color: {
+            control: "color";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InButton: Story;
+export declare const ButtonSizes: Story;
+export declare const InIconButton: Story;
+export declare const ColorOverride: Story;

package/dist/components/icon/iconContext.d.ts

@@ -0,0 +1,6 @@
+import { ComputedRef, InjectionKey } from 'vue';
+/** 부모 컴포넌트(Button 등)가 자기 size 에 맞는 아이콘 px 를 내려준다 */
+export interface IconContext {
+    size: ComputedRef<number>;
+}
+export declare const ICON_CONTEXT_KEY: InjectionKey<IconContext>;

package/dist/components/icon/index.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'vue';
+export { default as Icon } from './Icon';
+export { ICON_CONTEXT_KEY } from './iconContext';
+export type { IconContext } from './iconContext';
+export interface IconProps {
+    /** 앱 Icon src 와 같은 경로 (`action/arrow-left-regular.svg`). 없으면 default slot 의 svg 를 쓴다 */
+    src?: string;
+    /** px. 없으면 부모(Button/IconButton) size 에 맞춘 값, 부모가 없으면 24 */
+    size?: number;
+    /** 기본은 currentColor 라 부모 텍스트 색(Button variant/hover/active)을 그대로 따른다 */
+    color?: string;
+    class?: HTMLAttributes["class"];
+}

package/dist/components/tabs/index.d.ts

@@ -21,12 +21,12 @@ export interface TabsEmits {
 }
 export declare const tabsListVariants: (props?: ({
     variant?: "box" | "default" | "round" | null | undefined;
-    color?: "navy" | "grey" | null | undefined;
+    color?: "grey" | "navy" | null | undefined;
     size?: "small" | "large" | "regular" | "xlarge" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const tabsTriggerVariants: (props?: ({
     variant?: "box" | "default" | "round" | null | undefined;
-    color?: "navy" | "grey" | null | undefined;
+    color?: "grey" | "navy" | null | undefined;
     size?: "small" | "large" | "regular" | "xlarge" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TabsListVariants = VariantProps<typeof tabsListVariants>;

package/dist/global.d.ts

@@ -82,6 +82,7 @@ declare module 'vue' {
         FormLabel: typeof import('./components/form')['FormLabel'];
         FormMessage: typeof import('./components/form')['FormMessage'];
         TextField: typeof import('./components/text-field')['TextField'];
+        Icon: typeof import('./components/icon')['Icon'];
         InputGroup: typeof import('./components/input-group')['InputGroup'];
         InputGroupAddon: typeof import('./components/input-group')['InputGroupAddon'];
         InputGroupButton: typeof import('./components/input-group')['InputGroupButton'];

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/badge-divider';
 export * from './components/breadcrumb';
 export * from './components/button';
 export * from './components/fab';
+export * from './components/icon';
 export * from './components/icon-button';
 export * from './components/text-button';
 export * from './components/calendar';