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

12
resources/js/views/demos/forms/form-elements/textarea/DemoTextareaAutoGrow.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const textareaValue = ref('The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.')
</script>
<template>
<AppTextarea
v-model="textareaValue"
label="Auto Grow"
placeholder="Placeholder Text"
auto-grow
/>
</template>

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

@@ -0,0 +1,6 @@
<template>
<AppTextarea
label="Default"
placeholder="Placeholder Text"
/>
</template>

7
resources/js/views/demos/forms/form-elements/textarea/DemoTextareaBrowserAutocomplete.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<AppTextarea
autocomplete="email"
label="Email"
placeholder="johndoe@email.com"
/>
</template>

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

@@ -0,0 +1,13 @@
<script setup>
const textareaValue = ref('This is clearable text.')
</script>
<template>
<AppTextarea
v-model="textareaValue"
clearable
clear-icon="tabler-circle-x"
label="Text"
placeholder="Placeholder Text"
/>
</template>

12
resources/js/views/demos/forms/form-elements/textarea/DemoTextareaCounter.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const textareaValue = ref('Hello!')
</script>
<template>
<AppTextarea
v-model="textareaValue"
counter
label="Text"
placeholder="Placeholder Text"
/>
</template>

39
resources/js/views/demos/forms/form-elements/textarea/DemoTextareaIcons.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<VRow>
<VCol cols="12">
<AppTextarea
label="prepend-icon"
rows="1"
placeholder="Placeholder Text"
prepend-icon="tabler-message-2"
/>
</VCol>
<VCol cols="12">
<AppTextarea
append-icon="tabler-message-2"
placeholder="Placeholder Text"
label="append-icon"
rows="1"
/>
</VCol>
<VCol cols="12">
<AppTextarea
prepend-inner-icon="tabler-message-2"
label="prepend-inner-icon"
placeholder="Placeholder Text"
rows="1"
/>
</VCol>
<VCol cols="12">
<AppTextarea
append-inner-icon="tabler-message-2"
label="append-inner-icon"
placeholder="Placeholder Text"
rows="1"
/>
</VCol>
</VRow>
</template>

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

@@ -0,0 +1,13 @@
<script setup>
const value = ref('Marshmallow tiramisu pie dessert gingerbread tart caramels marzipan oat cake. Muffin sesame snaps cupcake bonbon cookie tiramisu. Pudding biscuit gingerbread halvah lollipop jelly-o cookie.')
</script>
<template>
<AppTextarea
v-model="value"
label="Text"
no-resize
rows="2"
placeholder="Placeholder Text"
/>
</template>

55
resources/js/views/demos/forms/form-elements/textarea/DemoTextareaRows.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<AppTextarea
label="One row"
auto-grow
rows="1"
row-height="15"
placeholder="Placeholder Text"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextarea
auto-grow
label="Two rows"
rows="2"
placeholder="Placeholder Text"
row-height="20"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextarea
label="Three rows"
auto-grow
rows="3"
placeholder="Placeholder Text"
row-height="25"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextarea
auto-grow
label="Four rows"
placeholder="Placeholder Text"
rows="4"
row-height="30"
/>
</VCol>
</VRow>
</template>

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

@@ -0,0 +1,23 @@
<template>
<VRow>
<VCol cols="12">
<AppTextarea
disabled
label="Disabled"
hint="Hint text"
placeholder="Placeholder Text"
rows="2"
/>
</VCol>
<VCol cols="12">
<AppTextarea
readonly
rows="2"
label="Readonly"
placeholder="Placeholder Text"
hint="Hint text"
/>
</VCol>
</VRow>
</template>

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

@@ -0,0 +1,14 @@
<script setup>
const textareaValue = ref('Hello!')
const rules = [v => v.length <= 25 || 'Max 25 characters']
</script>
<template>
<AppTextarea
v-model="textareaValue"
label="Validation"
:rules="rules"
rows="2"
placeholder="Placeholder Text"
/>
</template>

74
resources/js/views/demos/forms/form-elements/textarea/DemoTextareaVariant.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Default"
rows="2"
placeholder="Placeholder Text"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Solo"
placeholder="Placeholder Text"
rows="2"
variant="solo"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Filled"
rows="2"
placeholder="Placeholder Text"
variant="filled"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Outlined"
rows="2"
placeholder="Placeholder Text"
variant="outlined"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Underlined"
rows="2"
placeholder="Placeholder Text"
variant="underlined"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Plain"
rows="2"
placeholder="Placeholder Text"
variant="plain"
/>
</VCol>
</VRow>
</template>

558
resources/js/views/demos/forms/form-elements/textarea/demoCodeTextarea.js Normal file
View File

@@ -0,0 +1,558 @@
export const autoGrow = { ts: `<script setup lang="ts">
const textareaValue = ref('The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.')
</script>
<template>
<AppTextarea
v-model="textareaValue"
label="Auto Grow"
placeholder="Placeholder Text"
auto-grow
/>
</template>
`, js: `<script setup>
const textareaValue = ref('The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.')
</script>
<template>
<AppTextarea
v-model="textareaValue"
label="Auto Grow"
placeholder="Placeholder Text"
auto-grow
/>
</template>
` }
export const basic = { ts: `<template>
<AppTextarea
label="Default"
placeholder="Placeholder Text"
/>
</template>
`, js: `<template>
<AppTextarea
label="Default"
placeholder="Placeholder Text"
/>
</template>
` }
export const browserAutocomplete = { ts: `<template>
<AppTextarea
autocomplete="email"
label="Email"
placeholder="johndoe@email.com"
/>
</template>
`, js: `<template>
<AppTextarea
autocomplete="email"
label="Email"
placeholder="johndoe@email.com"
/>
</template>
` }
export const clearable = { ts: `<script setup lang="ts">
const textareaValue = ref('This is clearable text.')
</script>
<template>
<AppTextarea
v-model="textareaValue"
clearable
clear-icon="tabler-circle-x"
label="Text"
placeholder="Placeholder Text"
/>
</template>
`, js: `<script setup>
const textareaValue = ref('This is clearable text.')
</script>
<template>
<AppTextarea
v-model="textareaValue"
clearable
clear-icon="tabler-circle-x"
label="Text"
placeholder="Placeholder Text"
/>
</template>
` }
export const counter = { ts: `<script lang="ts" setup>
const textareaValue = ref('Hello!')
</script>
<template>
<AppTextarea
v-model="textareaValue"
counter
label="Text"
placeholder="Placeholder Text"
/>
</template>
`, js: `<script setup>
const textareaValue = ref('Hello!')
</script>
<template>
<AppTextarea
v-model="textareaValue"
counter
label="Text"
placeholder="Placeholder Text"
/>
</template>
` }
export const icons = { ts: `<template>
<VRow>
<VCol cols="12">
<AppTextarea
label="prepend-icon"
rows="1"
placeholder="Placeholder Text"
prepend-icon="tabler-message-2"
/>
</VCol>
<VCol cols="12">
<AppTextarea
append-icon="tabler-message-2"
placeholder="Placeholder Text"
label="append-icon"
rows="1"
/>
</VCol>
<VCol cols="12">
<AppTextarea
prepend-inner-icon="tabler-message-2"
label="prepend-inner-icon"
placeholder="Placeholder Text"
rows="1"
/>
</VCol>
<VCol cols="12">
<AppTextarea
append-inner-icon="tabler-message-2"
label="append-inner-icon"
placeholder="Placeholder Text"
rows="1"
/>
</VCol>
</VRow>
</template>
`, js: `<template>
<VRow>
<VCol cols="12">
<AppTextarea
label="prepend-icon"
rows="1"
placeholder="Placeholder Text"
prepend-icon="tabler-message-2"
/>
</VCol>
<VCol cols="12">
<AppTextarea
append-icon="tabler-message-2"
placeholder="Placeholder Text"
label="append-icon"
rows="1"
/>
</VCol>
<VCol cols="12">
<AppTextarea
prepend-inner-icon="tabler-message-2"
label="prepend-inner-icon"
placeholder="Placeholder Text"
rows="1"
/>
</VCol>
<VCol cols="12">
<AppTextarea
append-inner-icon="tabler-message-2"
label="append-inner-icon"
placeholder="Placeholder Text"
rows="1"
/>
</VCol>
</VRow>
</template>
` }
export const noResize = { ts: `<script lang="ts" setup>
const value = ref('Marshmallow tiramisu pie dessert gingerbread tart caramels marzipan oat cake. Muffin sesame snaps cupcake bonbon cookie tiramisu. Pudding biscuit gingerbread halvah lollipop jelly-o cookie.')
</script>
<template>
<AppTextarea
v-model="value"
label="Text"
no-resize
rows="2"
placeholder="Placeholder Text"
/>
</template>
`, js: `<script setup>
const value = ref('Marshmallow tiramisu pie dessert gingerbread tart caramels marzipan oat cake. Muffin sesame snaps cupcake bonbon cookie tiramisu. Pudding biscuit gingerbread halvah lollipop jelly-o cookie.')
</script>
<template>
<AppTextarea
v-model="value"
label="Text"
no-resize
rows="2"
placeholder="Placeholder Text"
/>
</template>
` }
export const rows = { ts: `<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<AppTextarea
label="One row"
auto-grow
rows="1"
row-height="15"
placeholder="Placeholder Text"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextarea
auto-grow
label="Two rows"
rows="2"
placeholder="Placeholder Text"
row-height="20"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextarea
label="Three rows"
auto-grow
rows="3"
placeholder="Placeholder Text"
row-height="25"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextarea
auto-grow
label="Four rows"
placeholder="Placeholder Text"
rows="4"
row-height="30"
/>
</VCol>
</VRow>
</template>
`, js: `<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<AppTextarea
label="One row"
auto-grow
rows="1"
row-height="15"
placeholder="Placeholder Text"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextarea
auto-grow
label="Two rows"
rows="2"
placeholder="Placeholder Text"
row-height="20"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextarea
label="Three rows"
auto-grow
rows="3"
placeholder="Placeholder Text"
row-height="25"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<AppTextarea
auto-grow
label="Four rows"
placeholder="Placeholder Text"
rows="4"
row-height="30"
/>
</VCol>
</VRow>
</template>
` }
export const states = { ts: `<template>
<VRow>
<VCol cols="12">
<AppTextarea
disabled
label="Disabled"
hint="Hint text"
placeholder="Placeholder Text"
rows="2"
/>
</VCol>
<VCol cols="12">
<AppTextarea
readonly
rows="2"
label="Readonly"
placeholder="Placeholder Text"
hint="Hint text"
/>
</VCol>
</VRow>
</template>
`, js: `<template>
<VRow>
<VCol cols="12">
<AppTextarea
disabled
label="Disabled"
hint="Hint text"
placeholder="Placeholder Text"
rows="2"
/>
</VCol>
<VCol cols="12">
<AppTextarea
readonly
rows="2"
label="Readonly"
placeholder="Placeholder Text"
hint="Hint text"
/>
</VCol>
</VRow>
</template>
` }
export const validation = { ts: `<script lang="ts" setup>
const textareaValue = ref('Hello!')
const rules = [(v: string) => v.length <= 25 || 'Max 25 characters']
</script>
<template>
<AppTextarea
v-model="textareaValue"
label="Validation"
:rules="rules"
rows="2"
placeholder="Placeholder Text"
/>
</template>
`, js: `<script setup>
const textareaValue = ref('Hello!')
const rules = [v => v.length <= 25 || 'Max 25 characters']
</script>
<template>
<AppTextarea
v-model="textareaValue"
label="Validation"
:rules="rules"
rows="2"
placeholder="Placeholder Text"
/>
</template>
` }
export const variant = { ts: `<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Default"
rows="2"
placeholder="Placeholder Text"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Solo"
placeholder="Placeholder Text"
rows="2"
variant="solo"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Filled"
rows="2"
placeholder="Placeholder Text"
variant="filled"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Outlined"
rows="2"
placeholder="Placeholder Text"
variant="outlined"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Underlined"
rows="2"
placeholder="Placeholder Text"
variant="underlined"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Plain"
rows="2"
placeholder="Placeholder Text"
variant="plain"
/>
</VCol>
</VRow>
</template>
`, js: `<template>
<VRow>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Default"
rows="2"
placeholder="Placeholder Text"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Solo"
placeholder="Placeholder Text"
rows="2"
variant="solo"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Filled"
rows="2"
placeholder="Placeholder Text"
variant="filled"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Outlined"
rows="2"
placeholder="Placeholder Text"
variant="outlined"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Underlined"
rows="2"
placeholder="Placeholder Text"
variant="underlined"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<VTextarea
label="Plain"
rows="2"
placeholder="Placeholder Text"
variant="plain"
/>
</VCol>
</VRow>
</template>
` }