@vef-framework/components 1.0.121 → 1.0.123

package/esm/vef-table/index.js

@@ -0,0 +1,277 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { themeVariables, isDeepEqual, isNumber } from '@vef-framework/shared';
+import { Table } from 'antd';
+import { useMemo, useState, useDeferredValue, forwardRef, memo } from 'react';
+import '../internal/index.js';
+import VefTableFooter from './components/table-footer.js';
+import { useComputedBatchActionButtons } from './hooks/use-computed-batch-buttons.js';
+import { useComputedColumns } from './hooks/use-computed-columns.js';
+import { useData } from './hooks/use-data.js';
+import { useDefaultColumnConfigs } from './hooks/use-default-column-configs.js';
+import { useHelperColumns } from './hooks/use-helper-columns.js';
+import { usePaginationProps } from './hooks/use-pagination-props.js';
+import { useRowProps } from './hooks/use-row-props.js';
+import { useRowSelectionConfig } from './hooks/use-row-selection-config.js';
+import { useTableColumns } from './hooks/use-table-columns.js';
+import { TableContextProvider } from './hooks/use-table-context.js';
+import { useTableInstance } from './hooks/use-table-instance.js';
+import { useTableSummary } from './hooks/use-table-summary.js';
+import { useTableWidth } from './hooks/use-table-width.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+const DEFAULT_ROW_KEY = "id";
+const autoHeightTableStyle = css`
+  height: 100%;
+
+  > .vef-spin-nested-loading {
+    height: 100%;
+
+    > .vef-spin-container {
+      height: 100%;
+
+      > .vef-table {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        > .vef-table-container {
+          flex: 1;
+          min-height: 0;
+          display: flex;
+          flex-direction: column;
+
+          > .vef-table-header {
+            flex-shrink: 0;
+          }
+
+          > .vef-table-body {
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+            min-height: 200px;
+          }
+        }
+
+        > .vef-table-title {
+          flex-shrink: 0;
+          padding: ${themeVariables.paddingSm};
+        }
+
+        > .vef-table-footer {
+          flex-shrink: 0;
+          padding: ${themeVariables.paddingXs}
+        }
+
+        &.vef-table-empty > .vef-table-container > .vef-table-body > table {
+          min-height: 100%;
+        }
+      }
+    }
+  }
+`;
+const unlimitedHeightTableStyle = css`
+  .vef-table-content {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+  }
+`;
+function VefTableBase({
+  columns,
+  defaultColumnConfigMap,
+  rowNumberColumn,
+  operationColumn,
+  bordered = false,
+  size = "medium",
+  rowKey = DEFAULT_ROW_KEY,
+  height,
+  virtual = false,
+  selectedKeys,
+  defaultSelectedKeys,
+  selectable = false,
+  multipleSelection,
+  showSelectAllCheckbox,
+  disabledSelection,
+  enableRowClick,
+  enableRowClickForSelection,
+  rowBackgroundColor,
+  batchActionButtons,
+  selectionSummary,
+  externalContext,
+  onRowSelectionChange,
+  onRowSelect,
+  onRowDeselect,
+  onRowClick,
+  ...restProps
+}, ref) {
+  const { paginated = false, ...queryConfig } = restProps;
+  const { paginationProps, paginationParams } = usePaginationProps(paginated, size);
+  const {
+    data,
+    isFetching,
+    isLoading,
+    total,
+    refetch
+  } = useData(queryConfig, paginated, paginationParams);
+  const mergedPaginationProps = useMemo(() => ({
+    ...paginationProps,
+    total
+  }), [paginationProps, total]);
+  const [columnConfigMap, setColumnConfigMap] = useState(() => new Map(defaultColumnConfigMap));
+  const deferredColumnConfigMap = useDeferredValue(columnConfigMap);
+  const computedColumns = useComputedColumns(columns, deferredColumnConfigMap);
+  const {
+    rowSelectionConfig,
+    handleRowClickSelection,
+    selectedKeys: selectedKeysToUse,
+    selectedRecords
+  } = useRowSelectionConfig({
+    selectedKeys,
+    defaultSelectedKeys,
+    selectable,
+    multipleSelection,
+    disabledSelection,
+    enableRowClick,
+    enableRowClickForSelection,
+    onRowSelect,
+    onRowDeselect,
+    onRowSelectionChange,
+    rowKey
+  });
+  const onRow = useRowProps({
+    enableRowClick,
+    enableRowClickForSelection,
+    onRowClick,
+    disabledSelection,
+    handleRowClickSelection
+  });
+  const tableContext = useMemo(() => ({
+    externalContext,
+    isFetching,
+    refetch,
+    selectedKeys: selectedKeysToUse,
+    selectedRecords: selectedRecords.current,
+    defaultColumnConfigMap,
+    columnConfigMap,
+    setColumnConfigMap,
+    columnConfigMapHasChanged: !isDeepEqual(defaultColumnConfigMap, columnConfigMap)
+  }), [
+    externalContext,
+    isFetching,
+    refetch,
+    selectedKeysToUse,
+    selectedRecords,
+    defaultColumnConfigMap,
+    columnConfigMap
+  ]);
+  const columnsToUse = useTableColumns(
+    computedColumns,
+    rowNumberColumn,
+    operationColumn
+  );
+  const tableWidth = useTableWidth(columnsToUse, selectable);
+  const scrollConfig = useMemo(() => ({
+    x: tableWidth,
+    y: height === "auto" ? "auto" : height,
+    scrollToFirstRowOnChange: true
+  }), [height, tableWidth]);
+  const tableRef = useTableInstance(ref, data ?? [], refetch);
+  const tableSummary = useTableSummary(computedColumns);
+  const { computedBatchActionButtons, batchActionButtonContext } = useComputedBatchActionButtons(batchActionButtons ?? [], tableContext);
+  const footer = useMemo(() => {
+    if (isLoading || data?.length === 0 || !paginated && selectionSummary === false && computedBatchActionButtons.length === 0) {
+      return;
+    }
+    const footerNode = /* @__PURE__ */ jsx(
+      VefTableFooter,
+      {
+        batchActionButtonContext,
+        batchActionButtons: computedBatchActionButtons,
+        paginationProps: mergedPaginationProps,
+        selectionSummary,
+        size
+      }
+    );
+    return () => footerNode;
+  }, [
+    batchActionButtonContext,
+    computedBatchActionButtons,
+    data?.length,
+    isLoading,
+    mergedPaginationProps,
+    paginated,
+    selectionSummary,
+    size
+  ]);
+  return /* @__PURE__ */ jsx(TableContextProvider, { value: tableContext, children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      ref: tableRef,
+      bordered,
+      columns: columnsToUse,
+      css: height === "auto" ? autoHeightTableStyle : unlimitedHeightTableStyle,
+      dataSource: data,
+      footer,
+      loading: isFetching,
+      pagination: false,
+      rowKey,
+      rowSelection: rowSelectionConfig,
+      scroll: scrollConfig,
+      size: convertBasicSizeToUiSize(size),
+      summary: tableSummary,
+      tableLayout: "fixed",
+      virtual: isNumber(height) && height > 0 && virtual,
+      onRow
+    }
+  ) });
+}
+const VefTableBaseForwarded = forwardRef(VefTableBase);
+VefTableBaseForwarded.displayName = "VefTableBase";
+function VefTableWrapper({
+  schema,
+  showRowNumber,
+  operationButtons,
+  maxVisibleOperationButtons,
+  ...restProps
+}, ref) {
+  const { size } = restProps;
+  const showedColumns = useMemo(() => schema.filter((column) => column.show ?? true).map((column) => ({
+    ...column,
+    dependentColumnNames: [
+      .../* @__PURE__ */ new Set([
+        column.name,
+        ...column.dependentColumnNames ?? []
+      ])
+    ]
+  })), [schema]);
+  if (showedColumns.length === 0) {
+    throw new Error("The showed columns of VefTable component cannot be empty");
+  }
+  const defaultColumnConfigMap = useDefaultColumnConfigs(showedColumns);
+  const { rowNumberColumn, operationColumn } = useHelperColumns({
+    showRowNumber,
+    operationButtons,
+    maxVisibleOperationButtons,
+    size
+  });
+  return /* @__PURE__ */ jsx(
+    VefTableBaseForwarded,
+    {
+      ref,
+      columns: showedColumns,
+      defaultColumnConfigMap,
+      operationColumn,
+      rowNumberColumn,
+      ...restProps
+    }
+  );
+}
+const VefTable = memo(
+  forwardRef(VefTableWrapper),
+  isDeepEqual
+);
+VefTable.displayName = "VefTable";
+
+export { VefTable as default };

package/esm/vef-table/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-table/store.js

@@ -0,0 +1,18 @@
+"use strict";
+import { createComponentStore } from '@vef-framework/shared';
+
+"use strict";
+const {
+  StoreProvider: TableStoreProvider,
+  useStore: useTableStore,
+  useStoreApi: useTableStoreApi
+} = createComponentStore(
+  "Table",
+  (initialState) => (set) => ({
+    changeSize: (size) => set({ size }),
+    columnConfigMap: /* @__PURE__ */ new Map(),
+    ...initialState
+  })
+);
+
+export { TableStoreProvider, useTableStore, useTableStoreApi };

package/esm/vef-table/types.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-tabs/index.js

@@ -0,0 +1,26 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Tabs } from 'antd';
+import '../internal/index.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+const animatedConfig = {
+  inkBar: true,
+  tabPane: true
+};
+function VefTabs({
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      animated: animatedConfig,
+      size: convertBasicSizeToUiSize(size),
+      ...props
+    }
+  );
+}
+
+export { VefTabs as default };

package/esm/vef-tabs/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-tag/index.js

@@ -0,0 +1,29 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Tag } from 'antd';
+import { useMemo } from 'react';
+
+"use strict";
+function VefTag({
+  closable = false,
+  color,
+  inverse = false,
+  ...restProps
+}) {
+  const colorToUse = useMemo(() => {
+    if (!inverse) {
+      return color;
+    }
+    return `${color}-inverse`;
+  }, [color, inverse]);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      closeIcon: closable ? null : void 0,
+      color: colorToUse,
+      ...restProps
+    }
+  );
+}
+
+export { VefTag as default };

package/esm/vef-tag/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-temporal-picker/helper.js

@@ -0,0 +1,58 @@
+"use strict";
+"use strict";
+const yearFormats = ["YYYY"];
+const quarterFormats = ["YYYY-Q季度"];
+const monthFormats = [
+  "YYYY-MM",
+  "YYYY/MM",
+  "YYYY.MM",
+  "YYYYMM"
+];
+const weekFormats = ["YYYY-wo"];
+const dateFormats = [
+  "YYYY-MM-DD",
+  "YYYY/MM/DD",
+  "YYYY.MM.DD",
+  "YYYYMMDD",
+  "YY/MM/DD",
+  "YY.MM.DD",
+  "YYMMDD"
+];
+const timeFormats = ["HH:mm:ss", "HH.mm.ss", "HHmmss"];
+const hourFormats = ["HH"];
+const minuteFormats = ["HH:mm", "HH.mm", "HHmm"];
+const datetimeFormats = [
+  "YYYY-MM-DD HH:mm:ss",
+  "YYYY/MM/DD HH:mm:ss",
+  "YYYY.MM.DD HH.mm.ss",
+  "YYYYMMDDHHmmss",
+  "YY/MM/DD HH:mm:ss",
+  "YY.MM.DD HH:mm:ss",
+  "YY.MM.DD HH.mm.ss",
+  "YYMMDDHHmmss"
+];
+function getTemporalFormats(mode) {
+  if (mode === "year") {
+    return yearFormats;
+  } else if (mode === "quarter") {
+    return quarterFormats;
+  } else if (mode === "month") {
+    return monthFormats;
+  } else if (mode === "week") {
+    return weekFormats;
+  } else if (mode === "datetime") {
+    return datetimeFormats;
+  } else if (mode === "date") {
+    return dateFormats;
+  } else if (mode === "time") {
+    return timeFormats;
+  } else if (mode === "hour") {
+    return hourFormats;
+  } else if (mode === "minute") {
+    return minuteFormats;
+  } else {
+    return [];
+  }
+}
+
+export { getTemporalFormats };

package/esm/vef-temporal-picker/hooks/use-dayjs-value.js

@@ -0,0 +1,19 @@
+"use strict";
+import { isNullish, isArray } from '@vef-framework/shared';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+
+"use strict";
+function useDayjsValue(value, formats) {
+  return useMemo(() => {
+    if (isNullish(value)) {
+      return value;
+    }
+    if (isArray(value)) {
+      return value.map((it) => dayjs(it, formats));
+    }
+    return dayjs(value, formats);
+  }, [value, formats]);
+}
+
+export { useDayjsValue };

package/esm/vef-temporal-picker/hooks/use-temporal-limit.js

@@ -0,0 +1,35 @@
+"use strict";
+import { isFunction } from '@vef-framework/shared';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+
+"use strict";
+function useTemporalLimit({
+  maxDate,
+  minDate,
+  disabledDate,
+  disabledTime
+}) {
+  const [minDateValue, maxDateValue] = useMemo(() => [
+    minDate ? dayjs(minDate) : void 0,
+    maxDate ? dayjs(maxDate) : void 0
+  ], [minDate, maxDate]);
+  const disabledTimeValue = useMemo(() => {
+    if (isFunction(disabledTime)) {
+      return (now) => disabledTime(now.toDate());
+    }
+  }, [disabledTime]);
+  const disabledDateValue = useMemo(() => {
+    if (isFunction(disabledDate)) {
+      return (now, { from }) => disabledDate(now.toDate(), from?.toDate());
+    }
+  }, [disabledDate]);
+  return {
+    minDateValue,
+    maxDateValue,
+    disabledTimeValue,
+    disabledDateValue
+  };
+}
+
+export { useTemporalLimit };

package/esm/vef-temporal-picker/hooks/use-temporal-picker-instance.js

@@ -0,0 +1,20 @@
+"use strict";
+import { useRef, useImperativeHandle } from 'react';
+
+"use strict";
+function useTemporalPickerInstance(ref) {
+  const temporalPickerRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    blur: () => {
+      temporalPickerRef.current?.blur();
+    },
+    focus: () => {
+      temporalPickerRef.current?.focus({
+        preventScroll: true
+      });
+    }
+  }));
+  return temporalPickerRef;
+}
+
+export { useTemporalPickerInstance };

package/esm/vef-temporal-picker/index.js

@@ -0,0 +1,126 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { isFunction, isArray } from '@vef-framework/shared';
+import { TimePicker, DatePicker } from 'antd';
+import { useMemo, memo, forwardRef } from 'react';
+import '../internal/index.js';
+import { getTemporalFormats } from './helper.js';
+import { useDayjsValue } from './hooks/use-dayjs-value.js';
+import { useTemporalLimit } from './hooks/use-temporal-limit.js';
+import { useTemporalPickerInstance } from './hooks/use-temporal-picker-instance.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+function VefTemporalPickerBase({
+  defaultValue,
+  value,
+  clearable,
+  size,
+  mode = "date",
+  multiple = false,
+  minDate,
+  maxDate,
+  disabledTime,
+  disabledDate,
+  hourStep,
+  minuteStep,
+  secondStep,
+  onChange,
+  ...restProps
+}, ref) {
+  const formats = getTemporalFormats(mode);
+  const valueToUse = useDayjsValue(value, formats);
+  const defaultValueToUse = useDayjsValue(defaultValue, formats);
+  const {
+    minDateValue,
+    maxDateValue,
+    disabledTimeValue,
+    disabledDateValue
+  } = useTemporalLimit({
+    maxDate,
+    minDate,
+    disabledTime,
+    disabledDate
+  });
+  const temporalPickerRef = useTemporalPickerInstance(ref);
+  const handleChange = useMemo(() => {
+    if (isFunction(onChange)) {
+      return (value2, valueFormat) => {
+        if (!value2) {
+          onChange(null, null);
+          return;
+        }
+        const dates = isArray(value2) ? value2.map((it) => it.toDate()) : value2.toDate();
+        onChange(valueFormat, dates);
+      };
+    }
+  }, [onChange]);
+  if (mode === "time" || mode === "hour" || mode === "minute") {
+    return /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        ref: temporalPickerRef,
+        allowClear: clearable,
+        defaultValue: defaultValueToUse,
+        disabledTime: disabledTimeValue,
+        format: formats,
+        hourStep,
+        minuteStep,
+        multiple,
+        secondStep,
+        showNow: mode !== "hour",
+        size: convertBasicSizeToUiSize(size),
+        value: valueToUse,
+        onChange: handleChange,
+        ...restProps
+      }
+    );
+  }
+  if (mode === "datetime") {
+    return /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        ref: temporalPickerRef,
+        allowClear: clearable,
+        defaultValue: defaultValueToUse,
+        disabledDate: disabledDateValue,
+        disabledTime: disabledTimeValue,
+        format: formats,
+        hourStep,
+        maxDate: maxDateValue,
+        minDate: minDateValue,
+        minuteStep,
+        multiple,
+        picker: "date",
+        size: convertBasicSizeToUiSize(size),
+        value: valueToUse,
+        onChange: handleChange,
+        ...restProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      ref: temporalPickerRef,
+      allowClear: clearable,
+      defaultValue: defaultValueToUse,
+      disabledDate: disabledDateValue,
+      format: formats,
+      maxDate: maxDateValue,
+      minDate: minDateValue,
+      multiple,
+      picker: mode,
+      size: convertBasicSizeToUiSize(size),
+      value: valueToUse,
+      onChange: handleChange,
+      ...restProps
+    }
+  );
+}
+const VefTemporalPicker = memo(
+  forwardRef(VefTemporalPickerBase)
+);
+VefTemporalPicker.displayName = "VefTemporalPicker";
+
+export { VefTemporalPicker as default };

package/esm/vef-temporal-picker/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-temporal-range-picker/helper.js

@@ -0,0 +1,58 @@
+"use strict";
+"use strict";
+const yearFormats = ["YYYY"];
+const quarterFormats = ["YYYY-Q季度"];
+const monthFormats = [
+  "YYYY-MM",
+  "YYYY/MM",
+  "YYYY.MM",
+  "YYYYMM"
+];
+const weekFormats = ["YYYY-wo"];
+const dateFormats = [
+  "YYYY-MM-DD",
+  "YYYY/MM/DD",
+  "YYYY.MM.DD",
+  "YYYYMMDD",
+  "YY/MM/DD",
+  "YY.MM.DD",
+  "YYMMDD"
+];
+const timeFormats = ["HH:mm:ss", "HH.mm.ss", "HHmmss"];
+const hourFormats = ["HH"];
+const minuteFormats = ["HH:mm", "HH.mm", "HHmm"];
+const datetimeFormats = [
+  "YYYY-MM-DD HH:mm:ss",
+  "YYYY/MM/DD HH:mm:ss",
+  "YYYY.MM.DD HH.mm.ss",
+  "YYYYMMDDHHmmss",
+  "YY/MM/DD HH:mm:ss",
+  "YY.MM.DD HH:mm:ss",
+  "YY.MM.DD HH.mm.ss",
+  "YYMMDDHHmmss"
+];
+function getTemporalFormats(mode) {
+  if (mode === "year") {
+    return yearFormats;
+  } else if (mode === "quarter") {
+    return quarterFormats;
+  } else if (mode === "month") {
+    return monthFormats;
+  } else if (mode === "week") {
+    return weekFormats;
+  } else if (mode === "datetime") {
+    return datetimeFormats;
+  } else if (mode === "date") {
+    return dateFormats;
+  } else if (mode === "time") {
+    return timeFormats;
+  } else if (mode === "hour") {
+    return hourFormats;
+  } else if (mode === "minute") {
+    return minuteFormats;
+  } else {
+    return [];
+  }
+}
+
+export { getTemporalFormats };