@flux-ui/components 3.0.0-next.57 → 3.0.0-next.59

package/src/component/primitive/SelectBase.vue

@@ -140,21 +140,21 @@
     import type { FluxFormSelectOption, FluxFormSelectOptions } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { type ComponentPublicInstance, computed, nextTick, ref, toRef, unref, useTemplateRef, watch } from 'vue';
-    import { useDisabled, useFormFieldInjection } from '$flux/composable';
-    import { useDropdownPopup, useTranslate } from '$flux/composable/private';
-    import { isFluxFormSelectGroup, isFluxFormSelectOption } from '$flux/data';
-    import { FluxFadeTransition } from '$flux/transition';
-    import FluxFormInput from '$flux/component/FluxFormInput.vue';
-    import FluxIcon from '$flux/component/FluxIcon.vue';
-    import FluxMenu from '$flux/component/FluxMenu.vue';
-    import FluxMenuGroup from '$flux/component/FluxMenuGroup.vue';
-    import FluxMenuItem from '$flux/component/FluxMenuItem.vue';
-    import FluxMenuSubHeader from '$flux/component/FluxMenuSubHeader.vue';
-    import FluxSpinner from '$flux/component/FluxSpinner.vue';
-    import FluxTag from '$flux/component/FluxTag.vue';
+    import { useDisabled, useFormFieldInjection } from '~flux/components/composable';
+    import { useDropdownPopup, useTranslate } from '~flux/components/composable/private';
+    import { isFluxFormSelectGroup, isFluxFormSelectOption } from '~flux/components/data';
+    import { FluxFadeTransition } from '~flux/components/transition';
+    import FluxFormInput from '../FluxFormInput.vue';
+    import FluxIcon from '../FluxIcon.vue';
+    import FluxMenu from '../FluxMenu.vue';
+    import FluxMenuGroup from '../FluxMenuGroup.vue';
+    import FluxMenuItem from '../FluxMenuItem.vue';
+    import FluxMenuSubHeader from '../FluxMenuSubHeader.vue';
+    import FluxSpinner from '../FluxSpinner.vue';
+    import FluxTag from '../FluxTag.vue';
     import Anchor from './Anchor.vue';
     import AnchorPopup from './AnchorPopup.vue';
-    import $style from '$flux/css/component/Form.module.scss';
+    import $style from '~flux/components/css/component/Form.module.scss';
 
     const INITIAL_HIGHLIGHTED_INDEX = -1;
 

package/src/component/primitive/SliderBase.vue

@@ -22,9 +22,9 @@
     import { unrefTemplateElement } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { onUnmounted, toRef, unref, useTemplateRef } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import FluxTicks from '$flux/component/FluxTicks.vue';
-    import $style from '$flux/css/component/primitive/Slider.module.scss';
+    import { useDisabled } from '~flux/components/composable';
+    import FluxTicks from '../FluxTicks.vue';
+    import $style from '~flux/components/css/component/primitive/Slider.module.scss';
 
     const emit = defineEmits<{
         dragging: [boolean];

package/src/component/primitive/SliderThumb.vue

@@ -25,8 +25,8 @@
     setup>
     import { clsx } from 'clsx';
     import { toRef, unref } from 'vue';
-    import { useDisabled } from '$flux/composable';
-    import $style from '$flux/css/component/primitive/Slider.module.scss';
+    import { useDisabled } from '~flux/components/composable';
+    import $style from '~flux/components/css/component/primitive/Slider.module.scss';
 
     const emit = defineEmits<{
         decrement: [];

package/src/component/primitive/SliderTrack.vue

@@ -13,7 +13,7 @@
 <script
     lang="ts"
     setup>
-    import $style from '$flux/css/component/primitive/Slider.module.scss';
+    import $style from '~flux/components/css/component/primitive/Slider.module.scss';
 
     defineProps<{
         readonly percentageLower: number;

package/src/component/primitive/TreeNodeRenderer.vue

@@ -43,10 +43,9 @@
     generic="TOption extends TreeBaseOption">
     import type { FluxColor } from '@flux-ui/types';
     import { computed } from 'vue';
-    import type { TreeBaseOption, TreeFlatNode } from '$flux/composable/private';
-    import { getLevelColor } from '$flux/composable/private';
-    import FluxIcon from '$flux/component/FluxIcon.vue';
-    import $style from '$flux/css/component/primitive/TreeNode.module.scss';
+    import { getLevelColor, type TreeBaseOption, type TreeFlatNode } from '~flux/components/composable/private';
+    import FluxIcon from '../FluxIcon.vue';
+    import $style from '~flux/components/css/component/primitive/TreeNode.module.scss';
 
     const emit = defineEmits<{
         expandClick: [MouseEvent];

package/src/component/primitive/VNodeRenderer.ts

@@ -1,5 +1,4 @@
-import type { PropType, VNode } from 'vue';
-import { defineComponent } from 'vue';
+import { defineComponent, type PropType, type VNode } from 'vue';
 
 export const VNodeRenderer = defineComponent({
     props: {

package/src/composable/index.ts

@@ -2,10 +2,13 @@ export { default as useBreakpoints } from './useBreakpoints';
 export { default as useDisabled } from './useDisabled';
 
 export { default as useAdaptiveGroupInjection } from './useAdaptiveGroupInjection';
+export { default as useCalendarInjection } from './useCalendarInjection';
 export { default as useDisabledInjection } from './useDisabledInjection';
 export { default as useExpandableGroupInjection } from './useExpandableGroupInjection';
 export { default as useFilterInjection } from './useFilterInjection';
 export { default as useFlyoutInjection } from './useFlyoutInjection';
 export { default as useFormFieldInjection } from './useFormFieldInjection';
+export { default as useKanbanInjection } from './useKanbanInjection';
+export { default as useTabBarInjection } from './useTabBarInjection';
 export { default as useTableInjection } from './useTableInjection';
 export { default as useTooltipInjection } from './useTooltipInjection';

package/src/composable/private/index.ts

@@ -1,12 +1,9 @@
 export { default as useAsyncFilterOptions } from './useAsyncFilterOptions';
 export { default as useDateFlyout } from './useDateFlyout';
-export { default as useDropdownPopup } from './useDropdownPopup';
-export type { UseDropdownPopupOptions, UseDropdownPopupReturn } from './useDropdownPopup';
+export { default as useDropdownPopup, type UseDropdownPopupOptions, type UseDropdownPopupReturn } from './useDropdownPopup';
 export { default as useFormSelect } from './useFormSelect';
+export { useKanban } from './useKanban';
 export { default as useTranslate } from './useTranslate';
-export { useCommandPalette } from './useCommandPalette';
-export type { CommandPaletteGroup, CommandPaletteResultItem } from './useCommandPalette';
-export { useFilterOptionMulti, useFilterOptionSingle } from './useFilterOption';
-export type { FilterOptionMulti, FilterOptionSingle } from './useFilterOption';
-export { flattenAll, flattenVisible, getLevelColor, INITIAL_HIGHLIGHTED_INDEX, useTreeView } from './useTreeView';
-export type { TreeBaseOption, TreeFlatNode } from './useTreeView';
+export { useCommandPalette, type CommandPaletteGroup, type CommandPaletteResultItem } from './useCommandPalette';
+export { useFilterOptionMulti, useFilterOptionSingle, type FilterOptionMulti, type FilterOptionSingle } from './useFilterOption';
+export { flattenAll, flattenVisible, getLevelColor, INITIAL_HIGHLIGHTED_INDEX, useTreeView, type TreeBaseOption, type TreeFlatNode } from './useTreeView';

package/src/composable/private/useAsyncFilterOptions.ts

@@ -1,7 +1,7 @@
 import { useDebouncedRef, useLoaded } from '@basmilius/common';
 import type { FluxFilterOptionRow, FluxFilterValue } from '@flux-ui/types';
-import { type ComputedRef, type ModelRef, computed, type Ref, ref, unref, watch } from 'vue';
-import { isFluxFilterOptionItem } from '$flux/data';
+import { computed, ref, unref, watch, type ComputedRef, type ModelRef, type Ref } from 'vue';
+import { isFluxFilterOptionItem } from '~flux/components/data';
 
 type UseAsyncFilterOptionsParams = {
     readonly currentValueIds: ComputedRef<FluxFilterValue[]>;
@@ -11,25 +11,19 @@ type UseAsyncFilterOptionsParams = {
     fetchSearch(searchQuery: string): Promise<FluxFilterOptionRow[]>;
 };
 
-export default function ({
-    currentValueIds,
-    modelSearch,
-    fetchOptions: fetchOptionsProp,
-    fetchRelevant: fetchRelevantProp,
-    fetchSearch: fetchSearchProp
-}: UseAsyncFilterOptionsParams) {
+export default function (params: UseAsyncFilterOptionsParams) {
     const {isLoading, loaded} = useLoaded();
-    const debouncedModelSearch = useDebouncedRef(modelSearch, 150) as unknown as Ref<string>;
-    const fetchOptions = computed(() => loaded(fetchOptionsProp));
-    const fetchRelevant = computed(() => loaded(fetchRelevantProp));
-    const fetchSearch = computed(() => loaded(fetchSearchProp));
+    const debouncedModelSearch = useDebouncedRef(params.modelSearch, 150) as unknown as Ref<string>;
+    const fetchOptions = computed(() => loaded(params.fetchOptions));
+    const fetchRelevant = computed(() => loaded(params.fetchRelevant));
+    const fetchSearch = computed(() => loaded(params.fetchSearch));
 
     const selectedOptions = ref<FluxFilterOptionRow[]>([]);
     const visibleOptions = ref<FluxFilterOptionRow[]>([]);
 
     const options = computed(() => {
         const options: FluxFilterOptionRow[] = [];
-        const search = unref(modelSearch);
+        const search = unref(params.modelSearch);
         const selected = unref(selectedOptions);
         const visible = unref(visibleOptions);
 
@@ -50,7 +44,7 @@ export default function ({
         return options;
     });
 
-    watch(currentValueIds, async ids => {
+    watch(params.currentValueIds, async ids => {
         if (ids.length === 0) {
             return;
         }

package/src/composable/private/useCommandPalette.ts

@@ -1,6 +1,6 @@
-import type { FluxCommandSource, FluxCommandSourceItem, FluxCommandSubAction } from '@flux-ui/types';
 import { useDebouncedRef } from '@basmilius/common';
-import { computed, nextTick, type Ref, ref, unref, watch } from 'vue';
+import type { FluxCommandSource, FluxCommandSourceItem, FluxCommandSubAction } from '@flux-ui/types';
+import { computed, nextTick, ref, unref, watch, type Ref } from 'vue';
 
 export type CommandPaletteResultItem = {
     readonly globalIndex: number;

package/src/composable/private/useDateFlyout.ts

@@ -1,4 +1,4 @@
-import { type ModelRef, type Ref, ref, unref, watch } from 'vue';
+import { ref, unref, watch, type ModelRef, type Ref } from 'vue';
 
 type FlyoutLike = {
     close(): void;

package/src/composable/private/useDropdownPopup.ts

@@ -1,6 +1,6 @@
 import { useClickOutside } from '@basmilius/common';
 import { unrefTemplateElement } from '@flux-ui/internals';
-import { type ComponentPublicInstance, nextTick, ref, type Ref, unref, watch } from 'vue';
+import { nextTick, ref, unref, watch, type ComponentPublicInstance, type Ref } from 'vue';
 
 export type UseDropdownPopupOptions = {
     readonly anchorRef: Readonly<Ref<ComponentPublicInstance | null | undefined>>;

package/src/composable/private/useFilterOption.ts

@@ -1,6 +1,6 @@
 import type { FluxFilterValue, FluxFilterValueSingle } from '@flux-ui/types';
-import { type ComputedRef, computed, unref } from 'vue';
-import { useFilterInjection } from '$flux/composable';
+import { computed, unref, type ComputedRef } from 'vue';
+import { useFilterInjection } from '~flux/components/composable';
 
 export type FilterOptionSingle = {
     readonly currentValue: ComputedRef<FluxFilterValueSingle>;

package/src/composable/private/useFormSelect.ts

@@ -1,7 +1,6 @@
 import type { FluxFormSelectEntry, FluxFormSelectOption, FluxFormSelectOptions, FluxFormSelectValue } from '@flux-ui/types';
-import type { Ref } from 'vue';
-import { computed, unref } from 'vue';
-import { isFluxFormSelectGroup, isFluxFormSelectOption } from '$flux/data';
+import { computed, unref, type Ref } from 'vue';
+import { isFluxFormSelectGroup, isFluxFormSelectOption } from '~flux/components/data';
 
 export default function (modelValue: Ref<FluxFormSelectValue>, isMultiple: boolean, options: Ref<FluxFormSelectEntry[]>, searchQuery?: Ref<string>) {
     const values = computed(() => {