@tripup-company/element-ui-extended 0.0.1 → 0.0.2

package/src/components/UpdateForm/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <el-form
+    ref="form"
+    :model="formLocal"
+    :rules="config.rules"
+    label-position="left"
+    label-width="140px"
+  >
+    <el-card class="m-b-20" shadow="always">
+      <div slot="header" class="clearfix">
+        <el-row type="flex" justify="space-between">
+        <el-col class="flex align-center justify-start" :span="6">
+          <h3 class="m-b-0">{{ formLocal.object }} view</h3>
+        </el-col>
+        <el-col class="flex align-center justify-end is-justify-end el-row--flex" :span="6">
+          <slot name="actions" />
+          <el-button
+              class="delete-icon pull-right"
+              icon="el-icon-delete"
+              size="mini"
+              @click="deleteModel"
+          />
+        </el-col>
+        </el-row>
+      </div>
+      <el-row :gutter="20">
+        <el-col
+          :lg="colResolutionLg.lg"
+          :md="colResolutionLg.md"
+          :sm="colResolutionLg.sm"
+          :xl="colResolutionLg.xl"
+          :xs="colResolutionLg.xs"
+        >
+          <part-form>
+            <edit-column
+              :data="formLocal"
+              :fields="config.formFields"
+              :errors="errors"
+              @save="updateValue"
+            />
+          </part-form>
+        </el-col>
+      </el-row>
+    </el-card>
+  </el-form>
+</template>
+
+<script>
+import getResolution from '../../services/resolutions';
+import { BaseModel } from '../../models/base-model';
+import PartForm from '../PartForm';
+import EditColumn from '../PartColumn/EditColumn';
+
+export default {
+  name: 'UpdateForm',
+  components: { PartForm, EditColumn },
+  provide() {
+    const data = {};
+    ['loading'].forEach((key) => {
+      Object.defineProperty(data, key, {
+        enumerable: true,
+        get: () => this[key],
+      });
+    });
+    return {
+      data,
+    };
+  },
+  props: {
+    form: {
+      type: Object,
+      default: () => {
+        return new BaseModel();
+      },
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          rules: null,
+        }
+      },
+    },
+    errors: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      colResolutionLg: getResolution('fullResolution'),
+    };
+  },
+  computed: {
+    formLocal: {
+      get() {
+        return this.form;
+      },
+      set(value) {
+        this.$emit('update:form', this.form);
+      },
+    },
+  },
+  methods: {
+    updateValue(data) {
+      this.$refs['form'].validateField(data.field, (invalid) => {
+        if (!invalid) {
+          this.$refs['form'].clearValidate();
+          this.$emit('save:value', data);
+        } else {
+          this.$message.error('Validation error');
+        }
+      });
+    },
+    deleteModel(){
+      this.$confirm('This will permanently delete data. Continue?', 'Warning', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: 'Delete completed',
+        });
+        this.$emit('delete:model');
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: 'Delete canceled',
+        });
+      });
+    },
+  },
+};
+</script>

package/src/components/Test/index.vue

@@ -1,22 +0,0 @@
-<template>
-  <div>
-    Hi {{ model.name }}
-  </div>
-</template>
-
-<script>
-import { Article } from '@/types/article'
-
-export default {
-  name: "Test",
-  data() {
-    return {
-      model: new Article(),
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>