@dative-gpi/foundation-shared-components 0.0.165 → 0.0.167

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 (8) hide show
  1. package/components/fields/FSMagicConfigField.vue +153 -0
  2. package/components/fields/FSMagicField.vue +184 -0
  3. package/composables/index.ts +1 -0
  4. package/composables/useMagicFieldProvider.ts +22 -0
  5. package/models/magicFields.ts +8 -0
  6. package/package.json +4 -4
  7. package/styles/components/fs_magic_config_field.scss +13 -0
  8. package/styles/components/index.scss +1 -0
package/components/fields/FSMagicConfigField.vue ADDED
@@ -0,0 +1,153 @@
1
+ <template>
2
+ <FSRow>
3
+ <component
4
+ class="fs-magic-config-field-value"
5
+ :is="get($props.type)"
6
+ :label="$tr('ui.magic-config-field.value', 'Value')"
7
+ :editable="$props.editable"
8
+ :required="true"
9
+ :rules="rules"
10
+ :modelValue="valueToInput"
11
+ @update:modelValue="inputToValue"
12
+ />
13
+ <FSRow
14
+ gap="24px"
15
+ >
16
+ <FSTranslateField
17
+ :label="$tr('ui.magic-config-field.label', 'Label')"
18
+ :editable="$props.editable"
19
+ :modelValue="$props.labelDefault"
20
+ :translations="$props.translations"
21
+ @update:modelValue="$emit('update:labelDefault', $event)"
22
+ @update:translations="$emit('update:translations', $event)"
23
+ />
24
+ <FSRow
25
+ class="fs-magic-config-field-actions"
26
+ width="hug"
27
+ :wrap="false"
28
+ >
29
+ <FSButtonRemoveIcon
30
+ @click="$emit('click:remove')"
31
+ />
32
+ <FSButtonAddIcon
33
+ @click="$emit('click:add')"
34
+ />
35
+ </FSRow>
36
+ </FSRow>
37
+ </FSRow>
38
+ </template>
39
+
40
+ <script lang="ts">
41
+ import { computed, defineComponent, PropType } from "vue";
42
+
43
+ import { DateRules, IconRules, NumberRules, TimeRules } from "../../models";
44
+ import { useMagicFieldProvider } from "../../composables";
45
+ import { MagicFieldType } from "../../models/magicFields";
46
+
47
+ import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
48
+ import FSButtonAddIcon from "../buttons/FSButtonAddIcon.vue";
49
+ import FSTranslateField from "./FSTranslateField.vue";
50
+ import FSRow from "../FSRow.vue";
51
+
52
+ export default defineComponent({
53
+ name: "FSMagicConfigField",
54
+ components: {
55
+ FSButtonRemoveIcon,
56
+ FSTranslateField,
57
+ FSButtonAddIcon,
58
+ FSRow
59
+ },
60
+ props: {
61
+ type: {
62
+ type: Number as PropType<MagicFieldType>,
63
+ required: false,
64
+ default: MagicFieldType.TextField
65
+ },
66
+ labelDefault: {
67
+ type: String as PropType<string | null>,
68
+ required: false,
69
+ default: null
70
+ },
71
+ value: {
72
+ type: String as PropType<string | null>,
73
+ required: false,
74
+ default: null
75
+ },
76
+ translations: {
77
+ type: Array as PropType<{ languageCode: string; label: string }[]>,
78
+ required: false,
79
+ default: () => []
80
+ },
81
+ editable: {
82
+ type: Boolean,
83
+ required: false,
84
+ default: true
85
+ }
86
+ },
87
+ emits: ["click:remove", "click:add", "update:value", "update:labelDefault", "update:translations"],
88
+ setup(props, { emit }) {
89
+ const { get } = useMagicFieldProvider();
90
+
91
+ const rules = computed((): Function[] => {
92
+ switch (props.type) {
93
+ case MagicFieldType.NumberField:
94
+ return [NumberRules.required()];
95
+ case MagicFieldType.TextField:
96
+ return [NumberRules.required()];
97
+ case MagicFieldType.DateTimeField:
98
+ return [DateRules.required()];
99
+ case MagicFieldType.IconField:
100
+ return [IconRules.required()];
101
+ case MagicFieldType.TimeField:
102
+ return [TimeRules.required()];
103
+ }
104
+ return [];
105
+ });
106
+
107
+ const valueToInput = computed((): any => {
108
+ switch (props.type) {
109
+ case MagicFieldType.NumberField:
110
+ case MagicFieldType.DateTimeField:
111
+ case MagicFieldType.TimeField:
112
+ if (props.value == null || isNaN(parseFloat(props.value))) {
113
+ return null;
114
+ }
115
+ return parseFloat(props.value);
116
+ case MagicFieldType.Switch:
117
+ if (props.value == null) {
118
+ return null;
119
+ }
120
+ return props.value === "true";
121
+ default:
122
+ return props.value;
123
+ }
124
+ });
125
+
126
+ const inputToValue = (value: any) => {
127
+ switch (props.type) {
128
+ case MagicFieldType.NumberField:
129
+ case MagicFieldType.Switch:
130
+ case MagicFieldType.DateTimeField:
131
+ case MagicFieldType.TimeField:
132
+ if (value == null) {
133
+ emit("update:value", null);
134
+ break;
135
+ }
136
+ emit("update:value", value.toString());
137
+ break;
138
+ default:
139
+ emit("update:value", value);
140
+ break;
141
+ }
142
+ };
143
+
144
+ return {
145
+ MagicFieldType,
146
+ valueToInput,
147
+ rules,
148
+ inputToValue,
149
+ get
150
+ };
151
+ },
152
+ });
153
+ </script>
package/components/fields/FSMagicField.vue ADDED
@@ -0,0 +1,184 @@
1
+ <template>
2
+ <component
3
+ v-if="!$props.useOnlyAllowedValues"
4
+ :is="get($props.type)"
5
+ :modelValue="valueToInput"
6
+ @update:modelValue="inputToValue"
7
+ v-bind="$attrs"
8
+ />
9
+ <FSSelectField
10
+ v-else
11
+ itemValue="value"
12
+ :items="items"
13
+ :modelValue="$props.modelValue"
14
+ @update:modelValue="$emit('update:modelValue', $event)"
15
+ v-bind="$attrs"
16
+ >
17
+ <template
18
+ v-if="$props.type === MagicFieldType.IconField"
19
+ #selection="{ item }"
20
+ >
21
+ <FSRow
22
+ align="center-center"
23
+ :wrap="false"
24
+ >
25
+ <FSIcon
26
+ v-if="item.raw.value"
27
+ >
28
+ {{ item.raw.value }}
29
+ </FSIcon>
30
+ <FSSpan
31
+ v-if="item.raw.value !== item.raw.label"
32
+ >
33
+ {{ item.raw.label }}
34
+ </FSSpan>
35
+ </FSRow>
36
+ </template>
37
+ <template
38
+ v-if="$props.type === MagicFieldType.IconField"
39
+ #item-label="{ item }"
40
+ >
41
+ <FSRow
42
+ align="center-center"
43
+ :wrap="false"
44
+ >
45
+ <FSIcon
46
+ v-if="item.raw.value"
47
+ >
48
+ {{ item.raw.value }}
49
+ </FSIcon>
50
+ <FSSpan
51
+ v-if="item.raw.value !== item.raw.label"
52
+ >
53
+ {{ item.raw.label }}
54
+ </FSSpan>
55
+ </FSRow>
56
+ </template>
57
+ </FSSelectField>
58
+ </template>
59
+
60
+ <script lang="ts">
61
+ import { computed, defineComponent, PropType } from "vue";
62
+
63
+ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
64
+
65
+ import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
66
+
67
+ import { useMagicFieldProvider } from "../../composables";
68
+ import { MagicFieldType } from "../../models/magicFields";
69
+ import { getTimeBestString } from "../../utils";
70
+
71
+ import FSSelectField from "./FSSelectField.vue";
72
+ import FSIcon from "../FSIcon.vue";
73
+ import FSSpan from "../FSSpan.vue";
74
+ import FSRow from "../FSRow.vue";
75
+
76
+ export default defineComponent({
77
+ name: "FSMagicField",
78
+ components: {
79
+ FSSelectField,
80
+ FSIcon,
81
+ FSSpan,
82
+ FSRow
83
+ },
84
+ props: {
85
+ type: {
86
+ type: Number as PropType<MagicFieldType>,
87
+ required: false,
88
+ default: MagicFieldType.TextField
89
+ },
90
+ modelValue: {
91
+ type: String as PropType<string | null>,
92
+ required: false,
93
+ default: null
94
+ },
95
+ allowedValues: {
96
+ type: Array as PropType<{ value: string; label: string }[]>,
97
+ required: false,
98
+ default: () => []
99
+ },
100
+ useOnlyAllowedValues: {
101
+ type: Boolean,
102
+ required: false,
103
+ default: false
104
+ },
105
+ },
106
+ emits: ["update:modelValue"],
107
+ setup(props, { emit }) {
108
+ const { epochToShortTimeFormat } = useAppTimeZone();
109
+ const { $tr } = useTranslationsProvider();
110
+ const { get } = useMagicFieldProvider();
111
+
112
+ const items = computed(() => props.allowedValues.map((av) => ({
113
+ value: av.value,
114
+ label: av.label || asString(av.value),
115
+ })));
116
+
117
+ const valueToInput = computed((): any => {
118
+ switch (props.type) {
119
+ case MagicFieldType.NumberField:
120
+ case MagicFieldType.DateTimeField:
121
+ case MagicFieldType.TimeField:
122
+ if (props.modelValue == null || isNaN(parseFloat(props.modelValue))) {
123
+ return null;
124
+ }
125
+ return parseFloat(props.modelValue);
126
+ case MagicFieldType.Switch:
127
+ if (props.modelValue == null) {
128
+ return null;
129
+ }
130
+ return props.modelValue === "true";
131
+ default:
132
+ return props.modelValue;
133
+ }
134
+ });
135
+
136
+ const asString = (value: any): string | null => {
137
+ if (value == null) {
138
+ return null;
139
+ }
140
+ switch (props.type) {
141
+ case MagicFieldType.NumberField:
142
+ return value.toString();
143
+ case MagicFieldType.Switch:
144
+ if (value) {
145
+ return $tr("ui.magic-field.true", "True");
146
+ }
147
+ return $tr("ui.magic-field.false", "False");
148
+ case MagicFieldType.DateTimeField:
149
+ return epochToShortTimeFormat(value);
150
+ case MagicFieldType.TimeField:
151
+ return getTimeBestString(value);
152
+ default:
153
+ return value;
154
+ }
155
+ }
156
+
157
+ const inputToValue = (value: any) => {
158
+ switch (props.type) {
159
+ case MagicFieldType.NumberField:
160
+ case MagicFieldType.Switch:
161
+ case MagicFieldType.DateTimeField:
162
+ case MagicFieldType.TimeField:
163
+ if (value == null) {
164
+ emit("update:modelValue", null);
165
+ break;
166
+ }
167
+ emit("update:modelValue", value.toString());
168
+ break;
169
+ default:
170
+ emit("update:modelValue", value);
171
+ break;
172
+ }
173
+ };
174
+
175
+ return {
176
+ MagicFieldType,
177
+ valueToInput,
178
+ items,
179
+ inputToValue,
180
+ get
181
+ };
182
+ },
183
+ });
184
+ </script>
package/composables/index.ts CHANGED
@@ -3,6 +3,7 @@ export * from "./useAuthTokens";
3
3
  export * from "./useBreakpoints";
4
4
  export * from "./useColors";
5
5
  export * from "./useDebounce";
6
+ export * from "./useMagicFieldProvider";
6
7
  export * from "./useRules";
7
8
  export * from "./useSlots";
8
9
  export * from "./useTables";
package/composables/useMagicFieldProvider.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { defineAsyncComponent } from "vue";
2
+
3
+ import { MagicFieldType } from "../models/magicFields";
4
+
5
+ const FIELDS = {
6
+ [MagicFieldType.NumberField] : defineAsyncComponent(() => import("../components/fields/FSNumberField.vue")),
7
+ [MagicFieldType.TextField] : defineAsyncComponent(() => import("../components/fields/FSTextField.vue")),
8
+ [MagicFieldType.Switch] : defineAsyncComponent(() => import("../components/FSSwitch.vue")),
9
+ [MagicFieldType.DateTimeField]: defineAsyncComponent(() => import("../components/fields/FSDateTimeField.vue")),
10
+ [MagicFieldType.IconField] : defineAsyncComponent(() => import("../components/fields/FSIconField.vue")),
11
+ [MagicFieldType.TimeField] : defineAsyncComponent(() => import("../components/fields/FSTimeField.vue")),
12
+ };
13
+
14
+ export const useMagicFieldProvider = () => {
15
+ const get = (code: keyof typeof FIELDS) => {
16
+ return FIELDS[code];
17
+ };
18
+
19
+ return {
20
+ get
21
+ };
22
+ };
package/models/magicFields.ts ADDED
@@ -0,0 +1,8 @@
1
+ export enum MagicFieldType {
2
+ NumberField = 0,
3
+ Switch = 1,
4
+ TextField = 2,
5
+ DateTimeField = 3,
6
+ IconField = 4,
7
+ TimeField = 5,
8
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dative-gpi/foundation-shared-components",
3
3
  "sideEffects": false,
4
- "version": "0.0.165",
4
+ "version": "0.0.167",
5
5
  "description": "",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -10,8 +10,8 @@
10
10
  "author": "",
11
11
  "license": "ISC",
12
12
  "dependencies": {
13
- "@dative-gpi/foundation-shared-domain": "0.0.165",
14
- "@dative-gpi/foundation-shared-services": "0.0.165",
13
+ "@dative-gpi/foundation-shared-domain": "0.0.167",
14
+ "@dative-gpi/foundation-shared-services": "0.0.167",
15
15
  "@fontsource/montserrat": "5.0.16",
16
16
  "@lexical/clipboard": "0.12.5",
17
17
  "@lexical/history": "0.12.5",
@@ -32,5 +32,5 @@
32
32
  "sass": "1.71.1",
33
33
  "sass-loader": "13.3.2"
34
34
  },
35
- "gitHead": "13beb068d8bdd9fd17bc91165916b6ed6d8c9a07"
35
+ "gitHead": "0369bb8734e0e6077fc36c2df6f70cd923020cc2"
36
36
  }
package/styles/components/fs_magic_config_field.scss ADDED
@@ -0,0 +1,13 @@
1
+ .fs-row > .fs-col:has(.v-switch) {
2
+ margin: 0 0 8px 0;
3
+ align-self: end;
4
+ }
5
+
6
+ .fs-magic-config-field-value {
7
+ min-width: 15%;
8
+ }
9
+
10
+ .fs-magic-config-field-actions {
11
+ margin: 0 0 8px 0;
12
+ align-self: end;
13
+ }
package/styles/components/index.scss CHANGED
@@ -35,6 +35,7 @@
35
35
  @import "fs_load_data_table.scss";
36
36
  @import "fs_load_tile.scss";
37
37
  @import "fs_loader.scss";
38
+ @import "fs_magic_config_field.scss";
38
39
  @import "fs_meta_field.scss";
39
40
  @import "fs_option_group.scss";
40
41
  @import "fs_pagination.scss";