# Component definitions

## Simple calculator

> nuget source //code.sharp8n.com/api/packages/Sharp8N/nuget/index.json
> nuget package S8n.Components.Basics

```yaml
code: basics.calculator
description: Do simple operations for numbers in `args` input.
inputs:
  - operator: string enum { add, subtract, multiply, divide }
  - args: object[]
outputs:
  - result: object
class: S8n.Components.Basics.Calculator
methods: Calc()
```

## Generic version

```yaml
code: basics.calculator<T>
description: Do simple operations for numbers in `args` input. T typeof INumberBase<>
inputs:
  - operator: string enum { add, subtract, multiply, divide }
  - args: T[]
outputs:
  - result: T
class: S8n.Components.Basics.Calculator<T>
methods: Calc()
```

```vue
<template>
  <q-card class="s8n-calculator">
    <q-select
      outlined
      v-model="inputs.operator"
      label="Operator"
      :options="['add', 'subtract', 'multiply', 'divide']"
    />
    <q-input outlined v-model="inputs.arg[0]" label="Arg1" />
    <q-input outlined v-model="inputs.arg[1]" label="Arg2" />

    <label>Result is: {{ outputs.result }}</label>

    <q-btn
      color="primary"
      @click="execute('Calc')"
      size="lg"
      icon="mdi-calculator"
    ></q-btn>
  </q-card>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { runtime } from "src/components/s8n-runtime";

const { execute, outputs, inputs } = runtime.createExecutor(
  "S8n.Components.Basics.Calculator",
);
</script>
<style lang="scss">
.s8n-calculator {
  padding: 1em;
}
</style>
```