ch3chi-commons-vue 1.2.0 → 1.8.1

package/src/components/CImage.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+
+import {ImgHTMLAttributes} from "@vue/runtime-dom";
+import {CImageViewModel} from "../model/CImageViewModel";
+
+const props = defineProps< /* @vue-ignore */ ImgHTMLAttributes & {
+  src?: string; // 圖片來源
+  alt?: string; // 替代文字
+  width?: string | number; // 圖片寬度
+  height?: string | number; // 圖片高度
+  className?: string; // 額外的 CSS 類別
+  loading?: 'lazy' | 'eager'; // 圖片加載方式
+  onLoad?: (event: Event) => void; // 圖片加載完成
+  onError?: (event: Event | string) => void; // 圖片加載錯
+}>();
+
+const imgViewModel = new CImageViewModel({
+  onLoad: props.onLoad,
+  onError: props.onError,
+});
+
+const attributes = Object.assign({
+  src : props.src || imgViewModel.placeholderImage,
+  alt : props.alt || 'Image',
+  loading : props.loading || 'lazy',
+  className: props.className || '',
+}, props);
+
+
+</script>
+
+<template>
+  <img v-bind="attributes"
+       class="img-thumbnail c-img-thumbnail fade-in-image"
+       @load="imgViewModel.onLoadHandler"
+       @error="imgViewModel.onErrorHandler" />
+</template>
+
+<style scoped>
+/* 圖片樣式 */
+.c-img-thumbnail {
+  width: 100%;
+  max-width: 200px;
+  height: 100%;
+  object-fit: scale-down;
+}
+.c-img-thumbnail.fade-in-image {
+  opacity: 0;
+  transition: opacity 0.75s ease-in-out; /* 過渡效果 */
+}
+.c-img-thumbnail.fade-in-image.loaded {
+  opacity: 1; /* 載入完成後顯示圖片 */
+}
+
+/* 圖片載入失敗時的樣式 */
+.c-img-thumbnail.error {
+  width: 150px;
+  background-color: #f3f3f3;
+  /* 使用 SVG data URI 顯示一個預設的圖示 */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23aaa'%3e%3cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 40%;
+  border: 1px dashed #ddd;
+}
+
+</style>

package/src/components/CRowCheckBox.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+
+import type {ComputedRef} from "vue";
+import {computed} from "vue";
+import _ from "lodash";
+
+const props = defineProps<{
+  align?: 'left' | 'center' | 'right';
+  rowData: Record<string, any>;
+  cancelable?: boolean; // 是否允許取消選取 (當有 disableComputed 時有用)
+  disableComputed?: ComputedRef<boolean>;
+  readMode?: boolean; // 是否為閱讀模式，只會顯示由 icon 表示的 checkbox
+}>();
+
+/// ----- default props -----
+// define event emits
+const emit = defineEmits(['update:checked']);
+// disable 的 computed
+const useDisabledAttr = computed(() => {
+  // 當有給予 disableComputed 的情況下
+  if (!_.isNil(props.disableComputed)) {
+    // 優先權最高：當有 cancelable 為 true 時
+    // 需要查看 rowData.checked 狀態
+    // 當為 true 時，則不 disable checkbox
+    // 當為 false 時，則使用 disableComputed 的值
+    if (props.cancelable === true) {
+      return !props.rowData.checked && props.disableComputed?.value;
+    }
+    // 單純使用 disableComputed 的值
+    return props.disableComputed?.value;
+  }
+  return false;
+});
+
+const useAlignCss = computed(() => {
+  switch (props.align) {
+    case 'center':
+      return 'justify-content-center';
+    case 'right':
+      return 'text-end';
+    case 'left':
+    default:
+      return 'text-start';
+  }
+});
+
+// ----- event handler -----
+function onChange(event: Event) {
+  const val = (event.target as HTMLInputElement).checked;
+  emit('update:checked', val, event);
+}
+</script>
+
+<template>
+  <template v-if="props.readMode">
+    <div class="d-flex align-items-center" :class="useAlignCss">
+      <font-icon
+        :icon="rowData.checked ? 'square-check' : 'square'"
+        :class="['c-checkbox-icon', 'text-secondary']"
+      />
+    </div>
+  </template>
+  <template v-else>
+    <div class="form-check form-check-inline d-flex align-items-center" :class="useAlignCss">
+      <input type="checkbox" class="form-check-input c-table-checkbox"
+             :disabled="useDisabledAttr"
+             :checked="rowData.checked"
+             @change="onChange"/>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CRowTextInput.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  rowData: Record<string, any>
+  dataName: string
+}>();
+const emit = defineEmits(['update:textInput']);
+
+
+// ----- event handler -----
+function onChange(event: Event) {
+  const val = (event.target as HTMLInputElement).value;
+  emit('update:textInput', val);
+}
+
+</script>
+
+<template>
+  <input type="text" class="form-control c-table-textInput"
+         :value="rowData[dataName]"
+         @change="onChange"
+         />
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CTable.vue

@@ -0,0 +1,524 @@
+<script setup lang="ts">
+import {ComponentPublicInstance, computed, nextTick, onBeforeUnmount, onMounted, reactive, Reactive, ref} from 'vue';
+import {BaseFormDataModel} from "../model/BaseFormDataModel";
+import {QueryPage, QueryParameter} from "../model/QueryParameter";
+import {CTableColumn, CTableColumnType, CTableConfig} from "./CTableDefine";
+import CTableTD from "./CTableTD.vue";
+import {v4 as uuidv4} from 'uuid';
+import {Dropdown} from "bootstrap";
+import _ from 'lodash';
+
+// ----- properties -----
+// Define the type of query parameter that this component will accept
+type CTableProps<T extends QueryParameter, V extends BaseFormDataModel> = {
+  queryParam?: Reactive<T>;
+  columns: CTableColumn[];
+  dataList?: V[];
+  disablePagination?: boolean;
+  multiSort?: boolean; // 多重排序
+  pageSizeOptions?: number[];
+  styleConfig?: Record<string, any>; // Additional style configurations
+}
+// Define the props for the CTable component
+const props = defineProps<CTableProps<QueryParameter,BaseFormDataModel>>();
+
+// ----- emits -----
+// Define the events that this component will emit
+const emit = defineEmits(['page-change', 'sort-change', 'table-action']);
+
+// ----- table columns -----
+const tableStyleConfig = CTableConfig.getTableStyleConfig();
+// 根據欄位設定，回傳排序圖示的 class name
+const sortIconClsName = (column: CTableColumn): string => {
+  const isSortable = column.sortConfig?.sortable ?? false;
+  if (!isSortable) {
+    return '';
+  }
+  // if 可以多重排序，則使用多重排序操作，在這邊先不處理
+  if(props.multiSort) {
+    return '';
+  }
+  // 查看目前的排序狀態，排序狀態是從 queryParam 中取得
+  const queryParam = props.queryParam;
+  if (!queryParam) {
+    return '';
+  }
+  const sortKey = column.sortConfig?.key;
+  if (!sortKey) {
+    return '';
+  }
+  const sortItem = queryParam.sort?.find(item => item.field === sortKey);
+  let sortIconClassArr = ['c-sort-icon'];
+  if(!sortItem) {
+    // 該欄位沒有排序，呈現未排序圖示
+    sortIconClassArr.push(tableStyleConfig.sortIconNone || '');
+  } else if(_.toUpper(sortItem.direction) === 'ASC') {
+    // 根據排序方向，回傳對應的圖示 class name
+    sortIconClassArr.push('c-arrow-up');
+    sortIconClassArr.push(tableStyleConfig.sortIconAsc || '');
+  } else if(_.toUpper(sortItem.direction) === 'DESC') {
+    // 根據排序方向，回傳對應的圖示 class name
+    sortIconClassArr.push('c-arrow-down');
+    sortIconClassArr.push(tableStyleConfig.sortIconDesc || '');
+  }
+  return sortIconClassArr.join(' ');
+};
+
+// 從 props 中獲取表格欄位，並給予 emit 事件發射器物件
+const useColumnArray = props.columns.map((column) => {
+  // 如果傳入的是 plain object 而不是 CTableColumn 的實例，則包裝成 CTableColumn
+  let columnInstance: CTableColumn;
+  if (column instanceof CTableColumn) {
+    columnInstance = column;
+  } else {
+    columnInstance = new CTableColumn(column as any);
+  }
+
+  // 如果是動作類型的欄位
+  if (columnInstance.type === CTableColumnType.Action) {
+    // 為每個 actionItem 添加 emit 方法
+    columnInstance.actionList?.forEach(actionItem => {
+      actionItem.emit = emit as (event: string, ...args: any[]) => void;
+    })
+  }
+  return columnInstance;
+});
+
+// ----- table row -----
+// 判斷是否有資料列表
+const hasAnyData = computed(() => {
+  return props.dataList && props.dataList.length > 0;
+});
+
+// ----- pagination 元件 -----
+const usePageSizeOptions = props.pageSizeOptions || CTableConfig.pageSizeOptions;
+
+// Generate a unique ID for the page size select element
+const showPagination = computed(() => {
+  return _.get(props, 'disablePagination', false) == false && hasAnyData.value;
+});
+
+// 分頁樣式變數
+const paginationStyleVars = computed(() => {
+  return CTableConfig.getPaginationStyleVars();
+});
+// 表格樣式變數
+const tableStyleVars = computed(() => {
+  return CTableConfig.getTableStyleVars();
+});
+// 合併所有樣式變數
+const allStyleVars = computed(() => {
+  return {
+    ...paginationStyleVars.value,
+    ...tableStyleVars.value,
+  };
+});
+// 分頁 icon
+const {previousIcon, nextIcon, ellipsisIcon} = CTableConfig.getPaginationStyle();
+
+const pageSizeSelectId = `c-pageSize-${uuidv4()}`;
+// Create a reactive page model for pagination
+const pageModel = props.queryParam?.page || reactive(new QueryPage());
+// 偵測 pageModel.pageSize 是否在 usePageSizeOptions 中，如果不在，則將 pageModel.pageSize 設定為 usePageSizeOptions 的第一個值
+if(!usePageSizeOptions.includes(pageModel.pageSize)) {
+  pageModel.pageSize = usePageSizeOptions[0];
+}
+
+// 建立省略號的 Html Element 的引用，這邊會用到多個省略號按鈕，所以使用 Record<number, HTMLElement | null> 來存儲每個按鈕的引用
+const pageEllipsisRef = ref<Record<number, HTMLElement | null>>({});
+// 前往特定頁數的輸入值
+const pageGoToInputValue = ref('');
+
+// ----- event handler -----
+// 點擊排序欄位事件
+function doSortColumn(column: CTableColumn) {
+  const isSortable = column.sortConfig?.sortable ?? (column as any).sortable ?? false;
+  const sortKey = column.sortConfig?.key ?? (column as any).sortKey;
+  const defaultDirection = column.sortConfig?.direction ?? (column as any).sortDirection ?? 'ASC';
+
+  if (!isSortable || !sortKey) {
+    return;
+  }
+  // 查看目前的排序狀態，排序狀態是從 queryParam 中取得
+  const queryParam = props.queryParam;
+  if (!queryParam) {
+    return '';
+  }
+  const sortItem = queryParam.sort?.find(item => item.field === sortKey);
+  // 如果已經有排序，則切換排序方向
+  if (sortItem) {
+    sortItem.direction = _.toUpper(sortItem.direction) === 'ASC' ? 'DESC' : 'ASC';
+  } else {
+    // TODO 處理當有多個 sort key 時的行為
+    // 如果沒有排序，則新增排序項目，預設為 ASC
+    // 清空原本的排序項目
+    queryParam.sort?.splice(0, queryParam.sort.length);
+    // 以下為只處理單一 sort key 的行為
+    queryParam.sort?.push({
+      field: sortKey as string,
+      direction: defaultDirection || 'ASC'
+    });
+  }
+  // 發出 table-action 事件，帶入排序欄位資訊
+  emit('sort-change', {
+    column: column,
+    sort: queryParam.sort
+  });
+}
+
+// 每頁筆數改變事件
+function doPageSizeChange(event: Event) {
+  emit('page-change', pageModel);
+}
+function doPageNumberChange(toPageIndex: number) {
+  if(pageModel.pageIndex == toPageIndex) {
+    return;
+  }
+  pageModel.pageIndex = toPageIndex;
+  emit('page-change', pageModel);
+}
+const pageActionMap = {
+  first: () => {
+    doPageNumberChange(0)
+  },
+  previous: () => {
+    if (pageModel.pageIndex > 0) {
+      doPageNumberChange(pageModel.pageIndex - 1);
+    }
+  },
+  next: () => {
+    if (pageModel.pageIndex < pageModel.totalPage - 1) {
+      doPageNumberChange(pageModel.pageIndex + 1);
+    }
+  },
+  last: () => {
+    doPageNumberChange(pageModel.totalPage - 1);
+  }
+}
+function onPageNumberChange(event: Event) {
+  emit('page-change', pageModel);
+}
+// Dropdown GoToPage Dialog
+function doShowGoToPageDialog(event: Event) {
+  pageGoToInputValue.value = '';
+  const dropdownInstance = Dropdown.getInstance(event.currentTarget as HTMLElement);
+  if(dropdownInstance && _.has(dropdownInstance, '_menu')) {
+    dropdownInstance.toggle();
+  }
+}
+
+// ----- Dropdown Dialog -----
+// Set the reference for the dropdown element
+function setDropdownRef(el: Element | ComponentPublicInstance | null, key: number) {
+  if(_.isNil(el) || !(el instanceof HTMLElement)) {
+    return;
+  }
+  pageEllipsisRef.value[key] = el;
+  nextTick(() => {
+    Dropdown.getOrCreateInstance(el, {
+      autoClose: true
+    });
+  })
+}
+// Hide all dropdown GoToPage
+function hideAllDropdownGoToPage() {
+  for(const key in pageEllipsisRef.value) {
+    const el = pageEllipsisRef.value[key];
+    if(!el) {
+      continue;
+    }
+    const dropdownInstance = Dropdown.getInstance(el);
+    dropdownInstance?.hide();
+    el.blur();
+  }
+}
+
+// GoToPage Action 在送出特定頁數觸發
+function doGoToPage(event: Event) {
+  // close the dropdown menu
+  hideAllDropdownGoToPage();
+  const val = parseInt(pageGoToInputValue.value);
+  if(isNaN(val) || val < 1 || val > pageModel.totalPage) {
+    return;
+  }
+  doPageNumberChange(val - 1);
+  // clean pageGoToInputValue
+  pageGoToInputValue.value = '';
+}
+
+// Hide dropdown dialog when clicking outside
+function doHideDropdownDialog(event: MouseEvent) {
+  // 從 pageEllipsisRef 中獲取所有的 dropdown 元素
+  for(const key in pageEllipsisRef.value) {
+    const el = pageEllipsisRef.value[key];
+    if(!el) {
+      continue;
+    }
+    // 檢查點擊事件是否在 dropdown 元素內
+    const parentNode = el.parentNode as HTMLElement;
+    if (parentNode.contains(event.target as Node)) {
+      // 如果點擊在 dropdown 元素內，則不執行任何操作
+      return;
+    }
+    // 如果點擊在 dropdown 元素外，則關閉 dropdown
+    const dropdownInstance = Dropdown.getInstance(el);
+    dropdownInstance?.hide();
+    el.blur();
+  }
+}
+
+// ----- LifeCycle -----
+onMounted(() => {
+  // 在文件上監聽點擊事件，以便關閉 dropdown dialog
+  nextTick(() => {
+    document.addEventListener('click', doHideDropdownDialog);
+  });
+});
+
+onBeforeUnmount(() => {
+  // 移除文件上的點擊事件監聽器
+  document.removeEventListener("click", doHideDropdownDialog);
+})
+
+</script>
+
+<template>
+  <div class="content-table mt-3 mb-3" :style="allStyleVars">
+    <div class="content-table-body mb-3">
+      <table class="table table-striped table-hover">
+        <thead>
+        <tr>
+          <th scope="col" v-for="columnItem in useColumnArray"
+              :key="columnItem.id"
+              :style="{ width: columnItem.width || 'auto' }"
+              :class="columnItem.thClass()"
+              @click.prevent.stop="doSortColumn(columnItem)">
+            <template v-if="columnItem.sortConfig?.sortable">
+              <div class="d-flex align-items-center justify-content-between">
+                <span>{{ columnItem.text }}</span>
+                <i :class="sortIconClsName(columnItem)"></i>
+              </div>
+            </template>
+            <template v-else>
+              {{ columnItem.text }}
+            </template>
+          </th>
+        </tr>
+        </thead>
+        <tbody>
+        <template v-if="hasAnyData">
+          <tr v-for="dataItem in props.dataList" :key="dataItem.rowId">
+            <td v-for="columnItem in useColumnArray" :key="columnItem.id"
+                :class="columnItem.tdClass()">
+              <CTableTD :column-item="columnItem" :data-item="dataItem"/>
+            </td>
+          </tr>
+        </template>
+        <template v-else>
+          <tr>
+            <td colspan="100%" class="text-center">
+              <em class="text-muted">沒有資料</em>
+            </td>
+          </tr>
+        </template>
+        </tbody>
+      </table>
+    </div>
+    <div v-if="showPagination" class="content-table-footer py-3 w-100">
+      <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mx-3">
+        <!-- 每頁筆數下拉選單 -->
+        <div>
+          <label :for="pageSizeSelectId" class="form-label me-2 mb-0">每頁筆數</label>
+          <select :id="pageSizeSelectId" class="form-select d-inline-block w-auto"
+                  v-model="pageModel.pageSize" @change="doPageSizeChange">
+            <option v-for="sizeItem in usePageSizeOptions" :key="sizeItem" :value="sizeItem">
+              {{sizeItem}}
+            </option>
+          </select>
+        </div>
+        <!-- 分頁元件 -->
+        <nav class="table-pagination-nav">
+          <ul class="pagination mb-0">
+            <li class="page-item" v-if="pageModel.hasPreviousPage()">
+              <button class="page-link c-page-action"
+                      title="前一頁" aria-label="前一頁"
+                      @click="pageActionMap.previous">
+                <i :class="previousIcon"></i>
+              </button>
+            </li>
+            <li class="page-item" v-for="pageItem in pageModel.pageRange()"
+                :key="pageItem"
+                :class="{'active': (pageModel.pageIndex === pageItem)}">
+              <template v-if="pageItem > -1">
+                <button class="page-link"
+                        @click="doPageNumberChange(pageItem)">
+                  {{pageItem + 1}}
+                </button>
+              </template>
+              <template v-else-if="pageItem <= -1">
+                <div class="dropdown d-inline">
+                  <button :id="`goToPageDropdown-${pageItem}`" class="page-link" type="button" aria-expanded="false"
+                          :ref="el => setDropdownRef(el, pageItem)" @click="doShowGoToPageDialog">
+                    <i :class="ellipsisIcon"></i>
+                  </button>
+                  <div class="dropdown-menu p-3 c-page-menu" :aria-labelledby="`goToPageDropdown-${pageItem}`">
+                    <div class="input-group">
+                      <input :id="`goToPageInput-${pageItem}`" type="number" class="form-control" placeholder="頁碼"
+                             min="1" :max="pageModel.totalPage" v-model="pageGoToInputValue"
+                             @keydown.enter="doGoToPage"/>
+                      <button type="button" class="btn btn-sm btn-secondary" @click="doGoToPage">前往</button>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </li>
+            <li class="page-item" v-if="pageModel.hasNextPage()">
+              <button class="page-link c-page-action"
+                      title="後一頁" aria-label="後一頁"
+                      @click="pageActionMap.next">
+                <i :class="nextIcon"></i>
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+/* 非 scoped 樣式：定義 CSS 變數 */
+.content-table {
+  /* 定義 CSS 變數預設值 */
+  --c-pagination-bg-color: #fff;
+  --c-pagination-text-color: #2e2e2e;
+  --c-pagination-border-color: #E4B445;
+  --c-pagination-hover-bg-color: #E4B445;
+  --c-pagination-hover-text-color: #fff;
+  --c-pagination-hover-border-color: #d4a33c;
+  --c-pagination-active-bg-color: #E4B445;
+  --c-pagination-active-text-color: #fff;
+  --c-pagination-active-border-color: #E4B445;
+  --c-scrollbar-thumb-color: #E4B445;
+  --c-scrollbar-track-color: #f1f1f1;
+  --c-scrollbar-thumb-hover-color: #d4a33c;
+  --c-scrollbar-height: 8px;
+}
+
+.content-table-body {
+  /* 自訂 scrollbar 樣式 */
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: var(--c-scrollbar-thumb-color) var(--c-scrollbar-track-color); /* Firefox: thumb 和 track 顏色 */
+}
+
+/* WebKit 瀏覽器 (Chrome, Safari, Edge) */
+.content-table-body::-webkit-scrollbar {
+  height: var(--c-scrollbar-height); /* scrollbar 高度 */
+}
+
+.content-table-body::-webkit-scrollbar-track {
+  background: var(--c-scrollbar-track-color); /* track 背景色 */
+  border-radius: 4px;
+}
+
+.content-table-body::-webkit-scrollbar-thumb {
+  background: var(--c-scrollbar-thumb-color); /* thumb 顏色 */
+  border-radius: 4px;
+  transition: background 0.3s;
+}
+
+.content-table-body::-webkit-scrollbar-thumb:hover {
+  background: var(--c-scrollbar-thumb-hover-color); /* hover 時的顏色 */
+}
+
+</style>
+
+<style scoped>
+.content-table {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.content-table table {
+  table-layout: auto;
+}
+
+.content-table-body {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.content-table table th,
+.content-table table td {
+  width: auto;
+}
+
+.content-table table td {
+  vertical-align: middle;
+  text-align: left;
+}
+
+.content-table-footer {
+  border-top: 1px solid #dee2e6;
+}
+
+.content-table .pagination .page-link {
+  min-width: 36px;
+  text-align: center;
+  display: inline-block;
+  color: var(--c-pagination-text-color, #2e2e2e);
+  background-color: var(--c-pagination-bg-color, #fff);
+  border: 1px solid var(--c-pagination-border-color, #E4B445);
+  margin: 0 2px;
+  border-radius: 4px;
+  transition: background-color .3s, color .3s;
+}
+.content-table .pagination .page-link:hover,
+.content-table .pagination .page-link:focus {
+  background-color: var(--c-pagination-hover-bg-color, #E4B445);
+  color: var(--c-pagination-hover-text-color, #fff);
+  border-color: var(--c-pagination-hover-border-color, #d4a33c);
+}
+.content-table .pagination .active .page-link {
+  background-color: var(--c-pagination-active-bg-color, #E4B445);
+  color: var(--c-pagination-active-text-color, #fff);
+  border-color: var(--c-pagination-active-border-color, #E4B445);
+}
+
+.content-table .pagination .page-link.c-page-action {
+  padding-left: 0.2rem;
+  padding-right: 0.2rem;
+}
+
+.dropdown-menu.c-page-menu {
+  min-width: 200px;
+}
+
+.c-sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s;
+}
+
+.c-sortable:hover {
+  background-color: rgba(0, 123, 255, 0.1);
+}
+
+.c-sort-icon {
+  font-size: 16px;
+  color: #6c757d;
+  transition: color 0.2s;
+}
+
+.c-sortable:hover .c-sort-icon {
+  color: #007bff;
+}
+
+.c-sortable .c-arrow-up,
+.c-sortable .c-arrow-down {
+  color: #007bff;
+}
+
+</style>