aloha-vue 1.2.15 → 1.2.17

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

@@ -1,13 +1,12 @@
 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 PageDatepickerRangeCustomFirstDay from "./PageDatepickerRangeCustomFirstDay/PageDatepickerRangeCustomFirstDay.vue";
+import PageDatepickerRangeDisabledVariants from "./PageDatepickerRangeDisabledVariants/PageDatepickerRangeDisabledVariants.vue";
+import PageDatepickerRangeFormatCustomization from "./PageDatepickerRangeFormatCustomization/PageDatepickerRangeFormatCustomization.vue";
+import PageDatepickerRangeHelpText from "./PageDatepickerRangeHelpText/PageDatepickerRangeHelpText.vue";
 
-import EventsAPI from "./compositionAPI/EventsAPI";
 import PropsAPI from "./compositionAPI/PropsAPI";
 
 export default {
@@ -16,23 +15,18 @@ export default {
     AlohaPage,
     AlohaTableProps,
     ATranslation,
-    PageDatepickerRangeIdWidthDisabled,
     PageDatepickerRangeBasic,
-    PageDatepickerRangeOptionsErrorsHtmlId,
-    PageDatepickerRangeEvents,
-    PageDatepickerRangeModelInputIdPrefixIsError,
+    PageDatepickerRangeCustomFirstDay,
+    PageDatepickerRangeDisabledVariants,
+    PageDatepickerRangeFormatCustomization,
+    PageDatepickerRangeHelpText,
   },
   setup() {
     const {
       dataProps,
     } = PropsAPI();
 
-    const {
-      dataEvents,
-    } = EventsAPI();
-
     return {
-      dataEvents,
       dataProps,
     };
   },

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

@@ -11,20 +11,14 @@ aloha-page(
 
     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
+    page-datepicker-range-custom-first-day
 
-    //aloha-table-props(
-    //  :data="dataProps"
-    //)
-    //
-    //aloha-table-props(
-    //  table-label="Events"
-    //  :data="dataEvents"
-    //  :columns="['name', 'type', 'description']"
-    //)
+    page-datepicker-range-disabled-variants
+
+    page-datepicker-range-format-customization
+
+    page-datepicker-range-help-text
+
+    aloha-table-props(
+      :data="dataProps"
+    )

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

@@ -1,8 +1,8 @@
 aloha-example(
   :code-html="codeHtml"
   :code-js="codeJs"
-  header="_A_DATEPICKER_RANGE_BASIC_HEADER_"
-  description="_A_DATEPICKER_RANGE_BASIC_DESCRIPTION_"
+  header="_PAGE_DATEPICKER_RANGE_BASIC_HEADER_"
+  description="_PAGE_DATEPICKER_RANGE_BASIC_DESCRIPTION_"
   :props="['v-model', 'label']"
 )
   a-datepicker-range(

package/docs/src/views/Form/PageDatepickerRange/{PageDatepickerRangeIdWidthDisabled/PageDatepickerRangeIdWidthDisabled.js → PageDatepickerRangeCustomFirstDay/PageDatepickerRangeCustomFirstDay.js}

@@ -9,25 +9,26 @@ import HtmlAPI from "./compositionAPI/HtmlAPI";
 import JsAPI from "./compositionAPI/JsAPI";
 
 export default {
-  name: "PageDatepickerRangeIdWidthDisabled",
+  name: "PageDatepickerRangeCustomFirstDay",
   components: {
     ADatepickerRange,
     AlohaExample,
   },
   setup() {
-    const isDisabled = ref(true);
-
     const {
       codeHtml,
     } = HtmlAPI();
+
     const {
       codeJs,
     } = JsAPI();
 
+    const model = ref(undefined);
+
     return {
-      isDisabled,
       codeHtml,
       codeJs,
+      model,
     };
   },
 };

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

@@ -0,0 +1,13 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_PAGE_DATEPICKER_RANGE_CUSTOM_FIRST_DAY_HEADER_"
+  description="_PAGE_DATEPICKER_RANGE_CUSTOM_FIRST_DAY_DESCRIPTION_"
+  :props="['v-model', 'label', 'firstDayOfWeek']"
+)
+  a-datepicker-range(
+    v-model="model"
+    label="_PAGE_DATEPICKER_RANGE_CUSTOM_FIRST_DAY_EXAMPLE_"
+    :first-day-of-week=4
+  )
+

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

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

package/docs/src/views/Form/PageDatepickerRange/{PageDatepickerRangeModelInputIdPrefixIsError → PageDatepickerRangeCustomFirstDay}/compositionAPI/HtmlAPI.js

@@ -1,9 +1,8 @@
 export default function HtmlAPI() {
   const codeHtml = `<a-datepicker-range
-  :model="dateRangeModel"
-  :id-prefix="idPrefix"
-  :is-error="isError"
-  @input="updateDateRange">
+  v-model="model"
+  label="_PAGE_DATEPICKER_RANGE_CUSTOM_FIRST_DAY_EXAMPLE_"
+  first-day-of-week=4
 </a-datepicker-range>`;
 
   return {

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeCustomFirstDay/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: "PageDatepickerRangeCustomFirstDay",
+  components: {
+    ADatepickerRange,
+  },
+  setup() {
+    const model = ref(undefined);
+
+    return {
+      model,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/{PageDatepickerRangeModelInputIdPrefixIsError/PageDatepickerRangeModelInputIdPrefixIsError.js → PageDatepickerRangeDisabledVariants/PageDatepickerRangeDisabledVariants.js}

@@ -9,38 +9,26 @@ import HtmlAPI from "./compositionAPI/HtmlAPI";
 import JsAPI from "./compositionAPI/JsAPI";
 
 export default {
-  name: "PageDatepickerRangeModelInputIdPrefixIsError",
+  name: "PageDatepickerRangeDisabledVariants",
   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();
 
+    const model = ref(undefined);
+
     return {
-      dateRangeModel,
-      updateDateRange,
-      idPrefix,
-      isError,
       codeHtml,
       codeJs,
+      model,
     };
   },
 };

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

@@ -0,0 +1,19 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_PAGE_DATEPICKER_RANGE_DISABLED_VARIANTS_HEADER_"
+  description="_PAGE_DATEPICKER_RANGE_DISABLED_VARIANTS_DESCRIPTION_"
+  :props="['v-model', 'disabled', 'disabledFrom', 'disabledUntil']"
+)
+  a-datepicker-range(
+    v-model="model"
+    :disabled="true"
+  )
+  a-datepicker-range(
+    v-model="model"
+    :disabled-from="true"
+  )
+  a-datepicker-range(
+    v-model="model"
+    :disabled-until="true"
+  )

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

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

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

@@ -0,0 +1,18 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-datepicker-range
+ v-model="model"
+  :disabled="true">
+</a-datepicker-range>
+<a-datepicker-range
+ v-model="model"
+  :disabled-from="true">
+</a-datepicker-range>
+<a-datepicker-range
+ v-model="model"
+  :disabled-until="true">
+</a-datepicker-range>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeDisabledVariants/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: "PageDatepickerRangeDisabledVariants",
+  components: {
+    ADatepickerRange,
+  },
+  setup() {
+    const model = ref(undefined);
+
+    return {
+      model,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/Form/PageDatepickerRange/{PageDatepickerRangeEvents/PageDatepickerRangeEvents.js → PageDatepickerRangeFormatCustomization/PageDatepickerRangeFormatCustomization.js}

@@ -9,38 +9,26 @@ import HtmlAPI from "./compositionAPI/HtmlAPI";
 import JsAPI from "./compositionAPI/JsAPI";
 
 export default {
-  name: "PageDatepickerRangeOptionsEvents",
+  name: "PageDatepickerRangeFormatCustomization",
   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();
 
+    const model = ref(undefined);
+
     return {
-      handleFocus,
-      updateDateRange,
-      handleChange,
-      dateRangeModel,
       codeHtml,
       codeJs,
+      model,
     };
   },
 };

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

@@ -0,0 +1,12 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_PAGE_DATEPICKER_RANGE_FORMAT_CUSTOMIZATION_HEADER_"
+  description="_PAGE_DATEPICKER_RANGE_FORMAT_CUSTOMIZATION_DESCRIPTION_"
+  :props="['v-model', 'format', 'formatSave']"
+)
+  a-datepicker-range(
+    v-model="model"
+    format="DD.MM.YY"
+    format-save="YY-MM-DD"
+  )

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

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

package/docs/src/views/Form/PageDatepickerRange/{PageDatepickerRangeIdWidthDisabled → PageDatepickerRangeFormatCustomization}/compositionAPI/HtmlAPI.js

@@ -1,9 +1,8 @@
 export default function HtmlAPI() {
   const codeHtml = `<a-datepicker-range
-  id="date5"
-  :width="350"
-  :model="dateRangeModel"
-  :disabled="isDisabled">
+  v-model="model"
+  format="DD.MM.YY"
+  format-save="YY-MM-DD"
 </a-datepicker-range>`;
 
   return {

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeFormatCustomization/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/{PageDatepickerRangeOptionsErrorsHtmlId/PageDatepickerRangeOptionsErrorsHtmlId.js → PageDatepickerRangeHelpText/PageDatepickerRangeHelpText.js}

@@ -9,40 +9,26 @@ import HtmlAPI from "./compositionAPI/HtmlAPI";
 import JsAPI from "./compositionAPI/JsAPI";
 
 export default {
-  name: "PageDatepickerRangeOptionsErrorsHtmlId",
+  name: "PageDatepickerRangeHelpText",
   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();
 
+    const model = ref(undefined);
+
     return {
-      options,
-      dateRangeModel,
-      updateDateRange,
-      errors,
       codeHtml,
       codeJs,
+      model,
     };
   },
 };

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

@@ -0,0 +1,12 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_PAGE_DATEPICKER_RANGE_HELP_TEXT_HEADER_"
+  description="_PAGE_DATEPICKER_RANGE_HELP_TEXT_DESCRIPTION_"
+  :props="['v-model', 'label', 'helpText']"
+)
+  a-datepicker-range(
+    v-model="model"
+    label="Aloha"
+    help-text="Aloha helpText"
+  )

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

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

package/docs/src/views/Form/PageDatepickerRange/{PageDatepickerRangeEvents → PageDatepickerRangeHelpText}/compositionAPI/HtmlAPI.js

@@ -1,9 +1,8 @@
 export default function HtmlAPI() {
   const codeHtml = `<a-datepicker-range
-  :model="dateRangeModel"
-  @focus="handleFocus"
-  @input="updateDateRange"
-  @change="handleChange">
+  v-model="model"
+  label="Aloha"
+  help-text="Aloha helpText"
 </a-datepicker-range>`;
 
   return {

package/docs/src/views/Form/PageDatepickerRange/PageDatepickerRangeHelpText/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: "PageDatepickerRangeHelpText",
+  components: {
+    ADatepickerRange,
+  },
+  setup() {
+    const model = ref(undefined);
+
+    return {
+      model,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}