free-fe-core-modules 0.0.16 → 0.0.17

package/free-field/Fields/Rich.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-field-rich row no-wrap">
+  <div class="free-field-rich row no-wrap">
     <span
       :class="`field-label ${(Field.Label && Field.Label.trim().length)
         ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
@@ -15,10 +15,10 @@
         class="required-mark"
       >*</span>
     </span>
-    <span class="content relative-position fit" :class="isValid ? '' : 'input-field--error'">
+    <span class="content relative-position fit" :class="isValid ? '' : 'free-field--error'">
       <slot name="warning"></slot>
 
-      <div class="input-field--error-tag" v-if="!isValid">
+      <div class="free-field--error-tag" v-if="!isValid">
         <e-icon name="error"></e-icon>
       </div>
 
@@ -183,6 +183,7 @@ export default defineComponent({
         'aligncenter',
         'alignright',
         'alignjustify',
+        'indent2em',
         '|',
         'numlist',
         'bullist',
@@ -244,6 +245,28 @@ export default defineComponent({
     };
 
     const tinySetup = (editor) => {
+      // add button for indent 2ems
+      editor.on('init', () => {
+        editor.formatter.register('indent2em', {
+          block: 'p',
+          styles: { 'text-indent': '2em' }
+        });
+      })
+
+      editor.ui.registry.addToggleButton('indent2em', {
+        tooltip: '首行缩进两个字宽度',
+        icon: 'indent',
+        onAction: function () {
+          editor.execCommand('mceToggleFormat', false, 'indent2em');
+        },
+        onSetup: function (api) {
+          editor.formatter.formatChanged('indent2em', function (state) {
+            api.setActive(state);
+          });
+        }
+      });
+
+      // add button for insert field content
       if (props.enableField) {
         editor.ui.registry.addButton('insertFieldButton', {
           text: '数据字段',
@@ -345,7 +368,7 @@ export default defineComponent({
 // .tox-tinymce-aux
 //   z-index: 6001 !important
 
-.input-field-rich
+.free-field-rich
   .tox-statusbar__branding
     display: none
   .tox-tinymce

package/free-field/Fields/Row.vue

@@ -1,20 +1,23 @@
 <template>
-  <div class="input-field-row row" :class="rowClasses">
-    <input-field
-      v-for="(field, idx) in Field.Options.List"
+  <div class="free-field-row row" :class="rowClasses" v-if="Field">
+    <free-field
+      v-for="(field, idx) in Field.Options?.List"
       :Field="field"
       :values="fieldData"
       :key="idx"
-      @input="$emit('input')"></input-field>
+      @input="$emit('input')"></free-field>
   </div>
 </template>
 
 <script>
-import { InputFieldMixin } from 'eis-admin-mixins';
+import { defineComponent } from 'vue';
+import { freeFieldProps } from '../composible/useFreeField';
 
-export default {
+export default defineComponent({
   name: 'InputFieldRow',
-  mixins: [InputFieldMixin],
+  props: {
+    ...freeFieldProps,
+  },
   fieldInfo: {
     Category: 'Container',
     Label: '行',
@@ -23,7 +26,7 @@ export default {
       {
         Label: '不换行',
         Name: 'Options.NoWrap',
-        Type: 'Bollean',
+        Type: 'Boolean',
       },
       {
         Label: '竖向对齐',
@@ -116,10 +119,10 @@ export default {
   },
   computed: {
     rowClasses() {
-      return '';
+      return this.Field.Options?.NoWrap ? 'nowrap' : '' + this.Field.Options?.ItemsAlign + ' ' + this.Field.Options?.JustifyAlign;
     },
   },
-};
+});
 </script>
 
 <style lang="scss" scoped>

package/free-field/Fields/Search.vue

@@ -1,7 +1,7 @@
 <template>
-  <span class="input-field-search">
-    <q-dialog v-model="showSearch" class="input-field-search-dialog" persistent>
-      <q-card class="input-field-search-dialog-card">
+  <span class="free-field-search">
+    <q-dialog v-model="showSearch" class="free-field-search-dialog" persistent>
+      <q-card class="free-field-search-dialog-card">
         <q-toolbar>
           <div class="simple-field full-width">
             <q-input
@@ -9,24 +9,24 @@
               v-model="searchKey"
               hide-bottom-space
               :placeholder="Field &&
-              ((Field.Options && Field.Options.SearchPlaceholder) || Field.Placeholder)"
+              ((Field.Options?.SearchPlaceholder) || Field.Placeholder)"
               @keydown.enter="search()"
               class="full-width"
             >
               <template v-slot:append>
-                <q-btn :class="Field.Options.SearchBtnClasses" :flat="!Field.Options.SearchBtn3D" :round="!Field.Options.SearchBtnRect" icon="search" @click="search()" :disabled="Field.ReadOnly">{{Field.Options.SearchBtnText}}</q-btn>
+                <q-btn :class="Field.Options?.SearchBtnClasses" :flat="!Field.Options?.SearchBtn3D" :round="!Field.Options?.SearchBtnRect" icon="search" @click="search()" :disabled="Field.ReadOnly">{{Field.Options.SearchBtnText}}</q-btn>
               </template>
             </q-input>
           </div>
         </q-toolbar>
 
         <q-card-section :style="`
-          width: ${Field.Options.Width|| '800px'};
-          max-width: ${Field.Options.MaxWidth|| '80vw'};
+          width: ${Field.Options?.Width|| '800px'};
+          max-width: ${Field.Options?.MaxWidth|| '80vw'};
           overflow-y: scroll`">
           <q-table
-            :flat="Field.Options && Field.Options.Flat"
-            :bordered="Field.Options && Field.Options.Bordered"
+            :flat="Field.Options?.Flat"
+            :bordered="Field.Options?.Bordered"
             :rows="searchData ? searchData.docs : []"
             :columns="searchColumns"
             row-key="id"
@@ -37,7 +37,7 @@
           >
             <template v-slot:header="props">
               <q-tr :props="props">
-                <q-th auto-width v-if="!Field.Options || !Field.Options.checkOnRight"/>
+                <q-th auto-width v-if="!Field.Options?.checkOnRight"/>
                 <q-th
                   v-for="col in props.cols"
                   :key="col.name"
@@ -45,13 +45,13 @@
                 >
                   {{ col.label }}
                 </q-th>
-                <q-th auto-width v-if="Field.Options && Field.Options.checkOnRight"/>
+                <q-th auto-width v-if="Field.Options?.checkOnRight"/>
               </q-tr>
             </template>
             <template v-slot:body="props">
               <q-tr class="table-row">
-                <q-td auto-width v-if="!Field.Options || !Field.Options.checkOnRight">
-                   <q-toggle v-model="props.selected" v-if="Field.Options && Field.Options.useToggle"/>
+                <q-td auto-width v-if="!Field.Options?.checkOnRight">
+                   <q-toggle v-model="props.selected" v-if="Field.Options?.useToggle"/>
                    <q-checkbox v-else v-model="props.selected"></q-checkbox>
                 </q-td>
                 <q-td
@@ -62,8 +62,8 @@
                 >
                 {{col.value}}
                 </q-td>
-                <q-td auto-width v-if="Field.Options && Field.Options.checkOnRight">
-                   <q-toggle v-model="props.selected" v-if="Field.Options && Field.Options.useToggle"/>
+                <q-td auto-width v-if="Field.Options?.checkOnRight">
+                   <q-toggle v-model="props.selected" v-if="Field.Options?.useToggle"/>
                    <q-checkbox v-else v-model="props.selected"></q-checkbox>
                 </q-td>
               </q-tr>
@@ -92,12 +92,12 @@
         <q-card-actions>
           <div class="buttons row full-width justify-center q-ma-sm">
             <q-btn
-              :icon="(Field.Options && Field.Options.CancelIcon) || 'cancel'"
+              :icon="(Field.Options?.CancelIcon) || 'cancel'"
               class="cancel-btn q-mr-md"
               @click="showSearch = false; searchSelected=originalSelected; $emit('input')"
             >{{$t('cancelButtonText')}}</q-btn>
             <q-btn
-              :icon="(Field.Options && Field.Options.OkIcon) || 'check'"
+              :icon="(Field.Options?.OkIcon) || 'check'"
               class="ok-btn" @click="searchOK">{{$t('okButtonText')}}</q-btn>
           </div>
         </q-card-actions>
@@ -116,16 +116,16 @@
         <span v-if="Field.Required" class="required-mark">*</span>
       </span>
       <span class="readonly-content">
-        <span :style="(Field.Info && Field.Info.Style) ? Field.Info.Style : ''">{{searchDisplay}}</span>
+        <span :style="(Field.Info?.Style) ? Field.Info.Style : ''">{{searchDisplay}}</span>
       </span>
     </span>
     <q-input
       v-else
       modelValue=""
-      :type="`${Field && Field.Multiple ? 'textarea' : ''}`"
+      :type="`${Field?.Multiple ? 'textarea' : ''}`"
       hide-bottom-space
       readonly
-      :class="`${Field && Field.Multiple
+      :class="`${Field?.Multiple
         ? '' : 'simple-field'} ${searchDisplay ? 'has-data' : 'empty'}`"
       ref="fieldToValid"
       @click="searchKey = '';searchData = {}; showSearch = true"
@@ -142,13 +142,13 @@
         >
           <q-tooltip
             anchor="top right"
-          >{{selected[(Field.Options && Field.Options.SearchDisplayField) || 'id']}}</q-tooltip>
-          {{selected[(Field.Options && Field.Options.SearchDisplayField) || 'id']}}
+          >{{selected[(Field.Options?.SearchDisplayField) || 'id']}}</q-tooltip>
+          {{selected[(Field.Options?.SearchDisplayField) || 'id']}}
         </q-chip>
       </template>
       <template v-slot:before>
         <span
-          :class="`field-label ${(Field.Label && Field.Label.trim().length)
+          :class="`field-label ${(Field.Label?.trim().length)
             ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
           v-if="Field.Label !== void 0"
         >
@@ -501,11 +501,11 @@ export default defineComponent({
 </script>
 
 <style lang="sass" scoped>
-.input-field-search-dialog-card
+.free-field-search-dialog-card
   max-width: unset !important
   max-height: unset !important
 
-.input-field-search
+.free-field-search
   .simple-field
     display: flex
 </style>

package/free-field/Fields/Select.vue

@@ -1,6 +1,6 @@
 <template>
-  <span :class="(Field && Field.AsCheck) ? 'input-field-select' :
-    'input-field-select simple-field row'">
+  <span :class="(Field && Field.AsCheck) ? 'free-field-select' :
+    'free-field-select simple-field row'">
     <span
       v-if="!Field.AsCheck"
       class="row no-wrap items-center full-width inline-block"
@@ -43,10 +43,10 @@
 
       <q-select
         v-else
-        popup-content-class="input-field-select-control"
+        popup-content-class="free-field-select-control"
         hide-bottom-space
         :modelValue="fieldData.value"
-        @update:modelValue="setFieldData"
+        @update:modelValue="selectChanged"
         :options="Field.Options || []"
         option-value="Value"
         option-label="Label"
@@ -104,7 +104,7 @@
     </span>
     <span
       v-else
-      class="input-field-select-ascheck row items-start no-wrap"
+      class="free-field-select-ascheck row items-start no-wrap"
     >
       <span
         :class="`field-label ${(Field.Label && Field.Label.trim().length)
@@ -127,11 +127,11 @@
         </div>
         <div
           class="checkbox-list"
-          :class="hasError ? 'input-field--error' : ''"
+          :class="hasError ? 'free-field--error' : ''"
         >
 
           <div
-            class="input-field--error-tag"
+            class="free-field--error-tag"
             v-if="hasError"
           >
             <e-icon name="error"></e-icon>
@@ -311,14 +311,18 @@ export default defineComponent({
       validate,
     })
 
+    const selectChanged = (v) => {
+      selfValidate();
+      setFieldData(v, emit);
+    };
+
     const checkChanged = (v) => {
       selfValidate();
 
       if (!props.Field.Multiple) {
         checked.value = [v];
       }
-      setFieldData(checked.value.join(','));
-      emit('input');
+      setFieldData(checked.value.join(','), emit);
     };
 
     const apiCall = () => {
@@ -347,8 +351,7 @@ export default defineComponent({
           if (d.data && d.data.options) {
             selectOptions.value = d.data.options;
             if (d.data.options.findIndex((o) => o.Value === fieldData.value) < 0) {
-              setFieldData(undefined);
-              emit('input');
+              setFieldData(undefined, emit);
             }
           } else {
             selectOptions.value = [];
@@ -386,6 +389,7 @@ export default defineComponent({
 
       readonlyContent,
 
+      selectChanged,
       checkChanged,
     };
   },
@@ -393,7 +397,7 @@ export default defineComponent({
 </script>
 
 <style lang="sass">
-.input-field-select
+.free-field-select
   .q-field__native
     white-space: nowrap
     &>span
@@ -402,6 +406,6 @@ export default defineComponent({
   .checkbox-list
     position: relative
     margin-left: 12px
-    &.input-field--error
+    &.free-field--error
       padding-right: 24px
 </style>

package/free-field/Fields/SelectionChain.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-field-select-chain row items-start no-wrap">
+  <div class="free-field-select-chain row items-start no-wrap">
     <span
       :class="`field-label ${(Field.Label && Field.Label.trim().length)
         ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"

package/free-field/Fields/Separator.js

@@ -14,7 +14,7 @@ export default defineComponent({
   },
   setup(props){
     return () => h(QSeparator, {
-      class: 'input-field-separator',
+      class: 'free-field-separator',
       inset: props.inset,
     });
   },

package/free-field/Fields/SingleList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-field-single-list row" v-if="Field">
+  <div class="free-field-single-list row" v-if="Field">
     <span
       :class="`field-label ${(Field.Label && Field.Label.trim().length)
         ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"

package/free-field/Fields/Static.js

@@ -18,7 +18,7 @@ export default defineComponent({
     const { fieldData } = useFreeField(props);
 
     return () => h('div', {
-      class: 'input-field-static',
+      class: 'free-field-static',
     }, [
       slots.warning && slots.warning(),
       fieldData.value,

package/free-field/Fields/String.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, computed } from 'vue';
+import { defineComponent, h, computed, getCurrentInstance } from 'vue';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import { QInput } from 'quasar';
 import ReadonlyContent from '../composible/readonlyContent';
@@ -44,14 +44,25 @@ export default defineComponent({
       },
     ],
     Description: '',
+    demoField: [{
+      Type: 'Category',
+      Label: '测试一下字符串',
+    },{
+      Type: 'String',
+      Name: 'MyName',
+    }],
+    demoData: {
+      MyName: 'Tom'
+    },
   },
   props: {
     ...freeFieldProps,
   },
   emits: ['input'],
-  setup(props, { emit, slots, expose }){
+  setup(props, { emit, slots, expose, attrs }){
     if (!props.Field) return {};
 
+    const { proxy:vm } = getCurrentInstance();
     const { fieldData, setFieldData } = useFreeField(props);
 
     const readonlyNode = () => h(ReadonlyContent, {
@@ -77,6 +88,7 @@ export default defineComponent({
       // bottomSlots: true,
       hideBottomSpace: true,
       readonly: props.Field?.ReadOnly,
+      placeholder: props.Field?.Placeholder || attrs.placeholder || vm.$t(vm.getModule('core-modules').config['defaultInputFieldPlaceholder']),
 
       class: 'full-width',
       style: props.Field.Info?.Style,
@@ -99,7 +111,7 @@ export default defineComponent({
     })
 
     return () => h('div', {
-      class: 'simple-field input-field-string row items-center no-wrap',
+      class: 'simple-field free-field-string row items-center no-wrap',
     }, [
       props.Field.ReadOnly ? readonlyNode() : inputNode.value,
       slots.warning && slots.warning(),

package/free-field/Fields/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-field-tabs row no-wrap" v-if="Field">
+  <div class="free-field-tabs row no-wrap" v-if="Field">
     <span
       :class="`field-label ${(Field.Label && Field.Label.trim().length)
         ? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`"
@@ -16,20 +16,20 @@
       >*</span>
     </span>
 
-    <div class="col input-field-tabs-tabs-wrapper">
+    <div class="col free-field-tabs-tabs-wrapper">
       <q-tabs
         class="tabs"
         v-model="tab"
         :shrink="true"
         no-caps
-        :vertical="Field.Options.vertical || false"
-        :align="Field.Options.align || 'left'"
-        :dense="Field.Options && Field.Options.dense">
+        :vertical="Field.Options?.vertical || false"
+        :align="Field.Options?.align || 'left'"
+        :dense="Field.Options?.dense">
         <q-tab
           v-for="(t, idx) in fieldData.value" :key="idx"
           :name="idx"
-          :label="t[Field.Options.LabelField]"
-          :dense="Field.Options && Field.Options.dense">
+          :label="t[Field.Options?.LabelField]"
+          :dense="Field.Options?.dense">
         </q-tab>
       </q-tabs>
       <q-tab-panels v-model="tab">
@@ -37,7 +37,7 @@
           v-for="(t, idx) in fieldData.value" :key="idx"
           :name="idx">
           <free-field
-            v-for="(field, idx) in Field.Options.List"
+            v-for="(field, idx) in Field.Options?.List"
             :Field="field"
             :values="t"
             :key="idx"
@@ -149,7 +149,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.input-field-tabs {
+.free-field-tabs {
   &-tabs-wrapper {
     margin-left: 12px;
     border: 1px solid rgba($color: #000000, $alpha: 0.12);

package/free-field/Fields/Text.js

@@ -72,10 +72,11 @@ export default defineComponent({
     })
 
     return () => h('div', {
-      class: 'input-field-text',
+      class: 'free-field-text',
     }, [
       slots.warning && h('div', {
         class: props.Field.Label ? 'warning-with-label' : 'warning-without-label',
+        style: props.Field.Label ? 'margin-left: var(--field-label-width)' : '',
       }, slots.warning()),
       props.Field.ReadOnly ? readonlyNode() : inputNode.value,
     ]);

package/free-field/Fields/Time.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="simple-field input-field-time row items-center no-wrap">
+  <span class="simple-field free-field-time row items-center no-wrap">
     <span v-if="Field.ReadOnly">
       <span
         :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)

package/free-field/Fields/TimeRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="simple-field input-field-time-range row items-center no-wrap">
+  <span class="simple-field free-field-time-range row items-center no-wrap">
     <span v-if="Field.ReadOnly">
       <span
         :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
@@ -56,7 +56,7 @@
         </template>
       </q-input>
 
-      <span class="input-field-range-separator">{{`${Field.Separator || '~'}`}}</span>
+      <span class="free-field-range-separator">{{`${Field.Separator || '~'}`}}</span>
 
       <q-input
         v-model="max"

package/free-field/Fields/Year.js

@@ -131,7 +131,7 @@ export default defineComponent({
     })
 
     return () => h('div', {
-      class: 'simple-field input-field-year row items-center no-wrap',
+      class: 'simple-field free-field-year row items-center no-wrap',
     }, [
       selectNode.value,
       slots.warning && slots.warning(),

package/free-field/Fields/YearRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="input-field-year-range simple-field">
+  <span class="free-field-year-range simple-field">
     <span v-if="Field.ReadOnly">
       <span
         :class="`field-label field-label-readonly ${(Field.Label && Field.Label.trim().length)
@@ -32,7 +32,7 @@
           </span>
         </template>
       </q-select>
-      <span class="input-field-range-separator">{{`${Field.Separator || '~'}`}}</span>
+      <span class="free-field-range-separator">{{`${Field.Separator || '~'}`}}</span>
       <q-select
         v-model="range.max"
         hide-bottom-space

package/free-field/Fields/index.js

@@ -6,6 +6,7 @@ import fCategory from './Category.js';
 import fCheck from './Check.js';
 import fLabels from './Labels.vue';
 import fNumber from './Number.js';
+import fNumberRange from './NumberRange.vue';
 import fPermission from './Permission.vue';
 import fSearch from './Search.vue';
 import fText from './Text.js';
@@ -17,25 +18,27 @@ 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 fFileListCombined from './FileListCombined.vue';
+import fImage from './Image.vue';
+import fImageList from './ImageList.vue';
+import fImageListCombined from './ImageListCombined.vue';
 import fFixedList from './FixedList.vue';
 import fDynamicList from './DynamicList.js';
 import fSingleList from './SingleList.vue';
 import fSelectChain from './SelectionChain.vue';
 import fRich from './Rich.vue';
-import fFieldList from './InputFieldList.vue';
+import fFieldList from './FreeFieldList.vue';
 import fMixedTable from './MixedTable.vue';
 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 fApiCall from './ApiCall.js';
 import fTabs from './Tabs.vue';
+import fRow from './Row.vue';
+import fColumn from './Column.vue';
 
 export default {
   Static: fStatic,
@@ -46,6 +49,7 @@ export default {
   Check: fCheck,
   Labels: fLabels,
   Number: fNumber,
+  NumberRange: fNumberRange,
   Permission: fPermission,
   Search: fSearch,
   Text: fText,
@@ -57,10 +61,12 @@ export default {
   YearRange: fYearRange,
   RadioList: fRadioList,
   Boolean: fBoolean,
-  // File: fFile,
-  // FileList: fFileList,
-  // Image: fImage,
-  // ImageList: fImageList,
+  File: fFile,
+  FileList: fFileList,
+  FileListCombined: fFileListCombined,
+  Image: fImage,
+  ImageList: fImageList,
+  ImageListCombined: fImageListCombined,
   FixedList: fFixedList,
   DynamicList: fDynamicList,
   SingleList: fSingleList,
@@ -72,8 +78,9 @@ export default {
   AgreementCheck: fAgreementCheck,
   Separator: fSeparator,
   QueryFilters: fQueryFilters,
-  // FileListCombined: fFileListCombined,
-  // ImageListCombined: fImageListCombined,
   ApiCall: fApiCall,
+
   Tabs: fTabs,
+  Row: fRow,
+  Column: fColumn,
 };