yuyeon 0.0.9 → 0.0.10

package/lib/components/table/YTable.scss

@@ -34,6 +34,8 @@ $table-cell-padding: 0 16px !default;
 
   &__container {
     > table {
+      font-size: 0.875rem;
+
       > thead,
       > tbody,
       > tfoot {
@@ -48,10 +50,17 @@ $table-cell-padding: 0 16px !default;
         > th {
           height: 56px;
           text-align: left;
+          border-bottom: thin solid rgba(var(--y-line-color), var(--y-line-opacity));
+          user-select: none;
         }
       }
 
       > tbody > tr {
+        &:not(:last-child) {
+          > td {
+            border-bottom: thin solid rgba(var(--y-line-color), var(--y-line-opacity));
+          }
+        }
         > td {
           height: 54px;
         }
@@ -59,3 +68,47 @@ $table-cell-padding: 0 16px !default;
     }
   }
 }
+
+.y-data-table-cell {
+  &--align-end {
+    text-align: end;
+
+    .y-data-table-header__content {
+      justify-content: flex-end;
+    }
+  }
+
+}
+
+.y-data-table-header {
+  &__content {
+    display: flex;
+    align-items: center;
+  }
+
+  &__sorting-icon {
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    margin-left: 4px;
+    cursor: pointer;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+
+    &--disabled {
+      opacity: 0.08;
+      cursor: default;
+    }
+  }
+}
+
+.y-data-table-header--select, .y-data-table-data--select {
+  > .y-icon-checkbox {
+    &:not(&--disabled) {
+      cursor: pointer;
+    }
+  }
+}

package/lib/components/table/composibles/header.mjs

@@ -0,0 +1,110 @@
+import { inject, provide, ref, watchEffect } from 'vue';
+import { propsFactory } from "../../../util/vue-component.mjs";
+import { getRangeArr } from "../../../util/common.mjs";
+export const pressDataTableHeader = propsFactory({
+  headers: {
+    type: Array,
+    default: () => []
+  }
+}, 'YDataTable--header');
+export const Y_DATA_TABLE_HEADER_KEY = Symbol.for('yuyeon.data-table.header');
+export function createHeader(props, options) {
+  const headers = ref([]);
+  const columns = ref([]);
+  watchEffect(() => {
+    const rows = props.headers.length > 0 ? Array.isArray(props.headers[0]) ? props.headers : [props.headers] : [];
+    const flat = rows.flatMap((row, index) => row.map(column => ({
+      column,
+      rowIndex: index
+    })));
+    const rowCount = rows.length;
+    const defaultHeader = {
+      text: '',
+      sortable: false
+    };
+    const defaultActionHeader = {
+      ...defaultHeader,
+      width: 48
+    };
+    if (options?.enableSelect?.value) {
+      const foundIndex = flat.findIndex(_ref => {
+        let {
+          column
+        } = _ref;
+        return column.key === 'data-table-select';
+      });
+      if (foundIndex < 0) {
+        flat.unshift({
+          column: {
+            ...defaultActionHeader,
+            key: 'data-table-select',
+            rowspan: rowCount
+          },
+          rowIndex: 0
+        });
+      } else {
+        flat.splice(foundIndex, 1, {
+          column: {
+            ...defaultActionHeader,
+            ...flat[foundIndex].column
+          },
+          rowIndex: flat[foundIndex].rowIndex
+        });
+      }
+    }
+    const fixedRows = getRangeArr(rowCount).map(() => []);
+    const fixedOffsets = getRangeArr(rowCount).fill(0);
+    flat.forEach(_ref2 => {
+      let {
+        column,
+        rowIndex
+      } = _ref2;
+      const {
+        key
+      } = column;
+      for (let i = rowIndex; i <= rowIndex + (column.rowspan ?? 1) - 1; i += 1) {
+        fixedRows[i].push({
+          ...column,
+          key,
+          fixedOffset: fixedOffsets[i],
+          sortable: column.sortable ?? !!key
+        });
+        fixedOffsets[i] += Number(column.width ?? 0);
+      }
+    });
+    fixedRows.forEach(row => {
+      for (let i = row.length; i -= 1; i >= 0) {
+        if (row[i].fixed) {
+          row[i].lastFixed = true;
+          return;
+        }
+      }
+    });
+    const seen = new Set();
+    headers.value = fixedRows.map(row => {
+      const filtered = [];
+      for (const column of row) {
+        if (!seen.has(column.key)) {
+          seen.add(column.key);
+          filtered.push(column);
+        }
+      }
+      return filtered;
+    });
+    columns.value = fixedRows.at(-1) ?? [];
+  });
+  const data = {
+    headers,
+    columns
+  };
+  provide(Y_DATA_TABLE_HEADER_KEY, data);
+  return data;
+}
+export function useHeader() {
+  const data = inject(Y_DATA_TABLE_HEADER_KEY);
+  if (!data) {
+    throw new Error(`Not provided: ${Y_DATA_TABLE_HEADER_KEY.description}`);
+  }
+  return data;
+}
+//# sourceMappingURL=header.mjs.map

package/lib/components/table/composibles/header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.mjs","names":["inject","provide","ref","watchEffect","propsFactory","getRangeArr","pressDataTableHeader","headers","type","Array","default","Y_DATA_TABLE_HEADER_KEY","Symbol","for","createHeader","props","options","columns","rows","length","isArray","flat","flatMap","row","index","map","column","rowIndex","rowCount","defaultHeader","text","sortable","defaultActionHeader","width","enableSelect","value","foundIndex","findIndex","_ref","key","unshift","rowspan","splice","fixedRows","fixedOffsets","fill","forEach","_ref2","i","push","fixedOffset","Number","fixed","lastFixed","seen","Set","filtered","has","add","at","data","useHeader","Error","description"],"sources":["../../../../src/components/table/composibles/header.ts"],"sourcesContent":["import {\n  DeepReadonly,\n  InjectionKey,\n  PropType,\n  Ref,\n  inject,\n  provide,\n  ref,\n  watchEffect,\n} from 'vue';\n\nimport { propsFactory } from '../../../util/vue-component';\n\nimport { DataTableHeader, InternalDataTableHeader } from '../types';\nimport { getRangeArr } from \"../../../util/common\";\n\nexport const pressDataTableHeader = propsFactory(\n  {\n    headers: {\n      type: Array as PropType<DataTableHeader[] | DataTableHeader[][]>,\n      default: () => [],\n    },\n  },\n  'YDataTable--header',\n);\n\nexport const Y_DATA_TABLE_HEADER_KEY: InjectionKey<{\n  headers: Ref<InternalDataTableHeader[][]>;\n  columns: Ref<InternalDataTableHeader[]>;\n}> = Symbol.for('yuyeon.data-table.header');\n\ntype HeaderProps = {\n  headers: DeepReadonly<DataTableHeader[] | DataTableHeader[][]>;\n};\n\nexport function createHeader(\n  props: HeaderProps,\n  options?: {\n    enableSelect?: Ref<boolean>;\n  },\n) {\n  const headers = ref<InternalDataTableHeader[][]>([]);\n  const columns = ref<InternalDataTableHeader[]>([]);\n\n  watchEffect(() => {\n    const rows =\n      props.headers.length > 0\n        ? Array.isArray(props.headers[0])\n          ? (props.headers as DataTableHeader[][])\n          : [props.headers as DataTableHeader[]]\n        : [];\n    const flat = rows.flatMap((row, index) =>\n      row.map((column) => ({ column, rowIndex: index })),\n    );\n    const rowCount = rows.length;\n    const defaultHeader = { text: '', sortable: false };\n    const defaultActionHeader = { ...defaultHeader, width: 48 };\n\n    if (options?.enableSelect?.value) {\n      const foundIndex = flat.findIndex(\n        ({ column }) => column.key === 'data-table-select',\n      );\n      if (foundIndex < 0) {\n        flat.unshift({\n          column: {\n            ...defaultActionHeader,\n            key: 'data-table-select',\n            rowspan: rowCount,\n          },\n          rowIndex: 0,\n        });\n      } else {\n        flat.splice(foundIndex, 1, {\n          column: {\n            ...defaultActionHeader,\n            ...flat[foundIndex].column,\n          },\n          rowIndex: flat[foundIndex].rowIndex,\n        });\n      }\n    }\n\n    const fixedRows: InternalDataTableHeader[][] = getRangeArr(rowCount).map(() => []);\n    const fixedOffsets = getRangeArr(rowCount).fill(0);\n\n    flat.forEach(({ column, rowIndex }) => {\n      const { key } = column;\n      for (let i = rowIndex; i <= rowIndex + (column.rowspan ?? 1) - 1; i += 1) {\n        fixedRows[i].push({\n          ...column,\n          key,\n          fixedOffset: fixedOffsets[i],\n          sortable: column.sortable ?? !!key,\n        })\n        fixedOffsets[i] += Number(column.width ?? 0);\n      }\n    });\n\n    fixedRows.forEach((row) => {\n      for (let i = row.length; i -= 1; i >= 0) {\n        if (row[i].fixed) {\n          row[i].lastFixed = true;\n          return;\n        }\n      }\n    })\n\n    const seen = new Set();\n    headers.value = fixedRows.map((row) => {\n      const filtered = [];\n      for (const column of row) {\n        if (!seen.has(column.key)) {\n          seen.add(column.key);\n          filtered.push(column);\n        }\n      }\n      return filtered;\n    });\n\n    columns.value = fixedRows.at(-1) ?? [];\n  });\n\n  const data = { headers, columns };\n\n  provide(Y_DATA_TABLE_HEADER_KEY, data);\n\n  return data;\n}\n\nexport function useHeader() {\n  const data = inject(Y_DATA_TABLE_HEADER_KEY);\n  if (!data) {\n    throw new Error(`Not provided: ${Y_DATA_TABLE_HEADER_KEY.description}`);\n  }\n  return data;\n}\n"],"mappings":"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"}

package/lib/components/table/composibles/items.mjs

@@ -0,0 +1,45 @@
+import { computed } from 'vue';
+import { getPropertyFromItem } from "../../../util/common.mjs";
+import { propsFactory } from "../../../util/vue-component.mjs";
+export const pressDataTableItemsProps = propsFactory({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemKey: {
+    type: [String, Array, Function],
+    default: 'id'
+  },
+  itemSelectable: {
+    type: [String, Array, Function],
+    default: null
+  },
+  returnItem: Boolean
+}, 'YDataTable--items');
+export function updateItem(props, item, index, columns) {
+  const value = props.returnItem ? item : getPropertyFromItem(item, props.itemKey);
+  const selectable = getPropertyFromItem(item, props.itemSelectable, true);
+  const itemColumns = columns.reduce((acc, column) => {
+    acc[column.key] = getPropertyFromItem(item, column.value ?? column.key);
+    return acc;
+  }, {});
+  return {
+    index,
+    value,
+    selectable,
+    columns: itemColumns,
+    raw: item
+  };
+}
+export function updateItems(props, items, columns) {
+  return items.map((item, index) => updateItem(props, item, index, columns));
+}
+export function useItems(props, columns) {
+  const items = computed(() => {
+    return updateItems(props, props.items, columns.value);
+  });
+  return {
+    items
+  };
+}
+//# sourceMappingURL=items.mjs.map

package/lib/components/table/composibles/items.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"items.mjs","names":["computed","getPropertyFromItem","propsFactory","pressDataTableItemsProps","items","type","Array","default","itemKey","String","Function","itemSelectable","returnItem","Boolean","updateItem","props","item","index","columns","value","selectable","itemColumns","reduce","acc","column","key","raw","updateItems","map","useItems"],"sources":["../../../../src/components/table/composibles/items.ts"],"sourcesContent":["import { PropType, Ref, computed } from 'vue';\n\nimport { getPropertyFromItem } from '../../../util/common';\nimport { propsFactory } from '../../../util/vue-component';\n\nimport { CandidateKey } from '../../../types';\nimport { DataTableItem, InternalDataTableHeader } from '../types';\n\nexport type DataTableItemsProps = {\n  items: any[];\n  itemKey: any;\n  itemSelectable: any;\n  returnItem: boolean;\n};\n\nexport const pressDataTableItemsProps = propsFactory(\n  {\n    items: {\n      type: Array as PropType<DataTableItemsProps['items']>,\n      default: () => [],\n    },\n    itemKey: {\n      type: [String, Array, Function] as PropType<any>,\n      default: 'id',\n    },\n    itemSelectable: {\n      type: [String, Array, Function] as PropType<any>,\n      default: null,\n    },\n    returnItem: Boolean,\n  },\n  'YDataTable--items',\n);\n\nexport function updateItem(\n  props: Omit<DataTableItemsProps, 'items'>,\n  item: any,\n  index: number,\n  columns: InternalDataTableHeader[],\n): DataTableItem {\n  const value = props.returnItem\n    ? item\n    : getPropertyFromItem(item, props.itemKey);\n  const selectable = getPropertyFromItem(item, props.itemSelectable, true);\n  const itemColumns = columns.reduce((acc, column) => {\n    acc[column.key] = getPropertyFromItem(item, column.value ?? column.key);\n    return acc;\n  }, {} as Record<string, unknown>);\n\n  return {\n    index,\n    value,\n    selectable,\n    columns: itemColumns,\n    raw: item,\n  };\n}\n\nexport function updateItems(\n  props: Omit<DataTableItemsProps, 'items'>,\n  items: DataTableItemsProps['items'],\n  columns: InternalDataTableHeader[],\n): DataTableItem[] {\n  return items.map((item, index) => updateItem(props, item, index, columns));\n}\n\nexport function useItems(\n  props: DataTableItemsProps,\n  columns: Ref<InternalDataTableHeader[]>,\n) {\n  const items = computed(() => {\n    return updateItems(props, props.items, columns.value);\n  });\n  return { items };\n}\n"],"mappings":"AAAA,SAAwBA,QAAQ,QAAQ,KAAK;AAAC,SAErCC,mBAAmB;AAAA,SACnBC,YAAY;AAYrB,OAAO,MAAMC,wBAAwB,GAAGD,YAAY,CAClD;EACEE,KAAK,EAAE;IACLC,IAAI,EAAEC,KAA+C;IACrDC,OAAO,EAAEA,CAAA,KAAM;EACjB,CAAC;EACDC,OAAO,EAAE;IACPH,IAAI,EAAE,CAACI,MAAM,EAAEH,KAAK,EAAEI,QAAQ,CAAkB;IAChDH,OAAO,EAAE;EACX,CAAC;EACDI,cAAc,EAAE;IACdN,IAAI,EAAE,CAACI,MAAM,EAAEH,KAAK,EAAEI,QAAQ,CAAkB;IAChDH,OAAO,EAAE;EACX,CAAC;EACDK,UAAU,EAAEC;AACd,CAAC,EACD,mBACF,CAAC;AAED,OAAO,SAASC,UAAUA,CACxBC,KAAyC,EACzCC,IAAS,EACTC,KAAa,EACbC,OAAkC,EACnB;EACf,MAAMC,KAAK,GAAGJ,KAAK,CAACH,UAAU,GAC1BI,IAAI,GACJf,mBAAmB,CAACe,IAAI,EAAED,KAAK,CAACP,OAAO,CAAC;EAC5C,MAAMY,UAAU,GAAGnB,mBAAmB,CAACe,IAAI,EAAED,KAAK,CAACJ,cAAc,EAAE,IAAI,CAAC;EACxE,MAAMU,WAAW,GAAGH,OAAO,CAACI,MAAM,CAAC,CAACC,GAAG,EAAEC,MAAM,KAAK;IAClDD,GAAG,CAACC,MAAM,CAACC,GAAG,CAAC,GAAGxB,mBAAmB,CAACe,IAAI,EAAEQ,MAAM,CAACL,KAAK,IAAIK,MAAM,CAACC,GAAG,CAAC;IACvE,OAAOF,GAAG;EACZ,CAAC,EAAE,CAAC,CAA4B,CAAC;EAEjC,OAAO;IACLN,KAAK;IACLE,KAAK;IACLC,UAAU;IACVF,OAAO,EAAEG,WAAW;IACpBK,GAAG,EAAEV;EACP,CAAC;AACH;AAEA,OAAO,SAASW,WAAWA,CACzBZ,KAAyC,EACzCX,KAAmC,EACnCc,OAAkC,EACjB;EACjB,OAAOd,KAAK,CAACwB,GAAG,CAAC,CAACZ,IAAI,EAAEC,KAAK,KAAKH,UAAU,CAACC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,CAAC,CAAC;AAC5E;AAEA,OAAO,SAASW,QAAQA,CACtBd,KAA0B,EAC1BG,OAAuC,EACvC;EACA,MAAMd,KAAK,GAAGJ,QAAQ,CAAC,MAAM;IAC3B,OAAO2B,WAAW,CAACZ,KAAK,EAAEA,KAAK,CAACX,KAAK,EAAEc,OAAO,CAACC,KAAK,CAAC;EACvD,CAAC,CAAC;EACF,OAAO;IAAEf;EAAM,CAAC;AAClB"}

package/lib/components/table/composibles/options.mjs

@@ -0,0 +1,33 @@
+import { computed, watch } from 'vue';
+import { deepEqual } from "../../../util/common.mjs";
+export function useOptions(_ref, emit) {
+  let {
+    page,
+    pageSize,
+    sortBy,
+    search
+  } = _ref;
+  const options = computed(() => {
+    return {
+      page: page.value,
+      pageSize: pageSize.value,
+      sortBy: sortBy.value,
+      search: search.value
+    };
+  });
+  watch(() => search?.value, () => {
+    page.value = 1;
+  });
+  let optionsCache = null;
+  watch(options, () => {
+    if (deepEqual(optionsCache, options.value)) {
+      return;
+    }
+    emit('update:options', options.value);
+    optionsCache = options.value;
+  }, {
+    deep: true,
+    immediate: true
+  });
+}
+//# sourceMappingURL=options.mjs.map

package/lib/components/table/composibles/options.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.mjs","names":["computed","watch","deepEqual","useOptions","_ref","emit","page","pageSize","sortBy","search","options","value","optionsCache","deep","immediate"],"sources":["../../../../src/components/table/composibles/options.ts"],"sourcesContent":["import { Ref, computed, watch } from 'vue';\n\nimport { deepEqual } from '../../../util/common';\nimport { SortOption } from \"../types\";\n\ntype DataTableOptionsState = {\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  sortBy: Ref<readonly SortOption[]>;\n  search: Ref<string | undefined>;\n};\n\nexport function useOptions(\n  { page, pageSize, sortBy, search }: DataTableOptionsState,\n  emit: Function,\n) {\n  const options = computed(() => {\n    return {\n      page: page.value,\n      pageSize: pageSize.value,\n      sortBy: sortBy.value,\n      search: search.value,\n    };\n  });\n\n  watch(\n    () => search?.value,\n    () => {\n      page.value = 1;\n    },\n  );\n\n  let optionsCache = null as unknown;\n\n  watch(\n    options,\n    () => {\n      if (deepEqual(optionsCache, options.value)) {\n        return;\n      }\n      emit('update:options', options.value);\n      optionsCache = options.value;\n    },\n    { deep: true, immediate: true },\n  );\n}\n"],"mappings":"AAAA,SAAcA,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAC,SAElCC,SAAS;AAUlB,OAAO,SAASC,UAAUA,CAAAC,IAAA,EAExBC,IAAc,EACd;EAAA,IAFA;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAA8B,CAAC,GAAAL,IAAA;EAGzD,MAAMM,OAAO,GAAGV,QAAQ,CAAC,MAAM;IAC7B,OAAO;MACLM,IAAI,EAAEA,IAAI,CAACK,KAAK;MAChBJ,QAAQ,EAAEA,QAAQ,CAACI,KAAK;MACxBH,MAAM,EAAEA,MAAM,CAACG,KAAK;MACpBF,MAAM,EAAEA,MAAM,CAACE;IACjB,CAAC;EACH,CAAC,CAAC;EAEFV,KAAK,CACH,MAAMQ,MAAM,EAAEE,KAAK,EACnB,MAAM;IACJL,IAAI,CAACK,KAAK,GAAG,CAAC;EAChB,CACF,CAAC;EAED,IAAIC,YAAY,GAAG,IAAe;EAElCX,KAAK,CACHS,OAAO,EACP,MAAM;IACJ,IAAIR,SAAS,CAACU,YAAY,EAAEF,OAAO,CAACC,KAAK,CAAC,EAAE;MAC1C;IACF;IACAN,IAAI,CAAC,gBAAgB,EAAEK,OAAO,CAACC,KAAK,CAAC;IACrCC,YAAY,GAAGF,OAAO,CAACC,KAAK;EAC9B,CAAC,EACD;IAAEE,IAAI,EAAE,IAAI;IAAEC,SAAS,EAAE;EAAK,CAChC,CAAC;AACH"}

package/lib/components/table/composibles/pagination.mjs

@@ -0,0 +1,82 @@
+import { computed, inject, provide, watchEffect } from 'vue';
+import { useModelDuplex } from "../../../composables/communication.mjs";
+import { clamp } from "../../../util/common.mjs";
+import { propsFactory } from "../../../util/vue-component.mjs";
+export const Y_DATA_TABLE_PAGINATION_KEY = Symbol.for('yuyeon.data-table.pagination');
+export const pressDataTablePaginationProps = propsFactory({
+  page: {
+    type: [Number, String],
+    default: 0
+  },
+  pageSize: {
+    type: [Number, String],
+    default: 10
+  }
+}, 'YDataTable--pagination');
+export function createPagination(props) {
+  const page = useModelDuplex(props, 'page', undefined, value => +(value ?? 0));
+  const pageSize = useModelDuplex(props, 'pageSize', undefined, value => +(value ?? 10));
+  return {
+    page,
+    pageSize
+  };
+}
+export function providePagination(options) {
+  const {
+    page,
+    pageSize,
+    total
+  } = options;
+  const startIndex = computed(() => {
+    if (pageSize.value === -1) return 0;
+    return pageSize.value * (page.value - 1);
+  });
+  const endIndex = computed(() => {
+    if (pageSize.value === -1) return total.value;
+    return Math.min(total.value, startIndex.value + pageSize.value);
+  });
+  const pageLength = computed(() => {
+    if (pageSize.value === -1 || total.value === 0) return 1;
+    return Math.ceil(total.value / pageSize.value);
+  });
+  watchEffect(() => {
+    if (page.value > pageLength.value) {
+      page.value = pageLength.value;
+    }
+  });
+  function setPageSize(value) {
+    pageSize.value = value;
+    page.value = 1;
+  }
+  function nextPage() {
+    page.value = clamp(page.value + 1, 1, pageLength.value);
+  }
+  function prevPage() {
+    page.value = clamp(page.value - 1, 1, pageLength.value);
+  }
+  function setPage(value) {
+    page.value = clamp(value, 1, pageLength.value);
+  }
+  const data = {
+    page,
+    pageSize,
+    startIndex,
+    endIndex,
+    pageLength,
+    total,
+    nextPage,
+    prevPage,
+    setPage,
+    setPageSize
+  };
+  provide(Y_DATA_TABLE_PAGINATION_KEY, data);
+  return data;
+}
+export function usePagination() {
+  const data = inject(Y_DATA_TABLE_PAGINATION_KEY);
+  if (!data) {
+    throw new Error(`Not provided: ${Y_DATA_TABLE_PAGINATION_KEY.description}`);
+  }
+  return data;
+}
+//# sourceMappingURL=pagination.mjs.map

package/lib/components/table/composibles/pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.mjs","names":["computed","inject","provide","watchEffect","useModelDuplex","clamp","propsFactory","Y_DATA_TABLE_PAGINATION_KEY","Symbol","for","pressDataTablePaginationProps","page","type","Number","String","default","pageSize","createPagination","props","undefined","value","providePagination","options","total","startIndex","endIndex","Math","min","pageLength","ceil","setPageSize","nextPage","prevPage","setPage","data","usePagination","Error","description"],"sources":["../../../../src/components/table/composibles/pagination.ts"],"sourcesContent":["import type { InjectionKey, PropType, Ref } from 'vue';\nimport { computed, inject, provide, watchEffect } from 'vue';\n\nimport { useModelDuplex } from '../../../composables/communication';\nimport { clamp } from '../../../util/common';\nimport { propsFactory } from '../../../util/vue-component';\nimport { DataTableProvidePaginationData } from \"../types\";\n\nexport const Y_DATA_TABLE_PAGINATION_KEY: InjectionKey<{\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  startIndex: Ref<number>;\n  endIndex: Ref<number>;\n  pageLength: Ref<number>;\n  total: Ref<number>;\n  prevPage: () => void;\n  nextPage: () => void;\n  setPage: (page: number) => void;\n  setPageSize: (size: number) => void;\n}> = Symbol.for('yuyeon.data-table.pagination');\n\nexport const pressDataTablePaginationProps = propsFactory(\n  {\n    page: {\n      type: [Number, String] as PropType<number | string>,\n      default: 0,\n    },\n    pageSize: {\n      type: [Number, String] as PropType<number | string>,\n      default: 10,\n    },\n  },\n  'YDataTable--pagination',\n);\n\ntype PaginationProps = {\n  page: number | string;\n  'onUpdate:page': ((v: any) => void) | undefined;\n  pageSize: number | string;\n  'onUpdate:pageSize': ((v: any) => void) | undefined;\n  total?: number | string;\n};\n\nexport function createPagination(props: PaginationProps) {\n  const page = useModelDuplex(\n    props,\n    'page',\n    undefined,\n    (value) => +(value ?? 0),\n  );\n  const pageSize = useModelDuplex(\n    props,\n    'pageSize',\n    undefined,\n    (value) => +(value ?? 10),\n  );\n  return { page, pageSize };\n}\n\nexport function providePagination(options: {\n  page: Ref<number>;\n  pageSize: Ref<number>;\n  total: Ref<number>;\n}) {\n  const { page, pageSize, total } = options;\n\n  const startIndex = computed(() => {\n    if (pageSize.value === -1) return 0;\n\n    return pageSize.value * (page.value - 1);\n  });\n  const endIndex = computed(() => {\n    if (pageSize.value === -1) return total.value;\n\n    return Math.min(total.value, startIndex.value + pageSize.value);\n  });\n\n  const pageLength = computed(() => {\n    if (pageSize.value === -1 || total.value === 0) return 1;\n\n    return Math.ceil(total.value / pageSize.value);\n  });\n\n  watchEffect(() => {\n    if (page.value > pageLength.value) {\n      page.value = pageLength.value;\n    }\n  });\n\n  function setPageSize(value: number) {\n    pageSize.value = value;\n    page.value = 1;\n  }\n\n  function nextPage() {\n    page.value = clamp(page.value + 1, 1, pageLength.value);\n  }\n\n  function prevPage() {\n    page.value = clamp(page.value - 1, 1, pageLength.value);\n  }\n\n  function setPage(value: number) {\n    page.value = clamp(value, 1, pageLength.value);\n  }\n\n  const data: DataTableProvidePaginationData = {\n    page,\n    pageSize,\n    startIndex,\n    endIndex,\n    pageLength,\n    total,\n    nextPage,\n    prevPage,\n    setPage,\n    setPageSize,\n  };\n\n  provide(Y_DATA_TABLE_PAGINATION_KEY, data);\n\n  return data;\n}\n\nexport function usePagination() {\n  const data = inject(Y_DATA_TABLE_PAGINATION_KEY);\n  if (!data) {\n    throw new Error(`Not provided: ${Y_DATA_TABLE_PAGINATION_KEY.description}`);\n  }\n  return data;\n}\n"],"mappings":"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"}

package/lib/components/table/composibles/selection.mjs

@@ -0,0 +1,179 @@
+import { computed, inject, provide } from 'vue';
+import { useModelDuplex } from "../../../composables/communication.mjs";
+import { wrapInArray } from "../../../util/array.mjs";
+import { propsFactory } from "../../../util/vue-component.mjs";
+export const pressDataTableSelectionProps = propsFactory({
+  enableSelect: Boolean,
+  selectStrategy: {
+    type: [String, Object],
+    default: 'page'
+  },
+  modelValue: {
+    type: Array,
+    default: () => []
+  }
+}, 'YDataTable--selection');
+const singleSelectStrategy = {
+  showSelectAll: false,
+  allSelected: () => [],
+  select: _ref => {
+    let {
+      items,
+      value
+    } = _ref;
+    return new Set(value ? [items[0]?.value] : []);
+  },
+  selectAll: _ref2 => {
+    let {
+      selected
+    } = _ref2;
+    return selected;
+  }
+};
+const pageSelectStrategy = {
+  showSelectAll: true,
+  allSelected: _ref3 => {
+    let {
+      pageItems
+    } = _ref3;
+    return pageItems;
+  },
+  select: _ref4 => {
+    let {
+      items,
+      value,
+      selected
+    } = _ref4;
+    for (const item of items) {
+      if (value) selected.add(item.value);else selected.delete(item.value);
+    }
+    return selected;
+  },
+  selectAll: _ref5 => {
+    let {
+      value,
+      pageItems,
+      selected
+    } = _ref5;
+    return pageSelectStrategy.select({
+      items: pageItems,
+      value,
+      selected
+    });
+  }
+};
+const allSelectStrategy = {
+  showSelectAll: true,
+  allSelected: _ref6 => {
+    let {
+      allItems
+    } = _ref6;
+    return allItems;
+  },
+  select: _ref7 => {
+    let {
+      items,
+      value,
+      selected
+    } = _ref7;
+    for (const item of items) {
+      if (value) selected.add(item.value);else selected.delete(item.value);
+    }
+    return selected;
+  },
+  selectAll: _ref8 => {
+    let {
+      value,
+      allItems,
+      selected
+    } = _ref8;
+    return allSelectStrategy.select({
+      items: allItems,
+      value,
+      selected
+    });
+  }
+};
+export const Y_DATA_TABLE_SELECTION_KEY = Symbol.for('yuyeon.data-table.selection');
+export function provideSelection(props, _ref9) {
+  let {
+    allItems,
+    pageItems
+  } = _ref9;
+  const selected = useModelDuplex(props, 'modelValue', props.modelValue, v => {
+    return new Set(v);
+  }, v => {
+    return [...v.values()];
+  });
+  const allSelectables = computed(() => allItems.value.filter(item => item.selectable));
+  const pageSelectables = computed(() => pageItems.value.filter(item => item.selectable));
+  const selectStrategy = computed(() => {
+    if (typeof props.selectStrategy === 'object') {
+      return props.selectStrategy;
+    }
+    switch (props.selectStrategy) {
+      case 'single':
+        return singleSelectStrategy;
+      case 'all':
+        return allSelectStrategy;
+      case 'page':
+      default:
+        return pageSelectStrategy;
+    }
+  });
+  function isSelected(items) {
+    return wrapInArray(items).every(item => selected.value.has(item.value));
+  }
+  function isSomeSelected(items) {
+    return wrapInArray(items).some(item => selected.value.has(item.value));
+  }
+  function select(items, value) {
+    selected.value = selectStrategy.value.select({
+      items,
+      value,
+      selected: new Set(selected.value)
+    });
+  }
+  function toggleSelect(item) {
+    select([item], !isSelected([item]));
+  }
+  function selectAll(value) {
+    selected.value = selectStrategy.value.selectAll({
+      value,
+      allItems: allSelectables.value,
+      pageItems: pageSelectables.value,
+      selected: new Set(selected.value)
+    });
+  }
+  const selectables = computed(() => {
+    return selectStrategy.value.allSelected({
+      allItems: allSelectables.value,
+      pageItems: pageSelectables.value
+    });
+  });
+  const someSelected = computed(() => selected.value.size > 0);
+  const allSelected = computed(() => {
+    return isSelected(selectables.value);
+  });
+  const data = {
+    toggleSelect,
+    select,
+    selectAll,
+    isSelected,
+    isSomeSelected,
+    someSelected,
+    allSelected,
+    showSelectAll: selectStrategy.value.showSelectAll,
+    selectables
+  };
+  provide(Y_DATA_TABLE_SELECTION_KEY, data);
+  return data;
+}
+export function useSelection() {
+  const data = inject(Y_DATA_TABLE_SELECTION_KEY);
+  if (!data) {
+    throw new Error(`Not provided: ${Y_DATA_TABLE_SELECTION_KEY.description}`);
+  }
+  return data;
+}
+//# sourceMappingURL=selection.mjs.map

package/lib/components/table/composibles/selection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.mjs","names":["computed","inject","provide","useModelDuplex","wrapInArray","propsFactory","pressDataTableSelectionProps","enableSelect","Boolean","selectStrategy","type","String","Object","default","modelValue","Array","singleSelectStrategy","showSelectAll","allSelected","select","_ref","items","value","Set","selectAll","_ref2","selected","pageSelectStrategy","_ref3","pageItems","_ref4","item","add","delete","_ref5","allSelectStrategy","_ref6","allItems","_ref7","_ref8","Y_DATA_TABLE_SELECTION_KEY","Symbol","for","provideSelection","props","_ref9","v","values","allSelectables","filter","selectable","pageSelectables","isSelected","every","has","isSomeSelected","some","toggleSelect","selectables","someSelected","size","data","useSelection","Error","description"],"sources":["../../../../src/components/table/composibles/selection.ts"],"sourcesContent":["import { InjectionKey, PropType, Ref, computed, inject, provide } from 'vue';\n\nimport { useModelDuplex } from '../../../composables/communication';\nimport { wrapInArray } from '../../../util/array';\nimport { propsFactory } from '../../../util/vue-component';\n\nimport { DataTableProvideSelectionData } from '../types';\nimport { DataTableItemsProps } from './items';\n\nexport interface SelectableItem {\n  value: any;\n  selectable: boolean;\n}\n\nexport interface DataTableSelectStrategy {\n  showSelectAll: boolean;\n  allSelected: (data: {\n    allItems: SelectableItem[];\n    pageItems: SelectableItem[];\n  }) => SelectableItem[];\n  select: (data: {\n    items: SelectableItem[];\n    value: boolean;\n    selected: Set<unknown>;\n  }) => Set<unknown>;\n  selectAll: (data: {\n    value: boolean;\n    allItems: SelectableItem[];\n    pageItems: SelectableItem[];\n    selected: Set<unknown>;\n  }) => Set<unknown>;\n}\n\nexport const pressDataTableSelectionProps = propsFactory(\n  {\n    enableSelect: Boolean,\n    selectStrategy: {\n      type: [String, Object] as PropType<'single' | 'page' | 'all'>,\n      default: 'page',\n    },\n    modelValue: {\n      type: Array as PropType<readonly any[]>,\n      default: () => [],\n    },\n  },\n  'YDataTable--selection',\n);\n\ntype DataTableSelectionProps = Pick<DataTableItemsProps, 'itemKey'> & {\n  modelValue: readonly any[];\n  selectStrategy: 'single' | 'page' | 'all';\n  'onUpdate:modelValue': ((value: any[]) => void) | undefined;\n};\n\nconst singleSelectStrategy: DataTableSelectStrategy = {\n  showSelectAll: false,\n  allSelected: () => [],\n  select: ({ items, value }) => {\n    return new Set(value ? [items[0]?.value] : []);\n  },\n  selectAll: ({ selected }) => selected,\n};\n\nconst pageSelectStrategy: DataTableSelectStrategy = {\n  showSelectAll: true,\n  allSelected: ({ pageItems }) => pageItems,\n  select: ({ items, value, selected }) => {\n    for (const item of items) {\n      if (value) selected.add(item.value);\n      else selected.delete(item.value);\n    }\n\n    return selected;\n  },\n  selectAll: ({ value, pageItems, selected }) =>\n    pageSelectStrategy.select({ items: pageItems, value, selected }),\n};\n\nconst allSelectStrategy: DataTableSelectStrategy = {\n  showSelectAll: true,\n  allSelected: ({ allItems }) => allItems,\n  select: ({ items, value, selected }) => {\n    for (const item of items) {\n      if (value) selected.add(item.value);\n      else selected.delete(item.value);\n    }\n\n    return selected;\n  },\n  selectAll: ({ value, allItems, selected }) =>\n    allSelectStrategy.select({ items: allItems, value, selected }),\n};\n\nexport const Y_DATA_TABLE_SELECTION_KEY: InjectionKey<\n  ReturnType<typeof provideSelection>\n> = Symbol.for('yuyeon.data-table.selection');\n\nexport function provideSelection(\n  props: DataTableSelectionProps,\n  {\n    allItems,\n    pageItems,\n  }: { allItems: Ref<SelectableItem[]>; pageItems: Ref<SelectableItem[]> },\n) {\n  const selected = useModelDuplex(\n    props,\n    'modelValue',\n    props.modelValue,\n    (v) => {\n      return new Set(v);\n    },\n    (v) => {\n      return [...v.values()];\n    },\n  );\n\n  const allSelectables = computed(() =>\n    allItems.value.filter((item) => item.selectable),\n  );\n\n  const pageSelectables = computed(() =>\n    pageItems.value.filter((item) => item.selectable),\n  );\n\n  const selectStrategy = computed(() => {\n    if (typeof props.selectStrategy === 'object') {\n      return props.selectStrategy;\n    }\n    switch (props.selectStrategy) {\n      case 'single':\n        return singleSelectStrategy;\n      case 'all':\n        return allSelectStrategy;\n      case 'page':\n      default:\n        return pageSelectStrategy;\n    }\n  });\n\n  function isSelected(items: SelectableItem | SelectableItem[]) {\n    return wrapInArray(items).every((item) => selected.value.has(item.value));\n  }\n\n  function isSomeSelected(items: SelectableItem | SelectableItem[]) {\n    return wrapInArray(items).some((item) => selected.value.has(item.value));\n  }\n\n  function select(items: SelectableItem[], value: boolean) {\n    selected.value = selectStrategy.value.select({\n      items,\n      value,\n      selected: new Set(selected.value),\n    });\n  }\n\n  function toggleSelect(item: SelectableItem) {\n    select([item], !isSelected([item]));\n  }\n\n  function selectAll(value: boolean) {\n    selected.value = selectStrategy.value.selectAll({\n      value,\n      allItems: allSelectables.value,\n      pageItems: pageSelectables.value,\n      selected: new Set(selected.value),\n    });\n  }\n\n  const selectables = computed(() => {\n    return selectStrategy.value.allSelected({\n      allItems: allSelectables.value,\n      pageItems: pageSelectables.value,\n    });\n  });\n\n  const someSelected = computed(() => selected.value.size > 0);\n\n  const allSelected = computed(() => {\n    return isSelected(selectables.value);\n  });\n\n  const data: DataTableProvideSelectionData = {\n    toggleSelect,\n    select,\n    selectAll,\n    isSelected,\n    isSomeSelected,\n    someSelected,\n    allSelected,\n    showSelectAll: selectStrategy.value.showSelectAll,\n    selectables,\n  };\n\n  provide(Y_DATA_TABLE_SELECTION_KEY, data);\n\n  return data;\n}\n\nexport function useSelection() {\n  const data = inject(Y_DATA_TABLE_SELECTION_KEY);\n  if (!data) {\n    throw new Error(`Not provided: ${Y_DATA_TABLE_SELECTION_KEY.description}`);\n  }\n\n  return data;\n}\n"],"mappings":"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"}

package/lib/components/table/composibles/sorting.mjs

@@ -0,0 +1,74 @@
+import { toRef } from '@vue/runtime-core';
+import { inject, provide } from 'vue';
+import { useModelDuplex } from "../../../composables/communication.mjs";
+import { propsFactory } from "../../../util/vue-component.mjs";
+const Y_DATA_TABLE_SORTING_KEY = Symbol.for('yuyeon.data-table.sorting');
+export const pressDataTableSortProps = propsFactory({
+  sortBy: {
+    type: Array,
+    default: () => []
+  },
+  multiSort: Boolean
+}, 'YDataTable--sorting');
+export function createSorting(props) {
+  const sortBy = useModelDuplex(props, 'sortBy');
+  const multiSort = toRef(props, 'multiSort');
+  return {
+    sortBy,
+    multiSort
+  };
+}
+export function provideSorting(options) {
+  const {
+    sortBy,
+    multiSort,
+    page
+  } = options;
+  const toggleSort = column => {
+    let neo = sortBy.value?.map(v => ({
+      ...v
+    })) ?? [];
+    const target = neo.find(v => v.key === column.key);
+    const sortOption = {
+      key: column.key,
+      order: 'asc'
+    };
+    if (!target) {
+      if (multiSort?.value) {
+        neo = [...neo, sortOption];
+      } else {
+        neo = [sortOption];
+      }
+    } else if (target.order === 'desc') {
+      if (column.mustSort) {
+        target.order = 'asc';
+      } else {
+        neo = neo.filter(v => v.key !== column.key);
+      }
+    } else {
+      target.order = 'desc';
+    }
+    sortBy.value = neo;
+    if (page) {
+      page.value = 1;
+    }
+  };
+  function isSorted(column) {
+    return !!sortBy.value.find(option => option.key === column.key);
+  }
+  const data = {
+    sortBy,
+    toggleSort,
+    isSorted
+  };
+  provide(Y_DATA_TABLE_SORTING_KEY, data);
+  return data;
+}
+export function useSorting() {
+  const data = inject(Y_DATA_TABLE_SORTING_KEY);
+  if (!data) {
+    throw new Error(`Not provided: ${Y_DATA_TABLE_SORTING_KEY.description}`);
+  }
+  return data;
+}
+//# sourceMappingURL=sorting.mjs.map