aloha-vue 1.2.3 → 1.2.4

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 (12) hide show
  1. package/docs/src/views/PageShowMore/i18n/hr.json +2 -2
  2. package/docs/src/views/PageWizard/PageWizard.js +2 -0
  3. package/docs/src/views/PageWizard/PageWizard.pug +2 -0
  4. package/docs/src/views/PageWizard/PageWizardDemo/PageWizardDemo.js +146 -0
  5. package/docs/src/views/PageWizard/PageWizardDemo/PageWizardDemo.pug +61 -0
  6. package/docs/src/views/PageWizard/PageWizardDemo/PageWizardDemo.vue +2 -0
  7. package/docs/src/views/PageWizard/PageWizardDemo/compositionAPI/HtmlAPI.js +74 -0
  8. package/docs/src/views/PageWizard/PageWizardDemo/compositionAPI/JsAPI.js +132 -0
  9. package/docs/src/views/PageWizard/i18n/de.json +4 -3
  10. package/package.json +1 -1
  11. package/src/ATranslation/compositionAPI/HtmlAPI.js +3 -2
  12. package/src/styles/components/AWizard.scss +1 -1
package/docs/src/views/PageShowMore/i18n/hr.json CHANGED
@@ -32,8 +32,8 @@
32
32
  "_A_SHOW_MORE_GROUP_DISABLED_HEADER_": "Onemogućen",
33
33
  "_A_SHOW_MORE_GROUP_EVENTS_DESCRIPTION_": "Emit toggle omogućuje, pri promjeni statusa komponente, pozivanje metode s jednim argumentom \"isOpen\", koji predstavlja indikator otvorenog stanja komponente.",
34
34
  "_A_SHOW_MORE_GROUP_EVENTS_HEADER_": "Promjena statusa komponente (otvoreno/zatvoreno)",
35
- "_A_SHOW_MORE_GROUP_EXPOSES_DESCRIPTION_": "",
36
- "_A_SHOW_MORE_GROUP_EXPOSES_HEADER_": "Prikaz javnih property-ja i metoda korištenjem funkcije <strong>expose</strong>",
35
+ "_A_SHOW_MORE_GROUP_EXPOSES_DESCRIPTION_": "Primjer načina korištenja funkcije <strong>expose</strong> za prikaz javnih property-ja i metoda.",
36
+ "_A_SHOW_MORE_GROUP_EXPOSES_HEADER_": "Prikaz javnih property-ja i metoda korištenjem funkcije expose",
37
37
  "_A_SHOW_MORE_GROUP_HEIGHT_DESCRIPTION_": "Visina predstavlja maksimalan broj piksela nakon kojeg ostatak teksta postaje skriven.",
38
38
  "_A_SHOW_MORE_GROUP_HEIGHT_HEADER_": "Visina bloka",
39
39
  "_A_SHOW_MORE_GROUP_HTML_DESCRIPTION_": "Sadržaj komponente može se definirati u HTML formatu. Na ovaj sadržaj se primjenjuje sanitizacija.",
package/docs/src/views/PageWizard/PageWizard.js CHANGED
@@ -6,6 +6,7 @@ import PageWizardBasic from "./PageWizardBasic/PageWizardBasic.vue";
6
6
  import PageWizardButtons from "./PageWizardButtons/PageWizardButtons.vue";
7
7
  import PageWizardButtonsDisabled from "./PageWizardButtonsDisabled/PageWizardButtonsDisabled.vue";
8
8
  import PageWizardButtonsHide from "./PageWizardButtonsHide/PageWizardButtonsHide.vue";
9
+ import PageWizardDemo from "./PageWizardDemo/PageWizardDemo.vue";
9
10
  import PageWizardIsButtonsLoading from "./PageWizardIsButtonsLoading/PageWizardIsButtonsLoading.vue";
10
11
  import PageWizardIsControlOutside from "./PageWizardIsControlOutside/PageWizardIsControlOutside.vue";
11
12
  import PageWizardIsStepNumberVisible from "./PageWizardIsStepNumberVisible/PageWizardIsStepNumberVisible.vue";
@@ -38,6 +39,7 @@ export default {
38
39
  PageWizardButtons,
39
40
  PageWizardButtonsDisabled,
40
41
  PageWizardButtonsHide,
42
+ PageWizardDemo,
41
43
  PageWizardIsButtonsLoading,
42
44
  PageWizardIsControlOutside,
43
45
  PageWizardIsStepNumberVisible,
package/docs/src/views/PageWizard/PageWizard.pug CHANGED
@@ -43,6 +43,8 @@ aloha-page(
43
43
 
44
44
  page-wizard-slot
45
45
 
46
+ page-wizard-demo
47
+
46
48
  aloha-table-props(
47
49
  :data="dataProps"
48
50
  )
package/docs/src/views/PageWizard/PageWizardDemo/PageWizardDemo.js ADDED
@@ -0,0 +1,146 @@
1
+ import {
2
+ ref,
3
+ } from "vue";
4
+
5
+ import AButton from "../../../../../src/AButton/AButton";
6
+ import AInput from "../../../../../src/ui/AInput/AInput";
7
+ import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
8
+ import ASelect from "../../../../../src/ui/ASelect/ASelect";
9
+ import ASwitch from "../../../../../src/ui/ASwitch/ASwitch";
10
+ import AWizard from "../../../../../src/AWizard/AWizard";
11
+
12
+ import HtmlAPI from "./compositionAPI/HtmlAPI";
13
+ import JsAPI from "./compositionAPI/JsAPI";
14
+
15
+ import {
16
+ findIndex,
17
+ uniqueId,
18
+ } from "lodash-es";
19
+
20
+ export default {
21
+ name: "PageWizardDemo",
22
+ components: {
23
+ AButton,
24
+ AInput,
25
+ AlohaExample,
26
+ ASelect,
27
+ ASwitch,
28
+ AWizard,
29
+ },
30
+ setup() {
31
+ const {
32
+ codeHtml,
33
+ } = HtmlAPI();
34
+
35
+ const {
36
+ codeJs,
37
+ } = JsAPI();
38
+
39
+ const modelType = ref("square");
40
+ const modelStepName = ref("");
41
+ const modelStepId = ref(undefined);
42
+ const isStepsJustified = ref(true);
43
+ const types = [
44
+ {
45
+ label: "_A_WIZARD_TYPE_BASIC_",
46
+ value: "basic",
47
+ },
48
+ {
49
+ label: "_A_WIZARD_TYPE_ARROWS_",
50
+ value: "arrows",
51
+ },
52
+ {
53
+ label: "_A_WIZARD_TYPE_SQUARE_",
54
+ value: "square",
55
+ },
56
+ {
57
+ label: "_A_WIZARD_TYPE_ROUND_",
58
+ value: "round",
59
+ },
60
+ ];
61
+ const wizardSteps = ref([
62
+ {
63
+ id: "1",
64
+ slot: "step",
65
+ label: "Lorem",
66
+ },
67
+ {
68
+ id: "2",
69
+ slot: "step",
70
+ label: "ipsum",
71
+ },
72
+ {
73
+ id: "3",
74
+ slot: "step",
75
+ label: "dolor",
76
+ },
77
+ {
78
+ id: "4",
79
+ slot: "step",
80
+ label: "sit",
81
+ },
82
+ {
83
+ id: "5",
84
+ slot: "step",
85
+ label: "amet",
86
+ },
87
+ {
88
+ id: "6",
89
+ slot: "step",
90
+ label: "consectetur",
91
+ },
92
+ {
93
+ id: "7",
94
+ slot: "step",
95
+ label: "adipiscing",
96
+ },
97
+ {
98
+ id: "8",
99
+ slot: "step",
100
+ label: "elit",
101
+ },
102
+ {
103
+ id: "9",
104
+ slot: "step",
105
+ label: "Quisque",
106
+ },
107
+ {
108
+ id: "10",
109
+ slot: "step",
110
+ label: "nisl",
111
+ },
112
+ ]);
113
+ const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros,
114
+ pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus.
115
+ Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex,
116
+ in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent`;
117
+
118
+ const addStep = () => {
119
+ wizardSteps.value.push({
120
+ id: uniqueId("wizard_demo_"),
121
+ slot: "step",
122
+ label: modelStepName.value,
123
+ });
124
+ };
125
+
126
+ const deleteStep = () => {
127
+ const STEP_INDEX = findIndex(wizardSteps.value, ["id", modelStepId.value]);
128
+ wizardSteps.value.splice(STEP_INDEX, 1);
129
+ modelStepId.value = undefined;
130
+ };
131
+
132
+ return {
133
+ addStep,
134
+ codeHtml,
135
+ codeJs,
136
+ deleteStep,
137
+ isStepsJustified,
138
+ modelStepId,
139
+ modelStepName,
140
+ modelType,
141
+ text,
142
+ types,
143
+ wizardSteps,
144
+ };
145
+ },
146
+ };
package/docs/src/views/PageWizard/PageWizardDemo/PageWizardDemo.pug ADDED
@@ -0,0 +1,61 @@
1
+ aloha-example(
2
+ :code-html="codeHtml"
3
+ :code-js="codeJs"
4
+ header="_A_WIZARD_GROUP_DEMO_HEADER_"
5
+ description="_A_WIZARD_GROUP_DEMO_DESCRIPTION_"
6
+ :props="['steps', 'type']"
7
+ )
8
+ .a_columns.a_columns_count_12
9
+ .a_column.a_column_6.a_columns_count_12_touch.a_mb_5
10
+ a-switch(
11
+ v-model="isStepsJustified"
12
+ label="is-steps-justified"
13
+ )
14
+ a-select.a_mt_4(
15
+ v-model="modelType"
16
+ label="_A_WIZARD_LABEL_TYPE_"
17
+ key-id="value"
18
+ key-label="label"
19
+ :data="types"
20
+ :deselectable="false"
21
+ :translate-data="true"
22
+ )
23
+ .a_d_flex.a_mt_4
24
+ a-input(
25
+ v-model="modelStepName"
26
+ label="_A_WIZARD_STEP_NAME_"
27
+ :required="true"
28
+ )
29
+ a-button(
30
+ class="a_btn a_btn_primary a_ml_2"
31
+ :disabled="!modelStepName"
32
+ text="_A_WIZARD_BTN_ADD_STEP_"
33
+ @click="addStep"
34
+ )
35
+ .a_d_flex.a_mt_4
36
+ a-select(
37
+ v-model="modelStepId"
38
+ label="_A_WIZARD_LABEL_STEPS_"
39
+ key-id="id"
40
+ key-label="label"
41
+ :data="wizardSteps"
42
+ :search="true"
43
+ )
44
+ a-button(
45
+ class="a_btn a_btn_primary a_ml_2"
46
+ :disabled="!modelStepId || wizardSteps.length < 2"
47
+ text="_A_WIZARD_BTN_DELETE_STEP_"
48
+ @click="deleteStep"
49
+ )
50
+
51
+ a-wizard(
52
+ key-id="id"
53
+ :is-steps-justified="isStepsJustified"
54
+ :steps="wizardSteps"
55
+ :type="modelType"
56
+ )
57
+ template(
58
+ v-slot:step="{ step }"
59
+ )
60
+ h2 {{ step.label }}
61
+ p {{ text }}
package/docs/src/views/PageWizard/PageWizardDemo/PageWizardDemo.vue ADDED
@@ -0,0 +1,2 @@
1
+ <template lang="pug" src="./PageWizardDemo.pug"></template>
2
+ <script src="./PageWizardDemo.js"></script>
package/docs/src/views/PageWizard/PageWizardDemo/compositionAPI/HtmlAPI.js ADDED
@@ -0,0 +1,74 @@
1
+ export default function HtmlAPI() {
2
+ const codeHtml = `<div
3
+ class="a_columns a_columns_count_12"
4
+ >
5
+ <div
6
+ class="a_column a_column_6 a_columns_count_12_touch a_mb_5"
7
+ >
8
+ <a-switch
9
+ v-model="isStepsJustified"
10
+ label="is-steps-justified"
11
+ ></a-switch>
12
+ <a-select
13
+ v-model="modelType"
14
+ class="a_mt_4"
15
+ label="_A_WIZARD_LABEL_TYPE_"
16
+ key-id="value"
17
+ key-label="label"
18
+ :data="types"
19
+ :deselectable="false"
20
+ :translate-data="true"
21
+ ></a-select>
22
+ <div
23
+ class="a_d_flex a_mt_4"
24
+ >
25
+ <a-input
26
+ v-model="modelStepName"
27
+ label="_A_WIZARD_STEP_NAME_"
28
+ :required="true"
29
+ ></a-input>
30
+ <a-button
31
+ class="a_btn a_btn_primary a_ml_2"
32
+ :disabled="!modelStepName"
33
+ text="_A_WIZARD_BTN_ADD_STEP_"
34
+ @click="addStep"
35
+ ></a-button>
36
+ </div>
37
+ <div
38
+ class="a_d_flex a_mt_4"
39
+ >
40
+ <a-select
41
+ v-model="modelStepId"
42
+ label="_A_WIZARD_LABEL_STEPS_"
43
+ key-id="id"
44
+ key-label="label"
45
+ :data="wizardSteps"
46
+ :search="true"
47
+ ></a-select>
48
+ <a-button
49
+ class="a_btn a_btn_primary a_ml_2"
50
+ :disabled="!modelStepId || wizardSteps.length < 2"
51
+ text="_A_WIZARD_BTN_DELETE_STEP_"
52
+ @click="deleteStep"
53
+ ></a-button>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ <a-wizard
58
+ key-id="id"
59
+ :is-steps-justified="isStepsJustified"
60
+ :steps="wizardSteps"
61
+ :type="modelType"
62
+ >
63
+ <template
64
+ v-slot:step="{ step }"
65
+ >
66
+ <h2>{{ step.label }}</h2>
67
+ <p>{{ text }}</p>
68
+ </template>
69
+ </a-wizard>`;
70
+
71
+ return {
72
+ codeHtml,
73
+ };
74
+ }
package/docs/src/views/PageWizard/PageWizardDemo/compositionAPI/JsAPI.js ADDED
@@ -0,0 +1,132 @@
1
+ export default function JsAPI() {
2
+ const codeJs = `import {
3
+ ref,
4
+ } from "vue";
5
+
6
+ import AButton from "aloha-vue/src/AButton/AButton";
7
+ import AInput from "aloha-vue/src/ui/AInput/AInput";
8
+ import ASelect from "aloha-vue/src/ui/ASelect/ASelect";
9
+ import ASwitch from "aloha-vue/src/ui/ASwitch/ASwitch";
10
+ import AWizard from "aloha-vue/src/AWizard/AWizard";
11
+
12
+ export default {
13
+ name: "PageWizardDemo",
14
+ components: {
15
+ AButton,
16
+ AInput,
17
+ ASelect,
18
+ ASwitch,
19
+ AWizard,
20
+ },
21
+ setup() {
22
+ const modelType = ref("square");
23
+ const modelStepName = ref("");
24
+ const modelStepId = ref(undefined);
25
+ const isStepsJustified = ref(true);
26
+ const types = [
27
+ {
28
+ label: "_A_WIZARD_TYPE_BASIC_",
29
+ value: "basic",
30
+ },
31
+ {
32
+ label: "_A_WIZARD_TYPE_ARROWS_",
33
+ value: "arrows",
34
+ },
35
+ {
36
+ label: "_A_WIZARD_TYPE_SQUARE_",
37
+ value: "square",
38
+ },
39
+ {
40
+ label: "_A_WIZARD_TYPE_ROUND_",
41
+ value: "round",
42
+ },
43
+ ];
44
+ const wizardSteps = ref([
45
+ {
46
+ id: "1",
47
+ slot: "step",
48
+ label: "Lorem",
49
+ },
50
+ {
51
+ id: "2",
52
+ slot: "step",
53
+ label: "ipsum",
54
+ },
55
+ {
56
+ id: "3",
57
+ slot: "step",
58
+ label: "dolor",
59
+ },
60
+ {
61
+ id: "4",
62
+ slot: "step",
63
+ label: "sit",
64
+ },
65
+ {
66
+ id: "5",
67
+ slot: "step",
68
+ label: "amet",
69
+ },
70
+ {
71
+ id: "6",
72
+ slot: "step",
73
+ label: "consectetur",
74
+ },
75
+ {
76
+ id: "7",
77
+ slot: "step",
78
+ label: "adipiscing",
79
+ },
80
+ {
81
+ id: "8",
82
+ slot: "step",
83
+ label: "elit",
84
+ },
85
+ {
86
+ id: "9",
87
+ slot: "step",
88
+ label: "Quisque",
89
+ },
90
+ {
91
+ id: "10",
92
+ slot: "step",
93
+ label: "nisl",
94
+ },
95
+ ]);
96
+ const text = \`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros,
97
+ pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus.
98
+ Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex,
99
+ in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent\`;
100
+
101
+ const addStep = () => {
102
+ wizardSteps.value.push({
103
+ id: uniqueId("wizard_demo_"),
104
+ slot: "step",
105
+ label: modelStepName.value,
106
+ });
107
+ };
108
+
109
+ const deleteStep = () => {
110
+ const STEP_INDEX = findIndex(wizardSteps.value, ["id", modelStepId.value]);
111
+ wizardSteps.value.splice(STEP_INDEX, 1);
112
+ modelStepId.value = undefined;
113
+ };
114
+
115
+ return {
116
+ addStep,
117
+ deleteStep,
118
+ isStepsJustified,
119
+ modelStepId,
120
+ modelStepName,
121
+ modelType,
122
+ text,
123
+ types,
124
+ wizardSteps,
125
+ };
126
+ },
127
+ };`;
128
+
129
+ return {
130
+ codeJs,
131
+ };
132
+ }
package/docs/src/views/PageWizard/i18n/de.json CHANGED
@@ -1,4 +1,6 @@
1
1
  {
2
+ "_A_WIZARD_BTN_ADD_STEP_": "Schritt hinzufügen",
3
+ "_A_WIZARD_BTN_DELETE_STEP_": "Schritt löschen",
2
4
  "_A_WIZARD_COMPONENT_DESCRIPTION_": "_A_WIZARD_COMPONENT_DESCRIPTION_",
3
5
  "_A_WIZARD_COMPONENT_NAME_": "Wizard",
4
6
  "_A_WIZARD_GROUP_BUTTONS_DESCRIPTION_": "_A_WIZARD_GROUP_BUTTONS_DESCRIPTION_",
@@ -32,6 +34,7 @@
32
34
  "_A_WIZARD_GROUP_TYPE_DESCRIPTION_": "_A_WIZARD_GROUP_TYPE_DESCRIPTION_",
33
35
  "_A_WIZARD_GROUP_TYPE_HEADER_": "_A_WIZARD_GROUP_TYPE_HEADER_",
34
36
  "_A_WIZARD_LABEL_TYPE_": "Typ",
37
+ "_A_WIZARD_LABEL_STEPS_": "Schritte",
35
38
  "_A_WIZARD_PAGE_BACK_BTN_TEXT_": "Zurück",
36
39
  "_A_WIZARD_PAGE_FORWARD_BTN_TEXT_": "Vorwärts",
37
40
  "_A_WIZARD_PROPS_BACK_BUTTON_ATTRIBUTES_DESCRIPTION_": "_A_WIZARD_PROPS_BACK_BUTTON_ATTRIBUTES_DESCRIPTION_",
@@ -71,9 +74,7 @@
71
74
  "_A_WIZARD_STEP_2_": "Step 2",
72
75
  "_A_WIZARD_STEP_3_": "Step 3",
73
76
  "_A_WIZARD_STEP_4_": "Step 4",
74
- "_A_WIZARD_STEP_5_": "Step 5",
75
- "_A_WIZARD_STEP_6_": "Step 6",
76
- "_A_WIZARD_STEP_7_": "Step 7",
77
+ "_A_WIZARD_STEP_NAME_": "Überschrift von Schritt",
77
78
  "_A_WIZARD_TYPE_ARROWS_": "Pfeile",
78
79
  "_A_WIZARD_TYPE_BASIC_": "Basic",
79
80
  "_A_WIZARD_TYPE_ROUND_": "Kreis",
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "Vue.js"
15
15
  ],
16
16
  "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
17
- "version": "1.2.3",
17
+ "version": "1.2.4",
18
18
  "author": {
19
19
  "name": "Ilia Brykin",
20
20
  "email": "brykin.ilia@gmail.com"
package/src/ATranslation/compositionAPI/HtmlAPI.js CHANGED
@@ -15,6 +15,7 @@ import {
15
15
  import {
16
16
  forEach,
17
17
  isArray,
18
+ isNil,
18
19
  isPlainObject,
19
20
  isUndefined,
20
21
  } from "lodash-es";
@@ -160,8 +161,8 @@ export default function HtmlAPI(props, {
160
161
  }
161
162
  });
162
163
 
163
- HTML_LOCAL_OPTIONS.html = htmlCombined || undefined;
164
- HTML_LOCAL_OPTIONS.dataTranslateHtml = dataTranslateHtml || undefined;
164
+ HTML_LOCAL_OPTIONS.html = isNil(htmlCombined) ? undefined : htmlCombined;
165
+ HTML_LOCAL_OPTIONS.dataTranslateHtml = isNil(dataTranslateHtml) ? undefined : dataTranslateHtml;
165
166
  }
166
167
 
167
168
  return HTML_LOCAL_OPTIONS;
package/src/styles/components/AWizard.scss CHANGED
@@ -329,7 +329,7 @@ $a-wizard-step-focus-box-shadow: 0 0 0 0.25rem rgba(var(--a_wizard_s
329
329
  margin-right: auto;
330
330
  margin-bottom: .5rem;
331
331
  transition: all 0.5s ease-in-out;
332
- width: 40px;
332
+ min-width: 40px;
333
333
  height: 40px;
334
334
  text-align: center;
335
335
  background: var(--a_wizard_border_color);