@sfxcode/formkit-primevue 3.3.1 → 3.3.4

package/dist/components/FormKitDataDebug.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  data: {
+    type: Object,
+    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,133 @@
+<script setup>
+import { reset } from "@formkit/core";
+import { FormKit, FormKitMessages, FormKitSchema } from "@formkit/vue";
+import { ref } 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);
+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 as object"
+        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,51 @@
+<script setup>
+import { FormKit, FormKitSchema } from "@formkit/vue";
+import { ref } 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 });
+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 as object"
+      header="Debug Mode - Schema"
+    />
+  </FormKit>
+</template>

package/dist/components/FormKitIcon.vue

@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+  iconClass: {
+    type: String,
+    default: ""
+  },
+  onClick: { type: Function, default: void 0 },
+  position: {
+    type: String,
+    required: true,
+    validator: (val) => ["prefix", "suffix"].includes(val)
+  }
+});
+</script>
+
+<template>
+  <i :class="[`formkit-${position}-icon`, iconClass]" @click="onClick" />
+</template>

package/dist/components/FormKitPrefix.vue

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

package/dist/components/FormKitSuffix.vue

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

package/dist/components/PrimeAutoComplete.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { ref } from "vue";
+import { useFormKitInput } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+const suggestions = ref(["", {}]);
+suggestions.value = [];
+const loading = ref(false);
+async function search(event) {
+  if (props.context?.options && props.context?.optionLabel) {
+    suggestions.value = props.context.options.filter((option) => {
+      return option[`${props.context.optionLabel}`].toString().toLowerCase().includes(event.query.toLowerCase());
+    });
+  } else {
+    loading.value = true;
+    try {
+      suggestions.value = await props.context?.attrs.complete(event.query);
+    } catch (error) {
+      console.error("Error fetching suggestions:", error);
+      suggestions.value = [];
+    } finally {
+      loading.value = false;
+    }
+  }
+}
+function handlePaste(event) {
+  if (!props.context?.multiple) return;
+  const clipboardData = event.clipboardData;
+  if (!clipboardData) return;
+  const pastedText = clipboardData.getData("text");
+  const separators = Array.isArray(props.context?.separators) && props.context.separators.length > 0 ? props.context.separators : [","];
+  const regex = new RegExp(
+    `[${separators.map((s) => s.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")).join("")}]`
+  );
+  if (pastedText && regex.test(pastedText)) {
+    event.preventDefault();
+    const items = pastedText.split(regex).map((item) => item.trim()).filter((item) => item.length > 0);
+    if (Array.isArray(modelValue.value)) {
+      modelValue.value = [...modelValue.value, ...items];
+    } else {
+      modelValue.value = items;
+    }
+  } else if (pastedText) {
+    event.preventDefault();
+    if (Array.isArray(modelValue.value)) {
+      modelValue.value = [...modelValue.value, pastedText.trim()];
+    } else {
+      modelValue.value = [pastedText.trim()];
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="p-formkit">
+    <AutoComplete
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :suggestions="suggestions"
+      :option-label="context?.optionLabel"
+      :dropdown="context?.dropdown ?? false"
+      :multiple="context?.multiple ?? false"
+      :typeahead="context?.typeahead ?? true"
+      :min-length="context?.minLength ?? undefined"
+      :placeholder="context?.placeholder ?? undefined"
+      :fluid="context?.fluid ?? undefined"
+      :pt="context?.pt"
+      :pt-options="context?.ptOptions"
+      :unstyled="unstyled"
+      :loading="loading"
+      @keydown.enter.prevent
+      @complete="search"
+      @change="handleInput"
+      @blur="handleBlur"
+      @paste="handlePaste"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </AutoComplete>
+  </div>
+</template>

package/dist/components/PrimeCascadeSelect.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <CascadeSelect
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :options="context?.options"
+      :option-label="context?.optionLabel"
+      :option-value="context.optionValue"
+      :option-group-label="context.optionGroupLabel"
+      :option-group-children="context.optionGroupChildren"
+      :placeholder="context.placeholder"
+      :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>
+    </CascadeSelect>
+  </div>
+</template>

package/dist/components/PrimeCheckbox.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { useFormKitInput, useFormKitSection } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context);
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+const generatedId = generateId();
+</script>
+
+<template>
+  <div class="p-formkit">
+    <label v-if="hasPrefix" :for="generatedId" class="formkit-prefix">
+      {{ context?.prefix }}
+    </label>
+    <Checkbox
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="generatedId"
+      :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"
+      :indeterminate="context.indeterminate ?? undefined"
+      :binary="context.binary ?? true"
+      :variant="context.variant ?? 'outlined'"
+      :true-value="context.trueValue ?? undefined"
+      :false-value="context.falseValue ?? undefined"
+      :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>
+    </Checkbox>
+    <label v-if="hasSuffix" :for="generatedId" class="formkit-suffix">
+      {{ context?.suffix }}
+    </label>
+  </div>
+</template>

package/dist/components/PrimeColorPicker.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, handleChange, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <ColorPicker
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :panel-class="context?.attrs.class"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :default-color="context.defaultColor ?? 'ff0000'"
+      :inline="context.inline ?? false"
+      :format="context.format"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleChange"
+    />
+  </div>
+</template>

package/dist/components/PrimeDatePicker.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput, modelValue } = useFormKitInput(
+  props.context
+);
+function handleBlur(e) {
+  props.context?.handlers.blur(e.originalEvent);
+}
+function handleClearClick() {
+  props.context?.node.input(null);
+}
+function handleSelect(e) {
+  if (props.context?.selectionMode === "range" || props.context?.selectionMode === "multiple") {
+    props.context?.node.input(props.context._value);
+  } else {
+    props.context?.node.input(e);
+  }
+}
+</script>
+
+<template>
+  <div class="p-formkit">
+    <DatePicker
+      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"
+      :date-format="context?.dateFormat"
+      :placeholder="context?.placeholder"
+      :selection-mode="context?.selectionMode ?? 'single'"
+      :inline="context?.inline ?? false"
+      :show-other-months="context?.showOtherMonths ?? true"
+      :select-other-months="context?.selectOtherMonths ?? false"
+      :icon="context?.icon"
+      :show-icon="context.showIcon"
+      :previous-icon="context?.previousIcon"
+      :next-icon="context?.nextIcon"
+      :increment-icon="context?.incrementIcon"
+      :decrement-icon="context?.decrementIcon"
+      :number-of-months="context?.numberOfMonths ?? 1"
+      :responsive-options="context?.responsiveOptions"
+      :view="context?.view ?? 'date'"
+      :touch-u-i="context?.touchUI ?? false"
+      :min-date="context?.minDate"
+      :max-date="context?.maxDate"
+      :disabled-dates="context?.disabledDates"
+      :disabled-days="context?.disabledDays"
+      :max-date-count="context?.maxDateCount"
+      :show-on-focus="context?.showOnFocus ?? true"
+      :auto-z-index="context?.autoZIndex ?? true"
+      :base-z-index="context?.baseZIndex ?? 0"
+      :show-button-bar="context?.showButtonBar ?? false"
+      :show-time="context?.showTime ?? false"
+      :time-only="context?.timeOnly ?? false"
+      :short-year-cutoff="context?.shortYearCutoff ?? '+10'"
+      :hour-format="context?.hourFormat ?? '24'"
+      :step-hour="context?.stepHour ?? 1"
+      :step-minute="context?.stepMinute ?? 1"
+      :step-second="context?.stepSecond ?? 1"
+      :show-seconds="context?.showSeconds ?? false"
+      :hide-on-date-time-select="context?.hideOnDateTimeSelect ?? false"
+      :hide-on-range-selection="context?.hideOnRangeSelection ?? false"
+      :time-separator="context?.timeSeparator ?? ':'"
+      :show-week="context?.showWeek ?? false"
+      :manual-input="context?.manualInput ?? true"
+      :append-to="context?.appendTo ?? 'body'"
+      :panel-style="context?.panelStyle"
+      :panel-class="context?.panelClass"
+      :pt="context?.pt"
+      :pt-options="context?.ptOptions"
+      :unstyled="unstyled"
+      :update-model-type="context?.updateModelType ?? 'date'"
+      @date-select="handleSelect"
+      @blur="handleBlur"
+      @clear-click="handleClearClick"
+      @value-change="handleInput"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </DatePicker>
+  </div>
+</template>

package/dist/components/PrimeInputMask.vue

@@ -0,0 +1,69 @@
+<script setup>
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import { useFormKitInput, useFormKitSection } from "../composables/index.ts";
+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" />
+      <InputMask
+        :id="context.id"
+        v-model="modelValue"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs.readonly ?? false"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
+        :tabindex="context?.attrs.tabindex"
+        :aria-label="context?.attrs.ariaLabel"
+        :aria-labelledby="context?.attrs.ariaLabelledby"
+        :size="context?.size ?? undefined"
+        :mask="context.mask ?? undefined"
+        :slot-char="context.slotChar ?? '_'"
+        :auto-clear="context.autoClear ?? true"
+        :unmask="context.unmask ?? false"
+        :pt="context.pt"
+        :variant="context.variant"
+        :pt-options="context.ptOptions"
+        :unstyled="unstyled"
+        @update:model-value="handleInput"
+        @blur="handleBlur"
+      />
+      <InputIcon v-if="hasSuffixIcon" :class="context?.iconSuffix" />
+    </IconField>
+    <InputMask
+      v-if="!hasPrefixIcon && !hasSuffixIcon"
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :mask="context.mask ?? undefined"
+      :slot-char="context.slotChar ?? '_'"
+      :auto-clear="context.autoClear ?? true"
+      :unmask="context.unmask ?? false"
+      :pt="context.pt"
+      :variant="context.variant"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @update:model-value="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>