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

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

@@ -5,9 +5,5 @@ type __VLS_Props = {
     readonly name: FluxIconName;
     readonly size?: number;
 };
-declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    click: (args_0: MouseEvent) => any;
-}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: (args_0: MouseEvent) => any;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

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

@@ -0,0 +1,52 @@
+import { FluxCommandSource, FluxCommandSourceItem, FluxIconName } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, CreateComponentPublicInstanceWithMixins, GlobalComponents, GlobalDirectives } from 'vue';
+type __VLS_Props = {
+    readonly hasKeyboardShortcut?: boolean;
+    readonly placeholder?: string;
+    readonly sources: FluxCommandSource[];
+};
+declare function open(): void;
+declare function close(): void;
+declare const _default: DefineComponent<__VLS_Props, {
+    close: typeof close;
+    open: typeof open;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    select: (item: FluxCommandSourceItem) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (item: FluxCommandSourceItem) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    dialogRef: HTMLDivElement;
+    inputRef: HTMLInputElement;
+    itemRefs: CreateComponentPublicInstanceWithMixins<Readonly<{
+        readonly command?: string;
+        readonly hasSubActions?: boolean;
+        readonly icon?: FluxIconName;
+        readonly isHighlighted?: boolean;
+        readonly label: string;
+        readonly subLabel?: string;
+    }> & Readonly<{
+        onActivate?: () => any;
+        onHighlight?: () => any;
+    }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+        activate: () => any;
+        highlight: () => any;
+    }, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLButtonElement, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        readonly command?: string;
+        readonly hasSubActions?: boolean;
+        readonly icon?: FluxIconName;
+        readonly isHighlighted?: boolean;
+        readonly label: string;
+        readonly subLabel?: string;
+    }> & Readonly<{
+        onActivate?: () => any;
+        onHighlight?: () => any;
+    }>, {}, {}, {}, {}, {}>[];
+}, any>;
+export default _default;

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

@@ -0,0 +1,8 @@
+import { FluxIconName } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly icon?: FluxIconName;
+    readonly label: string;
+};
+declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,18 @@
+import { FluxIconName } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly command?: string;
+    readonly hasSubActions?: boolean;
+    readonly icon?: FluxIconName;
+    readonly isHighlighted?: boolean;
+    readonly label: string;
+    readonly subLabel?: string;
+};
+declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    activate: () => any;
+    highlight: () => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onActivate?: () => any;
+    onHighlight?: () => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+export default _default;

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

@@ -1,15 +1,11 @@
-import { FluxAutoCompleteType, FluxDirection } from '@flux-ui/types';
 import { DateTime } from 'luxon';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, ComponentInternalInstance, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, GlobalComponents, GlobalDirectives, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties } from 'vue';
+import { FluxDirection } from '@flux-ui/types';
 import { OnCleanup } from '@vue/reactivity';
 type __VLS_Props = {
-    readonly autoComplete?: FluxAutoCompleteType;
-    readonly autoFocus?: boolean;
     readonly disabled?: boolean;
-    readonly isReadonly?: boolean;
     readonly max?: DateTime;
     readonly min?: DateTime;
-    readonly placeholder?: string;
     readonly rangeMode?: 'range' | 'week' | 'month';
 };
 type __VLS_PublicProps = {

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

@@ -6,6 +6,7 @@ type __VLS_Props = {
     readonly icon?: FluxIconName;
     readonly isClickable?: boolean;
     readonly isDeletable?: boolean;
+    readonly isKeyboardShortcut?: boolean;
     readonly isLoading?: boolean;
     readonly label: string;
     readonly type?: FluxPressableType;

package/dist/component/index.d.ts

@@ -1,7 +1,7 @@
 export { default as FluxAction } from './FluxAction.vue';
 export { default as FluxActionBar } from './FluxActionBar.vue';
 export { default as FluxActionPane } from './FluxActionPane.vue';
-export { default as FluxActions } from './FluxActions.vue';
+export { default as FluxActionStack } from './FluxActionStack.vue';
 export { default as FluxAnimatedColors } from './FluxAnimatedColors.vue';
 export { default as FluxAspectRatio } from './FluxAspectRatio.vue';
 export { default as FluxAutoGrid } from './FluxAutoGrid.vue';
@@ -18,6 +18,9 @@ export { default as FluxCalendarEvent } from './FluxCalendarEvent.vue';
 export { default as FluxCheckbox } from './FluxCheckbox.vue';
 export { default as FluxChip } from './FluxChip.vue';
 export { default as FluxClickablePane } from './FluxClickablePane.vue';
+export { default as FluxCommandPalette } from './FluxCommandPalette.vue';
+export { default as FluxCommandPaletteGroup } from './FluxCommandPaletteGroup.vue';
+export { default as FluxCommandPaletteItem } from './FluxCommandPaletteItem.vue';
 export { default as FluxComment } from './FluxComment.vue';
 export { default as FluxColorPicker } from './FluxColorPicker.vue';
 export { default as FluxColorSelect } from './FluxColorSelect.vue';

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

@@ -0,0 +1,38 @@
+import { FluxCommandSource, FluxCommandSourceItem, FluxCommandSubAction } from '@flux-ui/types';
+import { Ref } from 'vue';
+export type CommandPaletteResultItem = {
+    readonly globalIndex: number;
+    readonly sourceKey: string;
+    readonly sourceLabel: string;
+    readonly item: FluxCommandSourceItem;
+};
+export type CommandPaletteGroup = {
+    readonly sourceKey: string;
+    readonly sourceLabel: string;
+    readonly startIndex: number;
+    readonly items: CommandPaletteResultItem[];
+};
+export declare function useCommandPalette(params: {
+    readonly sources: Ref<FluxCommandSource[]>;
+    readonly itemRefs: Readonly<Ref<Array<{
+        readonly $el: HTMLElement;
+    }> | null | undefined>>;
+}): {
+    readonly search: Ref<string>;
+    readonly activeTab: Ref<string | null>;
+    readonly highlightedIndex: Ref<number>;
+    readonly isLoading: Ref<boolean>;
+    readonly isTransitioningBack: Ref<boolean>;
+    readonly subActionTarget: Ref<FluxCommandSourceItem | null>;
+    readonly filteredItems: Ref<CommandPaletteResultItem[]>;
+    readonly groupedItems: Ref<CommandPaletteGroup[]>;
+    readonly subActions: Ref<FluxCommandSubAction[]>;
+    readonly activeTabSource: Ref<FluxCommandSource | null>;
+    readonly tabs: Ref<FluxCommandSource[]>;
+    readonly totalItems: Ref<number>;
+    setSearch: (value: string) => void;
+    setActiveTab: (key: string | null) => void;
+    enterSubActions: (item: FluxCommandSourceItem) => void;
+    onKeyNavigate: (evt: KeyboardEvent, onClose: () => void, onActivate: (item: FluxCommandSourceItem) => void) => void;
+    reset: () => void;
+};

package/dist/index.css

@@ -1903,6 +1903,11 @@
   font-weight: 400;
 }
 
+.tag-keyboard-shortcut {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
 .tag-close {
   border-radius: var(--radius-half);
 }
@@ -3585,6 +3590,321 @@
   font-size: 14px;
   font-weight: 500;
   white-space: nowrap;
+}.command-palette-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay);
+  backdrop-filter: blur(3px) saturate(180%);
+  animation: command-palette-backdrop-in 300ms var(--swift-out) both;
+  z-index: 99000;
+}
+.command-palette-backdrop.is-closing {
+  animation: command-palette-backdrop-out 210ms var(--swift-out) both;
+}
+
+.command-palette-dialog {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  padding-top: clamp(60px, 15vh, 160px);
+  align-items: flex-start;
+  justify-content: center;
+  animation: command-palette-in 300ms var(--swift-out) both;
+  z-index: 99001;
+}
+.command-palette-dialog.is-closing {
+  animation: command-palette-out 210ms var(--swift-out) both;
+  pointer-events: none;
+}
+
+.command-palette {
+  display: flex;
+  overflow: hidden;
+  width: min(600px, 100dvw - 48px);
+  max-height: min(480px, 100dvh - 120px - clamp(60px, 15vh, 160px));
+  flex-flow: column nowrap;
+  background: var(--surface);
+  background-clip: padding-box;
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-lg);
+  transition: height 120ms var(--deceleration-curve);
+}
+
+.command-palette-search {
+  display: flex;
+  height: 54px;
+  padding: 0 18px;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 12px;
+  border-bottom: 1px solid var(--gray-100);
+}
+
+.command-palette-search-icon {
+  flex-shrink: 0;
+  color: var(--foreground-secondary);
+  font-size: 16px;
+}
+
+.command-palette-search-input {
+  height: 100%;
+  flex-grow: 1;
+  background: transparent;
+  border: 0;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 16px;
+  outline: 0;
+}
+.command-palette-search-input::placeholder {
+  color: var(--foreground-secondary);
+}
+
+.command-palette-breadcrumb {
+  padding: 0;
+  flex-shrink: 0;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: var(--foreground-secondary);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color 150ms;
+}
+@media (hover: hover) {
+  .command-palette-breadcrumb:hover {
+    color: var(--foreground);
+  }
+}
+
+.command-palette-breadcrumb-separator {
+  flex-shrink: 0;
+  opacity: 0.5;
+  color: var(--foreground-secondary);
+  font-size: 14px;
+}
+
+.command-palette-tabs {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding: 6px 15px;
+  flex-shrink: 0;
+  gap: 3px;
+  border-bottom: 1px solid var(--gray-100);
+}
+.command-palette-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.command-palette-tab {
+  display: flex;
+  height: 30px;
+  padding: 0 10px;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-half);
+  cursor: pointer;
+  color: var(--foreground-secondary);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background 150ms, color 150ms;
+}
+@media (hover: hover) {
+  .command-palette-tab:hover {
+    background: var(--gray-100);
+    color: var(--foreground);
+  }
+}
+
+.command-palette-tab-active {
+  background: var(--primary-100);
+  color: var(--primary-700);
+}
+@media (hover: hover) {
+  .command-palette-tab-active:hover {
+    background: var(--primary-100);
+    color: var(--primary-700);
+  }
+}
+
+.command-palette-tab-icon {
+  font-size: 13px;
+}
+
+.command-palette-results {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: 42px 6px;
+  scrollbar-width: thin;
+  padding: 6px;
+  flex-grow: 1;
+}
+
+.command-palette-loading {
+  display: flex;
+  padding: 24px;
+  align-items: center;
+  justify-content: center;
+}
+
+.command-palette-empty {
+  display: flex;
+  padding: 24px;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground-secondary);
+  font-size: 14px;
+}
+
+.command-palette-group {
+  display: flex;
+  padding: 9px 10px 3px;
+  align-items: center;
+  gap: 6px;
+  color: var(--foreground-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  pointer-events: none;
+}
+
+.command-palette-group-icon {
+  font-size: 12px;
+}
+
+.command-palette-item {
+  display: flex;
+  width: 100%;
+  padding: 8px 10px;
+  align-items: center;
+  gap: 10px;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-half);
+  cursor: pointer;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  transition: background 100ms;
+}
+@media (hover: hover) {
+  .command-palette-item:hover {
+    background: var(--gray-100);
+  }
+}
+.command-palette-item:active {
+  background: var(--gray-200);
+}
+
+.command-palette-item-highlighted {
+  background: var(--gray-100);
+}
+@media (hover: hover) {
+  .command-palette-item-highlighted:hover {
+    background: var(--gray-100);
+  }
+}
+
+.command-palette-item-icon {
+  display: flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+  justify-content: center;
+  background: var(--gray-100);
+  border-radius: var(--radius-half);
+  color: var(--foreground);
+  transition: background 100ms, color 100ms;
+}
+.command-palette-item-icon .icon {
+  font-size: 16px;
+}
+
+.command-palette-item-highlighted .command-palette-item-icon {
+  background: var(--gray-200);
+}
+
+.command-palette-item-content {
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+.command-palette-item-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.command-palette-item-sub-label {
+  overflow: hidden;
+  margin-top: 1px;
+  color: var(--foreground-secondary);
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: color 100ms;
+}
+
+.command-palette-item-highlighted .command-palette-item-sub-label {
+  color: var(--primary-500);
+}
+
+.command-palette-item-sub-action-indicator {
+  flex-shrink: 0;
+  color: var(--foreground-secondary);
+  font-size: 12px;
+  transition: color 100ms;
+}
+
+.command-palette-item-highlighted .command-palette-item-sub-action-indicator {
+  color: var(--primary-500);
+}
+
+@keyframes command-palette-in {
+  from {
+    opacity: 0;
+    scale: 1.05;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+@keyframes command-palette-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes command-palette-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes command-palette-backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }.comment {
   display: grid;
   max-width: 100%;