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

16
resources/js/views/demos/forms/form-elements/radio/DemoRadioBasic.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
const radioGroup = ref(1)
</script>
<template>
<div class="">
<VRadioGroup v-model="radioGroup">
<VRadio
v-for="n in 2"
:key="n"
:label="`Radio ${n}`"
:value="n"
/>
</VRadioGroup>
</div>
</template>

29
resources/js/views/demos/forms/form-elements/radio/DemoRadioColors.vue Normal file
View File

@@ -0,0 +1,29 @@
<script setup>
const selectedRadio = ref('primary')
const colorsRadio = [
'Primary',
'Secondary',
'Success',
'Info',
'Warning',
'Error',
]
</script>
<template>
<VRadioGroup
v-model="selectedRadio"
inline
>
<div>
<VRadio
v-for="radio in colorsRadio"
:key="radio"
:label="radio"
:color="radio.toLocaleLowerCase()"
:value="radio.toLocaleLowerCase()"
/>
</div>
</VRadioGroup>
</template>

37
resources/js/views/demos/forms/form-elements/radio/DemoRadioDensity.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup>
const columnRadio = ref('radio-1')
const inlineRadio = ref('radio-1')
</script>
<template>
<VRadioGroup v-model="columnRadio">
<VRadio
label="Option 1"
value="radio-1"
density="compact"
/>
<VRadio
label="Option 2"
value="radio-2"
density="compact"
/>
</VRadioGroup>
<VDivider class="my-3" />
<VRadioGroup
v-model="inlineRadio"
inline
>
<VRadio
label="Option 1"
value="radio-1"
density="compact"
/>
<VRadio
label="Option 2"
value="radio-2"
density="compact"
/>
</VRadioGroup>
</template>

18
resources/js/views/demos/forms/form-elements/radio/DemoRadioIcon.vue Normal file
View File

@@ -0,0 +1,18 @@
<script setup>
const radioGroup = ref(1)
</script>
<template>
<VRadioGroup
v-model="radioGroup"
false-icon="tabler-bell-off"
true-icon="tabler-bell"
>
<VRadio
v-for="n in 2"
:key="n"
:label="`Radio ${n}`"
:value="n"
/>
</VRadioGroup>
</template>

33
resources/js/views/demos/forms/form-elements/radio/DemoRadioInline.vue Normal file
View File

@@ -0,0 +1,33 @@
<script setup>
const columnRadio = ref('radio-1')
const inlineRadio = ref('radio-1')
</script>
<template>
<VRadioGroup v-model="columnRadio">
<VRadio
label="Option 1"
value="radio-1"
/>
<VRadio
label="Option 2"
value="radio-2"
/>
</VRadioGroup>
<VDivider class="my-4" />
<VRadioGroup
v-model="inlineRadio"
inline
>
<VRadio
label="Option 1"
value="radio-1"
/>
<VRadio
label="Option 2"
value="radio-2"
/>
</VRadioGroup>
</template>

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

@@ -0,0 +1,31 @@
<script setup>
const radios = ref('DuckDuckGo')
</script>
<template>
<VRadioGroup v-model="radios">
<template #label>
<div>Your favorite <strong>search engine</strong></div>
</template>
<VRadio value="Google">
<template #label>
<div>
Of course it's <span class="text-success">
Google
</span>
</div>
</template>
</VRadio>
<VRadio value="DuckDuckGo">
<template #label>
<div>
Definitely <span class="text-primary">
DuckDuckGo
</span>
</div>
</template>
</VRadio>
</VRadioGroup>
</template>

20
resources/js/views/demos/forms/form-elements/radio/DemoRadioValidation.vue Normal file
View File

@@ -0,0 +1,20 @@
<script setup>
const radioGroup = ref(1)
const rules = [value => value !== 3 ? true : 'Do not select the third one!']
</script>
<template>
<VRadioGroup
v-model="radioGroup"
inline
:rules="rules"
>
<VRadio
v-for="n in 3"
:key="n"
:error="radioGroup === 3 "
:label="`Radio ${n}`"
:value="n"
/>
</VRadioGroup>
</template>

374
resources/js/views/demos/forms/form-elements/radio/demoCodeRadio.js Normal file
View File

@@ -0,0 +1,374 @@
export const basic = { ts: `<script lang="ts" setup>
const radioGroup = ref(1)
</script>
<template>
<div class="">
<VRadioGroup v-model="radioGroup">
<VRadio
v-for="n in 2"
:key="n"
:label="\`Radio \${n}\`"
:value="n"
/>
</VRadioGroup>
</div>
</template>
`, js: `<script setup>
const radioGroup = ref(1)
</script>
<template>
<div class="">
<VRadioGroup v-model="radioGroup">
<VRadio
v-for="n in 2"
:key="n"
:label="\`Radio \${n}\`"
:value="n"
/>
</VRadioGroup>
</div>
</template>
` }
export const colors = { ts: `<script lang="ts" setup>
const selectedRadio = ref('primary')
const colorsRadio = ['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Error']
</script>
<template>
<VRadioGroup
v-model="selectedRadio"
inline
>
<div>
<VRadio
v-for="radio in colorsRadio"
:key="radio"
:label="radio"
:color="radio.toLocaleLowerCase()"
:value="radio.toLocaleLowerCase()"
/>
</div>
</VRadioGroup>
</template>
`, js: `<script setup>
const selectedRadio = ref('primary')
const colorsRadio = [
'Primary',
'Secondary',
'Success',
'Info',
'Warning',
'Error',
]
</script>
<template>
<VRadioGroup
v-model="selectedRadio"
inline
>
<div>
<VRadio
v-for="radio in colorsRadio"
:key="radio"
:label="radio"
:color="radio.toLocaleLowerCase()"
:value="radio.toLocaleLowerCase()"
/>
</div>
</VRadioGroup>
</template>
` }
export const density = { ts: `<script lang="ts" setup>
const columnRadio = ref('radio-1')
const inlineRadio = ref('radio-1')
</script>
<template>
<VRadioGroup v-model="columnRadio">
<VRadio
label="Option 1"
value="radio-1"
density="compact"
/>
<VRadio
label="Option 2"
value="radio-2"
density="compact"
/>
</VRadioGroup>
<VDivider class="my-3" />
<VRadioGroup
v-model="inlineRadio"
inline
>
<VRadio
label="Option 1"
value="radio-1"
density="compact"
/>
<VRadio
label="Option 2"
value="radio-2"
density="compact"
/>
</VRadioGroup>
</template>
`, js: `<script setup>
const columnRadio = ref('radio-1')
const inlineRadio = ref('radio-1')
</script>
<template>
<VRadioGroup v-model="columnRadio">
<VRadio
label="Option 1"
value="radio-1"
density="compact"
/>
<VRadio
label="Option 2"
value="radio-2"
density="compact"
/>
</VRadioGroup>
<VDivider class="my-3" />
<VRadioGroup
v-model="inlineRadio"
inline
>
<VRadio
label="Option 1"
value="radio-1"
density="compact"
/>
<VRadio
label="Option 2"
value="radio-2"
density="compact"
/>
</VRadioGroup>
</template>
` }
export const icon = { ts: `<script lang="ts" setup>
const radioGroup = ref(1)
</script>
<template>
<VRadioGroup
v-model="radioGroup"
false-icon="tabler-bell-off"
true-icon="tabler-bell"
>
<VRadio
v-for="n in 2"
:key="n"
:label="\`Radio \${n}\`"
:value="n"
/>
</VRadioGroup>
</template>
`, js: `<script setup>
const radioGroup = ref(1)
</script>
<template>
<VRadioGroup
v-model="radioGroup"
false-icon="tabler-bell-off"
true-icon="tabler-bell"
>
<VRadio
v-for="n in 2"
:key="n"
:label="\`Radio \${n}\`"
:value="n"
/>
</VRadioGroup>
</template>
` }
export const inline = { ts: `<script lang="ts" setup>
const columnRadio = ref('radio-1')
const inlineRadio = ref('radio-1')
</script>
<template>
<VRadioGroup v-model="columnRadio">
<VRadio
label="Option 1"
value="radio-1"
/>
<VRadio
label="Option 2"
value="radio-2"
/>
</VRadioGroup>
<VDivider class="my-4" />
<VRadioGroup
v-model="inlineRadio"
inline
>
<VRadio
label="Option 1"
value="radio-1"
/>
<VRadio
label="Option 2"
value="radio-2"
/>
</VRadioGroup>
</template>
`, js: `<script setup>
const columnRadio = ref('radio-1')
const inlineRadio = ref('radio-1')
</script>
<template>
<VRadioGroup v-model="columnRadio">
<VRadio
label="Option 1"
value="radio-1"
/>
<VRadio
label="Option 2"
value="radio-2"
/>
</VRadioGroup>
<VDivider class="my-4" />
<VRadioGroup
v-model="inlineRadio"
inline
>
<VRadio
label="Option 1"
value="radio-1"
/>
<VRadio
label="Option 2"
value="radio-2"
/>
</VRadioGroup>
</template>
` }
export const labelSlot = { ts: `<script lang="ts" setup>
const radios = ref('DuckDuckGo')
</script>
<template>
<VRadioGroup v-model="radios">
<template #label>
<div>Your favorite <strong>search engine</strong></div>
</template>
<VRadio value="Google">
<template #label>
<div>
Of course it's <span class="text-success">
Google
</span>
</div>
</template>
</VRadio>
<VRadio value="DuckDuckGo">
<template #label>
<div>
Definitely <span class="text-primary">
DuckDuckGo
</span>
</div>
</template>
</VRadio>
</VRadioGroup>
</template>
`, js: `<script setup>
const radios = ref('DuckDuckGo')
</script>
<template>
<VRadioGroup v-model="radios">
<template #label>
<div>Your favorite <strong>search engine</strong></div>
</template>
<VRadio value="Google">
<template #label>
<div>
Of course it's <span class="text-success">
Google
</span>
</div>
</template>
</VRadio>
<VRadio value="DuckDuckGo">
<template #label>
<div>
Definitely <span class="text-primary">
DuckDuckGo
</span>
</div>
</template>
</VRadio>
</VRadioGroup>
</template>
` }
export const validation = { ts: `<script lang="ts" setup>
const radioGroup = ref(1)
const rules = [(value: number) => (value !== 3 ? true : 'Do not select the third one!')]
</script>
<template>
<VRadioGroup
v-model="radioGroup"
inline
:rules="rules"
>
<VRadio
v-for="n in 3"
:key="n"
:error="radioGroup === 3 "
:label="\`Radio \${n}\`"
:value="n"
/>
</VRadioGroup>
</template>
`, js: `<script setup>
const radioGroup = ref(1)
const rules = [value => value !== 3 ? true : 'Do not select the third one!']
</script>
<template>
<VRadioGroup
v-model="radioGroup"
inline
:rules="rules"
>
<VRadio
v-for="n in 3"
:key="n"
:error="radioGroup === 3 "
:label="\`Radio \${n}\`"
:value="n"
/>
</VRadioGroup>
</template>
` }