bromcom-ui 2.10.0 → 2.10.1-rc.1

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

@@ -123,382 +123,6 @@
   margin-right: 8px;
 }
 
-.rc-picker-rtl {
-  direction: rtl;
-}
-
-.rc-picker-panel-focused {
-  border-color: #4293cf;
-}
-
-.rc-picker-panel-rtl {
-  direction: rtl;
-}
-
-.rc-picker-decade-panel,
-.rc-picker-year-panel,
-.rc-picker-month-panel,
-.rc-picker-week-panel,
-.rc-picker-date-panel,
-.rc-picker-time-panel {
-  display: flex;
-  flex-direction: column;
-}
-
-.rc-picker-decade-panel table,
-.rc-picker-year-panel table,
-.rc-picker-month-panel table,
-.rc-picker-week-panel table,
-.rc-picker-date-panel table,
-.rc-picker-time-panel table {
-  text-align: center;
-  border-collapse: collapse;
-}
-
-.rc-picker-cell {
-  color: #aaa;
-}
-
-.rc-picker-cell-disabled {
-  opacity: 0.2;
-}
-
-.rc-picker-cell-inner {
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: 20px;
-  margin: 0;
-  padding: 0;
-  font-size: 12px;
-  line-height: 20px;
-  background: transparent;
-  border: 0;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  transition: background 0.3s, border 0.3s;
-}
-
-.rc-picker-cell-inner:hover {
-  background: rgba(0, 0, 255, 0.3);
-}
-
-.rc-picker-cell-in-view {
-  color: #333;
-}
-
-.rc-picker-cell-in-range > .rc-picker-cell-inner {
-  background: rgba(0, 0, 255, 0.05);
-}
-
-.rc-picker-cell-range-hover-start,
-.rc-picker-cell-range-hover-end,
-.rc-picker-cell-range-hover {
-  position: relative;
-}
-
-.rc-picker-cell-range-hover-start::after,
-.rc-picker-cell-range-hover-end::after,
-.rc-picker-cell-range-hover::after {
-  position: absolute;
-  top: 3px;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  border: 1px solid green;
-  border-right: 0;
-  border-left: 0;
-  content: "";
-  pointer-events: none;
-}
-
-.rc-picker-cell-range-hover-start::after {
-  border-left: 1px solid green !important;
-}
-
-.rc-picker-cell-range-hover-end::after {
-  border-right: 1px solid green !important;
-}
-
-.rc-picker-cell-today > .rc-picker-cell-inner {
-  border: 1px solid blue;
-}
-
-.rc-picker-cell-range-start > .rc-picker-cell-inner,
-.rc-picker-cell-range-end > .rc-picker-cell-inner,
-.rc-picker-cell-selected > .rc-picker-cell-inner {
-  background: rgba(0, 0, 255, 0.2);
-}
-
-.rc-picker-presets {
-  background: #ccccff;
-}
-
-.rc-picker-presets ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.rc-picker-footer,
-.rc-picker-picker-footer {
-  background: green;
-}
-
-.rc-picker-ranges {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  list-style: none;
-}
-
-.rc-picker-ranges > li {
-  display: inline-block;
-}
-
-.rc-picker-ok {
-  float: right;
-}
-
-.rc-picker-year-panel .rc-picker-cell-inner,
-.rc-picker-month-panel .rc-picker-cell-inner {
-  width: 80px;
-}
-
-.rc-picker-week-panel-row:hover .rc-picker-cell {
-  background: red;
-}
-
-.rc-picker-week-panel-row-selected .rc-picker-cell {
-  background: rgba(0, 0, 255, 0.3);
-}
-
-.rc-picker-week-panel-row-range-hover .rc-picker-cell {
-  background: rgba(0, 255, 0, 0.1);
-}
-
-.rc-picker-week-panel-row-range-start .rc-picker-cell,
-.rc-picker-week-panel-row-range-end .rc-picker-cell {
-  background: rgba(0, 255, 0, 0.3);
-}
-
-.rc-picker-week-panel .rc-picker-cell,
-.rc-picker-week-panel .rc-picker-cell-inner {
-  width: 20px;
-}
-
-.rc-picker-week-panel .rc-picker-cell-week {
-  color: #999;
-  font-weight: bold;
-  font-size: 12px;
-}
-
-.rc-picker-week-panel .rc-picker-cell:hover > .rc-picker-cell-inner,
-.rc-picker-week-panel .rc-picker-cell-selected > .rc-picker-cell-inner {
-  background: transparent;
-}
-
-.rc-picker-date-panel .rc-picker-cell-inner {
-  width: 20px;
-}
-
-.rc-picker-time-panel {
-  width: auto;
-}
-
-.rc-picker-time-panel .rc-picker-content {
-  display: flex;
-  max-height: 200px;
-}
-
-.rc-picker-time-panel-column {
-  flex: none;
-  width: 50px;
-  margin: 0;
-  padding: 0 0 180px 0;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  font-size: 12px;
-  text-align: left;
-  list-style: none;
-  transition: background 0.3s;
-}
-
-.rc-picker-time-panel-column-active {
-  background: rgba(0, 0, 255, 0.1);
-}
-
-.rc-picker-time-panel-column:hover {
-  overflow-y: auto;
-}
-
-.rc-picker-time-panel-column > li {
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-}
-
-.rc-picker-time-panel-column > li.rc-picker-time-panel-cell-disabled {
-  opacity: 0.5;
-}
-
-.rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
-  display: block;
-  width: 100%;
-  height: 20px;
-  margin: 0;
-  padding: 0 0 0 12px;
-  color: #333;
-  line-height: 20px;
-  text-align: left;
-}
-
-.rc-picker-panel-rtl .rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
-  padding: 0 12px 0 0;
-  text-align: right;
-}
-
-.rc-picker-datetime-panel {
-  display: flex;
-}
-
-.rc-picker-datetime-panel .rc-picker-time-panel {
-  border-left: 1px solid #999;
-}
-
-.rc-picker-datetime-panel .rc-picker-date-panel,
-.rc-picker-datetime-panel .rc-picker-time-panel {
-  transition: opacity 0.3s;
-}
-
-.rc-picker-datetime-panel-active .rc-picker-date-panel,
-.rc-picker-datetime-panel-active .rc-picker-time-panel {
-  opacity: 0.3;
-}
-
-.rc-picker-datetime-panel-active .rc-picker-date-panel-active,
-.rc-picker-datetime-panel-active .rc-picker-time-panel-active {
-  opacity: 1;
-}
-
-.rc-picker-rtl .rc-picker-input {
-  text-align: right;
-}
-
-.rc-picker-rtl .rc-picker-clear {
-  right: auto;
-  left: 4px;
-}
-
-.rc-picker-dropdown {
-  position: absolute;
-  box-shadow: 0 0 1px red;
-}
-
-.rc-picker-dropdown-range {
-  padding: 10px 0;
-}
-
-.rc-picker-dropdown-hidden {
-  display: none;
-}
-
-.rc-picker-dropdown-placement-topLeft .rc-picker-range-arrow,
-.rc-picker-dropdown-placement-topRight .rc-picker-range-arrow {
-  bottom: 6px;
-  transform: rotate(135deg);
-}
-
-.rc-picker-dropdown-placement-bottomLeft .rc-picker-range-arrow,
-.rc-picker-dropdown-placement-bottomright .rc-picker-range-arrow {
-  top: 6px;
-  transform: rotate(-45deg);
-}
-
-.rc-picker-dropdown .rc-picker-range-arrow {
-  position: absolute;
-  left: 10px;
-  z-index: 1;
-  width: 10px;
-  height: 10px;
-  margin-left: 10px;
-  transition: all 0.3s;
-}
-
-.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow {
-  right: 10px;
-  left: auto;
-  margin-right: 10px;
-  margin-left: 0;
-}
-
-.rc-picker-dropdown .rc-picker-range-arrow::before,
-.rc-picker-dropdown .rc-picker-range-arrow::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  box-sizing: border-box;
-  transform: translate(-50%, -50%);
-  content: "";
-}
-
-.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow::before,
-.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow::after {
-  right: 50%;
-  left: auto;
-  transform: translate(50%, -50%);
-}
-
-.rc-picker-dropdown .rc-picker-range-arrow::before {
-  width: 10px;
-  height: 10px;
-  border: 5px solid blue;
-  border-color: blue blue transparent transparent;
-}
-
-.rc-picker-dropdown .rc-picker-range-arrow::after {
-  width: 8px;
-  height: 8px;
-  border: 4px solid blue;
-  border-color: #fff0ff #fff0ff transparent transparent;
-}
-
-.rc-picker-range {
-  position: relative;
-  display: inline-flex;
-}
-
-.rc-picker-range-wrapper {
-  display: flex;
-}
-
-.rc-picker-range .rc-picker-active-bar {
-  bottom: 0;
-  height: 3px;
-  background: green;
-  opacity: 0;
-  transition: all 0.3s;
-  pointer-events: none;
-}
-
-.rc-picker-range.rc-picker-focused .rc-picker-active-bar {
-  opacity: 1;
-}
-
-.rc-picker-panel-container {
-  display: inline-block;
-  vertical-align: top;
-  transition: margin 0.3s;
-}
-
-.rc-picker-panel-layout {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: stretch;
-}
-
-/* custom */
 .bcm-date {
   font-family: "Inter", sans-serif;
   font-size: 14px;
@@ -658,6 +282,7 @@
 }
 .bcm-date-dropdown {
   position: absolute;
+  z-index: 10800;
   box-shadow: 0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   background-color: #fff;
   top: -9999;

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

@@ -28,7 +28,7 @@ export class BcmRcPicker {
     };
     this.manageDisabledTime = () => {
       const { disabledHours, disabledMinutes, disabledSeconds } = this.disabledTime || {};
-      return Object.assign(Object.assign(Object.assign({}, (disabledHours && { disabledHours: () => disabledHours })), (disabledMinutes && { disabledMinutes: () => disabledMinutes })), (disabledSeconds && { disabledSeconds: () => disabledSeconds }));
+      return Object.assign(Object.assign(Object.assign({}, ((disabledHours && this.showHour) && { disabledHours: () => disabledHours })), ((disabledMinutes && this.showMinute) && { disabledMinutes: () => disabledMinutes })), ((disabledSeconds && this.showSecond) && { disabledSeconds: () => disabledSeconds }));
     };
     this.convertDateToMoment = (date) => {
       return date && date !== "invalid date" ? moment(date) : null;
@@ -80,22 +80,9 @@ export class BcmRcPicker {
     const options = {
       time: Object.assign({}, timeOptions),
       date: Object.assign({}, dateOptions),
-      datetime: {
-        // ...dateOptions, 
-        // ...timeOptions,
-        // showTime={{
-        //     showSecond: false,
-        //     defaultValue: moment('11:28:39', 'HH:mm:ss'),
-        //   }}
-        //   showToday
-        showTime: {
-          showSecond: this.showSecond,
-          // defaultValue: moment(),
-        },
-        showToday: true,
-      },
+      datetime: Object.assign(Object.assign(Object.assign({}, dateOptions), timeOptions), { showTime: Object.assign({ showSecond: this.showSecond }, timeOptions) }),
     };
-    const sharedProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ generateConfig: momentGenerateConfig, value: this.newValue, onChange: newValue => this.set(newValue) }, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder })), (this.error && { error: this.error })), (this.disabled && { disabled: this.disabled })), { format: this.format, picker: this.type }), options[this.type]), { prefixCls: "bcm-date", suffixIcon: " ", autofocus: true, locale: enUS, className: cs(`bcm-date--${this.type}`, {
+    const sharedProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ generateConfig: momentGenerateConfig, value: this.newValue, onChange: newValue => this.set(newValue) }, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder })), (this.error && { error: this.error })), (this.disabled && { disabled: this.disabled })), { picker: this.type }), options[this.type]), { prefixCls: "bcm-date", suffixIcon: " ", autofocus: true, locale: enUS, className: cs(`bcm-date--${this.type}`, {
         [`bcm-date--${this.size}`]: this.size,
         "bcm-date--error": this.error,
       }) });

package/dist/collection/models/bcm.js

@@ -396,33 +396,34 @@ export var Bcm;
     KeyCode[KeyCode["a"] = 65] = "a";
   })(KeyCode = Bcm.KeyCode || (Bcm.KeyCode = {}));
   Bcm.FormErrorMessages = {
-    "email": "Please enter a valid email address",
-    "password": "Please enter a valid password",
-    "url": "Please enter a valid URL",
-    "phone": "Please enter a valid phone number",
-    "search": "Please enter a valid search term",
-    "number": "Please enter a valid number",
-    "text": "Please enter a valid text",
-    "required": "This field is required",
-    "minlength": "This field must be at least {0} characters long",
-    "maxlength": "This field must be at most {0} characters long",
-    "min": "This field must be at least {0}",
-    "max": "This field must be at most {0}",
-    "between": "This field must be between {0} and {1}",
-    "pattern": "Please use a valid format",
-    "date": "Please enter a valid date",
-    "time": "Please enter a valid time",
-    "datetime": "Please enter a valid date and time",
-    "datetime-local": "Please enter a valid date and time",
-    "month": "Please enter a valid month",
-    "week": "Please enter a valid week",
-    "color": "Please enter a valid color",
-    "file": "Please enter a valid file",
-    "range": "Please enter a valid range",
-    "radio": "Please select a valid option",
-    "checkbox": "Please select a valid option",
-    "select": "Please select a valid option",
-    "multiple": "Please select a valid option",
+    "email": "Please enter a valid email address.",
+    "password": "Please enter a valid password.",
+    "url": "Please enter a valid URL.",
+    "phone": "Please enter a valid phone number.",
+    "search": "Please enter a valid search term.",
+    "number": "Please enter a valid number.",
+    "text": "Please enter a valid text.",
+    "required": "This field is required.",
+    "minlength": "Must be at least {0} chars long.",
+    "maxlength": "Must be at most {0} chars long.",
+    "betweenlength": "Must be between {0} and {1} chars long.",
+    "min": "This field must be at least {0}.",
+    "max": "This field must be at most {0}.",
+    "between": "This field must be between {0} and {1}.",
+    "pattern": "Please use a valid format.",
+    "date": "Please enter a valid date.",
+    "time": "Please enter a valid time.",
+    "datetime": "Please enter a valid date and time.",
+    "datetime-local": "Please enter a valid date and time.",
+    "month": "Please enter a valid month.",
+    "week": "Please enter a valid week.",
+    "color": "Please enter a valid color.",
+    "file": "Please enter a valid file.",
+    "range": "Please enter a valid range.",
+    "radio": "Please select a valid option.",
+    "checkbox": "Please select a valid option.",
+    "select": "Please select a valid option.",
+    "multiple": "Please select a valid option.",
   };
   let IndeterminateType;
   (function (IndeterminateType) {

package/dist/collection/stories/ui-library/components/date/argTypes_common.js

@@ -0,0 +1,203 @@
+export const argTypesCommon = {
+    "value": {
+        description: "The value of the date picker. This is a read-only field. The value is stored as an object.",
+        table: {
+            category: "Common Properties",
+            type: { summary: "object" },
+        },
+    },
+    "label": {
+        control: "text",
+        description: "The label of the date picker.",
+        table: {
+            category: "Common Properties",
+            defaultValue: { summary: null },
+            type: { summary: "string" },
+        },
+    },
+    "name": {
+        control: "text",
+        description: "The name of the date picker. When used in a form, the name is submitted along with the form value.",
+        table: {
+            category: "Common Properties",
+            defaultValue: { summary: null },
+            type: { summary: "string" },
+        },
+    },
+    "placeholder": {
+        control: "text",
+        description: "The placeholder text of the date picker.",
+        table: {
+            category: "Common Properties",
+            defaultValue: { summary: null },
+            type: { summary: "string" },
+        },
+    },
+    "clearable": {
+        control: "boolean",
+        description: "Specifies whether the date picker is clearable.",
+        table: {
+            category: "Common Properties",
+            defaultValue: { summary: "false" },
+            type: { summary: "boolean" },
+        },
+    },
+    "caption": {
+        control: "text",
+        description: "The caption text of the date picker.",
+        table: {
+            category: "Common Properties",
+            defaultValue: { summary: null },
+            type: { summary: "string" },
+        },
+    },
+    "caption-type": {
+        control: { type: "select", options: ["info", "error", "warning", "success", "default"] },
+        description: "The caption type of the date picker.",
+        table: {
+            category: "Common Properties",
+            defaultValue: { summary: null },
+            type: { summary: "string" },
+        },
+    },
+    "full-width": {
+        control: "boolean",
+        description: "Date picker will take up the full width of its container.",
+        table: {
+            category: "Common Properties",
+            defaultValue: { summary: "false" },
+            type: { summary: "boolean" },
+        },
+    },
+    "required": {
+        control: "boolean",
+        description: "Specifies whether the date picker is required.",
+        table: {
+            category: "Common Properties",
+            defaultValue: { summary: "false" },
+            type: { summary: "boolean" },
+        },
+    },
+    "disabled": {
+        control: "boolean",
+        description: "Specifies whether the date picker is disabled.",
+        table: {
+            category: "Common Properties",
+            defaultValue: { summary: "false" },
+            type: { summary: "boolean" },
+        },
+    },
+    "readonly": {
+        control: "boolean",
+        description: "Specifies whether the date picker is read-only.",
+        table: {
+            category: "Common Properties",
+            defaultValue: { summary: "false" },
+            type: { summary: "boolean" },
+        },
+    },
+    "set": {
+        description: "Sets the value of the date picker.",
+        table: {
+            category: "Methods",
+            type: { summary: "void" },
+            defaultValue: {
+                summary: "Example",
+                detail: `
+const bcmDate = document.querySelector("bcm-date");
+// new Date() Or moment().toDate() can be used
+bcmDate.set(new Date(2023, 11, 1));
+// bcmDate.set(moment().endOf('month').toDate());`,
+            },
+        },
+    },
+    "get": {
+        // timestamp döner 1633824000000 gibi
+        description: "Gets the Timestamp of the date picker.",
+        table: {
+            category: "Methods",
+            type: { summary: "string" },
+            defaultValue: {
+                summary: "Example",
+                detail: `
+const bcmDate = document.querySelector("bcm-date");
+await bcmDate.get(); // 1633824000000 (timestamp)`,
+            },
+        },
+    },
+    "setValue": {
+        description: "Sets the value of the date picker. Same as set() method.",
+        table: {
+            category: "Methods",
+            type: { summary: "void" },
+            defaultValue: {
+                summary: "Example",
+                detail: `
+const bcmDate = document.querySelector("bcm-date");
+// new Date() Or moment().toDate() can be used
+await bcmDate.setValue(new Date(2023, 11, 1));
+// bcmDate.setValue(moment().endOf('month').toDate());`,
+            },
+        },
+    },
+    "getValue": {
+        description: "Gets the value object of the date picker. Date object contains the following Common Properties: isValid, date, timestamp, dateObject, value.",
+        table: {
+            category: "Methods",
+            type: { summary: "object" },
+            defaultValue: {
+                summary: "Example",
+                detail: `
+const bcmDate = document.querySelector("bcm-date");
+await bcmDate.getValue();
+// Returns the following object
+{/* {
+"isValid": true,
+"date": "2021-10-10T00:00:00.000Z",
+"timestamp": 1633824000000,
+"dateObject": {
+"year": 2021,
+"day": 10,
+"month": 9,
+"dayOfWeek": 0,
+"monthFirstDay": 5
+},
+"value": "10/10/2021"
+} */}`,
+            },
+        },
+    },
+    "setClear": {
+        description: "Sets the value of the date picker to null.",
+        table: {
+            category: "Methods",
+            type: { summary: "void" },
+            defaultValue: {
+                summary: "Example",
+                detail: `
+const bcmDate = document.querySelector("bcm-date");
+bcmDate.setClear();`,
+            },
+        },
+    },
+    "resetCaption": {
+        description: "Resets the caption of the date picker.",
+        table: {
+            category: "Methods",
+            type: { summary: "void" },
+            defaultValue: {
+                summary: "Example",
+                detail: `
+const bcmDate = document.querySelector("bcm-date");
+bcmDate.resetCaption();`,
+            },
+        },
+    },
+    "bcm-change": {
+        description: "",
+        table: {
+            category: "Events",
+            type: { summary: "void" },
+        },
+    },
+};