# Vue 구성요소

## Content

Wijmo Vue 컴포넌트는 각각 별도의 npm 패키지로 제공됩니다. 각 npm 패키지 이름은 해당 기본 컨트롤 이름에 `"vue2"`가 추가된 형태입니다.
예를 들어, `"wijmo.vue2.grid"` 패키지는 기본 라이브러리 `"wijmo.grid"`에 대한 Vue 컴포넌트를 제공합니다.

## Vue 설치하기

필요한 컴포넌트만 설치하거나, `"wijmo.vue2.all"` 패키지를 사용하여 전체를 한 번에 설치할 수 있습니다:

```bash
npm install @mescius/wijmo.vue2.all
```

Wijmo의 NPM 패키지에 대한 자세한 내용은 [해당 주제](http://demo.grapecity.co.kr/wijmo/docs/GettingStarted/Referencing-Wijmo-NPM)를 참조해 주세요.

## Vue 프로젝트에서 Wijmo 컴포넌트 사용 방법

Vue 프로젝트에서는 Wijmo 컴포넌트를 두 가지 방법으로 사용할 수 있습니다:

* **사용자 정의 컴포넌트 레벨 등록(Custom Component-Level Registration)**
* **보조 등록 함수(Auxiliary Register Functions)**

## 사용자 정의 컴포넌트 레벨 등록

가장 간단한 방법은 **컴포넌트 레벨**에서 Wijmo 컴포넌트와 디렉티브를 등록하는 것입니다.
Vue에서는 **Composition API** 또는 **Options API**를 사용하여 Wijmo 컴포넌트를 통합할 수 있습니다.

### Composition API

```javascript
<script setup>
import { WjTooltip as vWjTooltip } from "@mescius/wijmo.vue2.core";
import { WjInputNumber } from "@mescius/wijmo.vue2.input";
</script>

<template>
  <button v-wjTooltip="'Click me'">Click</button>
  <wj-input-number></wj-input-number>
</template>
```

### Options API

```javascript
<template>
  <wj-input-number/>
  <button v-wjTooltip="'Click me'">Click</button>
</template>

<script>
import { WjTooltip } from '@mescius/wijmo.vue2.core';
import { WjInputNumber } from '@mescius/wijmo.vue2.input';

export default {
  components: {
    WjInputNumber,
  },
  directives: {
    WjTooltip,
  },
}
</script>
```

## 보조 등록 함수 사용

보조 등록 함수는 **특정 Wijmo 모듈의 모든 컴포넌트 및 디렉티브를 한 번에 등록**할 수 있도록 도와줍니다.
여러 컴포넌트를 등록해야 할 때 설정을 간소화할 수 있어 유용합니다.
**main.js**

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import '@mescius/wijmo.styles/wijmo.css';
import { registerGrid } from '@mescius/wijmo.vue2.grid';

let app = createApp(App);
registerGrid(app);
app.mount('#app');
```

**App.vue**

```javascript
<script setup>
import { ref } from 'vue';

const data = ref(getData());

function getData() {
  var data = [];
  var countries = "US,Japan,India,Italy,UK".split(",");
  for (let i = 0; i < 5; i++) {
    data.push({
      id: i + 1,
      country: countries[i % countries.length],
      sales: Math.random() * 1000,
      downloads: Math.random() * 1000,
    });
  }
  return data;
}
</script>

<template>
  <wj-flex-grid :itemsSource="data"></wj-flex-grid>
</template>
```

>type=info
> ※ 보조 등록 함수(`registerInput`, `registerGrid` 등)는 SPA(싱글 페이지 애플리케이션) 루트 모듈(main.js)에서 **한 번만 호출**하면 됩니다.

## Wijmo CSS 추가하기

Wijmo 스타일은 `@mescius/wijmo.styles` npm 패키지에 포함되어 있으며, 다음과 같은 두 가지 CSS 파일이 있습니다:

* **wijmo.css**: 모든 컨트롤 스타일 포함
* **wijmo-core.css**: Enterprise 컨트롤 스타일을 제외한 축약 버전

Vue 애플리케이션에서는 다음 방법 중 하나로 스타일을 추가할 수 있습니다:

* `App.vue` 파일 또는 루트 Vue 컴포넌트에 import
* `main.js` 파일 상단에 import (Composition API + 전역 등록 시 추천)

```javascript
import "@mescius/wijmo.styles/wijmo.css";
```

## Vue 템플릿 문법

Wijmo Vue 컴포넌트는 **일관된 명명 규칙**을 따릅니다:

* **HTML 엘리먼트 이름**: 소문자와 대시(`-`) 사용 → 예: `<wj-input-number>`
* **속성, 이벤트 이름**: `camelCase` 또는 `lower-case-dash` 모두 허용

예시:

```html
<wj-input-number :value="amount"></wj-input-number>
```

또는 컴포넌트를 camelCase로 등록해 사용:
**main.js**

```javascript
import { WjInputNumber, WjInputColor } from "@mescius/wijmo.vue2.input";

let app = createApp(App);
app.component('WjInputNumber', WjInputNumber)
   .component('WjInputColor', WjInputColor);
app.mount('#app');
```

**App.vue**

```javascript
<WjInputNumber></WjInputNumber>
<WjInputColor></WjInputColor>
```

## 바인딩 방법

* **단방향 바인딩**: `v-bind:` 또는 `:` 접두사 사용
* **양방향 바인딩**: `v-model` 사용

예시:

```javascript
<wj-input-number 
  v-model:value="amount"    // 양방향 바인딩
  format="n0"               // 문자열 상수 바인딩
  :is-read-only="true"      // 불리언 바인딩
  :valueChanged="valueChanged"> // 이벤트 바인딩
</wj-input-number>
```

## 이벤트 핸들러 세부 사항

Wijmo 이벤트 핸들러는 **sender**와 **eventArgs** 두 매개변수를 받습니다.
Vue 사용 방식에 따라 작성 방법이 조금 다릅니다.
**Options API 예시**

```javascript
<template>
  <wj-input-number :value="amount" :value-changed="onValueChanged"></wj-input-number>
</template>

<script>
export default {
  methods: {
    onValueChanged(sender, args) {
      this.amount = sender.value;
    }
  }
}
</script>
```

**Composition API 예시**

```auto
<script setup>
import { ref } from 'vue';

const amount = ref(100);

function valueChanged(sender, args) {
  amount.value = sender.value;
}
</script>

<template>
  <wj-input-number :value="amount" :valueChanged="valueChanged"></wj-input-number>
</template>
```

### "초기화(initialized)"이벤트

모든 Wijmo Vue 컴포넌트에는 **`initialized` 이벤트**가 있습니다.
이 이벤트는 컨트롤이 페이지에 추가되고 초기화된 후 발생합니다.
추가 초기화 작업이 필요할 때 사용할 수 있습니다.

#### Options API

```html
<template>
  <wj-flex-grid :initialized="initGrid"></wj-flex-grid>
</template>

<script>
export default {
  methods: {
    initGrid(grid, args) {
      grid.mergeManager = new CustomMerge(grid);
    }
  }
}
</script>
```

#### Composition API

```javascript
<script setup>
function initGrid(sender, args) {
  // 추가 설정
}
</script>

<template>
  <wj-flex-grid :initialized="initGrid"></wj-flex-grid>
</template>
```

## 코드에서 Wijmo 컨트롤 만들기

Wijmo Vue 컴포넌트는 **템플릿 마크업**에서 사용하도록 설계되었습니다.
**코드로 컨트롤을 직접 생성**해야 하는 경우에는 Vue 컴포넌트가 아닌, 기본 Wijmo 모듈을 사용해야 합니다.
예를 들어 FlexGrid를 코드로 생성하려면 아래와 같습니다.:

```javascript
import { FlexGrid } from '@mescius/wijmo.grid';
let flex = new FlexGrid('#host_element');
```