@onereach/ui-components 2.63.0-beta.1896.0 → 2.63.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/v2/{OrConfirm-8d149ece.js → OrConfirm-24e2a1a2.js} +1 -1
- package/dist/v2/{OrIconButton-5883eba0.js → OrIconButton-2088a37f.js} +1 -1
- package/dist/v2/{OrInlineInput-16a343c1.js → OrInlineInput-f00cba5e.js} +6 -5
- package/dist/v2/{OrInlineTextarea-f154bdf5.js → OrInlineTextarea-75de33d0.js} +6 -5
- package/dist/v2/{OrInput-4a50fe57.js → OrInput-24028f23.js} +7 -5
- package/dist/v2/{OrModal-64c5ae2e.js → OrModal-a1452b11.js} +1 -1
- package/dist/v2/{OrNotification-9c164908.js → OrNotification-ac420f39.js} +1 -1
- package/dist/v2/{OrSearch-a247f072.js → OrSearch-978a3a6e.js} +1 -1
- package/dist/v2/OrSegmentedControl-17df63b8.js +236 -0
- package/dist/v2/{OrSelect-bb223cce.js → OrSelect-c6d0a69e.js} +13 -33
- package/dist/v2/{OrTabs-b4a9740b.js → OrTabs-f2a60b41.js} +1 -1
- package/dist/v2/{OrTag-ab03c4f7.js → OrTag-1ced4e58.js} +1 -1
- package/dist/v2/{OrTooltip-caeac590.js → OrTooltip-afe7030b.js} +33 -3
- package/dist/v2/components/index.d.ts +1 -0
- package/dist/v2/components/{or-rich-text-editor-v3/OrRichTextEditor.stories3.d.ts → or-segmented-control-v3/OrSegmentedControl.stories3.d.ts} +1 -1
- package/dist/v2/components/or-segmented-control-v3/OrSegmentedControl.vue.d.ts +77 -0
- package/dist/v2/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue.d.ts +47 -0
- package/dist/v2/components/or-segmented-control-v3/components/or-segmented-control-item/styles.d.ts +3 -0
- package/dist/v2/components/or-segmented-control-v3/index.d.ts +3 -0
- package/dist/v2/components/or-segmented-control-v3/props.d.ts +4 -0
- package/dist/v2/components/or-segmented-control-v3/styles.d.ts +3 -0
- package/dist/v2/components/or-segmented-control-v3/types.d.ts +4 -0
- package/dist/v2/components/or-select-v3/OrSelect.vue.d.ts +2 -2
- package/dist/v2/components/or-tooltip-v3/styles.d.ts +2 -0
- package/dist/v2/directives/index.d.ts +2 -0
- package/dist/v2/dropdown-open-0d314aa4.js +28 -0
- package/dist/v2/index.d.ts +1 -0
- package/dist/v2/index.js +15 -13
- package/dist/v2/index2.js +15 -13
- package/dist/v2/index20.js +4 -4
- package/dist/v2/index31.js +2 -2
- package/dist/v2/index34.js +3 -3
- package/dist/v2/index36.js +3 -3
- package/dist/v2/index38.js +3 -3
- package/dist/v2/index50.js +3 -3
- package/dist/v2/index52.js +3 -3
- package/dist/v2/index62.js +12 -306
- package/dist/v2/index63.js +2 -19
- package/dist/v2/index65.js +6 -5
- package/dist/v2/index78.js +1 -1
- package/dist/v2/index80.js +3 -3
- package/dist/v2/index88.js +3 -3
- package/dist/v2/index91.js +1 -1
- package/dist/v2/index92.js +1 -6
- package/dist/v2/index93.js +5 -1
- package/dist/v2/index94.js +3 -0
- package/dist/v2/{types-fb93ea4e.js → types-89aad7fb.js} +1 -1
- package/dist/v3/{OrConfirm-456ddee1.js → OrConfirm-371630a4.js} +1 -1
- package/dist/v3/{OrIconButton-b8066b5d.js → OrIconButton-5fb3a9aa.js} +1 -1
- package/dist/v3/{OrInlineInput-280768ba.js → OrInlineInput-bac4abdd.js} +4 -3
- package/dist/v3/{OrInlineTextarea-0f63f344.js → OrInlineTextarea-d1ec1bba.js} +4 -3
- package/dist/v3/{OrInput-3eef7945.js → OrInput-256d2530.js} +6 -3
- package/dist/v3/{OrModal-f67d37d3.js → OrModal-3a43b7e7.js} +1 -1
- package/dist/v3/{OrNotification-fefa1cb4.js → OrNotification-433d16f7.js} +1 -1
- package/dist/v3/{OrSearch-15a70678.js → OrSearch-375eab55.js} +1 -1
- package/dist/v3/OrSegmentedControl-2bbc0f22.js +184 -0
- package/dist/v3/{OrSelect-63ada65d.js → OrSelect-52cfb10d.js} +12 -32
- package/dist/v3/{OrTabs-194ca950.js → OrTabs-ac0be933.js} +1 -1
- package/dist/v3/{OrTag-144b4ab8.js → OrTag-deaff080.js} +1 -1
- package/dist/v3/{OrTooltip-30e05f9e.js → OrTooltip-36c6728c.js} +33 -3
- package/dist/v3/components/index.d.ts +1 -0
- package/dist/v3/components/{or-rich-text-editor-v3/OrRichTextEditor.stories3.d.ts → or-segmented-control-v3/OrSegmentedControl.stories3.d.ts} +1 -1
- package/dist/v3/components/or-segmented-control-v3/OrSegmentedControl.vue.d.ts +77 -0
- package/dist/v3/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue.d.ts +47 -0
- package/dist/v3/components/or-segmented-control-v3/components/or-segmented-control-item/styles.d.ts +3 -0
- package/dist/v3/components/or-segmented-control-v3/index.d.ts +3 -0
- package/dist/v3/components/or-segmented-control-v3/props.d.ts +4 -0
- package/dist/v3/components/or-segmented-control-v3/styles.d.ts +3 -0
- package/dist/v3/components/or-segmented-control-v3/types.d.ts +4 -0
- package/dist/v3/components/or-select-v3/OrSelect.vue.d.ts +2 -2
- package/dist/v3/components/or-tooltip-v3/styles.d.ts +2 -0
- package/dist/v3/directives/index.d.ts +2 -0
- package/dist/v3/dropdown-open-0d314aa4.js +28 -0
- package/dist/v3/index.d.ts +1 -0
- package/dist/v3/index.js +15 -13
- package/dist/v3/index2.js +15 -13
- package/dist/v3/index20.js +4 -4
- package/dist/v3/index31.js +2 -2
- package/dist/v3/index34.js +3 -3
- package/dist/v3/index36.js +3 -3
- package/dist/v3/index38.js +3 -3
- package/dist/v3/index50.js +3 -3
- package/dist/v3/index52.js +3 -3
- package/dist/v3/index62.js +12 -280
- package/dist/v3/index63.js +2 -18
- package/dist/v3/index65.js +6 -5
- package/dist/v3/index78.js +1 -1
- package/dist/v3/index80.js +3 -3
- package/dist/v3/index88.js +3 -3
- package/dist/v3/index91.js +1 -1
- package/dist/v3/index92.js +1 -6
- package/dist/v3/index93.js +5 -1
- package/dist/v3/index94.js +3 -0
- package/dist/v3/{types-a2a8f948.js → types-d5d4ab32.js} +1 -1
- package/package.json +4 -9
- package/src/components/index.ts +1 -0
- package/src/components/or-avatar-v3/OrAvatar.docs.mdx +4 -0
- package/src/components/or-bottom-sheet-v3/OrBottomSheet.docs.mdx +4 -0
- package/src/components/or-button-v3/OrButton.docs.mdx +4 -0
- package/src/components/or-card-v3/OrCard.docs.mdx +4 -0
- package/src/components/or-checkbox-v3/OrCheckbox.docs.mdx +4 -0
- package/src/components/or-checkbox-v3/OrCheckbox.stories3.ts +1 -1
- package/src/components/or-confirm-v3/OrConfirm.docs.mdx +4 -0
- package/src/components/or-error-tag-v3/OrErrorTag.docs.mdx +5 -0
- package/src/components/or-error-v3/OrError.docs.mdx +4 -0
- package/src/components/or-expansion-panel-v3/OrExpansionPanel.docs.mdx +4 -0
- package/src/components/or-fab-v3/OrFab.docs.mdx +4 -0
- package/src/components/or-hint-v3/OrHint.docs.mdx +4 -0
- package/src/components/or-icon-button-v3/OrIconButton.docs.mdx +4 -0
- package/src/components/or-icon-v3/OrIcon.docs.mdx +4 -0
- package/src/components/or-inline-input-v3/OrInlineInput.docs.mdx +4 -0
- package/src/components/or-inline-input-v3/OrInlineInput.vue +2 -2
- package/src/components/or-inline-textarea-v3/OrInlineTextarea.docs.mdx +4 -0
- package/src/components/or-inline-textarea-v3/OrInlineTextarea.vue +2 -2
- package/src/components/or-input-v3/OrInput.docs.mdx +4 -0
- package/src/components/or-input-v3/OrInput.vue +21 -19
- package/src/components/or-label-v3/OrLabel.docs.mdx +4 -0
- package/src/components/or-link-v3/OrLink.docs.mdx +4 -0
- package/src/components/or-loader-v3/OrLoader.docs.mdx +4 -0
- package/src/components/or-menu-item-v3/OrMenuItem.docs.mdx +4 -0
- package/src/components/or-menu-v3/OrMenu.docs.mdx +4 -0
- package/src/components/or-modal-v3/OrModal.docs.mdx +4 -0
- package/src/components/or-notification-v3/OrNotification.docs.mdx +4 -0
- package/src/components/or-overlay-v3/OrOverlay.docs.mdx +4 -0
- package/src/components/or-popover-v3/OrPopover.docs.mdx +4 -0
- package/src/components/or-progress-v3/OrProgress.docs.mdx +4 -0
- package/src/components/or-radio-v3/OrRadio.docs.mdx +4 -0
- package/src/components/or-radio-v3/OrRadio.stories3.ts +1 -1
- package/src/components/or-search-v3/OrSearch.docs.mdx +4 -0
- package/src/components/or-segmented-control-v3/OrSegmentedControl.docs.mdx +7 -0
- package/src/components/or-segmented-control-v3/OrSegmentedControl.stories3.ts +106 -0
- package/src/components/or-segmented-control-v3/OrSegmentedControl.vue +107 -0
- package/src/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue +64 -0
- package/src/components/or-segmented-control-v3/components/or-segmented-control-item/styles.ts +50 -0
- package/src/components/or-segmented-control-v3/index.ts +3 -0
- package/src/components/or-segmented-control-v3/props.ts +4 -0
- package/src/components/or-segmented-control-v3/styles.ts +24 -0
- package/src/components/or-segmented-control-v3/types.ts +4 -0
- package/src/components/or-select-v3/OrSelect.docs.mdx +4 -0
- package/src/components/or-select-v3/OrSelect.vue +9 -6
- package/src/components/or-sidebar-v3/OrSidebar.docs.mdx +4 -0
- package/src/components/or-skeleton-v3/OrSkeleton.docs.mdx +8 -0
- package/src/components/or-switch-v3/OrSwitch.docs.mdx +4 -0
- package/src/components/or-switch-v3/OrSwitch.stories3.ts +1 -1
- package/src/components/or-tab-v3/OrTab.docs.mdx +4 -0
- package/src/components/or-tabs-v3/OrTabs.docs.mdx +4 -0
- package/src/components/or-tabs-v3/OrTabs.stories3.ts +9 -4
- package/src/components/or-tabs-v3/OrTabs.vue +1 -1
- package/src/components/or-tag-v3/OrTag.docs.mdx +4 -0
- package/src/components/or-teleport-v3/OrTeleport.docs.mdx +4 -0
- package/src/components/or-text-v3/OrText.docs.mdx +4 -0
- package/src/components/or-textarea-v3/OrTextarea.docs.mdx +4 -0
- package/src/components/or-tooltip-v3/OrTooltip.docs.mdx +3 -0
- package/src/components/or-tooltip-v3/OrTooltip.vue +3 -2
- package/src/components/or-tooltip-v3/styles.ts +55 -0
- package/src/directives/index.ts +2 -0
- package/src/hooks/useClassAttribute.ts +1 -1
- package/src/index.ts +1 -0
- package/dist/v2/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts +0 -111
- package/dist/v2/components/or-rich-text-editor-v3/index.d.ts +0 -1
- package/dist/v2/components/or-rich-text-editor-v3/styles.d.ts +0 -7
- package/dist/v3/components/or-rich-text-editor-v3/OrRichTextEditor.vue.d.ts +0 -111
- package/dist/v3/components/or-rich-text-editor-v3/index.d.ts +0 -1
- package/dist/v3/components/or-rich-text-editor-v3/styles.d.ts +0 -7
- package/src/components/or-rich-text-editor-v3/OrRichTextEditor.docs.mdx +0 -16
- package/src/components/or-rich-text-editor-v3/OrRichTextEditor.stories3.ts +0 -57
- package/src/components/or-rich-text-editor-v3/OrRichTextEditor.vue +0 -295
- package/src/components/or-rich-text-editor-v3/index.ts +0 -1
- package/src/components/or-rich-text-editor-v3/styles.ts +0 -71
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
import { defineComponent, ref, computed } from 'vue-demi';
|
|
2
|
+
import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
|
|
3
|
+
import '@vueuse/core';
|
|
4
|
+
import { openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, normalizeClass, resolveComponent, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString } from 'vue';
|
|
5
|
+
|
|
6
|
+
const SegmentedControlItemRoot = [
|
|
7
|
+
// Layout
|
|
8
|
+
'flex', 'items-center', 'justify-center',
|
|
9
|
+
// Shape
|
|
10
|
+
'rounded-md',
|
|
11
|
+
// Interactivity
|
|
12
|
+
'interactivity-auto',
|
|
13
|
+
// Theme
|
|
14
|
+
'theme-foreground-default', 'dark:theme-foreground-default-dark',
|
|
15
|
+
// Theme (selected)
|
|
16
|
+
'selected:theme-background-default', 'dark:selected:theme-background-default-dark',
|
|
17
|
+
// Theme (selected, enabled)
|
|
18
|
+
'selected:enabled:shadow-card', 'dark:selected:enabled:shadow-card-dark'];
|
|
19
|
+
const SegmentedControlItemRootSizes = {
|
|
20
|
+
'm': [
|
|
21
|
+
// Box
|
|
22
|
+
'h-[44px] md:h-[36px]',
|
|
23
|
+
// Spacing
|
|
24
|
+
'px-sm+ md:px-sm+',
|
|
25
|
+
// Typography
|
|
26
|
+
'typography-body-2-regular'],
|
|
27
|
+
's': [
|
|
28
|
+
// Box
|
|
29
|
+
'h-[36px] md:h-[32px]',
|
|
30
|
+
// Spacing
|
|
31
|
+
'px-sm+ md:px-sm',
|
|
32
|
+
// Typography
|
|
33
|
+
'typography-caption-regular']
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
var script$1 = defineComponent({
|
|
37
|
+
name: 'OrSegmentedControlItem',
|
|
38
|
+
inheritAttrs: false,
|
|
39
|
+
props: {
|
|
40
|
+
size: {
|
|
41
|
+
type: String,
|
|
42
|
+
required: true
|
|
43
|
+
},
|
|
44
|
+
selected: {
|
|
45
|
+
type: Boolean,
|
|
46
|
+
default: false
|
|
47
|
+
},
|
|
48
|
+
disabled: {
|
|
49
|
+
type: Boolean,
|
|
50
|
+
default: false
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
setup(props) {
|
|
54
|
+
// Refs
|
|
55
|
+
const root = ref();
|
|
56
|
+
// Styles
|
|
57
|
+
const classAttribute = useClassAttribute();
|
|
58
|
+
const rootStyles = computed(() => ['or-segmented-control-item', ...SegmentedControlItemRoot, ...SegmentedControlItemRootSizes[props.size], classAttribute.value]);
|
|
59
|
+
return {
|
|
60
|
+
root,
|
|
61
|
+
rootStyles
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
const _hoisted_1 = ["selected", "disabled"];
|
|
67
|
+
const _hoisted_2 = {
|
|
68
|
+
class: /*#__PURE__*/normalizeClass(['truncate'])
|
|
69
|
+
};
|
|
70
|
+
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|
71
|
+
return openBlock(), createElementBlock("div", mergeProps({
|
|
72
|
+
ref: "root"
|
|
73
|
+
}, _ctx.$attrs, {
|
|
74
|
+
class: _ctx.rootStyles,
|
|
75
|
+
selected: _ctx.selected ? '' : null,
|
|
76
|
+
disabled: _ctx.disabled ? '' : null,
|
|
77
|
+
onClick: _cache[0] || (_cache[0] = $event => _ctx.$emit('click', $event))
|
|
78
|
+
}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16 /* FULL_PROPS */, _hoisted_1);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
script$1.render = render$1;
|
|
82
|
+
script$1.__file = "src/components/or-segmented-control-v3/components/or-segmented-control-item/OrSegmentedControlItem.vue";
|
|
83
|
+
|
|
84
|
+
var SegmentedControlSize;
|
|
85
|
+
(function (SegmentedControlSize) {
|
|
86
|
+
SegmentedControlSize["M"] = "m";
|
|
87
|
+
SegmentedControlSize["S"] = "s";
|
|
88
|
+
})(SegmentedControlSize || (SegmentedControlSize = {}));
|
|
89
|
+
|
|
90
|
+
const SegmentedControlRoot = [
|
|
91
|
+
// Layout
|
|
92
|
+
'grid', 'grid-flow-col', 'auto-cols-fr',
|
|
93
|
+
// Shape
|
|
94
|
+
'rounded-md',
|
|
95
|
+
// Spacing
|
|
96
|
+
'px-[2px]', 'py-[2px]',
|
|
97
|
+
// Theme
|
|
98
|
+
'theme-background-surface-variant', 'dark:theme-background-surface-variant-dark'];
|
|
99
|
+
const SegmentedControlRootSizes = {
|
|
100
|
+
'm': [],
|
|
101
|
+
's': []
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
var script = defineComponent({
|
|
105
|
+
name: 'OrSegmentedControl',
|
|
106
|
+
components: {
|
|
107
|
+
OrSegmentedControlItem: script$1
|
|
108
|
+
},
|
|
109
|
+
inheritAttrs: false,
|
|
110
|
+
props: {
|
|
111
|
+
options: {
|
|
112
|
+
type: Array,
|
|
113
|
+
default: []
|
|
114
|
+
},
|
|
115
|
+
modelValue: {
|
|
116
|
+
type: String,
|
|
117
|
+
default: undefined
|
|
118
|
+
},
|
|
119
|
+
value: {
|
|
120
|
+
type: String,
|
|
121
|
+
default: undefined
|
|
122
|
+
},
|
|
123
|
+
size: {
|
|
124
|
+
type: String,
|
|
125
|
+
default: SegmentedControlSize.M
|
|
126
|
+
},
|
|
127
|
+
disabled: {
|
|
128
|
+
type: Boolean,
|
|
129
|
+
default: false
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
emits: ['update:modelValue', 'input'],
|
|
133
|
+
expose: ['root'],
|
|
134
|
+
setup(props, context) {
|
|
135
|
+
// Refs
|
|
136
|
+
const root = ref();
|
|
137
|
+
// Styles
|
|
138
|
+
const classAttribute = useClassAttribute();
|
|
139
|
+
const rootStyles = computed(() => ['or-segmented-control', ...SegmentedControlRoot, ...SegmentedControlRootSizes[props.size], classAttribute.value]);
|
|
140
|
+
// State
|
|
141
|
+
const proxyModelValue = computed({
|
|
142
|
+
get: () => {
|
|
143
|
+
var _a;
|
|
144
|
+
return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
|
|
145
|
+
},
|
|
146
|
+
|
|
147
|
+
set: value => {
|
|
148
|
+
context.emit('input', value);
|
|
149
|
+
context.emit('update:modelValue', value);
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
return {
|
|
153
|
+
root,
|
|
154
|
+
rootStyles,
|
|
155
|
+
proxyModelValue
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
|
|
160
|
+
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
161
|
+
const _component_OrSegmentedControlItem = resolveComponent("OrSegmentedControlItem");
|
|
162
|
+
return openBlock(), createElementBlock("div", mergeProps({
|
|
163
|
+
ref: "root"
|
|
164
|
+
}, _ctx.$attrs, {
|
|
165
|
+
class: _ctx.rootStyles
|
|
166
|
+
}), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, option => {
|
|
167
|
+
return openBlock(), createBlock(_component_OrSegmentedControlItem, {
|
|
168
|
+
key: option.value,
|
|
169
|
+
size: _ctx.size,
|
|
170
|
+
selected: option.value === _ctx.proxyModelValue,
|
|
171
|
+
disabled: _ctx.disabled,
|
|
172
|
+
onClick: withModifiers($event => _ctx.proxyModelValue = option.value, ["stop"])
|
|
173
|
+
}, {
|
|
174
|
+
default: withCtx(() => [createTextVNode(toDisplayString(option.label), 1 /* TEXT */)]),
|
|
175
|
+
|
|
176
|
+
_: 2 /* DYNAMIC */
|
|
177
|
+
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["size", "selected", "disabled", "onClick"]);
|
|
178
|
+
}), 128 /* KEYED_FRAGMENT */))], 16 /* FULL_PROPS */);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
script.render = render;
|
|
182
|
+
script.__file = "src/components/or-segmented-control-v3/OrSegmentedControl.vue";
|
|
183
|
+
|
|
184
|
+
export { SegmentedControlSize as S, script as s };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch } from 'vue-demi';
|
|
2
|
+
import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
|
|
2
3
|
import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
|
|
3
4
|
import { u as useOverflow } from './useOverflow-ac506c65.js';
|
|
4
5
|
import '@vueuse/core';
|
|
@@ -8,38 +9,13 @@ import { s as script$3 } from './OrExpansionPanel-1e2a6375.js';
|
|
|
8
9
|
import { s as script$4 } from './OrHint-73835593.js';
|
|
9
10
|
import { s as script$5 } from './OrIcon-b3906e35.js';
|
|
10
11
|
import { s as script$7, a as InputBoxSize } from './OrInputBox-634230b1.js';
|
|
11
|
-
import { s as script$6 } from './OrInput-
|
|
12
|
+
import { s as script$6 } from './OrInput-256d2530.js';
|
|
12
13
|
import { s as script$8 } from './OrLabel-7d4fe80b.js';
|
|
13
14
|
import { s as script$9 } from './OrMenuItem-8773d073.js';
|
|
14
15
|
import { s as script$a } from './OrPopover-3525c670.js';
|
|
15
|
-
import { s as script$b } from './OrTag-
|
|
16
|
+
import { s as script$b } from './OrTag-deaff080.js';
|
|
16
17
|
import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, normalizeClass, createElementVNode, Fragment, renderList, createVNode, withModifiers } from 'vue';
|
|
17
18
|
|
|
18
|
-
const created$1 = (element, binding) => {
|
|
19
|
-
element.addEventListener('keydown', event => {
|
|
20
|
-
event.preventDefault();
|
|
21
|
-
if (['Escape'].includes(event.key)) {
|
|
22
|
-
binding.value(event);
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
const DropdownClose = {
|
|
27
|
-
[isVue3 ? 'created' : 'bind']: created$1
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const created = (element, binding) => {
|
|
31
|
-
element.addEventListener('keydown', event => {
|
|
32
|
-
event.preventDefault();
|
|
33
|
-
if (['Enter', ' '].includes(event.key)) {
|
|
34
|
-
binding.value(event);
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
element.addEventListener('click', binding.value);
|
|
38
|
-
};
|
|
39
|
-
const DropdownOpen = {
|
|
40
|
-
[isVue3 ? 'created' : 'bind']: created
|
|
41
|
-
};
|
|
42
|
-
|
|
43
19
|
const SelectRoot = [
|
|
44
20
|
// Layout
|
|
45
21
|
'flex', 'flex-col',
|
|
@@ -247,11 +223,15 @@ var script = defineComponent({
|
|
|
247
223
|
};
|
|
248
224
|
});
|
|
249
225
|
// Methods
|
|
250
|
-
function
|
|
226
|
+
function toggle() {
|
|
251
227
|
if (!readonly.value && !props.disabled) {
|
|
252
228
|
const popoverInstance = popover.value;
|
|
253
229
|
if (popoverInstance) {
|
|
254
|
-
|
|
230
|
+
if (popoverState.value === 'open') {
|
|
231
|
+
popoverInstance.close();
|
|
232
|
+
} else {
|
|
233
|
+
popoverInstance.open();
|
|
234
|
+
}
|
|
255
235
|
}
|
|
256
236
|
}
|
|
257
237
|
}
|
|
@@ -293,7 +273,7 @@ var script = defineComponent({
|
|
|
293
273
|
internalSearchOptions,
|
|
294
274
|
resolvedSearchOptions,
|
|
295
275
|
groupedOptions,
|
|
296
|
-
|
|
276
|
+
toggle,
|
|
297
277
|
close,
|
|
298
278
|
deselect,
|
|
299
279
|
innerItems,
|
|
@@ -484,7 +464,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
484
464
|
_: 3 /* FORWARDED */
|
|
485
465
|
}, 8 /* PROPS */, ["class", "trigger"])]),
|
|
486
466
|
_: 3 /* FORWARDED */
|
|
487
|
-
}, 8 /* PROPS */, ["class", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.
|
|
467
|
+
}, 8 /* PROPS */, ["class", "size", "invalid", "readonly", "disabled"])), [[_directive_dropdown_open, _ctx.toggle], [_directive_dropdown_close, _ctx.close]]), !_ctx.invalid ? (openBlock(), createBlock(_component_OrHint, {
|
|
488
468
|
key: 1,
|
|
489
469
|
disabled: _ctx.disabled
|
|
490
470
|
}, {
|
|
@@ -166,7 +166,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
166
166
|
}), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs.normal, tab => {
|
|
167
167
|
return openBlock(), createBlock(_component_OrTab, {
|
|
168
168
|
key: tab.value,
|
|
169
|
-
selected:
|
|
169
|
+
selected: tab.value === _ctx.proxyModelValue,
|
|
170
170
|
onClick: withModifiers($event => _ctx.proxyModelValue = tab.value, ["stop"])
|
|
171
171
|
}, {
|
|
172
172
|
default: withCtx(() => [createTextVNode(toDisplayString(tab.label), 1 /* TEXT */)]),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineComponent, ref, computed, watchPostEffect, unref } from 'vue-demi';
|
|
2
2
|
import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
|
|
3
3
|
import '@vueuse/core';
|
|
4
|
-
import { s as script$1 } from './OrIconButton-
|
|
4
|
+
import { s as script$1 } from './OrIconButton-5fb3a9aa.js';
|
|
5
5
|
import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createBlock, normalizeClass, withModifiers, createCommentVNode } from 'vue';
|
|
6
6
|
|
|
7
7
|
var TagVariant;
|
|
@@ -11,11 +11,41 @@ const TooltipBody = [
|
|
|
11
11
|
// Box
|
|
12
12
|
'max-w-max', 'rounded-sm',
|
|
13
13
|
// Sizing
|
|
14
|
-
'px-sm', 'py-xs',
|
|
14
|
+
'mx-sm', 'my-sm', 'px-sm', 'py-xs',
|
|
15
15
|
// Typography
|
|
16
16
|
'typography-caption-regular',
|
|
17
17
|
// Theme
|
|
18
18
|
'bg-inverse-surface', 'dark:bg-inverse-surface-dark', 'text-inverse-on-surface', 'dark:text-inverse-on-surface-dark'];
|
|
19
|
+
const TooltipBodyPlacements = {
|
|
20
|
+
'top': [],
|
|
21
|
+
'top-start': [
|
|
22
|
+
// Sizing
|
|
23
|
+
'ml-none'],
|
|
24
|
+
'top-end': [
|
|
25
|
+
// Sizing
|
|
26
|
+
'mr-none'],
|
|
27
|
+
'bottom': [],
|
|
28
|
+
'bottom-start': [
|
|
29
|
+
// Sizing
|
|
30
|
+
'ml-none'],
|
|
31
|
+
'bottom-end': [
|
|
32
|
+
// Sizing
|
|
33
|
+
'mr-none'],
|
|
34
|
+
'left': [],
|
|
35
|
+
'left-start': [
|
|
36
|
+
// Sizing
|
|
37
|
+
'mt-none'],
|
|
38
|
+
'left-end': [
|
|
39
|
+
// Sizing
|
|
40
|
+
'mb-none'],
|
|
41
|
+
'right': [],
|
|
42
|
+
'right-start': [
|
|
43
|
+
// Sizing
|
|
44
|
+
'mt-none'],
|
|
45
|
+
'right-end': [
|
|
46
|
+
// Sizing
|
|
47
|
+
'mb-none']
|
|
48
|
+
};
|
|
19
49
|
|
|
20
50
|
var script = defineComponent({
|
|
21
51
|
name: 'OrTooltip',
|
|
@@ -35,7 +65,7 @@ var script = defineComponent({
|
|
|
35
65
|
},
|
|
36
66
|
emits: ['update:state'],
|
|
37
67
|
expose: ['root', 'open', 'close'],
|
|
38
|
-
setup() {
|
|
68
|
+
setup(props) {
|
|
39
69
|
// Refs
|
|
40
70
|
const root = ref();
|
|
41
71
|
const popover = ref();
|
|
@@ -46,7 +76,7 @@ var script = defineComponent({
|
|
|
46
76
|
// Styles
|
|
47
77
|
const classAttribute = useClassAttribute();
|
|
48
78
|
const rootStyles = computed(() => ['or-tooltip', ...TooltipRoot, classAttribute.value]);
|
|
49
|
-
const bodyStyles = computed(() => [...TooltipBody]);
|
|
79
|
+
const bodyStyles = computed(() => [...TooltipBody, ...TooltipBodyPlacements[props.placement]]);
|
|
50
80
|
// Methods
|
|
51
81
|
function open() {
|
|
52
82
|
const popoverInstance = popover.value;
|
|
@@ -58,6 +58,7 @@ export * from './or-radio';
|
|
|
58
58
|
export * from './or-radio-group';
|
|
59
59
|
export * from './or-radio-v3';
|
|
60
60
|
export * from './or-search-v3';
|
|
61
|
+
export * from './or-segmented-control-v3';
|
|
61
62
|
export * from './or-select';
|
|
62
63
|
export * from './or-select-v3';
|
|
63
64
|
export * from './or-sidebar';
|
|
@@ -5,7 +5,7 @@ declare const _default: Meta<import("vue").ComponentOptions<import("vue").defaul
|
|
|
5
5
|
[x: number]: string;
|
|
6
6
|
} | {}, true>)>;
|
|
7
7
|
export default _default;
|
|
8
|
-
export declare const
|
|
8
|
+
export declare const Base: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
|
|
9
9
|
[x: string]: ((...args: any[]) => any) | null;
|
|
10
10
|
} | string[], {} & {}, {
|
|
11
11
|
[x: number]: string;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { PropType } from 'vue-demi';
|
|
2
|
+
import { SegmentedControlSize } from './props';
|
|
3
|
+
import { SegmentedControlOption } from './types';
|
|
4
|
+
declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
|
|
5
|
+
root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
|
|
6
|
+
rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
|
|
7
|
+
proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
|
|
8
|
+
}> & import("@vue/composition-api").Data, {}, {}, {
|
|
9
|
+
options: {
|
|
10
|
+
type: PropType<SegmentedControlOption[]>;
|
|
11
|
+
default: SegmentedControlOption[];
|
|
12
|
+
};
|
|
13
|
+
modelValue: {
|
|
14
|
+
type: StringConstructor;
|
|
15
|
+
default: undefined;
|
|
16
|
+
};
|
|
17
|
+
value: {
|
|
18
|
+
type: StringConstructor;
|
|
19
|
+
default: undefined;
|
|
20
|
+
};
|
|
21
|
+
size: {
|
|
22
|
+
type: PropType<SegmentedControlSize>;
|
|
23
|
+
default: SegmentedControlSize;
|
|
24
|
+
};
|
|
25
|
+
disabled: {
|
|
26
|
+
type: BooleanConstructor;
|
|
27
|
+
default: boolean;
|
|
28
|
+
};
|
|
29
|
+
}, import("@vue/composition-api").ExtractPropTypes<{
|
|
30
|
+
options: {
|
|
31
|
+
type: PropType<SegmentedControlOption[]>;
|
|
32
|
+
default: SegmentedControlOption[];
|
|
33
|
+
};
|
|
34
|
+
modelValue: {
|
|
35
|
+
type: StringConstructor;
|
|
36
|
+
default: undefined;
|
|
37
|
+
};
|
|
38
|
+
value: {
|
|
39
|
+
type: StringConstructor;
|
|
40
|
+
default: undefined;
|
|
41
|
+
};
|
|
42
|
+
size: {
|
|
43
|
+
type: PropType<SegmentedControlSize>;
|
|
44
|
+
default: SegmentedControlSize;
|
|
45
|
+
};
|
|
46
|
+
disabled: {
|
|
47
|
+
type: BooleanConstructor;
|
|
48
|
+
default: boolean;
|
|
49
|
+
};
|
|
50
|
+
}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
|
|
51
|
+
options: SegmentedControlOption[];
|
|
52
|
+
modelValue: string;
|
|
53
|
+
value: string;
|
|
54
|
+
size: SegmentedControlSize;
|
|
55
|
+
disabled: boolean;
|
|
56
|
+
} & {} & {
|
|
57
|
+
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
|
58
|
+
}, import("@vue/composition-api").ShallowUnwrapRef<{
|
|
59
|
+
root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
|
|
60
|
+
rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
|
|
61
|
+
proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
|
|
62
|
+
}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
|
|
63
|
+
options: SegmentedControlOption[];
|
|
64
|
+
modelValue: string;
|
|
65
|
+
value: string;
|
|
66
|
+
size: SegmentedControlSize;
|
|
67
|
+
disabled: boolean;
|
|
68
|
+
} & {} & {
|
|
69
|
+
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
|
70
|
+
}, {
|
|
71
|
+
options: SegmentedControlOption[];
|
|
72
|
+
modelValue: string;
|
|
73
|
+
value: string;
|
|
74
|
+
size: SegmentedControlSize;
|
|
75
|
+
disabled: boolean;
|
|
76
|
+
}, true>);
|
|
77
|
+
export default _default;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { PropType } from 'vue-demi';
|
|
2
|
+
import { SegmentedControlSize } from '../../props';
|
|
3
|
+
declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
|
|
4
|
+
root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
|
|
5
|
+
rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
|
|
6
|
+
}> & import("@vue/composition-api").Data, {}, {}, {
|
|
7
|
+
size: {
|
|
8
|
+
type: PropType<SegmentedControlSize>;
|
|
9
|
+
required: true;
|
|
10
|
+
};
|
|
11
|
+
selected: {
|
|
12
|
+
type: BooleanConstructor;
|
|
13
|
+
default: boolean;
|
|
14
|
+
};
|
|
15
|
+
disabled: {
|
|
16
|
+
type: BooleanConstructor;
|
|
17
|
+
default: boolean;
|
|
18
|
+
};
|
|
19
|
+
}, import("@vue/composition-api").ExtractPropTypes<{
|
|
20
|
+
size: {
|
|
21
|
+
type: PropType<SegmentedControlSize>;
|
|
22
|
+
required: true;
|
|
23
|
+
};
|
|
24
|
+
selected: {
|
|
25
|
+
type: BooleanConstructor;
|
|
26
|
+
default: boolean;
|
|
27
|
+
};
|
|
28
|
+
disabled: {
|
|
29
|
+
type: BooleanConstructor;
|
|
30
|
+
default: boolean;
|
|
31
|
+
};
|
|
32
|
+
}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
|
|
33
|
+
size: SegmentedControlSize;
|
|
34
|
+
selected: boolean;
|
|
35
|
+
disabled: boolean;
|
|
36
|
+
} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
|
|
37
|
+
root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
|
|
38
|
+
rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
|
|
39
|
+
}>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
|
|
40
|
+
size: SegmentedControlSize;
|
|
41
|
+
selected: boolean;
|
|
42
|
+
disabled: boolean;
|
|
43
|
+
} & {}, {
|
|
44
|
+
selected: boolean;
|
|
45
|
+
disabled: boolean;
|
|
46
|
+
}, true>);
|
|
47
|
+
export default _default;
|
|
@@ -34,7 +34,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
34
34
|
}[]>;
|
|
35
35
|
resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
|
|
36
36
|
groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
|
|
37
|
-
|
|
37
|
+
toggle: () => void;
|
|
38
38
|
close: () => void;
|
|
39
39
|
deselect: (option: SelectOption) => void;
|
|
40
40
|
innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
|
|
@@ -221,7 +221,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
221
221
|
}[]>;
|
|
222
222
|
resolvedSearchOptions: import("@vue/composition-api").ComputedRef<SelectOption[]>;
|
|
223
223
|
groupedOptions: import("@vue/composition-api").ComputedRef<Record<string, SelectOption[]>>;
|
|
224
|
-
|
|
224
|
+
toggle: () => void;
|
|
225
225
|
close: () => void;
|
|
226
226
|
deselect: (option: SelectOption) => void;
|
|
227
227
|
innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { isVue3 } from 'vue-demi';
|
|
2
|
+
|
|
3
|
+
const created$1 = (element, binding) => {
|
|
4
|
+
element.addEventListener('keydown', event => {
|
|
5
|
+
event.preventDefault();
|
|
6
|
+
if (['Escape'].includes(event.key)) {
|
|
7
|
+
binding.value(event);
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
const DropdownClose = {
|
|
12
|
+
[isVue3 ? 'created' : 'bind']: created$1
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const created = (element, binding) => {
|
|
16
|
+
element.addEventListener('keydown', event => {
|
|
17
|
+
event.preventDefault();
|
|
18
|
+
if (['Enter', ' '].includes(event.key)) {
|
|
19
|
+
binding.value(event);
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
element.addEventListener('click', binding.value);
|
|
23
|
+
};
|
|
24
|
+
const DropdownOpen = {
|
|
25
|
+
[isVue3 ? 'created' : 'bind']: created
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { DropdownClose as D, DropdownOpen as a };
|
package/dist/v3/index.d.ts
CHANGED