@flux-ui/components 3.0.0-next.31 → 3.0.0-next.33

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

@@ -0,0 +1,209 @@
+import { FluxColor, FluxFormTreeViewSelectOption, FluxFormTreeViewSelectValue, FluxDirection, FluxAutoCompleteType, FluxIconName, FluxInputMask, FluxInputType } from '@flux-ui/types';
+import { ComponentPublicInstance, nextTick, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, ComponentInternalInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentOptionsBase, GlobalComponents, GlobalDirectives, DebuggerEvent, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, CreateComponentPublicInstanceWithMixins } from 'vue';
+import { OnCleanup } from '@vue/reactivity';
+type __VLS_Props = {
+    readonly disabled?: boolean;
+    readonly isMultiple?: boolean;
+    readonly isSearchable?: boolean;
+    readonly levelColors?: (FluxColor | string)[];
+    readonly options: FluxFormTreeViewSelectOption[];
+    readonly placeholder?: string;
+};
+type __VLS_PublicProps = {
+    modelValue: FluxFormTreeViewSelectValue;
+} & __VLS_Props;
+declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (value: FluxFormTreeViewSelectValue) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: FluxFormTreeViewSelectValue) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    anchor: {
+        $: ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly tagName: keyof HTMLElementTagNameMap;
+        } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: Slot<any>;
+        }>;
+        $root: ComponentPublicInstance | null;
+        $parent: ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: ComponentOptionsBase<Readonly<{
+            readonly tagName: keyof HTMLElementTagNameMap;
+        }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+            renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((
+        /** @type { [typeof AnchorPopup, typeof AnchorPopup, ] } */ ...args: any) => any)>(source: T, cb: T extends ((...args: any) => infer R) ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{
+        readonly tagName: keyof HTMLElementTagNameMap;
+    }> & Readonly<{}>, never> & ShallowUnwrapRef<{}> & {} & ComponentCustomProperties & {} & {
+        $slots: Readonly<{
+            default(): any;
+        }> & {
+            default(): any;
+        };
+    };
+    anchorPopup: {
+        $: ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<{
+            readonly anchor?: ComponentPublicInstance | HTMLElement | null;
+            readonly direction?: FluxDirection;
+            readonly margin?: number;
+            readonly position?: "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
+            readonly useAnchorWidth?: boolean;
+        } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            popup: HTMLDivElement;
+        };
+        $slots: Readonly<{
+            [name: string]: Slot<any>;
+        }>;
+        $root: ComponentPublicInstance | null;
+        $parent: ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: HTMLDivElement;
+        $options: ComponentOptionsBase<Readonly<{
+            readonly anchor?: ComponentPublicInstance | HTMLElement | null;
+            readonly direction?: FluxDirection;
+            readonly margin?: number;
+            readonly position?: "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
+            readonly useAnchorWidth?: boolean;
+        }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+            renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((
+        /** @type { [typeof AnchorPopup, typeof AnchorPopup, ] } */ ...args: any) => any)>(source: T, cb: T extends ((...args: any) => infer R) ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{
+        readonly anchor?: ComponentPublicInstance | HTMLElement | null;
+        readonly direction?: FluxDirection;
+        readonly margin?: number;
+        readonly position?: "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
+        readonly useAnchorWidth?: boolean;
+    }> & Readonly<{}>, never> & ShallowUnwrapRef<{}> & {} & ComponentCustomProperties & {} & {
+        $slots: Readonly<{
+            default(): any;
+        }> & {
+            default(): any;
+        };
+    };
+    searchInput: CreateComponentPublicInstanceWithMixins<Readonly<{
+        modelValue?: object | string | number | null;
+    } & {
+        readonly autoComplete?: FluxAutoCompleteType;
+        readonly autoFocus?: boolean;
+        readonly iconLeading?: FluxIconName;
+        readonly iconTrailing?: FluxIconName;
+        readonly disabled?: boolean;
+        readonly isCondensed?: boolean;
+        readonly isLoading?: boolean;
+        readonly isReadonly?: boolean;
+        readonly isSecondary?: boolean;
+        readonly max?: string | number;
+        readonly maxLength?: number;
+        readonly min?: string | number;
+        readonly pattern?: FluxInputMask;
+        readonly placeholder?: string;
+        readonly step?: number;
+        readonly type?: FluxInputType;
+    }> & Readonly<{
+        onBlur?: () => any;
+        onFocus?: () => any;
+        onShowPicker?: () => any;
+        "onUpdate:modelValue"?: (value: string | number | object) => any;
+    }>, {
+        blur: () => void;
+        focus: () => void;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+        blur: () => any;
+        focus: () => any;
+        showPicker: () => any;
+        "update:modelValue": (value: string | number | object) => any;
+    }, PublicProps, {}, true, {}, {}, GlobalComponents, GlobalDirectives, string, {
+        input: HTMLInputElement;
+    }, HTMLDivElement, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        modelValue?: object | string | number | null;
+    } & {
+        readonly autoComplete?: FluxAutoCompleteType;
+        readonly autoFocus?: boolean;
+        readonly iconLeading?: FluxIconName;
+        readonly iconTrailing?: FluxIconName;
+        readonly disabled?: boolean;
+        readonly isCondensed?: boolean;
+        readonly isLoading?: boolean;
+        readonly isReadonly?: boolean;
+        readonly isSecondary?: boolean;
+        readonly max?: string | number;
+        readonly maxLength?: number;
+        readonly min?: string | number;
+        readonly pattern?: FluxInputMask;
+        readonly placeholder?: string;
+        readonly step?: number;
+        readonly type?: FluxInputType;
+    }> & Readonly<{
+        onBlur?: () => any;
+        onFocus?: () => any;
+        onShowPicker?: () => any;
+        "onUpdate:modelValue"?: (value: string | number | object) => any;
+    }>, {
+        blur: () => void;
+        focus: () => void;
+    }, {}, {}, {}, {}>;
+    nodeElements: HTMLDivElement[];
+}, any>;
+export default _default;

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

@@ -10,11 +10,13 @@ declare function __VLS_template(): {
     slots: Readonly<{
         default?(): any;
         overflow?(props: {
+            hasOverflow: boolean;
             items: VNode[];
         }): any;
     }> & {
         default?(): any;
         overflow?(props: {
+            hasOverflow: boolean;
             items: VNode[];
         }): any;
     };

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

@@ -0,0 +1,16 @@
+import { FluxColor, FluxTreeViewOption } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly levelColors?: (FluxColor | string)[];
+    readonly options: FluxTreeViewOption[];
+};
+declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    click: (option: FluxTreeViewOption) => any;
+    dblclick: (option: FluxTreeViewOption) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (option: FluxTreeViewOption) => any;
+    onDblclick?: (option: FluxTreeViewOption) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    nodeElements: HTMLDivElement[];
+}, HTMLDivElement>;
+export default _default;

package/dist/component/index.d.ts

@@ -67,6 +67,7 @@ export { default as FluxFormSelectAsync } from './FluxFormSelectAsync.vue';
 export { default as FluxFormSlider } from './FluxFormSlider.vue';
 export { default as FluxFormTextArea } from './FluxFormTextArea.vue';
 export { default as FluxFormTimeZonePicker } from './FluxFormTimeZonePicker.vue';
+export { default as FluxFormTreeViewSelect } from './FluxFormTreeViewSelect.vue';
 export { default as FluxGallery } from './FluxGallery.vue';
 export { default as FluxGalleryItem } from './FluxGalleryItem.vue';
 export { default as FluxGrid } from './FluxGrid.vue';
@@ -151,4 +152,5 @@ export { default as FluxToolbar } from './FluxToolbar.vue';
 export { default as FluxToolbarGroup } from './FluxToolbarGroup.vue';
 export { default as FluxTooltip } from './FluxTooltip.vue';
 export { default as FluxTooltipProvider } from './FluxTooltipProvider.vue';
+export { default as FluxTreeView } from './FluxTreeView.vue';
 export { default as FluxWindow } from './FluxWindow.vue';

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

@@ -1,2 +1,4 @@
 export { default as useFormSelect } from './useFormSelect';
 export { default as useTranslate } from './useTranslate';
+export { flattenAll, flattenVisible, getLevelColor, INITIAL_HIGHLIGHTED_INDEX, useTreeView } from './useTreeView';
+export type { TreeBaseOption, TreeFlatNode } from './useTreeView';

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

@@ -0,0 +1,28 @@
+import { FluxColor, FluxIconName } from '@flux-ui/types';
+import { ComputedRef, Ref } from 'vue';
+export type TreeBaseOption = {
+    readonly id: string | number;
+    readonly label: string;
+    readonly icon?: FluxIconName;
+    readonly children?: TreeBaseOption[];
+};
+export type TreeFlatNode<TOption extends TreeBaseOption = TreeBaseOption> = TOption & {
+    readonly depth: number;
+    readonly isLast: boolean;
+    readonly lineGuides: boolean[];
+};
+export declare const FLUX_COLORS: FluxColor[];
+export declare const INITIAL_HIGHLIGHTED_INDEX = -1;
+export declare function flattenVisible<TOption extends TreeBaseOption>(nodes: TOption[], depth: number, expanded: Set<string | number>, parentGuides?: boolean[]): TreeFlatNode<TOption>[];
+export declare function flattenAll<TOption extends TreeBaseOption>(nodes: TOption[], depth?: number): TreeFlatNode<TOption>[];
+export declare function getLevelColor(depth: number, levelColors?: (FluxColor | string)[]): string | undefined;
+export declare function useTreeView<TNode extends TreeFlatNode>(params: {
+    readonly expandedIds: Ref<Set<string | number>>;
+    readonly nodeElementRefs: Readonly<Ref<HTMLDivElement[] | null | undefined>>;
+    readonly visibleNodes: ComputedRef<TNode[]>;
+}): {
+    readonly highlightedIndex: Ref<number>;
+    toggleExpand: (nodeId: string | number) => void;
+    onExpandClick: (node: TNode, evt: MouseEvent) => void;
+    onKeyNavigate: (evt: KeyboardEvent, onActivate: (node: TNode) => void) => boolean;
+};

package/dist/index.css

@@ -4464,6 +4464,152 @@ tfoot .table-cell {
   100% {
     aspect-ratio: var(--aspect-ratio);
   }
+}.tree-view-select-value {
+  margin-left: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-view-select-list {
+  display: flex;
+  flex-flow: column;
+  padding: 9px;
+}
+
+.tree-view-select-empty {
+  padding: 12px 6px;
+  color: var(--foreground-secondary);
+  font-size: 14px;
+  text-align: center;
+}
+
+.tree-node {
+  display: flex;
+  width: 100%;
+  min-height: 36px;
+  padding: 0 8px;
+  align-items: center;
+  border-radius: var(--radius-half);
+  color: var(--foreground);
+  font-size: 14px;
+  gap: 8px;
+  outline: 0;
+  transition: 150ms var(--swift-out);
+  transition-property: background, color;
+  user-select: none;
+}
+.tree-node.is-selectable, .tree-node.is-expandable {
+  cursor: pointer;
+}
+@media (hover: hover) {
+  .tree-node.is-selectable:hover, .tree-node.is-expandable:hover {
+    background: var(--surface-hover);
+  }
+}
+.tree-node.is-selected {
+  background: var(--primary-50);
+  color: var(--primary-700);
+  font-weight: 600;
+}
+@media (hover: hover) {
+  .tree-node.is-selected.is-selectable:hover {
+    background: var(--primary-100);
+  }
+}
+.tree-node.is-highlighted:not(.is-selected) {
+  background: var(--surface-hover);
+}
+.tree-node.is-highlighted.is-selected {
+  background: var(--primary-100);
+}
+
+.tree-node-check {
+  color: var(--primary-600);
+  flex-shrink: 0;
+}
+
+.tree-node-line-area {
+  display: flex;
+  align-self: stretch;
+  flex-shrink: 0;
+}
+
+.tree-indent {
+  position: relative;
+  width: 20px;
+  align-self: stretch;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+.tree-indent.has-line::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 9px;
+  width: 1px;
+  background: var(--surface-stroke);
+}
+
+.tree-connector {
+  position: relative;
+  width: 20px;
+  align-self: stretch;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+.tree-connector:not(.is-last)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 9px;
+  width: 1px;
+  background: var(--surface-stroke);
+}
+.tree-connector::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 50%;
+  left: 9px;
+  right: 0;
+  border-left: 1px solid var(--surface-stroke);
+  border-bottom: 1px solid var(--surface-stroke);
+  border-bottom-left-radius: 6px;
+}
+
+.tree-node-expand {
+  display: flex;
+  width: 16px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground-secondary);
+}
+.tree-node-expand:not(:empty) {
+  cursor: pointer;
+}
+
+.tree-node-color-dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.tree-node-icon {
+  color: var(--foreground-secondary);
+  flex-shrink: 0;
+}
+
+.tree-node-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }.remove {
   position: absolute;
   display: flex;
@@ -6055,4 +6201,116 @@ tfoot .table-cell {
 
 .pane-header + .toolbar-flat {
   margin-top: 21px;
+}.tree-view {
+  display: flex;
+  flex-flow: column;
+  outline: 0;
+}
+
+.tree-node {
+  display: flex;
+  width: 100%;
+  min-height: 36px;
+  padding: 0 8px;
+  align-items: center;
+  border-radius: var(--radius-half);
+  color: var(--foreground);
+  cursor: pointer;
+  font-size: 14px;
+  gap: 8px;
+  outline: 0;
+  transition: 150ms var(--swift-out);
+  transition-property: background, color;
+  user-select: none;
+}
+@media (hover: hover) {
+  .tree-node:hover {
+    background: var(--surface-hover);
+  }
+}
+.tree-node.is-highlighted {
+  background: var(--surface-hover);
+}
+
+.tree-node-line-area {
+  display: flex;
+  align-self: stretch;
+  flex-shrink: 0;
+}
+
+.tree-indent {
+  position: relative;
+  width: 20px;
+  align-self: stretch;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+.tree-indent.has-line::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 9px;
+  width: 1px;
+  background: var(--surface-stroke);
+}
+
+.tree-connector {
+  position: relative;
+  width: 20px;
+  align-self: stretch;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+.tree-connector:not(.is-last)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 9px;
+  width: 1px;
+  background: var(--surface-stroke);
+}
+.tree-connector::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 50%;
+  left: 9px;
+  right: 0;
+  border-left: 1px solid var(--surface-stroke);
+  border-bottom: 1px solid var(--surface-stroke);
+  border-bottom-left-radius: 6px;
+}
+
+.tree-node-expand {
+  display: flex;
+  width: 16px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground-secondary);
+}
+.tree-node-expand:not(:empty) {
+  cursor: pointer;
+}
+
+.tree-node-color-dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.tree-node-icon {
+  color: var(--foreground-secondary);
+  flex-shrink: 0;
+}
+
+.tree-node-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }/*$vite$:1*/