@threadlabs/looma 0.23.22 → 0.23.23
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/components/ui-button/ui-button.html +68 -2
- package/components/ui-separator/ui-separator.html +8 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-button.css +39 -0
- package/styles/ui-separator.css +6 -2
- package/vanilla/UiButton.d.ts +1 -1
- package/vanilla/UiButton.js +126 -10
- package/vanilla/UiSeparator.d.ts +1 -0
- package/vanilla/UiSeparator.js +6 -4
- package/vue/UiButton.d.ts +18 -6
- package/vue/UiButton.vue +269 -8
- package/vue/UiListItem.d.ts +1 -1
- package/vue/UiSection.d.ts +1 -1
- package/vue/UiSeparator.d.ts +9 -0
- package/vue/UiSeparator.vue +28 -2
- package/vue/chunks/UiButton.js +196 -12
- package/vue/chunks/UiSeparator.js +29 -2
- package/vue/components.css +88 -49
package/vue/chunks/UiButton.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
|
|
2
2
|
import { n as preserveRootFocus, r as useComponentHost, t as createDispatch } from "./host.js";
|
|
3
3
|
import { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
|
|
4
|
+
import { t as UiIcon_default } from "./UiIcon.js";
|
|
4
5
|
import { t as UiSpinner_default } from "./UiSpinner.js";
|
|
5
|
-
import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
|
|
6
|
+
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
|
|
6
7
|
//#region .build/vue/UiButton.vue?vue&type=script&setup=true&lang.ts
|
|
7
8
|
var _hoisted_1 = [
|
|
8
9
|
"href",
|
|
@@ -27,11 +28,61 @@ var _hoisted_1 = [
|
|
|
27
28
|
"data-variant",
|
|
28
29
|
"data-ui-button-state"
|
|
29
30
|
];
|
|
30
|
-
var _hoisted_2 = {
|
|
31
|
+
var _hoisted_2 = { class: "card-icon" };
|
|
32
|
+
var _hoisted_3 = { class: "card-content" };
|
|
33
|
+
var _hoisted_4 = { class: "card-action" };
|
|
34
|
+
var _hoisted_5 = [
|
|
35
|
+
"type",
|
|
36
|
+
"disabled",
|
|
37
|
+
"aria-disabled",
|
|
38
|
+
"aria-busy",
|
|
39
|
+
"data-align",
|
|
40
|
+
"data-as",
|
|
41
|
+
"data-disabled",
|
|
42
|
+
"data-href",
|
|
43
|
+
"data-loading",
|
|
44
|
+
"data-pending",
|
|
45
|
+
"data-rel",
|
|
46
|
+
"data-shape",
|
|
47
|
+
"data-size",
|
|
48
|
+
"data-stretch",
|
|
49
|
+
"data-target",
|
|
50
|
+
"data-tone",
|
|
51
|
+
"data-type",
|
|
52
|
+
"data-variant",
|
|
53
|
+
"data-ui-button-state"
|
|
54
|
+
];
|
|
55
|
+
var _hoisted_6 = { class: "card-icon" };
|
|
56
|
+
var _hoisted_7 = { class: "card-content" };
|
|
57
|
+
var _hoisted_8 = { class: "card-action" };
|
|
58
|
+
var _hoisted_9 = [
|
|
59
|
+
"href",
|
|
60
|
+
"target",
|
|
61
|
+
"rel",
|
|
62
|
+
"aria-disabled",
|
|
63
|
+
"aria-busy",
|
|
64
|
+
"tabindex",
|
|
65
|
+
"data-align",
|
|
66
|
+
"data-as",
|
|
67
|
+
"data-disabled",
|
|
68
|
+
"data-href",
|
|
69
|
+
"data-loading",
|
|
70
|
+
"data-pending",
|
|
71
|
+
"data-rel",
|
|
72
|
+
"data-shape",
|
|
73
|
+
"data-size",
|
|
74
|
+
"data-stretch",
|
|
75
|
+
"data-target",
|
|
76
|
+
"data-tone",
|
|
77
|
+
"data-type",
|
|
78
|
+
"data-variant",
|
|
79
|
+
"data-ui-button-state"
|
|
80
|
+
];
|
|
81
|
+
var _hoisted_10 = {
|
|
31
82
|
key: 0,
|
|
32
83
|
class: "spinner-wrap"
|
|
33
84
|
};
|
|
34
|
-
var
|
|
85
|
+
var _hoisted_11 = [
|
|
35
86
|
"type",
|
|
36
87
|
"disabled",
|
|
37
88
|
"aria-disabled",
|
|
@@ -52,7 +103,7 @@ var _hoisted_3 = [
|
|
|
52
103
|
"data-variant",
|
|
53
104
|
"data-ui-button-state"
|
|
54
105
|
];
|
|
55
|
-
var
|
|
106
|
+
var _hoisted_12 = {
|
|
56
107
|
key: 0,
|
|
57
108
|
class: "spinner-wrap"
|
|
58
109
|
};
|
|
@@ -277,13 +328,14 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
277
328
|
},
|
|
278
329
|
required: false,
|
|
279
330
|
target: { attribute: "variant" },
|
|
280
|
-
description: "Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it.",
|
|
331
|
+
description: "Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the\n same tone on a full-width action with an icon slot, wrapping content, and a centered action slot.",
|
|
281
332
|
values: [
|
|
282
333
|
"outline",
|
|
283
334
|
"solid",
|
|
284
335
|
"danger",
|
|
285
336
|
"ghost",
|
|
286
|
-
"link"
|
|
337
|
+
"link",
|
|
338
|
+
"card"
|
|
287
339
|
],
|
|
288
340
|
default: "outline"
|
|
289
341
|
}
|
|
@@ -438,8 +490,64 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
438
490
|
false: null
|
|
439
491
|
}, concat(checkedProps.value.loading || checkedProps.value.pending)));
|
|
440
492
|
});
|
|
493
|
+
let guardedBinding4Previous = null;
|
|
494
|
+
const guardedBinding4 = computed(() => {
|
|
495
|
+
if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
496
|
+
true: null,
|
|
497
|
+
false: checkedProps.value.href
|
|
498
|
+
}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending)) === Symbol.for("html-next.invalid-result")) return guardedBinding4Previous;
|
|
499
|
+
return guardedBinding4Previous = attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
500
|
+
true: null,
|
|
501
|
+
false: checkedProps.value.href
|
|
502
|
+
}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending)));
|
|
503
|
+
});
|
|
504
|
+
let guardedBinding5Previous = null;
|
|
505
|
+
const guardedBinding5 = computed(() => {
|
|
506
|
+
if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
507
|
+
true: "true",
|
|
508
|
+
false: null
|
|
509
|
+
}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending)) === Symbol.for("html-next.invalid-result")) return guardedBinding5Previous;
|
|
510
|
+
return guardedBinding5Previous = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
511
|
+
true: "true",
|
|
512
|
+
false: null
|
|
513
|
+
}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending)) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
514
|
+
true: "true",
|
|
515
|
+
false: null
|
|
516
|
+
}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
517
|
+
true: "true",
|
|
518
|
+
false: null
|
|
519
|
+
}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending)));
|
|
520
|
+
});
|
|
521
|
+
let guardedBinding6Previous = null;
|
|
522
|
+
const guardedBinding6 = computed(() => {
|
|
523
|
+
if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
524
|
+
true: "0",
|
|
525
|
+
false: null
|
|
526
|
+
}, concat((checkedProps.value.loading || checkedProps.value.pending) && !checkedProps.value.disabled)) === Symbol.for("html-next.invalid-result")) return guardedBinding6Previous;
|
|
527
|
+
return guardedBinding6Previous = attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
528
|
+
true: "0",
|
|
529
|
+
false: null
|
|
530
|
+
}, concat((checkedProps.value.loading || checkedProps.value.pending) && !checkedProps.value.disabled)));
|
|
531
|
+
});
|
|
532
|
+
let guardedBinding7Previous = null;
|
|
533
|
+
const guardedBinding7 = computed(() => {
|
|
534
|
+
if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
535
|
+
true: "true",
|
|
536
|
+
false: null
|
|
537
|
+
}, concat(checkedProps.value.loading || checkedProps.value.pending)) === Symbol.for("html-next.invalid-result")) return guardedBinding7Previous;
|
|
538
|
+
return guardedBinding7Previous = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
539
|
+
true: "true",
|
|
540
|
+
false: null
|
|
541
|
+
}, concat(checkedProps.value.loading || checkedProps.value.pending)) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
542
|
+
true: "true",
|
|
543
|
+
false: null
|
|
544
|
+
}, concat(checkedProps.value.loading || checkedProps.value.pending))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
545
|
+
true: "true",
|
|
546
|
+
false: null
|
|
547
|
+
}, concat(checkedProps.value.loading || checkedProps.value.pending)));
|
|
548
|
+
});
|
|
441
549
|
const hydrationNode = hydrationInstance?.vnode.el;
|
|
442
|
-
if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== (checkedProps.value.as === "a" ? "a" : "button"))) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-button> has an incompatible root."), {
|
|
550
|
+
if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== (checkedProps.value.variant === "card" && checkedProps.value.as === "a" ? "a" : checkedProps.value.variant === "card" ? "button" : checkedProps.value.as === "a" ? "a" : "button"))) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-button> has an incompatible root."), {
|
|
443
551
|
name: "HtmlDiagnosticError",
|
|
444
552
|
diagnostic: Object.freeze({
|
|
445
553
|
code: "HR005",
|
|
@@ -512,7 +620,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
512
620
|
return values.map((value) => value === null ? "" : String(value)).join("");
|
|
513
621
|
}
|
|
514
622
|
return (_ctx, _cache) => {
|
|
515
|
-
return checkedProps.value.as === "a" ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
|
|
623
|
+
return checkedProps.value.variant === "card" && checkedProps.value.as === "a" ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
|
|
516
624
|
key: 0,
|
|
517
625
|
"data-component": "ui-button"
|
|
518
626
|
}, nativeAttrs(_ctx.$attrs), {
|
|
@@ -538,10 +646,20 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
538
646
|
"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
|
|
539
647
|
"data-ui-button-state": hostState.value || void 0,
|
|
540
648
|
ref: "@html-next/root"
|
|
541
|
-
}), [
|
|
649
|
+
}), [
|
|
650
|
+
createElementVNode("span", _hoisted_2, [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createBlock(UiSpinner_default, {
|
|
651
|
+
key: 0,
|
|
652
|
+
size: "sm"
|
|
653
|
+
})) : createCommentVNode("v-if", true), !(checkedProps.value.loading || checkedProps.value.pending) ? renderSlot(_ctx.$slots, "icon", {}, void 0, true, 1) : createCommentVNode("v-if", true)]),
|
|
654
|
+
createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
|
|
655
|
+
createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "action", {}, () => [createVNode(UiIcon_default, {
|
|
656
|
+
name: "chevron-right",
|
|
657
|
+
"aria-hidden": "true"
|
|
658
|
+
})], true)])
|
|
659
|
+
], 16, _hoisted_1)), [[unref(vPropValidity), {
|
|
542
660
|
contract: propValidityContract,
|
|
543
661
|
values: { ...props }
|
|
544
|
-
}]]) : withDirectives((openBlock(), createElementBlock("button", mergeProps({
|
|
662
|
+
}]]) : checkedProps.value.variant === "card" ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
|
|
545
663
|
key: 1,
|
|
546
664
|
"data-component": "ui-button"
|
|
547
665
|
}, nativeAttrs(_ctx.$attrs), {
|
|
@@ -565,12 +683,78 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
565
683
|
"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
|
|
566
684
|
"data-ui-button-state": hostState.value || void 0,
|
|
567
685
|
ref: "@html-next/root"
|
|
568
|
-
}), [
|
|
686
|
+
}), [
|
|
687
|
+
createElementVNode("span", _hoisted_6, [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createBlock(UiSpinner_default, {
|
|
688
|
+
key: 0,
|
|
689
|
+
size: "sm"
|
|
690
|
+
})) : createCommentVNode("v-if", true), !(checkedProps.value.loading || checkedProps.value.pending) ? renderSlot(_ctx.$slots, "icon", {}, void 0, true, 1) : createCommentVNode("v-if", true)]),
|
|
691
|
+
createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
|
|
692
|
+
createElementVNode("span", _hoisted_8, [renderSlot(_ctx.$slots, "action", {}, () => [createVNode(UiIcon_default, {
|
|
693
|
+
name: "chevron-right",
|
|
694
|
+
"aria-hidden": "true"
|
|
695
|
+
})], true)])
|
|
696
|
+
], 16, _hoisted_5)), [[unref(vPropValidity), {
|
|
697
|
+
contract: propValidityContract,
|
|
698
|
+
values: { ...props }
|
|
699
|
+
}]]) : checkedProps.value.as === "a" ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
|
|
700
|
+
key: 2,
|
|
701
|
+
"data-component": "ui-button"
|
|
702
|
+
}, nativeAttrs(_ctx.$attrs), {
|
|
703
|
+
href: guardedBinding4.value,
|
|
704
|
+
target: checkedProps.value.target ?? void 0,
|
|
705
|
+
rel: checkedProps.value.rel ?? void 0,
|
|
706
|
+
"aria-disabled": guardedBinding5.value,
|
|
707
|
+
"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
|
|
708
|
+
tabindex: guardedBinding6.value,
|
|
709
|
+
"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
|
|
710
|
+
"data-as": reflectedProp("as", "as", checkedProps.value.as, void 0, false),
|
|
711
|
+
"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
|
|
712
|
+
"data-href": reflectedProp("href", "href", checkedProps.value.href, void 0, false),
|
|
713
|
+
"data-loading": reflectedProp("loading", "loading", checkedProps.value.loading, void 0, false),
|
|
714
|
+
"data-pending": reflectedProp("pending", "pending", checkedProps.value.pending, void 0, false),
|
|
715
|
+
"data-rel": reflectedProp("rel", "rel", checkedProps.value.rel, void 0, false),
|
|
716
|
+
"data-shape": reflectedProp("shape", "shape", checkedProps.value.shape, void 0, false),
|
|
717
|
+
"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
|
|
718
|
+
"data-stretch": reflectedProp("stretch", "stretch", checkedProps.value.stretch, void 0, false),
|
|
719
|
+
"data-target": reflectedProp("target", "target", checkedProps.value.target, void 0, false),
|
|
720
|
+
"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
|
|
721
|
+
"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
|
|
722
|
+
"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
|
|
723
|
+
"data-ui-button-state": hostState.value || void 0,
|
|
724
|
+
ref: "@html-next/root"
|
|
725
|
+
}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_10, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_9)), [[unref(vPropValidity), {
|
|
726
|
+
contract: propValidityContract,
|
|
727
|
+
values: { ...props }
|
|
728
|
+
}]]) : withDirectives((openBlock(), createElementBlock("button", mergeProps({
|
|
729
|
+
key: 3,
|
|
730
|
+
"data-component": "ui-button"
|
|
731
|
+
}, nativeAttrs(_ctx.$attrs), {
|
|
732
|
+
type: checkedProps.value.type ?? void 0,
|
|
733
|
+
disabled: checkedProps.value.disabled ?? void 0,
|
|
734
|
+
"aria-disabled": guardedBinding7.value,
|
|
735
|
+
"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
|
|
736
|
+
"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
|
|
737
|
+
"data-as": reflectedProp("as", "as", checkedProps.value.as, void 0, false),
|
|
738
|
+
"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
|
|
739
|
+
"data-href": reflectedProp("href", "href", checkedProps.value.href, void 0, false),
|
|
740
|
+
"data-loading": reflectedProp("loading", "loading", checkedProps.value.loading, void 0, false),
|
|
741
|
+
"data-pending": reflectedProp("pending", "pending", checkedProps.value.pending, void 0, false),
|
|
742
|
+
"data-rel": reflectedProp("rel", "rel", checkedProps.value.rel, void 0, false),
|
|
743
|
+
"data-shape": reflectedProp("shape", "shape", checkedProps.value.shape, void 0, false),
|
|
744
|
+
"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
|
|
745
|
+
"data-stretch": reflectedProp("stretch", "stretch", checkedProps.value.stretch, void 0, false),
|
|
746
|
+
"data-target": reflectedProp("target", "target", checkedProps.value.target, void 0, false),
|
|
747
|
+
"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
|
|
748
|
+
"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
|
|
749
|
+
"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
|
|
750
|
+
"data-ui-button-state": hostState.value || void 0,
|
|
751
|
+
ref: "@html-next/root"
|
|
752
|
+
}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_12, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_11)), [[unref(vPropValidity), {
|
|
569
753
|
contract: propValidityContract,
|
|
570
754
|
values: { ...props }
|
|
571
755
|
}]]);
|
|
572
756
|
};
|
|
573
757
|
}
|
|
574
|
-
}), [["__scopeId", "data-v-
|
|
758
|
+
}), [["__scopeId", "data-v-e0bdc48b"]]);
|
|
575
759
|
//#endregion
|
|
576
760
|
export { UiButton_default as t };
|
|
@@ -4,6 +4,7 @@ import { computed, createElementBlock, defineComponent, getCurrentInstance, merg
|
|
|
4
4
|
//#region .build/vue/UiSeparator.vue?vue&type=script&setup=true&lang.ts
|
|
5
5
|
var _hoisted_1 = [
|
|
6
6
|
"aria-orientation",
|
|
7
|
+
"data-emphasis",
|
|
7
8
|
"data-orientation",
|
|
8
9
|
"data-selectable",
|
|
9
10
|
"data-selected",
|
|
@@ -15,6 +16,10 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
|
|
|
15
16
|
inheritAttrs: false,
|
|
16
17
|
__name: "UiSeparator",
|
|
17
18
|
props: {
|
|
19
|
+
emphasis: {
|
|
20
|
+
type: null,
|
|
21
|
+
default: "normal"
|
|
22
|
+
},
|
|
18
23
|
orientation: {
|
|
19
24
|
type: null,
|
|
20
25
|
default: "horizontal"
|
|
@@ -30,6 +35,17 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
|
|
|
30
35
|
},
|
|
31
36
|
setup(__props) {
|
|
32
37
|
const propValidityContract = { props: {
|
|
38
|
+
emphasis: {
|
|
39
|
+
type: {
|
|
40
|
+
kind: "terminal",
|
|
41
|
+
name: "keyword"
|
|
42
|
+
},
|
|
43
|
+
required: false,
|
|
44
|
+
target: { attribute: "emphasis" },
|
|
45
|
+
description: "Normal uses the decorative divider color; strong uses the stronger enclosing-edge color for clearer separation.",
|
|
46
|
+
values: ["normal", "strong"],
|
|
47
|
+
default: "normal"
|
|
48
|
+
},
|
|
33
49
|
orientation: {
|
|
34
50
|
type: {
|
|
35
51
|
kind: "terminal",
|
|
@@ -64,11 +80,16 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
|
|
|
64
80
|
} };
|
|
65
81
|
const props = __props;
|
|
66
82
|
const acceptedProps = {
|
|
83
|
+
emphasis: "normal",
|
|
67
84
|
orientation: "horizontal",
|
|
68
85
|
selectable: false,
|
|
69
86
|
selected: false
|
|
70
87
|
};
|
|
71
88
|
const checkedProps = computed(() => ({
|
|
89
|
+
emphasis: checkedProp(props["emphasis"], {
|
|
90
|
+
kind: "terminal",
|
|
91
|
+
name: "keyword"
|
|
92
|
+
}, false, "emphasis", acceptedProps),
|
|
72
93
|
orientation: checkedProp(props["orientation"], {
|
|
73
94
|
kind: "terminal",
|
|
74
95
|
name: "keyword"
|
|
@@ -107,10 +128,16 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
|
|
|
107
128
|
})
|
|
108
129
|
});
|
|
109
130
|
/** The values the styles' :host-state() rules test. */
|
|
110
|
-
const hostState = computed(() => [
|
|
131
|
+
const hostState = computed(() => [
|
|
132
|
+
checkedProps.value.emphasis && "emphasis",
|
|
133
|
+
checkedProps.value.emphasis != null && `emphasis=${encodeURIComponent(checkedProps.value.emphasis)}`,
|
|
134
|
+
checkedProps.value.selectable && "selectable",
|
|
135
|
+
checkedProps.value.selected && "selected"
|
|
136
|
+
].filter(Boolean).join(" "));
|
|
111
137
|
return (_ctx, _cache) => {
|
|
112
138
|
return withDirectives((openBlock(), createElementBlock("hr", mergeProps({ "data-component": "ui-separator" }, nativeAttrs(_ctx.$attrs), {
|
|
113
139
|
"aria-orientation": checkedProps.value.orientation ?? void 0,
|
|
140
|
+
"data-emphasis": reflectedProp("emphasis", "emphasis", checkedProps.value.emphasis, void 0, false),
|
|
114
141
|
"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false),
|
|
115
142
|
"data-selectable": reflectedProp("selectable", "selectable", checkedProps.value.selectable, void 0, false),
|
|
116
143
|
"data-selected": reflectedProp("selected", "selected", checkedProps.value.selected, void 0, false),
|
|
@@ -121,6 +148,6 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
|
|
|
121
148
|
}]]);
|
|
122
149
|
};
|
|
123
150
|
}
|
|
124
|
-
}), [["__scopeId", "data-v-
|
|
151
|
+
}), [["__scopeId", "data-v-a49de10a"]]);
|
|
125
152
|
//#endregion
|
|
126
153
|
export { UiSeparator_default as t };
|