@tmagic/form 1.3.0-alpha.23 → 1.3.0-alpha.24

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.23",
+  "version": "1.3.0-alpha.24",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.3.0-alpha.23",
-    "@tmagic/utils": "1.3.0-alpha.23",
+    "@tmagic/design": "1.3.0-alpha.24",
+    "@tmagic/utils": "1.3.0-alpha.24",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.3.4"

package/src/FormDialog.vue

@@ -25,6 +25,8 @@
         :init-values="values"
         :parent-values="parentValues"
         :label-width="labelWidth"
+        :label-position="labelPosition"
+        :inline="inline"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -78,6 +80,8 @@ const props = withDefaults(
     fullscreen?: boolean;
     disabled?: boolean;
     title?: string;
+    inline?: boolean;
+    labelPosition?: string;
     zIndex?: number;
     size?: 'small' | 'default' | 'large';
     confirmText?: string;

package/src/FormDrawer.vue

@@ -21,6 +21,8 @@
         :init-values="values"
         :parent-values="parentValues"
         :label-width="labelWidth"
+        :label-position="labelPosition"
+        :inline="inline"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -71,6 +73,8 @@ withDefaults(
     zIndex?: number;
     size?: 'small' | 'default' | 'large';
     confirmText?: string;
+    inline?: boolean;
+    labelPosition?: string;
   }>(),
   {
     closeOnPressEscape: true,

package/src/fields/Timerange.vue

@@ -0,0 +1,76 @@
+<template>
+  <TMagicTimePicker
+    v-model="value"
+    is-range
+    range-separator="-"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
+    :size="size"
+    :unlink-panels="true"
+    :disabled="disabled"
+    :default-time="config.defaultTime"
+    @change="changeHandler"
+  ></TMagicTimePicker>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { TMagicTimePicker } from '@tmagic/design';
+import { datetimeFormatter } from '@tmagic/utils';
+
+import type { DaterangeConfig, FieldProps } from '../schema';
+import { useAddField } from '../utils/useAddField';
+
+defineOptions({
+  name: 'MFormTimeRange',
+});
+
+const props = defineProps<FieldProps<DaterangeConfig>>();
+
+const emit = defineEmits(['change']);
+
+useAddField(props.prop);
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const { names } = props.config;
+const value = ref<(Date | undefined)[] | null>([]);
+
+if (props.model !== undefined && names?.length) {
+  watch(
+    [() => props.model[names[0]], () => props.model[names[1]]],
+    ([start, end], [preStart, preEnd]) => {
+      if (!value.value) {
+        value.value = [];
+      }
+      if (!start || !end) value.value = [];
+      if (start !== preStart) value.value[0] = start;
+      if (end !== preEnd) value.value[1] = end;
+    },
+    {
+      immediate: true,
+    },
+  );
+}
+
+const setValue = (v: Date[] | Date) => {
+  names?.forEach((item, index) => {
+    if (!props.model) {
+      return;
+    }
+    if (Array.isArray(v)) {
+      props.model[item] = datetimeFormatter(v[index]?.toString(), '');
+    } else {
+      props.model[item] = undefined;
+    }
+  });
+};
+
+const changeHandler = (v: Date[]) => {
+  const value = v || [];
+  if (names?.length) {
+    setValue(value);
+  }
+  emit('change', value);
+};
+</script>

package/src/index.ts

@@ -45,6 +45,7 @@ import Switch from './fields/Switch.vue';
 import Text from './fields/Text.vue';
 import Textarea from './fields/Textarea.vue';
 import Time from './fields/Time.vue';
+import Timerange from './fields/Timerange.vue';
 import { setConfig } from './utils/config';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
@@ -76,6 +77,7 @@ export { default as MTime } from './fields/Time.vue';
 export { default as MCheckbox } from './fields/Checkbox.vue';
 export { default as MSwitch } from './fields/Switch.vue';
 export { default as MDaterange } from './fields/Daterange.vue';
+export { default as MTimerange } from './fields/Timerange.vue';
 export { default as MColorPicker } from './fields/ColorPicker.vue';
 export { default as MCheckboxGroup } from './fields/CheckboxGroup.vue';
 export { default as MRadioGroup } from './fields/RadioGroup.vue';
@@ -117,6 +119,7 @@ export default {
     app.component('m-fields-date', Date);
     app.component('m-fields-datetime', DateTime);
     app.component('m-fields-daterange', Daterange);
+    app.component('m-fields-timerange', Timerange);
     app.component('m-fields-time', Time);
     app.component('m-fields-checkbox', Checkbox);
     app.component('m-fields-switch', Switch);

package/types/FormDialog.vue.d.ts

@@ -8,6 +8,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullscreen?: boolean | undefined;
     disabled?: boolean | undefined;
     title?: string | undefined;
+    inline?: boolean | undefined;
+    labelPosition?: string | undefined;
     zIndex?: number | undefined;
     size?: "large" | "default" | "small" | undefined;
     confirmText?: string | undefined;
@@ -289,6 +291,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullscreen?: boolean | undefined;
     disabled?: boolean | undefined;
     title?: string | undefined;
+    inline?: boolean | undefined;
+    labelPosition?: string | undefined;
     zIndex?: number | undefined;
     size?: "large" | "default" | "small" | undefined;
     confirmText?: string | undefined;

package/types/FormDrawer.vue.d.ts

@@ -11,6 +11,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     zIndex?: number | undefined;
     size?: "large" | "default" | "small" | undefined;
     confirmText?: string | undefined;
+    inline?: boolean | undefined;
+    labelPosition?: string | undefined;
 }>, {
     closeOnPressEscape: boolean;
     config: () => never[];
@@ -291,6 +293,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     zIndex?: number | undefined;
     size?: "large" | "default" | "small" | undefined;
     confirmText?: string | undefined;
+    inline?: boolean | undefined;
+    labelPosition?: string | undefined;
 }>, {
     closeOnPressEscape: boolean;
     config: () => never[];

package/types/fields/Timerange.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DaterangeConfig, FieldProps } from '../schema';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<FieldProps<DaterangeConfig>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<FieldProps<DaterangeConfig>>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/types/index.d.ts

@@ -24,6 +24,7 @@ export { default as MTime } from './fields/Time.vue';
 export { default as MCheckbox } from './fields/Checkbox.vue';
 export { default as MSwitch } from './fields/Switch.vue';
 export { default as MDaterange } from './fields/Daterange.vue';
+export { default as MTimerange } from './fields/Timerange.vue';
 export { default as MColorPicker } from './fields/ColorPicker.vue';
 export { default as MCheckboxGroup } from './fields/CheckboxGroup.vue';
 export { default as MRadioGroup } from './fields/RadioGroup.vue';