@daracl/form 0.0.12 → 0.0.13

package/src/renderer/CheckboxRender.ts

@@ -1,214 +0,0 @@
-import { FormField, ValuesInfo } from "@t/FormField";
-import Render from "./Render";
-import * as utils from "src/util/utils";
-import { ValidResult } from "@t/ValidResult";
-import { RULES } from "src/constants";
-import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
-import { customChangeEventCall } from "src/event/renderEvents";
-import DaraForm from "src/DaraForm";
-
-export default class CheckboxRender extends Render {
-  private defaultCheckValue: any[] = [];
-
-  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
-    super(daraForm, field, rowElement);
-
-    this.defaultCheckValue = [];
-    let initDefaultValue = [] as any;
-    if (!utils.isUndefined(field.defaultValue)) {
-      if (utils.isArray(field.defaultValue)) {
-        initDefaultValue = field.defaultValue;
-      } else {
-        initDefaultValue = [field.defaultValue];
-      }
-    }
-
-    const valueKey = CheckboxRender.valuesValueKey(field);
-
-    if (utils.isUndefined(this.field.listItem)) {
-      this.setValueItems([{ label: "", value: "Y" }]);
-    }
-
-    let initDefaultValueFlag = false;
-    this.field.listItem?.list?.forEach((item) => {
-      let itemValue = item[valueKey];
-      if (item.selected) {
-        this.defaultCheckValue.push(itemValue ? itemValue : true);
-      }
-      if (initDefaultValue.includes(itemValue)) {
-        initDefaultValueFlag = true;
-      }
-    });
-
-    this.defaultCheckValue = initDefaultValueFlag ? initDefaultValue : this.defaultCheckValue;
-
-    this.mounted();
-    this.setDefaultOption();
-    this.setValue(this.defaultCheckValue, false);
-  }
-
-  public mounted() {
-    this.initEvent();
-  }
-
-  public initEvent() {
-    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
-
-    checkboxes.forEach((ele) => {
-      ele.addEventListener("change", (e: Event) => {
-        customChangeEventCall(this.field, e, this, this.getValue());
-        this.valid();
-      });
-    });
-  }
-
-  public getSelector() {
-    return `input[type="checkbox"][name="${this.field.$xssName}"]`;
-  }
-
-  createField() {
-    const field = this.field;
-
-    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
-
-    const templates: string[] = [];
-    const fieldName = field.$xssName;
-
-    const labelKey = Render.valuesLabelKey(field);
-    const valueKey = Render.valuesValueKey(field);
-
-    templates.push(` <div class="df-field"><div class="field-group">`);
-    field.listItem?.list?.forEach((val) => {
-      const checkVal = val[valueKey];
-      templates.push(`
-          <span class="field ${field.listItem.orientation == "vertical" ? "vertical" : "horizontal"}">
-              <label>
-                  <input type="checkbox" name="${fieldName}" value="${checkVal ? utils.replaceXss(checkVal) : ""}" class="form-field checkbox" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}  />
-                  ${Render.valuesLabelValue(labelKey, val)}
-              </label>
-          </span>
-      `);
-    });
-    templates.push(`<i class="daracl-icon help-icon"></i></div></div> ${Render.getDescriptionTemplate(field)}<div class="help-message"></div>`);
-
-    fieldContainerElement.innerHTML = templates.join("");
-  }
-
-  public setValueItems(items: any): void {
-    const containerEle = this.rowElement.querySelector(".df-field-container");
-    if (containerEle) {
-      if (this.field.listItem) {
-        this.field.listItem.list = items;
-      } else {
-        this.field.listItem = {
-          list: items,
-        } as ValuesInfo;
-      }
-
-      this.createField();
-
-      if (!utils.isBlank(this.field.$value)) {
-        const currentValue = this.field.$value;
-        this.field.$value = "";
-        this.setValue(currentValue);
-      }
-    }
-  }
-
-  getValue() {
-    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
-
-    if (checkboxes.length > 1) {
-      const checkValue: any[] = [];
-      checkboxes.forEach((ele) => {
-        const checkEle = ele as HTMLInputElement;
-        if (checkEle.checked) {
-          checkValue.push(checkEle.value);
-        }
-      });
-      return checkValue;
-    } else {
-      const checkElement = this.rowElement.querySelector(`[name="${this.field.$xssName}"]`) as HTMLInputElement;
-
-      if (checkElement?.checked) {
-        return checkElement.value ? checkElement.value : true;
-      }
-
-      return checkElement.value ? "" : false;
-    }
-  }
-
-  setValue(value: any, changeCheckFlag?: boolean): void {
-    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
-      value = this.field.$value;
-    }
-
-    this.field.$value = value;
-    if (value === true) {
-      (this.rowElement.querySelector(`[name="${this.field.$xssName}"]`) as HTMLInputElement).checked = true;
-      return;
-    }
-
-    if (value === false) {
-      (this.rowElement.querySelector(`[name="${this.field.$xssName}"]`) as HTMLInputElement).checked = false;
-      return;
-    }
-
-    let valueArr: any[] = [];
-    if (Array.isArray(value)) {
-      valueArr = value;
-    } else {
-      valueArr.push(value);
-    }
-
-    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
-
-    checkboxes.forEach((ele) => {
-      (ele as HTMLInputElement).checked = false;
-    });
-
-    valueArr.forEach((val) => {
-      const ele = this.rowElement.querySelector(`[name="${this.field.$xssName}"][value="${val}"]`) as HTMLInputElement;
-      if (ele) ele.checked = true;
-    });
-  }
-
-  reset() {
-    if (this.field.listItem?.list?.length == 1 && this.defaultCheckValue.length == 1) {
-      this.setValue(true, false);
-    } else {
-      this.setValue(this.defaultCheckValue, false);
-    }
-    this.setDisabled(false);
-    resetRowElementStyleClass(this.rowElement);
-  }
-
-  getElement(): any {
-    return this.rowElement.querySelectorAll(`[name="${this.field.$xssName}"]`);
-  }
-
-  public focus() {
-    const elements = this.getElement();
-
-    if (elements && elements.length > 0) {
-      this.getElement()[0].focus();
-    }
-  }
-
-  valid(): any {
-    const value = this.getValue();
-
-    let validResult: ValidResult | boolean = true;
-
-    if (this.field.required && utils.isArray(value)) {
-      if ((value as any[]).length < 1) {
-        validResult = { name: this.field.name, constraint: [] };
-        validResult.constraint.push(RULES.REQUIRED);
-      }
-    }
-
-    invalidMessage(this.field, this.rowElement, validResult);
-
-    return validResult;
-  }
-}

package/src/renderer/CustomRender.ts

@@ -1,100 +0,0 @@
-import { FormField } from "@t/FormField";
-import Render from "./Render";
-import { invalidMessage, resetRowElementStyleClass } from "src/util/validUtils";
-import DaraForm from "src/DaraForm";
-import * as utils from "src/util/utils";
-import { stringValidator } from "src/rule/stringValidator";
-
-export default class CustomRender extends Render {
-  private customFunction;
-
-  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
-    super(daraForm, field, rowElement);
-    if (field.renderer) {
-      this.customFunction = field.renderer;
-      this.mounted();
-      this.setDefaultOption();
-      this.setDefaultInfo();
-    } else {
-      this.customFunction = {} as any;
-    }
-  }
-
-  mounted() {
-    if (this.customFunction.mounted) {
-      (this.customFunction.mounted as any).call(this, this.field, this.rowElement);
-    }
-  }
-
-  static isDataRender(): boolean {
-    return false;
-  }
-
-  createField() {
-    const field = this.field;
-
-    const fieldTemplate = utils.isEmpty(field.template) ? "" : utils.isString(field.template) ? field.template : field.template();
-
-    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
-
-    fieldContainerElement.innerHTML = ` <div class="df-field">
-        ${fieldTemplate}
-        </div>
-          ${Render.getDescriptionTemplate(field)}
-        <div class="help-message"></div>`;
-  }
-
-  getValue() {
-    if (this.customFunction.getValue) {
-      return (this.customFunction.getValue as any).call(this, this.field, this.rowElement);
-    }
-    return "";
-  }
-
-  setValue(value: any, changeCheckFlag?: boolean): void {
-    if (this.customFunction.setValue) {
-      if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
-        value = this.field.$value;
-      }
-      (this.customFunction.setValue as any).call(this, value, this.field, this.rowElement);
-    }
-
-    this.field.$value = value;
-  }
-
-  reset() {
-    this.setDefaultInfo();
-    resetRowElementStyleClass(this.rowElement);
-  }
-
-  getElement() {
-    if (this.customFunction.getElement) {
-      return (this.customFunction.getElement as any).call(this, this.field, this.rowElement);
-    }
-    return null;
-  }
-
-  valid(): any {
-    if (this.customFunction.valid) {
-      const validResult = (this.customFunction.valid as any).call(this, this.field, this.rowElement);
-
-      invalidMessage(this.field, this.rowElement, validResult);
-
-      return;
-    }
-    const validResult = stringValidator(this.getValue(), this.field);
-
-    invalidMessage(this.field, this.rowElement, validResult);
-
-    return validResult;
-  }
-
-  /**
-   * focus
-   */
-  focus(): void {
-    if (this.customFunction.focus) {
-      (this.customFunction.focus as any).call(this, this.field, this.rowElement);
-    }
-  }
-}

package/src/renderer/DateRender.ts

@@ -1,104 +0,0 @@
-import { FormField } from "@t/FormField";
-import Render from "./Render";
-import { stringValidator } from "src/rule/stringValidator";
-import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
-import DaraForm from "src/DaraForm";
-import DateTimePicker from "@daracl/datetimepicker";
-
-import * as utils from "src/util/utils";
-
-export default class DateRender extends Render {
-  private element: HTMLInputElement;
-  private dateObj: any;
-
-  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
-    super(daraForm, field, rowElement);
-
-    this.mounted();
-    this.setDefaultOption();
-    this.setDefaultInfo();
-  }
-
-  mounted() {
-    let dateOnSelectEvent: any;
-    this.field.customOptions = Object.assign({}, this.field.customOptions);
-    if (typeof this.field.customOptions.onSelect !== "undefined") {
-      dateOnSelectEvent = typeof this.field.customOptions.onSelect;
-    }
-
-    if (utils.isUndefined(this.field.customOptions.mode)) {
-      if (this.field.renderType == "datemonth" || this.field.renderType == "datehour") {
-        this.field.customOptions.mode = this.field.renderType.replace("date", "");
-      } else {
-        this.field.customOptions.mode = this.field.renderType;
-      }
-    }
-
-    this.field.customOptions.onSelect = (dt: any, e: Event) => {
-      if (dateOnSelectEvent) {
-        dateOnSelectEvent(dt, e);
-      }
-
-      this.setValue(dt);
-
-      this.valid();
-    };
-
-    this.dateObj = new DateTimePicker(this.element, this.field.customOptions, {} as any);
-
-    //this.loadDate();
-  }
-
-  // async loadDate() {
-  //   const DateTimePicker = await import("@daracl/datetimepicker");
-  //   this.dateObj = new DateTimePicker.default(this.element, this.field.customOptions, {} as any);
-  // }
-
-  createField() {
-    const field = this.field;
-
-    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
-
-    fieldContainerElement.innerHTML = `
-    <div class="df-field">
-      <input type="text" name="${field.$xssName}" class="form-field text help-icon" autocomplete="off" readonly/>
-     </div>
-     ${Render.getDescriptionTemplate(field)}
-     <div class="help-message"></div>
-     `;
-
-    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`) as HTMLInputElement;
-  }
-
-  getValue() {
-    return this.element.value;
-  }
-
-  setValue(value: any, changeCheckFlag?: boolean): void {
-    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
-      this.element.value = this.field.$value;
-      return;
-    }
-
-    this.field.$value = value;
-    this.element.value = value;
-  }
-
-  reset() {
-    this.setDefaultInfo();
-    this.setDisabled(false);
-    resetRowElementStyleClass(this.rowElement);
-  }
-
-  getElement(): HTMLInputElement {
-    return this.element;
-  }
-
-  valid(): any {
-    const validResult = stringValidator(this.getValue(), this.field);
-
-    invalidMessage(this.field, this.rowElement, validResult);
-
-    return validResult;
-  }
-}

package/src/renderer/DropdownRender.ts

@@ -1,149 +0,0 @@
-import { FormField, ValuesInfo } from "@t/FormField";
-import Render from "./Render";
-import { ValidResult } from "@t/ValidResult";
-import { RULES } from "src/constants";
-import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
-import { dropdownChangeEvent } from "src/event/renderEvents";
-import DaraForm from "src/DaraForm";
-import * as utils from "src/util/utils";
-import Lanauage from "src/util/Lanauage";
-
-export default class DropdownRender extends Render {
-  private element: HTMLSelectElement;
-  private defaultSelected;
-
-  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
-    super(daraForm, field, rowElement);
-
-    let initDefaultValue = "";
-
-    if (!utils.isUndefined(field.defaultValue)) {
-      initDefaultValue = field.defaultValue;
-    }
-
-    const valueKey = DropdownRender.valuesValueKey(field);
-    let initDefaultValueFlag = false;
-    this.field.listItem?.list?.forEach((item) => {
-      let itemValue = item[valueKey];
-      if (item.selected) {
-        this.defaultSelected = itemValue;
-      }
-      if (itemValue == initDefaultValue) {
-        initDefaultValueFlag = true;
-      }
-    });
-
-    if (initDefaultValueFlag) {
-      this.defaultSelected = initDefaultValue;
-    } else if (!this.defaultSelected) {
-      if (field.customOptions?.disableDefaultOption === true) {
-        this.defaultSelected = this.field.listItem?.list?.length > 0 ? this.field.listItem.list[0][valueKey] || "" : "";
-      }
-    }
-
-    if (utils.isUndefined(this.defaultSelected)) {
-      this.defaultSelected = "";
-    }
-
-    this.mounted();
-    this.setDefaultOption();
-    this.setValue(this.defaultSelected, false);
-  }
-
-  mounted() {
-    dropdownChangeEvent(this.field, this.element, this);
-  }
-
-  createField() {
-    const field = this.field;
-
-    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
-
-    let template = ` <div class="df-field"><select name="${field.$xssName}" class="form-field dropdown">
-          ${this.dropdownValuesTemplate(field)}
-          </select> <i class="help-icon"></i></div>
-                ${Render.getDescriptionTemplate(field)}
-      <div class="help-message"></div>
-    `;
-    fieldContainerElement.innerHTML = template;
-
-    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`) as HTMLSelectElement;
-  }
-
-  public setValueItems(items: any): void {
-    if (this.field.listItem) {
-      this.field.listItem.list = items;
-    } else {
-      this.field.listItem = {
-        list: items,
-      } as ValuesInfo;
-    }
-    this.element.innerHTML = this.dropdownValuesTemplate(this.field);
-
-    if (!utils.isBlank(this.field.$value)) {
-      const currentValue = this.field.$value;
-      this.field.$value = "";
-      this.setValue(currentValue);
-    }
-  }
-
-  getValue() {
-    return this.element.value;
-  }
-
-  setValue(value: any, changeCheckFlag?: boolean): void {
-    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
-      this.element.value = this.field.$value;
-      return;
-    }
-    this.field.$value = value;
-    this.element.value = value;
-  }
-
-  reset() {
-    this.setValue(this.defaultSelected, false);
-    this.setDisabled(false);
-    resetRowElementStyleClass(this.rowElement);
-  }
-
-  getElement(): HTMLElement {
-    return this.element;
-  }
-
-  valid(): any {
-    const value = this.getValue();
-
-    let validResult: ValidResult | boolean = true;
-
-    if (this.field.required) {
-      if (value.length < 1) {
-        validResult = { name: this.field.name, constraint: [] };
-        validResult.constraint.push(RULES.REQUIRED);
-      }
-    }
-
-    invalidMessage(this.field, this.rowElement, validResult);
-
-    return validResult;
-  }
-
-  public dropdownValuesTemplate(field: FormField) {
-    const labelKey = Render.valuesLabelKey(field);
-    const valueKey = Render.valuesValueKey(field);
-    let template = "";
-
-    if (field.customOptions?.disableDefaultOption !== true) {
-      template += `<option value="">${Lanauage.getMessage("selection")}</option>`;
-    }
-    field.listItem?.list?.forEach((val) => {
-      const attr = `${val.selected ? "selected" : ""} ${val.disabled ? "disabled" : ""}`;
-      if (utils.isUndefined(val[valueKey]) && val.label) {
-        template += `<option value="${val.value || ""}" ${attr}>${val.label}</option>`;
-      } else {
-        template += `<option value="${val[valueKey]}" ${attr}>${Render.valuesLabelValue(labelKey, val)}</option>`;
-      }
-    });
-
-    return template;
-  }
-}