@next-bricks/form 0.17.12 → 0.17.13

package/dist-types/bootstrap.d.ts

@@ -14,3 +14,4 @@ import "./general-switch/index.js";
 import "./upload/upload-file/index.js";
 import "./auto-complete/index.js";
 import "./time-picker/index.js";
+import "./date-picker/index.js";

package/dist-types/date-picker/i18n.d.ts

@@ -0,0 +1,30 @@
+export declare enum K {
+    NEXT_DAY = "NEXT_DAY",
+    TODAY = "TODAY",
+    LAST_DAY = "LAST_DAY",
+    NEXT_WEEK = "NEXT_WEEK",
+    THIS_WEEK = "THIS_WEEK",
+    LAST_WEEK = "LAST_WEEK",
+    NEXT_MONTH = "NEXT_MONTH",
+    THIS_MONTH = "THIS_MONTH",
+    LAST_MONTH = "LAST_MONTH",
+    NEXT_QUARTER = "NEXT_QUARTER",
+    THIS_QUARTER = "THIS_QUARTER",
+    LAST_QUARTER = "LAST_QUARTER",
+    NEXT_YEAR = "NEXT_YEAR",
+    THIS_YEAR = "THIS_YEAR",
+    LAST_YEAR = "LAST_YEAR",
+    FISRT_QUARTER = "FISRT_QUARTER",
+    SECOND_QUARTER = "SECOND_QUARTER",
+    THIRD_QUARTER = "THIRD_QUARTER",
+    FOURTH_QUARTER = "FOURTH_QUARTER"
+}
+export declare const NS = "bricks/form/eo-date-picker";
+export declare const locales: {
+    en: Locale;
+    zh: Locale;
+};
+type Locale = {
+    [key in K]: string;
+};
+export {};

package/dist-types/date-picker/index.d.ts

@@ -0,0 +1,93 @@
+import React, { CSSProperties } from "react";
+import "@next-core/theme";
+import { FormItemElementBase } from "@next-shared/form";
+import type { FormItemProps } from "../form-item/index.jsx";
+import type { Dayjs } from "dayjs";
+import "dayjs/locale/zh-cn.js";
+import { DisabledDateType, PickerMode } from "../interface.js";
+interface InternalStateDatePickerProps {
+    placeholder?: string;
+    value?: Dayjs;
+    showTime?: boolean;
+    inputBoxStyle?: React.CSSProperties;
+    format?: string;
+    picker?: PickerMode;
+    disabledDate?: DisabledDateType;
+    useFastSelectBtn?: boolean;
+    futureDateDisabled?: boolean;
+    disabled?: boolean;
+    onChange?: (value: Dayjs | null, dateString: string) => void;
+    onOk?: (date: Dayjs) => void;
+}
+interface EoDatePickerProps extends Omit<InternalStateDatePickerProps, "value" | "onChange" | "onOk">, FormItemProps {
+    shadowRoot: ShadowRoot | null;
+    value?: string;
+    onChange?: (value: string) => void;
+    onOk?: (value: string) => void;
+}
+/**
+ * 构件 `eo-date-picker`
+ */
+export declare class EoDatePicker extends FormItemElementBase {
+    #private;
+    /**
+     * 日期选择器字段名
+     */
+    accessor name: string | undefined;
+    /**
+     * 日期选择器说明
+     */
+    accessor label: string | undefined;
+    /**
+     *日期选择器的初始值
+     */
+    accessor value: string | undefined;
+    /**
+     * 日期选择器占位说明
+     */
+    accessor placeholder: string | undefined;
+    /**
+     * 校验文本信息
+     */
+    accessor message: Record<string, string> | undefined;
+    /**
+     * 是否禁用
+     */
+    accessor disabled: boolean | undefined;
+    /**
+     * 是否必填
+     */
+    accessor required: boolean | undefined;
+    /**
+     * 是否显示时间, 当设为 `true` 时, 请同时设置 `format` 为 `YYYY-MM-DD HH:mm:ss` 使其也显示具体时，分，秒 的时间
+     */
+    accessor showTime: boolean | undefined;
+    /**
+     * 显示预览的格式，具体配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)，注意，这里并非是定义给后台的数据格式，给后台的数据格式定义请参考 `general-form` 构件的 [valueTypes](developers/brick-book/brick/forms.general-form) 属性
+     */
+    accessor format: string | undefined;
+    /**
+     * 设置选择器类型
+     */
+    accessor picker: PickerMode | undefined;
+    /**
+     * 不可选择未来日期,优先级高于disabledDate
+     */
+    accessor futureDateDisabled: boolean | undefined;
+    /**
+     * 不可选择的日期
+     */
+    accessor disabledDate: DisabledDateType | undefined;
+    /**
+     *快速选项
+     */
+    accessor useFastSelectBtn: boolean | undefined;
+    /**
+     * 输入框样式
+     */
+    accessor inputBoxStyle: CSSProperties | undefined;
+    render(): JSX.Element;
+}
+export declare function InternalStateDatePicker(props: InternalStateDatePickerProps): React.ReactElement;
+export declare function EoDatePickerComponent(props: EoDatePickerProps): React.ReactElement;
+export {};

package/dist-types/date-picker/index.spec.d.ts

@@ -0,0 +1 @@
+import "./";

package/dist-types/interface.d.ts

@@ -17,3 +17,14 @@ export interface GeneralGroupOption {
     options: GeneralComplexOption | GeneralOption;
 }
 export declare type RadioGroupButtonStyle = "outline" | "solid";
+export interface DisabledDate {
+    second?: string | number;
+    minute?: string | number;
+    hour?: string | number;
+    date?: string | number;
+    month?: string | number;
+    year?: string | number;
+    weekday?: string | number;
+}
+export type DisabledDateType = DisabledDate | DisabledDate[];
+export type PickerMode = "date" | "week" | "month" | "year" | "quarter";

package/docs/eo-date-picker.md

@@ -0,0 +1,105 @@
+构件 `eo-date-picker`
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: eo-date-picker
+```
+
+### picker
+
+```yaml preview
+- brick: eo-radio
+  events:
+    change:
+      - target: "#datePicker"
+        properties:
+          picker: <% EVENT.detail.value %>
+  properties:
+    options:
+      - label: 天
+        value: date
+      - label: 周
+        value: week
+      - label: 月
+        value: month
+      - label: 季度
+        value: quarter
+      - label: 年
+        value: year
+- brick: div
+  properties:
+    style:
+      display: grid
+      gap: 1em
+  children:
+    - brick: eo-button
+      properties:
+        textContent: 中文
+      events:
+        click:
+          useProvider: basic.change-language
+          args:
+            - zh
+          callback:
+            success:
+              action: message.success
+              args:
+                - '<% I18N_TEXT({ zh: "你好", "en": "Hello" }) %>'
+    - brick: eo-button
+      properties:
+        textContent: English
+      events:
+        click:
+          useProvider: basic.change-language
+          args:
+            - en
+          callback:
+            success:
+              action: message.success
+              args:
+                - '<% I18N_TEXT({ zh: "你好", "en": "Hello" }) %>'
+- brick: eo-date-picker
+  properties:
+    id: datePicker
+    useFastSelectBtn: true
+```
+
+### showTime
+
+```yaml preview
+- brick: eo-date-picker
+  events:
+    ok:
+      action: console.log
+    change:
+      action: console.log
+  properties:
+    showTime: true
+    value: "2020-02-01 14:30:00"
+    format: "YYYY-MM-DD HH:mm:ss"
+```
+
+### 禁用日期
+
+```yaml preview
+- brick: eo-date-picker
+  events:
+    ok:
+      action: console.log
+    change:
+      action: console.log
+  properties:
+    disabledDate:
+      - weekday: 4
+      - date: 10-15
+        year: 2010-2020
+      - hour: 12-18
+        minute: 0-29
+        weekday: 3
+    format: "YYYY-MM-DD HH:mm:ss"
+    showTime: true
+    value: "2019-10-01 00:00:00"
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/form",
-  "version": "0.17.12",
+  "version": "0.17.13",
   "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/form",
   "repository": {
     "type": "git",
@@ -37,5 +37,5 @@
     "@next-core/build-next-bricks": "^1.14.2",
     "@next-core/test-next": "^1.0.10"
   },
-  "gitHead": "f37227b7c2e7fb8478d479ed94cb8ec4a741cf4e"
+  "gitHead": "21ed459e2bc607009a20b270499562cd86a8fb01"
 }