release: WRNexusJS 0.6.0

.publish/ui/components/ToggleCount.wrn

@@ -1,48 +1,51 @@
 component ToggleCount {
+  outputs {
+    change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
+    toggle(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
+  }
+
   props {
-    size = "default"
-    color = "primary"
-    variant = "segmented"
-    class = ""
+    size: string = "default"
+    color: string = "primary"
+    variant: string = "segmented"
+    class: string = ""
 
-    name = "billing-cycle"
-    value = "monthly"
-    firstValue = "monthly"
-    firstLabel = "Monthly"
-    secondValue = "annual"
-    secondLabel = "Annual"
-    ariaLabel = "Billing frequency"
+    name: string = "billing-cycle"
+    value: string = "monthly"
+    firstValue: string = "monthly"
+    firstLabel: string = "Monthly"
+    secondValue: string = "annual"
+    secondLabel: string = "Annual"
+    ariaLabel: string = "Billing frequency"
 
-    items = []
-    currency = "$"
-    suffix = ""
-    firstValueKey = "monthly"
-    secondValueKey = "annual"
-    emptyValue = "—"
+    items: unknown[] = []
+    currency: string = "$"
+    suffix: string = ""
+    firstValueKey: string = "monthly"
+    secondValueKey: string = "annual"
+    emptyValue: string = "—"
 
-    align = "end"
-    fullWidth = true
-    disabled = false
-    animate = true
-    animationDuration = 450
-    animationSteps = 18
+    align: string = "end"
+    fullWidth: boolean = true
+    disabled: boolean = false
+    animate: boolean = true
+    animationDuration: number = 450
+    animationSteps: number = 18
 
-    @event change = function
-    @event toggle = function
   }
 
   state selectedValue = value
 
   functions {
-    function isFirstSelected() {
+    shared function isFirstSelected() {
       return selectedValue === firstValue
     }
 
-    function isSecondSelected() {
+    shared function isSecondSelected() {
       return selectedValue === secondValue
     }
 
-    function displayValue(item) {
+    shared function displayValue(item) {
       if (isSecondSelected()) {
         return item[secondValueKey] !== undefined
           ? item[secondValueKey]
@@ -54,7 +57,7 @@ component ToggleCount {
         : emptyValue
     }
 
-    function dispatchToggleEvent(sourceEvent, previousValue, root, customEvent) {
+    client function dispatchToggleEvent(sourceEvent, previousValue, root, customEvent) {
       root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
 
       if (!root) {
@@ -84,7 +87,7 @@ component ToggleCount {
       root.dispatchEvent(customEvent)
     }
 
-    function selectValue(sourceEvent, nextValue, previousValue) {
+    client function selectValue(sourceEvent, nextValue, previousValue) {
       if (disabled || selectedValue === nextValue) {
         return
       }
@@ -102,18 +105,29 @@ component ToggleCount {
       dispatchToggleEvent(sourceEvent, previousValue)
     }
 
-    function animateDisplayedValues(sourceEvent, previousValue, root, nodes) {
+    client function animateDisplayedValues(sourceEvent, previousValue, root, nodes, animationToken) {
       root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
 
       if (!root) {
         return
       }
 
+      animationToken = String(Date.now()) + ":" + String(selectedValue)
+      root.setAttribute("data-animation-token", animationToken)
       nodes = root.querySelectorAll("[data-toggle-count-value]")
-      animateValueAt(nodes, 0, previousValue)
+      animateValueAt(nodes, 0, previousValue, root, animationToken)
     }
 
-    function animateValueAt(nodes, index, previousValue, node, fromValue, toValue) {
+    client function animateValueAt(
+      nodes,
+      index,
+      previousValue,
+      root,
+      animationToken,
+      node,
+      fromValue,
+      toValue
+    ) {
       if (index >= nodes.length) {
         return
       }
@@ -131,17 +145,40 @@ component ToggleCount {
       )
 
       if (!Number.isNaN(fromValue) && !Number.isNaN(toValue)) {
-        animateValueFrame(node, fromValue, toValue, 0)
+        node.replaceChildren(String(fromValue))
+        scheduleValueFrame(
+          node,
+          fromValue,
+          toValue,
+          1,
+          Math.max(1, Number(animationSteps) || 1),
+          Math.max(1, Number(animationDuration) || 1),
+          root,
+          animationToken
+        )
       }
 
-      animateValueAt(nodes, index + 1, previousValue)
+      animateValueAt(
+        nodes,
+        index + 1,
+        previousValue,
+        root,
+        animationToken
+      )
     }
 
-    function animateValueFrame(node, fromValue, toValue, frame, totalFrames, nextValue) {
-      totalFrames = Math.max(1, Number(animationSteps) || 1)
-
-      if (frame >= totalFrames) {
-        node.replaceChildren(String(toValue))
+    client function scheduleValueFrame(
+      node,
+      fromValue,
+      toValue,
+      frame,
+      totalFrames,
+      duration,
+      root,
+      animationToken,
+      nextValue
+    ) {
+      if (frame > totalFrames) {
         return
       }
 
@@ -149,19 +186,45 @@ component ToggleCount {
         fromValue +
         (toValue - fromValue) * (frame / totalFrames)
       )
-      node.replaceChildren(String(nextValue))
 
       setTimeout(
-        animateValueFrame,
-        Math.max(1, Number(animationDuration) / totalFrames),
+        applyAnimatedValue,
+        Math.max(1, duration * frame / totalFrames),
+        node,
+        nextValue,
+        root,
+        animationToken
+      )
+
+      scheduleValueFrame(
         node,
         fromValue,
         toValue,
-        frame + 1
+        frame + 1,
+        totalFrames,
+        duration,
+        root,
+        animationToken
       )
     }
 
-    function toggleValue(sourceEvent) {
+    client function applyAnimatedValue(
+      node,
+      nextValue,
+      root,
+      animationToken
+    ) {
+      if (
+        root &&
+        root.getAttribute("data-animation-token") !== animationToken
+      ) {
+        return
+      }
+
+      node.replaceChildren(String(nextValue))
+    }
+
+    client function toggleValue(sourceEvent) {
       selectValue(
         sourceEvent,
         isFirstSelected() ? secondValue : firstValue