@sfxcode/formkit-primevue 1.9.3 → 1.9.5

package/README.md

@@ -27,7 +27,6 @@ import { primeInputs } from '@sfxcode/formkit-primevue'
 
 [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](https://github.com/sfxcode/formkit-primevue/blob/main/src/sass/formkit-primevue.scss) file.
@@ -47,7 +46,7 @@ You can use it or take it as base for your own styling.
 - PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
 - [Styling](https://formkit-primevue.netlify.app/styling/base) and [PT](https://formkit-primevue.netlify.app/styling/passThrough) demo available
 
-### Samples 
+### Samples
 
 Some samples for common tasks are available
 
@@ -71,6 +70,7 @@ Some samples for common tasks are available
 - Editor (HTML Editor)
 - InputMask
 - InputNumber
+- InputOtp
 - InputSwitch
 - InputText
 - InputTextarea

package/dist/components/PrimeInputOtp.vue

@@ -0,0 +1,58 @@
+<script setup lang='ts'>
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import type { InputOtpProps } from 'primevue/inputotp'
+
+export interface FormKitPrimeInputOtpProps {
+  unstyled?: InputOtpProps['unstyled']
+  ptOptions?: InputOtpProps['ptOptions']
+  pt?: InputOtpProps['pt']
+  length?: InputOtpProps['length']
+  variant?: InputOtpProps['variant']
+  mask?: InputOtpProps['mask']
+  integerOnly?: InputOtpProps['integerOnly']
+}
+
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputOtpProps>,
+    required: true,
+  },
+})
+
+function handleInput(_: any) {
+  props.context?.node.input(props.context?._value)
+}
+
+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="p-formkit">
+    <InputOtp
+      :id="context.id"
+      v-model="context._value"
+      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"
+      :length="context.length"
+      :variant="context.variant"
+      :mask="context.mask"
+      :integer-only="context.integerOnly"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="context.unstyled ?? false"
+      @change="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/PrimeRadioButton.vue

@@ -31,7 +31,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
 
 <template>
   <div :class="context.options_class" class="p-formkit">
-    <div v-for="option in context.options" :key="option.value" :class="context.attrs.option_class">
+    <div v-for="option in context.options" :key="option.value" :class="context.option_class">
       <RadioButton
         :id="context.id"
         v-model="context._value"
@@ -49,7 +49,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
         @change="handleChange"
         @blur="handleBlur"
       />
-      <label :for="option.value" class="p-formkit-radio-label">{{ option.label }}</label>
+      <label :for="option.value" :class="context.label_class" class="p-formkit-radio-label">{{ option.label }}</label>
     </div>
   </div>
 </template>

package/dist/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.primeTriStateCheckboxDefinition = exports.primeTreeSelectDefinition = exports.primeToggleButtonDefinition = exports.primeTextareaDefinition = exports.primeSliderDefinition = exports.primeSelectButtonDefinition = exports.primeRatingDefinition = exports.primeRadioButtonDefinition = exports.primePasswordDefinition = exports.primeMultiSelectDefinition = exports.primeListboxDefinition = exports.primeKnobDefinition = exports.primeInputs = exports.primeInputTextDefinition = exports.primeInputSwitchDefinition = exports.primeInputNumberDefinition = exports.primeInputMaskDefinition = exports.primeEditorDefinition = exports.primeDropdownDefinition = exports.primeColorPickerDefinition = exports.primeChipsDefinition = exports.primeCheckboxDefinition = exports.primeCascadeSelectDefinition = exports.primeCalendarDefinition = exports.primeAutoCompleteDefinition = exports.default = void 0;
+exports.primeTriStateCheckboxDefinition = exports.primeTreeSelectDefinition = exports.primeToggleButtonDefinition = exports.primeTextareaDefinition = exports.primeSliderDefinition = exports.primeSelectButtonDefinition = exports.primeRatingDefinition = exports.primeRadioButtonDefinition = exports.primePasswordDefinition = exports.primeMultiSelectDefinition = exports.primeListboxDefinition = exports.primeKnobDefinition = exports.primeInputs = exports.primeInputTextDefinition = exports.primeInputSwitchDefinition = exports.primeInputOtpDefinition = exports.primeInputNumberDefinition = exports.primeInputMaskDefinition = exports.primeEditorDefinition = exports.primeDropdownDefinition = exports.primeColorPickerDefinition = exports.primeChipsDefinition = exports.primeCheckboxDefinition = exports.primeCascadeSelectDefinition = exports.primeCalendarDefinition = exports.primeAutoCompleteDefinition = exports.default = void 0;
 Object.defineProperty(exports, "useFormKitSchema", {
   enumerable: true,
   get: function () {
@@ -21,6 +21,7 @@ var _PrimeDropdown = _interopRequireDefault(require("./components/PrimeDropdown.
 var _PrimeEditor = _interopRequireDefault(require("./components/PrimeEditor.vue"));
 var _PrimeInputMask = _interopRequireDefault(require("./components/PrimeInputMask.vue"));
 var _PrimeInputNumber = _interopRequireDefault(require("./components/PrimeInputNumber.vue"));
+var _PrimeInputOtp = _interopRequireDefault(require("./components/PrimeInputOtp.vue"));
 var _PrimeInputSwitch = _interopRequireDefault(require("./components/PrimeInputSwitch.vue"));
 var _PrimeInputText = _interopRequireDefault(require("./components/PrimeInputText.vue"));
 var _PrimeTextarea = _interopRequireDefault(require("./components/PrimeTextarea.vue"));
@@ -70,6 +71,9 @@ const primeCheckboxDefinition = exports.primeCheckboxDefinition = (0, _vue.creat
 const primeInputSwitchDefinition = exports.primeInputSwitchDefinition = (0, _vue.createInput)(_PrimeInputSwitch.default, {
   props: ["trueValue", "falseValue", "pt", "ptOptions", "unstyled", "labelLeft", "labelRight"]
 });
+const primeInputOtpDefinition = exports.primeInputOtpDefinition = (0, _vue.createInput)(_PrimeInputOtp.default, {
+  props: ["length", "variant", "mask", "integerOnly", "pt", "ptOptions", "unstyled"]
+});
 const primeEditorDefinition = exports.primeEditorDefinition = (0, _vue.createInput)(_PrimeEditor.default, {
   props: ["placeholder", "formats", "modules", "pt", "ptOptions", "unstyled"]
 });
@@ -92,7 +96,7 @@ const primeRatingDefinition = exports.primeRatingDefinition = (0, _vue.createInp
   props: ["unstyled", "stars", "cancel", "onIcon", "offIcon", "cancelIcon", "ptOptions", "pt"]
 });
 const primeRadioButtonDefinition = exports.primeRadioButtonDefinition = (0, _vue.createInput)(_PrimeRadioButton.default, {
-  props: ["pt", "ptOptions", "unstyled", "options", "options_class"]
+  props: ["pt", "ptOptions", "unstyled", "options", "options_class", "option_class", "label_class"]
 });
 const primeChipsDefinition = exports.primeChipsDefinition = (0, _vue.createInput)(_PrimeChips.default, {
   props: ["allowDuplicate", "addOnBlur", "max", "placeholder", "seperator", "pt", "ptOptions", "unstyled"]
@@ -142,5 +146,6 @@ const primeInputs = exports.primeInputs = {
   primeSelectButton: primeSelectButtonDefinition,
   primeTriStateCheckbox: primeTriStateCheckboxDefinition,
   primeCascadeSelect: primeCascadeSelectDefinition,
-  primeTreeSelect: primeTreeSelectDefinition
+  primeTreeSelect: primeTreeSelectDefinition,
+  primeInputOtp: primeInputOtpDefinition
 };

package/dist/index.mjs

@@ -9,6 +9,7 @@ import PrimeDropdown from "./components/PrimeDropdown.vue";
 import PrimeEditor from "./components/PrimeEditor.vue";
 import PrimeInputMask from "./components/PrimeInputMask.vue";
 import PrimeInputNumber from "./components/PrimeInputNumber.vue";
+import PrimeInputOtp from "./components/PrimeInputOtp.vue";
 import PrimeInputSwitch from "./components/PrimeInputSwitch.vue";
 import PrimeInputText from "./components/PrimeInputText.vue";
 import PrimeTextarea from "./components/PrimeTextarea.vue";
@@ -132,6 +133,17 @@ export const primeInputSwitchDefinition = createInput(PrimeInputSwitch, {
     "labelRight"
   ]
 });
+export const primeInputOtpDefinition = createInput(PrimeInputOtp, {
+  props: [
+    "length",
+    "variant",
+    "mask",
+    "integerOnly",
+    "pt",
+    "ptOptions",
+    "unstyled"
+  ]
+});
 export const primeEditorDefinition = createInput(PrimeEditor, {
   props: [
     "placeholder",
@@ -315,7 +327,9 @@ export const primeRadioButtonDefinition = createInput(PrimeRadioButton, {
     "ptOptions",
     "unstyled",
     "options",
-    "options_class"
+    "options_class",
+    "option_class",
+    "label_class"
   ]
 });
 export const primeChipsDefinition = createInput(PrimeChips, {
@@ -447,7 +461,8 @@ export const primeInputs = {
   primeSelectButton: primeSelectButtonDefinition,
   primeTriStateCheckbox: primeTriStateCheckboxDefinition,
   primeCascadeSelect: primeCascadeSelectDefinition,
-  primeTreeSelect: primeTreeSelectDefinition
+  primeTreeSelect: primeTreeSelectDefinition,
+  primeInputOtp: primeInputOtpDefinition
 };
 export {
   useFormKitSchema

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "1.9.3",
+  "version": "1.9.5",
   "author": {
     "name": "Tom",
     "email": "tom@sfxcode.com"
@@ -64,18 +64,18 @@
     "@formkit/i18n": "^1.6.0",
     "@formkit/vue": "^1.6.0",
     "primeicons": "^6.0.1",
-    "primevue": "^3.49.1"
+    "primevue": "^3.50.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.8.0",
+    "@antfu/eslint-config": "2.8.3",
     "@formkit/core": "^1.6.0",
-    "@types/node": "^20.11.25",
-    "@unocss/preset-icons": "^0.58.5",
-    "@unocss/preset-uno": "0.58.5",
+    "@types/node": "^20.11.28",
+    "@unocss/preset-icons": "^0.58.6",
+    "@unocss/preset-uno": "0.58.6",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "^3.4.21",
     "@vue/server-renderer": "^3.4.21",
-    "@vue/test-utils": "^2.4.4",
+    "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
     "@vuedx/typecheck": "~0.7.6",
     "@vuedx/typescript-plugin-vue": "~0.7.6",
@@ -87,20 +87,20 @@
     "json-editor-vue": "^0.12.0",
     "mkdist": "^1.4.0",
     "quill": "^1.3.7",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
     "tslib": "^2.6.2",
     "typescript": "^5.4.2",
     "unbuild": "2.0.0",
-    "unocss": "^0.58.5",
+    "unocss": "^0.58.6",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
-    "vanilla-jsoneditor": "^0.22.0",
+    "vanilla-jsoneditor": "^0.23.0",
     "vite": "^5.1.6",
     "vite-plugin-dts": "^3.7.3",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-pages": "^0.32.0",
     "vite-ssg": "^0.23.6",
-    "vitepress": "1.0.0-rc.44",
+    "vitepress": "1.0.0-rc.45",
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",