@youcan/celeste 0.6.56 → 0.6.57

package/dist/es/table-cell.js

@@ -0,0 +1,26 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-cell",
+  props: {
+    class: {},
+    end: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("td", {
+        class: normalizeClass(unref(clsx)("celeste-table-cell", props.class, {
+          "celeste-table-cell-align-end": props.end
+        }))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+const TableCell = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5f65ee4a"]]);
+export {
+  TableCell as default
+};

package/dist/es/table-empty.js

@@ -0,0 +1,44 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, createElementVNode, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                                  */
+/* empty css                                                                     */
+import TableCell from "./table-cell.js";
+import { useDelegatedProps } from "./use-delegated-props.js";
+/* empty css                                                                    */
+/* empty css                                                                  */
+import TableRow from "./table-row.js";
+/* empty css                                                             */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "celeste-table-empty-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-empty",
+  props: {
+    colspan: { default: 1 },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegated = useDelegatedProps(props, "class");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TableRow), null, {
+        default: withCtx(() => [
+          createVNode(unref(TableCell), mergeProps(unref(delegated), {
+            class: unref(clsx)("celeste-table-empty", props.class)
+          }), {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1, [
+                renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ])
+            ]),
+            _: 3
+          }, 16, ["class"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const tableEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1c0042ab"]]);
+export {
+  tableEmpty as default
+};

package/dist/es/table-footer.js

@@ -0,0 +1,24 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                                    */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-footer",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("tfoot", {
+        class: normalizeClass(unref(clsx)("celeste-table-footer", props.class))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+const tableFooter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-50b76b8f"]]);
+export {
+  tableFooter as default
+};

package/dist/es/table-head.js

@@ -0,0 +1,25 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                                  */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-head",
+  props: {
+    class: {},
+    end: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("th", {
+        class: normalizeClass(unref(clsx)("celeste-table-head", props.class, { "celeste-table-head-align-end": props.end }))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+const tableHead = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-76a52252"]]);
+export {
+  tableHead as default
+};

package/dist/es/table-header.js

@@ -0,0 +1,21 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-header",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("thead", {
+        class: normalizeClass(unref(clsx)("celeste-table-header", props.class))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/table-row.js

@@ -0,0 +1,32 @@
+import { defineComponent, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-row",
+  props: {
+    class: {},
+    hoverable: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("tr", {
+          class: normalizeClass(unref(clsx)("celeste-table-row", props.class, { "celeste-table-row-hoverable": props.hoverable }))
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 2),
+        _cache[0] || (_cache[0] = createElementVNode("tr", {
+          "aria-hidden": "true",
+          class: "celeste-table-row-divider"
+        }, [
+          createElementVNode("td", { colspan: "100" })
+        ], -1))
+      ], 64);
+    };
+  }
+});
+const TableRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5a7011d2"]]);
+export {
+  TableRow as default
+};

package/dist/es/table.js

@@ -0,0 +1,27 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+/* empty css                                                             */
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "celeste-table-wrapper" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table",
+  props: {
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("table", {
+          class: normalizeClass(unref(clsx)("celeste-table", props.class))
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 2)
+      ]);
+    };
+  }
+});
+const table = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8ed967fe"]]);
+export {
+  table as default
+};

package/dist/es/tooltip.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } from "vue";
 import CompactButton from "./compact-button.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, aE as Lg, aF as zg, aG as Kg, aH as jg, aI as Hg, aJ as Wg } from "./chunks/index.js";
+import { x as xe, aC as Lg, aD as zg, aE as Kg, aF as jg, aG as Hg, aH as Wg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "celeste-tooltip-content-box" };
 const _hoisted_2 = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.56",
+  "version": "0.6.57",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -44,8 +44,8 @@
     "radix-vue": "^1.9.12",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.2",
-    "@youcan/celeste-icons": "0.6.56",
-    "@youcan/celeste-tokens": "0.6.56"
+    "@youcan/celeste-icons": "0.6.57",
+    "@youcan/celeste-tokens": "0.6.57"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
@@ -53,6 +53,7 @@
     "@storybook/addon-knobs": "^8.0.1",
     "@storybook/addon-onboarding": "^9.1.10",
     "@storybook/vue3-vite": "^9.1.10",
+    "@tanstack/vue-table": "^8.20.5",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/tinycolor2": "^1.4.6",

package/src/components/color-picker/composable/use-color-model.ts

@@ -36,5 +36,9 @@ export function defineColorModel(props: useTinyColorModelProps, emit: any): Writ
 }
 
 function transformToOriginalInputFormat(color: tinycolor.Instance, originalFormat?: TinyColorFormat): any {
+  if (originalFormat === 'hex' && color.getAlpha() < 1) {
+    return color.toString('hex8');
+  }
+
   return color.toString(originalFormat);
 }

package/src/components/table/index.ts

@@ -0,0 +1,26 @@
+export * from './table-body.vue';
+export { default as TableBody } from './table-body.vue';
+
+export * from './table-caption.vue';
+export { default as TableCaption } from './table-caption.vue';
+
+export * from './table-cell.vue';
+export { default as TableCell } from './table-cell.vue';
+
+export * from './table-empty.vue';
+export { default as TableEmpty } from './table-empty.vue';
+
+export * from './table-footer.vue';
+export { default as TableFooter } from './table-footer.vue';
+
+export * from './table-head.vue';
+export { default as TableHead } from './table-head.vue';
+
+export * from './table-header.vue';
+export { default as TableHeader } from './table-header.vue';
+
+export * from './table-row.vue';
+export { default as TableRow } from './table-row.vue';
+
+export * from './table.vue';
+export { default as Table } from './table.vue';

package/src/components/table/stories/table.stories.ts

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Badge from '../../badge/badge.vue';
+import TableBody from '../table-body.vue';
+import TableCaption from '../table-caption.vue';
+import TableCell from '../table-cell.vue';
+import TableEmpty from '../table-empty.vue';
+import TableFooter from '../table-footer.vue';
+import TableHead from '../table-head.vue';
+import TableHeader from '../table-header.vue';
+import TableRow from '../table-row.vue';
+import Table from '../table.vue';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+const invoices = [
+  {
+    invoice: 'INV001',
+    paymentStatus: 'Paid',
+    totalAmount: '$250.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV002',
+    paymentStatus: 'Pending',
+    totalAmount: '$150.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV003',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$350.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV004',
+    paymentStatus: 'Paid',
+    totalAmount: '$450.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV005',
+    paymentStatus: 'Paid',
+    totalAmount: '$550.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV006',
+    paymentStatus: 'Pending',
+    totalAmount: '$200.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV007',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$300.00',
+    paymentMethod: 'Credit Card',
+  },
+];
+
+export const Default: Story = {
+  render: args => ({
+    components: {
+      Table,
+      TableBody,
+      TableCaption,
+      TableCell,
+      TableFooter,
+      TableHead,
+      TableHeader,
+      TableRow,
+      Badge,
+    },
+    setup() {
+      return { args, invoices };
+    },
+    template: `
+      <Table v-bind="args">
+        <TableCaption>A list of your recent invoices.</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Invoice</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead end>Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow hoverable v-for="invoice in invoices" :key="invoice.invoice">
+            <TableCell>{{ invoice.invoice }}</TableCell>
+            <TableCell>{{ invoice.paymentStatus }}</TableCell>
+            <TableCell>{{ invoice.paymentMethod }}</TableCell>
+            <TableCell end>{{ invoice.totalAmount }}</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    `,
+  }),
+};
+
+export const Empty: Story = {
+  render: args => ({
+    components: {
+      Table,
+      TableBody,
+      TableEmpty,
+      TableHead,
+      TableHeader,
+      TableRow,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Table v-bind="args">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Invoice</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead>Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableEmpty colspan="4">
+            No results found.
+          </TableEmpty>
+        </TableBody>
+      </Table>
+    `,
+  }),
+};

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<TableBodyProps>();
+</script>
+
+<script lang="ts">
+export interface TableBodyProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <tbody :class="clsx('celeste-table-body', props.class)">
+    <slot />
+  </tbody>
+</template>
+
+<style scoped>
+.celeste-table-body {
+  font: var(--paragraph-sm);
+}
+</style>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = defineProps<TableCaptionProps>();
+</script>
+
+<script lang="ts">
+export interface TableCaptionProps {
+  class?: HTMLAttributes['class'];
+}
+</script>
+
+<template>
+  <caption :class="clsx('celeste-table-caption', props.class)">
+    <slot />
+  </caption>
+</template>
+
+<style scoped>
+.celeste-table-caption {
+  padding-block: var(--spacing-16);
+  color: var(--color-text-soft-400);
+  font: var(--paragraph-sm);
+}
+</style>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+
+const props = withDefaults(
+  defineProps<TableCellProps>(),
+  { end: false },
+);
+</script>
+
+<script lang="ts">
+export interface TableCellProps {
+  class?: HTMLAttributes['class'];
+  end?: boolean;
+}
+</script>
+
+<template>
+  <td
+    :class="clsx('celeste-table-cell', props.class, {
+      'celeste-table-cell-align-end': props.end,
+    })"
+  >
+    <slot />
+  </td>
+</template>
+
+<style scoped>
+.celeste-table-cell {
+  padding: var(--spacing-12) var(--spacing-12);
+  transition: background-color var(--animation-fast) ease;
+  background-color: var(--color-bg-white-0);
+}
+
+.celeste-table-cell:first-child {
+  position: relative;
+  border-start-start-radius: var(--radius-12);
+  border-end-start-radius: var(--radius-12);
+}
+
+.celeste-table-cell:last-child {
+  border-start-end-radius: var(--radius-12);
+  border-end-end-radius: var(--radius-12);
+}
+
+.celeste-table-cell-align-end {
+  text-align: end;
+}
+</style>

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>