aloha-vue 1.0.15 → 1.0.18

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.14",
+    "@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/components/TheMenu/TheMenu.js

@@ -73,6 +73,21 @@ export default {
           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

@@ -84,6 +84,21 @@ const ROUTES = [
     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/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/PageSelect/PageSelect.js

@@ -0,0 +1,59 @@
+import ASelect from "../../../../src/ui/ASelect/ASelect";
+
+export default {
+  name: "PageSelect",
+  components: {
+    ASelect,
+  },
+  data() {
+    return {
+      model: undefined,
+      modelArr: undefined,
+      modelArr2: undefined,
+      data: [
+        {
+          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",
+        },
+      ],
+    };
+  },
+  methods: {
+    getLabel({ item }) {
+      return `callback: ${ item.label }`;
+    },
+  },
+};

package/docs/src/views/PageSelect/PageSelect.pug

@@ -0,0 +1,53 @@
+div
+  h1 ASelect
+  a-select(
+    v-model="model"
+    :data="data"
+    key-id="id"
+    key-label="label"
+    label="Test label"
+    type="select"
+    :search="true"
+    key-group="group"
+    sort-order-group="desc"
+  )
+  div model: {{ model }}
+  a-select(
+    v-model="model"
+    :data="data"
+    key-id="id"
+    :key-label-callback="getLabel"
+    label="Test label callback"
+    type="select"
+    :search="true"
+    sort-order="desc"
+  )
+
+  br
+  a-select(
+    v-model="modelArr"
+    :data="data"
+    key-id="id"
+    key-label="label"
+    label="Test label multiselect"
+    type="multiselect"
+    :search="true"
+    :is-select-all="true"
+    :is-deselect-all="true"
+  )
+  div modelArr: {{ modelArr }}
+
+  br
+  a-select(
+    v-model="modelArr2"
+    :data="data"
+    key-id="id"
+    key-label="label"
+    label="Test label multiselect2"
+    type="multiselect"
+    :search="true"
+    :is-select-all="true"
+    :is-deselect-all="true"
+    :is-selection-closeable="false"
+  )
+  div modelArr2: {{ modelArr2 }}

package/docs/src/views/PageSelect/PageSelect.vue

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

package/docs/src/views/PageSpinner/PageSpinner.pug

@@ -1,12 +1,10 @@
 div
   h1 PageSpinner
   a-spinner
+  div
+    button.a_btn.a_btn_primary
+      a-spinner.a_spinner_small
+      span Click me
 
-  a-spinner(
-    type-color="primary"
-  )
-
-  a-spinner(
-    type-color="warning"
-    type="grow"
-  )
+  div
+    a-spinner.a_spinner_large

package/docs/styles/styles.scss

@@ -6,12 +6,6 @@ html {
   box-sizing: inherit;
 }
 
-a, button {
-  &:focus {
-    box-shadow: inset green 0 0 1px 4px;
-  }
-}
-
 body {
   margin: 0;
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.15",
+  "version": "1.0.18",
   "author": "Ilia Brykin",
   "dependencies": {
     "@popperjs/core": "2.11.5",
-    "aloha-css": "1.0.10",
+    "aloha-css": "1.0.25",
     "lodash-es": "^4.17.21",
     "vue": "3.2.37"
   }