@vue-skuilder/standalone-ui 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +80 -0
- package/README.md +4 -0
- package/dist/assets/{index-Cf7ZyNi9.css → index-BAV4ackd.css} +11 -2
- package/dist/assets/index-evRrXzXQ.js +150 -0
- package/dist/assets/{index-C_zKdQ_j.js.map → index-evRrXzXQ.js.map} +1 -1
- package/dist/index.html +2 -2
- package/package.json +4 -4
- package/src/components/CourseHeader.vue +34 -28
- package/src/main.ts +118 -11
- package/src/router/index.ts +6 -0
- package/src/views/BrowseView.vue +34 -0
- package/src/views/StudyView.vue +1 -3
- package/tsconfig.json +1 -6
- package/vite.config.ts +6 -36
- package/dist/assets/index-C_zKdQ_j.js +0 -134
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# @vue-skuilder/standalone-ui Package
|
|
2
|
+
|
|
3
|
+
Standalone Vue 3 application for course consumption without the full platform authoring interface.
|
|
4
|
+
|
|
5
|
+
## Commands
|
|
6
|
+
- Dev: `yarn workspace @vue-skuilder/standalone-ui dev` (Vite dev server, port 6173)
|
|
7
|
+
- Build: `yarn workspace @vue-skuilder/standalone-ui build` (Vite production build)
|
|
8
|
+
- Preview: `yarn workspace @vue-skuilder/standalone-ui preview`
|
|
9
|
+
- Test (E2E): `yarn workspace @vue-skuilder/standalone-ui test:e2e` (Cypress)
|
|
10
|
+
- Test (E2E headless): `yarn workspace @vue-skuilder/standalone-ui test:e2e:headless`
|
|
11
|
+
|
|
12
|
+
## Build System
|
|
13
|
+
- **Framework**: Vite with shared configuration (`vite.config.base.js`)
|
|
14
|
+
- **Target**: ES2020 with Terser minification
|
|
15
|
+
- **Port**: 6173 (distinct from platform-ui's 5173)
|
|
16
|
+
- **Environment**: Process polyfills for browser compatibility
|
|
17
|
+
|
|
18
|
+
## Testing
|
|
19
|
+
- **E2E Tests**: Cypress for application flow testing
|
|
20
|
+
- **Test Coverage**: Authentication and smoke tests
|
|
21
|
+
|
|
22
|
+
## Dependencies
|
|
23
|
+
|
|
24
|
+
### Core Framework
|
|
25
|
+
- **Vue 3**: `vue` with Composition API
|
|
26
|
+
- **Vuetify 3**: `vuetify` with Material Design components
|
|
27
|
+
- **Vue Router 4**: `vue-router` for navigation
|
|
28
|
+
- **Pinia**: `pinia` for state management
|
|
29
|
+
|
|
30
|
+
### Vue-Skuilder Packages
|
|
31
|
+
- `@vue-skuilder/common-ui` - Shared UI components
|
|
32
|
+
- `@vue-skuilder/courses` - Course content system
|
|
33
|
+
- `@vue-skuilder/db` - Database layer
|
|
34
|
+
|
|
35
|
+
### Utilities
|
|
36
|
+
- `events` - Event emitter for component communication
|
|
37
|
+
|
|
38
|
+
## Application Structure
|
|
39
|
+
|
|
40
|
+
### Views
|
|
41
|
+
- **HomeView**: Landing page and course selection
|
|
42
|
+
- **BrowseView**: Course catalog browsing
|
|
43
|
+
- **StudyView**: Study session interface
|
|
44
|
+
- **ProgressView**: Learning progress tracking
|
|
45
|
+
|
|
46
|
+
### Components
|
|
47
|
+
- **CourseHeader**: Course branding and navigation
|
|
48
|
+
- **CourseFooter**: Course completion status
|
|
49
|
+
|
|
50
|
+
### Configuration
|
|
51
|
+
- **Course Config**: `skuilder.config.json` for standalone course settings
|
|
52
|
+
- **Composables**: `useCourseConfig.ts` for configuration management
|
|
53
|
+
|
|
54
|
+
## Key Features
|
|
55
|
+
|
|
56
|
+
### Standalone Operation
|
|
57
|
+
- **Self-Contained**: No dependency on platform-ui or authoring tools
|
|
58
|
+
- **Course-Specific**: Designed for single-course deployment
|
|
59
|
+
- **Minimal Interface**: Focused on learning experience
|
|
60
|
+
|
|
61
|
+
### Study Experience
|
|
62
|
+
- **Progress Tracking**: Visual progress indicators
|
|
63
|
+
- **Session Management**: Configurable study sessions
|
|
64
|
+
- **Content Rendering**: Full course content type support
|
|
65
|
+
|
|
66
|
+
### Configuration System
|
|
67
|
+
- **Course Metadata**: Title, description, branding
|
|
68
|
+
- **Study Settings**: Session length, review scheduling
|
|
69
|
+
- **UI Customization**: Theme and layout options
|
|
70
|
+
|
|
71
|
+
## Deployment Scenarios
|
|
72
|
+
- **Single Course**: Packaged with specific course content
|
|
73
|
+
- **Course Marketplace**: Multiple course selection interface
|
|
74
|
+
- **Embedded Widget**: Iframe-embeddable course player
|
|
75
|
+
- **Mobile App**: Cordova/Capacitor wrapper for native apps
|
|
76
|
+
|
|
77
|
+
## Development Notes
|
|
78
|
+
- **Shared Codebase**: Reuses components from `common-ui` and `courses`
|
|
79
|
+
- **Independent Styling**: Custom theme separate from platform-ui
|
|
80
|
+
- **Minimal Backend**: Can operate with static data provider only
|
package/README.md
CHANGED
|
@@ -15,6 +15,10 @@ When courses are generated via the Skuilder CLI, this template transforms into c
|
|
|
15
15
|
|
|
16
16
|
Vue 3, Vuetify 3
|
|
17
17
|
|
|
18
|
+
## Theme Configuration
|
|
19
|
+
|
|
20
|
+
Theme colors and styling are loaded from `skuilder.config.json` at runtime. The application automatically applies both light and dark theme variants based on the configuration. When generated via the Skuilder CLI, this file is populated with the selected theme's complete color palette including all Vuetify semantic colors.
|
|
21
|
+
|
|
18
22
|
## Development
|
|
19
23
|
|
|
20
24
|
The existing `./skuilder.config.js` file contains a devenv config that loads an `anatomy` course from the existing test DB docker image.
|