aloha-vue 2.74.0 → 2.75.0

package/src/ui/ASelect/ASelectElement/ASelectElement.js

@@ -1,176 +1,179 @@
-import {
-  h,
-  withDirectives,
-} from "vue";
-
-import AIcon from "../../../AIcon/AIcon";
-
-import CheckedAPI from "./compositionAPI/CheckedAPI";
-import EventsAPI from "./compositionAPI/EventsAPI";
-import UiCheckboxRadioItemAPI from "../../compositionApi/UiCheckboxRadioItemAPI";
-import UiDisabledElementAPI from "../../compositionApi/UiDisabledElementAPI";
-import UiVisibleElementWithSearchAPI from "../../compositionApi/UiVisibleElementWithSearchAPI";
-
-import ASafeHtml from "../../../directives/ASafeHtml";
-import CheckLg from "aloha-svg/dist/js/bootstrap/CheckLg";
-
-export default {
-  name: "ASelectElement",
-  props: {
-    alwaysTranslate: {
-      type: Boolean,
-      required: false,
-    },
-    dataItem: {
-      type: Object,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
-    id: {
-      type: String,
-      required: true,
-    },
-    isHiddenWithSearch: {
-      type: Boolean,
-      required: false,
-    },
-    itemIndex: {
-      type: Number,
-      required: true,
-    },
-    keyDisabled: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    keyDisabledCallback: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    modelSearch: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    modelValue: {
-      type: [String, Number, Boolean, Array],
-      required: false,
-    },
-    searching: {
-      type: Boolean,
-      required: false,
-    },
-    searchingElements: {
-      type: Object,
-      required: true,
-    },
-    searchTextInHtml: {
-      type: Boolean,
-      required: false,
-    },
-    showElementWennGroupFound: {
-      type: Boolean,
-      required: false,
-    },
-    slotName: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    type: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: [
-    "changeModelValue",
-  ],
-  setup(props, context) {
-    const {
-      idLocal,
-      labelLocal,
-      valueLocal,
-    } = UiCheckboxRadioItemAPI(props);
-
-    const {
-      isChecked,
-    } = CheckedAPI(props, {
-      valueLocal,
-    });
-
-    const {
-      disabledElement,
-    } = UiDisabledElementAPI(props);
-
-    const {
-      onClick,
-      onKeydown,
-    } = EventsAPI(props, context, {
-      disabledElement,
-      isChecked,
-      valueLocal,
-    });
-
-    const {
-      currentLabelFiltered,
-      dataHideWithSearch,
-      styleWithSearch,
-    } = UiVisibleElementWithSearchAPI(props, {
-      labelLocal,
-      valueLocal,
-    });
-
-    return {
-      currentLabelFiltered,
-      dataHideWithSearch,
-      disabledElement,
-      idLocal,
-      isChecked,
-      labelLocal,
-      onClick,
-      onKeydown,
-      styleWithSearch,
-    };
-  },
-  render() {
-    return h("div", {
-      ariaSelected: this.isChecked,
-      class: ["a_select__menu__link a_select__element_clickable", {
-        a_select__menu__link_invalid: this.dataItem.__invalidEntry__,
-        a_select__menu__link_selected: this.isChecked,
-        a_select__menu__link_disabled: this.disabledElement,
-      }],
-      "data-hide": this.dataHideWithSearch,
-      disabled: this.disabledElement,
-      role: "option",
-      style: this.styleWithSearch,
-      tabindex: "-1",
-      onClick: this.onClick,
-      onKeydown: this.onKeydown,
-    }, [
-      h("span", {
-        class: "a_select__menu__link__icon_box",
-      }, [
-        this.isChecked && h(AIcon, {
-          icon: CheckLg,
-        }),
-      ]),
-      this.slotName && this.$slots[this.slotName] ?
-        this.$slots[this.slotName]({
-          id: this.id,
-          item: this.dataItem,
-          itemIndex: this.itemIndex,
-          label: this.labelLocal,
-          labelFiltered: this.currentLabelFiltered,
-          inDropdown: true,
-        }) :
-        withDirectives(h("span"), [
-          [ASafeHtml, this.currentLabelFiltered],
-        ]),
-    ]);
-  },
-};
+import {
+  h,
+  withDirectives,
+} from "vue";
+
+import AIcon from "../../../AIcon/AIcon";
+
+import CheckedAPI from "./compositionAPI/CheckedAPI";
+import EventsAPI from "./compositionAPI/EventsAPI";
+import UiCheckboxRadioItemAPI from "../../compositionApi/UiCheckboxRadioItemAPI";
+import UiDisabledElementAPI from "../../compositionApi/UiDisabledElementAPI";
+import UiVisibleElementWithSearchAPI from "../../compositionApi/UiVisibleElementWithSearchAPI";
+
+import ASafeHtml from "../../../directives/ASafeHtml";
+
+const CheckLg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
+  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
+</svg>`;
+
+export default {
+  name: "ASelectElement",
+  props: {
+    alwaysTranslate: {
+      type: Boolean,
+      required: false,
+    },
+    dataItem: {
+      type: Object,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    isHiddenWithSearch: {
+      type: Boolean,
+      required: false,
+    },
+    itemIndex: {
+      type: Number,
+      required: true,
+    },
+    keyDisabled: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    keyDisabledCallback: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    modelSearch: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    modelValue: {
+      type: [String, Number, Boolean, Array],
+      required: false,
+    },
+    searching: {
+      type: Boolean,
+      required: false,
+    },
+    searchingElements: {
+      type: Object,
+      required: true,
+    },
+    searchTextInHtml: {
+      type: Boolean,
+      required: false,
+    },
+    showElementWennGroupFound: {
+      type: Boolean,
+      required: false,
+    },
+    slotName: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: [
+    "changeModelValue",
+  ],
+  setup(props, context) {
+    const {
+      idLocal,
+      labelLocal,
+      valueLocal,
+    } = UiCheckboxRadioItemAPI(props);
+
+    const {
+      isChecked,
+    } = CheckedAPI(props, {
+      valueLocal,
+    });
+
+    const {
+      disabledElement,
+    } = UiDisabledElementAPI(props);
+
+    const {
+      onClick,
+      onKeydown,
+    } = EventsAPI(props, context, {
+      disabledElement,
+      isChecked,
+      valueLocal,
+    });
+
+    const {
+      currentLabelFiltered,
+      dataHideWithSearch,
+      styleWithSearch,
+    } = UiVisibleElementWithSearchAPI(props, {
+      labelLocal,
+      valueLocal,
+    });
+
+    return {
+      currentLabelFiltered,
+      dataHideWithSearch,
+      disabledElement,
+      idLocal,
+      isChecked,
+      labelLocal,
+      onClick,
+      onKeydown,
+      styleWithSearch,
+    };
+  },
+  render() {
+    return h("div", {
+      ariaSelected: this.isChecked,
+      class: ["a_select__menu__link a_select__element_clickable", {
+        a_select__menu__link_invalid: this.dataItem.__invalidEntry__,
+        a_select__menu__link_selected: this.isChecked,
+        a_select__menu__link_disabled: this.disabledElement,
+      }],
+      "data-hide": this.dataHideWithSearch,
+      disabled: this.disabledElement,
+      role: "option",
+      style: this.styleWithSearch,
+      tabindex: "-1",
+      onClick: this.onClick,
+      onKeydown: this.onKeydown,
+    }, [
+      h("span", {
+        class: "a_select__menu__link__icon_box",
+      }, [
+        this.isChecked && h(AIcon, {
+          icon: CheckLg,
+        }),
+      ]),
+      this.slotName && this.$slots[this.slotName] ?
+        this.$slots[this.slotName]({
+          id: this.id,
+          item: this.dataItem,
+          itemIndex: this.itemIndex,
+          label: this.labelLocal,
+          labelFiltered: this.currentLabelFiltered,
+          inDropdown: true,
+        }) :
+        withDirectives(h("span"), [
+          [ASafeHtml, this.currentLabelFiltered],
+        ]),
+    ]);
+  },
+};

package/src/ui/ASelect/ASelectValueCloseable/ASelectValueCloseable.js

@@ -1,141 +1,143 @@
-import {
-  h,
-} from "vue";
-import {
-  AElement,
-  ATranslation,
-} from "../../../index";
-
-import CloseAPI from "./compositionAPI/CloseAPI";
-import GroupAPI from "./compositionAPI/GroupAPI";
-import LabelAPI from "./compositionAPI/LabelAPI";
-
-import XLg from "aloha-svg/dist/js/bootstrap/XLg";
-
-
-export default {
-  name: "ASelectValueCloseable",
-  props: {
-    alwaysTranslate: {
-      type: Boolean,
-      required: false,
-    },
-    data: {
-      type: Object,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
-    hideDeleteButton: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    keyGroup: {
-      type: [String, Number, Array],
-      required: false,
-      default: undefined,
-    },
-    keyGroupLabelCallback: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
-    labelNotFound: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    mode: {
-      type: String,
-      default: "default",
-      validator: value => ["default", "one_per_group"].includes(value),
-    },
-    showNotFound: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    slotName: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    translateGroup: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  emits: [
-    "changeModelValue",
-  ],
-  setup(props, context) {
-    const {
-      currentLabel,
-    } = LabelAPI(props);
-
-    const {
-      closeModel,
-    } = CloseAPI(props, context);
-
-    const {
-      groupLabel,
-    } = GroupAPI(props);
-
-    return {
-      closeModel,
-      currentLabel,
-      groupLabel,
-    };
-  },
-  render() {
-    return h("li", {
-      class: [
-        "a_select__ul_closeable__item",
-        {
-          a_select__ul_closeable__item_invalid: this.data.__invalidEntry__,
-        },
-      ],
-    }, [
-      this.slotName && this.$slots[this.slotName] ?
-        this.$slots[this.slotName]({
-          item: this.data,
-          label: this.currentLabel,
-          inDropdown: false,
-        }) :
-        h("span", [
-          this.groupLabel ?
-            h(ATranslation, {
-              alwaysTranslate: this.alwaysTranslate,
-              tag: "span",
-              html: this.groupLabel,
-              extra: this.data.extra,
-              textAfter: ": ",
-            }) :
-            "",
-          h(ATranslation, {
-            alwaysTranslate: this.alwaysTranslate,
-            tag: "span",
-            html: this.currentLabel,
-            extra: this.data.extra,
-          }),
-        ]),
-
-      !this.hideDeleteButton && !this.disabled ?
-        h(AElement, {
-          class: "a_btn a_btn_link a_select__ul_closeable__item__btn",
-          disabled: this.disabled,
-          iconLeft: XLg,
-          prevent: true,
-          stop: true,
-          tabindex: -1,
-          type: "button",
-          onClick: this.closeModel,
-        }) :
-        "",
-    ]);
-  },
-};
+import {
+  h,
+} from "vue";
+import {
+  AElement,
+  ATranslation,
+} from "../../../index";
+
+import CloseAPI from "./compositionAPI/CloseAPI";
+import GroupAPI from "./compositionAPI/GroupAPI";
+import LabelAPI from "./compositionAPI/LabelAPI";
+
+const XLg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
+</svg>`;
+
+
+export default {
+  name: "ASelectValueCloseable",
+  props: {
+    alwaysTranslate: {
+      type: Boolean,
+      required: false,
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    hideDeleteButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    keyGroup: {
+      type: [String, Number, Array],
+      required: false,
+      default: undefined,
+    },
+    keyGroupLabelCallback: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    labelNotFound: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    mode: {
+      type: String,
+      default: "default",
+      validator: value => ["default", "one_per_group"].includes(value),
+    },
+    showNotFound: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    slotName: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    translateGroup: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: [
+    "changeModelValue",
+  ],
+  setup(props, context) {
+    const {
+      currentLabel,
+    } = LabelAPI(props);
+
+    const {
+      closeModel,
+    } = CloseAPI(props, context);
+
+    const {
+      groupLabel,
+    } = GroupAPI(props);
+
+    return {
+      closeModel,
+      currentLabel,
+      groupLabel,
+    };
+  },
+  render() {
+    return h("li", {
+      class: [
+        "a_select__ul_closeable__item",
+        {
+          a_select__ul_closeable__item_invalid: this.data.__invalidEntry__,
+        },
+      ],
+    }, [
+      this.slotName && this.$slots[this.slotName] ?
+        this.$slots[this.slotName]({
+          item: this.data,
+          label: this.currentLabel,
+          inDropdown: false,
+        }) :
+        h("span", [
+          this.groupLabel ?
+            h(ATranslation, {
+              alwaysTranslate: this.alwaysTranslate,
+              tag: "span",
+              html: this.groupLabel,
+              extra: this.data.extra,
+              textAfter: ":&nbsp;",
+            }) :
+            "",
+          h(ATranslation, {
+            alwaysTranslate: this.alwaysTranslate,
+            tag: "span",
+            html: this.currentLabel,
+            extra: this.data.extra,
+          }),
+        ]),
+
+      !this.hideDeleteButton && !this.disabled ?
+        h(AElement, {
+          class: "a_btn a_btn_link a_select__ul_closeable__item__btn",
+          disabled: this.disabled,
+          iconLeft: XLg,
+          prevent: true,
+          stop: true,
+          tabindex: -1,
+          type: "button",
+          onClick: this.closeModel,
+        }) :
+        "",
+    ]);
+  },
+};