diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css index 6a569cbc..01ab83cf 100644 --- a/platforms/metagram/src/app.css +++ b/platforms/metagram/src/app.css @@ -27,6 +27,14 @@ .subtext { @apply font-geist text-xs/[1] font-normal; } + .hide-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; + } + + .hide-scrollbar::-webkit-scrollbar { + display: none; + } } @theme { 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 cb15ccd9..2bb573d8 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 f95076f2..02ea5ca1 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 9c3d5bff..0f9e4a92 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte @@ -2,9 +2,9 @@ import { onMount, type Snippet } from 'svelte'; import { CupertinoPane } from 'cupertino-pane'; import type { HTMLAttributes } from 'svelte/elements'; - import { clickOutside, cn } from '$lib/utils'; + import { 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+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem ipsum possimus maxime + modi laborum inventore autem cupiditate, voluptas ex quas, eaque accusantium ipsam natus + sapiente libero fuga temporibus eligendi. +
+{/snippet} diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.stories.ts b/platforms/metagram/src/lib/fragments/Modal/Modal.stories.ts new file mode 100644 index 00000000..1d253c83 --- /dev/null +++ b/platforms/metagram/src/lib/fragments/Modal/Modal.stories.ts @@ -0,0 +1,19 @@ +import type { ComponentProps } from 'svelte'; +import { Modal } from '..'; +import { ModalContent } from './Modal.stories.snippet.svelte'; + +export default { + title: 'UI/Modal', + component: Modal, + tags: ['autodocs'], + render: (args: { Component: Modal; props: ComponentProps