From 1495621c67ab5cc896e334d48abda9b4739e3213 Mon Sep 17 00:00:00 2001 From: gourav Date: Wed, 21 May 2025 10:55:43 +0530 Subject: [PATCH 1/5] feat: Context-Menu --- .../ContextMenu/ContextMenu.stories.ts | 21 ++++ .../fragments/ContextMenu/ContextMenu.svelte | 22 ++++ .../Drawer/Drawer.stories.snippet.svelte | 112 +++++++++++++----- .../lib/fragments/Drawer/Drawer.stories.ts | 4 +- .../src/lib/fragments/Drawer/Drawer.svelte | 18 +-- .../lib/fragments/Header/Header.stories.ts | 65 +++++----- .../lib/fragments/Message/Message.stories.ts | 49 ++++---- platforms/metagram/src/lib/fragments/index.ts | 15 +-- platforms/metagram/src/lib/ui/index.ts | 12 +- 9 files changed, 202 insertions(+), 116 deletions(-) create mode 100644 platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.stories.ts create mode 100644 platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.svelte diff --git a/platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.stories.ts b/platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.stories.ts new file mode 100644 index 000000000..6ad839ee7 --- /dev/null +++ b/platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.stories.ts @@ -0,0 +1,21 @@ +import type { ComponentProps } from 'svelte'; +import { ContextMenu } from '..'; + +export default { + title: 'UI/ContextMenu', + component: ContextMenu, + tags: ['autodocs'], + render: (args: { Component: ContextMenu; props: ComponentProps }) => ({ + Component: ContextMenu, + props: args + }) +}; + +export const Primary = { + args: { + options: [ + { name: 'Report', handler: () => alert('report') }, + { name: 'Clear chat', handler: () => alert('clear') } + ] + } +}; diff --git a/platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.svelte b/platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.svelte new file mode 100644 index 000000000..bbe770e99 --- /dev/null +++ b/platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.svelte @@ -0,0 +1,22 @@ + + + diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte index cb15ccd9f..2bb573d86 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte @@ -1,36 +1,84 @@ {#snippet DrawerContent()} -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea exercitationem iusto velit incidunt quibusdam. - Incidunt maiores sed, voluptas magnam magni reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque repellat, alias consequatur. - Inventore deleniti aliquam sapiente, vel ipsam tempore veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. - Repellendus unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem ipsum sequi non vel? - Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. - Facilis aliquid nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni consequatur. Praesentium, dolor ipsa? - Et, veritatis saepe animi harum eligendi fugit accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, reprehenderit! Mollitia, neque. - Optio nam eius voluptatem. Facilis hic cum non est quod modi sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam deleniti et adipisci maxime in velit. - Praesentium doloribus earum sunt quasi voluptas quo expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? - Animi recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat provident necessitatibus. - Consequatur iusto est sint doloribus quis porro quibusdam inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. Delectus. - Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis nulla ipsa tempora eos commodi beatae! - Atque vel vitae perspiciatis quam soluta eaque sed illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. Vel nihil expedita reprehenderit culpa facilis omnis! - Non eum minima eius sapiente quo nulla culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. - Magni ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam possimus eos officia voluptates. - Deleniti quas amet corporis enim possimus nostrum laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. - Quod unde id ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil natus rerum saepe. - Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, libero exercitationem dolore sequi odio assumenda. - Cum nostrum iusto ratione excepturi mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem! - Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis placeat amet rerum inventore nesciunt! - Qui voluptas dolor similique id ratione magnam quas dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident. - Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos nemo ex provident! - Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero cum. Impedit, esse. Voluptates tempora saepe repellendus! - Quaerat quod animi suscipit error. Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non blanditiis? - Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis perspiciatis! Debitis perferendis pariatur cum odio! - Est eveniet commodi dolorem numquam voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore praesentium consectetur libero at voluptatibus. - Consequatur repudiandae magnam sit blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, dignissimos mollitia! - Adipisci voluptatem molestiae doloribus alias quisquam neque commodi incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? - Alias harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. - Suscipit dolorum nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! Explicabo quaerat doloremque labore harum vitae!

-{/snippet} \ No newline at end of file +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam + expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea + exercitationem iusto velit incidunt quibusdam. Incidunt maiores sed, voluptas magnam magni + reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea + excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque + repellat, alias consequatur. Inventore deleniti aliquam sapiente, vel ipsam tempore + veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus + eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto. Repellendus + unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat + quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem + ipsum sequi non vel? Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, + expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus + similique autem odit officia numquam cum dolore pariatur eius! Cupiditate. Facilis aliquid + nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque + perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni + consequatur. Praesentium, dolor ipsa? Et, veritatis saepe animi harum eligendi fugit + accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium + necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, + reprehenderit! Mollitia, neque. Optio nam eius voluptatem. Facilis hic cum non est quod modi + sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam + deleniti et adipisci maxime in velit. Praesentium doloribus earum sunt quasi voluptas quo + expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse + molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque? Animi + recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora + alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat + provident necessitatibus. Consequatur iusto est sint doloribus quis porro quibusdam + inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus + recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. + Delectus. Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! + Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis + nulla ipsa tempora eos commodi beatae! Atque vel vitae perspiciatis quam soluta eaque sed + illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. + Vel nihil expedita reprehenderit culpa facilis omnis! Non eum minima eius sapiente quo nulla + culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur + nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in. Magni + ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, + dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam + possimus eos officia voluptates. Deleniti quas amet corporis enim possimus nostrum + laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui + minima neque, accusamus officia, labore delectus et itaque repellendus. Quia. Quod unde id + ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui + numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil + natus rerum saepe. Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit + adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, + libero exercitationem dolore sequi odio assumenda. Cum nostrum iusto ratione excepturi + mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt + temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem! + Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id + cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis + placeat amet rerum inventore nesciunt! Qui voluptas dolor similique id ratione magnam quas + dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi + fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident. + Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? + Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos + nemo ex provident! Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet + dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero + cum. Impedit, esse. Voluptates tempora saepe repellendus! Quaerat quod animi suscipit error. + Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque + repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non + blanditiis? Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum + eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis + perspiciatis! Debitis perferendis pariatur cum odio! Est eveniet commodi dolorem numquam + voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, + quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore + praesentium consectetur libero at voluptatibus. Consequatur repudiandae magnam sit + blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos + excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, + dignissimos mollitia! Adipisci voluptatem molestiae doloribus alias quisquam neque commodi + incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam + facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi? Alias + harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis + laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam + dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore. Suscipit dolorum + nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui + perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! + Explicabo quaerat doloremque labore harum vitae! +

+{/snippet} diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts b/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts index f95076f25..02ea5ca19 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts @@ -14,6 +14,6 @@ export default { export const Main = { args: { - children: DrawerContent - } + children: DrawerContent + } }; diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte index 9c3d5bff2..667182852 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte @@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'svelte/elements'; import { clickOutside, cn } from '$lib/utils'; import { swipe } from 'svelte-gestures'; - import type { SwipeCustomEvent } from 'svelte-gestures'; + import type { SwipeCustomEvent } from 'svelte-gestures'; interface IDrawerProps extends HTMLAttributes { isPaneOpen?: boolean; @@ -27,13 +27,13 @@ isPaneOpen = false; }; - const handleDrawerSwipe = (event: SwipeCustomEvent) => { - if (event.detail.direction === 'down' as string) { - handleSwipe?.(false); - drawer?.destroy({ animate: true }); - isPaneOpen = false; - } -}; + const handleDrawerSwipe = (event: SwipeCustomEvent) => { + if (event.detail.direction === ('down' as string)) { + handleSwipe?.(false); + drawer?.destroy({ animate: true }); + isPaneOpen = false; + } + }; onMount(() => { if (!drawerElement) return; @@ -70,5 +70,5 @@ use:clickOutside={handleClickOutside} class={cn(restProps.class)} > -{@render children?.()} + {@render children?.()} diff --git a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts index 9cc56dfd5..ba5f98cf6 100644 --- a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts +++ b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts @@ -1,52 +1,49 @@ -import type { ComponentProps } from "svelte"; -import Header from "./Header.svelte"; +import type { ComponentProps } from 'svelte'; +import Header from './Header.svelte'; export default { - title: "Fragments/Header", - component: Header, - tags: ["autodocs"], - render: (args: { - Component: Header; - props: ComponentProps; - }) => ({ - Component: Header, - props: args, - }), + title: 'Fragments/Header', + component: Header, + tags: ['autodocs'], + render: (args: { Component: Header; props: ComponentProps }) => ({ + Component: Header, + props: args + }) }; export const Primary = { - args: { - variant: "primary", - heading: "metagram", - callback: () => alert("clicked"), - }, + args: { + variant: 'primary', + heading: 'metagram', + callback: () => alert('clicked') + } }; export const PrimaryWithNoFlash = { - args: { - variant: "primary", - heading: "messages", - }, + args: { + variant: 'primary', + heading: 'messages' + } }; export const Secondary = { - args: { - variant: "secondary", - heading: "Account", - }, + args: { + variant: 'secondary', + heading: 'Account' + } }; export const SecondaryWithMenu = { - args: { - variant: "secondary", - heading: "Account", - callback: () => alert("menu clicked"), - }, + args: { + variant: 'secondary', + heading: 'Account', + callback: () => alert('menu clicked') + } }; export const Tertiary = { - args: { - variant: "tertiary", - callback: () => alert("clicked"), - }, + args: { + variant: 'tertiary', + callback: () => alert('clicked') + } }; diff --git a/platforms/metagram/src/lib/fragments/Message/Message.stories.ts b/platforms/metagram/src/lib/fragments/Message/Message.stories.ts index 624e54fb2..d2c8a0740 100644 --- a/platforms/metagram/src/lib/fragments/Message/Message.stories.ts +++ b/platforms/metagram/src/lib/fragments/Message/Message.stories.ts @@ -1,35 +1,32 @@ -import type { ComponentProps } from "svelte"; -import Message from "./Message.svelte"; +import type { ComponentProps } from 'svelte'; +import Message from './Message.svelte'; export default { - title: "UI/Message", - component: Message, - tags: ["autodocs"], - render: (args: { - Component: Message; - props: ComponentProps; - }) => ({ - Component: Message, - props: args, - }), + title: 'UI/Message', + component: Message, + tags: ['autodocs'], + render: (args: { Component: Message; props: ComponentProps }) => ({ + Component: Message, + props: args + }) }; export const Primary = { - args: { - avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250", - username: "donaldthefirstt", - text: "i was thinking of making it to the conference so we could take some more fire pictures like last time", - unread: false, - callback: () => alert("Message clicked"), - }, + args: { + avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250', + username: 'donaldthefirstt', + text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time', + unread: false, + callback: () => alert('Message clicked') + } }; export const Unread = { - args: { - avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250", - username: "donaldthefirstt", - text: "i was thinking of making it to the conference so we could take some more fire pictures like last time", - unread: true, - callback: () => alert("Message clicked"), - }, + args: { + avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250', + username: 'donaldthefirstt', + text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time', + unread: true, + callback: () => alert('Message clicked') + } }; diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts index 0a30834de..8b2afd376 100644 --- a/platforms/metagram/src/lib/fragments/index.ts +++ b/platforms/metagram/src/lib/fragments/index.ts @@ -1,7 +1,8 @@ -export { default as Header } from "./Header/Header.svelte"; -export { default as BottomNav } from "./BottomNav/BottomNav.svelte"; -export { default as SettingsNavigationButton } from "./SettingsNavigationButton/SettingsNavigationButton.svelte"; -export { default as MessageInput } from "./MessageInput/MessageInput.svelte"; -export { default as InputFile } from "./InputFile/InputFile.svelte"; -export { default as Drawer } from "./Drawer/Drawer.svelte"; -export { default as Message } from "./Message/Message.svelte"; +export { default as Header } from './Header/Header.svelte'; +export { default as BottomNav } from './BottomNav/BottomNav.svelte'; +export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte'; +export { default as MessageInput } from './MessageInput/MessageInput.svelte'; +export { default as InputFile } from './InputFile/InputFile.svelte'; +export { default as Drawer } from './Drawer/Drawer.svelte'; +export { default as Message } from './Message/Message.svelte'; +export { default as ContextMenu } from './ContextMenu/ContextMenu.svelte'; diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts index 3cf81df8c..73b2cfbc7 100644 --- a/platforms/metagram/src/lib/ui/index.ts +++ b/platforms/metagram/src/lib/ui/index.ts @@ -1,6 +1,6 @@ -export { default as Button } from "./Button/Button.svelte"; -export { default as Avatar } from "./Avatar/Avatar.svelte"; -export { default as Input } from "./Input/Input.svelte"; -export { default as Select } from "./Select/Select.svelte"; -export { default as Label } from "./Label/Label.svelte"; -export { default as Toggle } from "./Toggle/Toggle.svelte"; +export { default as Button } from './Button/Button.svelte'; +export { default as Avatar } from './Avatar/Avatar.svelte'; +export { default as Input } from './Input/Input.svelte'; +export { default as Select } from './Select/Select.svelte'; +export { default as Label } from './Label/Label.svelte'; +export { default as Toggle } from './Toggle/Toggle.svelte'; From 03a86ecb3cdc6f16459992815ea3b69fdf0795d9 Mon Sep 17 00:00:00 2001 From: gourav Date: Wed, 21 May 2025 15:12:39 +0530 Subject: [PATCH 2/5] fix: name of component --- .../ActionMenu.stories.ts} | 10 +++++----- .../ActionMenu.svelte} | 0 platforms/metagram/src/lib/fragments/index.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) rename platforms/metagram/src/lib/fragments/{ContextMenu/ContextMenu.stories.ts => ActionMenu/ActionMenu.stories.ts} (57%) rename platforms/metagram/src/lib/fragments/{ContextMenu/ContextMenu.svelte => ActionMenu/ActionMenu.svelte} (100%) diff --git a/platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.stories.ts b/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.stories.ts similarity index 57% rename from platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.stories.ts rename to platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.stories.ts index 6ad839ee7..ce02b7588 100644 --- a/platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.stories.ts +++ b/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.stories.ts @@ -1,12 +1,12 @@ import type { ComponentProps } from 'svelte'; -import { ContextMenu } from '..'; +import { ActionMenu } from '..'; export default { - title: 'UI/ContextMenu', - component: ContextMenu, + title: 'UI/ActionMenu', + component: ActionMenu, tags: ['autodocs'], - render: (args: { Component: ContextMenu; props: ComponentProps }) => ({ - Component: ContextMenu, + render: (args: { Component: ActionMenu; props: ComponentProps }) => ({ + Component: ActionMenu, props: args }) }; diff --git a/platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.svelte b/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte similarity index 100% rename from platforms/metagram/src/lib/fragments/ContextMenu/ContextMenu.svelte rename to platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts index 8b2afd376..0106ec099 100644 --- a/platforms/metagram/src/lib/fragments/index.ts +++ b/platforms/metagram/src/lib/fragments/index.ts @@ -5,4 +5,4 @@ export { default as MessageInput } from './MessageInput/MessageInput.svelte'; export { default as InputFile } from './InputFile/InputFile.svelte'; export { default as Drawer } from './Drawer/Drawer.svelte'; export { default as Message } from './Message/Message.svelte'; -export { default as ContextMenu } from './ContextMenu/ContextMenu.svelte'; +export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte'; From 116cf5308575f7f2364f821aa0ecb58c3196d63b Mon Sep 17 00:00:00 2001 From: gourav Date: Wed, 21 May 2025 16:34:47 +0530 Subject: [PATCH 3/5] fix: as per suggestion --- .../fragments/ActionMenu/ActionMenu.svelte | 55 +++++++++++++++++-- 1 file changed, 50 insertions(+), 5 deletions(-) diff --git a/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte b/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte index bbe770e99..9703f35ef 100644 --- a/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte +++ b/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte @@ -1,5 +1,8 @@ -
    - {#each options as option} +
    + + {#if showActionMenu} +
      closeMenu()} bind:this={menuEl} {...restProps} class={cBase}> + {#each options as option} -
    • +
    • { option.handler(); closeMenu(); }}>

      {option.name}

      • {/each} -
    +
+ {/if} + From 607ea4e69219bc3fe742553aad88b3ece2d381f1 Mon Sep 17 00:00:00 2001 From: gourav Date: Thu, 22 May 2025 10:11:35 +0530 Subject: [PATCH 4/5] fix: action menu position --- .../fragments/ActionMenu/ActionMenu.svelte | 84 +++++++++++-------- .../src/lib/fragments/Drawer/Drawer.svelte | 4 +- 2 files changed, 53 insertions(+), 35 deletions(-) diff --git a/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte b/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte index 9703f35ef..534f0174f 100644 --- a/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte +++ b/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte @@ -5,39 +5,40 @@ import { tick } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; - interface IContexMenuProps extends HTMLAttributes { + interface IContextMenuProps extends HTMLAttributes { options: Array<{ name: string; handler: () => void }>; } - let { options = [], ...restProps }: IContexMenuProps = $props(); + let { options = [], ...restProps }: IContextMenuProps = $props(); let showActionMenu = $state(false); let menuEl: HTMLUListElement | null = $state(null); - let mouseX = 0; - let mouseY = 0; + let buttonEl: HTMLElement | null = null; - function openMenu(event: MouseEvent) { - mouseX = event.clientX; - mouseY = event.clientY; + function openMenu() { showActionMenu = true; tick().then(() => { - if (menuEl) { + if (menuEl && buttonEl) { const { innerWidth, innerHeight } = window; - const rect = menuEl.getBoundingClientRect(); + const menuRect = menuEl.getBoundingClientRect(); + const buttonRect = buttonEl.getBoundingClientRect(); - // Adjust horizontal position - if (mouseX + rect.width > innerWidth) { - menuEl.style.left = `${mouseX - rect.width}px`; - } else { - menuEl.style.left = `${mouseX}px`; + // Position vertically aligned to button top (viewport) + let top = buttonRect.top; + let left = buttonRect.right; + + // If it overflows right, position to the left of the button + if (innerWidth - buttonRect.right < menuRect.width) { + left = buttonRect.left - menuRect.width; } - // Adjust vertical position - if (mouseY + rect.height > innerHeight) { - menuEl.style.top = `${mouseY - rect.height}px`; - } else { - menuEl.style.top = `${mouseY}px`; + // If it overflows bottom, adjust upward + if (innerHeight - buttonRect.top < menuRect.height) { + top = innerHeight - menuRect.height - 10; } + + menuEl.style.left = `${left}px`; + menuEl.style.top = `${top}px`; } }); } @@ -46,22 +47,39 @@ showActionMenu = false; } - const cBase = 'w-[max-content] py-2 px-5 rounded-2xl bg-white'; + const cBase = 'w-[max-content] py-2 px-5 rounded-2xl bg-white shadow-lg'; -
- - {#if showActionMenu} -
    closeMenu()} bind:this={menuEl} {...restProps} class={cBase}> +
+ +{#if showActionMenu} +
    closeMenu()} + bind:this={menuEl} + class={cn([cBase, 'fixed z-50'].join(' '))} + style="position: fixed;" + > {#each options as option} - - -
  • { option.handler(); closeMenu(); }}> -

    {option.name}

    -
    • - {/each} + + +
  • { + option.handler(); + closeMenu(); + }} + > +

    {option.name}

    +
    • + {/each}
- {/if} - +{/if} diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte index 0f9e4a929..e58cce3f9 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte @@ -48,8 +48,8 @@ cssClass: '', initialBreak: 'middle', events: { - onBackdropTap: () => dismiss() - } + onBackdropTap: () => dismiss() + } }); if (isPaneOpen) { drawer.present({ animate: true }); From c137adb1121442771aa4e049dca93d864f0c3fe3 Mon Sep 17 00:00:00 2001 From: gourav Date: Thu, 22 May 2025 10:15:05 +0530 Subject: [PATCH 5/5] fix: class --- .../metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte b/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte index 534f0174f..d6f9401f2 100644 --- a/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte +++ b/platforms/metagram/src/lib/fragments/ActionMenu/ActionMenu.svelte @@ -47,7 +47,7 @@ showActionMenu = false; } - const cBase = 'w-[max-content] py-2 px-5 rounded-2xl bg-white shadow-lg'; + const cBase = 'fixed z-50 w-[max-content] py-2 px-5 rounded-2xl bg-white shadow-lg';
@@ -63,10 +63,10 @@ {#if showActionMenu}
    closeMenu()} bind:this={menuEl} - class={cn([cBase, 'fixed z-50'].join(' '))} - style="position: fixed;" + class={cn([cBase, restProps.class].join(' '))} > {#each options as option}