From be91596000b5d86b4d010cb6093d8ef2a793480e Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Mon, 30 Oct 2017 12:23:52 -0400 Subject: [PATCH 01/34] Tweak headers on Functions & Directives page in docs --- docs/source/functions-and-directives.blade.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/source/functions-and-directives.blade.md b/docs/source/functions-and-directives.blade.md index 837a94091..1a994542d 100644 --- a/docs/source/functions-and-directives.blade.md +++ b/docs/source/functions-and-directives.blade.md @@ -7,7 +7,7 @@ title: "Functions & Directives" Tailwind exposes a few CSS functions and directives that can be used in your actual CSS files. -## @tailwind +## `@tailwind` Use the `@tailwind` directive to insert the Tailwind reset styles and utilities into your CSS file. Here is a full example of how you might do this: @@ -43,7 +43,7 @@ Use the `@tailwind` directive to insert the Tailwind reset styles and utilities } ``` -## @responsive +## `@responsive` You can generate responsive versions of your own utilities by wrapping their definitions in the `@responsive` directive: @@ -83,7 +83,7 @@ This will generate these classes (assuming you haven't changed the default break } ``` -## @screen +## `@screen` Say you have a `sm` breakpoint at `576px`, and you need to write some custom CSS that references this breakpoint. @@ -103,7 +103,7 @@ Instead of duplicating the values like this: } ``` -## config() +## `config()` With all your variables defined in your JavaScript-based Tailwind config file, you may be wondering how you access those values in your custom CSS. This can be done using the `config()` helper function. Here is an example: From 7e860a8a6f121cb1f7d93ef92ba50e18bb7b5967 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Mon, 30 Oct 2017 12:24:25 -0400 Subject: [PATCH 02/34] Fix grammar issues --- docs/source/colors.blade.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/source/colors.blade.md b/docs/source/colors.blade.md index 46fe7fda8..169fedafe 100644 --- a/docs/source/colors.blade.md +++ b/docs/source/colors.blade.md @@ -424,7 +424,7 @@ To get you started, we've provided a generous palette of great looking colors th ## Customizing -Tailwind makes it a breeze to modify to default color palette for you project. Remember, you own these colors and nothing will break if you change everything about them. +Tailwind makes it a breeze to modify the default color palette for you project. Remember, you own these colors and nothing will break if you change everything about them. By default Tailwind defines the entire color palette in a `colors` object at the top of your Tailwind config file. These colors are then assigned to `textColors`, `backgroundColors` and `borderColors`. This approach works well since it provides a consistent naming system across all the utilities. However, you're welcome to modify them independently of one-another as well. @@ -465,6 +465,6 @@ You'll notice above that the color palette is also assigned to the `colors` key In the default color palette we've used literal color names, like `red`, `green` and `blue`. Another common approach to naming colors is choosing functional names based on how the colors are used, such as `primary`, `secondary`, and `brand`. -You can also choose different approaches how handle your color variants. In the default color palette we've again used literal variants, like `light`, `dark`, and `darker`. Another common approach here is to use a numeric scale, like `100`, `200` and `300`. +You can also choose different approaches to how you name your color variants. In the default color palette we've again used literal variants, like `light`, `dark`, and `darker`. Another common approach here is to use a numeric scale, like `100`, `200` and `300`. -You should feel free to choose whatever color naming approach makes the most sense to your team. +You should feel free to choose whatever color naming approach makes the most sense to you. From bdc7587de597c6b1d43124d54e578492c1143193 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 12:57:34 -0400 Subject: [PATCH 03/34] Add more details to installation docs --- docs/source/_assets/less/markdown.less | 9 +++ docs/source/installation.blade.md | 103 +++++++++++++++++++------ 2 files changed, 89 insertions(+), 23 deletions(-) diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less index 35884deb2..e6f5a64ce 100644 --- a/docs/source/_assets/less/markdown.less +++ b/docs/source/_assets/less/markdown.less @@ -79,6 +79,15 @@ @apply .text-lg; } + > h4, h4& { + @apply .mt-8; + @apply .mb-0; + @apply .text-slate-darker; + @apply .leading-none; + @apply .font-semibold; + @apply .text-base; + } + > p, p&, > blockquote > p { @apply .text-slate-dark; @apply .mt-4; diff --git a/docs/source/installation.blade.md b/docs/source/installation.blade.md index 42edab79f..07e53c2bb 100644 --- a/docs/source/installation.blade.md +++ b/docs/source/installation.blade.md @@ -9,15 +9,15 @@ title: "Installation" Quick start guide for installing and configuring Tailwind. -## 1. Install the dependency +## 1. Install Tailwind via npm Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
# Using npm
-
npm install tailwindcss
+
npm install tailwindcss --save-dev
# Using Yarn
-
yarn install tailwindcss
+
yarn add tailwindcss --dev
## 2. Create a Tailwind config file @@ -32,7 +32,9 @@ Alternatively, you can simply copy the default config file [from here](https://g ## 3. Add Tailwind to your CSS -Next, you need to add Tailwind to your main stylesheet. This can be plain CSS, Less, Sass, Stylus, or something else. There order here is important, so please follow this structure: +Use the `@@tailwind` directive to inject Tailwind's `reset` and `utilities` styles into your CSS. + +To avoid specificity issues, we highly recommend structuring your main stylesheet like this: ```less /** @@ -42,48 +44,103 @@ Next, you need to add Tailwind to your main stylesheet. This can be plain CSS, L * You can see the styles here: * https://github.com/nothingworksinc/tailwindcss/blob/master/css/preflight.css */ -@tailwind reset; +@@tailwind reset; /** * Here you would import any custom component classes; stuff that you'd * want loaded *before* the utilities so that the utilities can still * override them. */ -@import "my-components/foo"; -@import "my-components/bar"; +// @@import "my-components/foo"; +// @@import "my-components/bar"; /** * This injects all of Tailwind's utility classes, generated based on your * config file. */ -@tailwind utilities; +@@tailwind utilities; /** * Here you would add any custom utilities you need that don't come out of the box with Tailwind. */ -.bg-hero-image { - background-image: url('/some/image/file.png'); +// .bg-hero-image { +// background-image: url('/some/image/file.png'); +// } +``` + +## 4. Process your CSS with Tailwind + +### Using Tailwind CLI + +For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS: + +
+
./node_modules/.bin/tailwind styles.css [-c ./your-tailwind-config.js] [-o ./output.css]
+
+ +### Using Tailwind with PostCSS + +For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain. + +We've included the Tailwind-specific instructions for a few popular tools below, but for instructions on getting started with PostCSS in general, see the [PostCSS documentation](https://github.com/postcss/postcss#usage). + +#### Webpack + +Add `tailwindcss` as a plugin in your `postcss.config.js` file, passing the path to your config file: + +```js +var tailwindcss = require('tailwindcss'); +module.exports = { + plugins: [ + // ... + tailwindcss('./path/to/your/tailwind-config.js'), + // ... + ] } ``` -## 4. Add Tailwind to your build process +### Gulp -Finally, you'll need to add Tailwind to your build process. Fair warning: this can be the trickiest step. For simple projects you can use the Tailwind CLI tool to generate your CSS: - -
-
./node_modules/.bin/tailwind styles.css [-c ./custom-config.js] [-o ./output.css]
-
- -For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain, passing your config object as a parameter. Here's an example using [Laravel Mix](https://laravel.com/docs/5.5/mix): +Add `tailwindcss` to the list of plugins you pass to [gulp-postcss](https://github.com/postcss/gulp-postcss), passing the path to your config file: ```js -const mix = require('laravel-mix'); -const tailwind = require('tailwindcss'); +gulp.task('css', function () { + var postcss = require('gulp-postcss'); + var tailwindcss = require('tailwindcss'); -mix.less('resources/assets/less/app.less', 'public/css') + return gulp.src('src/styles.css') + // ... + .pipe(postcss([ + // ... + tailwindcss('./path/to/your/tailwind-config.js'), + // ... + ])) + // ... + .pipe(gulp.dest('build/')); +}); +``` + +#### Laravel Mix + +If you're writing your project in plain CSS, use Mix's `postCss` method to process your CSS. Include `tailwindcss` as a plugin and pass the path to your config file: + +```js +var tailwindcss = require('tailwindcss'); + +mix.postCss('resources/assets/css/main.css', 'public/css', [ + tailwindcss('./path/to/your/tailwind-config.js'), +]); +``` + +If you're using a preprocessor, use the `options` method to add `tailwindcss` as a PostCSS plugin: + +```js +var tailwindcss = require('tailwindcss'); + +mix.less('source/_assets/less/main.less', 'source/css') .options({ postCss: [ - tailwind(require('./path/to/your/tailwind/config.js')) + tailwindcss('./path/to/your/tailwind-config.js'), ] - }); + }) ``` From 9880e16821c1ddc1f488c1948de0b8b340e57d2a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 12:58:04 -0400 Subject: [PATCH 04/34] Don't double declare `font-family: inherit` on buttons --- __tests__/fixtures/tailwind.css | 1 - css/preflight.css | 1 - 2 files changed, 2 deletions(-) diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css index b1d1e9d56..3f6b21548 100644 --- a/__tests__/fixtures/tailwind.css +++ b/__tests__/fixtures/tailwind.css @@ -555,7 +555,6 @@ input::placeholder { button, [role=button] { - font-family: inherit; cursor: pointer; } diff --git a/css/preflight.css b/css/preflight.css index 4be97e1db..8a98969ac 100644 --- a/css/preflight.css +++ b/css/preflight.css @@ -95,6 +95,5 @@ input::placeholder { } button, [role=button] { - font-family: inherit; cursor: pointer; } From a0bca677656777bed7cf50f4492243ae596bf88b Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 13:01:07 -0400 Subject: [PATCH 05/34] Remove base styles page We can add something around this later if we want. --- docs/source/_layouts/master.blade.php | 1 - docs/source/base.blade.md | 14 -------------- 2 files changed, 15 deletions(-) delete mode 100644 docs/source/base.blade.md diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index e7f86d6c8..4aeb400fc 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -87,7 +87,6 @@

Styles

    -
  • Base
  • Backgrounds
      diff --git a/docs/source/base.blade.md b/docs/source/base.blade.md deleted file mode 100644 index e5a258ed3..000000000 --- a/docs/source/base.blade.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -extends: _layouts.markdown -title: "Base" ---- - -# Base - -
      - Usage - Responsive - Customizing -
      - -Document our base styles. From 795534c5318966aa20ecc0fb9fae04838244a37f Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 13:13:37 -0400 Subject: [PATCH 06/34] Polish functions and directives docs --- docs/source/functions-and-directives.blade.md | 69 ++++++++++--------- 1 file changed, 35 insertions(+), 34 deletions(-) diff --git a/docs/source/functions-and-directives.blade.md b/docs/source/functions-and-directives.blade.md index 1a994542d..299effe3f 100644 --- a/docs/source/functions-and-directives.blade.md +++ b/docs/source/functions-and-directives.blade.md @@ -5,11 +5,11 @@ title: "Functions & Directives" # Functions & Directives -Tailwind exposes a few CSS functions and directives that can be used in your actual CSS files. +Tailwind exposes a few custom CSS functions and directives that can be used in your actual CSS files. -## `@tailwind` +## `@@tailwind` -Use the `@tailwind` directive to insert the Tailwind reset styles and utilities into your CSS file. Here is a full example of how you might do this: +Use the `@@tailwind` directive to insert Tailwind's `reset` and `utilities` styles into your CSS. Here is a full example of how you might do this: ```less /** @@ -19,36 +19,21 @@ Use the `@tailwind` directive to insert the Tailwind reset styles and utilities * You can see the styles here: * https://github.com/nothingworksinc/tailwindcss/blob/master/css/preflight.css */ -@tailwind reset; - -/** - * Here you would import any custom component classes; stuff that you'd - * want loaded *before* the utilities so that the utilities can still - * override them. - */ -@import "my-components/foo"; -@import "my-components/bar"; +@@tailwind reset; /** * This injects all of Tailwind's utility classes, generated based on your * config file. */ -@tailwind utilities; - -/** - * Here you would add any custom utilities you need that don't come out of the box with Tailwind. - */ -.bg-hero-image { - background-image: url('/some/image/file.png'); -} +@@tailwind utilities; ``` -## `@responsive` +## `@@responsive` -You can generate responsive versions of your own utilities by wrapping their definitions in the `@responsive` directive: +You can generate responsive versions of your own classes by wrapping their definitions in the `@responsive` directive: ```less -@responsive { +@@responsive { .bg-gradient-brand { background-image: linear-gradient(blue, green); } @@ -61,51 +46,67 @@ This will generate these classes (assuming you haven't changed the default break .bg-gradient-brand { background-image: linear-gradient(blue, green); } -@media (min-width: 576px) { + +// ... + +@@media (min-width: 576px) { .sm\:bg-gradient-brand { background-image: linear-gradient(blue, green); } + // ... } -@media (min-width: 768px) { + +@@media (min-width: 768px) { .md\:bg-gradient-brand { background-image: linear-gradient(blue, green); } + // ... } -@media (min-width: 992px) { + +@@media (min-width: 992px) { .lg\:bg-gradient-brand { background-image: linear-gradient(blue, green); } + // ... } -@media (min-width: 1200px) { + +@@media (min-width: 1200px) { .xl\:bg-gradient-brand { background-image: linear-gradient(blue, green); } + // ... } ``` -## `@screen` +The responsive versions will be added to Tailwind's existing media queries at the end of your stylesheet to make sure classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property. -Say you have a `sm` breakpoint at `576px`, and you need to write some custom CSS that references this breakpoint. +## `@@screen` -Instead of duplicating the values like this: +The `@@screen` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS. + +For example, say you have a `sm` breakpoint at `576px` and you need to write some custom CSS that references this breakpoint. + +Instead of writing a raw media query that duplicates that value like this: ```less -@media (min-width: 576px) { +{{ '@media (min-width: 576px) {' }} /* ... */ } ``` -...you can use the `@screen` directive and pass the breakpoint name: +...you can use the `@@screen` directive and reference the breakpoint by name: ```less -@screen sm { +@@screen sm { /* ... */ } ``` ## `config()` -With all your variables defined in your JavaScript-based Tailwind config file, you may be wondering how you access those values in your custom CSS. This can be done using the `config()` helper function. Here is an example: +While it's recommended to use the `@@apply` directive to compose custom CSS out of existing utility classes whenever possible, some times you need direct access to your Tailwind config values. + +Use the `config()` function to access your Tailwind config values using dot notation: ```less .error { From d0b47f2a612e0660f6cb64d5009a8cadce53b068 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Mon, 30 Oct 2017 13:23:40 -0400 Subject: [PATCH 07/34] Move docs to /docs. --- docs/source/_layouts/master.blade.php | 148 +++++++++--------- .../{ => docs}/adding-new-utilities.blade.md | 0 .../{ => docs}/background-color.blade.md | 0 .../{ => docs}/background-position.blade.md | 0 .../{ => docs}/background-size.blade.md | 0 docs/source/{ => docs}/base.blade.md | 0 docs/source/{ => docs}/border-color.blade.md | 0 docs/source/{ => docs}/border-radius.blade.md | 0 docs/source/{ => docs}/border-style.blade.md | 0 docs/source/{ => docs}/border-width.blade.md | 0 docs/source/{ => docs}/colors.blade.md | 0 docs/source/{ => docs}/configuration.blade.md | 0 docs/source/{ => docs}/container.blade.md | 0 docs/source/{ => docs}/cursor.blade.md | 0 docs/source/{ => docs}/display.blade.md | 2 +- .../{ => docs}/examples/alerts.blade.md | 0 .../{ => docs/examples}/buttons.blade.md | 0 .../source/{ => docs}/examples/cards.blade.md | 0 .../{ => docs}/extracting-components.blade.md | 0 .../{ => docs}/flexbox-align-content.blade.md | 2 +- .../{ => docs}/flexbox-align-items.blade.md | 2 +- .../{ => docs}/flexbox-align-self.blade.md | 2 +- .../{ => docs}/flexbox-direction.blade.md | 2 +- .../{ => docs}/flexbox-display.blade.md | 2 +- .../flexbox-flex-grow-shrink.blade.md | 2 +- .../flexbox-justify-content.blade.md | 2 +- .../{ => docs}/flexbox-wrapping.blade.md | 2 +- docs/source/{ => docs}/flexbox.blade.md | 0 docs/source/{ => docs}/floats.blade.md | 0 docs/source/{ => docs}/font-weight.blade.md | 0 docs/source/{ => docs}/fonts.blade.md | 0 docs/source/{ => docs}/forms.blade.md | 0 .../functions-and-directives.blade.md | 0 docs/source/{ => docs}/grid.blade.md | 0 docs/source/{ => docs}/height.blade.md | 0 docs/source/{ => docs}/installation.blade.md | 0 .../source/{ => docs}/letter-spacing.blade.md | 0 docs/source/{ => docs}/line-height.blade.md | 0 docs/source/{ => docs}/lists.blade.md | 0 docs/source/{ => docs}/margin.blade.md | 2 +- docs/source/{ => docs}/max-height.blade.md | 0 docs/source/{ => docs}/max-width.blade.md | 0 docs/source/{ => docs}/min-height.blade.md | 0 docs/source/{ => docs}/min-width.blade.md | 0 .../{ => docs}/negative-margin.blade.md | 2 +- docs/source/{ => docs}/opacity.blade.md | 0 docs/source/{ => docs}/overflow.blade.md | 0 docs/source/{ => docs}/padding.blade.md | 2 +- .../source/{ => docs}/pointer-events.blade.md | 0 docs/source/{ => docs}/positioning.blade.md | 2 +- docs/source/{ => docs}/resize.blade.md | 0 .../{ => docs}/responsive-design.blade.md | 0 docs/source/{ => docs}/safari-pinned-tab.svg | 0 docs/source/{ => docs}/shadows.blade.md | 0 docs/source/{ => docs}/svg.blade.md | 0 docs/source/{ => docs}/text-color.blade.md | 0 docs/source/{ => docs}/text-sizing.blade.md | 0 docs/source/{ => docs}/text-style.blade.md | 0 docs/source/{ => docs}/user-select.blade.md | 0 .../{ => docs}/vertical-alignment.blade.md | 0 docs/source/{ => docs}/visibility.blade.md | 0 .../{ => docs}/what-is-tailwind.blade.md | 0 .../whitespace-and-wrapping.blade.md | 0 docs/source/{ => docs}/width.blade.md | 0 .../{ => docs}/working-utility-first.blade.md | 0 docs/source/{ => docs}/z-index.blade.md | 0 66 files changed, 87 insertions(+), 87 deletions(-) rename docs/source/{ => docs}/adding-new-utilities.blade.md (100%) rename docs/source/{ => docs}/background-color.blade.md (100%) rename docs/source/{ => docs}/background-position.blade.md (100%) rename docs/source/{ => docs}/background-size.blade.md (100%) rename docs/source/{ => docs}/base.blade.md (100%) rename docs/source/{ => docs}/border-color.blade.md (100%) rename docs/source/{ => docs}/border-radius.blade.md (100%) rename docs/source/{ => docs}/border-style.blade.md (100%) rename docs/source/{ => docs}/border-width.blade.md (100%) rename docs/source/{ => docs}/colors.blade.md (100%) rename docs/source/{ => docs}/configuration.blade.md (100%) rename docs/source/{ => docs}/container.blade.md (100%) rename docs/source/{ => docs}/cursor.blade.md (100%) rename docs/source/{ => docs}/display.blade.md (99%) rename docs/source/{ => docs}/examples/alerts.blade.md (100%) rename docs/source/{ => docs/examples}/buttons.blade.md (100%) rename docs/source/{ => docs}/examples/cards.blade.md (100%) rename docs/source/{ => docs}/extracting-components.blade.md (100%) rename docs/source/{ => docs}/flexbox-align-content.blade.md (99%) rename docs/source/{ => docs}/flexbox-align-items.blade.md (99%) rename docs/source/{ => docs}/flexbox-align-self.blade.md (99%) rename docs/source/{ => docs}/flexbox-direction.blade.md (98%) rename docs/source/{ => docs}/flexbox-display.blade.md (98%) rename docs/source/{ => docs}/flexbox-flex-grow-shrink.blade.md (99%) rename docs/source/{ => docs}/flexbox-justify-content.blade.md (98%) rename docs/source/{ => docs}/flexbox-wrapping.blade.md (98%) rename docs/source/{ => docs}/flexbox.blade.md (100%) rename docs/source/{ => docs}/floats.blade.md (100%) rename docs/source/{ => docs}/font-weight.blade.md (100%) rename docs/source/{ => docs}/fonts.blade.md (100%) rename docs/source/{ => docs}/forms.blade.md (100%) rename docs/source/{ => docs}/functions-and-directives.blade.md (100%) rename docs/source/{ => docs}/grid.blade.md (100%) rename docs/source/{ => docs}/height.blade.md (100%) rename docs/source/{ => docs}/installation.blade.md (100%) rename docs/source/{ => docs}/letter-spacing.blade.md (100%) rename docs/source/{ => docs}/line-height.blade.md (100%) rename docs/source/{ => docs}/lists.blade.md (100%) rename docs/source/{ => docs}/margin.blade.md (97%) rename docs/source/{ => docs}/max-height.blade.md (100%) rename docs/source/{ => docs}/max-width.blade.md (100%) rename docs/source/{ => docs}/min-height.blade.md (100%) rename docs/source/{ => docs}/min-width.blade.md (100%) rename docs/source/{ => docs}/negative-margin.blade.md (97%) rename docs/source/{ => docs}/opacity.blade.md (100%) rename docs/source/{ => docs}/overflow.blade.md (100%) rename docs/source/{ => docs}/padding.blade.md (97%) rename docs/source/{ => docs}/pointer-events.blade.md (100%) rename docs/source/{ => docs}/positioning.blade.md (99%) rename docs/source/{ => docs}/resize.blade.md (100%) rename docs/source/{ => docs}/responsive-design.blade.md (100%) rename docs/source/{ => docs}/safari-pinned-tab.svg (100%) rename docs/source/{ => docs}/shadows.blade.md (100%) rename docs/source/{ => docs}/svg.blade.md (100%) rename docs/source/{ => docs}/text-color.blade.md (100%) rename docs/source/{ => docs}/text-sizing.blade.md (100%) rename docs/source/{ => docs}/text-style.blade.md (100%) rename docs/source/{ => docs}/user-select.blade.md (100%) rename docs/source/{ => docs}/vertical-alignment.blade.md (100%) rename docs/source/{ => docs}/visibility.blade.md (100%) rename docs/source/{ => docs}/what-is-tailwind.blade.md (100%) rename docs/source/{ => docs}/whitespace-and-wrapping.blade.md (100%) rename docs/source/{ => docs}/width.blade.md (100%) rename docs/source/{ => docs}/working-utility-first.blade.md (100%) rename docs/source/{ => docs}/z-index.blade.md (100%) diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index e7f86d6c8..732ae5d2a 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -45,40 +45,40 @@

      Introduction

      Getting Started

        -
      • Installation
        • +
      • Installation
      • - + Configuration
      • - + Colors
      • - + Responsive Design
      • - + Adding New Utilities
      • - + Extracting Components
      • - + Functions & Directives
        • @@ -87,98 +87,98 @@

        Styles

        Examples

        diff --git a/docs/source/adding-new-utilities.blade.md b/docs/source/docs/adding-new-utilities.blade.md similarity index 100% rename from docs/source/adding-new-utilities.blade.md rename to docs/source/docs/adding-new-utilities.blade.md diff --git a/docs/source/background-color.blade.md b/docs/source/docs/background-color.blade.md similarity index 100% rename from docs/source/background-color.blade.md rename to docs/source/docs/background-color.blade.md diff --git a/docs/source/background-position.blade.md b/docs/source/docs/background-position.blade.md similarity index 100% rename from docs/source/background-position.blade.md rename to docs/source/docs/background-position.blade.md diff --git a/docs/source/background-size.blade.md b/docs/source/docs/background-size.blade.md similarity index 100% rename from docs/source/background-size.blade.md rename to docs/source/docs/background-size.blade.md diff --git a/docs/source/base.blade.md b/docs/source/docs/base.blade.md similarity index 100% rename from docs/source/base.blade.md rename to docs/source/docs/base.blade.md diff --git a/docs/source/border-color.blade.md b/docs/source/docs/border-color.blade.md similarity index 100% rename from docs/source/border-color.blade.md rename to docs/source/docs/border-color.blade.md diff --git a/docs/source/border-radius.blade.md b/docs/source/docs/border-radius.blade.md similarity index 100% rename from docs/source/border-radius.blade.md rename to docs/source/docs/border-radius.blade.md diff --git a/docs/source/border-style.blade.md b/docs/source/docs/border-style.blade.md similarity index 100% rename from docs/source/border-style.blade.md rename to docs/source/docs/border-style.blade.md diff --git a/docs/source/border-width.blade.md b/docs/source/docs/border-width.blade.md similarity index 100% rename from docs/source/border-width.blade.md rename to docs/source/docs/border-width.blade.md diff --git a/docs/source/colors.blade.md b/docs/source/docs/colors.blade.md similarity index 100% rename from docs/source/colors.blade.md rename to docs/source/docs/colors.blade.md diff --git a/docs/source/configuration.blade.md b/docs/source/docs/configuration.blade.md similarity index 100% rename from docs/source/configuration.blade.md rename to docs/source/docs/configuration.blade.md diff --git a/docs/source/container.blade.md b/docs/source/docs/container.blade.md similarity index 100% rename from docs/source/container.blade.md rename to docs/source/docs/container.blade.md diff --git a/docs/source/cursor.blade.md b/docs/source/docs/cursor.blade.md similarity index 100% rename from docs/source/cursor.blade.md rename to docs/source/docs/cursor.blade.md diff --git a/docs/source/display.blade.md b/docs/source/docs/display.blade.md similarity index 99% rename from docs/source/display.blade.md rename to docs/source/docs/display.blade.md index f55be3f1d..c1d1afc41 100644 --- a/docs/source/display.blade.md +++ b/docs/source/docs/display.blade.md @@ -65,4 +65,4 @@ title: "Display"
        -If you're looking for Flexbox utilities, please see the [Flexbox](/styles/flexbox) page. +If you're looking for Flexbox utilities, please see the [Flexbox](/docs/flexbox-display) page. diff --git a/docs/source/examples/alerts.blade.md b/docs/source/docs/examples/alerts.blade.md similarity index 100% rename from docs/source/examples/alerts.blade.md rename to docs/source/docs/examples/alerts.blade.md diff --git a/docs/source/buttons.blade.md b/docs/source/docs/examples/buttons.blade.md similarity index 100% rename from docs/source/buttons.blade.md rename to docs/source/docs/examples/buttons.blade.md diff --git a/docs/source/examples/cards.blade.md b/docs/source/docs/examples/cards.blade.md similarity index 100% rename from docs/source/examples/cards.blade.md rename to docs/source/docs/examples/cards.blade.md diff --git a/docs/source/extracting-components.blade.md b/docs/source/docs/extracting-components.blade.md similarity index 100% rename from docs/source/extracting-components.blade.md rename to docs/source/docs/extracting-components.blade.md diff --git a/docs/source/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md similarity index 99% rename from docs/source/flexbox-align-content.blade.md rename to docs/source/docs/flexbox-align-content.blade.md index cf3b89810..6fc7b13f9 100644 --- a/docs/source/flexbox-align-content.blade.md +++ b/docs/source/docs/flexbox-align-content.blade.md @@ -186,7 +186,7 @@ Use `.content-around` to distribute lines in a flex container such that there is To control the alignment of flex content at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above. -For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. +For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @component('_partials.responsive-code-sample') @slot('none') diff --git a/docs/source/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md similarity index 99% rename from docs/source/flexbox-align-items.blade.md rename to docs/source/docs/flexbox-align-items.blade.md index 4a76bc3ab..85cd9989d 100644 --- a/docs/source/flexbox-align-items.blade.md +++ b/docs/source/docs/flexbox-align-items.blade.md @@ -126,7 +126,7 @@ Use `.items-baseline` to align items along the flex container's cross axis such To control the alignment of flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:items-center` to apply the `items-center` utility at only medium screen sizes and above. -For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. +For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @component('_partials.responsive-code-sample') @slot('none') diff --git a/docs/source/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md similarity index 99% rename from docs/source/flexbox-align-self.blade.md rename to docs/source/docs/flexbox-align-self.blade.md index cb8ac95df..459ff4a81 100644 --- a/docs/source/flexbox-align-self.blade.md +++ b/docs/source/docs/flexbox-align-self.blade.md @@ -125,7 +125,7 @@ Use `.self-stretch` to stretch an item to fill the flex container's cross axis, To control the alignment of a flex item at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:self-end` to apply the `self-end` utility at only medium screen sizes and above. -For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. +For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @component('_partials.responsive-code-sample') @slot('none') diff --git a/docs/source/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md similarity index 98% rename from docs/source/flexbox-direction.blade.md rename to docs/source/docs/flexbox-direction.blade.md index 9cea1cf08..75c028a9d 100644 --- a/docs/source/flexbox-direction.blade.md +++ b/docs/source/docs/flexbox-direction.blade.md @@ -108,7 +108,7 @@ Use `.flex-col-reverse` to position flex items vertically in the opposite direct To apply a flex direction utility only at a specific breakpoint, add a `{breakpoint}:` prefix to the existing class name. For example, adding the class `md:flex-row` to an element would apply the `flex-row` utility at medium screen sizes and above. -For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. +For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @component('_partials.responsive-code-sample') @slot('none') diff --git a/docs/source/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md similarity index 98% rename from docs/source/flexbox-display.blade.md rename to docs/source/docs/flexbox-display.blade.md index 03f0d98fe..4dd0b3673 100644 --- a/docs/source/flexbox-display.blade.md +++ b/docs/source/docs/flexbox-display.blade.md @@ -74,7 +74,7 @@ Use `.inline-flex` to create an inline flex container: To control the display property of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing display utility class. For example, use `md:inline-flex` to apply the `inline-flex` utility at only medium screen sizes and above. -For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. +For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @component('_partials.responsive-code-sample') @slot('none') diff --git a/docs/source/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md similarity index 99% rename from docs/source/flexbox-flex-grow-shrink.blade.md rename to docs/source/docs/flexbox-flex-grow-shrink.blade.md index ca63c2018..d566325b3 100644 --- a/docs/source/flexbox-flex-grow-shrink.blade.md +++ b/docs/source/docs/flexbox-flex-grow-shrink.blade.md @@ -251,7 +251,7 @@ Use `.flex-no-shrink` to prevent a flex item from shrinking: To control how a flex item grows or shrinks at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:flex-no-shrink` to apply the `flex-no-shrink` utility at only medium screen sizes and above. -For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. +For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @component('_partials.responsive-code-sample') @slot('none') diff --git a/docs/source/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md similarity index 98% rename from docs/source/flexbox-justify-content.blade.md rename to docs/source/docs/flexbox-justify-content.blade.md index 674045751..e261a5b9f 100644 --- a/docs/source/flexbox-justify-content.blade.md +++ b/docs/source/docs/flexbox-justify-content.blade.md @@ -126,7 +126,7 @@ Use `.justify-around` to justify items along the flex container's main axis such To justify flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:justify-between` to apply the `justify-between` utility at only medium screen sizes and above. -For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. +For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @component('_partials.responsive-code-sample') @slot('none') diff --git a/docs/source/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md similarity index 98% rename from docs/source/flexbox-wrapping.blade.md rename to docs/source/docs/flexbox-wrapping.blade.md index 95bf670ee..310771705 100644 --- a/docs/source/flexbox-wrapping.blade.md +++ b/docs/source/docs/flexbox-wrapping.blade.md @@ -109,7 +109,7 @@ Use `.flex-wrap-reverse` to wrap flex items in the reverse direction: To control how flex items wrap at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:flex-wrap-reverse` to apply the `flex-wrap-reverse` utility at only medium screen sizes and above. -For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. +For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @component('_partials.responsive-code-sample') @slot('none') diff --git a/docs/source/flexbox.blade.md b/docs/source/docs/flexbox.blade.md similarity index 100% rename from docs/source/flexbox.blade.md rename to docs/source/docs/flexbox.blade.md diff --git a/docs/source/floats.blade.md b/docs/source/docs/floats.blade.md similarity index 100% rename from docs/source/floats.blade.md rename to docs/source/docs/floats.blade.md diff --git a/docs/source/font-weight.blade.md b/docs/source/docs/font-weight.blade.md similarity index 100% rename from docs/source/font-weight.blade.md rename to docs/source/docs/font-weight.blade.md diff --git a/docs/source/fonts.blade.md b/docs/source/docs/fonts.blade.md similarity index 100% rename from docs/source/fonts.blade.md rename to docs/source/docs/fonts.blade.md diff --git a/docs/source/forms.blade.md b/docs/source/docs/forms.blade.md similarity index 100% rename from docs/source/forms.blade.md rename to docs/source/docs/forms.blade.md diff --git a/docs/source/functions-and-directives.blade.md b/docs/source/docs/functions-and-directives.blade.md similarity index 100% rename from docs/source/functions-and-directives.blade.md rename to docs/source/docs/functions-and-directives.blade.md diff --git a/docs/source/grid.blade.md b/docs/source/docs/grid.blade.md similarity index 100% rename from docs/source/grid.blade.md rename to docs/source/docs/grid.blade.md diff --git a/docs/source/height.blade.md b/docs/source/docs/height.blade.md similarity index 100% rename from docs/source/height.blade.md rename to docs/source/docs/height.blade.md diff --git a/docs/source/installation.blade.md b/docs/source/docs/installation.blade.md similarity index 100% rename from docs/source/installation.blade.md rename to docs/source/docs/installation.blade.md diff --git a/docs/source/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md similarity index 100% rename from docs/source/letter-spacing.blade.md rename to docs/source/docs/letter-spacing.blade.md diff --git a/docs/source/line-height.blade.md b/docs/source/docs/line-height.blade.md similarity index 100% rename from docs/source/line-height.blade.md rename to docs/source/docs/line-height.blade.md diff --git a/docs/source/lists.blade.md b/docs/source/docs/lists.blade.md similarity index 100% rename from docs/source/lists.blade.md rename to docs/source/docs/lists.blade.md diff --git a/docs/source/margin.blade.md b/docs/source/docs/margin.blade.md similarity index 97% rename from docs/source/margin.blade.md rename to docs/source/docs/margin.blade.md index f6de45ff4..6d9f2f149 100644 --- a/docs/source/margin.blade.md +++ b/docs/source/docs/margin.blade.md @@ -88,7 +88,7 @@ By default the `@sizing-scale` is automatically applied to the margin, negative

        Responsive spacing utilities

        -The spacing utilities can also be used with responsive prefixes: +The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes: ```html
        diff --git a/docs/source/max-height.blade.md b/docs/source/docs/max-height.blade.md similarity index 100% rename from docs/source/max-height.blade.md rename to docs/source/docs/max-height.blade.md diff --git a/docs/source/max-width.blade.md b/docs/source/docs/max-width.blade.md similarity index 100% rename from docs/source/max-width.blade.md rename to docs/source/docs/max-width.blade.md diff --git a/docs/source/min-height.blade.md b/docs/source/docs/min-height.blade.md similarity index 100% rename from docs/source/min-height.blade.md rename to docs/source/docs/min-height.blade.md diff --git a/docs/source/min-width.blade.md b/docs/source/docs/min-width.blade.md similarity index 100% rename from docs/source/min-width.blade.md rename to docs/source/docs/min-width.blade.md diff --git a/docs/source/negative-margin.blade.md b/docs/source/docs/negative-margin.blade.md similarity index 97% rename from docs/source/negative-margin.blade.md rename to docs/source/docs/negative-margin.blade.md index 140df9f0f..9b35ec40a 100644 --- a/docs/source/negative-margin.blade.md +++ b/docs/source/docs/negative-margin.blade.md @@ -88,7 +88,7 @@ By default the `@sizing-scale` is automatically applied to the margin, negative

        Responsive spacing utilities

        -The spacing utilities can also be used with responsive prefixes: +The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes: ```html
        diff --git a/docs/source/opacity.blade.md b/docs/source/docs/opacity.blade.md similarity index 100% rename from docs/source/opacity.blade.md rename to docs/source/docs/opacity.blade.md diff --git a/docs/source/overflow.blade.md b/docs/source/docs/overflow.blade.md similarity index 100% rename from docs/source/overflow.blade.md rename to docs/source/docs/overflow.blade.md diff --git a/docs/source/padding.blade.md b/docs/source/docs/padding.blade.md similarity index 97% rename from docs/source/padding.blade.md rename to docs/source/docs/padding.blade.md index 549551a30..2c47548f6 100644 --- a/docs/source/padding.blade.md +++ b/docs/source/docs/padding.blade.md @@ -88,7 +88,7 @@ By default the `@sizing-scale` is automatically applied to the margin, negative

        Responsive spacing utilities

        -The spacing utilities can also be used with responsive prefixes: +The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes: ```html
        diff --git a/docs/source/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md similarity index 100% rename from docs/source/pointer-events.blade.md rename to docs/source/docs/pointer-events.blade.md diff --git a/docs/source/positioning.blade.md b/docs/source/docs/positioning.blade.md similarity index 99% rename from docs/source/positioning.blade.md rename to docs/source/docs/positioning.blade.md index 834f9c7ca..de1d6970c 100644 --- a/docs/source/positioning.blade.md +++ b/docs/source/docs/positioning.blade.md @@ -270,7 +270,7 @@ Offsets are calculated relative to the viewport and the element *will* act as a Use the `.pin{-edge?}` utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent. -Combined with Tailwind's [padding utilities](#), you'll probably find that these are all you need to precisely control absolutely positioned elements. +Combined with Tailwind's [padding utilities](/docs/padding), you'll probably find that these are all you need to precisely control absolutely positioned elements.
        diff --git a/docs/source/resize.blade.md b/docs/source/docs/resize.blade.md similarity index 100% rename from docs/source/resize.blade.md rename to docs/source/docs/resize.blade.md diff --git a/docs/source/responsive-design.blade.md b/docs/source/docs/responsive-design.blade.md similarity index 100% rename from docs/source/responsive-design.blade.md rename to docs/source/docs/responsive-design.blade.md diff --git a/docs/source/safari-pinned-tab.svg b/docs/source/docs/safari-pinned-tab.svg similarity index 100% rename from docs/source/safari-pinned-tab.svg rename to docs/source/docs/safari-pinned-tab.svg diff --git a/docs/source/shadows.blade.md b/docs/source/docs/shadows.blade.md similarity index 100% rename from docs/source/shadows.blade.md rename to docs/source/docs/shadows.blade.md diff --git a/docs/source/svg.blade.md b/docs/source/docs/svg.blade.md similarity index 100% rename from docs/source/svg.blade.md rename to docs/source/docs/svg.blade.md diff --git a/docs/source/text-color.blade.md b/docs/source/docs/text-color.blade.md similarity index 100% rename from docs/source/text-color.blade.md rename to docs/source/docs/text-color.blade.md diff --git a/docs/source/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md similarity index 100% rename from docs/source/text-sizing.blade.md rename to docs/source/docs/text-sizing.blade.md diff --git a/docs/source/text-style.blade.md b/docs/source/docs/text-style.blade.md similarity index 100% rename from docs/source/text-style.blade.md rename to docs/source/docs/text-style.blade.md diff --git a/docs/source/user-select.blade.md b/docs/source/docs/user-select.blade.md similarity index 100% rename from docs/source/user-select.blade.md rename to docs/source/docs/user-select.blade.md diff --git a/docs/source/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md similarity index 100% rename from docs/source/vertical-alignment.blade.md rename to docs/source/docs/vertical-alignment.blade.md diff --git a/docs/source/visibility.blade.md b/docs/source/docs/visibility.blade.md similarity index 100% rename from docs/source/visibility.blade.md rename to docs/source/docs/visibility.blade.md diff --git a/docs/source/what-is-tailwind.blade.md b/docs/source/docs/what-is-tailwind.blade.md similarity index 100% rename from docs/source/what-is-tailwind.blade.md rename to docs/source/docs/what-is-tailwind.blade.md diff --git a/docs/source/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md similarity index 100% rename from docs/source/whitespace-and-wrapping.blade.md rename to docs/source/docs/whitespace-and-wrapping.blade.md diff --git a/docs/source/width.blade.md b/docs/source/docs/width.blade.md similarity index 100% rename from docs/source/width.blade.md rename to docs/source/docs/width.blade.md diff --git a/docs/source/working-utility-first.blade.md b/docs/source/docs/working-utility-first.blade.md similarity index 100% rename from docs/source/working-utility-first.blade.md rename to docs/source/docs/working-utility-first.blade.md diff --git a/docs/source/z-index.blade.md b/docs/source/docs/z-index.blade.md similarity index 100% rename from docs/source/z-index.blade.md rename to docs/source/docs/z-index.blade.md From 991c4d664f34ec47b5b15fac6f32b24dfa602f4d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 13:23:48 -0400 Subject: [PATCH 08/34] Document @apply helper --- docs/source/functions-and-directives.blade.md | 40 ++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/docs/source/functions-and-directives.blade.md b/docs/source/functions-and-directives.blade.md index 299effe3f..5e22d4cb4 100644 --- a/docs/source/functions-and-directives.blade.md +++ b/docs/source/functions-and-directives.blade.md @@ -28,6 +28,44 @@ Use the `@@tailwind` directive to insert Tailwind's `reset` and `utilities` styl @@tailwind utilities; ``` +## `@@apply` + +Use `@@apply` to mixin the contents of existing classes into your custom CSS. + +This is extremely useful when you find a common utility pattern in your HTML that you'd like to extract to a new component. + +```less +.btn { + @@apply .font-bold .py-2 .px-4 .rounded; +} +.btn-blue { + @@apply .bg-blue .text-white; +} +.btn-blue:hover { + @@apply .bg-blue-dark; +} +``` + +Note that `@@apply` **will not work** for mixing in hover or responsive variants of another utility. Instead, mixin the plain version of that utility into the `:hover` pseudo-selector or a new media query: + +```less +// Won't work: +.btn { + @@apply .md:inline-block; + @@apply .hover:bg-blue; +} + +// Do this instead: +.btn { + &:hover { + @@apply .bg-blue; + } + @@screen md { + @@apply .inline-block; + } +} +``` + ## `@@responsive` You can generate responsive versions of your own classes by wrapping their definitions in the `@responsive` directive: @@ -78,7 +116,7 @@ This will generate these classes (assuming you haven't changed the default break } ``` -The responsive versions will be added to Tailwind's existing media queries at the end of your stylesheet to make sure classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property. +The responsive versions will be added to Tailwind's existing media queries **at the end of your stylesheet.** This makes sure that classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property. ## `@@screen` From a1b365f29ab9f3e8b71b53b4925dddba71e5c3dd Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 13:26:32 -0400 Subject: [PATCH 09/34] Move border radius page out of borders category --- docs/config.php | 6 +++++- docs/source/_layouts/master.blade.php | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/config.php b/docs/config.php index 4158635e2..e029f736b 100644 --- a/docs/config.php +++ b/docs/config.php @@ -7,6 +7,10 @@ return [ 'config' => json_decode(file_get_contents(__DIR__ . '/tailwind.json'), true), 'colors' => ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink'], 'active' => function ($page, $path) { - return str_contains($page->getPath(), $path); + $pages = collect(array_wrap($page)); + + return $pages->contains(function ($page) use ($path) { + return str_contains($page->getPath(), $path); + }); } ]; diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 007704d23..76183449c 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -96,14 +96,14 @@
    • - Borders + Borders
      • +
    • Border Radius
    • Container
    • Display
    • From 5daa09a78170322fcccae40a7557e005b99e662c Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Mon, 30 Oct 2017 13:31:04 -0400 Subject: [PATCH 10/34] Change Gulp subtitle to an h3 --- docs/source/docs/installation.blade.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/source/docs/installation.blade.md b/docs/source/docs/installation.blade.md index 07e53c2bb..31ff2c1a3 100644 --- a/docs/source/docs/installation.blade.md +++ b/docs/source/docs/installation.blade.md @@ -99,7 +99,7 @@ module.exports = { } ``` -### Gulp +#### Gulp Add `tailwindcss` to the list of plugins you pass to [gulp-postcss](https://github.com/postcss/gulp-postcss), passing the path to your config file: From dd78a415d9120d4544a63315e6df8f1a9d278cf4 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 13:34:16 -0400 Subject: [PATCH 11/34] Keep borders category closed on border radius page --- docs/source/_layouts/master.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 76183449c..43ce446ec 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -97,7 +97,7 @@
    • Borders -
        +
        • Width
        • Color
        • Style
          • From 75c24bc78296a1cf427efabec12a41a233c3cbb7 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Mon, 30 Oct 2017 13:38:05 -0400 Subject: [PATCH 12/34] Update urls in default config to match real doc urls --- defaultConfig.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/defaultConfig.js b/defaultConfig.js index a7e98b7e3..453393e01 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -29,7 +29,7 @@ View the full documentation at https://tailwindcss.com. /* |------------------------------------------------------------------------------- -| Colors https://tailwindcss.com/docs/color +| Colors https://tailwindcss.com/docs/colors |------------------------------------------------------------------------------- | | Here you can specify the colors used in your project. To get you started, @@ -145,7 +145,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Colors https://tailwindcss.com/docs/color-palette + | Colors https://tailwindcss.com/docs/colors |----------------------------------------------------------------------------- | | The color palette defined above is also assigned to the "colors" key of @@ -161,7 +161,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Screens https://tailwindcss.com/docs/responsive + | Screens https://tailwindcss.com//docs/responsive-design |----------------------------------------------------------------------------- | | Screens in Tailwind are essentially CSS media queries. They define the @@ -240,7 +240,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Text sizes https://tailwindcss.com/docs/text-sizes + | Text sizes https://tailwindcss.com/docs/text-sizing |----------------------------------------------------------------------------- | | Here is where you define your text sizes. Name these in whatever way @@ -272,7 +272,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Font weights https://tailwindcss.com/docs/font-weights + | Font weights https://tailwindcss.com/docs/font-weight |----------------------------------------------------------------------------- | | Here is where you define your font weights. We've provided a list of @@ -299,7 +299,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Leading (line height) https://tailwindcss.com/docs/text-leading + | Leading (line height) https://tailwindcss.com/docs/line-height |----------------------------------------------------------------------------- | | Here is where you define your line height values, or as we call @@ -319,7 +319,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Tracking (letter spacing) https://tailwindcss.com/docs/text-tracking + | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing |----------------------------------------------------------------------------- | | Here is where you define your letter spacing values, or as we call @@ -338,7 +338,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Text colors https://tailwindcss.com/docs/text-colors + | Text colors https://tailwindcss.com/docs/text-color |----------------------------------------------------------------------------- | | Here is where you define your text colors. By default these use the @@ -354,7 +354,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Background colors https://tailwindcss.com/docs/background-colors + | Background colors https://tailwindcss.com/docs/background-color |----------------------------------------------------------------------------- | | Here is where you define your background colors. By default these use @@ -370,7 +370,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Border widths https://tailwindcss.com/docs/border-widths + | Border widths https://tailwindcss.com/docs/border-width |----------------------------------------------------------------------------- | | Here is where you define your border widths. Take note that border @@ -392,7 +392,7 @@ module.exports = { /* |----------------------------------------------------------------------------- - | Border colors https://tailwindcss.com/docs/border-colors + | Border colors https://tailwindcss.com/docs/border-color |----------------------------------------------------------------------------- | | Here is where you define your border colors. By default these use the From 96e9e67592334589a258c7ba19658b4b286bb07c Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Mon, 30 Oct 2017 13:50:37 -0400 Subject: [PATCH 13/34] Rename tailwind() method to config() Add basic tests for config(), @response and @apply. --- __tests__/fixtures/tailwind.css | 25 +++++++++++++++++++++++++ css/tailwind.css | 7 +++++++ src/lib/evaluateTailwindFunctions.js | 2 +- 3 files changed, 33 insertions(+), 1 deletion(-) diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css index 3f6b21548..f057acefb 100644 --- a/__tests__/fixtures/tailwind.css +++ b/__tests__/fixtures/tailwind.css @@ -3714,6 +3714,11 @@ button, padding: 0; } +.example { + font-weight: 700; + color: #e3342f; +} + @media (min-width: 576px) { .sm\:input-reset { appearance: none; @@ -6842,6 +6847,11 @@ button, margin: 0; padding: 0; } + + .sm\:example { + font-weight: 700; + color: #e3342f; + } } @media (min-width: 768px) { @@ -9972,6 +9982,11 @@ button, margin: 0; padding: 0; } + + .md\:example { + font-weight: 700; + color: #e3342f; + } } @media (min-width: 992px) { @@ -13102,6 +13117,11 @@ button, margin: 0; padding: 0; } + + .lg\:example { + font-weight: 700; + color: #e3342f; + } } @media (min-width: 1200px) { @@ -16232,4 +16252,9 @@ button, margin: 0; padding: 0; } + + .xl\:example { + font-weight: 700; + color: #e3342f; + } } diff --git a/css/tailwind.css b/css/tailwind.css index c78103bc0..6d8093496 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -1,3 +1,10 @@ @tailwind reset; @tailwind utilities; + +@responsive { + .example { + @apply .font-bold; + color: config('colors.red'); + } +} diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js index 711e4c6e8..c89e246ee 100644 --- a/src/lib/evaluateTailwindFunctions.js +++ b/src/lib/evaluateTailwindFunctions.js @@ -4,7 +4,7 @@ import functions from 'postcss-functions' export default function(options) { return functions({ functions: { - tailwind: function (path) { + config: function (path) { return _.get(options, _.trim(path, `'"`)) } } From fefb9c9f20c4c8b7039067ab3e9cd50bb65fff25 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 14:05:19 -0400 Subject: [PATCH 14/34] Reword heading in installation docs --- docs/source/docs/installation.blade.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/source/docs/installation.blade.md b/docs/source/docs/installation.blade.md index 31ff2c1a3..8e71a5704 100644 --- a/docs/source/docs/installation.blade.md +++ b/docs/source/docs/installation.blade.md @@ -30,7 +30,7 @@ Tailwind is configured almost entirely in plain JavaScript. To do this you'll ne Alternatively, you can simply copy the default config file [from here](https://github.com/nothingworksinc/tailwindcss/blob/master/defaultConfig.js). -## 3. Add Tailwind to your CSS +## 3. Use Tailwind in your CSS Use the `@@tailwind` directive to inject Tailwind's `reset` and `utilities` styles into your CSS. From 19945af883c85e9a83185c4f0834ec112bdaf184 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 14:05:27 -0400 Subject: [PATCH 15/34] Expand box shadow docs --- docs/source/docs/shadows.blade.md | 34 +++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md index ec6269226..75dce030d 100644 --- a/docs/source/docs/shadows.blade.md +++ b/docs/source/docs/shadows.blade.md @@ -60,21 +60,47 @@ title: "Shadows"
      • -Box shadows can be applied using the `.shadow-{size}` utilities. By default these are a size scale, where the smaller sizes represent more shallow shadows, and larger sizes represent deeper shadows. If you use the `.shadow` utility without a suffix, you'll get the default shadow. +## Outer shadow + +Use the `.shadow`, `.shadow-md`, or `.shadow-lg` utilities to apply different sized outer box shadows to an element. @component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8']) -
      .shadow-inner
      .shadow
      .shadow-md
      -
      .shadow-lg
      +
      .shadow-lg
      @slot('code') -
      @endslot @endcomponent +## Inner shadow + +Use the `.shadow-inner` utility to apply a subtle inset box shadow to an element. + +This can be useful for things like form controls or wells. + +@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8']) +
      .shadow-inner
      +@slot('code') +
      +@endslot +@endcomponent + +## No shadow + +Use `.shadow-none` to remove an existing box shadow from an element. + +This is most commonly used to remove a shadow that was applied at a smaller breakpoint. + +@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8']) +
      .shadow-none
      +@slot('code') +
      +@endslot +@endcomponent + ## Responsive To control the shadow of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing shadow utility. For example, use `md:shadow-lg` to apply the `shadow-lg` utility at only medium screen sizes and above. From 05a172f80db51900146f68236df2f14a32b11a9c Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Mon, 30 Oct 2017 14:06:27 -0400 Subject: [PATCH 16/34] Inline normalize.css --- css/preflight.css | 449 ++++++++++++++++++++++++++++++- package.json | 2 - src/lib/substituteResetAtRule.js | 21 +- yarn.lock | 21 +- 4 files changed, 454 insertions(+), 39 deletions(-) diff --git a/css/preflight.css b/css/preflight.css index 8a98969ac..ee20e96c7 100644 --- a/css/preflight.css +++ b/css/preflight.css @@ -1,4 +1,450 @@ -@import "normalize.css"; +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} /** * Manually forked from SUIT CSS Base: https://github.com/suitcss/base @@ -81,6 +527,7 @@ iframe { /** * Tailwind custom reset styles */ + textarea { resize: vertical; } img { max-width: 100%; } diff --git a/package.json b/package.json index f91666cb1..861d8a6dd 100644 --- a/package.json +++ b/package.json @@ -38,10 +38,8 @@ "fs-extra": "^4.0.2", "lodash": "^4.17.4", "nodemon": "^1.11.0", - "normalize.css": "^7.0.0", "postcss": "^6.0.9", "postcss-functions": "^3.0.0", - "postcss-import": "^11.0.0", "stylefmt": "^6.0.0" }, "browserslist": [ diff --git a/src/lib/substituteResetAtRule.js b/src/lib/substituteResetAtRule.js index 00c34f6a8..5bab925b5 100644 --- a/src/lib/substituteResetAtRule.js +++ b/src/lib/substituteResetAtRule.js @@ -1,24 +1,13 @@ import fs from 'fs' import postcss from 'postcss' -import postcssImport from 'postcss-import' export default function(options) { return function (css) { - return new Promise((resolve, reject) => { - const promises = [] - - css.walkAtRules('tailwind', atRule => { - if (atRule.params === 'reset') { - promises.push(postcssImport.process(postcss.parse(fs.readFileSync(`${__dirname}/../../css/preflight.css`, { - encoding: 'utf8' - }))).then(result => { - atRule.before(result.root) - atRule.remove() - })) - } - }) - - Promise.all(promises).then(resolve) + css.walkAtRules('tailwind', atRule => { + if (atRule.params === 'reset') { + atRule.before(postcss.parse(fs.readFileSync(`${__dirname}/../../css/preflight.css`, 'utf8'))) + atRule.remove() + } }) } } diff --git a/yarn.lock b/yarn.lock index 39a7b8ef1..cf3d9dab8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2857,10 +2857,6 @@ normalize-selector@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03" -normalize.css@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf" - npm-run-path@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f" @@ -3094,15 +3090,6 @@ postcss-functions@^3.0.0: postcss "^6.0.9" postcss-value-parser "^3.3.0" -postcss-import@^11.0.0: - version "11.0.0" - resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.0.0.tgz#a962e2df82d3bc5a6da6a386841747204f41ef5b" - dependencies: - postcss "^6.0.1" - postcss-value-parser "^3.2.3" - read-cache "^1.0.0" - resolve "^1.1.7" - postcss-less@^0.14.0: version "0.14.0" resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-0.14.0.tgz#c631b089c6cce422b9a10f3a958d2bedd3819324" @@ -3248,12 +3235,6 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -read-cache@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" - dependencies: - pify "^2.3.0" - read-file-stdin@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61" @@ -3443,7 +3424,7 @@ resolve@1.1.7: version "1.1.7" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b" -resolve@^1.1.7, resolve@^1.3.2, resolve@~1.4.0: +resolve@^1.3.2, resolve@~1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86" dependencies: From 036818d023fe09ff78ee2f9c05c39f6cd62a9338 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 30 Oct 2017 16:05:29 -0400 Subject: [PATCH 17/34] Add versioning to CSS and JS assets --- docs/bootstrap.php | 30 ++++++++++++++++++++++++++- docs/mix-manifest.json | 4 ---- docs/source/{ => _assets}/js/nav.js | 0 docs/source/_layouts/master.blade.php | 6 +++--- docs/source/mix-manifest.json | 5 +++++ docs/webpack.mix.js | 7 ++++++- 6 files changed, 43 insertions(+), 9 deletions(-) delete mode 100644 docs/mix-manifest.json rename docs/source/{ => _assets}/js/nav.js (100%) create mode 100644 docs/source/mix-manifest.json diff --git a/docs/bootstrap.php b/docs/bootstrap.php index 7fb8d5127..f5c60d504 100644 --- a/docs/bootstrap.php +++ b/docs/bootstrap.php @@ -1,4 +1,32 @@ {{-- --}} - + - + @@ -190,7 +190,7 @@
      @yield('body')
      - + - -
diff --git a/docs/source/js/app.js b/docs/source/js/app.js deleted file mode 100644 index 83ba2d171..000000000 --- a/docs/source/js/app.js +++ /dev/null @@ -1,12033 +0,0 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 1); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { - -var g; - -// This works in non-strict mode -g = (function() { - return this; -})(); - -try { - // This works if eval is allowed (see CSP) - g = g || Function("return this")() || (1,eval)("this"); -} catch(e) { - // This works if the window reference is available - if(typeof window === "object") - g = window; -} - -// g can still be undefined, but nothing to do about it... -// We return undefined, instead of nothing here, so it's -// easier to handle this case. if(!global) { ...} - -module.exports = g; - - -/***/ }), -/* 1 */ -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__(2); -module.exports = __webpack_require__(13); - - -/***/ }), -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -var anchorJS = __webpack_require__(3); - -window.anchors = new anchorJS(); -window.Vue = __webpack_require__(4); - -Vue.component('responsive-code-sample', __webpack_require__(8)); - -var app = new Vue({ - el: '#app' -}); - -/***/ }), -/* 3 */ -/***/ (function(module, exports, __webpack_require__) { - -var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/* eslint-env amd, node */ - -// https://github.com/umdjs/umd/blob/master/templates/returnExports.js -(function (root, factory) { - 'use strict'; - - if (true) { - // AMD. Register as an anonymous module. - !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), - __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? - (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), - __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); - } else if (typeof module === 'object' && module.exports) { - // Node. Does not work with strict CommonJS, but - // only CommonJS-like environments that support module.exports, - // like Node. - module.exports = factory(); - } else { - // Browser globals (root is window) - root.AnchorJS = factory(); - root.anchors = new root.AnchorJS(); - } -}(this, function () { - 'use strict'; - - function AnchorJS(options) { - this.options = options || {}; - this.elements = []; - - /** - * Assigns options to the internal options object, and provides defaults. - * @param {Object} opts - Options object - */ - function _applyRemainingDefaultOptions(opts) { - opts.icon = opts.hasOwnProperty('icon') ? opts.icon : '\ue9cb'; // Accepts characters (and also URLs?), like '#', '¶', '❡', or '§'. - opts.visible = opts.hasOwnProperty('visible') ? opts.visible : 'hover'; // Also accepts 'always' & 'touch' - opts.placement = opts.hasOwnProperty('placement') ? opts.placement : 'right'; // Also accepts 'left' - opts.ariaLabel = opts.hasOwnProperty('ariaLabel') ? opts.ariaLabel : 'Anchor'; // Accepts any text. - opts.class = opts.hasOwnProperty('class') ? opts.class : ''; // Accepts any class name. - // Using Math.floor here will ensure the value is Number-cast and an integer. - opts.truncate = opts.hasOwnProperty('truncate') ? Math.floor(opts.truncate) : 64; // Accepts any value that can be typecast to a number. - } - - _applyRemainingDefaultOptions(this.options); - - /** - * Checks to see if this device supports touch. Uses criteria pulled from Modernizr: - * https://github.com/Modernizr/Modernizr/blob/da22eb27631fc4957f67607fe6042e85c0a84656/feature-detects/touchevents.js#L40 - * @return {Boolean} - true if the current device supports touch. - */ - this.isTouchDevice = function() { - return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch); - }; - - /** - * Add anchor links to page elements. - * @param {String|Array|Nodelist} selector - A CSS selector for targeting the elements you wish to add anchor links - * to. Also accepts an array or nodeList containing the relavant elements. - * @return {this} - The AnchorJS object - */ - this.add = function(selector) { - var elements, - elsWithIds, - idList, - elementID, - i, - index, - count, - tidyText, - newTidyText, - readableID, - anchor, - visibleOptionToUse, - indexesToDrop = []; - - // We reapply options here because somebody may have overwritten the default options object when setting options. - // For example, this overwrites all options but visible: - // - // anchors.options = { visible: 'always'; } - _applyRemainingDefaultOptions(this.options); - - visibleOptionToUse = this.options.visible; - if (visibleOptionToUse === 'touch') { - visibleOptionToUse = this.isTouchDevice() ? 'always' : 'hover'; - } - - // Provide a sensible default selector, if none is given. - if (!selector) { - selector = 'h2, h3, h4, h5, h6'; - } - - elements = _getElements(selector); - - if (elements.length === 0) { - return this; - } - - _addBaselineStyles(); - - // We produce a list of existing IDs so we don't generate a duplicate. - elsWithIds = document.querySelectorAll('[id]'); - idList = [].map.call(elsWithIds, function assign(el) { - return el.id; - }); - - for (i = 0; i < elements.length; i++) { - if (this.hasAnchorJSLink(elements[i])) { - indexesToDrop.push(i); - continue; - } - - if (elements[i].hasAttribute('id')) { - elementID = elements[i].getAttribute('id'); - } else if (elements[i].hasAttribute('data-anchor-id')) { - elementID = elements[i].getAttribute('data-anchor-id'); - } else { - tidyText = this.urlify(elements[i].textContent); - - // Compare our generated ID to existing IDs (and increment it if needed) - // before we add it to the page. - newTidyText = tidyText; - count = 0; - do { - if (index !== undefined) { - newTidyText = tidyText + '-' + count; - } - - index = idList.indexOf(newTidyText); - count += 1; - } while (index !== -1); - index = undefined; - idList.push(newTidyText); - - elements[i].setAttribute('id', newTidyText); - elementID = newTidyText; - } - - readableID = elementID.replace(/-/g, ' '); - - // The following code builds the following DOM structure in a more effiecient (albeit opaque) way. - // ''; - anchor = document.createElement('a'); - anchor.className = 'anchorjs-link ' + this.options.class; - anchor.href = '#' + elementID; - anchor.setAttribute('aria-label', this.options.ariaLabel); - anchor.setAttribute('data-anchorjs-icon', this.options.icon); - - if (visibleOptionToUse === 'always') { - anchor.style.opacity = '1'; - } - - if (this.options.icon === '\ue9cb') { - anchor.style.font = '1em/1 anchorjs-icons'; - - // We set lineHeight = 1 here because the `anchorjs-icons` font family could otherwise affect the - // height of the heading. This isn't the case for icons with `placement: left`, so we restore - // line-height: inherit in that case, ensuring they remain positioned correctly. For more info, - // see https://github.com/bryanbraun/anchorjs/issues/39. - if (this.options.placement === 'left') { - anchor.style.lineHeight = 'inherit'; - } - } - - if (this.options.placement === 'left') { - anchor.style.position = 'absolute'; - anchor.style.marginLeft = '-1em'; - anchor.style.paddingRight = '0.5em'; - elements[i].insertBefore(anchor, elements[i].firstChild); - } else { // if the option provided is `right` (or anything else). - anchor.style.paddingLeft = '0.375em'; - elements[i].appendChild(anchor); - } - } - - for (i = 0; i < indexesToDrop.length; i++) { - elements.splice(indexesToDrop[i] - i, 1); - } - this.elements = this.elements.concat(elements); - - return this; - }; - - /** - * Removes all anchorjs-links from elements targed by the selector. - * @param {String|Array|Nodelist} selector - A CSS selector string targeting elements with anchor links, - * OR a nodeList / array containing the DOM elements. - * @return {this} - The AnchorJS object - */ - this.remove = function(selector) { - var index, - domAnchor, - elements = _getElements(selector); - - for (var i = 0; i < elements.length; i++) { - domAnchor = elements[i].querySelector('.anchorjs-link'); - if (domAnchor) { - // Drop the element from our main list, if it's in there. - index = this.elements.indexOf(elements[i]); - if (index !== -1) { - this.elements.splice(index, 1); - } - // Remove the anchor from the DOM. - elements[i].removeChild(domAnchor); - } - } - return this; - }; - - /** - * Removes all anchorjs links. Mostly used for tests. - */ - this.removeAll = function() { - this.remove(this.elements); - }; - - /** - * Urlify - Refine text so it makes a good ID. - * - * To do this, we remove apostrophes, replace nonsafe characters with hyphens, - * remove extra hyphens, truncate, trim hyphens, and make lowercase. - * - * @param {String} text - Any text. Usually pulled from the webpage element we are linking to. - * @return {String} - hyphen-delimited text for use in IDs and URLs. - */ - this.urlify = function(text) { - // Regex for finding the nonsafe URL characters (many need escaping): & +$,:;=?@"#{}|^~[`%!'<>]./()*\ - var nonsafeChars = /[& +$,:;=?@"#{}|^~[`%!'<>\]\.\/\(\)\*\\]/g, - urlText; - - // The reason we include this _applyRemainingDefaultOptions is so urlify can be called independently, - // even after setting options. This can be useful for tests or other applications. - if (!this.options.truncate) { - _applyRemainingDefaultOptions(this.options); - } - - // Note: we trim hyphens after truncating because truncating can cause dangling hyphens. - // Example string: // " ⚡⚡ Don't forget: URL fragments should be i18n-friendly, hyphenated, short, and clean." - urlText = text.trim() // "⚡⚡ Don't forget: URL fragments should be i18n-friendly, hyphenated, short, and clean." - .replace(/\'/gi, '') // "⚡⚡ Dont forget: URL fragments should be i18n-friendly, hyphenated, short, and clean." - .replace(nonsafeChars, '-') // "⚡⚡-Dont-forget--URL-fragments-should-be-i18n-friendly--hyphenated--short--and-clean-" - .replace(/-{2,}/g, '-') // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated-short-and-clean-" - .substring(0, this.options.truncate) // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated-" - .replace(/^-+|-+$/gm, '') // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated" - .toLowerCase(); // "⚡⚡-dont-forget-url-fragments-should-be-i18n-friendly-hyphenated" - - return urlText; - }; - - /** - * Determines if this element already has an AnchorJS link on it. - * Uses this technique: http://stackoverflow.com/a/5898748/1154642 - * @param {HTMLElemnt} el - a DOM node - * @return {Boolean} true/false - */ - this.hasAnchorJSLink = function(el) { - var hasLeftAnchor = el.firstChild && ((' ' + el.firstChild.className + ' ').indexOf(' anchorjs-link ') > -1), - hasRightAnchor = el.lastChild && ((' ' + el.lastChild.className + ' ').indexOf(' anchorjs-link ') > -1); - - return hasLeftAnchor || hasRightAnchor || false; - }; - - /** - * Turns a selector, nodeList, or array of elements into an array of elements (so we can use array methods). - * It also throws errors on any other inputs. Used to handle inputs to .add and .remove. - * @param {String|Array|Nodelist} input - A CSS selector string targeting elements with anchor links, - * OR a nodeList / array containing the DOM elements. - * @return {Array} - An array containing the elements we want. - */ - function _getElements(input) { - var elements; - if (typeof input === 'string' || input instanceof String) { - // See https://davidwalsh.name/nodelist-array for the technique transforming nodeList -> Array. - elements = [].slice.call(document.querySelectorAll(input)); - // I checked the 'input instanceof NodeList' test in IE9 and modern browsers and it worked for me. - } else if (Array.isArray(input) || input instanceof NodeList) { - elements = [].slice.call(input); - } else { - throw new Error('The selector provided to AnchorJS was invalid.'); - } - return elements; - } - - /** - * _addBaselineStyles - * Adds baseline styles to the page, used by all AnchorJS links irregardless of configuration. - */ - function _addBaselineStyles() { - // We don't want to add global baseline styles if they've been added before. - if (document.head.querySelector('style.anchorjs') !== null) { - return; - } - - var style = document.createElement('style'), - linkRule = - ' .anchorjs-link {' + - ' opacity: 0;' + - ' text-decoration: none;' + - ' -webkit-font-smoothing: antialiased;' + - ' -moz-osx-font-smoothing: grayscale;' + - ' }', - hoverRule = - ' *:hover > .anchorjs-link,' + - ' .anchorjs-link:focus {' + - ' opacity: 1;' + - ' }', - anchorjsLinkFontFace = - ' @font-face {' + - ' font-family: "anchorjs-icons";' + // Icon from icomoon; 10px wide & 10px tall; 2 empty below & 4 above - ' src: url(data:n/a;base64,AAEAAAALAIAAAwAwT1MvMg8yG2cAAAE4AAAAYGNtYXDp3gC3AAABpAAAAExnYXNwAAAAEAAAA9wAAAAIZ2x5ZlQCcfwAAAH4AAABCGhlYWQHFvHyAAAAvAAAADZoaGVhBnACFwAAAPQAAAAkaG10eASAADEAAAGYAAAADGxvY2EACACEAAAB8AAAAAhtYXhwAAYAVwAAARgAAAAgbmFtZQGOH9cAAAMAAAAAunBvc3QAAwAAAAADvAAAACAAAQAAAAEAAHzE2p9fDzz1AAkEAAAAAADRecUWAAAAANQA6R8AAAAAAoACwAAAAAgAAgAAAAAAAAABAAADwP/AAAACgAAA/9MCrQABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCQAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAg//0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAAIAAAACgAAxAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADAAAAAIAAgAAgAAACDpy//9//8AAAAg6cv//f///+EWNwADAAEAAAAAAAAAAAAAAAAACACEAAEAAAAAAAAAAAAAAAAxAAACAAQARAKAAsAAKwBUAAABIiYnJjQ3NzY2MzIWFxYUBwcGIicmNDc3NjQnJiYjIgYHBwYUFxYUBwYGIwciJicmNDc3NjIXFhQHBwYUFxYWMzI2Nzc2NCcmNDc2MhcWFAcHBgYjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAAADACWAAEAAAAAAAEACAAAAAEAAAAAAAIAAwAIAAEAAAAAAAMACAAAAAEAAAAAAAQACAAAAAEAAAAAAAUAAQALAAEAAAAAAAYACAAAAAMAAQQJAAEAEAAMAAMAAQQJAAIABgAcAAMAAQQJAAMAEAAMAAMAAQQJAAQAEAAMAAMAAQQJAAUAAgAiAAMAAQQJAAYAEAAMYW5jaG9yanM0MDBAAGEAbgBjAGgAbwByAGoAcwA0ADAAMABAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAP) format("truetype");' + - ' }', - pseudoElContent = - ' [data-anchorjs-icon]::after {' + - ' content: attr(data-anchorjs-icon);' + - ' }', - firstStyleEl; - - style.className = 'anchorjs'; - style.appendChild(document.createTextNode('')); // Necessary for Webkit. - - // We place it in the head with the other style tags, if possible, so as to - // not look out of place. We insert before the others so these styles can be - // overridden if necessary. - firstStyleEl = document.head.querySelector('[rel="stylesheet"], style'); - if (firstStyleEl === undefined) { - document.head.appendChild(style); - } else { - document.head.insertBefore(style, firstStyleEl); - } - - style.sheet.insertRule(linkRule, style.sheet.cssRules.length); - style.sheet.insertRule(hoverRule, style.sheet.cssRules.length); - style.sheet.insertRule(pseudoElContent, style.sheet.cssRules.length); - style.sheet.insertRule(anchorjsLinkFontFace, style.sheet.cssRules.length); - } - } - - return AnchorJS; -})); - - -/***/ }), -/* 4 */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -/* WEBPACK VAR INJECTION */(function(global, setImmediate) {/*! - * Vue.js v2.5.2 - * (c) 2014-2017 Evan You - * Released under the MIT License. - */ - - -/* */ - -// these helpers produces better vm code in JS engines due to their -// explicitness and function inlining -function isUndef (v) { - return v === undefined || v === null -} - -function isDef (v) { - return v !== undefined && v !== null -} - -function isTrue (v) { - return v === true -} - -function isFalse (v) { - return v === false -} - -/** - * Check if value is primitive - */ -function isPrimitive (value) { - return ( - typeof value === 'string' || - typeof value === 'number' || - typeof value === 'boolean' - ) -} - -/** - * Quick object check - this is primarily used to tell - * Objects from primitive values when we know the value - * is a JSON-compliant type. - */ -function isObject (obj) { - return obj !== null && typeof obj === 'object' -} - -/** - * Get the raw type string of a value e.g. [object Object] - */ -var _toString = Object.prototype.toString; - -function toRawType (value) { - return _toString.call(value).slice(8, -1) -} - -/** - * Strict object type check. Only returns true - * for plain JavaScript objects. - */ -function isPlainObject (obj) { - return _toString.call(obj) === '[object Object]' -} - -function isRegExp (v) { - return _toString.call(v) === '[object RegExp]' -} - -/** - * Check if val is a valid array index. - */ -function isValidArrayIndex (val) { - var n = parseFloat(String(val)); - return n >= 0 && Math.floor(n) === n && isFinite(val) -} - -/** - * Convert a value to a string that is actually rendered. - */ -function toString (val) { - return val == null - ? '' - : typeof val === 'object' - ? JSON.stringify(val, null, 2) - : String(val) -} - -/** - * Convert a input value to a number for persistence. - * If the conversion fails, return original string. - */ -function toNumber (val) { - var n = parseFloat(val); - return isNaN(n) ? val : n -} - -/** - * Make a map and return a function for checking if a key - * is in that map. - */ -function makeMap ( - str, - expectsLowerCase -) { - var map = Object.create(null); - var list = str.split(','); - for (var i = 0; i < list.length; i++) { - map[list[i]] = true; - } - return expectsLowerCase - ? function (val) { return map[val.toLowerCase()]; } - : function (val) { return map[val]; } -} - -/** - * Check if a tag is a built-in tag. - */ -var isBuiltInTag = makeMap('slot,component', true); - -/** - * Check if a attribute is a reserved attribute. - */ -var isReservedAttribute = makeMap('key,ref,slot,slot-scope,is'); - -/** - * Remove an item from an array - */ -function remove (arr, item) { - if (arr.length) { - var index = arr.indexOf(item); - if (index > -1) { - return arr.splice(index, 1) - } - } -} - -/** - * Check whether the object has the property. - */ -var hasOwnProperty = Object.prototype.hasOwnProperty; -function hasOwn (obj, key) { - return hasOwnProperty.call(obj, key) -} - -/** - * Create a cached version of a pure function. - */ -function cached (fn) { - var cache = Object.create(null); - return (function cachedFn (str) { - var hit = cache[str]; - return hit || (cache[str] = fn(str)) - }) -} - -/** - * Camelize a hyphen-delimited string. - */ -var camelizeRE = /-(\w)/g; -var camelize = cached(function (str) { - return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; }) -}); - -/** - * Capitalize a string. - */ -var capitalize = cached(function (str) { - return str.charAt(0).toUpperCase() + str.slice(1) -}); - -/** - * Hyphenate a camelCase string. - */ -var hyphenateRE = /\B([A-Z])/g; -var hyphenate = cached(function (str) { - return str.replace(hyphenateRE, '-$1').toLowerCase() -}); - -/** - * Simple bind, faster than native - */ -function bind (fn, ctx) { - function boundFn (a) { - var l = arguments.length; - return l - ? l > 1 - ? fn.apply(ctx, arguments) - : fn.call(ctx, a) - : fn.call(ctx) - } - // record original fn length - boundFn._length = fn.length; - return boundFn -} - -/** - * Convert an Array-like object to a real Array. - */ -function toArray (list, start) { - start = start || 0; - var i = list.length - start; - var ret = new Array(i); - while (i--) { - ret[i] = list[i + start]; - } - return ret -} - -/** - * Mix properties into target object. - */ -function extend (to, _from) { - for (var key in _from) { - to[key] = _from[key]; - } - return to -} - -/** - * Merge an Array of Objects into a single Object. - */ -function toObject (arr) { - var res = {}; - for (var i = 0; i < arr.length; i++) { - if (arr[i]) { - extend(res, arr[i]); - } - } - return res -} - -/** - * Perform no operation. - * Stubbing args to make Flow happy without leaving useless transpiled code - * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/) - */ -function noop (a, b, c) {} - -/** - * Always return false. - */ -var no = function (a, b, c) { return false; }; - -/** - * Return same value - */ -var identity = function (_) { return _; }; - -/** - * Generate a static keys string from compiler modules. - */ -function genStaticKeys (modules) { - return modules.reduce(function (keys, m) { - return keys.concat(m.staticKeys || []) - }, []).join(',') -} - -/** - * Check if two values are loosely equal - that is, - * if they are plain objects, do they have the same shape? - */ -function looseEqual (a, b) { - if (a === b) { return true } - var isObjectA = isObject(a); - var isObjectB = isObject(b); - if (isObjectA && isObjectB) { - try { - var isArrayA = Array.isArray(a); - var isArrayB = Array.isArray(b); - if (isArrayA && isArrayB) { - return a.length === b.length && a.every(function (e, i) { - return looseEqual(e, b[i]) - }) - } else if (!isArrayA && !isArrayB) { - var keysA = Object.keys(a); - var keysB = Object.keys(b); - return keysA.length === keysB.length && keysA.every(function (key) { - return looseEqual(a[key], b[key]) - }) - } else { - /* istanbul ignore next */ - return false - } - } catch (e) { - /* istanbul ignore next */ - return false - } - } else if (!isObjectA && !isObjectB) { - return String(a) === String(b) - } else { - return false - } -} - -function looseIndexOf (arr, val) { - for (var i = 0; i < arr.length; i++) { - if (looseEqual(arr[i], val)) { return i } - } - return -1 -} - -/** - * Ensure a function is called only once. - */ -function once (fn) { - var called = false; - return function () { - if (!called) { - called = true; - fn.apply(this, arguments); - } - } -} - -var SSR_ATTR = 'data-server-rendered'; - -var ASSET_TYPES = [ - 'component', - 'directive', - 'filter' -]; - -var LIFECYCLE_HOOKS = [ - 'beforeCreate', - 'created', - 'beforeMount', - 'mounted', - 'beforeUpdate', - 'updated', - 'beforeDestroy', - 'destroyed', - 'activated', - 'deactivated', - 'errorCaptured' -]; - -/* */ - -var config = ({ - /** - * Option merge strategies (used in core/util/options) - */ - optionMergeStrategies: Object.create(null), - - /** - * Whether to suppress warnings. - */ - silent: false, - - /** - * Show production mode tip message on boot? - */ - productionTip: "development" !== 'production', - - /** - * Whether to enable devtools - */ - devtools: "development" !== 'production', - - /** - * Whether to record perf - */ - performance: false, - - /** - * Error handler for watcher errors - */ - errorHandler: null, - - /** - * Warn handler for watcher warns - */ - warnHandler: null, - - /** - * Ignore certain custom elements - */ - ignoredElements: [], - - /** - * Custom user key aliases for v-on - */ - keyCodes: Object.create(null), - - /** - * Check if a tag is reserved so that it cannot be registered as a - * component. This is platform-dependent and may be overwritten. - */ - isReservedTag: no, - - /** - * Check if an attribute is reserved so that it cannot be used as a component - * prop. This is platform-dependent and may be overwritten. - */ - isReservedAttr: no, - - /** - * Check if a tag is an unknown element. - * Platform-dependent. - */ - isUnknownElement: no, - - /** - * Get the namespace of an element - */ - getTagNamespace: noop, - - /** - * Parse the real tag name for the specific platform. - */ - parsePlatformTagName: identity, - - /** - * Check if an attribute must be bound using property, e.g. value - * Platform-dependent. - */ - mustUseProp: no, - - /** - * Exposed for legacy reasons - */ - _lifecycleHooks: LIFECYCLE_HOOKS -}); - -/* */ - -var emptyObject = Object.freeze({}); - -/** - * Check if a string starts with $ or _ - */ -function isReserved (str) { - var c = (str + '').charCodeAt(0); - return c === 0x24 || c === 0x5F -} - -/** - * Define a property. - */ -function def (obj, key, val, enumerable) { - Object.defineProperty(obj, key, { - value: val, - enumerable: !!enumerable, - writable: true, - configurable: true - }); -} - -/** - * Parse simple path. - */ -var bailRE = /[^\w.$]/; -function parsePath (path) { - if (bailRE.test(path)) { - return - } - var segments = path.split('.'); - return function (obj) { - for (var i = 0; i < segments.length; i++) { - if (!obj) { return } - obj = obj[segments[i]]; - } - return obj - } -} - -/* */ - -// can we use __proto__? -var hasProto = '__proto__' in {}; - -// Browser environment sniffing -var inBrowser = typeof window !== 'undefined'; -var UA = inBrowser && window.navigator.userAgent.toLowerCase(); -var isIE = UA && /msie|trident/.test(UA); -var isIE9 = UA && UA.indexOf('msie 9.0') > 0; -var isEdge = UA && UA.indexOf('edge/') > 0; -var isAndroid = UA && UA.indexOf('android') > 0; -var isIOS = UA && /iphone|ipad|ipod|ios/.test(UA); -var isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge; - -// Firefox has a "watch" function on Object.prototype... -var nativeWatch = ({}).watch; - -var supportsPassive = false; -if (inBrowser) { - try { - var opts = {}; - Object.defineProperty(opts, 'passive', ({ - get: function get () { - /* istanbul ignore next */ - supportsPassive = true; - } - })); // https://github.com/facebook/flow/issues/285 - window.addEventListener('test-passive', null, opts); - } catch (e) {} -} - -// this needs to be lazy-evaled because vue may be required before -// vue-server-renderer can set VUE_ENV -var _isServer; -var isServerRendering = function () { - if (_isServer === undefined) { - /* istanbul ignore if */ - if (!inBrowser && typeof global !== 'undefined') { - // detect presence of vue-server-renderer and avoid - // Webpack shimming the process - _isServer = global['process'].env.VUE_ENV === 'server'; - } else { - _isServer = false; - } - } - return _isServer -}; - -// detect devtools -var devtools = inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__; - -/* istanbul ignore next */ -function isNative (Ctor) { - return typeof Ctor === 'function' && /native code/.test(Ctor.toString()) -} - -var hasSymbol = - typeof Symbol !== 'undefined' && isNative(Symbol) && - typeof Reflect !== 'undefined' && isNative(Reflect.ownKeys); - -var _Set; -/* istanbul ignore if */ // $flow-disable-line -if (typeof Set !== 'undefined' && isNative(Set)) { - // use native Set when available. - _Set = Set; -} else { - // a non-standard Set polyfill that only works with primitive keys. - _Set = (function () { - function Set () { - this.set = Object.create(null); - } - Set.prototype.has = function has (key) { - return this.set[key] === true - }; - Set.prototype.add = function add (key) { - this.set[key] = true; - }; - Set.prototype.clear = function clear () { - this.set = Object.create(null); - }; - - return Set; - }()); -} - -/* */ - -var warn = noop; -var tip = noop; -var generateComponentTrace = (noop); // work around flow check -var formatComponentName = (noop); - -if (true) { - var hasConsole = typeof console !== 'undefined'; - var classifyRE = /(?:^|[-_])(\w)/g; - var classify = function (str) { return str - .replace(classifyRE, function (c) { return c.toUpperCase(); }) - .replace(/[-_]/g, ''); }; - - warn = function (msg, vm) { - var trace = vm ? generateComponentTrace(vm) : ''; - - if (config.warnHandler) { - config.warnHandler.call(null, msg, vm, trace); - } else if (hasConsole && (!config.silent)) { - console.error(("[Vue warn]: " + msg + trace)); - } - }; - - tip = function (msg, vm) { - if (hasConsole && (!config.silent)) { - console.warn("[Vue tip]: " + msg + ( - vm ? generateComponentTrace(vm) : '' - )); - } - }; - - formatComponentName = function (vm, includeFile) { - if (vm.$root === vm) { - return '' - } - var options = typeof vm === 'function' && vm.cid != null - ? vm.options - : vm._isVue - ? vm.$options || vm.constructor.options - : vm || {}; - var name = options.name || options._componentTag; - var file = options.__file; - if (!name && file) { - var match = file.match(/([^/\\]+)\.vue$/); - name = match && match[1]; - } - - return ( - (name ? ("<" + (classify(name)) + ">") : "") + - (file && includeFile !== false ? (" at " + file) : '') - ) - }; - - var repeat = function (str, n) { - var res = ''; - while (n) { - if (n % 2 === 1) { res += str; } - if (n > 1) { str += str; } - n >>= 1; - } - return res - }; - - generateComponentTrace = function (vm) { - if (vm._isVue && vm.$parent) { - var tree = []; - var currentRecursiveSequence = 0; - while (vm) { - if (tree.length > 0) { - var last = tree[tree.length - 1]; - if (last.constructor === vm.constructor) { - currentRecursiveSequence++; - vm = vm.$parent; - continue - } else if (currentRecursiveSequence > 0) { - tree[tree.length - 1] = [last, currentRecursiveSequence]; - currentRecursiveSequence = 0; - } - } - tree.push(vm); - vm = vm.$parent; - } - return '\n\nfound in\n\n' + tree - .map(function (vm, i) { return ("" + (i === 0 ? '---> ' : repeat(' ', 5 + i * 2)) + (Array.isArray(vm) - ? ((formatComponentName(vm[0])) + "... (" + (vm[1]) + " recursive calls)") - : formatComponentName(vm))); }) - .join('\n') - } else { - return ("\n\n(found in " + (formatComponentName(vm)) + ")") - } - }; -} - -/* */ - - -var uid = 0; - -/** - * A dep is an observable that can have multiple - * directives subscribing to it. - */ -var Dep = function Dep () { - this.id = uid++; - this.subs = []; -}; - -Dep.prototype.addSub = function addSub (sub) { - this.subs.push(sub); -}; - -Dep.prototype.removeSub = function removeSub (sub) { - remove(this.subs, sub); -}; - -Dep.prototype.depend = function depend () { - if (Dep.target) { - Dep.target.addDep(this); - } -}; - -Dep.prototype.notify = function notify () { - // stabilize the subscriber list first - var subs = this.subs.slice(); - for (var i = 0, l = subs.length; i < l; i++) { - subs[i].update(); - } -}; - -// the current target watcher being evaluated. -// this is globally unique because there could be only one -// watcher being evaluated at any time. -Dep.target = null; -var targetStack = []; - -function pushTarget (_target) { - if (Dep.target) { targetStack.push(Dep.target); } - Dep.target = _target; -} - -function popTarget () { - Dep.target = targetStack.pop(); -} - -/* */ - -var VNode = function VNode ( - tag, - data, - children, - text, - elm, - context, - componentOptions, - asyncFactory -) { - this.tag = tag; - this.data = data; - this.children = children; - this.text = text; - this.elm = elm; - this.ns = undefined; - this.context = context; - this.functionalContext = undefined; - this.functionalOptions = undefined; - this.functionalScopeId = undefined; - this.key = data && data.key; - this.componentOptions = componentOptions; - this.componentInstance = undefined; - this.parent = undefined; - this.raw = false; - this.isStatic = false; - this.isRootInsert = true; - this.isComment = false; - this.isCloned = false; - this.isOnce = false; - this.asyncFactory = asyncFactory; - this.asyncMeta = undefined; - this.isAsyncPlaceholder = false; -}; - -var prototypeAccessors = { child: { configurable: true } }; - -// DEPRECATED: alias for componentInstance for backwards compat. -/* istanbul ignore next */ -prototypeAccessors.child.get = function () { - return this.componentInstance -}; - -Object.defineProperties( VNode.prototype, prototypeAccessors ); - -var createEmptyVNode = function (text) { - if ( text === void 0 ) text = ''; - - var node = new VNode(); - node.text = text; - node.isComment = true; - return node -}; - -function createTextVNode (val) { - return new VNode(undefined, undefined, undefined, String(val)) -} - -// optimized shallow clone -// used for static nodes and slot nodes because they may be reused across -// multiple renders, cloning them avoids errors when DOM manipulations rely -// on their elm reference. -function cloneVNode (vnode, deep) { - var cloned = new VNode( - vnode.tag, - vnode.data, - vnode.children, - vnode.text, - vnode.elm, - vnode.context, - vnode.componentOptions, - vnode.asyncFactory - ); - cloned.ns = vnode.ns; - cloned.isStatic = vnode.isStatic; - cloned.key = vnode.key; - cloned.isComment = vnode.isComment; - cloned.isCloned = true; - if (deep && vnode.children) { - cloned.children = cloneVNodes(vnode.children); - } - return cloned -} - -function cloneVNodes (vnodes, deep) { - var len = vnodes.length; - var res = new Array(len); - for (var i = 0; i < len; i++) { - res[i] = cloneVNode(vnodes[i], deep); - } - return res -} - -/* - * not type checking this file because flow doesn't play well with - * dynamically accessing methods on Array prototype - */ - -var arrayProto = Array.prototype; -var arrayMethods = Object.create(arrayProto);[ - 'push', - 'pop', - 'shift', - 'unshift', - 'splice', - 'sort', - 'reverse' -] -.forEach(function (method) { - // cache original method - var original = arrayProto[method]; - def(arrayMethods, method, function mutator () { - var args = [], len = arguments.length; - while ( len-- ) args[ len ] = arguments[ len ]; - - var result = original.apply(this, args); - var ob = this.__ob__; - var inserted; - switch (method) { - case 'push': - case 'unshift': - inserted = args; - break - case 'splice': - inserted = args.slice(2); - break - } - if (inserted) { ob.observeArray(inserted); } - // notify change - ob.dep.notify(); - return result - }); -}); - -/* */ - -var arrayKeys = Object.getOwnPropertyNames(arrayMethods); - -/** - * By default, when a reactive property is set, the new value is - * also converted to become reactive. However when passing down props, - * we don't want to force conversion because the value may be a nested value - * under a frozen data structure. Converting it would defeat the optimization. - */ -var observerState = { - shouldConvert: true -}; - -/** - * Observer class that are attached to each observed - * object. Once attached, the observer converts target - * object's property keys into getter/setters that - * collect dependencies and dispatches updates. - */ -var Observer = function Observer (value) { - this.value = value; - this.dep = new Dep(); - this.vmCount = 0; - def(value, '__ob__', this); - if (Array.isArray(value)) { - var augment = hasProto - ? protoAugment - : copyAugment; - augment(value, arrayMethods, arrayKeys); - this.observeArray(value); - } else { - this.walk(value); - } -}; - -/** - * Walk through each property and convert them into - * getter/setters. This method should only be called when - * value type is Object. - */ -Observer.prototype.walk = function walk (obj) { - var keys = Object.keys(obj); - for (var i = 0; i < keys.length; i++) { - defineReactive(obj, keys[i], obj[keys[i]]); - } -}; - -/** - * Observe a list of Array items. - */ -Observer.prototype.observeArray = function observeArray (items) { - for (var i = 0, l = items.length; i < l; i++) { - observe(items[i]); - } -}; - -// helpers - -/** - * Augment an target Object or Array by intercepting - * the prototype chain using __proto__ - */ -function protoAugment (target, src, keys) { - /* eslint-disable no-proto */ - target.__proto__ = src; - /* eslint-enable no-proto */ -} - -/** - * Augment an target Object or Array by defining - * hidden properties. - */ -/* istanbul ignore next */ -function copyAugment (target, src, keys) { - for (var i = 0, l = keys.length; i < l; i++) { - var key = keys[i]; - def(target, key, src[key]); - } -} - -/** - * Attempt to create an observer instance for a value, - * returns the new observer if successfully observed, - * or the existing observer if the value already has one. - */ -function observe (value, asRootData) { - if (!isObject(value) || value instanceof VNode) { - return - } - var ob; - if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { - ob = value.__ob__; - } else if ( - observerState.shouldConvert && - !isServerRendering() && - (Array.isArray(value) || isPlainObject(value)) && - Object.isExtensible(value) && - !value._isVue - ) { - ob = new Observer(value); - } - if (asRootData && ob) { - ob.vmCount++; - } - return ob -} - -/** - * Define a reactive property on an Object. - */ -function defineReactive ( - obj, - key, - val, - customSetter, - shallow -) { - var dep = new Dep(); - - var property = Object.getOwnPropertyDescriptor(obj, key); - if (property && property.configurable === false) { - return - } - - // cater for pre-defined getter/setters - var getter = property && property.get; - var setter = property && property.set; - - var childOb = !shallow && observe(val); - Object.defineProperty(obj, key, { - enumerable: true, - configurable: true, - get: function reactiveGetter () { - var value = getter ? getter.call(obj) : val; - if (Dep.target) { - dep.depend(); - if (childOb) { - childOb.dep.depend(); - if (Array.isArray(value)) { - dependArray(value); - } - } - } - return value - }, - set: function reactiveSetter (newVal) { - var value = getter ? getter.call(obj) : val; - /* eslint-disable no-self-compare */ - if (newVal === value || (newVal !== newVal && value !== value)) { - return - } - /* eslint-enable no-self-compare */ - if ("development" !== 'production' && customSetter) { - customSetter(); - } - if (setter) { - setter.call(obj, newVal); - } else { - val = newVal; - } - childOb = !shallow && observe(newVal); - dep.notify(); - } - }); -} - -/** - * Set a property on an object. Adds the new property and - * triggers change notification if the property doesn't - * already exist. - */ -function set (target, key, val) { - if (Array.isArray(target) && isValidArrayIndex(key)) { - target.length = Math.max(target.length, key); - target.splice(key, 1, val); - return val - } - if (hasOwn(target, key)) { - target[key] = val; - return val - } - var ob = (target).__ob__; - if (target._isVue || (ob && ob.vmCount)) { - "development" !== 'production' && warn( - 'Avoid adding reactive properties to a Vue instance or its root $data ' + - 'at runtime - declare it upfront in the data option.' - ); - return val - } - if (!ob) { - target[key] = val; - return val - } - defineReactive(ob.value, key, val); - ob.dep.notify(); - return val -} - -/** - * Delete a property and trigger change if necessary. - */ -function del (target, key) { - if (Array.isArray(target) && isValidArrayIndex(key)) { - target.splice(key, 1); - return - } - var ob = (target).__ob__; - if (target._isVue || (ob && ob.vmCount)) { - "development" !== 'production' && warn( - 'Avoid deleting properties on a Vue instance or its root $data ' + - '- just set it to null.' - ); - return - } - if (!hasOwn(target, key)) { - return - } - delete target[key]; - if (!ob) { - return - } - ob.dep.notify(); -} - -/** - * Collect dependencies on array elements when the array is touched, since - * we cannot intercept array element access like property getters. - */ -function dependArray (value) { - for (var e = (void 0), i = 0, l = value.length; i < l; i++) { - e = value[i]; - e && e.__ob__ && e.__ob__.dep.depend(); - if (Array.isArray(e)) { - dependArray(e); - } - } -} - -/* */ - -/** - * Option overwriting strategies are functions that handle - * how to merge a parent option value and a child option - * value into the final value. - */ -var strats = config.optionMergeStrategies; - -/** - * Options with restrictions - */ -if (true) { - strats.el = strats.propsData = function (parent, child, vm, key) { - if (!vm) { - warn( - "option \"" + key + "\" can only be used during instance " + - 'creation with the `new` keyword.' - ); - } - return defaultStrat(parent, child) - }; -} - -/** - * Helper that recursively merges two data objects together. - */ -function mergeData (to, from) { - if (!from) { return to } - var key, toVal, fromVal; - var keys = Object.keys(from); - for (var i = 0; i < keys.length; i++) { - key = keys[i]; - toVal = to[key]; - fromVal = from[key]; - if (!hasOwn(to, key)) { - set(to, key, fromVal); - } else if (isPlainObject(toVal) && isPlainObject(fromVal)) { - mergeData(toVal, fromVal); - } - } - return to -} - -/** - * Data - */ -function mergeDataOrFn ( - parentVal, - childVal, - vm -) { - if (!vm) { - // in a Vue.extend merge, both should be functions - if (!childVal) { - return parentVal - } - if (!parentVal) { - return childVal - } - // when parentVal & childVal are both present, - // we need to return a function that returns the - // merged result of both functions... no need to - // check if parentVal is a function here because - // it has to be a function to pass previous merges. - return function mergedDataFn () { - return mergeData( - typeof childVal === 'function' ? childVal.call(this) : childVal, - typeof parentVal === 'function' ? parentVal.call(this) : parentVal - ) - } - } else if (parentVal || childVal) { - return function mergedInstanceDataFn () { - // instance merge - var instanceData = typeof childVal === 'function' - ? childVal.call(vm) - : childVal; - var defaultData = typeof parentVal === 'function' - ? parentVal.call(vm) - : parentVal; - if (instanceData) { - return mergeData(instanceData, defaultData) - } else { - return defaultData - } - } - } -} - -strats.data = function ( - parentVal, - childVal, - vm -) { - if (!vm) { - if (childVal && typeof childVal !== 'function') { - "development" !== 'production' && warn( - 'The "data" option should be a function ' + - 'that returns a per-instance value in component ' + - 'definitions.', - vm - ); - - return parentVal - } - return mergeDataOrFn.call(this, parentVal, childVal) - } - - return mergeDataOrFn(parentVal, childVal, vm) -}; - -/** - * Hooks and props are merged as arrays. - */ -function mergeHook ( - parentVal, - childVal -) { - return childVal - ? parentVal - ? parentVal.concat(childVal) - : Array.isArray(childVal) - ? childVal - : [childVal] - : parentVal -} - -LIFECYCLE_HOOKS.forEach(function (hook) { - strats[hook] = mergeHook; -}); - -/** - * Assets - * - * When a vm is present (instance creation), we need to do - * a three-way merge between constructor options, instance - * options and parent options. - */ -function mergeAssets ( - parentVal, - childVal, - vm, - key -) { - var res = Object.create(parentVal || null); - if (childVal) { - "development" !== 'production' && assertObjectType(key, childVal, vm); - return extend(res, childVal) - } else { - return res - } -} - -ASSET_TYPES.forEach(function (type) { - strats[type + 's'] = mergeAssets; -}); - -/** - * Watchers. - * - * Watchers hashes should not overwrite one - * another, so we merge them as arrays. - */ -strats.watch = function ( - parentVal, - childVal, - vm, - key -) { - // work around Firefox's Object.prototype.watch... - if (parentVal === nativeWatch) { parentVal = undefined; } - if (childVal === nativeWatch) { childVal = undefined; } - /* istanbul ignore if */ - if (!childVal) { return Object.create(parentVal || null) } - if (true) { - assertObjectType(key, childVal, vm); - } - if (!parentVal) { return childVal } - var ret = {}; - extend(ret, parentVal); - for (var key$1 in childVal) { - var parent = ret[key$1]; - var child = childVal[key$1]; - if (parent && !Array.isArray(parent)) { - parent = [parent]; - } - ret[key$1] = parent - ? parent.concat(child) - : Array.isArray(child) ? child : [child]; - } - return ret -}; - -/** - * Other object hashes. - */ -strats.props = -strats.methods = -strats.inject = -strats.computed = function ( - parentVal, - childVal, - vm, - key -) { - if (childVal && "development" !== 'production') { - assertObjectType(key, childVal, vm); - } - if (!parentVal) { return childVal } - var ret = Object.create(null); - extend(ret, parentVal); - if (childVal) { extend(ret, childVal); } - return ret -}; -strats.provide = mergeDataOrFn; - -/** - * Default strategy. - */ -var defaultStrat = function (parentVal, childVal) { - return childVal === undefined - ? parentVal - : childVal -}; - -/** - * Validate component names - */ -function checkComponents (options) { - for (var key in options.components) { - var lower = key.toLowerCase(); - if (isBuiltInTag(lower) || config.isReservedTag(lower)) { - warn( - 'Do not use built-in or reserved HTML elements as component ' + - 'id: ' + key - ); - } - } -} - -/** - * Ensure all props option syntax are normalized into the - * Object-based format. - */ -function normalizeProps (options, vm) { - var props = options.props; - if (!props) { return } - var res = {}; - var i, val, name; - if (Array.isArray(props)) { - i = props.length; - while (i--) { - val = props[i]; - if (typeof val === 'string') { - name = camelize(val); - res[name] = { type: null }; - } else if (true) { - warn('props must be strings when using array syntax.'); - } - } - } else if (isPlainObject(props)) { - for (var key in props) { - val = props[key]; - name = camelize(key); - res[name] = isPlainObject(val) - ? val - : { type: val }; - } - } else if (true) { - warn( - "Invalid value for option \"props\": expected an Array or an Object, " + - "but got " + (toRawType(props)) + ".", - vm - ); - } - options.props = res; -} - -/** - * Normalize all injections into Object-based format - */ -function normalizeInject (options, vm) { - var inject = options.inject; - var normalized = options.inject = {}; - if (Array.isArray(inject)) { - for (var i = 0; i < inject.length; i++) { - normalized[inject[i]] = { from: inject[i] }; - } - } else if (isPlainObject(inject)) { - for (var key in inject) { - var val = inject[key]; - normalized[key] = isPlainObject(val) - ? extend({ from: key }, val) - : { from: val }; - } - } else if ("development" !== 'production' && inject) { - warn( - "Invalid value for option \"inject\": expected an Array or an Object, " + - "but got " + (toRawType(inject)) + ".", - vm - ); - } -} - -/** - * Normalize raw function directives into object format. - */ -function normalizeDirectives (options) { - var dirs = options.directives; - if (dirs) { - for (var key in dirs) { - var def = dirs[key]; - if (typeof def === 'function') { - dirs[key] = { bind: def, update: def }; - } - } - } -} - -function assertObjectType (name, value, vm) { - if (!isPlainObject(value)) { - warn( - "Invalid value for option \"" + name + "\": expected an Object, " + - "but got " + (toRawType(value)) + ".", - vm - ); - } -} - -/** - * Merge two option objects into a new one. - * Core utility used in both instantiation and inheritance. - */ -function mergeOptions ( - parent, - child, - vm -) { - if (true) { - checkComponents(child); - } - - if (typeof child === 'function') { - child = child.options; - } - - normalizeProps(child, vm); - normalizeInject(child, vm); - normalizeDirectives(child); - var extendsFrom = child.extends; - if (extendsFrom) { - parent = mergeOptions(parent, extendsFrom, vm); - } - if (child.mixins) { - for (var i = 0, l = child.mixins.length; i < l; i++) { - parent = mergeOptions(parent, child.mixins[i], vm); - } - } - var options = {}; - var key; - for (key in parent) { - mergeField(key); - } - for (key in child) { - if (!hasOwn(parent, key)) { - mergeField(key); - } - } - function mergeField (key) { - var strat = strats[key] || defaultStrat; - options[key] = strat(parent[key], child[key], vm, key); - } - return options -} - -/** - * Resolve an asset. - * This function is used because child instances need access - * to assets defined in its ancestor chain. - */ -function resolveAsset ( - options, - type, - id, - warnMissing -) { - /* istanbul ignore if */ - if (typeof id !== 'string') { - return - } - var assets = options[type]; - // check local registration variations first - if (hasOwn(assets, id)) { return assets[id] } - var camelizedId = camelize(id); - if (hasOwn(assets, camelizedId)) { return assets[camelizedId] } - var PascalCaseId = capitalize(camelizedId); - if (hasOwn(assets, PascalCaseId)) { return assets[PascalCaseId] } - // fallback to prototype chain - var res = assets[id] || assets[camelizedId] || assets[PascalCaseId]; - if ("development" !== 'production' && warnMissing && !res) { - warn( - 'Failed to resolve ' + type.slice(0, -1) + ': ' + id, - options - ); - } - return res -} - -/* */ - -function validateProp ( - key, - propOptions, - propsData, - vm -) { - var prop = propOptions[key]; - var absent = !hasOwn(propsData, key); - var value = propsData[key]; - // handle boolean props - if (isType(Boolean, prop.type)) { - if (absent && !hasOwn(prop, 'default')) { - value = false; - } else if (!isType(String, prop.type) && (value === '' || value === hyphenate(key))) { - value = true; - } - } - // check default value - if (value === undefined) { - value = getPropDefaultValue(vm, prop, key); - // since the default value is a fresh copy, - // make sure to observe it. - var prevShouldConvert = observerState.shouldConvert; - observerState.shouldConvert = true; - observe(value); - observerState.shouldConvert = prevShouldConvert; - } - if (true) { - assertProp(prop, key, value, vm, absent); - } - return value -} - -/** - * Get the default value of a prop. - */ -function getPropDefaultValue (vm, prop, key) { - // no default, return undefined - if (!hasOwn(prop, 'default')) { - return undefined - } - var def = prop.default; - // warn against non-factory defaults for Object & Array - if ("development" !== 'production' && isObject(def)) { - warn( - 'Invalid default value for prop "' + key + '": ' + - 'Props with type Object/Array must use a factory function ' + - 'to return the default value.', - vm - ); - } - // the raw prop value was also undefined from previous render, - // return previous default value to avoid unnecessary watcher trigger - if (vm && vm.$options.propsData && - vm.$options.propsData[key] === undefined && - vm._props[key] !== undefined - ) { - return vm._props[key] - } - // call factory function for non-Function types - // a value is Function if its prototype is function even across different execution context - return typeof def === 'function' && getType(prop.type) !== 'Function' - ? def.call(vm) - : def -} - -/** - * Assert whether a prop is valid. - */ -function assertProp ( - prop, - name, - value, - vm, - absent -) { - if (prop.required && absent) { - warn( - 'Missing required prop: "' + name + '"', - vm - ); - return - } - if (value == null && !prop.required) { - return - } - var type = prop.type; - var valid = !type || type === true; - var expectedTypes = []; - if (type) { - if (!Array.isArray(type)) { - type = [type]; - } - for (var i = 0; i < type.length && !valid; i++) { - var assertedType = assertType(value, type[i]); - expectedTypes.push(assertedType.expectedType || ''); - valid = assertedType.valid; - } - } - if (!valid) { - warn( - "Invalid prop: type check failed for prop \"" + name + "\"." + - " Expected " + (expectedTypes.map(capitalize).join(', ')) + - ", got " + (toRawType(value)) + ".", - vm - ); - return - } - var validator = prop.validator; - if (validator) { - if (!validator(value)) { - warn( - 'Invalid prop: custom validator check failed for prop "' + name + '".', - vm - ); - } - } -} - -var simpleCheckRE = /^(String|Number|Boolean|Function|Symbol)$/; - -function assertType (value, type) { - var valid; - var expectedType = getType(type); - if (simpleCheckRE.test(expectedType)) { - var t = typeof value; - valid = t === expectedType.toLowerCase(); - // for primitive wrapper objects - if (!valid && t === 'object') { - valid = value instanceof type; - } - } else if (expectedType === 'Object') { - valid = isPlainObject(value); - } else if (expectedType === 'Array') { - valid = Array.isArray(value); - } else { - valid = value instanceof type; - } - return { - valid: valid, - expectedType: expectedType - } -} - -/** - * Use function string name to check built-in types, - * because a simple equality check will fail when running - * across different vms / iframes. - */ -function getType (fn) { - var match = fn && fn.toString().match(/^\s*function (\w+)/); - return match ? match[1] : '' -} - -function isType (type, fn) { - if (!Array.isArray(fn)) { - return getType(fn) === getType(type) - } - for (var i = 0, len = fn.length; i < len; i++) { - if (getType(fn[i]) === getType(type)) { - return true - } - } - /* istanbul ignore next */ - return false -} - -/* */ - -function handleError (err, vm, info) { - if (vm) { - var cur = vm; - while ((cur = cur.$parent)) { - var hooks = cur.$options.errorCaptured; - if (hooks) { - for (var i = 0; i < hooks.length; i++) { - try { - var capture = hooks[i].call(cur, err, vm, info) === false; - if (capture) { return } - } catch (e) { - globalHandleError(e, cur, 'errorCaptured hook'); - } - } - } - } - } - globalHandleError(err, vm, info); -} - -function globalHandleError (err, vm, info) { - if (config.errorHandler) { - try { - return config.errorHandler.call(null, err, vm, info) - } catch (e) { - logError(e, null, 'config.errorHandler'); - } - } - logError(err, vm, info); -} - -function logError (err, vm, info) { - if (true) { - warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm); - } - /* istanbul ignore else */ - if (inBrowser && typeof console !== 'undefined') { - console.error(err); - } else { - throw err - } -} - -/* */ -/* globals MessageChannel */ - -var callbacks = []; -var pending = false; - -function flushCallbacks () { - pending = false; - var copies = callbacks.slice(0); - callbacks.length = 0; - for (var i = 0; i < copies.length; i++) { - copies[i](); - } -} - -// Here we have async deferring wrappers using both micro and macro tasks. -// In < 2.4 we used micro tasks everywhere, but there are some scenarios where -// micro tasks have too high a priority and fires in between supposedly -// sequential events (e.g. #4521, #6690) or even between bubbling of the same -// event (#6566). However, using macro tasks everywhere also has subtle problems -// when state is changed right before repaint (e.g. #6813, out-in transitions). -// Here we use micro task by default, but expose a way to force macro task when -// needed (e.g. in event handlers attached by v-on). -var microTimerFunc; -var macroTimerFunc; -var useMacroTask = false; - -// Determine (macro) Task defer implementation. -// Technically setImmediate should be the ideal choice, but it's only available -// in IE. The only polyfill that consistently queues the callback after all DOM -// events triggered in the same loop is by using MessageChannel. -/* istanbul ignore if */ -if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { - macroTimerFunc = function () { - setImmediate(flushCallbacks); - }; -} else if (typeof MessageChannel !== 'undefined' && ( - isNative(MessageChannel) || - // PhantomJS - MessageChannel.toString() === '[object MessageChannelConstructor]' -)) { - var channel = new MessageChannel(); - var port = channel.port2; - channel.port1.onmessage = flushCallbacks; - macroTimerFunc = function () { - port.postMessage(1); - }; -} else { - /* istanbul ignore next */ - macroTimerFunc = function () { - setTimeout(flushCallbacks, 0); - }; -} - -// Determine MicroTask defer implementation. -/* istanbul ignore next, $flow-disable-line */ -if (typeof Promise !== 'undefined' && isNative(Promise)) { - var p = Promise.resolve(); - microTimerFunc = function () { - p.then(flushCallbacks); - // in problematic UIWebViews, Promise.then doesn't completely break, but - // it can get stuck in a weird state where callbacks are pushed into the - // microtask queue but the queue isn't being flushed, until the browser - // needs to do some other work, e.g. handle a timer. Therefore we can - // "force" the microtask queue to be flushed by adding an empty timer. - if (isIOS) { setTimeout(noop); } - }; -} else { - // fallback to macro - microTimerFunc = macroTimerFunc; -} - -/** - * Wrap a function so that if any code inside triggers state change, - * the changes are queued using a Task instead of a MicroTask. - */ -function withMacroTask (fn) { - return fn._withTask || (fn._withTask = function () { - useMacroTask = true; - var res = fn.apply(null, arguments); - useMacroTask = false; - return res - }) -} - -function nextTick (cb, ctx) { - var _resolve; - callbacks.push(function () { - if (cb) { - try { - cb.call(ctx); - } catch (e) { - handleError(e, ctx, 'nextTick'); - } - } else if (_resolve) { - _resolve(ctx); - } - }); - if (!pending) { - pending = true; - if (useMacroTask) { - macroTimerFunc(); - } else { - microTimerFunc(); - } - } - // $flow-disable-line - if (!cb && typeof Promise !== 'undefined') { - return new Promise(function (resolve) { - _resolve = resolve; - }) - } -} - -/* */ - -var mark; -var measure; - -if (true) { - var perf = inBrowser && window.performance; - /* istanbul ignore if */ - if ( - perf && - perf.mark && - perf.measure && - perf.clearMarks && - perf.clearMeasures - ) { - mark = function (tag) { return perf.mark(tag); }; - measure = function (name, startTag, endTag) { - perf.measure(name, startTag, endTag); - perf.clearMarks(startTag); - perf.clearMarks(endTag); - perf.clearMeasures(name); - }; - } -} - -/* not type checking this file because flow doesn't play well with Proxy */ - -var initProxy; - -if (true) { - var allowedGlobals = makeMap( - 'Infinity,undefined,NaN,isFinite,isNaN,' + - 'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' + - 'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' + - 'require' // for Webpack/Browserify - ); - - var warnNonPresent = function (target, key) { - warn( - "Property or method \"" + key + "\" is not defined on the instance but " + - 'referenced during render. Make sure that this property is reactive, ' + - 'either in the data option, or for class-based components, by ' + - 'initializing the property. ' + - 'See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.', - target - ); - }; - - var hasProxy = - typeof Proxy !== 'undefined' && - Proxy.toString().match(/native code/); - - if (hasProxy) { - var isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta,exact'); - config.keyCodes = new Proxy(config.keyCodes, { - set: function set (target, key, value) { - if (isBuiltInModifier(key)) { - warn(("Avoid overwriting built-in modifier in config.keyCodes: ." + key)); - return false - } else { - target[key] = value; - return true - } - } - }); - } - - var hasHandler = { - has: function has (target, key) { - var has = key in target; - var isAllowed = allowedGlobals(key) || key.charAt(0) === '_'; - if (!has && !isAllowed) { - warnNonPresent(target, key); - } - return has || !isAllowed - } - }; - - var getHandler = { - get: function get (target, key) { - if (typeof key === 'string' && !(key in target)) { - warnNonPresent(target, key); - } - return target[key] - } - }; - - initProxy = function initProxy (vm) { - if (hasProxy) { - // determine which proxy handler to use - var options = vm.$options; - var handlers = options.render && options.render._withStripped - ? getHandler - : hasHandler; - vm._renderProxy = new Proxy(vm, handlers); - } else { - vm._renderProxy = vm; - } - }; -} - -/* */ - -var normalizeEvent = cached(function (name) { - var passive = name.charAt(0) === '&'; - name = passive ? name.slice(1) : name; - var once$$1 = name.charAt(0) === '~'; // Prefixed last, checked first - name = once$$1 ? name.slice(1) : name; - var capture = name.charAt(0) === '!'; - name = capture ? name.slice(1) : name; - return { - name: name, - once: once$$1, - capture: capture, - passive: passive - } -}); - -function createFnInvoker (fns) { - function invoker () { - var arguments$1 = arguments; - - var fns = invoker.fns; - if (Array.isArray(fns)) { - var cloned = fns.slice(); - for (var i = 0; i < cloned.length; i++) { - cloned[i].apply(null, arguments$1); - } - } else { - // return handler return value for single handlers - return fns.apply(null, arguments) - } - } - invoker.fns = fns; - return invoker -} - -function updateListeners ( - on, - oldOn, - add, - remove$$1, - vm -) { - var name, cur, old, event; - for (name in on) { - cur = on[name]; - old = oldOn[name]; - event = normalizeEvent(name); - if (isUndef(cur)) { - "development" !== 'production' && warn( - "Invalid handler for event \"" + (event.name) + "\": got " + String(cur), - vm - ); - } else if (isUndef(old)) { - if (isUndef(cur.fns)) { - cur = on[name] = createFnInvoker(cur); - } - add(event.name, cur, event.once, event.capture, event.passive); - } else if (cur !== old) { - old.fns = cur; - on[name] = old; - } - } - for (name in oldOn) { - if (isUndef(on[name])) { - event = normalizeEvent(name); - remove$$1(event.name, oldOn[name], event.capture); - } - } -} - -/* */ - -function mergeVNodeHook (def, hookKey, hook) { - var invoker; - var oldHook = def[hookKey]; - - function wrappedHook () { - hook.apply(this, arguments); - // important: remove merged hook to ensure it's called only once - // and prevent memory leak - remove(invoker.fns, wrappedHook); - } - - if (isUndef(oldHook)) { - // no existing hook - invoker = createFnInvoker([wrappedHook]); - } else { - /* istanbul ignore if */ - if (isDef(oldHook.fns) && isTrue(oldHook.merged)) { - // already a merged invoker - invoker = oldHook; - invoker.fns.push(wrappedHook); - } else { - // existing plain hook - invoker = createFnInvoker([oldHook, wrappedHook]); - } - } - - invoker.merged = true; - def[hookKey] = invoker; -} - -/* */ - -function extractPropsFromVNodeData ( - data, - Ctor, - tag -) { - // we are only extracting raw values here. - // validation and default values are handled in the child - // component itself. - var propOptions = Ctor.options.props; - if (isUndef(propOptions)) { - return - } - var res = {}; - var attrs = data.attrs; - var props = data.props; - if (isDef(attrs) || isDef(props)) { - for (var key in propOptions) { - var altKey = hyphenate(key); - if (true) { - var keyInLowerCase = key.toLowerCase(); - if ( - key !== keyInLowerCase && - attrs && hasOwn(attrs, keyInLowerCase) - ) { - tip( - "Prop \"" + keyInLowerCase + "\" is passed to component " + - (formatComponentName(tag || Ctor)) + ", but the declared prop name is" + - " \"" + key + "\". " + - "Note that HTML attributes are case-insensitive and camelCased " + - "props need to use their kebab-case equivalents when using in-DOM " + - "templates. You should probably use \"" + altKey + "\" instead of \"" + key + "\"." - ); - } - } - checkProp(res, props, key, altKey, true) || - checkProp(res, attrs, key, altKey, false); - } - } - return res -} - -function checkProp ( - res, - hash, - key, - altKey, - preserve -) { - if (isDef(hash)) { - if (hasOwn(hash, key)) { - res[key] = hash[key]; - if (!preserve) { - delete hash[key]; - } - return true - } else if (hasOwn(hash, altKey)) { - res[key] = hash[altKey]; - if (!preserve) { - delete hash[altKey]; - } - return true - } - } - return false -} - -/* */ - -// The template compiler attempts to minimize the need for normalization by -// statically analyzing the template at compile time. -// -// For plain HTML markup, normalization can be completely skipped because the -// generated render function is guaranteed to return Array. There are -// two cases where extra normalization is needed: - -// 1. When the children contains components - because a functional component -// may return an Array instead of a single root. In this case, just a simple -// normalization is needed - if any child is an Array, we flatten the whole -// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep -// because functional components already normalize their own children. -function simpleNormalizeChildren (children) { - for (var i = 0; i < children.length; i++) { - if (Array.isArray(children[i])) { - return Array.prototype.concat.apply([], children) - } - } - return children -} - -// 2. When the children contains constructs that always generated nested Arrays, -// e.g.