@tmagic/form 1.2.0-beta.2 → 1.2.0-beta.21

package/src/fields/SelectOptionGroups.vue

@@ -1,20 +1,25 @@
 <template>
-  <el-option-group v-for="(group, index) in options" :key="index" :label="group.label" :disabled="group.disabled">
-    <el-option
+  <TMagicOptionGroup v-for="(group, index) in options" :key="index" :label="group.label" :disabled="group.disabled">
+    <component
       v-for="(item, index) in group.options"
+      :is="uiComponent.component"
       :key="index"
-      :label="item.label"
+      :label="item.label || item.text"
       :value="item.value"
       :disabled="item.disabled"
     >
-    </el-option>
-  </el-option-group>
+    </component>
+  </TMagicOptionGroup>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSelectOptionGroups">
+import { getConfig, TMagicOptionGroup } from '@tmagic/design';
+
 import { SelectGroupOption } from '../schema';
 
 defineProps<{
   options: SelectGroupOption[];
 }>();
+
+const uiComponent = getConfig('components').option;
 </script>

package/src/fields/SelectOptions.vue

@@ -1,14 +1,16 @@
 <template>
-  <el-option
+  <TMagicOption
     v-for="option in options"
     :label="option.text"
     :value="option.value"
     :key="valueKey ? option.value[valueKey] : option.value"
     :disabled="option.disabled"
-  ></el-option>
+  ></TMagicOption>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MFormSelectOptions">
+import { TMagicOption } from '@tmagic/design';
+
 import { SelectOption } from '../schema';
 
 defineProps<{

package/src/fields/Switch.vue

@@ -1,65 +1,62 @@
 <template>
-  <el-switch
-    v-if="model"
-    v-model="model[n]"
+  <TMagicSwitch
+    v-model="model[name]"
     :size="size"
     :activeValue="activeValue"
     :inactiveValue="inactiveValue"
     :disabled="disabled"
     @change="changeHandler"
-  ></el-switch>
+  ></TMagicSwitch>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+<script lang="ts" setup name="MFormSwitch">
+import { computed } from 'vue';
+
+import { TMagicSwitch } from '@tmagic/design';
 
 import { SwitchConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
-export default defineComponent({
-  name: 'm-fields-switch',
-
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<SwitchConfig>,
-      required: true,
-    },
-  },
-
-  emits: ['change'],
 
-  setup(props, { emit }) {
-    useAddField(props.prop);
-
-    return {
-      n: computed(() => props.name || props.config.name || ''),
-      activeValue: computed(() => {
-        if (typeof props.config.activeValue === 'undefined') {
-          if (props.config.filter === 'number') {
-            return 1;
-          }
-        } else {
-          return props.config.activeValue;
-        }
+const props = defineProps<{
+  config: SwitchConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+const changeHandler = (value: number) => {
+  emit('change', value);
+};
+
+const activeValue = computed(() => {
+  if (typeof props.config.activeValue === 'undefined') {
+    if (props.config.filter === 'number') {
+      return 1;
+    }
+  } else {
+    return props.config.activeValue;
+  }
+
+  return true;
+});
 
-        return true;
-      }),
-      inactiveValue: computed(() => {
-        if (typeof props.config.inactiveValue === 'undefined') {
-          if (props.config.filter === 'number') {
-            return 0;
-          }
-        } else {
-          return props.config.inactiveValue;
-        }
+const inactiveValue = computed(() => {
+  if (typeof props.config.inactiveValue === 'undefined') {
+    if (props.config.filter === 'number') {
+      return 0;
+    }
+  } else {
+    return props.config.inactiveValue;
+  }
 
-        return false;
-      }),
-      changeHandler: (v: boolean | number | string) => {
-        emit('change', v);
-      },
-    };
-  },
+  return false;
 });
 </script>

package/src/fields/Text.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-input
-    v-model="model[modelName]"
+  <TMagicInput
+    v-model="model[name]"
     clearable
     :size="size"
     :placeholder="config.placeholder"
@@ -20,117 +20,109 @@
         {{ config.append.text }}
       </el-button>
     </template>
-  </el-input>
+  </TMagicInput>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+<script lang="ts" setup name="MFormText">
+import { inject } from 'vue';
 
+import { TMagicInput } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
 
 import { FormState, TextConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-text',
-
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<TextConfig>,
-      required: true,
-    },
-  },
-
-  emits: ['change', 'input'],
-
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
-
-    useAddField(props.prop);
-
-    const modelName = computed(() => props.name || props.config.name || '');
-    return {
-      modelName,
-
-      changeHandler(v: string | number) {
-        emit('change', v);
-      },
-
-      inputHandler(v: string | number) {
-        emit('input', v);
-        mForm?.$emit('field-input', props.prop, v);
-      },
-
-      buttonClickHandler() {
-        if (typeof props.config.append === 'string') return;
-
-        if (props.config.append?.handler) {
-          props.config.append.handler(mForm, {
-            model: props.model,
-            values: mForm?.values,
-          });
-        }
-      },
-
-      keyUpHandler($event: KeyboardEvent) {
-        if (!props.model) return;
-        if (!modelName.value) return;
-
-        const arrowUp = $event.key === 'ArrowUp';
-        const arrowDown = $event.key === 'ArrowDown';
-
-        if (!arrowUp && !arrowDown) {
-          return;
-        }
-
-        const value = props.model[modelName.value];
-        let num;
-        let unit;
-        if (isNumber(value)) {
-          num = +value;
-        } else {
-          value.replace(/^([0-9.]+)([a-z%]+)$/, ($0: string, $1: string, $2: string) => {
-            num = +$1;
-            unit = $2;
-          });
-        }
-
-        if (num === undefined) {
-          return;
-        }
-
-        const ctrl = navigator.platform.match('Mac') ? $event.metaKey : $event.ctrlKey;
-        const shift = $event.shiftKey;
-        const alt = $event.altKey;
-
-        if (arrowUp) {
-          if (ctrl) {
-            num += 100;
-          } else if (alt) {
-            num = (num * 10000 + 1000) / 10000;
-          } else if (shift) {
-            num = num + 10;
-          } else {
-            num += 1;
-          }
-        } else if (arrowDown) {
-          if (ctrl) {
-            num -= 100;
-          } else if (alt) {
-            num = (num * 10000 - 1000) / 10000;
-          } else if (shift) {
-            num -= 10;
-          } else {
-            num -= 1;
-          }
-        }
-
-        props.model[modelName.value] = `${num}${unit || ''}`;
-        emit('change', props.model[modelName.value]);
-      },
-    };
-  },
-});
+const props = defineProps<{
+  config: TextConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change', 'input']);
+
+useAddField(props.prop);
+
+const mForm = inject<FormState | undefined>('mForm');
+
+const changeHandler = (value: number) => {
+  emit('change', value);
+};
+
+const inputHandler = (v: string) => {
+  emit('input', v);
+  mForm?.$emit('field-input', props.prop, v);
+};
+
+const buttonClickHandler = () => {
+  if (typeof props.config.append === 'string') return;
+
+  if (props.config.append?.handler) {
+    props.config.append.handler(mForm, {
+      model: props.model,
+      values: mForm?.values,
+    });
+  }
+};
+
+const keyUpHandler = ($event: KeyboardEvent) => {
+  if (!props.model) return;
+  if (!props.name) return;
+
+  const arrowUp = $event.key === 'ArrowUp';
+  const arrowDown = $event.key === 'ArrowDown';
+
+  if (!arrowUp && !arrowDown) {
+    return;
+  }
+
+  const value = props.model[props.name];
+  let num;
+  let unit;
+  if (isNumber(value)) {
+    num = +value;
+  } else {
+    value.replace(/^([0-9.]+)([a-z%]+)$/, ($0: string, $1: string, $2: string) => {
+      num = +$1;
+      unit = $2;
+    });
+  }
+
+  if (num === undefined) {
+    return;
+  }
+
+  const ctrl = navigator.platform.match('Mac') ? $event.metaKey : $event.ctrlKey;
+  const shift = $event.shiftKey;
+  const alt = $event.altKey;
+
+  if (arrowUp) {
+    if (ctrl) {
+      num += 100;
+    } else if (alt) {
+      num = (num * 10000 + 1000) / 10000;
+    } else if (shift) {
+      num = num + 10;
+    } else {
+      num += 1;
+    }
+  } else if (arrowDown) {
+    if (ctrl) {
+      num -= 100;
+    } else if (alt) {
+      num = (num * 10000 - 1000) / 10000;
+    } else if (shift) {
+      num -= 10;
+    } else {
+      num -= 1;
+    }
+  }
+
+  props.model[props.name] = `${num}${unit || ''}`;
+  emit('change', props.model[props.name]);
+};
 </script>

package/src/fields/Textarea.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-input
+  <TMagicInput
     v-model="model[name]"
     type="textarea"
     :size="size"
@@ -9,52 +9,40 @@
     @change="changeHandler"
     @input="inputHandler"
   >
-  </el-input>
+  </TMagicInput>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, PropType } from 'vue';
+<script lang="ts" setup name="MFormTextarea">
+import { inject } from 'vue';
+
+import { TMagicInput } from '@tmagic/design';
 
 import { FormState, TextareaConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
-export default defineComponent({
-  name: 'm-fields-textarea',
-
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<TextareaConfig>,
-      required: true,
-    },
-  },
-
-  emits: {
-    change(values: string | number) {
-      return values;
-    },
-
-    input(values: string | number) {
-      return values;
-    },
-  },
-
-  setup(props, { emit }) {
-    useAddField(props.prop);
-
-    const mForm = inject<FormState | null>('mForm');
-
-    return {
-      mForm,
-      changeHandler: (v: string) => {
-        emit('change', v);
-      },
-
-      inputHandler: (v: string) => {
-        emit('input', v);
-        mForm?.$emit('field-input', props.prop, v);
-      },
-    };
-  },
-});
+
+const props = defineProps<{
+  config: TextareaConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change', 'input']);
+
+useAddField(props.prop);
+
+const mForm = inject<FormState | null>('mForm');
+
+const changeHandler = (value: number) => {
+  emit('change', value);
+};
+
+const inputHandler = (v: string) => {
+  emit('input', v);
+  mForm?.$emit('field-input', props.prop, v);
+};
 </script>

package/src/fields/Time.vue

@@ -1,46 +1,37 @@
 <template>
-  <el-time-picker
+  <TMagicTimePicker
     v-model="model[name]"
+    :value-format="config.valueFormat || 'HH:mm:ss'"
+    :format="config.format || 'HH:mm:ss'"
     :size="size"
-    value-format="HH:mm:ss"
     :placeholder="config.placeholder"
     :disabled="disabled"
     @change="changeHandler"
-  ></el-time-picker>
+  ></TMagicTimePicker>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup name="MFormTime">
+import { TMagicTimePicker } from '@tmagic/design';
 
 import { TimeConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
-  name: 'm-fields-time',
+const props = defineProps<{
+  config: TimeConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
 
-  props: {
-    ...fieldProps,
-    config: {
-      type: Object as PropType<TimeConfig>,
-      required: true,
-    },
-  },
+const emit = defineEmits(['change']);
 
-  emits: {
-    change(values: Date) {
-      return values;
-    },
-  },
+useAddField(props.prop);
 
-  setup(props, { emit }) {
-    useAddField(props.prop);
-
-    return {
-      changeHandler: (v: Date) => {
-        emit('change', v);
-      },
-    };
-  },
-});
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
 </script>

package/src/index.ts

@@ -53,7 +53,6 @@ import './theme/index.scss';
 export * from './schema';
 export * from './utils/form';
 export * from './utils/useAddField';
-export { default as fieldProps } from './utils/fieldProps';
 
 export { default as MForm } from './Form.vue';
 export { default as MFormDialog } from './FormDialog.vue';
@@ -92,34 +91,34 @@ const install = (app: App, opt: any) => {
   app.config.globalProperties.$MAGIC_FORM = option;
   setConfig(option);
 
-  app.component(Form.name, Form);
-  app.component(FormDialog.name, FormDialog);
-  app.component(Container.name, Container);
+  app.component('m-form', Form);
+  app.component('m-form-dialog', FormDialog);
+  app.component('m-form-container', Container);
   app.component('m-form-fieldset', Fieldset);
-  app.component(GroupList.name, GroupList);
-  app.component(Panel.name, Panel);
-  app.component(Row.name, Row);
-  app.component(MStep.name, MStep);
+  app.component('m-form-group-list', GroupList);
+  app.component('m-form-panel', Panel);
+  app.component('m-form-row', Row);
+  app.component('m-form-step', MStep);
   app.component('m-form-table', Table);
-  app.component(Tabs.name, Tabs);
-  app.component(Text.name, Text);
-  app.component(Number.name, Number);
-  app.component(Textarea.name, Textarea);
+  app.component('m-form-tab', Tabs);
+  app.component('m-fields-text', Text);
+  app.component('m-fields-number', Number);
+  app.component('m-fields-textarea', Textarea);
   app.component('m-fields-hidden', Hidden);
-  app.component(Date.name, Date);
-  app.component(DateTime.name, DateTime);
-  app.component(Time.name, Time);
-  app.component(Checkbox.name, Checkbox);
-  app.component(Switch.name, Switch);
+  app.component('m-fields-date', Date);
+  app.component('m-fields-datetime', DateTime);
   app.component('m-fields-daterange', Daterange);
+  app.component('m-fields-time', Time);
+  app.component('m-fields-checkbox', Checkbox);
+  app.component('m-fields-switch', Switch);
   app.component('m-fields-color-picker', ColorPicker);
-  app.component(CheckboxGroup.name, CheckboxGroup);
-  app.component(RadioGroup.name, RadioGroup);
+  app.component('m-fields-checkbox-group', CheckboxGroup);
+  app.component('m-fields-radio-group', RadioGroup);
   app.component('m-fields-display', Display);
-  app.component(Link.name, Link);
-  app.component(Select.name, Select);
-  app.component(Cascader.name, Cascader);
-  app.component(DynamicField.name, DynamicField);
+  app.component('m-fields-link', Link);
+  app.component('m-fields-select', Select);
+  app.component('m-fields-cascader', Cascader);
+  app.component('m-fields-dynamic-field', DynamicField);
 };
 
 export default {