@krds.ui/vue 0.0.18 → 0.0.20

package/dist/types/index.d.ts

@@ -18,6 +18,7 @@ export declare type AlertType = 'danger' | 'ok' | 'info';
 
 /**
  * 정렬 타입
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare type Alignment = 'left' | 'center' | 'right' | 'justify';
 
@@ -75,8 +76,176 @@ export declare type ColorVariant = 'primary' | 'secondary' | 'success' | 'warnin
  */
 declare type ColorVariant_2 = 'primary' | 'secondary' | 'gray' | 'point' | 'danger' | 'warning' | 'success' | 'information' | 'disabled';
 
+declare namespace components {
+    export {
+        KrdsButton,
+        KrdsButtonProps,
+        KrdsButtonEmits,
+        KrdsButtonGroup,
+        KrdsButtonGroupProps,
+        KrdsIcon,
+        KrdsIconProps,
+        KrdsLink,
+        KrdsLinkProps,
+        KrdsLinkEmits,
+        KrdsLinkSize,
+        KrdsInput,
+        KrdsInputProps,
+        KrdsInputEmits,
+        KrdsFormLabel,
+        KrdsFormLabelProps,
+        KrdsFormLabelEmits,
+        KrdsFormHint,
+        KrdsFormHintProps,
+        KrdsFormHintEmits,
+        KrdsFormGroup,
+        KrdsFormGroupProps,
+        KrdsDateInput,
+        KrdsDateInputProps,
+        KrdsDateInputEmits,
+        KrdsTextarea,
+        KrdsTextareaProps,
+        KrdsTextareaEmits,
+        KrdsSelect,
+        KrdsSelectProps,
+        KrdsSelectEmits,
+        SelectOption,
+        KrdsFileUpload,
+        KrdsFileUploadProps,
+        KrdsFileUploadEmits,
+        FileInfo,
+        KrdsBadge,
+        KrdsBadgeProps,
+        KrdsBadgeEmits,
+        KrdsTag,
+        KrdsTagProps,
+        KrdsTagEmits,
+        KrdsTagGroup,
+        KrdsTagGroupProps,
+        KrdsTagGroupSize,
+        KrdsMasthead,
+        KrdsMastheadProps,
+        KrdsMastheadEmits,
+        KrdsToggleSwitch,
+        KrdsToggleSwitchProps,
+        KrdsToggleSwitchEmits,
+        KrdsCheckArea,
+        KrdsCheckAreaProps,
+        KrdsCheckbox,
+        KrdsCheckboxProps,
+        KrdsCheckboxEmits,
+        KrdsRadio,
+        KrdsRadioProps,
+        KrdsRadioEmits,
+        KrdsSpinner,
+        KrdsStepIndicator,
+        KrdsStepIndicatorProps,
+        KrdsStepIndicatorEmits,
+        KrdsStep,
+        KrdsStepProps,
+        KrdsStepEmits,
+        KrdsSkipLink,
+        KrdsSkipLinkProps,
+        KrdsBreadcrumb,
+        KrdsBreadcrumbProps,
+        KrdsBreadcrumbEmits,
+        BreadcrumbItem,
+        KrdsInPageNavigation,
+        KrdsInPageNavigationProps,
+        KrdsInPageNavigationEmits,
+        NavigationItem,
+        KrdsPagination,
+        KrdsPaginationProps,
+        KrdsPaginationEmits,
+        KrdsPanel,
+        KrdsPanelProps,
+        KrdsPanelEmits,
+        KrdsContextualHelp,
+        KrdsContextualHelpProps,
+        KrdsCoachMark,
+        KrdsCoachMarkProps,
+        KrdsCoachMarkEmits,
+        KrdsTooltip,
+        KrdsTooltipProps,
+        KrdsLanguageSwitcher,
+        KrdsLanguageSwitcherProps,
+        KrdsLanguageSwitcherEmits,
+        DropdownPosition,
+        KrdsResize,
+        KrdsResizeEmits,
+        KrdsModal,
+        KrdsModalProps,
+        KrdsModalSize,
+        KrdsAccordionGroup,
+        KrdsAccordionGroupProps,
+        KrdsAccordionItem,
+        KrdsAccordionItemProps,
+        KrdsAccordionItemEmits,
+        KrdsTts,
+        KrdsTtsProps,
+        KrdsTtsEmits,
+        TtsSize,
+        TtsIcon,
+        KrdsTable,
+        KrdsTableProps,
+        KrdsTableEmits,
+        TableColumn,
+        TableRow,
+        KrdsHeader,
+        KrdsHeaderProps,
+        KrdsFooter,
+        KrdsFooterProps,
+        KrdsDisclosure,
+        KrdsDisclosureProps,
+        KrdsDisclosureEmits,
+        KrdsIdentifier,
+        KrdsIdentifierProps,
+        KrdsIdentifierEmits,
+        KrdsLayout,
+        KrdsLayoutProps,
+        KrdsLayoutEmits,
+        ScrollDetails,
+        LayoutSize,
+        KrdsSideNavigation,
+        KrdsSideNavigationProps,
+        KrdsSideNavigationEmits,
+        SideNavItem,
+        SideNavSubItem,
+        SideNavPopupItem,
+        KrdsStructuredList,
+        KrdsStructuredListProps,
+        KrdsTextList,
+        KrdsTextListProps,
+        KrdsCriticalAlerts,
+        KrdsCriticalAlertsProps,
+        KrdsCriticalAlertsEmits,
+        AlertType,
+        KrdsMainMenu,
+        KrdsMainMenuProps,
+        KrdsMainMenuEmits,
+        MainMenuItem,
+        MainMenuSubItem,
+        MainMenuLinkItem,
+        MainMenuDepth4Item,
+        MainMenuAnyItem,
+        MainMenuVariant,
+        MainMenuLayout,
+        KrdsCarousel,
+        KrdsCarouselProps,
+        KrdsCarouselEmits,
+        KrdsCarouselVariant,
+        KrdsCarouselPaginationType,
+        KrdsTabs,
+        KrdsTabsProps,
+        KrdsTabsEmits,
+        KrdsTabItem,
+        KrdsTabsVariant
+    }
+}
+
 /**
  * 컴포넌트 슬롯 타입
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare interface ComponentSlots {
     default?: () => unknown;
@@ -85,6 +254,7 @@ export declare interface ComponentSlots {
 
 /**
  * 컴포넌트 상태 타입
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare type ComponentState = 'default' | 'hover' | 'active' | 'focus' | 'disabled';
 
@@ -92,11 +262,13 @@ declare type ContextualHelpPosition = 'top left' | 'top center' | 'top right' |
 
 /**
  * CSS 변수 타입
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare type CSSCustomProperties = Record<`--${string}`, string | number>;
 
 /**
  * 방향 타입
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare type Direction = 'horizontal' | 'vertical';
 
@@ -135,6 +307,7 @@ export declare interface FileInfo {
  *
  * @param prefix - ID 접두사
  * @returns 고유한 ID 문자열
+ * @deprecated 모듈 전역 카운터라 SSR에서 요청 간 값이 공유된다. Vue의 `useId()`를 사용. 다음 breaking 릴리스에서 제거 예정
  */
 export declare function generateId(prefix?: string): string;
 
@@ -143,11 +316,13 @@ export declare function generateId(prefix?: string): string;
  * 브라우저와 Node.js 환경에서 모두 작동합니다.
  *
  * @returns 7자리 랜덤 문자열
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare function generateUid(): string;
 
 /**
  * 아이콘 속성
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare interface IconProps {
     /** 아이콘 이름 */
@@ -160,6 +335,7 @@ export declare interface IconProps {
 
 /**
  * 입력 상태 타입
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare type InputState = ComponentState | 'error' | 'success';
 
@@ -1104,6 +1280,7 @@ export declare interface KrdsCoachMarkProps extends BaseComponentProps {
 
 /**
  * KRDS 컴포넌트 타입
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare type KrdsComponent<Props = object, Slots = object, Emits = object> = Component & {
     __krdsComponent: true;
@@ -1112,6 +1289,9 @@ export declare type KrdsComponent<Props = object, Slots = object, Emits = object
     __krdsEmits: Emits;
 };
 
+/** 전역 등록 가능한 컴포넌트 이름 */
+export declare type KrdsComponentName = keyof typeof components;
+
 export declare const KrdsContextualHelp: DefineComponent<ExtractPropTypes<{
     /** 툴팁 제목 */
     tooltipTitle: {
@@ -1147,9 +1327,9 @@ export declare const KrdsContextualHelp: DefineComponent<ExtractPropTypes<{
         default: string;
     };
 }>> & Readonly<{}>, {
+    position: ContextualHelpPosition;
     tooltipTitle: string;
     helpIcon: boolean;
-    position: ContextualHelpPosition;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -1300,6 +1480,11 @@ export declare const KrdsDateInput: DefineComponent<ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /** 달력을 body에 렌더 (overflow로 잘리는 컨테이너 안에서 사용. 모달 안에서는 쓰지 않음) */
+    teleport: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** CSS 클래스 */
     class: {
         type: StringConstructor;
@@ -1379,6 +1564,11 @@ export declare const KrdsDateInput: DefineComponent<ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /** 달력을 body에 렌더 (overflow로 잘리는 컨테이너 안에서 사용. 모달 안에서는 쓰지 않음) */
+    teleport: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** CSS 클래스 */
     class: {
         type: StringConstructor;
@@ -1410,6 +1600,7 @@ export declare const KrdsDateInput: DefineComponent<ExtractPropTypes<{
     holidays: string[];
     initialYear: number;
     initialMonth: number;
+    teleport: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -1447,6 +1638,8 @@ export declare interface KrdsDateInputProps extends BaseFormProps {
     initialYear?: number;
     /** 초기 표시 월 (기본: 현재 월) */
     initialMonth?: number;
+    /** 달력을 body에 렌더 (overflow로 잘리는 컨테이너 안에서 사용. 모달 안에서는 쓰지 않음) */
+    teleport?: boolean;
 }
 
 export declare const KrdsDisclosure: DefineComponent<ExtractPropTypes<{
@@ -3626,9 +3819,16 @@ export declare interface KrdsSideNavigationProps {
  *
  * @example
  * ```vue
+ * <!-- 단일 링크 -->
  * <KrdsSkipLink href="#main-content">본문 바로가기</KrdsSkipLink>
- * <KrdsSkipLink href="#breadcrumb">본문 바로가기</KrdsSkipLink>
- * <KrdsSkipLink href="#gnb">메인메뉴 바로가기</KrdsSkipLink>
+ *
+ * <!-- 여러 링크: 컴포넌트를 나란히 두면 #krds-skip-link가 중복되므로 links 사용 -->
+ * <KrdsSkipLink
+ *   :links="[
+ *     { href: '#main-content', label: '본문 바로가기' },
+ *     { href: '#gnb', label: '메인메뉴 바로가기' }
+ *   ]"
+ * />
  * ```
  */
 export declare const KrdsSkipLink: DefineComponent<ExtractPropTypes<{
@@ -3638,9 +3838,22 @@ export declare const KrdsSkipLink: DefineComponent<ExtractPropTypes<{
      */
     href: {
         type: StringConstructor;
-        required: true;
+        default: undefined;
         validator: (value: string) => boolean;
     };
+    /**
+     * 여러 건너뛰기 링크 (하나의 래퍼 안에 렌더링, 지정 시 href·기본 슬롯 대신 사용)
+     */
+    links: {
+        type: PropType<{
+            href: string;
+            label: string;
+        }[]>;
+        default: undefined;
+        validator: (value: {
+            href: string;
+        }[]) => boolean;
+    };
     /**
      * 추가 CSS 클래스
      */
@@ -3662,9 +3875,22 @@ export declare const KrdsSkipLink: DefineComponent<ExtractPropTypes<{
      */
     href: {
         type: StringConstructor;
-        required: true;
+        default: undefined;
         validator: (value: string) => boolean;
     };
+    /**
+     * 여러 건너뛰기 링크 (하나의 래퍼 안에 렌더링, 지정 시 href·기본 슬롯 대신 사용)
+     */
+    links: {
+        type: PropType<{
+            href: string;
+            label: string;
+        }[]>;
+        default: undefined;
+        validator: (value: {
+            href: string;
+        }[]) => boolean;
+    };
     /**
      * 추가 CSS 클래스
      */
@@ -3681,15 +3907,25 @@ export declare const KrdsSkipLink: DefineComponent<ExtractPropTypes<{
     };
 }>> & Readonly<{}>, {
     class: string | unknown[] | Record<string, any>;
+    href: string;
     id: string;
+    links: {
+        href: string;
+        label: string;
+    }[];
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
  * KRDS SkipLink 컴포넌트 속성
  */
 export declare interface KrdsSkipLinkProps extends BaseComponentProps {
-    /** 건너뛸 대상 요소의 ID */
-    href: string;
+    /** 건너뛸 대상 요소의 ID (단일 링크, 기본 슬롯이 링크 텍스트) */
+    href?: string;
+    /** 여러 건너뛰기 링크 (하나의 래퍼 안에 렌더링, 지정 시 href·기본 슬롯 대신 사용) */
+    links?: {
+        href: string;
+        label: string;
+    }[];
 }
 
 export declare const KrdsSpinner: DefineComponent<ExtractPropTypes<{
@@ -4784,15 +5020,15 @@ export declare interface KrdsTtsProps extends BaseComponentProps {
 /**
  * KRDS Vue 플러그인
  */
-declare const KrdsVue: Plugin_2;
+declare const KrdsVue: Plugin_2<[KrdsVueOptions?]>;
 export default KrdsVue;
 
 /**
  * KRDS Vue 플러그인 설정 옵션
  */
 export declare interface KrdsVueOptions {
-    /** 설치할 컴포넌트 목록 (비어있으면 전체 설치) */
-    components?: string[];
+    /** 설치할 컴포넌트 목록 (비어있으면 전체 설치). 이름은 자동완성되며 임의 문자열도 허용 */
+    components?: (KrdsComponentName | (string & {}))[];
 }
 
 declare type LanguageData = {
@@ -4811,6 +5047,7 @@ export declare interface LayoutSize {
 
 /**
  * 로딩 상태 속성
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare interface LoadingProps {
     /** 로딩 중 여부 */
@@ -4954,19 +5191,23 @@ export declare interface NavigationItem {
 /**
  * 유틸리티 타입들
  */
+/** @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정 */
 export declare type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
 /**
  * 위치 타입
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare type Position = 'top' | 'bottom' | 'left' | 'right';
 
+/** @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정 */
 export declare type RequiredKeys<T> = {
     [K in keyof T]-?: object extends Pick<T, K> ? never : K;
 }[keyof T];
 
 /**
  * 반응형 값 타입
+ * @deprecated 라이브러리에서 쓰이지 않아 다음 breaking 릴리스에서 제거 예정
  */
 export declare type ResponsiveValue<T> = T | {
     mobile?: T;
@@ -5102,17 +5343,3 @@ export declare type Variant = 'primary' | 'secondary' | 'tertiary';
 export declare const version: string;
 
 export { }
-
-/**
- * KRDS Vue 디렉티브 타입 정의
- */
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    /**
-     * 스크린 리더 전용 텍스트 디렉티브
-     * 요소에 .sr-only 클래스를 추가하여 시각적으로는 숨기지만 스크린 리더에서는 읽을 수 있도록 합니다.
-     */
-    vSrOnly: never
-  }
-}

package/global.d.ts

@@ -0,0 +1,22 @@
+/**
+ * app.use(KrdsVue)로 전역 등록되는 컴포넌트·디렉티브·전역 속성 타입
+ *
+ * 사용: tsconfig.json의 compilerOptions.types에 "@krds.ui/vue/global" 추가
+ */
+import type { Directive } from 'vue'
+import type * as Krds from '@krds.ui/vue'
+
+declare module 'vue' {
+  export interface GlobalComponents extends Pick<typeof Krds, Krds.KrdsComponentName> {}
+
+  export interface GlobalDirectives {
+    /** 스크린 리더 전용 텍스트 (.sr-only 클래스 추가) */
+    vSrOnly: Directive<HTMLElement, boolean | undefined>
+  }
+
+  export interface ComponentCustomProperties {
+    $krds: { version: string }
+  }
+}
+
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krds.ui/vue",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "KRDS Vue Design System - 한국 정부 디자인 시스템 Vue 컴포넌트 라이브러리",
   "keywords": [
     "krds",
@@ -32,6 +32,9 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/krds-vue.es.js"
     },
+    "./global": {
+      "types": "./global.d.ts"
+    },
     "./dist/style.css": "./dist/style.css",
     "./style": "./dist/style.css",
     "./package.json": "./package.json"
@@ -40,43 +43,40 @@
     "**/*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "global.d.ts"
   ],
   "peerDependencies": {
     "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@microsoft/api-extractor": "^7.58.12",
-    "@size-limit/file": "^14.0.0",
-    "@storybook/addon-a11y": "^10.6.1",
-    "@storybook/addon-docs": "^10.6.1",
-    "@storybook/addon-vitest": "^10.6.1",
-    "@storybook/vue3-vite": "^10.6.1",
-    "@tsconfig/node24": "^24.0.4",
-    "@types/node": "^26.2.0",
-    "@typescript-eslint/parser": "^8.67.0",
-    "@vitejs/plugin-vue": "^6.0.8",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
-    "@vitest/coverage-v8": "^4.1.10",
-    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.9.0",
-    "eslint": "^10.8.1",
-    "eslint-plugin-vue": "^10.10.0",
-    "playwright": "^1.62.1",
-    "prettier": "^3.9.6",
-    "sass": "^1.102.0",
-    "size-limit": "^14.0.0",
+    "@microsoft/api-extractor": "^7.59.4",
+    "@size-limit/file": "^14.1.0",
+    "@size-limit/rolldown": "^14.1.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/user-event": "^14.6.7",
+    "@testing-library/vue": "^8.1.0",
+    "@tsconfig/node24": "^24.0.5",
+    "@types/node": "^26.6.4",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
+    "axe-core": "~4.13.0",
+    "oxfmt": "^0.71.0",
+    "oxlint": "^1.87.0",
+    "playwright": "^1.63.0",
+    "sass": "^1.105.1",
+    "size-limit": "^14.1.0",
     "source-map-explorer": "^2.5.3",
-    "storybook": "^10.6.1",
     "typescript": "6.0.3",
-    "vite": "^8.2.1",
-    "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.10",
-    "vue": "^3.5.41",
-    "vue-eslint-parser": "^10.4.1",
-    "vue-tsc": "^3.3.9"
+    "typescript7": "npm:typescript@^7.0.2",
+    "vite": "^8.3.3",
+    "vite-plugin-dts": "^5.1.2",
+    "vitepress": "2.0.0-alpha.20",
+    "vitest": "^4.1.11",
+    "vue": "^3.5.43",
+    "vue-component-meta": "^3.3.12"
   },
   "publishConfig": {
     "access": "public",
@@ -89,25 +89,32 @@
   "size-limit": [
     {
       "path": "dist/krds-vue.es.js",
-      "limit": "25 kB"
+      "limit": "25 kB",
+      "rolldown": false
     },
     {
       "path": "dist/style.css",
-      "limit": "60 kB"
+      "limit": "60 kB",
+      "rolldown": false
+    },
+    {
+      "name": "tree-shaking: { KrdsButton }",
+      "path": "dist/krds-vue.es.js",
+      "import": "{ KrdsButton }",
+      "limit": "2 kB"
     }
   ],
   "scripts": {
-    "dev": "vite",
     "build": "pnpm run type-check && pnpm run build:lib",
     "build:lib": "vite build",
-    "preview": "vite preview",
     "test": "vitest",
     "test:coverage": "vitest --coverage",
-    "type-check": "vue-tsc --noEmit",
-    "lint": "eslint . --fix",
-    "format": "prettier --write src/",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build && node scripts/storybook-seo.mjs",
-    "bundle-size": "size-limit"
+    "type-check": "node node_modules/typescript7/bin/tsc --noEmit",
+    "lint": "oxlint",
+    "format": "oxfmt",
+    "bundle-size": "size-limit",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   }
 }