@myparcel-dev/pdk-admin 1.13.0

package/src/composables/components/index.ts

@@ -0,0 +1,15 @@
+export * from './useBulkSelectCheckbox';
+export * from './useCheckboxGroupContext';
+export * from './useDropOffInputContext';
+export * from './useDropdownButtonContext';
+export * from './useElementContext';
+export * from './useElementOptions';
+export * from './useInputWithOptionsContext';
+export * from './useModalElementContext';
+export * from './useMultiSelectInputContext';
+export * from './useRadioGroupContext';
+export * from './useSelectInputContext';
+export * from './useShippingMethodsInputContext';
+export * from './useTableContext';
+export * from './useToggleInputContext';
+export * from './useTriStateInputContext';

package/src/composables/components/useBulkSelectCheckbox.ts

@@ -0,0 +1,39 @@
+import {computed, ref, type UnwrapRef, watch, type WritableComputedRef} from 'vue';
+import {type Keyable} from '@myparcel-dev/pdk-common';
+
+type Value<K extends Keyable = Keyable> = Partial<Record<K, boolean>>;
+
+export type PdkBulkSelectCheckboxEmits = (event: 'select', value: Record<Keyable, boolean>) => void;
+
+export const useBulkSelectCheckbox = <K extends Keyable = Keyable, KS extends K[] = K[]>(
+  options: KS,
+  emit: PdkBulkSelectCheckboxEmits,
+): {
+  bulkModel: WritableComputedRef<UnwrapRef<Value<K>>>;
+  bulkOptions: Keyable[];
+} => {
+  const selected = ref<Value<K>>({});
+
+  const bulkModel = computed({
+    get() {
+      return selected.value;
+    },
+
+    set(values) {
+      selected.value = values;
+    },
+  });
+
+  watch(
+    bulkModel,
+    (value) => {
+      emit('select', value as Record<K, boolean>);
+    },
+    {deep: true},
+  );
+
+  return {
+    bulkModel,
+    bulkOptions: options,
+  };
+};

package/src/composables/components/useCheckboxGroupContext.ts

@@ -0,0 +1,10 @@
+import {type CheckboxGroupEmits, type CheckboxGroupModelValue, type CheckboxGroupProps} from '../../types';
+import {type InputWithOptionsContext, useInputWithOptionsContext} from './useInputWithOptionsContext';
+
+export type UseCheckboxGroupContext<
+  T extends CheckboxGroupModelValue = CheckboxGroupModelValue,
+  P extends CheckboxGroupProps<T> = CheckboxGroupProps<T>,
+> = (props: P, emit: CheckboxGroupEmits<T>) => InputWithOptionsContext<T, false>;
+
+export const useCheckboxGroupContext: UseCheckboxGroupContext = (props, emit) =>
+  useInputWithOptionsContext(props, emit);

package/src/composables/components/useDropOffInputContext.ts

@@ -0,0 +1,74 @@
+import {reactive, watch} from 'vue';
+import {type Settings, type Shipment} from '@myparcel-dev/pdk-common';
+import {useWeekdays, type Weekday, type Weekdays} from '../useWeekdays';
+import {createFormElement, createObjectWithKeys} from '../../utils';
+import {type DropOffInputProps} from '../../types';
+
+type UseDropOffInputContext = (
+  props: DropOffInputProps,
+  emit?: (name: 'update:modelValue', ...args: unknown[]) => void,
+) => {
+  weekdaysObject: Record<Weekday, string>;
+  weekdays: Weekdays;
+  toggleRefs: Record<Weekday, boolean>;
+  cutoffRefs: Record<Weekday, string>;
+  cutoffElements: Record<Weekday, ReturnType<typeof createFormElement>>;
+  toggleElements: Record<Weekday, ReturnType<typeof createFormElement>>;
+};
+
+// eslint-disable-next-line max-lines-per-function
+// @ts-expect-error todo
+export const useDropOffInputContext: UseDropOffInputContext = (props, emit) => {
+  const {weekdaysObject, weekdays} = useWeekdays();
+
+  const createReactiveObject = <K extends keyof Required<Shipment.ModelDropOffDay>>(
+    property: K,
+    defaultValue: Required<Shipment.ModelDropOffDay>[K],
+  ) => {
+    return reactive(
+      createObjectWithKeys(weekdays, (day) => {
+        return props.modelValue?.dropOffDays.find(({weekday}) => weekday === day)?.[property] ?? defaultValue;
+      }),
+    );
+  };
+
+  const toggleRefs = createReactiveObject('dispatch', false);
+  const cutoffRefs = createReactiveObject('cutoffTime', '16:00');
+
+  const {component: _, ...restElement} = props.element;
+
+  const createElements = (reactiveObject: Record<Weekday, unknown>, name: string) =>
+    createObjectWithKeys(weekdays, (day) =>
+      createFormElement({
+        ...restElement,
+        // @ts-expect-error Not worth the effort
+        ref: reactiveObject[day],
+        name: `${name}${day.toString()}`,
+      }),
+    );
+
+  const toggleElements = createElements(toggleRefs, 'toggle');
+  const cutoffElements = createElements(cutoffRefs, 'cutoff');
+
+  watch([toggleRefs, cutoffRefs], () => {
+    const value: Settings.ModelDropOffPossibilities = {
+      dropOffDays: weekdays.map((day) => ({
+        weekday: day,
+        dispatch: toggleRefs[day],
+        cutoffTime: cutoffRefs[day],
+      })),
+      dropOffDaysDeviations: [],
+    };
+
+    emit?.('update:modelValue', value);
+  });
+
+  return {
+    cutoffElements,
+    toggleElements,
+    cutoffRefs,
+    toggleRefs,
+    weekdays,
+    weekdaysObject,
+  };
+};

package/src/composables/components/useDropdownButtonContext.ts

@@ -0,0 +1,42 @@
+import {computed, type ComputedRef, type Ref, ref, toRefs, toValue} from 'vue';
+import {partitionArray} from '@myparcel-dev/ts-utils';
+import {type ActionDefinition, type DropdownButtonProps} from '../../types';
+import {AdminIcon} from '../../data';
+
+interface DropdownActions {
+  standalone: ActionDefinition[];
+  hidden: ActionDefinition[];
+}
+
+interface DropdownData {
+  dropdownActions: ComputedRef<DropdownActions>;
+
+  dropdownIcon: ComputedRef<AdminIcon>;
+  toggled: Ref<boolean>;
+
+  toggle(value?: boolean): void;
+}
+
+export const useDropdownButtonContext = (props: DropdownButtonProps): DropdownData => {
+  const toggled = ref(false);
+  const propRefs = toRefs(props);
+
+  return {
+    dropdownActions: computed(() => {
+      const [standalone, hidden] = partitionArray(toValue(propRefs.actions), (action) => action.standalone === true);
+
+      return {
+        standalone,
+        hidden,
+      };
+    }),
+
+    dropdownIcon: computed(() => (toggled.value ? AdminIcon.ArrowUp : AdminIcon.ArrowDown)),
+
+    toggle(value) {
+      toggled.value = value ?? !toggled.value;
+    },
+
+    toggled,
+  };
+};

package/src/composables/components/useElementContext.ts

@@ -0,0 +1,27 @@
+import {type WritableComputedRef} from 'vue';
+import {useVModel} from '@vueuse/core';
+import {generateFieldId} from '../../utils';
+import {type ElementInstance, type PdkElementEmits, type PdkElementProps} from '../../types';
+
+export type ElementContext<T = unknown> = {
+  id: string;
+  model: WritableComputedRef<T>;
+};
+
+export const useElementContext = <
+  T1 = unknown,
+  T2 = T1,
+  Props extends PdkElementProps<T1> = PdkElementProps<T1>,
+  Emits extends PdkElementEmits<T2> = PdkElementEmits<T2>,
+>(
+  props: Props,
+  emit: Emits,
+): ElementContext<T1> => {
+  const id = generateFieldId(props.element as ElementInstance);
+  const model = useVModel(props, undefined, emit) as WritableComputedRef<T1>;
+
+  return {
+    id,
+    model,
+  };
+};

package/src/composables/components/useElementOptions.ts

@@ -0,0 +1,48 @@
+import {computed, type ComputedRef, type UnwrapRef} from 'vue';
+import {SortType} from '@myparcel-dev/pdk-common';
+import {useLanguage} from '../language';
+import {translateSelectOption} from '../../utils';
+import {
+  type OptionsProp,
+  type PdkElementProps,
+  type SelectInputModelValue,
+  type SelectOptionWithLabel,
+} from '../../types';
+
+export interface ElementOptionsContext<T extends SelectInputModelValue> {
+  options: ComputedRef<SelectOptionWithLabel<UnwrapRef<T>, string>[]>;
+}
+
+export const useElementOptions = <
+  T extends SelectInputModelValue = SelectInputModelValue,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Props extends PdkElementProps<any, OptionsProp<T>> = PdkElementProps<any, OptionsProp<T>>,
+>(
+  props: Props,
+): ElementOptionsContext<T> => {
+  const {translate} = useLanguage();
+
+  const sort = computed<SortType | undefined>(() => props.element.props.sort);
+
+  const options = computed(() => {
+    return (props.element.props.options ?? [])
+      .map((option) => translateSelectOption(option, translate))
+      .sort((a, b) => {
+        if (b.value === -1) {
+          return 1;
+        }
+
+        switch (sort.value) {
+          case SortType.Ascending:
+            return a.label.localeCompare(b.label);
+
+          case SortType.Descending:
+            return b.label.localeCompare(a.label);
+        }
+
+        return 0;
+      });
+  });
+
+  return {options};
+};

package/src/composables/components/useInputWithOptionsContext.ts

@@ -0,0 +1,46 @@
+import {onMounted, toValue, watch, type WritableComputedRef} from 'vue';
+import {toArray} from '@myparcel-dev/ts-utils';
+import {type ArrayItem, type SelectInputEmits, type SelectInputModelValue, type SelectInputProps} from '../../types';
+import {type ElementOptionsContext, useElementOptions} from './useElementOptions';
+import {type ElementContext, useElementContext} from './useElementContext';
+
+type ModelValue<T extends SelectInputModelValue, Multiple extends boolean> = Multiple extends true ? T : ArrayItem<T>;
+
+export interface InputWithOptionsContext<T extends SelectInputModelValue, Multiple extends boolean>
+  extends ElementOptionsContext<T> {
+  id: string;
+  model: WritableComputedRef<ModelValue<T, Multiple>>;
+}
+
+export const useInputWithOptionsContext = <
+  T extends SelectInputModelValue = SelectInputModelValue,
+  Props extends SelectInputProps<T> = SelectInputProps<T>,
+  Multiple extends boolean = boolean,
+>(
+  props: Props,
+  emit: SelectInputEmits<T>,
+  multiple?: Multiple,
+): InputWithOptionsContext<T, Multiple> => {
+  const {id, model} = useElementContext<T>(props, emit) as ElementContext<ModelValue<T, Multiple>>;
+  const {options} = useElementOptions<T>(props);
+
+  onMounted(() => {
+    watch(
+      options,
+      (newOptions) => {
+        const values = toArray(toValue(model));
+        const hasExistingValue =
+          values.length && newOptions.some((option) => values.includes(option.value as ModelValue<T, Multiple>));
+
+        if (hasExistingValue || newOptions.length === 0) {
+          return;
+        }
+
+        model.value = (multiple ? [newOptions[0].value] : newOptions[0].value) as ModelValue<T, Multiple>;
+      },
+      {immediate: Number(toValue(options)?.length) > 0},
+    );
+  });
+
+  return {id, options, model};
+};

package/src/composables/components/useModalElementContext.ts

@@ -0,0 +1,27 @@
+import {computed, type ComputedRef} from 'vue';
+import {type AdminModalContext} from '../../types';
+import {useModalStore} from '../../stores';
+import {type AdminModalKey} from '../../data';
+
+type UseModalElementContext = <K extends AdminModalKey>(
+  modalKey: K | undefined,
+) => {
+  context: ComputedRef<AdminModalContext>;
+  isOpen: ComputedRef<boolean>;
+  close: ReturnType<typeof useModalStore>['close'];
+};
+
+// @ts-expect-error infinitely deep type instantiation
+export const useModalElementContext: UseModalElementContext = (modalKey) => {
+  const modalStore = useModalStore();
+
+  const context = computed(() => (isOpen.value ? modalStore.context : null));
+
+  const isOpen = computed(() => modalKey && modalStore.opened === modalKey);
+
+  return {
+    close: modalStore.close,
+    context,
+    isOpen,
+  };
+};

package/src/composables/components/useMultiSelectInputContext.ts

@@ -0,0 +1,11 @@
+import {type MultiSelectInputEmits, type MultiSelectInputModelValue, type MultiSelectInputProps} from '../../types';
+import {type InputWithOptionsContext, useInputWithOptionsContext} from './useInputWithOptionsContext';
+
+export type UseMultiSelectInputContext<
+  T extends MultiSelectInputModelValue = MultiSelectInputModelValue,
+  P extends MultiSelectInputProps<T> = MultiSelectInputProps<T>,
+> = (props: P, emit: MultiSelectInputEmits<T>) => InputWithOptionsContext<T[number], true>;
+
+export const useMultiSelectInputContext: UseMultiSelectInputContext = (props, emit) => {
+  return useInputWithOptionsContext(props, emit, true);
+};

package/src/composables/components/useRadioGroupContext.ts

@@ -0,0 +1,56 @@
+import {computed, type ComputedRef, toValue, type WritableComputedRef} from 'vue';
+import {isOfType} from '@myparcel-dev/ts-utils';
+import {createFormElement, createObjectWithKeys} from '../../utils';
+import {
+  type ArrayItem,
+  type ElementInstance,
+  type RadioGroupEmits,
+  type RadioGroupModelValue,
+  type RadioGroupProps,
+  type SelectOption,
+  type SelectOptionWithLabel,
+} from '../../types';
+import {useInputWithOptionsContext} from './useInputWithOptionsContext';
+
+interface RadioGroupContext<T extends RadioGroupModelValue> {
+  id: string;
+  model: WritableComputedRef<ArrayItem<T>>;
+  options: ComputedRef<SelectOption<T>[]>;
+  elements: ComputedRef<Record<ArrayItem<T>, ElementInstance>>;
+}
+
+export const useRadioGroupContext = <
+  T extends RadioGroupModelValue = RadioGroupModelValue,
+  Props extends RadioGroupProps<T> = RadioGroupProps<T>,
+>(
+  props: Props,
+  emit: RadioGroupEmits<T>,
+): RadioGroupContext<T> => {
+  const context = useInputWithOptionsContext<T, Props>(props, emit);
+
+  const elements = computed(() => {
+    const optionValues = (toValue(context.options) ?? []).map((option) => option.value);
+
+    return createObjectWithKeys(optionValues, (value) => {
+      const option = (toValue(context.options) ?? []).find((option) => option.value === value) as SelectOption<T>;
+
+      return createFormElement({
+        ref: context.model,
+        name: `${props.element.name}${value.toString()}`,
+        // @ts-expect-error this works but the form builder does not technically allow it
+        label: isOfType<SelectOptionWithLabel<T>>(option, 'label') ? option.label : option.plainLabel,
+        props: {
+          value: option.value,
+          image: option.image,
+          icon: option.icon,
+        },
+      });
+    });
+  });
+
+  return {
+    ...context,
+    // @ts-expect-error todo
+    elements,
+  };
+};

package/src/composables/components/useSelectInputContext.ts

@@ -0,0 +1,11 @@
+import {type SelectInputEmits, type SelectInputModelValue, type SelectInputProps} from '../../types';
+import {type InputWithOptionsContext, useInputWithOptionsContext} from './useInputWithOptionsContext';
+
+export type UseSelectInputContext<
+  T extends SelectInputModelValue = SelectInputModelValue,
+  P extends SelectInputProps<T> = SelectInputProps<T>,
+> = (props: P, emit: SelectInputEmits<T>) => InputWithOptionsContext<T, false>;
+
+export const useSelectInputContext: UseSelectInputContext = (props, emit) => {
+  return useInputWithOptionsContext(props, emit);
+};

package/src/composables/components/useShippingMethodsInputContext.spec.ts

@@ -0,0 +1,93 @@
+import {defineComponent, h} from 'vue';
+import {beforeEach, describe, expect, it} from 'vitest';
+import {mount} from '@vue/test-utils';
+import {type ShippingMethodTypeMap, TriState} from '@myparcel-dev/pdk-common';
+import {PackageTypeName} from '@myparcel-dev/constants';
+import {createFormElement} from '../../utils';
+import {type ShippingMethodsInputProps} from '../../types';
+import {doComponentTestSetup} from '../../__tests__';
+import {useShippingMethodsInputContext} from './useShippingMethodsInputContext';
+
+const FLAT_RATE_1 = 'flat_rate:1';
+const FLAT_RATE_2 = 'flat_rate:2';
+const FLAT_RATE_3 = 'flat_rate:3';
+const FLAT_RATE_4 = 'flat_rate:4';
+const FREE_SHIPPING = 'free_shipping';
+
+const INPUT_OPTIONS = Object.freeze([
+  {label: 'Flat rate', value: FLAT_RATE_1},
+  {label: 'Flat rate 2', value: FLAT_RATE_2},
+  {label: 'Flat rate 3', value: FLAT_RATE_3},
+  {label: 'Flat rate 4', value: FLAT_RATE_4},
+  {label: 'Free shipping', value: FREE_SHIPPING},
+]);
+
+interface TestInput {
+  input: ShippingMethodTypeMap;
+  output: ShippingMethodTypeMap;
+}
+
+describe('useShippingMethodsInputContext', () => {
+  beforeEach(() => {
+    doComponentTestSetup();
+  });
+
+  it.each([
+    {
+      input: {
+        [TriState.Off]: [],
+        [TriState.Inherit]: [FLAT_RATE_3],
+        [PackageTypeName.Package]: [],
+        [PackageTypeName.PackageSmall]: [],
+        [PackageTypeName.Mailbox]: [FLAT_RATE_1],
+        [PackageTypeName.DigitalStamp]: [FLAT_RATE_2],
+        [PackageTypeName.Letter]: [],
+      },
+      output: {
+        // off is always empty
+        [TriState.Off]: [],
+        [TriState.Inherit]: [FLAT_RATE_3],
+        [PackageTypeName.Package]: [],
+        [PackageTypeName.PackageSmall]: [],
+        [PackageTypeName.Mailbox]: [FLAT_RATE_1],
+        [PackageTypeName.DigitalStamp]: [FLAT_RATE_2],
+        [PackageTypeName.Letter]: [],
+      },
+    },
+  ] satisfies TestInput[])('handles input object model', async ({input, output}) => {
+    expect.assertions(1);
+
+    const props = {
+      modelValue: input,
+      element: createFormElement({
+        name: 'test',
+        props: {
+          options: INPUT_OPTIONS,
+        },
+      }),
+    } satisfies ShippingMethodsInputProps;
+
+    const component = defineComponent({
+      props: {
+        modelValue: {
+          type: [Array, Object],
+        },
+        element: {
+          type: Object,
+        },
+      },
+      render() {
+        return h('div');
+      },
+      setup(props, ctx) {
+        return useShippingMethodsInputContext(props, ctx.emit);
+      },
+    });
+
+    const wrapper = mount(component, {props});
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.model).toEqual(output);
+  });
+});

package/src/composables/components/useShippingMethodsInputContext.ts

@@ -0,0 +1,130 @@
+import {type ComputedRef, onUnmounted, reactive, type Ref, toRaw, watch, ref, nextTick, computed} from 'vue';
+import {useVModel} from '@vueuse/core';
+import {type ShippingMethodId, type ShippingMethodType, TriState} from '@myparcel-dev/pdk-common';
+import {PackageTypeName} from '@myparcel-dev/constants';
+import {createFormElement, createObjectWithKeys} from '../../utils';
+import {
+  type SelectOptionWithLabel,
+  type ShippingMethodsInputModelValue,
+  type ShippingMethodsInputProps,
+} from '../../types';
+import {AdminComponent} from '../../data';
+import {useElementOptions} from './useElementOptions';
+
+const SHIPPING_METHOD_TYPES = Object.freeze([
+  {label: 'option_none', value: TriState.Off},
+  {label: 'option_inherit', value: TriState.Inherit},
+  {label: PackageTypeName.Package, value: PackageTypeName.Package},
+  {label: PackageTypeName.PackageSmall, value: PackageTypeName.PackageSmall},
+  {label: PackageTypeName.Mailbox, value: PackageTypeName.Mailbox},
+  {label: PackageTypeName.DigitalStamp, value: PackageTypeName.DigitalStamp},
+  {label: PackageTypeName.Letter, value: PackageTypeName.Letter},
+] satisfies SelectOptionWithLabel<ShippingMethodType>[]);
+
+interface ShippingMethodsInputContext {
+  elements: Record<ShippingMethodId, Record<ShippingMethodType, ReturnType<typeof createFormElement>>>;
+  model: Ref<ShippingMethodsInputModelValue>;
+  refs: Record<ShippingMethodId, ShippingMethodType>;
+  shippingMethodTypes: readonly SelectOptionWithLabel<ShippingMethodType>[];
+  shippingMethods: ComputedRef<SelectOptionWithLabel<ShippingMethodId>[]>;
+}
+
+// eslint-disable-next-line max-lines-per-function
+export const useShippingMethodsInputContext = <T extends ShippingMethodsInputModelValue>(
+  props: ShippingMethodsInputProps<T>,
+  emit?: (name: 'update:modelValue', value: T) => void,
+): ShippingMethodsInputContext => {
+  const {options: shippingMethods} = useElementOptions<string, ShippingMethodsInputProps<T>>(props);
+  const model = useVModel(props, 'modelValue', emit);
+
+  const refs = reactive<Record<ShippingMethodId, ShippingMethodType>>(
+    shippingMethods.value.reduce((acc, shippingMethod) => {
+      const shippingMethodId = shippingMethod.value.toString();
+      const current = Object.entries(model.value).find(([, value]) => value.includes(shippingMethodId));
+
+      return {
+        ...acc,
+        [shippingMethodId]: (current?.[0] ? Number(current[0]) || current[0] : TriState.Off) as ShippingMethodType,
+      };
+    }, {}),
+  );
+
+  /**
+   * Update model value with the correct format when refs change
+   */
+  onUnmounted(
+    watch(
+      refs,
+      () => {
+        const keys = SHIPPING_METHOD_TYPES.map(({value}) => value).filter((type) => type !== TriState.Off);
+
+        model.value = Object.entries(refs)
+          // Remove off state from model
+          .filter(([, value]) => value !== TriState.Off)
+          .reduce((acc, [key, value]) => {
+            acc[value] ??= [];
+            acc[value].push(key);
+
+            return acc;
+          }, createObjectWithKeys(keys, () => []) as T);
+      },
+      {deep: true, immediate: true},
+    ),
+  );
+
+  const elements = reactive(
+    shippingMethods.value.reduce((acc, shippingMethod) => {
+      const shippingMethodId = shippingMethod.value.toString();
+
+      return {
+        ...acc,
+        [shippingMethodId]: SHIPPING_METHOD_TYPES.reduce((acc, option) => {
+          const fieldName = `${props.element.name}__${shippingMethodId}__${option.value}`;
+
+          // Create a computed ref that automatically reflects the current checkbox state
+          const checkboxRef = computed({
+            get: () => refs[shippingMethodId] === option.value,
+            set: (checked: boolean) => {
+              if (checked) {
+                // When checked, set this shipping method to this type
+                refs[shippingMethodId] = option.value;
+              } else {
+                // When unchecked, if this was the current type, set to Off
+                if (refs[shippingMethodId] === option.value) {
+                  refs[shippingMethodId] = TriState.Off;
+                }
+              }
+            },
+          });
+
+          return {
+            ...acc,
+            [option.value]: toRaw(
+              createFormElement({
+                component: AdminComponent.CheckboxInput,
+                ref: checkboxRef,
+                name: fieldName,
+                // remove label from individual checkbox buttons
+                label: '',
+                props: {
+                  value: option.value,
+                },
+                attributes: {
+                  title: shippingMethod.label,
+                },
+              }),
+            ),
+          };
+        }, {}),
+      };
+    }, {} satisfies Record<ShippingMethodId, Record<ShippingMethodType, ReturnType<typeof createFormElement>>>),
+  );
+
+  return {
+    elements,
+    model,
+    refs,
+    shippingMethodTypes: SHIPPING_METHOD_TYPES,
+    shippingMethods,
+  };
+};

package/src/composables/components/useTableContext.ts

@@ -0,0 +1,17 @@
+import {computed, type ComputedRef} from 'vue';
+import {useAdminConfig} from '../useAdminConfig';
+import {type TableProps} from '../../types';
+
+type UseTableContext = (props: TableProps) => {
+  transition: ComputedRef<string | undefined>;
+};
+
+export const useTableContext: UseTableContext = (props) => {
+  const config = useAdminConfig();
+
+  const transition = computed(() => {
+    return props.transition === false ? undefined : props.transition ?? config.transitions?.tableRow;
+  });
+
+  return {transition};
+};