@indielayer/ui 1.0.0-alpha.3 → 1.0.0-alpha.5
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/LICENSE +21 -0
- package/README.md +25 -87
- package/lib/components/checkbox/Checkbox.vue.d.ts +1 -1
- package/lib/components/drawer/Drawer.vue.d.ts +3 -3
- package/lib/components/icon/Icon.vue.d.ts +5 -1
- package/lib/components/input/Input.vue.d.ts +1 -1
- package/lib/components/radio/Radio.vue.d.ts +1 -1
- package/lib/components/select/Select.vue.d.ts +1 -1
- package/lib/components/slider/Slider.vue.d.ts +1 -1
- package/lib/components/textarea/Textarea.vue.d.ts +1 -1
- package/lib/components/toggle/Toggle.vue.d.ts +1 -1
- package/lib/composables/colors.d.ts +1 -1
- package/lib/composables/css.d.ts +4 -4
- package/lib/create.d.ts +1 -0
- package/lib/index.cjs.js +2 -2
- package/lib/index.es.js +80 -23
- package/lib/style.css +1 -1
- package/lib/version.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/button/Button.vue +2 -2
- package/src/components/container/Container.vue +1 -1
- package/src/components/icon/Icon.vue +76 -9
- package/src/components/input/Input.vue +2 -1
- package/src/components/menu/MenuItem.vue +1 -1
- package/src/components/tab/TabGroup.vue +1 -1
- package/src/create.ts +4 -2
- package/src/version.ts +1 -1
- package/volar.d.ts +1 -1
package/lib/index.es.js
CHANGED
|
@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
import { inject, defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementBlock, renderSlot, createCommentVNode, Fragment, pushScopeId, popScopeId, createElementVNode, ref, watch, resolveComponent, toDisplayString, createVNode, renderList, createTextVNode, provide, onMounted, onUnmounted, withKeys, withModifiers, withDirectives, vModelCheckbox, Transition, vShow, getCurrentScope, onScopeDispose, getCurrentInstance, onBeforeMount, nextTick, unref, reactive, toRefs,
|
|
20
|
+
import { inject, defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementBlock, renderSlot, createCommentVNode, Fragment, pushScopeId, popScopeId, createElementVNode, ref, watchEffect, mergeProps, watch, resolveComponent, toDisplayString, createVNode, renderList, createTextVNode, provide, onMounted, onUnmounted, withKeys, withModifiers, withDirectives, vModelCheckbox, Transition, vShow, getCurrentScope, onScopeDispose, getCurrentInstance, onBeforeMount, nextTick, unref, reactive, toRefs, Teleport, toHandlers, onBeforeUnmount, TransitionGroup, useCssModule, vModelRadio, vModelSelect } from "vue";
|
|
21
21
|
const isHex = (hex) => /^#(?:[A-Fa-f0-9]{3}){1,2}$/.test(hex);
|
|
22
22
|
const isRGB = (rgb) => /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.test(rgb);
|
|
23
23
|
const isRGBA = (rgba) => /^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$/.test(rgba);
|
|
@@ -365,7 +365,7 @@ const tailwindColors = Object.freeze({
|
|
|
365
365
|
900: "#881337"
|
|
366
366
|
}
|
|
367
367
|
});
|
|
368
|
-
var version = "1.0.0-alpha.
|
|
368
|
+
var version = "1.0.0-alpha.5";
|
|
369
369
|
const injectTabKey = Symbol();
|
|
370
370
|
const injectFormKey = Symbol();
|
|
371
371
|
const injectIconsKey = Symbol();
|
|
@@ -536,7 +536,7 @@ const _hoisted_1$u = {
|
|
|
536
536
|
key: 0,
|
|
537
537
|
class: "flex-none pr-2"
|
|
538
538
|
};
|
|
539
|
-
const _hoisted_2$
|
|
539
|
+
const _hoisted_2$l = {
|
|
540
540
|
key: 1,
|
|
541
541
|
width: "24",
|
|
542
542
|
height: "24",
|
|
@@ -580,7 +580,7 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
580
580
|
default: withCtx(() => [
|
|
581
581
|
_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_1$u, [
|
|
582
582
|
renderSlot(_ctx.$slots, "icon", {}, void 0, true)
|
|
583
|
-
])) : _ctx.type ? (openBlock(), createElementBlock("svg", _hoisted_2$
|
|
583
|
+
])) : _ctx.type ? (openBlock(), createElementBlock("svg", _hoisted_2$l, [
|
|
584
584
|
_ctx.type === "info" ? (openBlock(), createElementBlock("path", _hoisted_3$f)) : createCommentVNode("", true),
|
|
585
585
|
_ctx.type === "success" ? (openBlock(), createElementBlock("path", _hoisted_4$d)) : createCommentVNode("", true),
|
|
586
586
|
_ctx.type === "error" ? (openBlock(), createElementBlock("path", _hoisted_5$7)) : createCommentVNode("", true),
|
|
@@ -649,24 +649,77 @@ const _sfc_main$H = defineComponent({
|
|
|
649
649
|
return "h-9 w-9";
|
|
650
650
|
return "h-5 w-5";
|
|
651
651
|
});
|
|
652
|
+
const isWrapSVG = ref(false);
|
|
653
|
+
const computedIcon = ref("");
|
|
654
|
+
const computedFilled = ref(props.filled);
|
|
655
|
+
const computedViewBox = ref(props.viewBox);
|
|
656
|
+
const attrs = ref({});
|
|
657
|
+
watchEffect(() => {
|
|
658
|
+
const injectedIcon = icons[props.icon];
|
|
659
|
+
isWrapSVG.value = false;
|
|
660
|
+
computedIcon.value = injectedIcon;
|
|
661
|
+
if (injectedIcon) {
|
|
662
|
+
if (typeof injectedIcon === "string") {
|
|
663
|
+
if (injectedIcon.startsWith("<svg")) {
|
|
664
|
+
isWrapSVG.value = true;
|
|
665
|
+
const { content, attributes } = getSVG(injectedIcon);
|
|
666
|
+
attrs.value = attributes;
|
|
667
|
+
computedIcon.value = content;
|
|
668
|
+
} else {
|
|
669
|
+
isWrapSVG.value = false;
|
|
670
|
+
computedIcon.value = injectedIcon;
|
|
671
|
+
}
|
|
672
|
+
} else if (typeof injectedIcon === "object") {
|
|
673
|
+
computedIcon.value = injectedIcon.icon;
|
|
674
|
+
computedFilled.value = injectedIcon.filled || props.filled;
|
|
675
|
+
computedViewBox.value = injectedIcon.viewBox || injectedIcon.viewbox || props.viewBox;
|
|
676
|
+
}
|
|
677
|
+
} else {
|
|
678
|
+
computedIcon.value = props.icon;
|
|
679
|
+
}
|
|
680
|
+
});
|
|
681
|
+
function getSVG(svgString) {
|
|
682
|
+
const temp = document.createElement("template");
|
|
683
|
+
temp.innerHTML = svgString.trim();
|
|
684
|
+
const [svg] = temp.content.children;
|
|
685
|
+
const names = svg.getAttributeNames();
|
|
686
|
+
const attributes = {};
|
|
687
|
+
names.forEach((n) => {
|
|
688
|
+
if (!["height", "width", "class"].includes(n))
|
|
689
|
+
attributes[n] = svg.getAttribute(n);
|
|
690
|
+
});
|
|
691
|
+
return {
|
|
692
|
+
attributes,
|
|
693
|
+
content: svg.innerHTML
|
|
694
|
+
};
|
|
695
|
+
}
|
|
652
696
|
return {
|
|
653
|
-
|
|
697
|
+
attrs,
|
|
698
|
+
isWrapSVG,
|
|
699
|
+
computedIcon,
|
|
700
|
+
computedFilled,
|
|
701
|
+
computedViewBox,
|
|
654
702
|
sizeClasses
|
|
655
703
|
};
|
|
656
704
|
}
|
|
657
705
|
});
|
|
658
|
-
const _hoisted_1$t = ["
|
|
706
|
+
const _hoisted_1$t = ["innerHTML"];
|
|
707
|
+
const _hoisted_2$k = ["stroke-linejoin", "stroke-linecap", "stroke", "fill", "viewBox", "innerHTML"];
|
|
659
708
|
function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
|
|
660
|
-
return openBlock(), createElementBlock("svg", {
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
"stroke-linecap": _ctx.filled ? void 0 : "round",
|
|
666
|
-
"stroke-linejoin": _ctx.filled ? void 0 : "round",
|
|
709
|
+
return _ctx.isWrapSVG ? (openBlock(), createElementBlock("svg", mergeProps({
|
|
710
|
+
key: 0,
|
|
711
|
+
class: ["inline", _ctx.sizeClasses]
|
|
712
|
+
}, _ctx.attrs, { innerHTML: _ctx.computedIcon }), null, 16, _hoisted_1$t)) : (openBlock(), createElementBlock("svg", {
|
|
713
|
+
key: 1,
|
|
667
714
|
xmlns: "http://www.w3.org/2000/svg",
|
|
668
|
-
|
|
669
|
-
|
|
715
|
+
class: normalizeClass(["inline", [_ctx.sizeClasses, { "stroke-2": !_ctx.computedFilled }]]),
|
|
716
|
+
"stroke-linejoin": _ctx.computedFilled ? void 0 : "round",
|
|
717
|
+
"stroke-linecap": _ctx.computedFilled ? void 0 : "round",
|
|
718
|
+
stroke: _ctx.computedFilled ? void 0 : "currentColor",
|
|
719
|
+
fill: _ctx.computedFilled ? "currentColor" : "none",
|
|
720
|
+
viewBox: _ctx.computedViewBox,
|
|
721
|
+
innerHTML: _ctx.computedIcon
|
|
722
|
+
}, null, 10, _hoisted_2$k));
|
|
670
723
|
}
|
|
671
724
|
var XIcon = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$H]]);
|
|
672
725
|
const avatar = "_avatar_v7jzc_2";
|
|
@@ -1095,7 +1148,7 @@ const _sfc_main$C = defineComponent({
|
|
|
1095
1148
|
hover: { bg: !props.loading ? gray[100] : "" },
|
|
1096
1149
|
active: { bg: !props.loading ? gray[200] : "" },
|
|
1097
1150
|
dark: {
|
|
1098
|
-
bg: gray[
|
|
1151
|
+
bg: gray[800],
|
|
1099
1152
|
text: "white",
|
|
1100
1153
|
border: gray[600],
|
|
1101
1154
|
hover: { bg: !props.loading ? gray[800] : "" },
|
|
@@ -1349,7 +1402,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
1349
1402
|
size: _ctx.computedSize,
|
|
1350
1403
|
icon: _ctx.iconRight,
|
|
1351
1404
|
class: normalizeClass(["shrink-0", [
|
|
1352
|
-
[_ctx.$slots.default ? "
|
|
1405
|
+
[_ctx.$slots.default ? "ml-2" : "m-0.5"],
|
|
1353
1406
|
{
|
|
1354
1407
|
invisible: _ctx.loading
|
|
1355
1408
|
}
|
|
@@ -1362,7 +1415,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
1362
1415
|
const cssModules$7 = {
|
|
1363
1416
|
"$style": style0$7
|
|
1364
1417
|
};
|
|
1365
|
-
var XButton = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__cssModules", cssModules$7], ["__scopeId", "data-v-
|
|
1418
|
+
var XButton = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$C], ["__cssModules", cssModules$7], ["__scopeId", "data-v-7ada6753"]]);
|
|
1366
1419
|
var style0$6 = {
|
|
1367
1420
|
"button-group": "_button-group_s7fyl_2",
|
|
1368
1421
|
"button-group--rounded": "_button-group--rounded_s7fyl_1"
|
|
@@ -1888,7 +1941,7 @@ const _sfc_main$x = defineComponent({
|
|
|
1888
1941
|
}
|
|
1889
1942
|
});
|
|
1890
1943
|
function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
|
|
1891
|
-
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { class: "
|
|
1944
|
+
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), { class: "max-w-screen-2xl mx-auto px-4" }, {
|
|
1892
1945
|
default: withCtx(() => [
|
|
1893
1946
|
renderSlot(_ctx.$slots, "default")
|
|
1894
1947
|
]),
|
|
@@ -2922,8 +2975,8 @@ const _sfc_main$r = defineComponent({
|
|
|
2922
2975
|
if (!e.target)
|
|
2923
2976
|
return;
|
|
2924
2977
|
const target = e.target;
|
|
2925
|
-
const value = Number(target.value);
|
|
2926
2978
|
if (props.type === "number") {
|
|
2979
|
+
const value = Number(target.value);
|
|
2927
2980
|
if (typeof props.min !== "undefined") {
|
|
2928
2981
|
if (value < props.min)
|
|
2929
2982
|
target.value = props.min.toString();
|
|
@@ -3165,7 +3218,10 @@ const _sfc_main$p = defineComponent({
|
|
|
3165
3218
|
setup(props, { emit }) {
|
|
3166
3219
|
const elRef = ref();
|
|
3167
3220
|
const isActive = ref(false);
|
|
3168
|
-
const filled = computed(() =>
|
|
3221
|
+
const filled = computed(() => {
|
|
3222
|
+
var _a2;
|
|
3223
|
+
return props.filled || ((_a2 = props.item) == null ? void 0 : _a2.filled);
|
|
3224
|
+
});
|
|
3169
3225
|
const cItem = computed(() => __spreadValues(__spreadValues({}, props), props.item));
|
|
3170
3226
|
const htmlTag = cItem.value.to || cItem.value.href ? "x-link" : "div";
|
|
3171
3227
|
const isSupported = window && "MutationObserver" in window;
|
|
@@ -3358,7 +3414,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
3358
3414
|
const cssModules$2 = {
|
|
3359
3415
|
"$style": style0$2
|
|
3360
3416
|
};
|
|
3361
|
-
var XMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__cssModules", cssModules$2], ["__scopeId", "data-v-
|
|
3417
|
+
var XMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p], ["__cssModules", cssModules$2], ["__scopeId", "data-v-6f9d99e4"]]);
|
|
3362
3418
|
const _sfc_main$o = defineComponent({
|
|
3363
3419
|
name: "XMenu",
|
|
3364
3420
|
components: {
|
|
@@ -5685,7 +5741,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
5685
5741
|
}
|
|
5686
5742
|
var Tab = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
|
|
5687
5743
|
const _sfc_main$3 = defineComponent({
|
|
5688
|
-
name: "
|
|
5744
|
+
name: "XTabGroup",
|
|
5689
5745
|
components: {
|
|
5690
5746
|
XScroll
|
|
5691
5747
|
},
|
|
@@ -6161,6 +6217,7 @@ const create = (createOptions = {}) => {
|
|
|
6161
6217
|
app.component(`${options.prefix}${component.name.slice(1)}`, component);
|
|
6162
6218
|
});
|
|
6163
6219
|
app.provide(injectColorsKey, options.colors);
|
|
6220
|
+
app.provide(injectIconsKey, options.icons);
|
|
6164
6221
|
};
|
|
6165
6222
|
return {
|
|
6166
6223
|
install: install2
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-35ce54d8]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-alert-glow),0 4px 6px -4px var(--x-alert-glow)}.dark ._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-dark-alert-text, var(--x-alert-text));background-color:var(--x-dark-alert-bg, var(--x-alert-bg));border-color:var(--x-dark-alert-border, var(--x-alert-border))}._avatar_v7jzc_2[data-v-243016db]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-243016db]{color:var(--x-dark-avatar-text, var(--x-avatar-text));background-color:var(--x-dark-avatar-bg, var(--x-avatar-bg));border-color:var(--x-dark-avatar-border, var(--x-avatar-border))}._button_1sbr9_2[data-v-
|
|
1
|
+
._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-35ce54d8]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-alert-glow),0 4px 6px -4px var(--x-alert-glow)}.dark ._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-dark-alert-text, var(--x-alert-text));background-color:var(--x-dark-alert-bg, var(--x-alert-bg));border-color:var(--x-dark-alert-border, var(--x-alert-border))}._avatar_v7jzc_2[data-v-243016db]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-243016db]{color:var(--x-dark-avatar-text, var(--x-avatar-text));background-color:var(--x-dark-avatar-bg, var(--x-avatar-bg));border-color:var(--x-dark-avatar-border, var(--x-avatar-border))}._button_1sbr9_2[data-v-7ada6753]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-7ada6753]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-button-glow),0 4px 6px -4px var(--x-button-glow)}._button_1sbr9_2[data-v-7ada6753]:hover{color:var(--x-button-text-hover, var(--x-button-text));background-color:var(--x-button-bg-hover, var(--x-button-bg));border-color:var(--x-button-border-hover, var(--x-button-border))}._button_1sbr9_2[data-v-7ada6753]:active{color:var(--x-button-text-active, var(--x-button-text));background-color:var(--x-button-bg-active, var(--x-button-bg));border-color:var(--x-button-border-active, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-7ada6753]{color:var(--x-dark-button-text, var(--x-button-text));background-color:var(--x-dark-button-bg, var(--x-button-bg));border-color:var(--x-dark-button-border, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-7ada6753]:hover{color:var(--x-dark-button-text-hover, var(--x-dark-button-text, var(--x-button-text)));background-color:var(--x-dark-button-bg-hover, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-hover, var(--x-dark-button-border, var(--x-button-border)))}.dark ._button_1sbr9_2[data-v-7ada6753]:active{color:var(--x-dark-button-text-active, var(--x-dark-button-text));background-color:var(--x-dark-button-bg-active, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-active, var(--x-dark-button-border, var(--x-button-border)))}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-left-width:1px}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}._button-group--rounded_s7fyl_1>:first-of-type{border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-left-width:1px}._button-group--rounded_s7fyl_1>:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}._checkbox--glow_1dz66_1[data-v-54fce636]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}._scrollWrap_1k3q9_2[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2[data-v-ff88aa62]:after{content:"";pointer-events:none;position:absolute;z-index:1;transition:box-shadow .2s}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:after{top:0;bottom:0;width:20px}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:after{right:0;left:0;height:20px}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:before{left:0}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:after{right:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:before{top:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:after{bottom:0}._scrollWrap_1k3q9_2._shadow-left_1k3q9_36[data-v-ff88aa62]:before{box-shadow:inset 12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-right_1k3q9_40[data-v-ff88aa62]:after{box-shadow:inset -12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-top_1k3q9_44[data-v-ff88aa62]:before{box-shadow:inset 0 12px 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-bottom_1k3q9_48[data-v-ff88aa62]:after{box-shadow:inset 0 -12px 10px -10px #00000012}._hideScroll_1k3q9_53[data-v-ff88aa62]{-ms-overflow-style:auto;scrollbar-width:none}._hideScroll_1k3q9_53[data-v-ff88aa62]::-webkit-scrollbar{display:none}._link--shadow_1tilo_1[data-v-b6c57c10]{box-shadow:inset 0 -.315em 0 0 var(--x-shadow)}._link--shadow_1tilo_1[data-v-b6c57c10]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-shadow)}.dark ._link--shadow_1tilo_1[data-v-b6c57c10]{box-shadow:inset 0 -.315em 0 0 var(--x-dark-shadow)}.dark ._link--shadow_1tilo_1[data-v-b6c57c10]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-dark-shadow)}._menu-item_1v1kj_2[data-v-6f9d99e4]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-6f9d99e4]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-6f9d99e4]:hover{color:var(--x-text-hover, var(--x-text));background-color:var(--x-bg-hover, var(--x-bg))}.dark ._menu-item_1v1kj_2[data-v-6f9d99e4]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-6f9d99e4]:hover{color:var(--x-dark-text-hover, var(--x-dark-text));background-color:var(--x-dark-bg-hover, var(--x-dark-bg))}.x-menu-inner ._menu-item_1v1kj_2[data-v-6f9d99e4]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-6f9d99e4]:before{background-color:var(--x-border-hover)}._popover_2vipi_2 ._popoverContent_2vipi_3{visibility:hidden;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,1,1)}._popover_2vipi_2 ._popoverTop_2vipi_8{--tw-translate-y: .5rem}._popover_2vipi_2 ._popoverRight_2vipi_11{--tw-translate-x: -.5rem}._popover_2vipi_2 ._popoverBottom_2vipi_14{--tw-translate-y: -.25rem}._popover_2vipi_2 ._popoverLeft_2vipi_17{--tw-translate-x: .5rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverContent_2vipi_3,._popover_2vipi_2._is-open_2vipi_22 ._popoverContent_2vipi_3{visibility:visible;transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1)}._popover_2vipi_2._hover_2vipi_21:hover ._popoverTop_2vipi_8,._popover_2vipi_2._is-open_2vipi_22 ._popoverTop_2vipi_8{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverRight_2vipi_11,._popover_2vipi_2._is-open_2vipi_22 ._popoverRight_2vipi_11{--tw-translate-x: 0px}._popover_2vipi_2._hover_2vipi_21:hover ._popoverBottom_2vipi_14,._popover_2vipi_2._is-open_2vipi_22 ._popoverBottom_2vipi_14{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverLeft_2vipi_17,._popover_2vipi_2._is-open_2vipi_22 ._popoverLeft_2vipi_17{--tw-translate-x: 0px}._radio--glow_14rlz_1[data-v-857bd200]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}
|
package/lib/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "1.0.0-alpha.
|
|
1
|
+
declare const _default: "1.0.0-alpha.5";
|
|
2
2
|
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@indielayer/ui",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.5",
|
|
4
4
|
"description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "João Teixeira",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"postcss": "^8.4.4",
|
|
63
63
|
"start-server-and-test": "^1.14.0",
|
|
64
64
|
"tailwindcss": "^3.0.0",
|
|
65
|
-
"typescript": "
|
|
65
|
+
"typescript": "~4.6.3",
|
|
66
66
|
"vite": "^2.9.5",
|
|
67
67
|
"vue": "^3.2.33",
|
|
68
68
|
"vue-tsc": "^0.34.15"
|
|
@@ -105,7 +105,7 @@ export default defineComponent({
|
|
|
105
105
|
hover: { bg: !props.loading ? gray[100] : '' },
|
|
106
106
|
active: { bg: !props.loading ? gray[200] : '' },
|
|
107
107
|
dark: {
|
|
108
|
-
bg: gray[
|
|
108
|
+
bg: gray[800],
|
|
109
109
|
text: 'white',
|
|
110
110
|
border: gray[600],
|
|
111
111
|
hover: { bg: !props.loading ? gray[800] : '' },
|
|
@@ -381,7 +381,7 @@ export default defineComponent({
|
|
|
381
381
|
:icon="iconRight"
|
|
382
382
|
class="shrink-0"
|
|
383
383
|
:class="[
|
|
384
|
-
[$slots.default ? '
|
|
384
|
+
[$slots.default ? 'ml-2' : 'm-0.5'],
|
|
385
385
|
{
|
|
386
386
|
invisible: loading,
|
|
387
387
|
},
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { computed, defineComponent, inject } from 'vue'
|
|
2
|
+
import { computed, defineComponent, inject, ref, watchEffect } from 'vue'
|
|
3
3
|
import { useCommon } from '../../composables/common'
|
|
4
4
|
import { injectIconsKey } from '../../composables/keys'
|
|
5
5
|
|
|
@@ -34,8 +34,66 @@ export default defineComponent({
|
|
|
34
34
|
return 'h-5 w-5'
|
|
35
35
|
})
|
|
36
36
|
|
|
37
|
+
const isWrapSVG = ref(false)
|
|
38
|
+
const computedIcon = ref('')
|
|
39
|
+
const computedFilled = ref(props.filled)
|
|
40
|
+
const computedViewBox = ref(props.viewBox)
|
|
41
|
+
const attrs = ref({})
|
|
42
|
+
|
|
43
|
+
watchEffect(() => {
|
|
44
|
+
const injectedIcon = icons[props.icon]
|
|
45
|
+
|
|
46
|
+
isWrapSVG.value = false
|
|
47
|
+
computedIcon.value = injectedIcon
|
|
48
|
+
|
|
49
|
+
if (injectedIcon) {
|
|
50
|
+
if (typeof injectedIcon === 'string') {
|
|
51
|
+
if (injectedIcon.startsWith('<svg')) {
|
|
52
|
+
isWrapSVG.value = true
|
|
53
|
+
|
|
54
|
+
const { content, attributes } = getSVG(injectedIcon)
|
|
55
|
+
|
|
56
|
+
attrs.value = attributes
|
|
57
|
+
computedIcon.value = content
|
|
58
|
+
} else {
|
|
59
|
+
isWrapSVG.value = false
|
|
60
|
+
computedIcon.value = injectedIcon
|
|
61
|
+
}
|
|
62
|
+
} else if (typeof injectedIcon === 'object') {
|
|
63
|
+
computedIcon.value = injectedIcon.icon
|
|
64
|
+
computedFilled.value = injectedIcon.filled || props.filled
|
|
65
|
+
computedViewBox.value = injectedIcon.viewBox || injectedIcon.viewbox || props.viewBox
|
|
66
|
+
}
|
|
67
|
+
} else {
|
|
68
|
+
computedIcon.value = props.icon
|
|
69
|
+
}
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
function getSVG(svgString: string) {
|
|
73
|
+
const temp = document.createElement('template')
|
|
74
|
+
|
|
75
|
+
temp.innerHTML = svgString.trim()
|
|
76
|
+
|
|
77
|
+
const [svg] = temp.content.children
|
|
78
|
+
const names = svg.getAttributeNames()
|
|
79
|
+
const attributes: Record<string, string | null> = {}
|
|
80
|
+
|
|
81
|
+
names.forEach((n) => {
|
|
82
|
+
if (!['height', 'width', 'class'].includes(n)) attributes[n] = svg.getAttribute(n)
|
|
83
|
+
})
|
|
84
|
+
|
|
85
|
+
return {
|
|
86
|
+
attributes,
|
|
87
|
+
content: svg.innerHTML,
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
37
91
|
return {
|
|
38
|
-
|
|
92
|
+
attrs,
|
|
93
|
+
isWrapSVG,
|
|
94
|
+
computedIcon,
|
|
95
|
+
computedFilled,
|
|
96
|
+
computedViewBox,
|
|
39
97
|
sizeClasses,
|
|
40
98
|
}
|
|
41
99
|
},
|
|
@@ -44,13 +102,22 @@ export default defineComponent({
|
|
|
44
102
|
|
|
45
103
|
<template>
|
|
46
104
|
<svg
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
:
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
105
|
+
v-if="isWrapSVG"
|
|
106
|
+
class="inline"
|
|
107
|
+
:class="sizeClasses"
|
|
108
|
+
v-bind="attrs"
|
|
109
|
+
v-html="computedIcon"
|
|
110
|
+
/>
|
|
111
|
+
<svg
|
|
112
|
+
v-else
|
|
53
113
|
xmlns="http://www.w3.org/2000/svg"
|
|
54
|
-
|
|
114
|
+
class="inline"
|
|
115
|
+
:class="[sizeClasses, { 'stroke-2': !computedFilled}]"
|
|
116
|
+
:stroke-linejoin="computedFilled ? undefined : 'round'"
|
|
117
|
+
:stroke-linecap="computedFilled ? undefined : 'round'"
|
|
118
|
+
:stroke="computedFilled ? undefined : 'currentColor'"
|
|
119
|
+
:fill="computedFilled ? 'currentColor' : 'none'"
|
|
120
|
+
:viewBox="computedViewBox"
|
|
121
|
+
v-html="computedIcon"
|
|
55
122
|
/>
|
|
56
123
|
</template>
|
|
@@ -74,9 +74,10 @@ export default defineComponent({
|
|
|
74
74
|
if (!e.target) return
|
|
75
75
|
|
|
76
76
|
const target = (e.target as HTMLInputElement)
|
|
77
|
-
const value = Number(target.value)
|
|
78
77
|
|
|
79
78
|
if (props.type === 'number') {
|
|
79
|
+
const value = Number(target.value)
|
|
80
|
+
|
|
80
81
|
if (typeof props.min !== 'undefined') {
|
|
81
82
|
if (value < props.min) target.value = props.min.toString()
|
|
82
83
|
}
|
|
@@ -46,7 +46,7 @@ export default defineComponent({
|
|
|
46
46
|
const elRef = ref()
|
|
47
47
|
const isActive = ref(false)
|
|
48
48
|
|
|
49
|
-
const filled = computed(() => props.filled || props.item
|
|
49
|
+
const filled = computed(() => props.filled || props.item?.filled)
|
|
50
50
|
const cItem = computed(() => ({
|
|
51
51
|
...props,
|
|
52
52
|
...props.item,
|
package/src/create.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import type { App } from 'vue'
|
|
2
2
|
import type { ColorLibrary } from './composables/colors'
|
|
3
|
-
import { injectColorsKey } from './composables/keys'
|
|
3
|
+
import { injectColorsKey, injectIconsKey } from './composables/keys'
|
|
4
4
|
|
|
5
5
|
export interface IndielayerUIOptions {
|
|
6
6
|
prefix?: string,
|
|
7
7
|
components?: any,
|
|
8
|
-
colors?: ColorLibrary
|
|
8
|
+
colors?: ColorLibrary,
|
|
9
|
+
icons?: any
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
const defaultOptions: IndielayerUIOptions = {
|
|
@@ -26,6 +27,7 @@ const create = (createOptions: IndielayerUIOptions = {}) => {
|
|
|
26
27
|
})
|
|
27
28
|
|
|
28
29
|
app.provide(injectColorsKey, options.colors)
|
|
30
|
+
app.provide(injectIconsKey, options.icons)
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
return {
|
package/src/version.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '1.0.0-alpha.
|
|
1
|
+
export default '1.0.0-alpha.5'
|
package/volar.d.ts
CHANGED
|
@@ -40,7 +40,7 @@ declare module 'vue' {
|
|
|
40
40
|
XTableHeader: typeof import('@indielayer/ui')['XTableHeader']
|
|
41
41
|
XTableRow: typeof import('@indielayer/ui')['XTableRow']
|
|
42
42
|
XTab: typeof import('@indielayer/ui')['XTab']
|
|
43
|
-
|
|
43
|
+
XTabGroup: typeof import('@indielayer/ui')['XTabGroup']
|
|
44
44
|
XTag: typeof import('@indielayer/ui')['XTag']
|
|
45
45
|
XTextarea: typeof import('@indielayer/ui')['XTextarea']
|
|
46
46
|
XToggle: typeof import('@indielayer/ui')['XToggle']
|