@grid-form/render-naive - npm Package Compare versions

Comparing version 0.1.0 to 0.1.2

LICENSE

+MIT License
+
+Copyright (c) 2019-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

container.vue

 <template>
-    <n-grid :x-gap="gridGap" :y-gap="gridGap" :cols="form.grid" :style="{width: form.width, margin:'0px auto' }">
+    <template v-if="isMultiple">
+        <table class="gf-render-table">
+            <tr v-for="(rowData, rowIndex) in formData" :class="{striped:rowIndex%2==1}">
+                <td width="40" class="c">
+                    <NPopconfirm :negative-text="null" @positive-click="formData.splice(rowIndex, 1)">
+                        <template #trigger>
+                            <n-button size="small" type="primary" tertiary circle>{{rowIndex+1}}</n-button>
+                        </template>
+                        删除第{{rowIndex+1}}行数据？
+                    </NPopconfirm>
+                </td>
+                <td>
+                    <n-grid :x-gap="gridGap" :y-gap="gridGap" :cols="form.grid" :style="{width: form.width, margin:'0px auto' }">
+                        <template v-for="(item, index) in form.items" :key="index">
+                            <NFormItemGridItem v-if="item._hide!=true" :span="item._col" :show-feedback="false" :show-label="!(item._hideLabel === true || !form.labelShow)"
+                                :label-placement="form.labelPlacement" :label-align="form.labelAlign" :label-width="form.labelWidth">
+                                <template #label>
+                                    {{item._text}}<span v-if="item._required" style="color: red;"> *</span>
+                                </template>
+
+                                <component v-if="item._container && item.items" :is="buildComponent(item, renders, false)">
+                                    <render-container :gridGap="gridGap" :renders="renders" :form="item" :formData="childForm(item)" :labelPlacement="item.labelPlacement" :labelAlign="item.labelAlign" />
+                                </component>
+                                <component v-else-if="item._widget=='DATE'" v-model:formatted-value="rowData[item._uuid]" :is="buildComponent(item, renders, false)" />
+                                <component v-else v-model:value="rowData[item._uuid]" :is="buildComponent(item, renders, false)" />
+                            </NFormItemGridItem>
+                        </template>
+                    </n-grid>
+                </td>
+            </tr>
+        </table>
+        <div style="margin-top: 10px; text-align: center;">
+            <n-button size="small" :disabled="!canAdd" circle @click.stop="onAddRow">+</n-button>
+        </div>
+    </template>
+    <template v-else>
+        <n-grid :x-gap="gridGap" :y-gap="gridGap" :cols="form.grid" :style="{width: form.width, margin:'0px auto' }">
         <template v-for="(item, index) in form.items" :key="index">
-            <n-form-item-gi v-if="item._hide!=true" :span="item._col" :show-feedback="false" :show-label="!(item._hideLabel === true || !form.labelShow)"
-                :label-placement="labelPlacement" :label-align="labelAlign">
+            <NFormItemGridItem v-if="item._hide!=true" :span="item._col" :show-feedback="false" :show-label="!(item._hideLabel === true || !form.labelShow)"
+                :label-placement="form.labelPlacement" :label-align="form.labelAlign" :label-width="form.labelWidth">
                 <template #label>
@@ -11,29 +47,46 @@ {{item._text}}<span v-if="item._required" style="color: red;"> *</span>
                 <component v-if="item._container && item.items" :is="buildComponent(item, renders, false)">
-                    <render-container :gridGap="gridGap" :renders="renders" :form="item" :formData="formData" :labelPlacement="item.labelPlacement" :labelAlign="item.labelAlign" />
+                    <render-container :gridGap="gridGap" :renders="renders" :form="item" :formData="childForm(item)" :labelPlacement="item.labelPlacement" :labelAlign="item.labelAlign" />
                 </component>
                 <component v-else-if="item._widget=='DATE'" v-model:formatted-value="formData[item._uuid]" :is="buildComponent(item, renders, false)" />
                 <component v-else v-model:value="formData[item._uuid]" :is="buildComponent(item, renders, false)" />
-            </n-form-item-gi>
+            </NFormItemGridItem>
         </template>
     </n-grid>
+    </template>
 </template>
 
 <script>
-    export default { name:"render-container" }
+    export default {
+        name:"render-container",
+        inheritAttrs: false
+    }
 </script>
 
 <script setup>
-    import { ref } from 'vue'
+    import { ref, computed } from 'vue'
+    import { NPopconfirm, NButton, NGrid, NFormItemGridItem } from 'naive-ui'
 
-    import { RenderProps } from '@grid-form/common/render.mixin'
+    import { ContainerProps, ContainerMixin } from '@grid-form/common/render.mixin'
     import { buildComponent } from '@grid-form/common'
 
-    const props = defineProps({
-        renders:{type:Object},
-        form: {type:Object},
-        labelPlacement: {type:String, default:"left"},
-        labelAlign:{type:String, default:"left"},
-        gridGap: {type:Number, default: 10},
-        formData: {type:Object}
-    })
+    const props = defineProps(ContainerProps)
+
+    const { isMultiple, canAdd, childForm, onAddRow } = ContainerMixin(props)
 </script>
+
+<style scoped>
+    .gf-render-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+    .gf-render-table .c {
+        text-align: center;
+    }
+    .gf-render-table td {
+        border-bottom:1px solid #ebeef580;
+        padding: 8px;
+    }
+    /* .gf-render-table .striped {
+        background: #fafafa;
+    } */
+</style>

package.json

 {
   "name": "@grid-form/render-naive",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "基于 naive-ui 的渲染器",
@@ -15,3 +15,3 @@ "homepage": "https://github.com/0604hx/grid-form",
   "dependencies": {
-    "@grid-form/common": "0.1.0"
+    "@grid-form/common": "0.1.2"
   },
@@ -18,0 +18,0 @@ "devDependencies": {

Render.vue

@@ -6,16 +6,16 @@ <template>
                 <div style="text-align: center;">
-                    <n-spin><template #description>表单渲染中...</template></n-spin>
+                    <NSpin><template #description>表单渲染中...</template></NSpin>
                 </div>
             </slot>
         </template>
-        <n-form v-else :size="form.size||'medium'" :label-width="form.labelWidth" :show-label="form.labelShow">
-            <n-message-provider>
-                <Container :gridGap="gridGap" :renders="renders" :form="form" :formData="formData" :labelPlacement="form.labelPlacement" :labelAlign="form.labelAlign"/>
+        <NForm v-else :size="form.size||'medium'" :label-width="form.labelWidth" :show-label="form.labelShow">
+            <NMessageProvider>
+                <Container :gridGap="gridGap" :renders="renders" :form="form" :formData="formData" />
 
-                <n-space justify="center" style="margin-top: 12px;">
-                    <n-button v-if="form.submitText" :disabled="formData._disabled" size="large" type="primary" @click="toSubmit">{{form.submitText}}</n-button>
-                    <n-button v-for="btn in form.buttons" :type="btn.theme" size="large" @click="onExtraBtn(btn)">{{btn.text}} </n-button>
-                </n-space>
-            </n-message-provider>
-        </n-form>
+                <NSpace justify="center" style="margin-top: 12px;">
+                    <NButton v-if="form.submitText" :disabled="formData._disabled" size="large" type="primary" @click="toSubmit">{{form.submitText}}</NButton>
+                    <NButton v-for="btn in form.buttons" :type="btn.theme" size="large" @click="onExtraBtn(btn)">{{btn.text}} </NButton>
+                </NSpace>
+            </NMessageProvider>
+        </NForm>
     </div>
@@ -26,2 +26,3 @@ </template>
     import { ref, toRaw, unref, onMounted, nextTick, reactive, watch } from 'vue'
+    import { NSpin, NForm,NMessageProvider, NButton, NSpace } from 'naive-ui'
 
@@ -28,0 +29,0 @@ import { default as RenderMixin, RenderEvent, RenderProps } from '@grid-form/common/render.mixin'

widgets/FileSelector.vue

@@ -1,3 +0,1 @@
-<!--文件选择框-->
-<!--选择文件-->
 <template>
@@ -16,3 +14,3 @@ <n-input v-model:value="path" :disabled="disabled" :placeholder="placeholder" clearable readonly @click="toSelect" @clear="onClear">
     import { ref } from 'vue'
-    import { useMessage } from "naive-ui"
+    import { useMessage, NInput, NTag } from "naive-ui"
 
@@ -19,0 +17,0 @@ import { selectFile  } from '@grid-form/common'

No alert changes

Improved metrics

Total package byte prevSize

12659

42.04%

Number of package files

8

14.29%

Dependency changes

• + Added

  @grid-form/common@0.1.2
  (transitive)

• - Removed

  @grid-form/common@0.1.0
  (transitive)

• Updated

  @grid-form/common@0.1.2