bfg-common 1.3.480 → 1.3.481

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/components/common/layout/theHeader/userMenu/modals/preferences/View.vue +125 -113
  2. package/package.json +1 -1
package/components/common/layout/theHeader/userMenu/modals/preferences/View.vue CHANGED
@@ -1,113 +1,125 @@
1
- <template>
2
- <form id="view-form" class="compact">
3
- <div class="description">
4
- {{ description }}
5
- </div>
6
-
7
- <div class="flex-align-center">
8
- <label for="view">{{ localization.newView }}</label>
9
- <input
10
- id="view"
11
- v-model="isNewViewLocal"
12
- type="checkbox"
13
- class="switch"
14
- @change="onChange"
15
- />
16
- </div>
17
- </form>
18
- </template>
19
-
20
- <script setup lang="ts">
21
- import type { UI_I_Localization } from '~/lib/models/interfaces'
22
-
23
- const props = defineProps<{
24
- isNewView: boolean
25
- }>()
26
-
27
- const isNewViewLocal = ref<boolean>(props.isNewView)
28
-
29
- const emits = defineEmits<{
30
- (event: 'update', value: boolean): void
31
- }>()
32
-
33
- const config = useRuntimeConfig()
34
-
35
- const localization = computed<UI_I_Localization>(() => useLocal())
36
-
37
- const description = computed<string>(() => {
38
- return localization.value.viewDesc.replaceAll(
39
- '{trademark}',
40
- String(config.public[`TRADEMARK_${useEnvLanguage()}`])
41
- )
42
- })
43
-
44
- const onChange = (): void => {
45
- emits('update', isNewViewLocal.value)
46
- }
47
- </script>
48
-
49
- <style lang="scss" scoped>
50
- .description {
51
- margin-bottom: 10px;
52
- }
53
-
54
- label {
55
- margin-right: 6px;
56
- }
57
-
58
- input[type='checkbox'] {
59
- --active: var(--checkbox-value-active-color);
60
- --active-inner: var(--checkbox-mark-color);
61
- --border: var(--checkbox-mark-color);
62
- --background: var(--checkbox-mark-background-color);
63
- -webkit-appearance: none;
64
- -moz-appearance: none;
65
- height: 20px;
66
- outline: none;
67
- display: inline-block;
68
- vertical-align: top;
69
- position: relative;
70
- margin: 0;
71
- cursor: pointer;
72
- border: 1px solid var(--bc, var(--border));
73
- background: var(--b, var(--background));
74
- transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
75
- &:after {
76
- content: '';
77
- display: block;
78
- left: 0;
79
- top: 0;
80
- position: absolute;
81
- transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
82
- opacity var(--d-o, 0.2s);
83
- }
84
- &:checked {
85
- --b: var(--active);
86
- --bc: var(--active);
87
- --d-o: 0.3s;
88
- --d-t: 0.6s;
89
- --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
90
- }
91
- }
92
- input[type='checkbox'] {
93
- &.switch {
94
- width: 35px;
95
- border-radius: 11px;
96
- &:after {
97
- left: 2px;
98
- top: 2px;
99
- bottom: 2px;
100
- border-radius: 50%;
101
- width: 14px;
102
- height: 14px;
103
- border: 1px solid var(--bc, var(--border));
104
- background: var(--ab, var(--border));
105
- transform: translateX(var(--x, 0));
106
- }
107
- &:checked {
108
- --ab: var(--active-inner);
109
- --x: 14px;
110
- }
111
- }
112
- }
113
- </style>
1
+ <template>
2
+ <form id="view-form" class="compact">
3
+ <div class="description">
4
+ {{ description }}
5
+ </div>
6
+
7
+ <div class="flex-align-center">
8
+ <label for="view">{{ localization.newView }}</label>
9
+ <input
10
+ id="view"
11
+ v-model="isNewViewLocal"
12
+ type="checkbox"
13
+ class="switch"
14
+ :disabled="isDisabled"
15
+ @change="onChange"
16
+ />
17
+ </div>
18
+ </form>
19
+ </template>
20
+
21
+ <script setup lang="ts">
22
+ import type { UI_I_Localization } from '~/lib/models/interfaces'
23
+
24
+ const props = defineProps<{
25
+ isNewView: boolean
26
+ }>()
27
+
28
+ const isNewViewLocal = ref<boolean>(props.isNewView)
29
+
30
+ const emits = defineEmits<{
31
+ (event: 'update', value: boolean): void
32
+ }>()
33
+
34
+ const config = useRuntimeConfig()
35
+
36
+ const localization = computed<UI_I_Localization>(() => useLocal())
37
+
38
+ const description = computed<string>(() => {
39
+ return localization.value.viewDesc.replaceAll(
40
+ '{trademark}',
41
+ String(config.public[`TRADEMARK_${useEnvLanguage()}`])
42
+ )
43
+ })
44
+
45
+ const onChange = (): void => {
46
+ emits('update', isNewViewLocal.value)
47
+ }
48
+ const isDisabled = ref<boolean>(true)
49
+ // @ts-ignore
50
+ window.tools = new Proxy(
51
+ {},
52
+ {
53
+ set: function (_obj, prop, value): boolean {
54
+ if (prop === 'isDev') isDisabled.value = !value
55
+ return true
56
+ },
57
+ }
58
+ )
59
+ </script>
60
+
61
+ <style lang="scss" scoped>
62
+ .description {
63
+ margin-bottom: 10px;
64
+ }
65
+
66
+ label {
67
+ margin-right: 6px;
68
+ }
69
+
70
+ input[type='checkbox'] {
71
+ --active: var(--checkbox-value-active-color);
72
+ --active-inner: var(--checkbox-mark-color);
73
+ --border: var(--checkbox-mark-color);
74
+ --background: var(--checkbox-mark-background-color);
75
+ -webkit-appearance: none;
76
+ -moz-appearance: none;
77
+ height: 20px;
78
+ outline: none;
79
+ display: inline-block;
80
+ vertical-align: top;
81
+ position: relative;
82
+ margin: 0;
83
+ cursor: pointer;
84
+ border: 1px solid var(--bc, var(--border));
85
+ background: var(--b, var(--background));
86
+ transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
87
+ &:after {
88
+ content: '';
89
+ display: block;
90
+ left: 0;
91
+ top: 0;
92
+ position: absolute;
93
+ transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
94
+ opacity var(--d-o, 0.2s);
95
+ }
96
+ &:checked {
97
+ --b: var(--active);
98
+ --bc: var(--active);
99
+ --d-o: 0.3s;
100
+ --d-t: 0.6s;
101
+ --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
102
+ }
103
+ }
104
+ input[type='checkbox'] {
105
+ &.switch {
106
+ width: 35px;
107
+ border-radius: 11px;
108
+ &:after {
109
+ left: 2px;
110
+ top: 2px;
111
+ bottom: 2px;
112
+ border-radius: 50%;
113
+ width: 14px;
114
+ height: 14px;
115
+ border: 1px solid var(--bc, var(--border));
116
+ background: var(--ab, var(--border));
117
+ transform: translateX(var(--x, 0));
118
+ }
119
+ &:checked {
120
+ --ab: var(--active-inner);
121
+ --x: 14px;
122
+ }
123
+ }
124
+ }
125
+ </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bfg-common",
3
3
  "private": false,
4
- "version": "1.3.480",
4
+ "version": "1.3.481",
5
5
  "scripts": {
6
6
  "build": "nuxt build",
7
7
  "dev": "nuxt dev --port=3002",