From 208b63cda28eba0063669451659d7c6148be014a Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Mon, 30 Sep 2024 15:54:31 +0200 Subject: [PATCH] slider: design --- README.md | 38 +----------- src/App.vue | 39 ++++++++---- src/components/stopSlider.vue | 113 ++++++++++++++++++++++++++++++---- 3 files changed, 130 insertions(+), 60 deletions(-) diff --git a/README.md b/README.md index 5236f22..1775ed9 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,3 @@ # batu-ui -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). - -## Type Support for `.vue` Imports in TS - -TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types. - -## Customize configuration - -See [Vite Configuration Reference](https://vitejs.dev/config/). - -## Project Setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -npm run build -``` - -### Lint with [ESLint](https://eslint.org/) - -```sh -npm run lint -``` +A UI for a random project... \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 1570260..f3e7d3d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,7 @@ \ No newline at end of file + + const setUp = ( stops: number ) => { + maxWidth.value = document.getElementById( 'slider-' + props.id )!.clientWidth; + sliderStops.value = []; + const intervalSize = maxWidth.value / ( stops - 1 ); + for ( let i = 0; i < stops; i ++ ) { + sliderStops.value.push( { + x: intervalSize * i - 10, + index: i, + } ) + } + } + + const props = defineProps( { + 'id': { + default: '1', + required: true, + type: String + } + } ); + + defineExpose( { + setUp + } ); + + setTimeout( () => { + setUp( 5 ); + }, 500 ); + + + + + + + \ No newline at end of file