Add Checkable component for extending. Fix disabled cursor.

Padax · Aug 5, 2021 · 2386fb0 · 2386fb0
1 parent a04e320
commit 2386fb0
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 308 deletions.
diff --git a/wc/components/CheckBox.js b/wc/components/CheckBox.js
diff --git a/wc/components/Radio.js → wc/components/Checkable/Checkable.js b/wc/components/Radio.js → wc/components/Checkable/Checkable.js
@@ -1,14 +1,15 @@
-import WComponent, { DOM, AttributeParser } from "../WComponent.js";
+import WComponent, { DOM, AttributeParser } from "../../WComponent.js";
+
 const stylesheet=`
   label {
-    cursor: pointer;
     display: inline-flex;
     align-items: center;
   }
   input {
     width: 0; hieght: 0;
   }
   .icon {
+    cursor: pointer;
     color: var(--color-gray-30);
   }
   .icon:before {
@@ -20,8 +21,9 @@ const stylesheet=`
   .icon:hover {
     color: var(--color-primary-60);
   }
-  .label {
-    margin-left: 5px;
+  slot {
+    cursor: pointer;
+    margin-left: 8px;
   }
 
   input:checked + .icon:before {
@@ -39,15 +41,18 @@ const stylesheet=`
   input:disabled + .icon,
   input:disabled:active + .icon {
     color: var(--color-gray-10);
+    cursor: default;
   }
   input:disabled + .icon:hover {
     color: var(--color-gray-10);
   }
-  input:disabled + .icon + .label {
+  input:disabled + .icon + slot {
     color: var(--color-gray-30);
+    cursor: default;
   }
 `;
-class Radio extends WComponent{
+
+class Checkable extends WComponent{
   static defaultValues = {
     checked: false,
     disabled: false
@@ -69,7 +74,7 @@ class Radio extends WComponent{
 
     const ctn = DOM.create('label', null, this.shadowRoot);
 
-    const radioProps = { type: 'radio' };
+    const radioProps = { type: this.type };
     const radioAttrs = {};
     if(checked) { radioAttrs.checked = true; }
     if(disabled) { radioAttrs.disabled = true; }
@@ -78,9 +83,9 @@ class Radio extends WComponent{
     const iconProps = { className: 'icon' };
     DOM.create('span', { props: iconProps }, ctn);
 
-    const labelProps = { className: 'label', textContent: this.textContent };
-    DOM.create('span', { props: labelProps }, ctn);
+    DOM.create('slot', {}, ctn);
   }
 }
-Radio.prototype.stylesheet=stylesheet;
-export default Radio;
+Checkable.prototype.stylesheet=stylesheet;
+Checkable.prototype.type = 'radio';
+export default Checkable;
diff --git a/wc/components/Checkable/Checkbox.js b/wc/components/Checkable/Checkbox.js
@@ -0,0 +1,21 @@
+import Checkable from "./Checkable.js";
+
+const stylesheet=`
+  .icon:before {
+    content: '\\f292';
+  }
+  input:checked + .icon:before {
+    content: '\\f28e';
+    font-family: var(--icon-font-filled)
+  }
+`;
+
+class Checkbox extends Checkable{
+  constructor() {
+    super();
+  }
+}
+Checkbox.prototype.stylesheet += stylesheet;
+Checkbox.prototype.type = 'checkbox';
+
+export default Checkbox;
diff --git a/wc/components/Checkable/Radio.js b/wc/components/Checkable/Radio.js
@@ -0,0 +1,18 @@
+import Checkable from "./Checkable.js";
+const stylesheet=`
+  .icon:before {
+    content: '\\f644';
+  }
+  input:checked + .icon:before {
+    content: '\\f64e';
+    font-family: var(--icon-font-filled)
+  }
+`;
+class Radio extends Checkable{
+  constructor() {
+    super();
+  }
+}
+Radio.prototype.stylesheet += stylesheet;
+Radio.prototype.type = 'radio';
+export default Radio;