@onereach/ui-components 2.74.9-beta.2343.0 → 2.74.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundled/v2/{OrDateTimePicker-24a56fd2.js → OrDateTimePicker-18587a06.js} +4 -2
- package/dist/bundled/v2/{OrModal-058e9736.js → OrModal-4218b040.js} +4 -4
- package/dist/bundled/v2/components/index.js +2 -2
- package/dist/bundled/v2/components/or-date-time-picker/index.js +1 -1
- package/dist/bundled/v2/components/or-modal-v3/index.js +1 -1
- package/dist/bundled/v2/index.js +3 -3
- package/dist/bundled/v3/{OrModal.vue_vue_type_script_lang-5c9cf787.js → OrModal.vue_vue_type_script_lang-8d7f1436.js} +4 -4
- package/dist/bundled/v3/components/index.js +1 -1
- package/dist/bundled/v3/components/or-modal-v3/index.js +1 -1
- package/dist/bundled/v3/index.js +6 -4
- package/dist/esm/v2/{OrDateTimePicker-e1ea0a9a.js → OrDateTimePicker-d8cb0e8d.js} +4 -2
- package/dist/esm/v2/{OrModal-f24fc082.js → OrModal-a938e31b.js} +4 -4
- package/dist/esm/v2/components/index.js +2 -2
- package/dist/esm/v2/components/or-date-time-picker/index.js +1 -1
- package/dist/esm/v2/components/or-modal-v3/index.js +1 -1
- package/dist/esm/v2/index.js +2 -2
- package/dist/esm/v3/{OrDateTimePicker-63f22d1b.js → OrDateTimePicker-c4af17e3.js} +3 -1
- package/dist/esm/v3/{OrModal-3cb259b1.js → OrModal-07c092ab.js} +4 -4
- package/dist/esm/v3/components/index.js +2 -2
- package/dist/esm/v3/components/or-date-time-picker/index.js +1 -1
- package/dist/esm/v3/components/or-modal-v3/index.js +1 -1
- package/dist/esm/v3/index.js +2 -2
- package/package.json +3 -2
- package/src/components/or-date-time-picker/OrDateTimePicker.vue +11 -0
- package/src/components/or-modal-v3/OrModal.stories3.ts +0 -19
- package/src/components/or-modal-v3/styles.ts +4 -1
|
@@ -484,7 +484,7 @@ var script = defineComponent({
|
|
|
484
484
|
}
|
|
485
485
|
});
|
|
486
486
|
|
|
487
|
-
var css_248z = "@keyframes spinAround-data-v-
|
|
487
|
+
var css_248z = "@keyframes spinAround-data-v-d9091eea{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-d9091eea{from{opacity:1}to{opacity:0}}.or-date-time-picker[data-v-d9091eea]{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.or-date-time-picker.is-fullwidth[data-v-d9091eea]{width:100%!important}.or-date-time-picker.is-date-type[data-v-d9091eea]{width:7.125rem}.or-date-time-picker.is-time-type[data-v-d9091eea]{width:7.125rem}.or-date-time-picker.is-date-time-type[data-v-d9091eea]{width:11.25rem}.or-date-time-picker .or-label[data-v-d9091eea]{margin-bottom:var(--s-1)}.or-date-time-picker-info[data-v-d9091eea]{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--s-2)}.or-date-time-picker-input-wrapper[data-v-d9091eea]{position:relative;width:100%;height:2.25rem;border:1px solid var(--c-neutral-2);border-radius:var(--s-2);background-color:var(--c-neutral-1);padding:.625rem;font-size:var(--fs-1);line-height:1rem;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:border-color,background-color,-webkit-box-shadow}.or-date-time-picker-input-wrapper[data-v-d9091eea]:not(.is-readonly):hover{background-color:var(--c-neutral-0);cursor:pointer}.or-date-time-picker-input-wrapper.is-disabled[data-v-d9091eea],.or-date-time-picker-input-wrapper[data-v-d9091eea]:disabled{cursor:not-allowed;background-color:var(--c-neutral-2);border-color:var(--c-neutral-2)}.or-date-time-picker-input-wrapper.has-error[data-v-d9091eea]{border-color:var(--c-error)}@media (hover:hover) and (pointer:fine){.or-date-time-picker-input-wrapper.has-error[data-v-d9091eea]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover{border-color:var(--c-error-darken-3)}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.or-date-time-picker-input-wrapper.has-error[data-v-d9091eea]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover{border-color:var(--c-error-darken-3)}}.or-date-time-picker-input-wrapper.has-error[data-v-d9091eea]:not(:disabled):not(.is-readonly):not(.is-loading):focus{border-color:var(--c-error-darken-5)}.or-date-time-picker-input-wrapper.has-error.is-disabled[data-v-d9091eea],.or-date-time-picker-input-wrapper.has-error[data-v-d9091eea]:disabled{cursor:not-allowed;border-color:var(--c-error-lighten-20)}.or-date-time-picker-input-wrapper .placeholder[data-v-d9091eea],.or-date-time-picker-input-wrapper .value[data-v-d9091eea]{width:100%;display:flex;flex-direction:row;justify-content:space-between;white-space:nowrap;transition-timing-function:var(--t-func);transition-duration:var(--t-duration);transition-property:opacity}.or-date-time-picker-input-wrapper .placeholder[data-v-d9091eea]{color:var(--c-neutral-4);user-select:none}.content[data-v-d9091eea]{border:1px solid var(--c-neutral-2);border-radius:var(--s-2);display:flex;flex-direction:column;background-color:var(--c-neutral-0);text-align:center}.content .picker-header[data-v-d9091eea]{padding:var(--s-4) var(--s-3);display:flex;flex-direction:row;justify-content:space-between;gap:var(--s-3);font-weight:700;font-size:var(--fs-1);text-align:center;color:var(--c-neutral-6)}.content .picker-header-centered[data-v-d9091eea]{margin:auto}.content .calendar[data-v-d9091eea]{padding:0 var(--s-3) var(--s-3);font-size:var(--fs-0);line-height:.875rem}.content .calendar-week-days[data-v-d9091eea]{color:var(--c-neutral-4);display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--s-1)}.content .calendar-week-days>*[data-v-d9091eea]{width:var(--s-6)}.content .calendar-days[data-v-d9091eea]{display:flex;flex-direction:column;gap:var(--s-2)}.content .calendar-days-row[data-v-d9091eea]{display:flex;flex-direction:row;justify-content:space-around;gap:var(--s-2)}.content .time-footer[data-v-d9091eea]{width:100%;line-height:var(--s-6);text-align:center;display:inline-flex;flex-direction:row;justify-content:space-between;border-top:1px solid var(--c-neutral-2)}.content .time-footer input[data-v-d9091eea]::-webkit-inner-spin-button,.content .time-footer input[data-v-d9091eea]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.content .time-footer input[type=number][data-v-d9091eea]{-moz-appearance:textfield}.content .time-footer-input[data-v-d9091eea]{text-align:center;border:none;font-size:var(--fs-0)}.content .time-footer-input[data-v-d9091eea]:focus-visible{outline:0;background-color:var(--c-neutral-2)}.content .time-table[data-v-d9091eea]{display:flex;flex-direction:row;gap:var(--s-4)}.content .time-table-column[data-v-d9091eea]{display:flex;flex-direction:column}.content .time-table-column-time[data-v-d9091eea]{padding:0 var(--s-3) var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}.content .time-table-column-time-row[data-v-d9091eea]{display:flex;flex-direction:row;justify-content:space-around;gap:var(--s-2)}";
|
|
488
488
|
styleInject(css_248z);
|
|
489
489
|
|
|
490
490
|
/* script */
|
|
@@ -650,6 +650,7 @@ var __vue_render__ = function () {
|
|
|
650
650
|
}],
|
|
651
651
|
staticClass: "time-footer-input",
|
|
652
652
|
attrs: {
|
|
653
|
+
"type": "number",
|
|
653
654
|
"placeholder": "00"
|
|
654
655
|
},
|
|
655
656
|
domProps: {
|
|
@@ -672,6 +673,7 @@ var __vue_render__ = function () {
|
|
|
672
673
|
}],
|
|
673
674
|
staticClass: "time-footer-input",
|
|
674
675
|
attrs: {
|
|
676
|
+
"type": "number",
|
|
675
677
|
"placeholder": "00"
|
|
676
678
|
},
|
|
677
679
|
domProps: {
|
|
@@ -744,7 +746,7 @@ var __vue_staticRenderFns__ = [];
|
|
|
744
746
|
/* style */
|
|
745
747
|
const __vue_inject_styles__ = undefined;
|
|
746
748
|
/* scoped */
|
|
747
|
-
const __vue_scope_id__ = "data-v-
|
|
749
|
+
const __vue_scope_id__ = "data-v-d9091eea";
|
|
748
750
|
/* module identifier */
|
|
749
751
|
const __vue_module_identifier__ = undefined;
|
|
750
752
|
/* functional template */
|
|
@@ -14,7 +14,7 @@ const ModalRoot = [
|
|
|
14
14
|
// Layout
|
|
15
15
|
'layout-column',
|
|
16
16
|
// Box
|
|
17
|
-
'w-full', 'h-full
|
|
17
|
+
'w-full', 'h-full',
|
|
18
18
|
// Shape
|
|
19
19
|
'md:rounded-md',
|
|
20
20
|
// Spacing
|
|
@@ -28,13 +28,13 @@ const ModalRoot = [
|
|
|
28
28
|
const ModalRootSizes = {
|
|
29
29
|
'l': [
|
|
30
30
|
// Box
|
|
31
|
-
'md:w-[1050px]'],
|
|
31
|
+
'md:w-[1050px]', 'md:h-auto'],
|
|
32
32
|
'm': [
|
|
33
33
|
// Box
|
|
34
|
-
'md:w-[700px]'],
|
|
34
|
+
'md:w-[700px]', 'md:h-auto'],
|
|
35
35
|
's': [
|
|
36
36
|
// Box
|
|
37
|
-
'md:w-[480px]']
|
|
37
|
+
'md:w-[480px]', 'md:h-auto']
|
|
38
38
|
};
|
|
39
39
|
const ModalHeader = [
|
|
40
40
|
// Layouot
|
|
@@ -20,7 +20,7 @@ export { _ as OrCollapse } from '../OrCollapse-b6ab5b38.js';
|
|
|
20
20
|
export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-6d3066b0.js';
|
|
21
21
|
export { _ as OrConfirm } from '../OrConfirm-b6ef7bdf.js';
|
|
22
22
|
export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-15e27711.js';
|
|
23
|
-
export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-
|
|
23
|
+
export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-d8cb0e8d.js';
|
|
24
24
|
export { _ as OrError } from '../OrError-efc74907.js';
|
|
25
25
|
export { _ as OrErrorTagV3 } from '../OrErrorTag-7cd5dc68.js';
|
|
26
26
|
export { _ as OrErrorV3 } from '../OrError-13845bb0.js';
|
|
@@ -51,7 +51,7 @@ export { _ as OrMenuItemV3 } from '../OrMenuItem-4f810513.js';
|
|
|
51
51
|
export { _ as OrMenuV3 } from '../OrMenu-1adef5df.js';
|
|
52
52
|
export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-b3746279.js';
|
|
53
53
|
export { _ as OrModal, O as OrModalSizes } from '../OrModal-00808e43.js';
|
|
54
|
-
export { M as ModalSize, _ as OrModalV3 } from '../OrModal-
|
|
54
|
+
export { M as ModalSize, _ as OrModalV3 } from '../OrModal-a938e31b.js';
|
|
55
55
|
export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from '../OrNotification-453fff8c.js';
|
|
56
56
|
export { N as NotificationVariant, _ as OrNotificationV3 } from '../OrNotification-e8c1df46.js';
|
|
57
57
|
export { _ as OrNumberInput } from '../OrNumberInput-a864b102.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../../OrDateTimePicker-
|
|
1
|
+
export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../../OrDateTimePicker-d8cb0e8d.js';
|
|
2
2
|
import 'lodash';
|
|
3
3
|
import 'vue-demi';
|
|
4
4
|
import '@vueuse/core';
|
package/dist/esm/v2/index.js
CHANGED
|
@@ -20,7 +20,7 @@ export { _ as OrCollapse } from './OrCollapse-b6ab5b38.js';
|
|
|
20
20
|
export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-6d3066b0.js';
|
|
21
21
|
export { _ as OrConfirm } from './OrConfirm-b6ef7bdf.js';
|
|
22
22
|
export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-15e27711.js';
|
|
23
|
-
export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-
|
|
23
|
+
export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-d8cb0e8d.js';
|
|
24
24
|
export { _ as OrError } from './OrError-efc74907.js';
|
|
25
25
|
export { _ as OrErrorTagV3 } from './OrErrorTag-7cd5dc68.js';
|
|
26
26
|
export { _ as OrErrorV3 } from './OrError-13845bb0.js';
|
|
@@ -51,7 +51,7 @@ export { _ as OrMenuItemV3 } from './OrMenuItem-4f810513.js';
|
|
|
51
51
|
export { _ as OrMenuV3 } from './OrMenu-1adef5df.js';
|
|
52
52
|
export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-b3746279.js';
|
|
53
53
|
export { _ as OrModal, O as OrModalSizes } from './OrModal-00808e43.js';
|
|
54
|
-
export { M as ModalSize, _ as OrModalV3 } from './OrModal-
|
|
54
|
+
export { M as ModalSize, _ as OrModalV3 } from './OrModal-a938e31b.js';
|
|
55
55
|
export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from './OrNotification-453fff8c.js';
|
|
56
56
|
export { N as NotificationVariant, _ as OrNotificationV3 } from './OrNotification-e8c1df46.js';
|
|
57
57
|
export { _ as OrNumberInput } from './OrNumberInput-a864b102.js';
|
|
@@ -630,10 +630,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
630
630
|
}), 128 /* KEYED_FRAGMENT */))]);
|
|
631
631
|
}), 128 /* KEYED_FRAGMENT */))])]), _ctx.isShowTime ? (openBlock(), createElementBlock("div", _hoisted_14, [withDirectives(createElementVNode("input", {
|
|
632
632
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.inputHours = $event),
|
|
633
|
+
type: "number",
|
|
633
634
|
class: "time-footer-input",
|
|
634
635
|
placeholder: "00"
|
|
635
636
|
}, null, 512 /* NEED_PATCH */), [[vModelText, _ctx.inputHours]]), _hoisted_15, withDirectives(createElementVNode("input", {
|
|
636
637
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.inputMinutes = $event),
|
|
638
|
+
type: "number",
|
|
637
639
|
class: "time-footer-input",
|
|
638
640
|
placeholder: "00"
|
|
639
641
|
}, 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) => {
|
|
@@ -668,7 +670,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
668
670
|
}, 8 /* PROPS */, ["trigger"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
|
|
669
671
|
}
|
|
670
672
|
|
|
671
|
-
var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-733cf0b2 {\nfrom {\n transform: rotate(0);\n}\nto {\n transform: rotate(359deg);\n}\n}\n@keyframes fade-733cf0b2 {\nfrom {\n opacity: 1;\n}\nto {\n opacity: 0;\n}\n}\n.or-date-time-picker[data-v-733cf0b2] {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n}\n.or-date-time-picker.is-fullwidth[data-v-733cf0b2] {\n width: 100% !important;\n}\n.or-date-time-picker.is-date-type[data-v-733cf0b2] {\n width: 7.125rem;\n}\n.or-date-time-picker.is-time-type[data-v-733cf0b2] {\n width: 7.125rem;\n}\n.or-date-time-picker.is-date-time-type[data-v-733cf0b2] {\n width: 11.25rem;\n}\n.or-date-time-picker .or-label[data-v-733cf0b2] {\n margin-bottom: var(--s-1);\n}\n.or-date-time-picker-info[data-v-733cf0b2] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding-top: var(--s-2);\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2] {\n position: relative;\n width: 100%;\n height: 2.25rem;\n border: 1px solid var(--c-neutral-2);\n border-radius: var(--s-2);\n background-color: var(--c-neutral-1);\n padding: 0.625rem;\n font-size: var(--fs-1);\n line-height: 1rem;\n transition-timing-function: var(--t-func);\n transition-duration: var(--t-duration);\n transition-property: border-color, background-color, -webkit-box-shadow;\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2]:not(.is-readonly):hover {\n background-color: var(--c-neutral-0);\n cursor: pointer;\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2]:disabled, .or-date-time-picker-input-wrapper.is-disabled[data-v-733cf0b2] {\n cursor: not-allowed;\n background-color: var(--c-neutral-2);\n border-color: var(--c-neutral-2);\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2] {\n border-color: var(--c-error);\n}\n@media (hover: hover) and (pointer: fine) {\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover {\n border-color: var(--c-error-darken-3);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover {\n border-color: var(--c-error-darken-3);\n}\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(:disabled):not(.is-readonly):not(.is-loading):focus {\n border-color: var(--c-error-darken-5);\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:disabled, .or-date-time-picker-input-wrapper.has-error.is-disabled[data-v-733cf0b2] {\n cursor: not-allowed;\n border-color: var(--c-error-lighten-20);\n}\n.or-date-time-picker-input-wrapper .placeholder[data-v-733cf0b2],\n.or-date-time-picker-input-wrapper .value[data-v-733cf0b2] {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n white-space: nowrap;\n transition-timing-function: var(--t-func);\n transition-duration: var(--t-duration);\n transition-property: opacity;\n}\n.or-date-time-picker-input-wrapper .placeholder[data-v-733cf0b2] {\n color: var(--c-neutral-4);\n user-select: none;\n}\n.content[data-v-733cf0b2] {\n border: 1px solid var(--c-neutral-2);\n border-radius: var(--s-2);\n display: flex;\n flex-direction: column;\n background-color: var(--c-neutral-0);\n text-align: center;\n}\n.content .picker-header[data-v-733cf0b2] {\n padding: var(--s-4) var(--s-3);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: var(--s-3);\n font-weight: bold;\n font-size: var(--fs-1);\n text-align: center;\n color: var(--c-neutral-6);\n}\n.content .picker-header-centered[data-v-733cf0b2] {\n margin: auto;\n}\n.content .calendar[data-v-733cf0b2] {\n padding: 0 var(--s-3) var(--s-3);\n font-size: var(--fs-0);\n line-height: 0.875rem;\n}\n.content .calendar-week-days[data-v-733cf0b2] {\n color: var(--c-neutral-4);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: var(--s-1);\n}\n.content .calendar-week-days > *[data-v-733cf0b2] {\n width: var(--s-6);\n}\n.content .calendar-days[data-v-733cf0b2] {\n display: flex;\n flex-direction: column;\n gap: var(--s-2);\n}\n.content .calendar-days-row[data-v-733cf0b2] {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n gap: var(--s-2);\n}\n.content .time-footer[data-v-733cf0b2] {\n width: 100%;\n line-height: var(--s-6);\n text-align: center;\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n border-top: 1px solid var(--c-neutral-2);\n}\n.content .time-footer-input[data-v-733cf0b2] {\n text-align: center;\n border: none;\n font-size: var(--fs-0);\n}\n.content .time-footer-input[data-v-733cf0b2]:focus-visible {\n outline: none;\n background-color: var(--c-neutral-2);\n}\n.content .time-table[data-v-733cf0b2] {\n display: flex;\n flex-direction: row;\n gap: var(--s-4);\n}\n.content .time-table-column[data-v-733cf0b2] {\n display: flex;\n flex-direction: column;\n}\n.content .time-table-column-time[data-v-733cf0b2] {\n padding: 0 var(--s-3) var(--s-3);\n display: flex;\n flex-direction: column;\n gap: var(--s-2);\n}\n.content .time-table-column-time-row[data-v-733cf0b2] {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n gap: var(--s-2);\n}";
|
|
673
|
+
var css_248z = "/**\n * A simple way to manage mobile breakpoints described in https://davidwalsh.name/write-media-queries-sass.\n * Can be further extended using following approach https://rimdev.io/making-media-query-mixins-with-sass/\n */\n@keyframes spinAround-733cf0b2 {\nfrom {\n transform: rotate(0);\n}\nto {\n transform: rotate(359deg);\n}\n}\n@keyframes fade-733cf0b2 {\nfrom {\n opacity: 1;\n}\nto {\n opacity: 0;\n}\n}\n.or-date-time-picker[data-v-733cf0b2] {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n}\n.or-date-time-picker.is-fullwidth[data-v-733cf0b2] {\n width: 100% !important;\n}\n.or-date-time-picker.is-date-type[data-v-733cf0b2] {\n width: 7.125rem;\n}\n.or-date-time-picker.is-time-type[data-v-733cf0b2] {\n width: 7.125rem;\n}\n.or-date-time-picker.is-date-time-type[data-v-733cf0b2] {\n width: 11.25rem;\n}\n.or-date-time-picker .or-label[data-v-733cf0b2] {\n margin-bottom: var(--s-1);\n}\n.or-date-time-picker-info[data-v-733cf0b2] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding-top: var(--s-2);\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2] {\n position: relative;\n width: 100%;\n height: 2.25rem;\n border: 1px solid var(--c-neutral-2);\n border-radius: var(--s-2);\n background-color: var(--c-neutral-1);\n padding: 0.625rem;\n font-size: var(--fs-1);\n line-height: 1rem;\n transition-timing-function: var(--t-func);\n transition-duration: var(--t-duration);\n transition-property: border-color, background-color, -webkit-box-shadow;\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2]:not(.is-readonly):hover {\n background-color: var(--c-neutral-0);\n cursor: pointer;\n}\n.or-date-time-picker-input-wrapper[data-v-733cf0b2]:disabled, .or-date-time-picker-input-wrapper.is-disabled[data-v-733cf0b2] {\n cursor: not-allowed;\n background-color: var(--c-neutral-2);\n border-color: var(--c-neutral-2);\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2] {\n border-color: var(--c-error);\n}\n@media (hover: hover) and (pointer: fine) {\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover {\n border-color: var(--c-error-darken-3);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(.or-date-time-picker-input-wrapper.has-error.is-loading):not(.or-date-time-picker-input-wrapper.has-error.is-disabled):not(.or-date-time-picker-input-wrapper.has-error.is-readonly):not(.or-date-time-picker-input-wrapper.has-error:disabled):not(.or-date-time-picker-input-wrapper.has-error.is-focused):not(.or-date-time-picker-input-wrapper.has-error:active):hover {\n border-color: var(--c-error-darken-3);\n}\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:not(:disabled):not(.is-readonly):not(.is-loading):focus {\n border-color: var(--c-error-darken-5);\n}\n.or-date-time-picker-input-wrapper.has-error[data-v-733cf0b2]:disabled, .or-date-time-picker-input-wrapper.has-error.is-disabled[data-v-733cf0b2] {\n cursor: not-allowed;\n border-color: var(--c-error-lighten-20);\n}\n.or-date-time-picker-input-wrapper .placeholder[data-v-733cf0b2],\n.or-date-time-picker-input-wrapper .value[data-v-733cf0b2] {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n white-space: nowrap;\n transition-timing-function: var(--t-func);\n transition-duration: var(--t-duration);\n transition-property: opacity;\n}\n.or-date-time-picker-input-wrapper .placeholder[data-v-733cf0b2] {\n color: var(--c-neutral-4);\n user-select: none;\n}\n.content[data-v-733cf0b2] {\n border: 1px solid var(--c-neutral-2);\n border-radius: var(--s-2);\n display: flex;\n flex-direction: column;\n background-color: var(--c-neutral-0);\n text-align: center;\n}\n.content .picker-header[data-v-733cf0b2] {\n padding: var(--s-4) var(--s-3);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: var(--s-3);\n font-weight: bold;\n font-size: var(--fs-1);\n text-align: center;\n color: var(--c-neutral-6);\n}\n.content .picker-header-centered[data-v-733cf0b2] {\n margin: auto;\n}\n.content .calendar[data-v-733cf0b2] {\n padding: 0 var(--s-3) var(--s-3);\n font-size: var(--fs-0);\n line-height: 0.875rem;\n}\n.content .calendar-week-days[data-v-733cf0b2] {\n color: var(--c-neutral-4);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-bottom: var(--s-1);\n}\n.content .calendar-week-days > *[data-v-733cf0b2] {\n width: var(--s-6);\n}\n.content .calendar-days[data-v-733cf0b2] {\n display: flex;\n flex-direction: column;\n gap: var(--s-2);\n}\n.content .calendar-days-row[data-v-733cf0b2] {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n gap: var(--s-2);\n}\n.content .time-footer[data-v-733cf0b2] {\n width: 100%;\n line-height: var(--s-6);\n text-align: center;\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n border-top: 1px solid var(--c-neutral-2);\n}\n.content .time-footer input[data-v-733cf0b2]::-webkit-outer-spin-button,\n.content .time-footer input[data-v-733cf0b2]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.content .time-footer input[type=number][data-v-733cf0b2] {\n -moz-appearance: textfield;\n}\n.content .time-footer-input[data-v-733cf0b2] {\n text-align: center;\n border: none;\n font-size: var(--fs-0);\n}\n.content .time-footer-input[data-v-733cf0b2]:focus-visible {\n outline: none;\n background-color: var(--c-neutral-2);\n}\n.content .time-table[data-v-733cf0b2] {\n display: flex;\n flex-direction: row;\n gap: var(--s-4);\n}\n.content .time-table-column[data-v-733cf0b2] {\n display: flex;\n flex-direction: column;\n}\n.content .time-table-column-time[data-v-733cf0b2] {\n padding: 0 var(--s-3) var(--s-3);\n display: flex;\n flex-direction: column;\n gap: var(--s-2);\n}\n.content .time-table-column-time-row[data-v-733cf0b2] {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n gap: var(--s-2);\n}";
|
|
672
674
|
styleInject(css_248z);
|
|
673
675
|
|
|
674
676
|
script.render = render;
|
|
@@ -14,7 +14,7 @@ const ModalRoot = [
|
|
|
14
14
|
// Layout
|
|
15
15
|
'layout-column',
|
|
16
16
|
// Box
|
|
17
|
-
'w-full', 'h-full
|
|
17
|
+
'w-full', 'h-full',
|
|
18
18
|
// Shape
|
|
19
19
|
'md:rounded-md',
|
|
20
20
|
// Spacing
|
|
@@ -28,13 +28,13 @@ const ModalRoot = [
|
|
|
28
28
|
const ModalRootSizes = {
|
|
29
29
|
'l': [
|
|
30
30
|
// Box
|
|
31
|
-
'md:w-[1050px]'],
|
|
31
|
+
'md:w-[1050px]', 'md:h-auto'],
|
|
32
32
|
'm': [
|
|
33
33
|
// Box
|
|
34
|
-
'md:w-[700px]'],
|
|
34
|
+
'md:w-[700px]', 'md:h-auto'],
|
|
35
35
|
's': [
|
|
36
36
|
// Box
|
|
37
|
-
'md:w-[480px]']
|
|
37
|
+
'md:w-[480px]', 'md:h-auto']
|
|
38
38
|
};
|
|
39
39
|
const ModalHeader = [
|
|
40
40
|
// Layouot
|
|
@@ -17,7 +17,7 @@ export { s as OrCollapse } from '../OrCollapse-445141ab.js';
|
|
|
17
17
|
export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-53890a6e.js';
|
|
18
18
|
export { s as OrConfirm } from '../OrConfirm-02ae9c60.js';
|
|
19
19
|
export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-dbf267cd.js';
|
|
20
|
-
export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-
|
|
20
|
+
export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-c4af17e3.js';
|
|
21
21
|
export { s as OrError } from '../OrError-f90296db.js';
|
|
22
22
|
export { s as OrErrorTagV3 } from '../OrErrorTag-0025b17c.js';
|
|
23
23
|
export { s as OrErrorV3 } from '../OrError-19198748.js';
|
|
@@ -48,7 +48,7 @@ export { s as OrMenuItemV3 } from '../OrMenuItem-de91aded.js';
|
|
|
48
48
|
export { s as OrMenuV3 } from '../OrMenu-345930d5.js';
|
|
49
49
|
export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-464a5606.js';
|
|
50
50
|
export { s as OrModal, O as OrModalSizes } from '../OrModal-efacdf3f.js';
|
|
51
|
-
export { M as ModalSize, s as OrModalV3 } from '../OrModal-
|
|
51
|
+
export { M as ModalSize, s as OrModalV3 } from '../OrModal-07c092ab.js';
|
|
52
52
|
export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from '../OrNotification-f7d413aa.js';
|
|
53
53
|
export { N as NotificationVariant, s as OrNotificationV3 } from '../OrNotification-e600fd9a.js';
|
|
54
54
|
export { s as OrNumberInput } from '../OrNumberInput-b32b5ce3.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../../OrDateTimePicker-
|
|
1
|
+
export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../../OrDateTimePicker-c4af17e3.js';
|
|
2
2
|
import 'lodash';
|
|
3
3
|
import 'vue-demi';
|
|
4
4
|
import '@vueuse/core';
|
package/dist/esm/v3/index.js
CHANGED
|
@@ -17,7 +17,7 @@ export { s as OrCollapse } from './OrCollapse-445141ab.js';
|
|
|
17
17
|
export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-53890a6e.js';
|
|
18
18
|
export { s as OrConfirm } from './OrConfirm-02ae9c60.js';
|
|
19
19
|
export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-dbf267cd.js';
|
|
20
|
-
export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-
|
|
20
|
+
export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-c4af17e3.js';
|
|
21
21
|
export { s as OrError } from './OrError-f90296db.js';
|
|
22
22
|
export { s as OrErrorTagV3 } from './OrErrorTag-0025b17c.js';
|
|
23
23
|
export { s as OrErrorV3 } from './OrError-19198748.js';
|
|
@@ -48,7 +48,7 @@ export { s as OrMenuItemV3 } from './OrMenuItem-de91aded.js';
|
|
|
48
48
|
export { s as OrMenuV3 } from './OrMenu-345930d5.js';
|
|
49
49
|
export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-464a5606.js';
|
|
50
50
|
export { s as OrModal, O as OrModalSizes } from './OrModal-efacdf3f.js';
|
|
51
|
-
export { M as ModalSize, s as OrModalV3 } from './OrModal-
|
|
51
|
+
export { M as ModalSize, s as OrModalV3 } from './OrModal-07c092ab.js';
|
|
52
52
|
export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-f7d413aa.js';
|
|
53
53
|
export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-e600fd9a.js';
|
|
54
54
|
export { s as OrNumberInput } from './OrNumberInput-b32b5ce3.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onereach/ui-components",
|
|
3
|
-
"version": "2.74.9
|
|
3
|
+
"version": "2.74.9",
|
|
4
4
|
"description": "Vue components library for v2/3",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/auto/index.js",
|
|
@@ -124,5 +124,6 @@
|
|
|
124
124
|
"default": "./dist/bundled/v3/components/*/index.js"
|
|
125
125
|
},
|
|
126
126
|
"./package.json": "./package.json"
|
|
127
|
-
}
|
|
127
|
+
},
|
|
128
|
+
"gitHead": "f50c3f2ddc1951ff48fbcaaa80c456fcd368649e"
|
|
128
129
|
}
|
|
@@ -152,12 +152,14 @@
|
|
|
152
152
|
>
|
|
153
153
|
<input
|
|
154
154
|
v-model="inputHours"
|
|
155
|
+
type="number"
|
|
155
156
|
class="time-footer-input"
|
|
156
157
|
placeholder="00"
|
|
157
158
|
>
|
|
158
159
|
<span>:</span>
|
|
159
160
|
<input
|
|
160
161
|
v-model="inputMinutes"
|
|
162
|
+
type="number"
|
|
161
163
|
class="time-footer-input"
|
|
162
164
|
placeholder="00"
|
|
163
165
|
>
|
|
@@ -809,6 +811,15 @@ export default defineComponent({
|
|
|
809
811
|
justify-content: space-between;
|
|
810
812
|
border-top: 1px solid $c-neutral-2;
|
|
811
813
|
|
|
814
|
+
input::-webkit-outer-spin-button,
|
|
815
|
+
input::-webkit-inner-spin-button {
|
|
816
|
+
-webkit-appearance: none;
|
|
817
|
+
margin: 0;
|
|
818
|
+
}
|
|
819
|
+
input[type='number'] {
|
|
820
|
+
-moz-appearance:textfield;
|
|
821
|
+
}
|
|
822
|
+
|
|
812
823
|
&-input {
|
|
813
824
|
text-align: center;
|
|
814
825
|
border: none;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { action } from '@storybook/addon-actions';
|
|
2
2
|
import { Meta, StoryFn } from '@storybook/vue3';
|
|
3
3
|
import { ref } from 'vue-demi';
|
|
4
|
-
import Faker from 'faker';
|
|
5
4
|
import { OrButtonV3 as OrButton } from '../or-button-v3';
|
|
6
5
|
import OrModalDocs from './OrModal.docs.mdx';
|
|
7
6
|
import OrModal from './OrModal.vue';
|
|
@@ -258,21 +257,3 @@ zIndex.args = {
|
|
|
258
257
|
</div>
|
|
259
258
|
`,
|
|
260
259
|
};
|
|
261
|
-
|
|
262
|
-
export const WithVerticalScroll = Template.bind({});
|
|
263
|
-
|
|
264
|
-
WithVerticalScroll.args = {
|
|
265
|
-
header: 'Upload Files',
|
|
266
|
-
default: `
|
|
267
|
-
<div class="flex items-center justify-center">
|
|
268
|
-
${Faker.lorem.lines(50)}
|
|
269
|
-
</div>
|
|
270
|
-
`,
|
|
271
|
-
|
|
272
|
-
footer: `
|
|
273
|
-
<div class="flex items-center justify-end gap-[16px]">
|
|
274
|
-
<OrButton variant="outlined">Save</OrButton>
|
|
275
|
-
<OrButton>Upload</OrButton>
|
|
276
|
-
</div>
|
|
277
|
-
`,
|
|
278
|
-
};
|
|
@@ -6,7 +6,7 @@ export const ModalRoot: string[] = [
|
|
|
6
6
|
|
|
7
7
|
// Box
|
|
8
8
|
'w-full',
|
|
9
|
-
'h-full
|
|
9
|
+
'h-full',
|
|
10
10
|
|
|
11
11
|
// Shape
|
|
12
12
|
'md:rounded-md',
|
|
@@ -36,16 +36,19 @@ export const ModalRootSizes: Record<ModalSize, string[]> = {
|
|
|
36
36
|
'l': [
|
|
37
37
|
// Box
|
|
38
38
|
'md:w-[1050px]',
|
|
39
|
+
'md:h-auto',
|
|
39
40
|
],
|
|
40
41
|
|
|
41
42
|
'm': [
|
|
42
43
|
// Box
|
|
43
44
|
'md:w-[700px]',
|
|
45
|
+
'md:h-auto',
|
|
44
46
|
],
|
|
45
47
|
|
|
46
48
|
's': [
|
|
47
49
|
// Box
|
|
48
50
|
'md:w-[480px]',
|
|
51
|
+
'md:h-auto',
|
|
49
52
|
],
|
|
50
53
|
};
|
|
51
54
|
|