quasar-ui-sellmate-ui-kit 3.11.2 → 3.11.4

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 (12) hide show
  1. package/dist/index.common.js +2 -2
  2. package/dist/index.css +1 -1
  3. package/dist/index.esm.js +2 -2
  4. package/dist/index.min.css +1 -1
  5. package/dist/index.rtl.css +1 -1
  6. package/dist/index.rtl.min.css +1 -1
  7. package/dist/index.umd.js +33 -34
  8. package/dist/index.umd.min.js +2 -2
  9. package/package.json +1 -1
  10. package/src/components/SButtonToggle.vue +201 -200
  11. package/src/components/STable.vue +2 -2
  12. package/src/css/extends.scss +176 -177
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "quasar-ui-sellmate-ui-kit",
3
- "version": "3.11.2",
3
+ "version": "3.11.4",
4
4
  "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
5
5
  "description": "Sellmate UI Kit",
6
6
  "license": "MIT",
package/src/components/SButtonToggle.vue CHANGED
@@ -1,200 +1,201 @@
1
- <template>
2
- <q-btn-toggle
3
- v-model="btnValue"
4
- @update:modelValue="
5
- val => {
6
- $emit('update:model-value', val);
7
- }
8
- "
9
- no-caps
10
- no-wrap
11
- outline
12
- unelevated
13
- :ripple="false"
14
- color="Grey_Lighten-2"
15
- text-color="Grey_Lighten-2"
16
- toggle-color="positive"
17
- toggle-text-color="positive"
18
- padding="8px 24px"
19
- class="s-btn-toggle"
20
- :class="size === 'md' ? 's-btn-toggle-md' : 's-btn-toggle-sm'"
21
- />
22
- </template>
23
-
24
- <script>
25
- import { ref, defineComponent, watch } from 'vue';
26
- import { QBtnToggle } from 'quasar';
27
-
28
- export default defineComponent({
29
- name: 'SButtonToggle',
30
- components: {
31
- QBtnToggle,
32
- },
33
- props: {
34
- modelValue: [Number, String, Object],
35
- size: {
36
- type: String,
37
- default: 'sm',
38
- },
39
- },
40
- setup(props) {
41
- const btnValue = ref(props.modelValue);
42
- watch(
43
- () => props.modelValue,
44
- newVal => {
45
- btnValue.value = newVal;
46
- },
47
- );
48
-
49
- return {
50
- btnValue,
51
- };
52
- },
53
- });
54
- </script>
55
-
56
- <style lang="scss">
57
- @import '../css/quasar.variables.scss';
58
-
59
- .s-btn-toggle {
60
- .q-btn {
61
- &:first-of-type {
62
- border-radius: 4px 0 0 4px;
63
- }
64
-
65
- &:last-of-type {
66
- border-radius: 0 4px 4px 0;
67
- }
68
-
69
- &:before {
70
- border-left: 1px solid $Grey_Lighten-2 !important;
71
- }
72
-
73
- &:hover {
74
- > .q-focus-helper {
75
- background-color: $positive !important;
76
- opacity: 1 !important;
77
-
78
- &:before,
79
- &:after {
80
- background-color: $positive !important;
81
- opacity: 1;
82
- }
83
- }
84
-
85
- .q-btn__content {
86
- > span {
87
- color: white !important;
88
- }
89
- }
90
-
91
- + .q-btn:not(.text-positive):before {
92
- border-left: none !important;
93
- }
94
- }
95
-
96
- &:not(:last-child) {
97
- &:hover {
98
- box-shadow: 1px 0 0 $positive !important;
99
- transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
100
- z-index: 1;
101
- }
102
- }
103
-
104
- .q-btn--active {
105
- background: $positive !important;
106
- color: white !important;
107
-
108
- &:before {
109
- border: 1px solid $positive !important;
110
- }
111
-
112
- .q-btn__content {
113
- > span {
114
- color: white !important;
115
- }
116
- }
117
- }
118
- }
119
-
120
- .text-positive {
121
- &:before {
122
- border: 1px solid $positive !important;
123
- }
124
-
125
- &:not(:last-child) {
126
- &:before {
127
- border-right: none !important;
128
- }
129
-
130
- &.q-btn {
131
- box-shadow: 1px 0 0 $positive !important;
132
- z-index: 2;
133
- }
134
- }
135
-
136
- & + .q-btn {
137
- &:before {
138
- border-left: none !important;
139
- }
140
- }
141
-
142
- &.q-btn--active {
143
- &:hover {
144
- .q-btn__content {
145
- > span {
146
- color: white !important;
147
- }
148
- }
149
- }
150
- }
151
-
152
- &:hover {
153
- > .q-focus-helper {
154
- background-color: $positive !important;
155
- opacity: 1 !important;
156
-
157
- &:before,
158
- &:after {
159
- background-color: $positive !important;
160
- opacity: 1;
161
- }
162
- }
163
-
164
- .q-btn__content {
165
- > span {
166
- color: white !important;
167
- }
168
- }
169
- }
170
- }
171
- }
172
-
173
- .s-btn-toggle-sm {
174
- .q-btn {
175
- padding: $button-padding-sm !important;
176
-
177
- .q-btn__content {
178
- > span {
179
- line-height: $default-line-height;
180
- font-size: $default-font !important;
181
- font-weight: $default-font-weight;
182
- }
183
- }
184
- }
185
- }
186
-
187
- .s-btn-toggle-md {
188
- .q-btn {
189
- padding: $button-padding-md !important;
190
-
191
- .q-btn__content {
192
- > span {
193
- line-height: $line-height-md !important;
194
- font-size: $font-md !important;
195
- font-weight: $font-weight-md !important;
196
- }
197
- }
198
- }
199
- }
200
- </style>
1
+ <template>
2
+ <q-btn-toggle
3
+ v-model="btnValue"
4
+ @update:modelValue="
5
+ val => {
6
+ $emit('update:model-value', val);
7
+ }
8
+ "
9
+ no-caps
10
+ no-wrap
11
+ outline
12
+ unelevated
13
+ :ripple="false"
14
+ color="Grey_Lighten-2"
15
+ text-color="Grey_Lighten-2"
16
+ toggle-color="positive"
17
+ toggle-text-color="positive"
18
+ class="s-btn-toggle"
19
+ :class="size === 'md' ? 's-btn-toggle-md' : 's-btn-toggle-sm'"
20
+ />
21
+ </template>
22
+
23
+ <script>
24
+ import { ref, defineComponent, watch } from 'vue';
25
+ import { QBtnToggle } from 'quasar';
26
+
27
+ export default defineComponent({
28
+ name: 'SButtonToggle',
29
+ components: {
30
+ QBtnToggle,
31
+ },
32
+ props: {
33
+ modelValue: [Number, String, Object],
34
+ size: {
35
+ type: String,
36
+ default: 'sm',
37
+ },
38
+ },
39
+ setup(props) {
40
+ const btnValue = ref(props.modelValue);
41
+ watch(
42
+ () => props.modelValue,
43
+ newVal => {
44
+ btnValue.value = newVal;
45
+ },
46
+ );
47
+
48
+ return {
49
+ btnValue,
50
+ };
51
+ },
52
+ });
53
+ </script>
54
+
55
+ <style lang="scss">
56
+ @import '../css/quasar.variables.scss';
57
+
58
+ .s-btn-toggle.q-btn-group {
59
+ .q-btn {
60
+ &:first-of-type {
61
+ border-radius: 4px 0 0 4px;
62
+ }
63
+
64
+ &:last-of-type {
65
+ border-radius: 0 4px 4px 0;
66
+ }
67
+
68
+ &:before {
69
+ border-left: 1px solid $Grey_Lighten-2 !important;
70
+ }
71
+
72
+ &:hover {
73
+ > .q-focus-helper {
74
+ background-color: $positive !important;
75
+ opacity: 1 !important;
76
+
77
+ &:before,
78
+ &:after {
79
+ background-color: $positive !important;
80
+ opacity: 1;
81
+ }
82
+ }
83
+
84
+ .q-btn__content {
85
+ > span {
86
+ color: white !important;
87
+ }
88
+ }
89
+
90
+ + .q-btn:not(.text-positive):before {
91
+ border-left: none !important;
92
+ }
93
+ }
94
+
95
+ &:not(:last-child) {
96
+ &:hover {
97
+ box-shadow: 1px 0 0 $positive !important;
98
+ transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
99
+ z-index: 1;
100
+ }
101
+ }
102
+
103
+ .q-btn--active {
104
+ background: $positive !important;
105
+ color: white !important;
106
+
107
+ &:before {
108
+ border: 1px solid $positive !important;
109
+ }
110
+
111
+ .q-btn__content {
112
+ > span {
113
+ color: white !important;
114
+ }
115
+ }
116
+ }
117
+ }
118
+
119
+ [aria-pressed='true'] {
120
+ &:before {
121
+ border: 1px solid $positive !important;
122
+ }
123
+
124
+ &:not(:last-child) {
125
+ &:before {
126
+ border-right: none !important;
127
+ }
128
+
129
+ &.q-btn {
130
+ box-shadow: 1px 0 0 $positive !important;
131
+ z-index: 2;
132
+ }
133
+ }
134
+
135
+ & + .q-btn {
136
+ &:before {
137
+ border-left: none !important;
138
+ }
139
+ }
140
+
141
+ &.q-btn--active {
142
+ &:hover {
143
+ .q-btn__content {
144
+ > span {
145
+ color: white !important;
146
+ }
147
+ }
148
+ }
149
+ }
150
+
151
+ &:hover {
152
+ > .q-focus-helper {
153
+ background-color: $positive !important;
154
+ opacity: 1 !important;
155
+
156
+ &:before,
157
+ &:after {
158
+ background-color: $positive !important;
159
+ opacity: 1;
160
+ }
161
+ }
162
+
163
+ .q-btn__content {
164
+ > span {
165
+ color: white !important;
166
+ }
167
+ }
168
+ }
169
+ }
170
+ }
171
+
172
+ .s-btn-toggle-sm {
173
+ .q-btn {
174
+ padding: $button-padding-sm;
175
+ min-height: 0;
176
+ .q-btn__content {
177
+ height: fit-content;
178
+ flex: none;
179
+ > span {
180
+ line-height: $default-line-height;
181
+ font-size: $default-font !important;
182
+ font-weight: $default-font-weight;
183
+ }
184
+ }
185
+ }
186
+ }
187
+
188
+ .s-btn-toggle-md {
189
+ .q-btn {
190
+ padding: $button-padding-md;
191
+
192
+ .q-btn__content {
193
+ > span {
194
+ line-height: $line-height-md !important;
195
+ font-size: $font-md !important;
196
+ font-weight: $font-weight-md !important;
197
+ }
198
+ }
199
+ }
200
+ }
201
+ </style>
package/src/components/STable.vue CHANGED
@@ -475,7 +475,7 @@
475
475
  &:first-of-type {
476
476
  padding: 0 8px 0 24px;
477
477
  line-height: 100%;
478
- > .q-checkbox {
478
+ > .q-checkbox:not(.s-checkbox) {
479
479
  @extend %checkbox;
480
480
  }
481
481
  }
@@ -488,7 +488,7 @@
488
488
  &:first-of-type {
489
489
  padding: 0 8px 0 24px;
490
490
  line-height: 100%;
491
- > .q-checkbox {
491
+ > .q-checkbox:not(.s-checkbox) {
492
492
  @extend %checkbox;
493
493
  }
494
494
  }