@onereach/ui-components 2.74.8-beta.2339.0 → 2.74.8
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-18587a06.js → OrDateTimePicker-24a56fd2.js} +2 -4
- package/dist/bundled/v2/{OrText-a665b991.js → OrText-15bf85c4.js} +36 -3
- 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-text-v3/OrText.vue.d.ts +27 -2
- package/dist/bundled/v2/components/or-text-v3/index.js +1 -1
- package/dist/bundled/v2/index.js +3 -3
- package/dist/bundled/v3/OrText.vue_vue_type_script_lang-e93438ea.js +93 -0
- package/dist/bundled/v3/components/index.js +1 -1
- package/dist/bundled/v3/components/or-text-v3/OrText.vue.d.ts +27 -2
- package/dist/bundled/v3/components/or-text-v3/index.js +1 -1
- package/dist/bundled/v3/index.js +4 -6
- package/dist/esm/v2/{OrDateTimePicker-d8cb0e8d.js → OrDateTimePicker-e1ea0a9a.js} +2 -4
- package/dist/esm/v2/{OrText-b12d0682.js → OrText-91d662a0.js} +36 -3
- 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-text-v3/OrText.vue.d.ts +27 -2
- package/dist/esm/v2/components/or-text-v3/index.js +1 -1
- package/dist/esm/v2/index.js +2 -2
- package/dist/esm/v3/{OrDateTimePicker-c4af17e3.js → OrDateTimePicker-63f22d1b.js} +1 -3
- package/dist/esm/v3/{OrText-6b4f7cd1.js → OrText-a3b00048.js} +36 -3
- 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-text-v3/OrText.vue.d.ts +27 -2
- package/dist/esm/v3/components/or-text-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 +0 -11
- package/src/components/or-text-v3/OrText.stories3.ts +83 -5
- package/src/components/or-text-v3/OrText.vue +37 -3
- package/dist/bundled/v3/OrText.vue_vue_type_script_lang-271fb345.js +0 -60
|
@@ -485,7 +485,7 @@ var script = defineComponent({
|
|
|
485
485
|
}
|
|
486
486
|
});
|
|
487
487
|
|
|
488
|
-
var css_248z = "@keyframes spinAround-data-v-
|
|
488
|
+
var css_248z = "@keyframes spinAround-data-v-2cd46aea{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-2cd46aea{from{opacity:1}to{opacity:0}}.or-date-time-picker[data-v-2cd46aea]{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.or-date-time-picker.is-fullwidth[data-v-2cd46aea]{width:100%!important}.or-date-time-picker.is-date-type[data-v-2cd46aea]{width:7.125rem}.or-date-time-picker.is-time-type[data-v-2cd46aea]{width:7.125rem}.or-date-time-picker.is-date-time-type[data-v-2cd46aea]{width:11.25rem}.or-date-time-picker .or-label[data-v-2cd46aea]{margin-bottom:var(--s-1)}.or-date-time-picker-info[data-v-2cd46aea]{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--s-2)}.or-date-time-picker-input-wrapper[data-v-2cd46aea]{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}.or-date-time-picker-input-wrapper[data-v-2cd46aea]:not(.is-readonly):hover{background-color:var(--c-neutral-0);cursor:pointer}.or-date-time-picker-input-wrapper.is-disabled[data-v-2cd46aea],.or-date-time-picker-input-wrapper[data-v-2cd46aea]: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-2cd46aea]{border-color:var(--c-error)}@media (hover:hover) and (pointer:fine){.or-date-time-picker-input-wrapper.has-error[data-v-2cd46aea]: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-2cd46aea]: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-2cd46aea]: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-2cd46aea],.or-date-time-picker-input-wrapper.has-error[data-v-2cd46aea]:disabled{cursor:not-allowed;border-color:var(--c-error-lighten-20)}.or-date-time-picker-input-wrapper .placeholder[data-v-2cd46aea],.or-date-time-picker-input-wrapper .value[data-v-2cd46aea]{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-2cd46aea]{color:var(--c-neutral-4);-webkit-user-select:none;-moz-user-select:none;user-select:none}.content[data-v-2cd46aea]{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-2cd46aea]{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-2cd46aea]{margin:auto}.content .calendar[data-v-2cd46aea]{padding:0 var(--s-3) var(--s-3);font-size:var(--fs-0);line-height:.875rem}.content .calendar-week-days[data-v-2cd46aea]{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-2cd46aea]{width:var(--s-6)}.content .calendar-days[data-v-2cd46aea]{display:flex;flex-direction:column;gap:var(--s-2)}.content .calendar-days-row[data-v-2cd46aea]{display:flex;flex-direction:row;justify-content:space-around;gap:var(--s-2)}.content .time-footer[data-v-2cd46aea]{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-2cd46aea]{text-align:center;border:none;font-size:var(--fs-0)}.content .time-footer-input[data-v-2cd46aea].focus-visible{outline:0;background-color:var(--c-neutral-2)}.content .time-footer-input[data-v-2cd46aea]:focus-visible{outline:0;background-color:var(--c-neutral-2)}.content .time-table[data-v-2cd46aea]{display:flex;flex-direction:row;gap:var(--s-4)}.content .time-table-column[data-v-2cd46aea]{display:flex;flex-direction:column}.content .time-table-column-time[data-v-2cd46aea]{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-2cd46aea]{display:flex;flex-direction:row;justify-content:space-around;gap:var(--s-2)}";
|
|
489
489
|
styleInject(css_248z);
|
|
490
490
|
|
|
491
491
|
/* script */
|
|
@@ -651,7 +651,6 @@ var __vue_render__ = function () {
|
|
|
651
651
|
}],
|
|
652
652
|
staticClass: "time-footer-input",
|
|
653
653
|
attrs: {
|
|
654
|
-
"type": "number",
|
|
655
654
|
"placeholder": "00"
|
|
656
655
|
},
|
|
657
656
|
domProps: {
|
|
@@ -674,7 +673,6 @@ var __vue_render__ = function () {
|
|
|
674
673
|
}],
|
|
675
674
|
staticClass: "time-footer-input",
|
|
676
675
|
attrs: {
|
|
677
|
-
"type": "number",
|
|
678
676
|
"placeholder": "00"
|
|
679
677
|
},
|
|
680
678
|
domProps: {
|
|
@@ -747,7 +745,7 @@ var __vue_staticRenderFns__ = [];
|
|
|
747
745
|
/* style */
|
|
748
746
|
const __vue_inject_styles__ = undefined;
|
|
749
747
|
/* scoped */
|
|
750
|
-
const __vue_scope_id__ = "data-v-
|
|
748
|
+
const __vue_scope_id__ = "data-v-2cd46aea";
|
|
751
749
|
/* module identifier */
|
|
752
750
|
const __vue_module_identifier__ = undefined;
|
|
753
751
|
/* functional template */
|
|
@@ -18,16 +18,31 @@ const RestText = [
|
|
|
18
18
|
// Layout
|
|
19
19
|
'shrink'];
|
|
20
20
|
|
|
21
|
+
/**
|
|
22
|
+
* Use `OrText` component to crop un-wrapped single-line text with ellipsis inside narrow containers.
|
|
23
|
+
* Ellipsis can be placed in the end or in the middle of the text. Convenient for displaying long labels,
|
|
24
|
+
* that have same beginning and differ in the ending part.
|
|
25
|
+
*/
|
|
21
26
|
var script = defineComponent({
|
|
22
27
|
name: 'OrText',
|
|
23
28
|
props: {
|
|
29
|
+
/**
|
|
30
|
+
* Text to crop.
|
|
31
|
+
*/
|
|
24
32
|
text: {
|
|
25
33
|
type: String,
|
|
26
34
|
required: true
|
|
27
35
|
},
|
|
36
|
+
/**
|
|
37
|
+
* The index counted from the end of the string where ellipsis will be placed.
|
|
38
|
+
* Defines how many ending characters will remain visible.
|
|
39
|
+
* By default, ellipsis is placed in the end of the line.
|
|
40
|
+
*
|
|
41
|
+
* Note: Negative values behave same as corresponding positives still counting from the end of the line.
|
|
42
|
+
*/
|
|
28
43
|
sliceIndex: {
|
|
29
44
|
type: Number,
|
|
30
|
-
default:
|
|
45
|
+
default: 0
|
|
31
46
|
}
|
|
32
47
|
},
|
|
33
48
|
expose: ['root'],
|
|
@@ -38,15 +53,33 @@ var script = defineComponent({
|
|
|
38
53
|
const rootStyles = computed(() => ['or-text', ...TextRoot]);
|
|
39
54
|
const mainTextStyles = computed(() => [...MainText]);
|
|
40
55
|
const restTextStyles = computed(() => [...RestText]);
|
|
56
|
+
/**
|
|
57
|
+
* Preserves whitespace at the last position as <code> </code>
|
|
58
|
+
* @param str A string to escape
|
|
59
|
+
*/
|
|
60
|
+
const escapeLast = str => str && str.slice(0, -1) + '\xa0';
|
|
61
|
+
/**
|
|
62
|
+
* Preserves whitespace at the first position as <code> </code>
|
|
63
|
+
* @param str A string to escape
|
|
64
|
+
*/
|
|
65
|
+
const escapeFirst = str => str && '\xa0' + str.slice(1);
|
|
41
66
|
// State
|
|
42
67
|
const mainText = computed(() => {
|
|
43
68
|
if (props.sliceIndex) {
|
|
44
|
-
|
|
69
|
+
let mainPart = props.text.slice(0, -Math.abs(props.sliceIndex));
|
|
70
|
+
if (mainPart[mainPart.length - 1] === ' ') {
|
|
71
|
+
mainPart = escapeLast(mainPart);
|
|
72
|
+
}
|
|
73
|
+
return mainPart;
|
|
45
74
|
}
|
|
46
75
|
return props.text;
|
|
47
76
|
});
|
|
48
77
|
const restText = computed(() => {
|
|
49
|
-
|
|
78
|
+
let restPart = props.text.slice(mainText.value.length);
|
|
79
|
+
if (restPart[0] === ' ') {
|
|
80
|
+
restPart = escapeFirst(restPart);
|
|
81
|
+
}
|
|
82
|
+
return restPart;
|
|
50
83
|
});
|
|
51
84
|
return {
|
|
52
85
|
root,
|
|
@@ -20,7 +20,7 @@ export { O as OrCollapse } from '../OrCollapse-ec5dda58.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-f654471a.js';
|
|
21
21
|
export { _ as OrConfirm } from '../OrConfirm-62ddc635.js';
|
|
22
22
|
export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-2cdb78b3.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-24a56fd2.js';
|
|
24
24
|
export { O as OrError } from '../OrError-29f0ce95.js';
|
|
25
25
|
export { _ as OrErrorTagV3 } from '../OrErrorTag-4675604d.js';
|
|
26
26
|
export { O as OrErrorV3 } from '../OrError-52f668a4.js';
|
|
@@ -89,7 +89,7 @@ export { _ as OrTag } from '../OrTag-e0b41e02.js';
|
|
|
89
89
|
export { O as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-59ab76c5.js';
|
|
90
90
|
export { O as OrTeleport } from '../OrTeleport.vue2-90147f16.js';
|
|
91
91
|
export { O as OrTeleportV3 } from '../OrTeleport.vue2-e9ba3054.js';
|
|
92
|
-
export { _ as OrTextV3 } from '../OrText-
|
|
92
|
+
export { _ as OrTextV3 } from '../OrText-15bf85c4.js';
|
|
93
93
|
export { _ as OrTextarea } from '../OrTextarea-3fb6d95f.js';
|
|
94
94
|
export { _ as OrTextareaV3 } from '../OrTextarea-5fdf63d0.js';
|
|
95
95
|
export { _ as OrTextbox, T as TextboxTypes } from '../OrTextbox-614aa7fc.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-24a56fd2.js';
|
|
2
2
|
import 'lodash';
|
|
3
3
|
import '../../index-fa6eb4ca.js';
|
|
4
4
|
import 'vue';
|
|
@@ -6,22 +6,42 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
6
6
|
mainText: import("@vue/composition-api").ComputedRef<string>;
|
|
7
7
|
restText: import("@vue/composition-api").ComputedRef<string>;
|
|
8
8
|
}> & import("@vue/composition-api").Data, {}, {}, {
|
|
9
|
+
/**
|
|
10
|
+
* Text to crop.
|
|
11
|
+
*/
|
|
9
12
|
text: {
|
|
10
13
|
type: StringConstructor;
|
|
11
14
|
required: true;
|
|
12
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* The index counted from the end of the string where ellipsis will be placed.
|
|
18
|
+
* Defines how many ending characters will remain visible.
|
|
19
|
+
* By default, ellipsis is placed in the end of the line.
|
|
20
|
+
*
|
|
21
|
+
* Note: Negative values behave same as corresponding positives still counting from the end of the line.
|
|
22
|
+
*/
|
|
13
23
|
sliceIndex: {
|
|
14
24
|
type: NumberConstructor;
|
|
15
|
-
default:
|
|
25
|
+
default: number;
|
|
16
26
|
};
|
|
17
27
|
}, import("@vue/composition-api").ExtractPropTypes<{
|
|
28
|
+
/**
|
|
29
|
+
* Text to crop.
|
|
30
|
+
*/
|
|
18
31
|
text: {
|
|
19
32
|
type: StringConstructor;
|
|
20
33
|
required: true;
|
|
21
34
|
};
|
|
35
|
+
/**
|
|
36
|
+
* The index counted from the end of the string where ellipsis will be placed.
|
|
37
|
+
* Defines how many ending characters will remain visible.
|
|
38
|
+
* By default, ellipsis is placed in the end of the line.
|
|
39
|
+
*
|
|
40
|
+
* Note: Negative values behave same as corresponding positives still counting from the end of the line.
|
|
41
|
+
*/
|
|
22
42
|
sliceIndex: {
|
|
23
43
|
type: NumberConstructor;
|
|
24
|
-
default:
|
|
44
|
+
default: number;
|
|
25
45
|
};
|
|
26
46
|
}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
|
|
27
47
|
text: string;
|
|
@@ -39,4 +59,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
39
59
|
} & {}, {
|
|
40
60
|
sliceIndex: number;
|
|
41
61
|
}, true>);
|
|
62
|
+
/**
|
|
63
|
+
* Use `OrText` component to crop un-wrapped single-line text with ellipsis inside narrow containers.
|
|
64
|
+
* Ellipsis can be placed in the end or in the middle of the text. Convenient for displaying long labels,
|
|
65
|
+
* that have same beginning and differ in the ending part.
|
|
66
|
+
*/
|
|
42
67
|
export default _default;
|