shared-ritm 1.2.1 → 1.2.2

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 (5) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/shared-ritm.es.js +1240 -1260
  3. package/dist/shared-ritm.umd.js +2 -2
  4. package/package.json +1 -1
  5. package/src/common/app-sheet/AppSheet.vue +120 -166
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shared-ritm",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist",
package/src/common/app-sheet/AppSheet.vue CHANGED
@@ -1,166 +1,120 @@
1
- <template>
2
- <teleport to="body">
3
- <q-dialog
4
- ref="DialogRef"
5
- no-refocus
6
- no-focus
7
- :model-value="true"
8
- :position="'right'"
9
- :class="$style['sheet-dialog']"
10
- :auto-focus="false"
11
- :focus-trap="false"
12
- no-shake
13
- no-esc-dismiss
14
- full-height
15
- full-width
16
- >
17
- <template v-if="type === 'details'">
18
- <q-card>
19
- <div class="wrapper">
20
- <div class="sheet-header">
21
- <h2>{{ title }}</h2>
22
- <div class="close-button">
23
- <q-btn v-close-popup dense flat icon="close" />
24
- </div>
25
- </div>
26
- <div v-if="loading" class="loader">
27
- <q-spinner-audio v-if="loading" class="loader-spinner" size="md" :thickness="3" color="primary" />
28
- </div>
29
- <slot v-else />
30
- </div>
31
- </q-card>
32
- </template>
33
- <template v-if="type === 'custom'">
34
- <div v-if="loading" class="custom-wrapper">
35
- <div class="loader">
36
- <q-spinner-audio v-if="loading" class="loader-spinner" size="md" :thickness="3" color="primary" />
37
- </div>
38
- </div>
39
- <slot v-else />
40
- </template>
41
- </q-dialog>
42
- </teleport>
43
- </template>
44
-
45
- <script setup lang="ts">
46
- import { computed, defineEmits, defineProps, nextTick, onMounted, ref, withDefaults } from 'vue'
47
-
48
- interface DialogProps {
49
- dialogRef: any
50
- loading?: boolean
51
- title?: string
52
- width?: string
53
- type?: 'details' | 'custom'
54
- tabs?: any[]
55
- currentTabName?: string
56
- }
57
-
58
- const props = withDefaults(defineProps<DialogProps>(), {
59
- title: '',
60
- width: '976px',
61
- type: 'details',
62
- loading: false,
63
- tabs: () => [],
64
- currentTabName: '',
65
- })
66
-
67
- const emit = defineEmits(['update:dialogRef', 'update:currentTabName'])
68
-
69
- const DialogRef = computed({
70
- get() {
71
- return props.dialogRef
72
- },
73
- set(value) {
74
- emit('update:dialogRef', value)
75
- },
76
- })
77
-
78
- function patchDialogFocus(rootEl: HTMLElement) {
79
- // Переопределяем метод .focus() у элемента
80
- rootEl.focus = () => {}
81
-
82
- // Удаляем все автофокусы, чтобы они не триггерили фокусные ловушки
83
- const autofocusElements = rootEl.querySelectorAll('[autofocus], [data-autofocus]')
84
- autofocusElements.forEach(el => {
85
- el.removeAttribute('autofocus')
86
- el.removeAttribute('data-autofocus')
87
- })
88
- }
89
-
90
- onMounted(async () => {
91
- await nextTick()
92
-
93
- const el = DialogRef.value?.$el ?? DialogRef.value
94
- if (!el) return
95
-
96
- const dialogEl = el.closest('.q-dialog')
97
- if (dialogEl instanceof HTMLElement) {
98
- patchDialogFocus(dialogEl)
99
- }
100
- })
101
- </script>
102
-
103
- <style>
104
- .q-focus-helper {
105
- display: none !important;
106
- pointer-events: none !important;
107
- outline: none !important;
108
- }
109
- </style>
110
-
111
- <style lang="scss" scoped>
112
- .custom-wrapper {
113
- width: v-bind(width);
114
- background-color: white;
115
- }
116
-
117
- .wrapper {
118
- display: flex;
119
- flex-direction: column;
120
- gap: 1rem;
121
- width: v-bind(width);
122
- height: 100vh;
123
- min-height: 100vh;
124
- position: relative;
125
- padding: 2rem 2rem 4rem 2rem;
126
- background-color: #7991ad32;
127
- font-family: 'NunitoSansFont', sans-serif;
128
- }
129
-
130
- .sheet-header {
131
- display: flex;
132
- justify-content: space-between;
133
- align-items: center;
134
-
135
- h2 {
136
- font-size: 36px;
137
- }
138
- }
139
-
140
- .loader {
141
- min-width: 976px;
142
-
143
- &-spinner {
144
- position: absolute;
145
- top: 50%;
146
- left: 50%;
147
- z-index: 4;
148
- }
149
- }
150
- </style>
151
-
152
- <style lang="scss" module>
153
- .sheet-dialog {
154
- :global(.q-dialog__inner--minimized) {
155
- padding: 0;
156
- }
157
- :deep(.q-focus-helper) {
158
- display: none !important;
159
- pointer-events: none !important;
160
- }
161
- :global(.q-focus-helper) {
162
- display: none !important;
163
- pointer-events: none !important;
164
- }
165
- }
166
- </style>
1
+ <template>
2
+ <q-dialog
3
+ ref="DialogRef"
4
+ :model-value="true"
5
+ :position="'right'"
6
+ :class="$style['sheet-dialog']"
7
+ no-shake
8
+ no-esc-dismiss
9
+ full-height
10
+ full-width
11
+ >
12
+ <template v-if="type === 'details'">
13
+ <q-card>
14
+ <div class="wrapper">
15
+ <div class="sheet-header">
16
+ <h2>{{ title }}</h2>
17
+ <div class="close-button">
18
+ <q-btn v-close-popup dense flat icon="close" />
19
+ </div>
20
+ </div>
21
+ <div v-if="loading" class="loader">
22
+ <q-spinner-audio v-if="loading" class="loader-spinner" size="md" :thickness="3" color="primary" />
23
+ </div>
24
+ <slot v-else />
25
+ </div>
26
+ </q-card>
27
+ </template>
28
+ <template v-if="type === 'custom'">
29
+ <div v-if="loading" class="custom-wrapper">
30
+ <div class="loader">
31
+ <q-spinner-audio v-if="loading" class="loader-spinner" size="md" :thickness="3" color="primary" />
32
+ </div>
33
+ </div>
34
+ <slot v-else />
35
+ </template>
36
+ </q-dialog>
37
+ </template>
38
+
39
+ <script setup lang="ts">
40
+ import { computed, defineEmits, defineProps, withDefaults } from 'vue'
41
+
42
+ interface DialogProps {
43
+ dialogRef: any
44
+ loading?: boolean
45
+ title?: string
46
+ width?: string
47
+ type?: 'details' | 'custom'
48
+ tabs?: any[]
49
+ currentTabName?: string
50
+ }
51
+
52
+ const props = withDefaults(defineProps<DialogProps>(), {
53
+ title: '',
54
+ width: '976px',
55
+ type: 'details',
56
+ loading: false,
57
+ tabs: () => [],
58
+ currentTabName: '',
59
+ })
60
+
61
+ const emit = defineEmits(['update:dialogRef', 'update:currentTabName'])
62
+
63
+ const DialogRef = computed({
64
+ get() {
65
+ return props.dialogRef
66
+ },
67
+ set(value) {
68
+ emit('update:dialogRef', value)
69
+ },
70
+ })
71
+ </script>
72
+
73
+ <style lang="scss" scoped>
74
+ .custom-wrapper {
75
+ width: v-bind(width);
76
+ background-color: white;
77
+ }
78
+
79
+ .wrapper {
80
+ display: flex;
81
+ flex-direction: column;
82
+ gap: 1rem;
83
+ width: v-bind(width);
84
+ height: 100vh;
85
+ min-height: 100vh;
86
+ position: relative;
87
+ padding: 2rem 2rem 4rem 2rem;
88
+ background-color: #7991ad32;
89
+ font-family: 'NunitoSansFont', sans-serif;
90
+ }
91
+
92
+ .sheet-header {
93
+ display: flex;
94
+ justify-content: space-between;
95
+ align-items: center;
96
+
97
+ h2 {
98
+ font-size: 36px;
99
+ }
100
+ }
101
+
102
+ .loader {
103
+ min-width: 976px;
104
+
105
+ &-spinner {
106
+ position: absolute;
107
+ top: 50%;
108
+ left: 50%;
109
+ z-index: 4;
110
+ }
111
+ }
112
+ </style>
113
+
114
+ <style lang="scss" module>
115
+ .sheet-dialog {
116
+ :global(.q-dialog__inner--minimized) {
117
+ padding: 0;
118
+ }
119
+ }
120
+ </style>