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/select/DemoSelectBasic.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
const items = [
'Foo',
'Bar',
'Fizz',
'Buzz',
]
</script>
<template>
<AppSelect
:items="items"
label="Standard"
placeholder="Select Item"
/>
</template>

27
resources/js/views/demos/forms/form-elements/select/DemoSelectChips.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup>
const items = [
'foo',
'bar',
'fizz',
'buzz',
]
const selected = ref([
'foo',
'bar',
'fizz',
'buzz',
])
</script>
<template>
<AppSelect
v-model="selected"
:items="items"
placeholder="Select Item"
label="Chips"
chips
multiple
closable-chips
/>
</template>

44
resources/js/views/demos/forms/form-elements/select/DemoSelectCustomTextAndValue.vue Normal file
View File

@@ -0,0 +1,44 @@
<script setup>
const selectedOption = ref({
state: 'Florida',
abbr: 'FL',
})
const items = [
{
state: 'Florida',
abbr: 'FL',
},
{
state: 'Georgia',
abbr: 'GA',
},
{
state: 'Nebraska',
abbr: 'NE',
},
{
state: 'California',
abbr: 'CA',
},
{
state: 'New York',
abbr: 'NY',
},
]
</script>
<template>
<AppSelect
v-model="selectedOption"
:hint="`${selectedOption.state}, ${selectedOption.abbr}`"
:items="items"
item-title="state"
item-value="abbr"
label="Select"
persistent-hint
return-object
single-line
placeholder="Select State"
/>
</template>

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

@@ -0,0 +1,17 @@
<script setup>
const items = [
'Foo',
'Bar',
'Fizz',
'Buzz',
]
</script>
<template>
<AppSelect
:items="items"
label="Density"
density="compact"
placeholder="Select Item"
/>
</template>

49
resources/js/views/demos/forms/form-elements/select/DemoSelectIcons.vue Normal file
View File

@@ -0,0 +1,49 @@
<script setup>
const selectedOption1 = ref('Florida')
const selectedOption2 = ref('Texas')
const states = [
'Alabama',
'Alaska',
'American Samoa',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'District of Columbia',
'Federated States of Micronesia',
'Florida',
'Georgia',
'Guam',
]
</script>
<template>
<VRow>
<VCol cols="12">
<AppSelect
v-model="selectedOption1"
:items="states"
label="Select"
prepend-icon="tabler-map"
single-line
variant="filled"
placeholder="Select State"
/>
</VCol>
<VCol cols="12">
<AppSelect
v-model="selectedOption2"
:items="states"
append-icon="tabler-map"
label="Select"
single-line
variant="filled"
placeholder="Select State"
/>
</VCol>
</VRow>
</template>

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

@@ -0,0 +1,17 @@
<script setup>
const items = [
'Foo',
'Bar',
'Fizz',
'Buzz',
]
</script>
<template>
<AppSelect
:items="items"
:menu-props="{ transition: 'scroll-y-transition' }"
label="Label"
placeholder="Select Item"
/>
</template>

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

@@ -0,0 +1,32 @@
<script setup>
const selectedOptions = ref(['Alabama'])
const states = [
'Alabama',
'Alaska',
'American Samoa',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'District of Columbia',
'Federated States of Micronesia',
'Florida',
'Georgia',
'Guam',
]
</script>
<template>
<AppSelect
v-model="selectedOptions"
:items="states"
:menu-props="{ maxHeight: '400' }"
label="Select"
multiple
persistent-hint
placeholder="Select State"
/>
</template>

59
resources/js/views/demos/forms/form-elements/select/DemoSelectSelectionSlot.vue Normal file
View File

@@ -0,0 +1,59 @@
<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
const items = [
{
name: 'Sandra Adams',
avatar: avatar1,
},
{
name: 'Ali Connors',
avatar: avatar2,
},
{
name: 'Trevor Hansen',
avatar: avatar3,
},
{
name: 'Tucker Smith',
avatar: avatar4,
},
{
name: 'Britta Holt',
avatar: avatar5,
},
]
const value = ref(['Sandra Adams'])
</script>
<template>
<AppSelect
v-model="value"
:items="items"
item-title="name"
item-value="name"
label="Select Item"
placeholder="Select Item"
multiple
clearable
clear-icon="tabler-x"
>
<template #selection="{ item }">
<VChip>
<template #prepend>
<VAvatar
start
:image="item.raw.avatar"
/>
</template>
<span>{{ item.title }}</span>
</VChip>
</template>
</AppSelect>
</template>

70
resources/js/views/demos/forms/form-elements/select/DemoSelectVariant.vue Normal file
View File

@@ -0,0 +1,70 @@
<script setup>
const items = [
'Foo',
'Bar',
'Fizz',
'Buzz',
]
</script>
<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Outlined"
placeholder="Select Item"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Filled"
placeholder="Select Item"
variant="filled"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Solo"
placeholder="Select Item"
variant="solo"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Plain"
placeholder="Select Item"
variant="plain"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Underlined"
variant="underlined"
placeholder="Select Item"
/>
</VCol>
</VRow>
</template>

616
resources/js/views/demos/forms/form-elements/select/demoCodeSelect.js Normal file
View File

@@ -0,0 +1,616 @@
export const basic = { ts: `<script lang="ts" setup>
const items = ['Foo', 'Bar', 'Fizz', 'Buzz']
</script>
<template>
<AppSelect
:items="items"
label="Standard"
placeholder="Select Item"
/>
</template>
`, js: `<script setup>
const items = [
'Foo',
'Bar',
'Fizz',
'Buzz',
]
</script>
<template>
<AppSelect
:items="items"
label="Standard"
placeholder="Select Item"
/>
</template>
` }
export const chips = { ts: `<script lang="ts" setup>
const items = ['foo', 'bar', 'fizz', 'buzz']
const selected = ref(['foo', 'bar', 'fizz', 'buzz'])
</script>
<template>
<AppSelect
v-model="selected"
:items="items"
placeholder="Select Item"
label="Chips"
chips
multiple
closable-chips
/>
</template>
`, js: `<script setup>
const items = [
'foo',
'bar',
'fizz',
'buzz',
]
const selected = ref([
'foo',
'bar',
'fizz',
'buzz',
])
</script>
<template>
<AppSelect
v-model="selected"
:items="items"
placeholder="Select Item"
label="Chips"
chips
multiple
closable-chips
/>
</template>
` }
export const customTextAndValue = { ts: `<script lang="ts" setup>
const selectedOption = ref({ state: 'Florida', abbr: 'FL' })
const items = [
{ state: 'Florida', abbr: 'FL' },
{ state: 'Georgia', abbr: 'GA' },
{ state: 'Nebraska', abbr: 'NE' },
{ state: 'California', abbr: 'CA' },
{ state: 'New York', abbr: 'NY' },
]
</script>
<template>
<AppSelect
v-model="selectedOption"
:hint="\`\${selectedOption.state}, \${selectedOption.abbr}\`"
:items="items"
item-title="state"
item-value="abbr"
label="Select"
persistent-hint
return-object
single-line
placeholder="Select State"
/>
</template>
`, js: `<script setup>
const selectedOption = ref({
state: 'Florida',
abbr: 'FL',
})
const items = [
{
state: 'Florida',
abbr: 'FL',
},
{
state: 'Georgia',
abbr: 'GA',
},
{
state: 'Nebraska',
abbr: 'NE',
},
{
state: 'California',
abbr: 'CA',
},
{
state: 'New York',
abbr: 'NY',
},
]
</script>
<template>
<AppSelect
v-model="selectedOption"
:hint="\`\${selectedOption.state}, \${selectedOption.abbr}\`"
:items="items"
item-title="state"
item-value="abbr"
label="Select"
persistent-hint
return-object
single-line
placeholder="Select State"
/>
</template>
` }
export const density = { ts: `<script lang="ts" setup>
const items = ['Foo', 'Bar', 'Fizz', 'Buzz']
</script>
<template>
<AppSelect
:items="items"
label="Density"
density="compact"
placeholder="Select Item"
/>
</template>
`, js: `<script setup>
const items = [
'Foo',
'Bar',
'Fizz',
'Buzz',
]
</script>
<template>
<AppSelect
:items="items"
label="Density"
density="compact"
placeholder="Select Item"
/>
</template>
` }
export const icons = { ts: `<script lang="ts" setup>
const selectedOption1 = ref('Florida')
const selectedOption2 = ref('Texas')
const states = [
'Alabama',
'Alaska',
'American Samoa',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'District of Columbia',
'Federated States of Micronesia',
'Florida',
'Georgia',
'Guam',
]
</script>
<template>
<VRow>
<VCol cols="12">
<AppSelect
v-model="selectedOption1"
:items="states"
label="Select"
prepend-icon="tabler-map"
single-line
variant="filled"
placeholder="Select State"
/>
</VCol>
<VCol cols="12">
<AppSelect
v-model="selectedOption2"
:items="states"
append-icon="tabler-map"
label="Select"
single-line
variant="filled"
placeholder="Select State"
/>
</VCol>
</VRow>
</template>
`, js: `<script setup>
const selectedOption1 = ref('Florida')
const selectedOption2 = ref('Texas')
const states = [
'Alabama',
'Alaska',
'American Samoa',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'District of Columbia',
'Federated States of Micronesia',
'Florida',
'Georgia',
'Guam',
]
</script>
<template>
<VRow>
<VCol cols="12">
<AppSelect
v-model="selectedOption1"
:items="states"
label="Select"
prepend-icon="tabler-map"
single-line
variant="filled"
placeholder="Select State"
/>
</VCol>
<VCol cols="12">
<AppSelect
v-model="selectedOption2"
:items="states"
append-icon="tabler-map"
label="Select"
single-line
variant="filled"
placeholder="Select State"
/>
</VCol>
</VRow>
</template>
` }
export const menuProps = { ts: `<script lang="ts" setup>
const items = ['Foo', 'Bar', 'Fizz', 'Buzz']
</script>
<template>
<AppSelect
:items="items"
:menu-props="{ transition: 'scroll-y-transition' }"
label="Label"
placeholder="Select Item"
/>
</template>
`, js: `<script setup>
const items = [
'Foo',
'Bar',
'Fizz',
'Buzz',
]
</script>
<template>
<AppSelect
:items="items"
:menu-props="{ transition: 'scroll-y-transition' }"
label="Label"
placeholder="Select Item"
/>
</template>
` }
export const multiple = { ts: `<script lang="ts" setup>
const selectedOptions = ref(['Alabama'])
const states = [
'Alabama',
'Alaska',
'American Samoa',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'District of Columbia',
'Federated States of Micronesia',
'Florida',
'Georgia',
'Guam',
]
</script>
<template>
<AppSelect
v-model="selectedOptions"
:items="states"
:menu-props="{ maxHeight: '400' }"
label="Select"
multiple
persistent-hint
placeholder="Select State"
/>
</template>
`, js: `<script setup>
const selectedOptions = ref(['Alabama'])
const states = [
'Alabama',
'Alaska',
'American Samoa',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'District of Columbia',
'Federated States of Micronesia',
'Florida',
'Georgia',
'Guam',
]
</script>
<template>
<AppSelect
v-model="selectedOptions"
:items="states"
:menu-props="{ maxHeight: '400' }"
label="Select"
multiple
persistent-hint
placeholder="Select State"
/>
</template>
` }
export const selectionSlot = { ts: `<script lang="ts" setup>
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
const items: { name: string; avatar: string }[] = [
{ name: 'Sandra Adams', avatar: avatar1 },
{ name: 'Ali Connors', avatar: avatar2 },
{ name: 'Trevor Hansen', avatar: avatar3 },
{ name: 'Tucker Smith', avatar: avatar4 },
{ name: 'Britta Holt', avatar: avatar5 },
]
const value = ref(['Sandra Adams'])
</script>
<template>
<AppSelect
v-model="value"
:items="items"
item-title="name"
item-value="name"
label="Select Item"
placeholder="Select Item"
multiple
clearable
clear-icon="tabler-x"
>
<template #selection="{ item }">
<VChip>
<template #prepend>
<VAvatar
start
:image="item.raw.avatar"
/>
</template>
<span>{{ item.title }}</span>
</VChip>
</template>
</AppSelect>
</template>
`, js: `<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar3 from '@images/avatars/avatar-3.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
const items = [
{
name: 'Sandra Adams',
avatar: avatar1,
},
{
name: 'Ali Connors',
avatar: avatar2,
},
{
name: 'Trevor Hansen',
avatar: avatar3,
},
{
name: 'Tucker Smith',
avatar: avatar4,
},
{
name: 'Britta Holt',
avatar: avatar5,
},
]
const value = ref(['Sandra Adams'])
</script>
<template>
<AppSelect
v-model="value"
:items="items"
item-title="name"
item-value="name"
label="Select Item"
placeholder="Select Item"
multiple
clearable
clear-icon="tabler-x"
>
<template #selection="{ item }">
<VChip>
<template #prepend>
<VAvatar
start
:image="item.raw.avatar"
/>
</template>
<span>{{ item.title }}</span>
</VChip>
</template>
</AppSelect>
</template>
` }
export const variant = { ts: `<script lang="ts" setup>
const items = ['Foo', 'Bar', 'Fizz', 'Buzz']
</script>
<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Outlined"
placeholder="Select Item"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Filled"
placeholder="Select Item"
variant="filled"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Solo"
placeholder="Select Item"
variant="solo"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Plain"
placeholder="Select Item"
variant="plain"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Underlined"
variant="underlined"
placeholder="Select Item"
/>
</VCol>
</VRow>
</template>
`, js: `<script setup>
const items = [
'Foo',
'Bar',
'Fizz',
'Buzz',
]
</script>
<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Outlined"
placeholder="Select Item"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Filled"
placeholder="Select Item"
variant="filled"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Solo"
placeholder="Select Item"
variant="solo"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Plain"
placeholder="Select Item"
variant="plain"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VSelect
:items="items"
label="Underlined"
variant="underlined"
placeholder="Select Item"
/>
</VCol>
</VRow>
</template>
` }