Skip to content

Commit 80ddc41

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updating binding properties
1 parent a12a9b5 commit 80ddc41

File tree

5 files changed

+59
-33
lines changed

5 files changed

+59
-33
lines changed

‎src/plugin/VInlineCheckbox.vue

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,11 @@
4646
:class="fieldContainerClass"
4747
>
4848
<v-checkbox
49-
v-bind="$attrs"
49+
v-bind="bindingSettings"
5050
v-model="modelValue"
5151
:color="settings.color"
5252
:density="settings.density"
53-
:disabled="loading"
53+
:disabled="loadingProp"
5454
:error="error"
5555
:false-icon="theFalseIcon"
5656
:false-value="settings.falseValue"
@@ -85,7 +85,7 @@
8585
:error="error"
8686
:field-only="settings.fieldOnly"
8787
:hide-save-icon="true"
88-
:loading="loading"
88+
:loading="loadingProp"
8989
:loading-icon="settings.loadingIcon"
9090
:loading-icon-color="settings.loadingIconColor"
9191
:save-button-color="settings.saveButtonColor"
@@ -141,14 +141,19 @@ const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
141141
142142
const props = withDefaults(defineProps<VInlineCheckboxProps>(), { ...checkboxProps });
143143
let settings = reactive({ ...attrs, ...props });
144+
const loadingProp = computed(() => props.loading);
144145
145146
const error = ref<boolean>(false);
146147
const showField = ref<boolean>(false);
147148
const timeOpened = ref<TimeOpened>(null);
148149
149150
151+
// ------------------------------------------------ Binding Events & Props //
152+
const bindingSettings = computed(() => settings);
153+
154+
150155
// ------------------------------------------------ Loading //
151-
watch(() => props.loading, (newVal, oldVal) => {
156+
watch(() => loadingProp.value, (newVal, oldVal) => {
152157
if (!newVal && oldVal && showField.value) {
153158
toggleField();
154159
}
@@ -183,7 +188,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
183188
density: settings.density,
184189
disabled: settings.disabled,
185190
field: 'v-checkbox',
186-
loading: props.loading,
191+
loading: loadingProp.value,
187192
loadingWait: settings.loadingWait,
188193
tableField: settings.tableField,
189194
}));
@@ -233,7 +238,7 @@ function closeField() {
233238
234239
// ------------------------------------------------ Toggle the field //
235240
function toggleField() {
236-
if (settings.disabled || (settings.loadingWait && props.loading)) {
241+
if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
237242
return;
238243
}
239244

‎src/plugin/VInlineSelect.vue

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@
2626
:class="fieldContainerClass"
2727
>
2828
<v-select
29-
v-bind="$attrs"
29+
v-bind="bindingSettings"
3030
v-model="modelValue"
3131
:autofocus="!settings.fieldOnly || settings.autofocus"
3232
:clear-icon="theClearIcon"
3333
:clearable="settings.clearable"
3434
:color="settings.color"
3535
:density="settings.density"
36-
:disabled="loading"
36+
:disabled="loadingProp"
3737
:error="error"
3838
:error-messages="internalErrorMessages"
3939
:hide-details="settings.hideDetails"
@@ -42,7 +42,7 @@
4242
:item-value="settings.itemValue"
4343
:items="items"
4444
:label="settings.label"
45-
:loading="loading"
45+
:loading="loadingProp"
4646
:menu="settings.menu"
4747
:variant="settings.variant"
4848
width="100%"
@@ -73,7 +73,7 @@
7373
:error="error"
7474
:field-only="settings.fieldOnly"
7575
:hide-save-icon="settings.hideSaveIcon"
76-
:loading="loading"
76+
:loading="loadingProp"
7777
:loading-icon="settings.loadingIcon"
7878
:loading-icon-color="settings.loadingIconColor"
7979
:save-button-color="settings.saveButtonColor"
@@ -130,6 +130,7 @@ const slots = useSlots();
130130
const props = withDefaults(defineProps<VInlineSelectProps>(), { ...selectProps });
131131
const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
132132
let settings = reactive({ ...attrs, ...props });
133+
const loadingProp = computed(() => props.loading);
133134
134135
const empty = ref<boolean>(false);
135136
const error = ref<boolean>(false);
@@ -139,8 +140,12 @@ const timeOpened = ref<TimeOpened>(null);
139140
let originalValue = modelValue.value;
140141
141142
143+
// ------------------------------------------------ Binding Events & Props //
144+
const bindingSettings = computed(() => settings);
145+
146+
142147
// ------------------------------------------------ Loading //
143-
watch(() => props.loading, (newVal, oldVal) => {
148+
watch(() => loadingProp.value, (newVal, oldVal) => {
144149
if (!newVal && oldVal && showField.value) {
145150
toggleField();
146151
}
@@ -183,7 +188,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
183188
disabled: settings.disabled,
184189
field: 'v-select',
185190
iconSet: iconOptions?.defaultSet,
186-
loading: props.loading,
191+
loading: loadingProp.value,
187192
loadingWait: settings.loadingWait,
188193
tableField: settings.tableField,
189194
}));
@@ -236,7 +241,7 @@ function closeField() {
236241
237242
// ------------------------------------------------ Toggle the field //
238243
function toggleField() {
239-
if (settings.disabled || (settings.loadingWait && props.loading)) {
244+
if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
240245
return;
241246
}
242247

‎src/plugin/VInlineSwitch.vue

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,17 @@
4444
:class="fieldContainerClass"
4545
>
4646
<v-switch
47-
v-bind="$attrs"
47+
v-bind="bindingSettings"
4848
v-model="modelValue"
4949
:color="settings.color"
5050
:density="settings.density"
51-
:disabled="loading"
51+
:disabled="loadingProp"
5252
:error="error"
5353
:false-icon="settings.falseIcon"
5454
:false-value="settings.falseValue"
5555
:hide-details="settings.hideDetails"
5656
:label="settings.label"
57-
:loading="loading"
57+
:loading="loadingProp"
5858
:value="settings.trueValue"
5959
@update:model-value="saveValue"
6060
>
@@ -129,14 +129,19 @@ const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
129129
130130
const props = withDefaults(defineProps<VInlineSwitchProps>(), { ...switchProps });
131131
let settings = reactive({ ...attrs, ...props });
132+
const loadingProp = computed(() => props.loading);
132133
133134
const error = ref<boolean>(false);
134135
const showField = ref<boolean>(false);
135136
const timeOpened = ref<TimeOpened>(null);
136137
137138
139+
// ------------------------------------------------ Binding Events & Props //
140+
const bindingSettings = computed(() => settings);
141+
142+
138143
// ------------------------------------------------ Loading //
139-
watch(() => props.loading, (newVal, oldVal) => {
144+
watch(() => loadingProp.value, (newVal, oldVal) => {
140145
if (!newVal && oldVal && showField.value) {
141146
toggleField();
142147
}
@@ -164,7 +169,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
164169
density: settings.density,
165170
disabled: settings.disabled,
166171
field: 'v-switch',
167-
loading: props.loading,
172+
loading: loadingProp.value,
168173
loadingWait: settings.loadingWait,
169174
tableField: settings.tableField,
170175
}));
@@ -207,7 +212,7 @@ const displayValueStyle = computed(() => useDisplayValueStyles({
207212
208213
// ------------------------------------------------ Toggle the field //
209214
function toggleField() {
210-
if (settings.disabled || (settings.loadingWait && props.loading)) {
215+
if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
211216
return;
212217
}
213218

‎src/plugin/VInlineTextField.vue

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,17 @@
2626
:class="fieldContainerClass"
2727
>
2828
<v-text-field
29-
v-bind="$attrs"
29+
v-bind="bindingSettings"
3030
v-model="modelValue"
3131
:autofocus="!settings.fieldOnly || settings.autofocus"
3232
:color="settings.color"
3333
:density="settings.density"
34-
:disabled="loading"
34+
:disabled="loadingProp"
3535
:error="error"
3636
:error-messages="internalErrorMessages"
3737
:hide-details="settings.hideDetails"
3838
:label="settings.label"
39-
:loading="loading"
39+
:loading="loadingProp"
4040
:variant="settings.variant"
4141
width="100%"
4242
@keyup.enter="saveValue"
@@ -68,7 +68,7 @@
6868
:error="error"
6969
:field-only="settings.fieldOnly"
7070
:hide-save-icon="settings.hideSaveIcon"
71-
:loading="loading"
71+
:loading="loadingProp"
7272
:loading-icon="settings.loadingIcon"
7373
:loading-icon-color="settings.loadingIconColor"
7474
:required="settings.required"
@@ -122,6 +122,7 @@ const slots = useSlots();
122122
const emit = defineEmits([...inlineEmits]);
123123
const props = withDefaults(defineProps<VInlineTextFieldProps>(), { ...textFieldProps });
124124
let settings = reactive({ ...attrs, ...props });
125+
const loadingProp = computed(() => props.loading);
125126
126127
const empty = ref<boolean>(false);
127128
const error = ref<boolean>(false);
@@ -130,7 +131,12 @@ const timeOpened = ref<TimeOpened>(null);
130131
let originalValue = modelValue.value;
131132
132133
133-
watch(() => props.loading, (newVal, oldVal) => {
134+
// ------------------------------------------------ Binding Events & Props //
135+
const bindingSettings = computed(() => settings);
136+
137+
138+
// ------------------------------------------------ Loading //
139+
watch(() => loadingProp.value, (newVal, oldVal) => {
134140
if (!newVal && oldVal && showField.value) {
135141
toggleField();
136142
}
@@ -163,7 +169,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
163169
density: settings.density,
164170
disabled: settings.disabled,
165171
field: 'v-text-field',
166-
loading: props.loading,
172+
loading: loadingProp.value,
167173
loadingWait: settings.loadingWait,
168174
tableField: settings.tableField,
169175
}));
@@ -216,7 +222,7 @@ function closeField() {
216222
217223
// ------------------------------------------------ Toggle the field //
218224
function toggleField() {
219-
if (settings.disabled || (settings.loadingWait && props.loading)) {
225+
if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
220226
return;
221227
}
222228

‎src/plugin/VInlineTextarea.vue

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,18 @@
2727
:class="fieldContainerClass"
2828
>
2929
<v-textarea
30-
v-bind="$attrs"
30+
v-bind="bindingSettings"
3131
v-model="modelValue"
3232
:auto-grow="settings.autoGrow"
3333
:autofocus="!settings.fieldOnly || settings.autofocus"
3434
:color="settings.color"
3535
:density="settings.density"
36-
:disabled="loading"
36+
:disabled="loadingProp"
3737
:error="error"
3838
:error-messages="internalErrorMessages"
3939
:hide-details="settings.hideDetails"
4040
:label="settings.label"
41-
:loading="loading"
41+
:loading="loadingProp"
4242
:rows="settings.rows"
4343
:variant="settings.variant"
4444
width="100%"
@@ -69,7 +69,7 @@
6969
:error="error"
7070
:field-only="settings.fieldOnly"
7171
:hide-save-icon="settings.hideSaveIcon"
72-
:loading="loading"
72+
:loading="loadingProp"
7373
:loading-icon="settings.loadingIcon"
7474
:loading-icon-color="settings.loadingIconColor"
7575
:save-button-color="settings.saveButtonColor"
@@ -122,6 +122,7 @@ const slots = useSlots();
122122
const emit = defineEmits([...inlineEmits]);
123123
const props = withDefaults(defineProps<VInlineTextareaProps>(), { ...textareaProps });
124124
let settings = reactive({ ...attrs, ...props });
125+
const loadingProp = computed(() => props.loading);
125126
126127
const empty = ref<boolean>(false);
127128
const error = ref<boolean>(false);
@@ -130,8 +131,12 @@ const timeOpened = ref<TimeOpened>(null);
130131
let originalValue = modelValue.value;
131132
132133
134+
// ------------------------------------------------ Binding Events & Props //
135+
const bindingSettings = computed(() => settings);
136+
137+
133138
// ------------------------------------------------ Loading //
134-
watch(() => props.loading, (newVal, oldVal) => {
139+
watch(() => loadingProp.value, (newVal, oldVal) => {
135140
if (!newVal && oldVal && showField.value) {
136141
toggleField();
137142
}
@@ -164,7 +169,7 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
164169
density: settings.density,
165170
disabled: settings.disabled,
166171
field: 'v-textarea',
167-
loading: props.loading,
172+
loading: loadingProp.value,
168173
loadingWait: settings.loadingWait,
169174
tableField: settings.tableField,
170175
}));
@@ -217,7 +222,7 @@ function closeField() {
217222
218223
// ------------------------------------------------ Toggle the field //
219224
function toggleField() {
220-
if (settings.disabled || (settings.loadingWait && props.loading)) {
225+
if (settings.disabled || (settings.loadingWait && loadingProp.value)) {
221226
return;
222227
}
223228

0 commit comments

Comments
 (0)