@konbraphat51/affectiveslidervue 0.0.1

package/README.md

@@ -0,0 +1,274 @@
+# Affective Slider Vue
+
+A Vue 3 component implementation of the Affective Slider (AS) for measuring pleasure and arousal in emotion assessment.
+
+**[Live Demo](https://konbraphat51.github.io/AffectiveSliderVue/)** | [npm Package](https://www.npmjs.com/package/affectiveslidervue)
+
+## About
+
+The Affective Slider (AS) is a digital scale for the self-assessment of emotion composed of two slider controls that measure:
+- **Pleasure** (sad - happy)
+- **Arousal** (sleepy - wide awake)
+
+This component is based on the original [Affective Slider](https://github.com/albertobeta/AffectiveSlider) by Alberto Betella and Paul F.M.J. Verschure.
+
+The AS has been empirically validated and presented in the following open access scientific publication:
+
+> Alberto Betella and Paul F.M.J. Verschure, "[The Affective Slider: A Digital Self-Assessment Scale for the Measurement of Human Emotions](http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0148037)", PLoS ONE, vol. 11, p. e0148037, 2016. DOI: 10.1371/journal.pone.0148037
+
+## Features
+
+- ✅ Vue 3 compatible
+- ✅ Fully responsive design
+- ✅ Randomizable slider order (to prevent bias)
+- ✅ Interaction tracking
+- ✅ Touch and mouse support
+- ✅ Customizable initial values
+- ✅ Event emissions for value changes
+- ✅ Follows original design guidelines
+
+## Installation
+
+```bash
+pnpm add affectiveslidervue
+```
+
+## Usage
+
+### Basic Usage
+
+```vue
+<template>
+  <div>
+    <AffectiveSlider
+      @update:pleasureValue="handlePleasureChange"
+      @update:arousalValue="handleArousalChange"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script>
+import AffectiveSlider from 'affectiveslidervue'
+
+export default {
+  components: {
+    AffectiveSlider
+  },
+  methods: {
+    handlePleasureChange(value) {
+      console.log('Pleasure:', value)
+    },
+    handleArousalChange(value) {
+      console.log('Arousal:', value)
+    },
+    handleChange(values) {
+      console.log('Both values:', values)
+    }
+  }
+}
+</script>
+```
+
+### With v-model
+
+```vue
+<template>
+  <AffectiveSlider
+    :pleasure-value="pleasure"
+    :arousal-value="arousal"
+    @update:pleasureValue="pleasure = $event"
+    @update:arousalValue="arousal = $event"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pleasure: 0.5,
+      arousal: 0.5
+    }
+  }
+}
+</script>
+```
+
+### With Labels
+
+```vue
+<template>
+  <AffectiveSlider
+    pleasure-left-label="Sad"
+    pleasure-right-label="Happy"
+    arousal-left-label="Sleepy"
+    arousal-right-label="Awake"
+  />
+</template>
+
+<script>
+import AffectiveSlider from 'affectiveslidervue'
+
+export default {
+  components: {
+    AffectiveSlider
+  }
+}
+</script>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `pleasureValue` | Number | 0.5 | Initial value for pleasure slider (0-1) |
+| `arousalValue` | Number | 0.5 | Initial value for arousal slider (0-1) |
+| `randomizeOrder` | Boolean | true | Randomize the order of sliders to prevent bias |
+| `imagePath` | String | '/images/' | Base path for slider images |
+| `pleasureLeftLabel` | String | '' | Text label below left icon (sad face) of pleasure slider |
+| `pleasureRightLabel` | String | '' | Text label below right icon (happy face) of pleasure slider |
+| `arousalLeftLabel` | String | '' | Text label below left icon (sleepy face) of arousal slider |
+| `arousalRightLabel` | String | '' | Text label below right icon (awake face) of arousal slider |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:pleasureValue` | Number | Emitted when pleasure value changes |
+| `update:arousalValue` | Number | Emitted when arousal value changes |
+| `change` | { pleasure: Number, arousal: Number } | Emitted when any value changes |
+| `interacted` | { type: String, pleasure: Number, arousal: Number } | Emitted on first interaction with each slider |
+
+## Setup for Images
+
+### Option 1: Using Images from npm Package (Recommended)
+
+When you install the package via npm, the required images are automatically included in `node_modules/affectiveslidervue/dist/images/`. 
+
+To make them accessible to your application, you have two options:
+
+**A. Copy images to your public directory (recommended for most cases)**
+
+Install a cross-platform copy utility and add a postinstall script to your `package.json`:
+
+```bash
+# Install cross-platform copy utility
+npm install --save-dev cpx2
+```
+
+```json
+{
+  "scripts": {
+    "postinstall": "cpx \"node_modules/affectiveslidervue/dist/images/*\" public/images"
+  }
+}
+```
+
+**Or copy manually:**
+
+```bash
+# Unix/Mac/Linux
+cp -r node_modules/affectiveslidervue/dist/images/* public/images/
+
+# Windows (PowerShell)
+Copy-Item -Path "node_modules/affectiveslidervue/dist/images/*" -Destination "public/images/" -Recurse
+
+# Windows (Command Prompt)
+xcopy /E /I node_modules\affectiveslidervue\dist\images public\images
+```
+
+**B. Use a custom imagePath**
+
+If you're using a bundler like Vite or Webpack, you can configure it to serve images from node_modules:
+
+```vue
+<AffectiveSlider
+  image-path="/node_modules/affectiveslidervue/dist/images/"
+/>
+```
+
+### Option 2: Manual Download
+
+Download the image files from the [PNGs directory](https://github.com/konbraphat51/AffectiveSliderVue/tree/main/PNGs) and place them in your `public/images/` directory.
+
+Required images:
+- `AS_happy.png`
+- `AS_unhappy.png`
+- `AS_sleepy.png`
+- `AS_wideawake.png`
+- `AS_intensity_cue.png`
+
+### Custom Image Location
+
+If your images are in a different location, use the `imagePath` prop:
+
+```vue
+<AffectiveSlider
+  image-path="/assets/affective-slider/"
+/>
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run development server
+pnpm dev
+
+# Build component for production (library)
+pnpm build
+
+# Build demo for GitHub Pages
+pnpm run build:demo
+```
+
+### GitHub Pages Demo
+
+
+The `/docs` folder contains a built version of the demo application for GitHub Pages deployment.
+
+**Live Demo**: https://konbraphat51.github.io/AffectiveSliderVue/
+
+To rebuild the demo:
+```bash
+pnpm run build:demo
+```
+
+To publish on GitHub Pages:
+
+1. Push the repository to GitHub.
+2. Go to the repository Settings → Pages.
+3. Under "Build and deployment" choose "Branch: main" and folder `/docs`.
+4. Save — the site will be published from the `docs/` folder.
+
+Note: The demo build uses a relative base (`base: './'`) so assets work correctly when served from `/docs`.
+
+## Publishing
+
+For maintainers: See [PUBLISHING.md](./PUBLISHING.md) for instructions on publishing this package to npm.
+
+## Design Guidelines
+
+This component follows the official design guidelines:
+
+- Both sliders have horizontal orientation
+- Sliders are presented simultaneously with thumbs at center (0.5)
+- Proper spacing and sizing for easy interaction
+- Intensity cue with emoticons at extremities
+- Greyscale color palette
+- Values range from 0 to 1 with 0.01 resolution
+- Thumbs are circular and larger than track
+- Order can be randomized to prevent bias
+- Visual feedback on interaction
+
+## License
+
+CC-BY-SA-4.0 - Same as the original Affective Slider
+
+## Credits
+
+Original Affective Slider by Alberto Betella and Paul F.M.J. Verschure
+
+Vue component implementation: This project

package/dist/affective-slider-vue.es.js

@@ -0,0 +1,128 @@
+import { ref as c, computed as R, onMounted as q, watch as Q, createElementBlock as o, openBlock as g, Fragment as h, renderList as D, normalizeClass as I, createElementVNode as r, createCommentVNode as w, toDisplayString as m, unref as S } from "vue";
+const y = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABLBJREFUeNrsnP1x2yAUwHGu/5cR2KBsEG1QbVBtUG1QOoFHIJ3A6QR2J5AzgdIJlE7gWnfQUAKIjweyHd4dl5x9Ruj3Png8kDan0wlV8ZNNhVVhVVgVVoVVYVVYLlibzab0eIhoUp5FKyZOHivBmoE053av/L8kBwHu6dwec0F0etr8pa1lALQ9t3G+LEAbRX8UGpatlbCs2Wq+LViPdLcXYTlSPp0bNrinyep+nNvDtVrWDGdvsYrh3Jin++l9MvF7m7U1uSwrB6zZErjlRtiChYS6dW9x613sdUrCmrU6GSB1mSexzgBtHkd7qbCYYbCscOrRG5S1vTRY3BCTCFpHsCFW7sXnq8LCIj5EazKjMIMC8ZqwdIvq0GVJp7nlIrBcsC4dlBSqAeOlYfWRoChAxi1TExwITB0vKwWLRoJqFQ33CbC44lI00CXVcTclYA2+Jq0kjztAl+0ME4qvlW21/A/nhMWWLqZB4tDLEcW6Ry2n457pyuCauaFgYS1QNg5321sSVAwcvJkhCZXrTuoZRkgOWNzhftRSfpnE5zkTVOxYI05CcfqadGu7FwhY2KGNzrJo7jNYko972mpmjcNLCCQs5rAqrMWNRgvsUrttBoviAsxgSAeIuCYT1yeO+MshYY02H1c0qg90MmiXAYIy1bR4YB+qu4LAotqCNGYZdFqAnbruO3lMPEvjbCFgbSPyI1ftvAeANTj6D7GuVv9dKix1YNgzyLpgQbiiq/99ZF/TEqw7D7+W8egoNhR8YsE1ycFwr0a587ASvVPfi+eU58jvTPLLMVEFwVKD5VPAAB4d3z0AwHr0vPlQ5ZL4yuD/s07ILGOLW1BVVGxJTYaIvojy+11KgN8HBnfdKseM5WaqjY+j+Hj5b3KAgnXL4gXrDlXxlgqrwqqwLh7W0ZJz3ZJgKFh/rngZE5KCeCW0IZZF3wGsl5QMniSs5q9F1G26JrVEM954Yqoum5LrWW+qiTfmguppQSePDx4d/kSvFdLPCyv+WCHIfMT7WbRcZZ8vQdUKzw2LKWFB7dKq71HvSWi+zeiCGMINdVdkwNWCmPPvENA63QWhYFFNy7HWxRDMAwPyBlOsfDTV6qC27/cJ1mU6TmnaaNiKvmXbWYp8qpXRRKvae4elAFiNZl0kYHDccbOdh4W0DtedAoE5D7hAHjniEUlqj+D2DxuLpYWEhp3rHiBh6VrpA7UYYwmmPgcUt1/YLXkH9Mm/Vhsk9Rwc5I60DRhbmIUXFZ3jAC73tJTeEKMgE1n9FDJxwB1NqUIJWLpml1wLi3gDXblo0fLxSH2szrPwuc7BhwJbQ0joGHM+YaHHgagnsTIukqdQZeZ+0IkYgi1bGVQfOwOXeCrM9CTWgMrX7allHN7LopIPZ26R+XAZKRCbuOXaQevH0o/9NpayC89gadQCKTp2loYl3ZJZlibyFQNNAiCG7EclWUo1Ys1XFcgD/V8dN3AQ1dDf6O0bQmQF9aOA5AL8cG7fUeLLMS7hJRhYLH0GwHqWDN6gDyes/RIMUzCeLeRe/A0J/rPVHEW9PMsrVi7xXTSmSUHGI9VKXtDrRu+hxECiYVWpsCqsCqvCqrDehfwVYACpkF1ChK49LwAAAABJRU5ErkJggg==", F = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABKpJREFUeNrsnP11mzAQwOW+/l82KJmgzgRRJwidoOoGdIIqE/hlArcT0A1IJnAyAekEeIPUvHck6kUfB5IwUN17evazAYkfd6fTSWLz/PzMktDkXUKQYCVYCVaClWD99/Le9udms4lZ9xZKfipXym8ZOu4OPh9O5RE+H2I1yhpKdX+aSgQpTmV/Km1XtUdp4TpFDFimsrFBCaRZnaaUp/IVtMgmT1B6yQnnHE/l56nconMXpVkdJGnRjhr+5xrT012Lw/GV5Zp7AtzRmhULVmkwte5GBQEO1aQrg4nKJcDKQWOCP3FHnXtNnQfoMGYJq9BoUxUREgVaC5o8K1hC08iCnUc639ag9si5wNprHHfGziuZxp/tzw1rN6ZBE8rg9sWCJWYOytROOTUsvhBQJmDFVLAy1OvNHZTOJFtTLx0aVoVimSVJjTqiqLAKytOZsWCrKGPBylD8Ui40LYUfeBYDlnSp8IKkMvWOIWBh9eULh5WbtCsELLEirdKNPGRIWIcVaZVOu5pQsLa6i65EaqwENh6U2R1Vk25XBuuX8v3adTAlB18rwC4YLc+tztx0x/+cedzFoJ0Xvjl4qgn2OfdGk7KJKWqdDXvN7VMDZtUf5z4+ixPHgIKZp7diwxLMPinigqaOGQsfWCUhYtcl/wSbNp1cwoMVcPMNo6eW1Yhe+sCSjpBBziSVTNF2YfGvL9bjA0sdFuSWnFbDRsykTKR1B0Ie68UqfGCpcQiWRtGoOYJSO56DI1NCgjV2Fc1WqfSGRVyoEUC66f1v8Hn08qUempUvLE3DmXnWKboZrkmimqGvD1mkuGA9IT8VAlQNDpePPL+AkIWy8oZ6XBCf5YqzVH9QOirmqBsfNK2Ogsc+XBGaOjP4ndpbqyHQzsdnCceNFQhAC7GZVMpeM14cE3JkGtjqtWrL/w1xuOQVwavRbeV4KkPK2CDWBsxUDo5wQR2ucd/kX6s8PVPMVTP6WlAZwMkLArQDoy03UrXee01ppQwTLi0B6BaO+6SBcQ/n/Y7Qs/a5s77OfjUzJe+WKybanXPpm89SbXq3svjqTVbF1wwzZEZrkgYnCkLM7lSEVMfShDPNmo0QsDhb3wxPrVOAUNP3zYq0y/jwQ8EqUAXZSnyViAELq+5Se0ZpcykhYW1R4McXBsrZ/tAr/yRb5oI2vL5sNzjuHLkA94C63SX4L1KbY2yhy5CT74YKnyHH7SO5QVOfmN/2uL3iyI/Q1gcTLJ/hjs3+2wAaxiHopWzYrAb6yYy9nQTmo/N7njssdMDygaDGpHgKIiicmXDGh7H37mBgQ2amxUhYJeEhtENBTQFLB6zvbShmKdmwPdM7hzbtfDKyU+2RzjQ+pXOm3xltfRZXzv3IXtd2/YHf7sApHy1a+gO5ge74L0M6h6n3SEtDGllECjGEIccvx1zsHHukc0OqOdQrBmyvPKiZx7TdOV9VwME0TN11b1qPiqncofPV+OvKcq3uOje+qes5vASDszAvvzC9niDYGPXcL8HAnUB3Y9fwOWZc+QTadw9adAzZQCuPiWHp4KmzMx+Qv8G9oe+wJx6sJP9KeiVUgpVgJVgJVoKV5K8AAwDfyJ7liahBeQAAAABJRU5ErkJggg==", N = "data:image/png;base64,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", J = "data:image/png;base64,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", U = "data:image/png;base64,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", P = (t, i) => {
+  const a = t.__vccOpts || t;
+  for (const [l, s] of i)
+    a[l] = s;
+  return a;
+}, H = { class: "affective-slider" }, b = { class: "as-icon-wrapper as-icon-left" }, G = ["src", "alt"], T = {
+  key: 0,
+  class: "as-icon-label"
+}, Y = ["name", "id", "value", "onInput", "onMousedown", "onTouchstart"], X = { class: "as-icon-wrapper as-icon-right" }, Z = ["src", "alt"], k = {
+  key: 0,
+  class: "as-icon-label"
+}, z = { class: "as-intensity-cue" }, M = ["src"], O = {
+  __name: "AffectiveSlider",
+  props: {
+    // Initial value for pleasure slider (0-1)
+    pleasureValue: {
+      type: Number,
+      default: 0.5,
+      validator: (t) => t >= 0 && t <= 1
+    },
+    // Initial value for arousal slider (0-1)
+    arousalValue: {
+      type: Number,
+      default: 0.5,
+      validator: (t) => t >= 0 && t <= 1
+    },
+    // Randomize the order of sliders
+    randomizeOrder: {
+      type: Boolean,
+      default: !0
+    },
+    // Label below left icon for pleasure slider (unhappy face)
+    pleasureLeftLabel: {
+      type: String,
+      default: ""
+    },
+    // Label below right icon for pleasure slider (happy face)
+    pleasureRightLabel: {
+      type: String,
+      default: ""
+    },
+    // Label below left icon for arousal slider (sleepy face)
+    arousalLeftLabel: {
+      type: String,
+      default: ""
+    },
+    // Label below right icon for arousal slider (wide awake face)
+    arousalRightLabel: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:pleasureValue", "update:arousalValue", "change", "interacted"],
+  setup(t, { emit: i }) {
+    const a = t, l = i, s = c(a.pleasureValue), n = c(a.arousalValue), u = c([]), C = c({
+      pleasure: !1,
+      arousal: !1
+    }), d = (A) => A === "pleasure" ? y : F, E = (A) => A === "pleasure" ? N : J, L = (A) => A === "pleasure" ? a.pleasureLeftLabel : a.arousalLeftLabel, f = (A) => A === "pleasure" ? a.pleasureRightLabel : a.arousalRightLabel, v = R(() => u.value.map((A) => ({
+      type: A,
+      value: A === "pleasure" ? s.value : n.value,
+      leftImage: d(A),
+      rightImage: E(A),
+      leftLabel: L(A),
+      rightLabel: f(A)
+    }))), W = (A, V) => {
+      const e = parseFloat(V.target.value);
+      A === "pleasure" ? s.value = e : n.value = e, l(`update:${A}Value`, e), l("change", { pleasure: s.value, arousal: n.value });
+    }, B = (A) => {
+      C.value[A] || (C.value[A] = !0, l("interacted", { type: A, pleasure: s.value, arousal: n.value }));
+    }, K = () => {
+      const A = ["arousal", "pleasure"];
+      a.randomizeOrder ? u.value = Math.random() > 0.5 ? [...A] : [...A].reverse() : u.value = ["pleasure", "arousal"];
+    };
+    return q(() => {
+      K();
+    }), Q(() => a.pleasureValue, (A) => {
+      s.value = A;
+    }), Q(() => a.arousalValue, (A) => {
+      n.value = A;
+    }), (A, V) => (g(), o("div", H, [
+      (g(!0), o(h, null, D(v.value, (e) => (g(), o("div", {
+        key: e.type,
+        class: I(["as-container", e.type])
+      }, [
+        r("div", b, [
+          r("img", {
+            src: e.leftImage,
+            alt: `${e.type} left`,
+            class: "as-icon"
+          }, null, 8, G),
+          e.leftLabel ? (g(), o("div", T, m(e.leftLabel), 1)) : w("", !0)
+        ]),
+        r("input", {
+          type: "range",
+          name: `AS-${e.type}`,
+          id: `AS-${e.type}`,
+          value: e.value,
+          min: "0",
+          max: "1",
+          step: "0.01",
+          onInput: (p) => W(e.type, p),
+          onMousedown: (p) => B(e.type),
+          onTouchstart: (p) => B(e.type),
+          class: "as-slider"
+        }, null, 40, Y),
+        r("div", X, [
+          r("img", {
+            src: e.rightImage,
+            alt: `${e.type} right`,
+            class: "as-icon"
+          }, null, 8, Z),
+          e.rightLabel ? (g(), o("div", k, m(e.rightLabel), 1)) : w("", !0)
+        ]),
+        r("div", z, [
+          r("img", {
+            src: S(U),
+            alt: "intensity cue"
+          }, null, 8, M)
+        ])
+      ], 2))), 128))
+    ]));
+  }
+}, j = /* @__PURE__ */ P(O, [["__scopeId", "data-v-7a449788"]]);
+export {
+  j as AffectiveSlider,
+  j as default
+};

package/dist/affective-slider-vue.umd.js

@@ -0,0 +1 @@
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.AffectiveSliderVue={},r.Vue))})(this,(function(r,e){"use strict";const V="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABLBJREFUeNrsnP1x2yAUwHGu/5cR2KBsEG1QbVBtUG1QOoFHIJ3A6QR2J5AzgdIJlE7gWnfQUAKIjweyHd4dl5x9Ruj3Png8kDan0wlV8ZNNhVVhVVgVVoVVYVVYLlibzab0eIhoUp5FKyZOHivBmoE053av/L8kBwHu6dwec0F0etr8pa1lALQ9t3G+LEAbRX8UGpatlbCs2Wq+LViPdLcXYTlSPp0bNrinyep+nNvDtVrWDGdvsYrh3Jin++l9MvF7m7U1uSwrB6zZErjlRtiChYS6dW9x613sdUrCmrU6GSB1mSexzgBtHkd7qbCYYbCscOrRG5S1vTRY3BCTCFpHsCFW7sXnq8LCIj5EazKjMIMC8ZqwdIvq0GVJp7nlIrBcsC4dlBSqAeOlYfWRoChAxi1TExwITB0vKwWLRoJqFQ33CbC44lI00CXVcTclYA2+Jq0kjztAl+0ME4qvlW21/A/nhMWWLqZB4tDLEcW6Ry2n457pyuCauaFgYS1QNg5321sSVAwcvJkhCZXrTuoZRkgOWNzhftRSfpnE5zkTVOxYI05CcfqadGu7FwhY2KGNzrJo7jNYko972mpmjcNLCCQs5rAqrMWNRgvsUrttBoviAsxgSAeIuCYT1yeO+MshYY02H1c0qg90MmiXAYIy1bR4YB+qu4LAotqCNGYZdFqAnbruO3lMPEvjbCFgbSPyI1ftvAeANTj6D7GuVv9dKix1YNgzyLpgQbiiq/99ZF/TEqw7D7+W8egoNhR8YsE1ycFwr0a587ASvVPfi+eU58jvTPLLMVEFwVKD5VPAAB4d3z0AwHr0vPlQ5ZL4yuD/s07ILGOLW1BVVGxJTYaIvojy+11KgN8HBnfdKseM5WaqjY+j+Hj5b3KAgnXL4gXrDlXxlgqrwqqwLh7W0ZJz3ZJgKFh/rngZE5KCeCW0IZZF3wGsl5QMniSs5q9F1G26JrVEM954Yqoum5LrWW+qiTfmguppQSePDx4d/kSvFdLPCyv+WCHIfMT7WbRcZZ8vQdUKzw2LKWFB7dKq71HvSWi+zeiCGMINdVdkwNWCmPPvENA63QWhYFFNy7HWxRDMAwPyBlOsfDTV6qC27/cJ1mU6TmnaaNiKvmXbWYp8qpXRRKvae4elAFiNZl0kYHDccbOdh4W0DtedAoE5D7hAHjniEUlqj+D2DxuLpYWEhp3rHiBh6VrpA7UYYwmmPgcUt1/YLXkH9Mm/Vhsk9Rwc5I60DRhbmIUXFZ3jAC73tJTeEKMgE1n9FDJxwB1NqUIJWLpml1wLi3gDXblo0fLxSH2szrPwuc7BhwJbQ0joGHM+YaHHgagnsTIukqdQZeZ+0IkYgi1bGVQfOwOXeCrM9CTWgMrX7allHN7LopIPZ26R+XAZKRCbuOXaQevH0o/9NpayC89gadQCKTp2loYl3ZJZlibyFQNNAiCG7EclWUo1Ys1XFcgD/V8dN3AQ1dDf6O0bQmQF9aOA5AL8cG7fUeLLMS7hJRhYLH0GwHqWDN6gDyes/RIMUzCeLeRe/A0J/rPVHEW9PMsrVi7xXTSmSUHGI9VKXtDrRu+hxECiYVWpsCqsCqvCqrDehfwVYACpkF1ChK49LwAAAABJRU5ErkJggg==",d="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABKpJREFUeNrsnP11mzAQwOW+/l82KJmgzgRRJwidoOoGdIIqE/hlArcT0A1IJnAyAekEeIPUvHck6kUfB5IwUN17evazAYkfd6fTSWLz/PzMktDkXUKQYCVYCVaClWD99/Le9udms4lZ9xZKfipXym8ZOu4OPh9O5RE+H2I1yhpKdX+aSgQpTmV/Km1XtUdp4TpFDFimsrFBCaRZnaaUp/IVtMgmT1B6yQnnHE/l56nconMXpVkdJGnRjhr+5xrT012Lw/GV5Zp7AtzRmhULVmkwte5GBQEO1aQrg4nKJcDKQWOCP3FHnXtNnQfoMGYJq9BoUxUREgVaC5o8K1hC08iCnUc639ag9si5wNprHHfGziuZxp/tzw1rN6ZBE8rg9sWCJWYOytROOTUsvhBQJmDFVLAy1OvNHZTOJFtTLx0aVoVimSVJjTqiqLAKytOZsWCrKGPBylD8Ui40LYUfeBYDlnSp8IKkMvWOIWBh9eULh5WbtCsELLEirdKNPGRIWIcVaZVOu5pQsLa6i65EaqwENh6U2R1Vk25XBuuX8v3adTAlB18rwC4YLc+tztx0x/+cedzFoJ0Xvjl4qgn2OfdGk7KJKWqdDXvN7VMDZtUf5z4+ixPHgIKZp7diwxLMPinigqaOGQsfWCUhYtcl/wSbNp1cwoMVcPMNo6eW1Yhe+sCSjpBBziSVTNF2YfGvL9bjA0sdFuSWnFbDRsykTKR1B0Ie68UqfGCpcQiWRtGoOYJSO56DI1NCgjV2Fc1WqfSGRVyoEUC66f1v8Hn08qUempUvLE3DmXnWKboZrkmimqGvD1mkuGA9IT8VAlQNDpePPL+AkIWy8oZ6XBCf5YqzVH9QOirmqBsfNK2Ogsc+XBGaOjP4ndpbqyHQzsdnCceNFQhAC7GZVMpeM14cE3JkGtjqtWrL/w1xuOQVwavRbeV4KkPK2CDWBsxUDo5wQR2ucd/kX6s8PVPMVTP6WlAZwMkLArQDoy03UrXee01ppQwTLi0B6BaO+6SBcQ/n/Y7Qs/a5s77OfjUzJe+WKybanXPpm89SbXq3svjqTVbF1wwzZEZrkgYnCkLM7lSEVMfShDPNmo0QsDhb3wxPrVOAUNP3zYq0y/jwQ8EqUAXZSnyViAELq+5Se0ZpcykhYW1R4McXBsrZ/tAr/yRb5oI2vL5sNzjuHLkA94C63SX4L1KbY2yhy5CT74YKnyHH7SO5QVOfmN/2uL3iyI/Q1gcTLJ/hjs3+2wAaxiHopWzYrAb6yYy9nQTmo/N7njssdMDygaDGpHgKIiicmXDGh7H37mBgQ2amxUhYJeEhtENBTQFLB6zvbShmKdmwPdM7hzbtfDKyU+2RzjQ+pXOm3xltfRZXzv3IXtd2/YHf7sApHy1a+gO5ge74L0M6h6n3SEtDGllECjGEIccvx1zsHHukc0OqOdQrBmyvPKiZx7TdOV9VwME0TN11b1qPiqncofPV+OvKcq3uOje+qes5vASDszAvvzC9niDYGPXcL8HAnUB3Y9fwOWZc+QTadw9adAzZQCuPiWHp4KmzMx+Qv8G9oe+wJx6sJP9KeiVUgpVgJVgJVoKV5K8AAwDfyJ7liahBeQAAAABJRU5ErkJggg==",f="data:image/png;base64,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",m="data:image/png;base64,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",E="data:image/png;base64,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",Q=(l,c)=>{const t=l.__vccOpts||l;for(const[s,n]of c)t[s]=n;return t},w={class:"affective-slider"},L={class:"as-icon-wrapper as-icon-left"},W=["src","alt"],K={key:0,class:"as-icon-label"},R=["name","id","value","onInput","onMousedown","onTouchstart"],q={class:"as-icon-wrapper as-icon-right"},h=["src","alt"],N={key:0,class:"as-icon-label"},S={class:"as-intensity-cue"},D=["src"],p=Q({__name:"AffectiveSlider",props:{pleasureValue:{type:Number,default:.5,validator:l=>l>=0&&l<=1},arousalValue:{type:Number,default:.5,validator:l=>l>=0&&l<=1},randomizeOrder:{type:Boolean,default:!0},pleasureLeftLabel:{type:String,default:""},pleasureRightLabel:{type:String,default:""},arousalLeftLabel:{type:String,default:""},arousalRightLabel:{type:String,default:""}},emits:["update:pleasureValue","update:arousalValue","change","interacted"],setup(l,{emit:c}){const t=l,s=c,n=e.ref(t.pleasureValue),o=e.ref(t.arousalValue),i=e.ref([]),u=e.ref({pleasure:!1,arousal:!1}),y=A=>A==="pleasure"?V:d,I=A=>A==="pleasure"?f:m,F=A=>A==="pleasure"?t.pleasureLeftLabel:t.arousalLeftLabel,J=A=>A==="pleasure"?t.pleasureRightLabel:t.arousalRightLabel,U=e.computed(()=>i.value.map(A=>({type:A,value:A==="pleasure"?n.value:o.value,leftImage:y(A),rightImage:I(A),leftLabel:F(A),rightLabel:J(A)}))),P=(A,B)=>{const a=parseFloat(B.target.value);A==="pleasure"?n.value=a:o.value=a,s(`update:${A}Value`,a),s("change",{pleasure:n.value,arousal:o.value})},C=A=>{u.value[A]||(u.value[A]=!0,s("interacted",{type:A,pleasure:n.value,arousal:o.value}))},b=()=>{const A=["arousal","pleasure"];t.randomizeOrder?i.value=Math.random()>.5?[...A]:[...A].reverse():i.value=["pleasure","arousal"]};return e.onMounted(()=>{b()}),e.watch(()=>t.pleasureValue,A=>{n.value=A}),e.watch(()=>t.arousalValue,A=>{o.value=A}),(A,B)=>(e.openBlock(),e.createElementBlock("div",w,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(U.value,a=>(e.openBlock(),e.createElementBlock("div",{key:a.type,class:e.normalizeClass(["as-container",a.type])},[e.createElementVNode("div",L,[e.createElementVNode("img",{src:a.leftImage,alt:`${a.type} left`,class:"as-icon"},null,8,W),a.leftLabel?(e.openBlock(),e.createElementBlock("div",K,e.toDisplayString(a.leftLabel),1)):e.createCommentVNode("",!0)]),e.createElementVNode("input",{type:"range",name:`AS-${a.type}`,id:`AS-${a.type}`,value:a.value,min:"0",max:"1",step:"0.01",onInput:g=>P(a.type,g),onMousedown:g=>C(a.type),onTouchstart:g=>C(a.type),class:"as-slider"},null,40,R),e.createElementVNode("div",q,[e.createElementVNode("img",{src:a.rightImage,alt:`${a.type} right`,class:"as-icon"},null,8,h),a.rightLabel?(e.openBlock(),e.createElementBlock("div",N,e.toDisplayString(a.rightLabel),1)):e.createCommentVNode("",!0)]),e.createElementVNode("div",S,[e.createElementVNode("img",{src:e.unref(E),alt:"intensity cue"},null,8,D)])],2))),128))]))}},[["__scopeId","data-v-7a449788"]]);r.AffectiveSlider=p,r.default=p,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/affectiveslidervue.css

@@ -0,0 +1 @@
+.affective-slider[data-v-7a449788]{width:100%;max-width:800px;margin:0 auto;padding:20px}.as-container[data-v-7a449788]{margin:3em 0;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}.as-icon[data-v-7a449788]{width:60px;height:60px;object-fit:contain}.as-icon-wrapper[data-v-7a449788]{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;gap:4px}.as-icon-left[data-v-7a449788]{left:0}.as-icon-right[data-v-7a449788]{right:0}.as-icon-label[data-v-7a449788]{font-size:12px;color:#333;text-align:center;white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}.as-slider[data-v-7a449788]{-webkit-appearance:none;width:calc(100% - 140px);height:20px;background:#ddd;border-radius:10px;outline:none;margin:0 70px;cursor:pointer}.as-slider[data-v-7a449788]:focus{background:#ccc}.as-slider[data-v-7a449788]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:35px;height:35px;border-radius:50%;background:#fff;border:2px solid #505050;cursor:pointer;transition:all .2s ease}.as-slider[data-v-7a449788]::-webkit-slider-thumb:hover{background:#505050;border:2px solid white;box-shadow:0 0 12px #212121}.as-slider[data-v-7a449788]::-webkit-slider-thumb:active{background:#505050;border:2px solid white}.as-slider[data-v-7a449788]::-moz-range-thumb{width:35px;height:35px;border-radius:50%;background:#fff;border:2px solid #505050;cursor:pointer;transition:all .2s ease}.as-slider[data-v-7a449788]::-moz-range-thumb:hover{background:#505050;border:2px solid white;box-shadow:0 0 12px #212121}.as-slider[data-v-7a449788]::-moz-range-thumb:active{background:#505050;border:2px solid white}.as-slider[data-v-7a449788]::-moz-range-track{width:100%;height:20px;background:#ddd;border-radius:10px;border:none}.as-slider[data-v-7a449788]:focus::-moz-range-track{background:#ccc}.as-slider[data-v-7a449788]::-ms-track{width:100%;height:20px;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}.as-slider[data-v-7a449788]::-ms-fill-lower{background:#ddd;border-radius:10px}.as-slider[data-v-7a449788]::-ms-fill-upper{background:#ddd;border-radius:10px}.as-slider[data-v-7a449788]::-ms-thumb{width:35px;height:35px;border-radius:50%;background:#fff;border:2px solid #505050;cursor:pointer}.as-slider[data-v-7a449788]::-ms-thumb:hover{background:#505050;border:2px solid white;box-shadow:0 0 12px #212121}.as-slider[data-v-7a449788]::-ms-thumb:active{background:#505050;border:2px solid white}.as-slider[data-v-7a449788]:focus::-ms-fill-lower{background:#ccc}.as-slider[data-v-7a449788]:focus::-ms-fill-upper{background:#ccc}.as-intensity-cue[data-v-7a449788]{width:calc(100% - 140px);margin:10px 70px 0}.as-intensity-cue img[data-v-7a449788]{width:100%;height:auto}@media(max-width:768px){.as-icon[data-v-7a449788]{width:40px;height:40px}.as-slider[data-v-7a449788]{width:calc(100% - 100px);margin:0 50px}.as-intensity-cue[data-v-7a449788]{width:calc(100% - 100px);margin:10px 50px 0}.as-icon-label[data-v-7a449788]{font-size:10px;max-width:60px}}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@konbraphat51/affectiveslidervue",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/affective-slider-vue.umd.js",
+  "module": "./dist/affective-slider-vue.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/affective-slider-vue.es.js",
+      "require": "./dist/affective-slider-vue.umd.js"
+    },
+    "./dist/images/*": "./dist/images/*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "keywords": [
+    "vue",
+    "affective-slider",
+    "emotion",
+    "slider",
+    "component"
+  ],
+  "author": "",
+  "license": "CC-BY-SA-4.0",
+  "description": "A Vue component implementation of the Affective Slider for measuring pleasure and arousal",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/konbraphat51/AffectiveSlider.vue.git"
+  },
+  "bugs": {
+    "url": "https://github.com/konbraphat51/AffectiveSlider.vue/issues"
+  },
+  "homepage": "https://github.com/konbraphat51/AffectiveSlider.vue#readme",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.10",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^20.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.17",
+    "vue": "^3.5.26",
+    "vue-tsc": "^3.2.3"
+  },
+  "scripts": {
+    "build": "vue-tsc && vite build",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/src/components/AffectiveSlider.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="affective-slider">
+    <div
+      v-for="slider in orderedSliders"
+      :key="slider.type"
+      :class="['as-container', slider.type]"
+    >
+      <div class="as-icon-wrapper as-icon-left">
+        <img
+          :src="slider.leftImage"
+          :alt="`${slider.type} left`"
+          class="as-icon"
+        />
+        <div v-if="slider.leftLabel" class="as-icon-label">{{ slider.leftLabel }}</div>
+      </div>
+      <input
+        type="range"
+        :name="`AS-${slider.type}`"
+        :id="`AS-${slider.type}`"
+        :value="slider.value"
+        min="0"
+        max="1"
+        step="0.01"
+        @input="handleInput(slider.type, $event)"
+        @mousedown="handleInteraction(slider.type)"
+        @touchstart="handleInteraction(slider.type)"
+        class="as-slider"
+      />
+      <div class="as-icon-wrapper as-icon-right">
+        <img
+          :src="slider.rightImage"
+          :alt="`${slider.type} right`"
+          class="as-icon"
+        />
+        <div v-if="slider.rightLabel" class="as-icon-label">{{ slider.rightLabel }}</div>
+      </div>
+      <div class="as-intensity-cue">
+        <img :src="intensityCueImage" alt="intensity cue" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import unhappyImage from '../assets/images/AS_unhappy.png'
+import sleepyImage from '../assets/images/AS_sleepy.png'
+import happyImage from '../assets/images/AS_happy.png'
+import wideawakeImage from '../assets/images/AS_wideawake.png'
+import intensityCueImage from '../assets/images/AS_intensity_cue.png'
+
+const props = defineProps({
+  // Initial value for pleasure slider (0-1)
+  pleasureValue: {
+    type: Number,
+    default: 0.5,
+    validator: (value) => value >= 0 && value <= 1
+  },
+  // Initial value for arousal slider (0-1)
+  arousalValue: {
+    type: Number,
+    default: 0.5,
+    validator: (value) => value >= 0 && value <= 1
+  },
+  // Randomize the order of sliders
+  randomizeOrder: {
+    type: Boolean,
+    default: true
+  },
+  // Label below left icon for pleasure slider (unhappy face)
+  pleasureLeftLabel: {
+    type: String,
+    default: ''
+  },
+  // Label below right icon for pleasure slider (happy face)
+  pleasureRightLabel: {
+    type: String,
+    default: ''
+  },
+  // Label below left icon for arousal slider (sleepy face)
+  arousalLeftLabel: {
+    type: String,
+    default: ''
+  },
+  // Label below right icon for arousal slider (wide awake face)
+  arousalRightLabel: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:pleasureValue', 'update:arousalValue', 'change', 'interacted'])
+
+const pleasure = ref(props.pleasureValue)
+const arousal = ref(props.arousalValue)
+const sliderOrder = ref([])
+const interacted = ref({
+  pleasure: false,
+  arousal: false
+})
+
+const getLeftImage = (type) => {
+  return type === 'pleasure' ? unhappyImage : sleepyImage
+}
+
+const getRightImage = (type) => {
+  return type === 'pleasure' ? happyImage : wideawakeImage
+}
+
+const getLeftLabel = (type) => {
+  return type === 'pleasure' ? props.pleasureLeftLabel : props.arousalLeftLabel
+}
+
+const getRightLabel = (type) => {
+  return type === 'pleasure' ? props.pleasureRightLabel : props.arousalRightLabel
+}
+
+const orderedSliders = computed(() => {
+  return sliderOrder.value.map(type => ({
+    type,
+    value: type === 'pleasure' ? pleasure.value : arousal.value,
+    leftImage: getLeftImage(type),
+    rightImage: getRightImage(type),
+    leftLabel: getLeftLabel(type),
+    rightLabel: getRightLabel(type)
+  }))
+})
+
+const handleInput = (type, event) => {
+  const value = parseFloat(event.target.value)
+  if (type === 'pleasure') {
+    pleasure.value = value
+  } else {
+    arousal.value = value
+  }
+  emit(`update:${type}Value`, value)
+  emit('change', { pleasure: pleasure.value, arousal: arousal.value })
+}
+
+const handleInteraction = (type) => {
+  if (!interacted.value[type]) {
+    interacted.value[type] = true
+    emit('interacted', { type, pleasure: pleasure.value, arousal: arousal.value })
+  }
+}
+
+const initializeSliderOrder = () => {
+  const sliders = ['arousal', 'pleasure']
+  if (props.randomizeOrder) {
+    sliderOrder.value = Math.random() > 0.5 ? [...sliders] : [...sliders].reverse()
+  } else {
+    sliderOrder.value = ['pleasure', 'arousal']
+  }
+}
+
+onMounted(() => {
+  initializeSliderOrder()
+})
+
+watch(() => props.pleasureValue, (newVal) => {
+  pleasure.value = newVal
+})
+
+watch(() => props.arousalValue, (newVal) => {
+  arousal.value = newVal
+})
+</script>
+
+<style scoped>
+.affective-slider {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.as-container {
+  margin: 3em 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+}
+
+.as-icon {
+  width: 60px;
+  height: 60px;
+  object-fit: contain;
+}
+
+.as-icon-wrapper {
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.as-icon-left {
+  left: 0;
+}
+
+.as-icon-right {
+  right: 0;
+}
+
+.as-icon-label {
+  font-size: 12px;
+  color: #333;
+  text-align: center;
+  white-space: nowrap;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.as-slider {
+  -webkit-appearance: none;
+  width: calc(100% - 140px);
+  height: 20px;
+  background: #ddd;
+  border-radius: 10px;
+  outline: none;
+  margin: 0 70px;
+  cursor: pointer;
+}
+
+.as-slider:focus {
+  background: #ccc;
+}
+
+/* Webkit (Chrome, Safari, Edge) */
+.as-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid #505050;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.as-slider::-webkit-slider-thumb:hover {
+  background: #505050;
+  border: 2px solid white;
+  box-shadow: 0px 0px 12px #212121;
+}
+
+.as-slider::-webkit-slider-thumb:active {
+  background: #505050;
+  border: 2px solid white;
+}
+
+/* Firefox */
+.as-slider::-moz-range-thumb {
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid #505050;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.as-slider::-moz-range-thumb:hover {
+  background: #505050;
+  border: 2px solid white;
+  box-shadow: 0px 0px 12px #212121;
+}
+
+.as-slider::-moz-range-thumb:active {
+  background: #505050;
+  border: 2px solid white;
+}
+
+.as-slider::-moz-range-track {
+  width: 100%;
+  height: 20px;
+  background: #ddd;
+  border-radius: 10px;
+  border: none;
+}
+
+.as-slider:focus::-moz-range-track {
+  background: #ccc;
+}
+
+/* IE/Edge */
+.as-slider::-ms-track {
+  width: 100%;
+  height: 20px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+.as-slider::-ms-fill-lower {
+  background: #ddd;
+  border-radius: 10px;
+}
+
+.as-slider::-ms-fill-upper {
+  background: #ddd;
+  border-radius: 10px;
+}
+
+.as-slider::-ms-thumb {
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid #505050;
+  cursor: pointer;
+}
+
+.as-slider::-ms-thumb:hover {
+  background: #505050;
+  border: 2px solid white;
+  box-shadow: 0px 0px 12px #212121;
+}
+
+.as-slider::-ms-thumb:active {
+  background: #505050;
+  border: 2px solid white;
+}
+
+.as-slider:focus::-ms-fill-lower {
+  background: #ccc;
+}
+
+.as-slider:focus::-ms-fill-upper {
+  background: #ccc;
+}
+
+.as-intensity-cue {
+  width: calc(100% - 140px);
+  margin: 10px 70px 0;
+}
+
+.as-intensity-cue img {
+  width: 100%;
+  height: auto;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .as-icon {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .as-slider {
+    width: calc(100% - 100px);
+    margin: 0 50px;
+  }
+  
+  .as-intensity-cue {
+    width: calc(100% - 100px);
+    margin: 10px 50px 0;
+  }
+  
+  .as-icon-label {
+    font-size: 10px;
+    max-width: 60px;
+  }
+}
+</style>

package/src/components/__tests__/AffectiveSlider.spec.ts

@@ -0,0 +1,272 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount, flushPromises, VueWrapper, DOMWrapper } from '@vue/test-utils'
+import AffectiveSlider from '../AffectiveSlider.vue'
+import unhappyImage from '../../assets/images/AS_unhappy.png'
+import sleepyImage from '../../assets/images/AS_sleepy.png'
+import happyImage from '../../assets/images/AS_happy.png'
+import wideawakeImage from '../../assets/images/AS_wideawake.png'
+import intensityCueImage from '../../assets/images/AS_intensity_cue.png'
+
+describe('AffectiveSlider', () => {
+  let wrapper: VueWrapper
+
+  beforeEach(() => {
+    // Reset Math.random mock before each test
+    vi.restoreAllMocks()
+    wrapper = mount(AffectiveSlider, {
+      props: {
+        // Ensure fixed order for predictable DOM queries
+        randomizeOrder: false
+      }
+    })
+  })
+
+  describe('Component Rendering', () => {
+    it('should render the component', async () => {
+      await flushPromises()
+      expect(wrapper.find('.affective-slider').exists()).toBe(true)
+    })
+
+    it('should render two slider containers', async () => {
+      await flushPromises()
+      const containers = wrapper.findAll('.as-container')
+      expect(containers).toHaveLength(2)
+    })
+
+    it('should render slider inputs', async () => {
+      await flushPromises()
+      const sliders = wrapper.findAll('.as-slider')
+      expect(sliders).toHaveLength(2)
+    })
+
+    it('should render icons for both sliders', async () => {
+      await flushPromises()
+      const icons = wrapper.findAll('.as-icon')
+      // 2 sliders * 2 icons each (left and right) = 4 icons
+      expect(icons).toHaveLength(4)
+    })
+
+    it('should render intensity cue images', async () => {
+      await flushPromises()
+      const intensityCues = wrapper.findAll('.as-intensity-cue img')
+      expect(intensityCues).toHaveLength(2)
+    })
+  })
+
+  describe('Props', () => {
+    it('should accept pleasureValue prop', async () => {
+      // Re-mount for this specific test
+      wrapper = mount(AffectiveSlider, {
+        props: { pleasureValue: 0.7, randomizeOrder: false }
+      })
+      await flushPromises()
+      // Note: we can't directly test ref value, so we test the rendered output
+      const pleasureSlider = wrapper.find('input[name="AS-pleasure"]')
+      expect((pleasureSlider.element as HTMLInputElement).value).toBe('0.7')
+    })
+
+    it('should accept arousalValue prop', async () => {
+      // Re-mount for this specific test
+      wrapper = mount(AffectiveSlider, {
+        props: { arousalValue: 0.3, randomizeOrder: false }
+      })
+      await flushPromises()
+      const arousalSlider = wrapper.find('input[name="AS-arousal"]')
+      expect((arousalSlider.element as HTMLInputElement).value).toBe('0.3')
+    })
+
+    it('should have default values of 0.5 for both sliders', () => {
+      const pleasureSlider = wrapper.find('input[name="AS-pleasure"]')
+      const arousalSlider = wrapper.find('input[name="AS-arousal"]')
+      expect((pleasureSlider.element as HTMLInputElement).value).toBe('0.5')
+      expect((arousalSlider.element as HTMLInputElement).value).toBe('0.5')
+    })
+
+    it('should render pleasure labels when provided', async () => {
+      await wrapper.setProps({
+        pleasureLeftLabel: 'Sad',
+        pleasureRightLabel: 'Happy'
+      })
+      await flushPromises()
+      const labels = wrapper.findAll('.as-icon-label')
+      const labelTexts = labels.map((l: DOMWrapper<Element>) => l.text())
+      expect(labelTexts).toContain('Sad')
+      expect(labelTexts).toContain('Happy')
+    })
+
+    it('should render arousal labels when provided', async () => {
+      await wrapper.setProps({
+        arousalLeftLabel: 'Sleepy',
+        arousalRightLabel: 'Awake'
+      })
+      await flushPromises()
+      const labels = wrapper.findAll('.as-icon-label')
+      const labelTexts = labels.map((l: DOMWrapper<Element>) => l.text())
+      expect(labelTexts).toContain('Sleepy')
+      expect(labelTexts).toContain('Awake')
+    })
+  })
+
+  // Props validation tests are removed as they are no longer easily accessible with <script setup>
+  // and are implicitly covered by TypeScript during the build process.
+
+  describe('Slider Input Handling', () => {
+    it('should emit update:pleasureValue event', async () => {
+      await flushPromises()
+      const pleasureSlider = wrapper.find('input[name="AS-pleasure"]')
+      
+      await pleasureSlider.setValue(0.8)
+      expect(wrapper.emitted('update:pleasureValue')).toBeTruthy()
+      expect(wrapper.emitted('update:pleasureValue')![0]).toEqual([0.8])
+    })
+
+    it('should emit update:arousalValue event', async () => {
+      await flushPromises()
+      const arousalSlider = wrapper.find('input[name="AS-arousal"]')
+      
+      await arousalSlider.setValue(0.3)
+      expect(wrapper.emitted('update:arousalValue')).toBeTruthy()
+      expect(wrapper.emitted('update:arousalValue')![0]).toEqual([0.3])
+    })
+
+    it('should emit change event with both values', async () => {
+      await flushPromises()
+      const pleasureSlider = wrapper.find('input[name="AS-pleasure"]')
+      
+      await pleasureSlider.setValue(0.7)
+      expect(wrapper.emitted('change')).toBeTruthy()
+      expect(wrapper.emitted('change')![0]).toEqual([{ pleasure: 0.7, arousal: 0.5 }])
+    })
+  })
+
+  describe('Interaction Tracking', () => {
+    it('should emit interacted event on first mousedown', async () => {
+      await flushPromises()
+      const pleasureSlider = wrapper.find('input[name="AS-pleasure"]')
+      
+      await pleasureSlider.trigger('mousedown')
+      expect(wrapper.emitted('interacted')).toBeTruthy()
+      expect(wrapper.emitted('interacted')![0]).toEqual([{
+        type: 'pleasure',
+        pleasure: 0.5,
+        arousal: 0.5
+      }])
+    })
+
+    it('should emit interacted event on first touchstart', async () => {
+      await flushPromises()
+      const arousalSlider = wrapper.find('input[name="AS-arousal"]')
+      
+      await arousalSlider.trigger('touchstart')
+      expect(wrapper.emitted('interacted')).toBeTruthy()
+      expect(wrapper.emitted('interacted')![0]).toEqual([{
+        type: 'arousal',
+        pleasure: 0.5,
+        arousal: 0.5
+      }])
+    })
+
+    it('should only emit interacted event once per slider', async () => {
+      await flushPromises()
+      const pleasureSlider = wrapper.find('input[name="AS-pleasure"]')
+      
+      await pleasureSlider.trigger('mousedown')
+      await pleasureSlider.trigger('mousedown')
+      await pleasureSlider.trigger('touchstart')
+      
+      expect(wrapper.emitted('interacted')).toHaveLength(1)
+    })
+  })
+
+  describe('Slider Order', () => {
+    it('should randomize slider order when randomizeOrder is true', async () => {
+      const mockRandom = vi.spyOn(Math, 'random')
+      
+      mockRandom.mockReturnValue(0.3) // pleasure, arousal
+      wrapper.unmount()
+      const wrapper1 = mount(AffectiveSlider, { props: { randomizeOrder: true } })
+      await flushPromises()
+      const order1 = wrapper1.findAll('.as-container').map((w: DOMWrapper<Element>) => w.classes().find(c => c !== 'as-container'))
+
+      mockRandom.mockReturnValue(0.7) // arousal, pleasure
+      wrapper1.unmount()
+      const wrapper2 = mount(AffectiveSlider, { props: { randomizeOrder: true } })
+      await flushPromises()
+      const order2 = wrapper2.findAll('.as-container').map((w: DOMWrapper<Element>) => w.classes().find(c => c !== 'as-container'))
+      
+      expect(order1).not.toEqual(order2)
+    })
+
+    it('should have fixed order when randomizeOrder is false', async () => {
+      await flushPromises()
+      const containers = wrapper.findAll('.as-container')
+      // First slider should be pleasure, second should be arousal
+      expect(containers[0].classes()).toContain('pleasure')
+      expect(containers[1].classes()).toContain('arousal')
+    })
+  })
+
+  describe('Image Paths', () => {
+    it('should use correct images for all sliders', async () => {
+      await flushPromises()
+
+      const pleasureContainer = wrapper.find('.as-container.pleasure')
+      const arousalContainer = wrapper.find('.as-container.arousal')
+      
+      // Pleasure slider images
+      expect(pleasureContainer.find('.as-icon-left img').attributes('src')).toBe(unhappyImage)
+      expect(pleasureContainer.find('.as-icon-right img').attributes('src')).toBe(happyImage)
+      expect(pleasureContainer.find('.as-intensity-cue img').attributes('src')).toBe(intensityCueImage)
+
+      // Arousal slider images
+      expect(arousalContainer.find('.as-icon-left img').attributes('src')).toBe(sleepyImage)
+      expect(arousalContainer.find('.as-icon-right img').attributes('src')).toBe(wideawakeImage)
+      expect(arousalContainer.find('.as-intensity-cue img').attributes('src')).toBe(intensityCueImage)
+    })
+  })
+
+  describe('Watchers', () => {
+    it('should update internal pleasure value when prop changes', async () => {
+      await wrapper.setProps({ pleasureValue: 0.9 })
+      const pleasureSlider = wrapper.find('input[name="AS-pleasure"]')
+      expect((pleasureSlider.element as HTMLInputElement).value).toBe('0.9')
+    })
+
+    it('should update internal arousal value when prop changes', async () => {
+      await wrapper.setProps({ arousalValue: 0.2 })
+      const arousalSlider = wrapper.find('input[name="AS-arousal"]')
+      expect((arousalSlider.element as HTMLInputElement).value).toBe('0.2')
+    })
+  })
+
+  describe('Slider Attributes', () => {
+    it('should have correct min, max, and step attributes', async () => {
+      await flushPromises()
+      const sliders = wrapper.findAll('.as-slider')
+      
+      sliders.forEach((slider: DOMWrapper<Element>) => {
+        expect(slider.attributes('min')).toBe('0')
+        expect(slider.attributes('max')).toBe('1')
+        expect(slider.attributes('step')).toBe('0.01')
+      })
+    })
+
+    it('should have range input type', async () => {
+      await flushPromises()
+      const sliders = wrapper.findAll('.as-slider')
+      
+      sliders.forEach((slider: DOMWrapper<Element>) => {
+        expect(slider.attributes('type')).toBe('range')
+      })
+    })
+
+    it('should have unique IDs for each slider', async () => {
+      await flushPromises()
+      const pleasureSlider = wrapper.find('#AS-pleasure')
+      const arousalSlider = wrapper.find('#AS-arousal')
+      
+      expect(pleasureSlider.exists()).toBe(true)
+      expect(arousalSlider.exists()).toBe(true)
+    })
+  })
+})

package/src/index.ts

@@ -0,0 +1,4 @@
+import AffectiveSlider from './components/AffectiveSlider.vue'
+
+export { AffectiveSlider }
+export default AffectiveSlider

package/src/vite-env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}