@hbdlzy/ui-core 0.1.3 → 0.1.4

package/src/components/BaseSearchForm/BaseSearchForm.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="base-search-form">
+    <el-form
+      class="base-search-form__form"
+      :model="innerModel"
+      :label-width="normalizedLabelWidth"
+      @submit.prevent="submit"
+    >
+      <div
+        class="base-search-form__grid"
+        :style="gridStyle"
+      >
+        <el-form-item
+          v-for="field in visibleFields"
+          :key="field.key"
+          class="base-search-form__item"
+          :label="field.label"
+          :style="getFieldStyle(field)"
+        >
+          <slot
+            v-if="field.type === 'slot'"
+            :name="field.key"
+            :field="field"
+            :model="innerModel"
+            :value="innerModel[field.key]"
+            :set-value="(value: unknown) => setFieldValue(field.key, value)"
+          />
+
+          <el-select
+            v-else-if="field.type === 'select'"
+            class="base-search-form__control"
+            :model-value="innerModel[field.key]"
+            :placeholder="field.placeholder || field.label"
+            :clearable="field.clearable !== false"
+            :disabled="field.disabled"
+            v-bind="field.props"
+            @update:model-value="(value: unknown) => handleFieldChange(field.key, value)"
+          >
+            <el-option
+              v-for="option in field.options || []"
+              :key="String(option.value)"
+              :label="option.label"
+              :value="option.value"
+              :disabled="option.disabled"
+            />
+          </el-select>
+
+          <el-date-picker
+            v-else-if="field.type === 'date' || field.type === 'dateRange'"
+            class="base-search-form__control"
+            :model-value="innerModel[field.key]"
+            :type="field.type === 'dateRange' ? 'daterange' : 'date'"
+            :placeholder="field.placeholder || field.label"
+            :start-placeholder="field.props?.startPlaceholder as string || '开始日期'"
+            :end-placeholder="field.props?.endPlaceholder as string || '结束日期'"
+            :clearable="field.clearable !== false"
+            :disabled="field.disabled"
+            v-bind="field.props"
+            @update:model-value="(value: unknown) => handleFieldChange(field.key, value)"
+          />
+
+          <el-input
+            v-else
+            class="base-search-form__control"
+            :model-value="innerModel[field.key]"
+            :placeholder="field.placeholder || field.label"
+            :clearable="field.clearable !== false"
+            :disabled="field.disabled"
+            v-bind="field.props"
+            @update:model-value="(value: unknown) => handleFieldChange(field.key, value)"
+            @keyup.enter="submit"
+          />
+        </el-form-item>
+
+        <div class="base-search-form__actions">
+          <slot
+            name="actions-before"
+            :model="innerModel"
+          />
+          <el-button
+            type="primary"
+            @click="submit"
+          >
+            {{ submitText }}
+          </el-button>
+          <el-button @click="reset">
+            {{ resetText }}
+          </el-button>
+          <el-button
+            v-if="showCollapse && hasCollapsedFields"
+            link
+            type="primary"
+            @click="toggleCollapsed"
+          >
+            {{ isCollapsed ? expandText : collapseText }}
+          </el-button>
+          <slot
+            name="actions-after"
+            :model="innerModel"
+          />
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type {
+  BaseSearchFormExpose,
+  BaseSearchFormField,
+  BaseSearchFormModel,
+  BaseSearchFormProps
+} from './BaseSearchForm.types'
+import {
+  cloneSearchFormModel,
+  getVisibleSearchFields,
+  resetSearchFormModel,
+  toSearchFormCssValue
+} from './BaseSearchForm.utils'
+
+defineOptions({
+  name: 'BaseSearchForm'
+})
+
+const props = withDefaults(defineProps<BaseSearchFormProps>(), {
+  modelValue: () => ({}),
+  collapsed: true,
+  showCollapse: true,
+  columns: 4,
+  labelWidth: 80,
+  fieldWidth: undefined,
+  gutter: 16,
+  submitText: '查询',
+  resetText: '重置',
+  expandText: '展开',
+  collapseText: '收起'
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: BaseSearchFormModel): void
+  (event: 'search', value: BaseSearchFormModel): void
+  (event: 'reset', value: BaseSearchFormModel): void
+  (event: 'field-change', key: string, value: unknown, model: BaseSearchFormModel): void
+}>()
+
+const innerModel = ref<BaseSearchFormModel>(cloneSearchFormModel(props.modelValue))
+const isCollapsed = ref(props.collapsed)
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    innerModel.value = cloneSearchFormModel(value)
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.collapsed,
+  (value) => {
+    isCollapsed.value = value
+  }
+)
+
+const visibleFields = computed(() => getVisibleSearchFields(props.fields, isCollapsed.value))
+const hasCollapsedFields = computed(() => props.fields.some((field) => field.collapsed && !field.hidden))
+const normalizedLabelWidth = computed(() => toSearchFormCssValue(props.labelWidth))
+
+const gridStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${Math.max(1, props.columns)}, minmax(0, 1fr))`,
+  gap: `${props.gutter}px`
+}))
+
+function getFieldStyle(field: BaseSearchFormField) {
+  return {
+    gridColumn: field.span ? `span ${Math.max(1, field.span)}` : undefined,
+    '--base-search-form-field-width': toSearchFormCssValue(props.fieldWidth)
+  }
+}
+
+function emitModelUpdate() {
+  emit('update:modelValue', cloneSearchFormModel(innerModel.value))
+}
+
+function handleFieldChange(key: string, value: unknown) {
+  setFieldValue(key, value)
+  emit('field-change', key, value, cloneSearchFormModel(innerModel.value))
+}
+
+function setFieldValue(key: string, value: unknown) {
+  innerModel.value = {
+    ...innerModel.value,
+    [key]: value
+  }
+  emitModelUpdate()
+}
+
+function submit() {
+  emit('search', cloneSearchFormModel(innerModel.value))
+}
+
+function reset() {
+  innerModel.value = resetSearchFormModel(props.fields)
+  emitModelUpdate()
+  emit('reset', cloneSearchFormModel(innerModel.value))
+}
+
+function toggleCollapsed() {
+  isCollapsed.value = !isCollapsed.value
+}
+
+function getModel() {
+  return cloneSearchFormModel(innerModel.value)
+}
+
+defineExpose<BaseSearchFormExpose>({
+  submit,
+  reset,
+  setFieldValue,
+  getModel
+})
+</script>
+
+<style scoped>
+.base-search-form {
+  width: 100%;
+}
+
+.base-search-form__grid {
+  display: grid;
+  align-items: start;
+}
+
+.base-search-form__item {
+  min-width: 0;
+  margin-bottom: 0;
+}
+
+.base-search-form__control {
+  width: var(--base-search-form-field-width, 100%);
+}
+
+.base-search-form__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  min-width: 0;
+}
+
+@media (max-width: 960px) {
+  .base-search-form__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+}
+
+@media (max-width: 640px) {
+  .base-search-form__grid {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+
+  .base-search-form__actions {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>

package/src/components/BaseSearchForm/README.md

@@ -0,0 +1,66 @@
+# BaseSearchForm
+
+`BaseSearchForm` 用于统一列表页查询区，内置输入框、下拉框、日期和日期范围字段，以及查询、重置、展开/收起操作。
+
+## 基础用法
+
+```vue
+<template>
+  <BaseSearchForm
+    v-model="query"
+    :fields="fields"
+    @search="loadList"
+    @reset="loadList"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { BaseSearchForm, type BaseSearchFormField } from '@hbdlzy/ui-core'
+
+const query = reactive({})
+const fields: BaseSearchFormField[] = [
+  { key: 'keyword', label: '名称', type: 'input' },
+  {
+    key: 'status',
+    label: '状态',
+    type: 'select',
+    options: [
+      { label: '启用', value: 'enabled' },
+      { label: '停用', value: 'disabled' }
+    ]
+  },
+  { key: 'createdAt', label: '创建日期', type: 'dateRange', collapsed: true }
+]
+
+function loadList(value: Record<string, unknown>) {
+  console.log(value)
+}
+</script>
+```
+
+## Props
+
+- `modelValue`: 查询模型
+- `fields`: 字段配置
+- `collapsed`: 是否默认收起带 `collapsed` 标记的字段
+- `showCollapse`: 是否显示展开/收起按钮
+- `columns`: 每行列数
+- `labelWidth`: 表单 label 宽度
+- `fieldWidth`: 控件宽度
+- `gutter`: 栅格间距
+- `submitText`: 查询按钮文案
+- `resetText`: 重置按钮文案
+
+## Events
+
+- `update:modelValue`: 字段值变更
+- `search`: 点击查询或输入框回车
+- `reset`: 点击重置
+- `field-change`: 单个字段变更
+
+## Slots
+
+- `[field.key]`: 字段 `type` 为 `slot` 时的自定义字段内容
+- `actions-before`: 操作按钮前扩展
+- `actions-after`: 操作按钮后扩展

package/src/components/BaseSearchForm/index.ts

@@ -0,0 +1,20 @@
+import BaseSearchForm from './BaseSearchForm.vue'
+
+export default BaseSearchForm
+
+export {
+  cloneSearchFormModel,
+  getVisibleSearchFields,
+  resetSearchFormModel,
+  toSearchFormCssValue
+} from './BaseSearchForm.utils'
+export type {
+  BaseSearchFormCssValue,
+  BaseSearchFormExpose,
+  BaseSearchFormField,
+  BaseSearchFormFieldType,
+  BaseSearchFormModel,
+  BaseSearchFormOption,
+  BaseSearchFormOptionValue,
+  BaseSearchFormProps
+} from './BaseSearchForm.types'

package/src/components/BaseTable/BaseTable.types.ts

@@ -105,7 +105,7 @@ export interface BaseTableNormalizedResult<Row = Record<string, any>> {
 
 export type BaseTableRequestHandler<Row = Record<string, any>> = (
   params: BaseTableRequestParams
-) => Promise<BaseTableRequestResult<Row> | Row[]>
+) => Promise<BaseTableRequestResult<Row> | Row[] | unknown>
 
 export type BaseTableResultAdapter<Row = Record<string, any>> = (
   result: unknown,

package/src/index.ts

@@ -9,6 +9,10 @@ export type {
 } from './echarts'
 export { default as BaseCard } from './components/BaseCard'
 export * from './components/BaseCard'
+export { default as BaseSearchForm } from './components/BaseSearchForm'
+export * from './components/BaseSearchForm'
+export { default as BaseDialog } from './components/BaseDialog'
+export * from './components/BaseDialog'
 export { default as BaseTable } from './components/BaseTable'
 export * from './components/BaseTable'
 export { default as BaseEChart } from './components/BaseEChart'

package/src/components/BaseCard/BaseCard.types.d.ts

@@ -1,36 +0,0 @@
-export type BaseCardCssValue = string | number;
-export interface BaseCardDefaultExportPayload {
-    title?: string;
-    metaText?: string;
-}
-export interface BaseCardProps {
-    title?: string;
-    metaText?: string;
-    showHeader?: boolean;
-    showRight?: boolean;
-    showTitleMarker?: boolean;
-    showExport?: boolean;
-    exportText?: string;
-    exportDisabled?: boolean;
-    exportPayload?: unknown;
-    padding?: BaseCardCssValue;
-    radius?: BaseCardCssValue;
-    borderColor?: string;
-    backgroundColor?: string;
-    shadowColor?: string;
-    headerGap?: BaseCardCssValue;
-    headerMarginBottom?: BaseCardCssValue;
-    leftGap?: BaseCardCssValue;
-    rightGap?: BaseCardCssValue;
-    titleColor?: string;
-    titleSize?: BaseCardCssValue;
-    titleWeight?: string | number;
-    markerColor?: string;
-    markerWidth?: BaseCardCssValue;
-    markerHeight?: BaseCardCssValue;
-    markerRadius?: BaseCardCssValue;
-    markerGap?: BaseCardCssValue;
-    metaColor?: string;
-    metaSize?: BaseCardCssValue;
-    exportColor?: string;
-}

package/src/components/BaseCard/BaseCard.vue.d.ts

@@ -1,122 +0,0 @@
-import type { BaseCardCssValue, BaseCardProps } from './BaseCard.types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BaseCardProps>, {
-    title: string;
-    metaText: string;
-    showHeader: boolean;
-    showRight: boolean;
-    showTitleMarker: boolean;
-    showExport: boolean;
-    exportText: string;
-    exportDisabled: boolean;
-    padding: number;
-    radius: number;
-    borderColor: string;
-    backgroundColor: string;
-    shadowColor: string;
-    headerGap: number;
-    headerMarginBottom: number;
-    leftGap: number;
-    rightGap: number;
-    titleColor: string;
-    titleSize: number;
-    titleWeight: number;
-    markerColor: string;
-    markerWidth: number;
-    markerHeight: number;
-    markerRadius: string;
-    markerGap: number;
-    metaColor: string;
-    metaSize: number;
-    exportColor: string;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    export: (payload?: unknown) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BaseCardProps>, {
-    title: string;
-    metaText: string;
-    showHeader: boolean;
-    showRight: boolean;
-    showTitleMarker: boolean;
-    showExport: boolean;
-    exportText: string;
-    exportDisabled: boolean;
-    padding: number;
-    radius: number;
-    borderColor: string;
-    backgroundColor: string;
-    shadowColor: string;
-    headerGap: number;
-    headerMarginBottom: number;
-    leftGap: number;
-    rightGap: number;
-    titleColor: string;
-    titleSize: number;
-    titleWeight: number;
-    markerColor: string;
-    markerWidth: number;
-    markerHeight: number;
-    markerRadius: string;
-    markerGap: number;
-    metaColor: string;
-    metaSize: number;
-    exportColor: string;
-}>>> & Readonly<{
-    onExport?: ((payload?: unknown) => any) | undefined;
-}>, {
-    title: string;
-    metaText: string;
-    showHeader: boolean;
-    showRight: boolean;
-    showTitleMarker: boolean;
-    showExport: boolean;
-    exportText: string;
-    exportDisabled: boolean;
-    padding: BaseCardCssValue;
-    radius: BaseCardCssValue;
-    borderColor: string;
-    backgroundColor: string;
-    shadowColor: string;
-    headerGap: BaseCardCssValue;
-    headerMarginBottom: BaseCardCssValue;
-    leftGap: BaseCardCssValue;
-    rightGap: BaseCardCssValue;
-    titleColor: string;
-    titleSize: BaseCardCssValue;
-    titleWeight: string | number;
-    markerColor: string;
-    markerWidth: BaseCardCssValue;
-    markerHeight: BaseCardCssValue;
-    markerRadius: BaseCardCssValue;
-    markerGap: BaseCardCssValue;
-    metaColor: string;
-    metaSize: BaseCardCssValue;
-    exportColor: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    "title-label"?(_: {}): any;
-    title?(_: {}): any;
-    "header-right"?(_: {}): any;
-    tip?(_: {}): any;
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/src/components/BaseCard/index.d.ts

@@ -1,3 +0,0 @@
-import BaseCard from './BaseCard.vue';
-export default BaseCard;
-export type { BaseCardCssValue, BaseCardDefaultExportPayload, BaseCardProps } from './BaseCard.types';

package/src/components/BaseEChart/BaseEChart.types.d.ts

@@ -1,26 +0,0 @@
-import type { EChartInitOptions, EChartInstance, EChartLoadingOptions, EChartOption, EChartResizeOptions, EChartSetOptionOptions } from '../../echarts';
-export interface BaseEChartProps {
-    option?: EChartOption;
-    theme?: string | Record<string, unknown>;
-    initOptions?: EChartInitOptions;
-    setOptionOptions?: boolean | EChartSetOptionOptions;
-    loading?: boolean;
-    loadingOptions?: EChartLoadingOptions;
-    autoResize?: boolean;
-    useDefaultColors?: boolean;
-    colorStorageKey?: string;
-    defaultColors?: string[];
-    group?: string;
-}
-export interface BaseEChartExpose {
-    getInstance: () => EChartInstance | null;
-    setOption: (option: EChartOption, setOptionOptions?: boolean | EChartSetOptionOptions) => EChartInstance | null;
-    resize: (resizeOptions?: EChartResizeOptions) => void;
-    dispatchAction: (payload: Record<string, unknown>) => void;
-    showLoading: (type?: string, loadingOptions?: EChartLoadingOptions) => void;
-    hideLoading: () => void;
-    clear: () => void;
-    dispose: () => void;
-    on: (eventName: string, handler: (...args: any[]) => void, context?: unknown) => void;
-    off: (eventName?: string, handler?: (...args: any[]) => void) => void;
-}

package/src/components/BaseEChart/BaseEChart.vue.d.ts

@@ -1,66 +0,0 @@
-import { echarts } from '../../echarts';
-import type { BaseEChartProps } from './BaseEChart.types';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BaseEChartProps>, {
-    option: () => {};
-    initOptions: () => echarts.EChartsInitOpts;
-    setOptionOptions: () => echarts.SetOptionOpts;
-    loading: boolean;
-    autoResize: boolean;
-    useDefaultColors: boolean;
-    colorStorageKey: string;
-    defaultColors: () => never[];
-    group: undefined;
-}>>, {
-    getInstance: () => echarts.ECharts | null;
-    setOption: (option: echarts.EChartsOption, setOptionOptions?: boolean | echarts.SetOptionOpts | undefined) => echarts.ECharts | null;
-    resize: (resizeOptions?: echarts.ResizeOpts | undefined) => void;
-    dispatchAction: (payload: Record<string, unknown>) => void;
-    showLoading: (type?: string | undefined, loadingOptions?: object | undefined) => void;
-    hideLoading: () => void;
-    clear: () => void;
-    dispose: () => void;
-    on: (eventName: string, handler: (...args: any[]) => void, context?: unknown) => void;
-    off: (eventName?: string | undefined, handler?: ((...args: any[]) => void) | undefined) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    ready: (chart: echarts.ECharts) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BaseEChartProps>, {
-    option: () => {};
-    initOptions: () => echarts.EChartsInitOpts;
-    setOptionOptions: () => echarts.SetOptionOpts;
-    loading: boolean;
-    autoResize: boolean;
-    useDefaultColors: boolean;
-    colorStorageKey: string;
-    defaultColors: () => never[];
-    group: undefined;
-}>>> & Readonly<{
-    onReady?: ((chart: echarts.ECharts) => any) | undefined;
-}>, {
-    option: echarts.EChartsOption;
-    loading: boolean;
-    initOptions: echarts.EChartsInitOpts;
-    setOptionOptions: boolean | echarts.SetOptionOpts;
-    autoResize: boolean;
-    useDefaultColors: boolean;
-    colorStorageKey: string;
-    defaultColors: string[];
-    group: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/src/components/BaseEChart/index.d.ts

@@ -1,3 +0,0 @@
-import BaseEChart from './BaseEChart.vue';
-export default BaseEChart;
-export type { BaseEChartExpose, BaseEChartProps } from './BaseEChart.types';

package/src/components/BaseExportButton/BaseExportButton.types.d.ts

@@ -1,21 +0,0 @@
-import type { ExcelExportOptions } from '../../excel/exportExcel';
-export interface ExportResponseHeaders {
-    [key: string]: string | undefined;
-}
-export interface ExportResponseLike {
-    data: Blob | BlobPart | ArrayBuffer;
-    headers?: ExportResponseHeaders;
-}
-export type ExportRequestHandler = () => Promise<ExportResponseLike>;
-export type ExportMode = 'excel' | 'request' | 'none' | 'invalid';
-export type ExportBeforeHandler = () => boolean | void | Promise<boolean | void>;
-export interface ExportSuccessPayload {
-    mode: Exclude<ExportMode, 'none' | 'invalid'>;
-    fileName?: string;
-}
-export interface BaseExportExcelConfig<Row = Record<string, any>> {
-    excelOptions: ExcelExportOptions<Row>;
-}
-export interface BaseExportRequestConfig {
-    requestHandler: ExportRequestHandler;
-}

package/src/components/BaseExportButton/BaseExportButton.utils.d.ts

@@ -1,4 +0,0 @@
-import type { ExportResponseLike } from './BaseExportButton.types';
-export declare function extractFileNameFromDisposition(contentDisposition?: string): string;
-export declare function normalizeExportFileName(fileName?: string): string;
-export declare function downloadExportResponse(response: ExportResponseLike, fallbackFileName?: string): string;