mirror of https://github.com/kcal-app/kcal.git
Update to AlpineJS 3.x
This commit is contained in:
Christopher C. Wells
parent
636f9ff864
commit
feb6cce3a4
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
|
|
@ -10,22 +10,21 @@
|
|||
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.3.2",
|
||||
"@tailwindcss/forms": "^0.3.3",
|
||||
"@tailwindcss/typography": "^0.4.1",
|
||||
"alpinejs": "^2.8.2",
|
||||
"autoprefixer": "^10.2.6",
|
||||
"alpinejs": "^3.2.1",
|
||||
"autoprefixer": "^10.3.1",
|
||||
"axios": "^0.21.1",
|
||||
"cross-env": "^7.0",
|
||||
"laravel-mix": "^6.0.19",
|
||||
"laravel-mix": "^6.0.25",
|
||||
"lodash": "^4.17.21",
|
||||
"postcss-import": "^14.0.2",
|
||||
"quill": "^1.3.7",
|
||||
"resolve-url-loader": "^4.0.0",
|
||||
"tailwindcss": "^2.1.2",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
"tailwindcss": "^2.2.4",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"dependencies": {
|
||||
"@shopify/draggable": "^1.0.0-beta.12",
|
||||
"alpine-magic-helpers": "^1.2.2"
|
||||
"@shopify/draggable": "^1.0.0-beta.12"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1 @@
|
|||
require('./bootstrap');
|
||||
|
||||
require('alpine-magic-helpers');
|
||||
require('alpinejs');
|
||||
|
|
|
|||
|
|
@ -1,28 +1,11 @@
|
|||
// Load Lodash.
|
||||
window._ = require('lodash');
|
||||
|
||||
/**
|
||||
* We'll load the axios HTTP library which allows us to easily issue requests
|
||||
* to our Laravel back-end. This library automatically handles sending the
|
||||
* CSRF token as a header based on the value of the "XSRF" token cookie.
|
||||
*/
|
||||
|
||||
// Load Axios.
|
||||
window.axios = require('axios');
|
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
|
||||
/**
|
||||
* Echo exposes an expressive API for subscribing to channels and listening
|
||||
* for events that are broadcast by Laravel. Echo and event broadcasting
|
||||
* allows your team to easily build robust real-time web applications.
|
||||
*/
|
||||
|
||||
// import Echo from 'laravel-echo';
|
||||
|
||||
// window.Pusher = require('pusher-js');
|
||||
|
||||
// window.Echo = new Echo({
|
||||
// broadcaster: 'pusher',
|
||||
// key: process.env.MIX_PUSHER_APP_KEY,
|
||||
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
|
||||
// forceTLS: true
|
||||
// });
|
||||
// Load AlpineJS.
|
||||
import Alpine from 'alpinejs';
|
||||
window.Alpine = Alpine;
|
||||
Alpine.start();
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ switch ($width) {
|
|||
}
|
||||
@endphp
|
||||
|
||||
<div class="relative" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false">
|
||||
<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
|
||||
<div @click="open = ! open">
|
||||
{{ $trigger }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@
|
|||
autocapitalize="none"
|
||||
inputmode="search"
|
||||
x-ref="ingredients_name"
|
||||
x-spread="search" />
|
||||
x-bind="search" />
|
||||
</div>
|
||||
<div x-show="searching" x-cloak>
|
||||
<div class="absolute border-2 border-gray-500 border-b-0 bg-white"
|
||||
x-spread="ingredient">
|
||||
x-bind="ingredient">
|
||||
<template x-for="result in results" :key="result.id">
|
||||
<div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer" x-bind:data-id="result.id">
|
||||
<div class="pointer-events-none">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div x-data="searchView()" x-init="loadMore()">
|
||||
<div x-data="searchView">
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
|
||||
<nav class="md:w-1/4">
|
||||
<x-inputs.input name="search"
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
class="bg-blue-800 hover:bg-blue-700 active:bg-blue-900 focus:border-blue-900 ring-blue-300"
|
||||
x-show="morePages"
|
||||
x-cloak
|
||||
@click.prevent="loadMore()">
|
||||
@click.prevent="loadMore">
|
||||
Load more
|
||||
</x-inputs.button>
|
||||
</section>
|
||||
|
|
@ -51,8 +51,8 @@
|
|||
@once
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
let searchView = () => {
|
||||
return {
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('searchView', () => ({
|
||||
results: [],
|
||||
number: 1,
|
||||
size: 12,
|
||||
|
|
@ -60,6 +60,9 @@
|
|||
searchTerm: null,
|
||||
searching: false,
|
||||
filterTags: [],
|
||||
init() {
|
||||
this.loadMore();
|
||||
},
|
||||
resetPagination() {
|
||||
this.number = 1;
|
||||
this.morePages = false;
|
||||
|
|
@ -109,8 +112,8 @@
|
|||
}
|
||||
this.loadMore();
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
@endonce
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div x-data data-tags="{{ $defaultTags ?? '[]' }}">
|
||||
<div x-data="tagSelect()" x-init="init('parentEl')" @click.away="clearSearch()" @keydown.escape="clearSearch()">
|
||||
<div x-data="tagSelect()" @click.outside="clearSearch()" @keydown.escape="clearSearch()">
|
||||
<div class="relative" @keydown.enter.prevent="addTag(searchTerm)">
|
||||
<x-inputs.input type="hidden"
|
||||
name="tags"
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</x-slot>
|
||||
<x-search-view :route="route('api:v1:foods.index')" :tags="$tags">
|
||||
<x-slot name="results">
|
||||
<template x-for="food in results" :key="food">
|
||||
<template x-for="food in results" :key="food.slug">
|
||||
<article class="p-1 border-2 border-black font-sans">
|
||||
<h1 class="text-2xl lowercase font-extrabold leading-none">
|
||||
<a x-bind:href="food.showUrl"
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
</x-slot>
|
||||
<form method="POST" action="{{ route('journal-entries.store') }}">
|
||||
@csrf
|
||||
<div x-data x-init="initJournalEntries($el);" class="space-y-4">
|
||||
<div x-data x-ref="root" x-init="initJournalEntries($refs.root)" class="space-y-4">
|
||||
@foreach($ingredients as $ingredient)
|
||||
@include('journal-entries.partials.entry-item-input', $ingredient)
|
||||
@endforeach
|
||||
<div class="journal-entry-template hidden">
|
||||
@include('journal-entries.partials.entry-item-input', ['default_date' => $default_date])
|
||||
</div>
|
||||
<x-inputs.icon-green type="button" class="add-entry-item" x-on:click="addEntryNode($el);">
|
||||
<x-inputs.icon-green type="button" class="add-entry-item" x-on:click="addEntryNode($refs.root);">
|
||||
<svg class="h-10 w-10 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<x-inputs.input type="checkbox" name="group_entries" class="h-5 w-5" value="1" />
|
||||
<span class="ml-2">Group entries by day and meal</span>
|
||||
</x-inputs.label>
|
||||
<x-inputs.button x-on:click="removeTemplate($el);">Add entries</x-inputs.button>
|
||||
<x-inputs.button x-on:click="removeTemplate($refs.root);">Add entries</x-inputs.button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="text-base text-gray-500">
|
||||
<form x-data method="GET" action="{{ route('journal-entries.index') }}">
|
||||
<form x-data x-ref="root" method="GET" action="{{ route('journal-entries.index') }}">
|
||||
<x-inputs.input name="date"
|
||||
type="date"
|
||||
class="border-0 shadow-none p-0 text-center"
|
||||
:value="$date->toDateString()"
|
||||
x-on:change="$el.submit();"
|
||||
x-on:change="$refs.root.submit();"
|
||||
required />
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@
|
|||
<x-dropdown-link :href="route('users.index')">Manage Users</x-dropdown-link>
|
||||
@endcan
|
||||
<hr />
|
||||
<form method="POST" action="{{ route('logout') }}" x-data>
|
||||
<form method="POST" action="{{ route('logout') }}" x-data x-ref="root">
|
||||
@csrf
|
||||
<x-dropdown-link :href="route('logout')" @click.prevent="$el.closest('form').submit();">Logout</x-dropdown-link>
|
||||
<x-dropdown-link :href="route('logout')" @click.prevent="$refs.root.closest('form').submit();">Logout</x-dropdown-link>
|
||||
</form>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<x-slot name="header">
|
||||
<h1 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h1>
|
||||
</x-slot>
|
||||
<form x-data method="POST" enctype="multipart/form-data" action="{{ ($recipe->exists ? route('recipes.update', $recipe) : route('recipes.store')) }}">
|
||||
<form x-data x-ref="root" method="POST" enctype="multipart/form-data" action="{{ ($recipe->exists ? route('recipes.update', $recipe) : route('recipes.store')) }}">
|
||||
@if ($recipe->exists)@method('put')@endif
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
|
||||
<!-- Ingredients -->
|
||||
<h3 class="mt-6 mb-2 font-extrabold text-lg">Ingredients</h3>
|
||||
<div x-data class="ingredients space-y-4">
|
||||
<div x-data x-ref="ingredients" class="ingredients space-y-4">
|
||||
@forelse($ingredients_list->sortBy('weight') as $item)
|
||||
@if($item['type'] === 'ingredient')
|
||||
@include('recipes.partials.ingredient-input', $item)
|
||||
|
|
@ -134,19 +134,19 @@
|
|||
</div>
|
||||
<x-inputs.button type="button"
|
||||
class="bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 ring-green-300"
|
||||
x-on:click="addNodeFromTemplate($el, 'ingredient');">
|
||||
x-on:click="addNodeFromTemplate($refs.ingredients, 'ingredient');">
|
||||
Add Ingredient
|
||||
</x-inputs.button>
|
||||
<x-inputs.button type="button"
|
||||
class="bg-blue-800 hover:bg-blue-700 active:bg-blue-900 focus:border-blue-900 ring-blue-300"
|
||||
x-on:click="addNodeFromTemplate($el, 'separator');">
|
||||
x-on:click="addNodeFromTemplate($refs.ingredients, 'separator');">
|
||||
Add Separator
|
||||
</x-inputs.button>
|
||||
</div>
|
||||
|
||||
<!-- Steps -->
|
||||
<h3 class="mt-6 mb-2 font-extrabold text-lg">Steps</h3>
|
||||
<div x-data class="steps">
|
||||
<div x-data x-ref="steps" class="steps">
|
||||
@forelse($steps as $step)
|
||||
@include('recipes.partials.step-input', $step)
|
||||
@empty
|
||||
|
|
@ -159,13 +159,13 @@
|
|||
</div>
|
||||
<x-inputs.button type="button"
|
||||
class="bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 ring-green-300"
|
||||
x-on:click="addNodeFromTemplate($el, 'step');">
|
||||
x-on:click="addNodeFromTemplate($refs.steps, 'step');">
|
||||
Add Step
|
||||
</x-inputs.button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<x-inputs.button x-on:click="prepareForm($el);" class="ml-3">
|
||||
<x-inputs.button x-on:click="prepareForm($refs.root);" class="ml-3">
|
||||
{{ ($recipe->exists ? 'Save' : 'Add') }}
|
||||
</x-inputs.button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</x-slot>
|
||||
<x-search-view :route="route('api:v1:recipes.index')" :tags="$tags">
|
||||
<x-slot name="results">
|
||||
<template x-for="recipe in results" :key="recipe">
|
||||
<template x-for="recipe in results" :key="recipe.slug">
|
||||
<article class="p-1 border-2 border-black font-sans">
|
||||
<h1 class="text-2xl font-extrabold">
|
||||
<a x-bind:href="recipe.showUrl"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</h1>
|
||||
</x-slot>
|
||||
<div class="flex flex-col-reverse justify-between md:flex-row md:space-x-4">
|
||||
<div class="flex-1" x-data="{showNutrientsSummary: false}">
|
||||
<div class="flex-1" x-data="{ showNutrientsSummary: false }">
|
||||
@if($recipe->time_total > 0)
|
||||
<section class="flex justify-between mb-2 p-2 bg-gray-100 rounded max-w-3xl">
|
||||
<div>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
{!! $recipe->description !!}
|
||||
</section>
|
||||
@endif
|
||||
<section x-data="{showNutrientsSummary: false}">
|
||||
<section x-data="{ showNutrientsSummary: false }">
|
||||
<h1 class="mb-2 font-bold text-2xl">
|
||||
Ingredients
|
||||
<span class="text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 font-normal cursor-pointer"
|
||||
|
|
|
|||
Loading…
Reference in New Issue