Skip to content

Commit acd9583

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Cleaning and adding in closeSiblings functionality
1 parent 684d944 commit acd9583

File tree

8 files changed

+249
-77
lines changed

8 files changed

+249
-77
lines changed

‎src/plugin/VInlineCheckbox.vue‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989

9090
<script setup lang="ts">
9191
import {
92+
CloseSiblingsBus,
9293
FieldValue,
9394
TimeOpened,
9495
UseSaveValue,
@@ -106,31 +107,29 @@ import {
106107
} from './composables/classes';
107108
import { useFieldDisplayStyles } from './composables/styles';
108109
import inlineEmits from './utils/emits';
109-
// import {
110-
// inlineEmits,
111-
// // inlineWatch,
112-
// } from './shared';
113110
114111
115112
const modelValue = defineModel<FieldValue>();
116113
117-
const displayValue = computed(() => {
118-
return modelValue.value == settings.trueValue;
119-
});
120-
121114
const attrs = useAttrs();
122115
const slots = useSlots();
123116
const emit = defineEmits([...inlineEmits]);
124117
const props = withDefaults(defineProps<VInlineCheckboxProps>(), { ...checkboxProps });
125118
let settings = reactive({ ...attrs, ...props });
126119
127-
128120
const error = ref<boolean>(false);
129121
const loading = ref<boolean>(false);
130122
const showField = ref<boolean>(false);
131123
const timeOpened = ref<TimeOpened>(null);
132124
133125
126+
// ------------------------------------------------ The displayed value //
127+
const displayValue = computed(() => {
128+
return modelValue.value == settings.trueValue;
129+
});
130+
131+
132+
// ------------------------------------------------ Class & Styles //
134133
const fieldContainerClass = computed(() => useFieldContainerClass('checkbox', showField.value));
135134
const fieldDisplayClass = computed(() => useDisplayContainerClass(
136135
'checkbox',
@@ -147,6 +146,8 @@ const fieldDisplayStyle = computed(() => useFieldDisplayStyles(
147146
settings.underlined,
148147
));
149148
149+
150+
// ------------------------------------------------ Toggle the field //
150151
function toggleField() {
151152
if (settings.disabled) {
152153
return;
@@ -165,9 +166,14 @@ function toggleField() {
165166
settings = { ...settings, ...response.settings };
166167
showField.value = response.showField;
167168
timeOpened.value = response.timeOpened;
169+
170+
if (closeSiblingsBus !== null && settings.closeSiblings && showField.value && !settings.fieldOnly) {
171+
closeSiblingsBus.emit(response.timeOpened);
172+
}
168173
}
169174
170175
176+
// ------------------------------------------------ Save the value / Emit update //
171177
function saveValue(value: undefined) {
172178
modelValue.value = value;
173179
@@ -182,6 +188,33 @@ function saveValue(value: undefined) {
182188
toggleField();
183189
});
184190
}
191+
192+
193+
// ------------------------------------------------ Close siblings bus event //
194+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
195+
let closeSiblingsBus: unknown | any;
196+
let unsubscribeBus: () => void;
197+
198+
if (settings.closeSiblings) {
199+
import('@vueuse/core').then(({ useEventBus }) => {
200+
closeSiblingsBus = useEventBus(CloseSiblingsBus);
201+
unsubscribeBus = closeSiblingsBus.on(closeSiblingsListener);
202+
});
203+
}
204+
205+
function closeSiblingsListener(identifier: TimeOpened) {
206+
emit('update:closeSiblingFields', timeOpened);
207+
208+
if (showField.value && timeOpened.value !== identifier) {
209+
toggleField();
210+
}
211+
}
212+
213+
onUnmounted(() => {
214+
if (typeof unsubscribeBus !== 'undefined') {
215+
closeSiblingsBus.off(closeSiblingsListener);
216+
}
217+
});
185218
</script>
186219

187220
<style lang="scss" scoped>

‎src/plugin/VInlineSelect.vue‎

Lines changed: 54 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181

8282
<script setup lang="ts">
8383
import {
84+
CloseSiblingsBus,
8485
FieldValue,
8586
TimeOpened,
8687
UseSaveValue,
@@ -99,26 +100,10 @@ import {
99100
} from './composables/classes';
100101
import { useFieldDisplayStyles } from './composables/styles';
101102
import inlineEmits from './utils/emits';
102-
// import {
103-
// inlineEmits,
104-
// // inlineWatch,
105-
// } from './shared';
106103
107104
108105
const modelValue = defineModel<FieldValue>();
109106
110-
const displayValue = computed(() => {
111-
if (modelValue.value && modelValue.value[settings.itemTitle as string]) {
112-
empty.value = false;
113-
return modelValue.value[settings.itemTitle as string];
114-
}
115-
116-
modelValue.value = '';
117-
empty.value = true;
118-
119-
return settings.emptyText;
120-
});
121-
122107
const attrs = useAttrs();
123108
const slots = useSlots();
124109
const emit = defineEmits([...inlineEmits]);
@@ -134,11 +119,27 @@ const timeOpened = ref<TimeOpened>(null);
134119
let originalValue = modelValue.value;
135120
136121
122+
// ------------------------------------------------ The displayed value //
123+
const displayValue = computed(() => {
124+
if (modelValue.value && modelValue.value[settings.itemTitle as string]) {
125+
empty.value = false;
126+
return modelValue.value[settings.itemTitle as string];
127+
}
128+
129+
modelValue.value = '';
130+
empty.value = true;
131+
132+
return settings.emptyText;
133+
});
134+
135+
136+
// ------------------------------------------------ Watch the items //
137137
watchEffect(() => {
138138
items.value = settings.items || [] as VSelect['$props']['items'];
139139
});
140140
141141
142+
// ------------------------------------------------ Class & Styles //
142143
const fieldContainerClass = computed(() => useFieldContainerClass('select', showField.value));
143144
const fieldDisplayClass = computed(() => useDisplayContainerClass(
144145
'select',
@@ -156,11 +157,15 @@ const fieldDisplayStyle = computed(() => useFieldDisplayStyles(
156157
settings.underlined,
157158
));
158159
160+
161+
// ------------------------------------------------ Key event to cancel/close field //
159162
function closeField() {
160163
modelValue.value = originalValue;
161164
toggleField();
162165
}
163166
167+
168+
// ------------------------------------------------ Toggle the field //
164169
function toggleField() {
165170
if (settings.disabled) {
166171
return;
@@ -179,8 +184,14 @@ function toggleField() {
179184
settings = { ...settings, ...response.settings };
180185
showField.value = response.showField;
181186
timeOpened.value = response.timeOpened;
187+
188+
if (closeSiblingsBus !== null && settings.closeSiblings && showField.value && !settings.fieldOnly) {
189+
closeSiblingsBus.emit(response.timeOpened);
190+
}
182191
}
183192
193+
194+
// ------------------------------------------------ Save the value / Emit update //
184195
function saveValue() {
185196
originalValue = modelValue.value;
186197
loading.value = true;
@@ -194,6 +205,33 @@ function saveValue() {
194205
toggleField();
195206
});
196207
}
208+
209+
210+
// ------------------------------------------------ Close siblings bus event //
211+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
212+
let closeSiblingsBus: unknown | any;
213+
let unsubscribeBus: () => void;
214+
215+
if (settings.closeSiblings) {
216+
import('@vueuse/core').then(({ useEventBus }) => {
217+
closeSiblingsBus = useEventBus(CloseSiblingsBus);
218+
unsubscribeBus = closeSiblingsBus.on(closeSiblingsListener);
219+
});
220+
}
221+
222+
function closeSiblingsListener(identifier: TimeOpened) {
223+
emit('update:closeSiblingFields', timeOpened);
224+
225+
if (showField.value && timeOpened.value !== identifier) {
226+
closeField();
227+
}
228+
}
229+
230+
onUnmounted(() => {
231+
if (typeof unsubscribeBus !== 'undefined') {
232+
closeSiblingsBus.off(closeSiblingsListener);
233+
}
234+
});
197235
</script>
198236

199237
<style lang="scss" scoped>

‎src/plugin/VInlineSwitch.vue‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090

9191
<script setup lang="ts">
9292
import {
93+
CloseSiblingsBus,
9394
FieldValue,
9495
TimeOpened,
9596
UseSaveValue,
@@ -107,18 +108,10 @@ import {
107108
} from './composables/classes';
108109
import { useFieldDisplayStyles } from './composables/styles';
109110
import inlineEmits from './utils/emits';
110-
// import {
111-
// inlineEmits,
112-
// // inlineWatch,
113-
// } from './shared';
114111
115112
116113
const modelValue = defineModel<FieldValue>();
117114
118-
const displayValue = computed(() => {
119-
return modelValue.value == settings.trueValue;
120-
});
121-
122115
const attrs = useAttrs();
123116
const slots = useSlots();
124117
const emit = defineEmits([...inlineEmits]);
@@ -131,6 +124,13 @@ const showField = ref<boolean>(false);
131124
const timeOpened = ref<TimeOpened>(null);
132125
133126
127+
// ------------------------------------------------ The displayed value //
128+
const displayValue = computed(() => {
129+
return modelValue.value == settings.trueValue;
130+
});
131+
132+
133+
// ------------------------------------------------ Class & Styles //
134134
const fieldContainerClass = computed(() => useFieldContainerClass('switch', showField.value));
135135
const fieldDisplayClass = computed(() => useDisplayContainerClass(
136136
'switch',
@@ -147,6 +147,8 @@ const fieldDisplayStyle = computed(() => useFieldDisplayStyles(
147147
settings.underlined,
148148
));
149149
150+
151+
// ------------------------------------------------ Toggle the field //
150152
function toggleField() {
151153
if (settings.disabled) {
152154
return;
@@ -165,8 +167,14 @@ function toggleField() {
165167
settings = { ...settings, ...response.settings };
166168
showField.value = response.showField;
167169
timeOpened.value = response.timeOpened;
170+
171+
if (closeSiblingsBus !== null && settings.closeSiblings && showField.value && !settings.fieldOnly) {
172+
closeSiblingsBus.emit(response.timeOpened);
173+
}
168174
}
169175
176+
177+
// ------------------------------------------------ Save the value / Emit update //
170178
function saveValue(value: undefined) {
171179
modelValue.value = value;
172180
@@ -181,6 +189,33 @@ function saveValue(value: undefined) {
181189
toggleField();
182190
});
183191
}
192+
193+
194+
// ------------------------------------------------ Close siblings bus event //
195+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
196+
let closeSiblingsBus: unknown | any;
197+
let unsubscribeBus: () => void;
198+
199+
if (settings.closeSiblings) {
200+
import('@vueuse/core').then(({ useEventBus }) => {
201+
closeSiblingsBus = useEventBus(CloseSiblingsBus);
202+
unsubscribeBus = closeSiblingsBus.on(closeSiblingsListener);
203+
});
204+
}
205+
206+
function closeSiblingsListener(identifier: TimeOpened) {
207+
emit('update:closeSiblingFields', timeOpened);
208+
209+
if (showField.value && timeOpened.value !== identifier) {
210+
toggleField();
211+
}
212+
}
213+
214+
onUnmounted(() => {
215+
if (typeof unsubscribeBus !== 'undefined') {
216+
closeSiblingsBus.off(closeSiblingsListener);
217+
}
218+
});
184219
</script>
185220

186221
<style lang="scss" scoped>

0 commit comments

Comments
 (0)