@sfxcode/formkit-primevue 2.3.2 → 2.3.3

package/README.md

@@ -22,7 +22,6 @@ PrimeVue 3 is in the prime3 branch.
 
 Add *formkit.config.ts*
 
-
 ```typescript
 import { defaultConfig, plugin } from '@formkit/vue'
 import { primeInputs } from '@sfxcode/formkit-primevue'
@@ -40,7 +39,7 @@ app.use(plugin, defaultConfig({
 Important: use *autoimport: false* if using primevue formkit validation and include or
 exclude not needed components as usual.
 
-Autoimport true prevents elements lookup correctly. 
+Autoimport true prevents elements lookup correctly.
 
 Example:
 ```typescript

package/dist/components/FormKitDataEdit.vue

@@ -0,0 +1,58 @@
+<script setup lang='ts'>
+import FormKitDebug from './FormKitDebug.vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  schema: {
+    type: Object,
+    default: null,
+  },
+  debugData: {
+    type: Boolean,
+    default: false,
+  },
+  debugSchema: {
+    type: Boolean,
+    default: false,
+  },
+  submitLabel: {
+    type: String,
+    default: 'Save',
+  },
+})
+
+const emit = defineEmits(['dataSaved'])
+
+const formSchema = ref(props.schema)
+const formData = ref(props.data)
+
+function handleSave() {
+  emit('dataSaved', props.data)
+}
+</script>
+
+<template>
+  <div class="p-formkit-data-edit">
+    <FormKit
+      id="form"
+      v-model="formData"
+      type="form"
+      :submit-label="submitLabel"
+      :submit-attrs="{
+        inputClass: 'p-button p-component p-formkit-button',
+      }"
+      @submit="handleSave"
+    >
+      <FormKitSchema :schema="formSchema" :data="formData" />
+    </FormKit>
+    <FormKitDebug v-if="debugData" :data="formData" header="Data" />
+    <FormKitDebug v-if="debugSchema" :data="formSchema" header="Schema" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/dist/components/FormKitDataView.vue

@@ -0,0 +1,45 @@
+<script setup lang='ts'>
+import FormKitDebug from './FormKitDebug.vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  schema: {
+    type: Object,
+    default: null,
+  },
+  debugData: {
+    type: Boolean,
+    default: false,
+  },
+  debugSchema: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const formSchema = ref(props.schema)
+const formData = ref(props.data)
+</script>
+
+<template>
+  <div class="p-formkit-data-view">
+    <FormKit
+      v-model="formData"
+      type="form"
+      :submit-attrs="{
+        style: 'display: none;',
+      }"
+    >
+      <FormKitSchema :schema="formSchema" :data="formData" />
+    </FormKit>
+    <FormKitDebug v-if="debugData" :data="formData" header="Data" />
+    <FormKitDebug v-if="debugSchema" :data="formSchema" header="Schema" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/dist/components/FormKitDebug.vue

@@ -0,0 +1,25 @@
+<script setup lang='ts'>
+defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  header: {
+    type: String,
+    default: 'Debug',
+  },
+})
+</script>
+
+<template>
+  <div class="p-formkit-data-debug">
+    <h3>{{ header }}</h3>
+    <slot />
+    <pre v-if="data" class="text-xs">{{ data }}</pre>
+    <span v-else class="text-xs">No Data available</span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/dist/components/PrimeInputText.vue

@@ -1,11 +1,11 @@
 <script setup lang='ts'>
-import { type PropType, computed } from 'vue'
+import type { PropType } from 'vue'
 import type { FormKitFrameworkContext } from '@formkit/core'
 
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import type { InputTextProps } from 'primevue/inputtext'
-import { useFormKitInput } from '../composables'
+import { useFormKitIcon, useFormKitInput } from '../composables'
 
 export interface FormKitPrimeInputTextProps {
   pt?: InputTextProps['pt']
@@ -24,27 +24,13 @@ const props = defineProps({
 })
 
 const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
-
-const hasIcon = computed(() => {
-  if (props.context?.icon && props.context?.icon.length > 0)
-    return true
-
-  return props.context?.attrs?.icon && props.context?.attrs?.icon.length > 0
-})
-
-const icon = computed(() => {
-  return props.context?.icon ?? props.context?.attrs?.icon
-})
-
-const iconPosition = computed(() => {
-  return props.context?.attrs?.iconPosition ?? undefined
-})
+const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
 </script>
 
 <template>
   <div :class="wrapperClass">
-    <IconField v-if="hasIcon" :icon-position="iconPosition">
-      <InputIcon :class="icon" />
+    <IconField>
+      <InputIcon v-if="hasIcon && iconPosition === 'left'" :class="icon" />
       <InputText
         :id="context.id"
         v-model="context._value"
@@ -63,25 +49,7 @@ const iconPosition = computed(() => {
         @input="handleInput"
         @blur="handleBlur"
       />
+      <InputIcon v-if="hasIcon && iconPosition === 'right'" :class="icon" />
     </IconField>
-    <InputText
-      v-else
-      :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"
-      :placeholder="context.placeholder"
-      :pt="context.pt"
-      :pt-options="context.ptOptions"
-      :unstyled="context.unstyled ?? false"
-      @input="handleInput"
-      @blur="handleBlur"
-    />
   </div>
 </template>

package/dist/components/PrimeOutputBoolean.vue

@@ -0,0 +1,28 @@
+<script setup lang='ts'>
+import { useFormKitIcon, useFormKitOutput } from '../composables'
+
+const props = defineProps({
+  context: Object,
+})
+const { wrapperClass } = useFormKitOutput(props.context, 'p-output-boolean')
+const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+
+const { t } = useI18n()
+
+const translated = computed(() => {
+  if (props.context?._value)
+    return t('formkit.prime.true', 'true')
+  else
+    return t('formkit.prime.false', 'false')
+})
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      {{ translated }}
+    </span>
+    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+  </div>
+</template>

package/dist/components/PrimeOutputDate.vue

@@ -0,0 +1,38 @@
+<script setup lang='ts'>
+import { useFormKitIcon, useFormKitOutput } from '../composables'
+
+const props = defineProps({
+  context: Object,
+})
+const { wrapperClass } = useFormKitOutput(props.context, 'p-output-date')
+const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+
+const { d } = useI18n()
+
+const converted = computed(() => {
+  if (props?.context?._value) {
+    let result = ''
+    const format = props?.context?.attrs?.value?.format ? props?.context?.attrs.value.format : 'short'
+    try {
+      result = d(props?.context?._value, format)
+    }
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    catch (e) {
+    }
+    return result
+  }
+  else {
+    return ''
+  }
+})
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      {{ converted }}
+    </span>
+    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+  </div>
+</template>

package/dist/components/PrimeOutputDuration.vue

@@ -0,0 +1,22 @@
+<script setup lang='ts'>
+import { useFormKitIcon, useFormKitOutput, useOutputDuration } from '../composables'
+
+const props = defineProps({
+  context: Object,
+})
+
+const { wrapperClass } = useFormKitOutput(props.context, 'p-output-duration')
+const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+
+const { formattedDuration } = useOutputDuration()
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      {{ formattedDuration(context?._value) }}
+    </span>
+    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+  </div>
+</template>

package/dist/components/PrimeOutputLink.vue

@@ -0,0 +1,28 @@
+<script setup lang='ts'>
+import { computed } from 'vue'
+import { useFormKitIcon, useFormKitOutput } from '../composables'
+
+const props = defineProps({
+  context: Object,
+})
+const { wrapperClass } = useFormKitOutput(props.context, 'p-output-link')
+const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+
+const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.context?._value : `https://${props.context?._value}`)
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <a
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      :class="context?.attrs?.class"
+      :href="url"
+      :target="context?.attrs?.target ?? '_new'"
+    >
+      {{ context?._value }}
+    </a>
+    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+  </div>
+</template>

package/dist/components/PrimeOutputList.vue

@@ -0,0 +1,29 @@
+<script setup lang='ts'>
+import { useFormKitIcon, useFormKitOutput } from '../composables'
+
+const props = defineProps({
+  context: Object,
+})
+const { wrapperClass } = useFormKitOutput(props.context, 'p-output-list')
+const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+
+function listValue(index: number, value: string): string {
+  const divider = props.context?.attrs?.divider || ', '
+  if (index === 0)
+    return value
+  else
+    return `${divider}${value}`
+}
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      <template v-for="(value, index) of context?._value" :key="index">
+        <span class="p-output-list-item">{{ listValue(index, value) }}</span>
+      </template>
+    </span>
+    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+  </div>
+</template>

package/dist/components/PrimeOutputNumber.vue

@@ -0,0 +1,38 @@
+<script setup lang='ts'>
+import { useFormKitIcon, useFormKitOutput } from '../composables'
+
+const props = defineProps({
+  context: Object,
+})
+const { wrapperClass } = useFormKitOutput(props.context, 'p-output-number')
+const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+
+const { n } = useI18n()
+
+const converted = computed(() => {
+  if (props?.context?._value) {
+    let result = ''
+    const format = props?.context?.attrs?.format ? props?.context?.attrs?.format : 'short'
+    try {
+      result = n(props?.context?._value, format)
+    }
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    catch (e) {
+    }
+    return result
+  }
+  else {
+    return ''
+  }
+})
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      {{ converted }}
+    </span>
+    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+  </div>
+</template>

package/dist/components/PrimeOutputText.vue

@@ -0,0 +1,23 @@
+<script setup lang='ts'>
+import { useFormKitIcon, useFormKitOutput } from '../composables'
+
+const props = defineProps({
+  context: Object,
+})
+const { wrapperClass } = useFormKitOutput(props.context, 'p-output-text')
+const { hasIcon, icon, iconPosition } = useFormKitIcon(props.context)
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <i v-if="hasIcon && iconPosition === 'left'" :class="icon" class="p-formkit-icon-left" />
+    <span
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      :class="context?.attrs?.class"
+    >
+      {{ context?._value }}
+    </span>
+    <i v-if="hasIcon && iconPosition === 'right'" :class="icon" class="p-formkit-icon-right" />
+  </div>
+</template>

package/dist/components/index.d.ts

@@ -20,4 +20,7 @@ import PrimeSlider from './PrimeSlider.vue';
 import PrimeToggleButton from './PrimeToggleButton.vue';
 import PrimeTreeSelect from './PrimeTreeSelect.vue';
 import PrimeSelectButton from './PrimeSelectButton.vue';
-export { PrimeAutoComplete, PrimeDatePicker, PrimeCascadeSelect, PrimeCheckbox, PrimeColorPicker, PrimeSelect, PrimeEditor, PrimeInputMask, PrimeInputNumber, PrimeInputSwitch, PrimeInputText, PrimeTextarea, PrimeKnob, PrimeMultiSelect, PrimeListbox, PrimePassword, PrimeRadioButton, PrimeRating, PrimeSlider, PrimeToggleButton, PrimeTreeSelect, PrimeSelectButton, };
+import FormKitDataDebug from './FormKitDebug.vue';
+import FormKitDataView from './FormKitDataView.vue';
+import FormKitDataEdit from './FormKitDataEdit.vue';
+export { FormKitDataDebug, FormKitDataEdit, FormKitDataView, PrimeAutoComplete, PrimeDatePicker, PrimeCascadeSelect, PrimeCheckbox, PrimeColorPicker, PrimeSelect, PrimeEditor, PrimeInputMask, PrimeInputNumber, PrimeInputSwitch, PrimeInputText, PrimeTextarea, PrimeKnob, PrimeMultiSelect, PrimeListbox, PrimePassword, PrimeRadioButton, PrimeRating, PrimeSlider, PrimeToggleButton, PrimeTreeSelect, PrimeSelectButton, };

package/dist/components/index.js

@@ -3,6 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "FormKitDataDebug", {
+  enumerable: true,
+  get: function () {
+    return _FormKitDebug.default;
+  }
+});
+Object.defineProperty(exports, "FormKitDataEdit", {
+  enumerable: true,
+  get: function () {
+    return _FormKitDataEdit.default;
+  }
+});
+Object.defineProperty(exports, "FormKitDataView", {
+  enumerable: true,
+  get: function () {
+    return _FormKitDataView.default;
+  }
+});
 Object.defineProperty(exports, "PrimeAutoComplete", {
   enumerable: true,
   get: function () {
@@ -157,4 +175,7 @@ var _PrimeSlider = _interopRequireDefault(require("./PrimeSlider.vue"));
 var _PrimeToggleButton = _interopRequireDefault(require("./PrimeToggleButton.vue"));
 var _PrimeTreeSelect = _interopRequireDefault(require("./PrimeTreeSelect.vue"));
 var _PrimeSelectButton = _interopRequireDefault(require("./PrimeSelectButton.vue"));
+var _FormKitDebug = _interopRequireDefault(require("./FormKitDebug.vue"));
+var _FormKitDataView = _interopRequireDefault(require("./FormKitDataView.vue"));
+var _FormKitDataEdit = _interopRequireDefault(require("./FormKitDataEdit.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/index.mjs

@@ -20,7 +20,13 @@ import PrimeSlider from "./PrimeSlider.vue";
 import PrimeToggleButton from "./PrimeToggleButton.vue";
 import PrimeTreeSelect from "./PrimeTreeSelect.vue";
 import PrimeSelectButton from "./PrimeSelectButton.vue";
+import FormKitDataDebug from "./FormKitDebug.vue";
+import FormKitDataView from "./FormKitDataView.vue";
+import FormKitDataEdit from "./FormKitDataEdit.vue";
 export {
+  FormKitDataDebug,
+  FormKitDataEdit,
+  FormKitDataView,
   PrimeAutoComplete,
   PrimeDatePicker,
   PrimeCascadeSelect,

package/dist/composables/index.d.ts

@@ -1,5 +1,8 @@
+import { useFormKitIcon } from './useFormKitIcon';
 import { useFormKitInput } from './useFormKitInput';
+import { useFormKitOutput } from './useFormKitOutput';
 import { useFormKitSchema } from './useFormKitSchema';
 import { useInputEditor } from './useInputEditor';
 import { useInputEditorSchema } from './useInputEditorSchema';
-export { useFormKitInput, useFormKitSchema, useInputEditor, useInputEditorSchema, };
+import { useOutputDuration } from './useOutputDuration';
+export { useFormKitIcon, useFormKitInput, useFormKitOutput, useFormKitSchema, useInputEditor, useInputEditorSchema, useOutputDuration, };

package/dist/composables/index.js

@@ -3,12 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useFormKitIcon", {
+  enumerable: true,
+  get: function () {
+    return _useFormKitIcon.useFormKitIcon;
+  }
+});
 Object.defineProperty(exports, "useFormKitInput", {
   enumerable: true,
   get: function () {
     return _useFormKitInput.useFormKitInput;
   }
 });
+Object.defineProperty(exports, "useFormKitOutput", {
+  enumerable: true,
+  get: function () {
+    return _useFormKitOutput.useFormKitOutput;
+  }
+});
 Object.defineProperty(exports, "useFormKitSchema", {
   enumerable: true,
   get: function () {
@@ -27,7 +39,16 @@ Object.defineProperty(exports, "useInputEditorSchema", {
     return _useInputEditorSchema.useInputEditorSchema;
   }
 });
+Object.defineProperty(exports, "useOutputDuration", {
+  enumerable: true,
+  get: function () {
+    return _useOutputDuration.useOutputDuration;
+  }
+});
+var _useFormKitIcon = require("./useFormKitIcon");
 var _useFormKitInput = require("./useFormKitInput");
+var _useFormKitOutput = require("./useFormKitOutput");
 var _useFormKitSchema = require("./useFormKitSchema");
 var _useInputEditor = require("./useInputEditor");
-var _useInputEditorSchema = require("./useInputEditorSchema");
+var _useInputEditorSchema = require("./useInputEditorSchema");
+var _useOutputDuration = require("./useOutputDuration");

package/dist/composables/index.mjs

@@ -1,10 +1,16 @@
+import { useFormKitIcon } from "./useFormKitIcon.mjs";
 import { useFormKitInput } from "./useFormKitInput.mjs";
+import { useFormKitOutput } from "./useFormKitOutput.mjs";
 import { useFormKitSchema } from "./useFormKitSchema.mjs";
 import { useInputEditor } from "./useInputEditor.mjs";
 import { useInputEditorSchema } from "./useInputEditorSchema.mjs";
+import { useOutputDuration } from "./useOutputDuration.mjs";
 export {
+  useFormKitIcon,
   useFormKitInput,
+  useFormKitOutput,
   useFormKitSchema,
   useInputEditor,
-  useInputEditorSchema
+  useInputEditorSchema,
+  useOutputDuration
 };

package/dist/composables/useFormKitIcon.d.ts

@@ -0,0 +1,5 @@
+export declare function useFormKitIcon(context: any): {
+    hasIcon: import("vue").ComputedRef<any>;
+    icon: import("vue").ComputedRef<any>;
+    iconPosition: import("vue").ComputedRef<any>;
+};

package/dist/composables/useFormKitIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormKitIcon = useFormKitIcon;
+var _vue = require("vue");
+function useFormKitIcon(context) {
+  const hasIcon = (0, _vue.computed)(() => {
+    if (context?.icon && context?.icon.length > 0) return true;
+    return context?.attrs?.icon && context?.attrs?.icon.length > 0;
+  });
+  const icon = (0, _vue.computed)(() => {
+    return context?.icon ?? context?.attrs?.icon;
+  });
+  const iconPosition = (0, _vue.computed)(() => {
+    return context?.iconPosition ?? context?.attrs?.iconPosition;
+  });
+  return {
+    hasIcon,
+    icon,
+    iconPosition
+  };
+}

package/dist/composables/useFormKitIcon.mjs

@@ -0,0 +1,15 @@
+import { computed } from "vue";
+export function useFormKitIcon(context) {
+  const hasIcon = computed(() => {
+    if (context?.icon && context?.icon.length > 0)
+      return true;
+    return context?.attrs?.icon && context?.attrs?.icon.length > 0;
+  });
+  const icon = computed(() => {
+    return context?.icon ?? context?.attrs?.icon;
+  });
+  const iconPosition = computed(() => {
+    return context?.iconPosition ?? context?.attrs?.iconPosition;
+  });
+  return { hasIcon, icon, iconPosition };
+}

package/dist/composables/useFormKitOutput.d.ts

@@ -0,0 +1,3 @@
+export declare function useFormKitOutput(context: any, componentClass?: string): {
+    wrapperClass: import("vue").ComputedRef<string>;
+};

package/dist/composables/useFormKitOutput.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormKitOutput = useFormKitOutput;
+var _vue = require("vue");
+function useFormKitOutput(context, componentClass = "") {
+  const wrapperClass = (0, _vue.computed)(() => {
+    return context?.wrapperClass ? `p-formkit ${componentClass} ${context?.wrapperClass}` : `p-formkit ${componentClass}`;
+  });
+  return {
+    wrapperClass
+  };
+}

package/dist/composables/useFormKitOutput.mjs

@@ -0,0 +1,7 @@
+import { computed } from "vue";
+export function useFormKitOutput(context, componentClass = "") {
+  const wrapperClass = computed(() => {
+    return context?.wrapperClass ? `p-formkit ${componentClass} ${context?.wrapperClass}` : `p-formkit ${componentClass}`;
+  });
+  return { wrapperClass };
+}

package/dist/composables/useOutputDuration.d.ts

@@ -0,0 +1,4 @@
+export declare function useOutputDuration(): {
+    durationToMinutes: (duration: string) => number;
+    formattedDuration: (duration: string) => string;
+};