Typo fixes
parent
7bbc40a4b7
commit
fa42242e15
|
@ -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 #separator> / </template>
|
|
||||||
</template>
|
</template>
|
||||||
|
<template #separator> / </template>
|
||||||
</Breadcrumb>
|
</Breadcrumb>
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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/'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue