@sfxcode/formkit-primevue 1.8.5 → 1.9.0

package/dist/components/PrimeTreeSelect.vue

@@ -1,31 +1,70 @@
 <script setup lang='ts'>
-import { computed, defineProps } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { TreeSelectProps } from 'primevue/treeselect'
+
+export interface FormKitPrimeTreeSelectProps {
+  options?: TreeSelectProps['options']
+  placeholder?: TreeSelectProps['placeholder']
+  selectionMode?: TreeSelectProps['selectionMode']
+  pt?: TreeSelectProps['pt']
+  ptOptions?: TreeSelectProps['ptOptions']
+  unstyled?: TreeSelectProps['unstyled']
+  emptyMessage?: TreeSelectProps['emptyMessage']
+  display?: TreeSelectProps['display']
+  metaKeySelection?: TreeSelectProps['metaKeySelection']
+  appendTo?: TreeSelectProps['appendTo']
+  scrollHeight?: TreeSelectProps['scrollHeight']
+  panelClass?: TreeSelectProps['panelClass']
+  variant?: TreeSelectProps['variant']
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeTreeSelectProps>,
+    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>
   <div class="p-formkit">
     <TreeSelect
       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"
+      :options="context?.options"
+      :placeholder="context.placeholder"
+      :selection-mode="context.selectionMode"
+      :pt="context.pt"
+      :empty-message="context.emptyMessage"
+      :display="context.display"
+      :meta-key-selection="context.metaKeySelection"
+      :append-to="context.appendTo"
+      :scroll-height="context.scrollHeight"
+      :panel-class="context.panelClass"
+      :variant="context.variant"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>

package/dist/components/PrimeTriStateCheckbox.vue

@@ -1,33 +1,56 @@
 <script setup lang='ts'>
-import { computed, defineProps } from 'vue'
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { TriStateCheckboxProps } from 'primevue/tristatecheckbox'
+
+export interface FormKitPrimeTriStateCheckboxProps {
+  pt?: TriStateCheckboxProps['pt']
+  ptOptions?: TriStateCheckboxProps['ptOptions']
+  unstyled?: TriStateCheckboxProps['unstyled']
+  variant?: TriStateCheckboxProps['variant']
+  labelLeft?: string
+  labelRight?: string
+}
 
 const props = defineProps({
-  context: Object,
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeTriStateCheckboxProps>,
+    required: true,
+  },
 })
 
-const context = props.context
-const attrs = computed(() => context?.attrs)
-
 function handleChange(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>
   <div class="p-formkit">
-    <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.attrs.labelLeft }}</span>
+    <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
     <TriStateCheckbox
       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"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
+      :variant="context.variant"
       @change="handleChange"
+      @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/index.d.ts

@@ -1,56 +1,55 @@
-import type { FormKitTypeDefinition } from '@formkit/core';
-import type { Plugin } from 'vue';
-import { useFormKitSchema } from './composables';
-declare const install: Plugin;
-export default install;
-export declare const primeAutoCompleteDefinition: FormKitTypeDefinition;
-export declare const primeInputTextDefinition: FormKitTypeDefinition;
-export declare const primeInputNumberDefinition: FormKitTypeDefinition;
-export declare const primeInputMaskDefinition: FormKitTypeDefinition;
-export declare const primePasswordDefinition: FormKitTypeDefinition;
-export declare const primeTextareaDefinition: FormKitTypeDefinition;
-export declare const primeCheckboxDefinition: FormKitTypeDefinition;
-export declare const primeInputSwitchDefinition: FormKitTypeDefinition;
-export declare const primeEditorDefinition: FormKitTypeDefinition;
-export declare const primeDropdownDefinition: FormKitTypeDefinition;
-export declare const primeMultiSelectDefinition: FormKitTypeDefinition;
-export declare const primeListboxDefinition: FormKitTypeDefinition;
-export declare const primeCalendarDefinition: FormKitTypeDefinition;
-export declare const primeSliderDefinition: FormKitTypeDefinition;
-export declare const primeRatingDefinition: FormKitTypeDefinition;
-export declare const primeRadioButtonDefinition: FormKitTypeDefinition;
-export declare const primeChipsDefinition: FormKitTypeDefinition;
-export declare const primeKnobDefinition: FormKitTypeDefinition;
-export declare const primeColorPickerDefinition: FormKitTypeDefinition;
-export declare const primeToggleButtonDefinition: FormKitTypeDefinition;
-export declare const primeSelectButtonDefinition: FormKitTypeDefinition;
-export declare const primeTriStateCheckboxDefinition: FormKitTypeDefinition;
-export declare const primeCascadeSelectDefinition: FormKitTypeDefinition;
-export declare const primeTreeSelectDefinition: FormKitTypeDefinition;
-export declare const primeInputs: {
-    primeAutoComplete: FormKitTypeDefinition;
-    primeInputText: FormKitTypeDefinition;
-    primeInputNumber: FormKitTypeDefinition;
-    primeInputMask: FormKitTypeDefinition;
-    primePassword: FormKitTypeDefinition;
-    primeCheckbox: FormKitTypeDefinition;
-    primeInputSwitch: FormKitTypeDefinition;
-    primeTextarea: FormKitTypeDefinition;
-    primeEditor: FormKitTypeDefinition;
-    primeDropdown: FormKitTypeDefinition;
-    primeMultiSelect: FormKitTypeDefinition;
-    primeCalendar: FormKitTypeDefinition;
-    primeSlider: FormKitTypeDefinition;
-    primeChips: FormKitTypeDefinition;
-    primeKnob: FormKitTypeDefinition;
-    primeRating: FormKitTypeDefinition;
-    primeRadioButton: FormKitTypeDefinition;
-    primeColorPicker: FormKitTypeDefinition;
-    primeToggleButton: FormKitTypeDefinition;
-    primeListbox: FormKitTypeDefinition;
-    primeSelectButton: FormKitTypeDefinition;
-    primeTriStateCheckbox: FormKitTypeDefinition;
-    primeCascadeSelect: FormKitTypeDefinition;
-    primeTreeSelect: FormKitTypeDefinition;
-};
-export { useFormKitSchema, };
+declare module '@formkit/inputs' {
+  import type { FormKitInputs } from '@formkit/inputs'
+
+  import type { FormKitPrimeCalendarProps } from './components/PrimeCalendar.vue'
+  import type { FormKitPrimeCascadeSelectProps } from './components/PrimeCascadeSelect.vue'
+  import type { FormKitPrimeCheckboxProps } from './components/PrimeCheckbox.vue'
+  import type { FormKitPrimeChipsProps } from './components/PrimeChips.vue'
+  import type { FormKitPrimeColorPickerProps } from './components/PrimeColorPicker.vue'
+  import type { FormKitPrimeDropdownProps } from './components/PrimeDropdown.vue'
+  import type { FormKitPrimeEditorProps } from './components/PrimeEditor.vue'
+  import type { FormKitPrimeInputMaskProps } from './components/PrimeInputMask.vue'
+  import type { FormKitPrimeInputNumberProps } from './components/PrimeInputNumber.vue'
+  import type { FormKitPrimeInputSwitchProps } from './components/PrimeInputSwitch.vue'
+  import type { FormKitPrimeInputTextProps } from './components/PrimeInputText.vue'
+  import type { FormKitPrimeKnobProps } from './components/PrimeKnob.vue'
+  import type { FormKitPrimeListboxProps } from './components/PrimeListbox.vue'
+  import type { FormKitPrimeMultiSelectProps } from './components/PrimeMultiSelect.vue'
+  import type { FormKitPrimePasswordProps } from './components/PrimePassword.vue'
+  import type { FormKitPrimeRadioButtonProps } from './components/PrimeRadioButton.vue'
+  import type { FormKitPrimeRatingProps } from './components/PrimeRating.vue'
+  import type { FormKitPrimeSelectButtonProps } from './components/PrimeSelectButton.vue'
+  import type { FormKitPrimeSliderProps } from './components/PrimeSlider.vue'
+  import type { FormKitPrimeTextareaProps } from './components/PrimeTextarea.vue'
+  import type { FormKitPrimeToggleButtonProps } from './components/PrimeToggleButton.vue'
+  import type { FormKitPrimeTreeSelectProps } from './components/PrimeTreeSelect.vue'
+  import type { FormKitPrimeTriStateCheckboxProps } from './components/PrimeTriStateCheckbox.vue'
+  import type { FormKitPrimeAutoCompleteProps } from './components/PrimeAutoComplete.vue'
+
+  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+    primeAutoComplete: FormKitPrimeAutoCompleteProps
+    primeCalendar: FormKitPrimeCalendarProps
+    primeCascadeSelect: FormKitPrimeCascadeSelectProps
+    primeCheckbox: FormKitPrimeCheckboxProps
+    primeChips: FormKitPrimeChipsProps
+    primeColorPicker: FormKitPrimeColorPickerProps
+    primeDropdown: FormKitPrimeDropdownProps
+    primeEditor: FormKitPrimeEditorProps
+    primeInputMask: FormKitPrimeInputMaskProps
+    primeInputNumber: FormKitPrimeInputNumberProps
+    primeInputSwitch: FormKitPrimeInputSwitchProps
+    primeInputText: FormKitPrimeInputTextProps
+    primeKnob: FormKitPrimeKnobProps
+    primeListbox: FormKitPrimeListboxProps
+    primeMultiSelect: FormKitPrimeMultiSelectProps
+    primePassword: FormKitPrimePasswordProps
+    primeRadioButton: FormKitPrimeRadioButtonProps
+    primeRating: FormKitPrimeRatingProps
+    primeSelectButton: FormKitPrimeSelectButtonProps
+    primeSlider: FormKitPrimeSliderProps
+    primeTextarea: FormKitPrimeTextareaProps
+    primeToggleButton: FormKitPrimeToggleButtonProps
+    primeTreeSelect: FormKitPrimeTreeSelectProps
+    primeTriStateCheckbox: FormKitPrimeTriStateCheckboxProps
+  }
+}

package/dist/index.js

@@ -47,76 +47,76 @@ const install = {
 };
 module.exports = install;
 const primeAutoCompleteDefinition = exports.primeAutoCompleteDefinition = (0, _vue.createInput)(_PrimeAutoComplete.default, {
-  props: []
+  props: ["pt", "ptOptions", "unstyled", "dropdown", "multiple"]
 });
 const primeInputTextDefinition = exports.primeInputTextDefinition = (0, _vue.createInput)(_PrimeInputText.default, {
-  props: ["icon", "icon"]
+  props: ["iconRight", "iconLeft", "pt", "ptOptions", "unstyled", "placeholder"]
 });
 const primeInputNumberDefinition = exports.primeInputNumberDefinition = (0, _vue.createInput)(_PrimeInputNumber.default, {
-  props: ["icon", "icon"]
+  props: ["useGrouping", "min", "max", "minFractionDigits", "maxFractionDigits", "locale", "mode", "currency", "prefix", "suffix", "showButtons", "buttonLayout", "step", "pt", "ptOptions", "unstyled", "placeholder"]
 });
 const primeInputMaskDefinition = exports.primeInputMaskDefinition = (0, _vue.createInput)(_PrimeInputMask.default, {
-  props: []
+  props: ["mask", "slotChar", "autoClear", "unmask", "pt", "ptOptions", "unstyled", "invalid", "variant", "iconLeft", "iconRight"]
 });
 const primePasswordDefinition = exports.primePasswordDefinition = (0, _vue.createInput)(_PrimePassword.default, {
-  props: ["feedback", "toggleMask"]
+  props: ["mediumRegex", "strongRegex", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "hideIcon", "showIcon", "pt", "ptOptions", "unstyled", "placeholder", "feedback", "toggleMask"]
 });
 const primeTextareaDefinition = exports.primeTextareaDefinition = (0, _vue.createInput)(_PrimeTextarea.default, {
-  props: ["rows"]
+  props: ["pt", "ptOptions", "unstyled", "autoResize", "rows", "placeholder"]
 });
 const primeCheckboxDefinition = exports.primeCheckboxDefinition = (0, _vue.createInput)(_PrimeCheckbox.default, {
-  props: []
+  props: ["binary", "trueValue", "falseValue", "pt", "ptOptions", "unstyled", "labelLeft", "labelRight"]
 });
 const primeInputSwitchDefinition = exports.primeInputSwitchDefinition = (0, _vue.createInput)(_PrimeInputSwitch.default, {
-  props: []
+  props: ["trueValue", "falseValue", "pt", "ptOptions", "unstyled", "labelLeft", "labelRight"]
 });
 const primeEditorDefinition = exports.primeEditorDefinition = (0, _vue.createInput)(_PrimeEditor.default, {
-  props: []
+  props: ["placeholder", "formats", "modules", "pt", "ptOptions", "unstyled"]
 });
 const primeDropdownDefinition = exports.primeDropdownDefinition = (0, _vue.createInput)(_PrimeDropdown.default, {
-  props: []
+  props: ["options", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "scrollHeight", "filter", "filterPlaceholder", "filterLocale", "filterMatchMode", "filterFields", "filterInputProps", "editable", "placeholder", "dataKey", "showClear", "panelStyle", "panelClass", "panelProps", "appendTo", "resetFilterOnHide", "virtualScrollerOptions", "autoOptionFocus", "selectOnFocus", "filterMessage", "selectionMessage", "emptySelectionMessage", "emptyFilterMessage", "emptyMessage", "pt", "ptOptions", "unstyled"]
 });
 const primeMultiSelectDefinition = exports.primeMultiSelectDefinition = (0, _vue.createInput)(_PrimeMultiSelect.default, {
-  props: []
+  props: ["options", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "scrollHeight", "inputProps", "closeButtonProps", "dataKey", "filter", "filterPlaceholder", "filterLocale", "filterMatchMode", "filterFields", "appendTo", "display", "maxSelectedLabels", "selectedItemsLabel", "selectionLimit", "showToggleAll", "loading", "selectAll", "resetFilterOnHide", "virtualScrollerOptions", "autoOptionFocus", "autoFilterFocus", "filterMessage", "selectionMessage", "emptySelectionMessage", "emptyFilterMessage", "emptyMessage", "pt", "placeholder", "ptOptions", "unstyled"]
 });
 const primeListboxDefinition = exports.primeListboxDefinition = (0, _vue.createInput)(_PrimeListbox.default, {
-  props: []
+  props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus"]
 });
 const primeCalendarDefinition = exports.primeCalendarDefinition = (0, _vue.createInput)(_PrimeCalendar.default, {
-  props: []
+  props: ["dateFormat", "placeholder", "selectionMode", "inline", "icon", "showOtherMonths", "selectOtherMonths", "showIcon", "previousIcon", "nextIcon", "incrementIcon", "decrementIcon", "numberOfMonths", "responsiveOptions", "view", "touchUI", "minDate", "maxDate", "disabledDates", "disabledDays", "maxDateCount", "showOnFocus", "autoZIndex", "baseZIndex", "showButtonBar", "showTime", "timeOnly", "shortYearCutoff", "hourFormat", "stepHour", "stepMinute", "stepSecond", "showSeconds", "hideOnDateTimeSelect", "hideOnRangeSelection", "timeSeparator", "showWeek", "manualInput", "appendTo", "panelStyle", "panelClass", "pt", "ptOptions", "unstyled"]
 });
 const primeSliderDefinition = exports.primeSliderDefinition = (0, _vue.createInput)(_PrimeSlider.default, {
-  props: []
+  props: ["pt", "ptOptions", "unstyled", "min", "max", "step", "range", "orientation"]
 });
 const primeRatingDefinition = exports.primeRatingDefinition = (0, _vue.createInput)(_PrimeRating.default, {
-  props: []
+  props: ["unstyled", "stars", "cancel", "onIcon", "offIcon", "cancelIcon", "ptOptions", "pt"]
 });
 const primeRadioButtonDefinition = exports.primeRadioButtonDefinition = (0, _vue.createInput)(_PrimeRadioButton.default, {
-  props: []
+  props: ["pt", "ptOptions", "unstyled", "options", "options_class"]
 });
 const primeChipsDefinition = exports.primeChipsDefinition = (0, _vue.createInput)(_PrimeChips.default, {
-  props: []
+  props: ["allowDuplicate", "addOnBlur", "max", "placeholder", "seperator", "pt", "ptOptions", "unstyled"]
 });
 const primeKnobDefinition = exports.primeKnobDefinition = (0, _vue.createInput)(_PrimeKnob.default, {
-  props: []
+  props: ["pt", "ptOptions", "unstyled", "min", "max", "step", "size", "strokeWidth", "showValue", "valueColor", "rangeColor", "textColor", "valueTemplate"]
 });
 const primeColorPickerDefinition = exports.primeColorPickerDefinition = (0, _vue.createInput)(_PrimeColorPicker.default, {
-  props: []
+  props: ["defaultColor", "inline", "format", "pt", "ptOptions", "unstyled"]
 });
 const primeToggleButtonDefinition = exports.primeToggleButtonDefinition = (0, _vue.createInput)(_PrimeToggleButton.default, {
-  props: []
+  props: ["pt", "ptOptions", "unstyled", "onLabel", "offLabel", "onIcon", "offIcon", "iconPos"]
 });
 const primeSelectButtonDefinition = exports.primeSelectButtonDefinition = (0, _vue.createInput)(_PrimeSelectButton.default, {
-  props: []
+  props: ["pt", "ptOptions", "unstyled", "optionLabel", "optionValue", "optionDisabled", "multiple", "unselectable", "dataKey", "options"]
 });
 const primeTriStateCheckboxDefinition = exports.primeTriStateCheckboxDefinition = (0, _vue.createInput)(_PrimeTriStateCheckbox.default, {
-  props: []
+  props: ["pt", "ptOptions", "unstyled", "variant", "labelRight", "labelLeft"]
 });
 const primeCascadeSelectDefinition = exports.primeCascadeSelectDefinition = (0, _vue.createInput)(_PrimeCascadeSelect.default, {
-  props: []
+  props: ["options", "optionLabel", "optionValue", "optionGroupLabel", "optionGroupChildren", "placeholder", "pt", "ptOptions", "unstyled"]
 });
 const primeTreeSelectDefinition = exports.primeTreeSelectDefinition = (0, _vue.createInput)(_PrimeTreeSelect.default, {
-  props: []
+  props: ["options", "placeholder", "selectionMode", "pt", "ptOptions", "unstyled", "emptyMessage", "display", "metaKeySelection", "appendTo", "scrollHeight", "panelClass", "variant"]
 });
 const primeInputs = exports.primeInputs = {
   primeAutoComplete: primeAutoCompleteDefinition,