free-fe-core-modules 0.0.16 → 0.0.18

package/free-field/Fields/RadioList.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="`input-field-radio-list relative-position ${
-        this.hasError ? 'input-field--error' : ''}`">
+  <div :class="`free-field-radio-list relative-position ${
+        this.hasError ? 'free-field--error' : ''}`">
     <slot name="warning"></slot>
     <q-list>
       <q-item
@@ -45,7 +45,7 @@
       </q-item>
     </q-list>
     <div
-      class="input-field--error-tag"
+      class="free-field--error-tag"
       v-if="hasError"
     >
       <e-icon name="error"></e-icon>
@@ -68,6 +68,7 @@ export default defineComponent({
   props: {
     ...freeFieldProps,
   },
+  emits: ['input'],
   setup(props, { expose, emit }) {
     if (!props.Field) return {};
 

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>
 
@@ -109,6 +109,7 @@ export default defineComponent({
   components: {
     tiny,
   },
+  emits: ['input'],
   props: {
     ...freeFieldProps,
     enableField: { type: Boolean, default: false },
@@ -183,6 +184,7 @@ export default defineComponent({
         'aligncenter',
         'alignright',
         'alignjustify',
+        'indent2em',
         '|',
         'numlist',
         'bullist',
@@ -244,6 +246,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 +369,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,25 @@
               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"
+              v-bind="inputControlSettings"
             >
               <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 +38,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 +46,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 +63,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 +93,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 +117,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 +143,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"
         >
@@ -290,7 +291,7 @@ export default defineComponent({
   setup(props, { expose }) {
     if (!props.Field) return {};
 
-    const { fieldData, setFieldData } = useFreeField(props);
+    const { fieldData, setFieldData, inputControlSettings } = useFreeField(props);
 
     const { validate } = useFormValidator('fieldToValid');
     expose({
@@ -300,6 +301,7 @@ export default defineComponent({
     return {
       fieldData,
       setFieldData,
+      inputControlSettings,
     };
   },
   data() {
@@ -501,11 +503,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"
@@ -58,6 +58,8 @@
         ref="fieldToValid"
         :use-input="Field && Field.UseInput"
         :use-chip="Field && Field.UseChip"
+        v-bind="inputControlSettings"
+        :rules="Field.Rules"
       >
         <template v-slot:before>
           <span
@@ -104,7 +106,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 +129,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>
@@ -246,7 +248,7 @@ export default defineComponent({
 
     const { proxy:vm } = getCurrentInstance();
 
-    const { fieldData, getFieldData, setFieldData } = useFreeField(props);
+    const { fieldData, getFieldData, setFieldData, inputControlSettings } = useFreeField(props);
 
     const hasError = ref(false);
     const checked = ref([]);
@@ -296,29 +298,34 @@ export default defineComponent({
     });
 
     const selfValidate = () => {
-      if (props.Field.AsCheck && props.Field.Required) {
-        const isValid = checked.value && checked.value.length > 0;
-        hasError.value = !isValid;
-        return isValid;
-      }
-
-      return true;
+      const isValid = checked.value && checked.value.length > 0;
+      hasError.value = !isValid;
+      return isValid;
     };
 
     const { validate } = useFormValidator('fieldToValid');
     expose ({
-      selfValidate,
       validate,
     })
 
+    if (props.Field.AsCheck && props.Field.Required) {
+      expose ({
+        selfValidate,
+      })
+    }
+
+    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 +354,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,14 +392,16 @@ export default defineComponent({
 
       readonlyContent,
 
+      selectChanged,
       checkChanged,
+      inputControlSettings,
     };
   },
 });
 </script>
 
 <style lang="sass">
-.input-field-select
+.free-field-select
   .q-field__native
     white-space: nowrap
     &>span
@@ -402,6 +410,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' : ''}`"
@@ -35,6 +35,7 @@
           emit-value
           @input="selectionChanged(index)"
           ref="fieldsToValid"
+          v-bind="inputControlSettings"
         ></q-select>
       </span>
       <span v-if="Field && Field.ReadOnly">
@@ -119,7 +120,7 @@ export default defineComponent({
 
     const { proxy:vm } = getCurrentInstance();
 
-    const { fieldData, setFieldData } = useFreeField(props);
+    const { fieldData, setFieldData, inputControlSettings } = useFreeField(props);
 
     const optionsList = ref([]);
     const valuesList = ref([]);
@@ -217,6 +218,7 @@ export default defineComponent({
       valuesList,
 
       selectionChanged,
+      inputControlSettings,
     };
   },
   created() {

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,15 +44,26 @@ 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 { fieldData, setFieldData } = useFreeField(props);
+    const { proxy:vm } = getCurrentInstance();
+    const { fieldData, setFieldData, inputControlSettings } = useFreeField(props);
 
     const readonlyNode = () => h(ReadonlyContent, {
       Field: props.Field,
@@ -78,6 +89,10 @@ export default defineComponent({
       hideBottomSpace: true,
       readonly: props.Field?.ReadOnly,
 
+      ...inputControlSettings.value,
+
+      placeholder: props.Field?.Placeholder || attrs.placeholder || vm.$t(vm.getModule('core-modules').config['defaultInputFieldPlaceholder']),
+
       class: 'full-width',
       style: props.Field.Info?.Style,
 
@@ -93,13 +108,13 @@ export default defineComponent({
       append,
     }));
 
-    const { validate } = useFormValidator(inputNode);
+    const { validate } = useFormValidator(inputNode.value);
     expose({
       validate,
     })
 
     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

@@ -1,4 +1,4 @@
-import { defineComponent, h, ref, watchEffect, computed } from 'vue';
+import { defineComponent, h, ref, watchEffect, computed, useAttrs } from 'vue';
 import { QInput } from 'quasar';
 import { useFreeField, freeFieldProps } from '../composible/useFreeField';
 import ReadonlyContent from '../composible/readonlyContent';
@@ -24,10 +24,10 @@ export default defineComponent({
     ...freeFieldProps,
   },
   emits: ['input'],
-  setup(props, { emit, slots, expose }){
+  setup(props, { emit, slots, expose, attrs }){
     if (!props.Field) return {};
 
-    const { fieldData, setFieldData } = useFreeField(props);
+    const { fieldData, setFieldData, inputControlSettings } = useFreeField(props);
 
     const rows = ref(3);
 
@@ -53,6 +53,8 @@ export default defineComponent({
       readonly: props.Field?.ReadOnly,
       rows: rows.value,
 
+      ...inputControlSettings.value,
+
       class: 'full-width',
       style: props.Field.Info?.Style,
 
@@ -72,10 +74,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,
     ]);