@antcde/vue-utils 0.0.4

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export { useAntColorMode, type UseAntColorModeOptions, type UseAntColorModeReturn } from './useAntColorMode';
+export { useAntI18n, type UseAntI18nReturn } from './useAntI18n';
+export { type UseCommsClient, useCommsClient } from './useCommsClient';
+export { type CommsHostArgs, type UseCommsHost, useCommsHost } from './useCommsHost';
+export { type AnyUseApiReturn, type CommsToolbar, useApi, type UseApiReturn, useCommsInjection, useSingleton } from './utils';

package/dist/types/useAntColorMode.d.ts

@@ -0,0 +1,17 @@
+import { UseCommsClient } from './useCommsClient';
+import { BasicColorSchema, UseColorModeOptions, UseColorModeReturn } from '@vueuse/core';
+import { Ref } from 'vue';
+
+export type UseAntColorModeOptions = UseColorModeOptions<BasicColorSchema>;
+export type UseAntColorModeReturn = UseColorModeReturn<BasicColorSchema> & {
+    host: Ref<boolean | null | undefined>;
+    isDark: Ref<boolean>;
+};
+/**
+ * A mixture of @vueuse color mode and the dark mode coming from ANT OS.
+ *
+ * It also exposes the value of the ANT OS through the `host` prop and a simple boolean through `isDark`.
+ * @param comms
+ * @param options
+ */
+export declare function useAntColorMode(comms: UseCommsClient, options?: UseAntColorModeOptions): UseAntColorModeReturn;

package/dist/types/useAntI18n.d.ts

@@ -0,0 +1,10 @@
+import { UseI18nOptions, useI18n } from 'vue-i18n';
+import { UseCommsClient } from './useCommsClient';
+
+export type UseAntI18nReturn<Options extends UseI18nOptions = UseI18nOptions> = ReturnType<typeof useI18n<Options>>;
+/**
+ * Listens to the changing locale received from comms and translations will automatically refresh due to internal watcher.
+ * @param comms
+ * @param options
+ */
+export declare function useAntI18n<Options extends UseI18nOptions = UseI18nOptions>(comms: UseCommsClient, options?: Options): UseAntI18nReturn<Options>;

package/dist/types/useCommsClient.d.ts

@@ -0,0 +1,26 @@
+import { AntConnect, Client, Context, LocaleData, Signal } from '@antcde/connect-ts';
+import { ObservableInput } from 'rxjs';
+import { CommsToolbar } from './utils';
+import { Ref } from 'vue';
+
+export interface UseCommsClient extends Omit<Client, 'context' | 'toolbar' | 'appState' | 'locales'> {
+    context: Ref<Context>;
+    toolbar: CommsToolbar;
+    appState: Ref<string>;
+    locales: Ref<LocaleData>;
+}
+type KeyboardShortcutsHook = (signal: Signal) => ObservableInput<Signal>;
+/**
+ *
+ * If you want to override the shortucts behaviour, you can add a callback to do so. The example only accepts showing an overlay. All other keyboard invoked actions are disabled.
+ *
+ * ```
+ * keyboardsShortcuts: (signal) => signal.overlay?.action === 'show' ? Promise.resolve(signal) : []
+ * ```
+ *
+ * @param connect default instance for network calls
+ * @param keyboardsShortcuts By default it will process keyboards from the client and send them to the host.
+ *
+ */
+export declare function useCommsClient(connect?: AntConnect, keyboardsShortcuts?: KeyboardShortcutsHook): UseCommsClient;
+export {};

package/dist/types/useCommsHost.d.ts

@@ -0,0 +1,35 @@
+import { AntConnect, License, Notepad, Notification, ProjectShort, SignalReceiver, SignalSender, Task, User } from '@antcde/connect-ts';
+import { SubscriptionLike } from 'rxjs';
+import { Ref } from 'vue';
+import { CommsToolbar } from './utils';
+
+type Nullable<T> = NonNullable<T> | null | undefined;
+export interface CommsHostArgs {
+    connect: AntConnect;
+    addNotification: (notification: Notification) => void;
+    toolbar: CommsToolbar;
+    notepad: Notepad;
+    context: {
+        license: Ref<Nullable<License>>;
+        user: Ref<Nullable<User>>;
+        /**
+         * @Deprecated - use `selectedTask` or `notepadTask` instead
+         */
+        task: Ref<Nullable<Task>>;
+        notepadTask: Ref<Nullable<Task>>;
+        selectedTask: Ref<Nullable<Task>>;
+        project: Ref<Nullable<ProjectShort>>;
+        sbs: Ref<Nullable<{
+            code: string;
+        }>>;
+        darkMode: Ref<Nullable<boolean>>;
+    };
+}
+export interface UseCommsHost extends CommsHostArgs, SubscriptionLike {
+    client: Ref<HTMLIFrameElement | null | undefined>;
+    appState: Ref<string>;
+    isConnectionInitialized: Ref<boolean>;
+    signal: SignalReceiver & SignalSender;
+}
+export declare function useCommsHost(args: CommsHostArgs): UseCommsHost;
+export {};

package/dist/types/utils.d.ts

@@ -0,0 +1,33 @@
+import { ToolbarItem } from '@antcde/connect-ts';
+import { UseAsyncStateOptions, UseAsyncStateReturn } from '@vueuse/core';
+import { FunctionPlugin, Ref, UnwrapRef } from 'vue';
+import { UseCommsClient } from './useCommsClient';
+
+type RefObject<T> = {
+    [K in keyof T]: T[K];
+};
+export declare function unrefObject<T extends object>(obj: RefObject<T>): UnwrapRef<T>;
+export interface CommsToolbar {
+    start: Ref<ToolbarItem | undefined>;
+    title: Ref<string | undefined>;
+    searchEnabled: Ref<boolean>;
+    search: Ref<string>;
+    menu: Ref<ToolbarItem[]>;
+    isLoading: Ref<boolean>;
+}
+interface UseCommsFactoryResult {
+    provideComms: FunctionPlugin;
+    injectComms: () => UseCommsClient;
+}
+export declare function useCommsInjection(name?: string): UseCommsFactoryResult;
+export declare function useSingleton<T extends object>(name: string, factory: () => T, dispose?: (value: T) => void): [provide: FunctionPlugin, inject: () => T];
+export declare function useApi<Data, Params extends any[] = [], Shallow extends boolean = true>(promise: Promise<Data> | ((...args: Params) => Promise<Data>), initialState: Data, options?: UseAsyncStateOptions<Shallow, Data>): UseApiReturn<Data, Params, Shallow>;
+export interface UseApiReturn<Data, Params extends any[], Shallow extends boolean> extends Omit<UseAsyncStateReturn<Data, Params, Shallow>, 'execute'> {
+    execute: (...args: Params) => Promise<Data>;
+    executeDelayed: (delay: number, ...args: Params) => void;
+}
+/**
+ * A shorthand that implies all the generics to be any
+ */
+export type AnyUseApiReturn = UseApiReturn<any, any, any>;
+export {};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@antcde/vue-utils",
+  "type": "module",
+  "version": "0.0.4",
+  "description": "Helper to use ANT Comms in Vue 3",
+  "author": "CollaborAll",
+  "repository": {
+    "type": "git",
+    "url": "https://npm.antcde.io"
+  },
+  "publishConfig": {
+    "registry": "https://npm.antcde.io"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@vueuse/core": "^12.0.0",
+    "vue": "^3.5.10",
+    "vue-i18n": "^9.8.0"
+  },
+  "dependencies": {
+    "rxjs": "^7.8.1",
+    "@antcde/connect-ts": "0.0.58"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/tsconfig": "^0.5.1",
+    "typescript": "~5.3.3",
+    "vite": "^5.0.11",
+    "vite-plugin-dts": "^3.7.0",
+    "vue-tsc": "^1.8.27"
+  },
+  "scripts": {
+    "build": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "clean": "pnpm dlx rimraf dist"
+  }
+}