moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Moein Moradi
2025-08-04 16:33:07 +03:30
commit f798e8e35c
9595 changed files with 1208683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
resources/js/views/demos/forms/form-elements/slider/DemoSliderAppendAndPrepend.vue Normal file
View File

@@ -0,0 +1,118 @@
<script setup>
const bpm = ref(40)
const min = 40
const max = 218
const isPlaying = ref(false)
const color = computed(() => {
if (bpm.value < 100)
return 'primary'
if (bpm.value < 125)
return 'success'
if (bpm.value < 140)
return 'info'
if (bpm.value < 175)
return 'warning'
return 'error'
})
const animationDuration = computed(() => {
return `${ 60 / bpm.value }s`
})
const decrement = () => {
if (bpm.value > min)
bpm.value -= 1
}
const increment = () => {
if (bpm.value < max)
bpm.value += 1
}
</script>
<template>
<div class="d-flex justify-space-between ma-4">
<div>
<span
class="text-6xl font-weight-light"
v-text="bpm"
/>
<span class="subheading font-weight-light me-1">BPM</span>
<VFadeTransition>
<VAvatar
v-if="isPlaying"
:color="color"
:style="{
animationDuration,
}"
class="mb-1 v-avatar--metronome"
size="12"
/>
</VFadeTransition>
</div>
<div>
<VBtn
:color="color"
icon
elevation="0"
@click="isPlaying = !isPlaying"
>
<VIcon
size="large"
:icon="isPlaying ? 'tabler-pause' : 'tabler-play'"
/>
</VBtn>
</div>
</div>
<VSlider
v-model="bpm"
:color="color"
:step="1"
:min="min"
:max="max"
track-color="secondary"
>
<template #prepend>
<VBtn
size="small"
variant="text"
icon="tabler-minus"
:color="color"
@click="decrement"
/>
</template>
<template #append>
<VBtn
size="small"
variant="text"
icon="tabler-plus"
:color="color"
@click="increment"
/>
</template>
</VSlider>
</template>
<style lang="scss" scoped>
@keyframes metronome-example {
from {
transform: scale(0.5);
}
to {
transform: scale(1);
}
}
.v-avatar--metronome {
animation-direction: alternate;
animation-iteration-count: infinite;
animation-name: metronome-example;
}
</style>

73
resources/js/views/demos/forms/form-elements/slider/DemoSliderAppendTextField.vue Normal file
View File

@@ -0,0 +1,73 @@
<script setup>
const redColorValue = ref(161)
const greenColorValue = ref(105)
const blueColorValue = ref(225)
</script>
<template>
<VResponsive
:style="{ background: `rgb(${redColorValue}, ${greenColorValue}, ${blueColorValue})` }"
height="150px"
/>
<VRow class="mt-5">
<VCol cols="12">
<!-- R -->
<div class="d-flex justify-space-between">
<VSlider
v-model="redColorValue"
:max="255"
:step="1"
prepend-icon="tabler-letter-r"
/>
<VTextField
v-model="redColorValue"
type="number"
placeholder="10"
:max="255"
style="max-inline-size: 5rem;"
/>
</div>
</VCol>
<VCol cols="12">
<!-- G -->
<div class="d-flex justify-space-between">
<VSlider
v-model="greenColorValue"
:max="255"
:step="1"
prepend-icon="tabler-letter-g"
/>
<VTextField
v-model="greenColorValue"
type="number"
placeholder="20"
:max="255"
style="max-inline-size: 5rem;"
/>
</div>
</VCol>
<VCol cols="12">
<!-- B -->
<div class="d-flex justify-space-between">
<VSlider
v-model="blueColorValue"
:max="255"
:step="1"
prepend-icon="tabler-letter-b"
/>
<VTextField
v-model="blueColorValue"
type="number"
placeholder="30"
:max="255"
style="max-inline-size: 5rem;"
/>
</div>
</VCol>
</VRow>
</template>

15
resources/js/views/demos/forms/form-elements/slider/DemoSliderBasic.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
const sliderValue = ref(30)
</script>
<template>
<VRow>
<VCol cols="12">
<VSlider />
</VCol>
<VCol cols="12">
<VSlider v-model="sliderValue" />
</VCol>
</VRow>
</template>

40
resources/js/views/demos/forms/form-elements/slider/DemoSliderColors.vue Normal file
View File

@@ -0,0 +1,40 @@
<script setup>
const sliderColorValue = ref(25)
const sliderTrackColorValue = ref(75)
const sliderThumbColorValue = ref(50)
</script>
<template>
<VRow>
<VCol cols="12">
<div class="text-caption">
color
</div>
<VSlider
v-model="sliderColorValue"
color="error"
/>
</VCol>
<VCol cols="12">
<div class="text-caption">
track-color
</div>
<VSlider
v-model="sliderTrackColorValue"
track-color="error"
/>
</VCol>
<VCol cols="12">
<div class="text-caption">
thumb-color
</div>
<VSlider
v-model="sliderThumbColorValue"
thumb-color="error"
thumb-label="always"
/>
</VCol>
</VRow>
</template>

25
resources/js/views/demos/forms/form-elements/slider/DemoSliderDisabledAndReadonly.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<VRow>
<VCol cols="12">
<div class="text-caption">
Disabled
</div>
<VSlider
disabled
label="Disabled"
:model-value="30"
/>
</VCol>
<VCol cols="12">
<div class="text-caption">
Readonly
</div>
<VSlider
readonly
label="Readonly"
:model-value="30"
/>
</VCol>
</VRow>
</template>

31
resources/js/views/demos/forms/form-elements/slider/DemoSliderIcons.vue Normal file
View File

@@ -0,0 +1,31 @@
<script setup>
const mediaSlider = ref(0)
const alarmSlider = ref(0)
const zoomInOut = ref(10)
</script>
<template>
<VRow>
<VCol cols="12">
<VSlider
v-model="mediaSlider"
prepend-icon="tabler-volume"
/>
</VCol>
<VCol cols="12">
<VSlider
v-model="alarmSlider"
append-icon="tabler-alarm"
/>
</VCol>
<VCol cols="12">
<VSlider
v-model="zoomInOut"
append-icon="tabler-minus"
prepend-icon="tabler-plus"
/>
</VCol>
</VRow>
</template>

23
resources/js/views/demos/forms/form-elements/slider/DemoSliderMinAndMax.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup>
const min = ref(-50)
const max = ref(90)
const slider = ref(40)
</script>
<template>
<div class="d-flex justify-space-between">
<VSlider
v-model="slider"
:max="max"
:min="min"
:step="1"
/>
<AppTextField
v-model="slider"
type="number"
placeholder="10"
style="max-inline-size: 5rem;"
/>
</div>
</template>

9
resources/js/views/demos/forms/form-elements/slider/DemoSliderSize.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<VSlider
:step="10"
show-ticks
:thumb-size="18"
:tick-size="3"
:track-size="2"
/>
</template>

13
resources/js/views/demos/forms/form-elements/slider/DemoSliderStep.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup>
const value = ref(0)
</script>
<template>
<VSlider
v-model="value"
:min="0"
:max="1"
:step="0.2"
thumb-label
/>
</template>

65
resources/js/views/demos/forms/form-elements/slider/DemoSliderThumb.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup>
const satisfactionEmojis = [
'😭',
'😢',
'😔',
'🙁',
'😐',
'🙂',
'😊',
'😁',
'😄',
'😍',
]
const slider = ref(45)
</script>
<template>
<VRow>
<VCol cols="12">
<div class="text-caption">
Show thumb when using slider
</div>
<VSlider
v-model="slider"
thumb-label
/>
</VCol>
<VCol cols="12">
<div class="text-caption">
Always show thumb label
</div>
<VSlider
v-model="slider"
thumb-label="always"
/>
</VCol>
<VCol cols="12">
<div class="text-caption">
Custom thumb size
</div>
<VSlider
v-model="slider"
:thumb-size="30"
thumb-label="always"
/>
</VCol>
<VCol cols="12">
<div class="text-caption">
Custom thumb label
</div>
<VSlider
v-model="slider"
thumb-label="always"
>
<template #thumb-label="{ modelValue }">
{{ satisfactionEmojis[Math.min(Math.floor(modelValue / 10), 9)] }}
</template>
</VSlider>
</VCol>
</VRow>
</template>

63
resources/js/views/demos/forms/form-elements/slider/DemoSliderTicks.vue Normal file
View File

@@ -0,0 +1,63 @@
<script setup>
const value = ref(0)
const fruits = ref(1)
const ticksLabels = {
0: 'Figs',
1: 'Lemon',
2: 'Pear',
3: 'Apple',
}
</script>
<template>
<VRow>
<VCol cols="12">
<div class="text-caption">
Show ticks when using slider
</div>
<VSlider
v-model="value"
:step="10"
show-ticks
/>
</VCol>
<VCol cols="12">
<div class="text-caption">
Always show ticks
</div>
<VSlider
v-model="value"
:step="10"
show-ticks="always"
/>
</VCol>
<VCol cols="12">
<div class="text-caption">
Tick size
</div>
<VSlider
v-model="value"
:step="10"
show-ticks="always"
tick-size="4"
/>
</VCol>
<VCol cols="12">
<div class="text-caption">
Tick labels
</div>
<VSlider
v-model="fruits"
:ticks="ticksLabels"
:max="3"
step="1"
show-ticks="always"
tick-size="4"
/>
</VCol>
</VRow>
</template>

15
resources/js/views/demos/forms/form-elements/slider/DemoSliderValidation.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
const value = ref(30)
const rules = [v => v <= 40 || 'Only 40 in stock']
</script>
<template>
<VSlider
v-model="value"
:error="value > 40"
:rules="rules"
:step="10"
thumb-label="always"
show-ticks
/>
</template>

10
resources/js/views/demos/forms/form-elements/slider/DemoSliderVertical.vue Normal file
View File

@@ -0,0 +1,10 @@
<script setup>
const value = ref(10)
</script>
<template>
<VSlider
v-model="value"
direction="vertical"
/>
</template>

1008
resources/js/views/demos/forms/form-elements/slider/demoCodeSlider.js Normal file
View File

File diff suppressed because it is too large Load Diff