@vueye-table/styled 3.0.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Brahim Boussadjra and vueye-table contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# @vueye-table/styled
+
+Themed Vue components for vueye-table (`VtTable`, `VtGrid`, `VtToolbar`, `VtSearch`,
+`VtPagination`, `VtPageSize`, `VtColumnVisibility`, `VtStatus`, `VtEmpty`) and a stylesheet
+driven by CSS custom properties, with dark mode and three densities.
+
+```bash
+pnpm add @vueye-table/styled vue
+```
+
+```ts
+import "@vueye-table/styled/style.css";
+```
+
+See the [repository README](https://github.com/boussadjra/vueye-table#readme) for every layer.

package/dist/index.d.ts

@@ -0,0 +1,397 @@
+import { SortInfo, TableColumn, TableRow } from "@vueye-table/core";
+import { GridCellSlotProps } from "@vueye-table/headless";
+import { AnyDataTableBinding, DataTableBinding } from "@vueye-table/vue";
+import { Component, PropType, SlotsType, VNode, VNodeChild } from "vue";
+//#region src/components.d.ts
+type Density = "compact" | "comfortable" | "spacious";
+/** An arrow showing a column's sort direction and, in a multi-column sort, its priority. */
+declare const VtSortIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  sort: {
+    type: PropType<SortInfo | undefined>;
+    default: undefined;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  sort: {
+    type: PropType<SortInfo | undefined>;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  sort: SortInfo | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** A header row of styled header cells with sort indicators. */
+declare const VtHeader: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+  [key: `header.${string}`]: (props: {
+    column: TableColumn<unknown>;
+    sort: SortInfo | undefined;
+    toggleSort: (multi?: boolean) => void;
+  }) => VNode[];
+} & {
+  before?: () => VNode[];
+  after?: () => VNode[];
+  header?: (props: {
+    column: TableColumn<unknown>;
+  }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * The styled table surface: a scroll container, a loading bar, and the table. Without a default
+ * slot it renders a styled header and body.
+ */
+declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  density: {
+    readonly type: PropType<Density>;
+    readonly default: "comfortable";
+  };
+  striped: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  bordered: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  hover: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  stickyHeader: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  loading: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  theme: {
+    readonly type: PropType<"light" | "dark" | undefined>;
+    readonly default: undefined;
+  };
+  table: {
+    type: PropType<AnyDataTableBinding>;
+    required: true;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  density: {
+    readonly type: PropType<Density>;
+    readonly default: "comfortable";
+  };
+  striped: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  bordered: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  hover: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  stickyHeader: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  loading: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  theme: {
+    readonly type: PropType<"light" | "dark" | undefined>;
+    readonly default: undefined;
+  };
+  table: {
+    type: PropType<AnyDataTableBinding>;
+    required: true;
+  };
+}>> & Readonly<{}>, {
+  density: Density;
+  striped: boolean;
+  bordered: boolean;
+  hover: boolean;
+  stickyHeader: boolean;
+  loading: boolean;
+  theme: "light" | "dark" | undefined;
+}, SlotsType<{
+  default?: (props: {
+    table: DataTableBinding<unknown>;
+  }) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** The styled body, with the empty state in a full-width row. */
+declare const VtBody: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+  default?: (props: {
+    rows: readonly TableRow<unknown>[];
+  }) => VNode[];
+  empty?: () => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** The default empty state. */
+declare const VtEmpty: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  text: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  text: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  text: string;
+}, SlotsType<{
+  default?: () => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** A search field with an icon. */
+declare const VtSearch: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** "Rows per page" with a picker. */
+declare const VtPageSize: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  options: {
+    type: PropType<readonly number[]>;
+    default: () => number[];
+  };
+  label: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  options: {
+    type: PropType<readonly number[]>;
+    default: () => number[];
+  };
+  label: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  label: string;
+  options: readonly number[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * A menu of column checkboxes behind a "Columns" button. Escape closes it and returns focus to
+ * the button, and so does moving focus out of it.
+ */
+declare const VtColumnVisibility: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  label: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  label: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const VtPagination: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  as: {
+    readonly type: StringConstructor;
+    readonly default: string;
+  };
+  label: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  as: {
+    readonly type: StringConstructor;
+    readonly default: string;
+  };
+  label: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  label: string;
+  as: string;
+}, SlotsType<{
+  default?: (props: {
+    page: number;
+    pageCount: number;
+    items: readonly import("@vueye-table/core").PageItem[];
+    canPrevious: boolean;
+    canNext: boolean;
+    goToPage: (page: number) => void;
+    next: () => void;
+    previous: () => void;
+  }) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const VtStatus: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  as: {
+    readonly type: StringConstructor;
+    readonly default: string;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  as: {
+    readonly type: StringConstructor;
+    readonly default: string;
+  };
+}>> & Readonly<{}>, {
+  as: string;
+}, SlotsType<{
+  default?: (props: {
+    start: number;
+    end: number;
+    rowCount: number;
+    totalRowCount: number;
+    selectedCount: number;
+  }) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** A horizontal bar for controls above or below a table. */
+declare const VtToolbar: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+  default?: () => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * The styled spreadsheet grid, with optional row numbers and A, B, C column letters. A
+ * `cell.<column id>` slot draws that column's cells while they are not being edited.
+ */
+declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  density: {
+    readonly type: PropType<Density>;
+    readonly default: "comfortable";
+  };
+  striped: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  bordered: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  hover: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  stickyHeader: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  loading: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  theme: {
+    readonly type: PropType<"light" | "dark" | undefined>;
+    readonly default: undefined;
+  };
+  table: {
+    type: PropType<AnyDataTableBinding>;
+    required: true;
+  };
+  label: {
+    type: PropType<string | undefined>;
+    default: undefined;
+  };
+  rowNumbers: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  columnLetters: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  density: {
+    readonly type: PropType<Density>;
+    readonly default: "comfortable";
+  };
+  striped: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  bordered: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  hover: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  stickyHeader: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  loading: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  theme: {
+    readonly type: PropType<"light" | "dark" | undefined>;
+    readonly default: undefined;
+  };
+  table: {
+    type: PropType<AnyDataTableBinding>;
+    required: true;
+  };
+  label: {
+    type: PropType<string | undefined>;
+    default: undefined;
+  };
+  rowNumbers: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  columnLetters: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+}>> & Readonly<{}>, {
+  label: string | undefined;
+  density: Density;
+  striped: boolean;
+  bordered: boolean;
+  hover: boolean;
+  stickyHeader: boolean;
+  loading: boolean;
+  theme: "light" | "dark" | undefined;
+  rowNumbers: boolean;
+  columnLetters: boolean;
+}, SlotsType<{
+  [key: `cell.${string}`]: GridCellSlotProps;
+} & {
+  default?: (props: Record<string, unknown>) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+//#region src/icons.d.ts
+declare const paths: {
+  readonly sortNone: "M7 9l5-5 5 5M7 15l5 5 5-5";
+  readonly sortAsc: "M7 14l5-5 5 5";
+  readonly sortDesc: "M7 10l5 5 5-5";
+  readonly search: "M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm10 2-4.35-4.35";
+  readonly columns: "M4 4h6v16H4zM14 4h6v16h-6z";
+  readonly empty: "M3 7h18M3 12h18M3 17h10";
+};
+type IconName = keyof typeof paths;
+/** A 24-pixel stroke icon that inherits the text color. */
+declare function icon(name: IconName, className?: string): VNode;
+//#endregion
+//#region src/with-class.d.ts
+/**
+ * Wrap a component so it always carries a class. Props, attributes, and slots pass through
+ * untouched, so the wrapper keeps the wrapped component's full API.
+ */
+declare function withClass<TComponent extends Component>(component: TComponent, className: string, name: string): TComponent;
+//#endregion
+export { type Density, type IconName, VtBody, VtColumnVisibility, VtEmpty, VtGrid, VtHeader, VtPageSize, VtPagination, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, icon, withClass };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components.ts","../src/icons.ts","../src/with-class.ts"],"mappings":";;;;;KA8BY;;cAqCC,+BAAe,8BAAA;;IAEO,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;;;;qCAW1C;;cAGW,wBAAQ,0BAAA,oBAAA,4BAAA;;;GAIoB,2BAAA;IACjC,QAAQ;IACR,MAAM;IACN,aAAa;QACT;;EAEG,eAAM;EACP,cAAM;EACL,UAAC;IAAS,QAAQ;QAA2B;kCAoC1D;;;;;cAMW,uBAAO,8BAAA;;aAvGS,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;IAsGE,MAAA,SAAS;;;;;;;aA7GT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;IAsGE,MAAA,SAAS;;;;;;;;;;;;EAHxB,WAAC;IAAS,OAAO;QAAgC;kCAqB7D;;cAGW,sBAAM,0BAAA,oBAAA,4BAAA;;;EAGL,WAAC;IAAS,eAAe;QAA0B;EACrD,cAAM;kCAahB;;cAGW,uBAAO,8BAAA;;;;;;;;;;;;;;;EAEqB,gBAAM;kCAS7C;;cAGW,wBAAQ,0BAAA,oBAAA,4BAAA;;8BAMnB,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,0BAAU,8BAAA;;IAGO,MAAA;;;;;;;;;;;IAAA,MAAA;;;;;;;;;;qCAU5B;;;;;cAMW,kCAAkB,8BAAA;;;;;;;;;;;;;;qCAwC7B;cAEW,4BAAY,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAAkE;cAC9E,wBAAQ,8BAAA;;;;;;;;;;;;;;;;;;;;;;kCAAsD;;cAG9D,yBAAS,0BAAA,oBAAA,4BAAA;;;EAEmB,gBAAM;kCAI7C;;;;;cA6CW,sBAAM,8BAAA;;aAjSU,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;IAkSE,MAAA,SAAS;;;;IACT,MAAA;;;;;;;;;;;;;;;aA1SA,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;IAkSE,MAAA,SAAS;;;;IACT,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;EALb,WAAC,OAAO,4BAA4B;kCAsDlD;;;cC3XI;;;;;;;;KASM,wBAAwB;;iBAGpB,KAAK,MAAM,UAAU,qBAAwB;;;;;;;iBCR7C,UAAU,mBAAmB,WAC3C,WAAW,YACX,mBACA,eACC"}