aloha-vue 1.2.232 → 1.2.234

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

@@ -172,6 +172,13 @@ export default function ComponentItemsAPI() {
               name: "PageJson",
             }
           },
+          {
+            id: "PageOneCheckbox",
+            label: "One checkbox",
+            to: {
+              name: "PageOneCheckbox",
+            }
+          },
           {
             id: "radio",
             label: "Radio",
@@ -193,6 +200,13 @@ export default function ComponentItemsAPI() {
               name: "PageSelect",
             }
           },
+          {
+            id: "PageTextarea",
+            label: "Textarea",
+            to: {
+              name: "PageTextarea",
+            }
+          },
           {
             id: "tinyMce",
             label: "TinyMce",

package/docs/src/global/components/AlohaPage/AlohaPage.pug

@@ -1,10 +1,12 @@
-#aloha_page
-  a-page-tab-title(
-    v-if="pageTitle"
-    :title="pageTitle"
-  )
-  h1 {{ pageTitle }}
-
-  slot(
-    name="body"
-  )
+#aloha_page
+  a-page-tab-title(
+    v-if="pageTitle"
+    :title="pageTitle"
+  )
+  h1(
+    v-html="pageTitle"
+  )
+
+  slot(
+    name="body"
+  )

package/docs/src/i18n/ar.json

@@ -1,5 +1,6 @@
 {
   "_A_BASIC_USAGE_": "الاستخدام الأساسي",
+  "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "كائن يحتوي على متغيرات لاستبدالها في قالب الترجمة. يُستخدم لاستبدال القيم في نصوص الترجمة بشكل ديناميكي. على سبيل المثال، إذا كانت سلسلة الترجمة تحتوي على عناصر نائبة مثل <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>، والتي تُترجم إلى <strong>\"مرحبًا <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>، يمكنك تمرير كائن مثل <strong>{ <span lang=\"en\">foo</span>: \"أبج\", bar: \"123\" }</strong>، وستكون النتيجة هي الترجمة <strong>\"مرحبًا أبج: 123\"</strong>.",
   "_A_TRANSLATION_PROPS_ALWAYS_TRANSLATE_DESCRIPTION_": "يحدد ما إذا كان يمكن تعطيل الترجمات لهذا المكون. إذا تم تعيينه على true، فلا يمكن إيقاف الترجمات، ولن يتم عرض العناصر النائبة بدلاً من ذلك.",
   "_ALOHA_TABLE_COLUMN_DEFAULT_": "إعداد سابق",
   "_ALOHA_TABLE_COLUMN_DESCRIPTION_": "وصف",

package/docs/src/i18n/de.json

@@ -1,5 +1,6 @@
 {
   "_A_BASIC_USAGE_": "Grundlegende Verwendung",
+  "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Ein Objekt, das Variablen für die Ersetzung im Übersetzungstemplate enthält. Es wird verwendet, um Werte in Übersetzungsstrings dynamisch zu ersetzen. Zum Beispiel, wenn der Übersetzungsstring Platzhalter wie <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong> enthält, was als <strong>\"Willkommen <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong> übersetzt wird, können Sie ein Objekt wie <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong> übergeben, und das Ergebnis wird die Übersetzung <strong>\"Willkommen abc: 123\"</strong> sein.",
   "_A_TRANSLATION_PROPS_ALWAYS_TRANSLATE_DESCRIPTION_": "Legt fest, ob Übersetzungen für diese Komponente deaktiviert werden können. Wenn auf true gesetzt, können Übersetzungen nicht deaktiviert werden und Platzhalter werden stattdessen nicht angezeigt.",
   "_ALOHA_TABLE_COLUMN_DEFAULT_": "Default",
   "_ALOHA_TABLE_COLUMN_DESCRIPTION_": "Beschreibung",

package/docs/src/i18n/en.json

@@ -1,5 +1,6 @@
 {
   "_A_BASIC_USAGE_": "Basic usage",
+  "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "An object that contains variables for substitution in the translation template. It is used for dynamically replacing values in translation strings. For example, if the translation string has placeholders like <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, which is translated as <strong>\"Welcome <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, you can pass an object like <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong>, and the result will be the translation <strong>\"Welcome abc: 123\"</strong>.",
   "_A_TRANSLATION_PROPS_ALWAYS_TRANSLATE_DESCRIPTION_": "Determines whether translations for this component can be disabled. If set to true, translations cannot be turned off, and placeholders will not be shown instead.",
   "_ALOHA_TABLE_COLUMN_DEFAULT_": "Default",
   "_ALOHA_TABLE_COLUMN_DESCRIPTION_": "Description",

package/docs/src/i18n/es.json

@@ -1,5 +1,6 @@
 {
   "_A_BASIC_USAGE_": "Uso básico",
+  "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Un objeto que contiene variables para la sustitución en la plantilla de traducción. Se utiliza para reemplazar dinámicamente valores en las cadenas de traducción. Por ejemplo, si la cadena de traducción tiene marcadores de posición como <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, que se traduce como <strong>\"Bienvenido <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, puede pasar un objeto como <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong>, y el resultado será la traducción <strong>\"Bienvenido abc: 123\"</strong>.",
   "_A_TRANSLATION_PROPS_ALWAYS_TRANSLATE_DESCRIPTION_": "Determina si las traducciones para este componente se pueden desactivar. Si se establece en true, las traducciones no se pueden desactivar y en su lugar no se mostrarán los marcadores de posición.",
   "_ALOHA_TABLE_COLUMN_DEFAULT_": "Por defecto",
   "_ALOHA_TABLE_COLUMN_DESCRIPTION_": "Descripción",

package/docs/src/i18n/fr.json

@@ -1,5 +1,6 @@
 {
   "_A_BASIC_USAGE_": "Utilisation de base",
+  "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Un objet qui contient des variables pour la substitution dans le modèle de traduction. Il est utilisé pour remplacer dynamiquement les valeurs dans les chaînes de traduction. Par exemple, si la chaîne de traduction contient des espaces réservés comme <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, qui est traduit par <strong>\"Bienvenue <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, vous pouvez passer un objet comme <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong>, et le résultat sera la traduction <strong>\"Bienvenue abc: 123\"</strong>.",
   "_A_TRANSLATION_PROPS_ALWAYS_TRANSLATE_DESCRIPTION_": "Détermine si les traductions pour ce composant peuvent être désactivées. Si défini sur true, les traductions ne peuvent pas être désactivées et les espaces réservés ne seront pas affichés à la place.",
   "_ALOHA_TABLE_COLUMN_DEFAULT_": "Défaut",
   "_ALOHA_TABLE_COLUMN_DESCRIPTION_": "Description",

package/docs/src/i18n/hr.json

@@ -1,5 +1,6 @@
 {
   "_A_BASIC_USAGE_": "Osnovna uporaba",
+  "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Objekt koji sadrži varijable za zamjenu u predlošku prijevoda. Koristi se za dinamičku zamjenu vrijednosti u prijevodnim nizovima. Na primjer, ako prijevodni niz ima rezervirane prostore poput <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, što je prevedeno kao <strong>\"Dobrodošli <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, možete proslijediti objekt poput <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong>, a rezultat će biti prijevod <strong>\"Dobrodošli abc: 123\"</strong>.",
   "_A_TRANSLATION_PROPS_ALWAYS_TRANSLATE_DESCRIPTION_": "Određuje može li se onemogućiti prijevod za ovu komponentu. Ako je postavljeno na true, prijevodi se ne mogu isključiti i umjesto toga neće se prikazivati rezervirana mjesta.",
   "_ALOHA_TABLE_COLUMN_DEFAULT_": "Zadana vrijednost",
   "_ALOHA_TABLE_COLUMN_DESCRIPTION_": "Opis",

package/docs/src/i18n/it.json

@@ -1,5 +1,6 @@
 {
   "_A_BASIC_USAGE_": "Utilizzo di base",
+  "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Un oggetto che contiene variabili per la sostituzione nel modello di traduzione. Viene utilizzato per sostituire dinamicamente i valori nelle stringhe di traduzione. Ad esempio, se la stringa di traduzione ha segnaposti come <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, che viene tradotto come <strong>\"Benvenuto <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, puoi passare un oggetto come <strong>{ <span lang=\"en\">foo</span>: \"abc\", bar: \"123\" }</strong>, e il risultato sarà la traduzione <strong>\"Benvenuto abc: 123\"</strong>.",
   "_A_TRANSLATION_PROPS_ALWAYS_TRANSLATE_DESCRIPTION_": "Determina se le traduzioni per questo componente possono essere disattivate. Se impostato su true, le traduzioni non possono essere disattivate e i segnaposto non verranno visualizzati.",
   "_ALOHA_TABLE_COLUMN_DEFAULT_": "Predefinito",
   "_ALOHA_TABLE_COLUMN_DESCRIPTION_": "Descrizione",

package/docs/src/i18n/ru.json

@@ -1,5 +1,6 @@
 {
   "_A_BASIC_USAGE_": "Основное использование",
+  "_A_GLOBAL_PROPS_EXTRA_DESCRIPTION_": "Объект, который содержит переменные для подстановки в шаблон перевода. Используется для динамической замены значений в строках перевода. Например, если строка перевода имеет плейсхолдеры, такие как <strong lang=\"en\">\"_WELCOME_{{foo}}_{{bar}}_\"</strong>, это переведено как <strong>\"Добро пожаловать <span lang=\"en\">{{ foo }}</span>: <span lang=\"en\">{{ bar }}</span>\"</strong>, можно передать объект <strong>{ <span lang=\"en\">foo</span>: \"абв\", bar: \"123\" }</strong>, и в результате получится перевод <strong>\"Добро пожаловать абв: 123\"</strong>.",
   "_A_TRANSLATION_PROPS_ALWAYS_TRANSLATE_DESCRIPTION_": "Определяет, можно ли отключить переводы для этого компонента. Если установлено значение true, переводы отключить нельзя, и вместо этого не будут отображаться заполнители.",
   "_ALOHA_TABLE_COLUMN_DEFAULT_": "По умолчанию",
   "_ALOHA_TABLE_COLUMN_DESCRIPTION_": "Описание",

package/docs/src/mainTranslation.js

@@ -70,6 +70,10 @@ import PageTableTreeI18n from "./views/PageTable/PageTableTree/i18n/PageTableTre
 import PageInputCurrencyI18n from "./views/Form/PageInputCurrency/i18n/PageInputCurrencyI18n";
 import PageFilterMaskI18n from "./views/Functions/Filters/PageFilterMask/i18n/PageFilterMaskI18n";
 import PageJsonI18n from "./views/Form/PageJson/i18n/PageJsonI18n";
+import FormI18n from "./views/Form/i18n/FormI18n";
+import PageTextareaI18n from "./views/Form/PageTextarea/i18n/PageTextareaI18n";
+import PageInputI18n from "./views/Form/PageInput/i18n/PageInputI18n";
+import PageOneCheckboxI18n from "./views/Form/PageOneCheckbox/i18n/PageOneCheckboxI18n";
 
 export const mainTranslation = {
   ar: {
@@ -136,6 +140,10 @@ export const mainTranslation = {
     ...PageInputCurrencyI18n.ar,
     ...PageFilterMaskI18n.ar,
     ...PageJsonI18n.ar,
+    ...FormI18n.ar,
+    ...PageTextareaI18n.ar,
+    ...PageInputI18n.ar,
+    ...PageOneCheckboxI18n.ar,
   },
   de: {
     ...allLanguages.de,
@@ -201,6 +209,10 @@ export const mainTranslation = {
     ...PageInputCurrencyI18n.de,
     ...PageFilterMaskI18n.de,
     ...PageJsonI18n.de,
+    ...FormI18n.de,
+    ...PageTextareaI18n.de,
+    ...PageInputI18n.de,
+    ...PageOneCheckboxI18n.de,
   },
   en: {
     ...allLanguages.en,
@@ -266,6 +278,10 @@ export const mainTranslation = {
     ...PageInputCurrencyI18n.en,
     ...PageFilterMaskI18n.en,
     ...PageJsonI18n.en,
+    ...FormI18n.en,
+    ...PageTextareaI18n.en,
+    ...PageInputI18n.en,
+    ...PageOneCheckboxI18n.en,
   },
   es: {
     ...allLanguages.es,
@@ -331,6 +347,10 @@ export const mainTranslation = {
     ...PageInputCurrencyI18n.es,
     ...PageFilterMaskI18n.es,
     ...PageJsonI18n.es,
+    ...FormI18n.es,
+    ...PageTextareaI18n.es,
+    ...PageInputI18n.es,
+    ...PageOneCheckboxI18n.es,
   },
   fr: {
     ...allLanguages.fr,
@@ -396,6 +416,10 @@ export const mainTranslation = {
     ...PageInputCurrencyI18n.fr,
     ...PageFilterMaskI18n.fr,
     ...PageJsonI18n.fr,
+    ...FormI18n.fr,
+    ...PageTextareaI18n.fr,
+    ...PageInputI18n.fr,
+    ...PageOneCheckboxI18n.fr,
   },
   hr: {
     ...allLanguages.hr,
@@ -461,6 +485,10 @@ export const mainTranslation = {
     ...PageInputCurrencyI18n.hr,
     ...PageFilterMaskI18n.hr,
     ...PageJsonI18n.hr,
+    ...FormI18n.hr,
+    ...PageTextareaI18n.hr,
+    ...PageInputI18n.hr,
+    ...PageOneCheckboxI18n.hr,
   },
   it: {
     ...allLanguages.it,
@@ -526,6 +554,10 @@ export const mainTranslation = {
     ...PageInputCurrencyI18n.it,
     ...PageFilterMaskI18n.it,
     ...PageJsonI18n.it,
+    ...FormI18n.it,
+    ...PageTextareaI18n.it,
+    ...PageInputI18n.it,
+    ...PageOneCheckboxI18n.it,
   },
   ru: {
     ...allLanguages.ru,
@@ -591,5 +623,9 @@ export const mainTranslation = {
     ...PageInputCurrencyI18n.ru,
     ...PageFilterMaskI18n.ru,
     ...PageJsonI18n.ru,
+    ...FormI18n.ru,
+    ...PageTextareaI18n.ru,
+    ...PageInputI18n.ru,
+    ...PageOneCheckboxI18n.ru,
   },
 };

package/docs/src/router/index.js

@@ -79,6 +79,16 @@ const ROUTES = [
     name: "PageJson",
     component: () => import(/* webpackChunkName: "PageJson" */ "../views/Form/PageJson/PageJson.vue"),
   },
+  {
+    path: "/one-checkbox",
+    name: "PageOneCheckbox",
+    component: () => import(/* webpackChunkName: "PageOneCheckbox" */ "../views/Form/PageOneCheckbox/PageOneCheckbox.vue"),
+  },
+  {
+    path: "/textarea",
+    name: "PageTextarea",
+    component: () => import(/* webpackChunkName: "PageTextarea" */ "../views/Form/PageTextarea/PageTextarea.vue"),
+  },
   {
     path: "/accordion",
     name: "PageAccordion",

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

@@ -1,24 +1,55 @@
-import AInput from "../../../../../src/ui/AInput/AInput";
-import ATextarea from "../../../../../src/ui/ATextarea/ATextarea";
+import AlohaPage from "../../../global/components/AlohaPage/AlohaPage.vue";
+import AlohaTableProps from "../../../global/components/AlohaTableProps/AlohaTableProps.vue";
+import AlohaTableTranslate from "../../../global/components/AlohaTableTranslate/AlohaTableTranslate.vue";
+import ATranslation from "../../../../../src/ATranslation/ATranslation";
+import PageInputBasic from "./PageInputBasic/PageInputBasic.vue";
+import PageInputChange from "./PageInputChange/PageInputChange.vue";
+import PageInputErrors from "./PageInputErrors/PageInputErrors.vue";
+import PageInputHelpText from "./PageInputHelpText/PageInputHelpText.vue";
+import PageInputLabelFloat from "./PageInputLabelFloat/PageInputLabelFloat.vue";
+import PageInputPassword from "./PageInputPassword/PageInputPassword.vue";
 
+import EventsAPI from "./compositionAPI/EventsAPI";
+import PageTitleAPI from "./compositionAPI/PageTitleAPI";
+import PropsAPI from "./compositionAPI/PropsAPI";
+import TranslateAPI from "./compositionAPI/TranslateAPI";
 
 export default {
   name: "PageInput",
   components: {
-    AInput,
-    ATextarea,
+    AlohaPage,
+    AlohaTableProps,
+    AlohaTableTranslate,
+    ATranslation,
+    PageInputBasic,
+    PageInputChange,
+    PageInputErrors,
+    PageInputHelpText,
+    PageInputLabelFloat,
+    PageInputPassword,
   },
-  data() {
+  setup() {
+    const {
+      pageTitle,
+    } = PageTitleAPI();
+
+    const {
+      dataProps,
+    } = PropsAPI();
+
+    const {
+      dataTranslate,
+    } = TranslateAPI();
+
+    const {
+      dataEvents,
+    } = EventsAPI();
+
     return {
-      model1: "aloha",
-      model2: "hola",
-      model3: "",
-      model4: "FakePass",
+      dataEvents,
+      dataProps,
+      dataTranslate,
+      pageTitle,
     };
   },
-  methods: {
-    changeModel1(arg) {
-      console.log("arg", arg);
-    },
-  },
 };

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

@@ -1,43 +1,37 @@
-div
-  h1 Form element
-  h2 Input
-  a-input(
-    id="input1"
-    v-model="model1"
-    type="text"
-    label="Input 1"
-    :required="true"
-    :change="changeModel1"
+aloha-page(
+  :page-title="pageTitle"
+)
+  template(
+    v-slot:body
   )
-  div model1: {{ model1 }}
-  h2 Textarea
-  a-textarea(
-    id="textarea1"
-    v-model="model2"
-    type="text"
-    label="Textarea 1"
-    :required="true"
-    :is-scalable="true"
-  )
-  div model2:
-  pre {{ model2 }}
-
-  h2 Textarea 2
-    a-textarea(
-      id="textarea3"
-      v-model="model3"
-      type="text"
-      label="Textarea 2"
-      :required="true"
+    a-translation(
+      tag="p"
+      html="_A_INPUT_COMPONENT_DESCRIPTION_"
     )
-    div model3:
-    pre {{ model3 }}
-  h2 Input (Password)
-  a-input.a_pt_2(
-    id="input4"
-    v-model="model4"
-    type="password"
-    :show-password="true"
-    label="Input 4"
-    :required="true"
-  )
+
+    page-input-basic
+
+    page-input-change
+
+    page-input-help-text
+
+    page-input-errors
+
+    page-input-label-float
+
+    page-input-password
+
+    aloha-table-props(
+      :data="dataProps"
+    )
+
+    aloha-table-props(
+      table-label="Events"
+      :data="dataEvents"
+      :columns="['name', 'type', 'description']"
+    )
+
+    aloha-table-translate(
+      :data="dataTranslate"
+    )
+

package/docs/src/views/Form/PageInput/PageInputBasic/PageInputBasic.js

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

package/docs/src/views/Form/PageInput/PageInputBasic/PageInputBasic.pug

@@ -0,0 +1,11 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_BASIC_USAGE_"
+  :props="['model-value', 'label']"
+)
+  a-input(
+    v-model="model"
+    label="Input"
+  )
+  div model: {{ model }}

package/docs/src/views/Form/PageInput/PageInputBasic/PageInputBasic.vue

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

package/docs/src/views/Form/PageInput/PageInputBasic/compositionAPI/HtmlAPI.js

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

package/docs/src/views/Form/PageInput/PageInputBasic/compositionAPI/JsAPI.js

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

package/docs/src/views/Form/PageInput/PageInputChange/PageInputChange.js

@@ -0,0 +1,40 @@
+import {
+  ref,
+} from "vue";
+
+import AInput from "../../../../../../src/ui/AInput/AInput";
+import AlohaExample from "../../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageInputChange",
+  components: {
+    AInput,
+    AlohaExample,
+  },
+  setup() {
+    const model = ref("Aloha");
+
+    const changeModel = ({ model: _model, id, props }) => {
+      model.value = _model;
+      console.log(id, props);
+    };
+
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    return {
+      changeModel,
+      codeHtml,
+      codeJs,
+      model,
+    };
+  },
+};

package/docs/src/views/Form/PageInput/PageInputChange/PageInputChange.pug

@@ -0,0 +1,13 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_UI_GROUP_CHANGE_HEADER_"
+  description="_A_UI_GROUP_CHANGE_DESCRIPTION_"
+  :props="['change', 'model-value']"
+)
+  a-input(
+    :change="changeModel"
+    :model-value="model"
+    label="Input"
+  )
+  div model: {{ model }}

package/docs/src/views/Form/PageInput/PageInputChange/PageInputChange.vue

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

package/docs/src/views/Form/PageInput/PageInputChange/compositionAPI/HtmlAPI.js

@@ -0,0 +1,12 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-input
+  :change="changeModel"
+  :model-value="model"
+  label="Input"
+></a-input>
+<div>model: {{ model }}</div>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/Form/PageInput/PageInputChange/compositionAPI/JsAPI.js

@@ -0,0 +1,31 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import AInput from "aloha-vue/src/ui/AInput/AInput";
+    
+export default {
+  name: "PageInputChange",
+  components: {
+    AInput,
+  },
+  setup() {
+    const model = ref("Aloha");
+    
+    const changeModel = ({ model: _model, id, props }) => {
+      model.value = _model;
+      console.log(id, props);
+    };
+    
+    return {
+      changeModel,
+      model,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/Form/PageInput/PageInputErrors/PageInputErrors.js

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

package/docs/src/views/Form/PageInput/PageInputErrors/PageInputErrors.pug

@@ -0,0 +1,12 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_UI_GROUP_ERRORS_HEADER_"
+  description="_A_UI_GROUP_ERRORS_DESCRIPTION_"
+  :props="['errors']"
+)
+  a-input(
+    v-model="model"
+    errors="Aloha"
+    label="Input"
+  )

package/docs/src/views/Form/PageInput/PageInputErrors/PageInputErrors.vue

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

package/docs/src/views/Form/PageInput/PageInputErrors/compositionAPI/HtmlAPI.js

@@ -0,0 +1,11 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-input
+  v-model="model"
+  errors="Aloha"
+  label="Input"
+></a-input>`;
+
+  return {
+    codeHtml,
+  };
+}