feat(FormKit): work on Color component

packages/formkit/playground/src/App.vue

@@ -18,8 +18,18 @@ const randomColor = (e: HTMLElementEvent) => {
 </script>
 
 <template>
-  <div class="p-5">
-    <h2 class="my-2">Button</h2>
+  <div class="p-5 w-lg">
+    <h2 class="my-2">Color</h2>
+    <div class="flex flex-direction-column gap-row-6">
+      <FormKit
+        :type="types.color"
+        value="#00FF00"
+        label="Select a color"
+        help="Select your favorite color."
+      />
+    </div>
+
+<!--    <h2 class="my-2">Button</h2>
     <div class="flex flex-direction-column gap-row-6">
       <FormKit
         :type="types.button"
@@ -43,7 +53,7 @@ const randomColor = (e: HTMLElementEvent) => {
       >
         Click me!
       </FormKit>
-    </div>
+    </div>-->
   </div>
 </template>
 

packages/formkit/src/color.ts

@@ -0,0 +1,79 @@
+import { type FormKitTypeDefinition } from '@formkit/core'
+import {
+  outer,
+  inner,
+  wrapper,
+  label,
+  prefix,
+  suffix,
+  casts,
+  createSection
+} from '@formkit/inputs'
+import { icon, messages, message, help } from './sections'
+
+
+const colorInput = createSection('input', () => ({
+  $cmp: 'VaColorInput',
+  bind: '$attrs',
+  props: {
+    type: '$type',
+    disabled: '$disabled',
+    name: '$node.name',
+    onChange: '$handlers.DOMInput',
+    [`onUpdate:modelValue`]: '$handlers.DOMInput',
+    onBlur: '$handlers.blur',
+    modelValue: '$_value',
+    id: '$id',
+    'aria-describedby': '$describedBy',
+    'aria-required': '$state.required || undefined',
+  },
+}))
+
+/**
+ * Input definition for a text.
+ * @public
+ */
+export const color: FormKitTypeDefinition = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    wrapper(
+      label('$label'),
+      inner(
+        icon('prefix', 'label'),
+        prefix(),
+        colorInput(),
+        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()}`,
+}

packages/formkit/src/inputTypes.ts

@@ -1,9 +1,10 @@
-import { VaInput, VaCheckbox, VaSelect, VaTextarea, VaCounter, VaTimeInput, VaColorInput, VaDateInput, VaFileUpload, VaRadio, VaSlider, VaRating, VaSwitch } from 'vuestic-ui';
+import { VaInput, VaCheckbox, VaSelect, VaTextarea, VaCounter, VaTimeInput, VaDateInput, VaFileUpload, VaRadio, VaSlider, VaRating, VaSwitch } from 'vuestic-ui';
 import { createInputWrapper } from './createInputWrapper';
+export { color } from './color'
 
 export const autocomplete = createInputWrapper(VaSelect, { autocomplete: true });
 export const checkbox = createInputWrapper(VaCheckbox);
-export const color = createInputWrapper(VaColorInput)
+// export const color = createInputWrapper(VaColorInput)
 export const date = createInputWrapper(VaDateInput);
 export const email = createInputWrapper(VaInput, { type: 'email' });
 export const file = createInputWrapper(VaFileUpload);