├── .husky
    ├── .gitignore
    └── commit-msg
├── example
    ├── CNAME
    ├── entry.ts
    ├── CurrentValue.vue
    ├── index.html
    ├── vite.config.ts
    ├── ExampleFullBinding.vue
    ├── DefaultController.vue
    ├── ExampleTransition.vue
    ├── ExampleReactiveStyle.vue
    ├── ExampleDisabledItems.vue
    ├── ExampleDynamicOptions.vue
    ├── ExampleDialog.vue
    ├── ExampleSlot.vue
    ├── ExampleSensitivity.vue
    ├── ExampleEvent.vue
    ├── example.css
    ├── ExampleMultiple.vue
    └── App.vue
├── .gitignore
├── .npmignore
├── .prettierrc
├── .vscode
    ├── settings.json
    └── extensions.json
├── commitlint.config.js
├── types
    └── vue.d.ts
├── renovate.json
├── vitest.config.ts
├── eslint.config.mjs
├── .github
    └── workflows
    │   └── ci.yml
├── tsconfig.json
├── src
    ├── index.ts
    ├── components
    │   ├── VueScrollPicker.spec.ts
    │   └── VueScrollPicker.vue
    └── style.css
├── scripts
    └── test-build.mjs
├── vite.config.ts
├── package.json
└── README.md


/.husky/.gitignore:
--------------------------------------------------------------------------------
1 | _
2 | 


--------------------------------------------------------------------------------
/example/CNAME:
--------------------------------------------------------------------------------
1 | vue-scroll-picker.dist.be
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | /dist
4 | /example-dist
5 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *
2 | !/dist/**/*
3 | !/src/**/*
4 | !README.md
5 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "cSpell.words": [
3 |     "Optionable"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['@commitlint/config-conventional'],
3 | }
4 | 


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 | 
4 | npx --no-install commitlint --edit 
5 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "vue.volar",
4 |     "dbaeumer.vscode-eslint",
5 |     "streetsidesoftware.code-spell-checker"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/types/vue.d.ts:
--------------------------------------------------------------------------------
1 | // declare module '*.vue' {
2 | //   import { DefineComponent } from 'vue'
3 | //   const component: DefineComponent<{}, {}, any>
4 | //   export default component
5 | // }
6 | 


--------------------------------------------------------------------------------
/example/entry.ts:
--------------------------------------------------------------------------------
 1 | import './example.css'
 2 | import 'vue-scroll-picker/dist/style.css'
 3 | 
 4 | import { createApp } from 'vue'
 5 | 
 6 | import App from './App.vue'
 7 | 
 8 | const app = createApp(App)
 9 | 
10 | app.mount('#app')
11 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "config:base",
 4 |     "docker:disable",
 5 |     ":dependencyDashboard"
 6 |   ],
 7 |   "automerge": true,
 8 |   "major": {
 9 |     "automerge": false,
10 |     "dependencyDashboardApproval": true
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/example/CurrentValue.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps<{
 3 |   value?: unknown
 4 | }>()
 5 | </script>
 6 | <template>
 7 |   <div>
 8 |     currentValue =
 9 |     <code>{{
10 |       typeof value === 'undefined' ? 'undefined' : JSON.stringify(value)
11 |     }}</code>
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { mergeConfig, ViteUserConfig } from 'vitest/config'
 2 | import viteConfig from './vite.config'
 3 | 
 4 | export default mergeConfig(viteConfig, {
 5 |   test: {
 6 |     include: ['src/**/*.spec.ts'],
 7 |     setupFiles: ['vitest-browser-vue'],
 8 |     browser: {
 9 |       enabled: true,
10 |       provider: 'playwright',
11 |       instances: [{ browser: 'chromium' }],
12 |     },
13 |   },
14 | } satisfies ViteUserConfig)
15 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 2 | import eslintPluginVue from 'eslint-plugin-vue'
 3 | import {
 4 |   defineConfigWithVueTs,
 5 |   vueTsConfigs,
 6 | } from '@vue/eslint-config-typescript'
 7 | 
 8 | export default defineConfigWithVueTs(
 9 |   {
10 |     ignores: ['example-dist/*', 'dist/*'],
11 |   },
12 |   eslintPluginVue.configs['flat/recommended'],
13 |   vueTsConfigs.recommended,
14 |   eslintPluginPrettierRecommended,
15 |   {
16 |     rules: {
17 |       'no-console': 'error',
18 |     },
19 |   },
20 | )
21 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [main]
 6 |   pull_request:
 7 |     branches: [main]
 8 | 
 9 | jobs:
10 |   build:
11 |     runs-on: ubuntu-latest
12 |     strategy:
13 |       matrix:
14 |         node-version: [18.x, 20.x, 22.x, 23.x]
15 | 
16 |     steps:
17 |       - uses: actions/checkout@v3
18 |       - name: Use Node.js ${{ matrix.node-version }}
19 |         uses: actions/setup-node@v3
20 |         with:
21 |           node-version: ${{ matrix.node-version }}
22 |       - run: npm ci
23 |       - run: npx playwright install
24 |       - run: npm run test
25 |         env:
26 |           CI: true
27 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 8 |   <title>Vue Scroll Picker Sample - Default</title>
 9 |   <!-- Google tag (gtag.js) -->
10 |   <script async src="https://www.googletagmanager.com/gtag/js?id=G-5WX0C4RSXD"></script>
11 |   <script>
12 |     window.dataLayer = window.dataLayer || [];
13 |     function gtag() { dataLayer.push(arguments); }
14 |     gtag('js', new Date());
15 | 
16 |     gtag('config', 'G-5WX0C4RSXD');
17 |   </script>
18 | </head>
19 | 
20 | <body>
21 |   <div id="app"></div>
22 |   <script type="module" src="/entry.ts"></script>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "outDir": "dist",
 5 |     "baseUrl": "./",
 6 |     "paths": {
 7 |       "vue-scroll-picker": ["./src"]
 8 |     },
 9 |     "module": "commonjs",
10 |     "moduleResolution": "node",
11 |     "lib": [
12 |       "DOM",
13 |       "ESNEXT"
14 |     ],
15 |     "emitDeclarationOnly": true,
16 |     "declaration": true,
17 |     "pretty": true,
18 |     "sourceMap": true,
19 |     "strict": true,
20 |     "esModuleInterop": true,
21 |     "noImplicitReturns": true,
22 |     "skipLibCheck": true,
23 |     "types": ["vite/client", "@vue/runtime-dom"]
24 |   },
25 |   "include": [
26 |     "example/**/*.ts",
27 |     "example/**/*.vue",
28 |     "src/**/*.ts",
29 |     "src/**/*.vue",
30 |     "types/**/*.ts"
31 |   ]
32 | }
33 | 


--------------------------------------------------------------------------------
/example/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import vue from '@vitejs/plugin-vue'
 2 | import { resolve } from 'path'
 3 | import { defineConfig } from 'vite'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [vue()],
 8 |   resolve: {
 9 |     alias: {
10 |       'vue-scroll-picker': resolve(__dirname, '..'),
11 |     },
12 |   },
13 |   build: {
14 |     outDir: resolve(__dirname, '../example-dist'),
15 |     emptyOutDir: true,
16 |     rollupOptions: {
17 |       output: {
18 |         manualChunks(id) {
19 |           if (!id.includes('node_modules')) {
20 |             return
21 |           }
22 |           return id
23 |             .toString()
24 |             .split('node_modules/')[1]
25 |             .split('/')[0]
26 |             .toString()
27 |         },
28 |       },
29 |     },
30 |   },
31 | })
32 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { App, Component, Plugin } from 'vue'
 2 | 
 3 | import VueScrollPicker, {
 4 |   type ScrollPickerValue,
 5 |   type ScrollPickerOption,
 6 |   type ScrollPickerOptionable,
 7 | } from './components/VueScrollPicker.vue'
 8 | 
 9 | import './style.css'
10 | 
11 | export function install(app: App) {
12 |   app.component('VueScrollPicker', VueScrollPicker as unknown as Component)
13 | }
14 | 
15 | if (typeof window !== 'undefined' && 'Vue' in window) {
16 |   install(window.Vue as App)
17 | }
18 | 
19 | const plugin: Plugin = {
20 |   install,
21 | }
22 | 
23 | export default plugin
24 | 
25 | export { VueScrollPicker }
26 | 
27 | export type VueScrollPickerValue = ScrollPickerValue
28 | export type VueScrollPickerOption = ScrollPickerOption
29 | export type VueScrollPickerOptionable<T> = ScrollPickerOptionable<T>
30 | 


--------------------------------------------------------------------------------
/example/ExampleFullBinding.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import {
 4 |   VueScrollPicker,
 5 |   VueScrollPickerOption,
 6 |   VueScrollPickerValue,
 7 | } from 'vue-scroll-picker'
 8 | import CurrentValue from './CurrentValue.vue'
 9 | import DefaultController from './DefaultController.vue'
10 | 
11 | defineProps<{
12 |   options: VueScrollPickerOption[]
13 | }>()
14 | 
15 | const currentValue = ref<VueScrollPickerValue>(null)
16 | </script>
17 | 
18 | <template>
19 |   <div>
20 |     <div class="controller">
21 |       <CurrentValue :value="currentValue" />
22 |       <DefaultController v-model="currentValue" :options="options" />
23 |     </div>
24 |     <VueScrollPicker
25 |       v-model="currentValue"
26 |       placeholder="Select"
27 |       :options="options"
28 |     />
29 |   </div>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/src/components/VueScrollPicker.spec.ts:
--------------------------------------------------------------------------------
 1 | import '@vitest/browser/matchers.d.ts'
 2 | 
 3 | import { describe, expect, test } from 'vitest'
 4 | import { render } from 'vitest-browser-vue'
 5 | import VueScrollPicker from './VueScrollPicker.vue'
 6 | 
 7 | import '../style.css'
 8 | 
 9 | describe('Picker', () => {
10 |   test('should be able to select option', async () => {
11 |     const screen = render(VueScrollPicker, {
12 |       props: {
13 |         options: [1, 2, 3],
14 |         modelValue: 1,
15 |       },
16 |     })
17 | 
18 |     await expect
19 |       .element(screen.getByRole('option', { selected: true }))
20 |       .toHaveTextContent('1')
21 | 
22 |     screen.rerender({
23 |       modelValue: 2,
24 |     })
25 | 
26 |     await expect
27 |       .element(screen.getByRole('option', { selected: true }))
28 |       .toHaveTextContent('2')
29 |   })
30 | })
31 | 


--------------------------------------------------------------------------------
/example/DefaultController.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { VueScrollPickerOption, VueScrollPickerValue } from 'vue-scroll-picker'
 3 | 
 4 | defineProps<{
 5 |   modelValue?: VueScrollPickerValue
 6 |   options: VueScrollPickerOption[]
 7 | }>()
 8 | 
 9 | const emit = defineEmits<{
10 |   (event: 'update:modelValue', value: VueScrollPickerValue): void
11 | }>()
12 | </script>
13 | <template>
14 |   <div class="button-group">
15 |     <a
16 |       v-for="(option, index) in options"
17 |       :key="index"
18 |       class="button"
19 |       :class="{
20 |         active: modelValue === option.value,
21 |         disabled: option.disabled,
22 |       }"
23 |       @click="emit('update:modelValue', option.value)"
24 |       >{{ option.value === null ? 'NULL' : option.name }}</a
25 |     >
26 |     <a
27 |       class="button"
28 |       :class="{ active: modelValue === 'unknown' }"
29 |       @click="emit('update:modelValue', 'unknown')"
30 |       >(Unknown)</a
31 |     >
32 |   </div>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/scripts/test-build.mjs:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | 
 3 | import { readFile, stat } from 'fs/promises'
 4 | 
 5 | const __dirname = new URL('.', import.meta.url).pathname
 6 | 
 7 | const pkg = JSON.parse(await readFile(`${__dirname}/../package.json`))
 8 | 
 9 | const files = [pkg.main, pkg.module, pkg.types, pkg.typings, pkg.exports]
10 | 
11 | const wrongFiles = []
12 | async function traverse(obj) {
13 |   if (Array.isArray(obj)) {
14 |     return Promise.all(obj.map((item) => traverse(item)))
15 |   }
16 | 
17 |   if (typeof obj === 'object' && obj !== null) {
18 |     return Promise.all(Object.values(obj).map((item) => traverse(item)))
19 |   }
20 | 
21 |   if (typeof obj === 'string') {
22 |     console.log('check', obj)
23 |     try {
24 |       await stat(`${__dirname}/../${obj}`)
25 |     } catch {
26 |       console.warn(`file(${file}) not found`)
27 |       wrongFiles.push(file)
28 |     }
29 |   }
30 | }
31 | 
32 | traverse(files).then(() => {
33 |   if (wrongFiles.length > 0) {
34 |     console.error('Build failed')
35 |     process.exit(1)
36 |   }
37 | 
38 |   console.log('Build succeeded')
39 | })
40 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import vue from '@vitejs/plugin-vue'
 2 | import { defineConfig } from 'vite'
 3 | import dts from 'vite-plugin-dts'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   esbuild: {
 8 |     drop: process.env.BUILD_TARGET === 'npm' ? ['console', 'debugger'] : [],
 9 |   },
10 |   plugins: [
11 |     vue({
12 |       exclude: ['src/**/*.spec.ts'],
13 |     }),
14 |     dts({
15 |       outDir: 'dist',
16 |       include: ['src/**/*.ts', 'src/**/*.vue'],
17 |       exclude: ['src/**/*.spec.ts'],
18 |     }),
19 |   ],
20 |   build: {
21 |     outDir: 'dist',
22 |     lib: {
23 |       entry: 'src/index.ts',
24 |       name: 'VueScrollPicker',
25 |       formats: ['es', 'cjs'],
26 |       fileName: (format, entryName) =>
27 |         format === 'es'
28 |           ? `${entryName}.mjs`
29 |           : format === 'cjs'
30 |             ? `${entryName}.cjs`
31 |             : `${entryName}.js`,
32 |     },
33 |     rollupOptions: {
34 |       external: ['vue'],
35 |       output: {
36 |         globals: {
37 |           vue: 'Vue',
38 |         },
39 |       },
40 |     },
41 |     sourcemap: true,
42 |   },
43 | })
44 | 


--------------------------------------------------------------------------------
/example/ExampleTransition.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import {
 4 |   VueScrollPicker,
 5 |   VueScrollPickerOption,
 6 |   VueScrollPickerValue,
 7 | } from 'vue-scroll-picker'
 8 | import CurrentValue from './CurrentValue.vue'
 9 | 
10 | defineProps<{
11 |   options: VueScrollPickerOption[]
12 | }>()
13 | 
14 | const currentValue = ref<VueScrollPickerValue>(null)
15 | 
16 | const isVisible = ref(false)
17 | </script>
18 | <template>
19 |   <div>
20 |     <div class="controller">
21 |       <CurrentValue :value="currentValue" />
22 |       <div class="button-group">
23 |         <a class="button" @click="isVisible = !isVisible">{{
24 |           isVisible ? 'Hide' : 'Show'
25 |         }}</a>
26 |       </div>
27 |     </div>
28 |     <transition name="fade">
29 |       <VueScrollPicker
30 |         v-if="isVisible"
31 |         v-model="currentValue"
32 |         :options="options"
33 |       />
34 |     </transition>
35 |   </div>
36 | </template>
37 | <style scoped>
38 | .fade-enter-active,
39 | .fade-leave-active {
40 |   transition: opacity 0.5s;
41 | }
42 | .fade-enter-from,
43 | .fade-leave-to {
44 |   opacity: 0;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/example/ExampleReactiveStyle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import {
 4 |   VueScrollPicker,
 5 |   VueScrollPickerOption,
 6 |   VueScrollPickerValue,
 7 | } from 'vue-scroll-picker'
 8 | import CurrentValue from './CurrentValue.vue'
 9 | import DefaultController from './DefaultController.vue'
10 | 
11 | defineProps<{
12 |   options: VueScrollPickerOption[]
13 | }>()
14 | 
15 | const currentValue = ref<VueScrollPickerValue>(null)
16 | 
17 | const fontSize = ref(16)
18 | </script>
19 | <template>
20 |   <div>
21 |     <div class="controller">
22 |       <CurrentValue :value="currentValue" />
23 |       <DefaultController v-model="currentValue" :options="options" />
24 |       <div>
25 |         <span>Font Size: {{ fontSize }}px</span>
26 |         <input
27 |           v-model="fontSize"
28 |           type="range"
29 |           :min="4"
30 |           :max="128"
31 |           :step="1"
32 |           @input="($refs.picker as any).resize()"
33 |         />
34 |       </div>
35 |     </div>
36 |     <div
37 |       :style="{
38 |         'font-size': `${fontSize}px`,
39 |       }"
40 |     >
41 |       <VueScrollPicker ref="picker" v-model="currentValue" :options="options" />
42 |     </div>
43 |   </div>
44 | </template>
45 | 


--------------------------------------------------------------------------------
/example/ExampleDisabledItems.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import {
 4 |   VueScrollPicker,
 5 |   VueScrollPickerOption,
 6 |   VueScrollPickerValue,
 7 | } from 'vue-scroll-picker'
 8 | import CurrentValue from './CurrentValue.vue'
 9 | import DefaultController from './DefaultController.vue'
10 | 
11 | const options: VueScrollPickerOption[] = [
12 |   { value: null, name: 'Select an option' },
13 |   { value: 0, name: '0KG' },
14 |   { value: 10, name: '10KG', disabled: true },
15 |   { value: 20, name: '20KG' },
16 |   { value: 30, name: '30KG' },
17 |   { value: 40, name: '40KG' },
18 |   { value: 50, name: '50KG', disabled: true },
19 |   { value: 60, name: '60KG', disabled: true },
20 |   { value: 70, name: '70KG' },
21 |   { value: 80, name: '80KG' },
22 |   { value: 90, name: '90KG', disabled: true },
23 |   { value: 100, name: '100KG', disabled: true },
24 | ]
25 | 
26 | const currentValue = ref<VueScrollPickerValue>(null)
27 | </script>
28 | <template>
29 |   <div>
30 |     <div class="controller">
31 |       <CurrentValue :value="currentValue" />
32 |       <DefaultController v-model="currentValue" :options="options" />
33 |     </div>
34 |     <VueScrollPicker v-model="currentValue" :options="options" />
35 |   </div>
36 | </template>
37 | 


--------------------------------------------------------------------------------
/example/ExampleDynamicOptions.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import {
 4 |   VueScrollPicker,
 5 |   VueScrollPickerOptionable,
 6 |   VueScrollPickerValue,
 7 | } from 'vue-scroll-picker'
 8 | import CurrentValue from './CurrentValue.vue'
 9 | 
10 | const options = ref<VueScrollPickerOptionable<number>[]>([])
11 | const currentValue = ref<VueScrollPickerValue>(null)
12 | 
13 | function pushItem() {
14 |   options.value.push(~~(Math.random() * 100000))
15 | }
16 | function popItem() {
17 |   options.value.pop()
18 | }
19 | function unshiftItem() {
20 |   options.value.unshift(~~(Math.random() * 100000))
21 | }
22 | function shiftItem() {
23 |   options.value.shift()
24 | }
25 | function replaceItems() {
26 |   options.value = [...new Array(10)].map(() => ~~(Math.random() * 100000))
27 | }
28 | </script>
29 | <template>
30 |   <div>
31 |     <div class="controller">
32 |       <CurrentValue :value="currentValue" />
33 |       <div class="button-group">
34 |         <a class="button" @click="pushItem">Push Random Item</a>
35 |         <a class="button" @click="popItem">Pop Item</a>
36 |         <a class="button" @click="unshiftItem">Unshift Random Item</a>
37 |         <a class="button" @click="shiftItem">Shift Item</a>
38 |         <a class="button" @click="replaceItems">Replace 10 Items</a>
39 |       </div>
40 |     </div>
41 |     <VueScrollPicker v-model="currentValue" :options="options" />
42 |   </div>
43 | </template>
44 | 


--------------------------------------------------------------------------------
/example/ExampleDialog.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import {
 4 |   VueScrollPicker,
 5 |   VueScrollPickerOption,
 6 |   VueScrollPickerValue,
 7 | } from 'vue-scroll-picker'
 8 | import CurrentValue from './CurrentValue.vue'
 9 | 
10 | defineProps<{
11 |   options: VueScrollPickerOption[]
12 | }>()
13 | 
14 | const currentValue = ref<VueScrollPickerValue>(null)
15 | 
16 | function handleClick() {
17 |   const dialog = document.querySelector('dialog')
18 |   dialog?.showModal()
19 | }
20 | 
21 | function handleClose() {
22 |   const dialog = document.querySelector('dialog')
23 |   dialog?.close()
24 | }
25 | </script>
26 | <template>
27 |   <div>
28 |     <div class="controller">
29 |       <CurrentValue :value="currentValue" />
30 |       <button type="button" class="button" @click="handleClick">
31 |         Open Dialog
32 |       </button>
33 |     </div>
34 |     <dialog>
35 |       <VueScrollPicker v-model="currentValue" :options="options" />
36 |       <button type="button" class="button" @click="handleClose">
37 |         Close Dialog
38 |       </button>
39 |     </dialog>
40 |   </div>
41 | </template>
42 | <style scoped>
43 | dialog {
44 |   width: 600px;
45 |   transition: all 0.3s allow-discrete;
46 |   border: 0;
47 |   border-radius: 8px;
48 |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
49 |   outline: none;
50 | }
51 | 
52 | dialog::backdrop {
53 |   transition: all 0.3s allow-discrete;
54 |   background-color: rgba(0, 0, 0, 0.2);
55 |   opacity: 0;
56 | }
57 | 
58 | dialog[open],
59 | dialog[open]::backdrop {
60 |   opacity: 1;
61 | }
62 | 
63 | @starting-style {
64 |   dialog[open],
65 |   dialog[open]::backdrop {
66 |     opacity: 0;
67 |   }
68 | }
69 | 
70 | dialog:not([open]),
71 | dialog:not([open])::backdrop {
72 |   opacity: 0;
73 | }
74 | </style>
75 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | .vue-scroll-picker {
 2 |   position: relative;
 3 |   width: 100%;
 4 |   height: 10em;
 5 |   overflow: hidden;
 6 |   user-select: none;
 7 | }
 8 | 
 9 | .vue-scroll-picker-rotator {
10 |   position: absolute;
11 |   left: 0;
12 |   right: 0;
13 |   top: calc(50% - .6em);
14 | }
15 | 
16 | .vue-scroll-picker-rotator-transition {
17 |   transition: top ease 150ms;
18 | }
19 | 
20 | .vue-scroll-picker-item {
21 |   text-align: center;
22 |   line-height: 1.2em;
23 |   color: #333;
24 | }
25 | 
26 | .vue-scroll-picker-item[aria-selected='true'] {
27 |   color: #007bff;
28 | }
29 | 
30 | .vue-scroll-picker-item[data-value=''],
31 | .vue-scroll-picker-item[aria-disabled='true'] {
32 |   color: #ccc;
33 | }
34 | 
35 | .vue-scroll-picker-item[data-value=''][aria-selected='true'],
36 | .vue-scroll-picker-item[aria-disabled='true'][aria-selected='true'] {
37 |   color: #aaa;
38 | }
39 | 
40 | .vue-scroll-picker-layer {
41 |   position: absolute;
42 |   left: 0;
43 |   right: 0;
44 |   top: 0;
45 |   bottom: 0;
46 | }
47 | 
48 | .vue-scroll-picker-layer-top,
49 | .vue-scroll-picker-layer-selection,
50 | .vue-scroll-picker-layer-bottom {
51 |   position: absolute;
52 |   left: 0;
53 |   right: 0;
54 | }
55 | 
56 | .vue-scroll-picker-layer-top {
57 |   box-sizing: border-box;
58 |   border-bottom: 1px solid #c8c7cc;
59 |   background: linear-gradient(180deg,#fff 10%,rgba(255, 255, 255, .7));
60 |   top: 0;
61 |   height: calc(50% - 1em);
62 |   cursor: pointer;
63 | }
64 | 
65 | .vue-scroll-picker-layer-selection {
66 |   top: calc(50% - 1em);
67 |   bottom: calc(50% - 1em);
68 | }
69 | 
70 | .vue-scroll-picker-layer-bottom {
71 |   border-top: 1px solid #c8c7cc;
72 |   background: linear-gradient(0deg,#fff 10%,rgba(255, 255, 255, .7));
73 |   bottom: 0;
74 |   height: calc(50% - 1em);
75 |   cursor: pointer;
76 | }
77 | 


--------------------------------------------------------------------------------
/example/ExampleSlot.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   siFacebook,
 4 |   siInstagram,
 5 |   siLine,
 6 |   siTwitter,
 7 |   siYoutube,
 8 | } from 'simple-icons/icons'
 9 | import { ref } from 'vue'
10 | import {
11 |   VueScrollPicker,
12 |   VueScrollPickerOption,
13 |   VueScrollPickerValue,
14 | } from 'vue-scroll-picker'
15 | import CurrentValue from './CurrentValue.vue'
16 | import DefaultController from './DefaultController.vue'
17 | 
18 | const options: (VueScrollPickerOption & { icon?: string })[] = [
19 |   { value: null, name: 'Select an option' },
20 |   { value: 'instagram', name: ' Instagram', icon: siInstagram.svg },
21 |   { value: 'facebook', name: 'Facebook', icon: siFacebook.svg },
22 |   { value: 'youtube', name: 'Youtube', icon: siYoutube.svg },
23 |   { value: 'twitter', name: 'Twitter', icon: siTwitter.svg },
24 |   { value: 'line', name: 'Line', icon: siLine.svg },
25 | ]
26 | const currentValue = ref<VueScrollPickerValue>(null)
27 | </script>
28 | <template>
29 |   <div>
30 |     <div class="controller">
31 |       <CurrentValue :value="currentValue" />
32 |       <DefaultController v-model="currentValue" :options="options" />
33 |     </div>
34 |     <VueScrollPicker v-model="currentValue" :options="options">
35 |       <template #default="{ option }">
36 |         <div class="custom-option">
37 |           <!-- eslint-disable-next-line vue/no-v-html -->
38 |           <div class="custom-option-icon" v-html="option.icon" />
39 |           <span>{{ option.name }}</span>
40 |         </div>
41 |       </template>
42 |     </VueScrollPicker>
43 |   </div>
44 | </template>
45 | <style scoped>
46 | .custom-option {
47 |   padding: 2px 0;
48 |   display: flex;
49 |   align-items: center;
50 |   justify-content: center;
51 | }
52 | .custom-option-icon {
53 |   width: 20px;
54 |   height: 20px;
55 |   margin-right: 6px;
56 |   fill: currentColor;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/example/ExampleSensitivity.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import {
 4 |   VueScrollPicker,
 5 |   VueScrollPickerOption,
 6 |   VueScrollPickerValue,
 7 | } from 'vue-scroll-picker'
 8 | import CurrentValue from './CurrentValue.vue'
 9 | 
10 | defineProps<{
11 |   options: VueScrollPickerOption[]
12 | }>()
13 | 
14 | const currentValue = ref<VueScrollPickerValue>(null)
15 | 
16 | const dragSensitivity = ref(1.7)
17 | const touchSensitivity = ref(1.7)
18 | const scrollSensitivity = ref(1)
19 | </script>
20 | <template>
21 |   <div>
22 |     <div class="controller">
23 |       <CurrentValue :value="currentValue" />
24 |       <div class="nobs">
25 |         <div class="nob">
26 |           <label>Drag Sensitivity (default = 1.7)</label>
27 |           <div>
28 |             <input
29 |               v-model.number="dragSensitivity"
30 |               type="range"
31 |               min="0.5"
32 |               max="10"
33 |               step="0.1"
34 |             />
35 |             {{ dragSensitivity }}
36 |           </div>
37 |         </div>
38 |         <div class="nob">
39 |           <label>Touch Sensitivity (default = 1.7)</label>
40 |           <div>
41 |             <input
42 |               v-model.number="touchSensitivity"
43 |               type="range"
44 |               min="0.5"
45 |               max="10"
46 |               step="0.1"
47 |             />
48 |             {{ touchSensitivity }}
49 |           </div>
50 |         </div>
51 |         <div class="nob">
52 |           <label>Scroll Sensitivity (default = 1)</label>
53 |           <div>
54 |             <input
55 |               v-model.number="scrollSensitivity"
56 |               type="range"
57 |               min="0.5"
58 |               max="10"
59 |               step="0.1"
60 |             />
61 |             {{ scrollSensitivity }}
62 |           </div>
63 |         </div>
64 |       </div>
65 |     </div>
66 |     <VueScrollPicker
67 |       v-model="currentValue"
68 |       :drag-sensitivity="dragSensitivity"
69 |       :touch-sensitivity="touchSensitivity"
70 |       :scroll-sensitivity="scrollSensitivity"
71 |       :options="options"
72 |     />
73 |   </div>
74 | </template>
75 | <style scoped>
76 | .nobs {
77 |   display: flex;
78 |   flex-wrap: wrap;
79 |   margin-left: -0.5rem;
80 |   margin-right: -0.5rem;
81 | }
82 | .nob {
83 |   margin: 0.5rem;
84 | }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/example/ExampleEvent.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { ref } from 'vue'
 3 | import {
 4 |   VueScrollPicker,
 5 |   VueScrollPickerOption,
 6 |   VueScrollPickerValue,
 7 | } from 'vue-scroll-picker'
 8 | import CurrentValue from './CurrentValue.vue'
 9 | import DefaultController from './DefaultController.vue'
10 | 
11 | defineProps<{
12 |   options: VueScrollPickerOption[]
13 | }>()
14 | 
15 | const currentValue = ref<VueScrollPickerValue>(null)
16 | 
17 | const logMessages = ref<string[]>([])
18 | 
19 | function log(event: string, ...args: unknown[]) {
20 |   logMessages.value.unshift(
21 |     `@${event}(${args.map((arg) => JSON.stringify(arg)).join(', ')})`,
22 |   )
23 |   if (logMessages.value.length > 100) {
24 |     logMessages.value.pop()
25 |   }
26 | }
27 | </script>
28 | <template>
29 |   <div class="container">
30 |     <div class="example">
31 |       <div class="controller">
32 |         <CurrentValue :value="currentValue" />
33 |         <DefaultController v-model="currentValue" :options="options" />
34 |       </div>
35 |       <VueScrollPicker
36 |         v-model="currentValue"
37 |         :options="options"
38 |         @start="(...args) => log('start', ...args)"
39 |         @cancel="(...args) => log('cancel', ...args)"
40 |         @end="(...args) => log('end', ...args)"
41 |         @click="(...args) => log('click', ...args)"
42 |         @move="(...args) => log('move', ...args)"
43 |         @wheel="(...args) => log('wheel', ...args)"
44 |         @update:model-value="(...args) => log('update:model-value', ...args)"
45 |       />
46 |     </div>
47 |     <div class="log-container">
48 |       <div class="log">
49 |         <div v-for="(logMessage, index) in logMessages" :key="index">
50 |           {{ logMessage }}
51 |         </div>
52 |       </div>
53 |     </div>
54 |   </div>
55 | </template>
56 | <style scoped>
57 | .container {
58 |   display: flex;
59 |   align-items: stretch;
60 |   flex-direction: column;
61 |   gap: 16px;
62 | }
63 | .example {
64 |   flex: 1;
65 | }
66 | .log-container {
67 |   position: relative;
68 |   min-width: 320px;
69 |   height: 240px;
70 | }
71 | .log {
72 |   position: absolute;
73 |   left: 0;
74 |   top: 0;
75 |   right: 0;
76 |   bottom: 0;
77 |   border: 1px solid #ccc;
78 |   padding: 4px;
79 |   overflow: scroll;
80 | }
81 | @media (min-width: 768px) {
82 |   .container {
83 |     flex-direction: row;
84 |   }
85 |   .log-container {
86 |     height: auto;
87 |   }
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-scroll-picker",
 3 |   "version": "2.0.1",
 4 |   "description": "iOS Style Scroll Picker Component for Vue 3. Support All Gestures of Mouse(also MouseWheel) and Touch.",
 5 |   "author": "Changwan Jun",
 6 |   "license": "MIT",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "git://github.com/wan2land/vue-scroll-picker.git"
10 |   },
11 |   "scripts": {
12 |     "prepack": "npm run build",
13 |     "test": "npm run test:eslint && npm run test:vitest && npm run build",
14 |     "test:eslint": "eslint",
15 |     "test:vitest": "vitest run",
16 |     "test:build": "npm run build:production && node scripts/test-build.mjs",
17 |     "dev": "concurrently \"npm run dev:example\" \"npm run build:watch\"",
18 |     "dev:example": "vite serve example --host 0.0.0.0",
19 |     "build": "npm run build:production && node scripts/test-build.mjs",
20 |     "build:watch": "vite build --watch",
21 |     "build:production": "vite build",
22 |     "build:example": "vite build example && cp example/CNAME example-dist/",
23 |     "deploy:example": "npm run build:example && gh-pages -d example-dist"
24 |   },
25 |   "type": "module",
26 |   "types": "dist/index.d.ts",
27 |   "typings": "dist/index.d.ts",
28 |   "main": "dist/index.mjs",
29 |   "module": "dist/index.mjs",
30 |   "exports": {
31 |     ".": {
32 |       "types": "./dist/index.d.ts",
33 |       "default": "./dist/index.mjs",
34 |       "import": "./dist/index.mjs",
35 |       "require": "./dist/index.cjs"
36 |     },
37 |     "./style.css": "./dist/style.css",
38 |     "./package.json": "./package.json"
39 |   },
40 |   "devDependencies": {
41 |     "@commitlint/cli": "17.8.1",
42 |     "@commitlint/config-conventional": "13.2.0",
43 |     "@types/node": "18.19.130",
44 |     "@vitejs/plugin-vue": "^4.6.2",
45 |     "@vitest/browser": "^3.0.4",
46 |     "@vue/compiler-sfc": "3.5.25",
47 |     "@vue/eslint-config-typescript": "^14.3.0",
48 |     "@vue/test-utils": "^2.4.6",
49 |     "concurrently": "^9.1.2",
50 |     "date-fns": "^4.1.0",
51 |     "eslint": "^9.19.0",
52 |     "eslint-config-prettier": "^10.0.1",
53 |     "eslint-plugin-prettier": "^5.2.3",
54 |     "eslint-plugin-vue": "^9.32.0",
55 |     "gh-pages": "5.0.0",
56 |     "happy-dom": "^16.7.3",
57 |     "husky": "7.0.4",
58 |     "playwright": "^1.50.0",
59 |     "prettier": "^3.4.2",
60 |     "simple-icons": "7.21.0",
61 |     "typescript": "^5.7.3",
62 |     "vite": "^4.5.2",
63 |     "vite-plugin-dts": "^4.5.0",
64 |     "vitest": "^3.0.4",
65 |     "vitest-browser-vue": "^0.2.0",
66 |     "vue": "3.5.25"
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/example/example.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body {
  3 |   margin: 0;
  4 |   padding: 0;
  5 | }
  6 | 
  7 | html {
  8 |   font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
  9 |     Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
 10 |     Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 11 |   font-weight: 400;
 12 | }
 13 | 
 14 | a {
 15 |   cursor: pointer;
 16 |   color: inherit;
 17 | }
 18 | 
 19 | h1,
 20 | h2,
 21 | h3,
 22 | h4,
 23 | h5,
 24 | h6 {
 25 |   font-weight: 400;
 26 |   line-height: 1.5;
 27 | }
 28 | 
 29 | h1 {
 30 |   font-size: 1.625rem;
 31 | }
 32 | 
 33 | h2 {
 34 |   font-size: 1.5rem;
 35 | }
 36 | 
 37 | h3 {
 38 |   font-size: 1.375rem;
 39 | }
 40 | 
 41 | h4 {
 42 |   font-size: 1.25rem;
 43 | }
 44 | 
 45 | h5 {
 46 |   font-size: 1.125rem;
 47 | }
 48 | 
 49 | h1 a,
 50 | h2 a,
 51 | h3 a,
 52 | h4 a,
 53 | h5 a,
 54 | h6 a {
 55 |   color: inherit;
 56 |   text-decoration: none;
 57 | }
 58 | 
 59 | h1 a:hover::after,
 60 | h2 a:hover::after,
 61 | h3 a:hover::after,
 62 | h4 a:hover::after,
 63 | h5 a:hover::after,
 64 | h6 a:hover::after {
 65 |   /* if hover, appear a link icon */
 66 |   content: " 🔗";
 67 | }
 68 | 
 69 | .hero {
 70 |   position: relative;
 71 |   padding: 6rem 1rem;
 72 |   background: linear-gradient(150deg, #281483 15%, #8f6ed5 70%, #d782d9 94%);
 73 |   display: flex;
 74 |   flex-flow: column;
 75 |   align-items: center;
 76 |   justify-content: center;
 77 |   color: #fff;
 78 | }
 79 | 
 80 | .hero::after {
 81 |   content: "";
 82 |   display: block;
 83 |   position: absolute;
 84 |   left: 0;
 85 |   right: 0;
 86 |   bottom: 0;
 87 |   height: 60px;
 88 |   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' preserveAspectRatio='none'%3E%3Cpolygon fill='white' points='16 0 16 16 0 16'/%3E%3C/svg%3E");
 89 |   background-repeat: no-repeat;
 90 |   background-size: 100% 100%;
 91 | }
 92 | 
 93 | .hero .github {
 94 |   position: absolute;
 95 |   right: 0;
 96 |   top: 0;
 97 |   padding: 8px;
 98 |   color: #ffffff;
 99 |   text-decoration: none;
100 | }
101 | 
102 | .hero .github svg {
103 |   width: 32px;
104 |   height: 32px;
105 |   fill: currentColor;
106 | }
107 | 
108 | .section {
109 |   padding: 2rem 1rem;
110 | }
111 | 
112 | .container {
113 |   width: 100%;
114 |   margin-left: auto;
115 |   margin-right: auto;
116 | }
117 | 
118 | @media (min-width: 576px) {
119 |   .container {
120 |     max-width: 540px;
121 |   }
122 | }
123 | 
124 | @media (min-width: 768px) {
125 |   .container {
126 |     max-width: 720px;
127 |   }
128 | }
129 | 
130 | @media (min-width: 992px) {
131 |   .container {
132 |     max-width: 960px;
133 |   }
134 | }
135 | 
136 | @media (min-width: 1200px) {
137 |   .container {
138 |     max-width: 1140px;
139 |   }
140 | }
141 | 
142 | .button {
143 |   display: inline-block;
144 |   padding: 0.25rem 0.5rem;
145 |   border: 1px solid #007bff;
146 |   color: #007bff;
147 |   background-color: transparent;
148 |   font-size: 1rem;
149 |   outline: none;
150 |   cursor: pointer;
151 | }
152 | 
153 | .button.active {
154 |   background-color: #007bff;
155 |   color: #fff;
156 | }
157 | 
158 | .button.disabled {
159 |   display: inline-block;
160 |   padding: 0.25rem 0.5rem;
161 |   border: 1px solid #aaaaaa;
162 |   color: #aaaaaa;
163 | }
164 | 
165 | .button.disabled.active {
166 |   background-color: #aaaaaa;
167 |   color: #fff;
168 | }
169 | 
170 | code {
171 |   display: inline-block;
172 |   background-color: #f0f0f0;
173 |   padding: 0.25rem 0.375rem;
174 |   border-radius: 0.25rem;
175 |   font-size: 0.875rem;
176 |   border: 1px solid #e0e0e0;
177 | }
178 | 
179 | .button-group {
180 |   display: flex;
181 |   flex-wrap: wrap;
182 |   gap: 0.5rem;
183 | }
184 | 
185 | .controller {
186 |   display: flex;
187 |   flex-direction: column;
188 |   gap: 0.5rem;
189 |   user-select: none;
190 | }
191 | 


--------------------------------------------------------------------------------
/example/ExampleMultiple.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import {
  3 |   format,
  4 |   setDate,
  5 |   setHours,
  6 |   setMinutes,
  7 |   setMonth,
  8 |   setSeconds,
  9 |   setYear,
 10 | } from 'date-fns'
 11 | import { computed, ref } from 'vue'
 12 | import { VueScrollPicker, VueScrollPickerValue } from 'vue-scroll-picker'
 13 | 
 14 | const currentValue = ref(new Date())
 15 | 
 16 | const currentYear = computed(() => currentValue.value.getFullYear())
 17 | const currentMonth = computed(() => currentValue.value.getMonth() + 1)
 18 | const currentDay = computed(() => currentValue.value.getDate())
 19 | const currentAm = computed(() =>
 20 |   currentValue.value.getHours() < 12 ? 'AM' : 'PM',
 21 | )
 22 | const currentHour = computed(() => currentValue.value.getHours() % 12)
 23 | const currentMinute = computed(() => currentValue.value.getMinutes())
 24 | const currentSecond = computed(() => currentValue.value.getSeconds())
 25 | 
 26 | const years = computed(() => {
 27 |   const currYear = new Date().getFullYear()
 28 |   const lastYear = 1980
 29 |   return Array.from(
 30 |     { length: currYear - lastYear + 1 },
 31 |     (_, index) => lastYear + index,
 32 |   ).reverse()
 33 | })
 34 | const months = Array.from({ length: 12 }, (_, index) => index + 1)
 35 | const days = computed(() => {
 36 |   const lastDay = new Date(currentYear.value, currentMonth.value, 0).getDate()
 37 |   return Array.from({ length: lastDay }, (_, index) => index + 1)
 38 | })
 39 | 
 40 | const amPm = ['AM', 'PM']
 41 | const hours = Array.from({ length: 12 }, (_, index) => index)
 42 | const minutes = Array.from({ length: 60 }, (_, index) => index)
 43 | const seconds = Array.from({ length: 60 }, (_, index) => index)
 44 | 
 45 | function handleUpdateYear(value: VueScrollPickerValue | undefined) {
 46 |   currentValue.value = setYear(currentValue.value, value as number)
 47 | }
 48 | 
 49 | function handleUpdateMonth(value: VueScrollPickerValue | undefined) {
 50 |   currentValue.value = setMonth(currentValue.value, (value as number) - 1)
 51 | }
 52 | 
 53 | function handleUpdateDay(value: VueScrollPickerValue | undefined) {
 54 |   currentValue.value = setDate(currentValue.value, value as number)
 55 | }
 56 | 
 57 | function handleUpdateAm(value: VueScrollPickerValue | undefined) {
 58 |   currentValue.value = setHours(currentValue.value, value === 'AM' ? 0 : 12)
 59 | }
 60 | 
 61 | function handleUpdateHour(value: VueScrollPickerValue | undefined) {
 62 |   currentValue.value = setHours(
 63 |     currentValue.value,
 64 |     (value as number) + (currentAm.value === 'AM' ? 0 : 12),
 65 |   )
 66 | }
 67 | 
 68 | function handleUpdateMinute(value: VueScrollPickerValue | undefined) {
 69 |   currentValue.value = setMinutes(currentValue.value, value as number)
 70 | }
 71 | 
 72 | function handleUpdateSecond(value: VueScrollPickerValue | undefined) {
 73 |   currentValue.value = setSeconds(currentValue.value, value as number)
 74 | }
 75 | </script>
 76 | <template>
 77 |   <div>
 78 |     <div>
 79 |       Date =
 80 |       <code>{{ format(currentValue, 'yyyy-MM-dd HH:mm:ss') }}</code>
 81 |     </div>
 82 |     <div class="picker-group">
 83 |       <VueScrollPicker
 84 |         :options="years"
 85 |         :model-value="currentYear"
 86 |         @update:model-value="handleUpdateYear"
 87 |       />
 88 |       <VueScrollPicker
 89 |         :options="months"
 90 |         :model-value="currentMonth"
 91 |         @update:model-value="handleUpdateMonth"
 92 |       />
 93 |       <VueScrollPicker
 94 |         :options="days"
 95 |         :model-value="currentDay"
 96 |         @update:model-value="handleUpdateDay"
 97 |       />
 98 |       <VueScrollPicker
 99 |         :options="amPm"
100 |         :model-value="currentAm"
101 |         @update:model-value="handleUpdateAm"
102 |       />
103 |       <VueScrollPicker
104 |         :options="hours"
105 |         :model-value="currentHour"
106 |         @update:model-value="handleUpdateHour"
107 |       />
108 |       <VueScrollPicker
109 |         :options="minutes"
110 |         :model-value="currentMinute"
111 |         @update:model-value="handleUpdateMinute"
112 |       />
113 |       <VueScrollPicker
114 |         :options="seconds"
115 |         :model-value="currentSecond"
116 |         @update:model-value="handleUpdateSecond"
117 |       />
118 |     </div>
119 |   </div>
120 | </template>
121 | <style scoped>
122 | .picker-group {
123 |   display: flex;
124 | }
125 | </style>
126 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Scroll Picker
  2 | 
  3 | <p>
  4 |   <a href="https://github.com/wan2land/vue-scroll-picker/actions/workflows/ci.yml"><img alt="Build" src="https://img.shields.io/github/actions/workflow/status/wan2land/vue-scroll-picker/ci.yml?branch=main&logo=github&style=flat-square" /></a>
  5 |   <a href="https://npmcharts.com/compare/vue-scroll-picker?minimal=true"><img alt="Downloads" src="https://img.shields.io/npm/dm/vue-scroll-picker.svg?style=flat-square" /></a>
  6 |   <a href="https://www.npmjs.com/package/vue-scroll-picker"><img alt="Version" src="https://img.shields.io/npm/v/vue-scroll-picker.svg?style=flat-square" /></a>
  7 |   <a href="https://www.npmjs.com/package/vue-scroll-picker"><img alt="License" src="https://img.shields.io/npm/l/vue-scroll-picker.svg?style=flat-square" /></a>
  8 |   <img alt="VueJS 3.x" src="https://img.shields.io/badge/vue.js-3.x-brightgreen.svg?style=flat-square" />
  9 |   <img alt="Language Typescript" src="https://img.shields.io/badge/language-Typescript-007acc.svg?style=flat-square" />
 10 | </p>
 11 | 
 12 | Vue Scroll Picker is an iOS-style scroll picker component for Vue 3. It supports all gestures, including mouse and touch interactions, ensuring a smooth and intuitive user experience.
 13 | 
 14 | If you are using Vue 2, please refer to the [v0.x branch](https://github.com/wan2land/vue-scroll-picker/tree/0.x-vue2).
 15 | 
 16 | [Live Demo](http://vue-scroll-picker.dist.be) ([source](./example))
 17 | 
 18 | ## Features
 19 | 
 20 | - **TypeScript Support**: Uses generics for strict type checking and improved developer experience.
 21 | - **Native-like Behavior**: Mimics `<select>` element behavior for consistency.
 22 | - **Lightweight & Performant**: Minimal dependencies with optimized rendering.
 23 | 
 24 | ## Installation
 25 | 
 26 | ```bash
 27 | npm install vue-scroll-picker
 28 | ```
 29 | 
 30 | ## Usage
 31 | 
 32 | Vue Scroll Picker can be used both globally and locally in your Vue application. Below are examples of how to set it up.
 33 | 
 34 | ### Global Registration
 35 | 
 36 | To register Vue Scroll Picker globally in your Vue application, import it in your main file and apply it as a plugin:
 37 | 
 38 | [Vue3 Global Registration Guide](https://v3.vuejs.org/guide/component-registration.html#global-registration)
 39 | 
 40 | ```js
 41 | import { createApp } from "vue";
 42 | 
 43 | import VueScrollPicker from "vue-scroll-picker";
 44 | import "vue-scroll-picker/style.css";
 45 | 
 46 | const app = createApp(); /* */
 47 | 
 48 | app.use(VueScrollPicker); // export default is plugin
 49 | ```
 50 | 
 51 | ### Local Registration
 52 | 
 53 | To use Vue Scroll Picker in a specific component, import it and register it locally:
 54 | 
 55 | [Vue3 Local Registration Guide](https://v3.vuejs.org/guide/component-registration.html#local-registration)
 56 | 
 57 | ```vue
 58 | <script setup>
 59 | import { VueScrollPicker } from 'vue-scroll-picker'
 60 | import "vue-scroll-picker/style.css";
 61 | 
 62 | const options = [
 63 |   { name: 'Option 1', value: 1 },
 64 |   { name: 'Option 2', value: 2 },
 65 |   { name: 'Option 3', value: 3 },
 66 | ]
 67 | const modelValue = ref(1)
 68 | </script>
 69 | <template>
 70 |   <VueScrollPicker :options="options" v-model="modelValue" />
 71 | </template>
 72 | ```
 73 | 
 74 | ### Nuxt
 75 | 
 76 | ```ts
 77 | import VueScrollPicker from "vue-scroll-picker" // export default is plugin
 78 | import 'vue-scroll-picker/style.css'
 79 | 
 80 | export default defineNuxtPlugin({
 81 |   async setup({ vueApp }) {
 82 |     vueApp.use(VueScrollPicker)
 83 |   }
 84 | })
 85 | ```
 86 | 
 87 | ## Options
 88 | 
 89 | ### Props
 90 | 
 91 | Vue Scroll Picker accepts several props to customize its behavior:
 92 | 
 93 | | Prop | Type | Default | Description |
 94 | |------|------|---------|-------------|
 95 | | `modelValue` | `string \| number \| boolean \| null` | `undefined` | The selected value of the picker. |
 96 | | `options` | `Array<{ name: string; value: any; disabled?: boolean }>` | `[]` | The list of options displayed in the picker. |
 97 | | `emptyText` | `string` | `'No options available'` | Text displayed when there are no options available. |
 98 | | `dragSensitivity` | `number` | `1.7` | Sensitivity of dragging interaction. |
 99 | | `touchSensitivity` | `number` | `1.7` | Sensitivity of touch interaction. |
100 | | `wheelSensitivity` | `number` | `1` | Sensitivity of mouse wheel scrolling. |
101 | 
102 | ### Events
103 | 
104 | Vue Scroll Picker emits several events to notify changes:
105 | 
106 | | Event | Payload | Description |
107 | |-------|---------|-------------|
108 | | `update:modelValue` | `string \| number \| boolean \| null` | Fired when the selected value changes. |
109 | | `start` | `void` | Fired when interaction starts. |
110 | | `move` | `string \| number \| boolean \| null` | Fired when the selection moves. |
111 | | `end` | `string \| number \| boolean \| null` | Fired when interaction ends. |
112 | | `cancel` | `void` | Fired when interaction is canceled. |
113 | | `wheel` | `string \| number \| boolean \| null` | Fired when using the mouse wheel. |
114 | | `click` | `string \| number \| boolean \| null` | Fired when the picker is clicked. |
115 | 
116 | ### Slots
117 | 
118 | Vue Scroll Picker provides slots for custom rendering:
119 | 
120 | | Slot | Props | Description |
121 | |------|-------|-------------|
122 | | `default` | `{ option: { name: string; value: any; disabled?: boolean } }` | Custom rendering for each option. |
123 | | `empty` | `{ text: string }` | Custom rendering when no options are available. |
124 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { siGithub } from 'simple-icons/icons'
  3 | 
  4 | import { VueScrollPickerOption } from 'vue-scroll-picker'
  5 | import ExampleDialog from './ExampleDialog.vue'
  6 | import ExampleDisabledItems from './ExampleDisabledItems.vue'
  7 | import ExampleDynamicOptions from './ExampleDynamicOptions.vue'
  8 | import ExampleEvent from './ExampleEvent.vue'
  9 | import ExampleFullBinding from './ExampleFullBinding.vue'
 10 | import ExampleMultiple from './ExampleMultiple.vue'
 11 | import ExampleReactiveStyle from './ExampleReactiveStyle.vue'
 12 | import ExampleSensitivity from './ExampleSensitivity.vue'
 13 | import ExampleSlot from './ExampleSlot.vue'
 14 | import ExampleTransition from './ExampleTransition.vue'
 15 | 
 16 | const defaultOptions: VueScrollPickerOption[] = [
 17 |   { value: null, name: 'Select an option' },
 18 |   { value: 0, name: '0KG' },
 19 |   { value: 10, name: '10KG' },
 20 |   { value: 20, name: '20KG' },
 21 |   { value: 30, name: '30KG' },
 22 |   { value: 40, name: '40KG' },
 23 |   { value: 50, name: '50KG' },
 24 |   { value: 60, name: '60KG' },
 25 |   { value: 70, name: '70KG' },
 26 |   { value: 80, name: '80KG' },
 27 |   { value: 90, name: '90KG' },
 28 |   { value: 100, name: '100KG' },
 29 | ]
 30 | </script>
 31 | <template>
 32 |   <div>
 33 |     <div class="hero">
 34 |       <h2>Vue Scroll Picker</h2>
 35 |       <p>
 36 |         iOS Style Scroll Picker Component for Vue 3. Support All Gestures of
 37 |         Mouse(also MouseWheel) and Touch.
 38 |       </p>
 39 |       <a
 40 |         class="github"
 41 |         href="https://github.com/wan2land/vue-scroll-picker"
 42 |         target="_blank"
 43 |         v-html="siGithub.svg"
 44 |       />
 45 |     </div>
 46 |     <div class="section">
 47 |       <div class="container">
 48 |         <h2 id="full_binding"><a href="#full_binding">Full Binding</a></h2>
 49 |         <p>
 50 |           Vue Scroll Picker provides full data binding.
 51 |           <a
 52 |             href="https://github.com/wan2land/vue-scroll-picker/blob/main/example/ExampleDynamicOptions.vue"
 53 |             >[Source]</a
 54 |           >
 55 |         </p>
 56 |         <ExampleFullBinding :options="defaultOptions" />
 57 | 
 58 |         <h2 id="disabled_items">
 59 |           <a href="#disabled_items">Disabled Items</a>
 60 |         </h2>
 61 |         <p>
 62 |           You can add a disabled property to the select options. A disabled
 63 |           value cannot be selected.
 64 |           <a
 65 |             href="https://github.com/wan2land/vue-scroll-picker/blob/main/example/ExampleDisabledItems.vue"
 66 |             >[Source]</a
 67 |           >
 68 |         </p>
 69 |         <ExampleDisabledItems />
 70 | 
 71 |         <h2 id="slot_support"><a href="#slot_support">Slot Support</a></h2>
 72 |         <p>
 73 |           <a
 74 |             href="https://github.com/wan2land/vue-scroll-picker/blob/main/example/ExampleSlot.vue"
 75 |             >[Source]</a
 76 |           >
 77 |         </p>
 78 |         <ExampleSlot />
 79 | 
 80 |         <h2 id="event"><a href="#event">Event</a></h2>
 81 |         <p>
 82 |           <a
 83 |             href="https://github.com/wan2land/vue-scroll-picker/blob/main/example/ExampleEvent.vue"
 84 |             >[Source]</a
 85 |           >
 86 |         </p>
 87 |         <ExampleEvent :options="defaultOptions" />
 88 | 
 89 |         <h2 id="sensitivity"><a href="#sensitivity">Sensitivity</a></h2>
 90 |         <p>
 91 |           <a
 92 |             href="https://github.com/wan2land/vue-scroll-picker/blob/main/example/ExampleSensitivity.vue"
 93 |             >[Source]</a
 94 |           >
 95 |         </p>
 96 |         <ExampleSensitivity :options="defaultOptions" />
 97 | 
 98 |         <h2 id="transition"><a href="#transition">Transition</a></h2>
 99 |         <p>
100 |           <a
101 |             href="https://github.com/wan2land/vue-scroll-picker/blob/main/example/ExampleTransition.vue"
102 |             >[Source]</a
103 |           >
104 |         </p>
105 |         <ExampleTransition :options="defaultOptions" />
106 | 
107 |         <h2 id="dynamic_options">
108 |           <a href="#dynamic_options">Dynamic Options</a>
109 |         </h2>
110 |         <p>
111 |           <a
112 |             href="https://github.com/wan2land/vue-scroll-picker/blob/main/example/ExampleDynamicOptions.vue"
113 |             >[Source]</a
114 |           >
115 |         </p>
116 |         <ExampleDynamicOptions />
117 | 
118 |         <h2 id="reactive_style">
119 |           <a href="#reactive_style">Reactive Style</a>
120 |         </h2>
121 |         <p>
122 |           <a
123 |             href="https://github.com/wan2land/vue-scroll-picker/blob/main/example/ExampleReactiveStyle.vue"
124 |             >[Source]</a
125 |           >
126 |         </p>
127 |         <ExampleReactiveStyle :options="defaultOptions" />
128 | 
129 |         <h2 id="dialog"><a href="#dialog">Dialog</a></h2>
130 |         <p>
131 |           <a
132 |             href="https://github.com/wan2land/vue-scroll-picker/blob/main/example/ExampleDialog.vue"
133 |             >[Source]</a
134 |           >
135 |         </p>
136 |         <ExampleDialog :options="defaultOptions" />
137 | 
138 |         <h2 id="multiple"><a href="#multiple">Multiple</a></h2>
139 |         <p>
140 |           <a
141 |             href="https://github.com/wan2land/vue-scroll-picker/blob/main/example/ExampleMultiple.vue"
142 |             >[Source]</a
143 |           >
144 |         </p>
145 |         <ExampleMultiple />
146 |       </div>
147 |     </div>
148 |   </div>
149 | </template>
150 | 


--------------------------------------------------------------------------------
/src/components/VueScrollPicker.vue:
--------------------------------------------------------------------------------
  1 | <script
  2 |   setup
  3 |   lang="ts"
  4 |   generic="T extends ScrollPickerOption = ScrollPickerOption"
  5 | >
  6 | import {
  7 |   computed,
  8 |   nextTick,
  9 |   onBeforeUnmount,
 10 |   onMounted,
 11 |   ref,
 12 |   shallowRef,
 13 |   VNode,
 14 |   watch,
 15 | } from 'vue'
 16 | 
 17 | export type ScrollPickerValue = string | number | boolean | null
 18 | export interface ScrollPickerOption {
 19 |   name: string
 20 |   value: ScrollPickerValue
 21 |   disabled?: boolean
 22 | }
 23 | 
 24 | export type ScrollPickerOptionable<T> = ScrollPickerValue | T
 25 | 
 26 | type GestureState = [scrollY: number, clientY: number, isDragging: boolean]
 27 | 
 28 | const EVENT_OPTIONS: AddEventListenerOptions = { passive: false }
 29 | 
 30 | const emit = defineEmits<{
 31 |   (event: 'update:modelValue', value: ScrollPickerValue | undefined): void
 32 |   (event: 'start'): void
 33 |   (event: 'move', value: ScrollPickerValue | undefined): void
 34 |   (event: 'end', value: ScrollPickerValue | undefined): void
 35 |   (event: 'cancel'): void
 36 |   (event: 'wheel', value: ScrollPickerValue | undefined): void
 37 |   (event: 'click', value: ScrollPickerValue | undefined): void
 38 | }>()
 39 | 
 40 | const props = withDefaults(
 41 |   defineProps<{
 42 |     modelValue: ScrollPickerValue | undefined
 43 |     options?: ScrollPickerOptionable<T>[]
 44 |     dragSensitivity?: number
 45 |     touchSensitivity?: number
 46 |     wheelSensitivity?: number
 47 |     emptyText?: string
 48 |   }>(),
 49 |   {
 50 |     options: () => [],
 51 |     dragSensitivity: 1.7,
 52 |     touchSensitivity: 1.7,
 53 |     wheelSensitivity: 1,
 54 |     emptyText: 'No Options Available',
 55 |   },
 56 | )
 57 | 
 58 | defineSlots<{
 59 |   default: (props: { option: T }) => VNode
 60 |   empty: (props: { text: string }) => VNode
 61 | }>()
 62 | 
 63 | const internalOptions = computed<T[]>(() => {
 64 |   return props.options.map((option) => {
 65 |     if (option === null) {
 66 |       return { value: null, name: '' } as T
 67 |     }
 68 |     switch (typeof option) {
 69 |       case 'string': {
 70 |         return { value: option, name: option } as T
 71 |       }
 72 |       case 'number':
 73 |       case 'boolean': {
 74 |         return { value: option, name: `${option}` } as T
 75 |       }
 76 |     }
 77 |     return option
 78 |   })
 79 | })
 80 | 
 81 | const transitionTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 82 | 
 83 | const internalIndex = ref(
 84 |   Math.max(
 85 |     internalOptions.value.findIndex(
 86 |       (option) => option.value == props.modelValue,
 87 |     ),
 88 |     0,
 89 |   ),
 90 | )
 91 | 
 92 | let itemOffsets: number[] = []
 93 | 
 94 | let scrollOffset = 0
 95 | let scrollY = 0
 96 | let scrollYMax = 0
 97 | 
 98 | let gestureState: GestureState | null = null
 99 | 
100 | const el = shallowRef<HTMLDivElement>()
101 | 
102 | const rotatorRef = shallowRef<HTMLDivElement>()
103 | const layerTopRef = shallowRef<HTMLDivElement>()
104 | const layerSelectionRef = shallowRef<HTMLDivElement>()
105 | const layerBottomRef = shallowRef<HTMLDivElement>()
106 | 
107 | let resizeObserver: globalThis.ResizeObserver | null = null
108 | 
109 | watch(
110 |   () => props.modelValue,
111 |   (value) => {
112 |     const nextIndex = internalOptions.value.findIndex(
113 |       (option) => option.value == value,
114 |     )
115 |     if (internalIndex.value !== nextIndex) {
116 |       internalIndex.value = Math.max(nextIndex, 0)
117 |       scrollTo(findScrollByIndex(nextIndex))
118 |     }
119 |   },
120 | )
121 | 
122 | watch(internalOptions, (options) => {
123 |   internalIndex.value = Math.max(
124 |     options.findIndex((option) => option.value == props.modelValue),
125 |     0,
126 |   )
127 |   nextTick(() => {
128 |     updateItemOffsets()
129 |     setScroll(findScrollByIndex(internalIndex.value))
130 |   })
131 | })
132 | 
133 | onMounted(() => {
134 |   if (!el.value) {
135 |     return
136 |   }
137 | 
138 |   el.value.addEventListener('wheel', handleWheel, EVENT_OPTIONS)
139 |   el.value.addEventListener('touchstart', handleTouchStart, EVENT_OPTIONS)
140 |   el.value.addEventListener('mousedown', handleMouseDown, EVENT_OPTIONS)
141 | 
142 |   if (typeof window.ResizeObserver !== 'undefined') {
143 |     let raf = null as ReturnType<typeof requestAnimationFrame> | null
144 |     resizeObserver = new window.ResizeObserver(() => {
145 |       if (raf) {
146 |         cancelAnimationFrame(raf)
147 |       }
148 |       raf = requestAnimationFrame(() => {
149 |         updateItemOffsets()
150 |         raf = null
151 |       })
152 |     })
153 |     resizeObserver.observe(el.value)
154 |   } else {
155 |     updateItemOffsets()
156 |   }
157 | })
158 | 
159 | onBeforeUnmount(() => {
160 |   el.value?.removeEventListener('wheel', handleWheel)
161 |   el.value?.removeEventListener('touchstart', handleTouchStart)
162 |   el.value?.removeEventListener('mousedown', handleMouseDown)
163 | 
164 |   resizeObserver?.disconnect()
165 | })
166 | 
167 | function updateItemOffsets() {
168 |   const rotatorEl = rotatorRef.value
169 |   const layerSelectionEl = layerSelectionRef.value
170 |   if (!rotatorEl || !layerSelectionEl) {
171 |     return
172 |   }
173 | 
174 |   // set scrollOffset
175 |   {
176 |     const { top, bottom } = layerSelectionEl.getBoundingClientRect()
177 |     const elTop = el.value?.getBoundingClientRect().top ?? 0
178 |     scrollOffset = (top + bottom) / 2 - elTop
179 |   }
180 | 
181 |   // set itemOffsets
182 |   let firstItemOffset = 0
183 |   itemOffsets = Array.from(rotatorEl.children).map((itemRef, index) => {
184 |     const { top, bottom } = itemRef.getBoundingClientRect()
185 |     const itemOffset = (top + bottom) / 2
186 |     if (index === 0) {
187 |       scrollOffset -= itemOffset - top
188 |       firstItemOffset = itemOffset
189 |     }
190 |     return itemOffset - firstItemOffset
191 |   })
192 | 
193 |   scrollYMax = Math.max(...itemOffsets)
194 |   setScroll(findScrollByIndex(internalIndex.value))
195 | }
196 | 
197 | function findIndexFromScroll(scroll: number, ignoreDisabled: boolean): number {
198 |   let minDiff = Infinity
199 |   let foundBoundIndex = 0
200 |   for (const [boundIndex, bound] of itemOffsets.entries()) {
201 |     if (!ignoreDisabled && internalOptions.value[boundIndex]?.disabled) {
202 |       continue
203 |     }
204 |     if (Math.abs(bound - scroll) < minDiff) {
205 |       minDiff = Math.abs(bound - scroll)
206 |       foundBoundIndex = boundIndex
207 |     }
208 |   }
209 |   return foundBoundIndex
210 | }
211 | 
212 | function findScrollByIndex(index: number): number {
213 |   return itemOffsets[Math.min(Math.max(index, 0), itemOffsets.length - 1)]
214 | }
215 | 
216 | function scrollTo(scroll: number) {
217 |   setScroll(scroll)
218 |   if (transitionTimeout.value) {
219 |     clearTimeout(transitionTimeout.value)
220 |   }
221 |   transitionTimeout.value = setTimeout(() => {
222 |     transitionTimeout.value = null
223 |   }, 150)
224 | }
225 | 
226 | let scrollRaf = null as ReturnType<typeof requestAnimationFrame> | null
227 | function setScroll(scroll: number) {
228 |   scrollY = scroll
229 |   if (scrollRaf) {
230 |     cancelAnimationFrame(scrollRaf)
231 |   }
232 |   scrollRaf = requestAnimationFrame(() => {
233 |     if (rotatorRef.value) {
234 |       rotatorRef.value.style.top = `${scrollOffset - scroll}px`
235 |     }
236 |     scrollRaf = null
237 |   })
238 |   return scroll
239 | }
240 | 
241 | function bounceEffect(value: number, min: number, max: number, tension = 0.2) {
242 |   if (value < min) {
243 |     return min + (value - min) * tension
244 |   }
245 |   if (value > max) {
246 |     return max + (value - max) * tension
247 |   }
248 |   return value
249 | }
250 | 
251 | let wheelTimeout: ReturnType<typeof setTimeout> | null = null
252 | function handleWheel(e: WheelEvent) {
253 |   if (!wheelTimeout && scrollY <= 0 && e.deltaY < 0) {
254 |     return
255 |   }
256 |   if (!wheelTimeout && scrollY >= scrollYMax && e.deltaY > 0) {
257 |     return
258 |   }
259 | 
260 |   if (itemOffsets.length === 1) {
261 |     return
262 |   }
263 |   e.preventDefault()
264 |   const scrollYValue = setScroll(
265 |     bounceEffect(scrollY + e.deltaY * props.wheelSensitivity, 0, scrollYMax),
266 |   )
267 | 
268 |   const nextIndex = findIndexFromScroll(scrollYValue, true)
269 |   const nextOption: ScrollPickerOption | undefined =
270 |     internalOptions.value[nextIndex]
271 |   const nextValue = nextOption?.value
272 |   emit('wheel', nextValue)
273 |   if (nextOption && !nextOption.disabled) {
274 |     internalIndex.value = nextIndex
275 |     emitUpdateModelValue(nextValue)
276 |   }
277 | 
278 |   if (wheelTimeout) {
279 |     clearTimeout(wheelTimeout)
280 |   }
281 |   wheelTimeout = setTimeout(() => {
282 |     scrollTo(findScrollByIndex(findIndexFromScroll(scrollYValue, false)))
283 |     wheelTimeout = null
284 |   }, 100)
285 | }
286 | 
287 | function handleTouchStart(e: TouchEvent) {
288 |   if (gestureState) {
289 |     return
290 |   }
291 |   if (e.cancelable) {
292 |     e.preventDefault()
293 |   }
294 | 
295 |   // TODO multitouch
296 |   gestureState = [scrollY, e.touches[0].clientY, false]
297 |   emit('start')
298 | 
299 |   document.addEventListener('touchmove', handleTouchMove, EVENT_OPTIONS)
300 |   document.addEventListener('touchend', handleTouchEnd, EVENT_OPTIONS)
301 |   document.addEventListener('touchcancel', handleTouchCancel)
302 | }
303 | 
304 | function handleMouseDown(e: MouseEvent) {
305 |   if (gestureState) {
306 |     return
307 |   }
308 |   if (e.cancelable) {
309 |     e.preventDefault()
310 |   }
311 | 
312 |   gestureState = [scrollY, e.clientY, false]
313 |   emit('start')
314 | 
315 |   document.addEventListener('mousemove', handleMouseMove, EVENT_OPTIONS)
316 |   document.addEventListener('mouseup', handleMouseUp, EVENT_OPTIONS)
317 |   document.addEventListener('mouseout', handleMouseOut)
318 | }
319 | 
320 | function handleTouchMove(e: TouchEvent) {
321 |   if (!gestureState) {
322 |     return
323 |   }
324 |   if (e.cancelable) {
325 |     e.preventDefault()
326 |   }
327 |   const diff = gestureState[1] - e.touches[0].clientY // TODO multitouch
328 |   if (Math.abs(diff) > 1.5) {
329 |     const nextGestureState = gestureState.slice() as GestureState
330 |     nextGestureState[2] = true
331 |     gestureState = nextGestureState
332 |   }
333 |   emitMove(
334 |     setScroll(
335 |       bounceEffect(
336 |         gestureState[0] + diff * props.touchSensitivity,
337 |         0,
338 |         scrollYMax,
339 |       ),
340 |     ),
341 |   )
342 | }
343 | 
344 | function handleMouseMove(e: MouseEvent) {
345 |   if (!gestureState) {
346 |     return
347 |   }
348 |   if (e.cancelable) {
349 |     e.preventDefault()
350 |   }
351 |   const diff = gestureState[1] - e.clientY
352 |   if (Math.abs(diff) > 1.5) {
353 |     const nextGestureState = gestureState.slice() as GestureState
354 |     nextGestureState[2] = true
355 |     gestureState = nextGestureState
356 |   }
357 |   emitMove(
358 |     setScroll(
359 |       bounceEffect(
360 |         gestureState[0] + diff * props.dragSensitivity,
361 |         0,
362 |         scrollYMax,
363 |       ),
364 |     ),
365 |   )
366 | }
367 | 
368 | function emitMove(scrollY: number) {
369 |   emit(
370 |     'move',
371 |     internalOptions.value[findIndexFromScroll(scrollY, true)]?.value ??
372 |       undefined,
373 |   )
374 | }
375 | 
376 | function handleMouseUp(e: MouseEvent) {
377 |   if (!gestureState) {
378 |     return
379 |   }
380 |   if (e.cancelable) {
381 |     e.preventDefault()
382 |   }
383 | 
384 |   endGesture(gestureState[2], e.clientX, e.clientY)
385 |   gestureState = null
386 | 
387 |   document.removeEventListener('mousemove', handleMouseMove)
388 |   document.removeEventListener('mouseup', handleMouseUp)
389 |   document.removeEventListener('mouseout', handleMouseOut)
390 | }
391 | 
392 | function handleTouchEnd(e: TouchEvent) {
393 |   if (!gestureState) {
394 |     return
395 |   }
396 |   if (e.cancelable) {
397 |     e.preventDefault()
398 |   }
399 |   endGesture(
400 |     gestureState[2],
401 |     e.changedTouches[0].clientX,
402 |     e.changedTouches[0].clientY,
403 |   )
404 |   gestureState = null
405 | 
406 |   document.removeEventListener('touchmove', handleTouchMove)
407 |   document.removeEventListener('touchend', handleTouchEnd)
408 |   document.removeEventListener('touchcancel', handleTouchCancel)
409 | }
410 | 
411 | function endGesture(isDragging: boolean, x: number, y: number) {
412 |   if (isDragging) {
413 |     const nextIndex = findIndexFromScroll(scrollY, false)
414 |     const nextValue = internalOptions.value[nextIndex]?.value ?? null
415 |     scrollTo(findScrollByIndex(nextIndex))
416 |     internalIndex.value = nextIndex
417 |     emit('end', nextValue)
418 |     emitUpdateModelValue(nextValue)
419 |   } else {
420 |     triggerClick(x, y)
421 |   }
422 | }
423 | 
424 | function triggerClick(x: number, y: number) {
425 |   if (!layerTopRef.value || !layerBottomRef.value) {
426 |     return
427 |   }
428 |   const topRect = layerTopRef.value.getBoundingClientRect()
429 |   const bottomRect = layerBottomRef.value.getBoundingClientRect()
430 |   let nextIndex = internalIndex.value
431 |   if (
432 |     topRect.left <= x &&
433 |     x <= topRect.right &&
434 |     topRect.top <= y &&
435 |     y <= topRect.bottom
436 |   ) {
437 |     if (internalIndex.value === 0) {
438 |       return // top
439 |     }
440 |     nextIndex--
441 |     while (
442 |       internalOptions.value[nextIndex] &&
443 |       internalOptions.value[nextIndex].disabled
444 |     ) {
445 |       nextIndex--
446 |     }
447 |   } else if (
448 |     bottomRect.left <= x &&
449 |     x <= bottomRect.right &&
450 |     bottomRect.top <= y &&
451 |     y <= bottomRect.bottom
452 |   ) {
453 |     if (internalIndex.value === internalOptions.value.length - 1) {
454 |       return // bottom
455 |     }
456 |     nextIndex++
457 |     while (
458 |       internalOptions.value[nextIndex] &&
459 |       internalOptions.value[nextIndex].disabled
460 |     ) {
461 |       nextIndex++
462 |     }
463 |   }
464 |   if (internalIndex.value !== nextIndex && internalOptions.value[nextIndex]) {
465 |     internalIndex.value = nextIndex
466 |     const nextValue = internalOptions.value[nextIndex].value
467 |     emit('end', nextValue)
468 |     emit('click', nextValue)
469 |     emitUpdateModelValue(nextValue)
470 |     scrollTo(findScrollByIndex(nextIndex))
471 |   }
472 | }
473 | 
474 | function emitUpdateModelValue(value: ScrollPickerValue) {
475 |   if (props.modelValue !== value) {
476 |     emit('update:modelValue', value)
477 |   }
478 | }
479 | 
480 | // <Cancel>
481 | function handleMouseOut(e: MouseEvent) {
482 |   if (e.relatedTarget === null) {
483 |     cancelGesture()
484 |   }
485 | }
486 | 
487 | function handleTouchCancel() {
488 |   cancelGesture()
489 | }
490 | 
491 | function cancelGesture() {
492 |   scrollTo(findScrollByIndex(internalIndex.value))
493 |   gestureState = null
494 |   emit('cancel')
495 | }
496 | // </Cancel>
497 | </script>
498 | <template>
499 |   <div ref="el" class="vue-scroll-picker">
500 |     <div
501 |       ref="rotatorRef"
502 |       role="listbox"
503 |       :class="[
504 |         'vue-scroll-picker-rotator',
505 |         {
506 |           'vue-scroll-picker-rotator-transition': transitionTimeout,
507 |         },
508 |       ]"
509 |     >
510 |       <template v-if="internalOptions.length === 0">
511 |         <div
512 |           key="empty"
513 |           role="option"
514 |           class="vue-scroll-picker-item"
515 |           aria-disabled="true"
516 |           aria-selected="false"
517 |         >
518 |           <slot name="empty" :text="emptyText">
519 |             {{ emptyText }}
520 |           </slot>
521 |         </div>
522 |       </template>
523 |       <template v-else>
524 |         <template
525 |           v-for="(option, optionIndex) in internalOptions"
526 |           :key="optionIndex"
527 |         >
528 |           <div
529 |             role="option"
530 |             class="vue-scroll-picker-item"
531 |             :aria-disabled="option.disabled"
532 |             :aria-selected="internalIndex === optionIndex"
533 |             :data-value="option.value ?? ''"
534 |           >
535 |             <slot :option="option">{{ option.name }}</slot>
536 |           </div>
537 |         </template>
538 |       </template>
539 |     </div>
540 |     <div class="vue-scroll-picker-layer">
541 |       <div ref="layerTopRef" class="vue-scroll-picker-layer-top"></div>
542 |       <div
543 |         ref="layerSelectionRef"
544 |         class="vue-scroll-picker-layer-selection"
545 |       ></div>
546 |       <div ref="layerBottomRef" class="vue-scroll-picker-layer-bottom"></div>
547 |     </div>
548 |   </div>
549 | </template>
550 | 


--------------------------------------------------------------------------------