vue-2024-ui 0.0.1

package/README.md

@@ -0,0 +1,29 @@
+# vue-ele-ui
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vue-2024-ui",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "main": "src/components/index.js",
+  "author": {
+    "name": "guoyuanchao",
+    "email": "xg816620@163.com"
+  },
+  "files": [
+    "src/components"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "element-plus": "^2.8.4",
+    "vue": "^3.4.29"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "vite": "^5.3.1",
+    "vite-plugin-vue-devtools": "^7.3.1"
+  }
+}

package/src/components/g-ctrl.vue

@@ -0,0 +1,168 @@
+<template>
+    <div style="display: flex; width: 100%;" class="g-ctrl-container">
+        <!--radio-->
+        <el-radio-group v-model="ctrlValue" v-bind="itemInfo" v-if="ctrlType == 'radio'">
+            <slot :name="`${ctrlKey}-ctrl`" :data="itemInfo">
+                <el-radio v-bind="option" v-for="option in itemInfo.options">
+                    <slot :name="`${ctrlKey}-ctrl-options`" :option></slot>
+                </el-radio>
+            </slot>
+        </el-radio-group>
+        <!--radio-button-->
+        <el-radio-group v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'radio-button'">
+            <slot :name="`${ctrlKey}-ctrl`" :data="itemInfo">
+                <el-radio-button v-bind="option" v-for="option in itemInfo.options">
+                    <slot :name="`${ctrlKey}-ctrl-options`" :option></slot>
+                </el-radio-button>
+            </slot>
+        </el-radio-group>
+        <!--checkbox-->
+        <el-checkbox v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'checkbox'">
+            <slot :name="`${ctrlKey}-ctrl`" :data="itemInfo">{{ " " }}</slot>
+        </el-checkbox>
+        <!--checkbox-group-->
+        <el-checkbox-group v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'checkbox-group'">
+            <slot :name="`${ctrlKey}-ctrl`" :data="itemInfo">
+                <el-checkbox v-bind="option" v-for="option in itemInfo.options">
+                    <slot :name="`${ctrlKey}-ctrl-options`" :option>{{ option.label }}</slot>
+                </el-checkbox>
+            </slot>
+        </el-checkbox-group>
+        <!--checkbox-group-button-->
+        <el-checkbox-group v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'checkbox-group-button'">
+            <slot :name="`${ctrlKey}-ctrl`" :data="itemInfo">
+                <el-checkbox-button v-bind="option" v-for="option in itemInfo.options">
+                    <slot :name="`${ctrlKey}-ctrl-options`" :option></slot>
+                </el-checkbox-button>
+            </slot>
+        </el-checkbox-group>
+        <!--select-->
+        <el-select v-model="ctrlValue" v-bind="selectModel" v-else-if="ctrlType == 'select'">
+            <template #default v-if="itemInfo?.options?.some(a => a.options)">
+                <slot :name="`${ctrlKey}-ctrl`" :options="itemInfo.options">
+                    <el-option-group v-for="group in itemInfo.options" :label="group.label">
+                        <el-option v-bind="option" v-for="option in group.options"
+                            @click.native="selectModel.change && selectModel.change(option)">
+                            <slot :name="`${ctrlKey}-ctrl-options`" :option></slot>
+                        </el-option>
+                    </el-option-group>
+                </slot>
+            </template>
+            <template #default v-else>
+                <slot :name="`${ctrlKey}-ctrl`" :options="itemInfo.options">
+                    <el-option v-bind="option" v-for="option in itemInfo.options"
+                        @click.native="selectModel.change && selectModel.change(option)">
+                        <slot :name="`${ctrlKey}-ctrl-options`" :option></slot>
+                    </el-option>
+                </slot>
+            </template>
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-select>
+        <!--tree-select-->
+        <el-tree-select v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'tree-select'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-tree-select>
+        <!--time-->
+        <el-time-picker v-model="ctrlValue" arrow-control v-bind="itemInfo" v-else-if="ctrlType == 'time'" />
+        <!--time-select-->
+        <el-time-select v-model="ctrlValue" start="06:30" step="00:15" end="23:30" v-bind="itemInfo"
+            v-else-if="ctrlType == 'time-select'" />
+        <!--date-->
+        <el-date-picker v-model="ctrlValue" type="date" v-bind="itemInfo" v-else-if="ctrlType == 'date'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-date-picker>
+        <!--datetime-->
+        <el-date-picker v-model="ctrlValue" type="datetime" v-bind="itemInfo" v-else-if="ctrlType == 'datetime'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-date-picker>
+        <!--color-->
+        <el-color-picker v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'color'" />
+        <!--rate-->
+        <el-rate v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'rate'" />
+        <!--slider-->
+        <el-slider v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'slider'" />
+        <!--switch-->
+        <el-switch v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'switch'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-switch>
+        <!--transfer-->
+        <el-transfer v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'transfer'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-transfer>
+        <!--cascader-->
+        <el-cascader v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'cascader'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-cascader>
+        <!--upload-->
+        <el-upload v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'upload'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-upload>
+        <!--autocomplete-->
+        <el-autocomplete v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'autocomplete'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-autocomplete>
+        <!--input-number-->
+        <el-input-number v-model="ctrlValue" :min="0" :max="100000000" v-bind="itemInfo"
+            v-else-if="ctrlType == 'input-number'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-input-number>
+        <!--input-->
+        <el-input v-model="ctrlValue" show-word-limit :maxlength="itemInfo.max || 25" :clearable="true"
+            v-bind="itemInfo" v-else>
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
+            </template>
+        </el-input>
+    </div>
+</template>
+
+<script setup>
+defineOptions({ inheritAttrs: false });
+import { onMounted, useAttrs, useSlots } from "vue";
+const ctrlValue = defineModel({ required: true });
+const itemInfo = useAttrs().item;
+const ctrlKey = useAttrs().ctrlKey;
+const ctrlType = itemInfo.type;
+const model = useAttrs().model;
+const slots = () => Object.keys(useSlots()).filter(a => a.startsWith(ctrlKey)).filter(a => a.includes('-ctrl-')).map(a => a.split("-ctrl-")[1]);
+
+//select 默认属性
+const selectModel = {
+    ...{
+        filterable: true,
+        remote: itemInfo["remote-method"] ? true : false,
+    }, ...itemInfo
+};
+const selectRemoteMethod = (query) => {
+    itemInfo["remote-method"](query, (a) => {
+        model[ctrlKey].options = a;
+    })
+}
+
+onMounted(() => {
+    if (itemInfo["remote-method"]) {
+        selectModel['remote-method'] = selectRemoteMethod;
+
+    }
+})
+</script>

package/src/components/g-form.vue

@@ -0,0 +1,266 @@
+<template>
+    <el-form ref="gform" :model="model" v-bind="model.form" class="g-form-container">
+        <slot>
+            <el-form-item :label="item.label" :prop="`${key}.value`" :rules="getItemRulesByItem(item)"
+                v-for="(item, key) of items" :key="key" v-bind="{ ...model.formItems, ...item.formItem }"
+                :style="{ ...model.formItems.style, ...item?.formItem?.style }">
+                <slot :name="key" :item :model>
+                    <g-ctrl v-model="model[key].value" :item :ctrlKey="key" :model class="g-ctrl-container">
+                        <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
+                            <slot :name="slotKey" :data :item :model></slot>
+                        </template>
+                    </g-ctrl>
+                </slot>
+                <template #label="data">
+                    <slot :name="`${key}-label`" :data :item :model>{{ item.label }}</slot>
+                </template>
+            </el-form-item>
+            <el-form-item style="width: 100%;">
+                <slot name="footer">
+                    <div style="display: flex; width:100%;align-items: center;" :style="model.form.footer">
+                        <slot name="footer-left"></slot>
+                        <el-button @click="submitForm(model)" v-bind="model.form.submit"
+                            v-if="!model.form.submit.hidden">
+                            {{ model.form.submit.submitText }}
+                        </el-button>
+                        <el-button @click="resetForm(ruleFormRef)" v-bind="model.form.reset"
+                            v-if="!model.form.reset.hidden">{{
+                                model.form.reset.resetText
+                            }}</el-button>
+                        <slot name="footer-right"></slot>
+                    </div>
+                </slot>
+            </el-form-item>
+        </slot>
+    </el-form>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, useAttrs, watch } from "vue";
+import gCtrl from "./g-ctrl.vue";
+defineOptions({
+    name: "g-form",
+    inheritAttrs: false
+})
+const model = defineModel({ required: true });
+const emits = defineEmits(["submit", "reset"]);
+const gform = ref(null);
+const columnsWidth = ref(0);
+let marginRight = ref(32);
+//合并表单默认属性
+model.value.form = {
+    inline: true,
+    type: "hidden",
+    "scroll-to-error": true,
+    "label-width": "100px",
+    "status-icon": true,
+    "scroll-into-view-options": true,
+    columns: 2,
+    ...model.value.form,
+    style: {
+        width: "600px",
+        border: "1px solid rgba(0, 0, 0,0.09)",
+        borderRadius: "10px",
+        padding: "0px",
+        paddingTop: "20px",
+        margin: "0px",
+        boxShadow: "0 0 5px rgba(0, 0, 0, 0.1)",
+        ...model.value.form?.style,
+        ...useAttrs().style
+    },
+    // 表单底部属性
+    footer: {
+        justifyContent: "center",
+        ...model.value.form?.footer
+    },
+    //表单提交按钮属性
+    submit: {
+        type: "primary",
+        disabled: false,
+        submitText: "提交",
+        plain: true,
+        hidden: false,
+        ...model.value.form?.submit
+    },
+    //表单重置按钮属性
+    reset: {
+        disabled: false,
+        resetText: "重置",
+        hidden: false,
+        plain: true,
+        ...model.value.form?.reset
+    },
+};
+//合并表单项默认属性
+model.value.formItems = {
+    type: "hidden",
+    ...model.value.formItems,
+    style: {
+        width: "100%",
+        ...model.value.formItems?.style
+    }
+};
+
+// 提交表单
+const submitForm = async (model) => {
+    if (!gform.value) return
+    await gform.value.validate((valid, fields) => {
+        if (valid) {
+            emits("submit", formInfo.value, model);
+        } else {
+            console.log('error submit!', fields);
+        }
+    })
+}
+
+// 重置表单
+const resetForm = () => {
+    if (!gform.value) return
+    const isreset = true;
+    emits("reset", (flag) => {
+        isreset = flag;
+    });
+    if (isreset) {
+        gform.value.resetFields();
+    }
+}
+
+// 定义对外暴露的函数
+defineExpose({
+    submit: submitForm, reset: resetForm
+})
+
+//获取表单项验证规则
+const getItemRulesByItem = (item) => {
+    // 组装验证规则
+    let itemRules = [];
+    if (item.rules) {
+        itemRules = item.rules;
+    } else {
+        //默认验证规则
+        const itemDefaultRule = {
+            required: undefined,
+            max: undefined,
+            min: undefined,
+            email: undefined,
+            url: undefined,
+            pattern: undefined,
+            validate: undefined
+        }
+        // 获取item属性并合并规则
+        const itemInfo = { ...itemDefaultRule, ...item };
+
+        //必填验证
+        if (itemInfo.required) {
+            itemRules.push({ required: true, message: `${itemInfo.label}不能为空！`, trigger: 'blur' });
+        }
+        // 数字范围验证 和 字符串长度验证
+        if (itemInfo.max && itemInfo.min) {
+            itemRules.push({
+                validator: (rule, value, callback) => {
+                    if (value && item.type == "number" && (value < itemInfo.min || value > itemInfo.max)) {
+                        callback(new Error(`${itemInfo.label} 必须在 ${itemInfo.min} 和 ${itemInfo.max} 之间!`));
+                    } else if (value && item.type !== "number" && (value.toString().length < itemInfo.min || value.toString().length > itemInfo.max)) {
+                        callback(new Error(`字符长度必须在 ${itemInfo.min} 和 ${itemInfo.max} 之间!`));
+                    } else {
+                        callback();
+                    }
+                }
+            });
+        }
+
+        //验证数字不能大于一个值 
+        if (itemInfo.max && !itemInfo.min && item.type == "number") {
+            itemRules.push({
+                validator: (rule, value, callback) => {
+                    if (value && (value > itemInfo.max)) {
+                        callback(new Error(`${itemInfo.label}不能大于${itemInfo.max}!`));
+                    } else {
+                        callback();
+                    }
+                }
+            });
+        }
+        //验证数字不能小于一个值
+        if (itemInfo.min && !itemInfo.max && item.type == "number") {
+            itemRules.push({
+                validator: (rule, value, callback) => {
+                    if (value && (value < itemInfo.min)) {
+                        callback(new Error(`${itemInfo.label}不能小于${itemInfo.min}!`));
+                    } else {
+                        callback();
+                    }
+                }
+            });
+        }
+        //验证邮箱格式
+        if (itemInfo.type == "email") {
+            itemRules.push({ type: "email", message: "不是一个正确的邮箱地址！" });
+        }
+        //验证URL格式
+        if (itemInfo.type == "url") {
+            itemRules.push({ type: "url", message: "不是一个合正确的URL！" });
+        }
+        // 正则验证
+        if (itemInfo.pattern) {
+            itemRules.push({ pattern: itemInfo?.pattern, message: itemInfo?.message || "格式不正确！" });
+        }
+        // 自定义验证规则
+        if (itemInfo.validate) {
+            itemRules.push({
+                validator: (rule, value, callback) => itemInfo.validate(rule, value, callback)
+            });
+        }
+    }
+    return itemRules;
+}
+
+onMounted(() => {
+    load();
+})
+
+const load = () => {
+    if (!model.value.form.inline) {
+        model.value.form.columns = 1;
+    }
+    const width = getComputedStyle(document.querySelector(".g-form-container")).width;
+    console.log(width);
+    if (width === "600px") {
+        columnsWidth.value = 300;
+        model.value.form.style.width = columns.value * 300 + 'px';
+    } else {
+        columnsWidth.value = removePx(width) / model.value.form.columns;
+        model.value.form.style.width = columns.value * columnsWidth.value + 'px';
+    }
+    for (const [key, value] of Object.entries(items.value)) {
+        model.value[key].formItem = { ...model.value[key].formItem, ...value.formItem }
+        model.value[key].formItem.style = { ...model.value[key].formItem.style, ...value.formItem.style };
+        if (value.columns && value.columns > 1) {
+            if (model.value.form.inline) {
+                let column = columnsWidth.value * value.columns - (value.columns - 1) * marginRight.value;
+                model.value[key].formItem.style.width = `calc(${column}px)`;
+            } else {
+                model.value[key].formItem.style.width = `calc(${columnsWidth.value - marginRight.value}px)`;
+            }
+        } else {
+            model.value[key].formItem.style.width = `calc(${columnsWidth.value - marginRight.value}px)`;
+        }
+    }
+}
+
+watch(() => model.value.form.columns, () => load());
+watch(() => model.value.form.inline, () => load());
+
+const removePx = (el) => parseFloat(el.replace("px", ""));
+
+//表单项
+const items = computed(() => Object.fromEntries(Object.entries(model.value).filter(a => a[1].type != "hidden").filter(a => (a[1].edit !== false)).map(key => [key[0], key[1]])));
+//表单提交对象
+const formInfo = computed(() => Object.fromEntries(Object.entries(model.value).filter(a => a[1].type != "hidden").map(key => [key[0], key[1].value])));
+//表单列数
+const columns = computed(() => model.value.form.columns);
+//表单列的宽度减去右边距
+const formItemsWidth = computed(() => columnsWidth.value - marginRight.value);
+//表单宽度
+const formWidth = computed(() => columns.value * columnsWidth.value);
+</script>

package/src/components/g-table.vue

@@ -0,0 +1,143 @@
+<template>
+    <el-table class="g-table-container" v-bind="{ ...$attrs, ...model.table }">
+        <slot>
+            <el-table-column :prop="key" v-for="(value, key) of tableColumns" :key="key"
+                v-bind="{ ...itemValue, ...value }" header-align="center">
+                <template #default="{ row, column, $index }"
+                    v-if="value.type != 'selection' && value.type != 'index' && value.type != 'expand'">
+                    <slot :name="`${key}`" :row :column :$index>
+                        <div v-html="formatterExtends(value, column.formatter(row, column, row[key], $index))"></div>
+                    </slot>
+                </template>
+                <template #header="{ column, $index }">
+                    <slot :name="`${key}-header`" :column :$index></slot>
+                </template>
+                <template #filter-icon="data">
+                    <slot :name="`${key}-filter-icon`" :data></slot>
+                </template>
+            </el-table-column>
+        </slot>
+        <template #append>
+            <slot name="append"></slot>
+        </template>
+        <template #empty>
+            <slot name="empty"></slot>
+        </template>
+    </el-table>
+    <slot name="page">
+        <el-pagination v-model:page-size="model.table.page.pageSize" v-model:current-page="model.table.page.currentPage"
+            v-bind="model.table.page">
+            <slot name="table-page"></slot>
+        </el-pagination>
+    </slot>
+</template>
+
+<script setup>
+import dayjs from 'dayjs';
+import { computed, onMounted, reactive, watchEffect } from 'vue';
+
+defineOptions({
+    name: "g-table",
+    inheritAttrs: false
+})
+
+const emits = defineEmits(['load']);
+
+const model = defineModel({ required: true });
+
+//table default attrs
+model.value.table = {
+    data: [],
+    border: true,
+    stripe: true,
+    emptyText: '暂无数据',
+    fit: false,
+    type: "hidden",
+    height: "calc(100vh - 55px)",
+
+    ...model.value.table,
+    load: () => {
+        let { currentPage, pageSize } = model.value.table.page;
+        emits('load', { currentPage, pageSize }, (data) => {
+            model.value.table.data = data;
+        });
+    },
+    page: {
+        background: true,
+        total: 0,
+        pageSize: 10,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 30, 40, 50],
+        layout: 'total, sizes, prev, pager, next, jumper',
+        ...model.value.table.page,
+        style: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            padding: "10px",
+            ...model.value.table?.page?.style
+        },
+        onChange: (a, b) => {
+            console.log(a, b);
+        }
+    }
+}
+
+//table column default attrs 
+const itemValue = reactive({
+    width: 100, align: "center", formatter: (row, column, cellValue, index) => {
+        return cellValue;
+    }
+});
+
+//扩展formatter方法
+const formatterExtends = (item, str) => {
+    let trueValue = str;
+    if (item.decimals && !isNaN(str)) {
+        if (typeof item.decimals == 'number') {
+            trueValue = parseFloat(trueValue).toFixed(item.decimals);
+        }
+        else if (typeof item.decimals == 'object') {
+            if (item.decimals.num) {
+                if (item.decimals.pad) {
+                    trueValue = parseFloat(trueValue).toFixed(item.decimals.num);
+                } else {
+                    trueValue = parseFloat(parseFloat(trueValue).toFixed(item.decimals.num));
+                }
+            }
+        }
+    }
+    if (item.dateFormat && dayjs(str).isValid()) {
+        if (item.dateFormat == 'date') {
+            trueValue = dayjs(trueValue).format('YYYY-MM-DD');
+        } else if (item.dateFormat == 'time') {
+            trueValue = dayjs(trueValue).format('HH:mm:ss');
+        }
+        else if (item.dateFormat == 'datetime') {
+            trueValue = dayjs(trueValue).format('YYYY-MM-DD HH:mm:ss');
+        }
+        else {
+            trueValue = dayjs(trueValue).format(item.dateFormat)
+        }
+    }
+    if (item.prefix && trueValue) {
+        trueValue = `<span>${item.prefix}${trueValue}</span>`;
+    }
+    if (item.suffix && trueValue) {
+        trueValue += `<span>${item.suffix}</span>`
+    }
+    return trueValue
+}
+onMounted(() => {
+
+});
+
+watchEffect(() => {
+    model.value.table.load();
+});
+
+//表单项
+const tableColumns = computed(() => Object.fromEntries(Object.entries(model.value).filter(a => a[1].type != "hidden").filter(a => a[1].visible !== false).map(key => [key[0], key[1]])));
+//const formInfo = computed(() => Object.fromEntries(Object.entries(model.value).filter(a => a[1].type != "hidden").map(key => [key[0], key[1].value])));
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/index.js

@@ -0,0 +1,10 @@
+import gTable from "./g-table.vue";
+import gForm from "./g-form.vue";
+
+
+export default {
+    install(app, options) {
+        app.component("g-table", gTable);
+        app.component("g-form", gForm);
+    }
+}