vue-openapi-form/src/components/VueOpenapiForm.vue at ecc847bb60ab1dc2f6580c694d3dc5e79d58f618 · appscode-cloud/vue-openapi-form · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
  <v-form ref="v-form" v-slot="{ meta, validate, errors }" as="">
    <ac-form>
      <div class="vue-openapi-form pl-20" :class="{ 'is-medium': size === 'medium' }">
        <v-field
          v-slot="{ field, handleChange }"
          v-model="modelData"
          :name="extendedSchema.title"
          :label="extendedSchema.title"
          :rules="ruleObject(true)"
          as=""
        >
          <object-form-wrapper
            field-name="$"
            :model-value="field.value"
            :expand-form="true"
            :is-root="true"
            :level="1"
            :is-self-required="true"
            :only-json="onlyJson"
            :schema="extendedSchema"
            :reference-model="referenceModel || {}"
            :errors="errors"
            @update:modelValue="handleChange"
          />
        </v-field>
      </div>
      <template #form-left-controls>
        <form-footer-control>
          <slot
            name="left-controls"
            :validate="validate"
            :form-status="meta"
            :errors="errors"
          />
        </form-footer-control>
      </template>
      <template #form-right-controls>
        <form-footer-control>
          <slot
            name="right-controls"
            :validate="validate"
            :form-status="meta"
            :errors="errors"
          />
        </form-footer-control>
      </template>
    </ac-form>
  </v-form>
</template>

<script>
import ExtendSchema from '../functional-components/extend-schema.js';
import validation from '../mixins/validation.js';
import { model } from '../mixins/model.js';
import { defineAsyncComponent, defineComponent } from 'vue';

export default defineComponent({
  name: 'VueOpenapiForm',
  components: {
    AcForm: defineAsyncComponent(() =>
      import('@appscode/design-system/vue-components/v3/form/Form.vue')
    ),
    FormFooterControl: defineAsyncComponent(() =>
      import(
        '@appscode/design-system/vue-components/v2/form/FormFooterControl.vue'
      )
    ),
  },
  mixins: [model, validation],
  provide() {
    const providedData = {};

    // using defineProperty to make provide data reactive
    // ref : https://stackoverflow.com/a/65720394
    Object.defineProperty(providedData, 'theme', {
      enumerable: true,
      get: () => this.themeMode,
    });
    return {
      providedData,
    };
  },
  props: {
    schema: {
      type: Object,
      default: () => ({}),
    },
    modelValue: {
      type: Object,
      default: () => ({}),
    },
    formTitle: {
      type: String,
      default: '',
    },
    onlyJson: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'small',
    },
    themeMode: {
      type: String,
      default: 'light',
    },
  },
  computed: {
    extendedSchema() {
      return ExtendSchema(this.schema, this.formTitle);
    },
  },
});
</script>

<style lang="scss">
@import 'font-awesome/css/font-awesome.min.css';
@import '../assets/scss/main.scss';
</style>