vue-plugin-live2d 0.0.16 → 0.0.17

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 (2) hide show
  1. package/package.json +2 -2
  2. package/src/Live2D.vue +88 -88
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-plugin-live2d",
3
- "version": "0.0.16",
3
+ "version": "0.0.17",
4
4
  "description": "Vue 3 <Live2D> component — mount @doki-land/live2d with props, progress UI, and lifecycle.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -37,7 +37,7 @@
37
37
  "vue": "^3.4.0"
38
38
  },
39
39
  "dependencies": {
40
- "@doki-land/live2d": "0.0.16"
40
+ "@doki-land/live2d": "0.0.17"
41
41
  },
42
42
  "sideEffects": false
43
43
  }
package/src/Live2D.vue CHANGED
@@ -1,32 +1,32 @@
1
-
2
- <template>
3
- <div
4
- class="doki-live2d-root"
5
- :style="{ width: `${width}px`, height: `${height}px` }"
6
- >
7
- <div ref="hostRef" class="doki-live2d-host"/>
8
- <div
9
- v-if="showProgress && loading"
10
- class="doki-live2d-progress"
11
- role="progressbar"
12
- :aria-valuenow="progressPercent"
13
- aria-valuemin="0"
14
- aria-valuemax="100"
15
- >
16
- <div class="doki-live2d-progress__track">
17
- <div
18
- class="doki-live2d-progress__fill"
19
- :style="{ width: `${progressPercent}%` }"
20
- />
21
- </div>
22
- <div class="doki-live2d-progress__label">
23
- {{ progressLabel }} · {{ progressPercent }}%
24
- </div>
25
- </div>
26
- </div>
27
- </template>
28
-
29
- <script setup lang="ts">
1
+
2
+ <template>
3
+ <div
4
+ class="doki-live2d-root"
5
+ :style="{ width: `${width}px`, height: `${height}px` }"
6
+ >
7
+ <div ref="hostRef" class="doki-live2d-host"/>
8
+ <div
9
+ v-if="showProgress && loading"
10
+ class="doki-live2d-progress"
11
+ role="progressbar"
12
+ :aria-valuenow="progressPercent"
13
+ aria-valuemin="0"
14
+ aria-valuemax="100"
15
+ >
16
+ <div class="doki-live2d-progress__track">
17
+ <div
18
+ class="doki-live2d-progress__fill"
19
+ :style="{ width: `${progressPercent}%` }"
20
+ />
21
+ </div>
22
+ <div class="doki-live2d-progress__label">
23
+ {{ progressLabel }} · {{ progressPercent }}%
24
+ </div>
25
+ </div>
26
+ </div>
27
+ </template>
28
+
29
+ <script setup lang="ts">
30
30
  import {
31
31
  createLive2D,
32
32
  createRenderer,
@@ -354,62 +354,62 @@ defineExpose({
354
354
  },
355
355
  reload,
356
356
  });
357
- </script>
358
-
359
- <style scoped>
360
- .doki-live2d-root {
361
- position: relative;
362
- display: inline-block;
363
- line-height: 0;
364
- }
365
-
366
- .doki-live2d-host {
367
- display: block;
368
- width: 100%;
369
- height: 100%;
370
- line-height: 0;
371
- }
372
-
373
- .doki-live2d-host :deep(canvas) {
374
- display: block;
375
- width: 100%;
376
- height: 100%;
377
- background: transparent;
378
- pointer-events: auto;
379
- touch-action: none;
380
- }
381
-
382
- .doki-live2d-progress {
383
- position: absolute;
384
- inset: 0;
385
- display: grid;
386
- align-content: center;
387
- justify-items: stretch;
388
- gap: 0.55rem;
389
- padding: 1.25rem;
390
- box-sizing: border-box;
391
- background: color-mix(in srgb, #0f1b2d 55%, transparent);
392
- pointer-events: none;
393
- }
394
-
395
- .doki-live2d-progress__track {
396
- height: 0.45rem;
397
- border-radius: 999px;
398
- background: color-mix(in srgb, #fff 22%, transparent);
399
- overflow: hidden;
400
- }
401
-
402
- .doki-live2d-progress__fill {
403
- height: 100%;
404
- border-radius: inherit;
405
- background: #7eb6ff;
406
- transition: width 80ms linear;
407
- }
408
-
409
- .doki-live2d-progress__label {
410
- color: #f4f8ff;
411
- font: 0.78rem/1.3 ui-sans-serif, system-ui, sans-serif;
412
- text-align: center;
413
- word-break: break-all;
414
- }
415
- </style>
357
+ </script>
358
+
359
+ <style scoped>
360
+ .doki-live2d-root {
361
+ position: relative;
362
+ display: inline-block;
363
+ line-height: 0;
364
+ }
365
+
366
+ .doki-live2d-host {
367
+ display: block;
368
+ width: 100%;
369
+ height: 100%;
370
+ line-height: 0;
371
+ }
372
+
373
+ .doki-live2d-host :deep(canvas) {
374
+ display: block;
375
+ width: 100%;
376
+ height: 100%;
377
+ background: transparent;
378
+ pointer-events: auto;
379
+ touch-action: none;
380
+ }
381
+
382
+ .doki-live2d-progress {
383
+ position: absolute;
384
+ inset: 0;
385
+ display: grid;
386
+ align-content: center;
387
+ justify-items: stretch;
388
+ gap: 0.55rem;
389
+ padding: 1.25rem;
390
+ box-sizing: border-box;
391
+ background: color-mix(in srgb, #0f1b2d 55%, transparent);
392
+ pointer-events: none;
393
+ }
394
+
395
+ .doki-live2d-progress__track {
396
+ height: 0.45rem;
397
+ border-radius: 999px;
398
+ background: color-mix(in srgb, #fff 22%, transparent);
399
+ overflow: hidden;
400
+ }
401
+
402
+ .doki-live2d-progress__fill {
403
+ height: 100%;
404
+ border-radius: inherit;
405
+ background: #7eb6ff;
406
+ transition: width 80ms linear;
407
+ }
408
+
409
+ .doki-live2d-progress__label {
410
+ color: #f4f8ff;
411
+ font: 0.78rem/1.3 ui-sans-serif, system-ui, sans-serif;
412
+ text-align: center;
413
+ word-break: break-all;
414
+ }
415
+ </style>