Initial commit
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
const checkboxContent = [
|
||||
{
|
||||
title: 'Discount',
|
||||
subtitle: '20%',
|
||||
desc: 'Wow! Get 20% off on your next purchase!',
|
||||
value: 'discount',
|
||||
},
|
||||
{
|
||||
title: 'Updates',
|
||||
subtitle: 'Free',
|
||||
desc: 'Get Updates regarding related products.',
|
||||
value: 'updates',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['discount'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxes
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
const checkboxContent = [
|
||||
{
|
||||
title: 'Backup',
|
||||
desc: 'Backup every file from your project.',
|
||||
value: 'backup',
|
||||
icon: {
|
||||
icon: 'tabler-server-2',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Encrypt',
|
||||
desc: 'Translate your data to encrypted text.',
|
||||
value: 'encrypt',
|
||||
icon: {
|
||||
icon: 'tabler-ban',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Site Lock',
|
||||
desc: 'Security tool to protect your website.',
|
||||
value: 'site-lock',
|
||||
icon: {
|
||||
icon: 'tabler-lock',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['backup'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithIcon
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import bg1 from '@images/pages/custom-checkbox-img-1.png'
|
||||
import bg2 from '@images/pages/custom-checkbox-img-2.png'
|
||||
import bg3 from '@images/pages/custom-checkbox-img-3.png'
|
||||
|
||||
const checkboxContent = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['basic'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithImage
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Basic',
|
||||
subtitle: 'Free',
|
||||
desc: 'Get 1 project with 1 team member.',
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
title: 'Premium',
|
||||
subtitle: '$45.80',
|
||||
value: 'premium',
|
||||
desc: 'Get 5 projects with 5 team members.',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadios
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Starter',
|
||||
desc: 'For freelancers who work with multiple clients',
|
||||
value: 'starter',
|
||||
icon: {
|
||||
icon: 'tabler-rocket',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Personal',
|
||||
desc: 'Join our talented community of talented digital agencies',
|
||||
value: 'personal',
|
||||
icon: {
|
||||
icon: 'tabler-star',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Enterprise',
|
||||
desc: 'Team plan for free upto 15 seats',
|
||||
value: 'enterprise',
|
||||
icon: {
|
||||
icon: 'tabler-crown',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('starter')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import bg1 from '@images/pages/custom-radio-img-1.png'
|
||||
import bg2 from '@images/pages/custom-radio-img-2.png'
|
||||
import bg3 from '@images/pages/custom-radio-img-3.png'
|
||||
|
||||
const radioContent = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithImage
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,390 @@
|
||||
export const customCheckboxes = { ts: `<script setup lang="ts">
|
||||
import type { CustomInputContent } from '@core/types'
|
||||
|
||||
const checkboxContent: CustomInputContent[] = [
|
||||
{
|
||||
title: 'Discount',
|
||||
subtitle: '20%',
|
||||
desc: 'Wow! Get 20% off on your next purchase!',
|
||||
value: 'discount',
|
||||
},
|
||||
{
|
||||
title: 'Updates',
|
||||
subtitle: 'Free',
|
||||
desc: 'Get Updates regarding related products.',
|
||||
value: 'updates',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['discount'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxes
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkboxContent = [
|
||||
{
|
||||
title: 'Discount',
|
||||
subtitle: '20%',
|
||||
desc: 'Wow! Get 20% off on your next purchase!',
|
||||
value: 'discount',
|
||||
},
|
||||
{
|
||||
title: 'Updates',
|
||||
subtitle: 'Free',
|
||||
desc: 'Get Updates regarding related products.',
|
||||
value: 'updates',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['discount'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxes
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customCheckboxesWithIcon = { ts: `<script setup lang="ts">
|
||||
import type { CustomInputContent } from '@core/types'
|
||||
|
||||
const checkboxContent: CustomInputContent[] = [
|
||||
{
|
||||
title: 'Backup',
|
||||
desc: 'Backup every file from your project.',
|
||||
value: 'backup',
|
||||
icon: { icon: 'tabler-server-2', size: '28' },
|
||||
},
|
||||
{
|
||||
title: 'Encrypt',
|
||||
desc: 'Translate your data to encrypted text.',
|
||||
value: 'encrypt',
|
||||
icon: { icon: 'tabler-ban', size: '28' },
|
||||
},
|
||||
{
|
||||
title: 'Site Lock',
|
||||
desc: 'Security tool to protect your website.',
|
||||
value: 'site-lock',
|
||||
icon: { icon: 'tabler-lock', size: '28' },
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['backup'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithIcon
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const checkboxContent = [
|
||||
{
|
||||
title: 'Backup',
|
||||
desc: 'Backup every file from your project.',
|
||||
value: 'backup',
|
||||
icon: {
|
||||
icon: 'tabler-server-2',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Encrypt',
|
||||
desc: 'Translate your data to encrypted text.',
|
||||
value: 'encrypt',
|
||||
icon: {
|
||||
icon: 'tabler-ban',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Site Lock',
|
||||
desc: 'Security tool to protect your website.',
|
||||
value: 'site-lock',
|
||||
icon: {
|
||||
icon: 'tabler-lock',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['backup'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithIcon
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customCheckboxesWithImage = { ts: `<script setup lang="ts">
|
||||
import bg1 from '@images/pages/custom-checkbox-img-1.png'
|
||||
import bg2 from '@images/pages/custom-checkbox-img-2.png'
|
||||
import bg3 from '@images/pages/custom-checkbox-img-3.png'
|
||||
|
||||
const checkboxContent: { bgImage: string; value: string }[] = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['basic'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithImage
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import bg1 from '@images/pages/custom-checkbox-img-1.png'
|
||||
import bg2 from '@images/pages/custom-checkbox-img-2.png'
|
||||
import bg3 from '@images/pages/custom-checkbox-img-3.png'
|
||||
|
||||
const checkboxContent = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedCheckbox = ref(['basic'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomCheckboxesWithImage
|
||||
v-model:selected-checkbox="selectedCheckbox"
|
||||
:checkbox-content="checkboxContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customRadios = { ts: `<script setup lang="ts">
|
||||
import type { CustomInputContent } from '@core/types'
|
||||
|
||||
const radioContent: CustomInputContent[] = [
|
||||
{
|
||||
title: 'Basic',
|
||||
subtitle: 'Free',
|
||||
desc: 'Get 1 project with 1 team member.',
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
title: 'Premium',
|
||||
subtitle: '$45.80',
|
||||
value: 'premium',
|
||||
desc: 'Get 5 projects with 5 team members.',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadios
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Basic',
|
||||
subtitle: 'Free',
|
||||
desc: 'Get 1 project with 1 team member.',
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
title: 'Premium',
|
||||
subtitle: '$45.80',
|
||||
value: 'premium',
|
||||
desc: 'Get 5 projects with 5 team members.',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadios
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '6', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customRadiosWithIcon = { ts: `<script setup lang="ts">
|
||||
import type { CustomInputContent } from '@core/types'
|
||||
|
||||
const radioContent: CustomInputContent[] = [
|
||||
{
|
||||
title: 'Starter',
|
||||
desc: 'For freelancers who work with multiple clients',
|
||||
value: 'starter',
|
||||
icon: { icon: 'tabler-rocket', size: '28' },
|
||||
},
|
||||
{
|
||||
title: 'Personal',
|
||||
desc: 'Join our talented community of talented digital agencies',
|
||||
value: 'personal',
|
||||
icon: { icon: 'tabler-star', size: '28' },
|
||||
},
|
||||
{
|
||||
title: 'Enterprise',
|
||||
desc: 'Team plan for free upto 15 seats',
|
||||
value: 'enterprise',
|
||||
icon: { icon: 'tabler-crown', size: '28' },
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('starter')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Starter',
|
||||
desc: 'For freelancers who work with multiple clients',
|
||||
value: 'starter',
|
||||
icon: {
|
||||
icon: 'tabler-rocket',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Personal',
|
||||
desc: 'Join our talented community of talented digital agencies',
|
||||
value: 'personal',
|
||||
icon: {
|
||||
icon: 'tabler-star',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Enterprise',
|
||||
desc: 'Team plan for free upto 15 seats',
|
||||
value: 'enterprise',
|
||||
icon: {
|
||||
icon: 'tabler-crown',
|
||||
size: '28',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('starter')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customRadiosWithImage = { ts: `<script setup lang="ts">
|
||||
import bg1 from '@images/pages/custom-radio-img-1.png'
|
||||
import bg2 from '@images/pages/custom-radio-img-2.png'
|
||||
import bg3 from '@images/pages/custom-radio-img-3.png'
|
||||
|
||||
const radioContent: { bgImage: string; value: string }[] = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithImage
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import bg1 from '@images/pages/custom-radio-img-1.png'
|
||||
import bg2 from '@images/pages/custom-radio-img-2.png'
|
||||
import bg3 from '@images/pages/custom-radio-img-3.png'
|
||||
|
||||
const radioContent = [
|
||||
{
|
||||
bgImage: bg1,
|
||||
value: 'basic',
|
||||
},
|
||||
{
|
||||
bgImage: bg2,
|
||||
value: 'premium',
|
||||
},
|
||||
{
|
||||
bgImage: bg3,
|
||||
value: 'enterprise',
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('basic')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomRadiosWithImage
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ sm: '4', cols: '12' }"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user