@sfxcode/formkit-openvue 0.0.0-stage → 0.9.0

package/dist/components/FormInputNumber.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { watch } from "vue";
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, modelValue } = useFormKitInput(props.context);
+function handleBlur(e) {
+	props.context?.handlers.blur(e.originalEvent);
+}
+function handleInput(_) {
+	if (typeof _.value === "number" || _.value === null) props.context?.node.input(_.value);
+}
+function roundToDecimals(value, decimals) {
+	const factor = 10 ** decimals;
+	return Math.round(value * factor) / factor;
+}
+watch(() => props.context._value, (newValue) => {
+	// Only update if the value is different
+	if (newValue !== props.context.node.value && typeof newValue === "number") {
+		if (props.context.maxFractionDigits && props.context.maxFractionDigits > 0) {
+			// fix floating-point precision issues
+			props.context?.node.input(roundToDecimals(newValue, props.context.maxFractionDigits));
+		} else {
+			props.context?.node.input(newValue);
+		}
+	}
+});
+</script>
+
+<template>
+  <div class="p-formkit">
+    <InputNumber
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="context.id"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :input-style="context?.attrs.style"
+      :input-class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :placeholder="context.placeholder"
+      :use-grouping="context.useGrouping ?? true"
+      :min="context.min ?? undefined"
+      :max="context.max ?? undefined"
+      :min-fraction-digits="context.minFractionDigits ?? undefined"
+      :max-fraction-digits="context.maxFractionDigits ?? undefined"
+      :locale="context.locale ?? undefined"
+      :mode="context.mode ?? undefined"
+      :currency="context.currency ?? undefined"
+      :prefix="context.prefix ?? undefined"
+      :suffix="context.suffix ?? undefined"
+      :show-buttons="context.showButtons ?? undefined"
+      :button-layout="context.buttonLayout ?? 'stacked'"
+      :step="context.step ?? undefined"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @input="handleInput"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </InputNumber>
+  </div>
+</template>

package/dist/components/FormInputOtp.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleInput, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <InputOtp
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :length="context.length"
+      :variant="context.variant"
+      :mask="context.mask"
+      :integer-only="context.integerOnly"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleInput"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </InputOtp>
+  </div>
+</template>

package/dist/components/FormInputText.vue

@@ -0,0 +1,63 @@
+<script setup>
+import IconField from "openvue/iconfield";
+import InputIcon from "openvue/inputicon";
+import { useFormKitInput, useFormKitSection } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <IconField v-if="hasPrefixIcon || hasSuffixIcon">
+      <InputIcon v-if="hasPrefixIcon" :class="context?.iconPrefix" />
+      <InputText
+        :id="context.id"
+        v-model="modelValue"
+        v-bind="context?.attrs"
+        :type="context?.attrs?.inputType ?? 'text'"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs.readonly ?? false"
+        :style="context?.attrs?.style"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
+        :tabindex="context?.attrs.tabindex"
+        :aria-label="context?.attrs.ariaLabel"
+        :aria-labelledby="context?.attrs.ariaLabelledby"
+        :size="context?.size ?? undefined"
+        :placeholder="context.placeholder"
+        :pt="context.pt"
+        :pt-options="context.ptOptions"
+        :unstyled="unstyled"
+        @input="handleInput"
+        @blur="handleBlur"
+      />
+      <InputIcon v-if="hasSuffixIcon" :class="context?.iconSuffix" />
+    </IconField>
+    <InputText
+      v-if="!hasPrefixIcon && !hasSuffixIcon"
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :type="context?.inputType ?? 'text'"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :placeholder="context.placeholder"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @input="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/FormKitDataDebug.vue

@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+	data: {
+		type: [
+			Object,
+			Array,
+			String,
+			Number,
+			Boolean
+		],
+		default: null
+	},
+	header: {
+		type: String,
+		default: "Debug"
+	}
+});
+</script>
+
+<template>
+  <Fieldset class="p-formkit-data-debug" :legend="header" :toggleable="true" :collapsed="true">
+    <pre v-if="data">{{ data }}</pre>
+    <span v-else>No Data available</span>
+  </Fieldset>
+</template>

package/dist/components/FormKitDataEdit.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { reset } from "@formkit/core";
+import { FormKit, FormKitMessages, FormKitSchema } from "@formkit/vue";
+import { ref, watch } from "vue";
+import FormKitDataDebug from "./FormKitDataDebug.vue";
+const props = defineProps({
+	id: {
+		type: String,
+		default: "formkit_form"
+	},
+	data: {
+		type: Object,
+		default: null
+	},
+	schema: {
+		type: Object,
+		default: null
+	},
+	formClass: {
+		type: String,
+		default: ""
+	},
+	actionsClass: {
+		type: String,
+		default: ""
+	},
+	submitSeverity: {
+		type: String,
+		default: ""
+	},
+	submitClass: {
+		type: String,
+		default: ""
+	},
+	submitLabel: {
+		type: String,
+		default: "Save"
+	},
+	submitIcon: {
+		type: String,
+		default: ""
+	},
+	showReset: {
+		type: Boolean,
+		default: false
+	},
+	resetSeverity: {
+		type: String,
+		default: "danger"
+	},
+	resetLabel: {
+		type: String,
+		default: "Reset"
+	},
+	resetClass: {
+		type: String,
+		default: ""
+	},
+	resetIcon: {
+		type: String,
+		default: ""
+	},
+	debugData: {
+		type: Boolean,
+		default: false
+	},
+	debugSchema: {
+		type: Boolean,
+		default: false
+	}
+});
+const emit = defineEmits(["dataSaved", "onReset"]);
+const formData = defineModel({ type: null });
+if (props.data) {
+	formData.value = props.data;
+}
+const formSchema = ref(props.schema);
+// Watch for changes to props and update internal refs
+watch(() => props.schema, (newSchema) => {
+	formSchema.value = newSchema;
+}, { deep: true });
+watch(() => props.data, (newData) => {
+	if (newData && newData !== formData.value) {
+		formData.value = newData;
+	}
+}, { deep: true });
+function handleSave() {
+	emit("dataSaved", formData.value);
+}
+function handleReset() {
+	reset(props.id);
+	emit("onReset");
+}
+</script>
+
+<template>
+  <FormKit
+    :id="id"
+    v-model="formData"
+    :actions-class="actionsClass"
+    :form-class="`p-formkit-data-edit ${formClass}`"
+    type="form"
+    @submit="handleSave"
+  >
+    <template #default>
+      <FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
+      <slot />
+      <FormKitDataDebug v-if="debugData" :data="formData" header="Debug Mode - Data" />
+      <FormKitDataDebug v-if="debugSchema" :data="formSchema" header="Debug Mode - Schema" />
+    </template>
+    <template #messages>
+      <slot name="messages">
+        <FormKitMessages class="p-formkit-data-edit-messages" />
+      </slot>
+    </template>
+    <template #submit>
+      <slot name="submit">
+        <Button :icon="submitIcon" type="submit" :label="submitLabel" :class="submitClass" :severity="submitSeverity" @submit="handleSave" />
+        <Button v-if="showReset" type="reset" :icon="resetIcon" :label="resetLabel" :class="resetClass" :severity="resetSeverity" @click="handleReset" />
+      </slot>
+    </template>
+  </FormKit>
+</template>

package/dist/components/FormKitDataView.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { FormKit, FormKitSchema } from "@formkit/vue";
+import { ref, watch } from "vue";
+import FormKitDataDebug from "./FormKitDataDebug.vue";
+const props = defineProps({
+	data: {
+		type: Object,
+		default: null
+	},
+	schema: {
+		type: Object,
+		default: null
+	},
+	formClass: {
+		type: String,
+		default: ""
+	},
+	debugData: {
+		type: Boolean,
+		default: false
+	},
+	debugSchema: {
+		type: Boolean,
+		default: false
+	}
+});
+const formSchema = ref(props.schema);
+const formData = defineModel({ type: null });
+// Watch for changes to props and update internal refs
+watch(() => props.schema, (newSchema) => {
+	formSchema.value = newSchema;
+}, { deep: true });
+watch(() => props.data, (newData) => {
+	if (newData && newData !== formData.value) {
+		formData.value = newData;
+	}
+}, { deep: true });
+if (props.data) {
+	formData.value = props.data;
+}
+</script>
+
+<template>
+  <FormKit
+    v-model="formData"
+    :actions="false"
+    :form-class="`p-formkit-data-view ${formClass}`"
+    class="p-formkit-data-view"
+    type="form"
+  >
+    <FormKitSchema v-if="schema" :schema="formSchema" :data="formData" />
+    <slot />
+    <FormKitDataDebug v-if="debugData" :data="formData" header="Debug Mode - Data" />
+    <FormKitDataDebug v-if="debugSchema" :data="formSchema" header="Debug Mode - Schema" />
+  </FormKit>
+</template>

package/dist/components/FormKitIcon.vue

@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+	iconClass: {
+		type: String,
+		default: ""
+	},
+	onClick: {
+		type: Function,
+		default: undefined
+	},
+	position: {
+		type: String,
+		required: true,
+		validator: (val) => ["prefix", "suffix"].includes(val)
+	},
+	tooltip: { type: String }
+});
+</script>
+
+<template>
+  <i v-if="tooltip && tooltip?.length > 0" v-tooltip.bottom="tooltip" :class="[`formkit-${position}-icon`, iconClass]" @click="onClick" />
+  <i v-else :class="[`formkit-${position}-icon`, iconClass]" @click="onClick" />
+</template>

package/dist/components/FormKitPrefix.vue

@@ -0,0 +1,9 @@
+<script setup>
+defineProps({ prefix: String });
+</script>
+
+<template>
+  <span class="formkit-prefix">
+    {{ prefix }}
+  </span>
+</template>

package/dist/components/FormKitSuffix.vue

@@ -0,0 +1,9 @@
+<script setup>
+defineProps({ suffix: String });
+</script>
+
+<template>
+  <span class="formkit-suffix">
+    {{ suffix }}
+  </span>
+</template>

package/dist/components/FormKnob.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { unstyled, isInvalid, modelValue } = useFormKitInput(props.context);
+function handleInput(e) {
+	props.context?.node.input(e);
+	props.context?.handlers.blur(e);
+}
+function updateValue(n) {
+	props.context?.node.input(n);
+}
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Knob
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :min="context.min ?? 0"
+      :max="context.max ?? 100"
+      :step="context.step ?? undefined"
+      :size="context.size ?? 100"
+      :stroke-width="context.strokeWidth ?? 14"
+      :show-value="context.showValue ?? true"
+      :value-color="context.valueColor ?? undefined"
+      :range-color="context.rangeColor ?? undefined"
+      :text-color="context.textColor ?? undefined"
+      :value-template="context.valueTemplate ?? undefined"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleInput"
+      @update:model-value="updateValue"
+    />
+  </div>
+</template>