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

24
resources/js/views/demos/forms/form-elements/switch/DemoSwitchBasic.vue Normal file
View File

@@ -0,0 +1,24 @@
<script setup>
const toggleSwitch = ref(true)
const toggleFalseSwitch = ref(false)
const capitalizedLabel = label => {
const convertLabelText = label.toString()
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
}
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="toggleSwitch"
:label="capitalizedLabel(toggleSwitch)"
/>
<VSwitch
v-model="toggleFalseSwitch"
:label="capitalizedLabel(toggleFalseSwitch)"
/>
</div>
</template>

32
resources/js/views/demos/forms/form-elements/switch/DemoSwitchColors.vue Normal file
View File

@@ -0,0 +1,32 @@
<script setup>
const selectedSwitch = ref([
'Primary',
'Secondary',
'Success',
'Info',
'Warning',
'Error',
])
const switches = ref([
'Primary',
'Secondary',
'Success',
'Info',
'Warning',
'Error',
])
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-for="item in switches"
:key="item"
v-model="selectedSwitch"
:label="item"
:value="item"
:color="item.toLowerCase()"
/>
</div>
</template>

17
resources/js/views/demos/forms/form-elements/switch/DemoSwitchInset.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup>
const insetSwitch1 = ref(true)
const insetSwitch2 = ref(false)
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="insetSwitch1"
:label="`Switch 1: ${insetSwitch1.toString()}`"
/>
<VSwitch
v-model="insetSwitch2"
:label="`Switch 2: ${insetSwitch2.toString()}`"
/>
</div>
</template>

14
resources/js/views/demos/forms/form-elements/switch/DemoSwitchLabelSlot.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup>
const switchMe = ref(false)
</script>
<template>
<VSwitch v-model="switchMe">
<template #label>
Turn on the progress: <VProgressCircular
:indeterminate="switchMe"
class="ms-2"
/>
</template>
</VSwitch>
</template>

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

@@ -0,0 +1,23 @@
<script setup>
const people = ref(['John'])
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="people"
label="John"
value="John"
/>
<VSwitch
v-model="people"
label="Jacob"
value="Jacob"
/>
</div>
<p class="mt-2 mb-0">
{{ people }}
</p>
</template>

35
resources/js/views/demos/forms/form-elements/switch/DemoSwitchStates.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
const switchOn = ref('on')
const switchOnDisabled = ref('on')
const switchOnLoading = ref(true)
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="switchOn"
value="on"
label="On"
/>
<VSwitch label="Off" />
<VSwitch
v-model="switchOnDisabled"
value="on"
disabled
label="On disabled"
/>
<VSwitch
disabled
label="Off disabled"
/>
<VSwitch
v-model="switchOnLoading"
loading="warning"
:label="`${switchOnLoading ? 'On' : 'Off'} loading`"
/>
</div>
</template>

22
resources/js/views/demos/forms/form-elements/switch/DemoSwitchTrueAndFalseValue.vue Normal file
View File

@@ -0,0 +1,22 @@
<script setup>
const switch1 = ref(1)
const switch2 = ref('Show')
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="switch1"
:label="switch1.toString()"
:true-value="1"
:false-value="0"
/>
<VSwitch
v-model="switch2"
:label="switch2.toString()"
true-value="Show"
false-value="Hide"
/>
</div>
</template>

333
resources/js/views/demos/forms/form-elements/switch/demoCodeSwitch.js Normal file
View File

@@ -0,0 +1,333 @@
export const basic = { ts: `<script lang="ts" setup>
const toggleSwitch = ref(true)
const toggleFalseSwitch = ref(false)
const capitalizedLabel = (label: boolean) => {
const convertLabelText = label.toString()
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
}
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="toggleSwitch"
:label="capitalizedLabel(toggleSwitch)"
/>
<VSwitch
v-model="toggleFalseSwitch"
:label="capitalizedLabel(toggleFalseSwitch)"
/>
</div>
</template>
`, js: `<script setup>
const toggleSwitch = ref(true)
const toggleFalseSwitch = ref(false)
const capitalizedLabel = label => {
const convertLabelText = label.toString()
return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
}
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="toggleSwitch"
:label="capitalizedLabel(toggleSwitch)"
/>
<VSwitch
v-model="toggleFalseSwitch"
:label="capitalizedLabel(toggleFalseSwitch)"
/>
</div>
</template>
` }
export const colors = { ts: `<script lang="ts" setup>
const selectedSwitch = ref(['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Error'])
const switches = ref(['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Error'])
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-for="item in switches"
:key="item"
v-model="selectedSwitch"
:label="item"
:value="item"
:color="item.toLowerCase()"
/>
</div>
</template>
`, js: `<script setup>
const selectedSwitch = ref([
'Primary',
'Secondary',
'Success',
'Info',
'Warning',
'Error',
])
const switches = ref([
'Primary',
'Secondary',
'Success',
'Info',
'Warning',
'Error',
])
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-for="item in switches"
:key="item"
v-model="selectedSwitch"
:label="item"
:value="item"
:color="item.toLowerCase()"
/>
</div>
</template>
` }
export const inset = { ts: `<script lang="ts" setup>
const insetSwitch1 = ref(true)
const insetSwitch2 = ref(false)
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="insetSwitch1"
:label="\`Switch 1: \${insetSwitch1.toString()}\`"
/>
<VSwitch
v-model="insetSwitch2"
:label="\`Switch 2: \${insetSwitch2.toString()}\`"
/>
</div>
</template>
`, js: `<script setup>
const insetSwitch1 = ref(true)
const insetSwitch2 = ref(false)
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="insetSwitch1"
:label="\`Switch 1: \${insetSwitch1.toString()}\`"
/>
<VSwitch
v-model="insetSwitch2"
:label="\`Switch 2: \${insetSwitch2.toString()}\`"
/>
</div>
</template>
` }
export const labelSlot = { ts: `<script lang="ts" setup>
const switchMe = ref(false)
</script>
<template>
<VSwitch v-model="switchMe">
<template #label>
Turn on the progress: <VProgressCircular
:indeterminate="switchMe"
class="ms-2"
/>
</template>
</VSwitch>
</template>
`, js: `<script setup>
const switchMe = ref(false)
</script>
<template>
<VSwitch v-model="switchMe">
<template #label>
Turn on the progress: <VProgressCircular
:indeterminate="switchMe"
class="ms-2"
/>
</template>
</VSwitch>
</template>
` }
export const modelAsArray = { ts: `<script lang="ts" setup>
const people = ref(['John'])
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="people"
label="John"
value="John"
/>
<VSwitch
v-model="people"
label="Jacob"
value="Jacob"
/>
</div>
<p class="mt-2 mb-0">
{{ people }}
</p>
</template>
`, js: `<script setup>
const people = ref(['John'])
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="people"
label="John"
value="John"
/>
<VSwitch
v-model="people"
label="Jacob"
value="Jacob"
/>
</div>
<p class="mt-2 mb-0">
{{ people }}
</p>
</template>
` }
export const states = { ts: `<script setup lang="ts">
const switchOn = ref('on')
const switchOnDisabled = ref('on')
const switchOnLoading = ref(true)
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="switchOn"
value="on"
label="On"
/>
<VSwitch label="Off" />
<VSwitch
v-model="switchOnDisabled"
value="on"
disabled
label="On disabled"
/>
<VSwitch
disabled
label="Off disabled"
/>
<VSwitch
v-model="switchOnLoading"
loading="warning"
:label="\`\${switchOnLoading ? 'On' : 'Off'} loading\`"
/>
</div>
</template>
`, js: `<script setup>
const switchOn = ref('on')
const switchOnDisabled = ref('on')
const switchOnLoading = ref(true)
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="switchOn"
value="on"
label="On"
/>
<VSwitch label="Off" />
<VSwitch
v-model="switchOnDisabled"
value="on"
disabled
label="On disabled"
/>
<VSwitch
disabled
label="Off disabled"
/>
<VSwitch
v-model="switchOnLoading"
loading="warning"
:label="\`\${switchOnLoading ? 'On' : 'Off'} loading\`"
/>
</div>
</template>
` }
export const trueAndFalseValue = { ts: `<script lang="ts" setup>
const switch1 = ref(1)
const switch2 = ref('Show')
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="switch1"
:label="switch1.toString()"
:true-value="1"
:false-value="0"
/>
<VSwitch
v-model="switch2"
:label="switch2.toString()"
true-value="Show"
false-value="Hide"
/>
</div>
</template>
`, js: `<script setup>
const switch1 = ref(1)
const switch2 = ref('Show')
</script>
<template>
<div class="demo-space-x">
<VSwitch
v-model="switch1"
:label="switch1.toString()"
:true-value="1"
:false-value="0"
/>
<VSwitch
v-model="switch2"
:label="switch2.toString()"
true-value="Show"
false-value="Hide"
/>
</div>
</template>
` }