SpeedDial template demo updated
tugcekucukoglu
parent
0cab80c37d
commit
a6af490275
|
|
@ -7513,7 +7513,7 @@
|
|||
"name": "previousButton",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "CalendarPassThroughOptionType",
|
||||
"type": "ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the previous button's DOM element."
|
||||
},
|
||||
|
|
@ -7553,9 +7553,9 @@
|
|||
"name": "nextButton",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "CalendarPassThroughOptionType",
|
||||
"type": "ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the previous button's DOM element."
|
||||
"description": "Used to pass attributes to the next button's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "container",
|
||||
|
|
@ -8273,14 +8273,6 @@
|
|||
"default": "date",
|
||||
"description": "Type of view to display."
|
||||
},
|
||||
{
|
||||
"name": "touchUI",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "When enabled, calendar overlay is displayed as optimized for touch devices."
|
||||
},
|
||||
{
|
||||
"name": "monthNavigator",
|
||||
"optional": true,
|
||||
|
|
@ -8596,6 +8588,22 @@
|
|||
"default": "",
|
||||
"description": "Used to pass all properties of the ButtonProps to the clear button component."
|
||||
},
|
||||
{
|
||||
"name": "navigatorButtonProps",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "object",
|
||||
"default": "",
|
||||
"description": "Used to pass all properties of the ButtonProps to the navigator button component."
|
||||
},
|
||||
{
|
||||
"name": "timepickerButtonProps",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "object",
|
||||
"default": "",
|
||||
"description": "Used to pass all properties of the ButtonProps to the timepicker button component."
|
||||
},
|
||||
{
|
||||
"name": "ariaLabelledby",
|
||||
"optional": true,
|
||||
|
|
@ -45636,22 +45644,6 @@
|
|||
"default": "",
|
||||
"description": "Used to pass attributes to the root's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "cancelItem",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "RatingPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the cancel item's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "cancelIcon",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "RatingPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the cancel icon's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "item",
|
||||
"optional": true,
|
||||
|
|
@ -45676,22 +45668,6 @@
|
|||
"default": "",
|
||||
"description": "Used to pass attributes to the off icon's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "hiddenCancelInputWrapper",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "RatingPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the hidden cancel inputW wapper's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "hiddenCancelInput",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "RatingPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the hidden cancel input's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "hiddenItemInputWrapper",
|
||||
"optional": true,
|
||||
|
|
@ -45845,15 +45821,6 @@
|
|||
"default": "5",
|
||||
"description": "Number of stars."
|
||||
},
|
||||
{
|
||||
"name": "cancel",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "When specified a cancel icon is displayed to allow clearing the value.",
|
||||
"deprecated": "since v4.0.0-beta.1"
|
||||
},
|
||||
{
|
||||
"name": "onIcon",
|
||||
"optional": true,
|
||||
|
|
@ -45872,15 +45839,6 @@
|
|||
"description": "Icon for the off state.",
|
||||
"deprecated": "since v3.27.0. Use 'officon' slot."
|
||||
},
|
||||
{
|
||||
"name": "cancelIcon",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Icon for the cancelable state.",
|
||||
"deprecated": "since v3.27.0. Use 'cancelicon' slot."
|
||||
},
|
||||
{
|
||||
"name": "dt",
|
||||
"optional": true,
|
||||
|
|
@ -45921,19 +45879,6 @@
|
|||
"relatedProp": "",
|
||||
"props": [],
|
||||
"methods": [
|
||||
{
|
||||
"name": "cancelicon",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "scope",
|
||||
"optional": false,
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the icon.</span>\n }",
|
||||
"description": "cancelicon slot's params."
|
||||
}
|
||||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom cancel icon template."
|
||||
},
|
||||
{
|
||||
"name": "onicon",
|
||||
"parameters": [
|
||||
|
|
@ -48831,9 +48776,9 @@
|
|||
"name": "action",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "SpeedDialPassThroughOptionType",
|
||||
"type": "ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the action's DOM element."
|
||||
"description": "Used to pass attributes to the action's Button component."
|
||||
},
|
||||
{
|
||||
"name": "actionIcon",
|
||||
|
|
@ -49124,6 +49069,22 @@
|
|||
"default": "",
|
||||
"description": "Whether to display the tooltip on items. The modifiers of Tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
|
||||
},
|
||||
{
|
||||
"name": "buttonProps",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "object",
|
||||
"default": "",
|
||||
"description": "Used to pass all properties of the ButtonProps to the button component."
|
||||
},
|
||||
{
|
||||
"name": "actionButtonProps",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "object",
|
||||
"default": "",
|
||||
"description": "Used to pass all properties of the ButtonProps to the item component."
|
||||
},
|
||||
{
|
||||
"name": "ariaLabel",
|
||||
"optional": true,
|
||||
|
|
@ -49186,7 +49147,7 @@
|
|||
{
|
||||
"name": "scope",
|
||||
"optional": false,
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">item</span>: <span class=\"doc-option-parameter-type\">MenuItem</span>, <span class=\"doc-option-parameter-type\">// Menuitem instance</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">onClick</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Item click function</span>\n}",
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">item</span>: <span class=\"doc-option-parameter-type\">MenuItem</span>, <span class=\"doc-option-parameter-type\">// Menuitem instance</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">onClick</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Item click function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Button click function</span>\n}",
|
||||
"description": "item slot's params."
|
||||
}
|
||||
],
|
||||
|
|
@ -49199,7 +49160,7 @@
|
|||
{
|
||||
"name": "scope",
|
||||
"optional": false,
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClick</span>: <span class=\"doc-option-parameter-type line-through\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type line-through\">// Button click function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Button click function</span>\n}",
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">visible</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Visible state of the item</span>\n \t <span class=\"ml-3 doc-option-parameter-name line-through\">onClick</span>: <span class=\"doc-option-parameter-type line-through\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type line-through\">// Button click function</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Button click function</span>\n}",
|
||||
"description": "button slot's params."
|
||||
}
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,175 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>SpeedDial sample with an outlined button, custom icons and <i>transitionDelay</i>.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
|
||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Add',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
this.$router.push('/fileupload');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
|
||||
<Toast />
|
||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Add',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
this.$router.push('/fileupload');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '350px' }">
|
||||
<Toast />
|
||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClass="p-button-outlined" :style="{ position: 'absolute' }" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const toast = useToast();
|
||||
const router = useRouter();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Add',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => {
|
||||
toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash',
|
||||
command: () => {
|
||||
toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
router.push('/fileupload');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/'
|
||||
}
|
||||
}
|
||||
])
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,252 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
SpeedDial offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter. The button has its own <i>button</i> template, additional slot named <i>icon</i> is provided to embed
|
||||
icon content for default button.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
|
||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
|
||||
<template #button="{ toggleCallback }">
|
||||
<Button outlined class="border-2" @click="toggleCallback">
|
||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
|
||||
fill="var(--p-primary-color)"
|
||||
/>
|
||||
<path
|
||||
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</template>
|
||||
<template #item="{ item, toggleCallback }">
|
||||
<div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
|
||||
<span :class="item.icon" />
|
||||
<span>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</SpeedDial>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Add',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
this.$router.push('/fileupload');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
}
|
||||
],
|
||||
code: {
|
||||
basic: `
|
||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
|
||||
<template #button="{ toggleCallback }">
|
||||
<Button outlined class="border-2" @click="toggleCallback">
|
||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="..." fill="var(--p-primary-color)" />
|
||||
<path d="..." fill="var(--text-color)" />
|
||||
</svg>
|
||||
</Button>
|
||||
</template>
|
||||
<template #item="{ item, toggleCallback }">
|
||||
<div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
|
||||
<span :class="item.icon" />
|
||||
<span>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</SpeedDial>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
|
||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
|
||||
<template #button="{ toggleCallback }">
|
||||
<Button outlined class="border-2" @click="toggleCallback">
|
||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="..." fill="var(--p-primary-color)" />
|
||||
<path d="..." fill="var(--text-color)" />
|
||||
</svg>
|
||||
</Button>
|
||||
</template>
|
||||
<template #item="{ item, toggleCallback }">
|
||||
<div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
|
||||
<span :class="item.icon" />
|
||||
<span>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</SpeedDial>
|
||||
</div>
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Add',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
this.$router.push('/fileupload');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/';
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex align-items-end justify-content-center" :style="{ position: 'relative', height: '400px' }">
|
||||
<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
|
||||
<template #button="{ toggleCallback }">
|
||||
<Button outlined class="border-2" @click="toggleCallback">
|
||||
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="..." fill="var(--p-primary-color)" />
|
||||
<path d="..." fill="var(--text-color)" />
|
||||
</svg>
|
||||
</Button>
|
||||
</template>
|
||||
<template #item="{ item, toggleCallback }">
|
||||
<div class="flex flex-column align-items-center justify-content-between gap-2 p-2 border-1 border-round surface-border w-5rem cursor-pointer" @click="toggleCallback">
|
||||
<span :class="item.icon" />
|
||||
<span>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</SpeedDial>
|
||||
</div>
|
||||
<Toast />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const toast = useToast();
|
||||
const router = useRouter();
|
||||
|
||||
const items = ref([
|
||||
{
|
||||
label: 'Add',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => {
|
||||
toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-trash',
|
||||
command: () => {
|
||||
toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Upload',
|
||||
icon: 'pi pi-upload',
|
||||
command: () => {
|
||||
router.push('/fileupload');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
command: () => {
|
||||
window.location.href = 'https://vuejs.org/'
|
||||
}
|
||||
}
|
||||
])
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -13,12 +13,12 @@
|
|||
<script>
|
||||
import AccessibilityDoc from '@/doc/speeddial/AccessibilityDoc.vue';
|
||||
import CircleDoc from '@/doc/speeddial/CircleDoc.vue';
|
||||
import CustomDoc from '@/doc/speeddial/CustomDoc.vue';
|
||||
import ImportDoc from '@/doc/speeddial/ImportDoc.vue';
|
||||
import LinearDoc from '@/doc/speeddial/LinearDoc.vue';
|
||||
import MaskDoc from '@/doc/speeddial/MaskDoc.vue';
|
||||
import QuarterCircleDoc from '@/doc/speeddial/QuarterCircleDoc.vue';
|
||||
import SemiCircleDoc from '@/doc/speeddial/SemiCircleDoc.vue';
|
||||
import TemplateDoc from '@/doc/speeddial/TemplateDoc.vue';
|
||||
import TooltipDoc from '@/doc/speeddial/TooltipDoc.vue';
|
||||
import PTComponent from '@/doc/speeddial/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/speeddial/theming/index.vue';
|
||||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
{ id: 'quarter-circle', label: 'Quarter Circle', component: QuarterCircleDoc },
|
||||
{ id: 'tooltip', label: 'Tooltip', component: TooltipDoc },
|
||||
{ id: 'mask', label: 'Mask', component: MaskDoc },
|
||||
{ id: 'custom', label: 'Custom', component: CustomDoc },
|
||||
{ id: 'template', label: 'Template', component: TemplateDoc },
|
||||
{ id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc }
|
||||
],
|
||||
ptComponent: PTComponent,
|
||||
|
|
|
|||
Loading…
Reference in New Issue