feat: implement Slider type

packages/formkit/src/index.ts

@@ -15,6 +15,7 @@ export { password } from './password'
 export { radio } from './radio'
 export { range } from './range'
 export { search } from './search'
+export { slider } from './slider'
 export { submit } from './submit'
 export { tel } from './tel'
 export { text } from './text'

packages/formkit/src/slider.ts

@@ -0,0 +1,56 @@
+import { type FormKitTypeDefinition } from '@formkit/core'
+import { createSection } from '@formkit/inputs'
+import { token } from '@formkit/utils'
+import { VaSlider } from 'vuestic-ui'
+import { vuesticInputs } from './features/vuesticInputs';
+import { createInputWrapper } from './createInputWrapper';
+
+const FormKitInputWrapper = createInputWrapper(VaSlider)
+
+const rangeInput = createSection('input', () => ({
+  $cmp: 'FormKitInputWrapper',
+  bind: '$attrs',
+  props: {
+    context: '$node.context',
+    prefixIcon: '$prefixIcon',
+    suffixIcon: '$suffixIcon'
+  }
+}))
+
+/**
+ * Input definition for a slider.
+ * @public
+ */
+export const slider: FormKitTypeDefinition = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: rangeInput(),
+  /**
+   * 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: [],
+  /**
+   * A library of components to provide to the internal input schema
+   */
+  library: {
+    FormKitInputWrapper
+  },
+  /**
+   * Additional features that should be added to your input
+   */
+  features: [vuesticInputs],
+  /**
+   * The key used to memoize the schema.
+   */
+  schemaMemoKey: token(),
+}

packages/ui/src/stories/formkit/Slider.stories.ts

@@ -0,0 +1,28 @@
+import { StoryFn } from '@storybook/vue3'
+import * as types from '@vuestic/formkit'
+import { ref } from 'vue'
+
+export default {
+  title: 'Formkit Integration/Slider',
+}
+
+export const Default: StoryFn = () => ({
+  setup () {
+    const value = ref(true)
+    return {
+      types,
+      value,
+    }
+  },
+  template: `
+    <FormKit
+      v-model="value"
+      :type="types.slider"
+      label="Volume"
+      min="0"
+      max="11"
+      help="Select your volume level."
+    />
+    <pre wrap>{{ value }}</pre>
+  `,
+})