@lvce-editor/settings-view 1.2.0 → 1.4.0

package/dist/settingsViewWorkerMain.js

@@ -914,6 +914,13 @@ const terminate = () => {
   globalThis.close();
 };
 
+const clear = state => {
+  return {
+    ...state,
+    searchValue: ''
+  };
+};
+
 const {
   get: get$1,
   set: set$1,
@@ -932,7 +939,10 @@ const create$1 = (id, uri, x, y, width, height) => {
     x,
     y,
     width,
-    height
+    height,
+    tabs: [],
+    items: [],
+    searchValue: ''
   };
   set$1(id, state, state);
 };
@@ -971,16 +981,115 @@ const diff2 = uid => {
   return diffResult;
 };
 
+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;
+  }
+  return {
+    ...state,
+    tabs: getUpdatedTabs(state.tabs, name)
+  };
+};
+
+const handleInput = (state, value) => {
+  return {
+    ...state,
+    searchValue: value
+  };
+};
+
 const initialize = async () => {
   // TODO
 };
 
+const String = 2;
+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'
+  }, {
+    id: 'fontFamily',
+    heading: 'Font Family',
+    description: 'The font family of the editor',
+    type: String,
+    value: 'Fira Code'
+  }];
+};
+
+const getTabs = () => {
+  const tabs = [{
+    id: 'text-editor',
+    label: 'Text Editor',
+    selected: true
+  }, {
+    id: 'workbench',
+    label: 'Workbench',
+    selected: false
+  }, {
+    id: 'window',
+    label: 'Window',
+    selected: false
+  }, {
+    id: 'features',
+    label: 'Features',
+    selected: false
+  }, {
+    id: 'applications',
+    label: 'Applications',
+    selected: false
+  }, {
+    id: 'security',
+    label: 'Security',
+    selected: false
+  }, {
+    id: 'extensions',
+    label: 'Extensions',
+    selected: false
+  }];
+  return tabs;
+};
+
 const loadContent = async (state, savedState) => {
+  const tabs = getTabs();
+  const items = await getSettingItems();
   return {
-    ...state
+    ...state,
+    tabs,
+    items
   };
 };
 
+const Tab$1 = 'tab';
+const TabList = 'tablist';
+const AriaRoles = {
+  __proto__: null,
+  Tab: Tab$1,
+  TabList};
 const Viewlet$1 = 'Viewlet';
 const ClassNames = {
   __proto__: null,
@@ -988,13 +1097,29 @@ 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 Li = 48;
+const P = 50;
+const Ul = 60;
 const VirtualDomElements = {
   __proto__: null,
+  Aside,
+  Button,
   Div,
-  H1};
+  H1,
+  H2,
+  H3,
+  Input,
+  Li,
+  P,
+  Ul};
 const text = data => {
   return {
     type: Text,
@@ -1007,19 +1132,144 @@ const {
   Viewlet} = ClassNames;
 const Settings = 'Settings';
 
-const getSettingsDom = state => {
+const SettingsSearch = 'SettingsSearch';
+const Clear = 'Clear';
+
+const getSettingsInputDom = () => {
+  const placeholder = 'Search Settings';
   return [{
     type: VirtualDomElements.Div,
+    className: 'SettingsInputWrapper',
+    childCount: 2
+  }, {
+    type: VirtualDomElements.Input,
+    className: 'InputBox SettingsSearchInput',
+    placeholder,
+    childCount: 0,
+    name: SettingsSearch // TODO add input event listener
+  }, {
+    type: VirtualDomElements.Button,
+    className: 'Button InputButton',
     childCount: 1,
-    className: mergeClassNames(Viewlet, Settings)
+    ariaLabel: 'Clear',
+    // TODO i18n string
+    name: Clear // TODO add click event listener
+  }, text('Clear') // TODO use icon
+  ];
+};
+
+const getSettingsHeaderDom = () => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsHeader',
+    childCount: 1
+  }, ...getSettingsInputDom()];
+};
+
+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 => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsContent',
+    childCount: 2
   }, {
     type: VirtualDomElements.H1,
     childCount: 1
-  }, text('Settings Dom: TODO')];
+  }, text('Settings Content'), ...getSettingsItemsDom(items)];
+};
+
+const HandleClickTab = 'handleClickTab';
+const HandleInput = 'handleInput';
+
+// TODo use numeric ids
+
+const getTabVirtualDom = tab => {
+  const className = tab.selected ? mergeClassNames('Tab', 'TabSelected') : 'Tab';
+  return [{
+    type: VirtualDomElements.Li,
+    className,
+    childCount: 1,
+    role: AriaRoles.Tab,
+    name: tab.id
+  }, text(tab.label)];
+};
+
+const getSettingsTabsDom = tabs => {
+  return [{
+    type: VirtualDomElements.Ul,
+    className: 'SettingsTabs',
+    role: AriaRoles.TabList,
+    childCount: tabs.length,
+    onClick: HandleClickTab
+  }, ...tabs.flatMap(getTabVirtualDom)];
+};
+
+const getSettingsSideBarDom = tabs => {
+  const sideBarHeading = 'Settings SideBar';
+  return [{
+    type: VirtualDomElements.Aside,
+    className: 'SettingsSideBar',
+    childCount: 2
+  }, {
+    type: VirtualDomElements.H2,
+    className: 'SettingsSideBarHeading',
+    childCount: 1
+  }, text(sideBarHeading), ...getSettingsTabsDom(tabs)];
+};
+
+const getSettingsMainDom = (tabs, items) => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: 'SettingsMain',
+    childCount: 2
+  }, ...getSettingsSideBarDom(tabs), ...getSettingsContentDom(items)];
+};
+
+const getSettingsDom = state => {
+  const {
+    tabs,
+    items
+  } = state;
+  return [{
+    type: VirtualDomElements.Div,
+    childCount: 2,
+    className: mergeClassNames(Viewlet, Settings)
+  }, ...getSettingsHeaderDom(), ...getSettingsMainDom(tabs, items)];
 };
 
 const renderItems = (oldState, newState) => {
-  const dom = getSettingsDom();
+  const dom = getSettingsDom(newState);
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
@@ -1055,108 +1305,13 @@ 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: HandleDebugInput,
-    params: ['handleDebugInput', '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: HandleClickTab,
+    params: ['handleClickTab', 'event.target.name']
   }, {
-    name: HandleWatchExpressionContextMenu,
-    params: ['handleWatchExpressionContextMenu', 'event.clientX', 'event.clientY', 'event.target.dataset.index'],
-    preventDefault: true
+    name: HandleInput,
+    params: ['handleInput', 'event.target.value']
   }];
 };
 
@@ -1217,7 +1372,10 @@ const commandMap = {
   'Settings.renderEventListeners': renderEventListeners,
   'Settings.restoreState': restoreState,
   'Settings.saveState': saveState,
-  'Settings.terminate': terminate
+  '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.2.0",
+  "version": "1.4.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",