@onereach/ui-components 8.15.2 → 8.16.0-beta.3813.0

package/dist/esm/v3/{OrDateTimePicker-ef13afca.js → OrDateTimePicker-9f520831.js}

@@ -191,6 +191,11 @@ var script = defineComponent({
       type: Function,
       required: false,
       default: null
+    },
+    allowSeconds: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   emits: ['update:modelValue'],
@@ -245,6 +250,20 @@ var script = defineComponent({
         this.$emit('update:modelValue', newDate);
       }
     },
+    inputSeconds: {
+      get: function () {
+        if (!this.modelValue) return '';
+        return padStart('' + this.modelValue.getSeconds(), 2, '0');
+      },
+      set: function (val) {
+        var _a;
+        let seconds = +val;
+        seconds = seconds >= 60 ? 59 : seconds < 0 ? 0 : seconds;
+        const date = (_a = this.modelValue) !== null && _a !== void 0 ? _a : this.today;
+        const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getSeconds(), seconds);
+        this.$emit('update:modelValue', newDate);
+      }
+    },
     localId() {
       var _a, _b;
       return (_a = this.id) !== null && _a !== void 0 ? _a : `date-time-picker-${(_b = getCurrentInstance()) === null || _b === void 0 ? void 0 : _b.uid}`;
@@ -260,6 +279,10 @@ var script = defineComponent({
       if (!this.modelValue) return '';
       const hours = padStart('' + this.modelValue.getHours(), 2, '0');
       const minutes = padStart('' + this.modelValue.getMinutes(), 2, '0');
+      if (this.isShowSeconds) {
+        const seconds = padStart('' + this.modelValue.getSeconds(), 2, '0');
+        return `${hours}:${minutes}:${seconds}`;
+      }
       return `${hours}:${minutes}`;
     },
     isInactive() {
@@ -280,6 +303,9 @@ var script = defineComponent({
     isShowTime() {
       return this.type === OrDateTimePickerTypes.time || this.type === OrDateTimePickerTypes.dateTime;
     },
+    isShowSeconds() {
+      return this.isShowTime && this.allowSeconds;
+    },
     today() {
       const now = new Date();
       return new Date(now.getFullYear(), now.getMonth(), now.getDate());
@@ -471,65 +497,71 @@ const _hoisted_4 = {
   key: 1
 };
 const _hoisted_5 = {
+  key: 0
+};
+const _hoisted_6 = {
   key: 1,
   class: "value"
 };
-const _hoisted_6 = {
+const _hoisted_7 = {
   key: 0
 };
-const _hoisted_7 = {
+const _hoisted_8 = {
   key: 1
 };
-const _hoisted_8 = {
+const _hoisted_9 = {
   class: "or-date-time-picker-info"
 };
-const _hoisted_9 = {
+const _hoisted_10 = {
   ref: "content",
   class: "content"
 };
-const _hoisted_10 = {
+const _hoisted_11 = {
   class: "picker-header"
 };
-const _hoisted_11 = {
+const _hoisted_12 = {
   class: "calendar"
 };
-const _hoisted_12 = {
+const _hoisted_13 = {
   class: "calendar-week-days"
 };
-const _hoisted_13 = {
+const _hoisted_14 = {
   class: "calendar-days"
 };
-const _hoisted_14 = {
+const _hoisted_15 = {
   key: 0,
   class: "time-footer"
 };
-const _hoisted_15 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createElementVNode("span", null, ":", -1 /* HOISTED */));
-const _hoisted_16 = {
+const _hoisted_16 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createElementVNode("span", null, ":", -1 /* HOISTED */));
+const _hoisted_17 = {
+  key: 0
+};
+const _hoisted_18 = {
   key: 1,
   class: "time-table"
 };
-const _hoisted_17 = {
+const _hoisted_19 = {
   class: "time-table-column"
 };
-const _hoisted_18 = {
+const _hoisted_20 = {
   class: "picker-header"
 };
-const _hoisted_19 = {
+const _hoisted_21 = {
   class: "picker-header-centered"
 };
-const _hoisted_20 = {
+const _hoisted_22 = {
   class: "time-table-column-time"
 };
-const _hoisted_21 = {
+const _hoisted_23 = {
   class: "time-table-column"
 };
-const _hoisted_22 = {
+const _hoisted_24 = {
   class: "picker-header"
 };
-const _hoisted_23 = {
+const _hoisted_25 = {
   class: "picker-header-centered"
 };
-const _hoisted_24 = {
+const _hoisted_26 = {
   class: "time-table-column-time"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -563,10 +595,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     value: _ctx.modelValue,
     disabled: _ctx.isDisabled,
     readonly: _ctx.isReadonly
-  }, null, 8 /* PROPS */, _hoisted_1), !_ctx.modelValue ? (openBlock(), createElementBlock("div", _hoisted_2, [_ctx.isShowDate ? (openBlock(), createElementBlock("div", _hoisted_3, " YYYY-MM-DD ")) : createCommentVNode("v-if", true), _ctx.isShowTime ? (openBlock(), createElementBlock("div", _hoisted_4, " HH:MM ")) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock("div", _hoisted_5, [_ctx.isShowDate ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(_ctx.dateValue), 1 /* TEXT */)) : createCommentVNode("v-if", true), _ctx.isShowTime ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(_ctx.timeValue), 1 /* TEXT */)) : createCommentVNode("v-if", true)]))], 2 /* CLASS */), createVNode(_component_or_collapse, {
+  }, null, 8 /* PROPS */, _hoisted_1), !_ctx.modelValue ? (openBlock(), createElementBlock("div", _hoisted_2, [_ctx.isShowDate ? (openBlock(), createElementBlock("div", _hoisted_3, " YYYY-MM-DD ")) : createCommentVNode("v-if", true), _ctx.isShowTime ? (openBlock(), createElementBlock("div", _hoisted_4, [createTextVNode(" HH:MM "), _ctx.isShowSeconds ? (openBlock(), createElementBlock("span", _hoisted_5, ":SS")) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock("div", _hoisted_6, [_ctx.isShowDate ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(_ctx.dateValue), 1 /* TEXT */)) : createCommentVNode("v-if", true), _ctx.isShowTime ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(_ctx.timeValue), 1 /* TEXT */)) : createCommentVNode("v-if", true)]))], 2 /* CLASS */), createVNode(_component_or_collapse, {
     "is-visible": _ctx.isShowInfo
   }, {
-    default: withCtx(() => [createElementVNode("div", _hoisted_8, [createVNode(Transition, {
+    default: withCtx(() => [createElementVNode("div", _hoisted_9, [createVNode(Transition, {
       mode: "out-in",
       onBeforeEnter: _ctx.beforeEnter,
       onEnter: _ctx.enter,
@@ -604,9 +636,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "is-using-flip": "",
     "is-using-shift": ""
   }, {
-    default: withCtx(() => [createElementVNode("div", _hoisted_9, [_ctx.isShowDate ? (openBlock(), createElementBlock(Fragment, {
+    default: withCtx(() => [createElementVNode("div", _hoisted_10, [_ctx.isShowDate ? (openBlock(), createElementBlock(Fragment, {
       key: 0
-    }, [createElementVNode("div", _hoisted_10, [createVNode(_component_or_icon_button, {
+    }, [createElementVNode("div", _hoisted_11, [createVNode(_component_or_icon_button, {
       icon: "keyboard_arrow_left",
       "icon-color": "neutral-6",
       onClick: _ctx.decrementMonth
@@ -614,11 +646,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       icon: "keyboard_arrow_right",
       "icon-color": "neutral-6",
       onClick: _ctx.incrementMonth
-    }, null, 8 /* PROPS */, ["onClick"])]), createElementVNode("div", _hoisted_11, [createElementVNode("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.translations.days, day => {
+    }, null, 8 /* PROPS */, ["onClick"])]), createElementVNode("div", _hoisted_12, [createElementVNode("div", _hoisted_13, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.translations.days, day => {
       return openBlock(), createElementBlock("div", {
         key: day
       }, toDisplayString(day), 1 /* TEXT */);
-    }), 128 /* KEYED_FRAGMENT */))]), createElementVNode("div", _hoisted_13, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.calendar, (row, index) => {
+    }), 128 /* KEYED_FRAGMENT */))]), createElementVNode("div", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.calendar, (row, index) => {
       return openBlock(), createElementBlock("div", {
         key: index,
         class: "calendar-days-row"
@@ -633,17 +665,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onSelect: _ctx.handleDaySelect
         }, null, 8 /* PROPS */, ["value", "is-current", "is-disabled", "is-selected", "onSelect"]);
       }), 128 /* KEYED_FRAGMENT */))]);
-    }), 128 /* KEYED_FRAGMENT */))])]), _ctx.isShowTime ? (openBlock(), createElementBlock("div", _hoisted_14, [withDirectives(createElementVNode("input", {
+    }), 128 /* KEYED_FRAGMENT */))])]), _ctx.isShowTime ? (openBlock(), createElementBlock("div", _hoisted_15, [withDirectives(createElementVNode("input", {
       "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.inputHours = $event),
       type: "number",
       class: "time-footer-input",
       placeholder: "00"
-    }, null, 512 /* NEED_PATCH */), [[vModelText, _ctx.inputHours]]), _hoisted_15, withDirectives(createElementVNode("input", {
+    }, null, 512 /* NEED_PATCH */), [[vModelText, _ctx.inputHours]]), _hoisted_16, withDirectives(createElementVNode("input", {
       "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.inputMinutes = $event),
       type: "number",
       class: "time-footer-input",
       placeholder: "00"
-    }, null, 512 /* NEED_PATCH */), [[vModelText, _ctx.inputMinutes]])])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_16, [createElementVNode("div", _hoisted_17, [createElementVNode("div", _hoisted_18, [createElementVNode("span", _hoisted_19, toDisplayString(_ctx.translations.hours), 1 /* TEXT */)]), createElementVNode("div", _hoisted_20, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hours, (row, index) => {
+    }, null, 512 /* NEED_PATCH */), [[vModelText, _ctx.inputMinutes]]), _ctx.isShowSeconds ? (openBlock(), createElementBlock("span", _hoisted_17, ":")) : createCommentVNode("v-if", true), _ctx.isShowSeconds ? withDirectives((openBlock(), createElementBlock("input", {
+      key: 1,
+      "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.inputSeconds = $event),
+      type: "number",
+      class: "time-footer-input",
+      placeholder: "00"
+    }, null, 512 /* NEED_PATCH */)), [[vModelText, _ctx.inputSeconds]]) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("div", _hoisted_18, [createElementVNode("div", _hoisted_19, [createElementVNode("div", _hoisted_20, [createElementVNode("span", _hoisted_21, toDisplayString(_ctx.translations.hours), 1 /* TEXT */)]), createElementVNode("div", _hoisted_22, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.hours, (row, index) => {
       return openBlock(), createElementBlock("div", {
         key: index,
         class: "time-table-column-time-row"
@@ -656,7 +694,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onSelect: _ctx.handleHourSelect
         }, null, 8 /* PROPS */, ["value", "is-selected", "onSelect"]);
       }), 128 /* KEYED_FRAGMENT */))]);
-    }), 128 /* KEYED_FRAGMENT */))])]), createElementVNode("div", _hoisted_21, [createElementVNode("div", _hoisted_22, [createElementVNode("span", _hoisted_23, toDisplayString(_ctx.translations.minutes), 1 /* TEXT */)]), createElementVNode("div", _hoisted_24, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.minutes, (row, index) => {
+    }), 128 /* KEYED_FRAGMENT */))])]), createElementVNode("div", _hoisted_23, [createElementVNode("div", _hoisted_24, [createElementVNode("span", _hoisted_25, toDisplayString(_ctx.translations.minutes), 1 /* TEXT */)]), createElementVNode("div", _hoisted_26, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.minutes, (row, index) => {
       return openBlock(), createElementBlock("div", {
         key: index,
         class: "time-table-column-time-row"

package/dist/esm/v3/components/index.js

@@ -38,7 +38,7 @@ export { s as OrDateFormatV3 } from '../OrDateFormat-6664bd05.js';
 export { s as OrDatePickerV3 } from '../OrDatePicker-03b00df9.js';
 export { s as OrDateRangePickerV3 } from '../OrDateRangePicker-52553adf.js';
 export { s as OrDateTimeFormatV3 } from '../OrDateTimeFormat-137ef652.js';
-export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-ef13afca.js';
+export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-9f520831.js';
 export { s as OrDateTimePickerV3 } from '../OrDateTimePicker-a5c05ec9.js';
 export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from '../OrDateTimePickerTimeSelect-09c588d7.js';
 export { D as DateTimePickerTimeFormat, D as TimePickerFormat, D as TimeRangePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from '../getTimePlaceholder-fd41baed.js';

package/dist/esm/v3/components/or-date-time-picker/OrDateTimePicker.vue.d.ts

@@ -92,6 +92,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         required: false;
         default: null;
     };
+    allowSeconds: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
 }, {
     content: import("vue-demi").Ref<HTMLElement | undefined>;
     wrapperRef: import("vue-demi").Ref<HTMLElement | undefined>;
@@ -110,6 +115,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         get: () => string;
         set: (val: string) => void;
     };
+    inputSeconds: {
+        get: () => string;
+        set: (val: string) => void;
+    };
     localId(): string;
     dateValue(): string;
     timeValue(): string;
@@ -119,6 +128,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     isShowInfo(): boolean;
     isShowDate(): boolean;
     isShowTime(): boolean;
+    isShowSeconds(): boolean;
     today(): Date;
     firstDayOfMonth(): Date;
     lastDayOfMonth(): Date;
@@ -237,6 +247,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         required: false;
         default: null;
     };
+    allowSeconds: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -266,5 +281,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     isInvalid: boolean;
     isFullwidth: boolean;
     dateFilter: any;
+    allowSeconds: boolean;
 }>;
 export default _default;

package/dist/esm/v3/components/or-date-time-picker/index.js

@@ -1,4 +1,4 @@
-export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../../OrDateTimePicker-ef13afca.js';
+export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../../OrDateTimePicker-9f520831.js';
 import 'lodash/padStart';
 import 'vue-demi';
 import '@vueuse/core';

package/dist/esm/v3/index.js

@@ -38,7 +38,7 @@ export { s as OrDateFormatV3 } from './OrDateFormat-6664bd05.js';
 export { s as OrDatePickerV3 } from './OrDatePicker-03b00df9.js';
 export { s as OrDateRangePickerV3 } from './OrDateRangePicker-52553adf.js';
 export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-137ef652.js';
-export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-ef13afca.js';
+export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-9f520831.js';
 export { s as OrDateTimePickerV3 } from './OrDateTimePicker-a5c05ec9.js';
 export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-09c588d7.js';
 export { D as DateTimePickerTimeFormat, D as TimePickerFormat, D as TimeRangePickerFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-fd41baed.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.15.2",
+  "version": "8.16.0-beta.3813.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -176,6 +176,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "376c56f8167e0986c2ddb9468fbde484e4daf763"
+  }
 }

package/src/components/or-date-time-picker/OrDateTimePicker.vue

@@ -40,6 +40,7 @@
         </div>
         <div v-if="isShowTime">
           HH:MM
+          <span v-if="isShowSeconds">:SS</span>
         </div>
       </div>
       <div
@@ -163,6 +164,14 @@
               class="time-footer-input"
               placeholder="00"
             >
+            <span v-if="isShowSeconds">:</span>
+            <input
+              v-if="isShowSeconds"
+              v-model="inputSeconds"
+              type="number"
+              class="time-footer-input"
+              placeholder="00"
+            >
           </div>
         </template>
         <template v-else>
@@ -320,6 +329,11 @@ export default defineComponent({
       required: false,
       default: null,
     },
+    allowSeconds: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   emits: ['update:modelValue'],
   setup() {
@@ -385,6 +399,26 @@ export default defineComponent({
         this.$emit('update:modelValue', newDate);
       },
     },
+    inputSeconds: {
+      get: function (): string {
+        if (!this.modelValue) return '';
+        return padStart('' + this.modelValue.getSeconds(), 2, '0');
+      },
+      set: function (val: string): void {
+        let seconds = +val;
+        seconds = seconds >= 60 ? 59 : seconds < 0 ? 0 : seconds;
+        const date = this.modelValue ?? this.today;
+        const newDate = new Date(
+          date.getFullYear(),
+          date.getMonth(),
+          date.getDate(),
+          date.getHours(),
+          date.getSeconds(),
+          seconds,
+        );
+        this.$emit('update:modelValue', newDate);
+      },
+    },
     localId(): string {
       return this.id ?? `date-time-picker-${getCurrentInstance()?.uid}`;
     },
@@ -399,6 +433,10 @@ export default defineComponent({
       if (!this.modelValue) return '';
       const hours = padStart('' + this.modelValue.getHours(), 2, '0');
       const minutes = padStart('' + this.modelValue.getMinutes(), 2, '0');
+      if (this.isShowSeconds) {
+        const seconds = padStart('' + this.modelValue.getSeconds(), 2, '0');
+        return `${hours}:${minutes}:${seconds}`;
+      }
       return `${hours}:${minutes}`;
     },
     isInactive(): boolean {
@@ -419,6 +457,9 @@ export default defineComponent({
     isShowTime(): boolean {
       return this.type === OrDateTimePickerTypes.time || this.type === OrDateTimePickerTypes.dateTime;
     },
+    isShowSeconds(): boolean {
+      return this.isShowTime && this.allowSeconds;
+    },
     today(): Date {
       const now = new Date();
       return new Date(now.getFullYear(), now.getMonth(), now.getDate());