feat(FormKit): work on Text component

packages/formkit/playground/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@formkit/vue": "^1.6.7",
+    "unocss": "^0.65.1",
     "vue": "^3.5.12",
     "vuestic-ui": "*"
   },

packages/formkit/playground/src/App.vue

@@ -18,29 +18,32 @@ const randomColor = (e: HTMLElementEvent) => {
 </script>
 
 <template>
-  <div class="d-flex flex-direction-column pa-4" style="gap: 1.5rem">
-    <FormKit
-      :type="types.button"
-      color="danger"
-      label="Checkout my label"
-      help="You can use the label prop."
-    />
+  <div class="p-5">
+    <h2 class="my-2">Button</h2>
+    <div class="flex flex-direction-column gap-row-6">
+      <FormKit
+        :type="types.button"
+        color="danger"
+        label="Checkout my label"
+        help="You can use the label prop."
+      />
 
-    <FormKit
-      :type="types.button"
-      help="You can use the default slot."
-      prefix-icon="check"
-    >
-      I have slot content
-    </FormKit>
+      <FormKit
+        :type="types.button"
+        help="You can use the default slot."
+        prefix-icon="check"
+      >
+        I have slot content
+      </FormKit>
 
-    <FormKit
-      :type="types.button"
-      help="You can bind event listeners."
-      @click="randomColor"
-    >
-      Click me!
-    </FormKit>
+      <FormKit
+        :type="types.button"
+        help="You can bind event listeners."
+        @click="randomColor"
+      >
+        Click me!
+      </FormKit>
+    </div>
   </div>
 </template>
 

packages/formkit/playground/src/main.ts

@@ -4,6 +4,7 @@ import { plugin, defaultConfig } from '@formkit/vue'
 // @ts-ignore
 import 'vuestic-ui/css'
 import { createVuestic } from 'vuestic-ui'
+import 'virtual:uno.css'
 
 // @ts-ignore
 createApp(App).use(plugin, defaultConfig).use(createVuestic()).mount('#app')

packages/formkit/playground/vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [UnoCSS(), vue()],
 })

packages/formkit/src/button.ts

@@ -10,38 +10,7 @@ import {
   ignores,
 } from '@formkit/inputs'
 import { VaButton, VaMessageList, VaIcon } from 'vuestic-ui'
-import { icon } from './icon'
-
-
-export const help = createSection('help', () => ({
-  $cmp: 'VaMessageList',
-  if: '$help',
-  props: {
-    id: '$: "help-" + $id',
-    modelValue: '$help'
-  }
-}))
-
-
-export const message = createSection('message', () => ({
-  $el: 'li',
-  for: ['message', '$messages'],
-  attrs: {
-    key: '$message.key',
-    id: `$id + '-' + $message.key`,
-    'data-message-type': '$message.type',
-  },
-}))
-
-export const messages = createSection('messages', () => ({
-  $cmp: 'VaMessageList',
-  if: '$defaultMessagePlacement && $fns.length($messages)',
-  props: {
-    key: '$message.key',
-    id: `$id + '-' + $message.key`,
-    'data-message-type': '$message.type',
-  },
-}))
+import { icon, message, messages, help } from './sections'
 
 export const buttonInput = createSection('input', () => ({
   $cmp: 'VaButton',

packages/formkit/src/sections.ts

@@ -0,0 +1,55 @@
+import { createSection, type FormKitSchemaExtendableSection } from "@formkit/inputs";
+
+
+export const icon = (
+  sectionKey: string,
+  el?: string
+): FormKitSchemaExtendableSection => {
+  return createSection(`${sectionKey}Icon`, () => {
+    return {
+      if: `$${sectionKey}Icon`,
+      $cmp: 'VaIcon',
+      props: {
+        tag: el,
+        for: {
+          if: `${el === 'label'}`,
+          then: '$id',
+        },
+        class: 'material-icons',
+        onClick: `$handlers.iconClick(${sectionKey})`,
+        role: `$fns.iconRole(${sectionKey})`,
+        tabindex: `$fns.iconRole(${sectionKey}) === "button" && "0" || undefined`,
+      },
+      children: '$prefixIcon'
+    }
+  })()
+}
+
+export const help = createSection('help', () => ({
+  $cmp: 'VaMessageList',
+  if: '$help',
+  props: {
+    id: '$: "help-" + $id',
+    modelValue: '$help'
+  }
+}))
+
+export const message = createSection('message', () => ({
+  $el: 'li',
+  for: ['message', '$messages'],
+  attrs: {
+    key: '$message.key',
+    id: `$id + '-' + $message.key`,
+    'data-message-type': '$message.type',
+  },
+}))
+
+export const messages = createSection('messages', () => ({
+  $cmp: 'VaMessageList',
+  if: '$defaultMessagePlacement && $fns.length($messages)',
+  props: {
+    key: '$message.key',
+    id: `$id + '-' + $message.key`,
+    'data-message-type': '$message.type',
+  },
+}))

packages/formkit/src/text.ts

@@ -0,0 +1,61 @@
+import { type FormKitTypeDefinition } from '@formkit/core'
+import {
+  outer,
+  inner,
+  wrapper,
+  label,
+  prefix,
+  suffix,
+  textInput,
+  casts,
+} from '@formkit/inputs'
+import { icon, messages, message, help } from './sections'
+
+/**
+ * Input definition for a text.
+ * @public
+ */
+export const text: FormKitTypeDefinition = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    wrapper(
+      label('$label'),
+      inner(
+        icon('prefix', 'label'),
+        prefix(),
+        textInput(),
+        suffix(),
+        icon('suffix')
+      )
+    ),
+    help('$help'),
+    messages(message('$message.value'))
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'input',
+  /**
+   * The family of inputs this one belongs too. For example "text" and "email"
+   * are both part of the "text" family. This is primary used for styling.
+   */
+  family: 'text',
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [],
+  /**
+   * Forces node.props.type to be this explicit value.
+   */
+  forceTypeProp: 'text',
+  /**
+   * Additional features that should be added to your input
+   */
+  features: [casts],
+  /**
+   * The key used to memoize the schema.
+   */
+  schemaMemoKey: `${Math.random()}`,
+}