@sfxcode/formkit-primevue 3.3.1 → 3.3.4

package/dist/components/PrimeOutputNumber.vue

@@ -0,0 +1,56 @@
+<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 { n } = useI18n();
+const converted = computed(() => {
+  const value = props?.context?._value;
+  if (value) {
+    let result = "";
+    const format = props?.context?.attrs?.format ? props?.context?.attrs?.format : "short";
+    try {
+      result = n(value, format);
+    } catch (e) {
+      try {
+        result = n(+value, format);
+      } catch (e2) {
+      }
+    }
+    return result;
+  } else {
+    return "";
+  }
+});
+</script>
+
+<template>
+  <div class="p-formkit p-output-number">
+    <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/PrimeOutputReference.vue

@@ -0,0 +1,64 @@
+<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 reference = computed(() => {
+  const value = props.context?._value ?? "";
+  let result = props.context?.reference ? `${props.context?.reference}` : "reference-must-be-set";
+  if (!props.context?.internal && !result.includes("http")) result = `https://${result}`;
+  return result.replace(/\{\{.*\}\}/, value);
+});
+const title = computed(() => {
+  const value = props.context?._value ?? "";
+  const result = props.context?.title ?? value;
+  return `${result}`.replace(/\{\{.*\}\}/, value);
+});
+</script>
+
+<template>
+  <div class="p-formkit p-output-reference">
+    <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" />
+    <component
+      :is="context?.linkComponentName ? context?.linkComponentName : 'RouterLink'"
+      v-if="context?.internal"
+      :style="context?.attrs?.style"
+      :class="context?.attrs?.class"
+      :to="reference"
+      v-bind="context?.attrs"
+    >
+      {{ title }}
+    </component>
+    <a
+      v-else
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      :class="context?.attrs?.class"
+      :href="reference"
+      :target="context?.attrs?.target ?? '_new'"
+    >
+      {{ title }}
+    </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/PrimeOutputText.vue

@@ -0,0 +1,72 @@
+<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 textValue = computed(() => {
+  const value = props.context?._value;
+  const { t } = useI18n();
+  let result = "";
+  if (value) {
+    if (props.context?.isTranslationKey) {
+      result = t(value);
+    } else if (typeof props.context?.convertValue === "function") {
+      result = props.context?.convertValue(value);
+    } else {
+      result = value;
+    }
+  }
+  const maxLength = props.context?.maxLength;
+  if (result && maxLength && !props.context?.html && result.length > maxLength) {
+    let truncated = result.substring(0, maxLength);
+    const lastSpaceIndex = truncated.lastIndexOf(" ");
+    if (lastSpaceIndex > maxLength * 0.8) {
+      truncated = truncated.substring(0, lastSpaceIndex);
+    }
+    result = `${truncated}...`;
+  }
+  return result;
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+</script>
+
+<template>
+  <div class="p-formkit p-output-text">
+    <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
+      v-if="context?.html"
+      :id="context?.id"
+      :class="context?.attrs?.class"
+      :style="context?.attrs?.style"
+      v-html="textValue"
+    />
+    <span
+      v-else
+      :id="context?.id"
+      :class="context?.attrs?.class"
+      :style="context?.attrs?.style"
+      v-text="textValue"
+    />
+    <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/PrimePassword.vue

@@ -0,0 +1,52 @@
+<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">
+    <Password
+      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"
+      :medium-regex="
+        context.mediumRegex ??
+        '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})'
+      "
+      :strong-regex="context.strongRegex ?? '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})'"
+      :prompt-label="context.promptLabel"
+      :weak-label="context.weakLabel"
+      :medium-label="context.mediumLabel"
+      :strong-label="context.strongLabel"
+      :mask-icon="context.maskIcon"
+      :unmask-icon="context.unmaskIcon"
+      :feedback="context.feedback ?? false"
+      :toggle-mask="context.toggleMask ?? false"
+      :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>
+    </Password>
+  </div>
+</template>

package/dist/components/PrimeRadioButton.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { computed } from "vue";
+import { useFormKitInput } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, isInvalid, handleChange, handleBlur, modelValue } = useFormKitInput(
+  props.context
+);
+const optionsClass = computed(() => props.context?.optionsClass ?? "");
+const optionClass = computed(() => props.context?.optionClass ?? "");
+const labelClass = computed(() => props.context?.labelClass ?? "");
+</script>
+
+<template>
+  <div class="p-formkit p-formkit-options" :class="optionsClass">
+    <div
+      v-for="option in context.options"
+      :key="option.value"
+      class="p-formkit-option"
+      :class="optionClass"
+    >
+      <RadioButton
+        :id="context.id"
+        v-model="modelValue"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs.readonly ?? false"
+        :name="context?.attrs.name"
+        :value="option.value"
+        :input-style="context?.attrs.style"
+        :input-class="context?.attrs?.class"
+        :invalid="isInvalid"
+        :size="context?.size ?? undefined"
+        :pt="context.pt"
+        :pt-options="context.ptOptions"
+        :unstyled="unstyled"
+        @click="handleChange"
+        @change="handleChange"
+        @blur="handleBlur"
+      />
+      <label :for="option.value" :class="labelClass">{{ option.label }}</label>
+    </div>
+  </div>
+</template>

package/dist/components/PrimeRating.vue

@@ -0,0 +1,40 @@
+<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">
+    <Rating
+      :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"
+      :stars="context.stars ?? 5"
+      :on-icon="context.onIcon"
+      :off-icon="context.offIcon"
+      :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>
+    </Rating>
+  </div>
+</template>

package/dist/components/PrimeSelect.vue

@@ -0,0 +1,71 @@
+<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">
+    <Select
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="context.id"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :input-style="context?.attrs.style"
+      :input-class="context?.attrs?.class"
+      :input-props="context?.attrs.inputProps"
+      :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-disabled="context.optionDisabled"
+      :option-group-label="context.optionGroupLabel"
+      :option-group-children="context.optionGroupChildren"
+      :scroll-height="context.scrollHeight"
+      :filter="context.filter ?? false"
+      :filter-placeholder="context.filterPlaceholder"
+      :filter-locale="context.filterLocale"
+      :filter-match-mode="context.filterMatchMode"
+      :fitler-fields="context.filterFields"
+      :filter-input-props="context.filterInputProps"
+      :editable="context.editable"
+      :placeholder="context.placeholder"
+      :data-key="context.dataKey"
+      :show-clear="context.showClear ?? false"
+      :overlay-style="context.overlayStyle"
+      :overlay-class="context.overlayClass"
+      :panel-props="context.panelProps"
+      :append-to="context.appendTo"
+      :reset-filter-on-hide="context.resetFilterOnHide"
+      :virtual-scroller-options="context.virtualScrollerOptions"
+      :auto-option-focus="context.autoOptionFocus"
+      :select-on-focus="context.selectOnFocus"
+      :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="handleInput"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Select>
+  </div>
+</template>

package/dist/components/PrimeSelectButton.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <SelectButton
+      :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"
+      :options="context.options"
+      :option-label="context.optionLabel"
+      :option-value="context.optionValue"
+      :option-disabled="context.optionDisabled"
+      :multiple="context.multiple ?? false"
+      :data-key="context.dataKey"
+      :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>
+    </SelectButton>
+  </div>
+</template>

package/dist/components/PrimeSlider.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, isInvalid, handleBlur, modelValue } = useFormKitInput(props.context);
+function handleInput(e) {
+  props.context?.node.input(e);
+  props.context?.handlers.blur(e);
+}
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Slider
+      :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"
+      :range="context.range ?? false"
+      :orientation="context.orientation ?? 'horizontal'"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/PrimeTextarea.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useFormKitInput } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Textarea
+      :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"
+      :placeholder="context.placeholder"
+      :rows="context.rows ?? 3"
+      :auto-resize="context.autoResize ?? false"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @input="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/PrimeToggleButton.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, handleChange, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <ToggleButton
+      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"
+      :on-label="context.onLabel ?? 'Yes'"
+      :off-label="context.offLabel ?? 'No'"
+      :on-icon="context.onIcon"
+      :off-icon="context.offIcon"
+      :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>
+    </ToggleButton>
+  </div>
+</template>

package/dist/components/PrimeToggleSwitch.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { useFormKitInput, useFormKitSection } from "../composables/index.ts";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasSuffix } = useFormKitSection(props.context);
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.prefix }}
+    </span>
+    <ToggleSwitch
+      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"
+      :true-value="context.trueValue ?? undefined"
+      :false-value="context.falseValue ?? undefined"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleInput"
+      @blur="handleBlur"
+    />
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.suffix }}
+    </span>
+  </div>
+</template>

package/dist/components/PrimeTreeSelect.vue

@@ -0,0 +1,48 @@
+<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">
+    <TreeSelect
+      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"
+      :options="context?.options"
+      :placeholder="context.placeholder"
+      :selection-mode="context.selectionMode"
+      :pt="context.pt"
+      :empty-message="context.emptyMessage"
+      :display="context.display"
+      :meta-key-selection="context.metaKeySelection"
+      :append-to="context.appendTo"
+      :scroll-height="context.scrollHeight"
+      :panel-class="context.panelClass"
+      :variant="context.variant"
+      :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>
+    </TreeSelect>
+  </div>
+</template>