feat: add mods into component panel

packages/devtools-backend/src/index.ts

@@ -9,3 +9,4 @@
 export * from './serialize';
 export * from './search';
 export * from './ui';
+export * from './interface';

packages/devtools-backend/src/interface/component.ts

@@ -0,0 +1,23 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+/**
+ * Parameters to search for a component
+ */
+export interface ComponentQuery {
+	/**
+	 * The unique component identifier.
+	 * The value is formed based on the passed prop or dynamically.
+	 */
+	readonly componentId: string;
+
+	/**
+	 * The component name in dash-style without special postfixes like `-functional`
+	 */
+	readonly componentName?: string;
+}

packages/devtools-backend/src/interface/index.ts

@@ -0,0 +1,9 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+export * from './component';

packages/devtools-backend/src/search/find-component-node.ts

@@ -6,13 +6,15 @@
  * https://github.com/V4Fire/DevTools/blob/main/LICENSE
  */
 
+import type { ComponentQuery } from '../interface';
+
 /**
  * Find component DOM node
  *
- * @param id - component id
- * @param name - component name
+ * @param query - component query
  */
-export default function findComponentNode<T extends Element>(id: string, name?: string): T | null {
+export default function findComponentNode<T extends Element>(query: ComponentQuery): T | null {
+	const {componentId: id, componentName: name} = query;
 	let node = Array.prototype.find.call(
 		document.querySelectorAll(`.i-block-helper.${id}`),
 		(node) => node.component?.componentId === id

packages/devtools-backend/src/ui/component-highlight.ts

@@ -6,6 +6,7 @@
  * https://github.com/V4Fire/DevTools/blob/main/LICENSE
  */
 
+import type { ComponentQuery } from '../interface';
 import findComponentNode from '../search/find-component-node';
 
 interface HideOptions {
@@ -26,11 +27,10 @@ class ComponentHighlight {
 	/**
 	 * Show highlight for the component
 	 *
-	 * @param componentId
-	 * @param componentName
+	 * @param query
 	 */
-	show(componentId: string, componentName: string): void {
-		const node = findComponentNode<HTMLElement>(componentId, componentName);
+	show(query: ComponentQuery): void {
+		const node = findComponentNode<HTMLElement>(query);
 
 		if (node == null) {
 			return;

packages/devtools-backend/src/ui/component-locate.ts

@@ -27,8 +27,7 @@ class ComponentLocate {
 			component = e.target instanceof Element ? findComponent(e.target) : null;
 
 			if (component != null) {
-				const {componentId, componentName} = component;
-				componentHighlight.show(componentId, componentName);
+				componentHighlight.show(component);
 
 			} else {
 				componentHighlight.hide();

packages/devtools-core/components-lock.json

@@ -1,5 +1,5 @@
 {
-  "hash": "3a340c935c646da7e210253371ed8f9eaceabbefb4db0a3a4ac1f84a6b251ac2",
+  "hash": "b1f092ba867cc6f75520d31a06c0b387336890ccc7bbe045022f86c3856f3fa9",
   "data": {
     "%data": "%data:Map",
     "%data:Map": [
@@ -198,25 +198,41 @@
           "declaration": {
             "name": "b-components-panel-item",
             "parent": "i-block",
-            "dependencies": [],
-            "libs": []
+            "dependencies": [
+              "b-dropdown",
+              "b-button"
+            ],
+            "libs": [
+              "components/directives/icon"
+            ]
           },
           "name": "b-components-panel-item",
           "parent": "i-block",
-          "dependencies": [],
-          "libs": [],
+          "dependencies": [
+            "b-dropdown",
+            "b-button"
+          ],
+          "libs": [
+            "components/directives/icon"
+          ],
           "resolvedLibs": {
             "%data": "%data:Set",
-            "%data:Set": []
+            "%data:Set": [
+              "components/directives/icon"
+            ]
           },
           "resolvedOwnLibs": {
             "%data": "%data:Set",
-            "%data:Set": []
+            "%data:Set": [
+              "components/directives/icon"
+            ]
           },
           "type": "block",
           "mixin": false,
           "logic": "src/features/components/b-components-panel/modules/b-components-panel-item/b-components-panel-item.ts",
-          "styles": [],
+          "styles": [
+            "src/features/components/b-components-panel/modules/b-components-panel-item/b-components-panel-item.styl"
+          ],
           "tpl": "src/features/components/b-components-panel/modules/b-components-panel-item/b-components-panel-item.ss",
           "etpl": null
         }
@@ -333,6 +349,40 @@
           "etpl": null
         }
       ],
+      [
+        "b-dropdown",
+        {
+          "index": "src/components/form/b-dropdown/index.js",
+          "declaration": {
+            "name": "b-dropdown",
+            "parent": "b-select",
+            "dependencies": [],
+            "libs": []
+          },
+          "name": "b-dropdown",
+          "parent": "b-select",
+          "dependencies": [],
+          "libs": [],
+          "resolvedLibs": {
+            "%data": "%data:Set",
+            "%data:Set": [
+              "components/directives/icon"
+            ]
+          },
+          "resolvedOwnLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "type": "block",
+          "mixin": false,
+          "logic": "src/components/form/b-dropdown/b-dropdown.ts",
+          "styles": [
+            "src/components/form/b-dropdown/b-dropdown.styl"
+          ],
+          "tpl": "src/components/form/b-dropdown/b-dropdown.ss",
+          "etpl": null
+        }
+      ],
       [
         "b-dummy",
         {

packages/devtools-core/src/components/form/b-dropdown/b-dropdown.ss

@@ -0,0 +1,16 @@
+- namespace [%fileName%]
+
+- include 'components/form/b-select'|b as placeholder
+
+- template index() extends ['b-select'].index
+	- block nativeInput()
+		< .&__value
+			{{ value }}
+
+	- block body
+		< button.&__trigger &
+			@click = toggle |
+			@focus = onFocus |
+			@blur = onBlur
+		.
+			- super

packages/devtools-core/src/components/form/b-dropdown/b-dropdown.styl

@@ -0,0 +1,29 @@
+@import "@super/components/form/b-select/b-select.styl"
+
+b-dropdown extends b-select
+	&__dropdown
+		absolute left 0 top 100%
+		overflow-x hidden
+		border 1px solid black
+		background-color white
+
+	&__value
+		margin-right 4px
+
+	&__trigger
+		border none
+
+	&__wrapper
+		cursor inherit
+
+	&__icon
+		height 1em
+		font-size 0.875rem
+		transition transform 0.15s
+
+	&_opened_true ^[0]__icon
+		transform rotate(-180deg)
+
+	&__item_selected_true
+	&__item_marked_true
+		background-color rgba(100, 100, 100, 0.1)

packages/devtools-core/src/components/form/b-dropdown/b-dropdown.ts

@@ -0,0 +1,34 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+import bSelect, { component, field } from 'components/form/b-select/b-select';
+import iActiveItems from 'components/traits/i-active-items/i-active-items';
+
+export * from 'components/form/b-select/b-select';
+
+@component({functional: false})
+export default class bDropdown extends bSelect {
+	override readonly icon: string = 'caret-down';
+
+	@field<bDropdown>({
+		unique: true,
+		init: (o) => {
+			o.watch('valueProp', (val) => o.setActive(val, true));
+			o.watch('modelValue', (val) => o.setActive(val, true));
+			return iActiveItems.linkActiveStore(o, (val) => o.resolveValue(o.valueProp ?? o.modelValue ?? val));
+		}
+	})
+	override activeStore!: iActiveItems['activeStore'];
+
+	/**
+	 * Overriding the `onFocus` because dropdown shouldn't be opened on focus
+	 */
+	protected override onFocus(): void {
+		this.setMod('focused', 'true');
+	}
+}

packages/devtools-core/src/components/form/b-dropdown/index.js

@@ -0,0 +1,12 @@
+/*!
+ * V4Fire DevTools
+ * https://github.com/V4Fire/DevTools
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/DevTools/blob/main/LICENSE
+ */
+
+'use strict';
+
+package('b-dropdown')
+	.extends('b-select');

packages/devtools-core/src/features/components/b-components-panel/b-components-panel.ss

@@ -29,5 +29,6 @@
 				:items = items |
 				:item = 'b-components-panel-item' |
 				:theme = 'pretty' |
-				:cancelable = true
+				:cancelable = true |
+				:itemProps = getPanelItemProps
 			.

packages/devtools-core/src/features/components/b-components-panel/b-components-panel.styl

@@ -14,6 +14,7 @@ b-components-panel extends i-block
 			line-height 1
 
 	&__body
+		flex-grow 1
 		overflow auto
 		padding 4px 0
 		word-break break-word

packages/devtools-core/src/features/components/b-components-panel/b-components-panel.ts

@@ -12,6 +12,7 @@ import type bTree from 'components/base/b-tree/b-tree';
 import type { Item, ComponentData } from 'features/components/b-components-panel/interface';
 
 import { createItems } from 'features/components/b-components-panel/modules/helpers';
+import type bDropdown from 'components/form/b-dropdown/b-dropdown';
 
 export * from 'features/components/b-components-panel/interface';
 
@@ -65,6 +66,42 @@ export default class bComponentsPanel extends iBlock {
 		}
 	}
 
+	/**
+	 * Returns formatted props for panel item
+	 * @param item
+	 */
+	protected getPanelItemProps(item: Item): Dictionary {
+		if (item.allowedValues != null) {
+			return {
+				...item,
+
+				select: {
+					items: item.allowedValues.map((value) => ({label: value, value})),
+
+					'@actionChange': (_ctx: bDropdown, value: unknown): void => {
+						if (item.label == null) {
+							return;
+						}
+
+						this.onItemChangeMod(item.label, value);
+					}
+				}
+			};
+		}
+
+		return item;
+	}
+
+	/**
+	 * Change selected component mod
+	 *
+	 * @param _key
+	 * @param _value
+	 */
+	protected onItemChangeMod(_key: string, _value: unknown): void {
+		// TODO: use inspected app
+	}
+
 	/**
 	 * Update show empty
 	 */

packages/devtools-core/src/features/components/b-components-panel/interface.ts

@@ -8,12 +8,21 @@
 
 import type { Item as Super, ComponentMeta } from 'components/base/b-tree/b-tree';
 
+export interface ItemOption {
+	label: string;
+	value: unknown;
+}
+
 export interface Item extends Super {
 	data?: unknown;
 
 	path?: string;
 
 	children?: Item[];
+
+	allowedValues?: string[];
+
+	warning?: string;
 }
 
 export type ComponentData = {
@@ -33,6 +42,6 @@ export type ComponentData = {
 	hierarchy: string[];
 
 } & Pick<
-	ComponentMeta, 'componentName' | 'props' | 'fields' | 'computedFields' | 'systemFields'
+	ComponentMeta, 'componentName' | 'props' | 'fields' | 'computedFields' | 'systemFields' | 'mods'
 >;