@peng_kai/kit 0.2.40 → 0.2.42

package/admin/components/text/index.ts

@@ -5,6 +5,7 @@ import Duration from './src/Duration.vue';
 import IP from './src/IP.vue';
 
 export { createTagGetter } from './src/createTagGetter';
+export { createDateTypeSwitcher } from './src/createDateTypeSwitcher';
 
 export const Text = {
   Hash,

package/admin/components/text/src/createDateTypeSwitcher.tsx

@@ -0,0 +1,41 @@
+import { useCycleList } from '@vueuse/core';
+import { computed, defineComponent } from 'vue';
+import Datetime from './Datetime.vue';
+
+export function createDateTypeSwitcher() {
+  const cycle = useCycleList(['local', 'utc'] as const);
+
+  const Switcher = defineComponent({
+    props: [],
+    setup(props) {
+      const title = computed(() => {
+        const state = cycle.state.value;
+        return ({
+          local: '本地',
+          utc: 'UTC',
+        } satisfies Record<typeof state, string>)[state];
+      });
+
+      return () => (
+        <div
+          class="flex-inline items-center ml-1 cursor-pointer select-none text-$antd-colorPrimary hover:op-60"
+          onClick={() => cycle.next()}
+        >
+          (
+          <span class="min-w-2em inline-block text-center">
+            {title.value}
+          </span>
+          )
+          <i class="i-mi:switch text-1.2em" />
+        </div>
+      );
+    },
+  });
+  const Display = defineComponent({
+    setup(props, { attrs }) {
+      return () => (<Datetime {...attrs} utc={cycle.state.value === 'utc'} />);
+    },
+  });
+
+  return { Switcher, Display };
+}

package/antd/hooks/useAntdForm.ts

@@ -5,9 +5,8 @@
 
 import type { FormInstance, FormItemProps, RuleObject } from 'ant-design-vue/es/form';
 import type { FormProps } from 'ant-design-vue';
-import { type MaybeRefOrGetter, computed, reactive, ref, shallowRef, toRef, watch, watchEffect } from 'vue';
+import { type MaybeRefOrGetter, computed, reactive, ref, toRef, watch, watchEffect } from 'vue';
 import { mapValues } from 'lodash-es';
-import { reactiveComputed } from '@vueuse/core';
 import { GROUP_SEP, buildGroupField, getGroupIndex } from './useAntdForm.helpers';
 
 export { useAntdForm };
@@ -29,7 +28,7 @@ interface Options<S, TS> {
 function useAntdForm<S extends Record<string, unknown>, TS = S>(schemas: MaybeRefOrGetter<SchemaConfig<S>>, options?: Options<S, TS>) {
   const schemasR = toRef(schemas);
 
-  const state = shallowRef({} as S);
+  const state = ref({} as S);
   const stateTF = computed<TS>(() => options?.transform?.(<any>state.value) ?? <any>state.value);
   const show = computed(() => mapValues(state.value, (_, k): boolean => schemasR.value[k].show?.(state.value) ?? true));
   const props = computed<FormProps>(() => ({ model: state.value, ref: (c: any) => (formRef.value = c) }));
@@ -97,5 +96,17 @@ function useAntdForm<S extends Record<string, unknown>, TS = S>(schemas: MaybeRe
     state.value = newState;
   }, { flush: 'pre' });
 
-  return reactive({ state: reactiveComputed(() => state.value as S), stateTF, show, props, itemProps, $form });
+  // 为什么之前用 watchEffect？
+  // watch(schemasR, () => {
+  //   const _state: any = {};
+
+  //   for (const k in schemasR.value) {
+  //     const item = schemasR.value[k];
+  //     _state[k] = (k in state.value) ? toRef(state.value, k) : toRef(item, 'value');
+  //   }
+
+  //   state.value = _state;
+  // }, { immediate: true });
+
+  return reactive({ state, stateTF, show, props, itemProps, $form });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.40",
+  "version": "0.2.42",
   "description": "",
   "author": "",
   "license": "ISC",