vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Implemented PlexTextarea

pull/7319/merge
Cagatay Civici 2025-03-01 17:01:54 +03:00
parent 443fd41198
commit b1466fd7cd
14 changed files with 337 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/labs/assets/data/menu.json
View File

@ -25,6 +25,10 @@
{
"name": "InputText",
"to": "/inputtext"
},
{
"name": "Textarea",
"to": "/textarea"
}
]
},

2
apps/labs/doc/inputtext/ImportDoc.vue
View File

@ -8,7 +8,7 @@ export default {
data() {
return {
code: `
import InputText from '@/plex/inputtext';
import PlexInputText from '@/plex/inputtext';
`
};
}

31
apps/labs/doc/textarea/AutoResizeDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.</p>
</DocSectionText>
<div class="card flex justify-center">
<PlexTextarea v-model="value" autoResize rows="5" cols="30" />
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value = ref(null);
const code = ref(`
<template>
<div class="card flex justify-center">
<PlexTextarea v-model="value" autoResize rows="5" cols="30" />
</div>
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value = ref(null);
<\/script>
`);
</script>

31
apps/labs/doc/textarea/BasicDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Textarea is used with the <i>v-model</i> property for two-way value binding.</p>
</DocSectionText>
<div class="card flex justify-center">
<PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value = ref(null);
const code = ref(`
<template>
<div class="card flex justify-center">
<PlexTextarea v-model="value" rows="5" cols="30" class="resize-none" />
</div>
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value = ref(null);
<\/script>
`);
</script>

31
apps/labs/doc/textarea/DisabledDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex justify-center">
<PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value = ref(null);
const code = ref(`
<template>
<div class="card flex justify-center">
<PlexTextarea v-model="value" rows="5" cols="30" disabled class="resize-none" />
</div>
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value = ref(null);
<\/script>
`);
</script>

31
apps/labs/doc/textarea/FilledDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-center">
<PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value = ref(null);
const code = ref(`
<template>
<div class="card flex justify-center">
<PlexTextarea v-model="value" rows="5" cols="30" variant="filled" />
</div>
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value = ref(null);
<\/script>
`);
</script>

31
apps/labs/doc/textarea/HelpTextDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>An advisory text can be defined with the <NuxtLink to="/message">Message</NuxtLink> component.</p>
</DocSectionText>
<div class="card flex justify-center">
<PlexInputText v-model="value" type="text" />
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template>
<script setup>
import PlexInputText from '@/plex/inputtext';
import { ref } from 'vue';
const value = ref(null);
const code = ref(`
<template>
<div class="card flex justify-center">
<PlexInputText v-model="value" type="text" />
</div>
</template>
<script setup>
import PlexInputText from '@/plex/inputtext';
import { ref } from 'vue';
const value = ref(null);
<\/script>
`);
</script>

16
apps/labs/doc/textarea/ImportDoc.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" lang="script" />
</template>
<script>
export default {
data() {
return {
code: `
import PlexTextarea from '@/plex/textarea';
`
};
}
};
</script>

31
apps/labs/doc/textarea/InvalidDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText>
<div class="card flex justify-center">
<PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value = ref('');
const code = ref(`
<template>
<div class="card flex justify-center">
<PlexTextarea v-model="value" rows="5" cols="30" :invalid="!value" class="resize-none" placeholder="Address" />
</div>
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value = ref(null);
<\/script>
`);
</script>

39
apps/labs/doc/textarea/SizesDoc.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<DocSectionText v-bind="$attrs">
<p>InputText provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText>
<div class="card flex flex-col items-center gap-4">
<PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
<PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
<PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
</div>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz />
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const code = ref(`
<template>
<div class="card flex flex-col items-center gap-4">
<PlexTextarea v-model="value1" size="small" placeholder="Small" rows="3" />
<PlexTextarea v-model="value2" placeholder="Normal" rows="3" />
<PlexTextarea v-model="value3" size="large" placeholder="Large" rows="3" />
</div>
</template>
<script setup>
import PlexTextarea from '@/plex/textarea';
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
<\/script>
`);
</script>

52
apps/labs/pages/textarea/index.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<DocComponent title="Vue Textarea Component" header="InputText" description="Textarea adds styling and auto-resize functionality to standard textarea element." :componentDocs="docs" />
</template>
<script setup>
import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc.vue';
import BasicDoc from '@/doc/textarea/BasicDoc.vue';
import DisabledDoc from '@/doc/textarea/DisabledDoc.vue';
import FilledDoc from '@/doc/textarea/FilledDoc.vue';
import ImportDoc from '@/doc/textarea/ImportDoc.vue';
import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
import SizesDoc from '@/doc/textarea/SizesDoc.vue';
import { ref } from 'vue';
const docs = ref([
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'auto-resize',
label: 'Auto Resize',
component: AutoResizeDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'sizes',
label: 'Sizes',
component: SizesDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
}
]);
</script>

27
apps/labs/plex/textarea/index.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<Textarea unstyled :pt="theme" />
</template>
<script setup>
import Textarea from 'primevue/textarea';
import { ref } from 'vue';
const theme = ref({
root: `appearance-none rounded-md outline-none
bg-surface-0 dark:bg-surface-950
p-filled:bg-surface-50 dark:p-filled:bg-surface-800
text-surface-700 dark:text-surface-0
placeholder:text-surface-500 dark:placeholder:text-surface-400
border border-surface-300 dark:border-surface-700
enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
enabled:focus:border-primary
disabled:bg-surface-200 disabled:text-surface-500
dark:disabled:bg-surface-700 dark:disabled:text-surface-400
p-invalid:border-red-400 dark:p-invalid:border-red-300
p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
px-3 py-2 p-fluid:w-full
p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]`
});
</script>

4
apps/showcase/pages/textarea/index.vue
View File

@ -2,7 +2,7 @@
<DocComponent
title="Vue Textarea Component"
header="Textarea"
description="Textarea adds styling, key filtering and autoResize functionality to standard textarea element."
description="Textarea adds styling and autoResize functionality to standard textarea element."
:componentDocs="docs"
:apiDocs="['Textarea']"
:ptTabComponent="ptComponent"
@ -20,9 +20,9 @@ import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
import FormsDoc from '@/doc/textarea/FormsDoc.vue';
import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
import ImportDoc from '@/doc/textarea/ImportDoc.vue';
import SizesDoc from '@/doc/textarea/SizesDoc.vue';
import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
import PTComponent from '@/doc/textarea/pt/index.vue';
import SizesDoc from '@/doc/textarea/SizesDoc.vue';
import ThemingDoc from '@/doc/textarea/theming/index.vue';
export default {

11
packages/primevue/src/textarea/Textarea.vue
View File

@ -1,8 +1,9 @@
<template>
<textarea :class="cx('root')" :value="d_value" :name="name" :disabled="disabled" :aria-invalid="invalid || undefined" @input="onInput" v-bind="attrs"></textarea>
<textarea :class="cx('root')" :value="d_value" :name="name" :disabled="disabled" :aria-invalid="invalid || undefined" :data-p="dataP" @input="onInput" v-bind="attrs"></textarea>
</template>
<script>
import { cn } from '@primeuix/utils/classnames';
import { mergeProps } from 'vue';
import BaseTextarea from './BaseTextarea.vue';
@ -65,6 +66,14 @@ export default {
}),
this.formField
);
},
dataP() {
return cn({
invalid: this.$invalid,
fluid: this.$fluid,
filled: this.$variant === 'filled',
[this.size]: this.size
});
}
}
};