fix(VBottomSheet): import dependency styles (#156)

gitsindonesia · Mar 16, 2023 · 649f4a3 · 649f4a3
1 parent b24c6e0
commit 649f4a3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/packages/bottom-sheets/src/BottomSheet.dark.scss b/packages/bottom-sheets/src/BottomSheet.dark.scss
@@ -1,3 +1,5 @@
+@import '@morpheme/list/src/List.dark.scss';
+
 .dark {
   .v-bottom-sheet {
     --v-bottom-sheet-bg-color: theme('colors.neutral.900');

diff --git a/packages/bottom-sheets/src/BottomSheet.scss b/packages/bottom-sheets/src/BottomSheet.scss
@@ -1,4 +1,6 @@
-:root {
+@import '@morpheme/list/src/List.scss';
+
+:root  {
   --v-bottom-sheet-bg-color: #fff;
   --v-bottom-sheet-body-color: theme('colors.gray.800');
 
@@ -37,8 +39,8 @@
     background-color: var(--v-bottom-sheet-bg-color, #fff);
     color: var(--v-bottom-sheet-body-color);
     overflow: hidden;
-    border-top-right-radius: 0.75rem/* 12px */;
-    border-top-left-radius: 0.75rem/* 12px */;
+    border-top-right-radius: 0.75rem /* 12px */;
+    border-top-left-radius: 0.75rem /* 12px */;
     width: 100%;
     box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.05);
   }

diff --git a/packages/bottom-sheets/src/BottomSheet.stories.ts b/packages/bottom-sheets/src/BottomSheet.stories.ts
@@ -297,13 +297,15 @@ export const DarkMode: Story = (args, {argTypes}) => ({
     BottomSheetBody,
     BottomSheetHeader,
     Button,
+    BottomSheetMenus,
   },
   setup() {
     const isOpen = ref(false);
     onMounted(() => {
       document.documentElement.classList.add('dark');
     });
-    return {args, argTypes, isOpen};
+    const selected = ref();
+    return {args, argTypes, isOpen, menus, selected};
   },
   template: `
   <div class="dark:bg-neutral-900 dark:text-neutral-200 p-6">
@@ -314,6 +316,12 @@ export const DarkMode: Story = (args, {argTypes}) => ({
       <BottomSheetBody>
         A quick brown fox leaps over the lazy dog.
       </BottomSheetBody>
+      <BottomSheetMenus
+        v-model="selected"
+        :items="menus"
+        selectable
+        hover
+      />
     </BottomSheet>
   </div>
   `,