aloha-vue 1.0.345 → 1.0.347

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,
+  };
+}