@flux-ui/components 3.0.0-next.52 → 3.0.0-next.54

package/dist/component/FluxBorderShine.vue.d.ts

@@ -44,10 +44,10 @@ declare const _default: DefineComponent<ExtractPropTypes<{
         type: NumberConstructor;
     };
 }>> & Readonly<{}>, {
+    offset: number;
     duration: number;
     width: number;
     colors: string[];
-    offset: number;
     radius: string | number;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/component/FluxKanban.vue.d.ts

@@ -0,0 +1,25 @@
+import { FluxKanbanMoveEvent } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?(): any;
+    }> & {
+        default?(): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    move: (args_0: FluxKanbanMoveEvent) => any;
+}, string, PublicProps, Readonly<{}> & Readonly<{
+    onMove?: (args_0: FluxKanbanMoveEvent) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxKanbanCard.vue.d.ts

@@ -0,0 +1,28 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly cardId: string | number;
+    readonly columnId: string | number;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?(): any;
+    }> & {
+        default?(): any;
+    };
+    refs: {
+        root: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    root: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxKanbanColumn.vue.d.ts

@@ -0,0 +1,28 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly columnId: string | number;
+    readonly label: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?(): any;
+        header?(): any;
+        actions?(): any;
+    }> & {
+        default?(): any;
+        header?(): any;
+        actions?(): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/index.d.ts

@@ -80,6 +80,9 @@ export { default as FluxGridColumn } from './FluxGridColumn.vue';
 export { default as FluxGridPattern } from './FluxGridPattern.vue';
 export { default as FluxIcon } from './FluxIcon.vue';
 export { default as FluxInfo } from './FluxInfo.vue';
+export { default as FluxKanban } from './FluxKanban.vue';
+export { default as FluxKanbanCard } from './FluxKanbanCard.vue';
+export { default as FluxKanbanColumn } from './FluxKanbanColumn.vue';
 export { default as FluxInfoStack } from './FluxInfoStack.vue';
 export { default as FluxItem } from './FluxItem.vue';
 export { default as FluxItemActions } from './FluxItemActions.vue';

package/dist/component/primitive/FilterOptionBase.vue.d.ts

@@ -11,10 +11,10 @@ type __VLS_PublicProps = {
     'searchQuery'?: string;
 } & __VLS_Props;
 declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    select: (args_0: any) => any;
+    select: (args_0: FluxFilterValueSingle) => any;
     "update:searchQuery": (value: string) => any;
 }, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSelect?: (args_0: any) => any;
+    onSelect?: (args_0: FluxFilterValueSingle) => any;
     "onUpdate:searchQuery"?: (value: string) => any;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/component/primitive/SelectBase.vue.d.ts

@@ -1,4 +1,4 @@
-import { FluxFormSelectOption, FluxFormSelectOptions, FluxDirection, FluxFormInputBaseProps, FluxAutoCompleteType, FluxIconName, FluxInputMask, FluxInputType, FluxTo, FluxPressableType, FluxButtonProps } from '@flux-ui/types';
+import { FluxFormSelectOption, FluxFormSelectOptions, FluxDirection, FluxFormInputBaseProps, FluxAutoCompleteType, FluxIconName, FluxInputMask, FluxInputType, FluxPressableType, FluxTo, FluxButtonProps } from '@flux-ui/types';
 import { ComponentPublicInstance, nextTick, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, ComponentInternalInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, Attrs, Slot, ComponentOptionsBase, GlobalComponents, GlobalDirectives, DebuggerEvent, WatchOptions, WatchStopHandle, ComponentCustomProperties, VNode, CreateComponentPublicInstanceWithMixins } from 'vue';
 import { OnCleanup } from '@vue/reactivity';
 type __VLS_Props = {
@@ -203,10 +203,10 @@ declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, Compo
         $props: Partial<{}> & Omit<{
             readonly label?: string;
             readonly isLoading?: boolean;
+            readonly type?: FluxPressableType;
             readonly disabled?: boolean;
             readonly to?: FluxTo;
             readonly tabindex?: string | number;
-            readonly type?: FluxPressableType;
             readonly href?: string;
             readonly rel?: string;
             readonly target?: string;

package/dist/composable/private/useKanban.d.ts

@@ -0,0 +1,7 @@
+import { FluxKanbanMoveEvent } from '@flux-ui/types';
+import { FluxKanbanInjection } from '../../data/di';
+/**
+ * Internal composable for managing kanban drag-and-drop state.
+ * Provides card registration, drag tracking, and drop target management.
+ */
+export declare function useKanban(onMove: (event: FluxKanbanMoveEvent) => void): FluxKanbanInjection;

package/dist/data/di.d.ts

@@ -2,12 +2,32 @@ import { FluxFilterState, FluxFilterValue } from '@flux-ui/types';
 import { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
 export declare const FluxAdaptiveGroupInjectionKey: InjectionKey<FluxAdaptiveGroupInjection>;
 export declare const FluxDisabledInjectionKey: InjectionKey<Ref<boolean>>;
+export declare const FluxKanbanInjectionKey: InjectionKey<FluxKanbanInjection>;
 export declare const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupInjection>;
 export declare const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection>;
 export declare const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection>;
 export declare const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection>;
 export declare const FluxTableInjectionKey: InjectionKey<FluxTableInjection>;
 export declare const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection>;
+export type FluxKanbanDragState = {
+    readonly cardId: string | number;
+    readonly fromColumnId: string | number;
+    readonly dropColumnId: string | number | null;
+    readonly beforeCardId: string | number | null;
+};
+export type FluxKanbanInjection = {
+    readonly dragState: Ref<FluxKanbanDragState | null>;
+    registerCard(element: Element, cardId: string | number): void;
+    unregisterCard(element: Element): void;
+    getCardInfo(element: Element): {
+        readonly cardId: string | number;
+    } | undefined;
+    startDrag(cardId: string | number, fromColumnId: string | number): void;
+    endDrag(): void;
+    updateDropTarget(columnId: string | number, beforeCardId: string | number | null): void;
+    clearDropTarget(): void;
+    commitDrop(): void;
+};
 export type FluxAdaptiveGroupChild = {
     readonly priority: Ref<number>;
     readonly desiredDefaultWidth: Ref<number>;

package/dist/index.css

@@ -5242,6 +5242,90 @@ tfoot .table-cell {
 
 .info-body {
   align-items: center;
+}.kanban {
+  display: flex;
+  flex-flow: row;
+  gap: 15px;
+  overflow-x: auto;
+  padding-bottom: 6px;
+}.kanban-card {
+  position: relative;
+  padding: 12px;
+  background: var(--gray-25);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--radius);
+  cursor: grab;
+  transition: opacity 180ms var(--swift-out), box-shadow 180ms var(--swift-out);
+  user-select: none;
+}
+.kanban-card:active {
+  cursor: grabbing;
+}
+.kanban-card:hover {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.is-dragging {
+  opacity: 0.4;
+  cursor: grabbing;
+}
+
+.is-drop-before::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  top: -6px;
+  height: 2px;
+  border-radius: 999px;
+  background: var(--primary-500);
+}.kanban-column {
+  display: flex;
+  flex-flow: column;
+  flex-shrink: 0;
+  width: 280px;
+  background: var(--gray-100);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.kanban-column-header {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 12px 15px;
+  border-bottom: 1px solid var(--gray-200);
+}
+
+.kanban-column-label {
+  flex: 1;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--foreground);
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+}
+
+.kanban-column-body {
+  display: flex;
+  flex-flow: column;
+  gap: 9px;
+  padding: 9px;
+  min-height: 60px;
+  flex: 1;
+  overflow-y: auto;
+  transition: background 180ms var(--swift-out);
+}
+
+.is-over .kanban-column-body {
+  background: rgb(from var(--primary-500) r g b/0.06);
+}
+
+.kanban-drop-indicator {
+  height: 2px;
+  border-radius: 999px;
+  background: var(--primary-500);
+  flex-shrink: 0;
 }.item {
   display: flex;
   flex-flow: row nowrap;