github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Open current folder in library / detail

Browse Source
This commit is contained in:
rijkvanzanten
2020-08-11 17:13:13 -04:00
parent 830b8a514b
commit 400c4291cd
12 changed files with 128 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/composables/groupable/groupable.test.ts
View File

@@ -40,7 +40,7 @@ describe('Groupable', () => {
mountComposable(() => {
provide('item-group', { register, unregister, toggle });
useGroupable('custom-value');
useGroupable({ value: 'custom-value' });
});
expect(register).toHaveBeenCalledWith({
@@ -56,7 +56,7 @@ describe('Groupable', () => {
mountComposable(() => {
provide('item-group', { register, unregister, toggle });
const result = useGroupable('custom-value');
const result = useGroupable({ value: 'custom-value' });
expect(result!.active).toEqual({ value: false });
expect(result!.toggle).toBeInstanceOf(Function);
});
@@ -69,7 +69,7 @@ describe('Groupable', () => {
mountComposable(() => {
provide('item-group', { register, unregister, toggle });
const result = useGroupable('custom-value');
const result = useGroupable({ value: 'custom-value' });
result!.toggle();
expect(toggle).toHaveBeenCalled();
});
@@ -82,7 +82,7 @@ describe('Groupable', () => {
mountComposable(() => {
provide('item-group', { register, unregister, toggle });
const result = useGroupable('custom-value');
const result = useGroupable({ value: 'custom-value' });
result!.toggle();
expect(result!.active).toEqual({ value: true });
});

43
app/src/composables/groupable/groupable.ts
View File

@@ -11,15 +11,25 @@ type GroupableInstance = {
* Used to make child item part of the group context. Needs to be used in a component that is a child
* of a component that has the `useGroupableParent` composition enabled
*/
export function useGroupable(value?: string | number, group = 'item-group') {
type GroupableOptions = {
value?: string | number;
group?: string;
active?: Ref<boolean>;
};
export function useGroupable(options?: GroupableOptions) {
// Injects the registration / toggle functions from the parent scope
const parentFunctions = inject(group, null);
const parentFunctions = inject(options?.group || 'item-group', null);
if (isEmpty(parentFunctions)) {
return {
active: ref(false),
// eslint-disable-next-line @typescript-eslint/no-empty-function
toggle: () => {},
// eslint-disable-next-line @typescript-eslint/no-empty-function
activate: () => {},
// eslint-disable-next-line @typescript-eslint/no-empty-function
deactivate: () => {},
};
}
@@ -34,9 +44,28 @@ export function useGroupable(value?: string | number, group = 'item-group') {
} = parentFunctions;
const active = ref(false);
const item = { active, value };
const item = { active, value: options?.value };
register(item);
if (options?.active) {
if (options.active.value === true) toggle(item);
watch(options.active, () => {
if (options.active === undefined) return;
if (options.active.value === true) {
if (active.value === false) toggle(item);
active.value = true;
}
if (options.active.value === false) {
if (active.value === true) toggle(item);
active.value = false;
}
});
}
onBeforeUnmount(() => unregister(item));
return {
@@ -45,6 +74,14 @@ export function useGroupable(value?: string | number, group = 'item-group') {
active.value = !active.value;
toggle(item);
},
activate: () => {
if (active.value === false) toggle(item);
active.value = true;
},
deactivate: () => {
if (active.value === true) toggle(item);
active.value = false;
},
};
}