Skip to content

Commit c33e922

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Add useBindingSettnigs and adjust for DisplayedValue component addition
1 parent be9f959 commit c33e922

File tree

3 files changed

+122
-131
lines changed

3 files changed

+122
-131
lines changed

‎src/plugin/VInlineSelect.vue‎

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,10 @@
88
:class="displayContainerClass"
99
>
1010
<div :class="displayInputControlClasses">
11-
<div class="v-inline-fields--display-wrapper">
12-
<div
13-
class="d-inline-flex"
14-
:class="displayValueClass"
15-
:style="displayValueStyle"
16-
@click="toggleField"
17-
>
18-
{{ displayValue }}
19-
</div>
20-
</div>
11+
<DisplayedValue
12+
v-bind="bindingDisplay"
13+
@toggleField="toggleField"
14+
/>
2115
</div>
2216
</div>
2317

@@ -98,37 +92,33 @@ import {
9892
TimeOpened,
9993
VInlineSelectProps,
10094
} from '@/types';
101-
import { IconOptions, useTheme } from 'vuetify';
95+
import { IconOptions } from 'vuetify';
10296
import type { VSelect } from 'vuetify/components';
10397
import { selectProps } from './utils/props';
104-
import { SaveFieldButtons } from './components/index';
98+
import { DisplayedValue, SaveFieldButtons } from './components/index';
10599
import {
106100
useCheckForErrors,
107101
useToggleField,
108102
} from './composables/methods';
109103
import {
110104
useDisplayContainerClass,
111105
useDisplayInputControlClasses,
112-
useDisplayValueClass,
113106
useFieldContainerClass,
114107
useInlineFieldsContainerClass,
115108
} from './composables/classes';
116-
import {
117-
useDisplayValueStyles,
118-
useInlineFieldsContainerStyle,
119-
} from './composables/styles';
109+
import { useInlineFieldsContainerStyle } from './composables/styles';
120110
import inlineEmits from './utils/emits';
111+
import { useBindingSettings } from './composables/bindings';
121112
import { useGetIcon } from './composables/icons';
122113
123114
124115
const modelValue = defineModel<FieldValue>();
125116
126117
const attrs = useAttrs();
127-
const emit = defineEmits([...inlineEmits]);
128118
const slots = useSlots();
119+
const emit = defineEmits([...inlineEmits]);
129120
130121
const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
131-
const theme = useTheme();
132122
133123
const props = withDefaults(defineProps<VInlineSelectProps>(), { ...selectProps });
134124
let settings = reactive({ ...attrs, ...props });
@@ -142,10 +132,6 @@ const timeOpened = ref<TimeOpened>(null);
142132
let originalValue = modelValue.value;
143133
144134
145-
// ------------------------------------------------ Binding Events & Props //
146-
const bindingSettings = computed(() => settings);
147-
148-
149135
// ------------------------------------------------ Loading //
150136
watch(() => loadingProp.value, (newVal, oldVal) => {
151137
if (!newVal && oldVal && showField.value) {
@@ -178,6 +164,37 @@ const displayValue = computed(() => {
178164
});
179165
180166
167+
// ------------------------------------------------ Binding Events & Props //
168+
const bindingSettings = computed(() => useBindingSettings(settings));
169+
170+
const bindingDisplay = computed(() => {
171+
return {
172+
color: settings.color,
173+
displayAppendIcon: props.displayAppendIcon,
174+
displayAppendIconColor: props.displayAppendIconColor,
175+
displayAppendIconSize: props.displayAppendIconSize,
176+
displayAppendInnerIcon: props.displayAppendInnerIcon,
177+
displayAppendInnerIconColor: props.displayAppendInnerIconColor,
178+
displayAppendInnerIconSize: props.displayAppendInnerIconSize,
179+
displayPrependIcon: props.displayPrependIcon,
180+
displayPrependIconColor: props.displayPrependIconColor,
181+
displayPrependIconSize: props.displayPrependIconSize,
182+
displayPrependInnerIcon: props.displayPrependInnerIcon,
183+
displayPrependInnerIconColor: props.displayPrependInnerIconColor,
184+
displayPrependInnerIconSize: props.displayPrependInnerIconSize,
185+
displayValue: displayValue.value,
186+
empty,
187+
error,
188+
field: 'v-text-field',
189+
underlineColor: settings.underlineColor,
190+
underlineStyle: settings.underlineStyle,
191+
underlineWidth: settings.underlineWidth,
192+
underlined: settings.underlined,
193+
valueColor: settings.valueColor,
194+
};
195+
});
196+
197+
181198
// ------------------------------------------------ Watch the items //
182199
watchEffect(() => {
183200
items.value = settings.items || [] as VSelect['$props']['items'];
@@ -193,6 +210,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
193210
loading: loadingProp.value,
194211
loadingWait: settings.loadingWait,
195212
tableField: settings.tableField,
213+
variant: settings.variant,
196214
}));
197215
198216
const displayContainerClass = computed(() => useDisplayContainerClass({
@@ -210,29 +228,10 @@ const fieldContainerClass = computed(() => useFieldContainerClass({
210228
name: 'select',
211229
}));
212230
213-
const displayValueClass = computed(() => useDisplayValueClass(
214-
'select',
215-
settings.valueColor,
216-
{
217-
empty,
218-
error,
219-
}
220-
));
221-
222231
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
223232
alignItems: settings.alignItems,
224233
}));
225234
226-
const displayValueStyle = computed(() => useDisplayValueStyles({
227-
color: settings.color,
228-
error,
229-
theme,
230-
underlineColor: settings.underlineColor,
231-
underlineStyle: settings.underlineStyle,
232-
underlineWidth: settings.underlineWidth,
233-
underlined: settings.underlined,
234-
}));
235-
236235
237236
// ------------------------------------------------ Key event to cancel/close field //
238237
function closeField() {

‎src/plugin/VInlineTextField.vue‎

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,10 @@
88
:class="displayContainerClass"
99
>
1010
<div :class="displayInputControlClasses">
11-
<div class="v-inline-fields--display-wrapper">
12-
<div
13-
class="d-inline-flex"
14-
:class="displayValueClass"
15-
:style="displayValueStyle"
16-
@click="toggleField"
17-
>
18-
{{ displayValue }}
19-
</div>
20-
</div>
11+
<DisplayedValue
12+
v-bind="bindingDisplay"
13+
@toggleField="toggleField"
14+
/>
2115
</div>
2216
</div>
2317

@@ -30,15 +24,11 @@
3024
v-model="modelValue"
3125
:autofocus="!settings.fieldOnly || settings.autofocus"
3226
:clear-icon="theClearIcon"
33-
:color="settings.color"
34-
:density="settings.density"
3527
:disabled="loadingProp"
3628
:error="error"
3729
:error-messages="internalErrorMessages"
38-
:hide-details="settings.hideDetails"
3930
:label="settings.label"
4031
:loading="loadingProp"
41-
:variant="settings.variant"
4232
width="100%"
4333
@keyup.enter="saveValue"
4434
@keyup.esc="closeField"
@@ -95,9 +85,9 @@ import {
9585
TimeOpened,
9686
VInlineTextFieldProps,
9787
} from '@/types';
98-
import { IconOptions, useTheme } from 'vuetify';
88+
import { IconOptions } from 'vuetify';
9989
import { textFieldProps } from './utils/props';
100-
import { SaveFieldButtons } from './components/index';
90+
import { DisplayedValue, SaveFieldButtons } from './components/index';
10191
import {
10292
useCheckForErrors,
10393
useToggleField,
@@ -106,15 +96,12 @@ import {
10696
import {
10797
useDisplayContainerClass,
10898
useDisplayInputControlClasses,
109-
useDisplayValueClass,
11099
useFieldContainerClass,
111100
useInlineFieldsContainerClass,
112101
} from './composables/classes';
113-
import {
114-
useDisplayValueStyles,
115-
useInlineFieldsContainerStyle,
116-
} from './composables/styles';
102+
import { useInlineFieldsContainerStyle } from './composables/styles';
117103
import inlineEmits from './utils/emits';
104+
import { useBindingSettings } from './composables/bindings';
118105
import { useGetIcon } from './composables/icons';
119106
120107
@@ -125,7 +112,6 @@ const slots = useSlots();
125112
const emit = defineEmits([...inlineEmits]);
126113
127114
const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
128-
const theme = useTheme();
129115
130116
const props = withDefaults(defineProps<VInlineTextFieldProps>(), { ...textFieldProps });
131117
let settings = reactive({ ...attrs, ...props });
@@ -138,10 +124,6 @@ const timeOpened = ref<TimeOpened>(null);
138124
let originalValue = modelValue.value;
139125
140126
141-
// ------------------------------------------------ Binding Events & Props //
142-
const bindingSettings = computed(() => settings);
143-
144-
145127
// ------------------------------------------------ Loading //
146128
watch(() => loadingProp.value, (newVal, oldVal) => {
147129
if (!newVal && oldVal && showField.value) {
@@ -151,7 +133,7 @@ watch(() => loadingProp.value, (newVal, oldVal) => {
151133
152134
153135
// ------------------------------------------------ Icons //
154-
const theClearIcon = computed(() => {
136+
const theClearIcon = computed<string>(() => {
155137
return useGetIcon({
156138
icon: props.clearIcon,
157139
iconOptions,
@@ -181,6 +163,37 @@ const displayValue = computed(() => {
181163
});
182164
183165
166+
// ------------------------------------------------ Binding Events & Props //
167+
const bindingSettings = computed(() => useBindingSettings(settings));
168+
169+
const bindingDisplay = computed(() => {
170+
return {
171+
color: settings.color,
172+
displayAppendIcon: props.displayAppendIcon,
173+
displayAppendIconColor: props.displayAppendIconColor,
174+
displayAppendIconSize: props.displayAppendIconSize,
175+
displayAppendInnerIcon: props.displayAppendInnerIcon,
176+
displayAppendInnerIconColor: props.displayAppendInnerIconColor,
177+
displayAppendInnerIconSize: props.displayAppendInnerIconSize,
178+
displayPrependIcon: props.displayPrependIcon,
179+
displayPrependIconColor: props.displayPrependIconColor,
180+
displayPrependIconSize: props.displayPrependIconSize,
181+
displayPrependInnerIcon: props.displayPrependInnerIcon,
182+
displayPrependInnerIconColor: props.displayPrependInnerIconColor,
183+
displayPrependInnerIconSize: props.displayPrependInnerIconSize,
184+
displayValue: displayValue.value,
185+
empty,
186+
error,
187+
field: 'v-text-field',
188+
underlineColor: settings.underlineColor,
189+
underlineStyle: settings.underlineStyle,
190+
underlineWidth: settings.underlineWidth,
191+
underlined: settings.underlined,
192+
valueColor: settings.valueColor,
193+
};
194+
});
195+
196+
184197
// ------------------------------------------------ Class & Styles //
185198
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
186199
density: settings.density,
@@ -190,6 +203,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
190203
loading: loadingProp.value,
191204
loadingWait: settings.loadingWait,
192205
tableField: settings.tableField,
206+
variant: settings.variant,
193207
}));
194208
195209
const displayContainerClass = computed(() => useDisplayContainerClass({
@@ -207,29 +221,10 @@ const fieldContainerClass = computed(() => useFieldContainerClass({
207221
name: 'text-field',
208222
}));
209223
210-
const displayValueClass = computed(() => useDisplayValueClass(
211-
'text-field',
212-
settings.valueColor,
213-
{
214-
empty,
215-
error,
216-
}
217-
));
218-
219224
const inlineFieldsContainerStyle = computed(() => useInlineFieldsContainerStyle({
220225
alignItems: settings.alignItems,
221226
}));
222227
223-
const displayValueStyle = computed(() => useDisplayValueStyles({
224-
color: settings.color,
225-
error,
226-
theme,
227-
underlineColor: settings.underlineColor,
228-
underlineStyle: settings.underlineStyle,
229-
underlineWidth: settings.underlineWidth,
230-
underlined: settings.underlined,
231-
}));
232-
233228
234229
// ------------------------------------------------ Key event to cancel/close field //
235230
function closeField() {

0 commit comments

Comments
 (0)