Skip to content

Commit 57151d3

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Cleaning up composites call
1 parent 8f422b0 commit 57151d3

File tree

10 files changed

+154
-134
lines changed

10 files changed

+154
-134
lines changed

‎src/plugin/VInlineCheckbox.vue‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -134,17 +134,19 @@ const fieldContainerClass = computed(() => useFieldContainerClass('checkbox', sh
134134
const fieldDisplayClass = computed(() => useDisplayContainerClass(
135135
'checkbox',
136136
settings.valueColor,
137-
settings.disabled,
138-
error.value,
139-
));
140-
const fieldDisplayStyle = computed(() => useFieldDisplayStyles(
141-
settings.underlineColor,
142-
settings.underlineStyle,
143-
settings.underlineWidth,
144-
settings.color,
145-
error.value,
146-
settings.underlined,
137+
{
138+
disabled: settings.disabled,
139+
error,
140+
}
147141
));
142+
const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
143+
color: settings.color,
144+
error,
145+
underlineColor: settings.underlineColor,
146+
underlineStyle: settings.underlineStyle,
147+
underlineWidth: settings.underlineWidth,
148+
underlined: settings.underlined,
149+
}));
148150
149151
150152
// ------------------------------------------------ Toggle the field //
@@ -153,15 +155,14 @@ function toggleField() {
153155
return;
154156
}
155157
156-
const response = useToggleField(
157-
settings.item.id as number,
158-
showField.value,
158+
const response = useToggleField({
159159
attrs,
160+
closeSiblings: settings.closeSiblings,
161+
fieldOnly: settings.fieldOnly,
160162
props,
161-
timeOpened.value,
162-
settings.closeSiblings,
163-
settings.fieldOnly,
164-
);
163+
showField,
164+
timeOpened: timeOpened.value,
165+
});
165166
166167
settings = { ...settings, ...response.settings };
167168
showField.value = response.showField;
@@ -180,7 +181,12 @@ function saveValue(value: undefined) {
180181
loading.value = true;
181182
emit('loading', loading.value);
182183
183-
useSaveValue(settings, emit as keyof UseSaveValue, settings.name, value as keyof UseSaveValue)
184+
useSaveValue({
185+
emit: emit as keyof UseSaveValue,
186+
name: settings.name,
187+
settings,
188+
value: value as keyof UseSaveValue,
189+
})
184190
.then((response) => {
185191
error.value = response?.error as boolean ?? false;
186192
loading.value = false;

‎src/plugin/VInlineSelect.vue‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -144,18 +144,20 @@ const fieldContainerClass = computed(() => useFieldContainerClass('select', show
144144
const fieldDisplayClass = computed(() => useDisplayContainerClass(
145145
'select',
146146
settings.valueColor,
147-
settings.disabled,
148-
error.value,
149-
empty.value,
150-
));
151-
const fieldDisplayStyle = computed(() => useFieldDisplayStyles(
152-
settings.underlineColor,
153-
settings.underlineStyle,
154-
settings.underlineWidth,
155-
settings.color,
156-
error.value,
157-
settings.underlined,
147+
{
148+
disabled: settings.disabled,
149+
empty,
150+
error,
151+
}
158152
));
153+
const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
154+
color: settings.color,
155+
error,
156+
underlineColor: settings.underlineColor,
157+
underlineStyle: settings.underlineStyle,
158+
underlineWidth: settings.underlineWidth,
159+
underlined: settings.underlined,
160+
}));
159161
160162
161163
// ------------------------------------------------ Key event to cancel/close field //
@@ -171,15 +173,14 @@ function toggleField() {
171173
return;
172174
}
173175
174-
const response = useToggleField(
175-
settings.item.id as number,
176-
showField.value,
176+
const response = useToggleField({
177177
attrs,
178+
closeSiblings: settings.closeSiblings,
179+
fieldOnly: settings.fieldOnly,
178180
props,
179-
timeOpened.value,
180-
settings.closeSiblings,
181-
settings.fieldOnly,
182-
);
181+
showField,
182+
timeOpened: timeOpened.value,
183+
});
183184
184185
settings = { ...settings, ...response.settings };
185186
showField.value = response.showField;
@@ -197,7 +198,12 @@ function saveValue() {
197198
loading.value = true;
198199
emit('loading', loading.value);
199200
200-
useSaveValue(settings, emit as keyof UseSaveValue, settings.name, modelValue.value as keyof UseSaveValue)
201+
useSaveValue({
202+
emit: emit as keyof UseSaveValue,
203+
name: settings.name,
204+
settings,
205+
value: modelValue.value as keyof UseSaveValue,
206+
})
201207
.then((response) => {
202208
error.value = response?.error as boolean ?? false;
203209
loading.value = false;

‎src/plugin/VInlineSwitch.vue‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -135,17 +135,19 @@ const fieldContainerClass = computed(() => useFieldContainerClass('switch', show
135135
const fieldDisplayClass = computed(() => useDisplayContainerClass(
136136
'switch',
137137
settings.valueColor,
138-
settings.disabled,
139-
error.value,
140-
));
141-
const fieldDisplayStyle = computed(() => useFieldDisplayStyles(
142-
settings.underlineColor,
143-
settings.underlineStyle,
144-
settings.underlineWidth,
145-
settings.color,
146-
error.value,
147-
settings.underlined,
138+
{
139+
disabled: settings.disabled,
140+
error,
141+
}
148142
));
143+
const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
144+
color: settings.color,
145+
error,
146+
underlineColor: settings.underlineColor,
147+
underlineStyle: settings.underlineStyle,
148+
underlineWidth: settings.underlineWidth,
149+
underlined: settings.underlined,
150+
}));
149151
150152
151153
// ------------------------------------------------ Toggle the field //
@@ -154,15 +156,14 @@ function toggleField() {
154156
return;
155157
}
156158
157-
const response = useToggleField(
158-
settings.item.id as number,
159-
showField.value,
159+
const response = useToggleField({
160160
attrs,
161+
closeSiblings: settings.closeSiblings,
162+
fieldOnly: settings.fieldOnly,
161163
props,
162-
timeOpened.value,
163-
settings.closeSiblings,
164-
settings.fieldOnly,
165-
);
164+
showField: showField.value,
165+
timeOpened: timeOpened.value,
166+
});
166167
167168
settings = { ...settings, ...response.settings };
168169
showField.value = response.showField;
@@ -181,7 +182,12 @@ function saveValue(value: undefined) {
181182
loading.value = true;
182183
emit('loading', loading.value);
183184
184-
useSaveValue(settings, emit as keyof UseSaveValue, settings.name, value as keyof UseSaveValue)
185+
useSaveValue({
186+
emit: emit as keyof UseSaveValue,
187+
name: settings.name,
188+
settings,
189+
value: value as keyof UseSaveValue,
190+
})
185191
.then((response) => {
186192
error.value = response?.error as boolean ?? false;
187193
loading.value = false;

‎src/plugin/VInlineTextField.vue‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -129,18 +129,20 @@ const fieldContainerClass = computed(() => useFieldContainerClass('text-field',
129129
const fieldDisplayClass = computed(() => useDisplayContainerClass(
130130
'text-field',
131131
settings.valueColor,
132-
settings.disabled,
133-
error.value,
134-
empty.value,
135-
));
136-
const fieldDisplayStyle = computed(() => useFieldDisplayStyles(
137-
settings.underlineColor,
138-
settings.underlineStyle,
139-
settings.underlineWidth,
140-
settings.color,
141-
error.value,
142-
settings.underlined,
132+
{
133+
disabled: settings.disabled,
134+
empty,
135+
error,
136+
}
143137
));
138+
const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
139+
color: settings.color,
140+
error,
141+
underlineColor: settings.underlineColor,
142+
underlineStyle: settings.underlineStyle,
143+
underlineWidth: settings.underlineWidth,
144+
underlined: settings.underlined,
145+
}));
144146
145147
146148
// ------------------------------------------------ Key event to cancel/close field //
@@ -156,15 +158,14 @@ function toggleField() {
156158
return;
157159
}
158160
159-
const response = useToggleField(
160-
settings.item.id as number,
161-
showField.value,
161+
const response = useToggleField({
162162
attrs,
163+
closeSiblings: settings.closeSiblings,
164+
fieldOnly: settings.fieldOnly,
163165
props,
164-
timeOpened.value,
165-
settings.closeSiblings,
166-
settings.fieldOnly,
167-
);
166+
showField,
167+
timeOpened: timeOpened.value,
168+
});
168169
169170
settings = { ...settings, ...response.settings };
170171
showField.value = response.showField;
@@ -182,7 +183,12 @@ function saveValue() {
182183
loading.value = true;
183184
emit('loading', loading.value);
184185
185-
useSaveValue(settings, emit as keyof UseSaveValue, settings.name, modelValue.value as keyof UseSaveValue)
186+
useSaveValue({
187+
emit: emit as keyof UseSaveValue,
188+
name: settings.name,
189+
settings,
190+
value: modelValue.value as keyof UseSaveValue,
191+
})
186192
.then((response) => {
187193
error.value = response?.error as boolean ?? false;
188194
loading.value = false;

‎src/plugin/VInlineTextarea.vue‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -130,18 +130,20 @@ const fieldContainerClass = computed(() => useFieldContainerClass('textarea', sh
130130
const fieldDisplayClass = computed(() => useDisplayContainerClass(
131131
'textarea',
132132
settings.valueColor,
133-
settings.disabled,
134-
error.value,
135-
empty.value,
136-
));
137-
const fieldDisplayStyle = computed(() => useFieldDisplayStyles(
138-
settings.underlineColor,
139-
settings.underlineStyle,
140-
settings.underlineWidth,
141-
settings.color,
142-
error.value,
143-
settings.underlined,
133+
{
134+
disabled: settings.disabled,
135+
empty,
136+
error,
137+
}
144138
));
139+
const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
140+
color: settings.color,
141+
error,
142+
underlineColor: settings.underlineColor,
143+
underlineStyle: settings.underlineStyle,
144+
underlineWidth: settings.underlineWidth,
145+
underlined: settings.underlined,
146+
}));
145147
146148
147149
// ------------------------------------------------ Key event to cancel/close field //
@@ -157,15 +159,14 @@ function toggleField() {
157159
return;
158160
}
159161
160-
const response = useToggleField(
161-
settings.item.id as number,
162-
showField.value,
162+
const response = useToggleField({
163163
attrs,
164+
closeSiblings: settings.closeSiblings,
165+
fieldOnly: settings.fieldOnly,
164166
props,
165-
timeOpened.value,
166-
settings.closeSiblings,
167-
settings.fieldOnly,
168-
);
167+
showField,
168+
timeOpened: timeOpened.value,
169+
});
169170
170171
settings = { ...settings, ...response.settings };
171172
showField.value = response.showField;
@@ -183,7 +184,12 @@ function saveValue() {
183184
loading.value = true;
184185
emit('loading', loading.value);
185186
186-
useSaveValue(settings, emit as keyof UseSaveValue, settings.name, modelValue.value as keyof UseSaveValue)
187+
useSaveValue({
188+
emit: emit as keyof UseSaveValue,
189+
name: settings.name,
190+
settings,
191+
value: modelValue.value as keyof UseSaveValue,
192+
})
187193
.then((response) => {
188194
error.value = response?.error as boolean ?? false;
189195
loading.value = false;

‎src/plugin/components/SaveFieldButtons.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
@click="closeField"
3434
>
3535
<v-icon
36-
v-if="!settings.fieldOnly"
3736
class="text-default"
3837
:color="settings.cancelIconColor"
3938
:icon="cancelIcon"

‎src/plugin/composables/classes.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
1+
import { UseDisplayContainerClass } from '@/types';
12
import { componentName } from '../utils/globals';
23

3-
export const useDisplayContainerClass = (name: string, valueColor: string, disabled = false, error = false, empty = false,) => {
4+
export const useDisplayContainerClass: UseDisplayContainerClass = (name, valueColor, options) => {
5+
const { disabled = false, error = false, empty = false } = options;
6+
47
return {
58
[`${componentName}`]: true,
6-
[`${componentName}--disabled`]: disabled,
9+
[`${componentName}--disabled`]: unref(disabled),
710
[`${componentName}--display-value-${name}`]: true,
811
[`${componentName}--display-value`]: true,
9-
[`${componentName}--display-value-empty`]: empty,
10-
[`text-${valueColor}`]: !error,
11-
'text-danger': error,
12+
[`${componentName}--display-value-empty`]: unref(empty),
13+
[`text-${valueColor}`]: !unref(error),
14+
'text-danger': unref(error),
1215
};
1316
};
1417

15-
export const useFieldContainerClass = (name: string, active = false) => {
18+
export const useFieldContainerClass = (name: string, active = false): object => {
1619
return {
1720
[`${componentName}`]: true,
1821
[`${componentName}--field-value-${name}`]: true,
@@ -21,7 +24,7 @@ export const useFieldContainerClass = (name: string, active = false) => {
2124
};
2225
};
2326

24-
export const useSaveFieldsContainerClass = () => {
27+
export const useSaveFieldsContainerClass = (): object => {
2528
return {
2629
[`${componentName}--save-fields-container`]: true,
2730
'align-center': true,

0 commit comments

Comments
 (0)