bromcom-ui 2.9.0-rc.17 → 2.9.0-rc.19

package/dist/collection/components/third-parts/rc-picker/date.js

@@ -48,6 +48,22 @@ export class BcmDate {
       return this.format;
     };
     this.getValueObject = (value) => {
+      if (this.range) {
+        return this.getRangeValueObject(value);
+      }
+      else {
+        return this.createValueObject(value);
+      }
+    };
+    this.getRangeValueObject = (value) => {
+      const [start, end] = value._i || [];
+      const startObject = this.createValueObject(start);
+      const endObject = this.createValueObject(end);
+      return Object.assign({ isValid: startObject.isValid && endObject.isValid, start: startObject, end: endObject, date: [startObject.date, endObject.date], timestamp: [startObject.timestamp, endObject.timestamp], value: `${startObject.value} - ${endObject.value}` }, (this.type === "time" && {
+        time: `${startObject.time} - ${endObject.time}`,
+      }));
+    };
+    this.createValueObject = (value) => {
       if (value && moment(value).isValid()) {
         return Object.assign({ isValid: moment(value).isValid(), date: moment(value).toDate(), timestamp: moment(value).valueOf(), dateObject: {
             year: moment(value).year(),
@@ -55,58 +71,64 @@ export class BcmDate {
             month: moment(value).month(),
             dayOfWeek: moment(value).day(),
             monthFirstDay: moment(value).startOf("month").day(),
-          }, value: moment(value).format(this.getFormat()) }, this.type === "time" && {
+          }, value: moment(value).format(this.getFormat()) }, (this.type === "time" && {
           time: moment(value).format(this.getFormat()),
           timeObject: {
             hour: moment(value).hour(),
             minute: moment(value).minute(),
             second: moment(value).second(),
           },
-        });
+        }));
       }
       else {
         return null;
       }
     };
     this._id = Generate.UID();
-    this.name = undefined;
-    this.value = undefined;
     this.label = undefined;
     this.placeholder = undefined;
     this.size = Bcm.Size.medium;
     this.fullWidth = false;
     this.required = false;
     this.clearable = false;
+    this.disabled = false;
     this.noMargin = false;
     this.caption = undefined;
     this.noCaption = false;
     this.captionType = Bcm.Status.default;
     this.captionError = undefined;
+    this.name = undefined;
+    this.value = undefined;
     this.type = "date";
     this.format = undefined;
+    this.range = false;
     this.showTime = false;
-    this.showToday = true;
     this.showNow = true;
     this.showHour = true;
     this.showMinute = true;
     this.showSecond = false;
     this.use12Hours = false;
-    this.disabled = false;
+    this.hourStep = 1;
+    this.minuteStep = 1;
+    this.secondStep = 1;
+    this.hideDisabledOptions = false;
+    this.disabledTime = undefined;
+    this.showToday = true;
+    this.disabledDates = undefined;
   }
   async getValue() {
-    var _a;
-    return ((_a = this.getValueObject(this.value)) === null || _a === void 0 ? void 0 : _a.value) || null;
+    return this.value;
   }
   async get() {
     var _a;
-    return ((_a = this.getValueObject(this.value)) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
+    return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
   }
   async set(value) {
     // this.value = value;
     this.getPickerElement().set(value);
   }
   async setClear() {
-    this.value = null;
+    this.getPickerElement().set(null);
   }
   async resetCaption() {
     this.captionType = "default";
@@ -127,7 +149,7 @@ export class BcmDate {
     return (h(Host, { class: cs("bcm-ui-element bcm-ui-input", "tw-relative tw-m-0 tw-inline-flex tw-w-full tw-flex-col", {
         "tw-max-w-[256px]": !this.fullWidth,
         "tw-mb-2": !this.noMargin,
-      }) }, label && h(LabelTemplate, { size: size, type: captionType, value: label, required: required, htmlFor: _id }), h("bcm-rc-picker", { id: _id + "-picker", onBcmRCPickerChange: e => this.onChange(e), type: this.type, format: this.getFormat(), clearable: this.clearable, val: this.value, class: cs("w-full tw-flex"), size: size, placeholder: this.placeholder, showTime: this.showTime, showToday: this.showToday, showNow: this.showNow, showHour: this.showHour, showMinute: this.showMinute, showSecond: this.showSecond, use12Hours: this.use12Hours, error: this.captionType === "error", disabled: this.disabled }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+      }) }, label && h(LabelTemplate, { size: size, type: captionType, value: label, required: required, htmlFor: _id }), h("bcm-rc-picker", { id: _id + "-picker", class: cs("w-full tw-flex"), onBcmRCPickerChange: e => this.onChange(e), disabled: this.disabled, clearable: this.clearable, size: size, placeholder: this.placeholder, error: this.captionType === "error", type: this.type, format: this.getFormat(), range: this.range, showToday: this.showToday, disabledDates: this.disabledDates, showTime: this.showTime, showNow: this.showNow, showHour: this.showHour, showMinute: this.showMinute, showSecond: this.showSecond, use12Hours: this.use12Hours, hourStep: this.hourStep, minuteStep: this.minuteStep, secondStep: this.secondStep, hideDisabledOptions: this.hideDisabledOptions, disabledTime: this.disabledTime }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   static get is() { return "bcm-date"; }
   static get properties() {
@@ -150,40 +172,6 @@ export class BcmDate {
         "reflect": true,
         "defaultValue": "Generate.UID()"
       },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "value": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false
-      },
       "label": {
         "type": "string",
         "mutable": false,
@@ -295,6 +283,24 @@ export class BcmDate {
         "reflect": false,
         "defaultValue": "false"
       },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "noMargin": {
         "type": "boolean",
         "mutable": false,
@@ -388,6 +394,40 @@ export class BcmDate {
         "attribute": "caption-error",
         "reflect": false
       },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
       "type": {
         "type": "string",
         "mutable": false,
@@ -423,7 +463,7 @@ export class BcmDate {
         "attribute": "format",
         "reflect": false
       },
-      "showTime": {
+      "range": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -437,11 +477,11 @@ export class BcmDate {
           "tags": [],
           "text": ""
         },
-        "attribute": "show-time",
+        "attribute": "range",
         "reflect": false,
         "defaultValue": "false"
       },
-      "showToday": {
+      "showTime": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -455,9 +495,9 @@ export class BcmDate {
           "tags": [],
           "text": ""
         },
-        "attribute": "show-today",
+        "attribute": "show-time",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       },
       "showNow": {
         "type": "boolean",
@@ -549,7 +589,61 @@ export class BcmDate {
         "reflect": false,
         "defaultValue": "false"
       },
-      "disabled": {
+      "hourStep": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hour-step",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "minuteStep": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "minute-step",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "secondStep": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "second-step",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "hideDisabledOptions": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -563,9 +657,61 @@ export class BcmDate {
           "tags": [],
           "text": ""
         },
-        "attribute": "disabled",
+        "attribute": "hide-disabled-options",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "disabledTime": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled-time",
+        "reflect": false
+      },
+      "showToday": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-today",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "disabledDates": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled-dates",
+        "reflect": false
       }
     };
   }
@@ -591,14 +737,14 @@ export class BcmDate {
     return {
       "getValue": {
         "complexType": {
-          "signature": "() => Promise<string>",
+          "signature": "() => Promise<any>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<string>"
+          "return": "Promise<any>"
         },
         "docs": {
           "text": "",
@@ -607,14 +753,14 @@ export class BcmDate {
       },
       "get": {
         "complexType": {
-          "signature": "() => Promise<number>",
+          "signature": "() => Promise<any>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<number>"
+          "return": "Promise<any>"
         },
         "docs": {
           "text": "",

package/dist/collection/components/third-parts/rc-picker/rc-picker.css

@@ -538,6 +538,9 @@
 .bcm-date-focused {
   background-color: #f8fafc;
 }
+.bcm-date-suffix {
+  color: #334155;
+}
 .bcm-date-suffix:not(:empty) {
   display: flex;
   align-items: center;
@@ -573,10 +576,14 @@
   display: inline-flex;
   width: 100%;
   padding: 0 4px;
+  color: #334155;
+}
+.bcm-date-input-placeholder {
+  color: #94a3b8;
 }
 .bcm-date-input > input {
+  color: inherit;
   width: 100%;
-  color: #475569;
   flex: 1;
   border: none;
   background: transparent;
@@ -607,6 +614,7 @@
   text-overflow: ellipsis;
 }
 .bcm-date-clear {
+  color: #334155;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -673,6 +681,9 @@
   line-height: 22px;
   font-weight: 400;
 }
+.bcm-date-dropdown .bcm-date-panels {
+  display: inline-flex;
+}
 .bcm-date-dropdown .bcm-date-decade-panel, .bcm-date-dropdown .bcm-date-year-panel, .bcm-date-dropdown .bcm-date-month-panel, .bcm-date-dropdown .bcm-date-week-panel, .bcm-date-dropdown .bcm-date-date-panel, .bcm-date-dropdown .bcm-date-time-panel {
   width: 256px;
 }
@@ -742,6 +753,10 @@
 .bcm-date-dropdown .bcm-date-time-panel-column > li.bcm-date-time-panel-cell-selected .bcm-date-time-panel-cell-inner {
   background: #e6f4ff;
 }
+.bcm-date-dropdown .bcm-date-time-panel-column > li.bcm-date-time-panel-cell-disabled .bcm-date-time-panel-cell-inner {
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.25);
+}
 .bcm-date-dropdown .bcm-date-datetime-panel {
   display: flex;
   flex-direction: row;
@@ -814,7 +829,23 @@
   text-align: center;
   text-transform: uppercase;
 }
-.bcm-date-dropdown .bcm-date-cell .bcm-date-cell-inner {
+.bcm-date-dropdown .bcm-date-cell {
+  position: relative;
+}
+.bcm-date-dropdown .bcm-date-cell::before {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  height: 24px;
+  transform: translateY(-50%);
+  transition: all 0.3s;
+  content: "";
+}
+.bcm-date-dropdown .bcm-date-cell-inner {
+  position: relative;
+  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -822,9 +853,9 @@
   border: 1px solid transparent;
   transition: background 0.2s, border 0.2s;
   cursor: pointer;
-  color: #64748b;
+  color: #94a3b8;
 }
-.bcm-date-dropdown .bcm-date-cell .bcm-date-cell-inner:hover {
+.bcm-date-dropdown .bcm-date-cell-inner:hover {
   background: #e2e8f0;
   color: #64748b;
 }
@@ -847,6 +878,68 @@
   background: #2563eb;
   color: #fff;
 }
+.bcm-date-dropdown .bcm-date-cell-in-range .bcm-date-cell-inner {
+  background: #bfdbfe;
+}
+.bcm-date-dropdown .bcm-date-cell-in-range::before {
+  background: #bfdbfe;
+}
+.bcm-date-dropdown .bcm-date-cell-range-hover .bcm-date-cell-inner {
+  background: #93c5fd;
+  color: #334155;
+}
+.bcm-date-dropdown .bcm-date-cell-range-hover::before {
+  background: #93c5fd;
+}
+.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner {
+  background-color: #3b82f6;
+  color: #fff;
+  border-radius: 4px 0 0 4px;
+}
+.bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner:hover {
+  background: #3b82f6;
+  color: #fff;
+  border-radius: 4px 0 0 4px;
+}
+.bcm-date-dropdown .bcm-date-cell-range-start::before {
+  background: #bfdbfe;
+  inset-inline-start: 50%;
+}
+.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner {
+  background-color: #3b82f6;
+  color: #fff;
+  border-radius: 0 4px 4px 0;
+}
+.bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner:hover {
+  background: #3b82f6;
+  color: #fff;
+  border-radius: 4px 0 0 4px;
+}
+.bcm-date-dropdown .bcm-date-cell-range-end::before {
+  background: #bfdbfe;
+  inset-inline-end: 50%;
+}
+.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner {
+  background-color: #93c5fd;
+  color: #334155;
+}
+.bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner:hover {
+  background: #93c5fd;
+  color: #334155;
+  border-radius: 4px 0 0 4px;
+}
+.bcm-date-dropdown .bcm-date-cell-range-hover-end .bcm-date-cell-inner:hover {
+  background: #93c5fd;
+  color: #334155;
+  border-radius: 0 4px 4px 0;
+}
+.bcm-date-dropdown .bcm-date-cell-disabled .bcm-date-cell-inner {
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.25);
+}
+.bcm-date-dropdown .bcm-date-cell-disabled::before {
+  background: rgba(0, 0, 0, 0.04);
+}
 .bcm-date-dropdown .bcm-date-footer {
   border-top: 1px solid rgba(5, 5, 5, 0.06);
   width: min-content;
@@ -909,4 +1002,8 @@
 }
 .bcm-date-dropdown .bcm-date-now-btn:hover {
   color: #2563eb;
+}
+.bcm-date-dropdown .bcm-date-range-wrapper {
+  display: flex;
+  position: relative;
 }