free-fe-core-modules 0.0.3 → 0.0.4

package/components/Basic/SummaryHead.vue

@@ -76,15 +76,26 @@
 
 <script>
 import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'SummaryHead',
-  mixins: [mixins.ArrayDataMixin],
   props: {
+    ...objectDataProps,
     has_multiple_head: { type: Boolean, default: false },
     values: {type: Object, default: () => ({})},
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   created() {
     if (this.values) {
       this.data = this.values;

package/components/Dialog/BasicDialog.vue

@@ -100,14 +100,13 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
 import FreeField from '../../free-field/composible/fieldWrapper';
 import EIcon from '../Basic/EIcon.vue';
 
 export default defineComponent({
   name: 'BasicDialog',
-  mixins: [mixins.InputFieldValidator],
+  // mixins: [mixins.InputFieldValidator],
   emits: ['hide', 'ok', 'cancel'],
   props: {
     persistent: { type: Boolean, default: true },

package/components/SlidingCarousel/index.vue

@@ -26,13 +26,13 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'SlidingCarousel',
-  mixins: [mixins.ArrayDataMixin],
   props: {
+    ...objectDataProps,
     interval: { type: Number, default: 3000 },
     height: { type: String, default: '220px' },
     width: { type: String, default: '100%' },
@@ -42,6 +42,17 @@ export default defineComponent({
     swipeable: { type: Boolean, default: true },
     thumbnails: { type: Boolean, default: true },
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   data() {
     return {
       slide: 0,

package/components/SlidingNews/index.vue

@@ -65,13 +65,13 @@
 </template>
 
 <script>
-import mixins from 'free-fe-mixins';
 import { defineComponent } from 'vue';
+import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'SlidingNews',
-  mixins: [mixins.ArrayDataMixin],
   props: {
+    ...objectDataProps,
     interval: { type: Number, default: 3000 },
     height: { type: String, default: '40px' },
     width: { type: String, default: '100%' },
@@ -83,6 +83,17 @@ export default defineComponent({
     transitionPrev: { type: String, default: 'slide-up' },
     transitionNext: { type: String, default: 'slide-down' },
   },
+  setup(props, ctx) {
+    const {
+      data,
+      refreshData,
+    } = useObjectData(props, ctx);
+
+    return {
+      data, 
+      refreshData,
+    };
+  },
   data() {
     return {
       visible: true,

package/free-field/Fields/PermissionEditor.vue

@@ -137,7 +137,6 @@ export default defineComponent({
     })
 
     watch(hasThis, (v) => {
-      console.log('hasThis changed', v)
       if (v) {
         // checked from unchecked
         fieldData.value = fieldData.value || {};

package/free-field/Fields/index.js

@@ -17,10 +17,10 @@ import fYear from './Year.js';
 import fYearRange from './YearRange.vue';
 import fRadioList from './RadioList.vue';
 import fBoolean from './Boolean.js';
-import fFile from './File.vue';
-import fFileList from './FileList.vue';
-import fImage from './Image.vue';
-import fImageList from './ImageList.vue';
+// import fFile from './File.vue';
+// import fFileList from './FileList.vue';
+// import fImage from './Image.vue';
+// import fImageList from './ImageList.vue';
 import fFixedList from './FixedList.vue';
 import fDynamicList from './DynamicList.js';
 import fSingleList from './SingleList.vue';
@@ -32,8 +32,8 @@ import fCustomize from './Customize.js';
 import fAgreementCheck from './AgreementCheck.js';
 import fSeparator from './Separator.js';
 import fQueryFilters from './QueryFilters.vue';
-import fFileListCombined from './FileListCombined.vue';
-import fImageListCombined from './ImageListCombined.vue';
+// import fFileListCombined from './FileListCombined.vue';
+// import fImageListCombined from './ImageListCombined.vue';
 import fApiCall from './ApiCall.js';
 
 export default {
@@ -56,10 +56,10 @@ export default {
   YearRange: fYearRange,
   RadioList: fRadioList,
   Boolean: fBoolean,
-  File: fFile,
-  FileList: fFileList,
-  Image: fImage,
-  ImageList: fImageList,
+  // File: fFile,
+  // FileList: fFileList,
+  // Image: fImage,
+  // ImageList: fImageList,
   FixedList: fFixedList,
   DynamicList: fDynamicList,
   SingleList: fSingleList,
@@ -71,8 +71,8 @@ export default {
   AgreementCheck: fAgreementCheck,
   Separator: fSeparator,
   QueryFilters: fQueryFilters,
-  FileListCombined: fFileListCombined,
-  ImageListCombined: fImageListCombined,
+  // FileListCombined: fFileListCombined,
+  // ImageListCombined: fImageListCombined,
   ApiCall: fApiCall,
   // Static: () => import('./Static.vue'),
   // Select: () => import('./Select.vue'),

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "free-fe-core-modules",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "index.js",
   "repository": "git@gitlab.com:eis-base/modules/free-fe-core-modules.git",
   "author": "zhiquan",
   "license": "UNLICENSED",
   "dependencies": {
-    "@tinymce/tinymce-vue": "^5.0.0"
+    "@tinymce/tinymce-vue": "^5.0.1"
   }
 }

package/view/menu/index.vue

@@ -91,7 +91,7 @@ import { useObjectData, objectDataProps } from '../../composible/useObjectData';
 
 export default defineComponent({
   name: 'MenuPage',
-  mixins: [mixins.InputFieldValidator],
+  // mixins: [mixins.InputFieldValidator],
   props: {
     ...objectDataProps,
     addMenu: { type: Function, default: () => { } },

package/free-field/Fields/File.vue

@@ -1,382 +0,0 @@
-<template>
-  <div class="row input-field-file">
-    <span
-      :class="`field-label ${(Field.Label && Field.Label.trim().length)
-        ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
-      v-if="Field.Label !== void 0"
-    >
-      <q-tooltip
-        v-if="Field.Description"
-        anchor="top right"
-      >{{Field.Description}}</q-tooltip>
-      {{Field.Label || ''}}
-      <span
-        v-if="Field.Required"
-        class="required-mark"
-      >*</span>
-    </span>
-
-    <q-uploader
-      @uploaded="uploaded"
-      @removed="fieldData = ''; $emit('input')"
-      @rejected="filesRejected"
-      ref="uploader"
-      :factory="factoryFn"
-      auto-upload
-      :max-file-size="maxFileSize"
-      :accept="acceptedFileTypes"
-      :class="`q-ma-xs ${hasError ? 'input-field--error' : ''}`"
-    >
-      <template v-slot:list="scope">
-        <div
-          v-if="Field.Options && Field.Options.AsLink && scope.files.length"
-          class="file-link row full-width ellipsis items-center"
-        >
-          <div
-            class="row ellipsis full-width"
-            v-for="(file, index) in scope.files"
-            :key="index"
-          >
-            <q-btn
-              icon="cloud_download"
-              dense
-              flat
-            ></q-btn>
-            <a
-              class="ellipsis"
-              target="_blank"
-              :href="$filter('serverPath',file.id)"
-              :download="file.name"
-            >
-              {{ file.name }}
-              <q-tooltip>{{ file.name }}</q-tooltip>
-            </a>
-          </div>
-        </div>
-        <div v-else>
-          <div
-            class="uploader-btns row no-wrap items-center"
-            v-if="!dense"
-          >
-            <q-spinner
-              v-if="scope.isUploading"
-              class="q-uploader__spinner"
-            />
-            <q-btn
-              v-if="!scope.isUploading && !Field.ReadOnly"
-              type="a"
-              icon="cloud_upload"
-              dense
-              flat
-              class="upload-btn"
-              label="点击上传"
-            >
-              <q-uploader-add-trigger v-if="!Field.ReadOnly" />
-            </q-btn>
-            <q-btn
-              v-if="scope.isUploading && !Field.ReadOnly"
-              icon="clear"
-              @click="scope.abort"
-              class="clear-btn"
-              round
-              dense
-              flat
-            ></q-btn>
-            <slot name="warning"></slot>
-          </div>
-
-          <q-item v-if="dense && scope.files.length">
-            <q-item-section v-if="scope.files.length && scope.files[0].name">
-              <q-item-label class="full-width ellipsis">
-                {{ scope.files[0].name }}
-                <q-tooltip>{{ scope.files[0].name }}</q-tooltip>
-              </q-item-label>
-            </q-item-section>
-
-            <q-item-section side>
-              <q-btn
-                v-if="!scope.isUploading && !Field.ReadOnly"
-                type="a"
-                icon="cloud_upload"
-                class="upload-btn"
-                dense
-                flat
-              >
-                <q-uploader-add-trigger v-if="!Field.ReadOnly" />
-              </q-btn>
-            </q-item-section>
-          </q-item>
-
-          <div
-            v-else-if="scope.files.length"
-            class="file-list row items-start justify-start"
-          >
-            <q-card
-              flat
-              class="file-list-item"
-              v-for="(file, index) in scope.files"
-              :key="index"
-            >
-              <e-icon
-                class="file-image"
-                :name="fileThumb(file)"
-                thumb
-                :relative="filePreviewType(file) !== 'image'"
-                @click="preview(file)"
-              >
-                <div class="view-btn-wrapper absolute-full justify-center text-center">
-                  <q-btn
-                    flat
-                    class="view-btn full-height full-width"
-                  >查看</q-btn>
-                </div>
-              </e-icon>
-              <span class="file-name full-width ellipsis">
-                <a
-                  v-if="file && file.id"
-                  target="_blank"
-                  :href="$filter('serverPath',file.id)"
-                  :download="file.name">
-                    {{ file.name }}
-                </a>
-                <span v-else-if="file && file.name">
-                  {{file.name}}
-                </span>
-                <q-tooltip>{{ file.name }}</q-tooltip>
-              </span>
-
-              <span class="file-size full-width ellipsis">
-                Size: {{ file.sizeLabel || file.__sizeLabel }}
-              </span>
-
-              <q-btn
-                flat
-                dense
-                round
-                class="delete-btn"
-                icon="close"
-                @click="scope.removeFile(file)"
-                v-if="!Field.ReadOnly"
-              />
-            </q-card>
-          </div>
-          <div
-            class="input-field--error-tag"
-            v-if="hasError"
-          >
-            <e-icon name="error"></e-icon>
-          </div>
-        </div>
-      </template>
-    </q-uploader>
-    <q-dialog
-      class="image-preview-dialog"
-      flat
-      full-width
-      full-height
-      v-model="showPreview"
-      style="background: rgba(0,0,0,0)"
-    >
-      <div class="image-preview">
-        <q-img
-          v-if="previewType=== 'image'"
-          contain
-          :src="previewFile"
-          @click="showPreview=false"
-          style="height: 100%; max-width: 100%;"
-        >
-        </q-img>
-
-        <q-pdfviewer
-          v-if="previewType === 'pdf'"
-          v-model="showPreview"
-          @click="showPreview=false"
-          @error="pdfError"
-          @load="pdfLoad"
-          :src="previewFile"
-          type="pdfjs"
-          style="height: 100%; max-width: 100%;"
-        />
-      </div>
-    </q-dialog>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import mixins from 'free-fe-mixins';
-
-export default defineComponent({
-  name: 'InputFieldFile',
-  mixins: [mixins.UploaderMixin, mixins.InputFieldMixin],
-  emits:['input'],
-  fieldInfo: {
-    Category: 'Upload',
-    Label: '文件',
-    Value: 'File',
-    Extra: [
-      {
-        Type: 'String',
-        Label: '支持的文件类型',
-        Name: 'Options.Ext',
-        Default: 'pdf,doc,docx',
-      },
-      {
-        Type: 'String',
-        Label: '最大文件大小',
-        Name: 'MaxValue',
-        Default: '10m',
-      },
-      {
-        Type: 'Boolean',
-        Label: '紧凑样式',
-        Name: 'Options.Dense',
-        Default: false,
-      },
-      {
-        Type: 'Boolean',
-        Label: '显示为链接',
-        Name: 'Options.AsLink',
-        Default: false,
-      },
-    ],
-    Description: '',
-  },
-  data() {
-    return {
-      hasError: false,
-    };
-  },
-  computed: {
-    dense() {
-      return (
-        !!this.Field
-        && (!!this.Field.dense
-          || (!!this.Field.Options && !!this.Field.Options.Dense))
-      );
-    },
-  },
-  watch: {
-    fieldData() {
-      if (this.fieldData) {
-        try {
-          this.$refs.uploader.files = typeof this.fieldData === 'string'
-            ? [JSON.parse(this.fieldData)]
-            : [this.fieldData];
-        } catch (ex) {
-          //
-        }
-      }
-    },
-  },
-  mounted() {
-    if (this.fieldData) {
-      try {
-        this.$refs.uploader.files = typeof this.fieldData === 'string'
-          ? [JSON.parse(this.fieldData)]
-          : [this.fieldData];
-      } catch (ex) {
-        //
-      }
-    }
-  },
-  methods: {
-    validate() {
-      if (this.Field.Required) {
-        this.hasError = this.$refs.uploader.files.length <= 0;
-        return this.$refs.uploader.files.length > 0;
-      }
-
-      const rules = Array.isArray(typeof this.Field.Rules)
-        ? this.Field.Rules
-        : [this.Field.Rules];
-
-      let isValid = true;
-      for (let i = 0; i < rules.length; i += 1) {
-        const r = rules[i];
-
-        if (typeof r === 'function') {
-          isValid = isValid && r(this.$refs.uploader.files);
-        }
-      }
-
-      this.hasError = !isValid;
-      return isValid;
-    },
-    factoryFn() {
-      return {
-        url: this.Field.url || `${this.ctx.config.baseUrl}/upload`,
-        fieldName: 'file',
-      };
-    },
-    // fileAdded(files) {
-    //   this.$refs.uploader.files = files;
-    // },
-    pdfLoad() {
-      //
-    },
-    pdfError() {
-      //
-    },
-    uploaded(info) {
-      if (info && info.files && info.files.length && info.files[0].xhr) {
-        const { xhr } = info.files[0];
-        let res;
-        if (xhr.response) {
-          if (typeof xhr.response === 'string') {
-            //
-            res = JSON.parse(xhr.response);
-          } else if (typeof xhr.response === 'object') {
-            //
-            res = xhr.response;
-          } else {
-            //
-            return;
-          }
-
-          if (res && res.msg === 'OK') {
-            // this.fieldData = JSON.stringify({
-            //   id: res.data.id,
-            //   // eslint-disable-next-line no-underscore-dangle
-            //   sizeLabel: info.files[0].__sizeLabel,
-            //   name: info.files[0].name,
-            //   size: info.files[0].size,
-            //   type: info.files[0].type,
-            // });
-
-            this.fieldData = {
-              id: res.data.id,
-              date: res.data.date || new Date(),
-              // eslint-disable-next-line no-underscore-dangle
-              sizeLabel: info.files[0].__sizeLabel,
-              name: info.files[0].name,
-              size: info.files[0].size,
-              type: info.files[0].type,
-            };
-
-            this.$emit('input');
-          }
-        }
-
-        this.validate();
-      }
-    },
-  },
-});
-</script>
-
-<style lang="sass" scoped>
-.file-link
-  &>div
-    display: inline-block
-    white-space: nowrap
-    overflow: hidden
-  & a
-    white-space: nowrap
-    overflow: hidden
-</style>
-
-<style lang="sass">
-.q-uploader__header
-  display: none
-</style>