@sfxcode/formkit-primevue 1.8.1 → 1.8.3

package/dist/components/PrimeAutoComplete.vue

@@ -0,0 +1,35 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+const suggestions = ref([])
+
+function search(event) {
+  suggestions.value = attrs.value.complete(event.query)
+}
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <AutoComplete
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :class="styleClass"
+      :suggestions="suggestions"
+      @complete="search"
+      @change="handleInput"
+    />
+  </div>
+</template>

package/dist/components/PrimeCalendar.vue

@@ -0,0 +1,47 @@
+<script setup lang='ts'>
+import type { CalendarBlurEvent } from 'primevue/calendar'
+
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(context?._value)
+}
+
+function handleSelect(e: any) {
+  context?.node.input(e)
+}
+
+function handleBlur(e: CalendarBlurEvent) {
+  context?.handlers.blur(e.value)
+}
+
+function handleClearClick() {
+  context?.node.input(null)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Calendar
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="props.context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      :show-icon="context.showIcon"
+      @date-select="handleSelect"
+      @input="handleInput"
+      @blur="handleBlur"
+      @clear-click="handleClearClick"
+    />
+  </div>
+</template>

package/dist/components/PrimeCascadeSelect.vue

@@ -0,0 +1,28 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <CascadeSelect
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :class="styleClass"
+      @change="handleInput"
+    />
+  </div>
+</template>

package/dist/components/PrimeCheckbox.vue

@@ -0,0 +1,32 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.attrs.labelLeft }}</span>
+    <Checkbox
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      :binary="attrs.binary ?? true"
+      @change="handleInput"
+    />
+    <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>
+  </div>
+</template>

package/dist/components/PrimeChips.vue

@@ -0,0 +1,29 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+}
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Chips
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      @add="handleInput"
+      @remove="handleInput"
+    />
+  </div>
+</template>

package/dist/components/PrimeColorPicker.vue

@@ -0,0 +1,26 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleChange(e: any) {
+  context?.node.input(props.context?._value)
+}
+</script>
+
+<template>
+  <div class="p-formkit">
+    <ColorPicker
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :style="attrs.style"
+      :panel-class="attrs.class"
+      @change="handleChange"
+    />
+  </div>
+</template>

package/dist/components/PrimeDropdown.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleBlur(e: any) {
+  context?.handlers.blur(e.value)
+}
+function handleInput(e: any) {
+  context?.node.input(e.value)
+}
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Dropdown
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :style="attrs.style"
+      :class="styleClass"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      :input-props="attrs.inputProps"
+      @change="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/PrimeEditor.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { EditorSelectionChangeEvent } from 'primevue/editor'
+
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(e.htmlValue)
+}
+
+function handleSelection(e: EditorSelectionChangeEvent) {
+  if (e.range === null)
+    context?.handlers.blur(e.htmlValue)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Editor
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :editor-style="attrs.style"
+      :class="styleClass"
+      @text-change="handleInput"
+      @selection-change="handleSelection"
+    />
+  </div>
+</template>

package/dist/components/PrimeInputMask.vue

@@ -0,0 +1,29 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+  context?.handlers.blur(props.context?._value)
+}
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <InputMask
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :editor-style="attrs.style"
+      :class="styleClass"
+      @blur="handleInput"
+    />
+  </div>
+</template>

package/dist/components/PrimeInputNumber.vue

@@ -0,0 +1,33 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleBlur(e: any) {
+  context?.handlers.blur(e.value)
+}
+
+function handleInput(e: any) {
+  context?.node.input(e.value)
+}
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <InputNumber
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      @input="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/PrimeInputSwitch.vue

@@ -0,0 +1,30 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+}
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div :class="attrs.option_class" class="p-formkit">
+    <span v-if="context.attrs.labelLeft" class="formkit-prime-left">{{ context.attrs.labelLeft }}</span>
+    <InputSwitch
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      @change="handleInput"
+    />
+    <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>
+  </div>
+</template>

package/dist/components/PrimeInputText.vue

@@ -0,0 +1,53 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function hasIcon() {
+  return context?.icon && context?.icon.length > 0
+}
+
+function handleBlur(e: any) {
+  context?.handlers.blur(e.target.value)
+}
+
+function handleInput(e: any) {
+  context?.node.input(e.target.value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <IconField v-if="hasIcon()" :icon-position="attrs.iconPosition">
+      <InputIcon :class="context.icon" />
+      <InputText
+        :id="context.id"
+        v-model="context._value"
+        v-bind="attrs"
+        :disabled="attrs._disabled ?? !!context?.disabled"
+        :readonly="attrs._readonly ?? false"
+        :style="attrs.style"
+        :class="styleClass"
+        @input="handleInput"
+        @blur="handleBlur"
+      />
+    </IconField>
+    <InputText
+      v-else
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :style="attrs.style"
+      :class="styleClass"
+      @input="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/PrimeKnob.vue

@@ -0,0 +1,35 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(e)
+  context?.handlers.blur(e)
+}
+
+function updateValue(n: number) {
+  context?.node.input(n)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Knob
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :style="attrs.style"
+      :class="styleClass"
+      @change="handleInput"
+      @update:model-value="updateValue"
+    />
+  </div>
+</template>

package/dist/components/PrimeListbox.vue

@@ -0,0 +1,30 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Listbox
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :list-style="attrs.style"
+      :class="styleClass"
+      :unstyled="attrs.unstyled ?? false"
+      @change="handleInput"
+    />
+  </div>
+</template>

package/dist/components/PrimeMultiSelect.vue

@@ -0,0 +1,29 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleChange(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <MultiSelect
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :list-style="attrs.style"
+      :class="styleClass"
+      @change="handleChange"
+    />
+  </div>
+</template>

package/dist/components/PrimePassword.vue

@@ -0,0 +1,35 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleBlur(e: any) {
+  context?.handlers.blur(e.target.value)
+}
+
+function handleInput(e: any) {
+  context?.node.input(e.target.value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Password
+      v-model="context._value"
+      v-bind="attrs"
+      :input-id="context.id"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :input-style="attrs.style"
+      :input-class="styleClass"
+      :feedback="context.feedback ?? false"
+      @input="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/PrimeRadioButton.vue

@@ -0,0 +1,35 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleChange(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div :class="attrs.options_class" class="p-formkit">
+    <div v-for="option in attrs.options" :key="option.value" :class="attrs.option_class">
+      <RadioButton
+        :id="context.id"
+        v-model="context._value"
+        v-bind="attrs"
+        :disabled="attrs._disabled ?? !!context?.disabled"
+        :readonly="attrs._readonly ?? false"
+        :name="attrs.name"
+        :value="option.value"
+        :input-style="attrs.style"
+        :input-class="styleClass"
+        @click="handleChange"
+        @change="handleChange"
+      />
+      <label :for="option.value">{{ option.label }}</label>
+    </div>
+  </div>
+</template>

package/dist/components/PrimeRating.vue

@@ -0,0 +1,32 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleInput(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Rating
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :style="attrs.style"
+      :class="styleClass"
+      :on-icon="attrs.onIcon ?? 'pi pi-star-fill'"
+      :off-icon="attrs.offIcon ?? 'pi pi-star'"
+      :cancel="attrs.cancel ?? false"
+      @change="handleInput"
+    />
+  </div>
+</template>

package/dist/components/PrimeSelectButton.vue

@@ -0,0 +1,29 @@
+<script setup lang='ts'>
+const props = defineProps({
+  context: Object,
+})
+
+const context = props.context
+const attrs = computed(() => context?.attrs)
+
+function handleChange(e: any) {
+  context?.node.input(props.context?._value)
+}
+
+const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
+</script>
+
+<template>
+  <div class="p-formkit">
+    <SelectButton
+      :id="context.id"
+      v-model="context._value"
+      v-bind="attrs"
+      :disabled="attrs._disabled ?? !!context?.disabled"
+      :readonly="attrs._readonly ?? false"
+      :style="attrs.style"
+      :class="styleClass"
+      @change="handleChange"
+    />
+  </div>
+</template>