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

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

@@ -0,0 +1,10 @@
<script setup>
const sliderValues = ref([
10,
60,
])
</script>
<template>
<VRangeSlider v-model="sliderValues" />
</template>

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

@@ -0,0 +1,13 @@
<script setup>
const sliderValues = ref([
10,
60,
])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
color="success"
/>
</template>

14
resources/js/views/demos/forms/form-elements/range-slider/DemoRangeSliderDisabled.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup>
const slidersValues = ref([
30,
60,
])
</script>
<template>
<VRangeSlider
v-model="slidersValues"
disabled
label="Disabled"
/>
</template>

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

@@ -0,0 +1,13 @@
<script setup>
const sliderValues = ref([
20,
40,
])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
step="10"
/>
</template>

37
resources/js/views/demos/forms/form-elements/range-slider/DemoRangeSliderThumbLabel.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup>
const seasons = [
'Winter',
'Spring',
'Summer',
'Fall',
]
const icons = [
'tabler-snowflake',
'tabler-leaf',
'tabler-flame',
'tabler-droplet',
]
const sliderValues = ref([
1,
2,
])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
:tick="seasons"
min="0"
max="3"
:step="1"
show-ticks="always"
thumb-label
tick-size="4"
>
<template #thumb-label="{ modelValue }">
<VIcon :icon="icons[modelValue]" />
</template>
</VRangeSlider>
</template>

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

@@ -0,0 +1,13 @@
<script setup>
const sliderValues = ref([
20,
40,
])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
direction="vertical"
/>
</template>

182
resources/js/views/demos/forms/form-elements/range-slider/demoCodeRangeSlider.js Normal file
View File

@@ -0,0 +1,182 @@
export const basic = { ts: `<script setup lang="ts">
const sliderValues = ref([10, 60])
</script>
<template>
<VRangeSlider v-model="sliderValues" />
</template>
`, js: `<script setup>
const sliderValues = ref([
10,
60,
])
</script>
<template>
<VRangeSlider v-model="sliderValues" />
</template>
` }
export const color = { ts: `<script lang="ts" setup>
const sliderValues = ref([10, 60])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
color="success"
/>
</template>
`, js: `<script setup>
const sliderValues = ref([
10,
60,
])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
color="success"
/>
</template>
` }
export const disabled = { ts: `<script lang="ts" setup>
const slidersValues = ref([30, 60])
</script>
<template>
<VRangeSlider
v-model="slidersValues"
disabled
label="Disabled"
/>
</template>
`, js: `<script setup>
const slidersValues = ref([
30,
60,
])
</script>
<template>
<VRangeSlider
v-model="slidersValues"
disabled
label="Disabled"
/>
</template>
` }
export const step = { ts: `<script lang="ts" setup>
const sliderValues = ref([20, 40])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
step="10"
/>
</template>
`, js: `<script setup>
const sliderValues = ref([
20,
40,
])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
step="10"
/>
</template>
` }
export const thumbLabel = { ts: `<script lang="ts" setup>
const seasons = ['Winter', 'Spring', 'Summer', 'Fall']
const icons = ['tabler-snowflake', 'tabler-leaf', 'tabler-flame', 'tabler-droplet']
const sliderValues = ref([1, 2])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
:tick="seasons"
min="0"
max="3"
:step="1"
show-ticks="always"
thumb-label
tick-size="4"
>
<template #thumb-label="{ modelValue }">
<VIcon :icon="icons[modelValue]" />
</template>
</VRangeSlider>
</template>
`, js: `<script setup>
const seasons = [
'Winter',
'Spring',
'Summer',
'Fall',
]
const icons = [
'tabler-snowflake',
'tabler-leaf',
'tabler-flame',
'tabler-droplet',
]
const sliderValues = ref([
1,
2,
])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
:tick="seasons"
min="0"
max="3"
:step="1"
show-ticks="always"
thumb-label
tick-size="4"
>
<template #thumb-label="{ modelValue }">
<VIcon :icon="icons[modelValue]" />
</template>
</VRangeSlider>
</template>
` }
export const vertical = { ts: `<script lang="ts" setup>
const sliderValues = ref([20, 40])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
direction="vertical"
/>
</template>
`, js: `<script setup>
const sliderValues = ref([
20,
40,
])
</script>
<template>
<VRangeSlider
v-model="sliderValues"
direction="vertical"
/>
</template>
` }