@lvce-editor/settings-view 1.8.0 → 1.10.0

package/dist/settingsViewWorkerMain.js

@@ -914,17 +914,33 @@ const terminate = () => {
   globalThis.close();
 };
 
-const getFilteredItems = (items, tabs, searchValue = '') => {
+const isItemModified = (item, preferences) => {
+  return item.id in preferences;
+};
+const addModifiedProperty = (items, preferences) => {
+  return items.map(item => ({
+    ...item,
+    modified: isItemModified(item, preferences)
+  }));
+};
+const filterByTab = (items, tabs) => {
   const selectedTab = tabs.find(tab => tab.selected);
   if (!selectedTab) {
     return items;
   }
-  const tabFilteredItems = items.filter(item => item.category === selectedTab.id);
-  if (!searchValue.trim()) {
-    return tabFilteredItems;
+  return items.filter(item => item.category === selectedTab.id);
+};
+const filterBySearch = (items, searchValue) => {
+  if (!searchValue || !searchValue.trim()) {
+    return items;
   }
   const normalizedSearchValue = searchValue.toLowerCase().trim();
-  return tabFilteredItems.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
+  return items.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
+};
+const getFilteredItems = (items, tabs, searchValue = '', preferences = {}) => {
+  const tabFilteredItems = filterByTab(items, tabs);
+  const itemsWithModifiedProperty = addModifiedProperty(tabFilteredItems, preferences);
+  return filterBySearch(itemsWithModifiedProperty, searchValue);
 };
 
 const User = 1;
@@ -933,10 +949,11 @@ const Script = 2;
 const clear$1 = state => {
   const {
     items,
-    tabs
+    tabs,
+    preferences
   } = state;
   const newSearchValue = '';
-  const filteredItems = getFilteredItems(items, tabs, newSearchValue);
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, preferences);
   return {
     ...state,
     searchValue: newSearchValue,
@@ -972,29 +989,35 @@ const create$1 = (id, uri, x, y, width, height) => {
     preferences: {},
     inputSource: 0,
     scrollOffset: 0,
-    filteredItemsCount: 0
+    filteredItemsCount: 0,
+    history: []
   };
   set$1(id, state, state);
 };
 
-const isEqual$2 = (oldState, newState) => {
+const isEqual$3 = (oldState, newState) => {
   return oldState.focus === newState.focus;
 };
 
-const isEqual$1 = (oldState, newState) => {
+const isEqual$2 = (oldState, newState) => {
   return oldState === newState;
 };
 
+const isEqual$1 = (oldState, newState) => {
+  return oldState.filteredItems === newState.filteredItems;
+};
+
 const RenderItems = 1;
 const RenderFocus = 2;
 const RenderValue = 3;
+const RenderSettingValues = 10;
 
 const isEqual = (oldState, newState) => {
   return newState.inputSource === User || oldState.searchValue === newState.searchValue;
 };
 
-const modules = [isEqual$2, isEqual$1, isEqual];
-const numbers = [RenderFocus, RenderItems, RenderValue];
+const modules = [isEqual$3, isEqual$2, isEqual, isEqual$1];
+const numbers = [RenderFocus, RenderItems, RenderValue, RenderSettingValues];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1044,10 +1067,11 @@ const handleClickTab = (state, name) => {
   const {
     items,
     tabs,
-    searchValue
+    searchValue,
+    preferences
   } = state;
   const updatedTabs = getUpdatedTabs(tabs, name);
-  const filteredItems = getFilteredItems(items, updatedTabs, searchValue);
+  const filteredItems = getFilteredItems(items, updatedTabs, searchValue, preferences);
   return {
     ...state,
     tabs: updatedTabs,
@@ -1058,9 +1082,10 @@ const handleClickTab = (state, name) => {
 const handleInput = (state, value) => {
   const {
     items,
-    tabs
+    tabs,
+    preferences
   } = state;
-  const filteredItems = getFilteredItems(items, tabs, value);
+  const filteredItems = getFilteredItems(items, tabs, value, preferences);
   return {
     ...state,
     searchValue: value,
@@ -1123,7 +1148,7 @@ const FormatOnSave = 'Format on Save';
 const FormatOnSaveDescription = 'Format code when saving';
 const NumberValue = 'number value';
 const SearchSettings = 'Search Settings';
-const SettingsContent = 'Settings Content';
+const SettingsContent$1 = 'Settings Content';
 const SidebarPosition = 'Sidebar Position';
 const SidebarPositionDescription = 'The position of the sidebar';
 const Telemetry = 'Telemetry';
@@ -1137,6 +1162,7 @@ const WindowSizeDescription = 'The default window size';
 const WindowTitle = 'Window Title';
 const WindowTitleDescription = 'The title shown in the window';
 const NoSettingsMatching = 'No settings matching "{PH1}" found';
+const MatchingSettings = '{PH1} matching settings';
 
 // Text Editor Settings
 const WordWrap = 'Word Wrap';
@@ -1428,7 +1454,7 @@ const searchSettings = () => {
   return i18nString(SearchSettings);
 };
 const settingsContent = () => {
-  return i18nString(SettingsContent);
+  return i18nString(SettingsContent$1);
 };
 const sidebarPosition = () => {
   return i18nString(SidebarPosition);
@@ -1471,6 +1497,11 @@ const noSettingsMatching = searchTerm => {
     PH1: searchTerm
   });
 };
+const matchingSettings = count => {
+  return i18nString(MatchingSettings, {
+    PH1: count.toString()
+  });
+};
 
 // Text Editor Settings
 const wordWrap = () => {
@@ -2162,7 +2193,7 @@ const wrappingIndentDescription = () => {
 
 const getSettingItems = async () => {
   return [{
-    id: 'fontSize',
+    id: 'Editor.fontSize',
     heading: fontSize(),
     description: fontSizeDescription(),
     type: Number$1,
@@ -3173,8 +3204,8 @@ const loadContent = async (state, savedState) => {
   const tabs = getTabs();
   const newTabs = getUpdatedTabs(tabs, tabId);
   const items = await getSettingItems();
-  const filteredItems = getFilteredItems(items, newTabs, searchValue);
   const preferences = await getPreferences();
+  const filteredItems = getFilteredItems(items, newTabs, searchValue, preferences);
   return {
     ...state,
     tabs: newTabs,
@@ -3199,7 +3230,7 @@ const ClassNames = {
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
-const Button = 1;
+const Button$1 = 1;
 const Div = 4;
 const H1 = 5;
 const Input = 6;
@@ -3208,13 +3239,13 @@ const H3 = 23;
 const Aside = 28;
 const P = 50;
 const Ul = 60;
-const Select = 63;
+const Select$1 = 63;
 const Option = 64;
 const Label = 66;
 const VirtualDomElements = {
   __proto__: null,
   Aside,
-  Button,
+  Button: Button$1,
   Div,
   H1,
   H3,
@@ -3222,7 +3253,7 @@ const VirtualDomElements = {
   Label,
   Option,
   P,
-  Select,
+  Select: Select$1,
   Ul};
 const text = data => {
   return {
@@ -3236,28 +3267,51 @@ const {
   Viewlet
 } = ClassNames;
 const Settings = 'Settings';
+const SettingsInputWrapper = 'SettingsInputWrapper';
+const InputBox = 'InputBox';
+const SettingsSearchInput = 'SettingsSearchInput';
+const Button = 'Button';
+const InputButton = 'InputButton';
+const SearchFieldButton = 'SearchFieldButton';
+const MaskIcon = 'MaskIcon';
+const MaskIconClearAll = 'MaskIconClearAll';
+const SettingsItem = 'SettingsItem';
+const SettingsItemCheckBox = 'SettingsItemCheckBox';
+const CheckBox = 'CheckBox';
+const Select = 'Select';
+const SettingsItems = 'SettingsItems';
+const SettingsNoResults = 'SettingsNoResults';
+const SettingsMain = 'SettingsMain';
+const SettingsContent = 'SettingsContent';
+const SettingsContentHeading = 'SettingsContentHeading';
+const SettingsHeader = 'SettingsHeader';
+const SettingsSideBar = 'SettingsSideBar';
+const SettingsTabs = 'SettingsTabs';
+const Tab = 'Tab';
+const TabSelected = 'TabSelected';
+const Badge = 'Badge';
+
+const getSettingsInputBadgeDom = (filteredSettingsCount, hasSearchValue) => {
+  if (!hasSearchValue) {
+    return [];
+  }
+  const badgeText = matchingSettings(filteredSettingsCount);
+  return [{
+    type: VirtualDomElements.Div,
+    className: Badge,
+    childCount: 1
+  }, text(badgeText)];
+};
 
 // TODo use numeric ids
 const HandleClickClear = 'handleClickClear';
 const HandleClickTab = 'handleClickTab';
 const HandleInput = 'handleInput';
 
-const getSettingsInputDom = () => {
-  const placeholder = searchSettings();
+const getSettingsInputButtonsDom = () => {
   return [{
-    type: VirtualDomElements.Div,
-    className: 'SettingsInputWrapper',
-    childCount: 2
-  }, {
-    type: VirtualDomElements.Input,
-    className: 'InputBox SettingsSearchInput',
-    placeholder,
-    childCount: 0,
-    name: SettingsSearch,
-    onInput: HandleInput
-  }, {
     type: VirtualDomElements.Button,
-    className: 'Button InputButton SearchFieldButton',
+    className: mergeClassNames(Button, InputButton, SearchFieldButton),
     childCount: 1,
     ariaLabel: clear(),
     name: Clear$1,
@@ -3265,17 +3319,38 @@ const getSettingsInputDom = () => {
     onClick: HandleClickClear
   }, {
     type: VirtualDomElements.Div,
-    className: 'MaskIcon MaskIconClearAll',
+    className: mergeClassNames(MaskIcon, MaskIconClearAll),
     childCount: 0
   }];
 };
 
-const getSettingsHeaderDom = () => {
+const getSettingsInputDom = () => {
+  const placeholder = searchSettings();
+  return [{
+    type: VirtualDomElements.Input,
+    className: mergeClassNames(InputBox, SettingsSearchInput),
+    placeholder,
+    childCount: 0,
+    name: SettingsSearch,
+    onInput: HandleInput
+  }];
+};
+
+const getChildCount = hasSearchValue => {
+  return hasSearchValue ? 3 : 2;
+};
+const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
+  const badgeDom = getSettingsInputBadgeDom(filteredSettingsCount, hasSearchValue);
+  const childCount = getChildCount(hasSearchValue);
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsHeader',
+    className: SettingsHeader,
     childCount: 1
-  }, ...getSettingsInputDom()];
+  }, {
+    type: VirtualDomElements.Div,
+    className: SettingsInputWrapper,
+    childCount
+  }, ...getSettingsInputDom(), ...getSettingsInputButtonsDom(), ...badgeDom];
 };
 
 const getInputId = id => {
@@ -3291,21 +3366,22 @@ const getItemCheckBoxVirtualDom = item => {
   const domId = getInputId(id);
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItem',
+    className: SettingsItem,
     childCount: 3
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
   }, text(heading), {
     type: VirtualDomElements.Div,
-    className: 'SettingsItemCheckBox',
+    className: SettingsItemCheckBox,
     childCount: 2
   }, {
     type: VirtualDomElements.Input,
-    className: 'CheckBox',
+    className: CheckBox,
     inputType: 'checkbox',
     childCount: 0,
-    id: domId
+    id: domId,
+    name: id
   }, {
     type: VirtualDomElements.Label,
     childCount: 1,
@@ -3316,24 +3392,30 @@ const getItemCheckBoxVirtualDom = item => {
 const getItemNumberVirtualDom = item => {
   const {
     heading,
-    description
+    description,
+    id
   } = item;
+  const domId = getInputId(id);
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItem',
+    className: SettingsItem,
     childCount: 3
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
   }, text(heading), {
-    type: VirtualDomElements.P,
-    childCount: 1
+    type: VirtualDomElements.Label,
+    htmlFor: domId,
+    childCount: 1,
+    className: 'Label'
   }, text(description), {
     type: VirtualDomElements.Input,
-    className: 'InputBox',
+    className: InputBox,
     inputType: 'number',
     placeholder: numberValue(),
-    childCount: 0
+    childCount: 0,
+    id: domId,
+    name: id
   }];
 };
 
@@ -3352,12 +3434,13 @@ const getOptionDom = option => {
 const getItemSelectVirtualDom = item => {
   const {
     heading,
-    description
+    description,
+    id
   } = item;
   const options = item.options || [];
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItem',
+    className: SettingsItem,
     childCount: 3
   }, {
     type: VirtualDomElements.H3,
@@ -3367,19 +3450,21 @@ const getItemSelectVirtualDom = item => {
     childCount: 1
   }, text(description), {
     type: VirtualDomElements.Select,
-    className: 'Select',
-    childCount: options.length
+    className: Select,
+    childCount: options.length,
+    name: id
   }, ...options.flatMap(getOptionDom)];
 };
 
 const getItemStringVirtualDom = item => {
   const {
     heading,
-    description
+    description,
+    id
   } = item;
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItem',
+    className: SettingsItem,
     childCount: 3
   }, {
     type: VirtualDomElements.H3,
@@ -3389,10 +3474,11 @@ const getItemStringVirtualDom = item => {
     childCount: 1
   }, text(description), {
     type: VirtualDomElements.Input,
-    className: 'InputBox',
+    className: InputBox,
     inputType: 'text',
     placeholder: numberValue(),
-    childCount: 0
+    childCount: 0,
+    name: id
   }];
 };
 
@@ -3416,11 +3502,11 @@ const getItemVirtualDom = item => {
 const getSettingsNoResultsDom = searchValue => {
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItems',
+    className: SettingsItems,
     childCount: 1
   }, {
-    type: VirtualDomElements.Div,
-    className: 'SettingsNoResults',
+    type: VirtualDomElements.P,
+    className: SettingsNoResults,
     childCount: 1
   }, text(noSettingsMatching(searchValue))];
 };
@@ -3431,7 +3517,7 @@ const getSettingsItemsDom = (items, searchValue) => {
   }
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsItems',
+    className: SettingsItems,
     childCount: items.length
   }, ...items.flatMap(getItemVirtualDom)];
 };
@@ -3441,17 +3527,17 @@ const getSettingsContentDom = (items, tabs, searchValue) => {
   const headerText = selectedTab ? selectedTab.label : settingsContent();
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsContent',
+    className: SettingsContent,
     childCount: 2
   }, {
     type: VirtualDomElements.H1,
-    className: 'SettingsContentHeading',
+    className: SettingsContentHeading,
     childCount: 1
   }, text(headerText), ...getSettingsItemsDom(items, searchValue)];
 };
 
 const getTabClassName = tab => {
-  return tab.selected ? mergeClassNames('Tab', 'TabSelected') : 'Tab';
+  return tab.selected ? mergeClassNames(Tab, TabSelected) : Tab;
 };
 
 const getTabVirtualDom = tab => {
@@ -3470,7 +3556,7 @@ const getTabVirtualDom = tab => {
 const getSettingsTabsDom = tabs => {
   return [{
     type: VirtualDomElements.Ul,
-    className: 'SettingsTabs',
+    className: SettingsTabs,
     role: AriaRoles.TabList,
     childCount: tabs.length,
     onClick: HandleClickTab
@@ -3480,7 +3566,7 @@ const getSettingsTabsDom = tabs => {
 const getSettingsSideBarDom = tabs => {
   return [{
     type: VirtualDomElements.Aside,
-    className: 'SettingsSideBar',
+    className: SettingsSideBar,
     childCount: 1
   }, ...getSettingsTabsDom(tabs)];
 };
@@ -3488,7 +3574,7 @@ const getSettingsSideBarDom = tabs => {
 const getSettingsMainDom = (tabs, items, searchValue) => {
   return [{
     type: VirtualDomElements.Div,
-    className: 'SettingsMain',
+    className: SettingsMain,
     childCount: 2
   }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items, tabs, searchValue)];
 };
@@ -3497,13 +3583,15 @@ const getSettingsDom = state => {
   const {
     tabs,
     filteredItems,
-    searchValue
+    searchValue,
+    filteredItemsCount
   } = state;
+  const hasSearchValue = searchValue.trim().length > 0;
   return [{
     type: VirtualDomElements.Div,
     childCount: 2,
     className: mergeClassNames(Viewlet, Settings)
-  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
+  }, ...getSettingsHeaderDom(filteredItemsCount, hasSearchValue), ...getSettingsMainDom(tabs, filteredItems, searchValue)];
 };
 
 const renderItems = (oldState, newState) => {
@@ -3511,6 +3599,19 @@ const renderItems = (oldState, newState) => {
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
+const renderSettingValues = (oldState, newState) => {
+  const {
+    filteredItems,
+    id
+  } = newState;
+  const numericSettings = filteredItems.filter(item => item.type === Number$1);
+  const inputValues = numericSettings.map(item => ({
+    name: item.id,
+    value: item.value
+  }));
+  return ['Viewlet.setInputValues', id, inputValues];
+};
+
 const renderValue = (oldState, newState) => {
   const {
     id,
@@ -3525,6 +3626,8 @@ const getRenderer = diffType => {
       return renderItems;
     case RenderValue:
       return renderValue;
+    case RenderSettingValues:
+      return renderSettingValues;
     default:
       throw new Error('unknown renderer');
   }

package/package.json

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