add modifiers

emberjs · Feb 6, 2024 · 0529726 · 0529726
1 parent a415e9c
commit 0529726
Show file tree

Hide file tree

Showing 10 changed files with 526 additions and 173 deletions.
diff --git a/app/components/component-tree-arg.js b/app/components/component-tree-arg.js
@@ -12,6 +12,15 @@ export default class ComponentTreeArg extends Component {
 
   get displayValue() {
     if (this.isObject) {
+      if (this.args.value.inspect) {
+        if (this.args.value.type === 'function') {
+          return this.args.value.inspect
+            .replace(/"/g, '\\"')
+            .replace('bound ', '')
+            .replace('{ ... }', '');
+        }
+        return this.args.value.inspect.replace(/"/g, '\\"');
+      }
       return '...';
     } else if (typeof this.args.value === 'string') {
       // Escape any interior quotes – we will add the surrounding quotes in the template

diff --git a/app/components/component-tree-item.hbs b/app/components/component-tree-item.hbs
@@ -87,6 +87,16 @@
         <span class="component-name">
           {{@item.name}}
         </span>
+        {{#each-in @item.args.named as |name value|}}
+          <div class="arg-token flex ml-2">
+              <span class="key-token">
+                {{name}}
+              </span>
+            ={{if (is-string value) "\""}}
+            <ComponentTreeArg @value={{value}} />
+            {{if (is-string value) "\""}}
+          </div>
+        {{/each-in}}
       {{/if}}
     </code>
   </div>

diff --git a/app/components/object-inspector/property.ts b/app/components/object-inspector/property.ts
@@ -119,8 +119,8 @@ export default class ObjectInspectorProperty extends Component<ObjectInspectorPr
   }
 
   get cannotEdit() {
-    if (this.args.model.name === '...' || !this.isCalculated) return true;
-    return this.isFunction || this.isOverridden || this.readOnly;
+    if (this.args.model.name === '...' || !this.isCalculated || this.readOnly) return true;
+    return this.args.model?.value?.type !== 'type-string' && this.args.model?.value?.type !== 'type-number';
   }
 
   @action

diff --git a/app/controllers/component-tree.js b/app/controllers/component-tree.js
@@ -301,15 +301,18 @@ class RenderItem {
   }
 
   get isComponent() {
-    return this.renderNode.type === 'component' || this.renderNode.type === 'remote-element';
+    return (
+      this.renderNode.type === 'component' ||
+      this.renderNode.type === 'remote-element'
+    );
   }
 
   get isModifier() {
     return this.renderNode.type === 'modifier';
   }
 
   get isHtmlTag() {
-    return this.renderNode.type === 'htmlTag';
+    return this.renderNode.type === 'html-element';
   }
 
   get name() {