@nakashim/tp-custom 0.1.6

package/dist/lib/tp-plugin/dynamic-list-blade-plugin.js

@@ -0,0 +1,719 @@
+import { BladeApi, BladeController, createPlugin, parseRecord } from '@tweakpane/core';
+function sanitizeListStyle(style) {
+    return style === 'ul' ? 'ul' : 'ol';
+}
+function normalizeMaxItems(value) {
+    if (!Number.isFinite(value)) {
+        return undefined;
+    }
+    const normalized = Math.floor(value);
+    if (normalized < 1) {
+        return undefined;
+    }
+    return normalized;
+}
+function sanitizeOverflowMode(mode) {
+    return mode === 'reject' ? 'reject' : 'drop-oldest';
+}
+function clampItemsToMax(items, maxItems, keepNewest = true) {
+    if (!Number.isFinite(maxItems)) {
+        return items;
+    }
+    const max = maxItems;
+    if (items.length <= max) {
+        return items;
+    }
+    return keepNewest ? items.slice(items.length - max) : items.slice(0, max);
+}
+function normalizeRows(value) {
+    if (!Number.isFinite(value)) {
+        return undefined;
+    }
+    const normalized = Math.floor(value);
+    if (normalized < 1) {
+        return undefined;
+    }
+    return Math.min(24, normalized);
+}
+class DynamicListBladeView {
+    element;
+    labelElement_;
+    listContainer_;
+    listElement_;
+    onListClick_;
+    itemRows_;
+    emptyItemElement_;
+    items_;
+    listStyle_;
+    rows_;
+    onMoveUp_;
+    onMoveDown_;
+    onRemove_;
+    allowRemove_;
+    allowReorder_;
+    inlineLabel_;
+    showItemTooltip_;
+    fullWidth_;
+    constructor(doc, config) {
+        this.items_ = [...config.items];
+        this.listStyle_ = config.listStyle;
+        this.onMoveUp_ = config.onMoveUp;
+        this.onMoveDown_ = config.onMoveDown;
+        this.onRemove_ = config.onRemove;
+        this.allowRemove_ = config.allowRemove;
+        this.allowReorder_ = config.allowReorder;
+        this.inlineLabel_ = config.inlineLabel;
+        this.showItemTooltip_ = config.showItemTooltip;
+        this.fullWidth_ = config.fullWidth;
+        this.rows_ = normalizeRows(config.rows);
+        this.itemRows_ = [];
+        this.emptyItemElement_ = null;
+        this.onListClick_ = (ev) => {
+            const target = ev.target;
+            if (!target)
+                return;
+            const button = target.closest('.tp-dynlistblade_btn');
+            if (!button || button.disabled)
+                return;
+            const item = button.closest('.tp-dynlistblade_i');
+            if (!item)
+                return;
+            const index = Number(item.dataset.index);
+            if (!Number.isInteger(index))
+                return;
+            const action = button.dataset.action;
+            if (action === 'up') {
+                this.onMoveUp_(index);
+            }
+            else if (action === 'down') {
+                this.onMoveDown_(index);
+            }
+            else if (action === 'remove') {
+                this.onRemove_(index);
+            }
+        };
+        const root = doc.createElement('div');
+        root.className = 'tp-dynlistblade';
+        root.classList.toggle('tp-dynlistblade-inline', this.inlineLabel_);
+        root.classList.toggle('tp-dynlistblade-full', this.fullWidth_);
+        const label = doc.createElement('div');
+        label.className = 'tp-dynlistblade_l';
+        label.textContent = config.label ?? 'Dynamic List';
+        root.appendChild(label);
+        this.labelElement_ = label;
+        const container = doc.createElement('div');
+        container.className = 'tp-dynlistblade_c';
+        root.appendChild(container);
+        this.listContainer_ = container;
+        this.listElement_ = this.createListElement_(doc, this.listStyle_);
+        this.listContainer_.appendChild(this.listElement_);
+        this.element = root;
+        this.applyRows_();
+        this.render_();
+    }
+    get items() {
+        return [...this.items_];
+    }
+    set items(next) {
+        this.items_ = [...next];
+        this.render_();
+    }
+    setOptions(next) {
+        if (typeof next.allowRemove === 'boolean') {
+            this.allowRemove_ = next.allowRemove;
+        }
+        if (typeof next.allowReorder === 'boolean') {
+            this.allowReorder_ = next.allowReorder;
+        }
+        if (typeof next.showItemTooltip === 'boolean') {
+            this.showItemTooltip_ = next.showItemTooltip;
+        }
+        this.render_();
+    }
+    set inlineLabel(next) {
+        this.inlineLabel_ = Boolean(next);
+        this.element.classList.toggle('tp-dynlistblade-inline', this.inlineLabel_);
+    }
+    set fullWidth(next) {
+        this.fullWidth_ = Boolean(next);
+        this.element.classList.toggle('tp-dynlistblade-full', this.fullWidth_);
+    }
+    get rows() {
+        return this.rows_;
+    }
+    set rows(next) {
+        this.rows_ = normalizeRows(next);
+        this.applyRows_();
+    }
+    set label(next) {
+        this.labelElement_.textContent = next;
+    }
+    get listStyle() {
+        return this.listStyle_;
+    }
+    set listStyle(next) {
+        const normalized = sanitizeListStyle(next);
+        if (normalized === this.listStyle_) {
+            return;
+        }
+        this.listStyle_ = normalized;
+        const doc = this.element.ownerDocument;
+        const newList = this.createListElement_(doc, normalized);
+        this.listContainer_.replaceChild(newList, this.listElement_);
+        this.listElement_ = newList;
+        this.render_();
+    }
+    createListElement_(doc, style) {
+        const list = doc.createElement(style);
+        list.className = `tp-dynlistblade_list tp-dynlistblade_list-${style}`;
+        list.addEventListener('click', this.onListClick_);
+        return list;
+    }
+    applyRows_() {
+        if (!Number.isFinite(this.rows_)) {
+            this.element.classList.remove('tp-dynlistblade-has-rows');
+            this.element.style.removeProperty('--tp-dynlistblade-rows');
+            this.element.style.removeProperty('--tp-dynlistblade-rows-gap');
+            return;
+        }
+        const rows = this.rows_;
+        this.element.classList.add('tp-dynlistblade-has-rows');
+        this.element.style.setProperty('--tp-dynlistblade-rows', String(rows));
+        this.element.style.setProperty('--tp-dynlistblade-rows-gap', String(Math.max(0, rows - 1)));
+    }
+    render_() {
+        if (this.items_.length === 0) {
+            this.ensureEmptyState_();
+            return;
+        }
+        this.clearEmptyState_();
+        this.ensureRowCount_(this.items_.length);
+        this.items_.forEach((text, index) => {
+            const row = this.itemRows_[index];
+            row.item.dataset.index = String(index);
+            row.text.textContent = text;
+            if (this.showItemTooltip_) {
+                row.text.title = text;
+            }
+            else {
+                row.text.removeAttribute('title');
+            }
+            const showActions = this.allowRemove_ || this.allowReorder_;
+            row.actions.style.display = showActions ? '' : 'none';
+            row.upButton.style.display = this.allowReorder_ ? '' : 'none';
+            row.downButton.style.display = this.allowReorder_ ? '' : 'none';
+            row.removeButton.style.display = this.allowRemove_ ? '' : 'none';
+            row.upButton.disabled = !this.allowReorder_ || index === 0;
+            row.downButton.disabled = !this.allowReorder_ || index === this.items_.length - 1;
+            row.removeButton.disabled = !this.allowRemove_;
+            this.listElement_.appendChild(row.item);
+        });
+    }
+    ensureEmptyState_() {
+        if (!this.emptyItemElement_) {
+            const emptyItem = this.element.ownerDocument.createElement('li');
+            emptyItem.className = 'tp-dynlistblade_i tp-dynlistblade_i-empty';
+            const emptyRow = this.element.ownerDocument.createElement('div');
+            emptyRow.className = 'tp-dynlistblade_row tp-dynlistblade_row-empty';
+            emptyItem.appendChild(emptyRow);
+            const emptyText = this.element.ownerDocument.createElement('span');
+            emptyText.className = 'tp-dynlistblade_t tp-dynlistblade_t-empty';
+            emptyText.textContent = 'Empty';
+            emptyRow.appendChild(emptyText);
+            this.emptyItemElement_ = emptyItem;
+        }
+        this.itemRows_.forEach((row) => {
+            if (row.item.parentElement === this.listElement_) {
+                this.listElement_.removeChild(row.item);
+            }
+        });
+        if (this.emptyItemElement_.parentElement !== this.listElement_) {
+            this.listElement_.appendChild(this.emptyItemElement_);
+        }
+    }
+    clearEmptyState_() {
+        if (this.emptyItemElement_ && this.emptyItemElement_.parentElement === this.listElement_) {
+            this.listElement_.removeChild(this.emptyItemElement_);
+        }
+    }
+    ensureRowCount_(count) {
+        while (this.itemRows_.length < count) {
+            this.itemRows_.push(this.createItemRow_());
+        }
+        while (this.itemRows_.length > count) {
+            const removed = this.itemRows_.pop();
+            if (!removed)
+                break;
+            if (removed.item.parentElement === this.listElement_) {
+                this.listElement_.removeChild(removed.item);
+            }
+        }
+    }
+    createItemRow_() {
+        const item = this.element.ownerDocument.createElement('li');
+        item.className = 'tp-dynlistblade_i';
+        const row = this.element.ownerDocument.createElement('div');
+        row.className = 'tp-dynlistblade_row';
+        item.appendChild(row);
+        const text = this.element.ownerDocument.createElement('span');
+        text.className = 'tp-dynlistblade_t';
+        row.appendChild(text);
+        const actions = this.element.ownerDocument.createElement('span');
+        actions.className = 'tp-dynlistblade_a';
+        row.appendChild(actions);
+        const upButton = this.createActionButton_('▴', 'Move up', 'up');
+        const downButton = this.createActionButton_('▾', 'Move down', 'down');
+        const removeButton = this.createActionButton_('×', 'Remove', 'remove');
+        actions.appendChild(upButton);
+        actions.appendChild(downButton);
+        actions.appendChild(removeButton);
+        return { item, text, actions, upButton, downButton, removeButton };
+    }
+    createActionButton_(text, title, action) {
+        const button = this.element.ownerDocument.createElement('button');
+        button.type = 'button';
+        button.className = `tp-dynlistblade_btn tp-dynlistblade_btn-${action}`;
+        button.dataset.action = action;
+        button.textContent = text;
+        button.title = title;
+        return button;
+    }
+}
+class DynamicListBladeController extends BladeController {
+    items_;
+    rows_;
+    maxItems_;
+    overflowMode_;
+    allowRemove_;
+    allowReorder_;
+    inlineLabel_;
+    showItemTooltip_;
+    fullWidth_;
+    constructor(doc, config) {
+        const initialItems = clampItemsToMax([...config.items], config.maxItems, true);
+        const view = new DynamicListBladeView(doc, {
+            label: config.label,
+            listStyle: config.listStyle,
+            items: initialItems,
+            rows: normalizeRows(config.rows),
+            onMoveUp: (index) => this.moveUp(index),
+            onMoveDown: (index) => this.moveDown(index),
+            onRemove: (index) => this.remove(index),
+            allowRemove: config.allowRemove,
+            allowReorder: config.allowReorder,
+            inlineLabel: config.inlineLabel,
+            showItemTooltip: config.showItemTooltip,
+            fullWidth: config.fullWidth,
+        });
+        super({
+            blade: config.blade,
+            view,
+            viewProps: config.viewProps,
+        });
+        this.items_ = initialItems;
+        this.rows_ = normalizeRows(config.rows);
+        this.maxItems_ = normalizeMaxItems(config.maxItems);
+        this.overflowMode_ = sanitizeOverflowMode(config.overflowMode);
+        this.allowRemove_ = config.allowRemove;
+        this.allowReorder_ = config.allowReorder;
+        this.inlineLabel_ = config.inlineLabel;
+        this.showItemTooltip_ = config.showItemTooltip;
+        this.fullWidth_ = config.fullWidth;
+    }
+    get items() {
+        return [...this.items_];
+    }
+    get rows() {
+        return this.rows_;
+    }
+    set rows(next) {
+        this.rows_ = normalizeRows(next);
+        this.view.rows = this.rows_;
+    }
+    set items(next) {
+        this.items_ = clampItemsToMax([...next], this.maxItems_, true);
+        this.view.items = this.items_;
+    }
+    get maxItems() {
+        return this.maxItems_;
+    }
+    set maxItems(next) {
+        this.maxItems_ = normalizeMaxItems(next);
+        this.items_ = clampItemsToMax(this.items_, this.maxItems_, true);
+        this.view.items = this.items_;
+    }
+    get overflowMode() {
+        return this.overflowMode_;
+    }
+    set overflowMode(next) {
+        this.overflowMode_ = sanitizeOverflowMode(next);
+    }
+    get allowRemove() {
+        return this.allowRemove_;
+    }
+    set allowRemove(next) {
+        this.allowRemove_ = Boolean(next);
+        this.view.setOptions({ allowRemove: this.allowRemove_ });
+    }
+    get allowReorder() {
+        return this.allowReorder_;
+    }
+    set allowReorder(next) {
+        this.allowReorder_ = Boolean(next);
+        this.view.setOptions({ allowReorder: this.allowReorder_ });
+    }
+    get showItemTooltip() {
+        return this.showItemTooltip_;
+    }
+    set showItemTooltip(next) {
+        this.showItemTooltip_ = Boolean(next);
+        this.view.setOptions({ showItemTooltip: this.showItemTooltip_ });
+    }
+    get inlineLabel() {
+        return this.inlineLabel_;
+    }
+    set inlineLabel(next) {
+        this.inlineLabel_ = Boolean(next);
+        this.view.inlineLabel = this.inlineLabel_;
+    }
+    get fullWidth() {
+        return this.fullWidth_;
+    }
+    set fullWidth(next) {
+        this.fullWidth_ = Boolean(next);
+        this.view.fullWidth = this.fullWidth_;
+    }
+    get listStyle() {
+        return this.view.listStyle;
+    }
+    set listStyle(next) {
+        this.view.listStyle = next;
+    }
+    setLabel(next) {
+        this.view.label = next;
+    }
+    add(item) {
+        if (Number.isFinite(this.maxItems_)) {
+            const max = this.maxItems_;
+            if (this.items_.length >= max) {
+                if (this.overflowMode_ === 'reject') {
+                    return false;
+                }
+                this.items_.shift();
+            }
+        }
+        this.items_.push(item);
+        this.view.items = this.items_;
+        return true;
+    }
+    remove(index) {
+        if (index < 0 || index >= this.items_.length)
+            return;
+        this.items_.splice(index, 1);
+        this.view.items = this.items_;
+    }
+    moveUp(index) {
+        if (index <= 0 || index >= this.items_.length)
+            return;
+        const tmp = this.items_[index - 1];
+        this.items_[index - 1] = this.items_[index];
+        this.items_[index] = tmp;
+        this.view.items = this.items_;
+    }
+    moveDown(index) {
+        if (index < 0 || index >= this.items_.length - 1)
+            return;
+        const tmp = this.items_[index + 1];
+        this.items_[index + 1] = this.items_[index];
+        this.items_[index] = tmp;
+        this.view.items = this.items_;
+    }
+}
+export class DynamicListBladeApi extends BladeApi {
+    get items() {
+        return this.controller.items;
+    }
+    get rows() {
+        return this.controller.rows;
+    }
+    set rows(next) {
+        this.controller.rows = next;
+    }
+    set items(next) {
+        this.controller.items = next.map((v) => String(v));
+    }
+    get maxItems() {
+        return this.controller.maxItems;
+    }
+    set maxItems(next) {
+        this.controller.maxItems = next;
+    }
+    get overflowMode() {
+        return this.controller.overflowMode;
+    }
+    set overflowMode(next) {
+        this.controller.overflowMode = sanitizeOverflowMode(next);
+    }
+    get allowRemove() {
+        return this.controller.allowRemove;
+    }
+    set allowRemove(next) {
+        this.controller.allowRemove = Boolean(next);
+    }
+    get allowReorder() {
+        return this.controller.allowReorder;
+    }
+    set allowReorder(next) {
+        this.controller.allowReorder = Boolean(next);
+    }
+    get inlineLabel() {
+        return this.controller.inlineLabel;
+    }
+    set inlineLabel(next) {
+        this.controller.inlineLabel = Boolean(next);
+    }
+    get showItemTooltip() {
+        return this.controller.showItemTooltip;
+    }
+    set showItemTooltip(next) {
+        this.controller.showItemTooltip = Boolean(next);
+    }
+    get fullWidth() {
+        return this.controller.fullWidth;
+    }
+    set fullWidth(next) {
+        this.controller.fullWidth = Boolean(next);
+    }
+    get listStyle() {
+        return this.controller.listStyle;
+    }
+    set listStyle(next) {
+        this.controller.listStyle = sanitizeListStyle(next);
+    }
+    setLabel(next) {
+        this.controller.setLabel(String(next));
+    }
+    addItem(text) {
+        return this.controller.add(String(text));
+    }
+    removeItem(index) {
+        this.controller.remove(index);
+    }
+    moveUp(index) {
+        this.controller.moveUp(index);
+    }
+    moveDown(index) {
+        this.controller.moveDown(index);
+    }
+}
+const DynamicListBladePlugin = createPlugin({
+    id: 'dynamiclistblade',
+    type: 'blade',
+    accept(params) {
+        const result = parseRecord(params, (p) => ({
+            view: p.required.constant('dynamiclistblade'),
+            label: p.optional.string,
+            listStyle: p.optional.custom((value) => value === 'ul' || value === 'ol' ? value : undefined),
+            items: p.optional.array(p.required.string),
+            rows: p.optional.number,
+            maxItems: p.optional.number,
+            overflowMode: p.optional.custom((value) => value === 'reject' || value === 'drop-oldest' ? value : undefined),
+            allowRemove: p.optional.boolean,
+            allowReorder: p.optional.boolean,
+            inlineLabel: p.optional.boolean,
+            showItemTooltip: p.optional.boolean,
+            fullWidth: p.optional.boolean,
+        }));
+        if (!result) {
+            return null;
+        }
+        return {
+            params: {
+                ...result,
+                listStyle: sanitizeListStyle(result.listStyle),
+                items: result.items ?? [],
+                rows: normalizeRows(result.rows),
+                maxItems: normalizeMaxItems(result.maxItems),
+                overflowMode: sanitizeOverflowMode(result.overflowMode),
+                allowRemove: result.allowRemove ?? true,
+                allowReorder: result.allowReorder ?? true,
+                inlineLabel: result.inlineLabel ?? false,
+                showItemTooltip: result.showItemTooltip ?? false,
+                fullWidth: result.fullWidth ?? false,
+            },
+        };
+    },
+    controller(args) {
+        return new DynamicListBladeController(args.document, {
+            blade: args.blade,
+            viewProps: args.viewProps,
+            label: args.params.label,
+            listStyle: sanitizeListStyle(args.params.listStyle),
+            items: args.params.items ?? [],
+            rows: normalizeRows(args.params.rows),
+            maxItems: normalizeMaxItems(args.params.maxItems),
+            overflowMode: sanitizeOverflowMode(args.params.overflowMode),
+            allowRemove: args.params.allowRemove ?? true,
+            allowReorder: args.params.allowReorder ?? true,
+            inlineLabel: args.params.inlineLabel ?? false,
+            showItemTooltip: args.params.showItemTooltip ?? false,
+            fullWidth: args.params.fullWidth ?? false,
+        });
+    },
+    api(args) {
+        if (!(args.controller instanceof DynamicListBladeController)) {
+            return null;
+        }
+        return new DynamicListBladeApi(args.controller);
+    },
+});
+export const DynamicListBladePluginBundle = {
+    id: 'dynamiclistblade-bundle',
+    plugins: [DynamicListBladePlugin],
+    css: `
+    .tp-dynlistblade {
+      padding-inline: var(--tp-c-container-padding-inline);
+    }
+    .tp-dynlistblade.tp-dynlistblade-inline {
+      display: flex;
+      align-items: center;
+      padding-inline: var(--tp-c-container-padding-inline);
+    }
+    .tp-dynlistblade.tp-dynlistblade-inline .tp-dynlistblade_l {
+      flex: 1;
+      flex-basis: var(--tp-c-base-label-flex-basis);
+      padding-inline: 0 var(--tp-c-container-padding-inline);
+    }
+    .tp-dynlistblade.tp-dynlistblade-inline .tp-dynlistblade_c {
+      flex-basis: var(--tp-c-base-value-flex-basis);
+      align-self: flex-start;
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: auto;
+    }
+    .tp-dynlistblade.tp-dynlistblade-inline .tp-dynlistblade_list {
+      margin: 0;
+    }
+    .tp-dynlistblade.tp-dynlistblade-full .tp-dynlistblade_list {
+      margin: 0;
+    }
+    .tp-dynlistblade.tp-dynlistblade-full .tp-dynlistblade_l {
+      display: none;
+    }
+    .tp-dynlistblade_l {
+      color: var(--tp-label-foreground-color);
+      padding-block: var(--tp-c-textarea-padding-block);
+    }
+    .tp-dynlistblade_list {
+      border-radius: var(--tp-c-base-border-radius);
+      background: var(--tp-monitor-background-color);
+      margin: var(--tp-c-container-vertical-gap) 0 0;
+      padding-inline: var(--tp-c-container-padding-inline);
+      padding-block: var(--tp-c-textarea-padding-block);
+      display: flex;
+      flex-direction: column;
+      list-style: none;
+    }
+    .tp-dynlistblade.tp-dynlistblade-has-rows .tp-dynlistblade_list {
+      height: calc(
+        14px * var(--tp-dynlistblade-rows, 6) +
+          3px * var(--tp-dynlistblade-rows-gap, 5)
+      );
+      overflow: auto;
+    }
+    .tp-dynlistblade_list::-webkit-scrollbar {
+      width: 10px;
+    }
+    .tp-dynlistblade_list::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 999px;
+    }
+    .tp-dynlistblade_list::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 999px;
+      border: 2px solid transparent;
+      background-clip: padding-box;
+    }
+    .tp-dynlistblade_list {
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+    }
+    .tp-dynlistblade_i {
+      min-width: 0;
+    }
+    .tp-dynlistblade_i::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 1px;
+      border-radius: 0.5px;
+      background: rgba(255, 255, 255, 0.03);
+      margin-block: 1px;
+    }
+    .tp-dynlistblade_i:last-child::after {
+      display: none;
+    }
+    .tp-dynlistblade_row {
+      display: inline-flex;
+      align-items: center;
+      vertical-align: top;
+      width: 100%;
+    }
+    .tp-dynlistblade_row::before {
+      content: '';
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.2);
+      display: inline-block;
+      min-width: 10px;
+      margin-right: 4px;
+    }
+    .tp-dynlistblade_list-ol .tp-dynlistblade_row::before {
+      content: counter(list-item) '';
+    }
+    .tp-dynlistblade_list-ul .tp-dynlistblade_row::before {
+      content: '-';
+    }
+    .tp-dynlistblade_t {
+      width: 100%;
+      flex: 1;
+      color: var(--tp-input-foreground-color);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .tp-dynlistblade_list-ol .tp-dynlistblade_row-empty::before {
+      content: '0';
+    }
+    .tp-dynlistblade_t-empty {
+      color: rgba(255, 255, 255, 0.2);
+    }
+    .tp-dynlistblade_a {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      overflow: hidden;
+    }
+    .tp-dynlistblade_btn {
+      appearance: none;
+      border: none;
+      background: transparent;
+      color: var(--tp-label-foreground-color);
+      width: 14px;
+      height: 14px;
+      border-radius: var(--tp-c-base-border-radius);
+      cursor: pointer;
+      padding: 0;
+      line-height: 1;
+      font-size: 13px;
+    }
+    .tp-dynlistblade_btn:hover {
+      background: var(--tp-input-background-color-hover);
+      color: var(--tp-input-foreground-color);
+    }
+    .tp-dynlistblade_btn:disabled {
+      opacity: 0.3;
+      cursor: default;
+    }
+  `,
+};
+//# sourceMappingURL=dynamic-list-blade-plugin.js.map