@sfxcode/formkit-primevue 1.8.6 → 1.9.0

package/dist/components/PrimeEditor.vue

@@ -1,25 +1,34 @@
-<script setup lang='ts'>
-import { computed } from 'vue'
+<script setup lang="ts">
+import type { EditorProps, EditorSelectionChangeEvent } from 'primevue/editor'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
 
-import type { EditorSelectionChangeEvent } from 'primevue/editor'
+export interface FormKitPrimeEditorProps {
+  placeholder?: EditorProps['placeholder']
+  formats?: EditorProps['formats']
+  modules?: EditorProps['modules']
+  pt?: EditorProps['pt']
+  ptOptions?: EditorProps['ptOptions']
+  unstyled?: EditorProps['unstyled']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeEditorProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleInput(e: any) {
-  context?.node.input(e.htmlValue)
+  props.context?.node.input(e.htmlValue)
 }
 
 function handleSelection(e: EditorSelectionChangeEvent) {
   if (e.range === null)
-    context?.handlers.blur(e.htmlValue)
+    props.context?.handlers.blur(e.htmlValue)
 }
 
-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>
@@ -27,11 +36,20 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Editor
       :id="context.id"
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :editor-style="attrs.style"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :editor-style="context?.attrs.style"
       :class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :placeholder="context.placeholder"
+      :formats="context.formats"
+      :modules="context.modules"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @text-change="handleInput"
       @selection-change="handleSelection"
     />

package/dist/components/PrimeInputMask.vue

@@ -1,31 +1,82 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { InputMaskProps } from 'primevue/inputmask'
+
+export interface FormKitPrimeInputMaskProps {
+  mask?: InputMaskProps['mask']
+  slotChar?: InputMaskProps['slotChar']
+  autoClear?: InputMaskProps['autoClear']
+  unmask?: InputMaskProps['unmask']
+  pt?: InputMaskProps['pt']
+  ptOptions?: InputMaskProps['ptOptions']
+  unstyled?: InputMaskProps['unstyled']
+  invalid?: InputMaskProps['invalid']
+  variant?: InputMaskProps['variant']
+  iconLeft?: string
+  iconRight?: string
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputMaskProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
+function handleInput(e: FocusEvent) {
+  props.context?.node.input(props.context?._value)
+  props.context?.handlers.blur(e)
+}
+
+function hasLeftIcon() {
+  return props.context?.iconLeft && props.context?.iconLeft.length > 0
+}
+
+function hasRightIcon() {
+  return props.context?.iconRight && props.context?.iconRight.length > 0
+}
 
-function handleInput(e: any) {
-  context?.node.input(props.context?._value)
-  context?.handlers.blur(props.context?._value)
+function spanClass() {
+  let result = ''
+  if (hasLeftIcon())
+    result = `${result}p-input-icon-left `
+  if (hasRightIcon())
+    result = `${result}p-input-icon-right `
+  return result
 }
-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">
-    <InputMask
-      :id="context.id"
-      v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :editor-style="attrs.style"
-      :class="styleClass"
-      @blur="handleInput"
-    />
+    <span :class="spanClass()">
+      <i v-if="hasLeftIcon()" :class="context.iconLeft" />
+
+      <InputMask
+        :id="context.id"
+        v-model="context._value"
+        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"
+        :mask="context.mask ?? undefined"
+        :slot-char="context.slotChar ?? '_'"
+        :auto-clear="context.autoClear ?? true"
+        :unmask="context.unmask ?? false"
+        :pt="context.pt"
+        :invalid="context.invalid"
+        :variant="context.variant"
+        :pt-options="context.ptOptions"
+        :unstyled="context.unstyled ?? false"
+        @blur="handleInput"
+      />
+
+      <i v-if="hasRightIcon" :class="context.iconRight" />
+    </span>
   </div>
 </template>

package/dist/components/PrimeInputNumber.vue

@@ -1,33 +1,75 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { InputNumberBlurEvent, InputNumberProps } from 'primevue/inputnumber'
+
+export interface FormKitPrimeInputNumberProps {
+  useGrouping?: InputNumberProps['useGrouping']
+  min?: InputNumberProps['min']
+  max?: InputNumberProps['max']
+  minFractionDigits?: InputNumberProps['minFractionDigits']
+  maxFractionDigits?: InputNumberProps['maxFractionDigits']
+  locale?: InputNumberProps['locale']
+  mode?: InputNumberProps['mode']
+  currency?: InputNumberProps['currency']
+  prefix?: InputNumberProps['prefix']
+  suffix?: InputNumberProps['suffix']
+  showButtons?: InputNumberProps['showButtons']
+  buttonLayout?: InputNumberProps['buttonLayout']
+  step?: InputNumberProps['step']
+  pt?: InputNumberProps['pt']
+  ptOptions?: InputNumberProps['ptOptions']
+  unstyled?: InputNumberProps['unstyled']
+  placeholder?: InputNumberProps['placeholder']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputNumberProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
-function handleBlur(e: any) {
-  context?.handlers.blur(e.value)
+function handleBlur(e: InputNumberBlurEvent) {
+  props.context?.handlers.blur(e.originalEvent)
 }
 
 function handleInput(e: any) {
-  context?.node.input(e.value)
+  props.context?.node.input(e.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">
     <InputNumber
       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"
+      :placeholder="context.placeholder"
+      :use-grouping="context.useGrouping ?? true"
+      :min="context.min ?? undefined"
+      :max="context.max ?? undefined"
+      :min-fraction-digits="context.minFractionDigits ?? undefined"
+      :max-fraction-digits="context.maxFractionDigits ?? undefined"
+      :locale="context.locale ?? undefined"
+      :mode="context.mode ?? undefined"
+      :currency="context.currency ?? undefined"
+      :prefix="context.prefix ?? undefined"
+      :suffix="context.suffix ?? undefined"
+      :show-buttons="context.showButtons ?? undefined"
+      :button-layout="context.buttonLayout ?? 'stacked'"
+      :step="context.step ?? undefined"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @input="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeInputSwitch.vue

@@ -1,32 +1,58 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { InputSwitchProps } from 'primevue/inputswitch'
+
+export interface FormKitPrimeInputSwitchProps {
+  trueValue?: InputSwitchProps['trueValue']
+  falseValue?: InputSwitchProps['falseValue']
+  pt?: InputSwitchProps['pt']
+  ptOptions?: InputSwitchProps['ptOptions']
+  unstyled?: InputSwitchProps['unstyled']
+  labelLeft?: string
+  labelRight?: string
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputSwitchProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleInput(e: any) {
-  context?.node.input(props.context?._value)
+  props.context?.node.input(props.context?._value)
 }
-const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+
+function handleBlur(e: Event) {
+  props.context?.handlers.blur(e)
+}
+
+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="attrs.option_class" class="p-formkit">
-    <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.attrs.labelLeft }}</span>
+  <div :class="context?.attrs.option_class" class="p-formkit">
+    <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
     <InputSwitch
       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"
+      :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.attrs.labelRight" class="formkit-prime-right">{{ context.labelRight }}</span>
   </div>
 </template>

package/dist/components/PrimeInputText.vue

@@ -1,40 +1,58 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { InputTextProps } from 'primevue/inputtext'
+
+export interface FormKitPrimeInputTextProps {
+  pt?: InputTextProps['pt']
+  ptOptions?: InputTextProps['ptOptions']
+  unstyled?: InputTextProps['unstyled']
+  placeholder?: InputTextProps['placeholder']
+  icon?: string
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputTextProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function hasIcon() {
-  return context?.icon && context?.icon.length > 0
+  return props.context?.attrs?.icon && props.context?.attrs?.icon.length > 0
 }
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.target.value)
+function handleBlur(e: Event) {
+  props.context?.handlers.blur(e)
 }
 
 function handleInput(e: any) {
-  context?.node.input(e.target.value)
+  props.context?.node.input(e.target.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">
-    <IconField v-if="hasIcon()" :icon-position="attrs.iconPosition">
-      <InputIcon :class="context.icon" />
+    {{ context.attrs.icon }}
+    <IconField v-if="hasIcon()" :icon-position="context?.attrs.iconPosition">
+      <InputIcon :class="context.attrs.icon" />
       <InputText
         :id="context.id"
         v-model="context._value"
-        v-bind="attrs"
-        :disabled="attrs._disabled ?? !!context?.disabled"
-        :readonly="attrs._readonly ?? false"
-        :style="attrs.style"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs._readonly ?? false"
+        :style="context?.attrs.style"
         :class="styleClass"
+        :tabindex="context?.attrs.tabindex"
+        :aria-label="context?.attrs.ariaLabel"
+        :aria-labelledby="context?.attrs.ariaLabelledby"
+        :placeholder="context.placeholder"
+        :pt="context.pt"
+        :pt-options="context.ptOptions"
+        :unstyled="context.unstyled ?? false"
         @input="handleInput"
         @blur="handleBlur"
       />
@@ -43,11 +61,18 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       v-else
       :id="context.id"
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :style="attrs.style"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :style="context?.attrs.style"
       :class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :placeholder="context.placeholder"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @input="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeKnob.vue

@@ -1,23 +1,41 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { KnobProps } from 'primevue/knob'
+
+export interface FormKitPrimeKnobProps {
+  pt?: KnobProps['pt']
+  ptOptions?: KnobProps['ptOptions']
+  unstyled?: KnobProps['unstyled']
+  min?: KnobProps['min']
+  max?: KnobProps['max']
+  step?: KnobProps['step']
+  size?: KnobProps['size']
+  strokeWidth?: KnobProps['strokeWidth']
+  showValue?: KnobProps['showValue']
+  valueColor?: KnobProps['valueColor']
+  rangeColor?: KnobProps['rangeColor']
+  textColor?: KnobProps['textColor']
+  valueTemplate?: KnobProps['valueTemplate']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeKnobProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleInput(e: any) {
-  context?.node.input(e)
-  context?.handlers.blur(e)
+  props.context?.node.input(e)
+  props.context?.handlers.blur(e)
 }
 
 function updateValue(n: number) {
-  context?.node.input(n)
+  props.context?.node.input(n)
 }
 
-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>
@@ -25,11 +43,27 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Knob
       :id="context.id"
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :style="attrs.style"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :style="context?.attrs.style"
       :class="styleClass"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :min="context.min ?? 0"
+      :max="context.max ?? 100"
+      :step="context.step ?? undefined"
+      :size="context.size ?? 100"
+      :stroke-width="context.strokeWidth ?? 14"
+      :show-value="context.showValue ?? true"
+      :value-color="context.valueColor ?? undefined"
+      :range-color="context.rangeColor ?? undefined"
+      :text-color="context.textColor ?? undefined"
+      :value-template="context.valueTemplate ?? undefined"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleInput"
       @update:model-value="updateValue"
     />

package/dist/components/PrimeListbox.vue

@@ -1,18 +1,41 @@
 <script setup lang='ts'>
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { ListboxProps } from 'primevue/listbox'
+
+export interface FormKitPrimeListboxProps {
+  pt?: ListboxProps['pt']
+  ptOptions?: ListboxProps['ptOptions']
+  unstyled?: ListboxProps['unstyled']
+  options?: ListboxProps['options']
+  optionLabel?: ListboxProps['optionLabel']
+  optionValue?: ListboxProps['optionValue']
+  multiple?: ListboxProps['multiple']
+  filter?: ListboxProps['filter']
+  filterIcon?: ListboxProps['filterIcon']
+  filterPlaceholder?: ListboxProps['filterPlaceholder']
+  filterLocale?: ListboxProps['filterLocale']
+  filterMatchMode?: ListboxProps['filterMatchMode']
+  autoOptionFocus?: ListboxProps['autoOptionFocus']
+  selectOnFocus?: ListboxProps['selectOnFocus']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeListboxProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleInput(e: any) {
-  context?.node.input(props.context?._value)
+  props.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,13 +43,30 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
     <Listbox
       :id="context.id"
       v-model="context._value"
-      v-bind="attrs"
-      :disabled="attrs._disabled ?? !!context?.disabled"
-      :readonly="attrs._readonly ?? false"
-      :list-style="attrs.style"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs._readonly ?? false"
+      :list-style="context?.attrs.style"
       :class="styleClass"
-      :unstyled="attrs.unstyled ?? false"
+      :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"
+      :multiple="context.multiple ?? false"
+      :filter="context.filter ?? false"
+      :filter-icon="context.filterIcon"
+      :filter-placeholder="context.filterPlaceholder"
+      :filter-locale="context.filterLocale"
+      :filter-match-mode="context.filterMatchMode"
+      :auto-option-focus="context.autoOptionFocus ?? true"
+      :select-on-focus="context.selectOnFocus ?? false"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>