aloha-vue 1.0.13 → 1.0.16

package/docs/package.json

@@ -11,7 +11,8 @@
     "build-css": "node-sass --include-path scss styles/styles.scss public/styles.css"
   },
   "dependencies": {
-    "aloha-css": "1.0.11",
+    "@popperjs/core": "2.11.6",
+    "aloha-css": "1.0.25",
     "lodash-es": "^4.17.21",
     "vue": "3.2.31",
     "vue-router": "4.0.14",

package/docs/src/App/App.js

@@ -1,4 +1,5 @@
 import AModalConfirm from "../../../src/AModalConfirm/AModalConfirm";
+import ANotification from "../../../src/ANotification/ANotification";
 import TheMenu from "../components/TheMenu/TheMenu.vue";
 import TheNavbar from "../components/TheNavbar/TheNavbar.vue";
 
@@ -10,6 +11,7 @@ import {
 export default defineComponent({
   components: {
     AModalConfirm,
+    ANotification,
     TheMenu,
     TheNavbar,
   },

package/docs/src/App/App.pug

@@ -9,4 +9,5 @@ div
     )
       router-view
 
-  a-modal-confirm
+  a-modal-confirm
+  a-notification

package/docs/src/components/TheMenu/TheMenu.js

@@ -58,6 +58,36 @@ export default {
           name: "PageConfirm",
           label: "Confirm",
         },
+        {
+          id: "notification",
+          name: "PageNotification",
+          label: "Notification",
+        },
+        {
+          id: "checkbox",
+          name: "PageCheckbox",
+          label: "Checkbox",
+        },
+        {
+          id: "radio",
+          name: "PageRadio",
+          label: "Radio",
+        },
+        {
+          id: "select",
+          name: "PageSelect",
+          label: "Select",
+        },
+        {
+          id: "form",
+          name: "PageForm",
+          label: "Form",
+        },
+        {
+          id: "dropdown",
+          name: "PageDropdown",
+          label: "Dropdown",
+        },
       ],
     };
   },

package/docs/src/router/index.js

@@ -69,6 +69,36 @@ const ROUTES = [
     name: "PageConfirm",
     component: () => import(/* webpackChunkName: "PageConfirm" */ "../views/PageConfirm/PageConfirm.vue"),
   },
+  {
+    path: "/notification",
+    name: "PageNotification",
+    component: () => import(/* webpackChunkName: "PageNotification" */ "../views/PageNotification/PageNotification.vue"),
+  },
+  {
+    path: "/checkbox",
+    name: "PageCheckbox",
+    component: () => import(/* webpackChunkName: "PageCheckbox" */ "../views/PageCheckbox/PageCheckbox.vue"),
+  },
+  {
+    path: "/radio",
+    name: "PageRadio",
+    component: () => import(/* webpackChunkName: "PageRadio" */ "../views/PageRadio/PageRadio.vue"),
+  },
+  {
+    path: "/select",
+    name: "PageSelect",
+    component: () => import(/* webpackChunkName: "PageSelect" */ "../views/PageSelect/PageSelect.vue"),
+  },
+  {
+    path: "/form",
+    name: "PageForm",
+    component: () => import(/* webpackChunkName: "PageForm" */ "../views/PageForm/PageForm.vue"),
+  },
+  {
+    path: "/dropdown",
+    name: "PageDropdown",
+    component: () => import(/* webpackChunkName: "PageDropdown" */ "../views/PageDropdown/PageDropdown.vue"),
+  },
   {
     // If the routing configuration '*' reports an error, replace it with '/: catchAll(. *)'
     // caught Error: Catch all routes ("*") must now be defined using a param with a custom regexp

package/docs/src/views/PageCheckbox/PageCheckbox.js

@@ -0,0 +1,35 @@
+import ACheckbox from "../../../../src/ui/ACheckbox/ACheckbox";
+import AOneCheckbox from "../../../../src/ui/AOneCheckbox/AOneCheckbox";
+
+export default {
+  name: "PageCheckbox",
+  components: {
+    ACheckbox,
+    AOneCheckbox,
+  },
+  data() {
+    return {
+      model: false,
+      model1: false,
+      modelArr: undefined,
+      data: [
+        {
+          label: "Aloha 1",
+          id: "aloha_1",
+        },
+        {
+          label: "Aloha 2",
+          id: "aloha_2",
+        },
+        {
+          label: "Aloha 3",
+          id: "aloha_3",
+        },
+        {
+          label: "Aloha 4",
+          id: "aloha_4",
+        },
+      ],
+    };
+  },
+};

package/docs/src/views/PageCheckbox/PageCheckbox.pug

@@ -0,0 +1,78 @@
+div
+  h1 ACheckbox
+  a-one-checkbox(
+    v-model="model"
+    label="aloha one checkbox"
+  )
+  div model: {{ model }}
+  a-one-checkbox(
+    v-model="model1"
+    label="aloha one checkbox"
+    :is-width-auto="true"
+  )
+  div model1: {{ model1 }}
+  a-checkbox(
+    v-model="modelArr"
+    :data="data"
+    key-id="id"
+    key-label="label"
+    label="Test label"
+  )
+  div modelArr:
+    pre {{ modelArr }}
+
+  .a_custom_control.a_custom_checkbox
+    input.a_custom_control_input(
+      id="checkbox_0"
+      type="checkbox"
+      value="0"
+    )
+    label.a_custom_control_label(
+      for="checkbox_0"
+    ) Aloha
+
+  .a_custom_control.a_custom_checkbox
+    input.a_custom_control_input(
+      id="checkbox_1"
+      type="checkbox"
+      value="1"
+      :indeterminate="true"
+    )
+    label.a_custom_control_label(
+      for="checkbox_1"
+    ) Aloha indeterminate
+
+  .a_custom_control.a_custom_checkbox
+    input.a_custom_control_input(
+      id="checkbox_2"
+      type="checkbox"
+      value="1"
+      :disabled="true"
+    )
+    label.a_custom_control_label(
+      for="checkbox_2"
+    ) Aloha
+
+  .a_custom_control.a_custom_checkbox
+    input.a_custom_control_input(
+      id="checkbox_3"
+      type="checkbox"
+      value="1"
+      :checked="true"
+      :disabled="true"
+    )
+    label.a_custom_control_label(
+      for="checkbox_3"
+    ) Aloha
+
+  .a_custom_control.a_custom_checkbox
+    input.a_custom_control_input(
+      id="checkbox_4"
+      type="checkbox"
+      value="1"
+      :indeterminate="true"
+      :disabled="true"
+    )
+    label.a_custom_control_label(
+      for="checkbox_4"
+    ) Aloha

package/docs/src/views/PageCheckbox/PageCheckbox.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageCheckbox.pug"></template>
+<script src="./PageCheckbox.js"></script>

package/docs/src/views/PageConfirm/PageConfirm.js

@@ -14,7 +14,6 @@ export default {
     } = ConfirmAPI();
 
     const save = () => {
-      console.log("Aloha");
       closeConfirm();
     };
 

package/docs/src/views/PageDropdown/PageDropdown.js

@@ -0,0 +1,13 @@
+import ADropdown from "../../../../src/ADropdown/ADropdown";
+
+export default {
+  name: "PageDropdown",
+  components: {
+    ADropdown,
+  },
+  setup() {
+    return {
+
+    };
+  },
+};

package/docs/src/views/PageDropdown/PageDropdown.pug

@@ -0,0 +1,29 @@
+div
+  h1 ADropdown
+
+  a-dropdown(
+    button-class: "a_btn a_btn_link",
+  )
+    template(
+      v-slot:button
+    )
+      span Click me
+
+    template(
+      v-slot:dropdown
+    )
+      li
+        button.a_dropdown__item(
+          type="button"
+        ) Item 1
+      li.a_dropdown__divider
+      li
+        button.a_dropdown__item(
+          type="button"
+        ) Item 2
+      li
+        a.a_dropdown__item(
+          href="#"
+        ) Item 3
+
+  button.a_btn.a_btn_primary.a_ml_2 Test

package/docs/src/views/PageDropdown/PageDropdown.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageDropdown.pug"></template>
+<script src="./PageDropdown.js"></script>

package/docs/src/views/PageForm/PageForm.js

@@ -0,0 +1,200 @@
+import AForm from "../../../../src/ui/AForm/AForm";
+
+export default {
+  name: "PageForm",
+  components: {
+    AForm,
+  },
+  data() {
+    return {
+      model: undefined,
+      selectData: [
+        {
+          label: "Aloha 1",
+          id: "aloha_1",
+          group: "group 1",
+        },
+        {
+          label: "Aloha 2",
+          id: "aloha_2",
+        },
+        {
+          label: "Aloha 3",
+          id: "aloha_3",
+          group: "group 1",
+        },
+        {
+          label: "Aloha 4",
+          id: "aloha_4",
+        },
+        {
+          label: "Aloha 5",
+          id: "aloha_5",
+          group: "group 2",
+        },
+        {
+          label: "AlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAloha 6",
+          id: "aloha_6",
+          group: "group 2",
+        },
+        {
+          label: "AlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAloha 7",
+          id: "aloha_7",
+          group: "group 2",
+        },
+        {
+          label: "AlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAlohaAloha 8",
+          id: "aloha_8",
+        },
+      ],
+
+      errors: undefined,
+    };
+  },
+  computed: {
+    data() {
+      return [
+        {
+          type: "text",
+          label: "Aloha 1",
+          id: "aloha1",
+          classColumn: "a_column_8",
+          required: true,
+        },
+        {
+          type: "text",
+          label: "Aloha 2",
+          id: "aloha2",
+          classColumn: "a_column_4",
+          helpText: "ALOHA help!!!",
+        },
+        {
+          type: "select",
+          label: "Aloha 3",
+          id: "aloha3",
+          classColumn: "a_column_5",
+          keyId: "id",
+          keyLabel: "label",
+          search: true,
+          keyGroup: "group",
+          data: this.selectData,
+          helpText: "ALOHA help!!!",
+        },
+        {
+          type: "text",
+          label: "Aloha 4",
+          id: "aloha4",
+          classColumn: "a_column_4",
+          dependencies: [
+            {
+              id: "aloha3",
+              value: "aloha_1",
+            },
+          ],
+        },
+        {
+          type: "text",
+          label: "Aloha 5",
+          id: "aloha5",
+          classColumn: "a_column_4",
+          dependencies: {
+            id: "aloha3",
+            value: "aloha_2",
+          },
+        },
+        {
+          type: "textarea",
+          label: "Aloha 6",
+          id: "aloha6",
+          classColumn: "a_column_12",
+          helpText: "ALOHA help!!!",
+        },
+        {
+          type: "switch",
+          label: "Aloha 7",
+          id: "aloha7",
+          classColumn: "a_column_5",
+          helpText: "ALOHA help!!!",
+        },
+        {
+          type: "oneCheckbox",
+          label: "Aloha 8",
+          id: "aloha8",
+          classColumn: "a_column_5",
+          helpText: "ALOHA help!!!",
+        },
+        {
+          type: "checkbox",
+          label: "Aloha 9",
+          id: "aloha9",
+          classColumn: "a_column_6",
+          keyId: "id",
+          keyLabel: "label",
+          data: this.selectData,
+          helpText: "ALOHA help!!!",
+        },
+        {
+          type: "radio",
+          label: "Aloha 10",
+          id: "aloha10",
+          classColumn: "a_column_6",
+          keyId: "id",
+          keyLabel: "label",
+          data: this.selectData,
+          helpText: "ALOHA help!!!",
+        },
+        {
+          type: "fieldset",
+          label: "Aloha 11",
+          id: "aloha11",
+          classColumn: "a_column_8",
+          helpText: "ALOHA help!!!",
+          children: [
+            {
+              type: "text",
+              label: "Aloha 12",
+              id: "aloha12",
+              classColumn: "a_column_4",
+            },
+            {
+              type: "text",
+              label: "Aloha 13",
+              id: "aloha13",
+              classColumn: "a_column_8",
+            },
+          ],
+        },
+        {
+          type: "template",
+          id: "aloha14",
+          classColumn: "a_column_8",
+          html: "<strong>TEMPLATE</strong>",
+        },
+      ];
+    },
+  },
+  methods: {
+    validate() {
+      const TEXT_INVALID = "Example invalid text";
+      this.errors = {
+        aloha1: [TEXT_INVALID, TEXT_INVALID],
+        aloha2: [TEXT_INVALID],
+        aloha3: [TEXT_INVALID],
+        aloha4: [TEXT_INVALID],
+        aloha5: [TEXT_INVALID],
+        aloha6: [TEXT_INVALID],
+        aloha7: [TEXT_INVALID],
+        aloha8: [TEXT_INVALID],
+        aloha9: [TEXT_INVALID],
+        aloha10: [TEXT_INVALID],
+        aloha11: [TEXT_INVALID],
+        aloha12: [TEXT_INVALID],
+        aloha13: [TEXT_INVALID],
+      };
+    },
+
+    reset() {
+      this.errors = undefined;
+    },
+  },
+};

package/docs/src/views/PageForm/PageForm.pug

@@ -0,0 +1,31 @@
+div
+  h1 AForm
+
+  button.a_btn.a_btn_primary(
+    type="button"
+    @click="validate"
+  ) Validation
+  button.a_btn.a_btn_secondary.a_ml_2(
+    type="button"
+    @click="reset"
+  ) Reset
+  a-form(
+    v-model="model"
+    :data="data"
+    :errors="errors"
+    id-prefix="test_"
+  )
+    template(
+      v-slot:formPrepend
+    )
+      div
+        strong SLOT "formPrepend"
+
+    template(
+      v-slot:formAppend
+    )
+      div
+        strong SLOT "formAppend"
+
+  br
+  pre {{ model }}

package/docs/src/views/PageForm/PageForm.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageForm.pug"></template>
+<script src="./PageForm.js"></script>

package/docs/src/views/PageInput/PageInput.js

@@ -1,5 +1,5 @@
 import AInput from "../../../../src/ui/AInput/AInput";
-import ATextarea from "../../../../src/ATextarea/ATextarea";
+import ATextarea from "../../../../src/ui/ATextarea/ATextarea";
 
 
 export default {
@@ -12,6 +12,7 @@ export default {
     return {
       model1: "aloha",
       model2: "hola",
+      model3: "",
     };
   },
   methods: {

package/docs/src/views/PageInput/PageInput.pug

@@ -22,4 +22,15 @@ div
   div model2:
   pre {{ model2 }}
 
+  h2 Textarea 2
+    a-textarea(
+      id="textarea3"
+      v-model="model3"
+      type="text"
+      label="Textarea 2"
+      :required="true"
+    )
+    div model3:
+    pre {{ model3 }}
+
 

package/docs/src/views/PageNotification/PageNotification.js

@@ -0,0 +1,34 @@
+import ANotificationAPI from "../../../../src/compositionAPI/ANotificationAPI";
+
+export default {
+  name: "PageNotification",
+  setup() {
+    const {
+      addNotification,
+    } = ANotificationAPI();
+
+    const addNotificationLocal = type => {
+      addNotification({
+        text: type,
+        type,
+      });
+    };
+
+    return {
+      addNotificationLocal,
+    };
+  },
+  data() {
+    return {
+      types: [
+        "primary",
+        "secondary",
+        "success",
+        "danger",
+        "warning",
+        "info",
+        "dark",
+      ],
+    };
+  },
+};

package/docs/src/views/PageNotification/PageNotification.pug

@@ -0,0 +1,9 @@
+div
+  h1 ANotification
+  button.a_btn.a_mr_2(
+    v-for="type in types"
+    :key="type"
+    :class="'a_btn_' + type"
+    type="button"
+    @click="addNotificationLocal(type)"
+  ) Add Notification {{ type }}

package/docs/src/views/PageNotification/PageNotification.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageNotification.pug"></template>
+<script src="./PageNotification.js"></script>

package/docs/src/views/PageRadio/PageRadio.js

@@ -0,0 +1,31 @@
+import ARadio from "../../../../src/ui/ARadio/ARadio";
+
+export default {
+  name: "PageRadio",
+  components: {
+    ARadio,
+  },
+  data() {
+    return {
+      model: undefined,
+      data: [
+        {
+          label: "Aloha 1",
+          id: "aloha_1",
+        },
+        {
+          label: "Aloha 2",
+          id: "aloha_2",
+        },
+        {
+          label: "Aloha 3",
+          id: "aloha_3",
+        },
+        {
+          label: "Aloha 4",
+          id: "aloha_4",
+        },
+      ],
+    };
+  },
+};

package/docs/src/views/PageRadio/PageRadio.pug

@@ -0,0 +1,54 @@
+div
+  h1 ARadio
+  a-radio(
+    v-model="model"
+    :data="data"
+    key-id="id"
+    key-label="label"
+    label="Test label"
+  )
+  div model: {{ model }}
+
+  .a_custom_control.a_custom_radio
+    input.a_custom_control_input(
+      id="checkbox_0"
+      type="radio"
+      value="0"
+    )
+    label.a_custom_control_label(
+      for="checkbox_0"
+    ) Aloha
+
+  .a_custom_control.a_custom_radio
+    input.a_custom_control_input(
+      id="checkbox_1"
+      type="radio"
+      value="0"
+      :checked="true"
+    )
+    label.a_custom_control_label(
+      for="checkbox_1"
+    ) Aloha
+
+  .a_custom_control.a_custom_radio
+    input.a_custom_control_input(
+      id="checkbox_2"
+      type="radio"
+      value="0"
+      :checked="true"
+      :disabled="true"
+    )
+    label.a_custom_control_label(
+      for="checkbox_2"
+    ) Aloha
+
+  .a_custom_control.a_custom_radio
+    input.a_custom_control_input(
+      id="checkbox_3"
+      type="radio"
+      value="0"
+      :disabled="true"
+    )
+    label.a_custom_control_label(
+      for="checkbox_3"
+    ) Aloha

package/docs/src/views/PageRadio/PageRadio.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageRadio.pug"></template>
+<script src="./PageRadio.js"></script>