Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit e294e80

Browse files
richardhulbertrichardhulbert
committedApr 2, 2024·
Range slider added
1 parent 5537630 commit e294e80

12 files changed

+912
-812
lines changed
 

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,14 @@ This is a simple set of Vue 3, Tailwind based components. At the moment these co
1212
* [Dropdown](./src/components/dropdown/README.md)
1313
* [Notication (Toast)](./src/components/notification/README.md)
1414
* [Collapse](./src/components/collapse/README.md)
15+
1516
* Form elements
1617
*
1718
* [Select](./src/components/select/README.md)
1819
*
1920
* [Input](./src/components/input/README.md)
21+
22+
* [Range (slider)](./src/components/range/README.md)
2023
*
2124
* [Textarea](./src/components/textarea/README.md)
2225
*

‎demo/assets/index-0b463c08.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/assets/index-1930b5a9.css

-1
This file was deleted.

‎demo/assets/index-252b3937.js

+798
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/assets/index-f5748bf9.js

-798
This file was deleted.

‎demo/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77

88
<title>Vue 3 Tailwind Components</title>
9-
<script type="module" crossorigin src="assets/index-f5748bf9.js"></script>
10-
<link rel="stylesheet" href="assets/index-1930b5a9.css">
9+
<script type="module" crossorigin src="./assets/index-252b3937.js"></script>
10+
<link rel="stylesheet" href="./assets/index-0b463c08.css">
1111
</head>
1212
<body class="">
1313
<div class="p-4 bg-white dark:bg-gray-800 dark:text-slate-50" id="app"></div>
14-
14+
1515
</body>
1616
</html>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue3-tailwind-components",
3-
"version": "0.2.9",
3+
"version": "0.3.0",
44
"description": "A library of Vue 3 components that use Tailwind",
55
"keywords": [
66
"vue3",

‎src/App.vue

+31-9
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
TwDropdown,
1717
TwNotification,
1818
TwTextarea,
19-
TwCollapse
19+
TwCollapse,
20+
TwRange
2021
} from "./components/";
2122
2223
@@ -44,9 +45,12 @@ let notificationLifetime = ref(6)
4445
let textareaValue = ref('');
4546
let selectedRow = ref(-1)
4647
let fileInfo = ref('')
47-
let rolloutAlignRight=ref(false);
48+
let rolloutAlignRight = ref(false);
4849
const darkTheme = ref(false)
49-
const blurRollout= ref(true)
50+
const blurRollout = ref(true)
51+
const rangeValue = ref(0)
52+
const rangeStep = ref(1)
53+
const rangeShowLabels = ref(true)
5054
5155
let numOfPages = computed(() => {
5256
return Math.ceil(records.value.length / pageSize.value)
@@ -64,17 +68,16 @@ const colors = [
6468
{label: 'Info', value: 'info'}
6569
]
6670
67-
let eg_list = ref([
68-
])
71+
let eg_list = ref([])
6972
70-
setTimeout(()=>{
73+
setTimeout(() => {
7174
eg_list.value = [
72-
{label: 'One', value:1},
75+
{label: 'One', value: 1},
7376
{label: 'Two', value: 2},
7477
{label: 'Three', value: 3},
7578
{label: 'Four', value: 4}
7679
]
77-
},1000)
80+
}, 1000)
7881
7982
const eg_list_selected = ref(2)
8083
@@ -274,7 +277,8 @@ function handleChangeTheme() {
274277
<tw-button outline :color="accentColor" @click="rolloutShow">Show Rollout</tw-button>
275278
<tw-switch size="sm" v-model="blurRollout">Blur Background</tw-switch>
276279
<tw-switch size="sm" v-model="rolloutAlignRight">From right</tw-switch>
277-
<tw-rollout z-index="50" width="w-10/12" :align-right="rolloutAlignRight" :color="accentColor" v-model="showRollout" :blur="blurRollout">
280+
<tw-rollout z-index="50" width="w-10/12" :align-right="rolloutAlignRight" :color="accentColor"
281+
v-model="showRollout" :blur="blurRollout">
278282
<div class="m-8 p-8 ">
279283
<tw-table :hover="hover" :heading-color="accentColor" :stripe-color="accentColor"
280284
:border-color="accentColor"
@@ -378,6 +382,24 @@ function handleChangeTheme() {
378382
<div>
379383
<p>{{ fileInfo }}</p>
380384
</div>
385+
386+
</div>
387+
<h1 class="my-4 text-2xl">Range</h1>
388+
<div class="flex gap-8">
389+
<div class="flex-grow">
390+
<tw-range :color="accentColor" class="w-full" min="-50" max="50" v-model="rangeValue" :step="rangeStep" :show-labels="rangeShowLabels"><span class="text-primary-500 dark:text-white">A range slider</span></tw-range>
391+
</div>
392+
<div>
393+
<tw-input v-model="rangeValue">Range value</tw-input>
394+
</div>
395+
<div>
396+
<tw-input v-model="rangeStep">Step values</tw-input>
397+
</div>
398+
<div>
399+
Show labels
400+
<tw-switch v-model="rangeShowLabels">Labels</tw-switch>
401+
</div>
402+
381403
</div>
382404
</section>
383405
<section class="p-3 ">

‎src/components/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export {default as TwDropdown} from './dropdown/TwDropdown.vue'
1313
export {default as TwNotification} from './notification/TwNotification.vue'
1414
export {default as TwTextarea} from './textarea/TwTextarea.vue'
1515
export {default as TwCollapse} from './collapse/TwCollapse.vue'
16+
export {default as TwRange} from './range/TwRange.vue'
1617

1718

1819

‎src/components/range/README.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Range
2+
3+
This is a specialisation of an input with type= range
4+
5+
```vue
6+
<tw-range :color="accentColor" class="w-full" min="-50" max="50" v-model="rangeValue" :step="rangeStep" :show-labels="rangeShowLabels">
7+
```
8+
9+
## Properties
10+
11+
| Property | Type | Required | default | notes |
12+
|:-----------------|:-------:|:--------:|:-------------:|:-------------------------------------------------------------|
13+
| v-model | * | yes | false | The value of the input |
14+
| max | Number | no | 100 | The max of the range |
15+
| min | Number | no | 0 | The min of the range |
16+
| step | Number | no | 1 | How the slider increments |
17+
| disabled | Boolean | no | false | Disables the switch |
18+
| form-name-and-id | String | no | random string | Sets the id and name of the hidden select (for use in forms) |
19+
| color | String | no | 'primary' | The color scheme to use |
20+
| showLabels | String | no | true | whether a labels are shown |
21+
22+

‎src/components/range/TwRange.vue

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script setup>
2+
import {ref,computed,watch } from 'vue';
3+
const props = defineProps({
4+
modelValue: {},
5+
min:{ default:0},
6+
max:{ default:100},
7+
step:{ default:1},
8+
color:{type:String, default:'primary'},
9+
showLabels:{default:true},
10+
disabled:{default:false},
11+
formNameAndId:{
12+
type:String,
13+
default:(Math.random() + 1).toString(36).substring(5)
14+
}
15+
})
16+
17+
const emit = defineEmits(['update:modelValue'])
18+
19+
20+
const inputVal = ref(props.modelValue)
21+
22+
const barClass = computed(()=>{
23+
return 'accent-'+props.color+'-600 dark:accent-'+props.color+'-400'
24+
})
25+
26+
watch(props.modelValue,(neVal)=>{
27+
inputVal.value=neVal
28+
})
29+
30+
function changedInput(){
31+
emit('update:modelValue', inputVal.value)
32+
}
33+
34+
</script>
35+
36+
<template>
37+
<div class="relative">
38+
<slot></slot>
39+
<input @input="changedInput" class="w-full" :class="barClass " :min="min" :max="max" :step="step" v-model="inputVal" type="range" :disabled="disabled" :id="formNameAndId" :name="formNameAndId"/>
40+
<span v-if="showLabels" class="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6">Min {{ min }}</span>
41+
<span v-if="showLabels" class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6">Max {{max}}</span>
42+
</div>
43+
44+
</template>
45+
46+
<style scoped>
47+
48+
</style>

‎tailwind.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ module.exports = {
1919
pattern: /text-(\w+)-(\d00)/,
2020
variants:['file','dark']
2121
},
22+
{
23+
pattern: /accent-(\w+)-(\d00)/,
24+
variants:['file','dark']
25+
},
2226
{
2327
pattern: /placeholder-(\w+)-(\d00)/,
2428
},

0 commit comments

Comments
 (0)
Please sign in to comment.