Migrate to Turborepo (#1251)

2024-07-04 21:46:29 -07:00
parent 6fa1acc461
commit 0f2ddb452c
811 changed files with 5623 additions and 7832 deletions
--- a/packages/ui/src/components/base/Page.vue
+++ b/packages/ui/src/components/base/Page.vue
@@ -0,0 +1,121 @@
+<script setup>
+defineProps({
+  collapsible: {
+    type: Boolean,
+    default: false,
+  },
+  rightSidebar: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <div
+    class="omorphia__page"
+    :class="{
+      'right-sidebar': rightSidebar,
+      'has-sidebar': !!$slots.sidebar,
+      'has-header': !!$slots.header,
+      'has-footer': !!$slots.footer,
+    }"
+  >
+    <div v-if="!!$slots.header" class="header">
+      <slot name="header" />
+    </div>
+    <div v-if="!!$slots.sidebar" class="sidebar">
+      <slot name="sidebar" />
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+    <div v-if="!!$slots.footer" class="footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.omorphia__page {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.75rem;
+
+  .header {
+    grid-area: header;
+  }
+
+  .sidebar {
+    grid-area: sidebar;
+  }
+
+  .footer {
+    grid-area: footer;
+  }
+
+  .content {
+    grid-area: content;
+  }
+}
+
+@media (min-width: 1024px) {
+  .omorphia__page {
+    margin: 0 auto;
+    max-width: 80rem;
+    column-gap: 0.75rem;
+
+    &.has-sidebar {
+      display: grid;
+      grid-template:
+        'sidebar content' auto
+        'footer content' auto
+        'dummy content' 1fr
+        / 20rem 1fr;
+
+      &.has-header {
+        grid-template:
+          'header header' auto
+          'sidebar content' auto
+          'footer content' auto
+          'dummy content' 1fr
+          / 20rem 1fr;
+      }
+
+      &.right-sidebar {
+        grid-template:
+          'content sidebar' auto
+          'content footer' auto
+          'content dummy' 1fr
+          / 1fr 20rem;
+
+        &.has-header {
+          grid-template:
+            'header header' auto
+            'content sidebar' auto
+            'content footer' auto
+            'content dummy' 1fr
+            / 1fr 20rem;
+        }
+      }
+
+      .content {
+        max-width: calc(60rem - 0.75rem);
+      }
+    }
+  }
+
+  .sidebar {
+    min-width: 20rem;
+    width: 20rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .omorphia__page.has-sidebar {
+    .content {
+      width: calc(60rem - 0.75rem);
+    }
+  }
+}
+</style>