Fix/checkbox (#270)

packages/docs/variable/SERVICE_WORK_VERSION.ts

@@ -1 +1 @@
-export const SERVICE_WORK_VERSION = "1721041779"
+export const SERVICE_WORK_VERSION = "1721111713"

packages/ranui/components/checkbox/index.less

@@ -7,6 +7,30 @@
   padding: var(--ran-checkbox-host-padding, 0);
   box-sizing: var(--ran-checkbox-host-box-sizing, border-box);
   list-style: var(--ran-checkbox-host-list-style, none);
+  &([disabled]) {
+    .ran-checkbox-input {
+      cursor: var(--ran-checkbox-disabled-cursor, not-allowed);
+      pointer-events: var(--ran-checkbox-disabled-pointer-events, all);
+    }
+    opacity: var(--ran-checkbox-disabled-opacity, 0.6);
+    .ran-checkbox-inner {
+      background-color: var(--ran-checkbox-checked-background-color, #d9d9d9);
+      border: 1px solid #d9d9d9;
+      &::after {
+        cursor: not-allowed;
+        pointer-events: none;
+        opacity: var(--ran-checkbox-checked-after-opacity, 1);
+      }
+    }
+    .ran-checkbox-checked {
+      .ran-checkbox-inner {
+        background-color: var(--ran-checkbox-checked-background-color, #d9d9d9);
+        &::after {
+          opacity: var(--ran-checkbox-checked-after-opacity, 0);
+        }
+      }
+    }
+  }
 }
 .ran-checkbox {
   position: var(--ran-checkbox-position, relative);

packages/ranui/components/checkbox/index.ts

@@ -1,6 +1,6 @@
-import { addClassToElement, removeClassToElement } from 'ranuts/utils';
+import { addClassToElement, create, removeClassToElement } from 'ranuts/utils';
+import type { Chain } from 'ranuts/utils';
 import { HTMLElementSSR, createCustomError, falseList } from '@/utils/index';
-import './index.less';
 
 interface Context {
   checked: boolean;
@@ -10,8 +10,10 @@ export class Checkbox extends (HTMLElementSSR()!) {
   checkInput: HTMLInputElement;
   checkInner: HTMLSpanElement;
   context: Context;
+  container: Chain;
+  _shadowDom: ShadowRoot;
   static get observedAttributes(): string[] {
-    return ['disabled', 'checked'];
+    return ['disabled', 'checked', 'value'];
   }
   constructor() {
     super();
@@ -20,6 +22,12 @@ export class Checkbox extends (HTMLElementSSR()!) {
     this.checkInput.setAttribute('type', 'checkbox');
     this.checkInner = document.createElement('span');
     this.checkInner.setAttribute('class', 'ran-checkbox-inner');
+    this.container = create('div')
+      .setAttribute('class', 'ran-checkbox')
+      .addChild([this.checkInput, this.checkInner]).element;
+    const shadowRoot = this.attachShadow({ mode: 'closed' });
+    this._shadowDom = shadowRoot;
+    shadowRoot.appendChild(this.container);
     this.context = {
       checked: false,
     };
@@ -30,6 +38,23 @@ export class Checkbox extends (HTMLElementSSR()!) {
   set disabled(value: string) {
     this.setAttribute('disabled', value);
   }
+  get value(): string {
+    const checked = this.getAttribute('value');
+    if (falseList.includes(checked)) {
+      this.context.checked = false;
+    }
+    return `${this.context.checked}`;
+  }
+  set value(value: string) {
+    if (falseList.includes(value)) {
+      this.setAttribute('value', 'false');
+      this.context.checked = false;
+    } else {
+      this.setAttribute('value', 'true');
+      this.context.checked = true;
+    }
+    this.updateChecked();
+  }
   get checked(): string {
     const checked = this.getAttribute('checked');
     if (falseList.includes(checked)) {
@@ -50,15 +75,21 @@ export class Checkbox extends (HTMLElementSSR()!) {
   updateChecked = (): void => {
     const { checked } = this.context;
     if (checked) {
-      addClassToElement(this, 'ran-checkbox-checked');
+      this.setAttribute('checked', 'true');
+      this.setAttribute('value', 'true');
+      addClassToElement(this.container, 'ran-checkbox-checked');
     } else {
-      removeClassToElement(this, 'ran-checkbox-checked');
+      this.setAttribute('checked', 'false');
+      this.setAttribute('value', 'false');
+      removeClassToElement(this.container, 'ran-checkbox-checked');
     }
   };
   update = (): void => {
     this.updateChecked();
   };
   onChange = (): void => {
+    if (falseList.includes(this.disabled)) return;
+    if (this.hasAttribute('disabled')) return;
     const { checked } = this.context;
     this.context.checked = !checked;
     this.dispatchEvent(
@@ -71,15 +102,23 @@ export class Checkbox extends (HTMLElementSSR()!) {
     this.update();
   };
   connectedCallback(): void {
-    this.setAttribute('class', 'ran-checkbox');
-    this.appendChild(this.checkInput);
-    this.appendChild(this.checkInner);
     this.addEventListener('click', this.onChange);
   }
   disconnectCallback(): void {
     this.removeEventListener('click', this.onChange);
   }
-  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {}
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (oldValue !== newValue) {
+      if (name === 'checked') {
+        this.checked = newValue;
+        this.value = newValue;
+      }
+      if (name === 'value') {
+        this.checked = newValue;
+        this.value = newValue;
+      }
+    }
+  }
 }
 
 function Custom() {

packages/ranui/index.html

@@ -50,7 +50,9 @@ <h2>loading</h2>
     <r-loading name="drop"></r-loading>
     <r-loading name="pacman"></r-loading>
     <h2>checkbox</h2>
-    <r-checkbox></r-checkbox>
+    <r-checkbox onchange="console.log(this)"></r-checkbox>
+    <r-checkbox disabled checked="false"></r-checkbox>
+    <r-checkbox disabled checked="true"></r-checkbox>
     <h2>popover</h2>
     <r-popover trigger="click,hover" placement="bottom">
       <r-button style="margin: 20px">popover</r-button>

packages/ranui/index.ts

@@ -17,4 +17,3 @@ export * as colorpicker from '@/components/colorpicker';
 export * as popover from '@/components/popover';
 export * as loading from '@/components/loading';
 export * as math from '@/components/math';
-

packages/ranui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.1.10-alpha.8",
+  "version": "0.1.10-alpha.9",
   "description": "UI Component library based on `Web Component`",
   "main": "dist/umd/index.umd.cjs",
   "module": "dist/index.js",

packages/ranui/typings.d.ts

@@ -109,8 +109,6 @@ declare interface Window {
   Hls: HLS;
 }
 
-
-
 namespace JSX {
   interface IntrinsicElements {
     'r-loading': any & {

packages/ranuts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranuts",
-  "version": "0.1.0-alpha.13",
+  "version": "0.1.0-alpha.14",
   "description": "lib",
   "main": "dist/index.umd.cjs",
   "module": "dist/index.js",

packages/ranuts/src/utils/dom.ts

@@ -270,17 +270,28 @@ export class Chain {
     this.element.style.setProperty(name, value);
     return this;
   };
+  // 根据不同的子元素类型，添加元素
+  private addElementByType = (item: Chain | HTMLElement, parent: Element | DocumentFragment): void => {
+    if (item instanceof Chain) {
+      parent.appendChild(item.element);
+    }
+    if (item instanceof HTMLElement) {
+      parent.appendChild(item);
+    }
+  };
   /**
    * @description: 给当前元素添加子元素
    * @return {Chain}
    */
   public addChild = (child: Chain | Chain[]): Chain => {
     if (Array.isArray(child)) {
       const Fragment = document.createDocumentFragment();
-      child.forEach((item) => Fragment.appendChild(item.element));
+      child.forEach((item) => {
+        this.addElementByType(item, Fragment);
+      });
       this.element.appendChild(Fragment);
     } else {
-      this.element.appendChild(child.element);
+      this.addElementByType(child, this.element);
     }
     return this;
   };

packages/ranuts/tsconfig.json

@@ -6,7 +6,6 @@
     "esModuleInterop": true,
     "target": "ESNext",
     "moduleResolution": "bundler",
-    "types": ["./typings.d.ts"],
     "outDir": "dist",
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,