@lvce-editor/settings-view 1.19.0 → 1.21.0

package/dist/settingsViewWorkerMain.js

@@ -477,7 +477,8 @@ const splitLines = lines => {
   return lines.split(NewLine);
 };
 const getCurrentStack = () => {
-  const currentStack = joinLines(splitLines(new Error().stack || '').slice(2));
+  const stackLinesToSkip = 3;
+  const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
   return currentStack;
 };
 const getNewLineIndex = (string, startIndex = undefined) => {
@@ -748,6 +749,12 @@ const invokeAndTransfer = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, true);
 };
 
+class CommandNotFoundError extends Error {
+  constructor(command) {
+    super(`Command not found ${command}`);
+    this.name = 'CommandNotFoundError';
+  }
+}
 const commands = Object.create(null);
 const register = commandMap => {
   Object.assign(commands, commandMap);
@@ -758,7 +765,7 @@ const getCommand = key => {
 const execute = (command, ...args) => {
   const fn = getCommand(command);
   if (!fn) {
-    throw new Error(`command not found ${command}`);
+    throw new CommandNotFoundError(command);
   }
   return fn(...args);
 };
@@ -914,15 +921,14 @@ const terminate = () => {
   globalThis.close();
 };
 
-const isItemModified = (item, preferences) => {
-  return item.id in preferences;
-};
-const addModifiedProperty = (items, preferences) => {
-  return items.map(item => ({
-    ...item,
-    modified: isItemModified(item, preferences)
-  }));
+const filterBySearch = (items, searchValue) => {
+  if (!searchValue || !searchValue.trim()) {
+    return items;
+  }
+  const normalizedSearchValue = searchValue.toLowerCase().trim();
+  return items.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
 };
+
 const filterByTab = (items, tabs) => {
   const selectedTab = tabs.find(tab => tab.selected);
   if (!selectedTab) {
@@ -930,17 +936,37 @@ const filterByTab = (items, tabs) => {
   }
   return items.filter(item => item.category === selectedTab.id);
 };
-const filterBySearch = (items, searchValue) => {
-  if (!searchValue || !searchValue.trim()) {
-    return items;
-  }
-  const normalizedSearchValue = searchValue.toLowerCase().trim();
-  return items.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
+
+const isItemModified = (item, preferences) => {
+  return item.id in preferences;
 };
-const getFilteredItems = (items, tabs, searchValue = '', preferences) => {
+
+const validateSettings = (items, modifiedSettings, preferences) => {
+  return items.map(item => {
+    const value = preferences[item.id] ?? item.value;
+    const errorMessage = item.validate ? item.validate(value) : '';
+    const hasError = errorMessage.length > 0;
+    const modified = isItemModified(item, modifiedSettings);
+    return {
+      id: item.id,
+      heading: item.heading,
+      description: item.description,
+      type: item.type,
+      value: item.value,
+      category: item.category,
+      options: item.options,
+      modified,
+      errorMessage,
+      hasError
+    };
+  });
+};
+
+const getFilteredItems = (items, tabs, searchValue, modifiedSettings, preferences) => {
   const tabFilteredItems = filterByTab(items, tabs);
-  const itemsWithModifiedProperty = addModifiedProperty(tabFilteredItems, preferences);
-  return filterBySearch(itemsWithModifiedProperty, searchValue);
+  const searchFilteredItems = filterBySearch(tabFilteredItems, searchValue);
+  const validated = validateSettings(searchFilteredItems, modifiedSettings, preferences);
+  return validated;
 };
 
 const User = 1;
@@ -952,10 +978,11 @@ const clear$1 = state => {
   const {
     items,
     tabs,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   const newSearchValue = '';
-  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
   return {
     ...state,
     filteredItems,
@@ -994,6 +1021,8 @@ const create$1 = (id, uri, x, y, width, height) => {
     y,
     width,
     height,
+    deltaY: 0,
+    itemHeight: 100,
     tabs: [],
     items: [],
     searchValue: '',
@@ -1001,11 +1030,18 @@ const create$1 = (id, uri, x, y, width, height) => {
     preferences: {},
     inputSource: 0,
     scrollOffset: 0,
+    minLineY: 0,
+    maxLineY: 0,
+    visibleItems: [],
     filteredItemsCount: 0,
     history: [],
     historyIndex: -1,
     modifiedSettings: {},
-    focusSource: 0
+    focusSource: 0,
+    scrollBarMinHeight: 0,
+    scrollBarThumbHeight: 0,
+    scrollBarThumbTop: 0,
+    highlightsEnabled: false
   };
   set$1(id, state, state);
 };
@@ -1015,7 +1051,7 @@ const isEqual$4 = (oldState, newState) => {
 };
 
 const isEqual$3 = (oldState, newState) => {
-  return oldState.filteredItems === newState.filteredItems;
+  return oldState.filteredItems === newState.filteredItems && oldState.deltaY === newState.deltaY;
 };
 
 const isEqual$2 = (oldState, newState) => {
@@ -1065,10 +1101,12 @@ const diff2 = uid => {
   return diffResult;
 };
 
+const Group = 'group';
 const Tab$1 = 'tab';
 const TabList = 'tablist';
 const AriaRoles = {
   __proto__: null,
+  Group,
   Tab: Tab$1,
   TabList};
 const Viewlet$1 = 'Viewlet';
@@ -1096,7 +1134,7 @@ const P = 50;
 const Ul = 60;
 const Select$1 = 63;
 const Option = 64;
-const Label = 66;
+const Label$1 = 66;
 const VirtualDomElements = {
   __proto__: null,
   Aside,
@@ -1105,7 +1143,7 @@ const VirtualDomElements = {
   H1,
   H3,
   Input,
-  Label,
+  Label: Label$1,
   Option,
   P,
   Select: Select$1,
@@ -1164,10 +1202,11 @@ const handleClickTab = (state, name) => {
     items,
     tabs,
     searchValue,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   const updatedTabs = getUpdatedTabs(tabs, name);
-  const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, updatedTabs, searchValue, modifiedSettings, preferences);
   return {
     ...state,
     tabs: updatedTabs,
@@ -1241,9 +1280,10 @@ const handleInput = (state, value, inputSource = User) => {
     items,
     tabs,
     history,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
-  const filteredItems = getFilteredItems(items, tabs, value, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, value, modifiedSettings, preferences);
   const {
     newHistory,
     newHistoryIndex
@@ -1283,11 +1323,11 @@ const handleScroll = (state, scrollTop, inputSource = User) => {
   };
 };
 
-const getNewFilteredItems = (oldModifiedSetings, newModifiedSettings, items, tabs, searchValue, oldFilteredItems) => {
-  if (oldModifiedSetings === newModifiedSettings) {
+const getNewFilteredItems = (oldModifiedSetings, newModifiedSettings, items, tabs, searchValue, oldFilteredItems, oldPreferences, newPreferences) => {
+  if (oldModifiedSetings === newModifiedSettings && oldPreferences === newPreferences) {
     return oldFilteredItems;
   }
-  return getFilteredItems(items, tabs, searchValue, newModifiedSettings);
+  return getFilteredItems(items, tabs, searchValue, newModifiedSettings, newPreferences);
 };
 
 const getNewModifiedSettings = (modifiedSettings, name) => {
@@ -1314,7 +1354,7 @@ const handleSettingUpdate = (state, name, value, inputSource) => {
     ...preferences,
     [name]: value
   };
-  const newFilteredItems = getNewFilteredItems(modifiedSettings, newModifiedSettings, items, tabs, searchValue, filteredItems);
+  const newFilteredItems = getNewFilteredItems(modifiedSettings, newModifiedSettings, items, tabs, searchValue, filteredItems, preferences, newPreferences);
   return {
     ...state,
     inputSource,
@@ -1352,6 +1392,88 @@ const handleSettingSelect = (state, name, value, source = User) => {
   return handleSettingUpdate(state, name, value, source);
 };
 
+const clamp = (value, min, max) => {
+  if (Number.isNaN(value)) {
+    return min;
+  }
+  if (max < min) {
+    return min;
+  }
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+
+const computeScrollBar = (height, totalItemCount, itemHeight, scrollOffset, scrollBarMinHeight) => {
+  const totalHeight = totalItemCount * itemHeight;
+  const scrollable = Math.max(0, totalHeight - height);
+  const thumbTrack = Math.max(0, height);
+  const thumbHeight = totalHeight > 0 ? Math.max(scrollBarMinHeight, Math.floor(height / Math.max(totalHeight, 1) * height)) : height;
+  const thumbMaxTop = Math.max(0, thumbTrack - thumbHeight);
+  const thumbTop = scrollable > 0 ? Math.min(thumbMaxTop, Math.floor(scrollOffset / scrollable * thumbMaxTop)) : 0;
+  return {
+    thumbHeight,
+    thumbTop
+  };
+};
+
+const computeVisibleItems = (items, height, scrollOffset, itemHeight) => {
+  const safeItemHeight = itemHeight <= 0 ? 1 : itemHeight;
+  const totalItems = items.length;
+  const minLineY = Math.max(0, Math.floor(scrollOffset / safeItemHeight));
+  const itemsPerViewport = Math.max(1, Math.ceil(height / safeItemHeight));
+  const maxLineY = Math.min(totalItems, minLineY + itemsPerViewport);
+  const visibleItems = items.slice(minLineY, maxLineY);
+  return {
+    visibleItems,
+    minLineY,
+    maxLineY
+  };
+};
+
+const handleWheel = (state, eventDeltaY, inputSource = User) => {
+  const {
+    deltaY: deltaY,
+    filteredItems,
+    height,
+    itemHeight = 1
+  } = state;
+  const itemCount = filteredItems.length;
+  const stepLimit = itemCount === 0 ? 10 : Number.POSITIVE_INFINITY;
+  const limitedEventDelta = Math.max(-stepLimit, Math.min(stepLimit, eventDeltaY));
+  const total = deltaY + limitedEventDelta;
+  const max = itemCount === 0 ? Number.POSITIVE_INFINITY : Math.max(0, itemCount * itemHeight);
+  const clampedDeltaY = clamp(total, 0, max);
+  const scrollOffset = clampedDeltaY;
+  const {
+    visibleItems,
+    minLineY,
+    maxLineY
+  } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
+  const {
+    scrollBarMinHeight
+  } = state;
+  const {
+    thumbHeight,
+    thumbTop
+  } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
+  return {
+    ...state,
+    deltaY: clampedDeltaY,
+    scrollOffset,
+    visibleItems,
+    minLineY,
+    maxLineY,
+    inputSource,
+    scrollBarThumbHeight: thumbHeight,
+    scrollBarThumbTop: thumbTop
+  };
+};
+
 const initialize = async () => {
   // TODO
 };
@@ -1451,6 +1573,11 @@ const sendMessagePortToEditorWorker = async (port, rpcId) => {
   // @ts-ignore
   await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
 };
+const sendMessagePortToErrorWorker = async (port, rpcId) => {
+  const command = 'Errors.handleMessagePort';
+  // @ts-ignore
+  await invokeAndTransfer$3('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
+};
 const sendMessagePortToMarkdownWorker = async (port, rpcId) => {
   const command = 'Markdown.handleMessagePort';
   // @ts-ignore
@@ -1646,6 +1773,14 @@ const getAllPreferences = async () => {
   // @ts-ignore
   return invoke$3('Preferences.getAll');
 };
+const showSaveFilePicker = async () => {
+  // @ts-ignore
+  return invoke$3('FilePicker.showSaveFilePicker');
+};
+const getLogsDir = async () => {
+  // @ts-ignore
+  return invoke$3('PlatformPaths.getLogsDir');
+};
 const RendererWorker = {
   __proto__: null,
   activateByEvent,
@@ -1671,6 +1806,7 @@ const RendererWorker = {
   getFolderSize,
   getIcons,
   getKeyBindings,
+  getLogsDir,
   getMarkdownDom,
   getNodeVersion,
   getPreference,
@@ -1700,6 +1836,7 @@ const RendererWorker = {
   searchFileHtml,
   searchFileMemory,
   sendMessagePortToEditorWorker,
+  sendMessagePortToErrorWorker,
   sendMessagePortToExtensionHostWorker,
   sendMessagePortToFileSystemWorker,
   sendMessagePortToMarkdownWorker,
@@ -1716,6 +1853,7 @@ const RendererWorker = {
   showContextMenu,
   showErrorDialog,
   showMessageBox,
+  showSaveFilePicker,
   uninstallExtension,
   unregisterWebViewInterceptor,
   writeClipBoardImage,
@@ -2851,7 +2989,21 @@ const getSettingItemsEditor = () => {
     description: fontSizeDescription(),
     type: Number$1,
     value: 15,
-    category: TextEditorTab
+    category: TextEditorTab,
+    validate(value) {
+      if (typeof value !== 'number') {
+        return 'font size must be of type number';
+      }
+      const minFontSize = 10;
+      const maxFontSize = 100;
+      if (value < minFontSize) {
+        return 'font size must be at least 10';
+      }
+      if (value > maxFontSize) {
+        return 'font size must not be greater than 100';
+      }
+      return '';
+    }
   }, {
     id: 'editor.fontFamily',
     heading: fontFamily(),
@@ -2935,7 +3087,21 @@ const getSettingItemsEditor = () => {
     description: tabSizeDescription(),
     type: Number$1,
     value: '4',
-    category: TextEditorTab
+    category: TextEditorTab,
+    validate(value) {
+      if (typeof value !== 'number') {
+        return 'font size must be of type number';
+      }
+      const minTabSize = 1;
+      const maxTabSize = 8;
+      if (value < minTabSize) {
+        return `tab size must be at least ${minTabSize}`;
+      }
+      if (value > maxTabSize) {
+        return `tab size must not be greater than ${maxTabSize}`;
+      }
+      return '';
+    }
   }, {
     id: 'editor.insertSpaces',
     heading: insertSpaces(),
@@ -3908,10 +4074,29 @@ const loadContent = async (state, savedState) => {
   const items = await getSettingItems();
   const preferences = await getPreferences();
   const modifiedSettings = getModifiedSettings(preferences);
-  const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, newTabs, searchValue, modifiedSettings, preferences);
+  const {
+    height,
+    itemHeight
+  } = state;
+  const {
+    visibleItems,
+    minLineY,
+    maxLineY
+  } = computeVisibleItems(filteredItems, height, scrollOffset, itemHeight);
+  const {
+    scrollBarMinHeight
+  } = state;
+  const {
+    thumbHeight,
+    thumbTop
+  } = computeScrollBar(height, filteredItems.length, itemHeight, scrollOffset, scrollBarMinHeight);
   return {
     ...state,
     filteredItems,
+    visibleItems,
+    minLineY,
+    maxLineY,
     inputSource: Script,
     items,
     modifiedSettings,
@@ -3920,7 +4105,9 @@ const loadContent = async (state, savedState) => {
     searchValue,
     tabs: newTabs,
     history,
-    historyIndex
+    historyIndex,
+    scrollBarThumbHeight: thumbHeight,
+    scrollBarThumbTop: thumbTop
   };
 };
 
@@ -3942,7 +4129,10 @@ const {
 } = ClassNames;
 const Badge = 'Badge';
 const CheckBox = 'CheckBox';
+const ErrorMessage = 'ErrorMessage';
 const InputBox = 'InputBox';
+const InputBoxError = 'InputBoxError';
+const Label = 'Label';
 const MaskIcon = 'MaskIcon';
 const MaskIconClearAll = 'MaskIconClearAll';
 const ModifiedIndicator = 'ModifiedIndicator';
@@ -3955,6 +4145,7 @@ const SettingsHeader = 'SettingsHeader';
 const SettingsInputWrapper = 'SettingsInputWrapper';
 const SettingsItem = 'SettingsItem';
 const SettingsItemCheckBox = 'SettingsItemCheckBox';
+const SettingsItemHeading = 'SettingsItemHeading';
 const SettingsItems = 'SettingsItems';
 const SettingsMain = 'SettingsMain';
 const SettingsNoResults = 'SettingsNoResults';
@@ -3983,6 +4174,7 @@ const HandleInput = 'handleInput';
 const HandleSettingInput = 'handleSettingInput';
 const HandleSettingChecked = 'handleSettingChecked';
 const HandleScroll = 'handleScroll';
+const HandleWheel = 'handleWheel';
 const HandleSettingSelect = 'handleSettingSelect';
 const HandleInputFocus = 'handleInputFocus';
 
@@ -4018,6 +4210,10 @@ const getSettingsInputDom = () => {
     type: VirtualDomElements.Input,
     className: mergeClassNames(InputBox, SettingsSearchInput, 'MultilineInputBox'),
     placeholder,
+    autocomplete: 'off',
+    autocorrect: 'off',
+    autocapitalize: 'off',
+    spellcheck: false,
     childCount: 0,
     name: SettingsSearch,
     onInput: HandleInput,
@@ -4025,11 +4221,11 @@ const getSettingsInputDom = () => {
   }];
 };
 
-const getChildCount = hasSearchValue => {
+const getChildCount$1 = hasSearchValue => {
   return hasSearchValue ? 3 : 2;
 };
 const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
-  const childCount = getChildCount(hasSearchValue);
+  const childCount = getChildCount$1(hasSearchValue);
   return [{
     type: VirtualDomElements.Div,
     className: SettingsHeader,
@@ -4041,62 +4237,70 @@ const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
   }, ...getSettingsInputDom(), ...getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue), ...getSettingsInputButtonsDom(hasSearchValue)];
 };
 
+const getErrorMessageDom = errorMessage => {
+  if (!errorMessage) {
+    return [];
+  }
+  return [{
+    type: VirtualDomElements.Div,
+    className: ErrorMessage,
+    childCount: 1
+  }, text(errorMessage)];
+};
+
 const getInputId = id => {
   return id.replaceAll('.', '\\.');
 };
 
+const parent = {
+  type: VirtualDomElements.H3,
+  className: SettingsItemHeading,
+  childCount: 1
+};
+const getItemHeadingDom = heading => {
+  return [parent, text(heading)];
+};
+
+const getItemLabelDom = (domId, label) => {
+  return [{
+    type: VirtualDomElements.Label,
+    htmlFor: domId,
+    childCount: 1,
+    className: Label
+  }, text(label)];
+};
+
 const getItemCheckBoxVirtualDom = item => {
   const {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
-  const isModified = modified || false;
   const domId = getInputId(id);
+  const checkBoxClassName = hasError ? `${CheckBox} ${InputBoxError}` : CheckBox;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group',
-    'data-modified': isModified
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
+    childCount: 2 + errorChildCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
+  }, ...getItemHeadingDom(heading), {
     type: VirtualDomElements.Div,
     className: SettingsItemCheckBox,
     childCount: 2
   }, {
     type: VirtualDomElements.Input,
-    className: CheckBox,
+    className: checkBoxClassName,
     childCount: 0,
     id: domId,
     inputType: 'checkbox',
     name: id,
     onChange: HandleSettingChecked
-  }, {
-    type: VirtualDomElements.Label,
-    childCount: 1,
-    htmlFor: domId
-  }, text(description)];
-};
-
-const parent = {
-  type: VirtualDomElements.H3,
-  childCount: 1
-};
-const getItemHeadingDom = heading => {
-  return [parent, text(heading)];
-};
-
-const getItemLabelDom = (domId, label) => {
-  return [{
-    type: VirtualDomElements.Label,
-    htmlFor: domId,
-    childCount: 1,
-    className: 'Label'
-  }, text(label)];
+  }, ...getItemLabelDom(domId, description), ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemColorVirtualDom = item => {
@@ -4104,30 +4308,33 @@ const getItemColorVirtualDom = item => {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
   const domId = getInputId(id);
-  const isModified = modified || false;
+  const colorInputClassName = hasError ? mergeClassNames('ColorInput', InputBoxError) : mergeClassNames('ColorInput');
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group',
-    'data-modified': isModified
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
   }, ...getItemHeadingDom(heading), {
     type: VirtualDomElements.Div,
     className: SettingsItemCheckBox,
     childCount: 2
   }, {
     type: VirtualDomElements.Input,
-    className: mergeClassNames('ColorInput'),
+    className: colorInputClassName,
     inputType: 'color',
     placeholder: colorValue(),
     childCount: 0,
     id: domId,
     name: id,
     onInput: HandleSettingInput
-  }, ...getItemLabelDom(domId, description)];
+  }, ...getItemLabelDom(domId, description), ...getErrorMessageDom(errorMessage)];
 };
 
 const getSettingsModifiedIndicatorDom = isModified => {
@@ -4141,32 +4348,46 @@ const getSettingsModifiedIndicatorDom = isModified => {
   }];
 };
 
+const getChildCount = (modified, hasError) => {
+  const modifiedChildCount = modified ? 1 : 0;
+  const errorChildCount = hasError ? 1 : 0;
+  const childCount = 3 + modifiedChildCount + errorChildCount;
+  return childCount;
+};
+const getInputClassName = hasError => {
+  if (hasError) {
+    return `${InputBox} ${InputBoxError}`;
+  }
+  return InputBox;
+};
 const getItemNumberVirtualDom = item => {
   const {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
   const domId = getInputId(id);
-  const isModified = modified || false;
-  const modifiedChildCount = isModified ? 1 : 0;
+  const inputClassName = getInputClassName(hasError);
+  const childCount = getChildCount(modified, hasError);
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3 + modifiedChildCount,
-    role: 'group',
-    'data-modified': isModified
-  }, ...getSettingsModifiedIndicatorDom(isModified), ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
+    childCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
+  }, ...getSettingsModifiedIndicatorDom(modified), ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
-    className: InputBox,
+    className: inputClassName,
     inputType: 'number',
     placeholder: numberValue(),
     childCount: 0,
     id: domId,
     name: id,
     onInput: HandleSettingInput
-  }];
+  }, ...getErrorMessageDom(errorMessage)];
 };
 
 const getOptionDom = option => {
@@ -4185,51 +4406,55 @@ const getItemSelectVirtualDom = item => {
   const {
     heading,
     description,
-    id
+    id,
+    options,
+    hasError,
+    errorMessage
   } = item;
-  const options = item.options || [];
   const domId = getInputId(id);
+  const selectClassName = hasError ? `${Select} ${InputBoxError}` : Select;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group'
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group
   }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Select,
-    className: Select,
-    childCount: options.length,
+    className: selectClassName,
+    childCount: options?.length || 0,
     id: domId,
     name: id,
     onChange: HandleSettingSelect
-  }, ...options.flatMap(getOptionDom)];
+  }, ...(options?.flatMap(getOptionDom) || []), ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemStringVirtualDom = item => {
   const {
     heading,
     description,
-    id
+    id,
+    hasError,
+    errorMessage
   } = item;
+  const domId = getInputId(id);
+  const inputClassName = hasError ? `${InputBox} ${InputBoxError}` : InputBox;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group'
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
-    type: VirtualDomElements.P,
-    childCount: 1
-  }, text(description), {
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group
+  }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
-    className: InputBox,
+    className: inputClassName,
     inputType: 'text',
     placeholder: stringValue(),
     childCount: 0,
+    id: domId,
     name: id,
     onInput: HandleSettingInput
-  }];
+  }, ...getErrorMessageDom(errorMessage)];
 };
 
 const getItemUnknownVirtualDom = () => {
@@ -4237,7 +4462,7 @@ const getItemUnknownVirtualDom = () => {
     type: VirtualDomElements.Div,
     className: SettingsItem,
     childCount: 1,
-    role: 'group'
+    role: AriaRoles.Group
   }, text(unknownSettingType())];
 };
 
@@ -4246,48 +4471,53 @@ const getItemUrlVirtualDom = item => {
     heading,
     description,
     id,
-    modified
+    modified,
+    hasError,
+    errorMessage
   } = item;
   const domId = getInputId(id);
-  const isModified = modified || false;
+  const inputClassName = hasError ? `${InputBox} ${InputBoxError}` : InputBox;
+  const errorChildCount = hasError ? 1 : 0;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3,
-    role: 'group',
-    'data-modified': isModified
+    childCount: 3 + errorChildCount,
+    role: AriaRoles.Group,
+    'data-modified': modified
   }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
-    className: InputBox,
+    className: inputClassName,
     inputType: 'url',
     placeholder: numberValue(),
     childCount: 0,
     id: domId,
     name: id,
     onInput: HandleSettingInput
-  }];
+  }, ...getErrorMessageDom(errorMessage)];
+};
+
+const getItemRender = type => {
+  switch (type) {
+    case Number$1:
+      return getItemNumberVirtualDom;
+    case Boolean$1:
+      return getItemCheckBoxVirtualDom;
+    case String:
+      return getItemStringVirtualDom;
+    case Enum:
+      return getItemSelectVirtualDom;
+    case Color:
+      return getItemColorVirtualDom;
+    case Url:
+      return getItemUrlVirtualDom;
+    default:
+      return getItemUnknownVirtualDom;
+  }
 };
 
 const getItemVirtualDom = item => {
-  if (item.type === Number$1) {
-    return getItemNumberVirtualDom(item);
-  }
-  if (item.type === Boolean$1) {
-    return getItemCheckBoxVirtualDom(item);
-  }
-  if (item.type === String) {
-    return getItemStringVirtualDom(item);
-  }
-  if (item.type === Enum) {
-    return getItemSelectVirtualDom(item);
-  }
-  if (item.type === Color) {
-    return getItemColorVirtualDom(item);
-  }
-  if (item.type === Url) {
-    return getItemUrlVirtualDom(item);
-  }
-  return getItemUnknownVirtualDom();
+  const fn = getItemRender(item.type);
+  return fn(item);
 };
 
 const getSettingsNoResultsDom = searchValue => {
@@ -4303,7 +4533,7 @@ const getSettingsNoResultsDom = searchValue => {
 };
 
 const getSettingsItemsDom = (items, searchValue) => {
-  if (items.length === 0 && searchValue.trim()) {
+  if (items.length === 0 && searchValue && searchValue.trim()) {
     return getSettingsNoResultsDom(searchValue);
   }
   return [{
@@ -4489,6 +4719,10 @@ const renderEventListeners = () => {
     name: HandleScroll,
     params: ['handleScroll', 'event.target.scrollTop'],
     passive: true
+  }, {
+    name: HandleWheel,
+    params: ['handleWheel', 'event.deltaY'],
+    passive: true
   }, {
     name: HandleSettingSelect,
     params: ['handleSettingSelect', 'event.target.name', 'event.target.value']
@@ -4527,14 +4761,15 @@ const useNextSearchValue = state => {
     historyIndex,
     items,
     tabs,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   if (history.length === 0 || historyIndex >= history.length - 1) {
     return state;
   }
   const newHistoryIndex = historyIndex + 1;
   const newSearchValue = history[newHistoryIndex];
-  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
   return {
     ...state,
     searchValue: newSearchValue,
@@ -4550,14 +4785,15 @@ const usePreviousSearchValue = state => {
     historyIndex,
     items,
     tabs,
-    modifiedSettings
+    modifiedSettings,
+    preferences
   } = state;
   if (history.length === 0 || historyIndex <= 0) {
     return state;
   }
   const newHistoryIndex = historyIndex - 1;
   const newSearchValue = history[newHistoryIndex];
-  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, modifiedSettings, preferences);
   return {
     ...state,
     searchValue: newSearchValue,
@@ -4579,6 +4815,7 @@ const commandMap = {
   'Settings.handleInputBlur': wrapCommand(handleInputBlur),
   'Settings.handleInput': wrapCommand(handleInput),
   'Settings.handleScroll': wrapCommand(handleScroll),
+  'Settings.handleWheel': wrapCommand(handleWheel),
   'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
   'Settings.handleSettingInput': wrapCommand(handleSettingInput),
   'Settings.handleInputFocus': wrapCommand(handleInputFocus),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/settings-view",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",