@sfxcode/formkit-primevue 1.8.6 → 1.9.1

package/README.md

@@ -15,7 +15,6 @@ Helper classes for using [Formkit](https://formkit.com/) with the [PrimeVue UI F
 import { defaultConfig, plugin } from '@formkit/vue'
 import { primeInputs } from '@sfxcode/formkit-primevue'
 
-
   app.use(plugin, defaultConfig({
     locales: { de, en },
     // Define the active locale
@@ -24,6 +23,11 @@ import { primeInputs } from '@sfxcode/formkit-primevue'
   }))
 ```
 
+### Schema Helper Functions
+
+[useFormKitSchema](https://github.com/sfxcode/formkit-primevue/blob/main/src/composables/useFormKitSchema.ts) provide functions to simplify the usage of elements, components, lists, ...
+
+
 ### Basic Styling
 
 Basic styling is provided with the **formkit-primevue.scss** file.
@@ -41,7 +45,14 @@ You can use it or take it as base for your own styling.
 - All inputs are wrapped in a div with a **p-formkit** class
 - Most Prime Components have access to class / styles attributes
 - PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
-- [Styling](https://formkit-primevue.netlify.app/demo/styling), [Grid](https://formkit-primevue.netlify.app/demo/grid) and [PT](https://formkit-primevue.netlify.app/demo/passThrough) demo available
+- [Styling](https://formkit-primevue.netlify.app/demo/styling) and [PT](https://formkit-primevue.netlify.app/demo/passThrough) demo available
+
+### Samples 
+
+Some samples for common tasks are available
+
+- Repeater (with the help of the useFormKitSchema compsable)
+- Grid
 
 ## Showcases
 
@@ -51,9 +62,11 @@ You can use it or take it as base for your own styling.
 
 ## Supported Inputs
 
+- AutoComplete
 - Calendar
 - CascadeSelect
 - Checkbox
+- Chips
 - Dropdown
 - Editor (HTML Editor)
 - InputMask
@@ -64,7 +77,6 @@ You can use it or take it as base for your own styling.
 - MultiSelect
 - Password
 - Ranking
-- Chips
 - Knob
 - ColorPicker
 - Listbox
@@ -74,8 +86,7 @@ You can use it or take it as base for your own styling.
 - RadioButton
 - TreeSelect
 
-## Demo 
+## Demo
 [Demo/Playground](https://formkit-primevue.netlify.app/)
 
 ![](formkit-primevue.png)
-

package/dist/components/PrimeAutoComplete.vue

@@ -1,24 +1,41 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed, ref } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type {
+  AutoCompleteCompleteEvent,
+  AutoCompleteProps,
+} from 'primevue/autocomplete'
+
+export interface FormKitPrimeAutoCompleteProps {
+  pt?: AutoCompleteProps['pt']
+  ptOptions?: AutoCompleteProps['ptOptions']
+  unstyled?: AutoCompleteProps['unstyled']
+  dropdown?: AutoCompleteProps['dropdown']
+  multiple?: AutoCompleteProps['multiple']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeAutoCompleteProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 const suggestions = ref([])
 
-function search(event) {
-  suggestions.value = attrs.value.complete(event.query)
+function search(event: AutoCompleteCompleteEvent) {
+  suggestions.value = props.context?.attrs.complete(event.query)
+}
+
+function handleInput(_: any) {
+  props.context?.node.input(props.context?._value)
 }
 
-function handleInput(e: any) {
-  context?.node.input(props.context?._value)
+function handleBlur(event: Event) {
+  props.context?.handlers.blur(event)
 }
 
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
@@ -26,12 +43,21 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <AutoComplete
       :id="context.id"
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
       :class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
       :suggestions="suggestions"
+      :dropdown="context?.dropdown ?? false"
+      :multiple="context?.multiple ?? false"
+      :pt="context?.pt"
+      :pt-options="context?.ptOptions"
+      :unstyled="context?.unstyled ?? false"
       @complete="search"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>

package/dist/components/PrimeCalendar.vue

@@ -1,45 +1,138 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import type { CalendarBlurEvent, CalendarProps } from 'primevue/calendar'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 
-import type { CalendarBlurEvent } from 'primevue/calendar'
+export interface FormKitPrimeCalendarProps {
+  dateFormat?: CalendarProps['dateFormat']
+  placeholder?: CalendarProps['placeholder']
+  selectionMode?: CalendarProps['selectionMode']
+  inline?: CalendarProps['inline']
+  icon?: CalendarProps['icon']
+  showOtherMonths?: CalendarProps['showOtherMonths']
+  selectOtherMonths?: CalendarProps['selectOtherMonths']
+  showIcon?: CalendarProps['showIcon']
+  previousIcon?: CalendarProps['previousIcon']
+  nextIcon?: CalendarProps['nextIcon']
+  incrementIcon?: CalendarProps['incrementIcon']
+  decrementIcon?: CalendarProps['decrementIcon']
+  numberOfMonths?: CalendarProps['numberOfMonths']
+  responsiveOptions?: CalendarProps['responsiveOptions']
+  view?: CalendarProps['view']
+  touchUI?: CalendarProps['touchUI']
+  minDate?: CalendarProps['minDate']
+  maxDate?: CalendarProps['maxDate']
+  disabledDates?: CalendarProps['disabledDates']
+  disabledDays?: CalendarProps['disabledDays']
+  maxDateCount?: CalendarProps['maxDateCount']
+  showOnFocus?: CalendarProps['showOnFocus']
+  autoZIndex?: CalendarProps['autoZIndex']
+  baseZIndex?: CalendarProps['baseZIndex']
+  showButtonBar?: CalendarProps['showButtonBar']
+  showTime?: CalendarProps['showTime']
+  timeOnly?: CalendarProps['timeOnly']
+  shortYearCutoff?: CalendarProps['shortYearCutoff']
+  hourFormat?: CalendarProps['hourFormat']
+  stepHour?: CalendarProps['stepHour']
+  stepMinute?: CalendarProps['stepMinute']
+  stepSecond?: CalendarProps['stepSecond']
+  showSeconds?: CalendarProps['showSeconds']
+  hideOnDateTimeSelect?: CalendarProps['hideOnDateTimeSelect']
+  hideOnRangeSelection?: CalendarProps['hideOnRangeSelection']
+  timeSeparator?: CalendarProps['timeSeparator']
+  showWeek?: CalendarProps['showWeek']
+  manualInput?: CalendarProps['manualInput']
+  appendTo?: CalendarProps['appendTo']
+  panelStyle?: CalendarProps['panelStyle']
+  panelClass?: CalendarProps['panelClass']
+  pt?: CalendarProps['pt']
+  ptOptions?: CalendarProps['ptOptions']
+  unstyled?: CalendarProps['unstyled']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeCalendarProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
-function handleInput(e: any) {
-  context?.node.input(context?._value)
+function handleInput(_: any) {
+  props.context?.node.input(props.context?._value)
 }
 
 function handleSelect(e: any) {
-  context?.node.input(e)
+  props.context?.node.input(e)
 }
 
 function handleBlur(e: CalendarBlurEvent) {
-  context?.handlers.blur(e.value)
+  props.context?.handlers.blur(e.originalEvent)
 }
 
 function handleClearClick() {
-  context?.node.input(null)
+  props.context?.node.input(null)
 }
 
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
   <div class="p-formkit">
     <Calendar
       v-model="context._value"
-      v-bind="attrs"
-      :input-id="props.context.id"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :input-style="attrs.style"
+      v-bind="context?.attrs"
+      :input-id="context.id"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :input-style="context?.attrs.style"
       :input-class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :date-format="context?.dateFormat"
+      :placeholder="context?.placeholder"
+      :selection-mode="context?.selectionMode ?? 'single'"
+      :inline="context?.inline ?? false"
+      :show-other-months="context?.showOtherMonths ?? true"
+      :select-other-months="context?.selectOtherMonths ?? false"
+      :icon="context?.icon"
       :show-icon="context.showIcon"
+      :previous-icon="context?.previousIcon ?? 'pi pi-chevron-left'"
+      :next-icon="context?.nextIcon ?? 'pi pi-chevron-right'"
+      :increment-icon="context?.incrementIcon ?? 'pi pi-chevron-up'"
+      :decrement-icon="context?.decrementIcon ?? 'pi pi-chevron-down'"
+      :number-of-months="context?.numberOfMonths ?? 1"
+      :responsive-options="context?.responsiveOptions"
+      :view="context?.view ?? 'date'"
+      :touch-u-i="context?.touchUI ?? false"
+      :min-date="context?.minDate"
+      :max-date="context?.maxDate"
+      :disabled-dates="context?.disabledDates"
+      :disabled-days="context?.disabledDays"
+      :max-date-count="context?.maxDateCount"
+      :show-on-focus="context?.showOnFocus ?? true"
+      :auto-z-index="context?.autoZIndex ?? true"
+      :base-z-index="context?.baseZIndex ?? 0"
+      :show-button-bar="context?.showButtonBar ?? false"
+      :show-time="context?.showTime ?? false"
+      :time-only="context?.timeOnly ?? false"
+      :short-year-cutoff="context?.shortYearCutoff ?? '+10'"
+      :hour-format="context?.hourFormat ?? '24'"
+      :step-hour="context?.stepHour ?? 1"
+      :step-minute="context?.stepMinute ?? 1"
+      :step-second="context?.stepSecond ?? 1"
+      :show-seconds="context?.showSeconds ?? false"
+      :hide-on-date-time-select="context?.hideOnDateTimeSelect ?? false"
+      :hide-on-range-selection="context?.hideOnRangeSelection ?? false"
+      :time-separator="context?.timeSeparator ?? ':'"
+      :show-week="context?.showWeek ?? false"
+      :manual-input="context?.manualInput ?? true"
+      :append-to="context?.appendTo ?? 'body'"
+      :panel-style="context?.panelStyle"
+      :panel-class="context?.panelClass"
+      :pt="context?.pt"
+      :pt-options="context?.ptOptions"
+      :unstyled="context?.unstyled ?? false"
       @date-select="handleSelect"
       @input="handleInput"
       @blur="handleBlur"

package/dist/components/PrimeCascadeSelect.vue

@@ -1,18 +1,36 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { CascadeSelectProps } from 'primevue/cascadeselect'
+
+export interface FormKitPrimeCascadeSelectProps {
+  options?: CascadeSelectProps['options']
+  optionLabel?: CascadeSelectProps['optionLabel']
+  optionValue?: CascadeSelectProps['optionValue']
+  optionGroupLabel?: CascadeSelectProps['optionGroupLabel']
+  optionGroupChildren?: CascadeSelectProps['optionGroupChildren']
+  placeholder?: CascadeSelectProps['placeholder']
+  pt?: CascadeSelectProps['pt']
+  ptOptions?: CascadeSelectProps['ptOptions']
+  unstyled?: CascadeSelectProps['unstyled']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeCascadeSelectProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
+function handleInput(_: any) {
+  props.context?.node.input(props.context?._value)
+}
 
-function handleInput(e: any) {
-  context?.node.input(props.context?._value)
+function handleBlur(e: Event) {
+  props.context?.handlers.blur(e)
 }
 
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
@@ -20,11 +38,24 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <CascadeSelect
       :id="context.id"
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
       :class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :options="context?.options"
+      :option-label="context?.optionLabel"
+      :option-value="context.optionValue"
+      :option-group-label="context.optionGroupLabel"
+      :option-group-children="context.optionGroupChildren"
+      :placeholder="context.placeholder"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>

package/dist/components/PrimeCheckbox.vue

@@ -1,34 +1,60 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { CheckboxProps } from 'primevue/checkbox'
+
+export interface FormKitPrimeCheckboxProps {
+  binary?: CheckboxProps['binary']
+  trueValue?: CheckboxProps['trueValue']
+  falseValue?: CheckboxProps['falseValue']
+  pt?: CheckboxProps['pt']
+  ptOptions?: CheckboxProps['ptOptions']
+  unstyled?: CheckboxProps['unstyled']
+  labelLeft?: string
+  labelRight?: string
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeCheckboxProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
+function handleInput(_: any) {
+  props.context?.node.input(props.context?._value)
+}
 
-function handleInput(e: any) {
-  context?.node.input(props.context?._value)
+function handleBlur(e: Event) {
+  props.context?.handlers.blur(e)
 }
 
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
   <div class="p-formkit">
-    <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.attrs.labelLeft }}</span>
+    <span v-if="context.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
     <Checkbox
       v-model="context._value"
-      v-bind="attrs"
+      v-bind="context?.attrs"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :input-style="attrs.style"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :input-style="context?.attrs.style"
       :input-class="styleClass"
-      :binary="attrs.binary ?? true"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :binary="context.binary ?? true"
+      :true-value="context.trueValue ?? undefined"
+      :false-value="context.falseValue ?? undefined"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleInput"
+      @blur="handleBlur"
     />
-    <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>
+    <span v-if="context.labelRight" class="formkit-prime-right">{{ context.labelRight }}</span>
   </div>
 </template>

package/dist/components/PrimeChips.vue

@@ -1,29 +1,53 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { ChipsProps } from 'primevue/chips'
+
+export interface FormKitPrimeChipsProps {
+  allowDuplicate?: ChipsProps['allowDuplicate']
+  addOnBlur?: ChipsProps['addOnBlur']
+  max?: ChipsProps['max']
+  placeholder?: ChipsProps['placeholder']
+  separator?: ChipsProps['separator']
+  pt?: ChipsProps['pt']
+  ptOptions?: ChipsProps['ptOptions']
+  unstyled?: ChipsProps['unstyled']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeChipsProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
-function handleInput(e: any) {
-  context?.node.input(props.context?._value)
+function handleInput(_: any) {
+  props.context?.node.input(props.context?._value)
 }
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
 </script>
 
 <template>
   <div class="p-formkit">
     <Chips
       v-model="context._value"
-      v-bind="attrs"
+      v-bind="context?.attrs"
       :input-id="context.id"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :input-style="attrs.style"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :input-style="context?.attrs.style"
       :input-class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :allow-duplicate="context.allowDuplicate ?? true"
+      :add-on-blur="context.addOnBlur ?? false"
+      :max="context.max ?? undefined"
+      :placeholder="context.placeholder"
+      :separator="context.separator"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @add="handleInput"
       @remove="handleInput"
     />

package/dist/components/PrimeColorPicker.vue

@@ -1,15 +1,26 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import type { PropType } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { ColorPickerProps } from 'primevue/colorpicker'
+
+export interface FormKitPrimeColorPickerProps {
+  defaultColor?: ColorPickerProps['defaultColor']
+  inline?: ColorPickerProps['inline']
+  format?: ColorPickerProps['format']
+  pt?: ColorPickerProps['pt']
+  ptOptions?: ColorPickerProps['ptOptions']
+  unstyled?: ColorPickerProps['unstyled']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeColorPickerProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
-function handleChange(e: any) {
-  context?.node.input(props.context?._value)
+function handleChange(_: any) {
+  props.context?.node.input(props.context?._value)
 }
 </script>
 
@@ -17,11 +28,20 @@ function handleChange(e: any) {
   <div class="p-formkit">
     <ColorPicker
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :style="attrs.style"
-      :panel-class="attrs.class"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :style="context?.attrs.style"
+      :panel-class="context?.attrs.class"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :default-color="context.defaultColor ?? 'ff0000'"
+      :inline="context.inline ?? false"
+      :format="context.format"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleChange"
     />
   </div>