bfg-common 1.3.17 → 1.3.19

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.
@@ -1,107 +1,107 @@
1
- <template>
2
- <div class="switch-body">
3
- <input :id="props.testId" v-model="value" type="checkbox" />
4
- <label class="switch-label" :for="props.testId"> </label>
5
- </div>
6
- </template>
7
-
8
- <script setup lang="ts">
9
- const props = withDefaults(
10
- defineProps<{
11
- modelValue: boolean
12
- testId?: string
13
- }>(),
14
- { testId: 'ui-switch' }
15
- )
16
-
17
- const emits = defineEmits<{
18
- (event: 'update:model-value', value: boolean): void
19
- }>()
20
-
21
- const value = computed<boolean>({
22
- get() {
23
- return props.modelValue
24
- },
25
- set(newValue) {
26
- emits('update:model-value', newValue)
27
- },
28
- })
29
- </script>
30
-
31
- <style>
32
- :root {
33
- --label-before-bg-color: #737373;
34
- --label-after-bg-color: #fff;
35
- --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
36
- }
37
-
38
- :root.dark-theme {
39
- --label-before-bg-color: #fff;
40
- --label-after-bg-color: #1b2a32;
41
- --label-before-box-shadow: 0 0 0;
42
- }
43
- </style>
44
-
45
- <style scoped lang="scss">
46
- .switch-body {
47
- width: max-content;
48
- position: relative;
49
- height: 1.2rem;
50
-
51
- input[type='checkbox'] {
52
- position: absolute;
53
- top: 0.3rem;
54
- right: 0.3rem;
55
- height: 0.8rem;
56
- width: 0.8rem;
57
- opacity: 0;
58
- }
59
- .switch-label {
60
- display: block;
61
- position: relative;
62
- cursor: pointer;
63
- height: 1.2rem;
64
- }
65
- .switch-label {
66
- &:before {
67
- position: absolute;
68
- display: inline-block;
69
- content: '';
70
- height: 18px;
71
- width: 33px;
72
- border-radius: 0.45rem;
73
- border: 2px solid var(--label-before-bg-color);
74
- background-color: var(--label-before-bg-color);
75
- transition: 0.15s ease-in;
76
- transition-property: border-color, background-color;
77
- }
78
-
79
- &:after {
80
- position: absolute;
81
- display: inline-block;
82
- content: '';
83
- height: 14.5px;
84
- width: 14.5px;
85
- border: 1px solid var(--label-after-bg-color);
86
- border-radius: 50%;
87
- background-color: var(--label-after-bg-color);
88
- bottom: 12.5px;
89
- transition: 0.15s ease-in;
90
- }
91
- }
92
-
93
- & input[type='checkbox']:focus + label:before {
94
- box-shadow: var(--label-before-box-shadow);
95
- }
96
- & input[type='checkbox']:checked + label:before {
97
- border-color: #62a420;
98
- background-color: #62a420;
99
- }
100
- & input[type='checkbox']:checked + label:after {
101
- left: 15px;
102
- }
103
- & input[type='checkbox'] + label:after {
104
- left: 3px;
105
- }
106
- }
107
- </style>
1
+ <template>
2
+ <div class="switch-body">
3
+ <input :id="props.testId" v-model="value" type="checkbox" />
4
+ <label class="switch-label" :for="props.testId"> </label>
5
+ </div>
6
+ </template>
7
+
8
+ <script setup lang="ts">
9
+ const props = withDefaults(
10
+ defineProps<{
11
+ modelValue: boolean
12
+ testId?: string
13
+ }>(),
14
+ { testId: 'ui-switch' }
15
+ )
16
+
17
+ const emits = defineEmits<{
18
+ (event: 'update:model-value', value: boolean): void
19
+ }>()
20
+
21
+ const value = computed<boolean>({
22
+ get() {
23
+ return props.modelValue
24
+ },
25
+ set(newValue) {
26
+ emits('update:model-value', newValue)
27
+ },
28
+ })
29
+ </script>
30
+
31
+ <style>
32
+ :root {
33
+ --label-before-bg-color: #737373;
34
+ --label-after-bg-color: #fff;
35
+ --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
36
+ }
37
+
38
+ :root.dark-theme {
39
+ --label-before-bg-color: #fff;
40
+ --label-after-bg-color: #1b2a32;
41
+ --label-before-box-shadow: 0 0 0;
42
+ }
43
+ </style>
44
+
45
+ <style scoped lang="scss">
46
+ .switch-body {
47
+ width: max-content;
48
+ position: relative;
49
+ height: 1.2rem;
50
+
51
+ input[type='checkbox'] {
52
+ position: absolute;
53
+ top: 0.3rem;
54
+ right: 0.3rem;
55
+ height: 0.8rem;
56
+ width: 0.8rem;
57
+ opacity: 0;
58
+ }
59
+ .switch-label {
60
+ display: block;
61
+ position: relative;
62
+ cursor: pointer;
63
+ height: 1.2rem;
64
+ }
65
+ .switch-label {
66
+ &:before {
67
+ position: absolute;
68
+ display: inline-block;
69
+ content: '';
70
+ height: 18px;
71
+ width: 33px;
72
+ border-radius: 0.45rem;
73
+ border: 2px solid var(--label-before-bg-color);
74
+ background-color: var(--label-before-bg-color);
75
+ transition: 0.15s ease-in;
76
+ transition-property: border-color, background-color;
77
+ }
78
+
79
+ &:after {
80
+ position: absolute;
81
+ display: inline-block;
82
+ content: '';
83
+ height: 14.5px;
84
+ width: 14.5px;
85
+ border: 1px solid var(--label-after-bg-color);
86
+ border-radius: 50%;
87
+ background-color: var(--label-after-bg-color);
88
+ bottom: 12.5px;
89
+ transition: 0.15s ease-in;
90
+ }
91
+ }
92
+
93
+ & input[type='checkbox']:focus + label:before {
94
+ box-shadow: var(--label-before-box-shadow);
95
+ }
96
+ & input[type='checkbox']:checked + label:before {
97
+ border-color: #62a420;
98
+ background-color: #62a420;
99
+ }
100
+ & input[type='checkbox']:checked + label:after {
101
+ left: 15px;
102
+ }
103
+ & input[type='checkbox'] + label:after {
104
+ left: 3px;
105
+ }
106
+ }
107
+ </style>
@@ -1,66 +1,66 @@
1
- <template>
2
- <div class="title-block" :style="blockWidth">
3
- <div class="title-block__container" :style="blockWidth">
4
- <div class="title-block__title" :style="blockTitleWidth">
5
- <b>{{ props.title }}</b>
6
- </div>
7
- <div class="title-block__body">
8
- <slot name="content"></slot>
9
- </div>
10
- </div>
11
- </div>
12
- </template>
13
-
14
- <script setup lang="ts">
15
- const props = defineProps<{
16
- title: string
17
- width: number
18
- }>()
19
-
20
- const blockWidth = computed(() => ({ width: `${props.width}px` }))
21
- const blockTitleWidth = computed(() => ({ width: `${props.width - 2}px` }))
22
- </script>
23
-
24
- <style scoped lang="scss">
25
- .title-block {
26
- width: 100%;
27
- min-height: 400px;
28
- position: relative;
29
-
30
- &__container {
31
- position: absolute;
32
- top: 0;
33
- height: 400px;
34
- left: 0;
35
- display: flex;
36
- flex-direction: column;
37
- border-width: 1px;
38
- border-style: solid;
39
- border-color: rgb(204, 204, 204);
40
- border-image: initial;
41
- background: rgb(255, 255, 255);
42
- }
43
- &__title {
44
- background-color: rgb(231, 235, 239);
45
- flex: 0 0 auto;
46
- padding: 8px;
47
- border-bottom: 1px solid rgb(204, 204, 204);
48
- display: inline-block;
49
- white-space: nowrap;
50
- overflow: hidden !important;
51
- text-overflow: ellipsis;
52
-
53
- b {
54
- font-weight: bolder;
55
- font-size: 13px;
56
- letter-spacing: normal;
57
- font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
58
- color: #666;
59
- }
60
- }
61
- &__body {
62
- flex: 1 1 auto;
63
- overflow-y: auto;
64
- }
65
- }
66
- </style>
1
+ <template>
2
+ <div class="title-block" :style="blockWidth">
3
+ <div class="title-block__container" :style="blockWidth">
4
+ <div class="title-block__title" :style="blockTitleWidth">
5
+ <b>{{ props.title }}</b>
6
+ </div>
7
+ <div class="title-block__body">
8
+ <slot name="content"></slot>
9
+ </div>
10
+ </div>
11
+ </div>
12
+ </template>
13
+
14
+ <script setup lang="ts">
15
+ const props = defineProps<{
16
+ title: string
17
+ width: number
18
+ }>()
19
+
20
+ const blockWidth = computed(() => ({ width: `${props.width}px` }))
21
+ const blockTitleWidth = computed(() => ({ width: `${props.width - 2}px` }))
22
+ </script>
23
+
24
+ <style scoped lang="scss">
25
+ .title-block {
26
+ width: 100%;
27
+ min-height: 400px;
28
+ position: relative;
29
+
30
+ &__container {
31
+ position: absolute;
32
+ top: 0;
33
+ height: 400px;
34
+ left: 0;
35
+ display: flex;
36
+ flex-direction: column;
37
+ border-width: 1px;
38
+ border-style: solid;
39
+ border-color: rgb(204, 204, 204);
40
+ border-image: initial;
41
+ background: rgb(255, 255, 255);
42
+ }
43
+ &__title {
44
+ background-color: rgb(231, 235, 239);
45
+ flex: 0 0 auto;
46
+ padding: 8px;
47
+ border-bottom: 1px solid rgb(204, 204, 204);
48
+ display: inline-block;
49
+ white-space: nowrap;
50
+ overflow: hidden !important;
51
+ text-overflow: ellipsis;
52
+
53
+ b {
54
+ font-weight: bolder;
55
+ font-size: 13px;
56
+ letter-spacing: normal;
57
+ font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
58
+ color: #666;
59
+ }
60
+ }
61
+ &__body {
62
+ flex: 1 1 auto;
63
+ overflow-y: auto;
64
+ }
65
+ }
66
+ </style>
@@ -1,38 +1,38 @@
1
- import localRu from '~/assets/localization/local_ru.json'
2
- import localEn from '~/assets/localization/local_en.json'
3
- import localHy from '~/assets/localization/local_hy.json'
4
- import localZh from '~/assets/localization/local_zh.json'
5
- import localKk from '~/assets/localization/local_kk.json'
6
- import localBe from '~/assets/localization/local_be.json'
7
- const locals = {
8
- localRu,
9
- localEn,
10
- localHy,
11
- localZh,
12
- localKk,
13
- localBe,
14
- }
15
- export const useLocal = () => {
16
- const config = useRuntimeConfig()
17
-
18
- const code: string = config?.public?.LOCALIZATION_CODE?.toLowerCase() || 'ru'
19
-
20
- document.getElementsByTagName('html')[0].setAttribute('lang', code)
21
-
22
- switch (code) {
23
- case 'ru':
24
- return locals.localRu
25
- case 'en':
26
- return locals.localEn
27
- case 'hy':
28
- return locals.localHy
29
- case 'zh':
30
- return locals.localZh
31
- case 'kk':
32
- return locals.localKk
33
- case 'be':
34
- return locals.localBe
35
- default:
36
- return locals.localRu
37
- }
38
- }
1
+ import localRu from '~/assets/localization/local_ru.json'
2
+ import localEn from '~/assets/localization/local_en.json'
3
+ import localHy from '~/assets/localization/local_hy.json'
4
+ import localZh from '~/assets/localization/local_zh.json'
5
+ import localKk from '~/assets/localization/local_kk.json'
6
+ import localBe from '~/assets/localization/local_be.json'
7
+ const locals = {
8
+ localRu,
9
+ localEn,
10
+ localHy,
11
+ localZh,
12
+ localKk,
13
+ localBe,
14
+ }
15
+ export const useLocal = () => {
16
+ const config = useRuntimeConfig()
17
+
18
+ const code: string = config?.public?.LOCALIZATION_CODE?.toLowerCase() || 'ru'
19
+
20
+ document.getElementsByTagName('html')[0].setAttribute('lang', code)
21
+
22
+ switch (code) {
23
+ case 'ru':
24
+ return locals.localRu
25
+ case 'en':
26
+ return locals.localEn
27
+ case 'hy':
28
+ return locals.localHy
29
+ case 'zh':
30
+ return locals.localZh
31
+ case 'kk':
32
+ return locals.localKk
33
+ case 'be':
34
+ return locals.localBe
35
+ default:
36
+ return locals.localRu
37
+ }
38
+ }