You've already forked obsidian-visualiser
Add combobox groups
This commit is contained in:
Clément Pons
136
shared/proses.ts
136
shared/proses.ts
@@ -6,6 +6,7 @@ import { Canvas } from "#shared/canvas.util";
|
||||
import { Content, iconByType, type LocalContent } from "#shared/content.util";
|
||||
import type { RouteLocationAsRelativeTyped, RouteMapGeneric } from "vue-router";
|
||||
import { clamp, unifySlug } from "#shared/general.util";
|
||||
import { Tree } from "./tree";
|
||||
|
||||
export type CustomProse = (properties: any, children: NodeChildren) => Node;
|
||||
export type Prose = { class: string } | { custom: CustomProse };
|
||||
@@ -231,40 +232,23 @@ export function button(content: Node, onClick?: () => void, cls?: Class)
|
||||
border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
|
||||
disabled:bg-light-10 dark:disabled:bg-dark-10 disabled:border-none disabled:text-light-50 dark:disabled:text-dark-50`, cls], listeners: { click: onClick } }, [ content ]);
|
||||
}
|
||||
export function select<T extends NonNullable<any>>(options: Array<string | undefined> | Array<{ text: string, value: T } | undefined>, settings?: { defaultValue?: T, change?: (value: T) => void, class?: { container?: Class, popup?: Class, option?: Class }, disabled?: boolean }): HTMLElement
|
||||
export type Option<T> = { text: string, value: T | Option<T>[] } | undefined;
|
||||
type StoredOption<T> = { item: Option<T>, dom: HTMLElement, container?: HTMLElement, children?: Array<StoredOption<T> | undefined> };
|
||||
export function select<T extends NonNullable<any>>(options: Array<{ text: string, value: T } | undefined>, settings?: { defaultValue?: T, change?: (value: T) => void, class?: { container?: Class, popup?: Class, option?: Class }, disabled?: boolean }): HTMLElement
|
||||
{
|
||||
const textFromValue = (value?: T): string => {
|
||||
if(!value)
|
||||
return '';
|
||||
const found = options.find(e => (e as { value: string } | undefined)?.value === value || e === value);
|
||||
if(!found)
|
||||
return '';
|
||||
return (found as { text: string } | undefined)?.text ?? found as string;
|
||||
};
|
||||
let close: Function | undefined;
|
||||
|
||||
let disabled = settings?.disabled ?? false;
|
||||
const textValue = text(textFromValue(settings?.defaultValue));
|
||||
const textValue = text(options.find(e => Array.isArray(e) ? false : e?.value === settings?.defaultValue)?.text ?? '');
|
||||
const optionElements = options.map(e => {
|
||||
if(e === undefined)
|
||||
return;
|
||||
|
||||
return dom('div', { listeners: { click: () => {
|
||||
let text, value;
|
||||
if(typeof e === 'string')
|
||||
{
|
||||
text = value = e;
|
||||
}
|
||||
else
|
||||
{
|
||||
text = e.text;
|
||||
value = e.value;
|
||||
}
|
||||
|
||||
textValue.textContent = text;
|
||||
settings?.change && settings?.change(value);
|
||||
textValue.textContent = e.text;
|
||||
settings?.change && settings?.change(e.value);
|
||||
close && close();
|
||||
} }, class: ['hover:bg-light-30 dark:hover:bg-dark-30 text-light-70 dark:text-dark-70 hover:text-light-100 dark:hover:text-dark-100 py-1 px-2 cursor-pointer', settings?.class?.option] }, [ text((e as { text: string } | undefined)?.text ?? e as string) ]);
|
||||
} }, class: ['hover:bg-light-30 dark:hover:bg-dark-30 text-light-70 dark:text-dark-70 hover:text-light-100 dark:hover:text-dark-100 py-1 px-2 cursor-pointer', settings?.class?.option] }, [ text(e.text) ]);
|
||||
});
|
||||
const select = dom('div', { listeners: { click: () => {
|
||||
if(disabled)
|
||||
@@ -283,70 +267,86 @@ export function select<T extends NonNullable<any>>(options: Array<string | undef
|
||||
})
|
||||
return select;
|
||||
}
|
||||
export function combobox<T extends NonNullable<any>>(options: Array<string | undefined> | Array<{ text: string, value: T } | undefined>, settings?: { defaultValue?: T, change?: (value: T) => void, class?: { container?: Class, popup?: Class, option?: Class }, disabled?: boolean }): HTMLElement
|
||||
export function combobox<T extends NonNullable<any>>(options: Option<T>[], settings?: { defaultValue?: T, change?: (value: T) => void, class?: { container?: Class, popup?: Class, option?: Class }, disabled?: boolean }): HTMLElement
|
||||
{
|
||||
const textFromValue = (value?: T): string => {
|
||||
if(!value)
|
||||
return '';
|
||||
const found = options.find(e => (e as { value: string } | undefined)?.value === value || e === value);
|
||||
if(!found)
|
||||
return '';
|
||||
return (found as { text: string } | undefined)?.text ?? found as string;
|
||||
};
|
||||
let context: { container: HTMLElement, content: NodeChildren, close: () => void };
|
||||
let selected = true;
|
||||
let selected = true, tree: StoredOption<T>[] = [];
|
||||
|
||||
const show = () => {
|
||||
if(disabled || (context && context.container.parentElement))
|
||||
return;
|
||||
|
||||
const box = container.getBoundingClientRect();
|
||||
context = contextmenu(box.x, box.y + box.height, optionElements.filter(e => !!e).length > 0 ? optionElements.map(e => e?.dom) : [ div('text-light-60 dark:text-dark-60 italic text-center px-2 py-1', [ text('Aucune option') ]) ], { placement: "bottom-start", class: ['flex flex-col max-h-[320px] overflow-auto', settings?.class?.popup], style: { "min-width": `${box.width}px` }, blur: () => { if(!selected) container.classList.add('!border-light-red', 'dark:!border-dark-red') } });
|
||||
context = contextmenu(box.x, box.y + box.height, optionElements.filter(e => !!e).length > 0 ? optionElements.map(e => e?.dom) : [ div('text-light-60 dark:text-dark-60 italic text-center px-2 py-1', [ text('Aucune option') ]) ], { placement: "bottom-start", class: ['flex flex-col max-h-[320px] overflow-y-auto overflow-x-hidden', settings?.class?.popup], style: { "min-width": `${box.width}px` }, blur: hide });
|
||||
if(!selected) container.classList.remove('!border-light-red', 'dark:!border-dark-red');
|
||||
};
|
||||
const hide = () => {
|
||||
if(!context || !context.container.parentElement)
|
||||
if(!selected) container.classList.add('!border-light-red', 'dark:!border-dark-red');
|
||||
tree = [];
|
||||
|
||||
context && context.container.parentElement && context.close();
|
||||
};
|
||||
const progress = (option: StoredOption<T>) => {
|
||||
if(!context || !context.container.parentElement || option.container === undefined)
|
||||
return;
|
||||
|
||||
context.close();
|
||||
if(!selected) container.classList.add('!border-light-red', 'dark:!border-dark-red');
|
||||
const redrawn = render(option.item)?.container;
|
||||
if(redrawn)
|
||||
{
|
||||
context.container.replaceChildren(redrawn);
|
||||
tree.push(option);
|
||||
}
|
||||
};
|
||||
const back = () => {
|
||||
tree.pop();
|
||||
const last = tree.slice(-1)[0];
|
||||
|
||||
last ? context.container.replaceChildren(last.container ?? last.dom) : context.container.replaceChildren(...optionElements.filter(e => !!e).map(e => e.dom));
|
||||
};
|
||||
const render = (option: Option<T>): StoredOption<T> | undefined => {
|
||||
if(option === undefined)
|
||||
return;
|
||||
|
||||
if(Array.isArray(option.value))
|
||||
{
|
||||
const children = option.value.map(render);
|
||||
|
||||
const stored = { item: option, dom: dom('div', { listeners: { click: () => progress(stored) }, class: ['hover:bg-light-30 dark:hover:bg-dark-30 text-light-70 dark:text-dark-70 hover:text-light-100 dark:hover:text-dark-100 py-1 px-2 cursor-pointer flex justify-between items-center', settings?.class?.option] }, [ text(option.text), icon('radix-icons:caret-right', { width: 20, height: 20 }) ]), container: div('flex flex-1 flex-col', [div('flex flex-row justify-between items-center text-light-100 dark:text-dark-100 py-1 px-2 text-sm select-none sticky top-0 bg-light-20 dark:bg-dark-20 font-semibold', [button(icon('radix-icons:caret-left', { width: 16, height: 16 }), back, 'p-px'), text(option.text), div()]), div('flex flex-col flex-1', children.map(e => e?.dom))]), children };
|
||||
return stored;
|
||||
}
|
||||
else
|
||||
{
|
||||
return { item: option, dom: dom('div', { listeners: { click: () => {
|
||||
select.value = option.text;
|
||||
settings?.change && settings?.change(option.value as T);
|
||||
selected = true;
|
||||
hide();
|
||||
} }, class: ['hover:bg-light-30 dark:hover:bg-dark-30 text-light-70 dark:text-dark-70 hover:text-light-100 dark:hover:text-dark-100 py-1 px-2 cursor-pointer', settings?.class?.option] }, [ text(option.text) ]) };
|
||||
}
|
||||
}
|
||||
const filter = (value: string, option?: StoredOption<T>): HTMLElement[] => {
|
||||
if(option && option.children !== undefined)
|
||||
{
|
||||
return option.children.flatMap(e => filter(value, e));
|
||||
}
|
||||
else if(option && option.item)
|
||||
{
|
||||
return option.item.text.toLowerCase().normalize().includes(value) ? [ option.dom ] : [];
|
||||
}
|
||||
else
|
||||
{
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
let disabled = settings?.disabled ?? false;
|
||||
const optionElements = options.map((e, i) => {
|
||||
if(e === undefined)
|
||||
return;
|
||||
|
||||
return { item: e, dom: dom('div', { listeners: { click: () => {
|
||||
let text, value;
|
||||
if(typeof e === 'string')
|
||||
{
|
||||
text = value = e;
|
||||
}
|
||||
else
|
||||
{
|
||||
text = e.text;
|
||||
value = e.value;
|
||||
}
|
||||
|
||||
select.value = text;
|
||||
settings?.change && settings?.change(value);
|
||||
selected = true;
|
||||
hide();
|
||||
} }, class: ['hover:bg-light-30 dark:hover:bg-dark-30 text-light-70 dark:text-dark-70 hover:text-light-100 dark:hover:text-dark-100 py-1 px-2 cursor-pointer', settings?.class?.option] }, [ text((e as { text: string } | undefined)?.text ?? e as string) ]) };
|
||||
});
|
||||
const optionElements = options.map(render);
|
||||
const select = dom('input', { listeners: { focus: show, input: () => {
|
||||
context && context?.container.replaceChildren(...optionElements.filter(e => {
|
||||
if(e === undefined)
|
||||
return false;
|
||||
if(typeof e.item === 'string')
|
||||
return (e.item as string).toLowerCase().includes(select.value.toLowerCase());
|
||||
return e.item.text.toLowerCase().includes(select.value.toLowerCase());
|
||||
}).map(e => e!.dom));
|
||||
context && select.value ? context.container.replaceChildren(...optionElements.flatMap(e => filter(select.value.toLowerCase().trim().normalize(), e))) : context.container.replaceChildren(...optionElements.filter(e => !!e).map(e => e.dom));
|
||||
selected = false;
|
||||
if(!context || !context.container.parentElement) container.classList.add('!border-light-red', 'dark:!border-dark-red')
|
||||
} }, attributes: { type: 'text', }, class: 'flex-1 outline-none px-3 leading-none appearance-none py-1 bg-light-25 dark:bg-dark-25 disabled:bg-light-20 dark:disabled:bg-dark-20' });
|
||||
select.value = textFromValue(settings?.defaultValue);
|
||||
settings?.defaultValue && Tree.each(options, 'value', (item) => { if(item.value === settings?.defaultValue) select.value = item.text });
|
||||
|
||||
const container = dom('label', { class: ['inline-flex outline-none px-3 items-center justify-between text-sm font-semibold leading-none gap-1 bg-light-25 dark:bg-dark-25 border border-light-35 dark:border-dark-35 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 hover:border-light-50 dark:hover:border-dark-50 data-[disabled]:border-light-25 dark:data-[disabled]:border-dark-25 data-[disabled]:bg-light-20 dark: data-[disabled]:bg-dark-20', settings?.class?.container] }, [ select, icon('radix-icons:caret-down') ]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user