@eturnity/eturnity_reusable_components 8.26.3 → 8.26.4--EPDM-15979.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/main.es22.js CHANGED
@@ -1,218 +1,201 @@
1
- import styled from "./main.es7.js";
2
- import _sfc_main$1 from "./main.es24.js";
3
- import theme from "./main.es8.js";
4
- import "./main.es3.js";
5
- import _export_sfc from "./main.es11.js";
6
- import { resolveComponent, openBlock, createBlock, withCtx, createVNode, createCommentVNode, createTextVNode } from "./main.es6.js";
7
- import { toDisplayString } from "./main.es21.js";
8
- const PageContainer = styled.div``;
9
- const ButtonAttrs = {
10
- type: String,
11
- isDisabled: Boolean,
12
- minWidth: String,
13
- noWrap: Boolean,
14
- height: String,
15
- variant: String,
16
- buttonSize: String,
17
- appTheme: String
1
+ function makeMap(str, expectsLowerCase) {
2
+ const map = /* @__PURE__ */ Object.create(null);
3
+ const list = str.split(",");
4
+ for (let i = 0; i < list.length; i++) {
5
+ map[list[i]] = true;
6
+ }
7
+ return expectsLowerCase ? (val) => !!map[val.toLowerCase()] : (val) => !!map[val];
8
+ }
9
+ const EMPTY_OBJ = !!(process.env.NODE_ENV !== "production") ? Object.freeze({}) : {};
10
+ const EMPTY_ARR = !!(process.env.NODE_ENV !== "production") ? Object.freeze([]) : [];
11
+ const NOOP = () => {
18
12
  };
19
- const ButtonContainer = styled("div", ButtonAttrs)`
20
- display: flex;
21
- justify-content: center;
22
- padding: ${(props) => {
23
- var _a, _b, _c, _d;
24
- return (_d = (_c = (_b = (_a = props.theme) == null ? void 0 : _a.mainButton) == null ? void 0 : _b.size) == null ? void 0 : _c[props.buttonSize]) == null ? void 0 : _d.padding;
25
- }};
26
- font-size: ${(props) => {
27
- var _a, _b, _c, _d;
28
- return (_d = (_c = (_b = (_a = props.theme) == null ? void 0 : _a.mainButton) == null ? void 0 : _b.size) == null ? void 0 : _c[props.buttonSize]) == null ? void 0 : _d.fontSize;
29
- }};
30
- color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.textColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.textColor};
31
- background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.backgroundColor};
32
- border: ${(props) => {
33
- const borderValue = props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.borderColor : props.theme.mainButton[props.appTheme][props.type][props.variant].default.borderColor;
34
- return borderValue ? "1px solid " + borderValue : "none";
35
- }};
36
- border-radius: 4px;
37
- text-align: center;
38
- cursor: ${(props) => props.isDisabled ? "not-allowed" : "pointer"};
39
- user-select: none;
40
- ${(props) => props.minWidth ? `min-width: ${props.minWidth};` : ""};
41
- ${(props) => props.noWrap ? `white-space: nowrap;` : ""};
42
- height: ${(props) => props.height};
43
- line-height: 1;
44
-
45
- &:hover {
46
- background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].hover.backgroundColor};
47
- }
48
-
49
- &:active {
50
- background-color: ${(props) => props.isDisabled ? props.theme.mainButton[props.appTheme][props.type][props.variant].disabled.backgroundColor : props.theme.mainButton[props.appTheme][props.type][props.variant].active.backgroundColor};
51
- }
52
- `;
53
- const AltAttrs = {
54
- altStyle: Boolean,
55
- color: String
13
+ const NO = () => false;
14
+ const onRE = /^on[^a-z]/;
15
+ const isOn = (key) => onRE.test(key);
16
+ const isModelListener = (key) => key.startsWith("onUpdate:");
17
+ const extend = Object.assign;
18
+ const remove = (arr, el) => {
19
+ const i = arr.indexOf(el);
20
+ if (i > -1) {
21
+ arr.splice(i, 1);
22
+ }
56
23
  };
57
- styled("div", AltAttrs)`
58
- background-color: ${(props) => props.color ? props.color : props.theme.colors.transparentWhite1};
59
- padding: 7px;
60
- height: 100%;
61
- width: 30%;
62
- justify-content: center;
63
- display: flex;
64
- align-items: center;
65
- border-radius: 4px 0 0 4px;
66
- color: ${(props) => props.theme.colors.white};
67
- all: ${(props) => props.altStyle ? "" : "unset"};
68
- `;
69
- styled("span", AltAttrs)`
70
- padding: ${(props) => props.altStyle ? "7px" : "0"};
71
- all: ${(props) => props.altStyle ? "" : "unset"};
72
- `;
73
- const LabelAttrs = {
74
- hasIcon: Boolean
24
+ const hasOwnProperty = Object.prototype.hasOwnProperty;
25
+ const hasOwn = (val, key) => hasOwnProperty.call(val, key);
26
+ const isArray = Array.isArray;
27
+ const isMap = (val) => toTypeString(val) === "[object Map]";
28
+ const isSet = (val) => toTypeString(val) === "[object Set]";
29
+ const isFunction = (val) => typeof val === "function";
30
+ const isString = (val) => typeof val === "string";
31
+ const isObject = (val) => val !== null && typeof val === "object";
32
+ const isPromise = (val) => {
33
+ return isObject(val) && isFunction(val.then) && isFunction(val.catch);
75
34
  };
76
- const LabelComponent = styled("span", LabelAttrs)`
77
- display: flex;
78
- align-items: center;
79
- justify-content: center;
80
- gap: ${(props) => props.hasIcon ? "5px" : "0"};
81
- `;
82
- const _sfc_main = {
83
- name: "MainButton",
84
- components: {
85
- Icon: _sfc_main$1,
86
- LabelComponent,
87
- PageContainer,
88
- ButtonContainer
89
- },
90
- props: {
91
- type: {
92
- required: false,
93
- default: "primary",
94
- // primary, secondary, tertiary, ghost
95
- type: String
96
- },
97
- variant: {
98
- required: false,
99
- default: "main",
100
- // main, cancel
101
- type: String
102
- },
103
- isDisabled: {
104
- required: false,
105
- default: false,
106
- type: Boolean
107
- },
108
- icon: {
109
- required: false,
110
- default: null,
111
- type: String
112
- },
113
- iconColor: {
114
- required: false,
115
- default: "",
116
- type: String
117
- },
118
- iconAltStyle: {
119
- required: false,
120
- default: false,
121
- type: Boolean
122
- },
123
- iconAltStyleColor: {
124
- required: false,
125
- default: null,
126
- type: String
127
- },
128
- text: {
129
- required: true,
130
- type: String
131
- },
132
- noWrap: {
133
- required: false,
134
- default: false,
135
- type: Boolean
136
- },
137
- minWidth: {
138
- required: false,
139
- default: null,
140
- type: String
141
- },
142
- height: {
143
- required: false,
144
- default: "auto",
145
- type: String
146
- },
147
- id: {
148
- required: false,
149
- default: null,
150
- type: String
151
- },
152
- dataId: {
153
- type: String,
154
- default: ""
155
- },
156
- dataQaId: {
157
- type: String,
158
- default: ""
159
- },
160
- appTheme: {
161
- type: String,
162
- default: "light"
163
- },
164
- buttonSize: {
165
- type: String,
166
- default: "medium",
167
- required: false
168
- }
169
- },
170
- computed: {
171
- theme() {
172
- return theme;
173
- },
174
- getIconColor() {
175
- return this.isDisabled ? this.theme.mainButton[this.appTheme][this.type][this.variant].disabled.textColor : this.iconColor ? this.iconColor : this.theme.mainButton[this.appTheme][this.type][this.variant].default.textColor;
176
- }
35
+ const objectToString = Object.prototype.toString;
36
+ const toTypeString = (value) => objectToString.call(value);
37
+ const toRawType = (value) => {
38
+ return toTypeString(value).slice(8, -1);
39
+ };
40
+ const isPlainObject = (val) => toTypeString(val) === "[object Object]";
41
+ const isReservedProp = /* @__PURE__ */ makeMap(
42
+ // the leading comma is intentional so empty string "" is also included
43
+ ",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"
44
+ );
45
+ const isBuiltInDirective = /* @__PURE__ */ makeMap(
46
+ "bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo"
47
+ );
48
+ const cacheStringFunction = (fn) => {
49
+ const cache = /* @__PURE__ */ Object.create(null);
50
+ return (str) => {
51
+ const hit = cache[str];
52
+ return hit || (cache[str] = fn(str));
53
+ };
54
+ };
55
+ const camelizeRE = /-(\w)/g;
56
+ const camelize = cacheStringFunction((str) => {
57
+ return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
58
+ });
59
+ const hyphenateRE = /\B([A-Z])/g;
60
+ const hyphenate = cacheStringFunction(
61
+ (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
62
+ );
63
+ const capitalize = cacheStringFunction(
64
+ (str) => str.charAt(0).toUpperCase() + str.slice(1)
65
+ );
66
+ const toHandlerKey = cacheStringFunction(
67
+ (str) => str ? `on${capitalize(str)}` : ``
68
+ );
69
+ const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
70
+ const invokeArrayFns = (fns, arg) => {
71
+ for (let i = 0; i < fns.length; i++) {
72
+ fns[i](arg);
177
73
  }
178
74
  };
179
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
180
- const _component_Icon = resolveComponent("Icon");
181
- const _component_LabelComponent = resolveComponent("LabelComponent");
182
- const _component_ButtonContainer = resolveComponent("ButtonContainer");
183
- const _component_PageContainer = resolveComponent("PageContainer");
184
- return openBlock(), createBlock(_component_PageContainer, null, {
185
- default: withCtx(() => [createVNode(_component_ButtonContainer, {
186
- id: $props.id,
187
- "app-theme": $props.appTheme,
188
- "button-size": $props.buttonSize,
189
- "data-id": $props.dataId,
190
- "data-qa-id": $props.dataQaId,
191
- height: $props.height,
192
- "is-disabled": $props.isDisabled,
193
- "min-width": $props.minWidth,
194
- "no-wrap": $props.noWrap,
195
- type: $props.type,
196
- variant: $props.variant
197
- }, {
198
- default: withCtx(() => [createVNode(_component_LabelComponent, {
199
- "has-icon": Boolean($props.icon)
200
- }, {
201
- default: withCtx(() => [$props.icon ? (openBlock(), createBlock(_component_Icon, {
202
- key: 0,
203
- color: $options.getIconColor,
204
- "hovered-color": $options.getIconColor,
205
- name: $props.icon,
206
- size: "14px"
207
- }, null, 8, ["color", "hovered-color", "name"])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString($props.text), 1)]),
208
- _: 1
209
- }, 8, ["has-icon"])]),
210
- _: 1
211
- }, 8, ["id", "app-theme", "button-size", "data-id", "data-qa-id", "height", "is-disabled", "min-width", "no-wrap", "type", "variant"])]),
212
- _: 1
75
+ const def = (obj, key, value) => {
76
+ Object.defineProperty(obj, key, {
77
+ configurable: true,
78
+ enumerable: false,
79
+ value
80
+ });
81
+ };
82
+ const looseToNumber = (val) => {
83
+ const n = parseFloat(val);
84
+ return isNaN(n) ? val : n;
85
+ };
86
+ let _globalThis;
87
+ const getGlobalThis = () => {
88
+ return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
89
+ };
90
+ function normalizeStyle(value) {
91
+ if (isArray(value)) {
92
+ const res = {};
93
+ for (let i = 0; i < value.length; i++) {
94
+ const item = value[i];
95
+ const normalized = isString(item) ? parseStringStyle(item) : normalizeStyle(item);
96
+ if (normalized) {
97
+ for (const key in normalized) {
98
+ res[key] = normalized[key];
99
+ }
100
+ }
101
+ }
102
+ return res;
103
+ } else if (isString(value)) {
104
+ return value;
105
+ } else if (isObject(value)) {
106
+ return value;
107
+ }
108
+ }
109
+ const listDelimiterRE = /;(?![^(]*\))/g;
110
+ const propertyDelimiterRE = /:([^]+)/;
111
+ const styleCommentRE = /\/\*[^]*?\*\//g;
112
+ function parseStringStyle(cssText) {
113
+ const ret = {};
114
+ cssText.replace(styleCommentRE, "").split(listDelimiterRE).forEach((item) => {
115
+ if (item) {
116
+ const tmp = item.split(propertyDelimiterRE);
117
+ tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
118
+ }
213
119
  });
120
+ return ret;
121
+ }
122
+ function normalizeClass(value) {
123
+ let res = "";
124
+ if (isString(value)) {
125
+ res = value;
126
+ } else if (isArray(value)) {
127
+ for (let i = 0; i < value.length; i++) {
128
+ const normalized = normalizeClass(value[i]);
129
+ if (normalized) {
130
+ res += normalized + " ";
131
+ }
132
+ }
133
+ } else if (isObject(value)) {
134
+ for (const name in value) {
135
+ if (value[name]) {
136
+ res += name + " ";
137
+ }
138
+ }
139
+ }
140
+ return res.trim();
214
141
  }
215
- const RCButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
142
+ const toDisplayString = (val) => {
143
+ return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val);
144
+ };
145
+ const replacer = (_key, val) => {
146
+ if (val && val.__v_isRef) {
147
+ return replacer(_key, val.value);
148
+ } else if (isMap(val)) {
149
+ return {
150
+ [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => {
151
+ entries[`${key} =>`] = val2;
152
+ return entries;
153
+ }, {})
154
+ };
155
+ } else if (isSet(val)) {
156
+ return {
157
+ [`Set(${val.size})`]: [...val.values()]
158
+ };
159
+ } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
160
+ return String(val);
161
+ }
162
+ return val;
163
+ };
216
164
  export {
217
- RCButton as default
165
+ EMPTY_ARR,
166
+ EMPTY_OBJ,
167
+ NO,
168
+ NOOP,
169
+ camelize,
170
+ capitalize,
171
+ def,
172
+ extend,
173
+ getGlobalThis,
174
+ hasChanged,
175
+ hasOwn,
176
+ hyphenate,
177
+ invokeArrayFns,
178
+ isArray,
179
+ isBuiltInDirective,
180
+ isFunction,
181
+ isMap,
182
+ isModelListener,
183
+ isObject,
184
+ isOn,
185
+ isPlainObject,
186
+ isPromise,
187
+ isReservedProp,
188
+ isSet,
189
+ isString,
190
+ looseToNumber,
191
+ makeMap,
192
+ normalizeClass,
193
+ normalizeStyle,
194
+ objectToString,
195
+ parseStringStyle,
196
+ remove,
197
+ toDisplayString,
198
+ toHandlerKey,
199
+ toRawType,
200
+ toTypeString
218
201
  };
package/dist/main.es24.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import "./main.es3.js";
2
2
  import styled from "./main.es7.js";
3
3
  import { fetchIcon } from "./main.es377.js";
4
- import { reactive } from "./main.es16.js";
4
+ import { reactive } from "./main.es17.js";
5
5
  import { computed, onMounted, watch, openBlock, createBlock, withCtx, createVNode, createElementVNode as createBaseVNode, createTextVNode, createCommentVNode } from "./main.es6.js";
6
- import { toDisplayString } from "./main.es21.js";
6
+ import { toDisplayString } from "./main.es22.js";
7
7
  const _hoisted_1 = ["innerHTML"];
8
8
  const _sfc_main = {
9
9
  __name: "index",
package/dist/main.es5.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { isRuntimeOnly, warn, createRenderer, callWithAsyncErrorHandling } from "./main.es6.js";
2
2
  import { Comment, Fragment, Static, Teleport, Text, callWithErrorHandling, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, createVNode, defineComponent, devtools, getCurrentInstance, guardReactiveProps, h, handleError, initCustomFormatter, inject, isVNode, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onServerPrefetch, onUnmounted, onUpdated, openBlock, provide, queuePostFlushCb, renderList, renderSlot, resolveComponent, resolveDynamicComponent, setBlockTracking, setDevtoolsHook, ssrContextKey, useSSRContext, version, watch, watchEffect, withCtx, withDirectives } from "./main.es6.js";
3
3
  import { isFunction, isHTMLTag, isSVGTag, isString, looseToNumber, isArray, invokeArrayFns, hyphenate, extend, isOn, isModelListener, capitalize, isSpecialBooleanAttr, includeBooleanAttr } from "./main.es23.js";
4
- import { camelize } from "./main.es21.js";
5
- import { capitalize as capitalize2, normalizeClass, normalizeStyle, toDisplayString, toHandlerKey } from "./main.es21.js";
4
+ import { camelize } from "./main.es22.js";
5
+ import { capitalize as capitalize2, normalizeClass, normalizeStyle, toDisplayString, toHandlerKey } from "./main.es22.js";
6
6
  const svgNS = "http://www.w3.org/2000/svg";
7
7
  const doc = typeof document !== "undefined" ? document : null;
8
8
  const templateContainer = doc && /* @__PURE__ */ doc.createElement("template");
package/dist/main.es6.js CHANGED
@@ -1,7 +1,7 @@
1
- import { isRef, toRaw, getCurrentScope, isShallow as isShallow$1, isReactive, ReactiveEffect, isProxy, computed as computed$1, pauseTracking, resetTracking, isReadonly, track, proxyRefs, markRaw, shallowReadonly, EffectScope, reactive, shallowReactive, trigger } from "./main.es16.js";
2
- import { readonly, ref, shallowRef, unref } from "./main.es16.js";
3
- import { isString, isFunction, getGlobalThis, isArray, NOOP, EMPTY_OBJ, normalizeClass, isObject, extend, normalizeStyle, isOn, isPromise, hasChanged, remove, isSet, isMap, isPlainObject, camelize, capitalize, toHandlerKey, hasOwn, EMPTY_ARR, NO, isBuiltInDirective, isReservedProp, invokeArrayFns, makeMap, looseToNumber, hyphenate, def, toRawType, isModelListener } from "./main.es21.js";
4
- import { toDisplayString } from "./main.es21.js";
1
+ import { isRef, toRaw, getCurrentScope, isShallow as isShallow$1, isReactive, ReactiveEffect, isProxy, computed as computed$1, pauseTracking, resetTracking, isReadonly, track, proxyRefs, markRaw, shallowReadonly, EffectScope, reactive, shallowReactive, trigger } from "./main.es17.js";
2
+ import { readonly, ref, shallowRef, unref } from "./main.es17.js";
3
+ import { isString, isFunction, getGlobalThis, isArray, NOOP, EMPTY_OBJ, normalizeClass, isObject, extend, normalizeStyle, isOn, isPromise, hasChanged, remove, isSet, isMap, isPlainObject, camelize, capitalize, toHandlerKey, hasOwn, EMPTY_ARR, NO, isBuiltInDirective, isReservedProp, invokeArrayFns, makeMap, looseToNumber, hyphenate, def, toRawType, isModelListener } from "./main.es22.js";
4
+ import { toDisplayString } from "./main.es22.js";
5
5
  const stack = [];
6
6
  function pushWarningContext(vnode) {
7
7
  stack.push(vnode);
package/dist/main.es9.js CHANGED
@@ -1,11 +1,29 @@
1
- import RCButton from "./main.es22.js";
1
+ import RCButton from "./main.es15.js";
2
2
  import "./main.es3.js";
3
3
  import _export_sfc from "./main.es11.js";
4
4
  import { resolveComponent, openBlock, createBlock } from "./main.es6.js";
5
5
  const _sfc_main = {
6
- name: "ProTag",
6
+ name: "ConversionTag",
7
7
  components: {
8
8
  RCButton
9
+ },
10
+ props: {
11
+ text: {
12
+ type: String,
13
+ default: "PRO"
14
+ },
15
+ isUpperCase: {
16
+ type: Boolean,
17
+ default: true
18
+ }
19
+ },
20
+ computed: {
21
+ textToDisplay() {
22
+ if (this.isUpperCase) {
23
+ return this.text.toUpperCase();
24
+ }
25
+ return this.text;
26
+ }
9
27
  }
10
28
  };
11
29
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -14,12 +32,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
14
32
  "button-size": "tiny",
15
33
  icon: "star",
16
34
  "icon-color": "yellow",
17
- text: "PRO",
35
+ text: $options.textToDisplay,
18
36
  type: "protag",
19
37
  variant: "main"
20
- });
38
+ }, null, 8, ["text"]);
21
39
  }
22
- const ProTag = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
40
+ const ConversionTag = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
23
41
  export {
24
- ProTag as default
42
+ ConversionTag as default
25
43
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "8.26.3",
3
+ "version": "8.26.4--EPDM-15979.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
package/src/App.vue CHANGED
@@ -1,19 +1,19 @@
1
1
  <template>
2
2
  <ThemeProvider :style="{ height: '100%' }" :theme="theme">
3
3
  <RouterView />
4
- <ProTag />
4
+ <ConversionTag />
5
5
  </ThemeProvider>
6
6
  </template>
7
7
 
8
8
  <script>
9
9
  import { ThemeProvider } from 'vue3-styled-components'
10
10
  import theme from '@/assets/theme.js'
11
- import ProTag from '@/components/tag/proTag'
11
+ import ConversionTag from '@/components/tag/conversionTag'
12
12
  export default {
13
13
  name: 'App',
14
14
  components: {
15
15
  ThemeProvider,
16
- ProTag,
16
+ ConversionTag,
17
17
  },
18
18
  setup() {
19
19
  return {
@@ -50,6 +50,7 @@
50
50
  numberCount
51
51
  }}</NumberText>
52
52
  </NumberContainer>
53
+ <BetaTag v-if="isBeta" :is-disabled="isDisabled"> Beta </BetaTag>
53
54
  </ButtonWrapper>
54
55
  </PageContainer>
55
56
  </template>
@@ -70,7 +71,9 @@
70
71
  import styled from 'vue3-styled-components'
71
72
  import Theme from '@/assets/theme'
72
73
 
73
- const PageContainer = styled.div``
74
+ const PageContainer = styled.div`
75
+ position: relative;
76
+ `
74
77
 
75
78
  const ButtonAttrs = {
76
79
  type: String,
@@ -200,6 +203,23 @@
200
203
  background-color: ${(props) => props.theme.semanticColors.purple[50]};
201
204
  `
202
205
 
206
+ const BetaTag = styled('div', { isDisabled: Boolean })`
207
+ position: absolute;
208
+ top: -5px;
209
+ right: -8px;
210
+ padding: 4px;
211
+ border-radius: 4px;
212
+ font-size: 10px;
213
+ background-color: ${(props) =>
214
+ props.isDisabled
215
+ ? props.theme.colors.disabled
216
+ : props.theme.semanticColors.red[500]};
217
+ color: ${(props) => props.theme.colors.white};
218
+ font-weight: 700;
219
+ transform: rotate(20deg);
220
+ cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
221
+ `
222
+
203
223
  export default {
204
224
  name: 'ButtonIcon',
205
225
  components: {
@@ -210,6 +230,7 @@
210
230
  Icon,
211
231
  NumberContainer,
212
232
  NumberText,
233
+ BetaTag,
213
234
  },
214
235
  props: {
215
236
  type: {
@@ -293,6 +314,10 @@
293
314
  type: String,
294
315
  default: 'auto',
295
316
  },
317
+ isBeta: {
318
+ type: Boolean,
319
+ default: false,
320
+ },
296
321
  },
297
322
  data() {
298
323
  return {
@@ -488,7 +488,7 @@
488
488
  }
489
489
 
490
490
  const showInfo = async () => {
491
- isVisible.value = true
491
+ isVisible.value = true && !props.hideInfoText
492
492
  // Wait for two render cycles to ensure content is stable
493
493
  await nextTick()
494
494
  await nextTick()