@onereach/ui-components 4.3.13-beta.2683.0 → 4.3.13-beta.2684.0
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/components/OrCarousel/OrCarousel.js +3 -6
- package/dist/bundled/v2/components/OrCarousel/OrCarousel.vue.d.ts +0 -1
- package/dist/bundled/v2/components/OrCarousel/index.js +1 -1
- package/dist/bundled/v2/components/OrTagV3/OrTag.vue.d.ts +5 -5
- package/dist/bundled/v2/components/OrTagsV3/OrTags.js +163 -0
- package/dist/bundled/v2/components/OrTagsV3/OrTags.vue.d.ts +80 -0
- package/dist/bundled/v2/components/OrTagsV3/index.d.ts +1 -0
- package/dist/bundled/v2/components/OrTagsV3/index.js +37 -0
- package/dist/bundled/v2/components/OrTagsV3/styles.d.ts +4 -0
- package/dist/bundled/v2/components/OrTagsV3/styles.js +26 -0
- package/dist/bundled/v2/components/index.d.ts +1 -0
- package/dist/bundled/v2/components/index.js +2 -0
- package/dist/bundled/v2/index.js +3 -1
- package/dist/bundled/v3/{OrCarousel.vue_vue_type_script_lang-5222cb8d.js → OrCarousel.vue_vue_type_script_lang-188ca513.js} +0 -4
- package/dist/bundled/v3/OrTags.vue_vue_type_script_lang-e75444b5.js +70 -0
- package/dist/bundled/v3/components/OrCarousel/OrCarousel.js +3 -3
- package/dist/bundled/v3/components/OrCarousel/OrCarousel.vue.d.ts +0 -1
- package/dist/bundled/v3/components/OrCarousel/index.js +2 -2
- package/dist/bundled/v3/components/OrTagV3/OrTag.vue.d.ts +5 -5
- package/dist/bundled/v3/components/OrTagsV3/OrTags.js +101 -0
- package/dist/bundled/v3/components/OrTagsV3/OrTags.vue.d.ts +36 -0
- package/dist/bundled/v3/components/OrTagsV3/index.d.ts +1 -0
- package/dist/bundled/v3/components/OrTagsV3/index.js +46 -0
- package/dist/bundled/v3/components/OrTagsV3/styles.d.ts +4 -0
- package/dist/bundled/v3/components/OrTagsV3/styles.js +26 -0
- package/dist/bundled/v3/components/index.d.ts +1 -0
- package/dist/bundled/v3/components/index.js +3 -1
- package/dist/bundled/v3/index.js +5 -2
- package/dist/esm/v2/{OrCarousel-76dc2b7b.js → OrCarousel-5c2b2d10.js} +2 -3
- package/dist/esm/v2/OrTags-4ffaa13b.js +159 -0
- package/dist/esm/v2/components/index.d.ts +1 -0
- package/dist/esm/v2/components/index.js +2 -2
- package/dist/esm/v2/components/or-carousel/OrCarousel.vue.d.ts +0 -1
- package/dist/esm/v2/components/or-carousel/index.js +1 -2
- package/dist/esm/v2/components/or-tag-v3/OrTag.vue.d.ts +5 -5
- package/dist/esm/v2/components/or-tags-v3/OrTags.vue.d.ts +80 -0
- package/dist/esm/v2/components/or-tags-v3/index.d.ts +1 -0
- package/dist/esm/v2/components/or-tags-v3/index.js +19 -0
- package/dist/esm/v2/components/or-tags-v3/styles.d.ts +4 -0
- package/dist/esm/v2/index.js +2 -2
- package/dist/esm/v3/{OrCarousel-40f069d5.js → OrCarousel-4fb775f8.js} +1 -2
- package/dist/esm/v3/OrTags-a082de82.js +147 -0
- package/dist/esm/v3/components/index.d.ts +1 -0
- package/dist/esm/v3/components/index.js +2 -2
- package/dist/esm/v3/components/or-carousel/OrCarousel.vue.d.ts +0 -1
- package/dist/esm/v3/components/or-carousel/index.js +1 -2
- package/dist/esm/v3/components/or-tag-v3/OrTag.vue.d.ts +5 -5
- package/dist/esm/v3/components/or-tags-v3/OrTags.vue.d.ts +36 -0
- package/dist/esm/v3/components/or-tags-v3/index.d.ts +1 -0
- package/dist/esm/v3/components/or-tags-v3/index.js +18 -0
- package/dist/esm/v3/components/or-tags-v3/styles.d.ts +4 -0
- package/dist/esm/v3/index.js +2 -2
- package/package.json +1 -1
- package/src/components/index.ts +1 -0
- package/src/components/or-carousel/OrCarousel.vue +2 -2
- package/src/components/or-tag-v3/OrTag.vue +3 -2
- package/src/components/or-tags-v3/OrTags.docs.mdx +7 -0
- package/src/components/or-tags-v3/OrTags.stories3.ts +101 -0
- package/src/components/or-tags-v3/OrTags.vue +129 -0
- package/src/components/or-tags-v3/index.ts +1 -0
- package/src/components/or-tags-v3/styles.ts +41 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
|
|
2
1
|
import { defineComponent, ref } from 'vue-demi';
|
|
3
2
|
import { EVENTS } from './constants.js';
|
|
4
3
|
import __vue_component__$1 from '../OrIcon/OrIcon.js';
|
|
4
|
+
import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
|
|
5
5
|
import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
|
|
6
6
|
import 'lodash';
|
|
7
7
|
import '../OrIcon/constants.js';
|
|
@@ -2653,9 +2653,6 @@ var Splide = _Splide;
|
|
|
2653
2653
|
Splide.defaults = {};
|
|
2654
2654
|
Splide.STATES = STATES;
|
|
2655
2655
|
|
|
2656
|
-
var css_248z$1 = ".splide__container{box-sizing:border-box;position:relative}.splide__list{margin:0!important;padding:0!important}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{list-style-type:none!important}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list{display:block}.splide__track--fade>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow.focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page.focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:transparent}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide.focus-visible{outline:3px solid #0bf;outline-offset:-3px}.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide.focus-visible{border:3px solid #0bf}.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle.focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}";
|
|
2657
|
-
styleInject(css_248z$1);
|
|
2658
|
-
|
|
2659
2656
|
var script = defineComponent({
|
|
2660
2657
|
name: 'OrCarousel',
|
|
2661
2658
|
components: {
|
|
@@ -2817,7 +2814,7 @@ var script = defineComponent({
|
|
|
2817
2814
|
}
|
|
2818
2815
|
});
|
|
2819
2816
|
|
|
2820
|
-
var css_248z = ".or-carousel[data-v-
|
|
2817
|
+
var css_248z = ".or-carousel[data-v-53c22bd2]{line-height:1;text-align:center}.or-carousel__track-container[data-v-53c22bd2]{position:relative}.or-carousel .splide__arrow[data-v-53c22bd2].focus-visible{outline:0}.or-carousel .splide__arrow[data-v-53c22bd2]:focus-visible{outline:0}.or-carousel[data-v-53c22bd2] .splide__pagination__page{background:#64b2da}";
|
|
2821
2818
|
styleInject(css_248z);
|
|
2822
2819
|
|
|
2823
2820
|
/* script */
|
|
@@ -2863,7 +2860,7 @@ var __vue_staticRenderFns__ = [];
|
|
|
2863
2860
|
/* style */
|
|
2864
2861
|
const __vue_inject_styles__ = undefined;
|
|
2865
2862
|
/* scoped */
|
|
2866
|
-
const __vue_scope_id__ = "data-v-
|
|
2863
|
+
const __vue_scope_id__ = "data-v-53c22bd2";
|
|
2867
2864
|
/* module identifier */
|
|
2868
2865
|
const __vue_module_identifier__ = undefined;
|
|
2869
2866
|
/* functional template */
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Splide, ResponsiveOptions } from '@splidejs/splide';
|
|
2
|
-
import '@splidejs/splide/dist/css/splide.min.css';
|
|
3
2
|
import { PropType } from 'vue-demi';
|
|
4
3
|
import { Direction, KeyBoard, Type } from './constants';
|
|
5
4
|
declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
export { default as OrCarousel } from './OrCarousel.js';
|
|
2
2
|
export { default as OrCarouselItem } from '../OrCarouselItem/OrCarouselItem.js';
|
|
3
|
-
import '../../style-inject.es-4c6f2515.js';
|
|
4
3
|
import 'vue-demi';
|
|
5
4
|
import './constants.js';
|
|
6
5
|
import '../OrIcon/OrIcon.js';
|
|
@@ -8,6 +7,7 @@ import 'lodash';
|
|
|
8
7
|
import '../OrIcon/constants.js';
|
|
9
8
|
import '../../utils/functions/px-to-rem.js';
|
|
10
9
|
import '../OrTooltipContent/OrTooltipContent.js';
|
|
10
|
+
import '../../style-inject.es-4c6f2515.js';
|
|
11
11
|
import '../../normalize-component-6e8e3d80.js';
|
|
12
12
|
import '../OrFloating/OrFloating.js';
|
|
13
13
|
import '../../floating-ui.dom.esm-83eba816.js';
|
|
@@ -6,7 +6,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
6
6
|
custom: import("@vue/composition-api").ComputedRef<boolean>;
|
|
7
7
|
}> & import("@vue/composition-api").Data, {}, {}, {
|
|
8
8
|
variant: {
|
|
9
|
-
type: PropType<
|
|
9
|
+
type: PropType<"tag" | "button" | "reset">;
|
|
10
10
|
default: TagVariant;
|
|
11
11
|
};
|
|
12
12
|
color: {
|
|
@@ -19,7 +19,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
19
19
|
};
|
|
20
20
|
}, import("@vue/composition-api").ExtractPropTypes<{
|
|
21
21
|
variant: {
|
|
22
|
-
type: PropType<
|
|
22
|
+
type: PropType<"tag" | "button" | "reset">;
|
|
23
23
|
default: TagVariant;
|
|
24
24
|
};
|
|
25
25
|
color: {
|
|
@@ -31,7 +31,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
31
31
|
default: boolean;
|
|
32
32
|
};
|
|
33
33
|
}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
|
|
34
|
-
variant:
|
|
34
|
+
variant: "tag" | "button" | "reset";
|
|
35
35
|
color: string;
|
|
36
36
|
disabled: boolean;
|
|
37
37
|
} & {} & {
|
|
@@ -41,13 +41,13 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
41
41
|
rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
42
42
|
custom: import("@vue/composition-api").ComputedRef<boolean>;
|
|
43
43
|
}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
|
|
44
|
-
variant:
|
|
44
|
+
variant: "tag" | "button" | "reset";
|
|
45
45
|
color: string;
|
|
46
46
|
disabled: boolean;
|
|
47
47
|
} & {} & {
|
|
48
48
|
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
|
49
49
|
}, {
|
|
50
|
-
variant:
|
|
50
|
+
variant: "tag" | "button" | "reset";
|
|
51
51
|
color: string;
|
|
52
52
|
disabled: boolean;
|
|
53
53
|
}, true>);
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { defineComponent, ref, computed } from 'vue-demi';
|
|
2
|
+
import { Tags, TagsContainer, TagsOverflowButton, TagsOverflowPopover } from './styles.js';
|
|
3
|
+
import __vue_component__$1 from '../OrButtonV3/OrButton.js';
|
|
4
|
+
import __vue_component__$2 from '../OrPopoverV3/OrPopover.js';
|
|
5
|
+
import __vue_component__$3 from '../OrTagV3/OrTag.js';
|
|
6
|
+
import { useOverflow } from '../../hooks/useOverflow.js';
|
|
7
|
+
import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
|
|
8
|
+
import '../OrButtonV3/props.js';
|
|
9
|
+
import '../OrButtonV3/styles.js';
|
|
10
|
+
import '../OrLoaderV3/OrLoader.js';
|
|
11
|
+
import '@vueuse/core';
|
|
12
|
+
import '../OrLoaderV3/props.js';
|
|
13
|
+
import '../OrLoaderV3/styles.js';
|
|
14
|
+
import '../../floating-ui.dom.esm-83eba816.js';
|
|
15
|
+
import '../OrPopoverV3/props.js';
|
|
16
|
+
import '../OrPopoverV3/styles.js';
|
|
17
|
+
import '../OrBottomSheetV3/OrBottomSheet.js';
|
|
18
|
+
import '../OrBottomSheetV3/props.js';
|
|
19
|
+
import '../OrBottomSheetV3/styles.js';
|
|
20
|
+
import '../OrOverlayV3/OrOverlay.js';
|
|
21
|
+
import '../OrOverlayV3/styles.js';
|
|
22
|
+
import '../OrTeleportV3/OrTeleport.js';
|
|
23
|
+
import 'portal-vue';
|
|
24
|
+
import '../../hooks/useElevation.js';
|
|
25
|
+
import '../../utils/isVisible.js';
|
|
26
|
+
import '../../hooks/useResponsive/useResponsive.js';
|
|
27
|
+
import '../OrTagV3/props.js';
|
|
28
|
+
import '../OrTagV3/styles.js';
|
|
29
|
+
import '../OrIconButtonV3/OrIconButton.js';
|
|
30
|
+
import '../OrIconButtonV3/props.js';
|
|
31
|
+
import '../OrIconV3/props.js';
|
|
32
|
+
import '../OrIconButtonV3/styles.js';
|
|
33
|
+
import '../OrIconV3/OrIcon.js';
|
|
34
|
+
import '../OrIconV3/styles.js';
|
|
35
|
+
import '../OrTooltipV3/OrTooltip.js';
|
|
36
|
+
import '../OrTooltipV3/styles.js';
|
|
37
|
+
|
|
38
|
+
var script = defineComponent({
|
|
39
|
+
name: 'OrTags',
|
|
40
|
+
components: {
|
|
41
|
+
OrButton: __vue_component__$1,
|
|
42
|
+
OrPopover: __vue_component__$2,
|
|
43
|
+
OrTag: __vue_component__$3
|
|
44
|
+
},
|
|
45
|
+
props: {
|
|
46
|
+
items: {
|
|
47
|
+
type: Array,
|
|
48
|
+
default: () => []
|
|
49
|
+
},
|
|
50
|
+
tagProps: {
|
|
51
|
+
type: Object,
|
|
52
|
+
default: undefined
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
setup(props) {
|
|
56
|
+
// Refs
|
|
57
|
+
const root = ref();
|
|
58
|
+
const container = ref();
|
|
59
|
+
const overflowButton = ref();
|
|
60
|
+
const overflowButtonRoot = computed(() => {
|
|
61
|
+
var _a;
|
|
62
|
+
return (_a = overflowButton.value) === null || _a === void 0 ? void 0 : _a.root;
|
|
63
|
+
});
|
|
64
|
+
const overflowPopover = ref();
|
|
65
|
+
const overflowPopoverRoot = computed(() => {
|
|
66
|
+
var _a;
|
|
67
|
+
return (_a = overflowPopover.value) === null || _a === void 0 ? void 0 : _a.root;
|
|
68
|
+
});
|
|
69
|
+
// Styles
|
|
70
|
+
const rootStyles = computed(() => ['or-tags-v3', ...Tags]);
|
|
71
|
+
const containerStyles = computed(() => [...TagsContainer]);
|
|
72
|
+
const overflowButtonStyles = computed(() => [...TagsOverflowButton]);
|
|
73
|
+
const overflowPopoverStyles = computed(() => [...TagsOverflowPopover]);
|
|
74
|
+
// State
|
|
75
|
+
const {
|
|
76
|
+
innerItems
|
|
77
|
+
} = useOverflow(container);
|
|
78
|
+
const overflowItems = computed(() => {
|
|
79
|
+
return props.items.slice(innerItems.value.length);
|
|
80
|
+
});
|
|
81
|
+
return {
|
|
82
|
+
root,
|
|
83
|
+
container,
|
|
84
|
+
overflowButton,
|
|
85
|
+
overflowButtonRoot,
|
|
86
|
+
overflowPopover,
|
|
87
|
+
overflowPopoverRoot,
|
|
88
|
+
rootStyles,
|
|
89
|
+
containerStyles,
|
|
90
|
+
overflowButtonStyles,
|
|
91
|
+
overflowPopoverStyles,
|
|
92
|
+
overflowItems
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
/* script */
|
|
98
|
+
const __vue_script__ = script;
|
|
99
|
+
|
|
100
|
+
/* template */
|
|
101
|
+
var __vue_render__ = function () {
|
|
102
|
+
var _vm = this;
|
|
103
|
+
var _h = _vm.$createElement;
|
|
104
|
+
var _c = _vm._self._c || _h;
|
|
105
|
+
return _c('div', {
|
|
106
|
+
ref: "root",
|
|
107
|
+
class: _vm.rootStyles
|
|
108
|
+
}, [_c('div', {
|
|
109
|
+
ref: "container",
|
|
110
|
+
class: _vm.containerStyles
|
|
111
|
+
}, _vm._l(_vm.items, function (item) {
|
|
112
|
+
return _c('OrTag', _vm._b({
|
|
113
|
+
key: item
|
|
114
|
+
}, 'OrTag', _vm.tagProps, false), [_vm._v("\n " + _vm._s(item) + "\n ")]);
|
|
115
|
+
}), 1), _vm._v(" "), _vm.overflowItems.length > 0 ? [_c('OrButton', {
|
|
116
|
+
ref: "overflowButton",
|
|
117
|
+
class: _vm.overflowButtonStyles,
|
|
118
|
+
attrs: {
|
|
119
|
+
"type": 'button',
|
|
120
|
+
"variant": 'link',
|
|
121
|
+
"color": 'inherit'
|
|
122
|
+
},
|
|
123
|
+
on: {
|
|
124
|
+
"click": function ($event) {
|
|
125
|
+
$event.stopPropagation();
|
|
126
|
+
return _vm.overflowPopover.open();
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}, [_vm._v("\n +" + _vm._s(_vm.overflowItems.length) + "\n ")]), _vm._v(" "), _c('OrPopover', {
|
|
130
|
+
ref: "overflowPopover",
|
|
131
|
+
attrs: {
|
|
132
|
+
"trigger": _vm.overflowButtonRoot
|
|
133
|
+
}
|
|
134
|
+
}, [_c('div', {
|
|
135
|
+
class: _vm.overflowPopoverStyles
|
|
136
|
+
}, _vm._l(_vm.overflowItems, function (item) {
|
|
137
|
+
return _c('OrTag', _vm._b({
|
|
138
|
+
key: item
|
|
139
|
+
}, 'OrTag', _vm.tagProps, false), [_vm._v("\n " + _vm._s(item) + "\n ")]);
|
|
140
|
+
}), 1)])] : _vm._e()], 2);
|
|
141
|
+
};
|
|
142
|
+
var __vue_staticRenderFns__ = [];
|
|
143
|
+
|
|
144
|
+
/* style */
|
|
145
|
+
const __vue_inject_styles__ = undefined;
|
|
146
|
+
/* scoped */
|
|
147
|
+
const __vue_scope_id__ = undefined;
|
|
148
|
+
/* module identifier */
|
|
149
|
+
const __vue_module_identifier__ = undefined;
|
|
150
|
+
/* functional template */
|
|
151
|
+
const __vue_is_functional_template__ = false;
|
|
152
|
+
/* style inject */
|
|
153
|
+
|
|
154
|
+
/* style inject SSR */
|
|
155
|
+
|
|
156
|
+
/* style inject shadow dom */
|
|
157
|
+
|
|
158
|
+
const __vue_component__ = /*#__PURE__*/normalizeComponent({
|
|
159
|
+
render: __vue_render__,
|
|
160
|
+
staticRenderFns: __vue_staticRenderFns__
|
|
161
|
+
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
|
|
162
|
+
|
|
163
|
+
export { __vue_component__ as default };
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { PropType } from 'vue-demi';
|
|
2
|
+
declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
|
|
3
|
+
root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
|
|
4
|
+
container: import("@vue/composition-api").Ref<HTMLElement | undefined>;
|
|
5
|
+
overflowButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
|
|
6
|
+
[x: string]: ((...args: any[]) => any) | null;
|
|
7
|
+
} | string[], {} & {}, {
|
|
8
|
+
[x: number]: string;
|
|
9
|
+
} | {}, true> | undefined>;
|
|
10
|
+
overflowButtonRoot: import("@vue/composition-api").ComputedRef<undefined>;
|
|
11
|
+
overflowPopover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
|
|
12
|
+
[x: string]: ((...args: any[]) => any) | null;
|
|
13
|
+
} | string[], {} & {}, {
|
|
14
|
+
[x: number]: string;
|
|
15
|
+
} | {}, true> | undefined>;
|
|
16
|
+
overflowPopoverRoot: import("@vue/composition-api").ComputedRef<undefined>;
|
|
17
|
+
rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
18
|
+
containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
19
|
+
overflowButtonStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
20
|
+
overflowPopoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
21
|
+
overflowItems: import("@vue/composition-api").ComputedRef<string[]>;
|
|
22
|
+
}> & import("@vue/composition-api").Data, {}, {}, {
|
|
23
|
+
items: {
|
|
24
|
+
type: PropType<string[]>;
|
|
25
|
+
default: () => never[];
|
|
26
|
+
};
|
|
27
|
+
tagProps: {
|
|
28
|
+
type: PropType<Readonly<Partial<{
|
|
29
|
+
[x: number]: string;
|
|
30
|
+
} | {}> & Omit<{} & {}, never>>>;
|
|
31
|
+
default: undefined;
|
|
32
|
+
};
|
|
33
|
+
}, import("@vue/composition-api").ExtractPropTypes<{
|
|
34
|
+
items: {
|
|
35
|
+
type: PropType<string[]>;
|
|
36
|
+
default: () => never[];
|
|
37
|
+
};
|
|
38
|
+
tagProps: {
|
|
39
|
+
type: PropType<Readonly<Partial<{
|
|
40
|
+
[x: number]: string;
|
|
41
|
+
} | {}> & Omit<{} & {}, never>>>;
|
|
42
|
+
default: undefined;
|
|
43
|
+
};
|
|
44
|
+
}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
|
|
45
|
+
items: string[];
|
|
46
|
+
tagProps: Readonly<Partial<{
|
|
47
|
+
[x: number]: string;
|
|
48
|
+
} | {}> & Omit<{} & {}, never>>;
|
|
49
|
+
} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
|
|
50
|
+
root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
|
|
51
|
+
container: import("@vue/composition-api").Ref<HTMLElement | undefined>;
|
|
52
|
+
overflowButton: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
|
|
53
|
+
[x: string]: ((...args: any[]) => any) | null;
|
|
54
|
+
} | string[], {} & {}, {
|
|
55
|
+
[x: number]: string;
|
|
56
|
+
} | {}, true> | undefined>;
|
|
57
|
+
overflowButtonRoot: import("@vue/composition-api").ComputedRef<undefined>;
|
|
58
|
+
overflowPopover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
|
|
59
|
+
[x: string]: ((...args: any[]) => any) | null;
|
|
60
|
+
} | string[], {} & {}, {
|
|
61
|
+
[x: number]: string;
|
|
62
|
+
} | {}, true> | undefined>;
|
|
63
|
+
overflowPopoverRoot: import("@vue/composition-api").ComputedRef<undefined>;
|
|
64
|
+
rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
65
|
+
containerStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
66
|
+
overflowButtonStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
67
|
+
overflowPopoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
|
|
68
|
+
overflowItems: import("@vue/composition-api").ComputedRef<string[]>;
|
|
69
|
+
}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
|
|
70
|
+
items: string[];
|
|
71
|
+
tagProps: Readonly<Partial<{
|
|
72
|
+
[x: number]: string;
|
|
73
|
+
} | {}> & Omit<{} & {}, never>>;
|
|
74
|
+
} & {}, {
|
|
75
|
+
items: string[];
|
|
76
|
+
tagProps: Readonly<Partial<{
|
|
77
|
+
[x: number]: string;
|
|
78
|
+
} | {}> & Omit<{} & {}, never>>;
|
|
79
|
+
}, true>);
|
|
80
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as OrTagsV3 } from './OrTags.vue';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export { default as OrTagsV3 } from './OrTags.js';
|
|
2
|
+
import 'vue-demi';
|
|
3
|
+
import './styles.js';
|
|
4
|
+
import '../OrButtonV3/OrButton.js';
|
|
5
|
+
import '../OrButtonV3/props.js';
|
|
6
|
+
import '../OrButtonV3/styles.js';
|
|
7
|
+
import '../OrLoaderV3/OrLoader.js';
|
|
8
|
+
import '@vueuse/core';
|
|
9
|
+
import '../OrLoaderV3/props.js';
|
|
10
|
+
import '../OrLoaderV3/styles.js';
|
|
11
|
+
import '../../normalize-component-6e8e3d80.js';
|
|
12
|
+
import '../OrPopoverV3/OrPopover.js';
|
|
13
|
+
import '../../floating-ui.dom.esm-83eba816.js';
|
|
14
|
+
import '../OrPopoverV3/props.js';
|
|
15
|
+
import '../OrPopoverV3/styles.js';
|
|
16
|
+
import '../OrBottomSheetV3/OrBottomSheet.js';
|
|
17
|
+
import '../OrBottomSheetV3/props.js';
|
|
18
|
+
import '../OrBottomSheetV3/styles.js';
|
|
19
|
+
import '../OrOverlayV3/OrOverlay.js';
|
|
20
|
+
import '../OrOverlayV3/styles.js';
|
|
21
|
+
import '../OrTeleportV3/OrTeleport.js';
|
|
22
|
+
import 'portal-vue';
|
|
23
|
+
import '../../hooks/useElevation.js';
|
|
24
|
+
import '../../utils/isVisible.js';
|
|
25
|
+
import '../../hooks/useResponsive/useResponsive.js';
|
|
26
|
+
import '../OrTagV3/OrTag.js';
|
|
27
|
+
import '../OrTagV3/props.js';
|
|
28
|
+
import '../OrTagV3/styles.js';
|
|
29
|
+
import '../OrIconButtonV3/OrIconButton.js';
|
|
30
|
+
import '../OrIconButtonV3/props.js';
|
|
31
|
+
import '../OrIconV3/props.js';
|
|
32
|
+
import '../OrIconButtonV3/styles.js';
|
|
33
|
+
import '../OrIconV3/OrIcon.js';
|
|
34
|
+
import '../OrIconV3/styles.js';
|
|
35
|
+
import '../OrTooltipV3/OrTooltip.js';
|
|
36
|
+
import '../OrTooltipV3/styles.js';
|
|
37
|
+
import '../../hooks/useOverflow.js';
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
const Tags = [
|
|
2
|
+
// Layout
|
|
3
|
+
'layout-row',
|
|
4
|
+
// Spacing
|
|
5
|
+
'gap-sm',
|
|
6
|
+
// Theme
|
|
7
|
+
'theme-foreground-default', 'dark:theme-foreground-default-dark'];
|
|
8
|
+
const TagsContainer = [
|
|
9
|
+
// Layout
|
|
10
|
+
'layout-row',
|
|
11
|
+
// Overflow
|
|
12
|
+
'overflow-hidden',
|
|
13
|
+
// Spacing
|
|
14
|
+
'gap-sm'];
|
|
15
|
+
const TagsOverflowButton = [
|
|
16
|
+
// Typography
|
|
17
|
+
'typography-caption-regular'];
|
|
18
|
+
const TagsOverflowPopover = [
|
|
19
|
+
// Layout
|
|
20
|
+
'layout-row !flex-wrap',
|
|
21
|
+
// Box
|
|
22
|
+
'max-w-[192px]',
|
|
23
|
+
// Spacing
|
|
24
|
+
'px-md', 'py-md', 'gap-sm'];
|
|
25
|
+
|
|
26
|
+
export { Tags, TagsContainer, TagsOverflowButton, TagsOverflowPopover };
|
|
@@ -133,6 +133,7 @@ export { TabsVariant } from './OrTabsV3/props.js';
|
|
|
133
133
|
export { default as OrTag } from './OrTag/OrTag.js';
|
|
134
134
|
export { default as OrTagV3 } from './OrTagV3/OrTag.js';
|
|
135
135
|
export { TagColor, TagVariant } from './OrTagV3/props.js';
|
|
136
|
+
export { default as OrTagsV3 } from './OrTagsV3/OrTags.js';
|
|
136
137
|
export { default as OrTeleport } from './OrTeleport/OrTeleport.js';
|
|
137
138
|
export { default as OrTeleportV3 } from './OrTeleportV3/OrTeleport.js';
|
|
138
139
|
export { default as OrTextV3 } from './OrTextV3/OrText.js';
|
|
@@ -239,6 +240,7 @@ import './OrSortHeaderV3/styles.js';
|
|
|
239
240
|
import './OrSwitchV3/styles.js';
|
|
240
241
|
import './OrTabV3/styles.js';
|
|
241
242
|
import './OrTabsV3/styles.js';
|
|
243
|
+
import './OrTagsV3/styles.js';
|
|
242
244
|
import './OrTextV3/styles.js';
|
|
243
245
|
import './OrTextareaV3/styles.js';
|
|
244
246
|
import './OrTimePickerV3/styles.js';
|