@threadlabs/looma 0.39.6 → 0.41.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/components/ui-button/ui-button.html +8 -10
- package/components/ui-button/ui-button.js +5 -2
- package/components/ui-editor-link-card/ui-editor-link-card.html +0 -1
- package/components/ui-pagination/ui-pagination.html +3 -6
- package/components/ui-site-header/ui-site-header.html +164 -0
- package/dist/index.js +1 -1
- package/docs/card.html +1 -1
- package/docs/catalog.json +207 -32
- package/package.json +1 -1
- package/styles/ui-site-header.css +165 -0
- package/vanilla/UiButton.d.ts +0 -1
- package/vanilla/UiButton.js +71 -71
- package/vanilla/UiEditorLinkCard.js +1 -1
- package/vanilla/UiPagination.js +44 -57
- package/vanilla/UiSiteHeader.d.ts +25 -0
- package/vanilla/UiSiteHeader.js +96 -0
- package/vanilla/index.js +1 -0
- package/vue/UiButton.d.ts +0 -6
- package/vue/UiButton.vue +8 -30
- package/vue/UiEditorLinkCard.vue +0 -1
- package/vue/UiPagination.vue +13 -15
- package/vue/UiSiteHeader.d.ts +47 -0
- package/vue/UiSiteHeader.js +2 -0
- package/vue/UiSiteHeader.vue +299 -0
- package/vue/chunks/UiButton.js +8 -36
- package/vue/chunks/UiEditorLinkCard.js +0 -1
- package/vue/chunks/UiPagination.js +13 -27
- package/vue/chunks/UiSiteHeader.js +150 -0
- package/vue/components.css +154 -0
- package/vue/editor/index.js +107 -121
- package/vue/index.d.ts +1 -0
- package/vue/index.js +2 -1
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
<!-- Generated by HTML Next 1.0.0-alpha.69 for Vue 3.5. Do not edit. -->
|
|
2
|
+
<script setup lang="ts">
|
|
3
|
+
import { computed, watchSyncEffect } from 'vue'
|
|
4
|
+
import type { PropType } from 'vue'
|
|
5
|
+
import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
|
|
6
|
+
import {
|
|
7
|
+
BINDING_INPUTS_PROP,
|
|
8
|
+
checkedProp,
|
|
9
|
+
checkPropInput,
|
|
10
|
+
type InputBindings,
|
|
11
|
+
READY_INPUT,
|
|
12
|
+
requireInputStatus,
|
|
13
|
+
UNRESOLVED_INPUT,
|
|
14
|
+
vPropValidity,
|
|
15
|
+
vuePropInputs,
|
|
16
|
+
} from './props'
|
|
17
|
+
|
|
18
|
+
defineOptions({ inheritAttrs: false })
|
|
19
|
+
|
|
20
|
+
const propValidityContract = {
|
|
21
|
+
props: {
|
|
22
|
+
breakpoint: {
|
|
23
|
+
type: { kind: 'terminal', name: 'keyword' },
|
|
24
|
+
required: false,
|
|
25
|
+
target: { attribute: 'breakpoint' },
|
|
26
|
+
description:
|
|
27
|
+
'The viewport width at which navigation replaces the menu trigger: sm is 40rem, md 48rem, and lg 64rem. The consumer owns the menu or drawer the trigger\n opens.',
|
|
28
|
+
values: ['sm', 'md', 'lg'],
|
|
29
|
+
default: 'lg',
|
|
30
|
+
},
|
|
31
|
+
label: {
|
|
32
|
+
type: { kind: 'terminal', name: 'string' },
|
|
33
|
+
required: false,
|
|
34
|
+
target: { attribute: 'aria-label' },
|
|
35
|
+
description: 'Accessible name for the primary navigation region.',
|
|
36
|
+
default: 'Main',
|
|
37
|
+
},
|
|
38
|
+
sticky: {
|
|
39
|
+
type: { kind: 'terminal', name: 'boolean' },
|
|
40
|
+
required: false,
|
|
41
|
+
target: { attribute: 'sticky' },
|
|
42
|
+
description: 'Keeps the header at the top of its scrolling container.',
|
|
43
|
+
default: false,
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
} as const
|
|
47
|
+
const props = defineProps({
|
|
48
|
+
breakpoint: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null> },
|
|
49
|
+
label: { type: null as unknown as PropType<string | null> },
|
|
50
|
+
sticky: { type: null as unknown as PropType<boolean | null> },
|
|
51
|
+
[BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
|
|
52
|
+
})
|
|
53
|
+
const acceptedProps: Record<string, unknown> = { breakpoint: 'lg', label: 'Main', sticky: false }
|
|
54
|
+
const inputTracking = vuePropInputs(acceptedProps, {
|
|
55
|
+
breakpoint: 'lg',
|
|
56
|
+
label: 'Main',
|
|
57
|
+
sticky: false,
|
|
58
|
+
}, (name, value, source, values) => {
|
|
59
|
+
switch (name) {
|
|
60
|
+
case 'breakpoint':
|
|
61
|
+
return checkPropInput(value, { kind: 'terminal', name: 'keyword' }, true, true)
|
|
62
|
+
case 'label':
|
|
63
|
+
return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
|
|
64
|
+
case 'sticky':
|
|
65
|
+
return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
|
|
66
|
+
default:
|
|
67
|
+
return { ok: false }
|
|
68
|
+
}
|
|
69
|
+
}, () => {
|
|
70
|
+
void checkedProps.value
|
|
71
|
+
})
|
|
72
|
+
const propInputs = inputTracking.inputs
|
|
73
|
+
const checkedProps = computed(() => {
|
|
74
|
+
void inputTracking.version.value
|
|
75
|
+
return ({
|
|
76
|
+
breakpoint: propInputs.value<'sm' | 'md' | 'lg' | null>(
|
|
77
|
+
'breakpoint',
|
|
78
|
+
props['breakpoint'],
|
|
79
|
+
props[BINDING_INPUTS_PROP],
|
|
80
|
+
) as 'sm' | 'md' | 'lg',
|
|
81
|
+
label: propInputs.value<string | null>(
|
|
82
|
+
'label',
|
|
83
|
+
props['label'],
|
|
84
|
+
props[BINDING_INPUTS_PROP],
|
|
85
|
+
) as string,
|
|
86
|
+
sticky: propInputs.value<boolean | null>(
|
|
87
|
+
'sticky',
|
|
88
|
+
props['sticky'],
|
|
89
|
+
props[BINDING_INPUTS_PROP],
|
|
90
|
+
) as boolean,
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
const inputStatus = (name: string, handlesError: boolean) => {
|
|
94
|
+
void checkedProps.value
|
|
95
|
+
void inputTracking.version.value
|
|
96
|
+
return requireInputStatus(propInputs.status(name), handlesError)
|
|
97
|
+
}
|
|
98
|
+
void checkedProps.value
|
|
99
|
+
watchSyncEffect(() => {
|
|
100
|
+
void checkedProps.value
|
|
101
|
+
})
|
|
102
|
+
const reflectedProp = useReflectedProp()
|
|
103
|
+
|
|
104
|
+
checkHydratedRoot('header', 'ui-site-header')
|
|
105
|
+
|
|
106
|
+
/** The values the styles' :host() and :state() rules test. */
|
|
107
|
+
const hostState = computed(() =>
|
|
108
|
+
[
|
|
109
|
+
checkedProps.value.sticky && 'sticky',
|
|
110
|
+
checkedProps.value.breakpoint && 'breakpoint',
|
|
111
|
+
checkedProps.value.breakpoint != null
|
|
112
|
+
&& `breakpoint=${encodeURIComponent(checkedProps.value.breakpoint)}`,
|
|
113
|
+
].filter(Boolean).join(' ')
|
|
114
|
+
)
|
|
115
|
+
</script>
|
|
116
|
+
|
|
117
|
+
<template>
|
|
118
|
+
<header
|
|
119
|
+
class="ui-site-header"
|
|
120
|
+
v-bind="nativeAttrs($attrs)"
|
|
121
|
+
data-hn
|
|
122
|
+
data-hn-ui-site-header
|
|
123
|
+
v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
|
|
124
|
+
:data-ui-site-header-prop-breakpoint="reflectedProp('breakpoint', 'breakpoint', checkedProps.breakpoint, undefined, false)"
|
|
125
|
+
:data-ui-site-header-prop-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
|
|
126
|
+
:data-ui-site-header-prop-sticky="reflectedProp('sticky', 'sticky', checkedProps.sticky, undefined, false)"
|
|
127
|
+
:data-ui-site-header-state="hostState || undefined"
|
|
128
|
+
>
|
|
129
|
+
<span class="menu" data-hn-ui-site-header><slot name="menu" /></span>
|
|
130
|
+
<div class="identity" data-hn-ui-site-header>
|
|
131
|
+
<div class="brand" data-hn-ui-site-header><slot name="brand" /></div>
|
|
132
|
+
<nav class="navigation" data-hn-ui-site-header :aria-label="checkedProps.label ?? undefined">
|
|
133
|
+
<slot name="navigation" />
|
|
134
|
+
</nav>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="actions" data-hn-ui-site-header><slot name="actions" /></div>
|
|
137
|
+
</header>
|
|
138
|
+
</template>
|
|
139
|
+
|
|
140
|
+
<style scoped>
|
|
141
|
+
@property --ui-site-header-height {
|
|
142
|
+
syntax: "*";
|
|
143
|
+
inherits: false;
|
|
144
|
+
}
|
|
145
|
+
@property --ui-site-header-compact-height {
|
|
146
|
+
syntax: "*";
|
|
147
|
+
inherits: false;
|
|
148
|
+
}
|
|
149
|
+
@property --ui-site-header-padding-inline {
|
|
150
|
+
syntax: "*";
|
|
151
|
+
inherits: false;
|
|
152
|
+
}
|
|
153
|
+
@property --ui-site-header-surface {
|
|
154
|
+
syntax: "*";
|
|
155
|
+
inherits: false;
|
|
156
|
+
}
|
|
157
|
+
@property --ui-site-header-border {
|
|
158
|
+
syntax: "*";
|
|
159
|
+
inherits: false;
|
|
160
|
+
}
|
|
161
|
+
@property --ui-site-header-z-index {
|
|
162
|
+
syntax: "*";
|
|
163
|
+
inherits: false;
|
|
164
|
+
}
|
|
165
|
+
/* Text shares a baseline inside one group; the group is centred beside any control height. */
|
|
166
|
+
/* Without a supplied menu trigger, keep the destinations available on narrow screens. */
|
|
167
|
+
@scope (.ui-site-header) to ([data-hn]) {
|
|
168
|
+
:global(:scope:where([data-hn-ui-site-header])) {
|
|
169
|
+
box-sizing: border-box !important;
|
|
170
|
+
display: flex !important;
|
|
171
|
+
flex-wrap: wrap !important;
|
|
172
|
+
align-items: center !important;
|
|
173
|
+
align-content: center !important;
|
|
174
|
+
gap: var(--ui-space-2) !important;
|
|
175
|
+
min-inline-size: 0;
|
|
176
|
+
min-block-size: var(--ui-site-header-compact-height, 3.75rem);
|
|
177
|
+
padding: var(--ui-space-2) var(--ui-site-header-padding-inline, var(--ui-space-4)) !important;
|
|
178
|
+
border-block-end: var(--ui-border-width) solid var(--ui-site-header-border, var(--ui-border));
|
|
179
|
+
background: var(--ui-site-header-surface, var(--ui-surface));
|
|
180
|
+
color: var(--ui-text-primary);
|
|
181
|
+
}
|
|
182
|
+
:global(:scope[data-ui-site-header-state~="sticky"]:where([data-hn-ui-site-header])) {
|
|
183
|
+
position: sticky;
|
|
184
|
+
inset-block-start: 0;
|
|
185
|
+
z-index: var(--ui-site-header-z-index, 10);
|
|
186
|
+
}
|
|
187
|
+
:global(.menu:where([data-hn-ui-site-header])),
|
|
188
|
+
:global(.actions:where([data-hn-ui-site-header])) {
|
|
189
|
+
display: flex !important;
|
|
190
|
+
flex: none;
|
|
191
|
+
align-items: center !important;
|
|
192
|
+
gap: var(--ui-space-2) !important;
|
|
193
|
+
min-inline-size: 0;
|
|
194
|
+
max-inline-size: 100%;
|
|
195
|
+
}
|
|
196
|
+
:global(.actions:where([data-hn-ui-site-header])) {
|
|
197
|
+
flex-wrap: wrap !important;
|
|
198
|
+
margin-inline-start: auto !important;
|
|
199
|
+
}
|
|
200
|
+
:global(.identity:where([data-hn-ui-site-header])) {
|
|
201
|
+
display: flex !important;
|
|
202
|
+
flex: 1 1 auto;
|
|
203
|
+
flex-wrap: wrap !important;
|
|
204
|
+
align-items: baseline !important;
|
|
205
|
+
gap: var(--ui-space-2) var(--ui-space-6) !important;
|
|
206
|
+
min-inline-size: 0;
|
|
207
|
+
}
|
|
208
|
+
:global(.brand:where([data-hn-ui-site-header])) {
|
|
209
|
+
min-inline-size: 0;
|
|
210
|
+
font-size: var(--ui-font-size-lg);
|
|
211
|
+
font-weight: var(--ui-font-bold);
|
|
212
|
+
}
|
|
213
|
+
:global(.brand > :where(:not([data-hn-ui-site-header])):is(a)) {
|
|
214
|
+
display: inline-flex !important;
|
|
215
|
+
align-items: baseline !important;
|
|
216
|
+
gap: var(--ui-space-3) !important;
|
|
217
|
+
min-inline-size: 0;
|
|
218
|
+
max-inline-size: 100%;
|
|
219
|
+
color: inherit;
|
|
220
|
+
text-decoration: none;
|
|
221
|
+
}
|
|
222
|
+
:global(.navigation:where([data-hn-ui-site-header])) {
|
|
223
|
+
display: flex !important;
|
|
224
|
+
flex-wrap: wrap !important;
|
|
225
|
+
align-items: baseline !important;
|
|
226
|
+
gap: var(--ui-space-2) var(--ui-space-5) !important;
|
|
227
|
+
min-inline-size: 0;
|
|
228
|
+
font-size: var(--ui-font-size-sm);
|
|
229
|
+
font-weight: var(--ui-font-semibold);
|
|
230
|
+
}
|
|
231
|
+
:global(:scope:has(> .menu:not(:empty)) .navigation:where([data-hn-ui-site-header])) {
|
|
232
|
+
display: none !important;
|
|
233
|
+
}
|
|
234
|
+
:global(.navigation > :where(:not([data-hn-ui-site-header])):is(a)) {
|
|
235
|
+
color: inherit;
|
|
236
|
+
text-decoration: none;
|
|
237
|
+
}
|
|
238
|
+
:global(.navigation
|
|
239
|
+
> :where(:not([data-hn-ui-site-header])):is(a):is(:hover, [aria-current="page"], [aria-current="true"])) {
|
|
240
|
+
color: var(--ui-accent-active);
|
|
241
|
+
}
|
|
242
|
+
:global(.brand > :where(:not([data-hn-ui-site-header])):is(a):focus-visible),
|
|
243
|
+
:global(.navigation > :where(:not([data-hn-ui-site-header])):is(a):focus-visible) {
|
|
244
|
+
outline: var(--ui-focus-width) solid var(--ui-focus-ring);
|
|
245
|
+
outline-offset: var(--ui-focus-width);
|
|
246
|
+
}
|
|
247
|
+
:global(.menu:empty:where([data-hn-ui-site-header])),
|
|
248
|
+
:global(.actions:empty:where([data-hn-ui-site-header])),
|
|
249
|
+
:global(.brand:empty:where([data-hn-ui-site-header])),
|
|
250
|
+
:global(.navigation:empty:where([data-hn-ui-site-header])) {
|
|
251
|
+
display: none !important;
|
|
252
|
+
}
|
|
253
|
+
@media (min-width: 40rem) {
|
|
254
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=sm"]:where([data-hn-ui-site-header])) {
|
|
255
|
+
min-block-size: var(--ui-site-header-height, 4.25rem);
|
|
256
|
+
column-gap: var(--ui-space-4) !important;
|
|
257
|
+
}
|
|
258
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=sm"]
|
|
259
|
+
.navigation:not(:empty):where([data-hn-ui-site-header])) {
|
|
260
|
+
display: flex !important;
|
|
261
|
+
}
|
|
262
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=sm"]
|
|
263
|
+
.menu:where([data-hn-ui-site-header])) {
|
|
264
|
+
display: none !important;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
@media (min-width: 48rem) {
|
|
268
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=md"]:where([data-hn-ui-site-header])) {
|
|
269
|
+
min-block-size: var(--ui-site-header-height, 4.25rem);
|
|
270
|
+
column-gap: var(--ui-space-4) !important;
|
|
271
|
+
}
|
|
272
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=md"]
|
|
273
|
+
.navigation:not(:empty):where([data-hn-ui-site-header])) {
|
|
274
|
+
display: flex !important;
|
|
275
|
+
}
|
|
276
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=md"]
|
|
277
|
+
.menu:where([data-hn-ui-site-header])) {
|
|
278
|
+
display: none !important;
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
@media (min-width: 64rem) {
|
|
282
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=lg"]:where([data-hn-ui-site-header])) {
|
|
283
|
+
min-block-size: var(--ui-site-header-height, 4.25rem);
|
|
284
|
+
column-gap: var(--ui-space-4) !important;
|
|
285
|
+
}
|
|
286
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=lg"]
|
|
287
|
+
.navigation:not(:empty):where([data-hn-ui-site-header])) {
|
|
288
|
+
display: flex !important;
|
|
289
|
+
}
|
|
290
|
+
:global(:scope[data-ui-site-header-state~="breakpoint=lg"]
|
|
291
|
+
.menu:where([data-hn-ui-site-header])) {
|
|
292
|
+
display: none !important;
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
:global(:scope[hidden]:where([data-hn-ui-site-header])) {
|
|
296
|
+
display: none !important;
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
</style>
|
package/vue/chunks/UiButton.js
CHANGED
|
@@ -14,7 +14,6 @@ var _hoisted_1 = [
|
|
|
14
14
|
"aria-busy",
|
|
15
15
|
"tabindex",
|
|
16
16
|
"data-ui-button-prop-align",
|
|
17
|
-
"data-ui-button-prop-as",
|
|
18
17
|
"data-ui-button-prop-disabled",
|
|
19
18
|
"data-ui-button-prop-href",
|
|
20
19
|
"data-ui-button-prop-loading",
|
|
@@ -51,7 +50,6 @@ var _hoisted_5 = [
|
|
|
51
50
|
"aria-disabled",
|
|
52
51
|
"aria-busy",
|
|
53
52
|
"data-ui-button-prop-align",
|
|
54
|
-
"data-ui-button-prop-as",
|
|
55
53
|
"data-ui-button-prop-disabled",
|
|
56
54
|
"data-ui-button-prop-href",
|
|
57
55
|
"data-ui-button-prop-loading",
|
|
@@ -90,7 +88,6 @@ var _hoisted_9 = [
|
|
|
90
88
|
"aria-busy",
|
|
91
89
|
"tabindex",
|
|
92
90
|
"data-ui-button-prop-align",
|
|
93
|
-
"data-ui-button-prop-as",
|
|
94
91
|
"data-ui-button-prop-disabled",
|
|
95
92
|
"data-ui-button-prop-href",
|
|
96
93
|
"data-ui-button-prop-loading",
|
|
@@ -128,7 +125,6 @@ var _hoisted_13 = [
|
|
|
128
125
|
"aria-disabled",
|
|
129
126
|
"aria-busy",
|
|
130
127
|
"data-ui-button-prop-align",
|
|
131
|
-
"data-ui-button-prop-as",
|
|
132
128
|
"data-ui-button-prop-disabled",
|
|
133
129
|
"data-ui-button-prop-href",
|
|
134
130
|
"data-ui-button-prop-loading",
|
|
@@ -165,7 +161,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
165
161
|
__name: "UiButton",
|
|
166
162
|
props: {
|
|
167
163
|
align: { type: null },
|
|
168
|
-
as: { type: null },
|
|
169
164
|
disabled: { type: null },
|
|
170
165
|
href: { type: null },
|
|
171
166
|
loading: { type: null },
|
|
@@ -195,17 +190,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
195
190
|
values: ["center", "start"],
|
|
196
191
|
default: "center"
|
|
197
192
|
},
|
|
198
|
-
as: {
|
|
199
|
-
type: {
|
|
200
|
-
kind: "terminal",
|
|
201
|
-
name: "keyword"
|
|
202
|
-
},
|
|
203
|
-
required: false,
|
|
204
|
-
target: { attribute: "as" },
|
|
205
|
-
description: "The native element the button renders: a button, or a link (a) that navigates to href.",
|
|
206
|
-
values: ["button", "a"],
|
|
207
|
-
default: "button"
|
|
208
|
-
},
|
|
209
193
|
disabled: {
|
|
210
194
|
type: {
|
|
211
195
|
kind: "terminal",
|
|
@@ -213,7 +197,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
213
197
|
},
|
|
214
198
|
required: false,
|
|
215
199
|
target: { attribute: "disabled" },
|
|
216
|
-
description: "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (
|
|
200
|
+
description: "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (with href) drops its href and\n states aria-disabled=\"true\" instead, because a link has no native disabled state.",
|
|
217
201
|
default: false
|
|
218
202
|
},
|
|
219
203
|
href: {
|
|
@@ -223,7 +207,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
223
207
|
},
|
|
224
208
|
required: false,
|
|
225
209
|
target: { attribute: "href" },
|
|
226
|
-
description: "The link's destination.
|
|
210
|
+
description: "The link's destination. Supplying href automatically renders a native link instead of a button, including an empty href for the current document. A\n disabled link drops its href and states aria-disabled=\"true\", so it cannot be followed."
|
|
227
211
|
},
|
|
228
212
|
loading: {
|
|
229
213
|
type: {
|
|
@@ -269,7 +253,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
269
253
|
},
|
|
270
254
|
required: false,
|
|
271
255
|
target: { attribute: "rel" },
|
|
272
|
-
description: "The link's relationship to its destination, as on a native link. Only meaningful with
|
|
256
|
+
description: "The link's relationship to its destination, as on a native link. Only meaningful with href."
|
|
273
257
|
},
|
|
274
258
|
shape: {
|
|
275
259
|
type: {
|
|
@@ -325,7 +309,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
325
309
|
},
|
|
326
310
|
required: false,
|
|
327
311
|
target: { attribute: "target" },
|
|
328
|
-
description: "Where a link opens, as on a native link. Only meaningful with
|
|
312
|
+
description: "Where a link opens, as on a native link. Only meaningful with href."
|
|
329
313
|
},
|
|
330
314
|
tone: {
|
|
331
315
|
type: {
|
|
@@ -383,7 +367,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
383
367
|
const props = __props;
|
|
384
368
|
const inputTracking = vuePropInputs({
|
|
385
369
|
align: "center",
|
|
386
|
-
as: "button",
|
|
387
370
|
disabled: false,
|
|
388
371
|
href: null,
|
|
389
372
|
loading: false,
|
|
@@ -400,7 +383,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
400
383
|
variant: "outline"
|
|
401
384
|
}, {
|
|
402
385
|
align: "center",
|
|
403
|
-
as: "button",
|
|
404
386
|
disabled: false,
|
|
405
387
|
loading: false,
|
|
406
388
|
pending: false,
|
|
@@ -418,10 +400,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
418
400
|
kind: "terminal",
|
|
419
401
|
name: "keyword"
|
|
420
402
|
}, true, true);
|
|
421
|
-
case "as": return checkPropInput(value, {
|
|
422
|
-
kind: "terminal",
|
|
423
|
-
name: "keyword"
|
|
424
|
-
}, true, true);
|
|
425
403
|
case "disabled": return checkPropInput(value, {
|
|
426
404
|
kind: "terminal",
|
|
427
405
|
name: "boolean"
|
|
@@ -488,7 +466,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
488
466
|
inputTracking.version.value;
|
|
489
467
|
return {
|
|
490
468
|
align: propInputs.value("align", props["align"], props[BINDING_INPUTS_PROP]),
|
|
491
|
-
as: propInputs.value("as", props["as"], props[BINDING_INPUTS_PROP]),
|
|
492
469
|
disabled: propInputs.value("disabled", props["disabled"], props[BINDING_INPUTS_PROP]),
|
|
493
470
|
href: propInputs.value("href", props["href"], props[BINDING_INPUTS_PROP]),
|
|
494
471
|
loading: propInputs.value("loading", props["loading"], props[BINDING_INPUTS_PROP]),
|
|
@@ -654,7 +631,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
654
631
|
false: null
|
|
655
632
|
}, concat(checkedProps.value.loading || checkedProps.value.pending)));
|
|
656
633
|
});
|
|
657
|
-
checkHydratedRoot(appearance.get() === "card" && checkedProps.value.
|
|
634
|
+
checkHydratedRoot(appearance.get() === "card" && checkedProps.value.href !== null ? "a" : appearance.get() === "card" ? "button" : checkedProps.value.href !== null ? "a" : "button", "ui-button");
|
|
658
635
|
/** The values the styles' :host() and :state() rules test. */
|
|
659
636
|
const hostState = computed(() => [
|
|
660
637
|
checkedProps.value.align && "align",
|
|
@@ -687,7 +664,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
687
664
|
},
|
|
688
665
|
propNames: [
|
|
689
666
|
"align",
|
|
690
|
-
"as",
|
|
691
667
|
"disabled",
|
|
692
668
|
"href",
|
|
693
669
|
"loading",
|
|
@@ -717,7 +693,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
717
693
|
}
|
|
718
694
|
});
|
|
719
695
|
return (_ctx, _cache) => {
|
|
720
|
-
return unref(appearance).get() === "card" && checkedProps.value.
|
|
696
|
+
return unref(appearance).get() === "card" && checkedProps.value.href !== null ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
|
|
721
697
|
key: 0,
|
|
722
698
|
class: "ui-button"
|
|
723
699
|
}, unref(nativeAttrs)(_ctx.$attrs), {
|
|
@@ -732,7 +708,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
732
708
|
"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
|
|
733
709
|
tabindex: guardedBinding2.value,
|
|
734
710
|
"data-ui-button-prop-align": unref(reflectedProp)("align", "align", checkedProps.value.align, void 0, false),
|
|
735
|
-
"data-ui-button-prop-as": unref(reflectedProp)("as", "as", checkedProps.value.as, void 0, false),
|
|
736
711
|
"data-ui-button-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
|
|
737
712
|
"data-ui-button-prop-href": unref(reflectedProp)("href", "href", checkedProps.value.href, void 0, false),
|
|
738
713
|
"data-ui-button-prop-loading": unref(reflectedProp)("loading", "loading", checkedProps.value.loading, void 0, false),
|
|
@@ -779,7 +754,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
779
754
|
"aria-disabled": guardedBinding3.value,
|
|
780
755
|
"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
|
|
781
756
|
"data-ui-button-prop-align": unref(reflectedProp)("align", "align", checkedProps.value.align, void 0, false),
|
|
782
|
-
"data-ui-button-prop-as": unref(reflectedProp)("as", "as", checkedProps.value.as, void 0, false),
|
|
783
757
|
"data-ui-button-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
|
|
784
758
|
"data-ui-button-prop-href": unref(reflectedProp)("href", "href", checkedProps.value.href, void 0, false),
|
|
785
759
|
"data-ui-button-prop-loading": unref(reflectedProp)("loading", "loading", checkedProps.value.loading, void 0, false),
|
|
@@ -813,7 +787,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
813
787
|
], 16, _hoisted_5)), [[unref(vPropValidity), {
|
|
814
788
|
contract: propValidityContract,
|
|
815
789
|
values: { ...props }
|
|
816
|
-
}]]) : checkedProps.value.
|
|
790
|
+
}]]) : checkedProps.value.href !== null ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
|
|
817
791
|
key: 2,
|
|
818
792
|
class: "ui-button"
|
|
819
793
|
}, unref(nativeAttrs)(_ctx.$attrs), {
|
|
@@ -828,7 +802,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
828
802
|
"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
|
|
829
803
|
tabindex: guardedBinding6.value,
|
|
830
804
|
"data-ui-button-prop-align": unref(reflectedProp)("align", "align", checkedProps.value.align, void 0, false),
|
|
831
|
-
"data-ui-button-prop-as": unref(reflectedProp)("as", "as", checkedProps.value.as, void 0, false),
|
|
832
805
|
"data-ui-button-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
|
|
833
806
|
"data-ui-button-prop-href": unref(reflectedProp)("href", "href", checkedProps.value.href, void 0, false),
|
|
834
807
|
"data-ui-button-prop-loading": unref(reflectedProp)("loading", "loading", checkedProps.value.loading, void 0, false),
|
|
@@ -870,7 +843,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
870
843
|
"aria-disabled": guardedBinding7.value,
|
|
871
844
|
"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
|
|
872
845
|
"data-ui-button-prop-align": unref(reflectedProp)("align", "align", checkedProps.value.align, void 0, false),
|
|
873
|
-
"data-ui-button-prop-as": unref(reflectedProp)("as", "as", checkedProps.value.as, void 0, false),
|
|
874
846
|
"data-ui-button-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
|
|
875
847
|
"data-ui-button-prop-href": unref(reflectedProp)("href", "href", checkedProps.value.href, void 0, false),
|
|
876
848
|
"data-ui-button-prop-loading": unref(reflectedProp)("loading", "loading", checkedProps.value.loading, void 0, false),
|
|
@@ -902,6 +874,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
|
|
|
902
874
|
}]]);
|
|
903
875
|
};
|
|
904
876
|
}
|
|
905
|
-
}), [["__scopeId", "data-v-
|
|
877
|
+
}), [["__scopeId", "data-v-872bcd48"]]);
|
|
906
878
|
//#endregion
|
|
907
879
|
export { UiButton_default as t };
|
|
@@ -322,7 +322,6 @@ var UiEditorLinkCard_default = /* @__PURE__ */ defineComponent({
|
|
|
322
322
|
checkedProps.value.openHref !== "" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
323
323
|
_cache[2] || (_cache[2] = createTextVNode(toDisplayString(" "), -1)),
|
|
324
324
|
createVNode(UiButton_default, mergeProps({
|
|
325
|
-
as: "a",
|
|
326
325
|
variant: "ghost",
|
|
327
326
|
tone: "neutral",
|
|
328
327
|
size: "sm",
|
|
@@ -93,7 +93,7 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
93
93
|
name: "string"
|
|
94
94
|
},
|
|
95
95
|
required: false,
|
|
96
|
-
target: { attribute: "
|
|
96
|
+
target: { attribute: "nexthref" },
|
|
97
97
|
description: "Optional native destination for Next. Empty renders a request button.",
|
|
98
98
|
default: ""
|
|
99
99
|
},
|
|
@@ -161,7 +161,7 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
161
161
|
name: "string"
|
|
162
162
|
},
|
|
163
163
|
required: false,
|
|
164
|
-
target: { attribute: "
|
|
164
|
+
target: { attribute: "previoushref" },
|
|
165
165
|
description: "Optional native destination for Previous. Empty renders a request button.",
|
|
166
166
|
default: ""
|
|
167
167
|
},
|
|
@@ -389,8 +389,8 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
389
389
|
default: withCtx(() => [
|
|
390
390
|
(openBlock(true), createElementBlock(Fragment, null, renderList([unref(evaluateInput)(() => unref(inputRead)(checkedProps.value.disabled, inputStatus("disabled", true)) || !unref(inputRead)(checkedProps.value.hasPrevious, inputStatus("hasPrevious", true)) || (unref(number)(unref(inputRead)(checkedProps.value.page, inputStatus("page", true))) === void 0 || unref(number)(1) === void 0 ? void 0 : unref(number)(unref(inputRead)(checkedProps.value.page, inputStatus("page", true))) <= unref(number)(1)), unref(READY_INPUT))], (boundInput) => {
|
|
391
391
|
return openBlock(), createElementBlock(Fragment, null, [(openBlock(true), createElementBlock(Fragment, null, renderList([unref(evaluateInput)(() => ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
392
|
-
true: "
|
|
393
|
-
false:
|
|
392
|
+
true: unref(inputRead)(checkedProps.value.previousHref, inputStatus("previousHref", true)),
|
|
393
|
+
false: null
|
|
394
394
|
}, unref(concat)(unref(inputRead)(checkedProps.value.previousHref, inputStatus("previousHref", true)) !== "")), unref(READY_INPUT))], (boundInputSnapshot) => {
|
|
395
395
|
return openBlock(), createBlock(UiButton_default, mergeProps({
|
|
396
396
|
square: true,
|
|
@@ -398,8 +398,7 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
398
398
|
tone: "neutral",
|
|
399
399
|
size: checkedProps.value.size,
|
|
400
400
|
disabled: boundInput.value,
|
|
401
|
-
|
|
402
|
-
href: checkedProps.value.previousHref,
|
|
401
|
+
href: boundInputSnapshot.value,
|
|
403
402
|
"aria-label": checkedProps.value.previousLabel,
|
|
404
403
|
"data-pagination-page": unref(number)(checkedProps.value.page) === void 0 || unref(number)(1) === void 0 ? void 0 : unref(decimalSubtract)(unref(number)(checkedProps.value.page), unref(number)(1))
|
|
405
404
|
}, { ref_for: true }, { [unref(BINDING_INPUTS_PROP)]: {
|
|
@@ -408,18 +407,13 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
408
407
|
status: inputStatus("size", true)
|
|
409
408
|
}),
|
|
410
409
|
disabled: () => boundInput,
|
|
411
|
-
|
|
412
|
-
href: () => ({
|
|
413
|
-
value: checkedProps.value.previousHref,
|
|
414
|
-
status: inputStatus("previousHref", true)
|
|
415
|
-
})
|
|
410
|
+
href: () => boundInputSnapshot
|
|
416
411
|
} }), {
|
|
417
412
|
default: withCtx(() => [createVNode(UiIcon_default, { name: "chevron-left" })]),
|
|
418
413
|
_: 1
|
|
419
414
|
}, 16, [
|
|
420
415
|
"size",
|
|
421
416
|
"disabled",
|
|
422
|
-
"as",
|
|
423
417
|
"href",
|
|
424
418
|
"aria-label",
|
|
425
419
|
"data-pagination-page"
|
|
@@ -447,9 +441,9 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
447
441
|
tone: boundInputSnapshot3.value,
|
|
448
442
|
size: checkedProps.value.size,
|
|
449
443
|
disabled: checkedProps.value.disabled,
|
|
450
|
-
|
|
451
|
-
true:
|
|
452
|
-
false:
|
|
444
|
+
href: ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
445
|
+
true: item.href,
|
|
446
|
+
false: null
|
|
453
447
|
}, unref(concat)((() => {
|
|
454
448
|
const left = item.href ?? "";
|
|
455
449
|
if (left === Symbol.for("html-next.invalid-result")) return left;
|
|
@@ -457,7 +451,6 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
457
451
|
if (right === Symbol.for("html-next.invalid-result")) return right;
|
|
458
452
|
return left !== right;
|
|
459
453
|
})())),
|
|
460
|
-
href: item.href,
|
|
461
454
|
"data-pagination-page": item.value,
|
|
462
455
|
"aria-label": unref(concat)(checkedProps.value.pageLabel, " ", unref(formatValue)(item.value, "number", "format", "number")),
|
|
463
456
|
"aria-current": ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
@@ -483,7 +476,6 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
483
476
|
"tone",
|
|
484
477
|
"size",
|
|
485
478
|
"disabled",
|
|
486
|
-
"as",
|
|
487
479
|
"href",
|
|
488
480
|
"data-pagination-page",
|
|
489
481
|
"aria-label",
|
|
@@ -499,8 +491,8 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
499
491
|
_cache[4] || (_cache[4] = createTextVNode(toDisplayString(" "), -1)),
|
|
500
492
|
(openBlock(true), createElementBlock(Fragment, null, renderList([unref(evaluateInput)(() => unref(inputRead)(checkedProps.value.disabled, inputStatus("disabled", true)) || !unref(inputRead)(checkedProps.value.hasNext, inputStatus("hasNext", true)), unref(READY_INPUT))], (boundInputSnapshot4) => {
|
|
501
493
|
return openBlock(), createElementBlock(Fragment, null, [(openBlock(true), createElementBlock(Fragment, null, renderList([unref(evaluateInput)(() => ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
|
|
502
|
-
true: "
|
|
503
|
-
false:
|
|
494
|
+
true: unref(inputRead)(checkedProps.value.nextHref, inputStatus("nextHref", true)),
|
|
495
|
+
false: null
|
|
504
496
|
}, unref(concat)(unref(inputRead)(checkedProps.value.nextHref, inputStatus("nextHref", true)) !== "")), unref(READY_INPUT))], (boundInputSnapshot5) => {
|
|
505
497
|
return openBlock(), createBlock(UiButton_default, mergeProps({
|
|
506
498
|
square: true,
|
|
@@ -508,8 +500,7 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
508
500
|
tone: "neutral",
|
|
509
501
|
size: checkedProps.value.size,
|
|
510
502
|
disabled: boundInputSnapshot4.value,
|
|
511
|
-
|
|
512
|
-
href: checkedProps.value.nextHref,
|
|
503
|
+
href: boundInputSnapshot5.value,
|
|
513
504
|
"aria-label": checkedProps.value.nextLabel,
|
|
514
505
|
"data-pagination-page": unref(number)(checkedProps.value.page) === void 0 || unref(number)(1) === void 0 ? void 0 : unref(decimalAdd)(unref(number)(checkedProps.value.page), unref(number)(1))
|
|
515
506
|
}, { ref_for: true }, { [unref(BINDING_INPUTS_PROP)]: {
|
|
@@ -518,18 +509,13 @@ var UiPagination_default = /* @__PURE__ */ defineComponent({
|
|
|
518
509
|
status: inputStatus("size", true)
|
|
519
510
|
}),
|
|
520
511
|
disabled: () => boundInputSnapshot4,
|
|
521
|
-
|
|
522
|
-
href: () => ({
|
|
523
|
-
value: checkedProps.value.nextHref,
|
|
524
|
-
status: inputStatus("nextHref", true)
|
|
525
|
-
})
|
|
512
|
+
href: () => boundInputSnapshot5
|
|
526
513
|
} }), {
|
|
527
514
|
default: withCtx(() => [createVNode(UiIcon_default, { name: "chevron-right" })]),
|
|
528
515
|
_: 1
|
|
529
516
|
}, 16, [
|
|
530
517
|
"size",
|
|
531
518
|
"disabled",
|
|
532
|
-
"as",
|
|
533
519
|
"href",
|
|
534
520
|
"aria-label",
|
|
535
521
|
"data-pagination-page"
|