Skip to content

Commit 978cc0d

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Update styles and icons
1 parent d18f145 commit 978cc0d

File tree

5 files changed

+80
-59
lines changed

5 files changed

+80
-59
lines changed

‎src/plugin/VInlineSelect.vue‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -334,36 +334,7 @@ onUnmounted(() => {
334334
</script>
335335

336336
<style lang="scss" scoped>
337-
.v-inline-fields {
338-
&--container {
339-
&-icon-set {
340-
&-fa {
341-
:deep(.v-field__clearable) {
342-
align-items: center;
343-
font-size: .8rem;
344-
}
345-
346-
:deep(.v-field__append-inner) {
347-
align-items: center;
348-
}
349-
}
350-
}
351-
}
352-
}
353-
354-
:deep(.v-input__append) {
355-
padding: 0 !important;
356-
}
357-
358337
:deep(.v-field__field) {
359338
align-items: flex-end !important;
360339
}
361-
362-
:deep(.v-field__clearable) {
363-
padding: 0 !important;
364-
}
365-
366-
.icons-container {
367-
height: 100%;
368-
}
369340
</style>

‎src/plugin/VInlineTextField.vue‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
v-bind="bindingSettings"
3030
v-model="modelValue"
3131
:autofocus="!settings.fieldOnly || settings.autofocus"
32+
:clear-icon="theClearIcon"
3233
:color="settings.color"
3334
:density="settings.density"
3435
:disabled="loadingProp"
@@ -94,6 +95,7 @@ import {
9495
TimeOpened,
9596
VInlineTextFieldProps,
9697
} from '@/types';
98+
import type { IconOptions } from 'vuetify';
9799
import { textFieldProps } from './utils/props';
98100
import { SaveFieldButtons } from './components/index';
99101
import {
@@ -113,6 +115,7 @@ import {
113115
useInlineFieldsContainerStyle,
114116
} from './composables/styles';
115117
import inlineEmits from './utils/emits';
118+
import { useGetIcon } from './composables/icons';
116119
117120
118121
const modelValue = defineModel<FieldValue>();
@@ -121,6 +124,7 @@ const attrs = useAttrs();
121124
const slots = useSlots();
122125
const emit = defineEmits([...inlineEmits]);
123126
const props = withDefaults(defineProps<VInlineTextFieldProps>(), { ...textFieldProps });
127+
const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
124128
let settings = reactive({ ...attrs, ...props });
125129
const loadingProp = computed(() => props.loading);
126130
@@ -143,6 +147,16 @@ watch(() => loadingProp.value, (newVal, oldVal) => {
143147
});
144148
145149
150+
// ------------------------------------------------ Icons //
151+
const theClearIcon = computed(() => {
152+
return useGetIcon({
153+
icon: props.clearIcon,
154+
iconOptions,
155+
name: 'clear',
156+
});
157+
});
158+
159+
146160
// ------------------------------------------------ The displayed value //
147161
const displayValue = computed(() => {
148162
if (modelValue.value) {
@@ -169,6 +183,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
169183
density: settings.density,
170184
disabled: settings.disabled,
171185
field: 'v-text-field',
186+
iconSet: iconOptions?.defaultSet,
172187
loading: loadingProp.value,
173188
loadingWait: settings.loadingWait,
174189
tableField: settings.tableField,
@@ -319,18 +334,4 @@ onUnmounted(() => {
319334
</script>
320335

321336
<style lang="scss" scoped>
322-
:deep(.v-input__append) {
323-
padding: 0 !important;
324-
}
325-
326-
.truncate {
327-
overflow: hidden;
328-
text-overflow: ellipsis;
329-
white-space: nowrap;
330-
width: 250px;
331-
}
332-
333-
.icons-container {
334-
height: 100%;
335-
}
336337
</style>

‎src/plugin/VInlineTextarea.vue‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
v-model="modelValue"
3232
:auto-grow="settings.autoGrow"
3333
:autofocus="!settings.fieldOnly || settings.autofocus"
34+
:clear-icon="theClearIcon"
3435
:color="settings.color"
3536
:density="settings.density"
3637
:disabled="loadingProp"
@@ -94,6 +95,7 @@ import {
9495
TimeOpened,
9596
VInlineTextareaProps,
9697
} from '@/types';
98+
import type { IconOptions } from 'vuetify';
9799
import { textareaProps } from './utils/props';
98100
import { SaveFieldButtons } from './components/index';
99101
import {
@@ -113,6 +115,7 @@ import {
113115
useInlineFieldsContainerStyle,
114116
} from './composables/styles';
115117
import inlineEmits from './utils/emits';
118+
import { useGetIcon } from './composables/icons';
116119
117120
118121
const modelValue = defineModel<FieldValue>();
@@ -121,6 +124,7 @@ const attrs = useAttrs();
121124
const slots = useSlots();
122125
const emit = defineEmits([...inlineEmits]);
123126
const props = withDefaults(defineProps<VInlineTextareaProps>(), { ...textareaProps });
127+
const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
124128
let settings = reactive({ ...attrs, ...props });
125129
const loadingProp = computed(() => props.loading);
126130
@@ -143,6 +147,16 @@ watch(() => loadingProp.value, (newVal, oldVal) => {
143147
});
144148
145149
150+
// ------------------------------------------------ Icons //
151+
const theClearIcon = computed(() => {
152+
return useGetIcon({
153+
icon: props.clearIcon,
154+
iconOptions,
155+
name: 'clear',
156+
});
157+
});
158+
159+
146160
// ------------------------------------------------ The displayed value //
147161
const displayValue = computed(() => {
148162
if (modelValue.value) {
@@ -169,6 +183,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
169183
density: settings.density,
170184
disabled: settings.disabled,
171185
field: 'v-textarea',
186+
iconSet: iconOptions?.defaultSet,
172187
loading: loadingProp.value,
173188
loadingWait: settings.loadingWait,
174189
tableField: settings.tableField,
@@ -315,11 +330,4 @@ onUnmounted(() => {
315330
</script>
316331

317332
<style lang="scss" scoped>
318-
:deep(.v-input__append) {
319-
padding: 0 !important;
320-
}
321-
322-
.icons-container {
323-
height: 100%;
324-
}
325333
</style>

‎src/plugin/composables/icons.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@ import { UseGetIcon } from '../../types';
22

33
const defaultIcons = {
44
fa: {
5-
checkboxFalse: 'far fa-square',
5+
checkboxFalse: '$checkboxOff',
66
checkboxTrue: 'far fa-square-check',
7-
clear: 'fa-circle-xmark',
8-
false: 'fa-xmark',
7+
clear: '$clear',
8+
false: '$close',
99
loading: 'fa-circle-notch',
1010
save: 'fa-floppy-disk',
11-
true: 'fa-check',
11+
true: '$complete',
1212
},
1313
mdi: {
14-
checkboxFalse: 'mdi:mdi-checkbox-blank-outline',
14+
checkboxFalse: '$checkboxOff',
1515
checkboxTrue: 'mdi:mdi-checkbox-outline',
16-
clear: 'mdi-close-circle-outline',
17-
false: 'mdi-close',
16+
clear: '$clear',
17+
false: '$close',
1818
loading: 'mdi-loading',
1919
save: 'mdi-content-save',
20-
true: 'mdi-check',
20+
true: '$complete',
2121
},
2222
};
2323

‎src/plugin/styles/main.scss‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@
44
--v-inline-fields-top-padding-default: 21px;
55
}
66

7+
%clearable-icons {
8+
.v-field__clearable,
9+
.v-field__append-inner,
10+
.v-input__append {
11+
align-items: flex-end !important;
12+
padding-bottom: 8px !important;
13+
padding-top: 0 !important;
14+
}
15+
}
16+
717
.v-inline-fields {
818
&--container {
919
display: flex;
@@ -23,6 +33,18 @@
2333
}
2434
}
2535

36+
&-icon-set {
37+
&-fa {
38+
.v-field__clearable {
39+
font-size: .8rem;
40+
}
41+
42+
.v-field__append-inner {
43+
align-items: center;
44+
}
45+
}
46+
}
47+
2648
// ------------------------------------------------ Table Field (tableField) Prop = true //
2749
&-table {
2850
--v-inline-fields-top-padding-compact: 0;
@@ -87,8 +109,10 @@
87109
&-compact,
88110
&-comfortable,
89111
&-default {
112+
@extend %clearable-icons;
113+
90114
.v-field__append-inner {
91-
padding: 0 !important;
115+
padding: 0 0 6px !important;
92116
}
93117

94118
.v-field--variant-underlined,
@@ -101,6 +125,8 @@
101125

102126
&-compact,
103127
&-comfortable {
128+
@extend %clearable-icons;
129+
104130
.v-field--variant-underlined,
105131
.v-field--variant-plain {
106132
.v-field__input {
@@ -110,6 +136,8 @@
110136
}
111137

112138
&-default {
139+
@extend %clearable-icons;
140+
113141
.v-field--variant-underlined,
114142
.v-field--variant-plain {
115143
.v-field__input {
@@ -132,6 +160,8 @@
132160
&-compact,
133161
&-comfortable,
134162
&-default {
163+
@extend %clearable-icons;
164+
135165
.v-field--variant-underlined,
136166
.v-field--variant-plain {
137167
.v-field__input {
@@ -142,6 +172,8 @@
142172

143173
&-compact,
144174
&-comfortable {
175+
@extend %clearable-icons;
176+
145177
.v-field--variant-underlined,
146178
.v-field--variant-plain {
147179
.v-field__input {
@@ -151,6 +183,8 @@
151183
}
152184

153185
&-default {
186+
@extend %clearable-icons;
187+
154188
.v-field--variant-underlined,
155189
.v-field--variant-plain {
156190
.v-field__input {
@@ -228,4 +262,11 @@
228262
&--boolean-icons {
229263
font-size: calc(var(--v-icon-size-multiplier) * 1em);
230264
}
265+
266+
.truncate {
267+
overflow: hidden;
268+
text-overflow: ellipsis;
269+
white-space: nowrap;
270+
width: 250px;
271+
}
231272
}

0 commit comments

Comments
 (0)