@v2coding/ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@v2coding/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
 
   "main": "dist/v2coding-ui.ssr.js",

package/src/components/field/field.rich.vue

@@ -11,7 +11,6 @@
   import 'quill/dist/quill.snow.css';
   import 'quill/dist/quill.bubble.css';
   import Objects from '../../util/objects';
-  import {addFieldType} from '../form/form.field';
 
   const Font = Quill.import('formats/font');
 
@@ -77,15 +76,6 @@
     },
   };
 
-  /**
-   * ui-form-item 添加 type="rich" 支持
-   */
-  const attachToFormItem = () => {
-    addFieldType('rich', RichField);
-  };
-
-  RichField.attachToFormItem = attachToFormItem;
-
   export default RichField;
 </script>
 

package/src/components/form/form.item.vue

@@ -152,9 +152,6 @@ export default {
   },
   methods: {
     registeredField () {
-      if (this.ignore) {
-        return;
-      }
       this.uiForm.addField(this.name, this.fieldValue, this);
     },
     resetField (...args) {

package/src/components/form/form.vue

@@ -8,6 +8,8 @@
 <script>
   import throttle from 'lodash.throttle';
   import Objects from '../../util/objects';
+  import FormItem from './form.item';
+  import TableSelectItem from '../table/table.select.item';
 
   export default {
     name: 'ui-form',
@@ -59,8 +61,6 @@
         fieldList: [],// [[name, value], ...]
       };
     },
-    created() {
-    },
     computed: {
       model() {
         return Object.fromEntries(this.fieldList);
@@ -71,7 +71,11 @@
         return listeners;
       },
     },
+    beforeCreate() {
+      this.isMounted = false;
+    },
     mounted() {
+      this.isMounted = true;
       this.$el.addEventListener('reset', this.onReset);
       this.checkFieldsReady();
     },
@@ -104,11 +108,12 @@
         if (!Objects.isObject(values)) {
           values = {};
         }
-        this.fieldList.slice().forEach(([name, , field]) => {
-          if (Object.prototype.hasOwnProperty.call(values, name)) {
-            field.resetField(values[name]);
+        const formItems = this.getFormItems();
+        formItems.forEach(item => {
+          if (Object.prototype.hasOwnProperty.call(values, item.name)) {
+            item.resetField(values[item.name]);
           } else {
-            field.resetField();
+            item.resetField();
           }
         });
       },
@@ -119,19 +124,40 @@
         if (!values || !Objects.isObject(values)) {
           return;
         }
+        const formItems = this.getFormItems();
         Object.entries(values).forEach(([fieldName, fieldValue]) => {
-          const fieldItem = this.fieldList.find(([name]) => name === fieldName);
+          const fieldItem = formItems.find(item => item.name === fieldName);
           if (!fieldItem) {
             return;
           }
-          fieldItem[2].fieldValue = fieldValue;
+          fieldItem.fieldValue = fieldValue;
         });
       },
       /**
        * @public
        */
       getValues() {
-        return Object.fromEntries(this.fieldList);
+        const formItems = this.getFormItems();
+        return formItems.reduce((values, item) => {
+          if (item.ignore === true) {
+            return values;
+          }
+          return {...values, [item.name]: item.fieldValue};
+        }, {});
+      },
+      getFormItems() {
+        const listSearchItem = (items) => {
+          return items.reduce((results, item) => {
+            // TableSelectItem mixins FormItem
+            if ([FormItem.name, TableSelectItem.name].includes(item.$options.name)) {
+              results.push(item);
+            } else {
+              results.push(...listSearchItem(item.$children || []));
+            }
+            return results;
+          }, []);
+        };
+        return listSearchItem(this.$children);
       },
       /**
        * @private
@@ -207,31 +233,14 @@
         }
         this[`onField${e}`](...args);
       },
-      getAllFields() {
-        const getFormFields = (components) => {
-          if (!Array.isArray(components) || !components.length) {
-            return [];
-          }
-          return components.reduce((total, component) => {
-            // ui-table-select-item mixins ui-form-item
-            if (['ui-form-item', 'ui-table-select-item'].includes(component.$options.name)) {
-              !component.ignore && component.name && total.push(component.name);
-            } else {
-              total.push(...getFormFields(component.$children));
-            }
-            return total;
-          }, []);
-        };
-        this.formFields = getFormFields(this.$children);
-        return this.formFields;
-      },
       /**
        * @private
        */
       onFieldPending(component) {
-        if(component.name) {
-          this.fieldStatus.push({name: component.name, status: false, instance: component});
+        if (!component.name) {
+          return;
         }
+        this.fieldStatus.push({name: component.name, status: false, instance: component});
       },
       /**
        * @private
@@ -244,8 +253,8 @@
           const i = this.fieldList.findIndex(item => item[0] === component.name);
           this.fieldList.splice(i, 1);
         }
-        const formFields = this.getAllFields();
-        if (formFields.length === this.fieldStatus.length) {
+        const formItems = this.getFormItems();
+        if (formItems.length === this.fieldStatus.length) {
           this.checkFieldsReady();
         }
       },
@@ -257,13 +266,9 @@
           return;
         }
         const index = this.fieldStatus.findIndex(item => item.name === component.name);
-        if (index === -1) {
-          this.fieldStatus.push({name: component.name, status: true, instance: component});
-        } else {
-          this.fieldStatus.splice(index, 1, {name: component.name, status: true, instance: component});
-        }
-        const formFields = this.getAllFields();
-        if (formFields.length === this.fieldStatus.length) {
+        index !== -1 && this.fieldStatus.splice(index, 1, {name: component.name, status: true, instance: component});
+        const formItems = this.getFormItems();
+        if (formItems.length === this.fieldStatus.length) {
           this.checkFieldsReady();
         }
       },
@@ -277,8 +282,12 @@
         }
       },
       checkFieldsReady() {
+        if (!this.isMounted) {
+          return;
+        }
         const isPending = this.fieldStatus.some(item => !item.status);
-        if (!isPending) {
+        if (!isPending && !this.isReady) {
+          this.isReady = true;
           this.$emit('ready');
         }
       },

package/src/components/icon/icon.vue

@@ -37,7 +37,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .ui-icon {
   width: 1em;
   height: 1em;
@@ -45,10 +45,10 @@ export default {
   fill: currentColor;
   overflow: hidden;
   display: inline-block;
-}
 
-.ui-icon.ui-icon-loading {
-  animation: rotating 2s linear infinite;
+  &.ui-icon-loading {
+    animation: rotating 2s linear infinite;
+  }
 }
 
 @keyframes rotating {

package/src/components/table/table.select.vue

@@ -104,7 +104,7 @@
         const listSearchItem = (items) => {
           return items.reduce((results, item) => {
             if (item.$options.name === TableSelectItem.name) {
-              if (item.ignore === false) {
+              if (!item.ignore) {
                 results.push(item);
               }
             } else {