feat(Container): rework container component

packages/container/src/VContainer.stories.ts

@@ -1,55 +1,135 @@
-import {Meta, Story} from '@storybook/vue3';
-import VContainer from './VContainer.vue';
-
-export default {
-  title: 'Deprecated/Container',
-  component: VContainer,
-  argTypes: {},
-  args: {
-    mini: false,
-    fixed: false,
-  },
-} as Meta;
-
-const Template: Story = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: {
-    VContainer,
-  },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  setup() {
-    return {args};
-  },
-  // And then the `args` are bound to your component with `v-bind="args"`
-  template: `<VContainer v-bind="args">Content</VContainer>`,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-Default.parameters = {
-  docs: {
-    source: {
-      code: `<v-container> Content </v-container>`,
-    },
-  },
-};
-
-export const Mini = Template.bind({});
-Mini.args = {mini: true};
-Mini.parameters = {
-  docs: {
-    source: {
-      code: `<v-container mini> Content </v-container>`,
-    },
-  },
-};
-
-export const Fixed = Template.bind({});
-Fixed.args = {fixed: true};
-Fixed.parameters = {
-  docs: {
-    source: {
-      code: `<v-container fixed> Content </v-container>`,
-    },
-  },
-};
+import { VBtn, VAppShell, VAppBar, VLogo, VList, VListItem } from '@morpheme/ui';
+import {NavDrawer as VNavDrawer} from '@morpheme/nav-drawer'
+import {Meta, Story} from '@storybook/vue3';
+import VContainer from './VContainer.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Components/Container',
+  component: VContainer,
+  argTypes: {},
+  args: {
+    mini: false,
+    fixed: false,
+  },
+} as Meta;
+
+const Template: Story = (args) => ({
+  components: {
+    VContainer,
+  },
+  setup() {
+    return {args};
+  },
+  template: `<VContainer v-bind="args">Content</VContainer>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = {
+  docs: {
+    source: {
+      code: `<v-container> Content </v-container>`,
+    },
+  },
+};
+
+export const Mini = Template.bind({});
+Mini.args = {mini: true};
+Mini.parameters = {
+  docs: {
+    source: {
+      code: `<v-container mini> Content </v-container>`,
+    },
+  },
+};
+
+export const Fixed = Template.bind({});
+Fixed.args = {fixed: true};
+Fixed.parameters = {
+  docs: {
+    source: {
+      code: `<v-container fixed> Content </v-container>`,
+    },
+  },
+};
+
+export const Padded = Template.bind({});
+Padded.args = {padded: true};
+Padded.parameters = {
+  docs: {
+    source: {
+      code: `<v-container padded> Content </v-container>`,
+    },
+  },
+};
+
+export const Fluid = Template.bind({});
+Fluid.args = {fluid: true};
+Fluid.parameters = {
+  docs: {
+    source: {
+      code: `<v-container fluid> Content </v-container>`,
+    },
+  },
+};
+
+export const Centered = Template.bind({});
+Centered.args = {centered: true};
+Centered.parameters = {
+  docs: {
+    source: {
+      code: `<v-container centered> Content </v-container>`,
+    },
+  },
+};
+
+export const Example: Story = (args) => ({
+  components: {
+    VContainer,
+    VAppBar,
+    VNavDrawer,
+    VLogo,
+    VList,
+    VListItem,
+    VAppShell,
+    VBtn
+  },
+  setup() {
+    const isDrawerOpen = ref(true)
+    const isMini = ref(false)
+    return {args, isMini, isDrawerOpen};
+  },
+  template: `
+    <VAppBar shadow>
+      <VContainer centered>
+        <VBtn fab text icon prefix-icon="ri:menu-line"
+          @click="isDrawerOpen = !isDrawerOpen"
+        />
+        <VBtn fab text icon prefix-icon="ri:side-bar-line"
+          @click="isMini = !isMini"
+        />
+      </VContainer>
+    </VAppBar>
+
+    <div class="flex mt-4">
+      <VNavDrawer
+        v-model="isDrawerOpen"
+        :mini="isMini"
+      >
+        <VList
+          :mini="isMini"
+        >
+          <VListItem prepend-icon="ri:home-line">Home</VListItem>
+          <VListItem prepend-icon="ri:settings-3-line">Settings</VListItem>
+          <VListItem prepend-icon="ri:account-circle-line">Profile</VListItem>
+        </VList>
+      </VNavDrawer>
+    <VContainer
+      :mini="isMini"
+    >
+      Content
+    </VContainer>
+  </div>
+  `,
+});

packages/container/src/VContainer.vue

@@ -1,12 +1,24 @@
 <script setup lang="ts">
-import {PropType, onMounted} from 'vue';
+import { PropType } from "vue";
 
 type ToggleClass = {
   open: string;
   close: string;
 };
 
 defineProps({
+  padded: {
+    type: Boolean,
+    default: false,
+  },
+  centered: {
+    type: Boolean,
+    default: false,
+  },
+  fluid: {
+    type: Boolean,
+    default: false,
+  },
   mini: {
     type: Boolean,
     default: false,
@@ -15,36 +27,49 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * @deprecated
+   * Use `mini` instead.
+   */
   miniClass: {
     type: Object as PropType<ToggleClass>,
     default: () => ({
-      open: 'sm:ml-[85px]',
-      close: 'sm:ml-[250px]',
+      open: "",
+      close: "",
     }),
   },
+  /**
+   * @deprecated
+   * Use `fixed` instead.
+   */
   fixedClass: {
     type: Object as PropType<ToggleClass>,
     default: () => ({
-      open: 'pt-24',
-      close: 'pt-6',
+      open: "",
+      close: "",
     }),
   },
-});
-
-onMounted(() => {
-  console.warn('v-container is deprecated. Switch to v-main instead.');
+  tag: {
+    type: String,
+    default: "div",
+  },
 });
 </script>
 
 <template>
-  <div
-    class="container mx-auto py-10 px-4 lg:px-0"
+  <component
+    :is="tag"
+    class="v-container"
     :class="[
-      'transition-all duration-300',
-      mini ? miniClass.open : miniClass.close,
-      fixed ? fixedClass.open : fixedClass.close,
+      {
+        'v-container--padded': padded,
+        'v-container--centered': centered,
+        'v-container--fluid': fluid,
+        'v-container--fixed': fixed,
+        'v-container--mini': mini,
+      },
     ]"
   >
     <slot />
-  </div>
+  </component>
 </template>

packages/themes/src/morpheme/_container.scss

@@ -3,8 +3,12 @@
   --v-main-padding-y: var(--size-spacing-4);
 }
 
+.v-container,
 .v-main {
   width: 100%;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
 
   @media (min-width: 360px) {
     max-width: 360px;