@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.5 → 1.0.7

package/src/ui/card-content.vue

@@ -1,16 +1,16 @@
-<script setup lang="ts">
-import { cn } from './utils';
-import { defineProps } from 'vue';
-
-const props = defineProps({});
-</script>
-
-<template>
-  <div
-    data-slot="card-content"
-    :class="cn('px-3 space-y-4 [&:first-child]:pt-3 [&:last-child]:pb-3', $attrs.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps } from 'vue';
+
+const props = defineProps({});
+</script>
+
+<template>
+  <div
+    data-slot="card-content"
+    :class="cn('px-3 space-y-4 [&:first-child]:pt-3 [&:last-child]:pb-3', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/card-description.vue

@@ -1,16 +1,16 @@
-<script setup lang="ts">
-import { cn } from './utils';
-import { defineProps } from 'vue';
-
-const props = defineProps({});
-</script>
-
-<template>
-  <p
-    data-slot="card-description"
-    :class="cn('text-muted-foreground', $attrs.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </p>
-</template>
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps } from 'vue';
+
+const props = defineProps({});
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </p>
+</template>

package/src/ui/card-footer.vue

@@ -1,13 +1,13 @@
-<script setup lang="ts">
-import { cn } from './utils';
-</script>
-
-<template>
-  <div
-    data-slot="card-footer"
-    :class="cn('flex items-center px-3 pb-3 [.border-t]:pt-3', $attrs.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import { cn } from './utils';
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-3 pb-3 [.border-t]:pt-3', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/card-header.vue

@@ -1,19 +1,19 @@
-<script setup lang="ts">
-import { cn } from './utils';
-import { defineProps } from 'vue';
-
-const props = defineProps({});
-</script>
-
-<template>
-  <div
-    data-slot="card-header"
-    :class="cn(
-      '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-3 pt-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-3',
-      $attrs.class
-    )"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps } from 'vue';
+
+const props = defineProps({});
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="cn(
+      '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-3 pt-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-3',
+      $attrs.class
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/card-title.vue

@@ -1,16 +1,16 @@
-<script setup lang="ts">
-import { cn } from './utils';
-import { defineProps } from 'vue';
-
-const props = defineProps({});
-</script>
-
-<template>
-  <h4
-    data-slot="card-title"
-    :class="cn('leading-none', $attrs.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </h4>
-</template>
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps } from 'vue';
+
+const props = defineProps({});
+</script>
+
+<template>
+  <h4
+    data-slot="card-title"
+    :class="cn('leading-none', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </h4>
+</template>

package/src/ui/card.vue

@@ -1,73 +1,73 @@
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { cn } from './utils';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'default',
-  },
-  cornerPosition: {
-    type: String,
-    default: 'top-right',
-  },
-});
-
-const clipPathValue = computed(() => {
-  if (props.variant !== 'corner-cut') return undefined;
-  switch (props.cornerPosition) {
-    case 'top-left':
-      return 'polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px)';
-    case 'top-right':
-      return 'polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%)';
-    case 'bottom-left':
-      return 'polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px))';
-    case 'bottom-right':
-      return 'polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%)';
-    default:
-      return undefined;
-  }
-});
-
-const customPaddingValue = computed(() => {
-  if (props.variant !== 'corner-cut') return '';
-  switch (props.cornerPosition) {
-    case 'top-left':
-    case 'bottom-left':
-      return 'pl-2';
-    case 'top-right':
-    case 'bottom-right':
-      return 'pr-2';
-    default:
-      return '';
-  }
-});
-</script>
-
-<template>
-  <div v-if="props.variant === 'corner-cut'" class="relative">
-    <!-- Border container -->
-    <div
-      :class="cn('absolute inset-0 bg-border rounded')"
-      :style="{ clipPath: clipPathValue }"
-    />
-    <!-- Content container -->
-    <div
-      data-slot="card"
-      :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded', customPaddingValue, $attrs.class)"
-      :style="{ clipPath: clipPathValue, margin: '1px' }"
-      v-bind="$attrs"
-    >
-      <slot />
-    </div>
-  </div>
-  <div
-    v-else
-    data-slot="card"
-    :class="cn('bg-card text-card-foreground flex flex-col gap-3 rounded-md border', $attrs.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from './utils';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+  cornerPosition: {
+    type: String,
+    default: 'top-right',
+  },
+});
+
+const clipPathValue = computed(() => {
+  if (props.variant !== 'corner-cut') return undefined;
+  switch (props.cornerPosition) {
+    case 'top-left':
+      return 'polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px)';
+    case 'top-right':
+      return 'polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%)';
+    case 'bottom-left':
+      return 'polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px))';
+    case 'bottom-right':
+      return 'polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%)';
+    default:
+      return undefined;
+  }
+});
+
+const customPaddingValue = computed(() => {
+  if (props.variant !== 'corner-cut') return '';
+  switch (props.cornerPosition) {
+    case 'top-left':
+    case 'bottom-left':
+      return 'pl-2';
+    case 'top-right':
+    case 'bottom-right':
+      return 'pr-2';
+    default:
+      return '';
+  }
+});
+</script>
+
+<template>
+  <div v-if="props.variant === 'corner-cut'" class="relative">
+    <!-- Border container -->
+    <div
+      :class="cn('absolute inset-0 bg-border rounded')"
+      :style="{ clipPath: clipPathValue }"
+    />
+    <!-- Content container -->
+    <div
+      data-slot="card"
+      :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded', customPaddingValue, $attrs.class)"
+      :style="{ clipPath: clipPathValue, margin: '1px' }"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+  <div
+    v-else
+    data-slot="card"
+    :class="cn('bg-card text-card-foreground flex flex-col gap-3 rounded-md border', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>