@sfxcode/formkit-primevue 2.3.10 → 2.3.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/FormKitDebug.vue +2 -2
  2. package/dist/components/PrimeCheckbox.vue +8 -6
  3. package/dist/composables/useFormKitSection.d.ts +1 -0
  4. package/dist/composables/useFormKitSection.js +5 -0
  5. package/dist/composables/useFormKitSection.mjs +5 -1
  6. package/dist/composables/useInputEditor.d.ts +0 -1
  7. package/dist/composables/useInputEditor.js +2 -6
  8. package/dist/composables/useInputEditor.mjs +3 -6
  9. package/dist/sass/formkit-primevue.scss +8 -8
  10. package/dist/style.css +1 -1
  11. package/package.json +3 -2
package/dist/components/FormKitDebug.vue CHANGED
@@ -15,8 +15,8 @@ defineProps({
15
15
  <div class="p-formkit-data-debug">
16
16
  <h3>{{ header }}</h3>
17
17
  <slot />
18
- <pre v-if="data" class="text-xs">{{ data }}</pre>
19
- <span v-else class="text-xs">No Data available</span>
18
+ <pre v-if="data">{{ data }}</pre>
19
+ <span v-else>No Data available</span>
20
20
  </div>
21
21
  </template>
22
22
 
package/dist/components/PrimeCheckbox.vue CHANGED
@@ -23,20 +23,22 @@ const props = defineProps({
23
23
  },
24
24
  })
25
25
 
26
- const { hasPrefix, hasSuffix } = useFormKitSection(props.context)
26
+ const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
27
27
 
28
28
  const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
29
+
30
+ const generatedId = generateId()
29
31
  </script>
30
32
 
31
33
  <template>
32
34
  <div class="p-formkit">
33
- <span v-if="hasPrefix" class="formkit-prefix">
35
+ <label v-if="hasPrefix" :for="generatedId" class="formkit-prefix">
34
36
  {{ context?.prefix }}
35
- </span>
37
+ </label>
36
38
  <Checkbox
37
39
  v-model="context._value"
38
40
  v-bind="context?.attrs"
39
- :input-id="context.id"
41
+ :input-id="generatedId"
40
42
  :disabled="!!context?.disabled"
41
43
  :readonly="context?.attrs.readonly ?? false"
42
44
  :input-style="context?.attrs.style"
@@ -55,8 +57,8 @@ const { styleClass, handleInput, handleBlur } = useFormKitInput(props.context)
55
57
  @change="handleInput"
56
58
  @blur="handleBlur"
57
59
  />
58
- <span v-if="hasSuffix" class="formkit-suffix">
60
+ <label v-if="hasSuffix" :for="generatedId" class="formkit-suffix">
59
61
  {{ context?.suffix }}
60
- </span>
62
+ </label>
61
63
  </div>
62
64
  </template>
package/dist/composables/useFormKitSection.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export declare function useFormKitSection(context: any): {
2
+ generateId: () => any;
2
3
  hasPrefix: import("vue").ComputedRef<any>;
3
4
  hasPrefixIcon: import("vue").ComputedRef<any>;
4
5
  hasSuffix: import("vue").ComputedRef<any>;
package/dist/composables/useFormKitSection.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.useFormKitSection = useFormKitSection;
7
7
  var _vue = require("vue");
8
+ var _uuid = require("uuid");
8
9
  function useFormKitSection(context) {
9
10
  const hasPrefix = (0, _vue.computed)(() => {
10
11
  return context?.prefix && context?.prefix.length > 0;
@@ -18,7 +19,11 @@ function useFormKitSection(context) {
18
19
  const hasSuffix = (0, _vue.computed)(() => {
19
20
  return context?.suffix && context?.suffix.length > 0;
20
21
  });
22
+ function generateId() {
23
+ return (0, _uuid.v4)();
24
+ }
21
25
  return {
26
+ generateId,
22
27
  hasPrefix,
23
28
  hasPrefixIcon,
24
29
  hasSuffix,
package/dist/composables/useFormKitSection.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import { computed } from "vue";
2
+ import { v4 as uuidv4 } from "uuid";
2
3
  export function useFormKitSection(context) {
3
4
  const hasPrefix = computed(() => {
4
5
  return context?.prefix && context?.prefix.length > 0;
@@ -12,5 +13,8 @@ export function useFormKitSection(context) {
12
13
  const hasSuffix = computed(() => {
13
14
  return context?.suffix && context?.suffix.length > 0;
14
15
  });
15
- return { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon };
16
+ function generateId() {
17
+ return uuidv4();
18
+ }
19
+ return { generateId, hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon };
16
20
  }
package/dist/composables/useInputEditor.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  export declare function useInputEditor(): {
2
2
  primeInputNames: string[];
3
3
  primeOutputNames: string[];
4
- generateSchemaItemId: () => string;
5
4
  editorDataToSchema: (data: any) => any;
6
5
  editorDataToJson: (data: any) => string;
7
6
  editorDataToCode: (data: any) => string;
package/dist/composables/useInputEditor.js CHANGED
@@ -8,9 +8,6 @@ function useInputEditor() {
8
8
  const primeInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
9
9
  const primeInputNames = [...primeInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
10
10
  const primeOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputText"];
11
- function generateSchemaItemId() {
12
- return `id-${Math.random().toString(36).substring(2, 15)}`;
13
- }
14
11
  function editorDataToSchema(data) {
15
12
  if (!data) return {};
16
13
  const formkitInput = data?._dollar_formkit;
@@ -35,8 +32,8 @@ function useInputEditor() {
35
32
  preserve: preserveValue
36
33
  };
37
34
  let outerClass = "";
38
- if (data.outerClassGrid && data.outerClassGrid !== "col-12") outerClass = `${outerClass} ${data.outerClassGrid}`;
39
- if (data.outerClass) outerClass = outerClass + data.outerClass;
35
+ if (data.outerClassGrid && data.outerClassGrid !== "col-12") outerClass = data.outerClassGrid;
36
+ if (data.outerClass) outerClass = `${outerClass} ${data.outerClass}`;
40
37
  if (outerClass.trim().length === 0) outerClass = void 0;
41
38
  const undefinedObject = {
42
39
  prime: void 0,
@@ -109,7 +106,6 @@ function useInputEditor() {
109
106
  return {
110
107
  primeInputNames,
111
108
  primeOutputNames,
112
- generateSchemaItemId,
113
109
  editorDataToSchema,
114
110
  editorDataToJson,
115
111
  editorDataToCode: editorDataToObject,
package/dist/composables/useInputEditor.mjs CHANGED
@@ -2,9 +2,6 @@ export function useInputEditor() {
2
2
  const primeInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
3
3
  const primeInputNames = [...primeInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
4
4
  const primeOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputText"];
5
- function generateSchemaItemId() {
6
- return `id-${Math.random().toString(36).substring(2, 15)}`;
7
- }
8
5
  function editorDataToSchema(data) {
9
6
  if (!data)
10
7
  return {};
@@ -26,9 +23,9 @@ export function useInputEditor() {
26
23
  const defaultObject = { readonly: readonlyValue, disabled: disabledValue, preserve: preserveValue };
27
24
  let outerClass = "";
28
25
  if (data.outerClassGrid && data.outerClassGrid !== "col-12")
29
- outerClass = `${outerClass} ${data.outerClassGrid}`;
26
+ outerClass = data.outerClassGrid;
30
27
  if (data.outerClass)
31
- outerClass = outerClass + data.outerClass;
28
+ outerClass = `${outerClass} ${data.outerClass}`;
32
29
  if (outerClass.trim().length === 0)
33
30
  outerClass = void 0;
34
31
  const undefinedObject = { prime: void 0, schemaResultFormKey: void 0, _dollar_formkit: void 0, slots: void 0, selectButton: void 0, outerClassGrid: void 0 };
@@ -72,5 +69,5 @@ export function useInputEditor() {
72
69
  const formkitInput = schema?.$formkit;
73
70
  return { ...schema, _dollar_formkit: formkitInput };
74
71
  }
75
- return { primeInputNames, primeOutputNames, generateSchemaItemId, editorDataToSchema, editorDataToJson, editorDataToCode: editorDataToObject, schemaToEditorData };
72
+ return { primeInputNames, primeOutputNames, editorDataToSchema, editorDataToJson, editorDataToCode: editorDataToObject, schemaToEditorData };
76
73
  }
package/dist/sass/formkit-primevue.scss CHANGED
@@ -142,14 +142,6 @@ $grid-breakpoints: (
142
142
  padding-top: 0.5rem;
143
143
  }
144
144
 
145
- // Debug
146
- .p-formkit-data-debug {
147
- pre, span {
148
- font-size: 0.75rem;
149
- line-height: 1rem;
150
- }
151
- }
152
-
153
145
  .p-action-buttons {
154
146
  margin-top: 0.25rem;
155
147
  .p-button {
@@ -161,6 +153,14 @@ $grid-breakpoints: (
161
153
  }
162
154
  }
163
155
 
156
+ // Debug
157
+ .p-formkit-data-debug {
158
+ pre, span {
159
+ font-size: 0.75rem;
160
+ line-height: 1rem;
161
+ }
162
+ }
163
+
164
164
  // Change column behaviour in larger views
165
165
  @include media-breakpoint-up(lg) {
166
166
  .formkit-form {
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- :root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem}.formkit-form .p-formkit-data-debug pre,.formkit-form .p-formkit-data-debug span{font-size:.75rem;line-height:1rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span.p-space{margin-right:3rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}
1
+ :root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span.p-space{margin-right:3rem}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sfxcode/formkit-primevue",
3
3
  "type": "module",
4
- "version": "2.3.10",
4
+ "version": "2.3.11",
5
5
  "packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74",
6
6
  "author": {
7
7
  "name": "Tom",
@@ -93,13 +93,14 @@
93
93
  "@formkit/vue": "^1.6.5",
94
94
  "primeicons": "^7.0.0",
95
95
  "primevue": "4.0.2",
96
+ "uuid": "^10.0.0",
96
97
  "vue-i18n": "9.13.1"
97
98
  },
98
99
  "devDependencies": {
99
100
  "@antfu/eslint-config": "2.23.2",
100
101
  "@formkit/core": "^1.6.5",
101
102
  "@primevue/themes": "4.0.2",
102
- "@types/node": "^20.14.12",
103
+ "@types/node": "^20.14.13",
103
104
  "@unocss/preset-icons": "0.61.6",
104
105
  "@unocss/preset-uno": "0.61.6",
105
106
  "@vitejs/plugin-vue": "^5.1.1",