@youcan/celeste 0.6.56 → 0.6.59

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { TableCell, TableRow } from '@/components/table';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+
+const props = withDefaults(
+  defineProps<TableEmptyProps>(),
+  { colspan: 1 },
+);
+
+const delegated = useDelegatedProps(props, 'class');
+</script>
+
+<script lang="ts">
+export interface TableEmptyProps {
+  colspan?: number;
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <TableRow>
+    <TableCell v-bind="delegated" :class="clsx('celeste-table-empty', props.class)">
+      <div class="celeste-table-empty-content">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
+
+<style scoped>
+.celeste-table-empty {
+  align-self: middle;
+  white-space: nowrap;
+}
+
+.celeste-table-empty-content {
+  display: flex;
+  place-items: center;
+  justify-content: center;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<TableFooterProps>();
+</script>
+
+<script lang="ts">
+export interface TableFooterProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <tfoot :class="clsx('celeste-table-footer', props.class)">
+    <slot />
+  </tfoot>
+</template>
+
+<style scoped>
+.celeste-table-footer {
+  background-color: var(--color-bg-weak-50);
+}
+</style>

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = withDefaults(
+  defineProps<TableHeadProps>(),
+  { end: false },
+);
+</script>
+
+<script lang="ts">
+export interface TableHeadProps {
+  class?: HTMLAttributes['class'];
+  end?: boolean;
+}
+</script>
+
+<template>
+  <th
+    :class="clsx('celeste-table-head', props.class, { 'celeste-table-head-align-end': props.end })"
+  >
+    <slot />
+  </th>
+</template>
+
+<style scoped>
+.celeste-table-head {
+  padding: var(--spacing-8) var(--spacing-12);
+  background: var(--color-bg-weak-50);
+  color: var(--color-text-sub-600);
+  font: var(--paragraph-sm);
+}
+
+.celeste-table-head-align-end {
+  text-align: end;
+}
+
+.celeste-table-head:first-child {
+  border-start-start-radius: var(--radius-8);
+  border-end-start-radius: var(--radius-8);
+}
+
+.celeste-table-head:last-child {
+  border-start-end-radius: var(--radius-8);
+  border-end-end-radius: var(--radius-8);
+}
+</style>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<TableHeaderProps>();
+</script>
+
+<script lang="ts">
+export interface TableHeaderProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <thead :class="clsx('celeste-table-header', props.class)">
+    <slot />
+  </thead>
+</template>

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>