@youcan/celeste 0.6.56 → 0.6.57

package/src/components/table/table-row.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = withDefaults(
+  defineProps<TableRowProps>(),
+  { hoverable: true },
+);
+</script>
+
+<script lang="ts">
+export interface TableRowProps {
+  class?: HTMLAttributes['class'];
+  hoverable?: boolean;
+}
+</script>
+
+<template>
+  <tr :class="clsx('celeste-table-row', props.class, { 'celeste-table-row-hoverable': props.hoverable })">
+    <slot />
+  </tr>
+  <tr aria-hidden="true" class="celeste-table-row-divider">
+    <td colspan="100" />
+  </tr>
+</template>
+
+<style scoped>
+.celeste-table-row {
+  transition:
+    color,
+    background-color var(--animation-fast) ease;
+}
+
+.celeste-table-row-divider {
+  height: 0;
+}
+
+.celeste-table-row-divider td {
+  height: 0;
+  padding: var(--spacing-0);
+  border-bottom: 1px solid var(--color-stroke-soft-200);
+  line-height: 0;
+}
+
+.celeste-table-row-divider:last-child {
+  display: none;
+}
+
+.celeste-table-row-hoverable:hover :deep(.celeste-table-cell) {
+  background-color: var(--color-bg-weak-50);
+}
+</style>

package/src/components/table/table.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<TableProps>();
+</script>
+
+<script lang="ts">
+export interface TableProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <div class="celeste-table-wrapper">
+    <table :class="clsx('celeste-table', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.celeste-table-wrapper {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+}
+
+.celeste-table-wrapper .celeste-table {
+  width: 100%;
+  caption-side: bottom;
+  border-spacing: var(--spacing-0) var(--spacing-4);
+  border-collapse: separate;
+  font: var(--paragraph-sm);
+}
+</style>