refactor: replace get with toValue

apps/admin-component-tests/package.json

@@ -19,16 +19,16 @@
     "./dist"
   ],
   "scripts": {
-    "build": "run ws:ts:build \"$(pwd)\"",
+    "build": "run ws:vue:build \"$(pwd)\"",
     "clean": "run ws:clean \"$(pwd)\"",
-    "emit": "run ws:ts:emit \"$(pwd)\"",
+    "emit": "run ws:vue:emit \"$(pwd)\"",
     "lint": "run ws:lint \"$(pwd)\"",
     "lint:fix": "run ws:lint:fix \"$(pwd)\"",
     "test": "run ws:test \"$(pwd)\"",
     "test:coverage": "run ws:test:coverage \"$(pwd)\"",
     "test:run": "run ws:test:run \"$(pwd)\"",
     "test:update": "run ws:test:update \"$(pwd)\"",
-    "typecheck": "run ws:ts:typecheck \"$(pwd)\""
+    "typecheck": "run ws:vue:typecheck \"$(pwd)\""
   },
   "dependencies": {
     "@myparcel-pdk/admin": "workspace:^1.5.3",
@@ -43,7 +43,8 @@
   "devDependencies": {
     "typescript": "^5.2.2",
     "vitest": "^2.1.3",
-    "vue": "^3.3.0"
+    "vue": "^3.3.0",
+    "vue-tsc": "^2.0.0"
   },
   "peerDependencies": {
     "vue": "^3"

apps/admin-components.shim.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention,@typescript-eslint/ban-types,@typescript-eslint/no-unnecessary-type-arguments,@typescript-eslint/no-explicit-any */
+// noinspection ES6PreferShortImport
 
 import {
   type ComponentOptionsMixin,
@@ -20,21 +21,11 @@ import {
   type ButtonGroupSlots,
   type ButtonProps,
   type ButtonSlots,
-  type CheckboxGroupEmits,
-  type CheckboxGroupProps,
-  type CheckboxInputEmits,
-  type CheckboxInputProps,
-  type CodeEditorEmits,
-  type CodeEditorProps,
   type ColProps,
   type ColSlots,
   type ConceptBoxWrapperProps,
-  type CurrencyInputEmits,
-  type CurrencyInputProps,
   type DropdownButtonProps,
   type DropdownButtonSlots,
-  type DropOffInputEmits,
-  type DropOffInputProps,
   type FormGroupProps,
   type FormGroupSlots,
   type HeadingProps,
@@ -47,25 +38,13 @@ import {
   type LoaderProps,
   type ModalProps,
   type ModalSlots,
-  type MultiSelectInputEmits,
-  type MultiSelectInputProps,
   type NotificationProps,
-  type NumberInputEmits,
-  type NumberInputProps,
   type PluginSettingsWrapperProps,
-  type RadioGroupEmits,
-  type RadioGroupProps,
-  type RadioInputEmits,
-  type RadioInputProps,
   type RowProps,
   type RowSlots,
-  type SelectInputEmits,
-  type SelectInputProps,
   type SettingsDividerProps,
   type ShipmentLabelWrapperProps,
   type ShipmentLabelWrapperSlots,
-  type ShippingMethodsInputEmits,
-  type ShippingMethodsInputProps,
   type TableColProps,
   type TableColSlots,
   type TableProps,
@@ -78,6 +57,30 @@ import {
   type TabNavButtonWrapperSlots,
   type TabNavContentWrapperProps,
   type TabNavContentWrapperSlots,
+} from './admin/src/types/components.types';
+import {
+  type CheckboxGroupEmits,
+  type CheckboxGroupProps,
+  type CheckboxInputEmits,
+  type CheckboxInputProps,
+  type CodeEditorEmits,
+  type CodeEditorProps,
+  type CurrencyInputEmits,
+  type CurrencyInputProps,
+  type DropOffInputEmits,
+  type DropOffInputProps,
+  type MultiSelectInputEmits,
+  type MultiSelectInputProps,
+  type NumberInputEmits,
+  type NumberInputProps,
+  type RadioGroupEmits,
+  type RadioGroupProps,
+  type RadioInputEmits,
+  type RadioInputProps,
+  type SelectInputEmits,
+  type SelectInputProps,
+  type ShippingMethodsInputEmits,
+  type ShippingMethodsInputProps,
   type TextAreaEmits,
   type TextAreaProps,
   type TextInputEmits,
@@ -88,7 +91,7 @@ import {
   type ToggleInputProps,
   type TriStateInputEmits,
   type TriStateInputProps,
-} from './admin/src/types';
+} from './admin/src/types/components-form.types';
 
 /**
  * @note This file should NOT be imported. Its purpose is to resolve the global pdk components in your IDE.

apps/admin-preset-dashicons/package.json

@@ -37,7 +37,7 @@
     "@myparcel-pdk/build-vite": "workspace:*",
     "typescript": "^5.2.2",
     "vitest": "^2.1.3",
-    "vue-tsc": "^1.8.0"
+    "vue-tsc": "^2.0.0"
   },
   "engines": {
     "node": ">=20"

apps/admin/package.json

@@ -55,8 +55,7 @@
     "@vue/test-utils": "^2.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.4.10",
-    "vitest": "^2.1.3",
-    "vue-tsc": "^2.0.0"
+    "vitest": "^2.1.3"
   },
   "engines": {
     "node": ">=20"

apps/admin/src/actions/executors/resolveOrderParameters.ts

@@ -1,4 +1,4 @@
-import {get} from '@vueuse/core';
+import {toValue} from 'vue';
 import {useFormBuilder} from '@myparcel/vue-form-builder';
 import {createShipmentFormName, getOrderId} from '../../utils';
 import {type ActionParameters, type OrderAction} from '../../types';
@@ -13,7 +13,7 @@ export const resolveOrderParameters = <A extends OrderAction>({
   parameters.orderIds ??= getOrderId(instance);
 
   // @ts-expect-error todo
-  parameters.form ??= get(formBuilder.forms)?.[createShipmentFormName(parameters.orderIds)];
+  parameters.form ??= toValue(formBuilder.forms)?.[createShipmentFormName(parameters.orderIds)];
 
   return Promise.resolve(parameters as ActionParameters<A>);
 };

apps/admin/src/components/OrderBox/OrderShipmentsTable.vue

@@ -35,16 +35,15 @@
 </template>
 
 <script lang="ts" setup>
-import {computed} from 'vue';
-import {get} from '@vueuse/core';
+import {computed, toValue} from 'vue';
 import {BulkSelectCheckbox} from '../common';
 import {type PdkBulkSelectCheckboxEmits, useBulkSelectCheckbox, useLanguage, useOrderData} from '../../composables';
 import OrderShipmentsTableRow from './OrderShipmentsTableRow.vue';
 
 const emit = defineEmits<PdkBulkSelectCheckboxEmits>();
 
 const {query} = useOrderData();
-const data = computed(() => get(query.data));
+const data = computed(() => toValue(query.data));
 
 const {bulkModel, bulkOptions} = useBulkSelectCheckbox(query.data.value?.shipments?.map(({id}) => id) ?? [], emit);
 

apps/admin/src/components/OrderBox/ShipmentOptionsBox.vue

@@ -25,8 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed} from 'vue';
-import {get} from '@vueuse/core';
+import {computed, toValue} from 'vue';
 import {ShipmentOptionsForm} from '../common';
 import {instantiateActions} from '../../services';
 import {AdminIcon} from '../../data';
@@ -47,7 +46,7 @@ const pluginSettings = usePluginSettings();
 
 const {orderMode} = pluginSettings.order;
 
-const isExported = computed(() => pluginSettings.order.orderMode && get(data)?.exported);
+const isExported = computed(() => pluginSettings.order.orderMode && toValue(data)?.exported);
 
 const actions = computed(() => {
   if (isExported.value) {
@@ -61,7 +60,7 @@ const actions = computed(() => {
         ? [orderExportAction]
         : [orderExportToShipmentsAction, ordersPrintAction, ordersExportPrintShipmentsAction]),
     ],
-    {orderIds: get(data)?.externalIdentifier},
+    {orderIds: toValue(data)?.externalIdentifier},
   );
 });
 </script>

apps/admin/src/components/OrderBox/ShipmentTableBox.vue

@@ -23,22 +23,22 @@
   </PdkBox>
 </template>
 
-<script setup lang="ts">
-import {computed, ref, toRaw} from 'vue';
-import {get, isDef} from '@vueuse/core';
+<script lang="ts" setup>
+import {computed, ref, toRaw, toValue} from 'vue';
+import {isDef} from '@vueuse/core';
 import {instantiateActions} from '../../services';
+import {AdminIcon} from '../../data';
 import {useLanguage, useOrderData} from '../../composables';
 import {shipmentActions} from '../../actions';
 import OrderShipmentsTable from './OrderShipmentsTable.vue';
-import {AdminIcon} from "../../data";
 
 const {order} = useOrderData();
 
 const selectedLabels = ref<(string | number)[]>([]);
 
 const bulkActions = computed(() => {
   return instantiateActions(shipmentActions, {
-    orderIds: get(order)?.externalIdentifier,
+    orderIds: toValue(order)?.externalIdentifier,
     shipmentIds: toRaw(selectedLabels.value),
   });
 });

apps/admin/src/components/OrderListItem/ShipmentModeOrderListItem.vue

@@ -18,7 +18,6 @@
 
 <script lang="ts" setup>
 import {computed, toValue} from 'vue';
-import {get} from '@vueuse/core';
 import {type Shipment, Size} from '@myparcel-pdk/common';
 import {DeliveryOptionsExcerpt} from '../common';
 import {type ActionDefinition, type AnyActionDefinition} from '../../types';
@@ -38,12 +37,12 @@ const {query, order} = useOrderData();
 
 const data = computed(() => toValue(query.data));
 
-const shipments = computed(() => get(data)?.shipments ?? []);
+const shipments = computed(() => toValue(data)?.shipments ?? []);
 
 const actions = computed<ActionDefinition[]>(() => {
   const actions: AnyActionDefinition[] = [];
 
-  if (get(order)?.shipments?.some((item: Shipment.ModelShipment) => !item.deleted)) {
+  if (toValue(order)?.shipments?.some((item: Shipment.ModelShipment) => !item.deleted)) {
     actions.push(orderExportAction);
     actions.push({
       ...ordersPrintAction,
@@ -61,7 +60,7 @@ const actions = computed<ActionDefinition[]>(() => {
   actions.push(ordersEditAction);
 
   return instantiateActions(actions, {
-    orderIds: get(order)?.externalIdentifier,
+    orderIds: toValue(order)?.externalIdentifier,
     form: false,
   });
 });

apps/admin/src/components/PluginSettings/AccountSettings.vue

@@ -16,8 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed} from 'vue';
-import {get} from '@vueuse/core';
+import {computed, toValue} from 'vue';
 import {Status} from '@myparcel-pdk/common';
 import {StatusIndicator, TabNavigation} from '../common';
 import {prefixComponent} from '../../utils';
@@ -45,11 +44,12 @@ const updateAccount = useUpdateAccountMutation();
 const deleteAccount = useDeleteAccountMutation();
 
 const loading =
-  computed(() => get(contextQuery.isLoading) || get(updateAccount.isLoading)) || get(deleteAccount.isLoading);
+  computed(() => toValue(contextQuery.isLoading) || toValue(updateAccount.isLoading)) ||
+  toValue(deleteAccount.isLoading);
 
-const hasApiKey = computed(() => Boolean(get(contextQuery.data)?.pluginSettings.account.apiKey));
+const hasApiKey = computed(() => Boolean(toValue(contextQuery.data)?.pluginSettings.account.apiKey));
 
-const hasAccount = computed(() => !get(loading) && hasApiKey.value && Boolean(get(contextQuery.data)?.account));
+const hasAccount = computed(() => !toValue(loading) && hasApiKey.value && Boolean(toValue(contextQuery.data)?.account));
 
 const {translate} = useLanguage();
 
@@ -62,7 +62,7 @@ const tabs = computed(() => {
     },
   ];
 
-  if (get(hasAccount)) {
+  if (toValue(hasAccount)) {
     array.push({
       name: 'webhooks',
       component: WebhooksStatus,

apps/admin/src/components/PluginSettings/EditApiKeyForm.vue

@@ -9,8 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import {type Component, computed, markRaw, ref, watch} from 'vue';
-import {get} from '@vueuse/core';
+import {type Component, computed, markRaw, ref, toValue, watch} from 'vue';
 import {Size, Variant} from '@myparcel-pdk/common';
 import {defineField, defineForm, FormHook, type FormInstance, MagicForm} from '@myparcel/vue-form-builder';
 import {NotificationContainer, ResetButton, SubmitButton} from '../common';
@@ -77,7 +76,7 @@ const contextQuery = useStoreContextQuery();
 
 const form = ref<FormInstance>();
 
-const hasAccount = computed(() => Boolean(get(contextQuery.data)?.account));
+const hasAccount = computed(() => Boolean(toValue(contextQuery.data)?.account));
 
 watch(
   contextQuery.data,

apps/admin/src/components/PluginSettings/PluginSettingsForms.vue

@@ -9,8 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, ref, watch} from 'vue';
-import {get} from '@vueuse/core';
+import {computed, ref, toValue, watch} from 'vue';
 import {AdminContextKey} from '@myparcel-pdk/common';
 import {TabNavigation} from '../common';
 import {type TabDefinition} from '../../types';
@@ -34,12 +33,12 @@ const loading = computed(() => dynamicContextQuery.isLoading || pluginSettingsCo
 watch(
   () => pluginSettingsContextQuery.dataUpdatedAt,
   () => {
-    if (get(loading)) {
+    if (toValue(loading)) {
       return;
     }
 
-    const pluginSettingsView = get(pluginSettingsContextQuery.data);
-    const dynamicContext = get(dynamicContextQuery.data);
+    const pluginSettingsView = toValue(pluginSettingsContextQuery.data);
+    const dynamicContext = toValue(dynamicContextQuery.data);
 
     if (!pluginSettingsView || !dynamicContext?.pluginSettings) {
       tabs.value = [];

apps/admin/src/components/PluginSettings/WebhooksStatus.vue

@@ -26,8 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed} from 'vue';
-import {get} from '@vueuse/core';
+import {computed, toValue} from 'vue';
 import {Status} from '@myparcel-pdk/common';
 import {partitionArray} from '@myparcel/ts-utils';
 import {ActionButton, StatusIndicator} from '../common';
@@ -41,13 +40,13 @@ const {fetchWebhooks, createWebhooks, deleteWebhooks} = useQueryStore().register
 
 useActionStore().registerWebhookActions();
 
-const data = computed(() => get(fetchWebhooks.data) ?? []);
+const data = computed(() => toValue(fetchWebhooks.data) ?? []);
 
 const webhooks = computed<(WebhookDefinition & {status: Status})[]>(() => {
   return data.value.map((webhook) => {
     let status = Status.Pending;
 
-    if (!get(fetchWebhooks.isLoading) && !get(createWebhooks.isLoading) && !get(deleteWebhooks.isLoading)) {
+    if (!toValue(fetchWebhooks.isLoading) && !toValue(createWebhooks.isLoading) && !toValue(deleteWebhooks.isLoading)) {
       status = webhook.connected ? Status.Success : Status.Error;
     }
 

apps/admin/src/components/common/DeliveryOptionsExcerpt.vue

@@ -23,8 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed} from 'vue';
-import {get} from '@vueuse/core';
+import {computed, toValue} from 'vue';
 import {useAdminConfig, useOrderData} from '../../composables';
 import DeliveryOptionsPackageType from './DeliveryOptionsPackageType.vue';
 import DeliveryOptionsExcerptCarrierName from './DeliveryOptionsExcerptCarrierName.vue';
@@ -33,8 +32,8 @@ import DateRelative from './DateRelative.vue';
 
 const {query} = useOrderData();
 
-const data = computed(() => get(query.data));
-const deliveryOptions = computed(() => data.value?.deliveryOptions);
+const data = computed(() => toValue(query.data));
+const deliveryOptions = computed(() => toValue(data)?.deliveryOptions);
 
 const config = useAdminConfig();
 </script>