More shoelace custom element support

src/LiveWeb-Core/LWCustomElement.class.st

@@ -33,6 +33,11 @@ LWCustomElement >> add: aComponent beforeIndex: idx [
 	^ c 
 ]
 
+{ #category : #accessing }
+LWCustomElement >> addClassName: aClassName [ 
+ ^self attrAt: 'class' update: [ :old | (' ' join: { old. aClassName })]
+]
+
 { #category : #accessing }
 LWCustomElement >> attrAt: name [
 	^ attrs at: name
@@ -66,6 +71,11 @@ LWCustomElement >> children [
 	 ]
 ]
 
+{ #category : #accessing }
+LWCustomElement >> className: aClassName [ 
+ ^self attrAt: 'class' update: [ aClassName ]
+]
+
 { #category : #initialization }
 LWCustomElement >> initialize [ 
   super initialize. 
@@ -97,7 +107,7 @@ LWCustomElement >> renderAttrs: h [
 							<< ' ';
 							<< name;
 							<< '="';
-							<< (h escapeAttributeValue: val asString);
+							<< (h escapeHtml: val asString);
 							<< '"' ] ] "skip boolean attributes that are false" ] ]
 ]
 

src/LiveWeb-Core/LWCustomElementSlot.class.st

@@ -0,0 +1,20 @@
+Class {
+	#name : #LWCustomElementSlot,
+	#superclass : #LWSingleContainer,
+	#instVars : [
+		'slot'
+	],
+	#category : #'LiveWeb-Core'
+}
+
+{ #category : #initialization }
+LWCustomElementSlot >> initialize [ 
+ super initialize.
+ containerElement := #div.
+]
+
+{ #category : #accessing }
+LWCustomElementSlot >> slot: slotName [
+  containerAttributes := { #slot -> slotName }.
+
+]

src/LiveWeb-Developer/LWDevClassView.class.st

@@ -1,15 +1,22 @@
 Class {
 	#name : #LWDevClassView,
-	#superclass : #LWBulmaComponent,
+	#superclass : #LWComponent,
 	#instVars : [
 		'classDef',
 		'methods',
 		'cls',
-		'export'
+		'export',
+		'slot'
 	],
 	#category : #'LiveWeb-Developer'
 }
 
+{ #category : #accessing }
+LWDevClassView >> children [ 
+ ^ ReadStream on: { export. classDef. methods  }
+
+]
+
 { #category : #accessing }
 LWDevClassView >> cls: aClass [
  cls := aClass.
@@ -56,18 +63,36 @@ LWDevClassView >> initialize [
  methods := LWSingleContainer new.
 ]
 
+{ #category : #accessing }
+LWDevClassView >> render: h [
+ h div: {#slot->slot. #style-> 'display: inline-flex; flex-direction: column; height: 95vh; overflow-y: scroll'}
+   with: [  
+	  export render: h.
+	  classDef render: h.
+	  methods render: h
+	]
+]
+
 { #category : #rendering }
 LWDevClassView >> renderClassDefOn: h [
   h div: { #class -> 'section' } with: [  
-  cls ifNil: [ h div: 'No class selected'. ^ nil ].
-  h div: [ 
-		h strong: 'Name: '; span: cls name
-		"FIXME: show slots, superclass and so on"
-  ] 
-]
+  cls 
+	ifNil: [ h div: 'No class selected'. ]
+   ifNotNil: [
+	  h div: [ 
+		 h strong: 'Name: '; span: cls name
+		 "FIXME: show slots, superclass and so on"
+    ] 
+  ]
+ ]
 
 ]
 
+{ #category : #accessing }
+LWDevClassView >> slot: slotName [ 
+ slot := slotName
+]
+
 { #category : #accessing }
 LWDevClassView >> view: view [
  ^view flexCol 

src/LiveWeb-Developer/LWDevListing.class.st

@@ -4,7 +4,8 @@ Class {
 	#instVars : [
 		'filter',
 		'export',
-		'listing'
+		'listing',
+		'slot'
 	],
 	#category : #'LiveWeb-Developer'
 }
@@ -72,8 +73,7 @@ LWDevListing >> renderListingOn: h [
 
 { #category : #rendering }
 LWDevListing >> renderOn: h [
-
-	h div: { #style -> 'height: 95vh;' } with: [
+	h div: { #style -> 'display: inline-block; height: 95vh;'. #slot-> slot } with: [
 		export render: h.
 		h input: {
 				(#placeholder -> 'filter...').
@@ -98,3 +98,8 @@ LWDevListing >> select: value [
 LWDevListing >> selectJSName [ 
  ^ 'select{1}' format: { ('' join: self class name splitCamelCase allButFirst) }
 ]
+
+{ #category : #accessing }
+LWDevListing >> slot: slotName [ 
+ slot := slotName
+]

src/LiveWeb-Developer/LWDevMain.class.st

@@ -1,9 +1,54 @@
 Class {
 	#name : #LWDevMain,
-	#superclass : #LWBulmaComponent,
+	#superclass : #LWComponent,
+	#instVars : [
+		'classView',
+		'pkgView',
+		'pkgListing',
+		'splitMain',
+		'splitListing',
+		'spotterDialog'
+	],
 	#category : #'LiveWeb-Developer'
 }
 
+{ #category : #accessing }
+LWDevMain >> children [ 
+ ^ ReadStream on: { splitMain. spotterDialog }
+
+]
+
+{ #category : #initialization }
+LWDevMain >> initialize [ 
+  super initialize.
+   classView := LWDevClassView new.
+   pkgView := LWDevPackageView new classView: classView.
+   pkgListing := LWDevPackageMenu new pkgView: pkgView.
+   splitListing := SlSplitPanel new 
+		vertical: false;
+		start: pkgListing;
+		end: pkgView.
+   splitMain := SlSplitPanel new 
+		vertical: false;
+		start: splitListing;
+		end: classView.
+	spotterDialog := SlDialog new 
+		className: 'spotter';
+		label: 'Jump to class';
+		add: (LWBlockContainer new block: [ :h | h input: { #placeholder -> 'type classname part' } ]);
+		yourself. 
+
+]
+
+{ #category : #rendering }
+LWDevMain >> render: h [ 
+	h div: { #class -> 'lwDevPanel' } 
+	  with: [ 
+			spotterDialog render: h.
+			splitMain render: h
+	 ]
+]
+
 { #category : #accessing }
 LWDevMain >> view: view [
  | pkgView classView |

src/LiveWeb-Developer/LWDevPage.class.st

@@ -1,6 +1,6 @@
 Class {
 	#name : #LWDevPage,
-	#superclass : #LWBulmaPage,
+	#superclass : #SlLWPage,
 	#category : #'LiveWeb-Developer'
 }
 
@@ -38,7 +38,14 @@ console.log(e.classList);
 			exec: function(editor) { window.event.preventDefault(); lwCompileMethod(side, editor.session.getValue()); },
          readOnly: true});
        }';
-		 << (LWDevHTMLCompiler htmlToJsonScript);
+		<< (LWDevHTMLCompiler htmlToJsonScript);
+		"Add shift+enter listener to open spotter"
+		<< 'window.addEventListener("keydown", e => { 
+           if(e.key=="Enter" && e.shiftKey) { 
+		     let spotter = document.querySelector(".spotter");
+		       spotter.setAttribute("open",true); 
+		    }
+		   });';
 		<< '</script>' ]);
 		yourself
 

src/LiveWeb-Shoelace/SlAlert.class.st

@@ -31,18 +31,6 @@ SlAlert >> closable: newValue [
 		self attrAt: 'closable' update: [ newValue ]
 ]
 
-{ #category : #'as yet unclassified' }
-SlAlert >> default [
-		^ self slotAt: 'default'.
-]
-
-{ #category : #'as yet unclassified' }
-SlAlert >> default: aComponentOrString [
-		self slotAt: 'default' put: (aComponentOrString isString 
-		  ifTrue: [ LWBlockContainer new block: [ :h | h span: aComponentOrString ] ]
-		  ifFalse: [ aComponentOrString ]).
-]
-
 { #category : #'as yet unclassified' }
 SlAlert >> duration [
 		^ self attrAt: 'duration'
@@ -61,9 +49,7 @@ SlAlert >> icon [
 
 { #category : #'as yet unclassified' }
 SlAlert >> icon: aComponentOrString [
-		self slotAt: 'icon' put: (aComponentOrString isString 
-		  ifTrue: [ LWBlockContainer new block: [ :h | h span: aComponentOrString ] ]
-		  ifFalse: [ aComponentOrString ]).
+		self slotAt: 'icon' put: (self asSlotComponent: aComponentOrString).
 ]
 
 { #category : #'as yet unclassified' }

src/LiveWeb-Shoelace/SlCheckbox.class.st

@@ -24,18 +24,6 @@ SlCheckbox >> checked: newValue [
 		self attrAt: 'checked' update: [ newValue ]
 ]
 
-{ #category : #'as yet unclassified' }
-SlCheckbox >> default [
-		^ self slotAt: 'default'.
-]
-
-{ #category : #'as yet unclassified' }
-SlCheckbox >> default: aComponentOrString [
-		self slotAt: 'default' put: (aComponentOrString isString 
-		  ifTrue: [ LWBlockContainer new block: [ :h | h span: aComponentOrString ] ]
-		  ifFalse: [ aComponentOrString ]).
-]
-
 { #category : #'as yet unclassified' }
 SlCheckbox >> defaultChecked [
 		^ self attrAt: 'defaultChecked'

src/LiveWeb-Shoelace/SlDialog.class.st

@@ -0,0 +1,58 @@
+Class {
+	#name : #SlDialog,
+	#superclass : #SlElement,
+	#category : #'LiveWeb-Shoelace'
+}
+
+{ #category : #'as yet unclassified' }
+SlDialog class >> elementAttributes [ 
+ ^#( 
+ (open boolean)
+)
+]
+
+{ #category : #'as yet unclassified' }
+SlDialog class >> elementSlots [ 
+ ^#( label 'header-actions' 'footer' )
+]
+
+{ #category : #'as yet unclassified' }
+SlDialog >> footer [
+		^ self slotAt: 'footer'.
+]
+
+{ #category : #'as yet unclassified' }
+SlDialog >> footer: aComponentOrString [
+		self slotAt: 'footer' put: (self asSlotComponent: aComponentOrString).
+]
+
+{ #category : #'as yet unclassified' }
+SlDialog >> headerActions [
+		^ self slotAt: 'header-actions'.
+]
+
+{ #category : #'as yet unclassified' }
+SlDialog >> headerActions: aComponentOrString [
+		self slotAt: 'header-actions' put: (self asSlotComponent: aComponentOrString).
+]
+
+{ #category : #'as yet unclassified' }
+SlDialog >> label [
+		^ self slotAt: 'label'.
+]
+
+{ #category : #'as yet unclassified' }
+SlDialog >> label: aComponentOrString [
+		self slotAt: 'label' put: (self asSlotComponent: aComponentOrString).
+]
+
+{ #category : #'as yet unclassified' }
+SlDialog >> open [
+		^ self attrAt: 'open'
+]
+
+{ #category : #'as yet unclassified' }
+SlDialog >> open: newValue [
+		self assert: (newValue isKindOf: Boolean).
+		self attrAt: 'open' update: [ newValue ]
+]