inicios del FrontEnd

APP/components/Inputs/BaseCheckbox.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="form-check" :class="[{ disabled: disabled }, inlineClass]">
+    <label :for="cbId" class="form-check-label">
+      <input
+        :id="cbId"
+        class="form-check-input"
+        type="checkbox"
+        :disabled="disabled"
+        v-model="model"
+      />
+      <span class="form-check-sign"></span>
+      <slot> <span v-if="inline">&nbsp;</span> </slot>
+    </label>
+  </div>
+</template>
+<script>
+export default {
+  name: 'base-checkbox',
+  model: {
+    prop: 'checked'
+  },
+  props: {
+    checked: [Array, Boolean],
+    disabled: Boolean,
+    inline: Boolean,
+    hasError: Boolean
+  },
+  data() {
+    return {
+      cbId: '',
+      touched: false
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.checked;
+      },
+      set(check) {
+        if (!this.touched) {
+          this.touched = true;
+        }
+        this.$emit('input', check);
+      }
+    },
+    inlineClass() {
+      if (this.inline) {
+        return `form-check-inline`;
+      }
+    }
+  },
+  mounted() {
+    this.cbId = Math.random()
+      .toString(16)
+      .slice(2);
+  }
+};
+</script>

APP/components/Inputs/BaseInput.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    class="form-group"
+    :class="{
+      'input-group-focus': focused,
+      'has-danger': error,
+      'has-success': !error && touched,
+      'has-label': label,
+      'has-icon': hasIcon,
+    }"
+  >
+    <slot name="label">
+      <label v-if="label"> {{ label }} {{ required ? '*' : '' }} </label>
+    </slot>
+    <div class="mb-0" :class="{'input-group': hasIcon}">
+      <slot name="addonLeft">
+        <span v-if="addonLeftIcon" class="input-group-prepend">
+          <div class="input-group-text"><i :class="addonLeftIcon"></i></div>
+        </span>
+      </slot>
+      <slot>
+        <input
+          :value="value"
+          v-bind="$attrs"
+          v-on="listeners"
+          class="form-control"
+          aria-describedby="addon-right addon-left"
+        />
+      </slot>
+      <slot name="addonRight">
+        <span v-if="addonRightIcon" class="input-group-append">
+          <div class="input-group-text"><i :class="addonRightIcon"></i></div>
+        </span>
+      </slot>
+    </div>
+
+    <slot name="error" v-if="error || $slots.error">
+      <label class="error">{{ error }}</label>
+    </slot>
+    <slot name="helperText"></slot>
+  </div>
+</template>
+<script>
+export default {
+  inheritAttrs: false,
+  name: 'base-input',
+  props: {
+    required: Boolean,
+    label: {
+      type: String,
+      description: 'Input label'
+    },
+    error: {
+      type: String,
+      description: 'Input error',
+      default: ''
+    },
+    value: {
+      type: [String, Number],
+      description: 'Input value'
+    },
+    addonRightIcon: {
+      type: String,
+      description: 'Input icon on the right'
+    },
+    addonLeftIcon: {
+      type: String,
+      description: 'Input icon on the left'
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  data() {
+    return {
+      focused: false,
+      touched: false
+    };
+  },
+  computed: {
+    hasIcon() {
+      return this.hasLeftAddon || this.hasRightAddon
+    },
+    hasLeftAddon() {
+      const { addonLeft } = this.$slots;
+      return (
+        addonLeft !== undefined ||
+        this.addonLeftIcon !== undefined
+      );
+    },
+    hasRightAddon() {
+      const { addonRight } = this.$slots;
+      return (
+        addonRight !== undefined ||
+        this.addonRightIcon !== undefined
+      );
+    },
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: this.onInput,
+        blur: this.onBlur,
+        focus: this.onFocus
+      };
+    }
+  },
+  methods: {
+    onInput(evt) {
+      if (!this.touched) {
+        this.touched = true;
+      }
+      this.$emit('input', evt.target.value);
+    },
+    onFocus(evt) {
+      this.focused = true;
+      this.$emit('focus', evt)
+    },
+    onBlur(evt) {
+      this.focused = false;
+      this.$emit('blur', evt)
+    }
+  }
+};
+</script>
+<style></style>

APP/components/Inputs/BaseRadio.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    class="form-check form-check-radio"
+    :class="[inlineClass, { disabled: disabled }]"
+  >
+    <label :for="cbId" class="form-check-label">
+      <input
+        :id="cbId"
+        class="form-check-input"
+        type="radio"
+        :disabled="disabled"
+        :value="name"
+        v-model="model"
+      />
+      <slot></slot> <span class="form-check-sign"></span>
+    </label>
+  </div>
+</template>
+<script>
+export default {
+  name: 'base-radio',
+  props: {
+    name: {
+      type: [String, Number],
+      description: 'Radio label'
+    },
+    disabled: {
+      type: Boolean,
+      description: 'Whether radio is disabled'
+    },
+    value: {
+      type: [String, Boolean],
+      description: 'Radio value'
+    },
+    inline: {
+      type: Boolean,
+      description: 'Whether radio is inline'
+    }
+  },
+  data() {
+    return {
+      cbId: ''
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      }
+    },
+    inlineClass() {
+      if (this.inline) {
+        return `form-check-inline`;
+      }
+      return '';
+    }
+  },
+  mounted() {
+    this.cbId = Math.random()
+      .toString(16)
+      .slice(2);
+  }
+};
+</script>

APP/components/Inputs/IconCheckbox.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="choice"
+    :class="{ active: checked }"
+    data-toggle="wizard-checkbox"
+    @click="updateValue"
+  >
+    <input
+      type="checkbox"
+      :name="name"
+      :disabled="disabled"
+      :checked="checked"
+    />
+    <div class="icon">
+      <slot name="icon"> <i :class="icon"></i> </slot>
+    </div>
+    <slot name="title">
+      <h6>{{ title }}</h6>
+    </slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'icon-checkbox',
+  model: {
+    prop: 'checked'
+  },
+  props: {
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    name: String,
+    title: String,
+    icon: String,
+    disabled: Boolean
+  },
+  methods: {
+    updateValue() {
+      this.$emit('input', !this.checked);
+    }
+  }
+};
+</script>
+<style></style>