@lvce-editor/settings-view 1.6.0 → 1.8.0

package/dist/settingsViewWorkerMain.js

@@ -914,10 +914,34 @@ const terminate = () => {
   globalThis.close();
 };
 
+const getFilteredItems = (items, tabs, searchValue = '') => {
+  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;
+  }
+  const normalizedSearchValue = searchValue.toLowerCase().trim();
+  return tabFilteredItems.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
+};
+
+const User = 1;
+const Script = 2;
+
 const clear$1 = state => {
+  const {
+    items,
+    tabs
+  } = state;
+  const newSearchValue = '';
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue);
   return {
     ...state,
-    searchValue: ''
+    searchValue: newSearchValue,
+    inputSource: Script,
+    filteredItems
   };
 };
 
@@ -945,24 +969,32 @@ const create$1 = (id, uri, x, y, width, height) => {
     items: [],
     searchValue: '',
     filteredItems: [],
-    preferences: {}
+    preferences: {},
+    inputSource: 0,
+    scrollOffset: 0,
+    filteredItemsCount: 0
   };
   set$1(id, state, state);
 };
 
-const isEqual$1 = (oldState, newState) => {
+const isEqual$2 = (oldState, newState) => {
   return oldState.focus === newState.focus;
 };
 
-const isEqual = (oldState, newState) => {
+const isEqual$1 = (oldState, newState) => {
   return oldState === newState;
 };
 
 const RenderItems = 1;
 const RenderFocus = 2;
+const RenderValue = 3;
+
+const isEqual = (oldState, newState) => {
+  return newState.inputSource === User || oldState.searchValue === newState.searchValue;
+};
 
-const modules = [isEqual$1, isEqual];
-const numbers = [RenderFocus, RenderItems];
+const modules = [isEqual$2, isEqual$1, isEqual];
+const numbers = [RenderFocus, RenderItems, RenderValue];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -984,19 +1016,6 @@ const diff2 = uid => {
   return diffResult;
 };
 
-const getFilteredItems = (items, tabs, searchValue = '') => {
-  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;
-  }
-  const normalizedSearchValue = searchValue.toLowerCase().trim();
-  return tabFilteredItems.filter(item => item.heading.toLowerCase().includes(normalizedSearchValue));
-};
-
 const getSelectedTabId = tabs => {
   for (const tab of tabs) {
     if (tab.selected) {
@@ -1045,7 +1064,8 @@ const handleInput = (state, value) => {
   return {
     ...state,
     searchValue: value,
-    filteredItems
+    filteredItems,
+    inputSource: User
   };
 };
 
@@ -1067,6 +1087,7 @@ const TextEditorTab = 'text-editor';
 const WindowTab = 'window';
 const WorkbenchTab = 'workbench';
 
+const Enum = 1;
 const String = 2;
 const Boolean$1 = 3;
 const Number$1 = 5;
@@ -1103,7 +1124,6 @@ const FormatOnSaveDescription = 'Format code when saving';
 const NumberValue = 'number value';
 const SearchSettings = 'Search Settings';
 const SettingsContent = 'Settings Content';
-const SettingsSideBar = 'Settings SideBar';
 const SidebarPosition = 'Sidebar Position';
 const SidebarPositionDescription = 'The position of the sidebar';
 const Telemetry = 'Telemetry';
@@ -1410,9 +1430,6 @@ const searchSettings = () => {
 const settingsContent = () => {
   return i18nString(SettingsContent);
 };
-const settingsSideBar = () => {
-  return i18nString(SettingsSideBar);
-};
 const sidebarPosition = () => {
   return i18nString(SidebarPosition);
 };
@@ -2164,16 +2181,30 @@ const getSettingItems = async () => {
     id: 'wordWrap',
     heading: wordWrap(),
     description: wordWrapDescription(),
-    type: String,
+    type: Enum,
     value: 'off',
-    category: TextEditorTab
+    category: TextEditorTab,
+    options: [{
+      id: 'on',
+      label: 'On' // i18n
+    }, {
+      id: 'off',
+      label: 'off' // i18n
+    }]
   }, {
     id: 'lineNumbers',
     heading: lineNumbers(),
     description: lineNumbersDescription(),
-    type: String,
+    type: Enum,
     value: 'on',
-    category: TextEditorTab
+    category: TextEditorTab,
+    options: [{
+      id: 'on',
+      label: 'On' // i18n
+    }, {
+      id: 'off',
+      label: 'off' // i18n
+    }]
   }, {
     id: 'minimap',
     heading: minimap(),
@@ -3080,20 +3111,78 @@ const getTabs = () => {
   return tabs;
 };
 
+const getSavedMinLineY = savedState => {
+  if (savedState && typeof savedState === 'object' && 'minLineY' in savedState && typeof savedState.minLineY === 'number') {
+    return savedState.minLineY;
+  }
+  return 0;
+};
+const getSavedSearchValue = savedState => {
+  if (savedState && typeof savedState === 'object' && 'searchValue' in savedState && typeof savedState.searchValue === 'string') {
+    return savedState.searchValue;
+  }
+  return '';
+};
+const getSavedDeltaY = savedState => {
+  if (savedState && typeof savedState === 'object' && 'deltaY' in savedState && typeof savedState.deltaY === 'number') {
+    return savedState.deltaY;
+  }
+  return 0;
+};
+const getSavedWorkspacePath = savedState => {
+  if (savedState && typeof savedState === 'object' && 'workspacePath' in savedState && typeof savedState.workspacePath === 'string') {
+    return savedState.workspacePath;
+  }
+  return '';
+};
+const getSavedTabId = savedState => {
+  if (savedState && typeof savedState === 'object' && 'selectedTab' in savedState && typeof savedState.selectedTab === 'string') {
+    return savedState.selectedTab;
+  }
+  return '';
+};
+const restoreState = savedState => {
+  if (!savedState) {
+    return {
+      root: '',
+      minLineY: 0,
+      deltaY: 0,
+      tabId: '',
+      searchValue: ''
+    };
+  }
+  const root = getSavedWorkspacePath(savedState);
+  const minLineY = getSavedMinLineY(savedState);
+  const deltaY = getSavedDeltaY(savedState);
+  const tabId = getSavedTabId(savedState);
+  const searchValue = getSavedSearchValue(savedState);
+  return {
+    root,
+    minLineY,
+    deltaY,
+    tabId,
+    searchValue
+  };
+};
+
 const loadContent = async (state, savedState) => {
   const {
-    searchValue
-  } = state;
+    searchValue,
+    tabId
+  } = restoreState(savedState);
   const tabs = getTabs();
+  const newTabs = getUpdatedTabs(tabs, tabId);
   const items = await getSettingItems();
-  const filteredItems = getFilteredItems(items, tabs, searchValue);
+  const filteredItems = getFilteredItems(items, newTabs, searchValue);
   const preferences = await getPreferences();
   return {
     ...state,
-    tabs,
+    tabs: newTabs,
     items,
     filteredItems,
-    preferences
+    preferences,
+    inputSource: Script,
+    searchValue
   };
 };
 
@@ -3115,21 +3204,25 @@ const Div = 4;
 const H1 = 5;
 const Input = 6;
 const Text = 12;
-const H2 = 22;
 const H3 = 23;
 const Aside = 28;
 const P = 50;
 const Ul = 60;
+const Select = 63;
+const Option = 64;
+const Label = 66;
 const VirtualDomElements = {
   __proto__: null,
   Aside,
   Button,
   Div,
   H1,
-  H2,
   H3,
   Input,
+  Label,
+  Option,
   P,
+  Select,
   Ul};
 const text = data => {
   return {
@@ -3164,13 +3257,17 @@ const getSettingsInputDom = () => {
     onInput: HandleInput
   }, {
     type: VirtualDomElements.Button,
-    className: 'Button InputButton',
+    className: 'Button InputButton SearchFieldButton',
     childCount: 1,
     ariaLabel: clear(),
-    // TODO i18n string
-    name: Clear$1 // TODO add click event listener
-  }, text(clear()) // TODO use icon
-  ];
+    name: Clear$1,
+    // TODO add click event listener
+    onClick: HandleClickClear
+  }, {
+    type: VirtualDomElements.Div,
+    className: 'MaskIcon MaskIconClearAll',
+    childCount: 0
+  }];
 };
 
 const getSettingsHeaderDom = () => {
@@ -3181,6 +3278,41 @@ const getSettingsHeaderDom = () => {
   }, ...getSettingsInputDom()];
 };
 
+const getInputId = id => {
+  return id.replaceAll('.', '\\.');
+};
+
+const getItemCheckBoxVirtualDom = item => {
+  const {
+    heading,
+    description,
+    id
+  } = item;
+  const domId = getInputId(id);
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsItem',
+    childCount: 3
+  }, {
+    type: VirtualDomElements.H3,
+    childCount: 1
+  }, text(heading), {
+    type: VirtualDomElements.Div,
+    className: 'SettingsItemCheckBox',
+    childCount: 2
+  }, {
+    type: VirtualDomElements.Input,
+    className: 'CheckBox',
+    inputType: 'checkbox',
+    childCount: 0,
+    id: domId
+  }, {
+    type: VirtualDomElements.Label,
+    childCount: 1,
+    htmlFor: domId
+  }, text(description)];
+};
+
 const getItemNumberVirtualDom = item => {
   const {
     heading,
@@ -3205,23 +3337,103 @@ const getItemNumberVirtualDom = item => {
   }];
 };
 
+const getOptionDom = option => {
+  const {
+    id,
+    label
+  } = option;
+  return [{
+    type: VirtualDomElements.Option,
+    childCount: 1,
+    value: id
+  }, text(label)];
+};
+
+const getItemSelectVirtualDom = item => {
+  const {
+    heading,
+    description
+  } = item;
+  const options = item.options || [];
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsItem',
+    childCount: 3
+  }, {
+    type: VirtualDomElements.H3,
+    childCount: 1
+  }, text(heading), {
+    type: VirtualDomElements.P,
+    childCount: 1
+  }, text(description), {
+    type: VirtualDomElements.Select,
+    className: 'Select',
+    childCount: options.length
+  }, ...options.flatMap(getOptionDom)];
+};
+
+const getItemStringVirtualDom = item => {
+  const {
+    heading,
+    description
+  } = item;
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsItem',
+    childCount: 3
+  }, {
+    type: VirtualDomElements.H3,
+    childCount: 1
+  }, text(heading), {
+    type: VirtualDomElements.P,
+    childCount: 1
+  }, text(description), {
+    type: VirtualDomElements.Input,
+    className: 'InputBox',
+    inputType: 'text',
+    placeholder: numberValue(),
+    childCount: 0
+  }];
+};
+
+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);
+  }
+  // TODO
+  return [text('unknown setting type')];
+};
+
+const getSettingsNoResultsDom = searchValue => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsItems',
+    childCount: 1
+  }, {
+    type: VirtualDomElements.Div,
+    className: 'SettingsNoResults',
+    childCount: 1
+  }, text(noSettingsMatching(searchValue))];
+};
+
 const getSettingsItemsDom = (items, searchValue) => {
   if (items.length === 0 && searchValue.trim()) {
-    return [{
-      type: VirtualDomElements.Div,
-      className: 'SettingsItems',
-      childCount: 1
-    }, {
-      type: VirtualDomElements.Div,
-      className: 'SettingsNoResults',
-      childCount: 1
-    }, text(noSettingsMatching(searchValue))];
+    return getSettingsNoResultsDom(searchValue);
   }
   return [{
     type: VirtualDomElements.Div,
     className: 'SettingsItems',
     childCount: items.length
-  }, ...items.flatMap(getItemNumberVirtualDom)];
+  }, ...items.flatMap(getItemVirtualDom)];
 };
 
 const getSettingsContentDom = (items, tabs, searchValue) => {
@@ -3266,16 +3478,11 @@ const getSettingsTabsDom = tabs => {
 };
 
 const getSettingsSideBarDom = tabs => {
-  const sideBarHeading = settingsSideBar();
   return [{
     type: VirtualDomElements.Aside,
     className: 'SettingsSideBar',
-    childCount: 2
-  }, {
-    type: VirtualDomElements.H2,
-    className: 'SettingsSideBarHeading',
     childCount: 1
-  }, text(sideBarHeading), ...getSettingsTabsDom(tabs)];
+  }, ...getSettingsTabsDom(tabs)];
 };
 
 const getSettingsMainDom = (tabs, items, searchValue) => {
@@ -3304,10 +3511,20 @@ const renderItems = (oldState, newState) => {
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
+const renderValue = (oldState, newState) => {
+  const {
+    id,
+    searchValue
+  } = newState;
+  return ['Viewlet.setValueByName', id, SettingsSearch, searchValue];
+};
+
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderItems:
       return renderItems;
+    case RenderValue:
+      return renderValue;
     default:
       throw new Error('unknown renderer');
   }
@@ -3349,42 +3566,6 @@ const renderEventListeners = () => {
   }];
 };
 
-const getSavedMinLineY = savedState => {
-  if (savedState && typeof savedState === 'object' && 'minLineY' in savedState && typeof savedState.minLineY === 'number') {
-    return savedState.minLineY;
-  }
-  return 0;
-};
-const getSavedDeltaY = savedState => {
-  if (savedState && typeof savedState === 'object' && 'deltaY' in savedState && typeof savedState.deltaY === 'number') {
-    return savedState.deltaY;
-  }
-  return 0;
-};
-const getSavedWorkspacePath = savedState => {
-  if (savedState && typeof savedState === 'object' && 'workspacePath' in savedState && typeof savedState.workspacePath === 'string') {
-    return savedState.workspacePath;
-  }
-  return '';
-};
-const restoreState = savedState => {
-  if (!savedState) {
-    return {
-      root: '',
-      minLineY: 0,
-      deltaY: 0
-    };
-  }
-  const root = getSavedWorkspacePath(savedState);
-  const minLineY = getSavedMinLineY(savedState);
-  const deltaY = getSavedDeltaY(savedState);
-  return {
-    root,
-    minLineY,
-    deltaY
-  };
-};
-
 const saveState = state => {
   const {
     tabs,

package/package.json

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