@myparcel-dev/pdk-admin 1.13.0

package/src/types/components-form.types.ts

@@ -0,0 +1,183 @@
+import {type Keyable, type Settings, type ShippingMethodTypeMap, type TriState} from '@myparcel-dev/pdk-common';
+import {type OptionsProp, type PdkElementEmits, type PdkElementProps, type SelectOptionValue} from './form.types';
+import {type ArrayItem} from './common.types';
+
+/**
+ * @see AdminComponent.CheckboxGroup
+ */
+export type CheckboxGroupModelValue = string | boolean;
+
+export type CheckboxGroupProps<T extends CheckboxGroupModelValue = CheckboxGroupModelValue> = PdkElementProps<T>;
+
+export type CheckboxGroupEmits<T extends CheckboxGroupModelValue = CheckboxGroupModelValue> = PdkElementEmits<T>;
+
+/**
+ * @see AdminComponent.CurrencyInput
+ */
+export type CurrencyInputModelValue = string | number;
+
+export type CurrencyInputProps = PdkElementProps<CurrencyInputModelValue>;
+
+export type CurrencyInputEmits = PdkElementEmits<number>;
+
+/**
+ * @see AdminComponent.CheckboxInput
+ */
+
+export type CheckboxInputModelValue = Keyable | boolean;
+
+export type CheckboxInputProps<T extends CheckboxInputModelValue = CheckboxInputModelValue> = PdkElementProps<T>;
+
+export type CheckboxInputEmits<T extends CheckboxInputModelValue = CheckboxInputModelValue> = PdkElementEmits<T>;
+
+/**
+ * @see AdminComponent.CodeEditor
+ */
+
+export type CodeEditorModelValue = TextInputModelValue;
+
+export type CodeEditorProps = PdkElementProps<CodeEditorModelValue>;
+
+export type CodeEditorEmits = PdkElementEmits<CodeEditorModelValue>;
+
+/**
+ * @see AdminComponent.DropOffInput
+ */
+export type DropOffInputModelValue = Settings.ModelDropOffPossibilities;
+
+export type DropOffInputProps = PdkElementProps<DropOffInputModelValue>;
+
+export type DropOffInputEmits = PdkElementEmits<DropOffInputModelValue>;
+
+/**
+ * @see AdminComponent.SelectInput
+ */
+
+export type SelectInputModelValue = SelectOptionValue;
+
+export type SelectInputProps<T extends SelectInputModelValue = SelectInputModelValue> = PdkElementProps<
+  T,
+  OptionsProp<T>
+>;
+
+export type SelectInputEmits<T extends SelectInputModelValue = SelectInputModelValue> = PdkElementEmits<T>;
+
+/**
+ * @see AdminComponent.MultiSelectInput
+ */
+
+export type MultiSelectInputModelValue = SelectOptionValue[];
+
+export type MultiSelectInputProps<T extends MultiSelectInputModelValue = MultiSelectInputModelValue> = SelectInputProps<
+  ArrayItem<T>
+>;
+
+export type MultiSelectInputEmits<T extends MultiSelectInputModelValue = MultiSelectInputModelValue> = SelectInputEmits<
+  ArrayItem<T>
+>;
+
+/**
+ * @see AdminComponent.NumberInput
+ */
+
+export type NumberInputModelValue = string | number;
+
+export type NumberInputProps = PdkElementProps<NumberInputModelValue>;
+
+export type NumberInputEmits = PdkElementEmits<number>;
+
+/**
+ * @see AdminComponent.RadioGroup
+ */
+
+export type RadioGroupModelValue = Keyable;
+
+export type RadioGroupProps<T extends RadioGroupModelValue = RadioGroupModelValue> = PdkElementProps<T, OptionsProp<T>>;
+
+export type RadioGroupEmits<T extends RadioGroupModelValue = RadioGroupModelValue> = PdkElementEmits<T>;
+/**
+ * @see AdminComponent.RadioInput
+ */
+
+export type RadioInputModelValue = string | number;
+
+export type RadioInputProps = PdkElementProps<RadioInputModelValue>;
+
+export type RadioInputEmits = PdkElementEmits<string>;
+
+/**
+ * @see AdminComponent.TextInput
+ */
+
+export type TextInputModelValue = string;
+
+export type TextInputProps = PdkElementProps<TextInputModelValue>;
+
+export type TextInputEmits = PdkElementEmits<TextInputModelValue>;
+
+/**
+ * @see AdminComponent.TextArea
+ */
+
+export type TextAreaModelValue = string;
+
+export type TextAreaProps = PdkElementProps<TextAreaModelValue>;
+
+export type TextAreaEmits = PdkElementEmits<TextAreaModelValue>;
+
+/**
+ * @see AdminComponent.TimeInput
+ */
+
+export type TimeInputModelValue = string;
+
+export type TimeInputProps = PdkElementProps<TimeInputModelValue>;
+
+export type TimeInputEmits = PdkElementEmits<TimeInputModelValue>;
+
+/**
+ * @see AdminComponent.ToggleInput
+ */
+
+export type ToggleInputModelValue = TriState.On | TriState.Off;
+
+export type ToggleInputProps = PdkElementProps<ToggleInputModelValue>;
+
+export type ToggleInputEmits = PdkElementEmits<ToggleInputModelValue>;
+
+/**
+ * @see AdminComponent.TriStateInput
+ */
+
+export type TriStateInputModelValue = TriState;
+
+export type TriStateInputProps = PdkElementProps<
+  TriStateInputModelValue,
+  {
+    defaultValue?: TriStateInputModelValue;
+  }
+>;
+
+export type TriStateInputEmits = PdkElementEmits<TriStateInputModelValue>;
+
+/**
+ * @see AdminComponent.ShippingMethodsInput
+ */
+
+export type ShippingMethodsInputModelValue = ShippingMethodTypeMap;
+
+export type ShippingMethodsInputProps<T extends ShippingMethodsInputModelValue = ShippingMethodsInputModelValue> =
+  PdkElementProps<T, OptionsProp<string>>;
+
+export type ShippingMethodsInputEmits<T extends ShippingMethodsInputModelValue = ShippingMethodsInputModelValue> =
+  PdkElementEmits<T>;
+
+/**
+ * @see AdminComponent.MultiDateInput
+ */
+
+export type MultiDateInputModelValue = Date[];
+
+export type MultiDateInputProps = PdkElementProps<MultiDateInputModelValue>;
+
+export type MultiDateInputEmits = PdkElementEmits<Date[]>;

package/src/types/components.types.ts

@@ -0,0 +1,349 @@
+import {type SlotsType} from 'vue';
+import {type Size} from '@myparcel-dev/pdk-common';
+import {type AdminIcon, type AdminModalKey} from '../data';
+import {type Translation} from './language.types';
+import {type PdkElementProps} from './form.types';
+import {type AdminModalContext} from './context.types';
+import {
+  type DefaultSlot,
+  type PdkNotification,
+  type PlainComponentProps,
+  type PlainComponentSlots,
+} from './common.types';
+import {type ActionDefinition} from './actions.types';
+
+/**
+ * @see AdminComponent.Badge
+ */
+export type BadgeProps = PlainComponentProps;
+
+export type BadgeSlots = PlainComponentSlots;
+
+/**
+ * @see AdminComponent.Box
+ */
+export type BoxProps = {
+  /**
+   * Used to control loading state.
+   */
+  loading: boolean;
+
+  /**
+   * Size of the box.
+   */
+  size: Size;
+
+  /**
+   * Title of the box.
+   */
+  title?: string;
+};
+
+export type BoxEmits = (e: 'clickHeader') => void;
+
+export type BoxSlots = DefaultSlot & {
+  header(): never;
+  footer(): never;
+};
+
+/**
+ * @see AdminComponent.Button
+ */
+export type ButtonProps = {
+  /**
+   * Controls disabled state.
+   */
+  disabled?: boolean;
+
+  /**
+   * Icon.
+   */
+  icon: AdminIcon | null;
+
+  /**
+   * Button label. Can be used instead of the slot.
+   */
+  label: string;
+
+  /**
+   * Size of the button.
+   */
+  size: Size;
+};
+
+export type ButtonEmits = (e: 'click') => void;
+
+export type ButtonSlots = DefaultSlot;
+
+/**
+ * @see AdminComponent.ButtonGroup
+ */
+export type ButtonGroupProps = PlainComponentProps;
+
+export type ButtonGroupSlots = PlainComponentSlots;
+
+/**
+ * @see AdminComponent.Col
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type ColProps = {};
+
+export type ColSlots = DefaultSlot;
+
+/**
+ * @see AdminComponent.ConceptBoxWrapper
+ */
+export type ConceptBoxWrapperProps = PlainComponentProps;
+
+export type ConceptBoxWrapperSlots = PlainComponentSlots;
+
+/**
+ * @see AdminComponent.DropdownButton
+ */
+export type DropdownButtonProps = {
+  /**
+   * List of actions.
+   */
+  actions: ActionDefinition[];
+
+  /**
+   * Controls disabled state.
+   */
+  disabled?: boolean;
+
+  /**
+   * To hide the text of the standalone actions.
+   */
+  hideText?: boolean;
+
+  /**
+   * Size of the button.
+   */
+  size?: Size;
+};
+
+export type DropdownButtonSlots = DefaultSlot;
+
+/**
+ * @see AdminComponent.FormGroup
+ */
+export type FormGroupProps = PdkElementProps<
+  never,
+  {
+    label?: Translation;
+    description?: Translation;
+    subtext?: Translation;
+  }
+>;
+
+export type FormGroupSlots = DefaultSlot & {
+  label(): never;
+};
+
+/**
+ * @see AdminComponent.Heading
+ */
+export type HeadingProps = {
+  level: number | string;
+};
+
+export type HeadingSlots = DefaultSlot;
+
+/**
+ * @see AdminComponent.Icon
+ */
+export type IconProps = {
+  /**
+   * The icon to display.
+   */
+  icon: AdminIcon;
+};
+
+/**
+ * @see AdminComponent.Image
+ */
+export type ImageProps = {
+  /**
+   * The source of the image.
+   */
+  src: string;
+
+  /**
+   * The alternative text of the image.
+   */
+  alt: string;
+
+  /**
+   * The title of the image.
+   */
+  title?: string | null;
+
+  /**
+   * The width of the image.
+   */
+  width?: number | string | null;
+
+  /**
+   * The height of the image.
+   */
+  height?: number | string | null;
+};
+
+/**
+ * @see AdminComponent.Link
+ */
+export type LinkProps = {
+  action?: ActionDefinition;
+  hideText?: boolean;
+  href?: string;
+};
+
+export type LinkEmits = (e: 'click', event: MouseEvent) => void;
+
+export type LinkSlots = DefaultSlot;
+
+/**
+ * @see AdminComponent.Loader
+ */
+export type LoaderProps = {
+  /**
+   * The size of the loader.
+   */
+  size: Size;
+
+  /**
+   * The html tag. Defaults to 'div'.
+   */
+  tag: string;
+};
+
+/**
+ * @see AdminComponent.Modal
+ */
+export type ModalProps = {
+  /**
+   * Available actions in the modal.
+   */
+  actions?: ActionDefinition[];
+
+  /**
+   * Modal key.
+   */
+  modalKey: AdminModalKey;
+
+  /**
+   * Modal title.
+   */
+  title?: string;
+};
+
+export type ModalSlots = {
+  default(context: AdminModalContext): never;
+};
+
+/**
+ * @see AdminComponent.Notification
+ */
+export type NotificationProps = {
+  /**
+   * The notification to display.
+   */
+  notification: PdkNotification;
+};
+
+/**
+ * @see AdminComponent.PluginSettingsWrapper
+ */
+export type PluginSettingsWrapperProps = PlainComponentProps;
+
+export type PluginSettingsWrapperSlots = PlainComponentSlots;
+
+/**
+ * @see AdminComponent.Row
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type RowProps = {};
+
+export type RowSlots = DefaultSlot;
+
+/**
+ * @see AdminComponent.SettingsDivider
+ */
+export type SettingsDividerProps = PdkElementProps<
+  never,
+  {
+    content?: Translation;
+    heading?: Translation;
+    level?: number | string;
+  }
+>;
+
+/**
+ * @see AdminComponent.ShipmentLabelWrapper
+ */
+export type ShipmentLabelWrapperProps = PlainComponentProps;
+
+export type ShipmentLabelWrapperSlots = PlainComponentSlots;
+
+/**
+ * @see AdminComponent.Table
+ */
+export type TableProps = {
+  transition?: false | string;
+};
+
+export type TableSlots = DefaultSlot & {
+  header(): never;
+  footer(): never;
+};
+
+/**
+ * The component that is used to render a table column in a Table.
+ *
+ * @see AdminComponent.TableCol
+ */
+export type TableColProps = {
+  /**
+   * Component to use as the table column. Defaults to 'td'.
+   */
+  component?: string;
+};
+
+export type TableColSlots = DefaultSlot;
+
+/**
+ * The component that is used to render a table row in a Table.
+ *
+ * @see AdminComponent.TableRow
+ */
+export type TableRowProps = {
+  /**
+   * Component to use as the table row. Defaults to 'tr'.
+   */
+  component?: string;
+};
+
+export type TableRowSlots = SlotsType<DefaultSlot>;
+
+/**
+ * @see AdminComponent.TabNavButton
+ */
+export type TabNavButtonProps = {
+  active: boolean;
+};
+
+export type TabNavButtonEmits = (e: 'click') => void;
+
+/**
+ * @see AdminComponent.TabNavButtonWrapper
+ */
+export type TabNavButtonWrapperProps = PlainComponentProps;
+
+export type TabNavButtonWrapperSlots = PlainComponentSlots;
+
+/**
+ * @see AdminComponent.TabNavContentWrapper
+ */
+export type TabNavContentWrapperProps = PlainComponentProps;
+
+export type TabNavContentWrapperSlots = PlainComponentSlots;

package/src/types/configuration.types.ts

@@ -0,0 +1,116 @@
+import {type PiniaPluginContext} from 'pinia';
+import {type FormConfiguration, type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+import {type MakeOptional} from '@myparcel-dev/ts-utils';
+import {type LogLevel} from '../services';
+import {type FORM_KEYS} from '../forms';
+import {type FormatterObject} from '../composables';
+import {type AdminContextObject} from './context.types';
+import {type AdminComponentMap, type PrefixedAdminComponentMap} from './admin.types';
+
+export type DefaultAdminConfiguration = Omit<AdminConfiguration, 'context' | 'components' | 'generateFieldId'> & {
+  components?: Record<string, undefined>;
+  formatters: Record<string, undefined>;
+  generateFieldId(element: InteractiveElementInstance): string;
+};
+
+export type AdminConfiguration = {
+  /**
+   * Components to use.
+   */
+  components: AdminComponentMap | PrefixedAdminComponentMap;
+
+  /**
+   * Override default formatters.
+   */
+  formatters?: FormatterObject;
+
+  /**
+   * Log level to use. Defaults to 'info' on production and 'debug' on development.
+   */
+  logLevel: LogLevel;
+
+  /**
+   * Configuration to pass to @myparcel-dev/vue-form-builder.
+   */
+  formConfig?: Omit<FormConfiguration, 'fields'>;
+
+  /**
+   * Overrides per form.
+   */
+  formConfigOverrides?: Partial<
+    Record<
+      (typeof FORM_KEYS)[number],
+      Omit<FormConfiguration, 'fields'> & {
+        /**
+         * Callback to generate a field id.
+         */
+        generateFieldId?(element: InteractiveElementInstance): string;
+      }
+    >
+  >;
+
+  /**
+   * Transition names.
+   */
+  transitions?: {
+    shipmentBox?: string;
+    modal?: string;
+    modalBackdrop?: string;
+    notification?: string;
+    shipmentRow?: string;
+    tabNavigation?: string;
+    tableRow?: string;
+  };
+
+  /**
+   * Css classes for common utility usage.
+   */
+  cssUtilities?: {
+    animationLoading?: string;
+    animationSpin?: string;
+    cursorDefault?: string;
+    cursorPointer?: string;
+    displayFlex?: string;
+    flexGrow?: string;
+    marginLAuto?: string;
+    marginYAuto?: string;
+    textCenter?: string;
+    textColorError?: string;
+    textColorSuccess?: string;
+    whitespaceNoWrap?: string;
+  };
+
+  /**
+   * Hook that executes when a store is created.
+   */
+  onCreateStore?(piniaContext: PiniaPluginContext): void;
+
+  /**
+   * Hook that executes before an app is created.
+   */
+  beforeRender?(configuration: AdminConfiguration): void;
+
+  /**
+   * Hook that executes after an app is created.
+   */
+  onRendered?(configuration: AdminConfiguration): void;
+
+  /**
+   * Hook that executes before the pdk admin is created.
+   */
+  beforeInitialize?(configuration: AdminConfiguration, context: AdminContextObject): void;
+
+  /**
+   * Hook that executes after the pdk admin is created.
+   */
+  onInitialized?(configuration: AdminConfiguration, context: AdminContextObject): void;
+
+  /**
+   * Callback to generate a field id.
+   */
+  generateFieldId(element: InteractiveElementInstance): string;
+};
+
+export type AdminConfigurationPreset = Omit<Partial<AdminConfiguration>, 'components'>;
+
+export type InputAdminConfiguration = MakeOptional<AdminConfiguration, 'generateFieldId'>;

package/src/types/context.types.ts

@@ -0,0 +1,25 @@
+import {type AdminContextKey, type Plugin} from '@myparcel-dev/pdk-common';
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {type OneOrMore, type Replace} from '@myparcel-dev/ts-utils';
+import {type AdminInstanceContextKey, type AdminModalKey} from '../data';
+import {type BackendPdkEndpointObject} from './endpoints.types';
+
+export type AdminContextObject = Replace<Plugin.ModelContextContextBag, 'global', GlobalAdminContext> &
+  Partial<AdminInstanceContext>;
+
+export type GlobalAdminContext = Replace<Plugin.ModelContextGlobalContext, 'endpoints', BackendPdkEndpointObject>;
+
+export type AnyAdminContext = AdminContext<AdminContextKey>;
+
+export type AdminContext<T> = T extends keyof AdminContextObject ? AdminContextObject[T] : never;
+
+export type AdminInstanceContext = {
+  [AdminInstanceContextKey.OrderIdentifier]: Plugin.ModelContextOrderDataContext['externalIdentifier'];
+  [AdminInstanceContextKey.ProductIdentifier]: Plugin.ModelContextProductDataContext['externalIdentifier'];
+};
+
+type BaseModalContext = {form?: FormInstance};
+
+export type AdminModalContext<T extends AdminModalKey = AdminModalKey> =
+  | (BaseModalContext & (T extends AdminModalKey.ShipmentOptions ? {orderIds?: OneOrMore<string>} : unknown))
+  | null;

package/src/types/endpoints.types.ts

@@ -0,0 +1,17 @@
+import {type BackendEndpoint, type EndpointObject} from '@myparcel-dev/pdk-common';
+import {
+  type BACKEND_ENDPOINTS_DEBUG,
+  type BACKEND_ENDPOINTS_ORDERS,
+  type BACKEND_ENDPOINTS_SHIPMENTS,
+  type BACKEND_ENDPOINTS_WEBHOOKS,
+} from '../data';
+
+export type BackendPdkEndpointObject = EndpointObject<BackendEndpoint>;
+
+export type BackendShipmentEndpoint = (typeof BACKEND_ENDPOINTS_SHIPMENTS)[number];
+
+export type BackendOrderEndpoint = (typeof BACKEND_ENDPOINTS_ORDERS)[number];
+
+export type BackendWebhookEndpoint = (typeof BACKEND_ENDPOINTS_WEBHOOKS)[number];
+
+export type BackendDebugEndpoint = (typeof BACKEND_ENDPOINTS_DEBUG)[number];