first component def

basics/calculator.md

@@ -0,0 +1,69 @@
+# 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>
+```