From 79facb1bd8a383a7cfa32740fae82931a7d38c81 Mon Sep 17 00:00:00 2001
From: PaddiM8 <paddim8@pm.me>
Date: Tue, 5 Jan 2021 01:25:30 +0100
Subject: [PATCH] kalk_web placeholder

---
 kalk_web/README.md                 | 1 +
 kalk_web/package.json              | 4 ++--
 kalk_web/src/KalkCalculator.svelte | 9 +++++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/kalk_web/README.md b/kalk_web/README.md
index d0d44a2..7eba32c 100644
--- a/kalk_web/README.md
+++ b/kalk_web/README.md
@@ -38,6 +38,7 @@ I am not aware of a better way.
 The colours in the component can be changed by using these attributes.
 ```html
 <kalk-calculator
+    hintText="Type something..." 
     identifierColor="cornflowerblue"
     operatorColor="darkorange"
     promptColor="mediumseagreen"
diff --git a/kalk_web/package.json b/kalk_web/package.json
index 79824d8..ddf84f9 100644
--- a/kalk_web/package.json
+++ b/kalk_web/package.json
@@ -1,6 +1,6 @@
 {
 	"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.",
 	"svelte": "src/main.ts",
 	"main": "public/build/bundle.js",
@@ -60,4 +60,4 @@
 	"browserslist": [
 		"defaults"
 	]
-}
+}
\ No newline at end of file
diff --git a/kalk_web/src/KalkCalculator.svelte b/kalk_web/src/KalkCalculator.svelte
index d1e8f11..95d76e9 100644
--- a/kalk_web/src/KalkCalculator.svelte
+++ b/kalk_web/src/KalkCalculator.svelte
@@ -8,6 +8,7 @@
     export let promptColor = "mediumseagreen";
     export let errorColor = "tomato";
     export let linkColor = "cornflowerblue";
+    export let hintText = "";
 
     type Kalk = typeof import("@paddim8/kalk");
 
@@ -282,6 +283,13 @@
             outline: none;
         }
     }
+
+    [contenteditable][placeholder]:empty:before {
+        content: attr(placeholder);
+        position: absolute;
+        color: gray;
+        background-color: transparent;
+    }
 </style>
 
 <svelte:options tag="kalk-calculator" />
@@ -305,6 +313,7 @@
             <div
                 contenteditable="true"
                 class="input"
+                placeholder={hintText}
                 on:keydown={(event) => handleKeyDown(event, kalk)}
                 on:keyup={handleKeyUp}
                 on:input={handleInput}