aloha-vue 1.2.14 → 1.2.15

package/docs/package.json

@@ -11,7 +11,7 @@
     "build-css": "node-sass --include-path scss styles/styles.scss dist/styles/styles.css"
   },
   "dependencies": {
-    "@popperjs/core": "2.11.8",
+    "@floating-ui/vue": "^1.0.2",
     "aloha-css": "1.0.127",
     "axios": "1.4.0",
     "dompurify": "3.0.3",

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

@@ -176,6 +176,13 @@ export default {
                 name: "PageDatepicker",
               }
             },
+            {
+              id: "datepicker-range",
+              label: "DatepickerRange",
+              to: {
+                name: "PageDatepickerRange",
+              }
+            },
             {
               id: "form",
               label: "Form",

package/docs/src/mainTranslation.js

@@ -11,6 +11,7 @@ import ru from "./i18n/ru.json";
 
 import PageAAlertI18n from "./views/PageAlert/i18n/PageAAlertI18n";
 import PageARateI18n from "./views/PageRate/i18n/PageARateI18n";
+import PageDatepickerRangeI18n from "./views/Form/PageDatepickerRange/i18n/PageDatepickerRangeI18n";
 import PageShowMoreI18n from "./views/PageShowMore/i18n/PageShowMoreI18n";
 import PageTranslationI18n from "./views/PageTranslation/i18n/PageTranslationI18n";
 import PageButtonI18n from "./views/PageButton/i18n/PageButtonI18n";
@@ -46,6 +47,7 @@ export const mainTranslation = {
     ...ar,
     ...PageAAlertI18n.ar,
     ...PageARateI18n.ar,
+    ...PageDatepickerRangeI18n.ar,
     ...PageShowMoreI18n.ar,
     ...PageTranslationI18n.ar,
     ...PageButtonI18n.ar,
@@ -80,6 +82,7 @@ export const mainTranslation = {
     ...de,
     ...PageAAlertI18n.de,
     ...PageARateI18n.de,
+    ...PageDatepickerRangeI18n.de,
     ...PageShowMoreI18n.de,
     ...PageTranslationI18n.de,
     ...PageButtonI18n.de,
@@ -114,6 +117,7 @@ export const mainTranslation = {
     ...en,
     ...PageAAlertI18n.en,
     ...PageARateI18n.en,
+    ...PageDatepickerRangeI18n.en,
     ...PageShowMoreI18n.en,
     ...PageTranslationI18n.en,
     ...PageButtonI18n.en,
@@ -148,6 +152,7 @@ export const mainTranslation = {
     ...es,
     ...PageAAlertI18n.es,
     ...PageARateI18n.es,
+    ...PageDatepickerRangeI18n.es,
     ...PageShowMoreI18n.es,
     ...PageTranslationI18n.es,
     ...PageButtonI18n.es,
@@ -182,6 +187,7 @@ export const mainTranslation = {
     ...fr,
     ...PageAAlertI18n.fr,
     ...PageARateI18n.fr,
+    ...PageDatepickerRangeI18n.fr,
     ...PageShowMoreI18n.fr,
     ...PageTranslationI18n.fr,
     ...PageButtonI18n.fr,
@@ -216,6 +222,7 @@ export const mainTranslation = {
     ...hr,
     ...PageAAlertI18n.hr,
     ...PageARateI18n.hr,
+    ...PageDatepickerRangeI18n.hr,
     ...PageShowMoreI18n.hr,
     ...PageTranslationI18n.hr,
     ...PageButtonI18n.hr,
@@ -250,6 +257,7 @@ export const mainTranslation = {
     ...it,
     ...PageAAlertI18n.it,
     ...PageARateI18n.it,
+    ...PageDatepickerRangeI18n.it,
     ...PageShowMoreI18n.it,
     ...PageTranslationI18n.it,
     ...PageButtonI18n.it,
@@ -284,6 +292,7 @@ export const mainTranslation = {
     ...ru,
     ...PageAAlertI18n.ru,
     ...PageARateI18n.ru,
+    ...PageDatepickerRangeI18n.ru,
     ...PageShowMoreI18n.ru,
     ...PageTranslationI18n.ru,
     ...PageButtonI18n.ru,

package/docs/src/router/index.js

@@ -79,6 +79,11 @@ const ROUTES = [
     name: "PageAccordion",
     component: () => import(/* webpackChunkName: "PageAccordionBootstrap" */ "../views/PageAccordion/PageAccordion.vue"),
   },
+  {
+    path: "/datepicker-range",
+    name: "PageDatepickerRange",
+    component: () => import(/* webpackChunkName: "PageDatepickerRange" */ "../views/Form/PageDatepickerRange/PageDatepickerRange.vue"),
+  },
   {
     path: "/alert",
     name: "PageAlert",

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRange.js

@@ -0,0 +1,39 @@
+import AlohaPage from "../../../global/components/AlohaPage/AlohaPage.vue";
+import AlohaTableProps from "../../../global/components/AlohaTableProps/AlohaTableProps.vue";
+import ATranslation from "../../../../../src/ATranslation/ATranslation";
+import PageDatepickerRangeIdWidthDisabled from "./PageDatepickerRangeIdWidthDisabled/PageDatepickerRangeIdWidthDisabled.vue";
+import PageDatepickerRangeBasic from "./PageDatepickerRangeBasic/PageDatepickerRangeBasic.vue";
+import PageDatepickerRangeOptionsErrorsHtmlId from "./PageDatepickerRangeOptionsErrorsHtmlId/PageDatepickerRangeOptionsErrorsHtmlId.vue";
+import PageDatepickerRangeEvents from "./PageDatepickerRangeEvents/PageDatepickerRangeEvents.vue";
+import PageDatepickerRangeModelInputIdPrefixIsError from "./PageDatepickerRangeModelInputIdPrefixIsError/PageDatepickerRangeModelInputIdPrefixIsError.vue";
+
+import EventsAPI from "./compositionAPI/EventsAPI";
+import PropsAPI from "./compositionAPI/PropsAPI";
+
+export default {
+  name: "PageDatepickerRange",
+  components: {
+    AlohaPage,
+    AlohaTableProps,
+    ATranslation,
+    PageDatepickerRangeIdWidthDisabled,
+    PageDatepickerRangeBasic,
+    PageDatepickerRangeOptionsErrorsHtmlId,
+    PageDatepickerRangeEvents,
+    PageDatepickerRangeModelInputIdPrefixIsError,
+  },
+  setup() {
+    const {
+      dataProps,
+    } = PropsAPI();
+
+    const {
+      dataEvents,
+    } = EventsAPI();
+
+    return {
+      dataEvents,
+      dataProps,
+    };
+  },
+};

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRange.pug

@@ -0,0 +1,30 @@
+aloha-page(
+  page-title="DatepickerRange"
+)
+  template(
+    v-slot:body
+  )
+    a-translation(
+      tag="p"
+      html="_A_DATEPICKER_RANGE_DESCRIPTION_"
+    )
+
+    page-datepicker-range-basic
+
+    //page-datepicker-range-id-width-disabled
+    //
+    //page-datepicker-range-model-input-id-prefix-is-error
+    //
+    //page-datepicker-range-events
+    //
+    //page-datepicker-range-options-errors-html-id
+
+    //aloha-table-props(
+    //  :data="dataProps"
+    //)
+    //
+    //aloha-table-props(
+    //  table-label="Events"
+    //  :data="dataEvents"
+    //  :columns="['name', 'type', 'description']"
+    //)

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRange.vue

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

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeBasic/PageDatepickerRangeBasic.js

@@ -0,0 +1,34 @@
+import {
+  ref,
+} from "vue";
+
+import ADatepickerRange from "../../../../../../src/ui/ADatepickerRange/ADatepickerRange";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageDatepickerRangeBasic",
+  components: {
+    ADatepickerRange,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const model = ref(undefined);
+
+    return {
+      codeHtml,
+      codeJs,
+      model,
+    };
+  },
+};

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeBasic/PageDatepickerRangeBasic.pug

@@ -0,0 +1,12 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_DATEPICKER_RANGE_BASIC_HEADER_"
+  description="_A_DATEPICKER_RANGE_BASIC_DESCRIPTION_"
+  :props="['v-model', 'label']"
+)
+  a-datepicker-range(
+    v-model="model"
+    label="Aloha"
+  )
+  .a_mt_3 model: {{ model }}

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeBasic/PageDatepickerRangeBasic.vue

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

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeBasic/compositionAPI/HtmlAPI.js

@@ -0,0 +1,11 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-datepicker-range
+  v-model="model"
+  label="Aloha"
+</a-datepicker-range>
+<div class="a_mt_3">model: {{ model }}</div>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeBasic/compositionAPI/JsAPI.js

@@ -0,0 +1,25 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import ADatepickerRange from "aloha-vue/ui/ADatepickerRange/ADatepickerRange";
+
+export default {
+  name: "PageDatepickerRangeBasic",
+  components: {
+    ADatepickerRange,
+  },
+  setup() {
+    const model = ref(undefined);
+
+    return {
+      model,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeEvents/PageDatepickerRangeEvents.js

@@ -0,0 +1,46 @@
+import {
+  ref,
+} from "vue";
+
+import ADatepickerRange from "../../../../../../src/ui/ADatepickerRange/ADatepickerRange";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageDatepickerRangeOptionsEvents",
+  components: {
+    ADatepickerRange,
+    AlohaExample,
+  },
+  setup() {
+    const dateRangeModel = ref({
+      date_after: null,
+      date_before: null,
+    });
+
+    const handleFocus = () => console.log("Focused!");
+    const handleChange = () => console.log("Changed!");
+
+    const updateDateRange = newRange => {
+      dateRangeModel.value = newRange.model;
+    };
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      handleFocus,
+      updateDateRange,
+      handleChange,
+      dateRangeModel,
+      codeHtml,
+      codeJs,
+    };
+  },
+};

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeEvents/PageDatepickerRangeEvents.pug

@@ -0,0 +1,13 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_DATEPICKER_RANGE_OPTIONS_ERRORS_HTML_ID_HEADER_"
+  description="_A_DATEPICKER_RANGE_OPTIONS_ERRORS_HTML_ID_DESCRIPTION_"
+  :props="['model', 'focus', 'input', 'change']"
+)
+  a-datepicker-range(
+    :model="dateRangeModel"
+    @focus="handleFocus"
+    @input="updateDateRange"
+    @change="handleChange"
+  )

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeEvents/PageDatepickerRangeEvents.vue

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

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeEvents/compositionAPI/HtmlAPI.js

@@ -0,0 +1,12 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-datepicker-range
+  :model="dateRangeModel"
+  @focus="handleFocus"
+  @input="updateDateRange"
+  @change="handleChange">
+</a-datepicker-range>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeEvents/compositionAPI/JsAPI.js

@@ -0,0 +1,45 @@
+export default function JsAPI() {
+  const codeJs = `import { ref } from 'vue';
+  
+import ADatepickerRange from "../../../../../src/ui/ADatepickerRange/ADatepickerRange";
+
+export default {
+  name: "PageDatepickerRangeOptionsEvents",
+  components: {
+    ADatepickerRange,
+  },
+  setup() {
+    const dateRangeModel = ref({
+      date_after: null,
+      date_before: null,
+    });
+
+    const handleFocus = () => console.log("Focused!");
+    const handleChange = () => console.log("Changed!");
+
+    const updateDateRange = newRange => {
+      dateRangeModel.value = newRange.model;
+    };
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      handleFocus,
+      updateDateRange,
+      handleChange,
+      dateRangeModel,
+      codeHtml,
+      codeJs,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeIdWidthDisabled/PageDatepickerRangeIdWidthDisabled.js

@@ -0,0 +1,33 @@
+import {
+  ref,
+} from "vue";
+
+import ADatepickerRange from "../../../../../../src/ui/ADatepickerRange/ADatepickerRange";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageDatepickerRangeIdWidthDisabled",
+  components: {
+    ADatepickerRange,
+    AlohaExample,
+  },
+  setup() {
+    const isDisabled = ref(true);
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      isDisabled,
+      codeHtml,
+      codeJs,
+    };
+  },
+};

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeIdWidthDisabled/PageDatepickerRangeIdWidthDisabled.pug

@@ -0,0 +1,12 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_DATEPICKER_RANGE_ID_WIDTH_DISABLED_HEADER_"
+  description="_A_DATEPICKER_RANGE_ID_WIDTH_DISABLED_DESCRIPTION_"
+  :props="['id', 'width', 'disabled']"
+)
+  a-datepicker-range(
+    id="date5"
+    :width="350"
+    :disabled="isDisabled"
+  )

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeIdWidthDisabled/PageDatepickerRangeIdWidthDisabled.vue

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

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeIdWidthDisabled/compositionAPI/HtmlAPI.js

@@ -0,0 +1,12 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-datepicker-range
+  id="date5"
+  :width="350"
+  :model="dateRangeModel"
+  :disabled="isDisabled">
+</a-datepicker-range>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeIdWidthDisabled/compositionAPI/JsAPI.js

@@ -0,0 +1,32 @@
+export default function JsAPI() {
+  const codeJs = `import { ref } from 'vue';
+  
+import ADatepickerRange from "../../../../../src/ui/ADatepickerRange/ADatepickerRange";
+
+export default {
+  name: "PageDatepickerRangeIdWidthDisabled",
+  components: {
+    ADatepickerRange,
+  },
+  setup() {
+    const isDisabled = ref(true);
+    
+    const {
+      codeHtml,
+    } = HtmlAPI();
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      isDisabled,
+      codeHtml,
+      codeJs,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeModelInputIdPrefixIsError/PageDatepickerRangeModelInputIdPrefixIsError.js

@@ -0,0 +1,46 @@
+import {
+  ref,
+} from "vue";
+
+import ADatepickerRange from "../../../../../../src/ui/ADatepickerRange/ADatepickerRange";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageDatepickerRangeModelInputIdPrefixIsError",
+  components: {
+    ADatepickerRange,
+    AlohaExample,
+  },
+  setup() {
+    const dateRangeModel = ref({
+      date_after: null,
+      date_before: null,
+    });
+
+    const idPrefix = ref("datepicker-prefix-");
+    const isError = ref(false);
+
+    const updateDateRange = newRange => {
+      dateRangeModel.value = newRange.model;
+    };
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      dateRangeModel,
+      updateDateRange,
+      idPrefix,
+      isError,
+      codeHtml,
+      codeJs,
+    };
+  },
+};

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeModelInputIdPrefixIsError/PageDatepickerRangeModelInputIdPrefixIsError.pug

@@ -0,0 +1,13 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_DATEPICKER_RANGE_MODEL_ID_PREFIX_IS_ERROR_HEADER_"
+  description="_A_DATEPICKER_RANGE_MODEL_ID_PREFIX_IS_ERROR_DESCRIPTION_"
+  :props="['model', 'idPrefix', 'input', 'isError']"
+)
+  a-datepicker-range(
+    :model="dateRangeModel"
+    :id-prefix="idPrefix"
+    :is-error="isError"
+    @input="updateDateRange"
+  )

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeModelInputIdPrefixIsError/PageDatepickerRangeModelInputIdPrefixIsError.vue

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

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeModelInputIdPrefixIsError/compositionAPI/HtmlAPI.js

@@ -0,0 +1,12 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-datepicker-range
+  :model="dateRangeModel"
+  :id-prefix="idPrefix"
+  :is-error="isError"
+  @input="updateDateRange">
+</a-datepicker-range>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeModelInputIdPrefixIsError/compositionAPI/JsAPI.js

@@ -0,0 +1,43 @@
+export default function JsAPI() {
+  const codeJs = `import ADatepickerRange from "../../../../../src/ui/ADatepickerRange/ADatepickerRange";
+
+export default {
+  name: "PageDatepickerRangeModelInputIdPrefixIsError",
+  components: {
+    ADatepickerRange,
+  },
+  setup() {
+    const dateRangeModel = ref({
+      date_after: null,
+      date_before: null,
+    });
+
+    const idPrefix = ref("datepicker-prefix-");
+    const isError = ref(false);
+
+    const updateDateRange = newRange => {
+      dateRangeModel.value = newRange.model;
+    };
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      dateRangeModel,
+      updateDateRange,
+      idPrefix,
+      isError,
+      codeHtml,
+      codeJs,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeOptionsErrorsHtmlId/PageDatepickerRangeOptionsErrorsHtmlId.js

@@ -0,0 +1,48 @@
+import {
+  ref,
+} from "vue";
+
+import ADatepickerRange from "../../../../../../src/ui/ADatepickerRange/ADatepickerRange";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageDatepickerRangeOptionsErrorsHtmlId",
+  components: {
+    ADatepickerRange,
+    AlohaExample,
+  },
+  setup() {
+    const dateRangeModel = ref({
+      date_after: null,
+      date_before: null,
+    });
+
+    const options = ref({
+      format: "DD.MM.YY",
+    });
+    const errors = ref(["Start date is required", "End date is invalid"]);
+
+    const updateDateRange = newRange => {
+      dateRangeModel.value = newRange.model;
+    };
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      options,
+      dateRangeModel,
+      updateDateRange,
+      errors,
+      codeHtml,
+      codeJs,
+    };
+  },
+};