aloha-vue 1.0.346 → 1.0.348

package/README.md

@@ -24,6 +24,7 @@ $ npm install aloha-vue
 ``` bash
 # at aloha/docs
 # serve with hot reloading at localhost:9000
+# node v18.16
 $ npm run serve
 ```
 

package/docs/package.json

@@ -11,46 +11,48 @@
     "build-css": "node-sass --include-path scss styles/styles.scss public/styles.css"
   },
   "dependencies": {
-    "@popperjs/core": "2.11.7",
-    "aloha-css": "1.0.98",
-    "dompurify": "2.4.1",
-    "fecha": "^4.2.3",
+    "@popperjs/core": "2.11.8",
+    "axios": "1.4.0",
+    "aloha-css": "1.0.103",
+    "dompurify": "3.0.3",
+    "fecha": "4.2.3",
     "highlight.js": "11.8.0",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "4.17.21",
+    "moment": "2.29.4",
     "tiny-emitter": "2.1.0",
-    "tinymce": "6.2.0",
+    "tinymce": "6.5.1",
     "vue": "3.3.4",
-    "vue-router": "4.2.0"
+    "vue-router": "4.2.2"
   },
   "devDependencies": {
-    "@babel/core": "7.17.10",
-    "@babel/eslint-parser": "7.17.0",
+    "@babel/core": "7.22.5",
+    "@babel/eslint-parser": "7.22.5",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@webpack-cli/generators": "2.4.2",
-    "acorn": "8.7.0",
+    "@webpack-cli/generators": "3.0.7",
+    "acorn": "8.9.0",
     "acorn-jsx": "5.3.2",
-    "babel-loader": "8.2.4",
+    "babel-loader": "9.1.2",
     "clean-webpack-plugin": "4.0.0",
-    "copy-webpack-plugin": "10.2.4",
-    "css-loader": "6.7.1",
-    "eslint": "8.13.0",
-    "eslint-plugin-vue": "8.6.0",
-    "eslint-webpack-plugin": "3.1.1",
+    "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.8.1",
+    "eslint": "8.43.0",
+    "eslint-plugin-vue": "9.15.0",
+    "eslint-webpack-plugin": "4.0.1",
     "file-loader": "6.2.0",
-    "html-webpack-plugin": "5.5.0",
-    "loader-utils": "3.2.0",
-    "node-sass": "7.0.1",
+    "html-webpack-plugin": "5.5.3",
+    "loader-utils": "3.2.1",
+    "node-sass": "8.0.0",
     "null-loader": "4.0.1",
     "pug": "3.0.2",
-    "regenerator-runtime": "0.13.9",
-    "sass-loader": "12.6.0",
-    "source-map-loader": "3.0.1",
-    "style-loader": "3.3.1",
-    "vue-eslint-parser": "8.3.0",
-    "vue-loader": "17.0.0",
-    "vue-pug-loader": "1.1.26",
-    "webpack": "5.73.0",
-    "webpack-cli": "4.10.0",
-    "webpack-dev-server": "4.9.3"
+    "regenerator-runtime": "0.13.11",
+    "sass-loader": "13.3.2",
+    "source-map-loader": "4.0.1",
+    "style-loader": "3.3.3",
+    "vue-eslint-parser": "9.3.1",
+    "vue-loader": "17.2.2",
+    "vue-pug-loader": "1.1.29",
+    "webpack": "5.87.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1"
   }
 }

package/docs/src/components/TheMenu/TheMenu.vue

@@ -1,3 +1,3 @@
 <template lang="pug" src="./TheMenu.pug"></template>
 <script src="./TheMenu.js"></script>
-<style lang="scss" src="./TheMenu.scss"></style>
+<!--<style lang="scss" src="./TheMenu.scss"></style>-->

package/docs/src/views/PageAlert/PageAlertTypes/PageAlertTypes.pug

@@ -35,6 +35,11 @@ aloha-example(
     :is-visible="true"
     type="secondary"
   )
+  a-alert(
+    html="Alert tertiary"
+    :is-visible="true"
+    type="tertiary"
+  )
   a-alert(
     html="Alert dark"
     :is-visible="true"

package/docs/src/views/PageAlert/PageAlertTypes/compositionAPI/HtmlAPI.js

@@ -35,6 +35,12 @@ export default function HtmlAPI() {
   type="secondary"
 >
 </a-alert>
+<a-alert 
+  html="Alert tertiary"
+  :is-visible="true"
+  type="tertiary"
+>
+</a-alert>
 <a-alert 
   html="Alert dark" 
   :is-visible="true" 

package/docs/src/views/PageButton/PageButton.js

@@ -15,14 +15,15 @@ import PageButtonLoading from "./PageButtonLoading/PageButtonLoading.vue";
 import PageButtonOutline from "./PageButtonOutline/PageButtonOutline.vue";
 import PageButtonSafeHtml from "./PageButtonSafeHtml/PageButtonSafeHtml.vue";
 import PageButtonSizes from "./PageButtonSizes/PageButtonSizes.vue";
+import PageButtonSlotAppend from "./PageButtonSlotAppend/PageButtonSlotAppend.vue";
 import PageButtonSlotDefault from "./PageButtonSlotDefault/PageButtonSlotDefault.vue";
+import PageButtonSlotPrepend from "./PageButtonSlotPrepend/PageButtonSlotPrepend.vue";
+import PageButtonSlotTitle from "./PageButtonSlotTitle/PageButtonSlotTitle.vue";
+import PageButtonSwitch from "./PageButtonSwitch/PageButtonSwitch.vue";
 import PageButtonTextAfterBefore from "./PageButtonTextAfterBefore/PageButtonTextAfterBefore.vue";
 import PageButtonTextObject from "./PageButtonTextObject/PageButtonTextObject.vue";
 import PageButtonTitleArray from "./PageButtonTitleArray/PageButtonTitleArray.vue";
 import PageButtonTitleHtml from "./PageButtonTitleHtml/PageButtonTitleHtml.vue";
-import PageButtonSlotPrepend from "./PageButtonSlotPrepend/PageButtonSlotPrepend.vue";
-import PageButtonSlotAppend from "./PageButtonSlotAppend/PageButtonSlotAppend.vue";
-import PageButtonSlotTitle from "./PageButtonSlotTitle/PageButtonSlotTitle.vue";
 
 import ExposesAPI from "./compositionAPI/ExposesAPI";
 import EventsAPI from "./compositionAPI/EventsAPI";
@@ -51,6 +52,7 @@ export default {
     PageButtonSafeHtml,
     PageButtonSizes,
     PageButtonSlotDefault,
+    PageButtonSwitch,
     PageButtonTextAfterBefore,
     PageButtonTextObject,
     PageButtonTitleArray,

package/docs/src/views/PageButton/PageButton.pug

@@ -51,6 +51,8 @@ aloha-page(
 
     page-button-slot-title
 
+    page-button-switch
+
     page-button-complex
 
     aloha-table-props(

package/docs/src/views/PageButton/PageButtonAriaDisabled/PageButtonAriaDisabled.pug

@@ -16,6 +16,12 @@ aloha-example(
     :aria-disabled="true"
     @click="onAlert('secondary')"
   )
+  a-button(
+    class="a_btn a_btn_tertiary a_ml_2"
+    text="tertiary"
+    :aria-disabled="true"
+    @click="onAlert('tertiary')"
+  )
   a-button(
     class="a_btn a_btn_success a_ml_2"
     text="success"
@@ -35,7 +41,7 @@ aloha-example(
     @click="onAlert('warning')"
   )
   a-button(
-    class="a_btn a_btn__danger a_ml_2"
+    class="a_btn a_btn_danger a_ml_2"
     text="danger"
     :aria-disabled="true"
     @click="onAlert('danger')"
@@ -47,11 +53,24 @@ aloha-example(
     @click="onAlert('dark')"
   )
   a-button(
-    class="a_btn a_btn__light a_ml_2"
+    class="a_btn a_btn_light a_ml_2"
     text="light"
     :aria-disabled="true"
     @click="onAlert('light')"
   )
+  a-button(
+    class="a_ml_2"
+    text="switch"
+    :is-switch="true"
+    :aria-disabled="true"
+  )
+  a-button(
+    class="a_ml_2"
+    text="switch active"
+    :is-switch="true"
+    :model-switch="true"
+    :aria-disabled="true"
+  )
   a-button(
     class="a_btn a_btn_outline_primary a_ml_2"
     text="outline-primary"
@@ -64,6 +83,12 @@ aloha-example(
     :aria-disabled="true"
     @click="onAlert('outline-secondary')"
   )
+  a-button(
+    class="a_btn a_btn_outline_tertiary a_ml_2"
+    text="outline-tertiary"
+    :aria-disabled="true"
+    @click="onAlert('outline-tertiary')"
+  )
   a-button(
     class="a_btn a_btn_outline_success a_ml_2"
     text="outline-success"

package/docs/src/views/PageButton/PageButtonAriaDisabled/compositionAPI/HtmlAPI.js

@@ -13,6 +13,13 @@ export default function HtmlAPI() {
   @click="onAlert('secondary')"
 >
 </a-button>
+<a-button
+  class="a_btn a_btn_tertiary a_ml_2"
+  text="tertiary"
+  :aria-disabled="true"
+  @click="onAlert('tertiary')"
+>
+</a-button>
 <a-button
   class="a_btn a_btn_success a_ml_2"
   text="success"
@@ -35,7 +42,7 @@ export default function HtmlAPI() {
 >
 </a-button>
 <a-button
-  class="a_btn a_btn__danger a_ml_2"
+  class="a_btn a_btn_danger a_ml_2"
   text="danger"
   :aria-disabled="true"
   @click="onAlert('danger')"
@@ -49,12 +56,24 @@ export default function HtmlAPI() {
 >
 </a-button>
 <a-button
-  class="a_btn a_btn__light a_ml_2"
+  class="a_btn a_btn_light a_ml_2"
   text="light"
   :aria-disabled="true"
   @click="onAlert('light')"
->
-</a-button>
+></a-button>
+<a-button
+  class="a_ml_2"
+  text="switch"
+  :is-switch="true"
+  :aria-disabled="true"
+></a-button>
+<a-button
+  class="a_ml_2"
+  text="switch active"
+  :is-switch="true"
+  :model-switch="true"
+  :aria-disabled="true"
+></a-button>
 <a-button
   class="a_btn a_btn_outline_primary a_ml_2"
   text="outline-primary"
@@ -69,6 +88,13 @@ export default function HtmlAPI() {
   @click="onAlert('outline-secondary')"
 >
 </a-button>
+<a-button
+  class="a_btn a_btn_outline_tertiary a_ml_2"
+  text="outline-tertiary"
+  :aria-disabled="true"
+  @click="onAlert('outline-tertiary')"
+>
+</a-button>
 <a-button
   class="a_btn a_btn_outline_success a_ml_2"
   text="outline-success"

package/docs/src/views/PageButton/PageButtonBasic/PageButtonBasic.pug

@@ -4,50 +4,53 @@ aloha-example(
   header="_A_BASIC_USAGE_"
   description="_A_BUTTON_GROUP_BASIC_DESCRIPTION_"
 )
-  .a_columns.a_columns_count_12
-    .a_column.a_column_4.a_column_12_tablet
-      a-button(
-        class="a_btn a_btn_link"
-        text="link"
-        @click="onAlert('link')"
-      )
-      a-button(
-        class="a_btn a_btn_primary a_ml_2"
-        text="primary"
-        @click="onAlert('primary')"
-      )
-      a-button(
-        class="a_btn a_btn_secondary a_ml_2"
-        text="secondary"
-        @click="onAlert('secondary')"
-      )
-      a-button(
-        class="a_btn a_btn_success a_ml_2"
-        text="success"
-        @click="onAlert('success')"
-      )
-      a-button(
-        class="a_btn a_btn_info a_ml_2"
-        text="info"
-        @click="onAlert('info')"
-      )
-      a-button(
-        class="a_btn a_btn_warning a_ml_2"
-        text="warning"
-        @click="onAlert('warning')"
-      )
-      a-button(
-        class="a_btn a_btn_danger a_ml_2"
-        text="danger"
-        @click="onAlert('danger')"
-      )
-      a-button(
-        class="a_btn a_btn_dark a_ml_2"
-        text="dark"
-        @click="onAlert('dark')"
-      )
-      a-button(
-        class="a_btn a_btn_light a_ml_2"
-        text="light"
-        @click="onAlert('light')"
-      )
+  a-button(
+    class="a_btn a_btn_link"
+    text="link"
+    @click="onAlert('link')"
+  )
+  a-button(
+    class="a_btn a_btn_primary a_ml_2"
+    text="primary"
+    @click="onAlert('primary')"
+  )
+  a-button(
+    class="a_btn a_btn_secondary a_ml_2"
+    text="secondary"
+    @click="onAlert('secondary')"
+  )
+  a-button(
+    class="a_btn a_btn_tertiary a_ml_2"
+    text="tertiary"
+    @click="onAlert('tertiary')"
+  )
+  a-button(
+    class="a_btn a_btn_success a_ml_2"
+    text="success"
+    @click="onAlert('success')"
+  )
+  a-button(
+    class="a_btn a_btn_info a_ml_2"
+    text="info"
+    @click="onAlert('info')"
+  )
+  a-button(
+    class="a_btn a_btn_warning a_ml_2"
+    text="warning"
+    @click="onAlert('warning')"
+  )
+  a-button(
+    class="a_btn a_btn_danger a_ml_2"
+    text="danger"
+    @click="onAlert('danger')"
+  )
+  a-button(
+    class="a_btn a_btn_dark a_ml_2"
+    text="dark"
+    @click="onAlert('dark')"
+  )
+  a-button(
+    class="a_btn a_btn_light a_ml_2"
+    text="light"
+    @click="onAlert('light')"
+  )

package/docs/src/views/PageButton/PageButtonBasic/compositionAPI/HtmlAPI.js

@@ -17,6 +17,12 @@ export default function HtmlAPI() {
   @click="onAlert('secondary')"
 >
 </a-button>
+<a-button
+  class="a_btn a_btn_tertiary a_ml_2"
+  text="tertiary"
+  @click="onAlert('tertiary')"
+>
+</a-button>
 <a-button
   class="a_btn a_btn_success a_ml_2"
   text="success"

package/docs/src/views/PageButton/PageButtonDisabled/PageButtonDisabled.pug

@@ -16,6 +16,12 @@ aloha-example(
     :disabled="true"
     @click="onAlert('secondary')"
   )
+  a-button(
+    class="a_btn a_btn_tertiary a_ml_2"
+    text="tertiary"
+    :disabled="true"
+    @click="onAlert('tertiary')"
+  )
   a-button(
     class="a_btn a_btn_success a_ml_2"
     text="success"
@@ -35,7 +41,7 @@ aloha-example(
     @click="onAlert('warning')"
   )
   a-button(
-    class="a_btn a_btn__danger a_ml_2"
+    class="a_btn a_btn_danger a_ml_2"
     text="danger"
     :disabled="true"
     @click="onAlert('danger')"
@@ -47,11 +53,24 @@ aloha-example(
     @click="onAlert('dark')"
   )
   a-button(
-    class="a_btn a_btn__light a_ml_2"
+    class="a_btn a_btn_light a_ml_2"
     text="light"
     :disabled="true"
     @click="onAlert('light')"
   )
+  a-button(
+    class="a_ml_2"
+    text="switch"
+    :is-switch="true"
+    :disabled="true"
+  )
+  a-button(
+    class="a_ml_2"
+    text="switch active"
+    :is-switch="true"
+    :model-switch="true"
+    :disabled="true"
+  )
   a-button(
     class="a_btn a_btn_outline_primary a_ml_2"
     text="outline-primary"
@@ -64,6 +83,12 @@ aloha-example(
     :disabled="true"
     @click="onAlert('outline-secondary')"
   )
+  a-button(
+    class="a_btn a_btn_outline_tertiary a_ml_2"
+    text="outline-tertiary"
+    :disabled="true"
+    @click="onAlert('outline-tertiary')"
+  )
   a-button(
     class="a_btn a_btn_outline_success a_ml_2"
     text="outline-success"

package/docs/src/views/PageButton/PageButtonDisabled/compositionAPI/HtmlAPI.js

@@ -13,6 +13,13 @@ export default function HtmlAPI() {
   @click="onAlert('secondary')"
 >
 </a-button>
+<a-button
+  class="a_btn a_btn_tertiary a_ml_2"
+  text="tertiary"
+  :disabled="true"
+  @click="onAlert('tertiary')"
+>
+</a-button>
 <a-button
   class="a_btn a_btn_success a_ml_2"
   text="success"
@@ -35,7 +42,7 @@ export default function HtmlAPI() {
 >
 </a-button>
 <a-button
-  class="a_btn a_btn__danger a_ml_2"
+  class="a_btn a_btn_danger a_ml_2"
   text="danger"
   :disabled="true"
   @click="onAlert('danger')"
@@ -49,12 +56,24 @@ export default function HtmlAPI() {
 >
 </a-button>
 <a-button
-  class="a_btn a_btn__light a_ml_2"
+  class="a_btn a_btn_light a_ml_2"
   text="light"
   :disabled="true"
   @click="onAlert('light')"
->
-</a-button>
+></a-button>
+<a-button
+  class="a_ml_2"
+  text="switch"
+  :is-switch="true"
+  :disabled="true"
+></a-button>
+<a-button
+  class="a_ml_2"
+  text="switch active"
+  :is-switch="true"
+  :model-switch="true"
+  :disabled="true"
+></a-button>
 <a-button
   class="a_btn a_btn_outline_primary a_ml_2"
   text="outline-primary"
@@ -69,6 +88,13 @@ export default function HtmlAPI() {
   @click="onAlert('outline-secondary')"
 >
 </a-button>
+<a-button
+  class="a_btn a_btn_outline_tertiary a_ml_2"
+  text="outline-tertiary"
+  :disabled="true"
+  @click="onAlert('outline-tertiary')"
+>
+</a-button>
 <a-button
   class="a_btn a_btn_outline_success a_ml_2"
   text="outline-success"

package/docs/src/views/PageButton/PageButtonOutline/PageButtonOutline.pug

@@ -14,6 +14,11 @@ aloha-example(
     text="outline-secondary"
     @click="onAlert('outline-secondary')"
   )
+  a-button(
+    class="a_btn a_btn_outline_tertiary a_ml_2"
+    text="outline-tertiary"
+    @click="onAlert('outline-tertiary')"
+  )
   a-button(
     class="a_btn a_btn_outline_success a_ml_2"
     text="outline-success"

package/docs/src/views/PageButton/PageButtonOutline/compositionAPI/HtmlAPI.js

@@ -11,6 +11,12 @@ export default function HtmlAPI() {
   @click="onAlert('outline-secondary')"
 >
 </a-button>
+<a-button
+  class="a_btn a_btn_outline_tertiary a_ml_2"
+  text="outline-tertiary"
+  @click="onAlert('outline-tertiary')"
+>
+</a-button>
 <a-button
   class="a_btn a_btn_outline_success a_ml_2"
   text="outline-success"

package/docs/src/views/PageButton/PageButtonSwitch/PageButtonSwitch.js

@@ -0,0 +1,39 @@
+import {
+  ref,
+} from "vue";
+
+import AButton from "../../../../../src/AButton/AButton";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageButtonSwitch",
+  components: {
+    AButton,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const modelSwitch = ref(false);
+
+    const toggleModelSwitch = () => {
+      modelSwitch.value = !modelSwitch.value;
+    };
+
+    return {
+      codeHtml,
+      codeJs,
+      modelSwitch,
+      toggleModelSwitch,
+    };
+  },
+};

package/docs/src/views/PageButton/PageButtonSwitch/PageButtonSwitch.pug

@@ -0,0 +1,12 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_BUTTON_GROUP_SWITCH_HEADER_"
+  description="_A_BUTTON_GROUP_SWITCH_DESCRIPTION_"
+)
+  a-button(
+    :is-switch="true"
+    :model-switch="modelSwitch"
+    text="(***)"
+    @click="toggleModelSwitch"
+  )

package/docs/src/views/PageButton/PageButtonSwitch/PageButtonSwitch.vue

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

package/docs/src/views/PageButton/PageButtonSwitch/compositionAPI/HtmlAPI.js

@@ -0,0 +1,12 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-button
+  :is-switch="true"
+  :model-switch="modelSwitch"
+  text="(***)"
+  @click="toggleModelSwitch"
+></a-button>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageButton/PageButtonSwitch/compositionAPI/JsAPI.js

@@ -0,0 +1,30 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import AButton from "aloha-vue/src/AButton/AButton";
+    
+export default {
+  name: "PageButtonSwitch",
+  components: {
+    AButton,
+  },
+  setup() {
+    const modelSwitch = ref(false);
+
+    const toggleModelSwitch = () => {
+      modelSwitch.value = !modelSwitch.value;
+    };
+
+    return {
+      modelSwitch,
+      toggleModelSwitch,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageLink/PageLinkClass/PageLinkClass.pug

@@ -20,6 +20,11 @@ aloha-example(
     text="secondary"
     href="https://github.com/"
   )
+  a-link(
+    class="a_btn a_btn_tertiary a_ml_2"
+    text="tertiary"
+    href="https://github.com/"
+  )
   a-link(
     class="a_btn a_btn_success a_ml_2"
     text="success"

package/docs/src/views/PageLink/PageLinkClass/compositionAPI/HtmlAPI.js

@@ -17,6 +17,12 @@ export default function HtmlAPI() {
   href="https://github.com/"
 >
 </a-link>
+<a-link
+  class="a_btn a_btn_tertiary a_ml_2"
+  text="tertiary"
+  href="https://github.com/"
+>
+</a-link>
 <a-link
   class="a_btn a_btn_success a_ml_2"
   text="success"

package/docs/src/views/PageLink/PageLinkDisabled/PageLinkDisabled.pug

@@ -23,6 +23,12 @@ aloha-example(
     :disabled="true"
     href="https://github.com/"
   )
+  a-link(
+    class="a_btn a_btn_tertiary a_ml_2"
+    text="tertiary"
+    :disabled="true"
+    href="https://github.com/"
+  )
   a-link(
     class="a_btn a_btn_success a_ml_2"
     text="success"
@@ -71,6 +77,12 @@ aloha-example(
     :disabled="true"
     href="https://github.com/"
   )
+  a-link(
+    class="a_btn a_btn_outline_tertiary a_ml_2"
+    text="outline-tertiary"
+    :disabled="true"
+    href="https://github.com/"
+  )
   a-link(
     class="a_btn a_btn_outline_success a_ml_2"
     text="outline-success"

package/docs/src/views/PageLink/PageLinkDisabled/compositionAPI/HtmlAPI.js

@@ -20,6 +20,13 @@ export default function HtmlAPI() {
   href="https://github.com/"
 >
 </a-link>
+<a-link
+  class="a_btn a_btn_tertiary a_ml_2"
+  text="tertiary"
+  :disabled="true"
+  href="https://github.com/"
+>
+</a-link>
 <a-link
   class="a_btn a_btn_success a_ml_2"
   text="success"
@@ -76,6 +83,13 @@ export default function HtmlAPI() {
   href="https://github.com/"
 >
 </a-link>
+<a-link
+  class="a_btn a_btn_outline_tertiary a_ml_2"
+  text="outline-tertiary"
+  :disabled="true"
+  href="https://github.com/"
+>
+</a-link>
 <a-link
   class="a_btn a_btn_outline_success a_ml_2"
   text="outline-success"

package/docs/src/views/PageLink/PageLinkOutline/PageLinkOutline.pug

@@ -15,6 +15,11 @@ aloha-example(
     text="outline-secondary"
     href="https://github.com/"
   )
+  a-link(
+    class="a_btn a_btn_outline_tertiary a_ml_2"
+    text="outline-tertiary"
+    href="https://github.com/"
+  )
   a-link(
     class="a_btn a_btn_outline_success a_ml_2"
     text="outline-success"

package/docs/src/views/PageLink/PageLinkOutline/compositionAPI/HtmlAPI.js

@@ -11,6 +11,12 @@ export default function HtmlAPI() {
   href="https://github.com/"
 >
 </a-link>
+<a-link
+  class="a_btn a_btn_outline_tertiary a_ml_2"
+  text="outline-tertiary"
+  href="https://github.com/"
+>
+</a-link>
 <a-link
   class="a_btn a_btn_outline_success a_ml_2"
   text="outline-success"

package/docs/webpack.config.js

@@ -177,7 +177,10 @@ module.exports = (env, options) => {
       },
       compress: true,
       port: 9000,
-      onBeforeSetupMiddleware: function (devServer) {
+      client: {
+        overlay: false
+      },
+      setupMiddlewares: function (middlewares, devServer) {
         if (!devServer) {
           throw new Error('webpack-dev-server is not defined');
         }
@@ -187,6 +190,8 @@ module.exports = (env, options) => {
             res.json({ custom: "response" });
           }, 3000);
         });
+
+        return middlewares;
       },
     },
     ignoreWarnings: [/Failed to parse source map/],

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.0.346",
+  "version": "1.0.348",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/AButton/AButton.js

@@ -11,6 +11,7 @@ import ClickAPI from "./comositionAPI/ClickAPI";
 import ComponentLocalAPI from "./comositionAPI/ComponentLocalAPI";
 import HtmlTitleAPI from "./comositionAPI/HtmlTitleAPI";
 import LoadingAPI from "./comositionAPI/LoadingAPI";
+import SwitchAPI from "./comositionAPI/SwitchAPI";
 import TextAPI from "./comositionAPI/TextAPI";
 import TitleAPI from "./comositionAPI/TitleAPI";
 
@@ -98,6 +99,11 @@ export default {
       required: false,
       default: () => uniqueId("a_btn_"),
     },
+    isSwitch: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
     isTitleHtml: {
       type: Boolean,
       required: false,
@@ -119,6 +125,11 @@ export default {
       required: false,
       default: "a_spinner_small",
     },
+    modelSwitch: {
+      type: Boolean,
+      required: false,
+      default: undefined,
+    },
     prevent: {
       type: Boolean,
       required: false,
@@ -232,6 +243,11 @@ export default {
       ariaLabelAttributes,
     } = AriaLabelAPI(props);
 
+    const {
+      isSwitchActive,
+      switchClass,
+    } = SwitchAPI(props);
+
     return {
       ariaLabelAttributes,
       buttonRef,
@@ -239,10 +255,12 @@ export default {
       htmlTitleAttributes,
       isLoadingLeft,
       isLoadingRight,
-      isTextOrHtmlVisible,
+      isSwitchActive,
       isTextOrHtmlScreenReaderVisible,
+      isTextOrHtmlVisible,
       isTitleVisible,
       onClick,
+      switchClass,
     };
   },
   render() {
@@ -255,6 +273,7 @@ export default {
       id: this.id,
       class: [
         "aloha_btn",
+        this.switchClass,
         this.class,
         {
           inactive: this.ariaDisabled,
@@ -264,6 +283,7 @@ export default {
       tabindex: this.tabindex,
       disabled: this.disabled,
       ariaDisabled: this.ariaDisabled,
+      "aria-pressed": this.isSwitchActive,
       // TODO: ATable
       isAllRowsSelected: undefined,
       onClick: this.onClick,

package/src/AButton/comositionAPI/SwitchAPI.js

@@ -0,0 +1,33 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+const SWITCH_CLASS = "a_btn a_btn_switch";
+
+export default function SwitchAPI(props) {
+  const isSwitch = toRef(props, "isSwitch");
+  const modelSwitch = toRef(props, "modelSwitch");
+
+  const isSwitchActive = computed(() => {
+    if (isSwitch.value) {
+      return !!modelSwitch.value;
+    }
+    return undefined;
+  });
+
+  const switchClass = computed(() => {
+    if (isSwitch.value) {
+      if (modelSwitch.value) {
+        return `${ SWITCH_CLASS } a_btn_switch_active`;
+      }
+      return SWITCH_CLASS;
+    }
+    return undefined;
+  });
+
+  return {
+    isSwitchActive,
+    switchClass,
+  };
+}

package/src/ADropdown/ADropdown.js

@@ -71,7 +71,7 @@ export default {
     buttonClass: {
       type: [String, Object],
       required: false,
-      default: "a_btn a_btn_secondary dropdown_button",
+      default: "a_btn a_btn_secondary",
     },
     buttonTag: {
       type: String,

package/src/ATable/compositionAPI/ScrollControlAPI.js

@@ -22,6 +22,8 @@ export default function ScrollControlAPI(props, { emit }, {
   const columnActionsWidth = toRef(props, "columnActionsWidth");
   const isActionColumnVisible = toRef(props, "isActionColumnVisible");
 
+  let changingTableWidth = false;
+
   const isColumnVisible = ({ column }) => {
     if (column.isRender === false) {
       return false;
@@ -156,8 +158,12 @@ export default function ScrollControlAPI(props, { emit }, {
     // since we are observing only a single element, so we access the first element in entries array
     const RECT = entries[0].contentRect;
     if (tableWidth.value !== RECT.width) {
-      tableWidth.value = RECT.width;
-      checkVisibleColumns();
+      if (!changingTableWidth) {
+        changingTableWidth = true;
+        tableWidth.value = RECT.width;
+        checkVisibleColumns();
+        changingTableWidth = false;
+      }
     }
   });