| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Prototype</title> | |
| <!-- https://tailwindcss.com/docs/installation --> | |
| <script src="https://cdn.tailwindcss.com" defer></script> |
| .wrapper { | |
| --gap: 32px; | |
| display: grid; | |
| grid-column-gap: var(--gap); | |
| grid-template-columns: 1fr min(65ch, calc(100% - 2 * var(--gap))) 1fr; | |
| } | |
| .wrapper > * { | |
| grid-column: 2; | |
| } |
| const mix = require("laravel-mix") | |
| mix.site = (id, callback) => { | |
| if (!process.env.SITE || process.env.SITE === id) { | |
| return callback() | |
| } | |
| }; | |
| mix.site('admin', () => { | |
| mix.js("resources/js/admin/app.js", "public/js/admin.js") |
| export default { | |
| render () {}, | |
| mounted () { | |
| Object.keys(this.$listeners) | |
| .foreach(event => { | |
| window.addEventListener(event, this.$listeners[event]) | |
| }) | |
| }, | |
<form>
<input name="foo" id="foo">
<input name="bar" id="bar" requiredwith="foo,baz">
<input name="baz" id="baz">
</form>Simply add a comma separated list of ids of inputs.
Hooks into native required support, so as is, it won't display a more specialised error message than the default required one.
| <script> | |
| import { ref } from '@vue/composition-api' | |
| import { onScrollBottom } from '@/scroll' | |
| export default { | |
| setup () { | |
| function loadMore () { | |
| // ... | |
| } | |
| <script> | |
| export default { | |
| render() { | |
| return this.$scopedSlots.default({ | |
| update: this.update, | |
| data: this.$data.data | |
| }) | |
| }, | |
| props: ['initialData', 'created', 'mounted'], | |
| data() { |
Tailwindcss plugin that adds a small box in the lower right corner of the screen showing the current breakpoint
Uses a position: fixed after css pseudo element on the body, so no extra markeup, and it get the breakpoint list by itself.
| <usage> | |
| <div class="h-64"> <!-- Set dimensions here --> | |
| <FileInput v-model="file"/> | |
| </div> | |
| </usage> | |
| <template> | |
| <label | |
| class="flex justify-center items-center relative rounded-lg overflow-hidden bg-gray-300 w-full h-full" | |
| > |