@sfxcode/formkit-primevue 2.4.9 → 2.4.11

package/README.md

@@ -12,6 +12,12 @@ Actual PrimeVue Version of the main branch is *4.x.*
 
 PrimeVue 3 is in the prime3 branch, but future development will only focus on PrimeVue 4
 
+## Build
+
+[![CI](https://github.com/sfxcode/formkit-primevue/actions/workflows/deploy.yml/badge.svg)](https://github.com/sfxcode/formkit-primevue/actions/workflows/deploy.yml)
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/6142cb73-02e0-4b2a-9ca3-25496f59ba9b/deploy-status)](https://app.netlify.com/sites/formkit-primevue/deploys)
+
 ## Docs
 
 [Docs](https://sfxcode.github.io/formkit-primevue/)

package/dist/components/PrimeAutoComplete.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 
 const suggestions = ref([])
 
@@ -48,7 +48,7 @@ function search(event: AutoCompleteCompleteEvent) {
       :typeahead="context?.typeahead ?? true"
       :pt="context?.pt"
       :pt-options="context?.ptOptions"
-      :unstyled="context?.unstyled ?? false"
+      :unstyled="unstyled"
       @keydown.enter.prevent
       @complete="search"
       @change="handleInput"

package/dist/components/PrimeCascadeSelect.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -49,7 +49,7 @@ const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
       :placeholder="context.placeholder"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeCheckbox.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 
 const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 
 const generatedId = generateId()
 </script>
@@ -54,7 +54,7 @@ const generatedId = generateId()
       :false-value="context.falseValue ?? undefined"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeColorPicker.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   },
 })
 
-const { handleChange } = useFormKitInput(props.context)
+const { unstyled, handleChange } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -42,7 +42,7 @@ const { handleChange } = useFormKitInput(props.context)
       :format="context.format"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleChange"
     />
   </div>

package/dist/components/PrimeDatePicker.vue

@@ -59,7 +59,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
 
 function handleBlur(e: DatePickerBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -127,7 +127,7 @@ function handleClearClick() {
       :panel-class="context?.panelClass"
       :pt="context?.pt"
       :pt-options="context?.ptOptions"
-      :unstyled="context?.unstyled ?? false"
+      :unstyled="unstyled"
       @date-select="handleSelect"
       @input="handleInput"
       @blur="handleBlur"

package/dist/components/PrimeEditor.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput } = useFormKitInput(props.context)
 
 function handleSelection(e: EditorSelectionChangeEvent) {
   if (e.range === null)
@@ -49,7 +49,7 @@ function handleSelection(e: EditorSelectionChangeEvent) {
       :modules="context.modules"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @text-change="handleInput"
       @selection-change="handleSelection"
     />

package/dist/components/PrimeInputMask.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
@@ -52,7 +52,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         :pt="context.pt"
         :variant="context.variant"
         :pt-options="context.ptOptions"
-        :unstyled="context.unstyled ?? false"
+        :unstyled="unstyled"
         @input="handleInput"
         @blur="handleBlur"
       />

package/dist/components/PrimeInputNumber.vue

@@ -33,7 +33,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput } = useFormKitInput(props.context)
 
 function handleBlur(e: InputNumberBlurEvent) {
   props.context?.handlers.blur(e.originalEvent)
@@ -70,7 +70,7 @@ function handleBlur(e: InputNumberBlurEvent) {
       :step="context.step ?? undefined"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @input="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeInputOtp.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -46,7 +46,7 @@ const { isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
       :integer-only="context.integerOnly"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeInputText.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
 </script>
 
@@ -44,7 +44,7 @@ const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
         :placeholder="context.placeholder"
         :pt="context.pt"
         :pt-options="context.ptOptions"
-        :unstyled="context.unstyled ?? false"
+        :unstyled="unstyled"
         @input="handleInput"
         @blur="handleBlur"
       />

package/dist/components/PrimeKnob.vue

@@ -29,7 +29,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid } = useFormKitInput(props.context)
+const { unstyled, isInvalid } = useFormKitInput(props.context)
 
 function handleInput(e: any) {
   props.context?.node.input(e)
@@ -67,7 +67,7 @@ function updateValue(n: number) {
       :value-template="context.valueTemplate ?? undefined"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleInput"
       @update:model-value="updateValue"
     />

package/dist/components/PrimeListbox.vue

@@ -30,7 +30,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -60,7 +60,7 @@ const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
       :select-on-focus="context.selectOnFocus ?? false"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeMultiSelect.vue

@@ -51,7 +51,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -102,7 +102,7 @@ const { isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
       :empty-message="context.emptyMessage"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleChange"
       @blur="handleBlur"
     />

package/dist/components/PrimePassword.vue

@@ -30,7 +30,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -60,7 +60,7 @@ const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
       :toggle-mask="context.toggleMask ?? false"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @input="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeRadioButton.vue

@@ -21,7 +21,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -40,7 +40,7 @@ const { isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
         :invalid="isInvalid"
         :pt="context.pt"
         :pt-options="context.ptOptions"
-        :unstyled="context.unstyled ?? false"
+        :unstyled="unstyled"
         @click="handleChange"
         @change="handleChange"
         @blur="handleBlur"

package/dist/components/PrimeRating.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -44,7 +44,7 @@ const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
       :off-icon="context.offIcon ?? 'pi pi-star'"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeSelect.vue

@@ -47,7 +47,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -99,7 +99,7 @@ const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
       :empty-message="context.emptyMessage"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeSelectButton.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -50,7 +50,7 @@ const { isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
       :data-key="context.dataKey"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleChange"
       @blur="handleBlur"
     />

package/dist/components/PrimeSlider.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleBlur } = useFormKitInput(props.context)
 
 function handleInput(e: any) {
   props.context?.node.input(e)
@@ -53,7 +53,7 @@ function handleInput(e: any) {
       :orientation="context.orientation ?? 'horizontal'"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeTextarea.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -44,7 +44,7 @@ const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
       :auto-resize="context.autoResize ?? false"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @input="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeToggleButton.vue

@@ -24,7 +24,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -48,7 +48,7 @@ const { isInvalid, handleChange, handleBlur } = useFormKitInput(props.context)
       :icon-pos="context.iconPos ?? 'left'"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleChange"
       @blur="handleBlur"
     />

package/dist/components/PrimeToggleSwitch.vue

@@ -22,7 +22,7 @@ const props = defineProps({
 
 const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -46,7 +46,7 @@ const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
       :false-value="context.falseValue ?? undefined"
       :pt="context.pt"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
     />

package/dist/components/PrimeTreeSelect.vue

@@ -29,7 +29,7 @@ const props = defineProps({
   },
 })
 
-const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 </script>
 
 <template>
@@ -58,7 +58,7 @@ const { isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
       :panel-class="context.panelClass"
       :variant="context.variant"
       :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
+      :unstyled="unstyled"
       @change="handleInput"
       @blur="handleBlur"
     />

package/dist/composables/useFormKitInput.d.ts

@@ -1,6 +1,7 @@
 export declare function useFormKitInput(context: any): {
     isInvalid: import("vue").ComputedRef<any>;
     styleClass: import("vue").ComputedRef<any>;
+    unstyled: import("vue").ComputedRef<any>;
     handleBlur: (event: Event) => void;
     handleChange: (_: any) => void;
     handleInput: (_: any) => void;

package/dist/composables/useFormKitInput.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useFormKitInput = useFormKitInput;
+var _config = require("primevue/config");
 var _vue = require("vue");
 function useFormKitInput(context) {
   const isInvalid = (0, _vue.computed)(() => {
@@ -12,6 +13,17 @@ function useFormKitInput(context) {
   const styleClass = (0, _vue.computed)(() => {
     return context?.state.validationVisible && !context?.state.valid ? `${context?.attrs?.class} p-invalid` : context?.attrs?.class;
   });
+  function isGlobalUnstyledMode() {
+    let result = false;
+    try {
+      const primevue = (0, _config.usePrimeVue)();
+      result = primevue?.config?.unstyled || false;
+    } catch (e) {}
+    return result;
+  }
+  const unstyled = (0, _vue.computed)(() => {
+    return context?.unstyled ?? isGlobalUnstyledMode();
+  });
   function handleBlur(event) {
     context?.handlers.blur(event);
   }
@@ -27,6 +39,7 @@ function useFormKitInput(context) {
   return {
     isInvalid,
     styleClass,
+    unstyled,
     handleBlur,
     handleChange,
     handleInput,

package/dist/composables/useFormKitInput.mjs

@@ -1,3 +1,4 @@
+import { usePrimeVue } from "primevue/config";
 import { computed } from "vue";
 export function useFormKitInput(context) {
   const isInvalid = computed(() => {
@@ -6,6 +7,18 @@ export function useFormKitInput(context) {
   const styleClass = computed(() => {
     return context?.state.validationVisible && !context?.state.valid ? `${context?.attrs?.class} p-invalid` : context?.attrs?.class;
   });
+  function isGlobalUnstyledMode() {
+    let result = false;
+    try {
+      const primevue = usePrimeVue();
+      result = primevue?.config?.unstyled || false;
+    } catch (e) {
+    }
+    return result;
+  }
+  const unstyled = computed(() => {
+    return context?.unstyled ?? isGlobalUnstyledMode();
+  });
   function handleBlur(event) {
     context?.handlers.blur(event);
   }
@@ -18,5 +31,5 @@ export function useFormKitInput(context) {
   function handleSelect(e) {
     context?.node.input(e);
   }
-  return { isInvalid, styleClass, handleBlur, handleChange, handleInput, handleSelect };
+  return { isInvalid, styleClass, unstyled, handleBlur, handleChange, handleInput, handleSelect };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "2.4.9",
+  "version": "2.4.11",
   "packageManager": "pnpm@9.9.0+sha256.7a4261e50d9a44d9240baf6c9d6e10089dcf0a79d0007f2a26985a6927324177",
   "author": {
     "name": "Tom",
@@ -87,32 +87,32 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@formkit/addons": "^1.6.6",
+    "@formkit/addons": "^1.6.7",
     "@formkit/drag-and-drop": "^0.1.6",
-    "@formkit/i18n": "^1.6.6",
-    "@formkit/vue": "^1.6.6",
+    "@formkit/i18n": "^1.6.7",
+    "@formkit/vue": "^1.6.7",
     "primeicons": "^7.0.0",
     "primevue": "4.0.7",
     "uuid": "^10.0.0",
     "vue-i18n": "9.14.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "3.6.0",
-    "@formkit/core": "^1.6.6",
+    "@antfu/eslint-config": "3.6.2",
+    "@formkit/core": "^1.6.7",
     "@primevue/themes": "4.0.7",
-    "@types/node": "^22.5.4",
-    "@unocss/preset-icons": "0.62.3",
-    "@unocss/preset-uno": "0.62.3",
-    "@vitejs/plugin-vue": "^5.1.3",
-    "@vitest/coverage-v8": "^2.1.0",
-    "@vitest/ui": "^2.1.0",
-    "@vue/compiler-sfc": "3.5.4",
-    "@vue/server-renderer": "^3.5.4",
+    "@types/node": "^22.5.5",
+    "@unocss/preset-icons": "0.62.4",
+    "@unocss/preset-uno": "0.62.4",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/ui": "^2.1.1",
+    "@vue/compiler-sfc": "3.5.6",
+    "@vue/server-renderer": "^3.5.6",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "@vuedx/typecheck": "~0.7.6",
     "@vuedx/typescript-plugin-vue": "~0.7.6",
-    "@vueuse/core": "^11.0.3",
+    "@vueuse/core": "^11.1.0",
     "@vueuse/head": "^2.0.0",
     "changelogen": "^0.5.5",
     "chart.js": "^4.4.4",
@@ -122,24 +122,24 @@
     "json-editor-vue": "^0.16.0",
     "mkdist": "^1.5.9",
     "quill": "^2.0.2",
-    "sass": "^1.78.0",
+    "sass": "1.78.0",
     "tslib": "^2.7.0",
     "typescript": "^5.6.2",
     "unbuild": "3.0.0-rc.7",
-    "unocss": "0.62.3",
+    "unocss": "0.62.4",
     "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",
     "vanilla-jsoneditor": "^0.23.8",
-    "vite": "^5.4.4",
+    "vite": "^5.4.6",
     "vite-plugin-dts": "4.2.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-pages": "^0.32.3",
     "vite-ssg": "^0.23.8",
     "vitepress": "1.3.4",
-    "vitest": "^2.1.0",
-    "vue": "3.5.4",
+    "vitest": "^2.1.1",
+    "vue": "3.5.6",
     "vue-demi": "^0.14.10",
-    "vue-router": "^4.4.4",
+    "vue-router": "^4.4.5",
     "vue-tsc": "^2.1.6"
   }
 }