Phenome: use domProps for vue inputs

Author: nolimits4web

src/phenome/components/checkbox.jsx

@@ -18,18 +18,36 @@ export default {
     const props = self.props;
     const { name, value, disabled, readonly, checked, defaultChecked, id, style } = props;
 
-    const inputEl = (
-      <input
-        type="checkbox"
-        name={name}
-        value={value}
-        disabled={disabled}
-        readOnly={readonly}
-        checked={checked}
-        defaultChecked={defaultChecked}
-        onChange={self.onChange.bind(self)}
-      />
-    );
+    let inputEl;
+    if (process.env.COMPILER === 'react') {
+      inputEl = (
+        <input
+          type="checkbox"
+          name={name}
+          value={value}
+          disabled={disabled}
+          readOnly={readonly}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          onChange={self.onChange.bind(self)}
+        />
+      );
+    }
+    if (process.env.COMPILER === 'vue') {
+      inputEl = (
+        <input
+          type="checkbox"
+          name={name}
+          onChange={self.onChange.bind(self)}
+          domProps={{
+            value,
+            disabled,
+            readonly,
+            checked,
+          }}
+        />
+      );
+    }
     const iconEl = (<i className="icon-checkbox" />);
 
     return (

src/phenome/components/input.jsx

@@ -111,49 +111,97 @@ export default {
         !wrap && className,
         (noFormStoreData || noStoreData) && 'no-store-data',
       );
-
-      return (
-        <InputTag
-          ref="inputEl"
-          style={inputStyle}
-          name={name}
-          type={needsType ? type : undefined}
-          placeholder={placeholder}
-          id={inputId}
-          value={needsValue ? value : undefined}
-          defaultValue={defaultValue}
-          size={size}
-          accept={accept}
-          autoComplete={autocomplete}
-          autoCorrect={autocorrect}
-          autoCapitalize={autocapitalize}
-          spellCheck={spellcheck}
-          autoFocus={autofocus}
-          autoSave={autosave}
-          checked={checked}
-          disabled={disabled}
-          max={max}
-          maxLength={maxlength}
-          min={min}
-          minLength={minlength}
-          step={step}
-          multiple={multiple}
-          readOnly={readonly}
-          required={required}
-          pattern={pattern}
-          validate={typeof validate === 'string' && validate.length ? validate : undefined}
-          data-validate={validate === true || validate === '' ? true : undefined}
-          tabIndex={tabindex}
-          data-error-message={errorMessage}
-          className={inputClassName}
-          onFocus={self.onFocusBound}
-          onBlur={self.onBlurBound}
-          onInput={self.onInputBound}
-          onChange={self.onChangeBound}
-        >
-          {children}
-        </InputTag>
-      );
+      let input;
+      if (process.env.COMPILER === 'react') {
+        input = (
+          <InputTag
+            ref="inputEl"
+            style={inputStyle}
+            name={name}
+            type={needsType ? type : undefined}
+            placeholder={placeholder}
+            id={inputId}
+            value={needsValue ? value : undefined}
+            defaultValue={defaultValue}
+            size={size}
+            accept={accept}
+            autoComplete={autocomplete}
+            autoCorrect={autocorrect}
+            autoCapitalize={autocapitalize}
+            spellCheck={spellcheck}
+            autoFocus={autofocus}
+            autoSave={autosave}
+            checked={checked}
+            disabled={disabled}
+            max={max}
+            maxLength={maxlength}
+            min={min}
+            minLength={minlength}
+            step={step}
+            multiple={multiple}
+            readOnly={readonly}
+            required={required}
+            pattern={pattern}
+            validate={typeof validate === 'string' && validate.length ? validate : undefined}
+            data-validate={validate === true || validate === '' ? true : undefined}
+            tabIndex={tabindex}
+            data-error-message={errorMessage}
+            className={inputClassName}
+            onFocus={self.onFocusBound}
+            onBlur={self.onBlurBound}
+            onInput={self.onInputBound}
+            onChange={self.onChangeBound}
+          >
+            {children}
+          </InputTag>
+        );
+      }
+      if (process.env.COMPILER === 'vue') {
+        input = (
+          <InputTag
+            ref="inputEl"
+            style={inputStyle}
+            name={name}
+            type={needsType ? type : undefined}
+            placeholder={placeholder}
+            id={inputId}
+            size={size}
+            accept={accept}
+            autoComplete={autocomplete}
+            autoCorrect={autocorrect}
+            autoCapitalize={autocapitalize}
+            spellCheck={spellcheck}
+            autoFocus={autofocus}
+            autoSave={autosave}
+            max={max}
+            maxLength={maxlength}
+            min={min}
+            minLength={minlength}
+            step={step}
+            pattern={pattern}
+            validate={typeof validate === 'string' && validate.length ? validate : undefined}
+            data-validate={validate === true || validate === '' ? true : undefined}
+            tabIndex={tabindex}
+            data-error-message={errorMessage}
+            className={inputClassName}
+            onFocus={self.onFocusBound}
+            onBlur={self.onBlurBound}
+            onInput={self.onInputBound}
+            onChange={self.onChangeBound}
+            domProps={{
+              value: needsValue ? value : undefined,
+              checked,
+              disabled,
+              readonly,
+              multiple,
+              required,
+            }}
+          >
+            {children}
+          </InputTag>
+        );
+      }
+      return input;
     };
 
     const { default: slotsDefault, info: slotsInfo } = self.slots;

src/phenome/components/list-item-content.jsx

@@ -149,18 +149,30 @@ export default {
 
     // Input
     if (radio || checkbox) {
-      inputEl = (
-        <input
-          value={value}
-          name={name}
-          checked={checked}
-          readOnly={readonly}
-          disabled={disabled}
-          required={required}
-          type={radio ? 'radio' : 'checkbox'}
-          onChange={self.onChange.bind(self)}
-        />
-      );
+      if (process.env.COMPILER === 'vue') {
+        inputEl = (
+          <input
+            name={name}
+            type={radio ? 'radio' : 'checkbox'}
+            domProps={{ checked, readonly, disabled, required, value }}
+            onChange={self.onChange.bind(self)}
+          />
+        );
+      } else {
+        inputEl = (
+          <input
+            value={value}
+            name={name}
+            checked={checked}
+            readOnly={readonly}
+            disabled={disabled}
+            required={required}
+            type={radio ? 'radio' : 'checkbox'}
+            onChange={self.onChange.bind(self)}
+          />
+        );
+      }
+
       inputIconEl = (
         <i className={`icon icon-${radio ? 'radio' : 'checkbox'}`} />
       );

src/phenome/components/messagebar-sheet-image.jsx

@@ -34,9 +34,20 @@ export default {
       backgroundImage: image && `url(${image})`,
     }, style || {});
 
+    let inputEl;
+    if (process.env.COMPILER === 'react') {
+      inputEl = (
+        <input type="checkbox" checked={checked} onChange={self.onChangeBound} />
+      );
+    }
+    if (process.env.COMPILER === 'vye') {
+      inputEl = (
+        <input type="checkbox" domProps={{ checked }} onChange={self.onChangeBound} />
+      );
+    }
     return (
       <label id={id} className={classes} style={styles}>
-        <input type="checkbox" checked={checked} onChange={self.onChangeBound} />
+        {inputEl}
         <i className="icon icon-checkbox" />
         <slot />
       </label>

src/phenome/components/radio.jsx

@@ -20,18 +20,36 @@ export default {
       name, value, disabled, readonly, checked, defaultChecked, id, style, className,
     } = props;
 
-    const inputEl = (
-      <input
-        type="radio"
-        name={name}
-        value={value}
-        disabled={disabled}
-        readOnly={readonly}
-        checked={checked}
-        defaultChecked={defaultChecked}
-        onChange={self.onChange.bind(self)}
-      />
-    );
+    let inputEl;
+    if (process.env.COMPILER === 'react') {
+      inputEl = (
+        <input
+          type="radio"
+          name={name}
+          value={value}
+          disabled={disabled}
+          readOnly={readonly}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          onChange={self.onChange.bind(self)}
+        />
+      );
+    }
+    if (process.env.COMPILER === 'vue') {
+      inputEl = (
+        <input
+          type="radio"
+          name={name}
+          onChange={self.onChange.bind(self)}
+          domProps={{
+            value,
+            disabled,
+            readonly,
+            checked,
+          }}
+        />
+      );
+    }
     const iconEl = (<i className="icon-radio" />);
 
     const classes = Utils.classNames(

src/phenome/components/stepper.jsx

@@ -78,8 +78,9 @@ export default {
     let inputWrapEl;
     let valueEl;
     if (input && !buttonsOnly) {
-      inputWrapEl = (
-        <div className="stepper-input-wrap">
+      let inputEl;
+      if (process.env.COMPILER === 'react') {
+        inputEl = (
           <input
             type={inputType}
             min={inputType === 'number' ? min : undefined}
@@ -89,6 +90,26 @@ export default {
             readOnly={inputReadonly}
             onInput={self.onInput.bind(self)}
           />
+        );
+      }
+      if (process.env.COMPILER === 'vue') {
+        inputEl = (
+          <input
+            type={inputType}
+            min={inputType === 'number' ? min : undefined}
+            max={inputType === 'number' ? max : undefined}
+            step={inputType === 'number' ? step : undefined}
+            onInput={self.onInput.bind(self)}
+            domProps={{
+              readonly: inputReadonly,
+              value,
+            }}
+          />
+        );
+      }
+      inputWrapEl = (
+        <div className="stepper-input-wrap">
+          {inputEl}
         </div>
       );
     }

src/phenome/components/toggle.jsx

@@ -40,9 +40,9 @@ export default {
       },
       Mixins.colorClasses(props),
     );
-
-    return (
-      <label ref="el" id={id} style={style} className={labelClasses}>
+    let inputEl;
+    if (process.env.COMPILER === 'react') {
+      inputEl = (
         <input
           type="checkbox"
           name={name}
@@ -53,6 +53,26 @@ export default {
           value={value}
           onChange={self.onChange.bind(self)}
         />
+      );
+    }
+    if (process.env.COMPILER === 'vue') {
+      inputEl = (
+        <input
+          type="checkbox"
+          name={name}
+          onChange={self.onChange.bind(self)}
+          domProps={{
+            disabled,
+            readonly,
+            value,
+            checked,
+          }}
+        />
+      );
+    }
+    return (
+      <label ref="el" id={id} style={style} className={labelClasses}>
+        {inputEl}
         <span className="toggle-icon" />
       </label>
     );