Make List Component align with Styling Guideline #78

Padax · Aug 3, 2021 · 2081b8c · 2081b8c
1 parent 7ef2b8c
commit 2081b8c
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -65,11 +65,36 @@
 		<div slot="item">Item 2</div>
 		<div slot="item">Item 3</div>
 	</wc-list>
+	<wc-list mark="outline-circle">
+		<div slot="item">Item 1</div>
+		<div slot="item">Item 2</div>
+		<div slot="item">Item 3</div>
+	</wc-list>
 	<wc-list mark="number">
 		<div slot="item">Item 1</div>
 		<div slot="item">Item 2</div>
 		<div slot="item">Item 3</div>
 	</wc-list>
+	<wc-list appearance="panel">
+		<div slot="item">Item 1</div>
+		<div slot="item">Item 2</div>
+		<div slot="item">Item 3</div>
+	</wc-list>
+	<wc-list mark="outline-circle" appearance="divided-panel">
+		<div slot="item">Item 1</div>
+		<div slot="item">Item 2</div>
+		<div slot="item">Item 3</div>
+	</wc-list>
+	<wc-list appearance="divided-panel">
+		<div slot="item">Item 1</div>
+		<div slot="item">Item 2</div>
+		<div slot="item">Item 3</div>
+	</wc-list>
+	<wc-list mark="circle" appearance="divided-panel">
+		<div slot="item">Item 1</div>
+		<div slot="item">Item 2</div>
+		<div slot="item">Item 3</div>
+	</wc-list>
   <wc-heading level="3" underlined>Code</wc-heading>
   <wc-code>
     //Javascript Example

diff --git a/wc/components/List.js b/wc/components/List.js
@@ -1,21 +1,50 @@
 import WComponent, { DOM, AttributeParser } from "../WComponent.js";
 const stylesheet=`
+  :host{
+    counter-reset:number;
+  }
   div.list{
+    margin:1rem 0px;
+  }
+  div.list[appearance$='panel']{
     border:1px solid var(--color-gray-20);
     border-radius:4px;
-    margin:1rem 0px;
   }
   div.list>::slotted([slot='item']){
+    display:flex;align-items:center;
     padding:0.5rem;
+  }
+  div.list[appearance='divided-panel']>::slotted([slot='item']){
     border-bottom:1px solid var(--color-gray-20);
   }
+  div.list>::slotted([slot='item']:hover){
+    background-color:var(--color-gray-10);
+  }
+  div.list>::slotted([slot='item']:active){
+    background-color:var(--color-gray-20);
+  }
   div.list>::slotted([slot='item']:last-child){
     border-bottom-width:0px;
   }
+  div.list[mark='circle']>::slotted([slot='item']):before{
+    content:'\\fd2c';
+    font-family:var(--icon-font-filled);
+  }
+  div.list[mark='outline-circle']>::slotted([slot='item']):before{
+    content:'\\fd23';
+    font-family:var(--icon-font-regular);
+  }
+  div.list[mark='number']>::slotted([slot='item']):before{
+    counter-increment:number;
+    content:counter(number) '.';
+    margin-left:2px;
+    margin-right:5px;
+  }
 `;
 class List extends WComponent{
   static defaultValues={
-    mark:"none"
+    mark:"none",
+    appearance:"normal"
   };
   constructor(){
     super();
@@ -24,33 +53,18 @@ class List extends WComponent{
     const mark=AttributeParser.parseStringAttr(
       this.getAttribute("mark"),
       this.getDefaultValueByName("mark"),
-      /none|circle|number/
+      /^none$|^circle$|^outline-circle$|^number$/
+    );
+    const appearance=AttributeParser.parseStringAttr(
+      this.getAttribute("appearance"),
+      this.getDefaultValueByName("appearance"),
+      /^normal$|^panel$|^divided-panel$/
     );
-    const attrs={};
-    for(let i=0;i<this.attributes.length;i++){
-      attrs[this.attributes[i].name]=this.attributes[i].value;
-    }
+    const attrs={
+      mark, appearance
+    };
     const list=DOM.create("div", {props:{className:"list"}, attrs:attrs}, this.shadowRoot);
     DOM.create("slot", {props:{name:"item"}}, list);
-    const items=this.querySelectorAll("[slot='item']");
-    items.forEach((item, index)=>{
-      let markChar="";
-      switch(mark){
-        case "circle":
-          markChar=this.getCircleChar();
-          break;
-        case "number":
-          markChar=this.getNumberChar(index);
-          break;
-      }
-      item.textContent=markChar+item.textContent;
-    });
-  }
-  getCircleChar(){
-    return "● ";
-  }
-  getNumberChar(index){
-    return (index+1)+". ";
   }
 }
 List.prototype.stylesheet=stylesheet;