@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.es12.js +2 -2
- package/dist/main.es13.js +3 -3
- package/dist/main.es14.js +2 -2
- package/dist/main.es15.js +213 -21
- package/dist/main.es16.js +19 -1051
- package/dist/main.es17.js +1044 -215
- package/dist/main.es18.js +197 -69
- package/dist/main.es19.js +99 -2
- package/dist/main.es2.js +4 -4
- package/dist/main.es20.js +2 -541
- package/dist/main.es21.js +530 -188
- package/dist/main.es22.js +192 -209
- package/dist/main.es24.js +2 -2
- package/dist/main.es5.js +2 -2
- package/dist/main.es6.js +4 -4
- package/dist/main.es9.js +24 -6
- package/package.json +1 -1
- package/src/App.vue +3 -3
- package/src/components/buttons/buttonIcon/index.vue +26 -1
- package/src/components/infoText/index.vue +1 -1
- package/src/components/progressStep/index.vue +129 -0
- package/src/components/progressStep/progressStep.stories.js +58 -0
- package/src/components/tag/conversionTag/index.vue +37 -0
- package/src/components/tag/{proTag → freeTrialTag}/index.vue +10 -4
package/dist/main.es22.js
CHANGED
@@ -1,218 +1,201 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
const
|
10
|
-
|
11
|
-
|
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
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
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
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
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
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
const
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
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
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
key
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
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
|
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
|
-
|
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.
|
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.
|
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.
|
5
|
-
import { capitalize as capitalize2, normalizeClass, normalizeStyle, toDisplayString, toHandlerKey } from "./main.
|
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.
|
2
|
-
import { readonly, ref, shallowRef, unref } from "./main.
|
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.
|
4
|
-
import { toDisplayString } from "./main.
|
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.
|
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: "
|
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:
|
35
|
+
text: $options.textToDisplay,
|
18
36
|
type: "protag",
|
19
37
|
variant: "main"
|
20
|
-
});
|
38
|
+
}, null, 8, ["text"]);
|
21
39
|
}
|
22
|
-
const
|
40
|
+
const ConversionTag = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
23
41
|
export {
|
24
|
-
|
42
|
+
ConversionTag as default
|
25
43
|
};
|
package/package.json
CHANGED
package/src/App.vue
CHANGED
@@ -1,19 +1,19 @@
|
|
1
1
|
<template>
|
2
2
|
<ThemeProvider :style="{ height: '100%' }" :theme="theme">
|
3
3
|
<RouterView />
|
4
|
-
<
|
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
|
11
|
+
import ConversionTag from '@/components/tag/conversionTag'
|
12
12
|
export default {
|
13
13
|
name: 'App',
|
14
14
|
components: {
|
15
15
|
ThemeProvider,
|
16
|
-
|
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 {
|