From 651983899547e712cd912d5097138dd90fbf0c43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?=
 <37316281+yanhao98@users.noreply.github.com>
Date: Sun, 24 Nov 2024 22:15:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4=20input-text=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E9=87=8D=E6=9E=84=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__fk-inputs__/components/input-text.vue   | 14 ----
 src/__fk-inputs__/components/messages.vue     | 24 +++++++
 .../inputs/{inputs/text.ts => _demo_text.ts}  |  0
 src/__fk-inputs__/inputs/{inputs => }/form.ts | 16 ++++-
 src/__fk-inputs__/inputs/input-text.ts        | 67 +++++++++++++++++++
 .../inputs/sections/formInput.ts              | 20 ------
 src/__fk-inputs__/sections/messages.ts        | 11 +++
 src/all-custom/all-custom.vue                 | 62 +++++------------
 8 files changed, 132 insertions(+), 82 deletions(-)
 delete mode 100644 src/__fk-inputs__/components/input-text.vue
 create mode 100644 src/__fk-inputs__/components/messages.vue
 rename src/__fk-inputs__/inputs/{inputs/text.ts => _demo_text.ts} (100%)
 rename src/__fk-inputs__/inputs/{inputs => }/form.ts (77%)
 create mode 100644 src/__fk-inputs__/inputs/input-text.ts
 delete mode 100644 src/__fk-inputs__/inputs/sections/formInput.ts
 create mode 100644 src/__fk-inputs__/sections/messages.ts

diff --git a/src/__fk-inputs__/components/input-text.vue b/src/__fk-inputs__/components/input-text.vue
deleted file mode 100644
index 14ba2d1..0000000
--- a/src/__fk-inputs__/components/input-text.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div>
-    input-text.vue
-  </div>
-</template>
-
-<script setup lang="ts">
-import { FormKitFrameworkContext } from '@formkit/core';
-
-const props = defineProps<{
-  context: FormKitFrameworkContext & { 'some': string };
-}>();
-console.debug(`props.context.some :>> `, props.context.some);
-</script>
diff --git a/src/__fk-inputs__/components/messages.vue b/src/__fk-inputs__/components/messages.vue
new file mode 100644
index 0000000..1ede675
--- /dev/null
+++ b/src/__fk-inputs__/components/messages.vue
@@ -0,0 +1,24 @@
+<template>
+  <Message
+    severity="error"
+    size="small"
+    variant="simple"
+  >
+    <!-- <template #container> -->
+    <ul class="my-0 flex flex-col gap-1">
+      <li
+        v-for="message in context.messages"
+        :key="message.key"
+        :id="`${context.id}-${message.key}`"
+        :data-message-type="message.type"
+      >{{ message.value }}</li>
+    </ul>
+    <!-- </template> -->
+  </Message>
+</template>
+
+<script setup lang="ts">
+import { FormKitFrameworkContext } from '@formkit/core';
+import Message from 'primevue/message';
+defineProps<{ context: FormKitFrameworkContext }>();
+</script>
diff --git a/src/__fk-inputs__/inputs/inputs/text.ts b/src/__fk-inputs__/inputs/_demo_text.ts
similarity index 100%
rename from src/__fk-inputs__/inputs/inputs/text.ts
rename to src/__fk-inputs__/inputs/_demo_text.ts
diff --git a/src/__fk-inputs__/inputs/inputs/form.ts b/src/__fk-inputs__/inputs/form.ts
similarity index 77%
rename from src/__fk-inputs__/inputs/inputs/form.ts
rename to src/__fk-inputs__/inputs/form.ts
index 33e341c..1c99305 100644
--- a/src/__fk-inputs__/inputs/inputs/form.ts
+++ b/src/__fk-inputs__/inputs/form.ts
@@ -6,8 +6,22 @@ import {
   submitInput,
   forms,
   disablesChildren,
+  createSection,
 } from '@formkit/inputs'
-import { formInput } from '../sections/formInput'
+
+const formInput = createSection('form', () => ({
+  $el: 'form',
+  bind: '$attrs',
+  meta: {
+    autoAnimate: true,
+  },
+  attrs: {
+    id: '$id',
+    name: '$node.name',
+    onSubmit: '$handlers.submit',
+    'data-loading': '$state.loading || undefined',
+  },
+}))
 
 /**
  * Input definition for a form.
diff --git a/src/__fk-inputs__/inputs/input-text.ts b/src/__fk-inputs__/inputs/input-text.ts
new file mode 100644
index 0000000..8768f5c
--- /dev/null
+++ b/src/__fk-inputs__/inputs/input-text.ts
@@ -0,0 +1,67 @@
+import MessagesCmp from '@/__fk-inputs__/components/messages.vue';
+import { FormKitTypeDefinition, type FormKitFrameworkContext } from '@formkit/core';
+import {
+  casts,
+  createSection,
+  label,
+  outer
+} from '@formkit/inputs';
+import PInputText from 'primevue/inputtext';
+import { h, markRaw } from 'vue';
+
+export const InputText: FormKitTypeDefinition = {
+  type: 'input',
+  schema: outer(
+    label('$label'),
+    // custom_FComponent.schema,
+    createSection('input', () => ({
+      $cmp: 'PInputText',
+      bind: '$attrs',
+      props: {
+        // 'type': '$type',
+        disabled: '$disabled',
+        name: '$node.name',
+        onInput: '$handlers.DOMInput',
+        onBlur: '$handlers.blur',
+        value: '$_value',
+        id: '$id',
+        'aria-describedby': '$describedBy',
+        'aria-required': '$state.required || undefined',
+      },
+    }))(),
+    createSection('messages', () => ({
+      $cmp: 'MessagesCmp',
+      props: { context: '$node.context', },
+      if: '$defaultMessagePlacement && $fns.length($messages)',
+    }))(),
+  ),
+  library: {
+    // 'FComponent': custom_FComponent.library,
+    'PInputText': markRaw(PInputText),
+    'MessagesCmp': markRaw(MessagesCmp)
+  },
+  features: [casts],
+  // family: 'text',
+  // forceTypeProp: 'text',
+  // schemaMemoKey: 'g2f31c24kjh',
+}
+
+
+// @ts-ignore
+const custom_FComponent = {
+  schema: createSection('input', () => ({
+    $cmp: 'FComponent',
+    props: { context: '$node.context', },
+  }))(),
+  library: markRaw(
+    ((props: { context: FormKitFrameworkContext; }, /* context */) => {
+      return h(PInputText, {
+        id: props.context.id,
+        value: props.context._value,
+        ...props.context.attrs,
+        onInput: props.context.handlers.DOMInput,
+        onBlur: props.context.handlers.blur,
+      })
+    }) satisfies import('vue').FunctionalComponent<{ context: FormKitFrameworkContext }>
+  )
+}
\ No newline at end of file
diff --git a/src/__fk-inputs__/inputs/sections/formInput.ts b/src/__fk-inputs__/inputs/sections/formInput.ts
deleted file mode 100644
index 9842323..0000000
--- a/src/__fk-inputs__/inputs/sections/formInput.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { createSection } from '@formkit/inputs'
-
-/**
- * Form section
- *
- * @public
- */
-export const formInput = createSection('form', () => ({
-  $el: 'form',
-  bind: '$attrs',
-  meta: {
-    autoAnimate: true,
-  },
-  attrs: {
-    id: '$id',
-    name: '$node.name',
-    onSubmit: '$handlers.submit',
-    'data-loading': '$state.loading || undefined',
-  },
-}))
diff --git a/src/__fk-inputs__/sections/messages.ts b/src/__fk-inputs__/sections/messages.ts
new file mode 100644
index 0000000..99ee37a
--- /dev/null
+++ b/src/__fk-inputs__/sections/messages.ts
@@ -0,0 +1,11 @@
+import { createSection } from '@formkit/inputs';
+
+/**
+ * Messages section where all messages will be displayed.
+ *
+ * @public
+ */
+export const messages = createSection('messages', () => ({
+  $el: 'ul',
+  if: '$defaultMessagePlacement && $fns.length($messages)',
+}))
diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue
index d33317c..49c9cd6 100644
--- a/src/all-custom/all-custom.vue
+++ b/src/all-custom/all-custom.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
+import { form } from '@/__fk-inputs__/inputs/form';
+import { InputText } from '@/__fk-inputs__/inputs/input-text';
+import { text } from '@/__fk-inputs__/inputs/_demo_text';
 import Swal from 'sweetalert2';
-import { createInput, FormKitSummary } from '@formkit/vue'
-import { form } from '__fk-inputs__/inputs/inputs/form';
-import { text } from '@/__fk-inputs__/inputs/inputs/text';
-import InputText from '@/__fk-inputs__/components/input-text.vue'
-import { createSection, outer } from '@formkit/inputs'
-import { FormKitTypeDefinition } from '@formkit/core';
-import { markRaw } from 'vue';
 
 async function submit() {
   await new Promise(r => setTimeout(r, 500))
@@ -18,40 +14,6 @@ async function submit() {
   })
 }
 
-/* const fooInput = createInput(
-  'hello11',
-  {
-    schemaMemoKey: '',
-  },
-  {
-    label: null,
-  }
-)
-console.debug(`fooInput :>> `, fooInput); */
-
-
-
-const fooInput: FormKitTypeDefinition = {
-  type: 'input',
-  props: ['some'],
-  schema: outer(
-    createSection('input', () => ({
-      $cmp: 'cmpName',
-      props: {
-        context: '$node.context',
-      },
-    }))(),
-  ),
-  library: {
-    'cmpName': markRaw(InputText),
-  },
-  // schema: createSection('input', () => ({
-  //   $cmp: InputText,
-  //   props: {
-  //     context: '$node.context',
-  //   },
-  // }))
-}
 
 </script>
 
@@ -65,28 +27,32 @@ const fooInput: FormKitTypeDefinition = {
       :config="{
         classes: {
           form: 'flex flex-col gap-4 w-full',
+          outer: 'flex flex-col gap-2',
+          label: 'font-bold block'
         }
       }"
       :type="form"
+      #default="{ value }"
       @submit="submit"
       submit-label="提交 ✨"
       :submit-attrs="{ class: 'btn btn-primary' }"
       :errors="['our server is not working.', 'But we don’t like you anyway!']"
       incomplete-message="Please fill out all fields."
     >
-
       <FormKit
-        :type="fooInput"
-        label="fooInput"
+        :type="InputText"
+        name="typeInputText"
+        label="输入框"
+        placeholder="请输入"
         some="prop"
         validation="required"
         validation-visibility="live"
       >
       </FormKit>
-
       <FormKit
         :type="text"
         label="customType"
+        value="default value"
         validation="required"
         validation-visibility="live"
       >
@@ -98,13 +64,15 @@ const fooInput: FormKitTypeDefinition = {
       <FormKit
         type="text"
         label="默认text"
+        value="default value"
         validation="required"
         validation-visibility="live"
       >
       </FormKit>
 
-      <FormKitSummary />
-      <div>content</div>
+      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4 dark:bg-gray-900 ">{{ value }}</pre>
+      <!-- <FormKitSummary /> -->
     </FormKit>
   </Fieldset>
+
 </template>