fix: Styling fixes for Card component (#157)

* fix: Styling fixes for Card component

* chore: Install missing peer prettier

components/card/w-card.vue

@@ -2,32 +2,33 @@
 import { card as ccCard } from '@warp-ds/css/component-classes';
 import { computed } from 'vue';
 
+defineOptions({
+ name: 'wCard',
+});
+
 const props = defineProps({
  as: { type: String, default: 'div' },
  selected: Boolean,
  flat: Boolean
 })
 
-const outerClasses = computed(() => ({
+const containerClasses = computed(() => ({
  [ccCard.card]: true,
  [ccCard.cardShadow]: !props.flat,
- [props.selected ? ccCard.cardSelected : ccCard.cardUnselected]: !props.flat,
+ [ccCard.cardSelected]: !props.flat && props.selected,
  [ccCard.cardFlat]: props.flat,
  [props.selected ? ccCard.cardFlatSelected : ccCard.cardFlatUnselected]: props.flat
-}))
-const innerClasses = computed(() => ({
- [ccCard.cardOutline]: true,
- [props.selected ? ccCard.cardOutlineSelected : ccCard.cardOutlineUnselected]: true
-}))
+}));
+
+const outlineClasses = computed(() => [
+ ccCard.cardOutline,
+ props.selected ? ccCard.cardOutlineSelected : ccCard.cardOutlineUnselected,
+]);
 </script>
 
 <template>
- <component :is="as" :class="outerClasses">
- <div v-if="!flat" :class="innerClasses" />
+ <component :is="as" :class="containerClasses">
+ <div v-if="!flat" :class="outlineClasses" />
  <slot />
  </component>
 </template>
-
-<script>
-export default { name: 'wCard' }
-</script>

package.json

@@ -35,9 +35,9 @@
  "@floating-ui/dom": "1.6.3",
  "@lingui/core": "^4.7.0",
  "@warp-ds/core": "^1.0.2",
- "@warp-ds/css": "1.9.1",
+ "@warp-ds/css": "1.9.3",
  "@warp-ds/icons": "2.0.0",
- "@warp-ds/uno": "1.9.0",
+ "@warp-ds/uno": "1.10.2",
  "create-v-model": "^2.2.0",
  "dom-focus-lock": "^1.1.0",
  "element-collapse": "^1.1.0",
@@ -80,6 +80,7 @@
  "fuse.js": "^7.0.0",
  "happy-dom": "13.3.8",
  "playwright": "1.41.2",
+ "prettier": "3.2.5",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "semantic-release": "^23.0.0",