diff --git a/package.json b/package.json index 7060f96..229ae21 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "star-rating", - "version": "1.1.0", + "version": "1.2.0", "description": "A five star component :)", "author": "andz-bb", "license": "MIT", diff --git a/schema.json b/schema.json index d3f6f4d..17cf8ef 100644 --- a/schema.json +++ b/schema.json @@ -4,6 +4,7 @@ "schema": { "name": "star-rating", "friendlyName": "Rating", + "requiredAncestors": ["form"], "description": "A five star component ⭐️", "icon": "Star", "showSettingsBar": true, @@ -27,6 +28,12 @@ "min": 1, "max": 20 }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false + }, { "type": "select", "label": "Size", diff --git a/src/Component.svelte b/src/Component.svelte index f9cee0e..b830e17 100644 --- a/src/Component.svelte +++ b/src/Component.svelte @@ -3,6 +3,7 @@ import Icon from "./Icon.svelte"; export let color; + export let disabled; export let field; export let label; @@ -19,6 +20,7 @@ const formStepContext = getContext("form-step"); const fieldGroupContext = getContext("field-group"); + let defaultValue = disabled ? null : 0; let fieldApi; let fieldState; let hoverRating = 0; @@ -29,7 +31,7 @@ $: formField = formApi?.registerField( field, "number", - 0, + defaultValue, false, validation, formStep @@ -72,9 +74,9 @@ ? hoverRating >= i + 1 : fieldState?.value >= i + 1} starId={i + 1} - on:mouseover={() => (hoverRating = i + 1)} - on:mouseleave={() => (hoverRating = null)} - on:click={() => fieldApi?.setValue(i + 1)} + on:mouseover={disabled ? null : () => (hoverRating = i + 1)} + on:mouseleave={disabled ? null : () => (hoverRating = null)} + on:click={disabled ? null : () => fieldApi?.setValue(i + 1)} /> {/each} {#if !field}