v1.1.4

.editorconfig

@@ -0,0 +1,5 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4

.eslintrc.js

@@ -5,13 +5,10 @@ module.exports = {
 		node: true,
 		es6: true,
 	},
-	extends: ["eslint:recommended", "prettier"],
+	extends: ["plugin:cypress/recommended", "eslint:recommended", "prettier"],
 	parserOptions: {
 		ecmaVersion: 2020,
 		sourceType: "module",
-
-		project: "./tsconfig.json",
-		tsconfigRootDir: __dirname,
 		extraFileExtensions: [".svelte"],
 	},
 	plugins: ["svelte3"],

.gitignore

@@ -1,13 +1,3 @@
-node_modules
-package-lock.json
-
-*.zip
-.Ds_store
-*.tgz
-*.log
-.vscode
-.idea
-
-public/demos
-public/dist
-public/stats.html
+dist
+cypress/screenshots
+cypress/videos

.npmrc

@@ -0,0 +1 @@
+@wx:registry=https://npm.svar.dev/

.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"semi": true,
+	"singleQuote": false,
+	"quoteProps": "as-needed",
+	"trailingComma": "es5",
+	"bracketSpacing": true,
+	"arrowParens": "avoid",
+	"svelteSortOrder": "options-scripts-markup-styles",
+	"vueIndentScriptAndStyle": true,
+	"plugins": [
+		"prettier-plugin-svelte"
+	],
+    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

demos/common/Area.svelte → demos/cases/Area.svelte

@@ -1,29 +1,32 @@
 <script>
 	import { Area, Field } from "../../src/index";
 	let v1, v2;
-
 </script>
 
 <div class="demo-box">
-	<h4>Area with a top label</h4>
+	<h3>Area with a top label</h3>
 	<Field label="Details" let:id>
 		<Area bind:value={v1} {id} placeholder="Type here" />
 	</Field>
 	<Field label="Disabled" let:id>
 		<Area bind:value={v1} {id} disabled placeholder="Type here" />
 	</Field>
+	<Field label="Readonly" let:id>
+		<Area bind:value={v1} {id} readonly placeholder="Type here" />
+	</Field>
 	<Field label="Error" let:id error>
 		<Area
 			bind:value={v1}
 			{id}
 			error
 			placeholder="Type here"
-			title="It can't be empty" />
+			title="It can't be empty"
+		/>
 	</Field>
 </div>
 
 <div class="demo-box">
-	<h4>Area with a side label</h4>
+	<h3>Area with a side label</h3>
 	<Field label="Details" position="left" let:id>
 		<Area bind:value={v2} {id} placeholder="Type here" />
 	</Field>

demos/cases/Buttons.svelte

@@ -0,0 +1,83 @@
+<script>
+	import { Button } from "../../src/index";
+	import { getContext } from "svelte";
+
+	const { showNotice } = getContext("wx-helpers");
+
+	function click() {
+		showNotice({
+			text: "Button clicked",
+		});
+	}
+</script>
+
+<div class="demo-box">
+	<h3>Default button</h3>
+	<Button {click} title="Click me and I will do nothing">Click Me</Button>
+	<Button disabled={true} {click}>Click Me</Button>
+</div>
+
+<div class="demo-box">
+	<h3>Primary button</h3>
+	<Button type={"primary"} {click}>Click Me</Button>
+	<Button type={"primary"} disabled={true} {click}>Click Me</Button>
+</div>
+
+<div class="demo-box">
+	<h3>Secondary button</h3>
+	<Button type={"secondary"} {click}>Click Me</Button>
+	<Button type={"secondary"} disabled={true} {click}>Click Me</Button>
+</div>
+
+<div class="demo-box">
+	<h3>Danger button</h3>
+	<Button type={"danger"} {click}>Click Me</Button>
+	<Button type={"danger"} disabled={true} {click}>Click Me</Button>
+</div>
+
+<div class="demo-box">
+	<h3>Link button</h3>
+	<p>
+		<Button type={"link"} icon="wxi-alert" {click}>Click Me</Button>
+	</p>
+	<p>
+		<Button type={"link"} {click}>Click Me</Button>
+	</p>
+	<p>
+		<Button type={"link"} disabled={true} {click}>Click Me</Button>
+	</p>
+</div>
+
+<div class="demo-box">
+	<h3>Block buttons</h3>
+	<p>
+		<Button type={"primary block"}>Click Me</Button>
+	</p>
+	<p>
+		<Button type={"secondary block"}>Click Me</Button>
+	</p>
+	<div style="display:flex;">
+		<Button type={"secondary block"}>Click Me</Button>
+		&nbsp;
+		<Button type={"primary block"}>Click Me</Button>
+	</div>
+</div>
+
+<div class="demo-box">
+	<h3>Icon buttons</h3>
+	<Button icon="wxi-alert">With Icon</Button>
+	<Button type={"primary"} icon="wxi-alert">With Icon</Button>
+	<Button type={"secondary"} icon="wxi-alert">With Icon</Button>
+	<Button icon="wxi-alert" />
+	<Button type={"primary"} icon="wxi-alert" />
+	<Button type={"secondary"} icon="wxi-alert" />
+	<Button type={"danger"} icon="wxi-alert" />
+	<Button disabled icon="wxi-alert" />
+</div>
+
+<div class="demo-box">
+	<h3>Multi-line button</h3>
+	<p>
+		<Button type={"primary"}>Click me<br />a few times</Button>
+	</p>
+</div>

demos/common/Calendar.svelte → demos/cases/Calendar.svelte

@@ -11,11 +11,10 @@
 		v >= new Date(2022, 2, 8) && v <= new Date(2022, 2, 29)
 			? "inrange"
 			: "";
-
 </script>
 
 <div class="demo-box" style="width: 300px">
-	<h4>Calendar</h4>
+	<h3>Calendar</h3>
 	<div style="display: flex; flex-direction: row;">
 		<Calendar value={new Date(2022, 2, 18)} />
 		<Calendar current={new Date(2022, 2, 18)} markers={markLine} />
@@ -24,7 +23,7 @@
 </div>
 
 <div class="demo-box" style="width: 300px">
-	<h4>Calendar with Locale</h4>
+	<h3>Calendar with Locale</h3>
 	<div style="display: flex; flex-direction: row;">
 		<Locale words={de}>
 			<Calendar value={new Date(2022, 2, 18)} />
@@ -36,6 +35,6 @@
 </div>
 
 <div class="demo-box" style="width: 300px">
-	<h4>Calendar without buttons</h4>
+	<h3>Calendar without buttons</h3>
 	<Calendar value={new Date(2022, 2, 18)} buttons={false} />
 </div>

demos/common/Checkbox.svelte → demos/cases/Checkbox.svelte

@@ -10,8 +10,7 @@
 	];
 
 	let v1 = true,
-		v2,
-		v3 = [3];
+		v2;
 
 	let valueGroup1 = [1, 2];
 	let valueGroup2 = [2, 3];
@@ -20,11 +19,10 @@
 	function print(v) {
 		return v.join(", ");
 	}
-
 </script>
 
 <div class="demo-box">
-	<h4>Checkbox</h4>
+	<h3>Checkbox</h3>
 	Value:
 	{v1}
 	<p>
@@ -38,34 +36,34 @@
 </div>
 
 <div class="demo-box">
-	<h4>Checkbox with a side label</h4>
+	<h3>Checkbox with a side label</h3>
 	<Field label="Checkbox" type="checkbox" position="left" let:id>
 		<Checkbox {id} />
 	</Field>
 	<Field label="Disabled" type="checkbox" position="left" let:id>
 		<Checkbox label="Default" disabled {id} />
 	</Field>
 	<Field label="Disabled" type="checkbox" position="left" let:id>
-		<Checkbox label="Checked" disabled {id} value="3" bind:group={v3} />
+		<Checkbox label="Checked" disabled {id} />
 	</Field>
 </div>
 
 <div class="demo-box">
-	<h4>Checkbox group: {print(valueGroup1)}</h4>
+	<h3>Checkbox group: {print(valueGroup1)}</h3>
 	<Field label="Check group" position="left" type="checkbox">
 		<CheckboxGroup {options} bind:value={valueGroup1} />
 	</Field>
 </div>
 
 <div class="demo-box">
-	<h4>Checkbox group inline: {print(valueGroup2)}</h4>
+	<h3>Checkbox group inline: {print(valueGroup2)}</h3>
 	<Field label="Check group" position="left" type="checkbox">
 		<CheckboxGroup {options} bind:value={valueGroup2} type="inline" />
 	</Field>
 </div>
 
 <div class="demo-box">
-	<h4>Checkbox group grid: {print(valueGroup3)}</h4>
+	<h3>Checkbox group grid: {print(valueGroup3)}</h3>
 	<Field label="Check group" position="left" type="checkbox">
 		<CheckboxGroup {options} bind:value={valueGroup3} type="grid" />
 	</Field>

demos/common/ColorPicker.svelte → demos/cases/ColorPicker.svelte

@@ -3,24 +3,24 @@
 
 	let value;
 	let selectedColor;
-
 </script>
 
 <div class="demo-box">
-	<h4>The current color: {value || ''}</h4>
+	<h3>The current color: {value || ""}</h3>
 	<div style="width:300px; height: auto;">
 		<ColorBoard bind:value />
 	</div>
-	<h4>The selected form color: {selectedColor || ''}</h4>
+	<h3>The selected form color: {selectedColor || ""}</h3>
 	<div style="width:300px; height: auto;">
 		<ColorBoard
 			bind:value={selectedColor}
-			placeholder="Select a color..." />
+			placeholder="Select a color..."
+		/>
 	</div>
 </div>
 
 <div class="demo-box">
-	<h4>Custom color select forms:</h4>
+	<h3>Custom color select forms:</h3>
 	<Field label="Your color" position="left" let:id>
 		<ColorPicker value="#5D59BA" {id} placeholder="Select a color..." />
 	</Field>
@@ -29,7 +29,8 @@
 			{id}
 			placeholder="Select a color..."
 			disabled
-			value="#65D3B3" />
+			value="#65D3B3"
+		/>
 	</Field>
 	<Field label="Error" position="left" error let:id>
 		<ColorPicker {id} placeholder="Select a color..." error />

demos/common/ColorSelect.svelte → demos/cases/ColorSelect.svelte

@@ -2,40 +2,43 @@
 	import { ColorSelect, Field } from "../../src/index";
 
 	let color;
-
 </script>
 
 <div class="demo-box">
-	<h4>The selected color: {color ? color : ''}</h4>
+	<h3>The selected color: {color ? color : ""}</h3>
 	<Field label="Select a color" let:id>
 		<ColorSelect
 			bind:value={color}
 			{id}
-			title="Colors can be reconfigured" />
+			title="Colors can be reconfigured"
+		/>
 	</Field>
 </div>
 
 <div class="demo-box">
-	<h4>Custom colors</h4>
+	<h3>Custom colors</h3>
 	<Field label="Your color" position="left" let:id>
 		<ColorSelect
 			{id}
-			colors={['#65D3B3', '#FFC975', '#58C3FE']}
-			placeholder="Select a color..." />
+			colors={["#65D3B3", "#FFC975", "#58C3FE"]}
+			placeholder="Select a color..."
+		/>
 	</Field>
 	<Field label="Disabled" position="left" let:id>
 		<ColorSelect
 			{id}
-			colors={['#65D3B3', '#FFC975', '#58C3FE']}
+			colors={["#65D3B3", "#FFC975", "#58C3FE"]}
 			placeholder="Select a color..."
 			disabled
-			value="#65D3B3" />
+			value="#65D3B3"
+		/>
 	</Field>
 	<Field label="Error" position="left" error let:id>
 		<ColorSelect
 			{id}
-			colors={['#65D3B3', '#FFC975', '#58C3FE']}
+			colors={["#65D3B3", "#FFC975", "#58C3FE"]}
 			placeholder="Select a color..."
-			error />
+			error
+		/>
 	</Field>
 </div>