@stonecrop/aform 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/aform.js +885 -0
  2. package/dist/aform.js.map +1 -0
  3. package/dist/aform.umd.cjs +2 -0
  4. package/dist/aform.umd.cjs.map +1 -0
  5. package/dist/style.css +1 -0
  6. package/package.json +66 -0
  7. package/src/components/AForm.vue +78 -0
  8. package/src/components/base/CollapseButton.vue +36 -0
  9. package/src/components/form/ACheckbox.vue +123 -0
  10. package/src/components/form/AComboBox.vue +13 -0
  11. package/src/components/form/ADate.vue +277 -0
  12. package/src/components/form/ADropdown.vue +206 -0
  13. package/src/components/form/AFieldset.vue +63 -0
  14. package/src/components/form/ANumericInput.vue +88 -0
  15. package/src/components/form/ATextInput.vue +129 -0
package/src/components/form/ANumericInput.vue ADDED
@@ -0,0 +1,88 @@
1
+ <template>
2
+ <div>
3
+ <input v-model="inputNumber" type="number" :id="uuid" :disabled="readonly" :required="required" />
4
+ <label :for="uuid">{{ label }}</label>
5
+ <p v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
6
+ </div>
7
+ </template>
8
+
9
+ <script setup lang="ts">
10
+ import { computed } from 'vue'
11
+
12
+ const props = withDefaults(
13
+ defineProps<{
14
+ label: string
15
+ modelValue: any
16
+ required?: boolean
17
+ readonly?: boolean
18
+ uuid?: string
19
+ validation?: Record<string, any>
20
+ }>(),
21
+ {
22
+ validation: () => ({ errorMessage: '&nbsp;' }),
23
+ }
24
+ )
25
+ const emit = defineEmits(['update:modelValue'])
26
+ const inputNumber = computed({
27
+ get: () => {
28
+ return props.modelValue
29
+ },
30
+ set: newValue => {
31
+ emit('update:modelValue', newValue)
32
+ },
33
+ })
34
+ </script>
35
+
36
+ <style scoped>
37
+ div {
38
+ min-width: 40ch;
39
+ border: 1px solid transparent;
40
+ padding: 0rem;
41
+ margin: 0rem;
42
+ margin-right: 1ch;
43
+ }
44
+
45
+ input {
46
+ width: calc(100% - 1ch);
47
+ outline: 1px solid transparent;
48
+ border: 1px solid var(--input-border-color);
49
+ padding: 1ch 0.5ch 0.5ch 1ch;
50
+ margin: calc(1.15rem / 2) 0 0 0;
51
+ min-height: 1.15rem;
52
+ border-radius: 0.25rem;
53
+ }
54
+
55
+ p,
56
+ label {
57
+ color: var(--input-label-color);
58
+ display: block;
59
+ min-height: 1.15rem;
60
+ padding: 0rem;
61
+ margin: 0rem;
62
+ border: 1px solid transparent;
63
+ margin-bottom: 0.25rem;
64
+ }
65
+
66
+ p {
67
+ width: 100%;
68
+ color: red;
69
+ font-size: 85%;
70
+ }
71
+
72
+ label {
73
+ z-index: 2;
74
+ font-size: 80%;
75
+ position: absolute;
76
+ background: white;
77
+ margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
78
+ padding: 0 0.25ch 0 0.25ch;
79
+ }
80
+
81
+ input:focus {
82
+ border: 1px solid var(--input-active-border-color);
83
+ }
84
+
85
+ input:focus + label {
86
+ color: var(--input-active-label-color);
87
+ }
88
+ </style>
package/src/components/form/ATextInput.vue ADDED
@@ -0,0 +1,129 @@
1
+ <template>
2
+ <div>
3
+ <input
4
+ v-model="inputText"
5
+ :id="uuid"
6
+ :disabled="readonly"
7
+ :maxlength="mask ? maskFilled && mask.length : undefined"
8
+ :required="required"
9
+ v-mask="mask" />
10
+ <label :for="uuid">{{ label }} </label>
11
+ <p v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
12
+ </div>
13
+ </template>
14
+
15
+ <script lang="ts">
16
+ import { defineComponent, inject, PropType, ref, computed } from 'vue'
17
+
18
+ import { FormSchema } from 'types'
19
+ import { useStringMask } from '@/directives/mask'
20
+
21
+ // TODO: when moving to composition API, figure out how to provide mask
22
+ // as a custom directive
23
+ export default defineComponent({
24
+ name: 'ATextInput',
25
+ props: {
26
+ schema: {
27
+ type: Object as PropType<FormSchema>,
28
+ required: true,
29
+ },
30
+ label: {
31
+ type: String,
32
+ required: true,
33
+ },
34
+ modelValue: {
35
+ type: null as unknown as PropType<string | number>,
36
+ },
37
+ mask: {
38
+ type: String,
39
+ },
40
+ required: {
41
+ type: Boolean,
42
+ },
43
+ readonly: {
44
+ type: Boolean,
45
+ },
46
+ uuid: {
47
+ type: String,
48
+ },
49
+ validation: {
50
+ type: Object,
51
+ default: () => ({ errorMessage: '&nbsp;' }),
52
+ },
53
+ },
54
+ setup(props, context) {
55
+ const maskFilled = ref(false)
56
+
57
+ // TODO: (state) replace with state management
58
+ const locale = inject<string>('locale', '')
59
+
60
+ const inputText = computed({
61
+ get() {
62
+ return props.modelValue
63
+ },
64
+ set(newValue) {
65
+ context.emit('update:modelValue', newValue)
66
+ },
67
+ })
68
+
69
+ return { inputText, locale, maskFilled }
70
+ },
71
+ directives: {
72
+ mask: useStringMask,
73
+ },
74
+ })
75
+ </script>
76
+
77
+ <style scoped>
78
+ div {
79
+ min-width: 40ch;
80
+ border: 1px solid transparent;
81
+ padding: 0rem;
82
+ margin: 0rem;
83
+ margin-right: 1ch;
84
+ }
85
+
86
+ input {
87
+ width: calc(100% - 1ch);
88
+ outline: 1px solid transparent;
89
+ border: 1px solid var(--input-border-color);
90
+ padding: 1ch 0.5ch 0.5ch 1ch;
91
+ margin: calc(1.15rem / 2) 0 0 0;
92
+ min-height: 1.15rem;
93
+ border-radius: 0.25rem;
94
+ }
95
+
96
+ p,
97
+ label {
98
+ color: var(--input-label-color);
99
+ display: block;
100
+ min-height: 1.15rem;
101
+ padding: 0rem;
102
+ margin: 0rem;
103
+ border: 1px solid transparent;
104
+ margin-bottom: 0.25rem;
105
+ }
106
+
107
+ p {
108
+ width: 100%;
109
+ color: red;
110
+ font-size: 85%;
111
+ }
112
+
113
+ label {
114
+ z-index: 2;
115
+ font-size: 80%;
116
+ position: absolute;
117
+ background: white;
118
+ margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
119
+ padding: 0 0.25ch 0 0.25ch;
120
+ }
121
+
122
+ input:focus {
123
+ border: 1px solid var(--input-active-border-color);
124
+ }
125
+
126
+ input:focus + label {
127
+ color: var(--input-active-label-color);
128
+ }
129
+ </style>