@hbdlzy/ui-core 0.1.4 → 0.1.6

package/src/components/BaseSearchForm/BaseSearchForm.vue

@@ -1,267 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-# 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

@@ -1,20 +0,0 @@
-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'