@vue-skuilder/common-ui 0.1.5 → 0.1.6

package/dist/composables/__tests__/useAuthUI.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useAuthUI.test.d.ts.map

package/dist/composables/__tests__/useAuthUI.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAuthUI.test.d.ts","sourceRoot":"","sources":["../../../src/composables/__tests__/useAuthUI.test.ts"],"names":[],"mappings":""}

package/dist/composables/index.d.ts

@@ -1,3 +1,4 @@
 export * from './CompositionViewable';
 export * from './Displayable';
+export * from './useAuthUI';
 //# sourceMappingURL=index.d.ts.map

package/dist/composables/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composables/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}

package/dist/composables/useAuthUI.d.ts

@@ -0,0 +1,15 @@
+export interface AuthUIConfig {
+    showLoginRegistration: boolean;
+    showLogout: boolean;
+    showResetData: boolean;
+    logoutLabel: string;
+    resetLabel: string;
+}
+export declare function useAuthUI(): {
+    config: import("vue").ComputedRef<AuthUIConfig>;
+    isLoading: import("vue").Ref<boolean, boolean>;
+    syncStrategyDetected: import("vue").Ref<boolean, boolean>;
+    isLocalOnlyMode: import("vue").Ref<boolean, boolean>;
+    detectSyncStrategy: () => Promise<void>;
+};
+//# sourceMappingURL=useAuthUI.d.ts.map

package/dist/composables/useAuthUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAuthUI.d.ts","sourceRoot":"","sources":["../../src/composables/useAuthUI.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,YAAY;IAC3B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS;;;;;;EAuDxB"}

package/dist/index.d.ts

@@ -34,4 +34,8 @@ export * from './stores/useCardPreviewModeStore';
 export * from './stores/useAuthStore';
 export * from './stores/useConfigStore';
 export { piniaPlugin } from './plugins/pinia';
+export { default as CourseInformation } from './components/CourseInformation.vue';
+export { default as CardBrowser } from './components/CardBrowser.vue';
+export { default as CourseCardBrowser } from './components/CourseCardBrowser.vue';
+export { default as TagsInput } from './components/TagsInput.vue';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAGjF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACpF,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGrE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAClF,cAAc,sCAAsC,CAAC;AAGrD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAM1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAClF,YAAY,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAU1E,cAAc,0CAA0C,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,oDAAoD,CAAC;AACpG,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AACtG,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4CAA4C,CAAC;AAOpF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAElF,cAAc,oDAAoD,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAChG,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,iDAAiD,CAAC;AAK9F,cAAc,mBAAmB,CAAC;AAKlC,cAAc,kCAAkC,CAAC;AACjD,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AAKxC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAGjF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACpF,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGrE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAClF,cAAc,sCAAsC,CAAC;AAGrD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAM1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAClF,YAAY,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAU1E,cAAc,0CAA0C,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,oDAAoD,CAAC;AACpG,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AACtG,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4CAA4C,CAAC;AAOpF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAElF,cAAc,oDAAoD,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAChG,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,iDAAiD,CAAC;AAK9F,cAAc,mBAAmB,CAAC;AAKlC,cAAc,kCAAkC,CAAC;AACjD,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AAKxC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAK9C,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/stores/useAuthStore.d.ts

@@ -54,6 +54,10 @@ export declare const useAuthStore: () => import("pinia").Store<"auth", AuthState
             getUserClassrooms: () => Promise<import("@vue-skuilder/db").ClassroomRegistrationDoc>;
             getActiveClasses: () => Promise<string[]>;
             updateUserElo: (courseId: string, elo: import("@vue-skuilder/common").CourseElo) => Promise<PouchDB.Core.Response>;
+            resetUserData: () => Promise<{
+                status: import("@vue-skuilder/common").Status;
+                error?: string;
+            }>;
             getCourseInterface: (courseId: string) => Promise<import("@vue-skuilder/db").UsrCrsDataInterface>;
             update: <T extends PouchDB.Core.Document<object>>(id: string, update: Partial<T> | ((x: T) => T)) => Promise<T>;
         } | undefined;
@@ -107,6 +111,10 @@ export declare const useAuthStore: () => import("pinia").Store<"auth", AuthState
             getUserClassrooms: () => Promise<import("@vue-skuilder/db").ClassroomRegistrationDoc>;
             getActiveClasses: () => Promise<string[]>;
             updateUserElo: (courseId: string, elo: import("@vue-skuilder/common").CourseElo) => Promise<PouchDB.Core.Response>;
+            resetUserData: () => Promise<{
+                status: import("@vue-skuilder/common").Status;
+                error?: string;
+            }>;
             getCourseInterface: (courseId: string) => Promise<import("@vue-skuilder/db").UsrCrsDataInterface>;
             update: <T extends PouchDB.Core.Document<object>>(id: string, update: Partial<T> | ((x: T) => T)) => Promise<T>;
         } | undefined;
@@ -160,6 +168,10 @@ export declare const useAuthStore: () => import("pinia").Store<"auth", AuthState
             getUserClassrooms: () => Promise<import("@vue-skuilder/db").ClassroomRegistrationDoc>;
             getActiveClasses: () => Promise<string[]>;
             updateUserElo: (courseId: string, elo: import("@vue-skuilder/common").CourseElo) => Promise<PouchDB.Core.Response>;
+            resetUserData: () => Promise<{
+                status: import("@vue-skuilder/common").Status;
+                error?: string;
+            }>;
             getCourseInterface: (courseId: string) => Promise<import("@vue-skuilder/db").UsrCrsDataInterface>;
             update: <T extends PouchDB.Core.Document<object>>(id: string, update: Partial<T> | ((x: T) => T)) => Promise<T>;
         } | undefined;
@@ -214,6 +226,10 @@ export declare const useAuthStore: () => import("pinia").Store<"auth", AuthState
             getUserClassrooms: () => Promise<import("@vue-skuilder/db").ClassroomRegistrationDoc>;
             getActiveClasses: () => Promise<string[]>;
             updateUserElo: (courseId: string, elo: import("@vue-skuilder/common").CourseElo) => Promise<PouchDB.Core.Response>;
+            resetUserData: () => Promise<{
+                status: import("@vue-skuilder/common").Status;
+                error?: string;
+            }>;
             getCourseInterface: (courseId: string) => Promise<import("@vue-skuilder/db").UsrCrsDataInterface>;
             update: <T extends PouchDB.Core.Document<object>>(id: string, update: Partial<T> | ((x: T) => T)) => Promise<T>;
         } | undefined;
@@ -222,5 +238,9 @@ export declare const useAuthStore: () => import("pinia").Store<"auth", AuthState
     init(): Promise<void>;
     setLoginDialog(open: boolean): void;
     setRegDialog(open: boolean): void;
+    resetUserData(): Promise<{
+        status: import("@vue-skuilder/common").Status;
+        error?: string;
+    }>;
 }>;
 //# sourceMappingURL=useAuthStore.d.ts.map

package/dist/stores/useAuthStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAuthStore.d.ts","sourceRoot":"","sources":["../../src/stores/useAuthStore.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGjE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,oBAAoB,EAAE;QACpB,IAAI,EAAE,OAAO,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,aAAa,EAAE,OAAO,CAAC;QACvB,eAAe,EAAE,OAAO,CAAC;KAC1B,CAAC;IACF,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,wBAAsB,cAAc,IAAI,OAAO,CAAC,eAAe,CAAC,CAiB/D;AAED,eAAO,MAAM,YAAY;;;;;;;;;;oBAyDq3Q,CAAC;qBAAuB,CAAC;;;;;;;;;;;;oFAA+1B,QAAQ,IAAI,CAAC,QAAQ;2EAAoH,QAAQ,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;qHAA+lC,QAAQ,IAAI,CAAC,QAAQ;4DAAmG,QAAQ,IAAI,CAAC,QAAQ;;;wGAA+U,QAAQ,IAAI,CAAC,QAAQ;;+BAAh2G,QAAS,IAAI,CAAC,QAAQ;;;kBApFhqP,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;oBA+Eq3Q,CAAC;qBAAuB,CAAC;;;;;;;;;;;;oFAA+1B,QAAQ,IAAI,CAAC,QAAQ;2EAAoH,QAAQ,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;qHAA+lC,QAAQ,IAAI,CAAC,QAAQ;4DAAmG,QAAQ,IAAI,CAAC,QAAQ;;;wGAA+U,QAAQ,IAAI,CAAC,QAAQ;;+BAAh2G,QAAS,IAAI,CAAC,QAAQ;;;kBApFhqP,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;oBA+Eq3Q,CAAC;qBAAuB,CAAC;;;;;;;;;;;;oFAA+1B,QAAQ,IAAI,CAAC,QAAQ;2EAAoH,QAAQ,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;qHAA+lC,QAAQ,IAAI,CAAC,QAAQ;4DAAmG,QAAQ,IAAI,CAAC,QAAQ;;;wGAA+U,QAAQ,IAAI,CAAC,QAAQ;;+BAAh2G,QAAS,IAAI,CAAC,QAAQ;;;kBApFhqP,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;;oBA+Eq3Q,CAAC;qBAAuB,CAAC;;;;;;;;;;;;oFAA+1B,QAAQ,IAAI,CAAC,QAAQ;2EAAoH,QAAQ,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;qHAA+lC,QAAQ,IAAI,CAAC,QAAQ;4DAAmG,QAAQ,IAAI,CAAC,QAAQ;;;wGAA+U,QAAQ,IAAI,CAAC,QAAQ;;+BAAh2G,QAAS,IAAI,CAAC,QAAQ;;;;;yBAvB/oP,OAAO;uBAIT,OAAO;EAkB/B,CAAC"}
+{"version":3,"file":"useAuthStore.d.ts","sourceRoot":"","sources":["../../src/stores/useAuthStore.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGjE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;IACnC,oBAAoB,EAAE;QACpB,IAAI,EAAE,OAAO,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,aAAa,EAAE,OAAO,CAAC;QACvB,eAAe,EAAE,OAAO,CAAC;KAC1B,CAAC;IACF,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,wBAAsB,cAAc,IAAI,OAAO,CAAC,eAAe,CAAC,CAiB/D;AAED,eAAO,MAAM,YAAY;;;;;;;;;;oBA4E01P,CAAC;qBAAuB,CAAC;;;;;;;;;;;;oFAA+1B,QAAQ,IAAI,CAAC,QAAQ;2EAAoH,QAAQ,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;qHAA+lC,QAAQ,IAAI,CAAC,QAAQ;4DAAmG,QAAQ,IAAI,CAAC,QAAQ;;;wGAA+U,QAAQ,IAAI,CAAC,QAAQ;;;qBAAkL,CAAC;;;+BAAnhH,QAAS,IAAI,CAAC,QAAQ;;;kBAvGroO,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;oBAkG01P,CAAC;qBAAuB,CAAC;;;;;;;;;;;;oFAA+1B,QAAQ,IAAI,CAAC,QAAQ;2EAAoH,QAAQ,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;qHAA+lC,QAAQ,IAAI,CAAC,QAAQ;4DAAmG,QAAQ,IAAI,CAAC,QAAQ;;;wGAA+U,QAAQ,IAAI,CAAC,QAAQ;;;qBAAkL,CAAC;;;+BAAnhH,QAAS,IAAI,CAAC,QAAQ;;;kBAvGroO,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;oBAkG01P,CAAC;qBAAuB,CAAC;;;;;;;;;;;;oFAA+1B,QAAQ,IAAI,CAAC,QAAQ;2EAAoH,QAAQ,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;qHAA+lC,QAAQ,IAAI,CAAC,QAAQ;4DAAmG,QAAQ,IAAI,CAAC,QAAQ;;;wGAA+U,QAAQ,IAAI,CAAC,QAAQ;;;qBAAkL,CAAC;;;+BAAnhH,QAAS,IAAI,CAAC,QAAQ;;;kBAvGroO,OAAO;sBACH,OAAO;2BACF,OAAO;6BACL,OAAO;;wBAEV,OAAO;;;;;;;;;;;oBAkG01P,CAAC;qBAAuB,CAAC;;;;;;;;;;;;oFAA+1B,QAAQ,IAAI,CAAC,QAAQ;2EAAoH,QAAQ,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;qHAA+lC,QAAQ,IAAI,CAAC,QAAQ;4DAAmG,QAAQ,IAAI,CAAC,QAAQ;;;wGAA+U,QAAQ,IAAI,CAAC,QAAQ;;;qBAAkL,CAAC;;;+BAAnhH,QAAS,IAAI,CAAC,QAAQ;;;;;yBA1CpnO,OAAO;uBAIT,OAAO;;;;;EAqC/B,CAAC"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.5",
+  "version": "0.1.6",
   "main": "./dist/common-ui.umd.js",
   "module": "./dist/common-ui.es.js",
   "types": "./dist/index.d.ts",
@@ -33,8 +33,9 @@
   "dependencies": {
     "@highlightjs/vue-plugin": "^2.1.2",
     "@mdi/font": "^7.3.67",
-    "@vue-skuilder/common": "0.1.5",
-    "@vue-skuilder/db": "0.1.5",
+    "@vojtechlanka/vue-tags-input": "^3",
+    "@vue-skuilder/common": "0.1.6",
+    "@vue-skuilder/db": "0.1.6",
     "highlight.js": "^11.0.1",
     "marked": "^15.0.6",
     "moment": "^2.29.4",
@@ -50,16 +51,20 @@
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^6.0.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/vue": "^8.1.0",
     "@types/pouchdb": "^6.4.2",
     "@typescript-eslint/eslint-plugin": "^8.25.0",
     "@typescript-eslint/parser": "^8.25.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-typescript": "^14.4.0",
+    "@vue/test-utils": "^2.4.6",
     "cypress": "^14.2.1",
     "cypress-vite": "^1.6.0",
     "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-vue": "^9.32.0",
+    "jsdom": "^25.0.1",
     "sass": "^1.83.0",
     "typescript": "~5.7.2",
     "vite": "^6.0.9",

package/src/components/CardBrowser.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-row column align="center" justify="center">
+    <CardViewer :view="views[viewIndex]" :data="data" :course_id="'[browsing]'" :card_id="'[browsing]'" />
+    <br /><br />
+    <div v-if="!suppressSpinner" class="text-subtitle-1 pa-2">
+      <v-btn v-if="spinner" icon variant="outlined" color="primary" @click="decrementView">
+        <v-icon>mdi-chevron-left</v-icon>
+      </v-btn>
+      {{ views[viewIndex].name }}
+      <v-btn v-if="spinner" icon variant="outlined" color="primary" @click="incrementView">
+        <v-icon>mdi-chevron-right</v-icon>
+      </v-btn>
+    </div>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { ViewData } from '@vue-skuilder/common';
+import { defineComponent, PropType } from 'vue';
+import { ViewComponent } from '../composables/Displayable';
+import CardViewer from './cardRendering/CardViewer.vue';
+import { useCardPreviewModeStore } from '../stores/useCardPreviewModeStore';
+
+export default defineComponent({
+  name: 'CardBrowser',
+
+  components: {
+    CardViewer,
+  },
+
+  props: {
+    views: {
+      type: Array as PropType<Array<ViewComponent>>,
+      required: true,
+    },
+    data: {
+      type: Array as PropType<ViewData[]>,
+      required: true,
+    },
+    suppressSpinner: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      viewIndex: 0,
+      previewMode: useCardPreviewModeStore(),
+    };
+  },
+
+  computed: {
+    spinner(): boolean {
+      return this.views.length > 1;
+    },
+  },
+
+  created() {
+    console.log(`[CardBrowser] Card browser created. Cards now in 'prewviewMode'`);
+    this.previewMode.setPreviewMode(true);
+  },
+
+  unmounted() {
+    console.log(`[CardBrowser] Card browser unmounted. Cards no longer in 'prewviewMode'`);
+    this.previewMode.setPreviewMode(false);
+  },
+
+  methods: {
+    incrementView() {
+      this.viewIndex++;
+      this.viewIndex = (this.viewIndex + this.views.length) % this.views.length;
+    },
+
+    decrementView() {
+      this.viewIndex--;
+      this.viewIndex = (this.viewIndex + this.views.length) % this.views.length;
+    },
+  },
+});
+</script>

package/src/components/CourseCardBrowser.vue

@@ -0,0 +1,384 @@
+<template>
+  <v-card>
+    <div v-if="updatePending" class="d-flex justify-center align-center pa-6">
+      <v-progress-circular indeterminate color="primary" />
+    </div>
+    <div v-else>
+      <paginating-toolbar
+        title="Exercises"
+        :page="page"
+        :pages="pages"
+        :subtitle="`(${questionCount})`"
+        @first="first"
+        @prev="prev"
+        @next="next"
+        @last="last"
+        @set-page="(n) => setPage(n)"
+      />
+
+      <v-list>
+        <template v-for="c in cards" :key="c.id">
+          <v-list-item
+            :class="{
+              'bg-blue-grey-lighten-5': c.isOpen,
+              'elevation-4': c.isOpen,
+            }"
+            density="compact"
+            data-cy="course-card"
+          >
+            <template #prepend>
+              <div>
+                <v-list-item-title :class="{ 'text-blue-grey-darken-1': c.isOpen }" class="font-weight-medium">
+                  {{ cardPreview[c.id] }}
+                </v-list-item-title>
+                <v-list-item-subtitle>
+                  {{ c.id.split('-').length === 3 ? c.id.split('-')[2] : '' }}
+                </v-list-item-subtitle>
+              </div>
+            </template>
+
+            <template #append>
+              <v-speed-dial
+                v-if="editMode === 'full'"
+                v-model="c.isOpen"
+                location="left center"
+                transition="slide-x-transition"
+                style="display: flex; flex-direction: row-reverse"
+                persistent
+              >
+                <template #activator="{ props }">
+                  <v-btn
+                    v-bind="props"
+                    :icon="c.isOpen ? 'mdi-close' : 'mdi-plus'"
+                    size="small"
+                    variant="text"
+                    @click="clearSelections(c.id)"
+                  />
+                </template>
+
+                <v-btn
+                  key="tags"
+                  icon
+                  size="small"
+                  :variant="internalEditMode !== 'tags' ? 'outlined' : 'elevated'"
+                  :color="internalEditMode === 'tags' ? 'teal' : 'teal-darken-3'"
+                  @click.stop="internalEditMode = 'tags'"
+                >
+                  <v-icon>mdi-bookmark</v-icon>
+                </v-btn>
+
+                <v-btn
+                  key="flag"
+                  icon
+                  size="small"
+                  :variant="internalEditMode !== 'flag' ? 'outlined' : 'elevated'"
+                  :color="internalEditMode === 'flag' ? 'error' : 'error-darken-3'"
+                  @click.stop="internalEditMode = 'flag'"
+                >
+                  <v-icon>mdi-flag</v-icon>
+                </v-btn>
+              </v-speed-dial>
+            </template>
+          </v-list-item>
+
+          <div v-if="c.isOpen" class="px-4 py-2 bg-blue-grey-lighten-5">
+            <card-loader :qualified_id="c.id" :view-lookup="viewLookup" class="elevation-1" />
+
+            <tags-input
+              v-show="internalEditMode === 'tags'"
+              :course-i-d="courseId"
+              :card-i-d="c.id.split('-')[1]"
+              class="mt-4"
+            />
+
+            <div v-show="internalEditMode === 'flag'" class="mt-4">
+              <v-btn color="error" variant="outlined" @click="c.delBtn = true"> Delete this card </v-btn>
+              <span v-if="c.delBtn" class="ml-4">
+                <span class="mr-2">Are you sure?</span>
+                <v-btn color="error" variant="elevated" @click="deleteCard(c.id)"> Confirm </v-btn>
+              </span>
+            </div>
+          </div>
+        </template>
+      </v-list>
+
+      <paginating-toolbar
+        class="elevation-0"
+        :page="page"
+        :pages="pages"
+        @first="first"
+        @prev="prev"
+        @next="next"
+        @last="last"
+        @set-page="(n) => setPage(n)"
+      />
+    </div>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { displayableDataToViewData, Status } from '@vue-skuilder/common';
+import { getDataLayer, CourseDBInterface, CardData, DisplayableData, Tag } from '@vue-skuilder/db';
+// local imports
+import TagsInput from './TagsInput.vue';
+import PaginatingToolbar from './PaginatingToolbar.vue';
+import { ViewComponent } from '../composables/Displayable';
+import CardLoader from './cardRendering/CardLoader.vue';
+import { alertUser } from './SnackbarService';
+
+function isConstructor(obj: unknown) {
+  try {
+    // @ts-expect-error - we are specifically probing an unknown object
+    new obj();
+    return true;
+  } catch (e) {
+    console.warn(`not a constructor: ${obj}, err: ${e}`);
+    return false;
+  }
+}
+
+export default defineComponent({
+  name: 'CourseCardBrowser',
+
+  components: {
+    CardLoader,
+    TagsInput,
+    PaginatingToolbar,
+  },
+
+  props: {
+    courseId: {
+      type: String,
+      required: true,
+    },
+    tagId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    viewLookupFunction: {
+      type: Function,
+      required: true,
+      default: (x: unknown) => {
+        console.warn('No viewLookupFunction provided to CourseCardBrowser');
+        return null;
+      },
+    },
+    editMode: {
+      type: String as PropType<'none' | 'readonly' | 'full'>,
+      required: false,
+      default: 'full',
+    },
+  },
+
+  data() {
+    return {
+      courseDB: null as CourseDBInterface | null,
+      page: 1,
+      pages: [] as number[],
+      cards: [] as { id: string; isOpen: boolean; delBtn: boolean }[],
+      cardData: {} as { [card: string]: string[] },
+      cardPreview: {} as { [card: string]: string },
+      internalEditMode: 'none' as 'tags' | 'flag' | 'none',
+      delBtn: false,
+      updatePending: true,
+      userIsRegistered: false,
+      questionCount: 0,
+      tags: [] as Tag[],
+      viewLookup: this.viewLookupFunction,
+    };
+  },
+
+  async created() {
+    try {
+      this.courseDB = getDataLayer().getCourseDB(this.courseId);
+
+      if (this.tagId) {
+        this.questionCount = (await this.courseDB.getTag(this.tagId)).taggedCards.length;
+      } else {
+        this.questionCount = (await this.courseDB!.getCourseInfo()).cardCount;
+      }
+
+      for (let i = 1; (i - 1) * 25 < this.questionCount; i++) {
+        this.pages.push(i);
+      }
+
+      await this.populateTableData();
+    } catch (error) {
+      console.error('Error initializing CourseCardBrowser:', error);
+    } finally {
+      this.updatePending = false;
+    }
+  },
+
+  methods: {
+    first() {
+      this.page = 1;
+      this.populateTableData();
+    },
+    prev() {
+      this.page--;
+      this.populateTableData();
+    },
+    next() {
+      this.page++;
+      this.populateTableData();
+    },
+    last() {
+      this.page = this.pages.length;
+      this.populateTableData();
+    },
+    setPage(n: number) {
+      this.page = n;
+      this.populateTableData();
+    },
+    clearSelections(exception: string = '') {
+      this.cards.forEach((card) => {
+        if (card.id !== exception) {
+          card.isOpen = false;
+        }
+      });
+      this.internalEditMode = 'none';
+      this.delBtn = false;
+    },
+    async deleteCard(c: string) {
+      console.log(`Deleting card ${c}`);
+      const res = await this.courseDB!.removeCard(c.split('-')[1]);
+      if (res.ok) {
+        this.cards = this.cards.filter((card) => card.id != c);
+        this.clearSelections();
+      } else {
+        console.error(`Failed to delete card:\n\n${JSON.stringify(res)}`);
+        alertUser({
+          text: 'Failed to delete card',
+          status: Status.error,
+        });
+      }
+    },
+    async populateTableData() {
+      this.updatePending = true;
+      if (this.tagId) {
+        const tag = await this.courseDB!.getTag(this.tagId);
+        this.cards = tag.taggedCards.map((c) => {
+          return { id: `${this.courseId}-${c}`, isOpen: false, delBtn: false };
+        });
+      } else {
+        this.cards = (await this.courseDB!.getCardsByELO(0, 25)).map((c) => {
+          return {
+            id: c,
+            isOpen: false,
+            delBtn: false,
+          };
+        });
+      }
+
+      const toRemove: string[] = [];
+      const hydratedCardData = (
+        await this.courseDB!.getCourseDocs<CardData>(
+          this.cards.map((c) => c.id.split('-')[1]),
+          {
+            include_docs: true,
+          }
+        )
+      ).rows
+        .filter((r) => {
+          if (r.doc) {
+            return true;
+          } else {
+            console.error(`Card ${r.id}.doc not found.\ncard: ${JSON.stringify(r)}`);
+            // toRemove.push(r.id);
+            // if (this.tagId) {
+            //   this.courseDB!.removeTagFromCard(r.id, this.tagId);
+            // }
+            return false;
+          }
+        })
+        .map((r) => r.doc!);
+
+      this.cards = this.cards.filter((c) => !toRemove.includes(c.id.split('-')[1]));
+
+      hydratedCardData.forEach((c) => {
+        if (c && c.id_displayable_data) {
+          this.cardData[c._id] = c.id_displayable_data;
+        }
+      });
+
+      try {
+        await Promise.all(
+          this.cards.map(async (c) => {
+            const _cardID: string = c.id.split('-')[1];
+
+            const tmpCardData = hydratedCardData.find((c) => c._id == _cardID);
+            if (!tmpCardData || !tmpCardData.id_displayable_data) {
+              console.error(`No valid data found for card ${_cardID}`);
+              return;
+            }
+            const tmpView: ViewComponent = this.viewLookupFunction(
+              tmpCardData.id_view || 'default.question.BlanksCard.FillInView'
+            );
+
+            const tmpDataDocs = tmpCardData.id_displayable_data.map((id) => {
+              return this.courseDB!.getCourseDoc<DisplayableData>(id, {
+                attachments: false,
+                binary: true,
+              });
+            });
+
+            const allDocs = await Promise.all(tmpDataDocs);
+            await Promise.all(
+              allDocs.map((doc) => {
+                const tmpData = [];
+                tmpData.unshift(displayableDataToViewData(doc));
+
+                // [ ] remove/replace this after the vue 3 migration is complete
+                // see PR #510
+                if (isConstructor(tmpView)) {
+                  const view = new tmpView();
+                  view.data = tmpData;
+
+                  this.cardPreview[c.id] = view.toString();
+                } else {
+                  this.cardPreview[c.id] = tmpView.name ? tmpView.name : 'Unknown';
+                }
+              })
+            );
+          })
+        );
+      } catch (error) {
+        console.error('Error populating table data:', error);
+      } finally {
+        this.updatePending = false;
+        this.$forceUpdate();
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+.component-fade-enter-active,
+.component-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+.component-fade-enter, .component-fade-leave-to
+/* .component-fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.component-scale-enter-active,
+.component-scale-leave-active {
+  max-height: auto;
+  transform: scale(1, 1);
+  transform-origin: top;
+  transition:
+    transform 0.3s ease,
+    max-height 0.3s ease;
+}
+.component-scale-enter,
+.component-fade-leave-to {
+  max-height: 0px;
+  transform: scale(1, 0);
+  overflow: hidden;
+}
+</style>