Typo fixes

pull/5672/head
tugcekucukoglu 2024-04-30 20:45:38 +03:00
parent 7bbc40a4b7
commit fa42242e15
7 changed files with 33 additions and 35 deletions

View File

@ -24,14 +24,12 @@ export default {
code: { code: {
basic: ` basic: `
<Breadcrumb :home="home" :model="items"> <Breadcrumb :home="home" :model="items">
<template #item="item">
<template #item="{ item }"> <template #item="{ item }">
<a class="cursor-pointer" :href="item.url"> <a class="cursor-pointer" :href="item.url">
<span :class="item.icon"></span> <span :class="item.icon"></span>
</a> </a>
</template> </template>
<template #separator> / </template> <template #separator> / </template>
</template>
</Breadcrumb> </Breadcrumb>
`, `,
options: ` options: `

View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using an event of the target like <i>contextmenu</i> to display the menu.</p> <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
</DocSectionText> </DocSectionText>
<div class="card flex md:justify-content-center"> <div class="card flex md:justify-content-center">
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem"> <ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">

View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>When content exceeeds viewport, Dialog automatically becomes scrollable.</p> <p>When content exceeds viewport, Dialog automatically becomes scrollable.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">

View File

@ -58,7 +58,7 @@ export default {
}, },
{ {
label: 'Vite.js', label: 'Vite.js',
url: 'https://vuejs.org/' url: 'https://vitejs.dev/'
} }
] ]
} }
@ -138,7 +138,7 @@ export default {
}, },
{ {
label: 'Vite.js', label: 'Vite.js',
url: 'https://vuejs.org/' url: 'https://vitejs.dev/'
} }
] ]
} }
@ -207,7 +207,7 @@ const items = ref([
}, },
{ {
label: 'Vite.js', label: 'Vite.js',
url: 'https://vuejs.org/' url: 'https://vitejs.dev/'
} }
] ]
} }

View File

@ -7,11 +7,11 @@
</DocSectionText> </DocSectionText>
<div class="card flex flex-wrap p-fluid gap-3"> <div class="card flex flex-wrap p-fluid gap-3">
<div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column"> <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
<label for="mask" class="font-bold block mb-2">Mask Mode</label> <label class="font-bold block mb-2">Mask Mode</label>
<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree> <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
</div> </div>
<div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column"> <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
<label for="mask" class="font-bold block mb-2">Icon Mode</label> <label class="font-bold block mb-2">Icon Mode</label>
<Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree> <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
</div> </div>
</div> </div>
@ -34,11 +34,11 @@ export default {
<template> <template>
<div class="card flex flex-wrap p-fluid gap-3"> <div class="card flex flex-wrap p-fluid gap-3">
<div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column"> <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
<label for="mask" class="font-bold block mb-2">Mask Mode</label> <label class="font-bold block mb-2">Mask Mode</label>
<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree> <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
</div> </div>
<div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column"> <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
<label for="mask" class="font-bold block mb-2">Icon Mode</label> <label class="font-bold block mb-2">Icon Mode</label>
<Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree> <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
</div> </div>
</div> </div>
@ -55,10 +55,10 @@ export default {
}, },
mounted() { mounted() {
this.loading = true; this.loading = true;
this.nodes2 = this.initateNodes2(); this.nodes2 = this.initiateNodes2();
setTimeout(() => { setTimeout(() => {
this.nodes = this.initateNodes(); this.nodes = this.initiateNodes();
this.loading = false; this.loading = false;
this.nodes2.map((node) => (node.loading = false)); this.nodes2.map((node) => (node.loading = false));
}, 2000); }, 2000);
@ -112,7 +112,7 @@ export default {
}, 500); }, 500);
} }
}, },
initateNodes() { initiateNodes() {
return [ return [
{ {
key: '0', key: '0',
@ -131,7 +131,7 @@ export default {
} }
]; ];
}, },
initateNodes2() { initiateNodes2() {
return [ return [
{ {
key: '0', key: '0',
@ -161,11 +161,11 @@ export default {
<template> <template>
<div class="card flex flex-wrap p-fluid gap-3"> <div class="card flex flex-wrap p-fluid gap-3">
<div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column"> <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
<label for="mask" class="font-bold block mb-2">Mask Mode</label> <label class="font-bold block mb-2">Mask Mode</label>
<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree> <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
</div> </div>
<div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column"> <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
<label for="mask" class="font-bold block mb-2">Icon Mode</label> <label class="font-bold block mb-2">Icon Mode</label>
<Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree> <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
</div> </div>
</div> </div>
@ -183,7 +183,7 @@ onMounted(() => {
nodes2.value = initiateNodes2(); nodes2.value = initiateNodes2();
setTimeout(() => { setTimeout(() => {
nodes.value = initateNodes(); nodes.value = initiateNodes();
loading.value = false; loading.value = false;
nodes2.value.map((node) => (node.loading = false)); nodes2.value.map((node) => (node.loading = false));
}, 2000); }, 2000);
@ -239,7 +239,7 @@ const onNodeExpand2 = (node) => {
} }
}; };
const initateNodes = () => { const initiateNodes = () => {
return [ return [
{ {
key: '0', key: '0',
@ -259,7 +259,7 @@ const initateNodes = () => {
]; ];
}; };
const initateNodes2 = () => { const initiateNodes2 = () => {
return [ return [
{ {
key: '0', key: '0',
@ -315,10 +315,10 @@ const initateNodes2 = () => {
}, },
mounted() { mounted() {
this.loading = true; this.loading = true;
this.nodes2 = this.initateNodes2(); this.nodes2 = this.initiateNodes2();
setTimeout(() => { setTimeout(() => {
this.nodes = this.initateNodes(); this.nodes = this.initiateNodes();
this.loading = false; this.loading = false;
this.nodes2.map((node) => (node.loading = false)); this.nodes2.map((node) => (node.loading = false));
}, 2000); }, 2000);
@ -373,7 +373,7 @@ const initateNodes2 = () => {
}, 500); }, 500);
} }
}, },
initateNodes() { initiateNodes() {
return [ return [
{ {
key: '0', key: '0',
@ -392,7 +392,7 @@ const initateNodes2 = () => {
} }
]; ];
}, },
initateNodes2() { initiateNodes2() {
return [ return [
{ {
key: '0', key: '0',

View File

@ -18,12 +18,12 @@ export default {
selectedValue: null, selectedValue: null,
code: { code: {
basic: ` basic: `
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" /> <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" /> <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
</div> </div>
</template> </template>
@ -46,7 +46,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" /> <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
</div> </div>
</template> </template>

View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>A model can be bound using the standard v-model directive.</p> <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> </DocSectionText>
<div class="card flex flex-column align-items-center"> <div class="card flex flex-column align-items-center">
<TriStateCheckbox v-model="value" variant="filled" /> <TriStateCheckbox v-model="value" variant="filled" />
@ -15,7 +15,7 @@ export default {
value: null, value: null,
code: { code: {
basic: ` basic: `
<TriStateCheckbox v-model="value" /> <TriStateCheckbox v-model="value" variant="filled" />
`, `,
options: ` options: `
<template> <template>