@lvce-editor/settings-view 1.3.0 → 1.5.0

package/dist/settingsViewWorkerMain.js

@@ -914,12 +914,20 @@ const terminate = () => {
   globalThis.close();
 };
 
+const clear = state => {
+  return {
+    ...state,
+    searchValue: ''
+  };
+};
+
 const {
   get: get$1,
   set: set$1,
   wrapCommand,
   getCommandIds,
-  registerCommands
+  registerCommands,
+  wrapGetter
 } = create$2();
 
 const create$1 = (id, uri, x, y, width, height) => {
@@ -933,7 +941,10 @@ const create$1 = (id, uri, x, y, width, height) => {
     y,
     width,
     height,
-    tabs: []
+    tabs: [],
+    items: [],
+    searchValue: '',
+    filteredItems: []
   };
   set$1(id, state, state);
 };
@@ -972,20 +983,217 @@ const diff2 = uid => {
   return diffResult;
 };
 
+const getFilteredItems = (items, tabs) => {
+  const selectedTab = tabs.find(tab => tab.selected);
+  if (!selectedTab) {
+    return items;
+  }
+  return items.filter(item => item.category === selectedTab.id);
+};
+
+const getSelectedTabId = tabs => {
+  for (const tab of tabs) {
+    if (tab.selected) {
+      return tab.id;
+    }
+  }
+  return '';
+};
+
+const getUpdatedTabs = (tabs, selectedTabId) => {
+  // Check if the clicked tab is already selected
+  const clickedTabId = getSelectedTabId(tabs);
+  if (clickedTabId === selectedTabId) {
+    return tabs;
+  }
+  return tabs.map(tab => ({
+    ...tab,
+    selected: tab.id === selectedTabId
+  }));
+};
+
+const handleClickTab = (state, name) => {
+  if (!name) {
+    return state;
+  }
+  const updatedTabs = getUpdatedTabs(state.tabs, name);
+  const filteredItems = getFilteredItems(state.items, updatedTabs);
+  return {
+    ...state,
+    tabs: updatedTabs,
+    filteredItems
+  };
+};
+
+const handleInput = (state, value) => {
+  return {
+    ...state,
+    searchValue: value
+  };
+};
+
 const initialize = async () => {
   // TODO
 };
 
+const ApplicationsTab = 'applications';
+const Clear = 'Clear';
+const ExtensionsTab = 'extensions';
+const FeaturesTab = 'features';
+const SecurityTab = 'security';
+const SettingsSearch = 'SettingsSearch';
+const TextEditorTab = 'text-editor';
+const WindowTab = 'window';
+const WorkbenchTab = 'workbench';
+
+const String = 2;
+const Boolean$1 = 3;
+const Number$1 = 5;
+
+const getSettingItems = async () => {
+  return [{
+    id: 'fontSize',
+    heading: 'Font Size',
+    description: 'The font size of the editor',
+    type: Number$1,
+    value: '15px',
+    category: TextEditorTab
+  }, {
+    id: 'fontFamily',
+    heading: 'Font Family',
+    description: 'The font family of the editor',
+    type: String,
+    value: 'Fira Code',
+    category: TextEditorTab
+  }, {
+    id: 'theme',
+    heading: 'Theme',
+    description: 'The color theme of the workbench',
+    type: String,
+    value: 'Dark',
+    category: WorkbenchTab
+  }, {
+    id: 'sidebarPosition',
+    heading: 'Sidebar Position',
+    description: 'The position of the sidebar',
+    type: String,
+    value: 'Left',
+    category: WorkbenchTab
+  }, {
+    id: 'windowTitle',
+    heading: 'Window Title',
+    description: 'The title shown in the window',
+    type: String,
+    value: 'Settings View',
+    category: WindowTab
+  }, {
+    id: 'windowSize',
+    heading: 'Window Size',
+    description: 'The default window size',
+    type: String,
+    value: '1024x768',
+    category: WindowTab
+  }, {
+    id: 'autoSave',
+    heading: 'Auto Save',
+    description: 'Automatically save files',
+    type: Boolean$1,
+    value: 'true',
+    category: FeaturesTab
+  }, {
+    id: 'formatOnSave',
+    heading: 'Format on Save',
+    description: 'Format code when saving',
+    type: Boolean$1,
+    value: 'false',
+    category: FeaturesTab
+  }, {
+    id: 'telemetry',
+    heading: 'Telemetry',
+    description: 'Enable telemetry collection',
+    type: Boolean$1,
+    value: 'true',
+    category: ApplicationsTab
+  }, {
+    id: 'updates',
+    heading: 'Auto Updates',
+    description: 'Automatically check for updates',
+    type: Boolean$1,
+    value: 'true',
+    category: ApplicationsTab
+  }, {
+    id: 'encryption',
+    heading: 'File Encryption',
+    description: 'Encrypt sensitive files',
+    type: Boolean$1,
+    value: 'false',
+    category: SecurityTab
+  }, {
+    id: 'twoFactor',
+    heading: 'Two Factor Auth',
+    description: 'Enable two factor authentication',
+    type: Boolean$1,
+    value: 'false',
+    category: SecurityTab
+  }, {
+    id: 'extensionsAutoUpdate',
+    heading: 'Auto Update Extensions',
+    description: 'Automatically update extensions',
+    type: Boolean$1,
+    value: 'true',
+    category: ExtensionsTab
+  }, {
+    id: 'extensionRecommendations',
+    heading: 'Extension Recommendations',
+    description: 'Show extension recommendations',
+    type: Boolean$1,
+    value: 'true',
+    category: ExtensionsTab
+  }];
+};
+
 const getTabs = () => {
-  const tabs = ['Text Editor', 'Workbench', 'Window', 'Features', 'Applications', 'Security', 'Extensions'];
+  const tabs = [{
+    id: TextEditorTab,
+    label: 'Text Editor',
+    selected: true
+  }, {
+    id: WorkbenchTab,
+    label: 'Workbench',
+    selected: false
+  }, {
+    id: WindowTab,
+    label: 'Window',
+    selected: false
+  }, {
+    id: FeaturesTab,
+    label: 'Features',
+    selected: false
+  }, {
+    id: ApplicationsTab,
+    label: 'Applications',
+    selected: false
+  }, {
+    id: SecurityTab,
+    label: 'Security',
+    selected: false
+  }, {
+    id: ExtensionsTab,
+    label: 'Extensions',
+    selected: false
+  }];
   return tabs;
 };
 
 const loadContent = async (state, savedState) => {
   const tabs = getTabs();
+  const items = await getSettingItems();
+  const filteredItems = getFilteredItems(items, tabs);
   return {
     ...state,
-    tabs
+    tabs,
+    items,
+    filteredItems
   };
 };
 
@@ -1002,18 +1210,26 @@ const ClassNames = {
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
+const Button = 1;
 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 VirtualDomElements = {
   __proto__: null,
   Aside,
+  Button,
   Div,
+  H1,
   H2,
+  H3,
   Input,
+  P,
   Ul};
 const text = data => {
   return {
@@ -1032,12 +1248,22 @@ const getSettingsInputDom = () => {
   return [{
     type: VirtualDomElements.Div,
     className: 'SettingsInputWrapper',
-    childCount: 1
+    childCount: 2
   }, {
     type: VirtualDomElements.Input,
     className: 'InputBox SettingsSearchInput',
-    placeholder
-  }];
+    placeholder,
+    childCount: 0,
+    name: SettingsSearch // TODO add input event listener
+  }, {
+    type: VirtualDomElements.Button,
+    className: 'Button InputButton',
+    childCount: 1,
+    ariaLabel: 'Clear',
+    // TODO i18n string
+    name: Clear // TODO add click event listener
+  }, text('Clear') // TODO use icon
+  ];
 };
 
 const getSettingsHeaderDom = () => {
@@ -1048,21 +1274,71 @@ const getSettingsHeaderDom = () => {
   }, ...getSettingsInputDom()];
 };
 
-const getSettingsContentDom = () => {
+const getItemNumberVirtualDom = 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: 'number',
+    placeholder: 'number value',
+    childCount: 0
+  }];
+};
+
+const getSettingsItemsDom = items => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsItems',
+    childCount: items.length
+  }, ...items.flatMap(getItemNumberVirtualDom)];
+};
+
+const getSettingsContentDom = (items, tabs) => {
+  const selectedTab = tabs.find(tab => tab.selected);
+  const headerText = selectedTab ? selectedTab.label : 'Settings Content';
   return [{
     type: VirtualDomElements.Div,
     className: 'SettingsContent',
+    childCount: 2
+  }, {
+    type: VirtualDomElements.H1,
     childCount: 1
-  }, text('Settings Content')];
+  }, text(headerText), ...getSettingsItemsDom(items)];
+};
+
+// TODo use numeric ids
+const HandleClickClear = 'handleClickClear';
+const HandleClickTab = 'handleClickTab';
+const HandleInput = 'handleInput';
+
+const getTabClassName = tab => {
+  return tab.selected ? mergeClassNames('Tab', 'TabSelected') : 'Tab';
 };
 
 const getTabVirtualDom = tab => {
+  const className = getTabClassName(tab);
   return [{
-    type: VirtualDomElements.Div,
-    className: 'Tab',
+    type: VirtualDomElements.Button,
+    className,
     childCount: 1,
-    role: AriaRoles.Tab
-  }, text(tab)];
+    role: AriaRoles.Tab,
+    name: tab.id,
+    id: tab.id,
+    ariaSelected: tab.selected
+  }, text(tab.label)];
 };
 
 const getSettingsTabsDom = tabs => {
@@ -1070,7 +1346,8 @@ const getSettingsTabsDom = tabs => {
     type: VirtualDomElements.Ul,
     className: 'SettingsTabs',
     role: AriaRoles.TabList,
-    childCount: tabs.length
+    childCount: tabs.length,
+    onClick: HandleClickTab
   }, ...tabs.flatMap(getTabVirtualDom)];
 };
 
@@ -1087,23 +1364,24 @@ const getSettingsSideBarDom = tabs => {
   }, text(sideBarHeading), ...getSettingsTabsDom(tabs)];
 };
 
-const getSettingsMainDom = tabs => {
+const getSettingsMainDom = (tabs, items) => {
   return [{
     type: VirtualDomElements.Div,
     className: 'SettingsMain',
     childCount: 2
-  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom()];
+  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items, tabs)];
 };
 
 const getSettingsDom = state => {
   const {
-    tabs
+    tabs,
+    filteredItems
   } = state;
   return [{
     type: VirtualDomElements.Div,
     childCount: 2,
     className: mergeClassNames(Viewlet, Settings)
-  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs)];
+  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs, filteredItems)];
 };
 
 const renderItems = (oldState, newState) => {
@@ -1143,108 +1421,16 @@ const renderActions = () => {
   return [];
 };
 
-const HandleClickCallStackItem = 'handleClickCallStackItem';
-const HandleClickWatchExpression = 'handleClickWatchExpression';
-const HandleClickWatchExpressionDelete = 'handleClickWatchExpressionDelete';
-const HandleClickCheckBox = 'handleClickCheckBox';
-const HandleClickContinue = 'handleClickContinue';
-const HandleClickDebugButton = 'handleClickDebugButton';
-const HandleClickPause = 'handleClickPause';
-const HandleClickScopeValue = 'handleClickScopeValue';
-const HandleClickSectionBreakPoints = 'handleClickSectionBreakPoints';
-const HandleClickSectionCallstack = 'handleClickSectionCallstack';
-const HandleClickSectionHeading = 'handleClickSectionHeading';
-const HandleClickSectionScope = 'handleClickSectionScope';
-const HandleClickSectionWatch = 'handleClickSectionWatch';
-const HandleClickStepInto = 'handleClickStepInto';
-const HandleClickStepOut = 'handleClickStepOut';
-const HandleClickStepOver = 'handleClickStepOver';
-const HandleDebugInput = 'handleDebugInput';
-const HandleClickSectionAction = 'handleClickSectionAction';
-const HandleInputFieldChange = 'handleInputFieldChange';
-const HandleInputBlur = 'handleInputBlur';
-const HandleSectionHeaderContextMenu = 'handleSectionHeaderContextMenu';
-const HandleWatchExpressionContextMenu = 'handleWatchExpressionContextMenu';
-
-// TODo use numeric ids
-
 const renderEventListeners = () => {
   return [{
-    name: HandleClickContinue,
-    params: ['handleClickContinue']
-  }, {
-    name: HandleClickDebugButton,
-    params: ['handleClickDebugButton', 'event.target.name']
-  }, {
-    name: HandleClickPause,
-    params: ['handleClickPause']
-  }, {
-    name: HandleClickStepOver,
-    params: ['handleClickStepOver']
-  }, {
-    name: HandleClickStepInto,
-    params: ['handleClickStepInto']
-  }, {
-    name: HandleClickStepOut,
-    params: ['handleClickStepOut']
-  }, {
-    name: HandleClickSectionWatch,
-    params: ['HandleClickSectionWatch']
-  }, {
-    name: HandleClickSectionBreakPoints,
-    params: ['handleClickSectionBreakpoints']
-  }, {
-    name: HandleClickSectionScope,
-    params: ['handleClickSectionScope']
-  }, {
-    name: HandleClickSectionCallstack,
-    params: ['handleClickSectionCallstack']
-  }, {
-    name: HandleClickSectionBreakPoints,
-    params: ['handleClickSectionBreakPoints']
+    name: HandleClickTab,
+    params: ['handleClickTab', 'event.target.name']
   }, {
-    name: HandleDebugInput,
-    params: ['handleDebugInput', 'event.target.value']
+    name: HandleInput,
+    params: ['handleInput', 'event.target.value']
   }, {
-    name: HandleClickSectionHeading,
-    params: ['handleClickSectionHeading', 'event.target.dataset.name', 'event.button'],
-    preventDefault: true
-  }, {
-    name: HandleClickCheckBox,
-    params: ['handleClickCheckBox', 'event.target.name']
-  }, {
-    name: HandleClickDebugButton,
-    params: ['handleClickDebugButton', 'event.target.name']
-  }, {
-    name: HandleClickCallStackItem,
-    params: ['handleClickCallStackItem', 'event.target.dataset.index']
-  }, {
-    name: HandleClickWatchExpression,
-    params: ['handleClickWatchExpression', 'event.target.dataset.index', 'event.defaultPrevented']
-  }, {
-    name: HandleClickWatchExpressionDelete,
-    params: ['handleClickWatchExpressionDelete', 'event.target.dataset.index'],
-    preventDefault: true
-  }, {
-    name: HandleClickScopeValue,
-    params: ['handleClickScopeValue', 'event.target.dataset.index', 'event.button']
-  }, {
-    name: HandleInputFieldChange,
-    params: ['handleInputFieldChange', 'event.target.name', 'event.target.value']
-  }, {
-    name: HandleClickSectionAction,
-    params: ['handleClickSectionAction', 'event.target.name']
-  }, {
-    name: HandleInputBlur,
-    params: ['handleInputBlur']
-  }, {
-    name: HandleSectionHeaderContextMenu,
-    params: ['handleSectionHeaderContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.name'],
-    preventDefault: true
-  }, {
-    name: HandleWatchExpressionContextMenu,
-    params: ['handleWatchExpressionContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.index'],
-    preventDefault: true
+    name: HandleClickClear,
+    params: ['clear']
   }];
 };
 
@@ -1284,13 +1470,20 @@ const restoreState = savedState => {
   };
 };
 
-const saveState = uid => {
+const saveState = state => {
+  const {
+    tabs,
+    searchValue
+  } = state;
+  const selectedTab = getSelectedTabId(tabs);
   return {
     expandedPaths: [],
     root: '',
     minLineY: 0,
     maxLineY: 0,
-    deltaY: 0
+    deltaY: 0,
+    searchValue,
+    selectedTab
   };
 };
 
@@ -1304,8 +1497,11 @@ const commandMap = {
   'Settings.renderActions': renderActions,
   'Settings.renderEventListeners': renderEventListeners,
   'Settings.restoreState': restoreState,
-  'Settings.saveState': saveState,
-  'Settings.terminate': terminate
+  'Settings.saveState': wrapGetter(saveState),
+  'Settings.terminate': terminate,
+  'Settings.handleClickTab': wrapCommand(handleClickTab),
+  'Settings.clear': wrapCommand(clear),
+  'Settings.handleInput': wrapCommand(handleInput)
 };
 
 const rpcs = Object.create(null);

package/package.json

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