chore: adds XLayout component

Signed-off-by: John Cowen <john.cowen@konghq.com>
kumahq · Oct 23, 2024 · 8204724 · 8204724
1 parent 61b1552
commit 8204724
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 66 deletions.
diff --git a/src/app/application/components/app-collection/AppCollection.vue b/src/app/application/components/app-collection/AppCollection.vue
@@ -154,7 +154,7 @@ const click = (e: MouseEvent) => {
   justify-content: flex-end;
   align-items: stretch;
   flex-wrap: wrap;
-  gap: $kui-space-60;
+  gap: $kui-space-70;
   font-size: $kui-font-size-40;
   width: 100%;
 }

diff --git a/src/app/application/components/app-view/AppView.vue b/src/app/application/components/app-view/AppView.vue
@@ -58,11 +58,13 @@
           <slot name="notifications" />
         </KAlert>
       </aside>
-      <div class="stack">
+      <XLayout
+        type="stack"
+      >
         <slot
           name="default"
         />
-      </div>
+      </XLayout>
     </section>
   </div>
   <XTeleportTemplate

diff --git a/src/app/application/components/data-collection/DataCollection.vue b/src/app/application/components/data-collection/DataCollection.vue
@@ -1,18 +1,36 @@
 <template>
-  <template
-    v-if="slots.item"
+  <XLayout
+    type="stack"
   >
     <template
-      v-for="item in [props.items.find(props.predicate)]"
-      :key="item"
+      v-if="slots.item"
+    >
+      <template
+        v-for="item in [props.items.find(props.predicate)]"
+        :key="item"
+      >
+        <slot
+          v-if="item"
+          name="item"
+          :item="item as T"
+        />
+        <slot
+          v-else
+          name="empty"
+          :items="items"
+        >
+          <XEmptyState
+            v-if="props.empty"
+            :type="props.type"
+          />
+        </slot>
+      </template>
+    </template>
+    <template
+      v-else
     >
       <slot
-        v-if="item"
-        name="item"
-        :item="item as T"
-      />
-      <slot
-        v-else
+        v-if="items.length === 0"
         name="empty"
         :items="items"
       >
@@ -21,56 +39,42 @@
           :type="props.type"
         />
       </slot>
-    </template>
-  </template>
-  <template
-    v-else
-  >
-    <slot
-      v-if="items.length === 0"
-      name="empty"
-      :items="items"
-    >
-      <XEmptyState
-        v-if="props.empty"
-        :type="props.type"
-      />
-    </slot>
-    <slot
-      v-else
-      name="default"
-      :items="paginated"
-    />
-    <slot
-      v-if="typeof props.items?.[0] !== 'undefined' && !(props.page === 0 && props.pageSize === 0 && props.total === 0)"
-      name="pagination"
-      :items="paginated"
-    >
-      <KPagination
-        :class="{
-          pagination: true,
-          'with-paging': props.page !== 0 && props.total > 0 && props.total !== props.items.length,
-          'with-sizing': props.pageSize !== 0,
-        }"
-        :total-count="props.total"
-        :current-page="props.page"
-        :initial-page-size="props.pageSize || props.total"
-        :page-sizes="[15, 30, 50, 75, 100]"
-        @page-change="({ page }: PaginationChangeEvent) => {
-          change({
-            page,
-            size: props.pageSize,
-          })
-        }"
-        @page-size-change="({ pageSize }: SizeChangeEvent) => {
-          change({
-            page: props.page,
-            size: pageSize,
-          })
-        }"
+      <slot
+        v-else
+        name="default"
+        :items="paginated"
       />
-    </slot>
-  </template>
+      <slot
+        v-if="typeof props.items?.[0] !== 'undefined' && !(props.page === 0 && props.pageSize === 0 && props.total === 0)"
+        name="pagination"
+        :items="paginated"
+      >
+        <KPagination
+          :class="{
+            pagination: true,
+            'with-paging': props.page !== 0 && props.total > 0 && props.total !== props.items.length,
+            'with-sizing': props.pageSize !== 0,
+          }"
+          :total-count="props.total"
+          :current-page="props.page"
+          :initial-page-size="props.pageSize || props.total"
+          :page-sizes="[15, 30, 50, 75, 100]"
+          @page-change="({ page }: PaginationChangeEvent) => {
+            change({
+              page,
+              size: props.pageSize,
+            })
+          }"
+          @page-size-change="({ pageSize }: SizeChangeEvent) => {
+            change({
+              page: props.page,
+              size: pageSize,
+            })
+          }"
+        />
+      </slot>
+    </template>
+  </XLayout>
 </template>
 <script lang="ts" generic="T" setup>
 import { useThrottleFn } from '@vueuse/core'
@@ -140,9 +144,6 @@ const paginated = computed(() => {
 
 </script>
 <style lang="scss" scoped>
-.pagination {
-  margin-top: $kui-space-70;
-}
 .pagination:not(.with-paging) :deep(.pagination-button-container) {
   display: none;
 }

diff --git a/src/app/x/components/x-layout/README.md b/src/app/x/components/x-layout/README.md
@@ -0,0 +1,34 @@
+# x-layout
+
+Layout component for using our common layouts, as opposed to using `<div>`s and
+classes.
+
+We have several layouts that we commonly use to help standardize margins and
+layout across the application. `XLayout` formalizes those into a component for
+usage inline instead of relying on global styles/class names.
+
+<Story>
+  <XLayout
+    type="stack"
+  >
+    <XLayout
+      type="separated"
+    >
+      <XBadge>This</XBadge>
+      <XBadge>Is</XBadge>
+      <XBadge>A</XBadge>
+      <XBadge>List</XBadge>
+      <XBadge>Of</XBadge>
+      <XBadge>Separated</XBadge>
+      <XBadge>Badges</XBadge>
+      <XBadge>Using</XBadge>
+      <XBadge>separated</XBadge>
+    </XLayout>
+    <XLayout
+      type="stack"
+    >
+      <XCard>This is the first card in a stack</XCard>
+      <XCard>This is the second card in a stack</XCard>
+    </XLayout>
+  </XLayout>
+</Story>
diff --git a/src/app/x/components/x-layout/XLayout.vue b/src/app/x/components/x-layout/XLayout.vue
@@ -0,0 +1,24 @@
+<template>
+  <div
+    :class="['x-layout', props.type]"
+  >
+    <slot name="default" />
+  </div>
+</template>
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+  type?: 'stack' | 'separated'
+}>(), {
+  type: 'stack',
+})
+</script>
+<style lang="scss" scoped>
+.stack > * + * {
+  margin-block-start: $kui-space-70;
+}
+.separated {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: $kui-space-40;
+}
+</style>
diff --git a/src/app/x/index.ts b/src/app/x/index.ts
@@ -9,6 +9,7 @@ import XDisclosure from './components/x-disclosure/XDisclosure.vue'
 import XEmptyState from './components/x-empty-state/XEmptyState.vue'
 import XIcon from './components/x-icon/XIcon.vue'
 import XInput from './components/x-input/XInput.vue'
+import XLayout from './components/x-layout/XLayout.vue'
 import XPrompt from './components/x-prompt/XPrompt.vue'
 import XProvider from './components/x-provider/XProvider.vue'
 import XSelect from './components/x-select/XSelect.vue'
@@ -32,6 +33,7 @@ declare module 'vue' {
     XCopyButton: typeof XCopyButton
     XBreadcrumbs: typeof XBreadcrumbs
     XEmptyState: typeof XEmptyState
+    XLayout: typeof XLayout
     XPrompt: typeof XPrompt
     XProvider: typeof XProvider
     XSelect: typeof XSelect
@@ -70,6 +72,7 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
           ['XEmptyState', XEmptyState],
           ['XIcon', XIcon],
           ['XInput', XInput],
+          ['XLayout', XLayout],
           ['XPrompt', XPrompt],
           ['XProvider', XProvider],
           ['XSelect', XSelect],

diff --git a/src/assets/styles/_components.scss b/src/assets/styles/_components.scss
@@ -7,7 +7,7 @@ Adapted from https://every-layout.dev/layouts/stack/.
 */
 
 .stack>*+* {
-  margin-block-start: $kui-space-80;
+  margin-block-start: $kui-space-70;
 }
 
 .stack-small>*+* {