# VinEditor

const numberEditor = VGridVueEditor(Vue.component("vueEditor", numberComp));

## Props

| Name                 | Type      | Description | Default                                   |
| -------------------- | --------- | ----------- | ----------------------------------------- |
| `row-index`          | `Number`  |             |                                           |
| `prop`               | `String`  |             |                                           |
| `model`              | `Object`  |             |                                           |
| `column`             | `Object`  |             |                                           |
| `data`               | `Array`   |             |                                           |
| `inner-class`        | `String`  |             |                                           |
| `prop`               | `unknown` |             |                                           |
| `model`              | `unknown` |             |                                           |
| `column`             | `unknown` |             |                                           |
| `row-index`          | `unknown` |             |                                           |
| `data`               | `unknown` |             |                                           |
| `row-index`          | `unknown` |             |                                           |
| `prop`               | `unknown` |             |                                           |
| `column`             | `unknown` |             |                                           |
| `model`              | `unknown` |             |                                           |
| `close`              | `unknown` |             |                                           |
| `save`               | `unknown` |             |                                           |
| `columns`            | `Array`   |             | `function() {         return [];       }` |
| `rows`               | `Array`   |             | `function() {         return [];       }` |
| `row-index`          | `unknown` |             |                                           |
| `prop`               | `unknown` |             |                                           |
| `column`             | `unknown` |             |                                           |
| `model`              | `unknown` |             |                                           |
| `close`              | `unknown` |             |                                           |
| `save`               | `unknown` |             |                                           |
| `title`              | `String`  |             | `null`                                    |
| `theme`              | `String`  |             | `"compact"`                               |
| `readonly`           | `Boolean` |             | `true`                                    |
| `columns` *required* | `Array`   |             |                                           |
| `rows` *required*    | `Array`   |             |                                           |
| `range`              | `Boolean` |             | `true`                                    |
| `filter`             | `Boolean` |             | `true`                                    |
| `data-types`         | `Object`  |             |                                           |
| `css-style`          | `String`  |             |                                           |
| `row-headers`        | `Boolean` |             | `true`                                    |
| `resize`             | `Boolean` |             | `true`                                    |
| `row-class`          | `String`  |             | `"rowClass"`                              |
| `css`                | `Object`  |             |                                           |
| `row-index`          | `unknown` |             |                                           |
| `prop`               | `unknown` |             |                                           |
| `column`             | `unknown` |             |                                           |
| `model`              | `unknown` |             |                                           |
| `close`              | `unknown` |             |                                           |
| `save`               | `unknown` |             | &nbsp;                                    |

## Data

| Name          | Type      | Description | Initial value                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ------------- | --------- | ----------- |   |
| `columnTypes` | `object`  |             | `{}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `hexTokens`   | `object`  |             | `{"F":{"type":"object","value":{"pattern":{"type":"regexp","value":"/[0-9a-fA-F]/","raw":"/[0-9a-fA-F]/","member":false},"transform":{"type":"ArrowFunctionExpression","value":"(v) => v.toLocaleUpperCase()","raw":"(v) => v.toLocaleUpperCase()","member":false}},"raw":"{\"pattern\":{\"type\":\"regexp\",\"value\":\"/[0-9a-fA-F]/\",\"raw\":\"/[0-9a-fA-F]/\",\"member\":false},\"transform\":{\"type\":\"ArrowFunctionExpression\",\"value\":\"(v) => v.toLocaleUpperCase()\",\"raw\":\"(v) => v.toLocaleUpperCase()\",\"member\":false}}","member":false}}` |
| `gridEditors` | `object`  |             | `{"vin":{"type":"unknown","value":"VGridVueEditor(Vue.component(\"vueEditor\", VINComp))","raw":"VGridVueEditor(Vue.component(\"vueEditor\", VINComp))","member":false}}`                                                                                                                                                                                                                                                                                                                                                                                          |
| `columnTypes` | `object`  |             | `{"number":{"type":"NumberColumnType","value":"new NumberColumnType(\"0,0\")","raw":"new NumberColumnType(\"0,0\")","member":false},"currency":{"type":"NumberColumnType","value":"new NumberColumnType(\"$0,0.00\")","raw":"new NumberColumnType(\"$0,0.00\")","member":false},"date":{"type":"VGridDate","value":"new VGridDate()","raw":"new VGridDate()","member":false}}`                                                                                                                                                                                     |
| `valid`       | `boolean` |             | `true`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |

## Computed Properties

| Name              | Type      | Description                                  |
| ----------------- | --------- | -------------------------------------------- |
| `computedColumns` | `unknown` | **Dependencies:** `columns`, `getColumnIcon` |
| `vinValue`        | `object`  | **Dependencies:** `model`, `prop`            |
| `isValid`         | `boolean` | **Dependencies:** `valid`                    |

## Events

| Name         | Description                                                                                                                                                                                                                     |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `col-resize` | <br/>**Arguments**<br/><ul><li>**`{ type: "aftercolumnresize", id: e.detail[Object.getOwnPropertyNames(e.detail)[0]].id, field: e.detail, width: e.detail[Object.getOwnPropertyNames(e.detail)[0]].size, }: object`**</li></ul> |

## Methods

### updateText()

**Syntax**

```typescript
updateText(): void
```

### updateText()

**Syntax**

```typescript
updateText(): void
```

### aftercolumnresize()

**Syntax**

```typescript
aftercolumnresize(e: unknown): void
```

### headerclick()

**Syntax**

```typescript
headerclick(): void
```

### eventHandler()

**Syntax**

```typescript
eventHandler(e: unknown): void
```

### getColumnIcon()

**Syntax**

```typescript
getColumnIcon(column: unknown): unknown
```

### focusInput()

**Syntax**

```typescript
focusInput(): void
```

### validateVin()

**Syntax**

```typescript
validateVin(event: unknown): unknown
```

### updateVIN()

**Syntax**

```typescript
updateVIN(event: unknown): void
```

### closeEditor()

**Syntax**

```typescript
closeEditor(event: unknown): void
```

