Skip to content

Commit 62df6ff

Browse files
sfxcodesfxcode
committed
refactor(Inputs): Refactor Elements and create Demo for each
1 parent fa389c2 commit 62df6ff

22 files changed

+377
-63
lines changed

‎public/sass/formkit-prime-inputs.scss

+7
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,13 @@
6666
}
6767
}
6868

69+
.p-listbox {
70+
.p-listbox-item {
71+
width: 250px;
72+
}
73+
}
74+
75+
6976
.p-editor-container {
7077
width: 300px;
7178
height: 250px;

‎src/components/app/AppTopbar.vue

+7-5
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,32 @@ const items = ref([
1313
label: 'Edit',
1414
items: [
1515
{ label: 'InputText', icon: 'pi pi-fw pi-user-edit', to: '/demo/inputText' },
16-
{ label: 'InputNumber', icon: 'pi pi-fw pi-user-edit', to: '/demo/inputNumber' },
1716
{ label: 'TextArea', icon: 'pi pi-fw pi-user-edit', to: '/demo/inputTextArea' },
17+
{ label: 'InputNumber', icon: 'pi pi-fw pi-user-edit', to: '/demo/inputNumber' },
18+
{ label: 'InputMask', icon: 'pi pi-fw pi-user-edit', to: '/demo/inputMask' },
1819
{ label: 'Calendar', icon: 'pi pi-fw pi-user-edit', to: '/demo/calendar' },
1920
{ label: 'Chips', icon: 'pi pi-fw pi-user-edit', to: '/demo/chips' },
2021
{ label: 'Editor', icon: 'pi pi-fw pi-user-edit', to: '/demo/editor' }],
2122
},
2223
{
2324
label: 'Check',
2425
items: [
25-
{ label: 'CheckBox', icon: 'pi pi-fw pi-user-edit', to: '/demo/checkBox' },
26-
{ label: 'Switch', icon: 'pi pi-fw pi-user-edit', to: '/demo/inputText' }],
26+
{ label: 'Checkbox', icon: 'pi pi-fw pi-user-edit', to: '/demo/checkBox' },
27+
{ label: 'InputSwitch', icon: 'pi pi-fw pi-user-edit', to: '/demo/inputSwitch' }],
2728
},
2829
],
2930
[
3031
{
3132
label: 'Select',
3233
items: [
33-
{ label: 'CheckBox', icon: 'pi pi-fw pi-user-edit', to: '/demo/inputText' },
34-
{ label: 'Switch', icon: 'pi pi-fw pi-user-edit', to: '/demo/inputText' }],
34+
{ label: 'Dropdown', icon: 'pi pi-fw pi-user-edit', to: '/demo/dropdown' },
35+
{ label: 'Listbox', icon: 'pi pi-fw pi-user-edit', to: '/demo/listbox' }],
3536
},
3637
{
3738
label: 'Misc',
3839
items: [
3940
{ label: 'ColorPicker', icon: 'pi pi-fw pi-user-edit', to: '/demo/colorPicker' },
41+
{ label: 'Knob', icon: 'pi pi-fw pi-user-edit', to: '/demo/knob' },
4042
],
4143
},
4244
],

‎src/formkit/PrimeCheckbox.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function handleInput(e: any) {
1717
v-model="context._value"
1818
:input-id="context.id"
1919
:disabled="attrs._disabled ?? false"
20-
:readonly="attrs._readonly ?? true"
20+
:readonly="attrs._readonly ?? false"
2121
:input-style="attrs.style"
2222
:input-class="attrs.class"
2323
:binary="attrs.binary ?? true"

‎src/formkit/PrimeChips.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function handleInput(e: any) {
1616
v-model="context._value"
1717
:input-id="context.id"
1818
:disabled="attrs._disabled ?? false"
19-
:readonly="attrs._readonly ?? true"
19+
:readonly="attrs._readonly ?? false"
2020
:input-style="attrs.style"
2121
:input-class="attrs.class"
2222
:allow-duplicate="attrs.allowDuplicate ?? true"

‎src/formkit/PrimeDropdown.vue

+12-9
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const props = defineProps({
44
})
55
66
const context = props.context
7+
const attrs = context?.attrs
78
89
function handleBlur(e: any) {
910
context?.handlers.blur(e.value)
@@ -15,16 +16,18 @@ function handleInput(e: any) {
1516

1617
<template>
1718
<Dropdown
18-
:id="context.id"
1919
v-model="context._value"
20-
:name="context.name"
21-
:class="context.attrs.class"
22-
:options="context?.attrs?.options"
23-
:option-label="context?.attrs?.optionLabel ?? 'label'"
24-
:option-value="context?.attrs?.optionValue ?? 'value'"
25-
:placeholder="context.attrs.placeholder"
26-
:filter="context.attrs.filter ?? false"
27-
:show-clear="context.attrs.showClear ?? false"
20+
:input-id="context.id"
21+
:disabled="attrs._disabled ?? false"
22+
:readonly="attrs._readonly ?? false"
23+
:input-style="attrs.style"
24+
:input-class="attrs.class"
25+
:options="attrs.options"
26+
:option-label="attrs.optionLabel ?? 'label'"
27+
:option-value="attrs.optionValue ?? 'value'"
28+
:placeholder="attrs.placeholder"
29+
:filter="attrs.filter ?? false"
30+
:show-clear="attrs.showClear ?? false"
2831
@change="handleInput"
2932
@blur="handleBlur"
3033
/>

‎src/formkit/PrimeEditor.vue

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
11
<script setup lang="ts">
2-
import { EditorSelectionChangeEvent } from 'primevue/editor'
2+
import type { EditorSelectionChangeEvent } from 'primevue/editor'
33
44
const props = defineProps({
55
context: Object,
66
})
77
88
const context = props.context
9+
const attrs = context?.attrs
910
1011
function handleInput(e: any) {
1112
context?.node.input(e.htmlValue)
1213
}
1314
1415
function handleSelection(e: EditorSelectionChangeEvent) {
15-
if (e.range === null) {
16+
if (e.range === null)
1617
context?.handlers.blur(e.htmlValue)
17-
}
1818
}
1919
</script>
2020

2121
<template>
2222
<Editor
23-
v-model="context._value"
2423
:id="context.id"
25-
:name="context.name"
26-
:class="context.attrs.class"
27-
:placeholder="context.attrs.placeholder"
24+
v-model="context._value"
25+
:disabled="attrs._disabled ?? false"
26+
:readonly="attrs._readonly ?? false"
27+
:editor-style="attrs.style"
28+
:class="attrs.class"
29+
:placeholder="attrs.placeholder"
30+
:formats="attrs.formats"
31+
:modules="attrs.modules"
2832
@text-change="handleInput"
2933
@selection-change="handleSelection"
3034
/>

‎src/formkit/PrimeInputMask.vue

+11-8
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const props = defineProps({
44
})
55
66
const context = props.context
7+
const attrs = context?.attrs
78
89
function handleInput(e: any) {
910
context?.node.input(props.context?._value)
@@ -13,15 +14,17 @@ function handleInput(e: any) {
1314

1415
<template>
1516
<InputMask
16-
v-model="context._value"
1717
:id="context.id"
18-
:name="context.name"
19-
:class="context.attrs.class"
20-
:placeholder="context.attrs.placeholder"
21-
:mask="context.attrs.mask ?? undefined"
22-
:slot-char="context.attrs.slotChar ?? '_'"
23-
:auto-clear="context.attrs.autoClear ?? true"
24-
:unmask="context.attrs.unmask ?? false"
18+
v-model="context._value"
19+
:disabled="attrs._disabled ?? false"
20+
:readonly="attrs._readonly ?? false"
21+
:editor-style="attrs.style"
22+
:class="attrs.class"
23+
:placeholder="attrs.placeholder"
24+
:mask="attrs.mask ?? undefined"
25+
:slot-char="attrs.slotChar ?? '_'"
26+
:auto-clear="attrs.autoClear ?? true"
27+
:unmask="attrs.unmask ?? false"
2528
@blur="handleInput"
2629
/>
2730
</template>

‎src/formkit/PrimeInputNumber.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ function handleInput(e: any) {
2121
:input-id="context.id"
2222
:disabled="attrs._disabled ?? false"
2323
:readonly="attrs._readonly ?? false"
24-
:placeholder="attrs.placeholder"
2524
:input-style="attrs.style"
2625
:input-class="attrs.class"
26+
:placeholder="attrs.placeholder"
2727
:use-grouping="attrs.useGrouping ?? true"
2828
:min-fraction-digits="attrs.minFractionDigits ?? undefined"
2929
:max-fraction-digits="attrs.maxFractionDigits ?? undefined"

‎src/formkit/PrimeInputSwitch.vue

+8-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const props = defineProps({
44
})
55
66
const context = props.context
7+
const attrs = context?.attrs
78
89
function handleInput(e: any) {
910
context?.node.input(props.context?._value)
@@ -15,11 +16,13 @@ function handleInput(e: any) {
1516

1617
<InputSwitch
1718
v-model="context._value"
18-
:id="context.id"
19-
:name="context.name"
20-
:class="context.attrs.class"
21-
:true-value="context.attrs.trueValue ?? undefined"
22-
:false-value="context.attrs.falseValue ?? undefined"
19+
:input-id="context.id"
20+
:disabled="attrs._disabled ?? false"
21+
:readonly="attrs._readonly ?? false"
22+
:input-style="attrs.style"
23+
:input-class="attrs.class"
24+
:true-value="attrs.trueValue ?? undefined"
25+
:false-value="attrs.falseValue ?? undefined"
2326
@input="handleInput"
2427
/>
2528
<span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>

‎src/formkit/PrimeKnob.vue

+16-12
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const props = defineProps({
44
})
55
66
const context = props.context
7+
const attrs = context?.attrs
78
89
function handleInput(e: any) {
910
context?.node.input(e)
@@ -13,19 +14,22 @@ function handleInput(e: any) {
1314

1415
<template>
1516
<Knob
16-
v-model="context._value"
1717
:id="context.id"
18-
:name="context.name"
19-
:min="context.attrs.min ?? 0"
20-
:max="context.attrs.max ?? 100"
21-
:step="context.attrs.step ?? undefined"
22-
:size="context.attrs.max ?? 100"
23-
:stroke-width="context.attrs.strokeWidth ?? 14"
24-
:show-value="context.attrs.showValue ?? true"
25-
:value-color="context.attrs.valueColor ?? undefined"
26-
:range-color="context.attrs.rangeColor ?? undefined"
27-
:text-color="context.attrs.textColor ?? undefined"
28-
:value-template="context.attrs.valueTemplate ?? undefined"
18+
v-model="context._value"
19+
:disabled="attrs._disabled ?? false"
20+
:readonly="attrs._readonly ?? false"
21+
:style="attrs.style"
22+
:class="attrs.class"
23+
:min="attrs.min ?? 0"
24+
:max="attrs.max ?? 100"
25+
:step="attrs.step ?? undefined"
26+
:size="attrs.size ?? 100"
27+
:stroke-width="attrs.strokeWidth ?? 14"
28+
:show-value="attrs.showValue ?? true"
29+
:value-color="attrs.valueColor ?? undefined"
30+
:range-color="attrs.rangeColor ?? undefined"
31+
:text-color="attrs.textColor ?? undefined"
32+
:value-template="attrs.valueTemplate ?? undefined"
2933
@change="handleInput"
3034
/>
3135
</template>

‎src/formkit/PrimeListbox.vue

+16-9
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const props = defineProps({
44
})
55
66
const context = props.context
7+
const attrs = context?.attrs
78
89
function handleInput(e: any) {
910
context?.node.input(props.context?._value)
@@ -15,15 +16,21 @@ function handleInput(e: any) {
1516
:id="context.id"
1617
v-model="context._value"
1718
:name="context.name"
18-
:class="context.attrs.class"
19-
:style="context.attrs.style"
20-
:list-style="context.attrs.listStyle"
21-
:options="context?.attrs?.options"
22-
:option-label="context?.attrs?.optionLabel ?? 'label'"
23-
:option-value="context?.attrs?.optionValue ?? 'value'"
24-
:filter-placeholder="context.attrs.filterPlaceholder"
25-
:filter="context.attrs.filter ?? false"
26-
:multiple="context.attrs.multiple ?? false"
19+
:disabled="attrs._disabled ?? false"
20+
:readonly="attrs._readonly ?? false"
21+
:list-style="attrs.style"
22+
:class="attrs.class"
23+
:options="attrs?.options"
24+
:option-label="attrs?.optionLabel ?? 'label'"
25+
:option-value="attrs?.optionValue ?? 'value'"
26+
:multiple="attrs.multiple ?? false"
27+
:filter="attrs.filter ?? false"
28+
:filter-icon="attrs.filterIcon"
29+
:filter-placeholder="attrs.filterPlaceholder"
30+
:filter-locale="attrs.filterLocale"
31+
:filter-match-mode="attrs.filterMatchMode"
32+
:auto-option-focus="attrs.autoOptionFocus ?? true"
33+
:select-on-focus="attrs.selectOnFocus ?? false"
2734
@change="handleInput"
2835
/>
2936
</template>

‎src/pages/demo/ColorPicker.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const schema
1616
label: 'Styled + Disabled',
1717
style: 'background:gray;',
1818
class: 'customClass',
19-
_disabled: 'true',
19+
_disabled: true,
2020
},
2121
{
2222
$formkit: 'primeColorPicker',

‎src/pages/demo/Dropdown.vue

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<script setup lang='ts'>
2+
import PrimeInput from '@/components/demo/PrimeInput.vue'
3+
4+
const primeAttributes = 'placeholder, options, showClear, filter, optionLabel (default: label), optionValue (default: value)'
5+
6+
const options = [
7+
{ label: 'Every page load', value: 'refresh' },
8+
{ label: 'Ever hour', value: 'hourly' },
9+
{ label: 'Every day', value: 'daily' },
10+
]
11+
12+
const schema
13+
= [
14+
{
15+
$formkit: 'primeDropdown',
16+
name: 'cookie_notice',
17+
label: 'Cookie notice Dropdown',
18+
value: 'hourly',
19+
options,
20+
help: 'Cookie notice frequency ?',
21+
},
22+
{
23+
$formkit: 'primeDropdown',
24+
name: 'styled',
25+
label: 'Styled',
26+
value: 'hourly',
27+
style: 'background:gray;',
28+
class: 'customClass',
29+
options: [
30+
{ label: 'Every page load', value: 'refresh' },
31+
{ label: 'Ever hour', value: 'hourly' },
32+
{ label: 'Every day', value: 'daily' },
33+
],
34+
_disabled: 'true',
35+
},
36+
{
37+
$formkit: 'primeDropdown',
38+
name: 'custom',
39+
label: 'With Clear and Filter',
40+
showClear: true,
41+
filter: true,
42+
placeholder: 'Please select',
43+
options,
44+
validation: 'required',
45+
},
46+
]
47+
48+
const data = { }
49+
</script>
50+
51+
<template>
52+
<div>
53+
<PrimeInput
54+
header="PrimeDropdown" :schema="schema" :data="data"
55+
:prime-attributes="primeAttributes"
56+
/>
57+
</div>
58+
</template>
59+
60+
<style lang='scss' scoped>
61+
62+
</style>

0 commit comments

Comments
 (0)