@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/components/speeddial.md

@@ -0,0 +1,402 @@
+# Speed Dial
+
+SpeedDial is a floating button with a popup menu.
+
+## Basic
+
+SpeedDial displays related actions from a single trigger button.
+
+```vue
+<template>
+    <Toast />
+    <div style="position: relative; height: 240px">
+        <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import ExternalLink from '@primeicons/vue/external-link';
+import Pencil from '@primeicons/vue/pencil';
+import Refresh from '@primeicons/vue/refresh';
+import Trash from '@primeicons/vue/trash';
+import Upload from '@primeicons/vue/upload';
+
+const toast = useToast();
+
+const items = ref([
+    {
+        icon: Pencil,
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+        }
+    },
+    {
+        icon: Refresh,
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        icon: Trash,
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        icon: Upload
+    },
+    {
+        icon: ExternalLink,
+        target: '_blank',
+        url: 'https://vuejs.org/'
+    }
+]);
+<\/script>
+```
+
+## Linear
+
+When type is set to linear (default), items are displayed in a line based on the direction property. The direction can be up , down , left , or right .
+
+```vue
+<template>
+    <div style="position: relative; height: 500px">
+        <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" />
+        <SpeedDial :model="items" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" />
+        <SpeedDial :model="items" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" />
+        <SpeedDial :model="items" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Pencil from '@primeicons/vue/pencil';
+import Refresh from '@primeicons/vue/refresh';
+import Trash from '@primeicons/vue/trash';
+import Upload from '@primeicons/vue/upload';
+import ExternalLink from '@primeicons/vue/external-link';
+
+const items = ref([{ icon: Pencil }, { icon: Refresh }, { icon: Trash }, { icon: Upload }, { icon: ExternalLink }]);
+<\/script>
+```
+
+## Circle
+
+Items can be displayed around the button when type is set to circle . Additional radius property defines the radius of the circle.
+
+```vue
+<template>
+    <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
+        <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true, iconOnly: true }" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Cog from '@primeicons/vue/cog';
+import ExternalLink from '@primeicons/vue/external-link';
+import Heart from '@primeicons/vue/heart';
+import Pencil from '@primeicons/vue/pencil';
+import Refresh from '@primeicons/vue/refresh';
+import Trash from '@primeicons/vue/trash';
+import Upload from '@primeicons/vue/upload';
+import User from '@primeicons/vue/user';
+
+const items = ref([{ icon: Pencil }, { icon: Refresh }, { icon: Trash }, { icon: Upload }, { icon: ExternalLink }, { icon: Cog }, { icon: User }, { icon: Heart }]);
+<\/script>
+```
+
+## Semi Circle
+
+When type is defined as semi-circle , items are displayed in a half-circle around the button.
+
+```vue
+<template>
+    <div style="position: relative; height: 500px">
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" :buttonProps="{ severity: 'success', rounded: true , iconOnly: true }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', top: 0 }" :buttonProps="{ severity: 'success', rounded: true , iconOnly: true }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', right: 0 }" :buttonProps="{ severity: 'success', rounded: true , iconOnly: true }" />
+        <SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" :style="{ position: 'absolute', top: 'calc(50% - 2rem)', left: 0 }" :buttonProps="{ severity: 'success', rounded: true , iconOnly: true }" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Pencil from '@primeicons/vue/pencil';
+import Refresh from '@primeicons/vue/refresh';
+import Trash from '@primeicons/vue/trash';
+import Upload from '@primeicons/vue/upload';
+import ExternalLink from '@primeicons/vue/external-link';
+
+const items = ref([{ icon: Pencil }, { icon: Refresh }, { icon: Trash }, { icon: Upload }, { icon: ExternalLink }]);
+<\/script>
+```
+
+## Quarter Circle
+
+Setting type as quarter-circle displays the items at one of four corners of the button based on the direction .
+
+```vue
+<template>
+    <div style="position: relative; height: 500px">
+        <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-left" :style="{ position: 'absolute', right: 0, bottom: 0 }" />
+        <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="up-right" :style="{ position: 'absolute', left: 0, bottom: 0 }" />
+        <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-left" :style="{ position: 'absolute', right: 0, top: 0 }" />
+        <SpeedDial :model="items" :radius="120" type="quarter-circle" direction="down-right" :style="{ position: 'absolute', left: 0, top: 0 }" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Pencil from '@primeicons/vue/pencil';
+import Refresh from '@primeicons/vue/refresh';
+import Trash from '@primeicons/vue/trash';
+import Upload from '@primeicons/vue/upload';
+import ExternalLink from '@primeicons/vue/external-link';
+
+const items = ref([{ icon: Pencil }, { icon: Refresh }, { icon: Trash }, { icon: Upload }, { icon: ExternalLink }]);
+<\/script>
+```
+
+## Transition Delay
+
+The transitionDelay property specifies the delay in milliseconds between each action item's appearance animation.
+
+```vue
+<template>
+    <Toast />
+    <div class="flex justify-between" style="position: relative; height: 240px">
+        <SpeedDial :model="items" direction="up" :transitionDelay="0" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'secondary', rounded: true, iconOnly: true  }" />
+        <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute', left: 'calc(50% - 2rem)', bottom: 0 }" :buttonProps="{ severity: 'success', rounded: true, iconOnly: true  }" />
+        <SpeedDial :model="items" direction="up" :transitionDelay="150" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'info', rounded: true, iconOnly: true  }" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import ExternalLink from '@primeicons/vue/external-link';
+import Pencil from '@primeicons/vue/pencil';
+import Refresh from '@primeicons/vue/refresh';
+import Trash from '@primeicons/vue/trash';
+import Upload from '@primeicons/vue/upload';
+
+const toast = useToast();
+
+const items = ref([
+    {
+        icon: Pencil,
+        command: () => {
+            toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added', life: 3000 });
+        }
+    },
+    {
+        icon: Refresh,
+        command: () => {
+            toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated', life: 3000 });
+        }
+    },
+    {
+        icon: Trash,
+        command: () => {
+            toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+        }
+    },
+    {
+        icon: Upload
+    },
+    {
+        icon: ExternalLink,
+        target: '_blank',
+        url: 'https://vuejs.org/'
+    }
+]);
+<\/script>
+```
+
+## Template
+
+SpeedDial supports full customization of the trigger button and action items using the button and item templates.
+
+```vue
+<template>
+    <div class="flex justify-center" style="position: relative; height: 450px">
+        <SpeedDial :model="items" direction="down" :transitionDelay="50" :style="{ position: 'absolute', top: 0 }" :buttonProps="{ severity: 'warn', rounded: true, iconOnly: true, styleClass: 'w-12! h-12!' }">
+            <template #item="{ item, icon, toggleCallback }">
+                <div class="flex gap-3 cursor-pointer rounded-lg" @click="toggleCallback($event, item)">
+                    <span class="flex items-center justify-center w-24 px-6 py-2 bg-surface-0 dark:bg-surface-900 border border-surface-200 dark:border-surface-700 rounded-lg text-surface-500 dark:text-surface-400 font-medium">
+                        {{ item.label }}
+                    </span>
+                    <span class="flex items-center justify-center w-12 h-12 rounded-full bg-surface-0 dark:bg-surface-900 border border-surface-200 dark:border-surface-700 text-surface-500 dark:text-surface-400">
+                        <component :is="icon" :size="20" />
+                    </span>
+                </div>
+            </template>
+        </SpeedDial>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Copy from '@primeicons/vue/copy';
+import Heart from '@primeicons/vue/heart';
+import Print from '@primeicons/vue/print';
+import Save from '@primeicons/vue/save';
+import ShareAlt from '@primeicons/vue/share-alt';
+
+const items = ref([
+    {
+        label: 'Like',
+        icon: Heart
+    },
+    {
+        label: 'Share',
+        icon: ShareAlt
+    },
+    {
+        label: 'Print',
+        icon: Print
+    },
+    {
+        label: 'Save',
+        icon: Save
+    },
+    {
+        label: 'Copy',
+        icon: Copy
+    }
+]);
+<\/script>
+```
+
+## Tooltip
+
+SpeedDial can be combined with Tooltip to display labels for action items.
+
+```vue
+<template>
+    <div :style="{ position: 'relative', height: '350px' }">
+        <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true, iconOnly: true  }" :tooltipOptions="{ position: 'left' }" />
+        <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true, iconOnly: true  }" :tooltipOptions="{ position: 'right' }" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import ExternalLink from '@primeicons/vue/external-link';
+import Pencil from '@primeicons/vue/pencil';
+import Refresh from '@primeicons/vue/refresh';
+import Trash from '@primeicons/vue/trash';
+import Upload from '@primeicons/vue/upload';
+
+const items = ref([
+    { label: 'Add', icon: Pencil },
+    { label: 'Update', icon: Refresh },
+    { label: 'Delete', icon: Trash },
+    { label: 'Upload', icon: Upload },
+    { label: 'External', icon: ExternalLink }
+]);
+<\/script>
+```
+
+## Mask
+
+Adding mask property displays a modal layer behind the popup items.
+
+```vue
+<template>
+    <div :style="{ position: 'relative', height: '360px' }">
+        <SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Pencil from '@primeicons/vue/pencil';
+import Refresh from '@primeicons/vue/refresh';
+import Trash from '@primeicons/vue/trash';
+import Upload from '@primeicons/vue/upload';
+import ExternalLink from '@primeicons/vue/external-link';
+
+const items = ref([{ icon: Pencil }, { icon: Refresh }, { icon: Trash }, { icon: Upload }, { icon: ExternalLink }]);
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the aria-labelledby or aria-label props. Addititonally the button includes includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the button. Menu Button Keyboard Support Key Function enter Toggles the visibility of the menu. space Toggles the visibility of the menu. down arrow Opens the menu and moves focus to the first item. up arrow Opens the menu and moves focus to the last item. Menu Keyboard Support Key Function enter Activates the menuitem, closes the menu and sets focus on the menu button. escape Closes the menu and sets focus on the menu button. arrow keys Navigates between the menu items. home Moves focus to the first item. end Moves focus to the last item.
+
+```vue
+<template>
+    <SpeedDial aria-label="Options" />
+</template>
+```
+
+## Speed Dial API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| model | MenuItem[] | - | MenuModel instance to define the action items. |
+| visible | boolean | false | Specifies the visibility of the overlay. |
+| direction | HintedString<"left" \| "right" \| "up" \| "down" \| "up-left" \| "up-right" \| "down-left" \| "down-right"> | up | Specifies the opening direction of actions. |
+| transitionDelay | number | 30 | Transition delay step for each action item. |
+| type | HintedString<"circle" \| "linear" \| "semi-circle" \| "quarter-circle"> | linear | Specifies the opening type of actions. |
+| radius | number | 0 | Radius for *circle types. |
+| mask | boolean | false | Whether to show a mask element behind the speeddial. |
+| disabled | boolean | false | Whether the component is disabled. |
+| hideOnClickOutside | boolean | true | Whether the actions close when clicked outside. |
+| buttonClass | any | - | Style class of the button element. |
+| maskStyle | any | - | Inline style of the mask element. |
+| maskClass | string | - | Style class of the mask element. |
+| showIcon | string | - | Show icon of the button element. |
+| hideIcon | string | - | Hide icon of the button element. |
+| rotateAnimation | boolean | true | Defined to rotate showIcon when hideIcon is not present. |
+| class | any | - | Style class of the element. |
+| style | any | - | Inline style of the element. |
+| tooltipOptions | SpeedDialTooltipOptions | - | 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'. |
+| buttonProps | object | - | Used to pass all properties of the ButtonProps to the button component. |
+| actionButtonProps | object | - | Used to pass all properties of the ButtonProps to the item component. |
+| ariaLabel | string | - | Defines a string value that labels an interactive list element. |
+| ariaLabelledby | string | - | Identifier of the underlying list element. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<SpeedDialPassThroughOptions> | - | Used to pass attributes to DOM elements inside the component. |
+| ptOptions | any | - | Used to configure passthrough(pt) options of the component. |
+| unstyled | boolean | false | When enabled, it removes component related styles in the core. |
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | SpeedDialPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| pcButton | any | Used to pass attributes to the Button component. |
+| list | SpeedDialPassThroughOptionType | Used to pass attributes to the list's DOM element. |
+| item | SpeedDialPassThroughOptionType | Used to pass attributes to the item's DOM element. |
+| pcAction | any | Used to pass attributes to the action's Button component. |
+| actionIcon | SpeedDialPassThroughOptionType | Used to pass attributes to the action icon's DOM element. |
+| mask | SpeedDialPassThroughOptionType | Used to pass attributes to the mask's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-speeddial | Class name of the root element |
+| p-speeddial-button | Class name of the button element |
+| p-speeddial-list | Class name of the list element |
+| p-speeddial-item | Class name of the item element |
+| p-speeddial-action | Class name of the action element |
+| p-speeddial-action-icon | Class name of the action icon element |
+| p-speeddial-mask | Class name of the mask element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| speeddial.gap | --p-speeddial-gap | Gap of root |
+| speeddial.transition.duration | --p-speeddial-transition-duration | Transition duration of root |