@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.20 → 1.0.22

package/build/components/examples/opsnow-common-forms-examples-data.js

@@ -136,6 +136,22 @@ export const ButtonExamples = [
         title: 'medium-outlined-error',
         code: `<OpsnowCommonButton label="Label" variant="outlined" color="error" onClick={muiButtonTest} />`,
         description: '중간 크기의 Outlined Error 버튼 예제입니다.'
+    },
+    // === Loading examples ===
+    {
+        title: 'loading-contained-primary',
+        code: `<OpsnowCommonButton label="Save" loading onClick={handleSave} />`,
+        description: 'Contained Primary 버튼의 로딩 상태 예제입니다.'
+    },
+    {
+        title: 'loading-outlined-primary',
+        code: `<OpsnowCommonButton label="Submit" variant="outlined" loading onClick={handleSubmit} />`,
+        description: 'Outlined Primary 버튼의 로딩 상태 예제입니다.'
+    },
+    {
+        title: 'loading-text-primary',
+        code: `<OpsnowCommonButton label="Load More" variant="text" loading onClick={handleLoadMore} />`,
+        description: 'Text Primary 버튼의 로딩 상태 예제입니다.'
     }
 ];
 export const BadgeExamples = [

package/build/components/examples/opsnow-common-layout-examples-data.js

@@ -69,4 +69,29 @@ export const MegaFilterExamples = [
         description: '벤더 선택, 날짜 범위, 필터 기능이 포함된 MegaFilter 예제입니다.',
         code: `<OpsnowCommonMegaFilter filters={filters} vendors={vendors} selectedVendor={selectedVendor} onVendorChange={handleVendorChange} onFilterChange={handleFilterChange} selectedDateRange={selectedDateRange} onDateRangeChange={handleDateRangeChange} locale="ko" title="필터" clearAllText="전체 초기화" applyText="적용" cancelText="취소" />`,
     },
+    {
+        title: 'megafilter-button-click-apply',
+        description: '버튼 클릭 시 필터를 적용하는 방식의 MegaFilter 예제입니다. addText로 개별 필터 추가 버튼 텍스트를 설정하고, onFilterChange를 async로 처리합니다.',
+        code: `<OpsnowCommonMegaFilter
+  filters={sampleFilters}
+  vendors={vendorOptions}
+  selectedVendor={selectedVendor}
+  onVendorChange={(vendor) => setSelectedVendor(vendor)}
+  onFilterChange={async (newFilterState) => {
+    await fetchData(newFilterState);
+    setFilterState(newFilterState);
+  }}
+  selectedDateRange={selectedDateRange}
+  onDateRangeChange={(range) => setSelectedDateRange(range)}
+  locale="en"
+  title="Filters"
+  clearAllText="Clear All"
+  clearText="Clear"
+  applyText="Apply"
+  addText="Add"
+  cancelText="Cancel"
+  searchPlaceholder="Search..."
+  noItemsText="No items found"
+/>`,
+    },
 ];

package/build/components/examples/opsnow-common-select-examples-data.js

@@ -102,5 +102,20 @@ export const AutocompleteExamples = [
         title: 'Autocomplete - 비동기 로딩',
         code: `<OpsnowCommonAutocomplete items={asyncItems} loading={loading} value={value} onChange={setValue} label="Select Async Option" />`,
         description: '비동기 데이터 로딩/로딩 상태 오토컴플리트 예제입니다.'
+    },
+    {
+        title: 'Autocomplete - Label + Placeholder (단일)',
+        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }]} multiple={false} value={value} onChange={setValue} label="Category" placeholder="Select a category" />`,
+        description: 'label과 placeholder를 함께 사용하는 단일 선택 오토컴플리트 예제입니다.'
+    },
+    {
+        title: 'Autocomplete - Label + Placeholder (다중)',
+        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }]} multiple value={value} onChange={setValue} label="Tags" placeholder="Search tags..." useCheckboxOption />`,
+        description: 'label과 placeholder를 함께 사용하는 다중 선택 오토컴플리트 예제입니다.'
+    },
+    {
+        title: 'Autocomplete - Placeholder only (no label)',
+        code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }]} multiple={false} value={value} onChange={setValue} placeholder="Search..." />`,
+        description: 'label 없이 placeholder만 사용하는 오토컴플리트 예제입니다.'
     }
 ];

package/build/components/opsnow-common-forms.js

@@ -12,6 +12,7 @@ export const ButtonSchema = z.object({
     iconPosition: z.enum(["left", "right"]).optional().describe("아이콘 위치"),
     iconOnly: z.boolean().optional().describe("아이콘만 표시"),
     disabled: z.boolean().optional().describe("비활성화 여부"),
+    loading: z.boolean().optional().describe("로딩 상태"),
     onClick: z.string().optional().describe("클릭 이벤트 핸들러")
 });
 // Badge 컴포넌트 관련 스키마 정의
@@ -300,6 +301,8 @@ export function createFormsComponent() {
                     props.push(`iconOnly`);
                 if (args.disabled)
                     props.push(`disabled`);
+                if (args.loading)
+                    props.push(`loading`);
                 if (args.onClick)
                     props.push(`onClick={${args.onClick}}`);
                 const code = `<OpsnowCommonButton ${props.join(' ')} />`;

package/build/components/opsnow-common-layout.js

@@ -34,6 +34,7 @@ const MegaFilterSchema = z.object({
     cancelText: z.string().optional().describe("취소 버튼 텍스트"),
     searchPlaceholder: z.string().optional().describe("검색 입력 placeholder"),
     noItemsText: z.string().optional().describe("검색 결과 없음 텍스트"),
+    addText: z.string().optional().describe("개별 필터 추가 버튼 텍스트"),
 });
 export function createGridLayoutComponent() {
     return [
@@ -123,6 +124,8 @@ export function createGridLayoutComponent() {
                     props.push(`searchPlaceholder="${args.searchPlaceholder}"`);
                 if (args.noItemsText)
                     props.push(`noItemsText="${args.noItemsText}"`);
+                if (args.addText)
+                    props.push(`addText="${args.addText}"`);
                 const code = `<OpsnowCommonMegaFilter\n  ${props.join('\n  ')}\n/>`;
                 return {
                     content: [

package/build/components/opsnow-common-select.js

@@ -31,6 +31,7 @@ export const AutocompleteSelectSchema = z.object({
     disableCloseOnSelect: z.boolean().optional().default(false).describe("선택 시 닫힘 방지 여부"),
     loading: z.boolean().optional().default(false).describe("로딩 상태 표시 여부"),
     label: z.string().optional().describe("라벨 텍스트"),
+    placeholder: z.string().optional().describe("플레이스홀더 텍스트"),
     disabled: z.boolean().optional().default(false).describe("전체 비활성화 여부")
 });
 // Select 컴포넌트 함수 - 배열 반환
@@ -114,6 +115,8 @@ export function createSelectComponent() {
                     props.push(`loading`);
                 if (args.label)
                     props.push(`label=\"${args.label}\"`);
+                if (args.placeholder)
+                    props.push(`placeholder=\"${args.placeholder}\"`);
                 if (args.disabled)
                     props.push(`disabled`);
                 props.push(`onChange={setValue}`);

package/build/index.js

@@ -67,7 +67,7 @@ Before implementing OpsnowCommonDataGrid, you MUST use getUIExamples tool with '
    <OpsnowCommonDataGrid usedSearch={true} />
 
    Reference example: "Insert Button Inside the Common Grid Search Section"
-빌
+
 2. Grid Bottom Pagination - You MUST use built-in pagination prop:
 
    [CORRECT] Using built-in pagination:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opsnow-mcp/opsnow-mcp-common-ui-server",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "type": "module",
   "main": "index.js",
   "bin": {