mirror of
https://github.com/PaddiM8/kalker.git
synced 2025-06-27 21:21:42 +02:00
Fixed kalk_web properties for non-svelte usage
This commit is contained in:
parent
79facb1bd8
commit
a550e3e1c7
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@paddim8/kalk-component",
|
"name": "@paddim8/kalk-component",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
|
"description": "A Svelte component for kalk, a calculator that supports user-defined functions and variables.",
|
||||||
"svelte": "src/main.ts",
|
"svelte": "src/main.ts",
|
||||||
"main": "public/build/bundle.js",
|
"main": "public/build/bundle.js",
|
||||||
|
@ -37,7 +37,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<section id="wrapper">
|
<section id="wrapper">
|
||||||
<div class="calculator">
|
<div class="calculator">
|
||||||
<kalk-calculator>
|
<kalk-calculator hinttext="test">
|
||||||
<console-line>kalk</console-line>
|
<console-line>kalk</console-line>
|
||||||
<console-line>
|
<console-line>
|
||||||
<span class="hint">Type 'help' for instructions.</span>
|
<span class="hint">Type 'help' for instructions.</span>
|
||||||
|
@ -3,12 +3,13 @@
|
|||||||
import ConsoleLine from "./ConsoleLine.svelte";
|
import ConsoleLine from "./ConsoleLine.svelte";
|
||||||
import type { Context } from "@paddim8/kalk";
|
import type { Context } from "@paddim8/kalk";
|
||||||
|
|
||||||
export let identifierColor = "cornflowerblue";
|
// Props, HTML doesn't recognise them if they're not like this
|
||||||
export let operatorColor = "darkorange";
|
export let identifiercolor = "cornflowerblue";
|
||||||
export let promptColor = "mediumseagreen";
|
export let operatorcolor = "darkorange";
|
||||||
export let errorColor = "tomato";
|
export let promptcolor = "mediumseagreen";
|
||||||
export let linkColor = "cornflowerblue";
|
export let errorcolor = "tomato";
|
||||||
export let hintText = "";
|
export let linkcolor = "cornflowerblue";
|
||||||
|
export let hinttext = "";
|
||||||
|
|
||||||
type Kalk = typeof import("@paddim8/kalk");
|
type Kalk = typeof import("@paddim8/kalk");
|
||||||
|
|
||||||
@ -52,14 +53,14 @@
|
|||||||
let output: string;
|
let output: string;
|
||||||
|
|
||||||
if (input.trim() == "help") {
|
if (input.trim() == "help") {
|
||||||
output = `<a style="color: ${linkColor}"
|
output = `<a style="color: ${linkcolor}"
|
||||||
href="https://kalk.netlify.app/#usage"
|
href="https://kalk.netlify.app/#usage"
|
||||||
target="blank">Link to usage guide</a>`;
|
target="blank">Link to usage guide</a>`;
|
||||||
} else {
|
} else {
|
||||||
const [result, success] = calculate(kalk, input);
|
const [result, success] = calculate(kalk, input);
|
||||||
output = success
|
output = success
|
||||||
? highlight(result)[0]
|
? highlight(result)[0]
|
||||||
: `<span style="color: ${errorColor}">${result}</span>`;
|
: `<span style="color: ${errorcolor}">${result}</span>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
outputLines = output
|
outputLines = output
|
||||||
@ -216,11 +217,11 @@
|
|||||||
|
|
||||||
offset += substring.length - newSubstring.length;
|
offset += substring.length - newSubstring.length;
|
||||||
|
|
||||||
return `<span style="color: ${identifierColor}">${newSubstring}</span>`;
|
return `<span style="color: ${identifiercolor}">${newSubstring}</span>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (op) {
|
if (op) {
|
||||||
return `<span style="color: ${operatorColor}">${substring}</span>`;
|
return `<span style="color: ${operatorcolor}">${substring}</span>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return substring;
|
return substring;
|
||||||
@ -299,27 +300,27 @@
|
|||||||
{#each outputLines as line}
|
{#each outputLines as line}
|
||||||
<console-line byUser={line[1]}>
|
<console-line byUser={line[1]}>
|
||||||
{#if line[1]}
|
{#if line[1]}
|
||||||
<span style="color: {promptColor}">>></span>
|
<span style="color: {promptcolor}">>></span>
|
||||||
{/if}
|
{/if}
|
||||||
{@html line[0]}
|
{@html line[0]}
|
||||||
</console-line>
|
</console-line>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<div class="input-area">
|
<div class="input-area">
|
||||||
<span class="prompt" style="color: {promptColor}">>> </span>
|
<span class="prompt" style="color: {promptcolor}">>> </span>
|
||||||
{#await import('@paddim8/kalk')}
|
{#await import('@paddim8/kalk')}
|
||||||
<span>Loading...</span>
|
<span>Loading...</span>
|
||||||
{:then kalk}
|
{:then kalk}
|
||||||
<div
|
<div
|
||||||
contenteditable="true"
|
contenteditable="true"
|
||||||
class="input"
|
class="input"
|
||||||
placeholder={hintText}
|
placeholder={hinttext}
|
||||||
on:keydown={(event) => handleKeyDown(event, kalk)}
|
on:keydown={(event) => handleKeyDown(event, kalk)}
|
||||||
on:keyup={handleKeyUp}
|
on:keyup={handleKeyUp}
|
||||||
on:input={handleInput}
|
on:input={handleInput}
|
||||||
role="textbox" />
|
role="textbox" />
|
||||||
{:catch error}
|
{:catch error}
|
||||||
<span style="color: {errorColor}">{error}</span>
|
<span style="color: {errorcolor}">{error}</span>
|
||||||
{/await}
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user