quasar-ui-danx 0.2.24 → 0.2.25

package/README.md

@@ -39,6 +39,66 @@ yarn add quasar-ui-danx quasar
 yarn add -D sass vite-svg-loader tailwindcss eslint eslint-plugin-import autoprefixer
 ```
 
+### Setup PHPStorm
+
+* Disable Typescript language service
+* Setup node_modules directory as a library
+* Configure `tsconfig.json`
+
+```json
+{
+  "include": [
+    "node_modules/quasar-ui-danx/**/*"
+  ]
+}
+```
+
+* Configure `vite.config.ts`
+
+```ts
+export default ({ command }) => {
+    // For development w/ HMR, load the danx library + styles directly from the directory
+    // NOTE: These are the paths relative to the mounted quasar-ui-danx directory inside the mva docker container
+    const danx = (command === "serve" ? {
+        "quasar-ui-danx": resolve(__dirname, "../quasar-ui-danx/ui/src"),
+        "quasar-ui-danx-styles": resolve(__dirname, "../quasar-ui-danx/src/styles/index.scss")
+    } : {
+        // Import from quasar-ui-danx module for production
+        "quasar-ui-danx-styles": "quasar-ui-danx/dist/style.css"
+    });
+
+    return defineConfig({
+        resolve: {
+            alias: {
+                ...danx
+            }
+        },
+    });
+}
+```
+
+* Add node_modules as a library in PHPStorm
+    * Settings -> Directories -> Add
+    * Create a new directory w/ name node_modules and set the directory to the node_modules directory in your project
+* Symlink Danx UI library
+    * copy/paste and run `./danx-local.sh`
+        * (or manually symlink node_modules/quasar-ui-danx to ../../quasar-ui-danx/ui/src)
+            * Directory structure of your project relative to quasar-ui-danx:
+
+```
+- parent-directory
+  - your-app
+    - tsconfig.json
+    - vite.config.ts
+    - src
+    - node_modules
+      - quasar-ui-danx -> (symlink) ../../quasar-ui-danx/ui/src
+  - quasar-ui-danx
+    - ui
+      - src
+      - tests
+```
+
 ### Setup Tailwind
 
 Initialize config files for tailwind

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.2.24",
+  "version": "0.2.25",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/config/index.ts

@@ -2,8 +2,8 @@ import { QNotifyCreateOptions } from "quasar";
 
 export interface DanxFileUploadOptions {
     directory?: string;
-    presignedUploadUrl?: string | null;
-    uploadCompletedUrl?: string | null;
+    presignedUploadUrl?: Function | null;
+    uploadCompletedUrl?: Function | null;
 }
 
 export interface DanxOptions {

package/src/helpers/FlashMessages.ts

@@ -37,8 +37,8 @@ export class FlashMessages {
                 classes: "bg-gray-500 text-white",
                 position: "top",
                 closeBtn: "X",
-                ...options,
-                ...danxOptions.flashMessages.default
+                ...danxOptions.flashMessages.default,
+                ...options
             });
         }
     }

package/src/helpers/hotkeys.ts

@@ -0,0 +1,59 @@
+import { Ref, ref } from "vue";
+
+interface HotkeyListener {
+    id?: string,
+    name: string,
+    callback: Function
+}
+
+interface Hotkey {
+    name: string,
+    ctrl?: boolean,
+    alt?: boolean,
+    shift?: boolean,
+    type: "keyup" | "keydown",
+    key: string | string[] | number | number[],
+}
+
+const hotkeys: Ref<Hotkey[]> = ref([]);
+const listeners: Ref<HotkeyListener[]> = ref([]);
+
+export function addHotkey(key: Hotkey) {
+    hotkeys.value = [...hotkeys.value, key];
+}
+
+export function listen(name: string, callback: Function, id?: string) {
+    listeners.value.push({ id, name, callback });
+}
+
+export function unlisten(id: string) {
+    listeners.value = listeners.value.filter(listener => listener.id !== id);
+}
+
+function triggerEvent(type: "keydown" | "keyup", key: string | number, e: KeyboardEvent) {
+    for (let hotkey of hotkeys.value) {
+        if (hotkey.type === type && hotkey.key === key && e.ctrlKey === !!hotkey.ctrl && e.altKey === !!hotkey.alt && e.shiftKey === !!hotkey.shift) {
+            for (let listener of listeners.value) {
+                if (listener.name === hotkey.name) {
+                    listener.callback(e);
+                }
+            }
+        }
+    }
+}
+
+function getKey(e: KeyboardEvent) {
+    return e.key ? ("" + e.key).toLowerCase() : e.keyCode;
+}
+
+export function registerHotkeys(keys: Hotkey[]) {
+    hotkeys.value = keys;
+
+    window.addEventListener("keydown", e => {
+        triggerEvent("keydown", getKey(e), e);
+    });
+
+    window.addEventListener("keyup", e => {
+        triggerEvent("keyup", getKey(e), e);
+    });
+}

package/src/helpers/index.ts

@@ -8,9 +8,10 @@ export * from "./files";
 export * from "./FileUpload";
 export * from "./FlashMessages";
 export * from "./formats";
+export * from "./hotkeys";
 export * from "./multiFileUpload";
+export * from "./request";
 export * from "./singleFileUpload";
 export * from "./storage";
 export * from "./styles";
 export * from "./utils";
-export * from "./request";

package/src/helpers/request.ts

@@ -1,10 +1,10 @@
-import { ref, Ref, UnwrapRef } from "vue";
+import { ref, Ref } from "vue";
 
 interface RequestOptions {
     baseUrl: string;
 }
 
-const requestOptions: Ref<UnwrapRef<RequestOptions>> = ref({
+const requestOptions: Ref<RequestOptions> = ref({
     baseUrl: ""
 });
 /**