@krds.ui/vue 0.0.3 → 0.0.4

package/dist/types/index.d.ts

@@ -38,6 +38,18 @@ export declare interface BaseFormProps extends BaseComponentProps {
     readonly?: boolean;
 }
 
+/**
+ * 브레드크럼 아이템 인터페이스
+ */
+export declare interface BreadcrumbItem {
+    /** 텍스트 */
+    text: string;
+    /** 링크 URL */
+    href?: string;
+    /** 클릭 핸들러 */
+    onClick?: (event: MouseEvent) => void;
+}
+
 /**
  * 클래스명을 조합합니다.
  *
@@ -157,6 +169,37 @@ export declare interface KrdsBadgeProps extends BaseComponentProps {
     size?: 'large' | 'medium' | 'small';
 }
 
+export declare const KrdsBreadcrumb: DefineComponent<KrdsBreadcrumbProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"item-click": (item: BreadcrumbItem, event: MouseEvent) => any;
+}, string, PublicProps, Readonly<KrdsBreadcrumbProps> & Readonly<{
+"onItem-click"?: ((item: BreadcrumbItem, event: MouseEvent) => any) | undefined;
+}>, {
+id: string;
+ariaLabel: string;
+showHomeIcon: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
+
+/**
+ * KRDS Breadcrumb 컴포넌트 이벤트
+ */
+export declare interface KrdsBreadcrumbEmits {
+    'item-click': [item: BreadcrumbItem, event: MouseEvent];
+}
+
+/**
+ * KRDS Breadcrumb 컴포넌트 속성
+ */
+export declare interface KrdsBreadcrumbProps {
+    /** 브레드크럼 아이템 배열 */
+    items: BreadcrumbItem[];
+    /** 엘리먼트 ID */
+    id?: string;
+    /** 접근성 라벨 */
+    ariaLabel?: string;
+    /** 홈 아이콘 표시 여부 */
+    showHomeIcon?: boolean;
+}
+
 export declare const KrdsButton: DefineComponent<KrdsButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<KrdsButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 /**
@@ -616,6 +659,33 @@ export declare interface KrdsIconProps extends BaseComponentProps {
     name: string;
 }
 
+export declare const KrdsInPageNavigation: DefineComponent<KrdsInPageNavigationProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<KrdsInPageNavigationProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+/**
+ * KRDS InPageNavigation 컴포넌트 이벤트
+ */
+export declare interface KrdsInPageNavigationEmits {
+    (e: 'itemClick', item: NavigationItem, event: MouseEvent | KeyboardEvent): void;
+}
+
+/**
+ * KRDS InPageNavigation 컴포넌트 속성
+ */
+export declare interface KrdsInPageNavigationProps extends BaseComponentProps {
+    /** 네비게이션 제목 */
+    title?: string;
+    /** 네비게이션 캡션 */
+    caption?: string;
+    /** 네비게이션 아이템 목록 */
+    items?: NavigationItem[];
+    /** 스크롤에 따른 자동 활성화 여부 */
+    autoActive?: boolean;
+    /** 헤더 상단 영역 선택자 (기본값: '#krds-masthead') */
+    headerTopSelector?: string;
+    /** 헤더 내부 영역 선택자 (기본값: '#krds-header .header-in') */
+    headerInnerSelector?: string;
+}
+
 export declare const KrdsInput: DefineComponent<KrdsInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<KrdsInputProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 /**
@@ -663,6 +733,8 @@ export declare interface KrdsInputProps extends BaseFormProps {
     state?: 'default' | 'error' | 'success' | 'information';
     /** 아이콘 (있을 때 btn-ico-wrap 클래스 적용) */
     icon?: boolean;
+    /** 로딩 상태 */
+    loading?: boolean;
 }
 
 export declare const KrdsLink: DefineComponent<KrdsLinkProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<KrdsLinkProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -706,6 +778,171 @@ export declare const KrdsMasthead: DefineComponent<BaseComponentProps, {}, {}, {
  */
 export declare type KrdsMastheadProps = BaseComponentProps;
 
+export declare const KrdsPagination: DefineComponent<KrdsPaginationProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: number) => any;
+}, string, PublicProps, Readonly<KrdsPaginationProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+id: string;
+modelValue: number;
+min: number;
+ariaLabel: string;
+pageRange: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+/**
+ * KRDS Pagination 컴포넌트 이벤트
+ */
+export declare interface KrdsPaginationEmits {
+    /** v-model 업데이트 이벤트 */
+    'update:modelValue': [value: number];
+}
+
+/**
+ * KRDS Pagination 컴포넌트 속성
+ */
+export declare interface KrdsPaginationProps {
+    /** 현재 페이지 번호 (v-model) */
+    modelValue?: number;
+    /** 최소 페이지 번호 (기본값: 1, 최소값: 1) */
+    min?: number;
+    /** 최대 페이지 번호 (전체 페이지 수) */
+    max: number;
+    /** 엘리먼트 ID */
+    id?: string;
+    /** 접근성 라벨 */
+    ariaLabel?: string;
+    /** 표시할 페이지 범위 */
+    pageRange?: number;
+}
+
+/**
+ * KRDS SkipLink 컴포넌트
+ *
+ * 건너뛰기 링크는 웹사이트에서 웹 페이지의 주요 콘텐츠 섹션의 탐색을 도와주는 페이지 내부 링크입니다.
+ * 키보드나 가상 초점을 이용하여 콘텐츠를 탐색하는 사용자는 건너뛰기 링크를 이용하여
+ * 대부분의 페이지에서 반복되는 콘텐츠 영역을 건너뛰고 주요 콘텐츠로 빠르게 이동할 수 있습니다.
+ *
+ * @example
+ * ```vue
+ * <KrdsSkipLink href="#main-content">본문 바로가기</KrdsSkipLink>
+ * <KrdsSkipLink href="#breadcrumb">본문 바로가기</KrdsSkipLink>
+ * <KrdsSkipLink href="#gnb">메인메뉴 바로가기</KrdsSkipLink>
+ * ```
+ */
+export declare const KrdsSkipLink: DefineComponent<ExtractPropTypes<    {
+/**
+* 건너뛸 대상 요소의 ID
+* @example '#main-content', '#breadcrumb'
+*/
+href: {
+type: StringConstructor;
+required: true;
+validator: (value: string) => boolean;
+};
+/**
+* 추가 CSS 클래스
+*/
+class: {
+type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+default: undefined;
+};
+/**
+* 요소 ID
+*/
+id: {
+type: StringConstructor;
+default: string;
+};
+}>, () => VNode, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+/**
+* 건너뛸 대상 요소의 ID
+* @example '#main-content', '#breadcrumb'
+*/
+href: {
+type: StringConstructor;
+required: true;
+validator: (value: string) => boolean;
+};
+/**
+* 추가 CSS 클래스
+*/
+class: {
+type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+default: undefined;
+};
+/**
+* 요소 ID
+*/
+id: {
+type: StringConstructor;
+default: string;
+};
+}>> & Readonly<{}>, {
+class: string | unknown[] | Record<string, any>;
+id: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+/**
+ * KRDS SkipLink 컴포넌트 속성
+ */
+export declare interface KrdsSkipLinkProps extends BaseComponentProps {
+    /** 건너뛸 대상 요소의 ID */
+    href: string;
+}
+
+export declare const KrdsSpinner: DefineComponent<ExtractPropTypes<    {
+label: {
+type: StringConstructor;
+default: undefined;
+};
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+label: {
+type: StringConstructor;
+default: undefined;
+};
+}>> & Readonly<{}>, {
+label: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare const KrdsStep: DefineComponent<KrdsStepProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<KrdsStepProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+/**
+ * KRDS Step 컴포넌트 이벤트
+ */
+export declare interface KrdsStepEmits {
+    (e: 'click', event: MouseEvent, step: string | number): void;
+}
+
+export declare const KrdsStepIndicator: DefineComponent<KrdsStepIndicatorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<KrdsStepIndicatorProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+/**
+ * KRDS StepIndicator 컴포넌트 이벤트
+ */
+export declare interface KrdsStepIndicatorEmits {
+    (e: 'update:modelValue', value: number): void;
+}
+
+/**
+ * KRDS StepIndicator 컴포넌트 속성
+ */
+export declare interface KrdsStepIndicatorProps extends BaseComponentProps {
+    /** 현재 활성 단계 인덱스 (0부터 시작) - v-model */
+    modelValue?: number;
+}
+
+/**
+ * KRDS Step 컴포넌트 속성
+ */
+export declare interface KrdsStepProps extends BaseComponentProps {
+    /** 단계 번호 */
+    step: string | number;
+    /** 단계 제목 */
+    title: string;
+    /** 단계 상태 강제 설정 (선택적) */
+    status?: 'done' | 'active' | 'pending';
+}
+
 export declare const KrdsTag: DefineComponent<KrdsTagProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<KrdsTagProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 /**
@@ -1001,6 +1238,18 @@ export declare interface LoadingProps {
     loadingText?: string;
 }
 
+/**
+ * 네비게이션 아이템 인터페이스
+ */
+export declare interface NavigationItem {
+    /** 링크 URL (앵커 링크) */
+    href: string;
+    /** 표시될 텍스트 */
+    text: string;
+    /** 활성 상태 여부 */
+    active?: boolean;
+}
+
 /**
  * 유틸리티 타입들
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krds.ui/vue",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "KRDS Vue Design System - 한국 정부 디자인 시스템 Vue 컴포넌트 라이브러리",
   "keywords": [
     "krds",
@@ -44,25 +44,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "pnpm run type-check && pnpm run build:lib",
-    "build:lib": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
-    "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",
-    "bundle-size": "bundlewatch",
-    "release": "standard-version",
-    "release:minor": "standard-version --release-as minor",
-    "release:major": "standard-version --release-as major",
-    "release:patch": "standard-version --release-as patch",
-    "prepublishOnly": "pnpm run build"
-  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -113,5 +94,49 @@
     "node": ">=20.0.0",
     "pnpm": ">=9.0.0"
   },
-  "packageManager": "pnpm@9.15.2"
-}
+  "bundlewatch": {
+    "files": [
+      {
+        "path": "dist/krds-vue.es.js",
+        "maxSize": "50kb",
+        "compression": "gzip"
+      },
+      {
+        "path": "dist/krds-vue.umd.js",
+        "maxSize": "55kb",
+        "compression": "gzip"
+      },
+      {
+        "path": "dist/style.css",
+        "maxSize": "2mb",
+        "compression": "gzip"
+      }
+    ],
+    "ci": {
+      "repoBranchBase": "main",
+      "trackBranches": [
+        "main",
+        "develop"
+      ],
+      "commitStatusOverview": true
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "pnpm run type-check && pnpm run build:lib",
+    "build:lib": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
+    "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",
+    "bundle-size": "bundlewatch",
+    "release": "standard-version",
+    "release:minor": "standard-version --release-as minor",
+    "release:major": "standard-version --release-as major",
+    "release:patch": "standard-version --release-as patch"
+  }
+}