97 lines
2.3 KiB
Vue
97 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<q-card class="s8n-calculator q-pa-md">
|
|||
|
|
<q-card-section>
|
|||
|
|
<div class="text-h6">Simple Calculator</div>
|
|||
|
|
</q-card-section>
|
|||
|
|
|
|||
|
|
<q-card-section class="q-gutter-md">
|
|||
|
|
<q-select
|
|||
|
|
outlined
|
|||
|
|
v-model="inputs.operator"
|
|||
|
|
label="Operator"
|
|||
|
|
:options="[
|
|||
|
|
{ label: 'Add (+)', value: 'add' },
|
|||
|
|
{ label: 'Subtract (-)', value: 'subtract' },
|
|||
|
|
{ label: 'Multiply (×)', value: 'multiply' },
|
|||
|
|
{ label: 'Divide (÷)', value: 'divide' },
|
|||
|
|
]"
|
|||
|
|
emit-value
|
|||
|
|
map-options
|
|||
|
|
/>
|
|||
|
|
<q-input
|
|||
|
|
v-for="(a, aidx) in inputs.args"
|
|||
|
|
:key="aidx"
|
|||
|
|
outlined
|
|||
|
|
v-model.number="inputs.args[aidx]"
|
|||
|
|
:label="`${aidx === 0 ? 'Base' : aidx === 1 ? 'Second' : aidx === 2 ? 'Third' : `${aidx + 1}th`} Number`"
|
|||
|
|
type="number"
|
|||
|
|
>
|
|||
|
|
<template v-slot:after>
|
|||
|
|
<q-btn
|
|||
|
|
v-if="aidx > 1"
|
|||
|
|
@click="inputs.args.splice(aidx, 1)"
|
|||
|
|
class="col-auto"
|
|||
|
|
icon="mdi-delete"
|
|||
|
|
color="negative"
|
|||
|
|
outline
|
|||
|
|
dense
|
|||
|
|
></q-btn>
|
|||
|
|
</template>
|
|||
|
|
</q-input>
|
|||
|
|
|
|||
|
|
<q-btn icon="mdi-plus" @click="inputs.args[inputs.args.length] = 0"></q-btn>
|
|||
|
|
|
|||
|
|
<div class="result-section q-mt-md">
|
|||
|
|
<q-banner v-if="error" class="bg-negative text-white" rounded>
|
|||
|
|
{{ error }}
|
|||
|
|
</q-banner>
|
|||
|
|
<div v-else-if="outputs !== undefined" class="text-h5 text-primary">
|
|||
|
|
Result: {{ outputs.result }} ({{ duration }}ms)
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</q-card-section>
|
|||
|
|
|
|||
|
|
<q-card-actions align="right">
|
|||
|
|
<q-btn
|
|||
|
|
color="primary"
|
|||
|
|
@click="execute('Calc')"
|
|||
|
|
:loading="running"
|
|||
|
|
size="lg"
|
|||
|
|
icon="calculate"
|
|||
|
|
label="Calculate"
|
|||
|
|
/>
|
|||
|
|
</q-card-actions>
|
|||
|
|
</q-card>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { runtime } from '../components/s8n-runtime';
|
|||
|
|
|
|||
|
|
const { execute, running, error, duration, outputs, inputs } = runtime.createExecutor<
|
|||
|
|
{
|
|||
|
|
operator: string;
|
|||
|
|
args: number[];
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
result?: number;
|
|||
|
|
}
|
|||
|
|
>('S8n.Components.Basics.Calculator', {
|
|||
|
|
operator: 'add',
|
|||
|
|
args: [0, 0],
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.s8n-calculator {
|
|||
|
|
max-width: 400px;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.result-section {
|
|||
|
|
min-height: 60px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|