aloha-vue 2.74.0 → 2.75.0

package/src/ATable/ATableHeaderTh/compositionAPI/SortAPI.js

@@ -1,167 +1,172 @@
-import {
-  computed,
-  h,
-  inject,
-  toRef,
-} from "vue";
-
-import AIcon from "../../../AIcon/AIcon";
-
-import CaretDownFill from "aloha-svg/dist/js/bootstrap/CaretDownFill";
-import CaretUpFill from "aloha-svg/dist/js/bootstrap/CaretUpFill";
-import {
-  tablePluginOptions,
-} from "../../../plugins/ATablePlugin";
-
-export default function SortAPI(props) {
-  const column = toRef(props, "column");
-  const columnIndex = toRef(props, "columnIndex");
-  const disabledSort = toRef(props, "disabledSort");
-  const isSortingMultiColumn = toRef(props, "isSortingMultiColumn");
-  const modelSort = toRef(props, "modelSort");
-  const showFirstSortingSequenceNumber = toRef(props, "showFirstSortingSequenceNumber");
-
-  const changeModelSort = inject("changeModelSort");
-  const tableId = inject("tableId");
-
-  const sortId = computed(() => {
-    return column.value.sortId;
-  });
-
-  const isSortable = computed(() => {
-    return !!sortId.value;
-  });
-
-  const modelSortIndexAscending = computed(() => {
-    return modelSort.value.indexOf(sortId.value);
-  });
-
-  const modelSortIndexDescending = computed(() => {
-    return modelSort.value.indexOf(`-${ sortId.value }`);
-  });
-
-  const isSortAscending = computed(() => {
-    return modelSortIndexAscending.value !== -1;
-  });
-
-  const isSortDescending = computed(() => {
-    return modelSortIndexDescending.value !== -1;
-  });
-
-  const isSorting = computed(() => {
-    return isSortable.value &&
-      (isSortAscending.value ||
-        isSortDescending.value);
-  });
-
-  const ariaSort = computed(() => {
-    if (isSortable.value) {
-      let ariaSortValue = "none";
-      if (isSortAscending.value) {
-        ariaSortValue = "ascending";
-      } else if (isSortDescending.value) {
-        ariaSortValue = "descending";
-      }
-      return {
-        "aria-sort": ariaSortValue,
-      };
-    }
-    return {};
-  });
-
-  const iconSortDescending = computed(() => {
-    return h(AIcon, {
-      icon: CaretUpFill,
-      class: "a_table__th__sort__icon a_table__th__sort__icon_up",
-    });
-  });
-
-  const iconSortAscending = computed(() => {
-    return h(AIcon, {
-      icon: CaretDownFill,
-      class: "a_table__th__sort__icon a_table__th__sort__icon_down",
-    });
-  });
-
-  const iconsSortable = computed(() => {
-    const ICONS = [];
-    if (isSortable.value) {
-      if (!isSortDescending.value) {
-        ICONS.push(iconSortDescending.value);
-      }
-      if (!isSortAscending.value) {
-        ICONS.push(iconSortAscending.value);
-      }
-    }
-    return ICONS;
-  });
-
-  const changeModelSortLocal = ({ $event }) => {
-    if (disabledSort.value) {
-      return;
-    }
-    changeModelSort({
-      $event,
-      sortId: sortId.value,
-    });
-  };
-
-  const columnTextScreenReaderId = computed(() => {
-    return `${ tableId.value }_th_${ columnIndex.value }_screen_reader`;
-  });
-
-  const attributesForButtonSort = computed(() => {
-    if (isSortable.value) {
-      return {
-        type: "button",
-        disabled: disabledSort.value,
-        isTitleHtml: tablePluginOptions.value.config?.isHtmlTitleSort || false,
-        "aria-describedby": columnTextScreenReaderId.value,
-        onClick: changeModelSortLocal,
-      };
-    }
-    return {
-      tag: "span",
-    };
-  });
-
-  const sequenceNumberSort = computed(() => {
-    if (!isSortingMultiColumn.value &&
-      !isSorting.value) {
-      return undefined;
-    }
-    if (modelSort.value.length <= 1 &&
-      !showFirstSortingSequenceNumber.value) {
-      return undefined;
-    }
-    if (modelSortIndexAscending.value !== -1) {
-      return modelSortIndexAscending.value + 1;
-    }
-    if (modelSortIndexDescending.value !== -1) {
-      return modelSortIndexDescending.value + 1;
-    }
-    return undefined;
-  });
-
-  const titlesSort = computed(() => {
-    const TITLES = [];
-    if (isSortable.value) {
-      TITLES.push("_A_TABLE_SORT_TITLE_");
-      if (isSortingMultiColumn.value) {
-        TITLES.push("_A_TABLE_SORT_TITLE_MULTI_COLUMN_");
-      }
-    }
-    return TITLES;
-  });
-
-  return {
-    ariaSort,
-    attributesForButtonSort,
-    columnTextScreenReaderId,
-    iconsSortable,
-    isSortable,
-    isSorting,
-    sequenceNumberSort,
-    titlesSort,
-  };
-}
+import {
+  computed,
+  h,
+  inject,
+  toRef,
+} from "vue";
+
+import AIcon from "../../../AIcon/AIcon";
+
+import {
+  tablePluginOptions,
+} from "../../../plugins/ATablePlugin";
+
+const CaretDownFill = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
+  <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+</svg>`;
+const CaretUpFill = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
+  <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
+</svg>`;
+
+export default function SortAPI(props) {
+  const column = toRef(props, "column");
+  const columnIndex = toRef(props, "columnIndex");
+  const disabledSort = toRef(props, "disabledSort");
+  const isSortingMultiColumn = toRef(props, "isSortingMultiColumn");
+  const modelSort = toRef(props, "modelSort");
+  const showFirstSortingSequenceNumber = toRef(props, "showFirstSortingSequenceNumber");
+
+  const changeModelSort = inject("changeModelSort");
+  const tableId = inject("tableId");
+
+  const sortId = computed(() => {
+    return column.value.sortId;
+  });
+
+  const isSortable = computed(() => {
+    return !!sortId.value;
+  });
+
+  const modelSortIndexAscending = computed(() => {
+    return modelSort.value.indexOf(sortId.value);
+  });
+
+  const modelSortIndexDescending = computed(() => {
+    return modelSort.value.indexOf(`-${ sortId.value }`);
+  });
+
+  const isSortAscending = computed(() => {
+    return modelSortIndexAscending.value !== -1;
+  });
+
+  const isSortDescending = computed(() => {
+    return modelSortIndexDescending.value !== -1;
+  });
+
+  const isSorting = computed(() => {
+    return isSortable.value &&
+      (isSortAscending.value ||
+        isSortDescending.value);
+  });
+
+  const ariaSort = computed(() => {
+    if (isSortable.value) {
+      let ariaSortValue = "none";
+      if (isSortAscending.value) {
+        ariaSortValue = "ascending";
+      } else if (isSortDescending.value) {
+        ariaSortValue = "descending";
+      }
+      return {
+        "aria-sort": ariaSortValue,
+      };
+    }
+    return {};
+  });
+
+  const iconSortDescending = computed(() => {
+    return h(AIcon, {
+      icon: CaretUpFill,
+      class: "a_table__th__sort__icon a_table__th__sort__icon_up",
+    });
+  });
+
+  const iconSortAscending = computed(() => {
+    return h(AIcon, {
+      icon: CaretDownFill,
+      class: "a_table__th__sort__icon a_table__th__sort__icon_down",
+    });
+  });
+
+  const iconsSortable = computed(() => {
+    const ICONS = [];
+    if (isSortable.value) {
+      if (!isSortDescending.value) {
+        ICONS.push(iconSortDescending.value);
+      }
+      if (!isSortAscending.value) {
+        ICONS.push(iconSortAscending.value);
+      }
+    }
+    return ICONS;
+  });
+
+  const changeModelSortLocal = ({ $event }) => {
+    if (disabledSort.value) {
+      return;
+    }
+    changeModelSort({
+      $event,
+      sortId: sortId.value,
+    });
+  };
+
+  const columnTextScreenReaderId = computed(() => {
+    return `${ tableId.value }_th_${ columnIndex.value }_screen_reader`;
+  });
+
+  const attributesForButtonSort = computed(() => {
+    if (isSortable.value) {
+      return {
+        type: "button",
+        disabled: disabledSort.value,
+        isTitleHtml: tablePluginOptions.value.config?.isHtmlTitleSort || false,
+        "aria-describedby": columnTextScreenReaderId.value,
+        onClick: changeModelSortLocal,
+      };
+    }
+    return {
+      tag: "span",
+    };
+  });
+
+  const sequenceNumberSort = computed(() => {
+    if (!isSortingMultiColumn.value &&
+      !isSorting.value) {
+      return undefined;
+    }
+    if (modelSort.value.length <= 1 &&
+      !showFirstSortingSequenceNumber.value) {
+      return undefined;
+    }
+    if (modelSortIndexAscending.value !== -1) {
+      return modelSortIndexAscending.value + 1;
+    }
+    if (modelSortIndexDescending.value !== -1) {
+      return modelSortIndexDescending.value + 1;
+    }
+    return undefined;
+  });
+
+  const titlesSort = computed(() => {
+    const TITLES = [];
+    if (isSortable.value) {
+      TITLES.push("_A_TABLE_SORT_TITLE_");
+      if (isSortingMultiColumn.value) {
+        TITLES.push("_A_TABLE_SORT_TITLE_MULTI_COLUMN_");
+      }
+    }
+    return TITLES;
+  });
+
+  return {
+    ariaSort,
+    attributesForButtonSort,
+    columnTextScreenReaderId,
+    iconsSortable,
+    isSortable,
+    isSorting,
+    sequenceNumberSort,
+    titlesSort,
+  };
+}

package/src/ATable/ATableHeaderThAction/ATableHeaderThAction.js

@@ -15,14 +15,24 @@ import ColumnSearchAPI from "../compositionAPI/ColumnSearchAPI";
 import DragAndDropParentAPI from "../compositionAPI/DragAndDropParentAPI";
 import StylesThTdAction from "./compositionAPI/StylesThTdAction";
 
-import ArrowCounterclockwise from "aloha-svg/dist/js/bootstrap/ArrowCounterclockwise";
-import CheckLg from "aloha-svg/dist/js/bootstrap/CheckLg";
-import GearFill from "aloha-svg/dist/js/bootstrap/GearFill";
-import XLg from "aloha-svg/dist/js/bootstrap/XLg";
 import {
   forEach,
 } from "lodash-es";
 
+const ArrowCounterclockwise = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
+</svg>`;
+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>`;
+const GearFill = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
+  <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+</svg>`;
+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: "ATableHeaderThAction",
   inject: [