Skip to content

Commit

Permalink
popover
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnpuddephatt
johnpuddephatt committed Oct 17, 2024
1 parent 9b2a4fd commit 568e48f
Show file tree
Hide file tree
Showing 10 changed files with 218 additions and 102 deletions.
2 changes: 1 addition & 1 deletion dist/css/field.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/js/field.js
View file

Large diffs are not rendered by default.

24 changes: 13 additions & 11 deletions resources/js/components/FormField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
'-mx-8 -mt-6' : currentField.enablePreview && !fullScreen,
'fixed inset-0 bg-gray-50 z-50 flex flex-col' : fullScreen
}">
}" style="padding-bottom: 12rem">
<div v-if="fullScreen" class="px-4 py-2 z-20 bg-white border-b text-center">
<button class="shadow relative bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 inline-flex items-center justify-center h-9 px-3" @click="selectGroup(null)">Exit full screen mode</button>
</div>
Expand Down Expand Up @@ -137,6 +137,17 @@ export default {
methods: {
array_move(arr, old_index, new_index) {
if (new_index >= arr.length) {
var k = new_index - arr.length + 1;
while (k--) {
arr.push(undefined);
}
}
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
return arr; // for testing
},
/**
* Select the current group
*/
Expand Down Expand Up @@ -335,16 +346,7 @@ export default {
scrollSpeed: 5,
animation: 500,
onEnd: (evt) => {
const item = evt.item;
const key = item.id;
const oldIndex = evt.oldIndex;
const newIndex = evt.newIndex;
if (newIndex < oldIndex) {
this.moveUp(key);
} else if (newIndex > oldIndex) {
this.moveDown(key);
}
this.order = this.array_move(this.order, evt.oldIndex, evt.newIndex);
}
});
},
Expand Down
152 changes: 93 additions & 59 deletions resources/js/components/FormGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,28 @@
<div class="relative mb-4 pb-1" :id="group.key">
<div class="w-full shrink">
<div :class="titleStyle" v-if="group.title">
<div class="h-8 leading-normal h-full flex items-center box-content"
<div class="h-8 leading-normal flex items-center box-content"
:class="{'border-b border-gray-200 dark:border-gray-700 ': !collapsed}">
<button
dusk="expand-group"
type="button"
class="shrink-0 group-control btn border-r border-gray-200 dark:border-gray-700 w-8 h-8 block"
:title="__('Expand')"
@click.prevent="expand"
v-if="collapsed">
<icon type="plus" class="align-top" width="16" height="16" />
</button>
<button
dusk="collapse-group"
type="button"
class="group-control btn border-r border-gray-200 dark:border-gray-700 w-8 h-8 block"
:title="__('Collapse')"
@click.prevent="collapse"
v-else>
<icon type="minus" class="align-top" width="16" height="16" />
</button>

<p class="text-80 grow px-4">
<span class="mr-3 font-semibold">#{{ index + 1 }}</span>
{{ group.title }}
</p>

<div class="flex" v-if="!readonly">
<button
<button
dusk="drag-group"
type="button"
class="group-control btn border-l border-gray-200 dark:border-gray-700 w-8 h-8 block nova-flexible-content-drag-button"
:title="__('Drag')"
>
<icon type="selector" class="align-top" width="16" height="16" />
</button>
<button
dusk="move-up-group"
type="button"
class="group-control btn border-l border-gray-200 dark:border-gray-700 w-8 h-8 block"
:title="__('Move up')"
@click.prevent="moveUp">
<icon type="arrow-up" class="align-top" width="16" height="16" />
</button>
<button
dusk="move-down-group"
type="button"
class="group-control btn border-l border-gray-200 dark:border-gray-700 w-8 h-8 block"
:title="__('Move down')"
@click.prevent="moveDown">
<icon type="arrow-down" class="align-top" width="16" height="16" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 mx-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
</svg>

</button>

<button @click.prevent="collapsed? expand() : collapse()" class="text-left text-80 grow">
<span class="mr-3 font-semibold">#{{ index + 1 }}</span>
{{ group.title }}<span v-if="collapsedPreview">: <span class="mr-3 font-semibold">{{ truncate(collapsedPreview, 30) }}</span></span>
</button>

<div class="flex" v-if="!readonly">


<button
dusk="delete-group"
type="button"
Expand All @@ -73,21 +44,49 @@

</div>
</div>
<div :class="containerStyle">
<component
v-for="(item, index) in group.fields"
:key="index"
:is="'form-' + item.component"
:resource-name="resourceName"
:resource-id="resourceId"
:field="item"
:errors="errors"
:mode="mode"
:show-help-text="item.helpText != null"
:class="{ 'remove-bottom-border': index == group.fields.length - 1 }"
/>
</div>
</div>

<transition v-if="field.drawer"
enter-active-class="transition duration-200 ease-out"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition duration-200 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="!collapsed"
@click="collapse"
class="fixed z-20 inset-0 bg-gray-600/75 dark:bg-gray-900/75"
></div>

</transition>

<div
:class="{
'translate-x-full opacity-0': collapsed && field.drawer,
'fixed flex flex-col z-20 top-0 transition duration-200 ease-in right-0 h-screen divide-y divide-gray-200 dark:divide-gray-700 shadow bg-white dark:bg-gray-800 w-screen max-w-4xl ml-auto border-b border-gray-200 dark:border-gray-700 overflow-x-hidden overflow-y-scroll' : field.drawer,
'grow border-b border-r border-l border-gray-200 dark:border-gray-700 rounded-b-lg' : !field.drawer,
'hidden': collapsed && !field.drawer }"

>
<div v-if="field.drawer" class="-mb-px border-b border-gray-200 z-20 bg-primary-50 sticky top-0 py-5 px-6 md:px-8 flex justify-between">Edit {{ group.title }} <button class="ml-auto inline-block" @click.prevent="collapse">CLOSE</button></div>
<component
v-for="(item, index) in group.fields"
:key="index"
:is="'form-' + item.component"
:resource-name="resourceName"
:resource-id="resourceId"
:field="item"
:errors="errors"
:mode="mode"
:show-help-text="item.helpText != null"
@change="handleFieldChanged($event, item)"
:class="{ 'remove-bottom-border': index == group.fields.length - 1 }"
/>
</div>


<!-- </transition> -->
</div>
</div>
</template>

Expand All @@ -113,10 +112,14 @@ export default {
removeMessage: false,
collapsed: this.group.collapsed,
readonly: this.group.readonly,
collapsedPreview: null,
};
},
computed: {
collapsedPreviewAttribute() {
return this.field.layouts.find(layout => layout.name === this.group.name)?.collapsedPreviewAttribute;
},
titleStyle() {
let classes = ['border-t', 'border-r', 'border-l', 'border-gray-200', 'dark:border-gray-700', 'rounded-t-lg'];
Expand All @@ -142,6 +145,19 @@ export default {
}
},
mounted() {
// Object.values(this.group.fields).forEach(field => {
// if (this.collapsedPreviewAttribute && this.getFieldAttribute(field) === this.collapsedPreviewAttribute) {
// this.collapsedPreview = field.value;
// }
// });
this.collapsedPreview = Object.values(this.group.fields).find(field => {
return this.getFieldAttribute(field) === this.collapsedPreviewAttribute;
})?.value;
},
methods: {
/**
* Move this group up
Expand All @@ -150,6 +166,24 @@ export default {
this.$emit('move-up');
},
getFieldAttribute(item) {
return item.attribute.split('__').pop();
},
truncate(value, length) {
if (value.length > length) {
return value.substring(0, length) + "...";
} else {
return value;
}
},
handleFieldChanged(event, item) {
if (this.getFieldAttribute(item) === this.collapsedPreviewAttribute) {
this.collapsedPreview = event.target.value;
}
},
/**
* Move this group down
*/
Expand Down
29 changes: 29 additions & 0 deletions resources/js/components/PreviewIframe.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,41 @@
<base target='_blank' />
<link rel='stylesheet' href='${stylesheet}' />
<script type='module'>
function findVhElements() {
const stylesheets = Array.from(document.styleSheets);
const hasVh = str => str && str.includes('vh');
return stylesheets.reduce((acc, sheet) => {
const targetRules = Array.from(sheet.cssRules).filter(({ style }) =>
style && ((hasVh(style.minHeight) && parseInt(style.minHeight) > 100) || (hasVh(style.height) && parseInt(style.height) > 100))
);
if (!targetRules.length) return acc;
return acc.concat(
targetRules.map(({ selectorText, style }) => {
return { selector: selectorText, height: style.height, minHeight: style.minHeight };
}).filter(el => el));
}, []);
}
function resizeVhElements() {
findVhElements().forEach((item) => {
console.log('resizing all: ' + item.selector);
document.querySelectorAll(item.selector).forEach(
(elem) => elem.style.height = parseInt(item.height) / 100 * document.body.clientHeight + 'px'
);
});
}
window.addEventListener('message', (event) => {
document.body.innerHTML = event.data;
window.parent.postMessage('${flexible_key}', '*');
resizeVhElements();
});
window.addEventListener('load', (event)=> {
window.parent.postMessage('${flexible_key}', '*');
resizeVhElements();
});
window.addEventListener('resize', (event)=> {
window.parent.postMessage('${flexible_key}', '*');
Expand Down
21 changes: 21 additions & 0 deletions resources/sass/field.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,24 @@ $multiselect-placeholder-color: #7c858e;
.dark .nova-flexible-content-sortable-drag {
background-color: rgba(var(--colors-gray-900),var(--tw-bg-opacity));
}


.sticky {
position: sticky;
}

.top-0 {
top: 0;
}

.translate-x-full {
transform: translateX(100%);
}

.translate-x-0 {
transform: translateX(0);
}

.-mb-px {
margin-bottom: -1px;
}
30 changes: 22 additions & 8 deletions src/Flexible.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,13 +154,15 @@ public function confirmRemove($label = '', $yes = 'Delete', $no = 'Cancel')
* @param string $stylesheetPath
* @return $this
*/
public function enablePreview($stylesheetPath) {
public function enablePreview($stylesheetPath)
{
return $this->withMeta([
'enablePreview' => $stylesheetPath
]);
}

public function defaultLayouts($layouts) {
public function defaultLayouts($layouts)
{
return $this->withMeta([
'defaultLayouts' => $layouts
]);
Expand All @@ -179,7 +181,7 @@ public function resolver($resolver)
}

if (! ($resolver instanceof ResolverInterface)) {
throw new \Exception('Resolver Class "'.get_class($resolver).'" does not implement ResolverInterface.');
throw new \Exception('Resolver Class "' . get_class($resolver) . '" does not implement ResolverInterface.');
}

$this->resolver = $resolver;
Expand Down Expand Up @@ -210,7 +212,7 @@ public function addLayout(...$arguments)
}

if (! ($layout instanceof LayoutInterface)) {
throw new \Exception('Layout Class "'.get_class($layout).'" does not implement LayoutInterface.');
throw new \Exception('Layout Class "' . get_class($layout) . '" does not implement LayoutInterface.');
}

$this->registerLayout($layout);
Expand Down Expand Up @@ -245,6 +247,16 @@ public function collapsed(bool $value = true)
return $this;
}

public function drawer(bool $value = true)
{
$this->withMeta([
'collapsed' => $value,
'drawer' => $value
]);

return $this;
}

/**
* Push a layout instance into the layouts collection
*
Expand All @@ -270,6 +282,7 @@ protected function registerLayout(LayoutInterface $layout)
*/
public function resolve($resource, $attribute = null)
{

$attribute = $attribute ?? $this->attribute;

$this->registerOriginModel($resource);
Expand Down Expand Up @@ -594,10 +607,10 @@ protected function generateRules(NovaRequest $request, $value, $specificty)

$scope = ScopedRequest::scopeFrom($request, $item['attributes'], $item['key']);

return $group->generateRules($scope, $specificty, $this->attribute.'.'.$key);
return $group->generateRules($scope, $specificty, $this->attribute . '.' . $key);
})
->collapse()
->all();
->collapse()
->all();
}

/**
Expand Down Expand Up @@ -627,7 +640,8 @@ protected static function registerValidationKeys(array $rules)
}, $rules);

static::$validatedKeys = array_merge(
static::$validatedKeys, $validatedKeys
static::$validatedKeys,
$validatedKeys
);
}

Expand Down
Loading

0 comments on commit 568e48f

Please sign in to comment.