@windwalker-io/unicorn-next 0.1.0 → 0.1.1

package/src/module/show-on.ts

@@ -1,173 +1,173 @@
-
-import { useUniDirective } from '../composable';
-import { fadeIn, fadeOut, selectAll, selectOne, module } from '../service';
-import { difference } from 'lodash-es';
-
-type HTMLInputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-type Conditions = Record<string, any>;
-
-export class ShowOn {
-  el!: HTMLElement;
-  input!: HTMLInputTypes;
-  conditions: Conditions = {};
-  targets = {};
-  defaultReadonly = false;
-  initialDisplay!: string;
-
-  constructor(el: HTMLElement, conditions: Conditions) {
-    this.el = el;
-    this.input = this.el.querySelector<HTMLInputTypes>(
-      this.el.dataset.inputSelector || '[data-field-input]'
-    )!;
-    this.conditions = conditions;
-
-    this.init();
-  }
-
-  init() {
-    this.initialDisplay = window.getComputedStyle(this.el).display || 'block';
-
-    for (const selector in this.conditions) {
-      const value = this.conditions[selector];
-
-      const target = selectOne<HTMLElement>(selector)!;
-
-      if (this.input) {
-        this.defaultReadonly = this.input.hasAttribute('readonly');
-      }
-
-      let listenTarget: HTMLInputTypes[];
-
-      if (target.nodeName === 'DIV') {
-        listenTarget = Array.from(target.querySelectorAll<HTMLInputTypes>('input, select, textarea'));
-      } else {
-        listenTarget = [target as HTMLInputTypes];
-      }
-
-      selectAll(listenTarget, (ele) => {
-        ele.addEventListener('change', () => {
-          this.updateShowState(target, value);
-        });
-      });
-
-      this.updateShowState(target, value, 1);
-    }
-  }
-
-  updateShowState(target: HTMLElement, value: any, duration = 300) {
-    const matched = this.isValueMatched(target, value);
-
-    if (matched) {
-      setTimeout(() => {
-        fadeIn(this.el, duration, this.initialDisplay);
-      }, duration + 30);
-    } else {
-      if (this.input) {
-        this.defaultReadonly = this.input.hasAttribute('readonly');
-      }
-
-      fadeOut(this.el, duration);
-    }
-
-    if (this.input) {
-      if (matched) {
-        if (!this.defaultReadonly) {
-          this.input.removeAttribute('readonly');
-        }
-      } else {
-        this.input.setAttribute('readonly', 'readonly');
-      }
-    }
-  }
-
-  isValueMatched(target: HTMLElement, value: any) {
-    let targetValue: any = null;
-
-    const type = this.nodeType(target);
-
-    switch (type) {
-      case 'input':
-      case 'textarea':
-        targetValue = (target as HTMLInputElement).value;
-        break;
-      case 'select':
-        if (!(target as HTMLSelectElement).multiple) {
-          targetValue = (target as HTMLSelectElement).value;
-        } else {
-          targetValue = selectAll(target.querySelectorAll('option'))
-            .filter(option => option.selected)
-            .map(option => option.value);
-        }
-        break;
-
-      case 'checkbox':
-        targetValue = (target as HTMLInputElement).checked ? (target as HTMLInputElement).value : [null, false];
-        break;
-
-      case 'radio':
-        targetValue = target.querySelector<HTMLInputElement>('input[type=radio]:checked')?.value;
-        break;
-    }
-
-    if (Array.isArray(value)) {
-      if (Array.isArray(targetValue)) {
-        return difference(value, targetValue).length === 0;
-      }
-
-      return value.indexOf(targetValue) !== -1;
-    }
-
-    if (targetValue && Array.isArray(targetValue)) {
-      return targetValue.indexOf(value) !== -1;
-    }
-
-    return value == targetValue;
-  }
-
-  /**
-   * @see https://github.com/nickjackson/val/blob/master/index.js#L55
-   * @param el
-   * @returns {string}
-   */
-  nodeType(el: HTMLElement): "select" | "textarea" | "checkbox" | "input" | "radio" {
-    var node = el.nodeName.toLowerCase();
-    var type = (el as HTMLInputElement).type;
-
-    if (node === 'select') {
-      return 'select';
-    }
-
-    if (node === 'textarea') {
-      return 'textarea';
-    }
-
-    if (node === 'input') {
-      if (type === 'checkbox') {
-        return 'checkbox';
-      }
-
-      return 'input';
-    }
-
-    if (node === 'div') {
-      if (el.querySelector('input[type=radio]')) {
-        return 'radio';
-      }
-    }
-
-    return 'input';
-  }
-}
-
-export const ready = useUniDirective('show-on', {
-  mounted(el, { value }) {
-    module<HTMLElement, HTMLElement>(el, 'show.on', (el) => {
-      return new ShowOn(el, JSON.parse(value));
-    });
-  }
-});
-
-export interface ShowOnModule {
-  ShowOn: typeof ShowOn;
-  ready: typeof ready;
-}
+
+import { useUniDirective } from '../composable';
+import { fadeIn, fadeOut, selectAll, selectOne, module } from '../service';
+import { difference } from 'lodash-es';
+
+type HTMLInputTypes = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+type Conditions = Record<string, any>;
+
+export class ShowOn {
+  el!: HTMLElement;
+  input!: HTMLInputTypes;
+  conditions: Conditions = {};
+  targets = {};
+  defaultReadonly = false;
+  initialDisplay!: string;
+
+  constructor(el: HTMLElement, conditions: Conditions) {
+    this.el = el;
+    this.input = this.el.querySelector<HTMLInputTypes>(
+      this.el.dataset.inputSelector || '[data-field-input]'
+    )!;
+    this.conditions = conditions;
+
+    this.init();
+  }
+
+  init() {
+    this.initialDisplay = window.getComputedStyle(this.el).display || 'block';
+
+    for (const selector in this.conditions) {
+      const value = this.conditions[selector];
+
+      const target = selectOne<HTMLElement>(selector)!;
+
+      if (this.input) {
+        this.defaultReadonly = this.input.hasAttribute('readonly');
+      }
+
+      let listenTarget: HTMLInputTypes[];
+
+      if (target.nodeName === 'DIV') {
+        listenTarget = Array.from(target.querySelectorAll<HTMLInputTypes>('input, select, textarea'));
+      } else {
+        listenTarget = [target as HTMLInputTypes];
+      }
+
+      selectAll(listenTarget, (ele) => {
+        ele.addEventListener('change', () => {
+          this.updateShowState(target, value);
+        });
+      });
+
+      this.updateShowState(target, value, 1);
+    }
+  }
+
+  updateShowState(target: HTMLElement, value: any, duration = 300) {
+    const matched = this.isValueMatched(target, value);
+
+    if (matched) {
+      setTimeout(() => {
+        fadeIn(this.el, duration, this.initialDisplay);
+      }, duration + 30);
+    } else {
+      if (this.input) {
+        this.defaultReadonly = this.input.hasAttribute('readonly');
+      }
+
+      fadeOut(this.el, duration);
+    }
+
+    if (this.input) {
+      if (matched) {
+        if (!this.defaultReadonly) {
+          this.input.removeAttribute('readonly');
+        }
+      } else {
+        this.input.setAttribute('readonly', 'readonly');
+      }
+    }
+  }
+
+  isValueMatched(target: HTMLElement, value: any) {
+    let targetValue: any = null;
+
+    const type = this.nodeType(target);
+
+    switch (type) {
+      case 'input':
+      case 'textarea':
+        targetValue = (target as HTMLInputElement).value;
+        break;
+      case 'select':
+        if (!(target as HTMLSelectElement).multiple) {
+          targetValue = (target as HTMLSelectElement).value;
+        } else {
+          targetValue = selectAll(target.querySelectorAll('option'))
+            .filter(option => option.selected)
+            .map(option => option.value);
+        }
+        break;
+
+      case 'checkbox':
+        targetValue = (target as HTMLInputElement).checked ? (target as HTMLInputElement).value : [null, false];
+        break;
+
+      case 'radio':
+        targetValue = target.querySelector<HTMLInputElement>('input[type=radio]:checked')?.value;
+        break;
+    }
+
+    if (Array.isArray(value)) {
+      if (Array.isArray(targetValue)) {
+        return difference(value, targetValue).length === 0;
+      }
+
+      return value.indexOf(targetValue) !== -1;
+    }
+
+    if (targetValue && Array.isArray(targetValue)) {
+      return targetValue.indexOf(value) !== -1;
+    }
+
+    return value == targetValue;
+  }
+
+  /**
+   * @see https://github.com/nickjackson/val/blob/master/index.js#L55
+   * @param el
+   * @returns {string}
+   */
+  nodeType(el: HTMLElement): "select" | "textarea" | "checkbox" | "input" | "radio" {
+    var node = el.nodeName.toLowerCase();
+    var type = (el as HTMLInputElement).type;
+
+    if (node === 'select') {
+      return 'select';
+    }
+
+    if (node === 'textarea') {
+      return 'textarea';
+    }
+
+    if (node === 'input') {
+      if (type === 'checkbox') {
+        return 'checkbox';
+      }
+
+      return 'input';
+    }
+
+    if (node === 'div') {
+      if (el.querySelector('input[type=radio]')) {
+        return 'radio';
+      }
+    }
+
+    return 'input';
+  }
+}
+
+export const ready = useUniDirective('show-on', {
+  mounted(el, { value }) {
+    module<HTMLElement, HTMLElement>(el, 'show.on', (el) => {
+      return new ShowOn(el, JSON.parse(value));
+    });
+  }
+});
+
+export interface ShowOnModule {
+  ShowOn: typeof ShowOn;
+  ready: typeof ready;
+}