hirohe/tweakpane-plugin-search-list

plugin for tweakpane, searchable select list

Tweakpane plugin Search list

This is a plugin for Tweakpane.

add searchable select list for tweakpane.

required version [email protected]

Install

npm i tweakpane-plugin-search-list
# or
yarn add tweakpane-plugin-search-list

Usage

import { Pane } from 'tweakpane';
import TweakpaneSearchListPlugin from 'tweakpane-plugin-search-list';

const pane = new Pane();
pane.registerPlugin(TweakpaneSearchListPlugin);

const data = { language: 'JavaScript' };
pane.addInput(data, 'language', {
  // use search-list
  view: 'search-list',
  options: {
    JavaScript: 'JavaScript',
    TypeScript: 'TypeScript',
    Java: 'Java',
    Go: 'Go',
    Dart: 'Dart',
    'C++': 'C++',
    'Object C': 'Object C',
    'C#': 'C#',
    Python: 'Python'
  }
});
// ...

Options

pane.addInput(data, 'field', {
  view: 'search-list',
  options: {
    // ...
  },
  noDataText: 'no data',
  debounceDelay: 250,
});

param	description	type	default
noDataText	text to show if no options matched	string	'no data'
debounceDelay	delay time to apply on lodash.debounce, for debounce search	number	250

CSS variables

:root {
  --tp-plugin-select-box-bg-color: --input-background-color;
  --tp-plugin-select-no-data-color: #fff;
  --tp-plugin-select-option-bg-hover: rgb(129, 129, 129);
}

tweakpane-plugin-search-list's Issues

Strict peer dependencies

Hi there!

I'm interested in taking this Tweakpane plugin for a spin, but the strict peer dependencies would force me to use npm update --force or npm update --legacy-peer-deps in order to do so, because you've listed very specific versions for Lodash and Tweakpane as the library's peer dependencies.

I was hoping these could be loosened up with a caret:

  "peerDependencies": {
    "lodash": "^4.17.21",
    "tweakpane": "^2.3.0"
  },

I expect semver well prevent any breakages here.

Cheers!

minimal dependencies requirements

using @popperjs/core increased plugin bundle size, considering remove popperjs