chore: add onChange event handler

src/lib/Starscore.ts

@@ -31,12 +31,39 @@ class Starscore implements StarscoreInstance {
       { score: 4, description: '' },
       { score: 5, description: '' },
     ],
+    onChange: () => {},
   }
 
   container: HTMLElement | null = null
 
   value: number = 0
 
+  setValue(value: number) {
+    if (value < 0) {
+      this.value = 0
+    } else if (value > this.options.count) {
+      this.value = this.options.count
+    } else {
+      this.value = value
+    }
+
+    this.render()
+
+    this.options.onChange && this.options.onChange(this.value)
+
+    return this
+  }
+
+  constructor(opts: StarscoreOptions) {
+    this.options = Object.assign(this.options, opts)
+
+    this.clickListener = this.clickListener.bind(this)
+
+    this.initCSSVars()
+
+    this.render()
+  }
+
   get scoreItems() {
     const res = []
 
@@ -61,18 +88,28 @@ class Starscore implements StarscoreInstance {
     return res
   }
 
-  constructor(opts: StarscoreOptions) {
-    this.options = Object.assign(this.options, opts)
-
-    this.clickListener = this.clickListener.bind(this)
+  getScoreItemFromChild(target: HTMLElement): HTMLElement | null {
+    if (target.dataset.score) {
+      return target
+    }
 
-    this.initCSSVars()
+    if (target.parentElement) {
+      return this.getScoreItemFromChild(target.parentElement)
+    }
 
-    this.render()
+    return null
   }
 
   clickListener(e: MouseEvent) {
-    console.log(e)
+    const target = e.target as HTMLElement
+
+    const scoreElement = this.getScoreItemFromChild(target)
+
+    if (scoreElement) {
+      const scoreValue = Number(scoreElement.dataset.score)
+
+      this.setValue(scoreValue)
+    }
   }
 
   registerListeners() {

src/lib/interfaces/core.ts

@@ -19,6 +19,7 @@ export interface StarscoreOptions {
   readonly?: boolean
   disabled?: boolean
   scoreDetails?: StarscoreDetail[] | StarscoreDetailFn
+  onChange?: (score: number) => void
 }
 
 export interface ScoreItemsRecord {
@@ -33,6 +34,10 @@ export interface StarscoreInstance {
 
   get scoreItems(): ScoreItemsRecord[]
 
+  setValue(value: number): StarscoreInstance
+
+  getScoreItemFromChild(target: HTMLElement): HTMLElement | null
+
   initCSSVars(): void
 
   getContainer(): HTMLElement

src/lib/styles/main.scss

@@ -3,20 +3,23 @@
 
   .starscore-radio-group {
     display: flex;
+    height: var(--starscore-size);
   }
 
   .starscore-radio {
     margin-right: var(--starscore-gutter);
     position: relative;
     cursor: pointer;
-   
+
     svg {
       font-size: var(--starscore-size);
       fill: currentColor;
     }
 
     &__icon, &__void-icon {
       display: inline-block;
+      width: var(--starscore-size);
+      height: var(--starscore-size);
     }
 
     &__void-icon {

src/views/HomeView.vue

@@ -18,6 +18,9 @@ const init = () => {
   if (starscoreContainer.value) {
     starscoreInstance.value = createStarscore({
       container: starscoreContainer.value,
+      onChange(score) {
+        console.log(score)
+      },
     })
 
     console.log(starscoreInstance.value)