70 lines
1.5 KiB
Markdown
70 lines
1.5 KiB
Markdown
# 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>
|
|
```
|