extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2024-12-14 02:20:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

kalk_web placeholder

Browse Source
This commit is contained in:
PaddiM8 2021-01-05 01:25:30 +01:00
parent a2153d3b16
commit 79facb1bd8
3 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
kalk_web/README.md
View File

@ -38,6 +38,7 @@ I am not aware of a better way.
The colours in the component can be changed by using these attributes. The colours in the component can be changed by using these attributes.
```html ```html
<kalk-calculator <kalk-calculator
hintText="Type something..."
identifierColor="cornflowerblue" identifierColor="cornflowerblue"
operatorColor="darkorange" operatorColor="darkorange"
promptColor="mediumseagreen" promptColor="mediumseagreen"

4
kalk_web/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@paddim8/kalk-component", "name": "@paddim8/kalk-component",
"version": "1.0.0", "version": "1.0.1",
"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",
@ -60,4 +60,4 @@
"browserslist": [ "browserslist": [
"defaults" "defaults"
] ]
} }

9
kalk_web/src/KalkCalculator.svelte
View File

@ -8,6 +8,7 @@
export let promptColor = "mediumseagreen"; export let promptColor = "mediumseagreen";
export let errorColor = "tomato"; export let errorColor = "tomato";
export let linkColor = "cornflowerblue"; export let linkColor = "cornflowerblue";
export let hintText = "";
type Kalk = typeof import("@paddim8/kalk"); type Kalk = typeof import("@paddim8/kalk");
@ -282,6 +283,13 @@
outline: none; outline: none;
} }
} }
[contenteditable][placeholder]:empty:before {
content: attr(placeholder);
position: absolute;
color: gray;
background-color: transparent;
}
</style> </style>
<svelte:options tag="kalk-calculator" /> <svelte:options tag="kalk-calculator" />
@ -305,6 +313,7 @@
<div <div
contenteditable="true" contenteditable="true"
class="input" class="input"
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}