@soybeanjs/ui 0.13.8 → 0.15.0-beta.1

package/dist/components/switch/switch.vue.d.ts

@@ -1,13 +1,13 @@
 import { ThemeColor, ThemeSize } from "../../theme/types.js";
 import { SwitchShape } from "./variants.js";
 import { SwitchProps } from "./types.js";
-import * as vue from "vue";
-import * as _soybeanjs_headless0 from "@soybeanjs/headless";
+import * as _$vue from "vue";
+import * as _$_soybeanjs_headless0 from "@soybeanjs/headless";
 import { AcceptableBooleanValue } from "@soybeanjs/headless";
 
 //#region src/components/switch/switch.vue.d.ts
 declare const __VLS_export: <T extends AcceptableBooleanValue = boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue.PublicProps & __VLS_PrettifyLocal<SwitchProps<T> & {
+  props: _$vue.PublicProps & __VLS_PrettifyLocal<SwitchProps<T> & {
     "onUpdate:modelValue"?: ((payload: NonNullable<T>) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -17,13 +17,13 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = boolean>(__VLS_p
   slots: {
     leading?: (props: {
       modelValue: (Readonly<{
-        class: _soybeanjs_headless0.ClassValue;
-        ui: Partial<_soybeanjs_headless0.SwitchUi>;
+        class: _$_soybeanjs_headless0.ClassValue;
+        ui: Partial<_$_soybeanjs_headless0.SwitchUi>;
         color: ThemeColor;
         size: ThemeSize;
         shape: SwitchShape;
-        controlProps: _soybeanjs_headless0.SwitchControlProps;
-        thumbProps: _soybeanjs_headless0.SwitchThumbProps;
+        controlProps: _$_soybeanjs_headless0.SwitchControlProps;
+        thumbProps: _$_soybeanjs_headless0.SwitchThumbProps;
         defaultValue: NonNullable<T> | undefined;
         disabled: boolean;
         value: string;
@@ -31,14 +31,14 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = boolean>(__VLS_p
         required: boolean;
         manifest: string | undefined;
         innerHTML: string | undefined;
-        style: vue.StyleValue | undefined;
+        style: _$vue.StyleValue | undefined;
         accesskey: string | undefined;
         contenteditable: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextmenu: string | undefined;
         dir: string | undefined;
         draggable: (boolean | "true" | "false") | undefined;
         enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-        enterKeyHint: vue.HTMLAttributes["enterkeyhint"];
+        enterKeyHint: _$vue.HTMLAttributes["enterkeyhint"];
         hidden: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
         id: string | undefined;
         inert: (boolean | "true" | "false") | undefined;
@@ -228,13 +228,13 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = boolean>(__VLS_p
   } & {
     default?: (props: {
       modelValue: (Readonly<{
-        class: _soybeanjs_headless0.ClassValue;
-        ui: Partial<_soybeanjs_headless0.SwitchUi>;
+        class: _$_soybeanjs_headless0.ClassValue;
+        ui: Partial<_$_soybeanjs_headless0.SwitchUi>;
         color: ThemeColor;
         size: ThemeSize;
         shape: SwitchShape;
-        controlProps: _soybeanjs_headless0.SwitchControlProps;
-        thumbProps: _soybeanjs_headless0.SwitchThumbProps;
+        controlProps: _$_soybeanjs_headless0.SwitchControlProps;
+        thumbProps: _$_soybeanjs_headless0.SwitchThumbProps;
         defaultValue: NonNullable<T> | undefined;
         disabled: boolean;
         value: string;
@@ -242,14 +242,14 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = boolean>(__VLS_p
         required: boolean;
         manifest: string | undefined;
         innerHTML: string | undefined;
-        style: vue.StyleValue | undefined;
+        style: _$vue.StyleValue | undefined;
         accesskey: string | undefined;
         contenteditable: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextmenu: string | undefined;
         dir: string | undefined;
         draggable: (boolean | "true" | "false") | undefined;
         enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-        enterKeyHint: vue.HTMLAttributes["enterkeyhint"];
+        enterKeyHint: _$vue.HTMLAttributes["enterkeyhint"];
         hidden: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
         id: string | undefined;
         inert: (boolean | "true" | "false") | undefined;
@@ -439,13 +439,13 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = boolean>(__VLS_p
   } & {
     trailing?: (props: {
       modelValue: (Readonly<{
-        class: _soybeanjs_headless0.ClassValue;
-        ui: Partial<_soybeanjs_headless0.SwitchUi>;
+        class: _$_soybeanjs_headless0.ClassValue;
+        ui: Partial<_$_soybeanjs_headless0.SwitchUi>;
         color: ThemeColor;
         size: ThemeSize;
         shape: SwitchShape;
-        controlProps: _soybeanjs_headless0.SwitchControlProps;
-        thumbProps: _soybeanjs_headless0.SwitchThumbProps;
+        controlProps: _$_soybeanjs_headless0.SwitchControlProps;
+        thumbProps: _$_soybeanjs_headless0.SwitchThumbProps;
         defaultValue: NonNullable<T> | undefined;
         disabled: boolean;
         value: string;
@@ -453,14 +453,14 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = boolean>(__VLS_p
         required: boolean;
         manifest: string | undefined;
         innerHTML: string | undefined;
-        style: vue.StyleValue | undefined;
+        style: _$vue.StyleValue | undefined;
         accesskey: string | undefined;
         contenteditable: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextmenu: string | undefined;
         dir: string | undefined;
         draggable: (boolean | "true" | "false") | undefined;
         enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-        enterKeyHint: vue.HTMLAttributes["enterkeyhint"];
+        enterKeyHint: _$vue.HTMLAttributes["enterkeyhint"];
         hidden: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
         id: string | undefined;
         inert: (boolean | "true" | "false") | undefined;
@@ -649,7 +649,7 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = boolean>(__VLS_p
     }) => any;
   };
   emit: (evt: "update:modelValue", payload: NonNullable<T>) => void;
-}>) => vue.VNode & {
+}>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/switch/variants.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants0 from "tailwind-variants";
+import * as _$tailwind_variants0 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/components/switch/variants.d.ts
-declare const switchVariants: tailwind_variants0.TVReturnType<{
+declare const switchVariants: _$tailwind_variants0.TVReturnType<{
   color: {
     primary: {
       control: string;
@@ -136,7 +136,7 @@ declare const switchVariants: tailwind_variants0.TVReturnType<{
   root: string;
   control: string[];
   thumb: string;
-}, tailwind_variants0.TVReturnType<{
+}, _$tailwind_variants0.TVReturnType<{
   color: {
     primary: {
       control: string;

package/dist/components/table/hooks.d.ts

@@ -1,19 +1,19 @@
-import { TableColumn } from "./types.js";
-import * as vue from "vue";
+import { TableBaseData, TableColumn } from "./types.js";
+import * as _$vue from "vue";
 import { TableColumnCheck, UseTableOptions } from "@soybeanjs/hooks";
 
 //#region src/components/table/hooks.d.ts
-type UseTableOptions$1<ResponseData, ApiData, Pagination extends boolean> = Omit<UseTableOptions<ResponseData, ApiData, TableColumn<ApiData>, Pagination>, 'pagination' | 'getColumnChecks' | 'getColumns'>;
-declare function useTable$1<ResponseData, ApiData>(options: UseTableOptions$1<ResponseData, ApiData, false>): {
-  loading: vue.ShallowRef<boolean>;
-  empty: vue.ShallowRef<boolean>;
-  tableData: vue.Ref<ApiData[], ApiData[]>;
-  columns: vue.ComputedRef<TableColumn<ApiData>[]>;
-  columnChecks: vue.Ref<TableColumnCheck[], TableColumnCheck[]>;
+type UseTableOptions$1<ResponseData, ApiData extends TableBaseData, Pagination extends boolean> = Omit<UseTableOptions<ResponseData, ApiData, TableColumn<ApiData>, Pagination>, 'pagination' | 'getColumnChecks' | 'getColumns'>;
+declare function useTable$1<ResponseData, ApiData extends TableBaseData>(options: UseTableOptions$1<ResponseData, ApiData, false>): {
+  loading: _$vue.ShallowRef<boolean>;
+  empty: _$vue.ShallowRef<boolean>;
+  tableData: _$vue.Ref<ApiData[], ApiData[]>;
+  columns: _$vue.ComputedRef<TableColumn<ApiData>[]>;
+  columnChecks: _$vue.Ref<TableColumnCheck[], TableColumnCheck[]>;
   reloadColumns: () => void;
   fetchData: () => Promise<void>;
 };
-type UsePaginatedTableOptions<ResponseData, ApiData> = UseTableOptions$1<ResponseData, ApiData, true> & {
+type UsePaginatedTableOptions<ResponseData, ApiData extends TableBaseData> = UseTableOptions$1<ResponseData, ApiData, true> & {
   page?: number;
   pageSize?: number;
   /**
@@ -27,17 +27,17 @@ type UsePaginatedTableOptions<ResponseData, ApiData> = UseTableOptions$1<Respons
    */
   fetchOnPaginationChange?: boolean;
 };
-declare function usePaginatedTable<ResponseData, ApiData>(options: UsePaginatedTableOptions<ResponseData, ApiData>): {
-  loading: vue.ShallowRef<boolean>;
-  empty: vue.ShallowRef<boolean>;
-  tableData: vue.Ref<ApiData[], ApiData[]>;
-  columns: vue.ComputedRef<TableColumn<ApiData>[]>;
-  columnChecks: vue.Ref<TableColumnCheck[], TableColumnCheck[]>;
+declare function usePaginatedTable<ResponseData, ApiData extends TableBaseData>(options: UsePaginatedTableOptions<ResponseData, ApiData>): {
+  loading: _$vue.ShallowRef<boolean>;
+  empty: _$vue.ShallowRef<boolean>;
+  tableData: _$vue.Ref<ApiData[], ApiData[]>;
+  columns: _$vue.ComputedRef<TableColumn<ApiData>[]>;
+  columnChecks: _$vue.Ref<TableColumnCheck[], TableColumnCheck[]>;
   reloadColumns: () => void;
   fetchData: () => Promise<void>;
-  page: vue.ShallowRef<number, number>;
-  pageSize: vue.ShallowRef<number, number>;
-  total: vue.ShallowRef<number, number>;
+  page: _$vue.ShallowRef<number, number>;
+  pageSize: _$vue.ShallowRef<number, number>;
+  total: _$vue.ShallowRef<number, number>;
 };
 //#endregion
 export { usePaginatedTable, useTable$1 as useTable };

package/dist/components/table/hooks.js

@@ -1 +1 @@
-import{shallowRef as e,watch as t}from"vue";import{useTable as n}from"@soybeanjs/hooks";function r(e){return n({...e,getColumnChecks:a,getColumns:o})}function i(r){let{page:i=1,pageSize:s=10,fetchOnPaginationChange:c=!0,onFetched:l}=r,u=e(i),d=e(s),f=e(0),p=n({...r,pagination:!0,getColumnChecks:a,getColumns:o,onFetched:e=>{e.total&&e.total!==f.value&&(f.value=e.total),e.page&&e.page!==u.value&&(u.value=e.page),e.pageSize&&e.pageSize!==d.value&&(d.value=e.pageSize),l?.(e)}});return t([u,d],()=>{c&&p.fetchData()},{flush:`post`}),{page:u,pageSize:d,total:f,...p}}function a(e){let t=[];return e.forEach(e=>{let{type:n,dataIndex:r,title:i,hidden:a}=e;if(n)return;let o=r,s={key:o,title:i||o,checked:!0,hidden:a,fixed:!1};t.push(s)}),t}function o(e,t){let n=new Map,r=new Map;e.forEach((e,t)=>{if(e.type){r.set(e.type,{column:e,index:t});return}else e.dataIndex&&n.set(e.dataIndex,e)});let i=[];return t.filter(e=>e.checked).forEach(e=>{let t=n.get(e.key);t&&i.push(t)}),r.forEach(({column:e,index:t})=>{t>=i.length?i.push(e):i.splice(t,0,e)}),i}export{i as usePaginatedTable,r as useTable};
+import{shallowRef as e,watch as t}from"vue";import{useTable as n}from"@soybeanjs/hooks";import{getTableColumnKey as r,isTableGroupColumn as i}from"@soybeanjs/headless/table";function a(e){return n({...e,getColumnChecks:s,getColumns:c})}function o(r){let{page:i=1,pageSize:a=10,fetchOnPaginationChange:o=!0,onFetched:l}=r,u=e(i),d=e(a),f=e(0),p=n({...r,pagination:!0,getColumnChecks:s,getColumns:c,onFetched:e=>{e.total&&e.total!==f.value&&(f.value=e.total),e.page&&e.page!==u.value&&(u.value=e.page),e.pageSize&&e.pageSize!==d.value&&(d.value=e.pageSize),l?.(e)}});return t([u,d],()=>{o&&p.fetchData()},{flush:`post`}),{page:u,pageSize:d,total:f,...p}}function s(e){let t=[];return e.forEach(e=>{if(i(e)){t.push(...s(e.children));return}let{type:n,title:a,hidden:o}=e;if(n||!e.dataIndex)return;let c=r(e),l={key:c,title:a||c,checked:!0,hidden:o,fixed:!1};t.push(l)}),t}function c(e,t){let n=new Map,a=new Map(t.map(e=>[e.key,e]));return e.forEach((e,t)=>{if(e.type){n.set(e.type,{column:e,index:t});return}}),e.reduce((e,o,s)=>{if(o.type){let t=n.get(o.type);return!t||t.index!==s||e.push(o),e}if(i(o)){let n=c(o.children,t);return n.length>0&&e.push({...o,children:n}),e}return a.get(r(o))?.checked!==!1&&e.push(o),e},[])}export{o as usePaginatedTable,a as useTable};

package/dist/components/table/index.d.ts

@@ -1,4 +1,4 @@
-import { BaseTableData, TableAlign, TableColumn, TableColumnType, TableEmits, TableProps, TableRadioProps, TableSelectionProps, TableSlots } from "./types.js";
+import { TableBaseData, TableColumn, TableColumnFilter, TableColumnFilterOption, TableColumnFilterValue, TableColumnType, TableEmits, TableExtendedUi, TableExtraUiSlot, TableFilterPopoverColumnMeta, TableFilterPopoverOption, TableFilterPopoverProps, TableProps, TableRadioProps, TableSlots, TableSortOrder } from "./types.js";
 import { _default } from "./table.vue.js";
 import { usePaginatedTable, useTable as useTable$1 } from "./hooks.js";
 import { TableCell as STableCell, TableRow as STableRow } from "@soybeanjs/headless";

package/dist/components/table/table-filter-popover.js

@@ -0,0 +1 @@
+import{miniSizeMap as e}from"../../theme/config.js";import"../../theme/index.js";import t from"../button/button.js";import n from"../button/button-icon.js";import r from"../checkbox/checkbox.js";import i from"../popover/popover.js";import a from"../input/input.js";import{Fragment as o,computed as s,createBlock as c,createCommentVNode as l,createElementBlock as u,createElementVNode as d,createTextVNode as f,createVNode as p,defineComponent as m,normalizeClass as h,openBlock as g,renderList as _,toDisplayString as v,withCtx as y}from"vue";const b=m({name:`STableFilterPopover`,__name:`table-filter-popover`,props:{size:{},ui:{},column:{},filterValue:{},filterValues:{},filterState:{},filtered:{type:Boolean},filterOptions:{},setFilterValue:{type:Function},setFilterValues:{type:Function},setFilterState:{type:Function},toggleFilterOption:{type:Function},isFilterOptionSelected:{type:Function},clearFilter:{type:Function}},setup(m){let b=m,x=s(()=>b.column.title??b.column.key??b.column.dataIndex??`column`),S=s(()=>{let e=b.filterValue.trim().toLowerCase();return e?b.filterOptions.filter(t=>t.label.toLowerCase().includes(e)||t.value.toLowerCase().includes(e)):b.filterOptions}),C=s(()=>S.value.length>0),w=s(()=>b.filterValues.length>0?`${b.filterValues.length} selected`:b.filterValue.trim().length>0?`Keyword active`:b.filterOptions.length>0?`${b.filterOptions.length} options`:`No filter options`),T=s(()=>b.filtered?`Edit filter for ${x.value}`:`Filter ${x.value}`),E=s(()=>`Search filter options for ${x.value}`),D=s(()=>e[b.size??`md`]);function O(e){b.setFilterValue(String(e??``))}return(e,s)=>(g(),c(i,{class:h(m.ui.filterPopup),size:m.size,placement:`bottom-end`,"show-arrow":!1},{trigger:y(()=>[p(n,{icon:`lucide:funnel`,"data-filtered":b.filtered?``:void 0,class:h(m.ui.filterTrigger),size:D.value,"aria-label":T.value,"aria-pressed":m.filtered||void 0},null,8,[`data-filtered`,`class`,`size`,`aria-label`,`aria-pressed`])]),default:y(()=>[p(a,{class:h(m.ui.filterSearch),size:D.value,"model-value":m.filterValue,"control-props":{"aria-label":E.value,placeholder:`Search ${x.value}`},"onUpdate:modelValue":O},null,8,[`class`,`size`,`model-value`,`control-props`]),m.filterOptions.length>0?(g(),u(`div`,{key:0,class:h(m.ui.filterOptions)},[(g(!0),u(o,null,_(S.value,e=>(g(),c(r,{key:e.value,class:h(m.ui.filterOption),size:D.value,disabled:e.disabled,"model-value":m.isFilterOptionSelected(e.value),label:e.label,ui:{label:m.ui.filterOptionLabel},"control-props":{"aria-label":`Select ${e.label}`},"onUpdate:modelValue":t=>m.toggleFilterOption(e.value)},null,8,[`class`,`size`,`disabled`,`model-value`,`label`,`ui`,`control-props`,`onUpdate:modelValue`]))),128)),C.value?l(`v-if`,!0):(g(),u(`div`,{key:0,class:h(m.ui.filterEmpty)},`No matching options`,2))],2)):l(`v-if`,!0),d(`div`,{class:h(m.ui.filterFooter)},[d(`span`,{class:h(m.ui.filterCount)},v(w.value),3),m.filtered?(g(),c(t,{key:0,variant:`ghost`,color:`accent`,"fit-content":``,size:D.value,class:h(m.ui.filterAction),onClick:m.clearFilter},{default:y(()=>[...s[0]||=[f(` Clear `,-1)]]),_:1},8,[`size`,`class`,`onClick`])):l(`v-if`,!0)],2)]),_:1},8,[`class`,`size`]))}});export{b as default};

package/dist/components/table/table-radio.js

@@ -1 +1 @@
-import{tableVariants as e}from"./variants.js";import{computed as t,createCommentVNode as n,createElementBlock as r,defineComponent as i,normalizeClass as a,openBlock as o}from"vue";const s=i({name:`STableRadio`,__name:`table-radio`,props:{size:{},checked:{type:Boolean}},setup(i){let s=i,c=t(()=>{let t=e({size:s.size});return{radioRoot:t.radioRoot(),radioIndicator:t.radioIndicator()}});return(e,t)=>(o(),r(`button`,{class:a(c.value.radioRoot)},[i.checked?(o(),r(`span`,{key:0,class:a(c.value.radioIndicator)},null,2)):n(`v-if`,!0)],2))}});export{s as default};
+import{tableVariants as e}from"./variants.js";import{computed as t,createCommentVNode as n,createElementBlock as r,defineComponent as i,normalizeClass as a,openBlock as o}from"vue";const s=[`aria-pressed`],c=i({name:`STableRadio`,__name:`table-radio`,props:{size:{},checked:{type:Boolean}},setup(i){let c=i,l=t(()=>{let t=e({size:c.size});return{radioRoot:t.radioRoot(),radioIndicator:t.radioIndicator()}});return(e,t)=>(o(),r(`button`,{type:`button`,"aria-pressed":i.checked,class:a(l.value.radioRoot)},[i.checked?(o(),r(`span`,{key:0,class:a(l.value.radioIndicator)},null,2)):n(`v-if`,!0)],10,s))}});export{c as default};

package/dist/components/table/table.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import t from"../button/button-icon.js";import n from"../checkbox/checkbox.js";import{tableVariants as r}from"./variants.js";import i from"./table-radio.js";import{getTableRowValueByDataIndex as a}from"./shared.js";import{Fragment as o,computed as s,createBlock as c,createCommentVNode as l,createElementBlock as u,createTextVNode as d,createVNode as f,defineComponent as p,guardReactiveProps as m,mergeProps as h,normalizeClass as g,normalizeProps as _,openBlock as v,renderList as y,renderSlot as b,toDisplayString as x,unref as S,useSlots as C,withCtx as w}from"vue";import{useControllableState as T,useSelection as E}from"@soybeanjs/headless/composables";import{TableBody as D,TableCell as O,TableContent as k,TableFooter as A,TableHead as j,TableHeader as M,TableRoot as N,TableRow as P,provideTableUi as F}from"@soybeanjs/headless";const I=p({name:`STable`,__name:`table`,props:{class:{},ui:{},size:{},columns:{},data:{},rowKey:{},bordered:{type:[Boolean,String]},striped:{type:Boolean},defaultExpanded:{},expanded:{},defaultExpandAll:{type:Boolean},contentProps:{},headerProps:{},bodyProps:{},footerProps:{},headProps:{},rowProps:{},cellProps:{},defaultSelected:{},selected:{},multiple:{default:!0}},emits:[`update:expanded`,`update:selected`],setup(p,{emit:I}){let L=p,R=I,z=C(),B=s(()=>e(r({size:L.size,bordered:L.bordered,striped:L.striped}),L.ui,{root:L.class})),V=T(()=>L.expanded,e=>{R(`update:expanded`,e??[])},H());function H(){return L.defaultExpandAll?L.data.map(e=>L.rowKey(e)):L.defaultExpanded??[]}let U=e=>{V.value.indexOf(e)>=0?V.value=V.value.filter(t=>t!==e):V.value=[...V.value,e]},{modelValue:W,onModelValueChange:G,setModelValue:K,resetModelValue:q,isMultiple:J,isValueSelected:Y}=E(s(()=>({modelValue:L.selected,defaultValue:L.defaultSelected,multiple:L.multiple})),e=>{R(`update:selected`,e)}),X=s(()=>!Array.isArray(W.value)||W.value.length===0?!1:W.value.length===L.data.length?!0:`indeterminate`),Z=e=>{Array.isArray(W.value)&&(e===!0?K(L.data.map(e=>L.rowKey(e))):q())},Q=s(()=>L.columns.filter(e=>!e.hidden)),$=s(()=>L.columns.some(e=>e.type===`expand`));return F(B),(e,r)=>(v(),c(S(N),null,{default:w(()=>[f(S(k),_(m(p.contentProps)),{default:w(()=>[f(S(M),_(m(p.headerProps)),{default:w(()=>[f(S(P),_(m(p.rowProps)),{default:w(()=>[(v(!0),u(o,null,y(Q.value,t=>(v(),u(o,null,[t.dataIndex?(v(),c(S(j),h({key:0,ref_for:!0},p.headProps,{key:t.dataIndex,align:t.align??`left`,style:{width:t.width}}),{default:w(()=>[b(e.$slots,`header-${t.dataIndex}`,{column:t},()=>[d(x(t.title),1)])]),_:2},1040,[`align`,`style`])):t.type?(v(),c(S(j),h({key:1,ref_for:!0},p.headProps,{key:`__${t.type}`,align:t.align??`center`,style:{width:t.width}}),{default:w(()=>[b(e.$slots,`header-${t.type}`,{column:t,multiple:S(J)},()=>[t.type===`index`?(v(),u(o,{key:0},[d(x(t.title??`#`),1)],64)):l(`v-if`,!0),t.type===`selection`?(v(),u(o,{key:1},[S(J)?(v(),c(n,{key:0,"model-value":X.value,class:g(B.value.selection),"onUpdate:modelValue":Z},null,8,[`model-value`,`class`])):l(`v-if`,!0)],64)):l(`v-if`,!0),t.type===`expand`?(v(),u(o,{key:2},[d(x(t.title),1)],64)):l(`v-if`,!0)])]),_:2},1040,[`align`,`style`])):l(`v-if`,!0)],64))),256))]),_:3},16)]),_:3},16),f(S(D),_(m(p.bodyProps)),{default:w(()=>[(v(!0),u(o,null,y(p.data,(r,s)=>(v(),u(o,{key:p.rowKey(r)},[f(S(P),h({ref_for:!0},p.rowProps,{"data-row":``}),{default:w(()=>[(v(!0),u(o,null,y(Q.value,f=>(v(),u(o,null,[f.dataIndex?(v(),c(S(O),h({key:0,ref_for:!0},p.cellProps,{key:f.dataIndex,align:f.align??`left`,style:{width:f.width}}),{default:w(()=>[b(e.$slots,f.dataIndex,{index:s,column:f,row:r,value:S(a)(r,f.dataIndex)},()=>[d(x(S(a)(r,f.dataIndex)),1)])]),_:2},1040,[`align`,`style`])):f.type?(v(),c(S(O),h({key:1,ref_for:!0},p.cellProps,{key:`__${f.type}`,align:f.align??`center`,style:{width:f.width}}),{default:w(()=>[f.type===`index`?b(e.$slots,`index`,{key:0,index:s,column:f,row:r},()=>[d(x(s+1),1)]):l(`v-if`,!0),f.type===`selection`?b(e.$slots,`selection`,{key:1,index:s,column:f,row:r,multiple:S(J)},()=>[S(J)?(v(),c(n,{key:0,class:g(B.value.selection),"model-value":S(Y)(p.rowKey(r)),"onUpdate:modelValue":e=>S(G)(p.rowKey(r))},null,8,[`class`,`model-value`,`onUpdate:modelValue`])):(v(),c(i,{key:1,size:p.size,checked:S(Y)(p.rowKey(r)),onClick:e=>S(G)(p.rowKey(r))},null,8,[`size`,`checked`,`onClick`]))]):l(`v-if`,!0),f.type===`expand`?b(e.$slots,`expand`,{key:2,index:s,column:f,row:r,expanded:S(V).includes(p.rowKey(r)),toggleExpand:()=>U(p.rowKey(r))},()=>[S(V).includes(p.rowKey(r))?(v(),c(t,{key:0,icon:`lucide:chevron-down`,onClick:e=>U(p.rowKey(r))},null,8,[`onClick`])):(v(),c(t,{key:1,icon:`lucide:chevron-right`,onClick:e=>U(p.rowKey(r))},null,8,[`onClick`]))]):l(`v-if`,!0)]),_:2},1040,[`align`,`style`])):l(`v-if`,!0)],64))),256))]),_:2},1040),$.value&&S(V).includes(p.rowKey(r))?(v(),c(S(P),h({key:0,ref_for:!0},p.rowProps,{"data-expanded-row":``}),{default:w(()=>[f(S(O),h({ref_for:!0},p.cellProps,{colspan:Q.value.length}),{default:w(()=>[b(e.$slots,`expanded-row`,{index:s,row:r})]),_:2},1040,[`colspan`])]),_:2},1040)):l(`v-if`,!0)],64))),128))]),_:3},16),z.footer?(v(),c(S(A),_(h({key:0},p.footerProps)),{default:w(()=>[b(e.$slots,`footer`,{columnSize:Q.value.length})]),_:3},16)):l(`v-if`,!0)]),_:3},16)]),_:3}))}});export{I as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import{miniSizeMap as t}from"../../theme/config.js";import"../../theme/index.js";import n from"../button/button-icon.js";import r from"../checkbox/checkbox.js";import i from"./table-filter-popover.js";import{tableVariants as a}from"./variants.js";import o from"./table-radio.js";import{computed as s,createBlock as c,createCommentVNode as l,createElementVNode as u,createSlots as d,createVNode as f,defineComponent as p,guardReactiveProps as m,mergeProps as h,normalizeClass as g,normalizeProps as _,openBlock as v,renderList as y,renderSlot as b,toHandlers as x,unref as S,useSlots as C,withCtx as w}from"vue";import{useForwardListeners as T,useOmitProps as E}from"@soybeanjs/headless/composables";import{TableCompact as D,provideTableUi as O}from"@soybeanjs/headless";const k=[`aria-label`,`aria-pressed`,`data-resizing`,`onPointerdown`,`onKeydown`],A=p({name:`STable`,__name:`table`,props:{class:{},size:{},ui:{},bordered:{type:Boolean},striped:{type:Boolean},columns:{},data:{},rowKey:{type:Function},defaultSortState:{},sortState:{},defaultFilterState:{},filterState:{},defaultColumnWidths:{},columnWidths:{},getChildren:{type:Function},indent:{},virtual:{type:Boolean},height:{},estimateSize:{type:[Number,Function]},virtualizerOptions:{},defaultExpanded:{},expanded:{},defaultExpandAll:{type:Boolean},contentProps:{},headerProps:{},bodyProps:{},footerProps:{},headProps:{},rowProps:{},cellProps:{},dir:{},defaultSelected:{},selected:{},multiple:{}},emits:[`update:sortState`,`update:filterState`,`update:columnWidths`,`update:expanded`,`update:selected`],setup(p,{emit:A}){let j=p,M=A,N=C(),P=E(j,[`class`,`ui`,`size`,`bordered`,`striped`]),F=T(M),I=s(()=>Object.keys(N)),L=s(()=>e(a({size:j.size,bordered:j.bordered,striped:j.striped}),j.ui,{root:j.class})),R=s(()=>t[j.size??`md`]),z=e=>e===`asc`?`lucide:arrow-up`:e===`desc`?`lucide:arrow-down`:`lucide:arrow-up-down`;return O(L),(e,t)=>(v(),c(S(D),h(S(P),x(S(F))),d({_:2},[y(I.value,t=>({name:t,fn:w(n=>[b(e.$slots,t,_(m(n)))])})),N[`header-selection`]?void 0:{name:`header-selection`,fn:w(({checked:e,disabled:t,multiple:n,updateChecked:i})=>[n?(v(),c(r,{key:0,disabled:t,"model-value":e,class:g(L.value.selection),"control-props":{"aria-label":`Select all rows`},"onUpdate:modelValue":i},null,8,[`disabled`,`model-value`,`class`,`onUpdate:modelValue`])):l(`v-if`,!0)]),key:`0`},N.selection?void 0:{name:`selection`,fn:w(({checked:e,multiple:t,ariaLabel:n,toggleSelect:i})=>[t?(v(),c(r,{key:0,class:g(L.value.selection),"model-value":e,"control-props":{"aria-label":n},"onUpdate:modelValue":e=>i()},null,8,[`class`,`model-value`,`control-props`,`onUpdate:modelValue`])):(v(),c(o,{key:1,size:p.size,checked:e,"aria-label":n,onClick:e=>i()},null,8,[`size`,`checked`,`aria-label`,`onClick`]))]),key:`1`},N[`header-sort`]?void 0:{name:`header-sort`,fn:w(({sortOrder:e,ariaLabel:t,toggleSort:r})=>[f(n,{icon:z(e),class:g(L.value.sortTrigger),size:R.value,"aria-label":t,"data-sorted":e?``:void 0,onClick:e=>r()},null,8,[`icon`,`class`,`size`,`aria-label`,`data-sorted`,`onClick`])]),key:`2`},N[`header-filter`]?void 0:{name:`header-filter`,fn:w(e=>[f(i,h(e,{ui:L.value,size:p.size}),null,16,[`ui`,`size`])]),key:`3`},N[`header-resize`]?void 0:{name:`header-resize`,fn:w(({resizing:e,ariaLabel:t,onPointerdown:n,onKeydown:r})=>[u(`button`,{type:`button`,class:g(L.value.resizeHandle),"aria-label":t,"aria-pressed":e,"data-resizing":e||void 0,onPointerdown:n,onKeydown:r},null,42,k)]),key:`4`},N[`tree-toggle`]?void 0:{name:`tree-toggle`,fn:w(({expanded:e,ariaLabel:t,toggleExpand:r})=>[f(n,{class:g(L.value.treeToggle),size:R.value,"aria-expanded":e,"aria-label":t,icon:e?`lucide:chevron-down`:`lucide:chevron-right`,onClick:e=>r()},null,8,[`class`,`size`,`aria-expanded`,`aria-label`,`icon`,`onClick`])]),key:`5`},N.expand?void 0:{name:`expand`,fn:w(({expanded:e,ariaLabel:t,hasChildren:r,toggleExpand:i})=>[r||N[`expanded-row`]?(v(),c(n,{key:0,icon:e?`lucide:chevron-down`:`lucide:chevron-right`,class:g(L.value.treeToggle),size:R.value,"aria-expanded":e,"aria-label":t,"data-expanded":e?``:void 0,onClick:e=>i()},null,8,[`icon`,`class`,`size`,`aria-expanded`,`aria-label`,`data-expanded`,`onClick`])):l(`v-if`,!0)]),key:`6`}]),1040))}});export{A as default};

package/dist/components/table/table.vue.d.ts

@@ -1,9 +1,13 @@
-import { BaseTableData, TableProps, TableSlots } from "./types.js";
-import * as vue from "vue";
+import { TableBaseData, TableProps, TableSlots } from "./types.js";
+import * as _$vue from "vue";
+import * as _$_soybeanjs_headless0 from "@soybeanjs/headless";
 
 //#region src/components/table/table.vue.d.ts
-declare const __VLS_export: <T extends BaseTableData = BaseTableData, R extends string | number = string | number, M extends boolean = boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue.PublicProps & __VLS_PrettifyLocal<TableProps<T, R, M> & {
+declare const __VLS_export: <T extends TableBaseData = TableBaseData, R extends string | number = string | number, M extends boolean = boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: _$vue.PublicProps & __VLS_PrettifyLocal<TableProps<T, R, M> & {
+    "onUpdate:sortState"?: ((state: _$_soybeanjs_headless0.TableSortState | undefined) => any) | undefined;
+    "onUpdate:filterState"?: ((state: _$_soybeanjs_headless0.TableFilterState) => any) | undefined;
+    "onUpdate:columnWidths"?: ((state: _$_soybeanjs_headless0.TableColumnWidthState) => any) | undefined;
     "onUpdate:expanded"?: ((expanded: R[]) => any) | undefined;
     "onUpdate:selected"?: ((selected: M extends true ? R[] : R | undefined) => any) | undefined;
   }> & (typeof globalThis extends {
@@ -12,8 +16,8 @@ declare const __VLS_export: <T extends BaseTableData = BaseTableData, R extends
   expose: (exposed: {}) => void;
   attrs: any;
   slots: TableSlots<T>;
-  emit: ((evt: "update:expanded", expanded: R[]) => void) & ((evt: "update:selected", selected: M extends true ? R[] : R | undefined) => void);
-}>) => vue.VNode & {
+  emit: ((evt: "update:sortState", state: _$_soybeanjs_headless0.TableSortState | undefined) => void) & ((evt: "update:filterState", state: _$_soybeanjs_headless0.TableFilterState) => void) & ((evt: "update:columnWidths", state: _$_soybeanjs_headless0.TableColumnWidthState) => void) & ((evt: "update:expanded", expanded: R[]) => void) & ((evt: "update:selected", selected: M extends true ? R[] : R | undefined) => void);
+}>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/table/types.d.ts

@@ -1,97 +1,39 @@
 import { ThemeSize } from "../../theme/types.js";
-import { Path, PathValue, TableBodyProps, TableCellProps, TableContentProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableUi } from "@soybeanjs/headless";
+import { ClassValue, UiClass } from "@soybeanjs/headless";
+import { TableBaseData, TableColumn, TableColumnFilter, TableColumnFilterOption, TableColumnFilterValue, TableColumnType, TableCompactEmits, TableCompactProps, TableCompactSlots, TableHeaderFilterSlotProps, TableSortOrder, TableUiSlot, TableUnifiedKey } from "@soybeanjs/headless/table";
 
 //#region src/components/table/types.d.ts
-type BaseTableData = Record<string, any>;
-type TableAlign = 'left' | 'center' | 'right';
-type TableColumnType = 'index' | 'selection' | 'expand';
-interface TableColumn<T = BaseTableData> {
-  type?: TableColumnType;
-  dataIndex?: Path<T>;
-  title?: string;
-  align?: TableAlign;
-  width?: string;
-  hidden?: boolean;
-}
-interface TableSelectionProps<R extends string | number = string | number, M extends boolean = false> {
-  defaultSelected?: M extends true ? R[] : R;
-  selected?: M extends true ? R[] : R;
-  multiple?: M;
-}
-interface TableProps<T extends BaseTableData = BaseTableData, R extends string | number = string | number, M extends boolean = false> extends TableRootProps, TableSelectionProps<R, M> {
+type TableExtraUiSlot = 'selection' | 'filterTrigger' | 'filterPopup' | 'filterSearch' | 'filterOptions' | 'filterOption' | 'filterOptionLabel' | 'filterFooter' | 'filterCount' | 'filterAction' | 'filterEmpty';
+type TableExtendedUi = UiClass<TableUiSlot | TableExtraUiSlot>;
+interface TableProps<T extends TableBaseData = TableBaseData, R extends string | number = string | number, M extends boolean = false> extends TableCompactProps<T, R, M> {
   /**
    * Additional class names to apply to the table.
    */
-  class?: string;
-  ui?: Partial<TableUi>;
+  class?: ClassValue;
   size?: ThemeSize;
-  columns: TableColumn<T>[];
-  data: T[];
-  rowKey: (row: T) => R;
-  bordered?: boolean | 'all';
+  ui?: Partial<TableExtendedUi>;
+  bordered?: boolean;
   striped?: boolean;
-  defaultExpanded?: R[];
-  expanded?: R[];
-  defaultExpandAll?: boolean;
-  contentProps?: TableContentProps;
-  headerProps?: TableHeaderProps;
-  bodyProps?: TableBodyProps;
-  footerProps?: TableFooterProps;
-  headProps?: TableHeadProps;
-  rowProps?: TableRowProps;
-  cellProps?: TableCellProps;
 }
-type TableEmits<R extends string | number, M extends boolean = false> = {
-  'update:expanded': [expanded: R[]];
-  'update:selected': [selected: M extends true ? R[] : R | undefined];
-};
-type TableSlots<T extends BaseTableData> = { [K in `header-${Path<T>}`]?: (props: {
-  column: TableColumn<T>;
-}) => any } & { [K in Path<T>]?: (props: {
-  index: number;
-  column: TableColumn<T>;
-  row: T;
-  value: PathValue<T, K>;
-}) => any } & {
-  'header-index'?: (props: {
-    column: TableColumn<T>;
-  }) => any;
-  'header-selection'?: (props: {
-    column: TableColumn<T>;
-    multiple: boolean;
-  }) => any;
-  'header-expand'?: (props: {
-    column: TableColumn<T>;
-  }) => any;
-  index?: (props: {
-    index: number;
-    column: TableColumn<T>;
-    row: T;
-  }) => any;
-  selection?: (props: {
-    index: number;
-    column: TableColumn<T>;
-    row: T;
-    multiple: boolean;
-  }) => any;
-  expand?: (props: {
-    index: number;
-    column: TableColumn<T>;
-    row: T;
-    expanded: boolean;
-    toggleExpand: () => void;
-  }) => any;
-  'expanded-row'?: (props: {
-    index: number;
-    row: T;
-  }) => any;
-  footer?: (props: {
-    columnSize: number;
-  }) => any;
-};
+type TableEmits<R extends TableUnifiedKey = TableUnifiedKey, M extends boolean = false> = TableCompactEmits<R, M>;
+type TableSlots<T extends TableBaseData = TableBaseData> = TableCompactSlots<T>;
 interface TableRadioProps {
   size?: ThemeSize;
   checked?: boolean;
 }
+interface TableFilterPopoverColumnMeta {
+  title?: string;
+  key?: string;
+  dataIndex?: string;
+}
+interface TableFilterPopoverOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+interface TableFilterPopoverProps<T extends TableBaseData = TableBaseData> extends TableHeaderFilterSlotProps<T> {
+  size?: ThemeSize;
+  ui: TableExtendedUi;
+}
 //#endregion
-export { BaseTableData, TableAlign, TableColumn, TableColumnType, TableEmits, TableProps, TableRadioProps, TableSelectionProps, TableSlots };
+export { type TableBaseData, type TableColumn, type TableColumnFilter, type TableColumnFilterOption, type TableColumnFilterValue, type TableColumnType, TableEmits, TableExtendedUi, TableExtraUiSlot, TableFilterPopoverColumnMeta, TableFilterPopoverOption, TableFilterPopoverProps, TableProps, TableRadioProps, TableSlots, type TableSortOrder };

package/dist/components/table/variants.js

@@ -1 +1 @@
-import{tv as e}from"tailwind-variants";const t=e({slots:{root:`relative overflow-auto`,content:`w-full`,header:`sticky top-0 left-0 z-10 bg-accent`,body:``,footer:`bg-accent font-medium`,row:`data-[row]:hover:bg-accent transition-colors`,head:`text-foreground font-medium whitespace-nowrap`,cell:`whitespace-nowrap`,selection:`text-foreground`,radioRoot:[`peer relative shrink-0 rounded-full border border-solid shadow cursor-pointer transition-all-150`,`border-primary focus-visible:ring-primary/30`,`focus-visible:outline-none focus-visible:ring-3  focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50`],radioIndicator:`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-1/2 bg-primary rounded-full`},variants:{size:{xs:{root:`text-2xs`,caption:`py-2`,head:`h-8 px-1.5`,cell:`p-1.5`,radioRoot:`w-3 h-3`},sm:{root:`text-xs`,caption:`py-2.5`,head:`h-9 px-1.75`,cell:`p-1.75`,radioRoot:`w-3.5 h-3.5`},md:{root:`text-sm`,caption:`py-3`,head:`h-10 px-2`,cell:`p-2`,radioRoot:`w-4 h-4`},lg:{root:`text-base`,caption:`py-3.5`,head:`h-12 px-2.5`,cell:`p-2.5`,radioRoot:`w-4.5 h-4.5`},xl:{root:`text-lg`,caption:`py-4`,head:`h-14 px-3`,cell:`p-3`,radioRoot:`w-5 h-5`},"2xl":{root:`text-xl`,caption:`py-4.5`,head:`h-16 px-3.5`,cell:`p-3.5`,radioRoot:`w-6 h-6`}},bordered:{all:{content:`border border-border border-collapse`,head:`border border-border`,cell:`border border-border`},true:{header:`[&_tr]:border`,body:`[&_tr]:border-x`,footer:`[&>tr]:border-x border-t`,row:`border-b`},false:{header:`[&_tr]:border-b`,body:`[&_tr:last-child]:border-0`,footer:`[&>tr]:last:border-b-0 border-t`,row:`border-b`}},striped:{true:{row:`data-[row]:even:bg-accent`}}},defaultVariants:{size:`md`,bordered:!1,striped:!1}});export{t as tableVariants};
+import{tv as e}from"tailwind-variants";const t=e({slots:{root:`relative overflow-auto rounded-md bg-accent`,content:`min-w-full w-max border-spacing-0`,header:`sticky top-0 start-0 z-10 [&>tr:last-child]:border-b-0`,body:[`[&>tr:first-child>td:first-child]:rounded-tl-md [&>tr:first-child>td:last-child]:rounded-tr-md`,`[&>tr:last-child>td:first-child]:rounded-bl-md [&>tr:last-child>td:last-child]:rounded-br-md`],footer:`font-medium [&>tr:last-child]:border-b-0`,row:`bg-background border-b hover:bg-primary-foreground transition-colors`,head:`box-border bg-accent text-foreground relative font-medium whitespace-nowrap`,cell:`box-border whitespace-nowrap data-[fixed]:bg-background`,fixed:[`relative`,`data-[fixed-side=start]:after:pointer-events-none data-[fixed-side=start]:after:absolute data-[fixed-side=start]:after:bottom-0 data-[fixed-side=start]:after:end-0 data-[fixed-side=start]:after:top-0 data-[fixed-side=start]:after:w-4 data-[fixed-side=start]:after:bg-gradient-to-l data-[fixed-side=start]:after:from-foreground/8 data-[fixed-side=start]:after:to-transparent data-[fixed-side=start]:after:content-empty`,`data-[fixed-side=end]:before:pointer-events-none data-[fixed-side=end]:before:absolute data-[fixed-side=end]:before:bottom-0 data-[fixed-side=end]:before:start-0 data-[fixed-side=end]:before:top-0 data-[fixed-side=end]:before:w-4 data-[fixed-side=end]:before:bg-gradient-to-r data-[fixed-side=end]:before:from-foreground/8 data-[fixed-side=end]:before:to-transparent data-[fixed-side=end]:before:content-empty`],resizeHandle:[`absolute end-0 top-1/2 w-3 h-2/3 -translate-y-1/2 rounded bg-transparent`,`cursor-col-resize border-none touch-none select-none`,`after:bg-border hover:after:bg-primary data-[resizing]:after:bg-primary focus-visible:after:bg-primary`,`focus-visible:outline-none focus-visible:ring-ring/40 focus-visible:ring-2`,`after:absolute after:bottom-0 after:end-0 after:top-0 after:w-px after:rounded-full after:content-empty`],treeCell:`flex min-w-0 items-center gap-1`,treeToggle:``,treeTogglePlaceholder:`inline-block size-5 shrink-0`,sortTrigger:`absolute top-1/2 -translate-y-1/2 data-[sorted]:text-primary`,filterTrigger:`absolute top-1/2 -translate-y-1/2 data-[filtered]:text-primary`,filterInput:``,filterPopup:``,filterSearch:``,filterOptions:`flex flex-col overflow-auto`,filterOption:`w-full rounded-md hover:bg-accent`,filterOptionLabel:`min-w-0 flex-1 truncate`,filterFooter:`flex items-center justify-between border-t border-border`,filterCount:`text-muted-foreground`,filterAction:[`text-xs font-medium text-primary rounded-md border-none bg-transparent px-2 py-1`,`transition-colors hover:bg-accent focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2`],filterEmpty:`text-muted-foreground py-6 text-center text-xs`,selection:`text-foreground`,radioRoot:[`peer relative shrink-0 rounded-full border border-solid shadow cursor-pointer transition-all-150`,`border-primary focus-visible:ring-primary/30`,`focus-visible:outline-none focus-visible:ring-3  focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50`],radioIndicator:`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-1/2 bg-primary rounded-full`},variants:{size:{xs:{root:`px-0.75 pb-0.75 text-2xs`,caption:`py-2`,head:`h-8 px-1.5`,cell:`p-1.5`,radioRoot:`w-3 h-3`,sortTrigger:`end-1 p-0.75`,filterTrigger:`end-1`,filterPopup:`p-1.5`,filterOptions:`max-h-50 gap-0.75 py-1.5`,filterOption:`p-0.75`,filterFooter:`pt-1`,filterCount:`text-3xs leading-4`},sm:{root:`px-0.875 pb-0.875 text-xs`,caption:`py-2.5`,head:`h-9 px-1.75`,cell:`p-1.75`,radioRoot:`w-3.5 h-3.5`,sortTrigger:`end-1.25 p-0.875`,filterTrigger:`end-1.25`,filterPopup:`p-1.75`,filterOptions:`max-h-55 gap-0.875 py-2`,filterOption:`p-0.875`,filterFooter:`pt-1.25`,filterCount:`text-2xs leading-5`},md:{root:`px-1 pb-1 text-sm`,caption:`py-3`,head:`h-10 px-2`,cell:`p-2`,radioRoot:`w-4 h-4`,sortTrigger:`end-1.5 p-1`,filterTrigger:`end-1.5`,filterPopup:`p-2`,filterOptions:`max-h-60 gap-1 py-2.5`,filterOption:`p-1`,filterFooter:`pt-1.5`,filterCount:`text-xs leading-6`},lg:{root:`px-1.25 pb-1.25 text-base`,caption:`py-3.5`,head:`h-12 px-2.5`,cell:`p-2.5`,radioRoot:`w-4.5 h-4.5`,sortTrigger:`end-1.75 p-1.25`,filterTrigger:`end-1.75`,filterPopup:`p-2.5`,filterOptions:`max-h-65 gap-1.25 py-3`,filterOption:`p-1.25`,filterFooter:`pt-1.75`,filterCount:`text-sm leading-7`},xl:{root:`px-1.5 pb-1.5 text-lg`,caption:`py-4`,head:`h-14 px-3`,cell:`p-3`,radioRoot:`w-5 h-5`,sortTrigger:`end-2 p-1.5`,filterTrigger:`end-2`,filterPopup:`p-3`,filterOptions:`max-h-70 gap-1.5 py-3.5`,filterOption:`p-1.5`,filterFooter:`pt-2`,filterCount:`text-base leading-8`},"2xl":{root:`px-2 pb-2 text-xl`,caption:`py-4.5`,head:`h-16 px-3.5`,cell:`p-3.5`,radioRoot:`w-6 h-6`,sortTrigger:`end-2.5 p-1.75`,filterTrigger:`end-2.5`,filterPopup:`p-3.5`,filterOptions:`max-h-75 gap-1.75 py-4`,filterOption:`p-1.75`,filterFooter:`pt-2.5`,filterCount:`text-lg leading-9`}},bordered:{true:{cell:`border-l border-border first:border-l-0`}},striped:{true:{row:`data-[row]:even:bg-accent`}}},defaultVariants:{size:`md`,striped:!1}});export{t as tableVariants};

package/dist/components/tabs/tabs.vue.d.ts

@@ -1,10 +1,10 @@
 import { TabsOptionData, TabsProps } from "./types.js";
-import * as vue from "vue";
+import * as _$vue from "vue";
 import { AcceptableValue } from "@soybeanjs/headless";
 
 //#region src/components/tabs/tabs.vue.d.ts
 declare const __VLS_export: <T extends AcceptableValue = AcceptableValue, S extends TabsOptionData<NonNullable<T>> = TabsOptionData<NonNullable<T>>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue.PublicProps & __VLS_PrettifyLocal<TabsProps<T, S> & {
+  props: _$vue.PublicProps & __VLS_PrettifyLocal<TabsProps<T, S> & {
     "onUpdate:modelValue"?: ((payload: NonNullable<T>) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -21,7 +21,7 @@ declare const __VLS_export: <T extends AcceptableValue = AcceptableValue, S exte
     }) => any;
   };
   emit: (evt: "update:modelValue", payload: NonNullable<T>) => void;
-}>) => vue.VNode & {
+}>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/tabs/variants.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants0 from "tailwind-variants";
+import * as _$tailwind_variants0 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/components/tabs/variants.d.ts
-declare const tabsVariants: tailwind_variants0.TVReturnType<{
+declare const tabsVariants: _$tailwind_variants0.TVReturnType<{
   size: {
     xs: {
       root: string;
@@ -148,7 +148,7 @@ declare const tabsVariants: tailwind_variants0.TVReturnType<{
   indicator: string;
   indicatorContent: string;
   content: string;
-}, tailwind_variants0.TVReturnType<{
+}, _$tailwind_variants0.TVReturnType<{
   size: {
     xs: {
       root: string;

package/dist/components/tag/tag.vue.d.ts

@@ -1,5 +1,5 @@
 import { TagProps } from "./types.js";
-import * as vue from "vue";
+import * as _$vue from "vue";
 
 //#region src/components/tag/tag.vue.d.ts
 declare var __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {
@@ -14,13 +14,13 @@ type __VLS_Slots = {} & {
 } & {
   close?: (props: typeof __VLS_16) => any;
 };
-declare const __VLS_base: vue.DefineComponent<TagProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+declare const __VLS_base: _$vue.DefineComponent<TagProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:open": (open: boolean) => any;
-}, string, vue.PublicProps, Readonly<TagProps> & Readonly<{
+}, string, _$vue.PublicProps, Readonly<TagProps> & Readonly<{
   "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
   open: boolean;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/tag/variants.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants0 from "tailwind-variants";
+import * as _$tailwind_variants0 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/components/tag/variants.d.ts
-declare const tagVariants: tailwind_variants0.TVReturnType<{
+declare const tagVariants: _$tailwind_variants0.TVReturnType<{
   color: {
     primary: string;
     destructive: string;
@@ -64,7 +64,7 @@ declare const tagVariants: tailwind_variants0.TVReturnType<{
     auto: string;
     rounded: string;
   };
-}, undefined, tailwind_variants0.TVReturnType<{
+}, undefined, _$tailwind_variants0.TVReturnType<{
   color: {
     primary: string;
     destructive: string;

package/dist/components/tags-input/index.d.ts

@@ -0,0 +1,5 @@
+import { TagsInputEmits, TagsInputProps } from "./types.js";
+import { _default } from "./tags-input.vue.js";
+import { _default as _default$1 } from "./tags-input-item-delete.vue.js";
+import { TagsInputAcceptableValue, TagsInputClear as STagsInputClear, TagsInputClearProps, TagsInputInput as STagsInputInput, TagsInputInputProps, TagsInputItem as STagsInputItem, TagsInputItemDeleteProps as TagsInputItemDeleteProps$1, TagsInputItemProps, TagsInputItemText as STagsInputItemText, TagsInputItemTextProps, TagsInputRootEmits, TagsInputRootProps, TagsInputUi, TagsInputUiSlot } from "@soybeanjs/headless/tags-input";
+export { STagsInputClear, STagsInputInput, STagsInputItem, STagsInputItemText, type TagsInputAcceptableValue, type TagsInputClearProps, type TagsInputInputProps, type TagsInputItemDeleteProps$1 as TagsInputItemDeleteProps, type TagsInputItemProps, type TagsInputItemTextProps, type TagsInputRootEmits, type TagsInputRootProps, type TagsInputUi, type TagsInputUiSlot };

package/dist/components/tags-input/index.js

@@ -0,0 +1 @@
+import"./tags-input.js";import"./tags-input-item-delete.js";import{TagsInputClear as e,TagsInputInput as t,TagsInputItem as n,TagsInputItemText as r}from"@soybeanjs/headless/tags-input";export{e as STagsInputClear,t as STagsInputInput,n as STagsInputItem,r as STagsInputItemText};

package/dist/components/tags-input/tags-input-item-delete.js

@@ -0,0 +1 @@
+import e from"../icon/icon.js";import{createBlock as t,createVNode as n,defineComponent as r,guardReactiveProps as i,normalizeProps as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";import{TagsInputItemDelete as u}from"@soybeanjs/headless";const d=r({name:`STagsInputItemDelete`,__name:`tags-input-item-delete`,props:{asChild:{type:Boolean},as:{}},setup(r){let d=r;return(r,f)=>(o(),t(c(u),a(i(d)),{default:l(()=>[s(r.$slots,`default`,{},()=>[n(e,{icon:`lucide:x`,"aria-hidden":!0})])]),_:3},16))}});export{d as default};

package/dist/components/tags-input/tags-input-item-delete.vue.d.ts

@@ -0,0 +1,18 @@
+import * as _$vue from "vue";
+import { TagsInputItemDeleteProps } from "@soybeanjs/headless/tags-input";
+
+//#region src/components/tags-input/tags-input-item-delete.vue.d.ts
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<TagsInputItemDeleteProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<TagsInputItemDeleteProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1 @@
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{tagsInputVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot as l,toHandlers as u,unref as d,withCtx as f}from"vue";import{useForwardListeners as p,useOmitProps as m}from"@soybeanjs/headless/composables";import{TagsInputRoot as h,provideTagsInputUi as g}from"@soybeanjs/headless";const _=i({name:`STagsInput`,__name:`tags-input`,props:{class:{},size:{},ui:{},id:{},modelValue:{},defaultValue:{},addOnPaste:{type:Boolean},addOnTab:{type:Boolean},addOnBlur:{type:Boolean},duplicate:{type:Boolean},disabled:{type:Boolean},delimiter:{},dir:{},max:{},convertValue:{type:Function},displayValue:{type:Function},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`invalid`,`addTag`,`removeTag`],setup(i,{emit:_}){let v=i,y=_,b=m(v,[`class`,`size`,`ui`,`onInvalid`]),x=p(y);return g(n(()=>e(t({size:v.size}),v.ui,{root:v.class}))),(e,t)=>(c(),r(d(h),o(d(b),u(d(x))),{default:f(t=>[l(e.$slots,`default`,s(a(t)))]),_:3},16))}});export{_ as default};

package/dist/components/tags-input/tags-input.vue.d.ts

@@ -0,0 +1,29 @@
+import { TagsInputProps } from "./types.js";
+import * as _$vue from "vue";
+import { TagsInputAcceptableValue } from "@soybeanjs/headless";
+
+//#region src/components/tags-input/tags-input.vue.d.ts
+declare const __VLS_export: <T extends TagsInputAcceptableValue = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: _$vue.PublicProps & __VLS_PrettifyLocal<TagsInputProps<T> & {
+    "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    onInvalid?: ((value: T) => any) | undefined;
+    onAddTag?: ((value: T) => any) | undefined;
+    onRemoveTag?: ((value: T) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: {
+    default?: (props: {
+      modelValue: TagsInputAcceptableValue[] | undefined;
+    }) => any;
+  };
+  emit: ((evt: "update:modelValue", value: T[]) => void) & ((evt: "invalid", value: T) => void) & ((evt: "addTag", value: T) => void) & ((evt: "removeTag", value: T) => void);
+}>) => _$vue.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+//#endregion
+export { _default };