Skip to content

Commit 2189d09

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updated components to use icon composeable. Removed built in saving using axios.
1 parent e263385 commit 2189d09

File tree

7 files changed

+164
-112
lines changed

7 files changed

+164
-112
lines changed

‎src/plugin/VInlineCheckbox.vue‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
>
8888
<v-icon
8989
:color="settings.cancelIconColor"
90-
:icon="settings.cancelIcon"
90+
:icon="theCancelIcon"
9191
/>
9292
</v-btn>
9393
</template>
@@ -101,15 +101,13 @@ import {
101101
CloseSiblingsBus,
102102
FieldValue,
103103
TimeOpened,
104-
UseSaveValue,
105104
VInlineCheckboxProps,
106105
} from '@/types';
106+
import type { IconOptions } from 'vuetify';
107107
import { checkboxProps } from './utils/props';
108108
import { BooleanIcons } from './components/index';
109-
import {
110-
useSaveValue,
111-
useToggleField,
112-
} from './composables/methods';
109+
import { useToggleField } from './composables/methods';
110+
import { useGetIcon } from './composables/icons';
113111
import {
114112
useDisplayContainerClass,
115113
useDisplaySelectionControlClasses,
@@ -129,6 +127,8 @@ const modelValue = defineModel<FieldValue>();
129127
const attrs = useAttrs();
130128
const slots = useSlots();
131129
const emit = defineEmits([...inlineEmits]);
130+
const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
131+
132132
const props = withDefaults(defineProps<VInlineCheckboxProps>(), { ...checkboxProps });
133133
let settings = reactive({ ...attrs, ...props });
134134
@@ -138,6 +138,16 @@ const showField = ref<boolean>(false);
138138
const timeOpened = ref<TimeOpened>(null);
139139
140140
141+
// ------------------------------------------------ Icons //
142+
const theCancelIcon = computed(() => {
143+
return useGetIcon({
144+
icon: settings.cancelIcon,
145+
iconOptions,
146+
name: 'false',
147+
});
148+
});
149+
150+
141151
// ------------------------------------------------ The displayed value //
142152
const displayValue = computed(() => {
143153
return modelValue.value == settings.trueValue;
@@ -214,24 +224,12 @@ function toggleField() {
214224
215225
216226
// ------------------------------------------------ Save the value / Emit update //
217-
function saveValue(value: undefined) {
227+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
228+
function saveValue(value: any) {
218229
modelValue.value = value;
219230
220-
loading.value = true;
221-
emit('loading', loading.value);
222-
223-
useSaveValue({
224-
emit: emit as keyof UseSaveValue,
225-
name: settings.name,
226-
settings,
227-
value: value as keyof UseSaveValue,
228-
})
229-
.then((response) => {
230-
error.value = response?.error as boolean ?? false;
231-
loading.value = false;
232-
emit('loading', loading.value);
233-
toggleField();
234-
});
231+
emit('update', value);
232+
toggleField();
235233
}
236234
237235

‎src/plugin/VInlineSelect.vue‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
v-bind="$attrs"
3030
v-model="modelValue"
3131
:autofocus="!settings.fieldOnly || settings.autofocus"
32-
:clear-icon="settings.clearIcon"
32+
:clear-icon="theClearIcon"
3333
:clearable="settings.clearable"
3434
:color="settings.color"
3535
:density="settings.density"
@@ -96,15 +96,14 @@ import {
9696
CloseSiblingsBus,
9797
FieldValue,
9898
TimeOpened,
99-
UseSaveValue,
10099
VInlineSelectProps,
101100
} from '@/types';
101+
import type { IconOptions } from 'vuetify';
102102
import type { VSelect } from 'vuetify/components';
103103
import { selectProps } from './utils/props';
104104
import { SaveFieldButtons } from './components/index';
105105
import {
106106
useCheckForErrors,
107-
useSaveValue,
108107
useToggleField,
109108
} from './composables/methods';
110109
import {
@@ -119,25 +118,45 @@ import {
119118
useInlineFieldsContainerStyle,
120119
} from './composables/styles';
121120
import inlineEmits from './utils/emits';
121+
import { useGetIcon } from './composables/icons';
122122
123123
124124
const modelValue = defineModel<FieldValue>();
125125
126126
const attrs = useAttrs();
127-
const slots = useSlots();
128127
const emit = defineEmits([...inlineEmits]);
128+
const slots = useSlots();
129+
129130
const props = withDefaults(defineProps<VInlineSelectProps>(), { ...selectProps });
131+
const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
130132
let settings = reactive({ ...attrs, ...props });
131133
132134
const empty = ref<boolean>(false);
133135
const error = ref<boolean>(false);
134136
const items = ref();
135-
const loading = ref<boolean>(false);
136137
const showField = ref<boolean>(false);
137138
const timeOpened = ref<TimeOpened>(null);
138139
let originalValue = modelValue.value;
139140
140141
142+
// ------------------------------------------------ Loading //
143+
watch(() => props.loading, (newVal, oldVal) => {
144+
if (!newVal && oldVal && showField.value) {
145+
toggleField();
146+
}
147+
});
148+
149+
150+
// ------------------------------------------------ Icons //
151+
const theClearIcon = computed(() => {
152+
return useGetIcon({
153+
icon: props.clearIcon,
154+
iconOptions,
155+
name: 'clear',
156+
});
157+
});
158+
159+
141160
// ------------------------------------------------ The displayed value //
142161
const displayValue = computed(() => {
143162
if (modelValue.value && modelValue.value[settings.itemTitle as string]) {
@@ -270,21 +289,8 @@ function checkInternalErrors() {
270289
// ------------------------------------------------ Save the value / Emit update //
271290
function saveValue() {
272291
originalValue = modelValue.value;
273-
loading.value = true;
274-
emit('loading', loading.value);
275-
276-
useSaveValue({
277-
emit: emit as keyof UseSaveValue,
278-
name: settings.name,
279-
settings,
280-
value: modelValue.value as keyof UseSaveValue,
281-
})
282-
.then((response) => {
283-
error.value = response?.error as boolean ?? false;
284-
loading.value = false;
285-
emit('loading', loading.value);
286-
toggleField();
287-
});
292+
293+
emit('update', modelValue.value);
288294
}
289295
290296
@@ -316,6 +322,10 @@ onUnmounted(() => {
316322
</script>
317323

318324
<style lang="scss" scoped>
325+
// TODO: When clearable prop = true //
326+
// FIX: Adjust clearable icon position and fontawesome size
327+
// FIX: Adjust arrow icon position and fontawesome size
328+
319329
:deep(.v-input__append) {
320330
padding: 0 !important;
321331
}

‎src/plugin/VInlineSwitch.vue‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
>
8686
<v-icon
8787
:color="settings.cancelIconColor"
88-
:icon="cancelIcon"
88+
:icon="theCancelIcon"
8989
/>
9090
</v-btn>
9191
</template>
@@ -99,15 +99,13 @@ import {
9999
CloseSiblingsBus,
100100
FieldValue,
101101
TimeOpened,
102-
UseSaveValue,
103102
VInlineSwitchProps,
104103
} from '@/types';
104+
import type { IconOptions } from 'vuetify';
105105
import { switchProps } from './utils/props';
106106
import { BooleanIcons } from './components/index';
107-
import {
108-
useSaveValue,
109-
useToggleField,
110-
} from './composables/methods';
107+
import { useToggleField } from './composables/methods';
108+
import { useGetIcon } from './composables/icons';
111109
import {
112110
useDisplayContainerClass,
113111
useDisplaySelectionControlClasses,
@@ -127,15 +125,34 @@ const modelValue = defineModel<FieldValue>();
127125
const attrs = useAttrs();
128126
const slots = useSlots();
129127
const emit = defineEmits([...inlineEmits]);
128+
const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
129+
130130
const props = withDefaults(defineProps<VInlineSwitchProps>(), { ...switchProps });
131131
let settings = reactive({ ...attrs, ...props });
132132
133133
const error = ref<boolean>(false);
134-
const loading = ref<boolean>(false);
135134
const showField = ref<boolean>(false);
136135
const timeOpened = ref<TimeOpened>(null);
137136
138137
138+
// ------------------------------------------------ Loading //
139+
watch(() => props.loading, (newVal, oldVal) => {
140+
if (!newVal && oldVal && showField.value) {
141+
toggleField();
142+
}
143+
});
144+
145+
146+
// ------------------------------------------------ Icons //
147+
const theCancelIcon = computed(() => {
148+
return useGetIcon({
149+
icon: settings.cancelIcon,
150+
iconOptions,
151+
name: 'false',
152+
});
153+
});
154+
155+
139156
// ------------------------------------------------ The displayed value //
140157
const displayValue = computed(() => {
141158
return modelValue.value == settings.trueValue;
@@ -212,24 +229,11 @@ function toggleField() {
212229
213230
214231
// ------------------------------------------------ Save the value / Emit update //
215-
function saveValue(value: undefined) {
232+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
233+
function saveValue(value: any) {
216234
modelValue.value = value;
217235
218-
loading.value = true;
219-
emit('loading', loading.value);
220-
221-
useSaveValue({
222-
emit: emit as keyof UseSaveValue,
223-
name: settings.name,
224-
settings,
225-
value: value as keyof UseSaveValue,
226-
})
227-
.then((response) => {
228-
error.value = response?.error as boolean ?? false;
229-
loading.value = false;
230-
emit('loading', loading.value);
231-
toggleField();
232-
});
236+
emit('update', value);
233237
}
234238
235239

‎src/plugin/VInlineTextField.vue‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,12 @@ import {
9292
CloseSiblingsBus,
9393
FieldValue,
9494
TimeOpened,
95-
UseSaveValue,
9695
VInlineTextFieldProps,
9796
} from '@/types';
9897
import { textFieldProps } from './utils/props';
9998
import { SaveFieldButtons } from './components/index';
10099
import {
101100
useCheckForErrors,
102-
useSaveValue,
103101
useToggleField,
104102
useTruncateText,
105103
} from './composables/methods';
@@ -127,12 +125,18 @@ let settings = reactive({ ...attrs, ...props });
127125
128126
const empty = ref<boolean>(false);
129127
const error = ref<boolean>(false);
130-
const loading = ref<boolean>(false);
131128
const showField = ref<boolean>(false);
132129
const timeOpened = ref<TimeOpened>(null);
133130
let originalValue = modelValue.value;
134131
135132
133+
watch(() => props.loading, (newVal, oldVal) => {
134+
if (!newVal && oldVal && showField.value) {
135+
toggleField();
136+
}
137+
});
138+
139+
136140
// ------------------------------------------------ The displayed value //
137141
const displayValue = computed(() => {
138142
if (modelValue.value) {
@@ -271,21 +275,7 @@ function saveValue() {
271275
}
272276
273277
originalValue = modelValue.value;
274-
loading.value = true;
275-
emit('loading', loading.value);
276-
277-
useSaveValue({
278-
emit: emit as keyof UseSaveValue,
279-
name: settings.name,
280-
settings,
281-
value: modelValue.value as keyof UseSaveValue,
282-
})
283-
.then((response) => {
284-
error.value = response?.error as boolean ?? false;
285-
loading.value = false;
286-
emit('loading', loading.value);
287-
toggleField();
288-
});
278+
emit('update', modelValue.value);
289279
}
290280
291281

0 commit comments

Comments
 (0)