aloha-vue 1.0.12 → 1.0.15

package/docs/package.json

@@ -11,7 +11,7 @@
     "build-css": "node-sass --include-path scss styles/styles.scss public/styles.css"
   },
   "dependencies": {
-    "aloha-css": "1.0.10",
+    "aloha-css": "1.0.14",
     "lodash-es": "^4.17.21",
     "vue": "3.2.31",
     "vue-router": "4.0.14",

package/docs/src/App/App.js

@@ -1,3 +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";
 
@@ -8,6 +10,8 @@ import {
 
 export default defineComponent({
   components: {
+    AModalConfirm,
+    ANotification,
     TheMenu,
     TheNavbar,
   },

package/docs/src/App/App.pug

@@ -8,3 +8,6 @@ div
       style="width: calc(100vw - 280px);"
     )
       router-view
+
+  a-modal-confirm
+  a-notification

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

@@ -48,6 +48,31 @@ export default {
           name: "PageAlert",
           label: "Alert",
         },
+        {
+          id: "modal",
+          name: "PageModal",
+          label: "Modal",
+        },
+        {
+          id: "confirm",
+          name: "PageConfirm",
+          label: "Confirm",
+        },
+        {
+          id: "notification",
+          name: "PageNotification",
+          label: "Notification",
+        },
+        {
+          id: "checkbox",
+          name: "PageCheckbox",
+          label: "Checkbox",
+        },
+        {
+          id: "radio",
+          name: "PageRadio",
+          label: "Radio",
+        },
       ],
     };
   },

package/docs/src/router/index.js

@@ -59,6 +59,31 @@ const ROUTES = [
     name: "PageAlert",
     component: () => import(/* webpackChunkName: "PageAlert" */ "../views/PageAlert/PageAlert.vue"),
   },
+  {
+    path: "/modal",
+    name: "PageModal",
+    component: () => import(/* webpackChunkName: "PageModal" */ "../views/PageModal/PageModal.vue"),
+  },
+  {
+    path: "/confirm",
+    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"),
+  },
   {
     // 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

@@ -0,0 +1,32 @@
+import AModal from "../../../../src/AModal/AModal";
+
+import ConfirmAPI from "../../../../src/compositionAPI/ConfirmAPI";
+
+export default {
+  name: "PageConfirm",
+  components: {
+    AModal,
+  },
+  setup() {
+    const {
+      closeConfirm,
+      openConfirm,
+    } = ConfirmAPI();
+
+    const save = () => {
+      closeConfirm();
+    };
+
+    const openConfirmLocal = () => {
+      openConfirm({
+        headerText: "Aloha",
+        bodyHtml: "<div>Aloha <strong>Hola</strong></div>",
+        save: save,
+      });
+    };
+
+    return {
+      openConfirmLocal,
+    };
+  },
+};

package/docs/src/views/PageConfirm/PageConfirm.pug

@@ -0,0 +1,6 @@
+div
+  h1 AConfirm
+  button(
+    type="button"
+    @click="openConfirmLocal"
+  ) Open confirm

package/docs/src/views/PageConfirm/PageConfirm.vue

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

package/docs/src/views/PageModal/PageModal.js

@@ -0,0 +1,22 @@
+import AModal from "../../../../src/AModal/AModal";
+
+export default {
+  name: "PageModal",
+  components: {
+    AModal,
+  },
+  data() {
+    return {
+      isModalOpen: false,
+    };
+  },
+  methods: {
+    openModal() {
+      this.isModalOpen = true;
+    },
+
+    closeModal() {
+      this.isModalOpen = false;
+    },
+  },
+};

package/docs/src/views/PageModal/PageModal.pug

@@ -0,0 +1,11 @@
+div
+  h1 AModal
+  button(
+    type="button"
+    @click="openModal"
+  ) Open Modal
+
+  a-modal(
+    v-if="isModalOpen"
+    :close="closeModal"
+  )

package/docs/src/views/PageModal/PageModal.vue

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

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>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.12",
+  "version": "1.0.15",
   "author": "Ilia Brykin",
   "dependencies": {
     "@popperjs/core": "2.11.5",