@sfxcode/formkit-primevue 3.3.1 → 3.3.4

package/dist/components/PrimeInputNumber.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { watch } from "vue";
+import { useFormKitInput } from "../composables/index.ts";
+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) => {
+    if (newValue !== props.context.node.value && typeof newValue === "number") {
+      if (props.context.maxFractionDigits && props.context.maxFractionDigits > 0) {
+        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/PrimeInputOtp.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
+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/PrimeInputText.vue

@@ -0,0 +1,65 @@
+<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" />
+      <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/PrimeKnob.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
+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>

package/dist/components/PrimeListbox.vue

@@ -0,0 +1,54 @@
+<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">
+    <Listbox
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :list-style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :options="context?.options"
+      :option-label="context.optionLabel"
+      :option-value="context.optionValue"
+      :option-disabled="context.optionDisabled"
+      :option-group-label="context.optionGroupLabel"
+      :option-group-children="context.optionGroupChildren"
+      :multiple="context.multiple ?? false"
+      :filter="context.filter ?? false"
+      :filter-icon="context.filterIcon"
+      :filter-placeholder="context.filterPlaceholder"
+      :filter-locale="context.filterLocale"
+      :filter-match-mode="context.filterMatchMode"
+      :auto-option-focus="context.autoOptionFocus ?? true"
+      :select-on-focus="context.selectOnFocus ?? false"
+      :data-key="context.dataKey"
+      :meta-key-selection="context.metaKeySelection ?? false"
+      :virtual-scroller-options="context.virtualScrollerOptions"
+      :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>
+    </Listbox>
+  </div>
+</template>

package/dist/components/PrimeMultiSelect.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <MultiSelect
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="context.id"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :list-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"
+      :options="context.options"
+      :option-label="context.optionLabel"
+      :option-value="context.optionValue"
+      :option-disabled="context.optionDisabled"
+      :option-group-label="context.optionGroupLabel"
+      :option-group-children="context.optionGroupChildren"
+      :scroll-height="context.scrollHeight"
+      :data-key="context.dataKey"
+      :filter="context.filter ?? false"
+      :filter-placeholder="context.filterPlaceholder"
+      :filter-locale="context.filterLocale"
+      :filter-match-mode="context.filterMatchMode"
+      :fitler-fields="context.filterFields"
+      :append-to="context.appendTo"
+      :close-icon="context.closeIcon"
+      :display="context.display"
+      :max-selected-labels="context.maxSelectedLabels"
+      :selected-items-label="context.selectedItemsLabel"
+      :selection-limit="context.selectionLimit"
+      :show-toggle-all="context.showToggleAll"
+      :loading="context.loading"
+      :select-all="context.selectAll"
+      :reset-filter-on-hide="context.resetFilterOnHide"
+      :virtual-scroller-options="context.virtualScrollerOptions"
+      :auto-option-focus="context.autoOptionFocus"
+      :auto-filter-focus="context.autoFilterFocus"
+      :filter-message="context.filterMessage"
+      :selection-message="context.selectionMessage"
+      :empty-selection-message="context.emptySelectionMessage"
+      :empty-filter-message="context.emptyFilterMessage"
+      :empty-message="context.emptyMessage"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleChange"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </MultiSelect>
+  </div>
+</template>

package/dist/components/PrimeOutputBoolean.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useFormKitSection } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const { t } = useI18n();
+const translated = computed(() => {
+  if (props.context?._value) return props.context?.trueValue ?? t("formkit.prime.true", "true");
+  else return props.context?.falseValue ?? t("formkit.prime.false", "false");
+});
+</script>
+
+<template>
+  <div class="p-formkit p-output-boolean">
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
+    <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      {{ translated }}
+    </span>
+    <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
+  </div>
+</template>

package/dist/components/PrimeOutputDate.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useFormKitSection } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(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);
+    } catch (e) {
+    }
+    return result;
+  } else {
+    return "";
+  }
+});
+</script>
+
+<template>
+  <div class="p-formkit p-output-date">
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
+    <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      {{ converted }}
+    </span>
+    <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
+  </div>
+</template>

package/dist/components/PrimeOutputDuration.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { useFormKitSection, useOutputDuration } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const { formattedDuration } = useOutputDuration();
+</script>
+
+<template>
+  <div class="p-formkit p-output-duration">
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
+    <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      {{ formattedDuration(context?._value) }}
+    </span>
+    <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
+  </div>
+</template>

package/dist/components/PrimeOutputLink.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { computed } from "vue";
+import { useFormKitSection } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const url = computed(() => {
+  if (props.context?._value)
+    return props.context?._value.indexOf("http") > -1 ? props.context?._value : `https://${props.context?._value}`;
+  else return "";
+});
+const title = computed(() => {
+  const value = props.context?._value ?? "";
+  return props.context?.title ?? value;
+});
+</script>
+
+<template>
+  <div class="p-formkit p-output-link">
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
+    <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
+    <a
+      v-if="context?.value"
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      :class="context?.attrs?.class"
+      :href="url"
+      :target="context?.attrs?.target ?? '_new'"
+    >
+      <span>{{ title }}</span>
+    </a>
+    <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
+  </div>
+</template>

package/dist/components/PrimeOutputList.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed } from "vue";
+import { useFormKitSection } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
+import { options } from "@formkit/inputs";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const listStyle = computed(() => {
+  return props.context?.listStyle || "span";
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const getListValues = computed(() => {
+  const values = Array.isArray(props.context?._value) ? props.context._value : [];
+  if (props.context?.options && props.context?.optionValue) {
+    const key = "" + props.context.optionValue;
+    return values.map((value) => {
+      const foundOption = props.context?.options?.find((option) => option[key] === value);
+      return foundOption ? foundOption[props.context?.optionLabel] : value;
+    });
+  } else if (typeof props.context?.convertValue === "function") {
+    return props.context.convertValue([...values]);
+  }
+  return values;
+});
+const dividerClass = computed(() => props.context?.dividerClass || "");
+const itemClass = computed(() => props.context?.itemClass || "");
+const listItemsClass = computed(() => props.context?.attrs?.class || "");
+</script>
+
+<template>
+  <div class="p-formkit p-output-list">
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
+    <FormKitPrefix v-if="hasPrefix && listStyle === 'span'" :prefix="context?.prefix as string" />
+    <span
+      v-if="listStyle === 'span'"
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      class="p-output-list-items"
+      :class="listItemsClass"
+    >
+      <template v-for="(value, index) of getListValues" :key="index">
+        <span v-if="index !== 0" class="p-output-list-divider" :class="dividerClass">{{
+          context?.divider ?? ", "
+        }}</span>
+        <span class="p-output-list-item" :class="itemClass">{{ value }}</span>
+      </template>
+    </span>
+    <div
+      v-if="listStyle === 'div'"
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      class="p-output-list-items"
+      :class="listItemsClass"
+    >
+      <template v-for="(value, index) of getListValues" :key="index">
+        <div class="p-output-list-item" :class="itemClass">
+          {{ value }}
+        </div>
+      </template>
+    </div>
+    <ul
+      v-if="listStyle === 'ul'"
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      class="p-output-list-items"
+      :class="listItemsClass"
+    >
+      <li v-for="(value, index) of getListValues" :key="index">
+        <span class="p-output-list-item" :class="itemClass">
+          {{ value }}
+        </span>
+      </li>
+    </ul>
+    <ol
+      v-if="listStyle === 'ol'"
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      class="p-output-list-items"
+      :class="listItemsClass"
+    >
+      <li v-for="(value, index) of getListValues" :key="index">
+        <span class="p-output-list-item" :class="itemClass">
+          {{ value }}
+        </span>
+      </li>
+    </ol>
+    <FormKitSuffix v-if="hasSuffix && listStyle === 'span'" :suffix="context?.suffix as string" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
+  </div>
+</template>