@sfxcode/formkit-primevue 3.3.6 → 3.3.8

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 (6) hide show
  1. package/dist/components/PrimeOutputList.d.vue.ts +4 -0
  2. package/dist/components/PrimeOutputList.vue +56 -9
  3. package/dist/components/PrimeOutputList.vue.d.ts +4 -0
  4. package/dist/definitions/output.js +1 -1
  5. package/dist/definitions/output.mjs +95 -14
  6. package/package.json +1 -1
package/dist/components/PrimeOutputList.d.vue.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { SelectProps } from 'primevue/select';
2
3
  import type { PropType } from 'vue';
3
4
  import type { FormKitIconProps } from './FormKitIcon.vue';
4
5
  export interface PrimeOutputListProps {
6
+ options?: SelectProps['options'];
7
+ optionLabel?: SelectProps['optionLabel'];
8
+ optionValue?: SelectProps['optionValue'];
5
9
  convertValue?: (array: []) => [];
6
10
  }
7
11
  declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
package/dist/components/PrimeOutputList.vue CHANGED
@@ -1,5 +1,6 @@
1
- <script setup lang='ts'>
1
+ <script setup lang="ts">
2
2
  import type { FormKitFrameworkContext } from '@formkit/core'
3
+ import type { SelectProps } from 'primevue/select'
3
4
  import type { PropType } from 'vue'
4
5
  import type { FormKitIconProps } from './FormKitIcon.vue'
5
6
  import { computed } from 'vue'
@@ -9,6 +10,9 @@ import FormKitPrefix from './FormKitPrefix.vue'
9
10
  import FormKitSuffix from './FormKitSuffix.vue'
10
11
 
11
12
  export interface PrimeOutputListProps {
13
+ options?: SelectProps['options']
14
+ optionLabel?: SelectProps['optionLabel']
15
+ optionValue?: SelectProps['optionValue']
12
16
  convertValue?: (array: []) => []
13
17
  }
14
18
 
@@ -27,7 +31,14 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
27
31
 
28
32
  const getListValues = computed(() => {
29
33
  const values = Array.isArray(props.context?._value) ? props.context._value : []
30
- if (typeof props.context?.convertValue === 'function') {
34
+ if (props.context?.options && props.context?.optionValue) {
35
+ const key: string = `${props.context.optionValue}`
36
+ return values.map((value) => {
37
+ const foundOption = props.context?.options?.find(option => option[key] === value)
38
+ return foundOption ? foundOption[props.context?.optionLabel as string] : value
39
+ })
40
+ }
41
+ else if (typeof props.context?.convertValue === 'function') {
31
42
  return props.context.convertValue([...values])
32
43
  }
33
44
  return values
@@ -40,29 +51,60 @@ const listItemsClass = computed(() => props.context?.attrs?.class || '')
40
51
 
41
52
  <template>
42
53
  <div class="p-formkit p-output-list">
43
- <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
54
+ <FormKitIcon
55
+ v-if="hasPrefixIcon"
56
+ :icon-class="context?.iconPrefix as string"
57
+ :on-click="context?.onIconPrefixClicked as () => void"
58
+ position="prefix"
59
+ />
44
60
  <FormKitPrefix v-if="hasPrefix && listStyle === 'span'" :prefix="context?.prefix as string" />
45
- <span v-if="listStyle === 'span'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
61
+ <span
62
+ v-if="listStyle === 'span'"
63
+ :id="context?.id"
64
+ :style="context?.attrs?.style"
65
+ class="p-output-list-items"
66
+ :class="listItemsClass"
67
+ >
46
68
  <template v-for="(value, index) of getListValues" :key="index">
47
- <span v-if="index !== 0" class="p-output-list-divider" :class="dividerClass">{{ context?.divider ?? ', ' }}</span>
69
+ <span v-if="index !== 0" class="p-output-list-divider" :class="dividerClass">{{
70
+ context?.divider ?? ", "
71
+ }}</span>
48
72
  <span class="p-output-list-item" :class="itemClass">{{ value }}</span>
49
73
  </template>
50
74
  </span>
51
- <div v-if="listStyle === 'div'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
75
+ <div
76
+ v-if="listStyle === 'div'"
77
+ :id="context?.id"
78
+ :style="context?.attrs?.style"
79
+ class="p-output-list-items"
80
+ :class="listItemsClass"
81
+ >
52
82
  <template v-for="(value, index) of getListValues" :key="index">
53
83
  <div class="p-output-list-item" :class="itemClass">
54
84
  {{ value }}
55
85
  </div>
56
86
  </template>
57
87
  </div>
58
- <ul v-if="listStyle === 'ul'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
88
+ <ul
89
+ v-if="listStyle === 'ul'"
90
+ :id="context?.id"
91
+ :style="context?.attrs?.style"
92
+ class="p-output-list-items"
93
+ :class="listItemsClass"
94
+ >
59
95
  <li v-for="(value, index) of getListValues" :key="index">
60
96
  <span class="p-output-list-item" :class="itemClass">
61
97
  {{ value }}
62
98
  </span>
63
99
  </li>
64
100
  </ul>
65
- <ol v-if="listStyle === 'ol'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
101
+ <ol
102
+ v-if="listStyle === 'ol'"
103
+ :id="context?.id"
104
+ :style="context?.attrs?.style"
105
+ class="p-output-list-items"
106
+ :class="listItemsClass"
107
+ >
66
108
  <li v-for="(value, index) of getListValues" :key="index">
67
109
  <span class="p-output-list-item" :class="itemClass">
68
110
  {{ value }}
@@ -70,6 +112,11 @@ const listItemsClass = computed(() => props.context?.attrs?.class || '')
70
112
  </li>
71
113
  </ol>
72
114
  <FormKitSuffix v-if="hasSuffix && listStyle === 'span'" :suffix="context?.suffix as string" />
73
- <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
115
+ <FormKitIcon
116
+ v-if="hasSuffixIcon"
117
+ :icon-class="context?.iconSuffix as string"
118
+ :on-click="context?.onIconSuffixClicked as () => void"
119
+ position="suffix"
120
+ />
74
121
  </div>
75
122
  </template>
package/dist/components/PrimeOutputList.vue.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  import type { FormKitFrameworkContext } from '@formkit/core';
2
+ import type { SelectProps } from 'primevue/select';
2
3
  import type { PropType } from 'vue';
3
4
  import type { FormKitIconProps } from './FormKitIcon.vue';
4
5
  export interface PrimeOutputListProps {
6
+ options?: SelectProps['options'];
7
+ optionLabel?: SelectProps['optionLabel'];
8
+ optionValue?: SelectProps['optionValue'];
5
9
  convertValue?: (array: []) => [];
6
10
  }
7
11
  declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
package/dist/definitions/output.js CHANGED
@@ -41,6 +41,6 @@ const primeOutputDurationDefinition = exports.primeOutputDurationDefinition = (0
41
41
  family: "PrimeOutput"
42
42
  });
43
43
  const primeOutputListDefinition = exports.primeOutputListDefinition = (0, _vue.createInput)(_PrimeOutputList.default, {
44
- props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "divider", "itemClass", "dividerClass", "listStyle", "onIconPrefixClicked", "onIconSuffixClicked", "convertValue"],
44
+ props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "divider", "itemClass", "dividerClass", "listStyle", "onIconPrefixClicked", "onIconSuffixClicked", "optionLabel", "options", "optionValue", "convertValue"],
45
45
  family: "PrimeOutput"
46
46
  });
package/dist/definitions/output.mjs CHANGED
@@ -8,32 +8,113 @@ import PrimeOutputNumber from "../components/PrimeOutputNumber.vue";
8
8
  import PrimeOutputReference from "../components/PrimeOutputReference.vue";
9
9
  import PrimeOutputText from "../components/PrimeOutputText.vue";
10
10
  export const primeOutputTextDefinition = createInput(PrimeOutputText, {
11
- props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "isTranslationKey", "html", "onIconPrefixClicked", "onIconSuffixClicked", "convertValue", "maxLength"]
11
+ props: [
12
+ "prefix",
13
+ "suffix",
14
+ "iconPrefix",
15
+ "iconSuffix",
16
+ "isTranslationKey",
17
+ "html",
18
+ "onIconPrefixClicked",
19
+ "onIconSuffixClicked",
20
+ "convertValue",
21
+ "maxLength"
22
+ ]
12
23
  });
13
24
  export const primeOutputDateDefinition = createInput(PrimeOutputDate, {
14
- props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "onIconPrefixClicked", "onIconSuffixClicked"]
25
+ props: [
26
+ "prefix",
27
+ "suffix",
28
+ "iconPrefix",
29
+ "iconSuffix",
30
+ "onIconPrefixClicked",
31
+ "onIconSuffixClicked"
32
+ ]
15
33
  });
16
34
  export const primeOutputNumberDefinition = createInput(PrimeOutputNumber, {
17
- props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "onIconPrefixClicked", "onIconSuffixClicked"],
35
+ props: [
36
+ "prefix",
37
+ "suffix",
38
+ "iconPrefix",
39
+ "iconSuffix",
40
+ "onIconPrefixClicked",
41
+ "onIconSuffixClicked"
42
+ ],
18
43
  family: "PrimeOutput"
19
44
  });
20
45
  export const primeOutputLinkDefinition = createInput(PrimeOutputLink, {
21
- props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "title", "onIconPrefixClicked", "onIconSuffixClicked"],
22
- family: "PrimeOutput"
23
- });
24
- export const primeOutputReferenceDefinition = createInput(PrimeOutputReference, {
25
- props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "reference", "internal", "linkComponentName", "title", "onIconPrefixClicked", "onIconSuffixClicked"],
46
+ props: [
47
+ "prefix",
48
+ "suffix",
49
+ "iconPrefix",
50
+ "iconSuffix",
51
+ "title",
52
+ "onIconPrefixClicked",
53
+ "onIconSuffixClicked"
54
+ ],
26
55
  family: "PrimeOutput"
27
56
  });
57
+ export const primeOutputReferenceDefinition = createInput(
58
+ PrimeOutputReference,
59
+ {
60
+ props: [
61
+ "prefix",
62
+ "suffix",
63
+ "iconPrefix",
64
+ "iconSuffix",
65
+ "reference",
66
+ "internal",
67
+ "linkComponentName",
68
+ "title",
69
+ "onIconPrefixClicked",
70
+ "onIconSuffixClicked"
71
+ ],
72
+ family: "PrimeOutput"
73
+ }
74
+ );
28
75
  export const primeOutputBooleanDefinition = createInput(PrimeOutputBoolean, {
29
- props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "trueValue", "falseValue", "onIconPrefixClicked", "onIconSuffixClicked"],
30
- family: "PrimeOutput"
31
- });
32
- export const primeOutputDurationDefinition = createInput(PrimeOutputDuration, {
33
- props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "onIconPrefixClicked", "onIconSuffixClicked"],
76
+ props: [
77
+ "prefix",
78
+ "suffix",
79
+ "iconPrefix",
80
+ "iconSuffix",
81
+ "trueValue",
82
+ "falseValue",
83
+ "onIconPrefixClicked",
84
+ "onIconSuffixClicked"
85
+ ],
34
86
  family: "PrimeOutput"
35
87
  });
88
+ export const primeOutputDurationDefinition = createInput(
89
+ PrimeOutputDuration,
90
+ {
91
+ props: [
92
+ "prefix",
93
+ "suffix",
94
+ "iconPrefix",
95
+ "iconSuffix",
96
+ "onIconPrefixClicked",
97
+ "onIconSuffixClicked"
98
+ ],
99
+ family: "PrimeOutput"
100
+ }
101
+ );
36
102
  export const primeOutputListDefinition = createInput(PrimeOutputList, {
37
- props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "divider", "itemClass", "dividerClass", "listStyle", "onIconPrefixClicked", "onIconSuffixClicked", "convertValue"],
103
+ props: [
104
+ "prefix",
105
+ "suffix",
106
+ "iconPrefix",
107
+ "iconSuffix",
108
+ "divider",
109
+ "itemClass",
110
+ "dividerClass",
111
+ "listStyle",
112
+ "onIconPrefixClicked",
113
+ "onIconSuffixClicked",
114
+ "optionLabel",
115
+ "options",
116
+ "optionValue",
117
+ "convertValue"
118
+ ],
38
119
  family: "PrimeOutput"
39
120
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sfxcode/formkit-primevue",
3
3
  "type": "module",
4
- "version": "3.3.6",
4
+ "version": "3.3.8",
5
5
  "packageManager": "pnpm@10.30.3+sha512.c961d1e0a2d8e354ecaa5166b822516668b7f44cb5bd95122d590dd81922f606f5473b6d23ec4a5be05e7fcd18e8488d47d978bbe981872f1145d06e9a740017",
6
6
  "author": {
7
7
  "name": "Tom",