feat: match card component to related plugin (#51)

shuriken-ui · Aug 7, 2023 · 4af7eb3 · 4af7eb3
1 parent 1861035
commit 4af7eb3
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 16 deletions.
diff --git a/.playground/pages/tests/content/card.vue b/.playground/pages/tests/content/card.vue
@@ -12,7 +12,121 @@ definePageMeta({
     class="flex flex-col gap-12 [&>*]:p-8 [&>:nth-child(odd)]:bg-muted-100 dark:[&>:nth-child(odd)]:bg-muted-900 pb-32"
   >
     <div>
-      <BaseHeading size="xl" weight="medium" class="mb-10">Card</BaseHeading>
+      <BaseHeading size="xl" weight="medium" class="mb-10">
+        Card Shape
+      </BaseHeading>
+      <div class="grid grid-cols-4 gap-2">
+        <BaseCard class="p-6" shape="straight">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="smooth">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="curved">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+      </div>
+    </div>
+    <div>
+      <BaseHeading size="xl" weight="medium" class="mb-10">
+        Card color
+      </BaseHeading>
+      <div class="grid grid-cols-5 gap-2">
+        <BaseCard class="p-6" shape="rounded" color="white">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded" color="white-contrast">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded" color="muted">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded" color="muted-contrast">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded" color="primary">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded" color="info">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded" color="success">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded" color="warning">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded" color="danger">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded" color="none">
+          <BaseHeading>I am a Card</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+      </div>
+    </div>
+    <div>
+      <BaseHeading size="xl" weight="medium" class="mb-10">
+        Card Elevation
+      </BaseHeading>
+      <div class="grid grid-cols-4 gap-2">
+        <BaseCard class="p-6" shape="rounded" elevated>
+          <BaseHeading>I am a Card Elevated</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+        <BaseCard class="p-6" shape="rounded" elevated-hover>
+          <BaseHeading>I am a Card Elevated on hover</BaseHeading>
+          <BaseParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </BaseParagraph>
+        </BaseCard>
+      </div>
     </div>
   </div>
 </template>
diff --git a/components/base/BaseCard.vue b/components/base/BaseCard.vue
@@ -4,7 +4,7 @@ const props = withDefaults(
     /**
      * The shape of the card.
      */
-    shape?: 'straight' | 'rounded' | 'curved' | 'full'
+    shape?: 'straight' | 'rounded' | 'smooth' | 'curved'
 
     /**
      * Whether the card is elevated.
@@ -15,32 +15,61 @@ const props = withDefaults(
      * Whether the card is elevated on hover.
      */
     elevatedHover?: boolean
+
+    /**
+     * The color of the card.
+     */
+    color?:
+      | 'white'
+      | 'white-contrast'
+      | 'muted'
+      | 'muted-contrast'
+      | 'primary'
+      | 'info'
+      | 'success'
+      | 'warning'
+      | 'danger'
+      | 'none'
   }>(),
   {
     shape: undefined,
     elevated: false,
     elevatedHover: false,
+    color: 'muted',
   }
 )
 const appConfig = useAppConfig()
 const shape = computed(() => props.shape ?? appConfig.nui.defaultShapes?.card)
+
+const shapeStyle = {
+  straight: '',
+  rounded: 'nui-card-rounded',
+  smooth: 'nui-card-smooth',
+  curved: 'nui-card-curved',
+}
+const colorStyle = {
+  white: 'nui-card-white',
+  'white-contrast': 'nui-card-white-contrast',
+  muted: 'nui-card-muted',
+  'muted-contrast': 'nui-card-muted-contrast',
+  primary: 'nui-card-primary',
+  info: 'nui-card-info',
+  success: 'nui-card-success',
+  warning: 'nui-card-warning',
+  danger: 'nui-card-danger',
+}
+
+const classes = computed(() => [
+  'nui-card',
+  shape.value && shapeStyle[shape.value],
+  colorStyle[props.color],
+  props.elevated && 'nui-card-shadow',
+  props.elevatedHover && 'nui-card-shadow-hover',
+])
 </script>
 
 <template>
-  <div
-    class="border-muted-200 dark:border-muted-700 dark:bg-muted-800 relative w-full border bg-white transition-all duration-300"
-    :class="[
-      shape === 'rounded' && 'rounded-md',
-      shape === 'curved' && 'rounded-xl',
-      shape === 'full' && 'rounded-full',
-      props.elevated &&
-        !props.elevatedHover &&
-        'shadow-muted-300/30 dark:shadow-muted-800/30 shadow-xl',
-      props.elevatedHover &&
-        !props.elevated &&
-        'hover:shadow-muted-300/30 dark:hover:shadow-muted-800/30 hover:shadow-xl',
-    ]"
-  >
+  <div :class="classes">
     <slot></slot>
   </div>
 </template>