@arronqzy/vue-view 0.1.24 → 0.1.26

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.
Files changed (26) hide show
  1. package/README.md +1 -11
  2. package/package.json +3 -3
  3. package/src/index.ts +25 -1
  4. package/src/panel/VueViewOnlinePreview.vue +25 -0
  5. package/src/panel/VueViewPanel.vue +188 -63
  6. package/src/panel/components/ElementsLayer.vue +1 -1
  7. package/src/panel/components/MaterialPreview.vue +28 -27
  8. package/src/panel/components/MaterialSidebar.vue +288 -225
  9. package/src/panel/components/MaterialSidebarTreeNode.vue +15 -10
  10. package/src/panel/components/MoveableLayer.vue +8 -0
  11. package/src/panel/components/PanelCanvas.vue +1 -0
  12. package/src/panel/components/PanelConfigSidebar.vue +23 -41
  13. package/src/panel/components/PanelRulers.vue +158 -40
  14. package/src/panel/components/SelectLayer.vue +2 -1
  15. package/src/panel/components/config/ConfigFieldGroup.vue +3 -3
  16. package/src/panel/components/config/ConfigSection.vue +5 -5
  17. package/src/panel/hooks/useWorkspaceProjects.ts +209 -67
  18. package/src/panel/lib/panel-ruler-canvas.ts +8 -4
  19. package/src/panel/library/abuilder-storage.ts +101 -3
  20. package/src/panel/library/abuilder-view-handle.ts +100 -0
  21. package/src/panel/library/capture-preview-snapshot.ts +800 -0
  22. package/src/panel/library/event-subscription.ts +70 -5
  23. package/src/panel/library/preview-snapshot.ts +252 -0
  24. package/src/panel/library/workspace-project-sync.ts +7 -1
  25. package/src/panel/library/workspace-storage.ts +58 -4
  26. package/src/tailwind.css +66 -5
package/src/panel/components/MaterialPreview.vue CHANGED
@@ -4,20 +4,21 @@ const { t, locale } = useI18n();
4
4
  defineProps<{ id: string }>();
5
5
 
6
6
  const common =
7
- "relative aspect-[4/3] w-full shrink-0 overflow-hidden rounded-md border border-border bg-gradient-to-br from-card to-muted/40";
7
+ "relative mx-auto aspect-[4/3] w-full shrink-0 overflow-hidden rounded-md border border-border/60 bg-gradient-to-br from-card to-muted/35";
8
+ const previewStyle = "max-width: 88px; max-height: 64px";
8
9
  </script>
9
10
 
10
11
  <template>
11
- <div v-if="id === 'bar'" :class="common">
12
- <div class="absolute inset-0 grid grid-cols-5 items-end gap-1 px-2 pb-2 pt-1.5">
13
- <div class="h-2 rounded-sm bg-primary/55" />
14
- <div class="h-4 rounded-sm bg-primary/65" />
15
- <div class="h-7 rounded-sm bg-primary/80" />
16
- <div class="h-5 rounded-sm bg-primary/70" />
17
- <div class="h-3 rounded-sm bg-primary/60" />
18
- </div>
12
+ <div v-if="id === 'bar'" :class="common" :style="previewStyle">
13
+ <svg viewBox="0 0 80 60" class="h-full w-full" aria-hidden="true">
14
+ <rect x="8" y="40" width="8" height="12" rx="1.5" class="fill-primary/55" />
15
+ <rect x="22" y="30" width="8" height="22" rx="1.5" class="fill-primary/65" />
16
+ <rect x="36" y="16" width="8" height="36" rx="1.5" class="fill-primary/80" />
17
+ <rect x="50" y="24" width="8" height="28" rx="1.5" class="fill-primary/70" />
18
+ <rect x="64" y="34" width="8" height="18" rx="1.5" class="fill-primary/60" />
19
+ </svg>
19
20
  </div>
20
- <div v-else-if="id === 'line' || id === 'area'" :class="common">
21
+ <div v-else-if="id === 'line' || id === 'area'" :class="common" :style="previewStyle">
21
22
  <svg viewBox="0 0 80 60" class="h-full w-full">
22
23
  <polygon
23
24
  v-if="id === 'area'"
@@ -34,14 +35,14 @@ const common =
34
35
  />
35
36
  </svg>
36
37
  </div>
37
- <div v-else-if="id === 'pie'" :class="common">
38
+ <div v-else-if="id === 'pie'" :class="common" :style="previewStyle">
38
39
  <svg viewBox="0 0 80 60" class="h-full w-full">
39
40
  <circle cx="40" cy="30" r="16" class="fill-primary/20" />
40
41
  <path d="M40 30 L40 14 A16 16 0 0 1 55 39 Z" class="fill-primary/75" />
41
42
  <path d="M40 30 L55 39 A16 16 0 0 1 27 43 Z" class="fill-primary/45" />
42
43
  </svg>
43
44
  </div>
44
- <div v-else-if="id === 'scatter'" :class="common">
45
+ <div v-else-if="id === 'scatter'" :class="common" :style="previewStyle">
45
46
  <svg viewBox="0 0 80 60" class="h-full w-full">
46
47
  <circle cx="14" cy="42" r="2.5" class="fill-primary/80" />
47
48
  <circle cx="24" cy="34" r="2.5" class="fill-primary/70" />
@@ -50,27 +51,27 @@ const common =
50
51
  <circle cx="62" cy="14" r="2.5" class="fill-primary/85" />
51
52
  </svg>
52
53
  </div>
53
- <div v-else-if="id === 'radar'" :class="common">
54
+ <div v-else-if="id === 'radar'" :class="common" :style="previewStyle">
54
55
  <svg viewBox="0 0 80 60" class="h-full w-full">
55
56
  <polygon points="40,10 58,20 54,40 26,40 22,20" class="fill-primary/20 stroke-primary/60" />
56
57
  <polygon points="40,16 52,23 49,36 31,36 28,24" class="fill-primary/45 stroke-primary/80" />
57
58
  </svg>
58
59
  </div>
59
- <div v-else-if="id === 'gauge'" :class="common">
60
+ <div v-else-if="id === 'gauge'" :class="common" :style="previewStyle">
60
61
  <svg viewBox="0 0 80 60" class="h-full w-full">
61
62
  <path d="M12 44a28 28 0 0 1 56 0" class="fill-none stroke-primary/35" stroke-width="6" />
62
63
  <path d="M12 44a28 28 0 0 1 40-24" class="fill-none stroke-primary/80" stroke-width="6" />
63
64
  <line x1="40" y1="44" x2="54" y2="28" class="stroke-primary" stroke-width="2" />
64
65
  </svg>
65
66
  </div>
66
- <div v-else-if="id === 'funnel'" :class="common">
67
+ <div v-else-if="id === 'funnel'" :class="common" :style="previewStyle">
67
68
  <svg viewBox="0 0 80 60" class="h-full w-full">
68
69
  <polygon points="10,10 70,10 58,22 22,22" class="fill-primary/80" />
69
70
  <polygon points="22,24 58,24 50,34 30,34" class="fill-primary/65" />
70
71
  <polygon points="30,36 50,36 44,44 36,44" class="fill-primary/50" />
71
72
  </svg>
72
73
  </div>
73
- <div v-else-if="id === 'text'" :class="common">
74
+ <div v-else-if="id === 'text'" :class="common" :style="previewStyle">
74
75
  <div class="space-y-1.5 px-2 py-2">
75
76
  <div class="h-2 w-10 rounded bg-primary/70" />
76
77
  <div class="h-1.5 w-full rounded bg-muted-foreground/45" />
@@ -78,7 +79,7 @@ const common =
78
79
  <div class="h-1.5 w-8/12 rounded bg-muted-foreground/45" />
79
80
  </div>
80
81
  </div>
81
- <div v-else-if="id === 'table'" :class="common">
82
+ <div v-else-if="id === 'table'" :class="common" :style="previewStyle">
82
83
  <div class="absolute inset-0 flex flex-col gap-1 p-2">
83
84
  <div class="grid h-3 flex-none grid-cols-3 gap-1">
84
85
  <div class="rounded-sm bg-primary/75" />
@@ -94,10 +95,10 @@ const common =
94
95
  </div>
95
96
  </div>
96
97
  </div>
97
- <div v-else-if="id === 'rect'" :class="common">
98
+ <div v-else-if="id === 'rect'" :class="common" :style="previewStyle">
98
99
  <div class="absolute inset-2 rounded-md border-2 border-primary/80 bg-primary/15" />
99
100
  </div>
100
- <div v-else-if="id === 'geometry'" :class="common">
101
+ <div v-else-if="id === 'geometry'" :class="common" :style="previewStyle">
101
102
  <svg viewBox="0 0 80 60" class="h-full w-full">
102
103
  <circle cx="22" cy="18" r="8" class="fill-primary/75" />
103
104
  <rect x="36" y="10" width="16" height="16" rx="3" class="fill-primary/55" />
@@ -106,7 +107,7 @@ const common =
106
107
  <polygon points="50,36 54,42 50,48 42,48 38,42 42,36" class="fill-primary/70" />
107
108
  </svg>
108
109
  </div>
109
- <div v-else-if="id === 'scene3d'" :class="common">
110
+ <div v-else-if="id === 'scene3d'" :class="common" :style="previewStyle">
110
111
  <svg viewBox="0 0 80 60" class="h-full w-full">
111
112
  <polygon points="40,8 62,22 62,44 40,56 18,44 18,22" class="fill-primary/20 stroke-primary/80" stroke-width="1.5" />
112
113
  <polygon points="40,8 62,22 40,32 18,22" class="fill-primary/45" />
@@ -114,13 +115,13 @@ const common =
114
115
  <polygon points="40,32 18,22 18,44 40,56" class="fill-primary/55" />
115
116
  </svg>
116
117
  </div>
117
- <div v-else-if="id === 'reference'" :class="common">
118
+ <div v-else-if="id === 'reference'" :class="common" :style="previewStyle">
118
119
  <div class="absolute inset-2 rounded-md border border-dashed border-primary/70 bg-primary/10" />
119
120
  <div class="absolute inset-0 flex items-center justify-center text-[10px] text-primary/80">
120
121
  {{ t("panel.material.reference") }}
121
122
  </div>
122
123
  </div>
123
- <div v-else-if="id === 'image'" :class="common">
124
+ <div v-else-if="id === 'image'" :class="common" :style="previewStyle">
124
125
  <div class="absolute inset-0 bg-gradient-to-br from-primary/25 via-muted/60 to-card" />
125
126
  <svg viewBox="0 0 80 60" class="absolute inset-0 h-full w-full">
126
127
  <circle cx="16" cy="14" r="5" class="fill-primary/70" />
@@ -128,7 +129,7 @@ const common =
128
129
  <polygon points="0,60 18,42 30,54 44,36 62,60" class="fill-primary/55" />
129
130
  </svg>
130
131
  </div>
131
- <div v-else-if="id === 'video'" :class="common">
132
+ <div v-else-if="id === 'video'" :class="common" :style="previewStyle">
132
133
  <div class="absolute inset-0 bg-primary/12" />
133
134
  <div class="absolute left-2 right-2 top-2 h-1.5 rounded bg-primary/35" />
134
135
  <div class="absolute inset-0 flex items-center justify-center">
@@ -139,7 +140,7 @@ const common =
139
140
  </div>
140
141
  </div>
141
142
  </div>
142
- <div v-else-if="id === 'audio'" :class="common">
143
+ <div v-else-if="id === 'audio'" :class="common" :style="previewStyle">
143
144
  <div class="absolute inset-0 flex items-center justify-center gap-1">
144
145
  <div class="h-3 w-1.5 rounded bg-primary/50" />
145
146
  <div class="h-6 w-1.5 rounded bg-primary/75" />
@@ -148,7 +149,7 @@ const common =
148
149
  <div class="h-4 w-1.5 rounded bg-primary/55" />
149
150
  </div>
150
151
  </div>
151
- <div v-else-if="id === 'grid'" :class="common">
152
+ <div v-else-if="id === 'grid'" :class="common" :style="previewStyle">
152
153
  <div class="absolute inset-0 grid grid-cols-3 grid-rows-2 gap-1.5 p-2">
153
154
  <div
154
155
  v-for="idx in 6"
@@ -157,7 +158,7 @@ const common =
157
158
  />
158
159
  </div>
159
160
  </div>
160
- <div v-else-if="id === 'viewport'" :class="common">
161
+ <div v-else-if="id === 'viewport'" :class="common" :style="previewStyle">
161
162
  <div class="absolute inset-1.5 overflow-hidden rounded-sm border border-primary/70 bg-primary/10">
162
163
  <div class="absolute left-1 top-1 h-6 w-8 rounded-[2px] bg-primary/45" />
163
164
  <div class="absolute left-6 top-4 h-7 w-10 rounded-[2px] bg-primary/30" />
@@ -165,5 +166,5 @@ const common =
165
166
  <div class="absolute bottom-0 right-0 top-2 w-1.5 rounded-l bg-primary/40" />
166
167
  </div>
167
168
  </div>
168
- <div v-else :class="common" />
169
+ <div v-else :class="common" :style="previewStyle" />
169
170
  </template>