Unstyled demo fixes

pull/4239/head
Tuğçe Küçükoğlu 2023-08-02 17:03:56 +03:00
parent 5d8c790836
commit ef45334c22
24 changed files with 97 additions and 79 deletions

View File

@ -19,7 +19,7 @@ export default {
</div>
<BlockUI :blocked="blocked">
<Panel header="Basic">
<p class="m-0">
<p class="text-gray-700 dark:text-white/80 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

View File

@ -12,7 +12,7 @@ export default {
code: {
composition: `
<template>
<div class="card flex align-items-center justify-content-center">
<div class="card flex items-center justify-center">
<Card style="width: 25em">
<template #header>
<img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />

View File

@ -12,7 +12,7 @@ export default {
code: {
composition: `
<template>
<div class="card">
<div class="card text-gray-700 dark:text-white/80">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View File

@ -16,7 +16,7 @@ export default {
<div class="flex flex-wrap gap-3 mb-5">
<div v-for="pos of positions" :key="pos.label" class="flex items-center">
<RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
<label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
<label :for="pos.label" class="text-gray-700 dark:text-white/80 ml-2"> {{ pos.label }} </label>
</div>
</div>
<div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
@ -71,6 +71,18 @@ const positions = ref([
]);
<\/script>
<style scoped>
.dock-demo > .dock-window {
width: 100%;
height: 450px;
position: relative;
background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
</style>
`
}
};

View File

@ -14,9 +14,11 @@ export default {
<template>
<div class="card">
<Inplace>
<template #display> View Content </template>
<template #display>
<span class="text-gray-700 dark:text-white/80"> View Content </span>
</template>
<template #content>
<p class="m-0">
<p class="text-gray-700 dark:text-white/80 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

View File

@ -14,19 +14,19 @@ export default {
<template>
<div class="card flex flex-wrap">
<div class="flex-auto">
<label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
<label for="integeronly" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Integer Only </label>
<InputNumber v-model="value1" inputId="integeronly" />
</div>
<div class="flex-auto">
<label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
<label for="withoutgrouping" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Without Grouping </label>
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
</div>
<div class="flex-auto">
<label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
<label for="minmaxfraction" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Fraction Digits </label>
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
</div>
<div class="flex-auto">
<label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
<label for="minmax" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Boundaries </label>
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
</div>
</div>

View File

@ -16,19 +16,19 @@ export default {
<div class="flex flex-wrap gap-3">
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1" class="ml-2">Cheese</label>
<label for="ingredient1" class="text-gray-700 dark:text-white/80 ml-2">Cheese</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2" class="ml-2">Mushroom</label>
<label for="ingredient2" class="text-gray-700 dark:text-white/80 ml-2">Mushroom</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3" class="ml-2">Pepper</label>
<label for="ingredient3" class="text-gray-700 dark:text-white/80 ml-2">Pepper</label>
</div>
<div class="flex align-items-center">
<RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2">Onion</label>
<label for="ingredient4" class="text-gray-700 dark:text-white/80 ml-2">Onion</label>
</div>
</div>
</div>

View File

@ -14,15 +14,15 @@ export default {
<template>
<div class="card">
<ScrollPanel style="width: 100%; height: 200px">
<p>
<p class="text-gray-700 dark:text-white/80">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
<p class="text-gray-700 dark:text-white/80">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
<p class="m-0">
<p class="text-gray-700 dark:text-white/80 m-0">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>

View File

@ -32,7 +32,7 @@ export default {
export default {
data() {
return {
value: 'off',
value: 'Off',
options: ['Off', 'On']
}
}
@ -48,7 +48,7 @@ export default {
<script setup>
import { ref } from 'vue';
const value = ref('off');
const value = ref('Off');
const options = ref(['Off', 'On']);
<\/script>`
}

View File

@ -20,7 +20,7 @@ export default {
<script setup>
import { ref } from 'vue';
const value = ref('off');
const value = ref('Off');
const options = ref(['Off', 'On']);
<\/script>`
}

View File

@ -13,7 +13,7 @@ export default {
composition: `
<template>
<div class="card">
<div class="flex gap-2 justify-content-center">
<div class="flex gap-2 justify-center">
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" />

View File

@ -12,8 +12,7 @@ export default {
code: {
composition: `
<template>
<div class="card">
<div class="">
<div class="card text-gray-700 dark:text-white/80">
<div class="w-full">
<h5>Rectangle</h5>
<Skeleton class="mb-2"></Skeleton>
@ -49,7 +48,6 @@ export default {
</div>
</div>
</div>
</div>
</template>
<script setup>

View File

@ -112,7 +112,7 @@ const items = ref([
tabName: 'HomeDemo',
content: `
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h5>Home Component Content</h5>
</div>
</template>
@ -128,7 +128,7 @@ export default {
tabName: 'CalendarDemo',
content: `
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h5>Calendar Component Content</h5>
</div>
</template>
@ -144,7 +144,7 @@ export default {
tabName: 'EditDemo',
content: `
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h5>Edit Component Content</h5>
</div>
</template>
@ -160,7 +160,7 @@ export default {
tabName: 'DocumentationDemo',
content: `
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h5>Documentation Component Content</h5>
</div>
</template>
@ -176,7 +176,7 @@ export default {
tabName: 'SettingsDemo',
content: `
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h5>Settings Component Content</h5>
</div>
</template>

View File

@ -55,7 +55,7 @@ const items = ref([
tabName: 'HomeDemo',
content: `
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h5>Home Component Content</h5>
</div>
</template>
@ -71,7 +71,7 @@ export default {
tabName: 'CalendarDemo',
content: `
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h5>Calendar Component Content</h5>
</div>
</template>
@ -87,7 +87,7 @@ export default {
tabName: 'EditDemo',
content: `
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h5>Edit Component Content</h5>
</div>
</template>
@ -103,7 +103,7 @@ export default {
tabName: 'DocumentationDemo',
content: `
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h5>Documentation Component Content</h5>
</div>
</template>
@ -119,7 +119,7 @@ export default {
tabName: 'SettingsDemo',
content: `
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h5>Settings Component Content</h5>
</div>
</template>

View File

@ -12,7 +12,7 @@ export default {
code: {
composition: `
<template>
<div class="flex flex-wrap justify-content-center gap-2">
<div class="card flex flex-wrap justify-center gap-2">
<Tag value="Primary"></Tag>
<Tag severity="success" value="Success"></Tag>
<Tag severity="info" value="Info"></Tag>

View File

@ -12,8 +12,8 @@ export default {
code: {
composition: `
<template>
<div>
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
<div class="card">
<p class="text-gray-700 dark:text-white/80">Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
</div>
</template>

View File

@ -15,19 +15,25 @@ export default {
<div class="card flex flex-wrap gap-6">
<Timeline :value="events" class="w-full md:w-80">
<template #content="slotProps">
<span class="text-gray-700 dark:text-white/80">
{{ slotProps.item.status }}
</span>
</template>
</Timeline>
<Timeline :value="events" align="right" class="w-full md:w-80">
<template #content="slotProps">
<span class="text-gray-700 dark:text-white/80">
{{ slotProps.item.status }}
</span>
</template>
</Timeline>
<Timeline :value="events" align="alternate" class="w-full md:w-80">
<template #content="slotProps">
<span class="text-gray-700 dark:text-white/80">
{{ slotProps.item.status }}
</span>
</template>
</Timeline>
</div>

View File

@ -17,7 +17,7 @@ export default {
<template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" severity="success" class="mr-2" />
<i class="pi pi-bars p-toolbar-separator mr-2" />
<i class="pi pi-bars text-gray-700 dark:text-white/80 mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
</template>

View File

@ -12,9 +12,9 @@ export default {
code: {
composition: `
<template>
<div class="card flex flex-column align-center">
<div class="card flex flex-col items-center">
<TriStateCheckbox v-model="value" />
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
<label for="checkbox" class="text-gray-700 dark:text-white/80 mt-1">{{ value == null ? 'null' : value }}</label>
</div>
</template>

View File

@ -1,5 +1,5 @@
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h3>Calendar Component Content</h3>
</div>
</template>

View File

@ -1,5 +1,5 @@
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h3>Documentation Component Content</h3>
</div>
</template>

View File

@ -1,5 +1,5 @@
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h3>Edit Component Content</h3>
</div>
</template>

View File

@ -1,5 +1,5 @@
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h3>Settings Component Content</h3>
</div>
</template>

View File

@ -1,5 +1,5 @@
<template>
<div class="tabmenudemo-content">
<div class="p-4">
<h3>Home Component Content</h3>
</div>
</template>