cabloy 5.1.60 → 5.1.62

package/zova/src/suite/a-training/modules/training-student/src/api/trainingStudent.ts

@@ -0,0 +1,151 @@
+import type { IApiActionOptions } from 'zova-module-a-api';
+
+import { Api, BeanApiBase } from 'zova-module-a-api';
+
+import type { components, paths } from './openapi/index.js';
+
+import { OpenApiBaseURL } from './openapi/index.js';
+
+/** TrainingStudent_select */
+export const ApiApiTrainingStudentselectPath = '/api/training/student';
+export type ApiApiTrainingStudentselectPath = '/api/training/student';
+export type ApiApiTrainingStudentselectMethod = 'get';
+export type ApiApiTrainingStudentselectRequestQuery =
+  paths[ApiApiTrainingStudentselectPath][ApiApiTrainingStudentselectMethod]['parameters']['query'];
+export type ApiApiTrainingStudentselectResponseBody =
+  paths[ApiApiTrainingStudentselectPath][ApiApiTrainingStudentselectMethod]['responses']['200']['content']['application/json']['data'];
+
+/** TrainingStudent_create */
+export const ApiApiTrainingStudentcreatePath = '/api/training/student';
+export type ApiApiTrainingStudentcreatePath = '/api/training/student';
+export type ApiApiTrainingStudentcreateMethod = 'post';
+export type ApiApiTrainingStudentcreateRequestBody =
+  components['schemas']['training-student.dto.studentCreate'];
+export type ApiApiTrainingStudentcreateResponseBody =
+  paths[ApiApiTrainingStudentcreatePath][ApiApiTrainingStudentcreateMethod]['responses']['200']['content']['application/json']['data'];
+
+/** TrainingStudent_view */
+export const ApiApiTrainingStudentviewPath = '/api/training/student/{id}';
+export type ApiApiTrainingStudentviewPath = '/api/training/student/{id}';
+export type ApiApiTrainingStudentviewMethod = 'get';
+export type ApiApiTrainingStudentviewRequestParams =
+  paths[ApiApiTrainingStudentviewPath][ApiApiTrainingStudentviewMethod]['parameters']['path'];
+export type ApiApiTrainingStudentviewResponseBody =
+  paths[ApiApiTrainingStudentviewPath][ApiApiTrainingStudentviewMethod]['responses']['200']['content']['application/json']['data'];
+
+/** TrainingStudent_delete */
+export const ApiApiTrainingStudentdeletePath = '/api/training/student/{id}';
+export type ApiApiTrainingStudentdeletePath = '/api/training/student/{id}';
+export type ApiApiTrainingStudentdeleteMethod = 'delete';
+export type ApiApiTrainingStudentdeleteRequestParams =
+  paths[ApiApiTrainingStudentdeletePath][ApiApiTrainingStudentdeleteMethod]['parameters']['path'];
+export type ApiApiTrainingStudentdeleteResponseBody =
+  paths[ApiApiTrainingStudentdeletePath][ApiApiTrainingStudentdeleteMethod]['responses']['200']['content']['application/json']['data'];
+
+/** TrainingStudent_update */
+export const ApiApiTrainingStudentupdatePath = '/api/training/student/{id}';
+export type ApiApiTrainingStudentupdatePath = '/api/training/student/{id}';
+export type ApiApiTrainingStudentupdateMethod = 'patch';
+export type ApiApiTrainingStudentupdateRequestParams =
+  paths[ApiApiTrainingStudentupdatePath][ApiApiTrainingStudentupdateMethod]['parameters']['path'];
+export type ApiApiTrainingStudentupdateRequestBody =
+  components['schemas']['training-student.dto.studentUpdate'];
+export type ApiApiTrainingStudentupdateResponseBody =
+  paths[ApiApiTrainingStudentupdatePath][ApiApiTrainingStudentupdateMethod]['responses']['200']['content']['application/json']['data'];
+
+/** TrainingStudent_summary */
+export const ApiApiTrainingStudentsummaryPath = '/api/training/student/summary/{id}';
+export type ApiApiTrainingStudentsummaryPath = '/api/training/student/summary/{id}';
+export type ApiApiTrainingStudentsummaryMethod = 'get';
+export type ApiApiTrainingStudentsummaryRequestParams =
+  paths[ApiApiTrainingStudentsummaryPath][ApiApiTrainingStudentsummaryMethod]['parameters']['path'];
+export type ApiApiTrainingStudentsummaryResponseBody =
+  paths[ApiApiTrainingStudentsummaryPath][ApiApiTrainingStudentsummaryMethod]['responses']['200']['content']['application/json']['data'];
+
+/** TrainingStudent_deleteForce */
+export const ApiApiTrainingStudentdeleteForcePath = '/api/training/student/deleteForce/{id}';
+export type ApiApiTrainingStudentdeleteForcePath = '/api/training/student/deleteForce/{id}';
+export type ApiApiTrainingStudentdeleteForceMethod = 'delete';
+export type ApiApiTrainingStudentdeleteForceRequestParams =
+  paths[ApiApiTrainingStudentdeleteForcePath][ApiApiTrainingStudentdeleteForceMethod]['parameters']['path'];
+export type ApiApiTrainingStudentdeleteForceResponseBody =
+  paths[ApiApiTrainingStudentdeleteForcePath][ApiApiTrainingStudentdeleteForceMethod]['responses']['200']['content']['application/json']['data'];
+
+@Api()
+export class ApiTrainingStudent extends BeanApiBase {
+  select(
+    options?: {
+      query?: ApiApiTrainingStudentselectRequestQuery;
+    } & IApiActionOptions,
+  ) {
+    return this.$fetch.get<any, ApiApiTrainingStudentselectResponseBody>(
+      ApiApiTrainingStudentselectPath,
+      this.$configPrepare(OpenApiBaseURL(this.sys), options, true),
+    );
+  }
+
+  create(body: ApiApiTrainingStudentcreateRequestBody, options?: IApiActionOptions) {
+    return this.$fetch.post<any, ApiApiTrainingStudentcreateResponseBody>(
+      ApiApiTrainingStudentcreatePath,
+      body,
+      this.$configPrepare(OpenApiBaseURL(this.sys), options, true),
+    );
+  }
+
+  view(
+    options: {
+      params: ApiApiTrainingStudentviewRequestParams;
+    } & IApiActionOptions,
+  ) {
+    return this.$fetch.get<any, ApiApiTrainingStudentviewResponseBody>(
+      this.$pathTranslate(ApiApiTrainingStudentviewPath, options.params),
+      this.$configPrepare(OpenApiBaseURL(this.sys), options, true),
+    );
+  }
+
+  delete(
+    options: {
+      params: ApiApiTrainingStudentdeleteRequestParams;
+    } & IApiActionOptions,
+  ) {
+    return this.$fetch.delete<any, ApiApiTrainingStudentdeleteResponseBody>(
+      this.$pathTranslate(ApiApiTrainingStudentdeletePath, options.params),
+      this.$configPrepare(OpenApiBaseURL(this.sys), options, true),
+    );
+  }
+
+  update(
+    body: ApiApiTrainingStudentupdateRequestBody,
+    options: {
+      params: ApiApiTrainingStudentupdateRequestParams;
+    } & IApiActionOptions,
+  ) {
+    return this.$fetch.patch<any, ApiApiTrainingStudentupdateResponseBody>(
+      this.$pathTranslate(ApiApiTrainingStudentupdatePath, options.params),
+      body,
+      this.$configPrepare(OpenApiBaseURL(this.sys), options, true),
+    );
+  }
+
+  summary(
+    options: {
+      params: ApiApiTrainingStudentsummaryRequestParams;
+    } & IApiActionOptions,
+  ) {
+    return this.$fetch.get<any, ApiApiTrainingStudentsummaryResponseBody>(
+      this.$pathTranslate(ApiApiTrainingStudentsummaryPath, options.params),
+      this.$configPrepare(OpenApiBaseURL(this.sys), options, true),
+    );
+  }
+
+  deleteForce(
+    options: {
+      params: ApiApiTrainingStudentdeleteForceRequestParams;
+    } & IApiActionOptions,
+  ) {
+    return this.$fetch.delete<any, ApiApiTrainingStudentdeleteForceResponseBody>(
+      this.$pathTranslate(ApiApiTrainingStudentdeleteForcePath, options.params),
+      this.$configPrepare(OpenApiBaseURL(this.sys), options, true),
+    );
+  }
+}

package/zova/src/suite/a-training/modules/training-student/src/apiSchema/trainingStudent.ts

@@ -0,0 +1,43 @@
+import { BeanBase } from 'zova';
+import { ApiSchema, IApiSchemaOptions } from 'zova-module-a-api';
+
+import {
+  ApiApiTrainingStudentselectPath,
+  ApiApiTrainingStudentcreatePath,
+  ApiApiTrainingStudentviewPath,
+  ApiApiTrainingStudentdeletePath,
+  ApiApiTrainingStudentupdatePath,
+  ApiApiTrainingStudentsummaryPath,
+  ApiApiTrainingStudentdeleteForcePath,
+} from '../api/trainingStudent.js';
+
+@ApiSchema()
+export class ApiSchemaTrainingStudent extends BeanBase {
+  select(options?: IApiSchemaOptions) {
+    return this.$sdk.createApiSchemas(ApiApiTrainingStudentselectPath, 'get', options);
+  }
+
+  create(options?: IApiSchemaOptions) {
+    return this.$sdk.createApiSchemas(ApiApiTrainingStudentcreatePath, 'post', options);
+  }
+
+  view(options?: IApiSchemaOptions) {
+    return this.$sdk.createApiSchemas(ApiApiTrainingStudentviewPath, 'get', options);
+  }
+
+  delete(options?: IApiSchemaOptions) {
+    return this.$sdk.createApiSchemas(ApiApiTrainingStudentdeletePath, 'delete', options);
+  }
+
+  update(options?: IApiSchemaOptions) {
+    return this.$sdk.createApiSchemas(ApiApiTrainingStudentupdatePath, 'patch', options);
+  }
+
+  summary(options?: IApiSchemaOptions) {
+    return this.$sdk.createApiSchemas(ApiApiTrainingStudentsummaryPath, 'get', options);
+  }
+
+  deleteForce(options?: IApiSchemaOptions) {
+    return this.$sdk.createApiSchemas(ApiApiTrainingStudentdeleteForcePath, 'delete', options);
+  }
+}

package/zova/src/suite/a-training/modules/training-student/src/bean/tableCell.actionDeleteForce.tsx

@@ -0,0 +1,51 @@
+import type { IResourceTableActionRowOptionsBase } from 'zova-module-a-openapi';
+import type {
+  IJsxRenderContextTableCell,
+  ITableCellRender,
+  NextTableCellRender,
+} from 'zova-module-a-table';
+
+import { BeanBase } from 'zova';
+import { TableCell } from 'zova-module-a-table';
+
+import type { ModelStudent } from '../model/student.ts';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceTableActionRowRecord {
+    'training-student:actionDeleteForce'?: ITableCellOptionsActionDeleteForce;
+  }
+}
+
+export interface ITableCellOptionsActionDeleteForce extends IResourceTableActionRowOptionsBase {}
+
+@TableCell<ITableCellOptionsActionDeleteForce>({
+  class: 'btn btn-outline btn-error join-item',
+})
+export class TableCellActionDeleteForce extends BeanBase implements ITableCellRender {
+  render(
+    options: ITableCellOptionsActionDeleteForce,
+    renderContext: IJsxRenderContextTableCell,
+    _next: NextTableCellRender,
+  ) {
+    return (
+      <button
+        class={options.class}
+        type="button"
+        onClick={async e => {
+          e.preventDefault();
+          e.stopPropagation();
+          // eslint-disable-next-line no-alert
+          if (!window.confirm(this.scope.locale.ForceDeleteConfirm())) return;
+          const modelStudent = await this._getModelStudent();
+          await modelStudent.deleteForce(renderContext.cellContext.row.id).mutateAsync();
+        }}
+      >
+        {this.scope.locale.ForceDelete()}
+      </button>
+    );
+  }
+
+  private async _getModelStudent() {
+    return (await this.bean._getBean('training-student.model.student', true)) as ModelStudent;
+  }
+}

package/zova/src/suite/a-training/modules/training-student/src/bean/tableCell.actionSummary.tsx

@@ -0,0 +1,56 @@
+import type { TableIdentity } from 'table-identity';
+import type { IResourceTableActionRowOptionsBase } from 'zova-module-a-openapi';
+import type {
+  IJsxRenderContextTableCell,
+  ITableCellRender,
+  NextTableCellRender,
+} from 'zova-module-a-table';
+import type { ModelStudent } from 'zova-module-training-student';
+
+import { BeanBase } from 'zova';
+import { TableCell } from 'zova-module-a-table';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceTableActionRowRecord {
+    'training-student:actionSummary'?: ITableCellOptionsActionSummary;
+  }
+}
+
+export interface ITableCellOptionsActionSummary extends IResourceTableActionRowOptionsBase {}
+
+@TableCell<ITableCellOptionsActionSummary>({
+  class: 'btn btn-outline btn-info join-item',
+})
+export class TableCellActionSummary extends BeanBase implements ITableCellRender {
+  render(
+    options: ITableCellOptionsActionSummary,
+    renderContext: IJsxRenderContextTableCell,
+    _next: NextTableCellRender,
+  ) {
+    const { $host, cellContext, ctx } = renderContext;
+    return (
+      <button
+        class={options.class}
+        type="button"
+        onClick={async () => {
+          const id = cellContext.row.id as TableIdentity;
+          const modelStudent = (await ctx.bean._getBean(
+            'training-student.model.student',
+            true,
+          )) as ModelStudent;
+          const querySummary = modelStudent.summary(id);
+          const { data: summary } = await querySummary.refetch();
+          const message = [
+            `${this.scope.locale.Id()}: ${summary?.id ?? '-'}`,
+            `${this.scope.locale.Name()}: ${summary?.name ?? '-'}`,
+            `${this.scope.locale.Level()}: ${summary?.level ?? '-'}`,
+            `${this.scope.locale.Description()}: ${summary?.description ?? '-'}`,
+          ].join('\n');
+          await $host.$performCommand('basic-commands:alert', { message }, renderContext);
+        }}
+      >
+        {this.scope.locale.Summary()}
+      </button>
+    );
+  }
+}

package/zova/src/suite/a-training/modules/training-student/src/bean/tableCell.level.tsx

@@ -0,0 +1,63 @@
+import type { IResourceTableCellOptionsBase } from 'zova-module-a-openapi';
+import type {
+  IJsxRenderContextTableCell,
+  ITableCellRender,
+  NextTableCellRender,
+} from 'zova-module-a-table';
+
+import { classes } from 'typestyle';
+import { BeanBase } from 'zova';
+import { TableCell } from 'zova-module-a-table';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceTableCellRecord {
+    'training-student:level'?: ITableCellOptionsLevel;
+  }
+}
+
+export interface ITableCellOptionsLevelItem {
+  value?: any;
+  title?: string;
+}
+
+export interface ITableCellOptionsLevel extends IResourceTableCellOptionsBase {
+  items?: ITableCellOptionsLevelItem[];
+  itemValue?: string;
+  itemTitle?: string;
+}
+
+@TableCell<ITableCellOptionsLevel>({
+  itemValue: 'value',
+  itemTitle: 'title',
+})
+export class TableCellLevel extends BeanBase implements ITableCellRender {
+  render(
+    options: ITableCellOptionsLevel,
+    _renderContext: IJsxRenderContextTableCell,
+    next: NextTableCellRender,
+  ) {
+    const value = next();
+    const item = options.items?.find(
+      item => String(item[String(options.itemValue)]) === String(value),
+    );
+    const title = item?.[String(options.itemTitle)] ?? value;
+    return (
+      <span
+        class={classes(
+          'badge badge-sm font-medium border-0 whitespace-nowrap px-2',
+          this._getBadgeClass(value),
+          options.class,
+        )}
+      >
+        {title}
+      </span>
+    );
+  }
+
+  private _getBadgeClass(value: unknown) {
+    if (String(value) === '1') return 'badge-warning text-warning-content';
+    if (String(value) === '2') return 'badge-info text-info-content';
+    if (String(value) === '3') return 'badge-success text-success-content';
+    return 'badge-neutral text-neutral-content';
+  }
+}

package/zova/src/suite/a-training/modules/training-student/src/component/formFieldLevel/controller.tsx

@@ -0,0 +1,117 @@
+import type { IComponentOptions } from 'zova';
+import type { IFormFieldComponentOptions } from 'zova-module-a-form';
+import type { IResourceFormFieldOptionsBase } from 'zova-module-a-openapi';
+
+import { classes } from 'typestyle';
+import { BeanControllerBase } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+import { ZFormField } from 'zova-module-a-form';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceFormFieldRecord {
+    'training-student:formFieldLevel'?: IResourceFormFieldLevelOptions;
+  }
+}
+
+export interface IResourceFormFieldLevelItem {
+  value?: any;
+  title?: string;
+}
+
+export interface IResourceFormFieldLevelOptions extends IResourceFormFieldOptionsBase {
+  items?: IResourceFormFieldLevelItem[];
+  itemValue?: string;
+  itemTitle?: string;
+  placeholder?: string;
+}
+
+export interface ControllerFormFieldLevelProps extends IFormFieldComponentOptions {
+  options?: IResourceFormFieldLevelOptions;
+}
+
+@Controller()
+export class ControllerFormFieldLevel extends BeanControllerBase {
+  static $propsDefault = {
+    options: {
+      itemValue: 'value',
+      itemTitle: 'title',
+    },
+  };
+
+  static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };
+
+  protected async __init__() {}
+
+  protected render() {
+    const propsFormField = this.$props as ControllerFormFieldLevelProps;
+    return (
+      <ZFormField
+        {...propsFormField}
+        slotDefault={({ propsBucket, props }, $$formField) => {
+          const items = propsBucket.options.items ?? [];
+          const value = propsBucket.value;
+          const itemSelected = items.find(
+            item => String(item[String(propsBucket.options.itemValue)]) === String(value),
+          );
+          if (propsBucket.readonly) {
+            return (
+              <div class={classes('flex min-h-12 items-center', props.class)}>
+                <span
+                  class={classes(
+                    'badge badge-lg font-semibold border-0 px-4 py-3 tracking-wide',
+                    this._getBadgeClass(value),
+                  )}
+                >
+                  {itemSelected?.[String(propsBucket.options.itemTitle)] ??
+                    propsBucket.options.placeholder ??
+                    ''}
+                </span>
+              </div>
+            );
+          }
+          return (
+            <div class={classes('flex flex-wrap gap-2', props.class)}>
+              {items.map(item => {
+                const itemValue = item[String(propsBucket.options.itemValue)];
+                const selected = String(itemValue) === String(value);
+                return (
+                  <button
+                    key={String(itemValue)}
+                    type="button"
+                    class={classes(
+                      'btn btn-sm rounded-full border-0 px-4 font-medium transition-colors',
+                      selected
+                        ? this._getButtonClass(itemValue)
+                        : 'btn-outline text-base-content/70',
+                      !$$formField.field.state.meta.isValid && 'btn-error',
+                    )}
+                    onClick={() => {
+                      $$formField.setValue(itemValue, propsBucket.disableNotifyChanged);
+                      $$formField.handleBlur();
+                    }}
+                  >
+                    {item[String(propsBucket.options.itemTitle)]}
+                  </button>
+                );
+              })}
+            </div>
+          );
+        }}
+      ></ZFormField>
+    );
+  }
+
+  private _getBadgeClass(value: unknown) {
+    if (String(value) === '1') return 'badge-warning text-warning-content';
+    if (String(value) === '2') return 'badge-info text-info-content';
+    if (String(value) === '3') return 'badge-success text-success-content';
+    return 'badge-neutral text-neutral-content';
+  }
+
+  private _getButtonClass(value: unknown) {
+    if (String(value) === '1') return 'btn-warning text-warning-content';
+    if (String(value) === '2') return 'btn-info text-info-content';
+    if (String(value) === '3') return 'btn-success text-success-content';
+    return 'btn-neutral text-neutral-content';
+  }
+}

package/zova/src/suite/a-training/modules/training-student/src/config/locale/en-us.ts

@@ -0,0 +1,9 @@
+export default {
+  Summary: 'Summary',
+  ForceDelete: 'Force Delete',
+  ForceDeleteConfirm: 'Are you sure you want to permanently delete this student?',
+  Id: 'ID',
+  Name: 'Name',
+  Level: 'Level',
+  Description: 'Description',
+};

package/zova/src/suite/a-training/modules/training-student/src/config/locale/zh-cn.ts

@@ -0,0 +1,9 @@
+export default {
+  Summary: '摘要',
+  ForceDelete: '强制删除',
+  ForceDeleteConfirm: '您确认要永久删除该学生吗？',
+  Id: 'ID',
+  Name: '名称',
+  Level: '阶段',
+  Description: '描述',
+};

package/zova/src/suite/a-training/modules/training-student/src/index.ts

@@ -0,0 +1,2 @@
+export * from './.metadata/locales.js';
+export * from './.metadata/index.js';

package/zova/src/suite/a-training/modules/training-student/src/model/student.ts

@@ -0,0 +1,42 @@
+import type { TableIdentity } from 'table-identity';
+import type { IDecoratorModelOptions } from 'zova-module-a-model';
+import type { ModelResource } from 'zova-module-rest-resource';
+
+import { Use, usePrepareArg } from 'zova';
+import { BeanModelBase, Model } from 'zova-module-a-model';
+
+export interface IModelOptionsStudent extends IDecoratorModelOptions {}
+
+const StudentResource = 'training-student:student';
+
+@Model<IModelOptionsStudent>()
+export class ModelStudent extends BeanModelBase {
+  @Use({ beanFullName: 'rest-resource.model.resource' })
+  protected get $$modelResource(): ModelResource {
+    return usePrepareArg(StudentResource, true);
+  }
+
+  summary(id: TableIdentity) {
+    return this.$$modelResource.queryItem({
+      id,
+      action: 'summary',
+      queryFn: async () => {
+        const res = await this.scope.api.trainingStudent.summary({ params: { id } });
+        return res ?? null;
+      },
+      meta: {
+        disableSuspenseOnInit: true,
+      },
+    });
+  }
+
+  deleteForce(id: TableIdentity) {
+    return this.$$modelResource.mutationItem<void, void>({
+      id,
+      action: 'deleteForce',
+      mutationFn: async () => {
+        await this.scope.api.trainingStudent.deleteForce({ params: { id } });
+      },
+    });
+  }
+}

package/zova/src/suite/a-training/modules/training-student/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": false
+  },
+  "include": ["src", "src/.metadata/**/*"]
+}

package/zova/src/suite/a-training/modules/training-student/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {},
+  "include": ["src", "src/.metadata/**/*"]
+}

package/zova/src/suite/a-training/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "zova-suite-a-training",
+  "version": "5.0.0",
+  "description": "",
+  "author": "",
+  "files": [],
+  "type": "module",
+  "dependencies": {
+    "zova-module-training-student": "^5.0.0"
+  },
+  "title": "a-training"
+}

package/zova/src/suite/a-training/tsconfig.base.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.base",
+  "compilerOptions": {}
+}

package/zova/src/suite/a-training/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.base",
+  "compilerOptions": {}
+}

package/zova/src/suite/cabloy-basic/modules/basic-select/src/component/formFieldSelect/controller.tsx

@@ -49,8 +49,12 @@ export class ControllerFormFieldSelect extends BeanControllerBase {
       <ZFormField
         {...this.$props}
         slotDefault={({ propsBucket, props }, $$formField) => {
-          const className = !propsBucket.needHandleBorder
-            ? classes(props.class, 'select select-ghost')
+          const needClearableEmptyOption = !propsBucket.needHandleBorder;
+          const className = needClearableEmptyOption
+            ? classes(
+                props.class,
+                'grow w-full h-full min-h-0 border-0 rounded-none bg-transparent pl-0 pr-8 py-0 shadow-none outline-none focus:outline-none focus:shadow-none focus:border-0',
+              )
             : classes(
                 props.class,
                 'select',
@@ -61,23 +65,41 @@ export class ControllerFormFieldSelect extends BeanControllerBase {
             'onUpdate:modelValue': (value: any) => {
               $$formField.setValue(value, propsBucket.disableNotifyChanged);
             },
+            'onBlur': () => {
+              $$formField.handleBlur();
+            },
             ...propsBucket.options,
             ...props,
             'class': className,
           };
-          propsNew.items = this._ensureEmptyItemFallback(propsNew.items, propsNew.placeholder);
+          if (needClearableEmptyOption) {
+            propsNew.items = this._ensureEmptyItemFallback(
+              propsNew.items,
+              propsNew.placeholder,
+              true,
+            );
+            propsNew.placeholder = undefined;
+          } else if (!propsNew.placeholder) {
+            propsNew.items = this._ensureEmptyItemFallback(propsNew.items, undefined);
+          }
           return <ZSelect {...propsNew}></ZSelect>;
         }}
       ></ZFormField>
     );
   }
 
-  private _ensureEmptyItemFallback(items: any[] | undefined, placeholder: unknown): any[] | undefined {
-    if (!!placeholder || !items?.length) return items;
+  private _ensureEmptyItemFallback(
+    items: any[] | undefined,
+    placeholder: unknown,
+    force = false,
+  ): any[] | undefined {
+    if (!items?.length) return items;
     const valueKey = String(this.$props.options.itemValue);
     const titleKey = String(this.$props.options.itemTitle);
-    if (items[0]?.[valueKey] === undefined) return items;
-    return [{ [valueKey]: undefined, [titleKey]: '' }, ...items];
+    const emptyValue = '';
+    if (items[0]?.[valueKey] === emptyValue) return items;
+    if (!force && !!placeholder) return items;
+    return [{ [valueKey]: emptyValue, [titleKey]: placeholder ?? '' }, ...items];
   }
 
   private _getValueByItems() {