Skip to content

Commit 2f8557c

Browse files
duncanmccleanduncanmcclean
committed
Merge branch 'master' into storybook-docs
2 parents a9dd8d5 + 0f6f073 commit 2f8557c

26 files changed

Lines changed: 78 additions & 126 deletions

File tree

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/css/components/fieldtypes/bard.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,8 @@
195195
=================================================== */
196196
@layer ui {
197197
.bard-floating-toolbar {
198-
@apply flex rounded-full bg-black px-2 shadow-lg whitespace-nowrap z-(--z-index-portal) relative;
198+
/* We need to pull this above other things such as theads, e.g. Grid fieldtype > Bard fieldtype > floating toolbar. */
199+
@apply flex rounded-full bg-black px-2 shadow-lg whitespace-nowrap z-(--z-index-draggable) relative;
199200

200201
&:before {
201202
@apply border-t-black top-full start-1/2 absolute -ml-[3px] content-none border-6 border-transparent;

‎resources/css/components/stacks.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@
1515
}
1616

1717
.stacks-on-stacks {
18+
body:has(&) {
19+
/* Reka poppers should be on top of open stacks. Reka's popper z-index in this case is set to auto and we can't control it through Reka. We also can't use a direct descendant selector because the popper is inside a portal, so instead we'll check to see if certain conditions are present. */
20+
[data-reka-popper-content-wrapper] {
21+
z-index: var(--z-index-portal)!important;
22+
}
23+
}
1824
.stack-container {
1925
@apply absolute inset-0;
2026
transition: left 0.3s ease;

‎resources/js/components/entries/CollectionWidget.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { Link } from '@inertiajs/vue3';
1515
const props = defineProps({
1616
additionalColumns: Array,
1717
collection: String,
18+
icon: String,
1819
title: String,
1920
listingUrl: String,
2021
initialPerPage: {
@@ -38,7 +39,7 @@ const cols = computed(() => [{ label: 'Title', field: 'title', visible: true },
3839
3940
const widgetProps = computed(() => ({
4041
title: props.title,
41-
icon: 'collections',
42+
icon: props.icon,
4243
href: props.listingUrl,
4344
}));
4445

‎resources/js/components/entries/PublishForm.vue‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -100,24 +100,22 @@
100100
<template #actions>
101101
<div class="space-y-6">
102102
<!-- Live Preview / Visit URL Buttons -->
103-
<div v-if="collectionHasRoutes">
104-
<div class="flex flex-wrap gap-3 lg:gap-4" v-if="showLivePreviewButton || showVisitUrlButton">
105-
<Button
106-
:text="__('Live Preview')"
107-
class="flex-1"
108-
icon="live-preview"
109-
@click="openLivePreview"
110-
v-if="showLivePreviewButton"
111-
/>
112-
<Button
113-
:href="permalink"
114-
:text="__('Visit URL')"
115-
class="flex-1"
116-
icon="external-link"
117-
target="_blank"
118-
v-if="showVisitUrlButton"
119-
/>
120-
</div>
103+
<div class="flex flex-wrap gap-3 lg:gap-4" v-if="showLivePreviewButton || showVisitUrlButton">
104+
<Button
105+
:text="__('Live Preview')"
106+
class="flex-1"
107+
icon="live-preview"
108+
@click="openLivePreview"
109+
v-if="showLivePreviewButton"
110+
/>
111+
<Button
112+
:href="permalink"
113+
:text="__('Visit URL')"
114+
class="flex-1"
115+
icon="external-link"
116+
target="_blank"
117+
v-if="showVisitUrlButton"
118+
/>
121119
</div>
122120

123121
<!-- Published Switch -->
@@ -344,7 +342,6 @@ export default {
344342
canManagePublishState: Boolean,
345343
createAnotherUrl: String,
346344
initialListingUrl: String,
347-
collectionHasRoutes: Boolean,
348345
previewTargets: Array,
349346
autosaveInterval: Number,
350347
parent: String,

‎resources/js/components/fieldtypes/bard/LinkToolbar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="bard-link-toolbar">
33
<div>
4-
<div class="border-b bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800 rounded-t-md">
4+
<div class="border-b bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800 rounded-t-xl">
55
<section class="flex gap-2 items-center p-4 border-b dark:border-gray-800">
66
<ui-select
77
v-model="linkType"

‎resources/js/components/ui/DatePicker/DatePicker.vue‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -72,14 +72,14 @@ const calendarBindings = computed(() => ({
7272
}));
7373
7474
const inputEvents = computed(() => ({
75-
focusout: (event) => {
76-
if (props.modelValue?.year.toString().length === 2) {
77-
let value = props.modelValue;
78-
value.year = '20' + value.year;
75+
focusout: (event) => {
76+
if (props.modelValue?.year.toString().length === 2) {
77+
let value = props.modelValue;
78+
value.year = '20' + value.year;
7979
80-
emit('update:modelValue', value);
81-
}
82-
},
80+
emit('update:modelValue', value);
81+
}
82+
},
8383
}));
8484
8585
const calendarEvents = computed(() => ({
@@ -136,13 +136,14 @@ const getInputLabel = (part) => {
136136
role="group"
137137
:aria-label="__('Date picker')"
138138
:aria-required="required"
139+
close-on-select
139140
>
140141
<DatePickerField v-slot="{ segments }" class="w-full">
141142
<DatePickerAnchor as-child>
142143
<div
143144
:class="[
144145
'flex w-full items-center bg-white uppercase dark:bg-gray-900',
145-
'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/10 dark:inset-shadow-2xs dark:inset-shadow-black',
146+
'border border-gray-300 dark:border-gray-700',
146147
'text-gray-600 dark:text-gray-300',
147148
'shadow-ui-sm not-prose h-10 rounded-lg px-2 disabled:shadow-none',
148149
'data-invalid:border-red-500',
@@ -162,28 +163,28 @@ const getInputLabel = (part) => {
162163
</DatePickerTrigger>
163164
<div class="flex items-center flex-1">
164165
<template v-for="item in segments" :key="item.part">
165-
<div v-if="item.part === 'literal'">
166-
<DatePickerInput
167-
:part="item.part"
168-
:class="{ 'text-sm text-gray-600 dark:text-gray-400 antialiased': !item.contenteditable }"
169-
v-on="inputEvents"
170-
>
171-
{{ item.value }}
172-
</DatePickerInput>
173-
</div>
174-
<div v-else>
175-
<DatePickerInput
176-
:part="item.part"
177-
class="rounded-sm px-0.25 py-0.5 focus:bg-blue-100 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-blue-900 dark:data-placeholder:text-gray-400"
178-
:class="{
179-
'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
180-
}"
181-
:aria-label="getInputLabel(item.part)"
182-
v-on="inputEvents"
183-
>
184-
{{ item.value }}
185-
</DatePickerInput>
186-
</div>
166+
<div v-if="item.part === 'literal'">
167+
<DatePickerInput
168+
:part="item.part"
169+
:class="{ 'text-sm text-gray-600 dark:text-gray-400 antialiased': !item.contenteditable }"
170+
v-on="inputEvents"
171+
>
172+
{{ item.value }}
173+
</DatePickerInput>
174+
</div>
175+
<div v-else>
176+
<DatePickerInput
177+
:part="item.part"
178+
class="rounded-sm px-0.25 py-0.5 focus:bg-blue-100 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-blue-900 dark:data-placeholder:text-gray-400"
179+
:class="{
180+
'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
181+
}"
182+
:aria-label="getInputLabel(item.part)"
183+
v-on="inputEvents"
184+
>
185+
{{ item.value }}
186+
</DatePickerInput>
187+
</div>
187188
</template>
188189
</div>
189190
<Button

‎resources/js/components/ui/DateRangePicker/DateRangePicker.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,13 @@ const calendarEvents = computed(() => ({
104104
prevent-deselect
105105
hide-time-zone
106106
:placeholder="placeholder"
107+
close-on-select
107108
>
108109
<DateRangePickerField v-slot="{ segments }" class="w-full">
109110
<div
110111
:class="[
111112
'flex items-center w-full bg-white dark:bg-gray-900',
112-
'border border-gray-300 dark:border-x-0 dark:border-t-0 dark:border-white/10 dark:inset-shadow-2xs dark:inset-shadow-black',
113+
'border border-gray-300 dark:border-gray-700',
113114
'leading-[1.375rem] text-gray-600 dark:text-gray-300',
114115
'shadow-ui-sm not-prose h-10 rounded-lg py-2 px-2.5 disabled:shadow-none',
115116
'data-invalid:border-red-500',

‎resources/js/components/ui/Field.vue‎

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import Description from './Description.vue';
55
import Label from './Label.vue';
66
import ErrorMessage from './ErrorMessage.vue';
77
import markdown from '@/util/markdown.js';
8+
import { twMerge } from 'tailwind-merge';
89
910
defineOptions({
1011
inheritAttrs: false,
1112
});
1213
1314
const props = defineProps({
14-
/** When `true`, styles the field as a configuration field with a two-column grid layout. */
15-
asConfig: { type: Boolean, default: false },
15+
/** When `true`, the field is styled as a configuration field with a two-column grid layout. */
16+
inline: { type: Boolean, default: false },
1617
/** Badge text to display next to the label. */
1718
badge: { type: String, default: '' },
1819
disabled: { type: Boolean, default: false },
@@ -31,8 +32,6 @@ const props = defineProps({
3132
label: { type: String },
3233
readOnly: { type: Boolean, default: false },
3334
required: { type: Boolean, default: false },
34-
/** Controls the layout of the field. <br><br> Options: `block`, `inline` */
35-
variant: { type: String, default: 'block' },
3635
});
3736
3837
const labelProps = computed(() => ({
@@ -42,58 +41,41 @@ const labelProps = computed(() => ({
4241
text: props.label,
4342
}));
4443
45-
const inline = computed(() => props.asConfig ? true : props.variant === 'inline');
46-
4744
const rootClasses = computed(() =>
48-
cva({
45+
twMerge(cva({
4946
base: [
5047
'min-w-0',
5148
],
5249
variants: {
53-
variant: {
54-
block: 'w-full',
55-
inline: [
56-
'flex justify-between gap-x-7 gap-y-1.5',
57-
'has-[[data-ui-label]~[data-ui-control]]:grid-cols-[1fr_auto]',
58-
'has-[[data-ui-control]~[data-ui-label]]:grid-cols-[auto_1fr]',
59-
'[&>[data-ui-control]~[data-ui-description]]:row-start-2 [&>[data-ui-control]~[data-ui-description]]:col-start-2',
60-
'[&>[data-ui-label]~[data-ui-control]]:row-start-1 [&>[data-ui-label]~[data-ui-control]]:col-start-2',
61-
],
62-
},
6350
disabled: {
6451
true: 'opacity-50',
6552
},
66-
asConfig: {
53+
inline: {
6754
true: 'grid grid-cols-2 items-start px-4.5 py-4 gap-x-5!',
6855
},
6956
fullWidthSetting: {
70-
true: '!grid-cols-1',
57+
true: 'grid-cols-1',
7158
},
7259
},
7360
})({
7461
...props,
75-
inline: inline.value,
76-
asConfig: props.asConfig,
77-
fullWidthSetting: props.fullWidthSetting,
78-
}),
62+
})),
7963
);
8064
8165
const descriptionClasses = computed(() =>
82-
cva({
66+
twMerge(cva({
8367
base: ['mb-2 -mt-0.5'],
8468
variants: {
8569
inline: {
86-
true: 'mb-0!',
70+
true: 'mb-0',
8771
},
88-
fullWidth: {
89-
true: 'mb-3!',
72+
fullWidthSetting: {
73+
true: 'mb-3',
9074
},
9175
},
9276
})({
9377
...props,
94-
inline: inline.value,
95-
fullWidth: props.fullWidthSetting,
96-
}),
78+
})),
9779
);
9880
9981
const instructions = computed(() => props.instructions ? markdown(__(props.instructions), { openLinksInNewTabs: true }) : null);

‎resources/js/components/ui/Publish/Field.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ const fieldtypeComponentEvents = computed(() => ({
228228
:required="isRequired"
229229
:errors="errors"
230230
:read-only="isReadOnly"
231-
:variant="config.variant"
231+
:inline="asConfig"
232232
:full-width-setting="config.full_width_setting"
233233
v-bind="$attrs"
234234
>

0 commit comments

Comments
 (0)