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

6
resources/js/views/demos/forms/form-elements/file-input/DemoFileInputAccept.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<VFileInput
accept="image/*"
label="File input"
/>
</template>

3
resources/js/views/demos/forms/form-elements/file-input/DemoFileInputBasic.vue Normal file
View File

@@ -0,0 +1,3 @@
<template>
<VFileInput label="File input" />
</template>

6
resources/js/views/demos/forms/form-elements/file-input/DemoFileInputChips.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<VFileInput
chips
label="File input w/ chips"
/>
</template>

8
resources/js/views/demos/forms/form-elements/file-input/DemoFileInputCounter.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<VFileInput
show-size
counter
multiple
label="File input"
/>
</template>

6
resources/js/views/demos/forms/form-elements/file-input/DemoFileInputDensity.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<VFileInput
label="File input"
density="compact"
/>
</template>

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

@@ -0,0 +1,18 @@
<script setup>
const file = ref()
const loading = ref(true)
watch(file, () => {
loading.value = !file.value[0]
})
</script>
<template>
<VFileInput
v-model="file"
:loading="loading"
color="primary"
label="File input"
variant="outlined"
/>
</template>

6
resources/js/views/demos/forms/form-elements/file-input/DemoFileInputMultiple.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<VFileInput
multiple
label="File input"
/>
</template>

6
resources/js/views/demos/forms/form-elements/file-input/DemoFileInputPrependIcon.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<VFileInput
label="File input"
prepend-icon="tabler-camera"
/>
</template>

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

@@ -0,0 +1,29 @@
<script setup>
const files = ref([])
</script>
<template>
<VFileInput
v-model="files"
multiple
placeholder="Upload your documents"
label="File input"
prepend-icon="tabler-paperclip"
>
<template #selection="{ fileNames }">
<template
v-for="fileName in fileNames"
:key="fileName"
>
<VChip
label
size="small"
color="primary"
class="me-2"
>
{{ fileName }}
</VChip>
</template>
</template>
</VFileInput>
</template>

6
resources/js/views/demos/forms/form-elements/file-input/DemoFileInputShowSize.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<VFileInput
show-size
label="File input"
/>
</template>

13
resources/js/views/demos/forms/form-elements/file-input/DemoFileInputValidation.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup>
const rules = [fileList => !fileList || !fileList.length || fileList[0].size < 1000000 || 'Avatar size should be less than 1 MB!']
</script>
<template>
<VFileInput
:rules="rules"
label="Avatar"
accept="image/png, image/jpeg, image/bmp"
placeholder="Pick an avatar"
prepend-icon="tabler-camera"
/>
</template>

50
resources/js/views/demos/forms/form-elements/file-input/DemoFileInputVariant.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<VFileInput label="Outlined" />
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Filled"
variant="filled"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Solo"
variant="solo"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Plain"
variant="plain"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Underlined"
variant="underlined"
density="default"
/>
</VCol>
</VRow>
</template>

340
resources/js/views/demos/forms/form-elements/file-input/demoCodeFileInput.js Normal file
View File

@@ -0,0 +1,340 @@
export const accept = { ts: `<template>
<VFileInput
accept="image/*"
label="File input"
/>
</template>
`, js: `<template>
<VFileInput
accept="image/*"
label="File input"
/>
</template>
` }
export const basic = { ts: `<template>
<VFileInput label="File input" />
</template>
`, js: `<template>
<VFileInput label="File input" />
</template>
` }
export const chips = { ts: `<template>
<VFileInput
chips
label="File input w/ chips"
/>
</template>
`, js: `<template>
<VFileInput
chips
label="File input w/ chips"
/>
</template>
` }
export const counter = { ts: `<template>
<VFileInput
show-size
counter
multiple
label="File input"
/>
</template>
`, js: `<template>
<VFileInput
show-size
counter
multiple
label="File input"
/>
</template>
` }
export const density = { ts: `<template>
<VFileInput
label="File input"
density="compact"
/>
</template>
`, js: `<template>
<VFileInput
label="File input"
density="compact"
/>
</template>
` }
export const loading = { ts: `<script setup lang="ts">
const file = ref()
const loading = ref(true)
watch(file, () => {
loading.value = !file.value[0]
})
</script>
<template>
<VFileInput
v-model="file"
:loading="loading"
color="primary"
label="File input"
variant="outlined"
/>
</template>
`, js: `<script setup>
const file = ref()
const loading = ref(true)
watch(file, () => {
loading.value = !file.value[0]
})
</script>
<template>
<VFileInput
v-model="file"
:loading="loading"
color="primary"
label="File input"
variant="outlined"
/>
</template>
` }
export const multiple = { ts: `<template>
<VFileInput
multiple
label="File input"
/>
</template>
`, js: `<template>
<VFileInput
multiple
label="File input"
/>
</template>
` }
export const prependIcon = { ts: `<template>
<VFileInput
label="File input"
prepend-icon="tabler-camera"
/>
</template>
`, js: `<template>
<VFileInput
label="File input"
prepend-icon="tabler-camera"
/>
</template>
` }
export const selectionSlot = { ts: `<script lang="ts" setup>
const files = ref<File[]>([])
</script>
<template>
<VFileInput
v-model="files"
multiple
placeholder="Upload your documents"
label="File input"
prepend-icon="tabler-paperclip"
>
<template #selection="{ fileNames }">
<template
v-for="fileName in fileNames"
:key="fileName"
>
<VChip
label
size="small"
color="primary"
class="me-2"
>
{{ fileName }}
</VChip>
</template>
</template>
</VFileInput>
</template>
`, js: `<script setup>
const files = ref([])
</script>
<template>
<VFileInput
v-model="files"
multiple
placeholder="Upload your documents"
label="File input"
prepend-icon="tabler-paperclip"
>
<template #selection="{ fileNames }">
<template
v-for="fileName in fileNames"
:key="fileName"
>
<VChip
label
size="small"
color="primary"
class="me-2"
>
{{ fileName }}
</VChip>
</template>
</template>
</VFileInput>
</template>
` }
export const showSize = { ts: `<template>
<VFileInput
show-size
label="File input"
/>
</template>
`, js: `<template>
<VFileInput
show-size
label="File input"
/>
</template>
` }
export const validation = { ts: `<script lang="ts" setup>
const rules = [
(fileList: FileList) => !fileList || !fileList.length || fileList[0].size < 1000000 || 'Avatar size should be less than 1 MB!',
]
</script>
<template>
<VFileInput
:rules="rules"
label="Avatar"
accept="image/png, image/jpeg, image/bmp"
placeholder="Pick an avatar"
prepend-icon="tabler-camera"
/>
</template>
`, js: `<script setup>
const rules = [fileList => !fileList || !fileList.length || fileList[0].size < 1000000 || 'Avatar size should be less than 1 MB!']
</script>
<template>
<VFileInput
:rules="rules"
label="Avatar"
accept="image/png, image/jpeg, image/bmp"
placeholder="Pick an avatar"
prepend-icon="tabler-camera"
/>
</template>
` }
export const variant = { ts: `<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<VFileInput label="Outlined" />
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Filled"
variant="filled"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Solo"
variant="solo"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Plain"
variant="plain"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Underlined"
variant="underlined"
density="default"
/>
</VCol>
</VRow>
</template>
`, js: `<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<VFileInput label="Outlined" />
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Filled"
variant="filled"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Solo"
variant="solo"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Plain"
variant="plain"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VFileInput
label="Underlined"
variant="underlined"
density="default"
/>
</VCol>
</VRow>
</template>
` }