@7365admin1/layer-common 3.2.2-staging.113 → 3.2.2-staging.114

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.
@@ -2,34 +2,33 @@
2
2
  <v-dialog
3
3
  :model-value="modelValue"
4
4
  @update:model-value="val => $emit('update:modelValue', val)"
5
- max-width="420"
5
+ :max-width="520"
6
6
  persistent
7
7
  >
8
- <v-card class="pa-4" style="border-radius:12px;">
9
- <v-card-title class="headline" style="font-size:1.3rem; font-weight:500;">
10
- {{ title }}
11
- </v-card-title>
12
- <v-card-text style="font-size:1.05rem; margin-bottom:24px;">
8
+ <v-card class="screen-modal">
9
+ <v-card-title>{{ title }}</v-card-title>
10
+ <v-card-text class="screen-modal__body">
13
11
  {{ message }}
14
12
  </v-card-text>
15
- <v-card-actions class="justify-end" style="gap:12px;">
13
+ <!-- The design's footer is ghost-then-primary, equal width. "No" is the
14
+ dismissing action and "Yes" the confirming one, so they take the
15
+ Cancel / Submit shapes in that order. -->
16
+ <div class="screen-modal__footer">
16
17
  <v-btn
17
- color="primary"
18
+ class="screen-btn-ghost"
18
19
  variant="outlined"
19
- style="min-width:70px; background:#e3f2fd; color:#1976d2; font-weight:500;"
20
- @click="$emit('confirm')"
20
+ @click="$emit('cancel')"
21
21
  >
22
- Yes
22
+ No
23
23
  </v-btn>
24
24
  <v-btn
25
- color="error"
26
- variant="outlined"
27
- style="min-width:70px; background:#ffebee; color:#d32f2f; font-weight:500;"
28
- @click="$emit('cancel')"
25
+ class="screen-btn-primary"
26
+ variant="flat"
27
+ @click="$emit('confirm')"
29
28
  >
30
- No
29
+ Yes
31
30
  </v-btn>
32
- </v-card-actions>
31
+ </div>
33
32
  </v-card>
34
33
  </v-dialog>
35
34
  </template>
@@ -41,4 +40,4 @@ defineProps<{
41
40
  message?: string
42
41
  }>();
43
42
  defineEmits(['confirm', 'cancel', 'update:modelValue']);
44
- </script>
43
+ </script>
@@ -1,30 +1,29 @@
1
1
  <template>
2
- <v-card width="100%" :disabled="loading" :loading="loading">
3
- <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
4
- <span> {{ promptTitle }}</span>
2
+ <v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
3
+ <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
4
+ <span class="screen-card-title"> {{ promptTitle }}</span>
5
5
 
6
+ <!-- `text-error` is Vuetify's own class over `--v-theme-error`,
7
+ which is the design's `--err` in both themes - already a token,
8
+ so it stays. -->
6
9
  <span v-if="message" class="text-error mt-2">
7
10
  {{ message }} Do you want to delete anyway?
8
11
  </span>
9
12
  </v-card-text>
10
13
 
11
- <v-toolbar class="pa-0" density="compact">
12
- <v-row no-gutters>
13
- <v-col cols="6" class="pa-0">
14
- <v-btn block variant="text" class="text-none" size="large" tile @click="emit('close')"
15
- height="48">
16
- Cancel
17
- </v-btn>
18
- </v-col>
14
+ <!-- The design's footer: two equal-width buttons, ghost then primary,
15
+ on a bordered strip. The handoff draws no destructive variant, so
16
+ the confirming action takes the primary shape like every other
17
+ modal's Submit. -->
18
+ <div class="screen-modal__footer">
19
+ <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
20
+ Cancel
21
+ </v-btn>
19
22
 
20
- <v-col cols="6" class="pa-0">
21
- <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
22
- @click="emit('delete')">
23
- Delete
24
- </v-btn>
25
- </v-col>
26
- </v-row>
27
- </v-toolbar>
23
+ <v-btn class="screen-btn-primary" variant="flat" @click="emit('delete')">
24
+ Delete
25
+ </v-btn>
26
+ </div>
28
27
  </v-card>
29
28
  </template>
30
29
 
@@ -48,4 +47,4 @@ const emit = defineEmits(["close", "delete"])
48
47
 
49
48
  </script>
50
49
 
51
- <style scoped></style>
50
+ <style scoped></style>
@@ -1,30 +1,29 @@
1
1
  <template>
2
- <v-card width="100%" :disabled="loading" :loading="loading">
3
- <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
4
- <span> {{ promptTitle }}</span>
2
+ <v-card class="screen-modal" width="100%" :disabled="loading" :loading="loading">
3
+ <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
4
+ <span class="screen-card-title"> {{ promptTitle }}</span>
5
5
 
6
- <div v-if="message" class="text-error mt-2">
6
+ <!-- `text-error` is Vuetify's own class over `--v-theme-error`,
7
+ which is the design's `--err` in both themes - already a token,
8
+ so it stays. -->
9
+ <div v-if="message" class="text-error mt-2">
7
10
  {{ message }} Do you want to delete anyway?
8
11
  </div>
9
12
  </v-card-text>
10
13
 
11
- <v-toolbar class="pa-0" density="compact">
12
- <v-row no-gutters>
13
- <v-col cols="6" class="pa-0">
14
- <v-btn block variant="text" class="text-none" size="large" tile @click="emit('close')"
15
- height="48">
16
- Cancel
17
- </v-btn>
18
- </v-col>
14
+ <!-- The design's footer: two equal-width buttons, ghost then primary,
15
+ on a bordered strip. The handoff draws no destructive variant, so
16
+ the confirming action takes the primary shape like every other
17
+ modal's Submit. -->
18
+ <div class="screen-modal__footer">
19
+ <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('close')">
20
+ Cancel
21
+ </v-btn>
19
22
 
20
- <v-col cols="6" class="pa-0">
21
- <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="black"
22
- @click="emit('delete')">
23
- Delete
24
- </v-btn>
25
- </v-col>
26
- </v-row>
27
- </v-toolbar>
23
+ <v-btn class="screen-btn-primary" variant="flat" @click="emit('delete')">
24
+ Delete
25
+ </v-btn>
26
+ </div>
28
27
  </v-card>
29
28
  </template>
30
29
 
@@ -48,4 +47,4 @@ const emit = defineEmits(["close", "delete"])
48
47
 
49
48
  </script>
50
49
 
51
- <style scoped></style>
50
+ <style scoped></style>
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@7365admin1/layer-common",
3
3
  "license": "MIT",
4
4
  "type": "module",
5
- "version": "3.2.2-staging.113",
5
+ "version": "3.2.2-staging.114",
6
6
  "author": "7365admin1",
7
7
  "main": "./nuxt.config.ts",
8
8
  "publishConfig": {