├── dist ├── mix-manifest.json ├── main.js ├── css │ └── field.css └── js │ ├── field.js.LICENSE.txt │ └── field.js ├── .gitignore ├── resources ├── js │ ├── field.js │ └── components │ │ ├── IndexField.vue │ │ └── DetailField.vue └── sass │ └── field.scss ├── webpack.mix.js ├── composer.json ├── package.json ├── src ├── FieldServiceProvider.php └── StatusField.php ├── mix.js ├── LICENSE └── README.md /dist/mix-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "/js/field.js": "/js/field.js", 3 | "/css/field.css": "/css/field.css" 4 | } 5 | -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | /******/ (() => { // webpackBootstrap 2 | /******/ "use strict"; 3 | /******/ 4 | /******/ 5 | /******/ })() 6 | ; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /vendor 3 | /node_modules 4 | package-lock.json 5 | composer.phar 6 | composer.lock 7 | phpunit.xml 8 | .phpunit.result.cache 9 | .DS_Store 10 | Thumbs.db 11 | -------------------------------------------------------------------------------- /resources/js/field.js: -------------------------------------------------------------------------------- 1 | import IndexField from "./components/IndexField"; 2 | import DetailField from "./components/DetailField"; 3 | import Popper from "vue3-popper"; 4 | 5 | Nova.booting((app, store) => { 6 | app.component('index-nova-status-field', IndexField) 7 | app.component('detail-nova-status-field', DetailField) 8 | app.component('popper', Popper) 9 | }) 10 | -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | let mix = require('laravel-mix') 2 | let path = require('path') 3 | 4 | require('./mix') 5 | 6 | mix 7 | .setPublicPath('dist') 8 | .js('resources/js/field.js', 'js') 9 | .vue({ version: 3 }) 10 | .sass('resources/sass/field.scss', 'css') 11 | .nova('wesselperik/nova-status-field') 12 | 13 | module.exports = { 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.svg$/, 18 | use: [ 19 | 'babel-loader', 20 | 'vue-svg-loader', 21 | ], 22 | }, 23 | ], 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /resources/sass/field.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --popper-theme-background-color: rgba(var(--colors-primary-500)); 3 | --popper-theme-background-color-hover: rgba(var(--colors-primary-500)); 4 | --popper-theme-border-width: 0px; 5 | --popper-theme-border-style: solid; 6 | --popper-theme-border-radius: 6px; 7 | --popper-theme-padding: 6px; 8 | } 9 | 10 | .popper { 11 | --tw-text-opacity: 1; 12 | color: rgba(var(--colors-white),var(--tw-text-opacity)) !important; 13 | font-size: .7rem; 14 | font-weight: 700; 15 | 16 | @media (prefers-color-scheme: dark) { 17 | --tw-text-opacity: 1; 18 | color: rgba(var(--colors-gray-800),var(--tw-text-opacity)) !important; 19 | } 20 | } 21 | 22 | .field { 23 | display: flex; 24 | 25 | svg { 26 | margin-top: -2px; 27 | } 28 | } -------------------------------------------------------------------------------- /dist/css/field.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --popper-theme-background-color: rgba(var(--colors-primary-500)); 3 | --popper-theme-background-color-hover: rgba(var(--colors-primary-500)); 4 | --popper-theme-border-width: 0px; 5 | --popper-theme-border-style: solid; 6 | --popper-theme-border-radius: 6px; 7 | --popper-theme-padding: 6px; 8 | } 9 | 10 | .popper { 11 | --tw-text-opacity: 1; 12 | color: rgba(var(--colors-white), var(--tw-text-opacity)) !important; 13 | font-size: 0.7rem; 14 | font-weight: 700; 15 | } 16 | @media (prefers-color-scheme: dark) { 17 | .popper { 18 | --tw-text-opacity: 1; 19 | color: rgba(var(--colors-gray-800), var(--tw-text-opacity)) !important; 20 | } 21 | } 22 | 23 | .field { 24 | display: flex; 25 | } 26 | .field svg { 27 | margin-top: -2px; 28 | } 29 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wesselperik/nova-status-field", 3 | "description": "A Laravel Nova field for displaying statuses.", 4 | "keywords": [ 5 | "laravel", 6 | "status", 7 | "nova" 8 | ], 9 | "license": "MIT", 10 | "require": { 11 | "php": "^8.0", 12 | "laravel/nova": "^4.0" 13 | }, 14 | "autoload": { 15 | "psr-4": { 16 | "WesselPerik\\StatusField\\": "src/" 17 | } 18 | }, 19 | "extra": { 20 | "laravel": { 21 | "providers": [ 22 | "WesselPerik\\StatusField\\FieldServiceProvider" 23 | ] 24 | } 25 | }, 26 | "config": { 27 | "sort-packages": true 28 | }, 29 | "minimum-stability": "dev", 30 | "prefer-stable": true 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "npm run development", 5 | "development": "mix", 6 | "watch": "mix watch", 7 | "watch-poll": "mix watch -- --watch-options-poll=1000", 8 | "hot": "mix watch --hot", 9 | "prod": "npm run production", 10 | "production": "mix --production" 11 | }, 12 | "devDependencies": { 13 | "@vue/compiler-sfc": "^3.2.22", 14 | "form-backend-validation": "^2.3.3", 15 | "laravel-mix": "^6.0.41", 16 | "resolve-url-loader": "^5.0.0", 17 | "sass": "^1.49.8", 18 | "sass-loader": "^12.6.0", 19 | "vue-loader": "^16.8.3", 20 | "vue-svg-loader": "^0.10.0" 21 | }, 22 | "dependencies": { 23 | "vue3-popper": "^1.5.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/FieldServiceProvider.php: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 |
7 | 8 | 9 | -------------------------------------------------------------------------------- /dist/js/field.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /**! 2 | * @fileOverview Kickass library to create and place poppers near their reference elements. 3 | * @version 1.16.1 4 | * @license 5 | * Copyright (c) 2016 Federico Zivolo and contributors 6 | * 7 | * Permission is hereby granted, free of charge, to any person obtaining a copy 8 | * of this software and associated documentation files (the "Software"), to deal 9 | * in the Software without restriction, including without limitation the rights 10 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | * copies of the Software, and to permit persons to whom the Software is 12 | * furnished to do so, subject to the following conditions: 13 | * 14 | * The above copyright notice and this permission notice shall be included in all 15 | * copies or substantial portions of the Software. 16 | * 17 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | * SOFTWARE. 24 | */ 25 | -------------------------------------------------------------------------------- /resources/js/components/DetailField.vue: -------------------------------------------------------------------------------- 1 | 19 | 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Nova Status Field 2 |
3 | 4 | [![Latest Version on Packagist](https://img.shields.io/packagist/v/wesselperik/nova-status-field.svg?style=flat-square)](https://packagist.org/packages/wesselperik/nova-status-field) 5 | [![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square)](https://gitmoji.carloscuesta.me) 6 | 7 | ### 🚀 Compatible with Laravel Nova 4.0! 8 | 9 | A Laravel Nova field for displaying a status icon, with optional tooltip and info text, on index and detail pages of your models. 10 | This package utilizes all icons from the [Heroicons](https://heroicons.com/) icon pack (from designer [Steve Schroger](https://twitter.com/steveschoger)), which is also used in Laravel Nova. 11 | 12 | ## Installation 13 | 14 | You can install the package using composer: 15 | 16 | ```bash 17 | composer require wesselperik/nova-status-field 18 | ``` 19 | 20 | Next up, add the field to your desired Nova model. See the example below: 21 | 22 | ```php 23 | // for example, in app/Nova/Blog.php 24 | 25 | use WesselPerik\StatusField\StatusField; 26 | 27 | // ... 28 | 29 | public function fields(Request $request) { 30 | return [ 31 | // Use a single value for tooltips and info... 32 | StatusField::make('Published') 33 | ->icons([ 34 | 'minus-circle' => $this->published == 0, 35 | 'clock' => $this->pending == 1 && $this->published == 0, 36 | 'check-circle' => $this->pending == 0 && $this->published == 1 37 | ]) 38 | ->color('primary') // optional 39 | ->solid(true) // optional 40 | ->tooltip($this->status) // optional 41 | ->info("Blog status: ".$this->status) // optional 42 | ->exceptOnForms() 43 | 44 | // ...or change text based on the value 45 | StatusField::make('Published') 46 | ->icons([ 47 | 'minus-circle' => $this->published == 0, 48 | 'clock' => $this->pending == 1 && $this->published == 0, 49 | 'check-circle' => $this->pending == 0 && $this->published == 1 50 | ]) 51 | ->tooltip([ 52 | 'minus-circle' => 'Not published', 53 | 'clock' => 'Pending publication', 54 | 'check-circle' => 'Published' 55 | ]) 56 | ->info([ 57 | 'minus-circle' => 'This blog is not published yet.', 58 | 'clock' => 'This blog is pending publication.', 59 | 'check-circle' => 'This blog is published on '.$this->published_at->format('d-m-Y').'.' 60 | ]) 61 | ->color([ 62 | 'minus-circle' => 'red-500', 63 | 'clock' => 'blue-500', 64 | 'check-circle' => 'green-500' 65 | ]) 66 | ->exceptOnForms() 67 | ]; 68 | } 69 | ``` 70 | Available icons are all [Heroicons](https://heroicons.com/) by [Steve Schroger](https://twitter.com/steveschoger). By default, the icons are used in the outline style, but you can use the `solid()` function to change to the solid style (see the example above). 71 | 72 | Available colors are the following [TailwindCSS text colors](https://tailwindcss.com/docs/text-color) included in Laravel Nova 4, which are: 73 | - `primary` 74 | - `gray` 75 | - `white` 76 | - `blue` 77 | - `green` 78 | - `red` 79 | 80 | ## Contributors 81 | 82 | - [Wessel Perik](https://github.com/wesselperik) 83 | - [Jeremy Holstein](https://github.com/jjjrmy) 84 | 85 | ## License 86 | 87 | The MIT License (MIT). Please see the [license file](LICENSE) for more information. 88 | -------------------------------------------------------------------------------- /src/StatusField.php: -------------------------------------------------------------------------------- 1 | status value pairs. 22 | * 23 | * @since 2.1.0 24 | * 25 | * @param array $icons 26 | * @return $this 27 | */ 28 | public function icons(array $icons = null) 29 | { 30 | return $this->withMeta(['values' => $icons]); 31 | } 32 | 33 | /** 34 | * Add a tooltip to the field. 35 | * 36 | * @param string|array|\BackedEnum $value 37 | * @return $this 38 | */ 39 | public function tooltip(string|array|\BackedEnum $value = null) 40 | { 41 | return $this->withMeta([ 42 | 'tooltip' => ($value instanceof \BackedEnum) ? $value->value : $value, 43 | ]); 44 | } 45 | 46 | /** 47 | * Add some extra field information on the detail view. 48 | * 49 | * @param string|array|\BackedEnum $value 50 | * @param bool $displayTooltip 51 | * @return $this 52 | */ 53 | public function info(string|array|\BackedEnum $value = null, bool $displayTooltip = false) 54 | { 55 | return $this->withMeta([ 56 | 'info' => ($value instanceof \BackedEnum) ? $value->value : $value, 57 | 'display_tooltip' => $displayTooltip 58 | ]); 59 | } 60 | 61 | /** 62 | * Add custom color(s) to icons. 63 | * Accepts a single color, or an array of icon => color value pairs. 64 | * 65 | * @since 2.1.0 66 | * 67 | * @param string|array $color 68 | * @return $this 69 | */ 70 | public function color(string|array $color = 'current') 71 | { 72 | return $this->withMeta(['color' => $color]); 73 | } 74 | 75 | /** 76 | * Define whether the icon should be solid or not. 77 | * 78 | * @param bool $solid 79 | * @return $this 80 | */ 81 | public function solid(bool $solid = false) 82 | { 83 | return $this->withMeta(['solid_icon' => $solid]); 84 | } 85 | 86 | /** 87 | * Define the icon values to use for each status. 88 | * 89 | * @deprecated since version 2.1.0. Use icons() instead. 90 | * 91 | * @param array $values 92 | * @return $this 93 | */ 94 | public function values(array $values = null) 95 | { 96 | return $this->withMeta([ 97 | 'values' => $this->iconAliases($values), 98 | 'color' => [ 99 | 'x-circle' => 'red-500', 100 | 'check-circle' => 'green-500', 101 | 'clock' => 'blue-500', 102 | 'info-circle' => 'primary-500', 103 | 'exclamation-circle' => 'blue-700', 104 | 'question-mark-circle' => 'primary-500', 105 | 'minus-circle' => 'grey-500', 106 | ], 107 | ]); 108 | } 109 | 110 | /** 111 | * Get the icon aliases. Used by the deprecated values() method, 112 | * to support backwards compatibility. 113 | * 114 | * @param array $values 115 | * 116 | * @return array 117 | */ 118 | private function iconAliases(array $values) 119 | { 120 | $aliases = [ 121 | 'inactive' => 'x-circle', 122 | 'active' => 'check-circle', 123 | 'pending' => 'clock', 124 | 'info' => 'info-circle', 125 | 'warning' => 'exclamation-circle', 126 | 'help' => 'question-mark-circle', 127 | 'disabled' => 'minus-circle' 128 | ]; 129 | 130 | $newValues = []; 131 | array_walk($values, function (&$value, $key) use ($aliases, &$newValues) { 132 | // replace old keys with new keys 133 | $newValues[$aliases[$key] ?? $key] = $value; 134 | }); 135 | 136 | return $newValues; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /dist/js/field.js: -------------------------------------------------------------------------------- 1 | /******/ (() => { // webpackBootstrap 2 | /******/ "use strict"; 3 | /******/ var __webpack_modules__ = ({ 4 | 5 | /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/DetailField.vue?vue&type=script&lang=js": 6 | /*!*****************************************************************************************************************************************************************************************************!*\ 7 | !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/DetailField.vue?vue&type=script&lang=js ***! 8 | \*****************************************************************************************************************************************************************************************************/ 9 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 10 | 11 | __webpack_require__.r(__webpack_exports__); 12 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 13 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 14 | /* harmony export */ }); 15 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ 16 | props: ['resource', 'resourceName', 'resourceId', 'field'], 17 | methods: { 18 | getValue: function getValue() { 19 | var _this = this; 20 | 21 | if (!this.field.values) return this.field.value; 22 | return Object.keys(this.field.values).filter(function (k) { 23 | return _this.field.values[k]; 24 | })[0]; 25 | }, 26 | getTooltip: function getTooltip() { 27 | if (this.field.tooltip) { 28 | if (typeof this.field.tooltip == "string") return this.field.tooltip;else return this.field.tooltip[this.getValue()]; 29 | } 30 | }, 31 | getInfo: function getInfo() { 32 | if (this.field.info) { 33 | if (typeof this.field.info == "string") return this.field.info;else return this.field.info[this.getValue()]; 34 | } 35 | }, 36 | getColor: function getColor() { 37 | if (this.field.color) { 38 | if (typeof this.field.color == "string") return 'text-' + this.field.color;else return 'text-' + this.field.color[this.getValue()]; 39 | } 40 | } 41 | } 42 | }); 43 | 44 | /***/ }), 45 | 46 | /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/IndexField.vue?vue&type=script&lang=js": 47 | /*!****************************************************************************************************************************************************************************************************!*\ 48 | !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/IndexField.vue?vue&type=script&lang=js ***! 49 | \****************************************************************************************************************************************************************************************************/ 50 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 51 | 52 | __webpack_require__.r(__webpack_exports__); 53 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 54 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 55 | /* harmony export */ }); 56 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ 57 | props: ['resourceName', 'field'], 58 | methods: { 59 | getValue: function getValue() { 60 | var _this = this; 61 | 62 | if (!this.field.values) return this.field.value; 63 | return Object.keys(this.field.values).filter(function (val) { 64 | return _this.field.values[val]; 65 | })[0]; 66 | }, 67 | getTooltip: function getTooltip() { 68 | if (this.field.tooltip) { 69 | if (typeof this.field.tooltip == "string") return this.field.tooltip;else return this.field.tooltip[this.getValue()]; 70 | } 71 | }, 72 | getColor: function getColor() { 73 | if (this.field.color) { 74 | if (typeof this.field.color == "string") return 'text-' + this.field.color;else return 'text-' + this.field.color[this.getValue()]; 75 | } 76 | } 77 | } 78 | }); 79 | 80 | /***/ }), 81 | 82 | /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/DetailField.vue?vue&type=template&id=0224618e": 83 | /*!*********************************************************************************************************************************************************************************************************************************************************************************!*\ 84 | !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/DetailField.vue?vue&type=template&id=0224618e ***! 85 | \*********************************************************************************************************************************************************************************************************************************************************************************/ 86 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 87 | 88 | __webpack_require__.r(__webpack_exports__); 89 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 90 | /* harmony export */ "render": () => (/* binding */ render) 91 | /* harmony export */ }); 92 | /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "vue"); 93 | /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__); 94 | 95 | var _hoisted_1 = { 96 | key: 0, 97 | "class": "field" 98 | }; 99 | var _hoisted_2 = { 100 | key: 1, 101 | "class": "field" 102 | }; 103 | var _hoisted_3 = { 104 | "class": "text-90 ml-2" 105 | }; 106 | function render(_ctx, _cache, $props, $setup, $data, $options) { 107 | var _this = this; 108 | 109 | var _component_Icon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Icon"); 110 | 111 | var _component_popper = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("popper"); 112 | 113 | var _component_PanelItem = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("PanelItem"); 114 | 115 | return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_PanelItem, { 116 | index: _ctx.index, 117 | field: $props.field 118 | }, { 119 | value: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () { 120 | return [!$props.field.info ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_popper, { 121 | hover: "", 122 | placement: "right", 123 | content: $options.getTooltip() 124 | }, { 125 | "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () { 126 | return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Icon, { 127 | solid: _this.field.solid_icon, 128 | type: $options.getValue(), 129 | "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.getColor()) 130 | }, null, 8 131 | /* PROPS */ 132 | , ["solid", "type", "class"])]; 133 | }), 134 | _: 1 135 | /* STABLE */ 136 | 137 | }, 8 138 | /* PROPS */ 139 | , ["content"])])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_2, [$props.field.display_tooltip ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_popper, { 140 | key: 0, 141 | hover: "", 142 | placement: "right", 143 | content: $options.getTooltip() 144 | }, { 145 | "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () { 146 | return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Icon, { 147 | solid: _this.field.solid_icon, 148 | type: $options.getValue(), 149 | "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.getColor()) 150 | }, null, 8 151 | /* PROPS */ 152 | , ["solid", "type", "class"])]; 153 | }), 154 | _: 1 155 | /* STABLE */ 156 | 157 | }, 8 158 | /* PROPS */ 159 | , ["content"])) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_Icon, { 160 | key: 1, 161 | solid: _this.field.solid_icon, 162 | type: $options.getValue(), 163 | "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.getColor()) 164 | }, null, 8 165 | /* PROPS */ 166 | , ["solid", "type", "class"])), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("p", _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.getInfo()), 1 167 | /* TEXT */ 168 | )]))]; 169 | }), 170 | _: 1 171 | /* STABLE */ 172 | 173 | }, 8 174 | /* PROPS */ 175 | , ["index", "field"]); 176 | } 177 | 178 | /***/ }), 179 | 180 | /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/IndexField.vue?vue&type=template&id=9e63f81a": 181 | /*!********************************************************************************************************************************************************************************************************************************************************************************!*\ 182 | !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/IndexField.vue?vue&type=template&id=9e63f81a ***! 183 | \********************************************************************************************************************************************************************************************************************************************************************************/ 184 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 185 | 186 | __webpack_require__.r(__webpack_exports__); 187 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 188 | /* harmony export */ "render": () => (/* binding */ render) 189 | /* harmony export */ }); 190 | /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "vue"); 191 | /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__); 192 | 193 | function render(_ctx, _cache, $props, $setup, $data, $options) { 194 | var _this = this; 195 | 196 | var _component_Icon = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Icon"); 197 | 198 | var _component_popper = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("popper"); 199 | 200 | return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", null, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_popper, { 201 | hover: "", 202 | content: $options.getTooltip() 203 | }, { 204 | "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () { 205 | return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Icon, { 206 | solid: _this.field.solid_icon, 207 | type: $options.getValue(), 208 | "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.getColor()) 209 | }, null, 8 210 | /* PROPS */ 211 | , ["solid", "type", "class"])]; 212 | }), 213 | _: 1 214 | /* STABLE */ 215 | 216 | }, 8 217 | /* PROPS */ 218 | , ["content"])]); 219 | } 220 | 221 | /***/ }), 222 | 223 | /***/ "./resources/js/field.js": 224 | /*!*******************************!*\ 225 | !*** ./resources/js/field.js ***! 226 | \*******************************/ 227 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 228 | 229 | __webpack_require__.r(__webpack_exports__); 230 | /* harmony import */ var _components_IndexField__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/IndexField */ "./resources/js/components/IndexField.vue"); 231 | /* harmony import */ var _components_DetailField__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/DetailField */ "./resources/js/components/DetailField.vue"); 232 | /* harmony import */ var vue3_popper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vue3-popper */ "./node_modules/vue3-popper/dist/popper.esm.js"); 233 | 234 | 235 | 236 | Nova.booting(function (app, store) { 237 | app.component('index-nova-status-field', _components_IndexField__WEBPACK_IMPORTED_MODULE_0__["default"]); 238 | app.component('detail-nova-status-field', _components_DetailField__WEBPACK_IMPORTED_MODULE_1__["default"]); 239 | app.component('popper', vue3_popper__WEBPACK_IMPORTED_MODULE_2__["default"]); 240 | }); 241 | 242 | /***/ }), 243 | 244 | /***/ "./resources/sass/field.scss": 245 | /*!***********************************!*\ 246 | !*** ./resources/sass/field.scss ***! 247 | \***********************************/ 248 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 249 | 250 | __webpack_require__.r(__webpack_exports__); 251 | // extracted by mini-css-extract-plugin 252 | 253 | 254 | /***/ }), 255 | 256 | /***/ "./node_modules/vue-loader/dist/exportHelper.js": 257 | /*!******************************************************!*\ 258 | !*** ./node_modules/vue-loader/dist/exportHelper.js ***! 259 | \******************************************************/ 260 | /***/ ((__unused_webpack_module, exports) => { 261 | 262 | 263 | Object.defineProperty(exports, "__esModule", ({ value: true })); 264 | // runtime helper for setting properties on components 265 | // in a tree-shakable way 266 | exports["default"] = (sfc, props) => { 267 | const target = sfc.__vccOpts || sfc; 268 | for (const [key, val] of props) { 269 | target[key] = val; 270 | } 271 | return target; 272 | }; 273 | 274 | 275 | /***/ }), 276 | 277 | /***/ "./resources/js/components/DetailField.vue": 278 | /*!*************************************************!*\ 279 | !*** ./resources/js/components/DetailField.vue ***! 280 | \*************************************************/ 281 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 282 | 283 | __webpack_require__.r(__webpack_exports__); 284 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 285 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 286 | /* harmony export */ }); 287 | /* harmony import */ var _DetailField_vue_vue_type_template_id_0224618e__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./DetailField.vue?vue&type=template&id=0224618e */ "./resources/js/components/DetailField.vue?vue&type=template&id=0224618e"); 288 | /* harmony import */ var _DetailField_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./DetailField.vue?vue&type=script&lang=js */ "./resources/js/components/DetailField.vue?vue&type=script&lang=js"); 289 | /* harmony import */ var _Users_wesselperik_Documents_Code_Persoonlijk_nova_status_field_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js"); 290 | 291 | 292 | 293 | 294 | ; 295 | const __exports__ = /*#__PURE__*/(0,_Users_wesselperik_Documents_Code_Persoonlijk_nova_status_field_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_DetailField_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_DetailField_vue_vue_type_template_id_0224618e__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/DetailField.vue"]]) 296 | /* hot reload */ 297 | if (false) {} 298 | 299 | 300 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__); 301 | 302 | /***/ }), 303 | 304 | /***/ "./resources/js/components/IndexField.vue": 305 | /*!************************************************!*\ 306 | !*** ./resources/js/components/IndexField.vue ***! 307 | \************************************************/ 308 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 309 | 310 | __webpack_require__.r(__webpack_exports__); 311 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 312 | /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 313 | /* harmony export */ }); 314 | /* harmony import */ var _IndexField_vue_vue_type_template_id_9e63f81a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./IndexField.vue?vue&type=template&id=9e63f81a */ "./resources/js/components/IndexField.vue?vue&type=template&id=9e63f81a"); 315 | /* harmony import */ var _IndexField_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./IndexField.vue?vue&type=script&lang=js */ "./resources/js/components/IndexField.vue?vue&type=script&lang=js"); 316 | /* harmony import */ var _Users_wesselperik_Documents_Code_Persoonlijk_nova_status_field_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js"); 317 | 318 | 319 | 320 | 321 | ; 322 | const __exports__ = /*#__PURE__*/(0,_Users_wesselperik_Documents_Code_Persoonlijk_nova_status_field_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_IndexField_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_IndexField_vue_vue_type_template_id_9e63f81a__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/IndexField.vue"]]) 323 | /* hot reload */ 324 | if (false) {} 325 | 326 | 327 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__); 328 | 329 | /***/ }), 330 | 331 | /***/ "./resources/js/components/DetailField.vue?vue&type=script&lang=js": 332 | /*!*************************************************************************!*\ 333 | !*** ./resources/js/components/DetailField.vue?vue&type=script&lang=js ***! 334 | \*************************************************************************/ 335 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 336 | 337 | __webpack_require__.r(__webpack_exports__); 338 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 339 | /* harmony export */ "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_DetailField_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"]) 340 | /* harmony export */ }); 341 | /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_DetailField_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./DetailField.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/DetailField.vue?vue&type=script&lang=js"); 342 | 343 | 344 | /***/ }), 345 | 346 | /***/ "./resources/js/components/IndexField.vue?vue&type=script&lang=js": 347 | /*!************************************************************************!*\ 348 | !*** ./resources/js/components/IndexField.vue?vue&type=script&lang=js ***! 349 | \************************************************************************/ 350 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 351 | 352 | __webpack_require__.r(__webpack_exports__); 353 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 354 | /* harmony export */ "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_IndexField_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"]) 355 | /* harmony export */ }); 356 | /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_IndexField_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./IndexField.vue?vue&type=script&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/IndexField.vue?vue&type=script&lang=js"); 357 | 358 | 359 | /***/ }), 360 | 361 | /***/ "./resources/js/components/DetailField.vue?vue&type=template&id=0224618e": 362 | /*!*******************************************************************************!*\ 363 | !*** ./resources/js/components/DetailField.vue?vue&type=template&id=0224618e ***! 364 | \*******************************************************************************/ 365 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 366 | 367 | __webpack_require__.r(__webpack_exports__); 368 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 369 | /* harmony export */ "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_DetailField_vue_vue_type_template_id_0224618e__WEBPACK_IMPORTED_MODULE_0__.render) 370 | /* harmony export */ }); 371 | /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_DetailField_vue_vue_type_template_id_0224618e__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./DetailField.vue?vue&type=template&id=0224618e */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/DetailField.vue?vue&type=template&id=0224618e"); 372 | 373 | 374 | /***/ }), 375 | 376 | /***/ "./resources/js/components/IndexField.vue?vue&type=template&id=9e63f81a": 377 | /*!******************************************************************************!*\ 378 | !*** ./resources/js/components/IndexField.vue?vue&type=template&id=9e63f81a ***! 379 | \******************************************************************************/ 380 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 381 | 382 | __webpack_require__.r(__webpack_exports__); 383 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 384 | /* harmony export */ "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_IndexField_vue_vue_type_template_id_9e63f81a__WEBPACK_IMPORTED_MODULE_0__.render) 385 | /* harmony export */ }); 386 | /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_IndexField_vue_vue_type_template_id_9e63f81a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./IndexField.vue?vue&type=template&id=9e63f81a */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/IndexField.vue?vue&type=template&id=9e63f81a"); 387 | 388 | 389 | /***/ }), 390 | 391 | /***/ "./node_modules/vue3-popper/dist/popper.esm.js": 392 | /*!*****************************************************!*\ 393 | !*** ./node_modules/vue3-popper/dist/popper.esm.js ***! 394 | \*****************************************************/ 395 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 396 | 397 | __webpack_require__.r(__webpack_exports__); 398 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { 399 | /* harmony export */ "default": () => (/* binding */ entry_esm) 400 | /* harmony export */ }); 401 | /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "vue"); 402 | /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__); 403 | 404 | 405 | /** 406 | * Returns a function, that, as long as it continues to be invoked, will not 407 | * be triggered. The function will be called after it stops being called for 408 | * N milliseconds. If `immediate` is passed, trigger the function on the 409 | * leading edge, instead of the trailing. The function also has a property 'clear' 410 | * that is a function which will clear the timer to prevent previously scheduled executions. 411 | * 412 | * @source underscore.js 413 | * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/ 414 | * @param {Function} function to wrap 415 | * @param {Number} timeout in ms (`100`) 416 | * @param {Boolean} whether to execute at the beginning (`false`) 417 | * @api public 418 | */ 419 | function debounce$1(func, wait, immediate){ 420 | var timeout, args, context, timestamp, result; 421 | if (null == wait) wait = 100; 422 | 423 | function later() { 424 | var last = Date.now() - timestamp; 425 | 426 | if (last < wait && last >= 0) { 427 | timeout = setTimeout(later, wait - last); 428 | } else { 429 | timeout = null; 430 | if (!immediate) { 431 | result = func.apply(context, args); 432 | context = args = null; 433 | } 434 | } 435 | } 436 | var debounced = function(){ 437 | context = this; 438 | args = arguments; 439 | timestamp = Date.now(); 440 | var callNow = immediate && !timeout; 441 | if (!timeout) timeout = setTimeout(later, wait); 442 | if (callNow) { 443 | result = func.apply(context, args); 444 | context = args = null; 445 | } 446 | 447 | return result; 448 | }; 449 | 450 | debounced.clear = function() { 451 | if (timeout) { 452 | clearTimeout(timeout); 453 | timeout = null; 454 | } 455 | }; 456 | 457 | debounced.flush = function() { 458 | if (timeout) { 459 | result = func.apply(context, args); 460 | context = args = null; 461 | 462 | clearTimeout(timeout); 463 | timeout = null; 464 | } 465 | }; 466 | 467 | return debounced; 468 | } 469 | // Adds compatibility for ES modules 470 | debounce$1.debounce = debounce$1; 471 | 472 | var debounce_1 = debounce$1; 473 | 474 | function useEventListener(target, event, handler) { 475 | if ((0,vue__WEBPACK_IMPORTED_MODULE_0__.isRef)(target)) { 476 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(target, (value, oldValue) => { 477 | oldValue === null || oldValue === void 0 ? void 0 : oldValue.removeEventListener(event, handler); 478 | value === null || value === void 0 ? void 0 : value.addEventListener(event, handler); 479 | }); 480 | } else { 481 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(() => { 482 | target.addEventListener(event, handler); 483 | }); 484 | } 485 | 486 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.onBeforeUnmount)(() => { 487 | var _unref; 488 | 489 | (_unref = (0,vue__WEBPACK_IMPORTED_MODULE_0__.unref)(target)) === null || _unref === void 0 ? void 0 : _unref.removeEventListener(event, handler); 490 | }); 491 | } 492 | 493 | function useClickAway(target, handler) { 494 | const event = "pointerdown"; 495 | 496 | if (typeof window === 'undefined' || !window) { 497 | return; 498 | } 499 | 500 | const listener = event => { 501 | const el = (0,vue__WEBPACK_IMPORTED_MODULE_0__.unref)(target); 502 | 503 | if (!el) { 504 | return; 505 | } 506 | 507 | if (el === event.target || event.composedPath().includes(el)) { 508 | return; 509 | } 510 | 511 | handler(event); 512 | }; 513 | 514 | return useEventListener(window, event, listener); 515 | } 516 | 517 | function useContent(slots, popperNode, content) { 518 | let observer = null; 519 | const hasContent = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(false); 520 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(() => { 521 | if (slots.content !== undefined || content.value) { 522 | hasContent.value = true; 523 | } 524 | 525 | observer = new MutationObserver(checkContent); 526 | observer.observe(popperNode.value, { 527 | childList: true, 528 | subtree: true 529 | }); 530 | }); 531 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.onBeforeUnmount)(() => observer.disconnect()); 532 | /** 533 | * Watch the content prop 534 | */ 535 | 536 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(content, content => { 537 | if (content) { 538 | hasContent.value = true; 539 | } else { 540 | hasContent.value = false; 541 | } 542 | }); 543 | /** 544 | * Check the content slot 545 | */ 546 | 547 | const checkContent = () => { 548 | if (slots.content) { 549 | hasContent.value = true; 550 | } else { 551 | hasContent.value = false; 552 | } 553 | }; 554 | 555 | return { 556 | hasContent 557 | }; 558 | } 559 | 560 | // import { isHTMLElement } from './instanceOf'; 561 | function getBoundingClientRect(element, // eslint-disable-next-line unused-imports/no-unused-vars 562 | includeScale) { 563 | 564 | var rect = element.getBoundingClientRect(); 565 | var scaleX = 1; 566 | var scaleY = 1; // FIXME: 567 | // `offsetWidth` returns an integer while `getBoundingClientRect` 568 | // returns a float. This results in `scaleX` or `scaleY` being 569 | // non-1 when it should be for elements that aren't a full pixel in 570 | // width or height. 571 | // if (isHTMLElement(element) && includeScale) { 572 | // const offsetHeight = element.offsetHeight; 573 | // const offsetWidth = element.offsetWidth; 574 | // // Do not attempt to divide by 0, otherwise we get `Infinity` as scale 575 | // // Fallback to 1 in case both values are `0` 576 | // if (offsetWidth > 0) { 577 | // scaleX = rect.width / offsetWidth || 1; 578 | // } 579 | // if (offsetHeight > 0) { 580 | // scaleY = rect.height / offsetHeight || 1; 581 | // } 582 | // } 583 | 584 | return { 585 | width: rect.width / scaleX, 586 | height: rect.height / scaleY, 587 | top: rect.top / scaleY, 588 | right: rect.right / scaleX, 589 | bottom: rect.bottom / scaleY, 590 | left: rect.left / scaleX, 591 | x: rect.left / scaleX, 592 | y: rect.top / scaleY 593 | }; 594 | } 595 | 596 | function getWindow(node) { 597 | if (node == null) { 598 | return window; 599 | } 600 | 601 | if (node.toString() !== '[object Window]') { 602 | var ownerDocument = node.ownerDocument; 603 | return ownerDocument ? ownerDocument.defaultView || window : window; 604 | } 605 | 606 | return node; 607 | } 608 | 609 | function getWindowScroll(node) { 610 | var win = getWindow(node); 611 | var scrollLeft = win.pageXOffset; 612 | var scrollTop = win.pageYOffset; 613 | return { 614 | scrollLeft: scrollLeft, 615 | scrollTop: scrollTop 616 | }; 617 | } 618 | 619 | function isElement(node) { 620 | var OwnElement = getWindow(node).Element; 621 | return node instanceof OwnElement || node instanceof Element; 622 | } 623 | 624 | function isHTMLElement(node) { 625 | var OwnElement = getWindow(node).HTMLElement; 626 | return node instanceof OwnElement || node instanceof HTMLElement; 627 | } 628 | 629 | function isShadowRoot(node) { 630 | // IE 11 has no ShadowRoot 631 | if (typeof ShadowRoot === 'undefined') { 632 | return false; 633 | } 634 | 635 | var OwnElement = getWindow(node).ShadowRoot; 636 | return node instanceof OwnElement || node instanceof ShadowRoot; 637 | } 638 | 639 | function getHTMLElementScroll(element) { 640 | return { 641 | scrollLeft: element.scrollLeft, 642 | scrollTop: element.scrollTop 643 | }; 644 | } 645 | 646 | function getNodeScroll(node) { 647 | if (node === getWindow(node) || !isHTMLElement(node)) { 648 | return getWindowScroll(node); 649 | } else { 650 | return getHTMLElementScroll(node); 651 | } 652 | } 653 | 654 | function getNodeName(element) { 655 | return element ? (element.nodeName || '').toLowerCase() : null; 656 | } 657 | 658 | function getDocumentElement(element) { 659 | // $FlowFixMe[incompatible-return]: assume body is always available 660 | return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing] 661 | element.document) || window.document).documentElement; 662 | } 663 | 664 | function getWindowScrollBarX(element) { 665 | // If has a CSS width greater than the viewport, then this will be 666 | // incorrect for RTL. 667 | // Popper 1 is broken in this case and never had a bug report so let's assume 668 | // it's not an issue. I don't think anyone ever specifies width on 669 | // anyway. 670 | // Browsers where the left scrollbar doesn't cause an issue report `0` for 671 | // this (e.g. Edge 2019, IE11, Safari) 672 | return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft; 673 | } 674 | 675 | function getComputedStyle(element) { 676 | return getWindow(element).getComputedStyle(element); 677 | } 678 | 679 | function isScrollParent(element) { 680 | // Firefox wants us to check `-x` and `-y` variations as well 681 | var _getComputedStyle = getComputedStyle(element), 682 | overflow = _getComputedStyle.overflow, 683 | overflowX = _getComputedStyle.overflowX, 684 | overflowY = _getComputedStyle.overflowY; 685 | 686 | return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); 687 | } 688 | 689 | function isElementScaled(element) { 690 | var rect = element.getBoundingClientRect(); 691 | var scaleX = rect.width / element.offsetWidth || 1; 692 | var scaleY = rect.height / element.offsetHeight || 1; 693 | return scaleX !== 1 || scaleY !== 1; 694 | } // Returns the composite rect of an element relative to its offsetParent. 695 | // Composite means it takes into account transforms as well as layout. 696 | 697 | 698 | function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { 699 | if (isFixed === void 0) { 700 | isFixed = false; 701 | } 702 | 703 | var isOffsetParentAnElement = isHTMLElement(offsetParent); 704 | isHTMLElement(offsetParent) && isElementScaled(offsetParent); 705 | var documentElement = getDocumentElement(offsetParent); 706 | var rect = getBoundingClientRect(elementOrVirtualElement); 707 | var scroll = { 708 | scrollLeft: 0, 709 | scrollTop: 0 710 | }; 711 | var offsets = { 712 | x: 0, 713 | y: 0 714 | }; 715 | 716 | if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { 717 | if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078 718 | isScrollParent(documentElement)) { 719 | scroll = getNodeScroll(offsetParent); 720 | } 721 | 722 | if (isHTMLElement(offsetParent)) { 723 | offsets = getBoundingClientRect(offsetParent); 724 | offsets.x += offsetParent.clientLeft; 725 | offsets.y += offsetParent.clientTop; 726 | } else if (documentElement) { 727 | offsets.x = getWindowScrollBarX(documentElement); 728 | } 729 | } 730 | 731 | return { 732 | x: rect.left + scroll.scrollLeft - offsets.x, 733 | y: rect.top + scroll.scrollTop - offsets.y, 734 | width: rect.width, 735 | height: rect.height 736 | }; 737 | } 738 | 739 | // means it doesn't take into account transforms. 740 | 741 | function getLayoutRect(element) { 742 | var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed. 743 | // Fixes https://github.com/popperjs/popper-core/issues/1223 744 | 745 | var width = element.offsetWidth; 746 | var height = element.offsetHeight; 747 | 748 | if (Math.abs(clientRect.width - width) <= 1) { 749 | width = clientRect.width; 750 | } 751 | 752 | if (Math.abs(clientRect.height - height) <= 1) { 753 | height = clientRect.height; 754 | } 755 | 756 | return { 757 | x: element.offsetLeft, 758 | y: element.offsetTop, 759 | width: width, 760 | height: height 761 | }; 762 | } 763 | 764 | function getParentNode(element) { 765 | if (getNodeName(element) === 'html') { 766 | return element; 767 | } 768 | 769 | return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle 770 | // $FlowFixMe[incompatible-return] 771 | // $FlowFixMe[prop-missing] 772 | element.assignedSlot || // step into the shadow DOM of the parent of a slotted node 773 | element.parentNode || ( // DOM Element detected 774 | isShadowRoot(element) ? element.host : null) || // ShadowRoot detected 775 | // $FlowFixMe[incompatible-call]: HTMLElement is a Node 776 | getDocumentElement(element) // fallback 777 | 778 | ); 779 | } 780 | 781 | function getScrollParent(node) { 782 | if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) { 783 | // $FlowFixMe[incompatible-return]: assume body is always available 784 | return node.ownerDocument.body; 785 | } 786 | 787 | if (isHTMLElement(node) && isScrollParent(node)) { 788 | return node; 789 | } 790 | 791 | return getScrollParent(getParentNode(node)); 792 | } 793 | 794 | /* 795 | given a DOM element, return the list of all scroll parents, up the list of ancesors 796 | until we get to the top window object. This list is what we attach scroll listeners 797 | to, because if any of these parent elements scroll, we'll need to re-calculate the 798 | reference element's position. 799 | */ 800 | 801 | function listScrollParents(element, list) { 802 | var _element$ownerDocumen; 803 | 804 | if (list === void 0) { 805 | list = []; 806 | } 807 | 808 | var scrollParent = getScrollParent(element); 809 | var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body); 810 | var win = getWindow(scrollParent); 811 | var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent; 812 | var updatedList = list.concat(target); 813 | return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here 814 | updatedList.concat(listScrollParents(getParentNode(target))); 815 | } 816 | 817 | function isTableElement(element) { 818 | return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0; 819 | } 820 | 821 | function getTrueOffsetParent(element) { 822 | if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837 823 | getComputedStyle(element).position === 'fixed') { 824 | return null; 825 | } 826 | 827 | return element.offsetParent; 828 | } // `.offsetParent` reports `null` for fixed elements, while absolute elements 829 | // return the containing block 830 | 831 | 832 | function getContainingBlock(element) { 833 | var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1; 834 | var isIE = navigator.userAgent.indexOf('Trident') !== -1; 835 | 836 | if (isIE && isHTMLElement(element)) { 837 | // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport 838 | var elementCss = getComputedStyle(element); 839 | 840 | if (elementCss.position === 'fixed') { 841 | return null; 842 | } 843 | } 844 | 845 | var currentNode = getParentNode(element); 846 | 847 | while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) { 848 | var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that 849 | // create a containing block. 850 | // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block 851 | 852 | if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') { 853 | return currentNode; 854 | } else { 855 | currentNode = currentNode.parentNode; 856 | } 857 | } 858 | 859 | return null; 860 | } // Gets the closest ancestor positioned element. Handles some edge cases, 861 | // such as table ancestors and cross browser bugs. 862 | 863 | 864 | function getOffsetParent(element) { 865 | var window = getWindow(element); 866 | var offsetParent = getTrueOffsetParent(element); 867 | 868 | while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') { 869 | offsetParent = getTrueOffsetParent(offsetParent); 870 | } 871 | 872 | if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) { 873 | return window; 874 | } 875 | 876 | return offsetParent || getContainingBlock(element) || window; 877 | } 878 | 879 | var top = 'top'; 880 | var bottom = 'bottom'; 881 | var right = 'right'; 882 | var left = 'left'; 883 | var auto = 'auto'; 884 | var basePlacements = [top, bottom, right, left]; 885 | var start = 'start'; 886 | var end = 'end'; 887 | var clippingParents = 'clippingParents'; 888 | var viewport = 'viewport'; 889 | var popper = 'popper'; 890 | var reference = 'reference'; 891 | var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) { 892 | return acc.concat([placement + "-" + start, placement + "-" + end]); 893 | }, []); 894 | var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) { 895 | return acc.concat([placement, placement + "-" + start, placement + "-" + end]); 896 | }, []); // modifiers that need to read the DOM 897 | 898 | var beforeRead = 'beforeRead'; 899 | var read = 'read'; 900 | var afterRead = 'afterRead'; // pure-logic modifiers 901 | 902 | var beforeMain = 'beforeMain'; 903 | var main = 'main'; 904 | var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state) 905 | 906 | var beforeWrite = 'beforeWrite'; 907 | var write = 'write'; 908 | var afterWrite = 'afterWrite'; 909 | var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite]; 910 | 911 | function order(modifiers) { 912 | var map = new Map(); 913 | var visited = new Set(); 914 | var result = []; 915 | modifiers.forEach(function (modifier) { 916 | map.set(modifier.name, modifier); 917 | }); // On visiting object, check for its dependencies and visit them recursively 918 | 919 | function sort(modifier) { 920 | visited.add(modifier.name); 921 | var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []); 922 | requires.forEach(function (dep) { 923 | if (!visited.has(dep)) { 924 | var depModifier = map.get(dep); 925 | 926 | if (depModifier) { 927 | sort(depModifier); 928 | } 929 | } 930 | }); 931 | result.push(modifier); 932 | } 933 | 934 | modifiers.forEach(function (modifier) { 935 | if (!visited.has(modifier.name)) { 936 | // check for visited object 937 | sort(modifier); 938 | } 939 | }); 940 | return result; 941 | } 942 | 943 | function orderModifiers(modifiers) { 944 | // order based on dependencies 945 | var orderedModifiers = order(modifiers); // order based on phase 946 | 947 | return modifierPhases.reduce(function (acc, phase) { 948 | return acc.concat(orderedModifiers.filter(function (modifier) { 949 | return modifier.phase === phase; 950 | })); 951 | }, []); 952 | } 953 | 954 | function debounce(fn) { 955 | var pending; 956 | return function () { 957 | if (!pending) { 958 | pending = new Promise(function (resolve) { 959 | Promise.resolve().then(function () { 960 | pending = undefined; 961 | resolve(fn()); 962 | }); 963 | }); 964 | } 965 | 966 | return pending; 967 | }; 968 | } 969 | 970 | function getBasePlacement(placement) { 971 | return placement.split('-')[0]; 972 | } 973 | 974 | function mergeByName(modifiers) { 975 | var merged = modifiers.reduce(function (merged, current) { 976 | var existing = merged[current.name]; 977 | merged[current.name] = existing ? Object.assign({}, existing, current, { 978 | options: Object.assign({}, existing.options, current.options), 979 | data: Object.assign({}, existing.data, current.data) 980 | }) : current; 981 | return merged; 982 | }, {}); // IE11 does not support Object.values 983 | 984 | return Object.keys(merged).map(function (key) { 985 | return merged[key]; 986 | }); 987 | } 988 | 989 | function getViewportRect(element) { 990 | var win = getWindow(element); 991 | var html = getDocumentElement(element); 992 | var visualViewport = win.visualViewport; 993 | var width = html.clientWidth; 994 | var height = html.clientHeight; 995 | var x = 0; 996 | var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper 997 | // can be obscured underneath it. 998 | // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even 999 | // if it isn't open, so if this isn't available, the popper will be detected 1000 | // to overflow the bottom of the screen too early. 1001 | 1002 | if (visualViewport) { 1003 | width = visualViewport.width; 1004 | height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently) 1005 | // In Chrome, it returns a value very close to 0 (+/-) but contains rounding 1006 | // errors due to floating point numbers, so we need to check precision. 1007 | // Safari returns a number <= 0, usually < -1 when pinch-zoomed 1008 | // Feature detection fails in mobile emulation mode in Chrome. 1009 | // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) < 1010 | // 0.001 1011 | // Fallback here: "Not Safari" userAgent 1012 | 1013 | if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { 1014 | x = visualViewport.offsetLeft; 1015 | y = visualViewport.offsetTop; 1016 | } 1017 | } 1018 | 1019 | return { 1020 | width: width, 1021 | height: height, 1022 | x: x + getWindowScrollBarX(element), 1023 | y: y 1024 | }; 1025 | } 1026 | 1027 | var max = Math.max; 1028 | var min = Math.min; 1029 | var round = Math.round; 1030 | 1031 | // of the `` and `` rect bounds if horizontally scrollable 1032 | 1033 | function getDocumentRect(element) { 1034 | var _element$ownerDocumen; 1035 | 1036 | var html = getDocumentElement(element); 1037 | var winScroll = getWindowScroll(element); 1038 | var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; 1039 | var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); 1040 | var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); 1041 | var x = -winScroll.scrollLeft + getWindowScrollBarX(element); 1042 | var y = -winScroll.scrollTop; 1043 | 1044 | if (getComputedStyle(body || html).direction === 'rtl') { 1045 | x += max(html.clientWidth, body ? body.clientWidth : 0) - width; 1046 | } 1047 | 1048 | return { 1049 | width: width, 1050 | height: height, 1051 | x: x, 1052 | y: y 1053 | }; 1054 | } 1055 | 1056 | function contains(parent, child) { 1057 | var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method 1058 | 1059 | if (parent.contains(child)) { 1060 | return true; 1061 | } // then fallback to custom implementation with Shadow DOM support 1062 | else if (rootNode && isShadowRoot(rootNode)) { 1063 | var next = child; 1064 | 1065 | do { 1066 | if (next && parent.isSameNode(next)) { 1067 | return true; 1068 | } // $FlowFixMe[prop-missing]: need a better way to handle this... 1069 | 1070 | 1071 | next = next.parentNode || next.host; 1072 | } while (next); 1073 | } // Give up, the result is false 1074 | 1075 | 1076 | return false; 1077 | } 1078 | 1079 | function rectToClientRect(rect) { 1080 | return Object.assign({}, rect, { 1081 | left: rect.x, 1082 | top: rect.y, 1083 | right: rect.x + rect.width, 1084 | bottom: rect.y + rect.height 1085 | }); 1086 | } 1087 | 1088 | function getInnerBoundingClientRect(element) { 1089 | var rect = getBoundingClientRect(element); 1090 | rect.top = rect.top + element.clientTop; 1091 | rect.left = rect.left + element.clientLeft; 1092 | rect.bottom = rect.top + element.clientHeight; 1093 | rect.right = rect.left + element.clientWidth; 1094 | rect.width = element.clientWidth; 1095 | rect.height = element.clientHeight; 1096 | rect.x = rect.left; 1097 | rect.y = rect.top; 1098 | return rect; 1099 | } 1100 | 1101 | function getClientRectFromMixedType(element, clippingParent) { 1102 | return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element))); 1103 | } // A "clipping parent" is an overflowable container with the characteristic of 1104 | // clipping (or hiding) overflowing elements with a position different from 1105 | // `initial` 1106 | 1107 | 1108 | function getClippingParents(element) { 1109 | var clippingParents = listScrollParents(getParentNode(element)); 1110 | var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0; 1111 | var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element; 1112 | 1113 | if (!isElement(clipperElement)) { 1114 | return []; 1115 | } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414 1116 | 1117 | 1118 | return clippingParents.filter(function (clippingParent) { 1119 | return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body'; 1120 | }); 1121 | } // Gets the maximum area that the element is visible in due to any number of 1122 | // clipping parents 1123 | 1124 | 1125 | function getClippingRect(element, boundary, rootBoundary) { 1126 | var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); 1127 | var clippingParents = [].concat(mainClippingParents, [rootBoundary]); 1128 | var firstClippingParent = clippingParents[0]; 1129 | var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { 1130 | var rect = getClientRectFromMixedType(element, clippingParent); 1131 | accRect.top = max(rect.top, accRect.top); 1132 | accRect.right = min(rect.right, accRect.right); 1133 | accRect.bottom = min(rect.bottom, accRect.bottom); 1134 | accRect.left = max(rect.left, accRect.left); 1135 | return accRect; 1136 | }, getClientRectFromMixedType(element, firstClippingParent)); 1137 | clippingRect.width = clippingRect.right - clippingRect.left; 1138 | clippingRect.height = clippingRect.bottom - clippingRect.top; 1139 | clippingRect.x = clippingRect.left; 1140 | clippingRect.y = clippingRect.top; 1141 | return clippingRect; 1142 | } 1143 | 1144 | function getVariation(placement) { 1145 | return placement.split('-')[1]; 1146 | } 1147 | 1148 | function getMainAxisFromPlacement(placement) { 1149 | return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y'; 1150 | } 1151 | 1152 | function computeOffsets(_ref) { 1153 | var reference = _ref.reference, 1154 | element = _ref.element, 1155 | placement = _ref.placement; 1156 | var basePlacement = placement ? getBasePlacement(placement) : null; 1157 | var variation = placement ? getVariation(placement) : null; 1158 | var commonX = reference.x + reference.width / 2 - element.width / 2; 1159 | var commonY = reference.y + reference.height / 2 - element.height / 2; 1160 | var offsets; 1161 | 1162 | switch (basePlacement) { 1163 | case top: 1164 | offsets = { 1165 | x: commonX, 1166 | y: reference.y - element.height 1167 | }; 1168 | break; 1169 | 1170 | case bottom: 1171 | offsets = { 1172 | x: commonX, 1173 | y: reference.y + reference.height 1174 | }; 1175 | break; 1176 | 1177 | case right: 1178 | offsets = { 1179 | x: reference.x + reference.width, 1180 | y: commonY 1181 | }; 1182 | break; 1183 | 1184 | case left: 1185 | offsets = { 1186 | x: reference.x - element.width, 1187 | y: commonY 1188 | }; 1189 | break; 1190 | 1191 | default: 1192 | offsets = { 1193 | x: reference.x, 1194 | y: reference.y 1195 | }; 1196 | } 1197 | 1198 | var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null; 1199 | 1200 | if (mainAxis != null) { 1201 | var len = mainAxis === 'y' ? 'height' : 'width'; 1202 | 1203 | switch (variation) { 1204 | case start: 1205 | offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2); 1206 | break; 1207 | 1208 | case end: 1209 | offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2); 1210 | break; 1211 | } 1212 | } 1213 | 1214 | return offsets; 1215 | } 1216 | 1217 | function getFreshSideObject() { 1218 | return { 1219 | top: 0, 1220 | right: 0, 1221 | bottom: 0, 1222 | left: 0 1223 | }; 1224 | } 1225 | 1226 | function mergePaddingObject(paddingObject) { 1227 | return Object.assign({}, getFreshSideObject(), paddingObject); 1228 | } 1229 | 1230 | function expandToHashMap(value, keys) { 1231 | return keys.reduce(function (hashMap, key) { 1232 | hashMap[key] = value; 1233 | return hashMap; 1234 | }, {}); 1235 | } 1236 | 1237 | function detectOverflow(state, options) { 1238 | if (options === void 0) { 1239 | options = {}; 1240 | } 1241 | 1242 | var _options = options, 1243 | _options$placement = _options.placement, 1244 | placement = _options$placement === void 0 ? state.placement : _options$placement, 1245 | _options$boundary = _options.boundary, 1246 | boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, 1247 | _options$rootBoundary = _options.rootBoundary, 1248 | rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, 1249 | _options$elementConte = _options.elementContext, 1250 | elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, 1251 | _options$altBoundary = _options.altBoundary, 1252 | altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, 1253 | _options$padding = _options.padding, 1254 | padding = _options$padding === void 0 ? 0 : _options$padding; 1255 | var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); 1256 | var altContext = elementContext === popper ? reference : popper; 1257 | var popperRect = state.rects.popper; 1258 | var element = state.elements[altBoundary ? altContext : elementContext]; 1259 | var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary); 1260 | var referenceClientRect = getBoundingClientRect(state.elements.reference); 1261 | var popperOffsets = computeOffsets({ 1262 | reference: referenceClientRect, 1263 | element: popperRect, 1264 | strategy: 'absolute', 1265 | placement: placement 1266 | }); 1267 | var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets)); 1268 | var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect 1269 | // 0 or negative = within the clipping rect 1270 | 1271 | var overflowOffsets = { 1272 | top: clippingClientRect.top - elementClientRect.top + paddingObject.top, 1273 | bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom, 1274 | left: clippingClientRect.left - elementClientRect.left + paddingObject.left, 1275 | right: elementClientRect.right - clippingClientRect.right + paddingObject.right 1276 | }; 1277 | var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element 1278 | 1279 | if (elementContext === popper && offsetData) { 1280 | var offset = offsetData[placement]; 1281 | Object.keys(overflowOffsets).forEach(function (key) { 1282 | var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1; 1283 | var axis = [top, bottom].indexOf(key) >= 0 ? 'y' : 'x'; 1284 | overflowOffsets[key] += offset[axis] * multiply; 1285 | }); 1286 | } 1287 | 1288 | return overflowOffsets; 1289 | } 1290 | 1291 | var DEFAULT_OPTIONS = { 1292 | placement: 'bottom', 1293 | modifiers: [], 1294 | strategy: 'absolute' 1295 | }; 1296 | 1297 | function areValidElements() { 1298 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 1299 | args[_key] = arguments[_key]; 1300 | } 1301 | 1302 | return !args.some(function (element) { 1303 | return !(element && typeof element.getBoundingClientRect === 'function'); 1304 | }); 1305 | } 1306 | 1307 | function popperGenerator(generatorOptions) { 1308 | if (generatorOptions === void 0) { 1309 | generatorOptions = {}; 1310 | } 1311 | 1312 | var _generatorOptions = generatorOptions, 1313 | _generatorOptions$def = _generatorOptions.defaultModifiers, 1314 | defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def, 1315 | _generatorOptions$def2 = _generatorOptions.defaultOptions, 1316 | defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2; 1317 | return function createPopper(reference, popper, options) { 1318 | if (options === void 0) { 1319 | options = defaultOptions; 1320 | } 1321 | 1322 | var state = { 1323 | placement: 'bottom', 1324 | orderedModifiers: [], 1325 | options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions), 1326 | modifiersData: {}, 1327 | elements: { 1328 | reference: reference, 1329 | popper: popper 1330 | }, 1331 | attributes: {}, 1332 | styles: {} 1333 | }; 1334 | var effectCleanupFns = []; 1335 | var isDestroyed = false; 1336 | var instance = { 1337 | state: state, 1338 | setOptions: function setOptions(setOptionsAction) { 1339 | var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction; 1340 | cleanupModifierEffects(); 1341 | state.options = Object.assign({}, defaultOptions, state.options, options); 1342 | state.scrollParents = { 1343 | reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [], 1344 | popper: listScrollParents(popper) 1345 | }; // Orders the modifiers based on their dependencies and `phase` 1346 | // properties 1347 | 1348 | var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers 1349 | 1350 | state.orderedModifiers = orderedModifiers.filter(function (m) { 1351 | return m.enabled; 1352 | }); // Validate the provided modifiers so that the consumer will get warned 1353 | 1354 | runModifierEffects(); 1355 | return instance.update(); 1356 | }, 1357 | // Sync update – it will always be executed, even if not necessary. This 1358 | // is useful for low frequency updates where sync behavior simplifies the 1359 | // logic. 1360 | // For high frequency updates (e.g. `resize` and `scroll` events), always 1361 | // prefer the async Popper#update method 1362 | forceUpdate: function forceUpdate() { 1363 | if (isDestroyed) { 1364 | return; 1365 | } 1366 | 1367 | var _state$elements = state.elements, 1368 | reference = _state$elements.reference, 1369 | popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements 1370 | // anymore 1371 | 1372 | if (!areValidElements(reference, popper)) { 1373 | 1374 | return; 1375 | } // Store the reference and popper rects to be read by modifiers 1376 | 1377 | 1378 | state.rects = { 1379 | reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'), 1380 | popper: getLayoutRect(popper) 1381 | }; // Modifiers have the ability to reset the current update cycle. The 1382 | // most common use case for this is the `flip` modifier changing the 1383 | // placement, which then needs to re-run all the modifiers, because the 1384 | // logic was previously ran for the previous placement and is therefore 1385 | // stale/incorrect 1386 | 1387 | state.reset = false; 1388 | state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier 1389 | // is filled with the initial data specified by the modifier. This means 1390 | // it doesn't persist and is fresh on each update. 1391 | // To ensure persistent data, use `${name}#persistent` 1392 | 1393 | state.orderedModifiers.forEach(function (modifier) { 1394 | return state.modifiersData[modifier.name] = Object.assign({}, modifier.data); 1395 | }); 1396 | 1397 | for (var index = 0; index < state.orderedModifiers.length; index++) { 1398 | 1399 | if (state.reset === true) { 1400 | state.reset = false; 1401 | index = -1; 1402 | continue; 1403 | } 1404 | 1405 | var _state$orderedModifie = state.orderedModifiers[index], 1406 | fn = _state$orderedModifie.fn, 1407 | _state$orderedModifie2 = _state$orderedModifie.options, 1408 | _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, 1409 | name = _state$orderedModifie.name; 1410 | 1411 | if (typeof fn === 'function') { 1412 | state = fn({ 1413 | state: state, 1414 | options: _options, 1415 | name: name, 1416 | instance: instance 1417 | }) || state; 1418 | } 1419 | } 1420 | }, 1421 | // Async and optimistically optimized update – it will not be executed if 1422 | // not necessary (debounced to run at most once-per-tick) 1423 | update: debounce(function () { 1424 | return new Promise(function (resolve) { 1425 | instance.forceUpdate(); 1426 | resolve(state); 1427 | }); 1428 | }), 1429 | destroy: function destroy() { 1430 | cleanupModifierEffects(); 1431 | isDestroyed = true; 1432 | } 1433 | }; 1434 | 1435 | if (!areValidElements(reference, popper)) { 1436 | 1437 | return instance; 1438 | } 1439 | 1440 | instance.setOptions(options).then(function (state) { 1441 | if (!isDestroyed && options.onFirstUpdate) { 1442 | options.onFirstUpdate(state); 1443 | } 1444 | }); // Modifiers have the ability to execute arbitrary code before the first 1445 | // update cycle runs. They will be executed in the same order as the update 1446 | // cycle. This is useful when a modifier adds some persistent data that 1447 | // other modifiers need to use, but the modifier is run after the dependent 1448 | // one. 1449 | 1450 | function runModifierEffects() { 1451 | state.orderedModifiers.forEach(function (_ref3) { 1452 | var name = _ref3.name, 1453 | _ref3$options = _ref3.options, 1454 | options = _ref3$options === void 0 ? {} : _ref3$options, 1455 | effect = _ref3.effect; 1456 | 1457 | if (typeof effect === 'function') { 1458 | var cleanupFn = effect({ 1459 | state: state, 1460 | name: name, 1461 | instance: instance, 1462 | options: options 1463 | }); 1464 | 1465 | var noopFn = function noopFn() {}; 1466 | 1467 | effectCleanupFns.push(cleanupFn || noopFn); 1468 | } 1469 | }); 1470 | } 1471 | 1472 | function cleanupModifierEffects() { 1473 | effectCleanupFns.forEach(function (fn) { 1474 | return fn(); 1475 | }); 1476 | effectCleanupFns = []; 1477 | } 1478 | 1479 | return instance; 1480 | }; 1481 | } 1482 | 1483 | var passive = { 1484 | passive: true 1485 | }; 1486 | 1487 | function effect$2(_ref) { 1488 | var state = _ref.state, 1489 | instance = _ref.instance, 1490 | options = _ref.options; 1491 | var _options$scroll = options.scroll, 1492 | scroll = _options$scroll === void 0 ? true : _options$scroll, 1493 | _options$resize = options.resize, 1494 | resize = _options$resize === void 0 ? true : _options$resize; 1495 | var window = getWindow(state.elements.popper); 1496 | var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper); 1497 | 1498 | if (scroll) { 1499 | scrollParents.forEach(function (scrollParent) { 1500 | scrollParent.addEventListener('scroll', instance.update, passive); 1501 | }); 1502 | } 1503 | 1504 | if (resize) { 1505 | window.addEventListener('resize', instance.update, passive); 1506 | } 1507 | 1508 | return function () { 1509 | if (scroll) { 1510 | scrollParents.forEach(function (scrollParent) { 1511 | scrollParent.removeEventListener('scroll', instance.update, passive); 1512 | }); 1513 | } 1514 | 1515 | if (resize) { 1516 | window.removeEventListener('resize', instance.update, passive); 1517 | } 1518 | }; 1519 | } // eslint-disable-next-line import/no-unused-modules 1520 | 1521 | 1522 | var eventListeners = { 1523 | name: 'eventListeners', 1524 | enabled: true, 1525 | phase: 'write', 1526 | fn: function fn() {}, 1527 | effect: effect$2, 1528 | data: {} 1529 | }; 1530 | 1531 | function popperOffsets(_ref) { 1532 | var state = _ref.state, 1533 | name = _ref.name; 1534 | // Offsets are the actual position the popper needs to have to be 1535 | // properly positioned near its reference element 1536 | // This is the most basic placement, and will be adjusted by 1537 | // the modifiers in the next step 1538 | state.modifiersData[name] = computeOffsets({ 1539 | reference: state.rects.reference, 1540 | element: state.rects.popper, 1541 | strategy: 'absolute', 1542 | placement: state.placement 1543 | }); 1544 | } // eslint-disable-next-line import/no-unused-modules 1545 | 1546 | 1547 | var popperOffsets$1 = { 1548 | name: 'popperOffsets', 1549 | enabled: true, 1550 | phase: 'read', 1551 | fn: popperOffsets, 1552 | data: {} 1553 | }; 1554 | 1555 | var unsetSides = { 1556 | top: 'auto', 1557 | right: 'auto', 1558 | bottom: 'auto', 1559 | left: 'auto' 1560 | }; // Round the offsets to the nearest suitable subpixel based on the DPR. 1561 | // Zooming can change the DPR, but it seems to report a value that will 1562 | // cleanly divide the values into the appropriate subpixels. 1563 | 1564 | function roundOffsetsByDPR(_ref) { 1565 | var x = _ref.x, 1566 | y = _ref.y; 1567 | var win = window; 1568 | var dpr = win.devicePixelRatio || 1; 1569 | return { 1570 | x: round(round(x * dpr) / dpr) || 0, 1571 | y: round(round(y * dpr) / dpr) || 0 1572 | }; 1573 | } 1574 | 1575 | function mapToStyles(_ref2) { 1576 | var _Object$assign2; 1577 | 1578 | var popper = _ref2.popper, 1579 | popperRect = _ref2.popperRect, 1580 | placement = _ref2.placement, 1581 | variation = _ref2.variation, 1582 | offsets = _ref2.offsets, 1583 | position = _ref2.position, 1584 | gpuAcceleration = _ref2.gpuAcceleration, 1585 | adaptive = _ref2.adaptive, 1586 | roundOffsets = _ref2.roundOffsets; 1587 | 1588 | var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets, 1589 | _ref3$x = _ref3.x, 1590 | x = _ref3$x === void 0 ? 0 : _ref3$x, 1591 | _ref3$y = _ref3.y, 1592 | y = _ref3$y === void 0 ? 0 : _ref3$y; 1593 | 1594 | var hasX = offsets.hasOwnProperty('x'); 1595 | var hasY = offsets.hasOwnProperty('y'); 1596 | var sideX = left; 1597 | var sideY = top; 1598 | var win = window; 1599 | 1600 | if (adaptive) { 1601 | var offsetParent = getOffsetParent(popper); 1602 | var heightProp = 'clientHeight'; 1603 | var widthProp = 'clientWidth'; 1604 | 1605 | if (offsetParent === getWindow(popper)) { 1606 | offsetParent = getDocumentElement(popper); 1607 | 1608 | if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') { 1609 | heightProp = 'scrollHeight'; 1610 | widthProp = 'scrollWidth'; 1611 | } 1612 | } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it 1613 | 1614 | 1615 | offsetParent = offsetParent; 1616 | 1617 | if (placement === top || (placement === left || placement === right) && variation === end) { 1618 | sideY = bottom; // $FlowFixMe[prop-missing] 1619 | 1620 | y -= offsetParent[heightProp] - popperRect.height; 1621 | y *= gpuAcceleration ? 1 : -1; 1622 | } 1623 | 1624 | if (placement === left || (placement === top || placement === bottom) && variation === end) { 1625 | sideX = right; // $FlowFixMe[prop-missing] 1626 | 1627 | x -= offsetParent[widthProp] - popperRect.width; 1628 | x *= gpuAcceleration ? 1 : -1; 1629 | } 1630 | } 1631 | 1632 | var commonStyles = Object.assign({ 1633 | position: position 1634 | }, adaptive && unsetSides); 1635 | 1636 | if (gpuAcceleration) { 1637 | var _Object$assign; 1638 | 1639 | return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign)); 1640 | } 1641 | 1642 | return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); 1643 | } 1644 | 1645 | function computeStyles(_ref4) { 1646 | var state = _ref4.state, 1647 | options = _ref4.options; 1648 | var _options$gpuAccelerat = options.gpuAcceleration, 1649 | gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, 1650 | _options$adaptive = options.adaptive, 1651 | adaptive = _options$adaptive === void 0 ? true : _options$adaptive, 1652 | _options$roundOffsets = options.roundOffsets, 1653 | roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets; 1654 | 1655 | var commonStyles = { 1656 | placement: getBasePlacement(state.placement), 1657 | variation: getVariation(state.placement), 1658 | popper: state.elements.popper, 1659 | popperRect: state.rects.popper, 1660 | gpuAcceleration: gpuAcceleration 1661 | }; 1662 | 1663 | if (state.modifiersData.popperOffsets != null) { 1664 | state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, { 1665 | offsets: state.modifiersData.popperOffsets, 1666 | position: state.options.strategy, 1667 | adaptive: adaptive, 1668 | roundOffsets: roundOffsets 1669 | }))); 1670 | } 1671 | 1672 | if (state.modifiersData.arrow != null) { 1673 | state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, { 1674 | offsets: state.modifiersData.arrow, 1675 | position: 'absolute', 1676 | adaptive: false, 1677 | roundOffsets: roundOffsets 1678 | }))); 1679 | } 1680 | 1681 | state.attributes.popper = Object.assign({}, state.attributes.popper, { 1682 | 'data-popper-placement': state.placement 1683 | }); 1684 | } // eslint-disable-next-line import/no-unused-modules 1685 | 1686 | 1687 | var computeStyles$1 = { 1688 | name: 'computeStyles', 1689 | enabled: true, 1690 | phase: 'beforeWrite', 1691 | fn: computeStyles, 1692 | data: {} 1693 | }; 1694 | 1695 | // and applies them to the HTMLElements such as popper and arrow 1696 | 1697 | function applyStyles(_ref) { 1698 | var state = _ref.state; 1699 | Object.keys(state.elements).forEach(function (name) { 1700 | var style = state.styles[name] || {}; 1701 | var attributes = state.attributes[name] || {}; 1702 | var element = state.elements[name]; // arrow is optional + virtual elements 1703 | 1704 | if (!isHTMLElement(element) || !getNodeName(element)) { 1705 | return; 1706 | } // Flow doesn't support to extend this property, but it's the most 1707 | // effective way to apply styles to an HTMLElement 1708 | // $FlowFixMe[cannot-write] 1709 | 1710 | 1711 | Object.assign(element.style, style); 1712 | Object.keys(attributes).forEach(function (name) { 1713 | var value = attributes[name]; 1714 | 1715 | if (value === false) { 1716 | element.removeAttribute(name); 1717 | } else { 1718 | element.setAttribute(name, value === true ? '' : value); 1719 | } 1720 | }); 1721 | }); 1722 | } 1723 | 1724 | function effect$1(_ref2) { 1725 | var state = _ref2.state; 1726 | var initialStyles = { 1727 | popper: { 1728 | position: state.options.strategy, 1729 | left: '0', 1730 | top: '0', 1731 | margin: '0' 1732 | }, 1733 | arrow: { 1734 | position: 'absolute' 1735 | }, 1736 | reference: {} 1737 | }; 1738 | Object.assign(state.elements.popper.style, initialStyles.popper); 1739 | state.styles = initialStyles; 1740 | 1741 | if (state.elements.arrow) { 1742 | Object.assign(state.elements.arrow.style, initialStyles.arrow); 1743 | } 1744 | 1745 | return function () { 1746 | Object.keys(state.elements).forEach(function (name) { 1747 | var element = state.elements[name]; 1748 | var attributes = state.attributes[name] || {}; 1749 | var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them 1750 | 1751 | var style = styleProperties.reduce(function (style, property) { 1752 | style[property] = ''; 1753 | return style; 1754 | }, {}); // arrow is optional + virtual elements 1755 | 1756 | if (!isHTMLElement(element) || !getNodeName(element)) { 1757 | return; 1758 | } 1759 | 1760 | Object.assign(element.style, style); 1761 | Object.keys(attributes).forEach(function (attribute) { 1762 | element.removeAttribute(attribute); 1763 | }); 1764 | }); 1765 | }; 1766 | } // eslint-disable-next-line import/no-unused-modules 1767 | 1768 | 1769 | var applyStyles$1 = { 1770 | name: 'applyStyles', 1771 | enabled: true, 1772 | phase: 'write', 1773 | fn: applyStyles, 1774 | effect: effect$1, 1775 | requires: ['computeStyles'] 1776 | }; 1777 | 1778 | var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1]; 1779 | var createPopper = /*#__PURE__*/popperGenerator({ 1780 | defaultModifiers: defaultModifiers 1781 | }); // eslint-disable-next-line import/no-unused-modules 1782 | 1783 | function getAltAxis(axis) { 1784 | return axis === 'x' ? 'y' : 'x'; 1785 | } 1786 | 1787 | function within(min$1, value, max$1) { 1788 | return max(min$1, min(value, max$1)); 1789 | } 1790 | 1791 | function preventOverflow(_ref) { 1792 | var state = _ref.state, 1793 | options = _ref.options, 1794 | name = _ref.name; 1795 | var _options$mainAxis = options.mainAxis, 1796 | checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, 1797 | _options$altAxis = options.altAxis, 1798 | checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, 1799 | boundary = options.boundary, 1800 | rootBoundary = options.rootBoundary, 1801 | altBoundary = options.altBoundary, 1802 | padding = options.padding, 1803 | _options$tether = options.tether, 1804 | tether = _options$tether === void 0 ? true : _options$tether, 1805 | _options$tetherOffset = options.tetherOffset, 1806 | tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset; 1807 | var overflow = detectOverflow(state, { 1808 | boundary: boundary, 1809 | rootBoundary: rootBoundary, 1810 | padding: padding, 1811 | altBoundary: altBoundary 1812 | }); 1813 | var basePlacement = getBasePlacement(state.placement); 1814 | var variation = getVariation(state.placement); 1815 | var isBasePlacement = !variation; 1816 | var mainAxis = getMainAxisFromPlacement(basePlacement); 1817 | var altAxis = getAltAxis(mainAxis); 1818 | var popperOffsets = state.modifiersData.popperOffsets; 1819 | var referenceRect = state.rects.reference; 1820 | var popperRect = state.rects.popper; 1821 | var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { 1822 | placement: state.placement 1823 | })) : tetherOffset; 1824 | var data = { 1825 | x: 0, 1826 | y: 0 1827 | }; 1828 | 1829 | if (!popperOffsets) { 1830 | return; 1831 | } 1832 | 1833 | if (checkMainAxis || checkAltAxis) { 1834 | var mainSide = mainAxis === 'y' ? top : left; 1835 | var altSide = mainAxis === 'y' ? bottom : right; 1836 | var len = mainAxis === 'y' ? 'height' : 'width'; 1837 | var offset = popperOffsets[mainAxis]; 1838 | var min$1 = popperOffsets[mainAxis] + overflow[mainSide]; 1839 | var max$1 = popperOffsets[mainAxis] - overflow[altSide]; 1840 | var additive = tether ? -popperRect[len] / 2 : 0; 1841 | var minLen = variation === start ? referenceRect[len] : popperRect[len]; 1842 | var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go 1843 | // outside the reference bounds 1844 | 1845 | var arrowElement = state.elements.arrow; 1846 | var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : { 1847 | width: 0, 1848 | height: 0 1849 | }; 1850 | var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject(); 1851 | var arrowPaddingMin = arrowPaddingObject[mainSide]; 1852 | var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want 1853 | // to include its full size in the calculation. If the reference is small 1854 | // and near the edge of a boundary, the popper can overflow even if the 1855 | // reference is not overflowing as well (e.g. virtual elements with no 1856 | // width or height) 1857 | 1858 | var arrowLen = within(0, referenceRect[len], arrowRect[len]); 1859 | var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue; 1860 | var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue; 1861 | var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow); 1862 | var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; 1863 | var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0; 1864 | var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset; 1865 | var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue; 1866 | 1867 | if (checkMainAxis) { 1868 | var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1); 1869 | popperOffsets[mainAxis] = preventedOffset; 1870 | data[mainAxis] = preventedOffset - offset; 1871 | } 1872 | 1873 | if (checkAltAxis) { 1874 | var _mainSide = mainAxis === 'x' ? top : left; 1875 | 1876 | var _altSide = mainAxis === 'x' ? bottom : right; 1877 | 1878 | var _offset = popperOffsets[altAxis]; 1879 | 1880 | var _min = _offset + overflow[_mainSide]; 1881 | 1882 | var _max = _offset - overflow[_altSide]; 1883 | 1884 | var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max); 1885 | 1886 | popperOffsets[altAxis] = _preventedOffset; 1887 | data[altAxis] = _preventedOffset - _offset; 1888 | } 1889 | } 1890 | 1891 | state.modifiersData[name] = data; 1892 | } // eslint-disable-next-line import/no-unused-modules 1893 | 1894 | 1895 | var preventOverflow$1 = { 1896 | name: 'preventOverflow', 1897 | enabled: true, 1898 | phase: 'main', 1899 | fn: preventOverflow, 1900 | requiresIfExists: ['offset'] 1901 | }; 1902 | 1903 | var hash$1 = { 1904 | left: 'right', 1905 | right: 'left', 1906 | bottom: 'top', 1907 | top: 'bottom' 1908 | }; 1909 | function getOppositePlacement(placement) { 1910 | return placement.replace(/left|right|bottom|top/g, function (matched) { 1911 | return hash$1[matched]; 1912 | }); 1913 | } 1914 | 1915 | var hash = { 1916 | start: 'end', 1917 | end: 'start' 1918 | }; 1919 | function getOppositeVariationPlacement(placement) { 1920 | return placement.replace(/start|end/g, function (matched) { 1921 | return hash[matched]; 1922 | }); 1923 | } 1924 | 1925 | function computeAutoPlacement(state, options) { 1926 | if (options === void 0) { 1927 | options = {}; 1928 | } 1929 | 1930 | var _options = options, 1931 | placement = _options.placement, 1932 | boundary = _options.boundary, 1933 | rootBoundary = _options.rootBoundary, 1934 | padding = _options.padding, 1935 | flipVariations = _options.flipVariations, 1936 | _options$allowedAutoP = _options.allowedAutoPlacements, 1937 | allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements : _options$allowedAutoP; 1938 | var variation = getVariation(placement); 1939 | var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) { 1940 | return getVariation(placement) === variation; 1941 | }) : basePlacements; 1942 | var allowedPlacements = placements$1.filter(function (placement) { 1943 | return allowedAutoPlacements.indexOf(placement) >= 0; 1944 | }); 1945 | 1946 | if (allowedPlacements.length === 0) { 1947 | allowedPlacements = placements$1; 1948 | } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions... 1949 | 1950 | 1951 | var overflows = allowedPlacements.reduce(function (acc, placement) { 1952 | acc[placement] = detectOverflow(state, { 1953 | placement: placement, 1954 | boundary: boundary, 1955 | rootBoundary: rootBoundary, 1956 | padding: padding 1957 | })[getBasePlacement(placement)]; 1958 | return acc; 1959 | }, {}); 1960 | return Object.keys(overflows).sort(function (a, b) { 1961 | return overflows[a] - overflows[b]; 1962 | }); 1963 | } 1964 | 1965 | function getExpandedFallbackPlacements(placement) { 1966 | if (getBasePlacement(placement) === auto) { 1967 | return []; 1968 | } 1969 | 1970 | var oppositePlacement = getOppositePlacement(placement); 1971 | return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)]; 1972 | } 1973 | 1974 | function flip(_ref) { 1975 | var state = _ref.state, 1976 | options = _ref.options, 1977 | name = _ref.name; 1978 | 1979 | if (state.modifiersData[name]._skip) { 1980 | return; 1981 | } 1982 | 1983 | var _options$mainAxis = options.mainAxis, 1984 | checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, 1985 | _options$altAxis = options.altAxis, 1986 | checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, 1987 | specifiedFallbackPlacements = options.fallbackPlacements, 1988 | padding = options.padding, 1989 | boundary = options.boundary, 1990 | rootBoundary = options.rootBoundary, 1991 | altBoundary = options.altBoundary, 1992 | _options$flipVariatio = options.flipVariations, 1993 | flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, 1994 | allowedAutoPlacements = options.allowedAutoPlacements; 1995 | var preferredPlacement = state.options.placement; 1996 | var basePlacement = getBasePlacement(preferredPlacement); 1997 | var isBasePlacement = basePlacement === preferredPlacement; 1998 | var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement)); 1999 | var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) { 2000 | return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, { 2001 | placement: placement, 2002 | boundary: boundary, 2003 | rootBoundary: rootBoundary, 2004 | padding: padding, 2005 | flipVariations: flipVariations, 2006 | allowedAutoPlacements: allowedAutoPlacements 2007 | }) : placement); 2008 | }, []); 2009 | var referenceRect = state.rects.reference; 2010 | var popperRect = state.rects.popper; 2011 | var checksMap = new Map(); 2012 | var makeFallbackChecks = true; 2013 | var firstFittingPlacement = placements[0]; 2014 | 2015 | for (var i = 0; i < placements.length; i++) { 2016 | var placement = placements[i]; 2017 | 2018 | var _basePlacement = getBasePlacement(placement); 2019 | 2020 | var isStartVariation = getVariation(placement) === start; 2021 | var isVertical = [top, bottom].indexOf(_basePlacement) >= 0; 2022 | var len = isVertical ? 'width' : 'height'; 2023 | var overflow = detectOverflow(state, { 2024 | placement: placement, 2025 | boundary: boundary, 2026 | rootBoundary: rootBoundary, 2027 | altBoundary: altBoundary, 2028 | padding: padding 2029 | }); 2030 | var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top; 2031 | 2032 | if (referenceRect[len] > popperRect[len]) { 2033 | mainVariationSide = getOppositePlacement(mainVariationSide); 2034 | } 2035 | 2036 | var altVariationSide = getOppositePlacement(mainVariationSide); 2037 | var checks = []; 2038 | 2039 | if (checkMainAxis) { 2040 | checks.push(overflow[_basePlacement] <= 0); 2041 | } 2042 | 2043 | if (checkAltAxis) { 2044 | checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0); 2045 | } 2046 | 2047 | if (checks.every(function (check) { 2048 | return check; 2049 | })) { 2050 | firstFittingPlacement = placement; 2051 | makeFallbackChecks = false; 2052 | break; 2053 | } 2054 | 2055 | checksMap.set(placement, checks); 2056 | } 2057 | 2058 | if (makeFallbackChecks) { 2059 | // `2` may be desired in some cases – research later 2060 | var numberOfChecks = flipVariations ? 3 : 1; 2061 | 2062 | var _loop = function _loop(_i) { 2063 | var fittingPlacement = placements.find(function (placement) { 2064 | var checks = checksMap.get(placement); 2065 | 2066 | if (checks) { 2067 | return checks.slice(0, _i).every(function (check) { 2068 | return check; 2069 | }); 2070 | } 2071 | }); 2072 | 2073 | if (fittingPlacement) { 2074 | firstFittingPlacement = fittingPlacement; 2075 | return "break"; 2076 | } 2077 | }; 2078 | 2079 | for (var _i = numberOfChecks; _i > 0; _i--) { 2080 | var _ret = _loop(_i); 2081 | 2082 | if (_ret === "break") break; 2083 | } 2084 | } 2085 | 2086 | if (state.placement !== firstFittingPlacement) { 2087 | state.modifiersData[name]._skip = true; 2088 | state.placement = firstFittingPlacement; 2089 | state.reset = true; 2090 | } 2091 | } // eslint-disable-next-line import/no-unused-modules 2092 | 2093 | 2094 | var flip$1 = { 2095 | name: 'flip', 2096 | enabled: true, 2097 | phase: 'main', 2098 | fn: flip, 2099 | requiresIfExists: ['offset'], 2100 | data: { 2101 | _skip: false 2102 | } 2103 | }; 2104 | 2105 | function distanceAndSkiddingToXY(placement, rects, offset) { 2106 | var basePlacement = getBasePlacement(placement); 2107 | var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1; 2108 | 2109 | var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, { 2110 | placement: placement 2111 | })) : offset, 2112 | skidding = _ref[0], 2113 | distance = _ref[1]; 2114 | 2115 | skidding = skidding || 0; 2116 | distance = (distance || 0) * invertDistance; 2117 | return [left, right].indexOf(basePlacement) >= 0 ? { 2118 | x: distance, 2119 | y: skidding 2120 | } : { 2121 | x: skidding, 2122 | y: distance 2123 | }; 2124 | } 2125 | 2126 | function offset(_ref2) { 2127 | var state = _ref2.state, 2128 | options = _ref2.options, 2129 | name = _ref2.name; 2130 | var _options$offset = options.offset, 2131 | offset = _options$offset === void 0 ? [0, 0] : _options$offset; 2132 | var data = placements.reduce(function (acc, placement) { 2133 | acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset); 2134 | return acc; 2135 | }, {}); 2136 | var _data$state$placement = data[state.placement], 2137 | x = _data$state$placement.x, 2138 | y = _data$state$placement.y; 2139 | 2140 | if (state.modifiersData.popperOffsets != null) { 2141 | state.modifiersData.popperOffsets.x += x; 2142 | state.modifiersData.popperOffsets.y += y; 2143 | } 2144 | 2145 | state.modifiersData[name] = data; 2146 | } // eslint-disable-next-line import/no-unused-modules 2147 | 2148 | 2149 | var offset$1 = { 2150 | name: 'offset', 2151 | enabled: true, 2152 | phase: 'main', 2153 | requires: ['popperOffsets'], 2154 | fn: offset 2155 | }; 2156 | 2157 | var toPaddingObject = function toPaddingObject(padding, state) { 2158 | padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, { 2159 | placement: state.placement 2160 | })) : padding; 2161 | return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); 2162 | }; 2163 | 2164 | function arrow(_ref) { 2165 | var _state$modifiersData$; 2166 | 2167 | var state = _ref.state, 2168 | name = _ref.name, 2169 | options = _ref.options; 2170 | var arrowElement = state.elements.arrow; 2171 | var popperOffsets = state.modifiersData.popperOffsets; 2172 | var basePlacement = getBasePlacement(state.placement); 2173 | var axis = getMainAxisFromPlacement(basePlacement); 2174 | var isVertical = [left, right].indexOf(basePlacement) >= 0; 2175 | var len = isVertical ? 'height' : 'width'; 2176 | 2177 | if (!arrowElement || !popperOffsets) { 2178 | return; 2179 | } 2180 | 2181 | var paddingObject = toPaddingObject(options.padding, state); 2182 | var arrowRect = getLayoutRect(arrowElement); 2183 | var minProp = axis === 'y' ? top : left; 2184 | var maxProp = axis === 'y' ? bottom : right; 2185 | var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len]; 2186 | var startDiff = popperOffsets[axis] - state.rects.reference[axis]; 2187 | var arrowOffsetParent = getOffsetParent(arrowElement); 2188 | var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0; 2189 | var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is 2190 | // outside of the popper bounds 2191 | 2192 | var min = paddingObject[minProp]; 2193 | var max = clientSize - arrowRect[len] - paddingObject[maxProp]; 2194 | var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference; 2195 | var offset = within(min, center, max); // Prevents breaking syntax highlighting... 2196 | 2197 | var axisProp = axis; 2198 | state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$); 2199 | } 2200 | 2201 | function effect(_ref2) { 2202 | var state = _ref2.state, 2203 | options = _ref2.options; 2204 | var _options$element = options.element, 2205 | arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element; 2206 | 2207 | if (arrowElement == null) { 2208 | return; 2209 | } // CSS selector 2210 | 2211 | 2212 | if (typeof arrowElement === 'string') { 2213 | arrowElement = state.elements.popper.querySelector(arrowElement); 2214 | 2215 | if (!arrowElement) { 2216 | return; 2217 | } 2218 | } 2219 | 2220 | if (!contains(state.elements.popper, arrowElement)) { 2221 | 2222 | return; 2223 | } 2224 | 2225 | state.elements.arrow = arrowElement; 2226 | } // eslint-disable-next-line import/no-unused-modules 2227 | 2228 | 2229 | var arrow$1 = { 2230 | name: 'arrow', 2231 | enabled: true, 2232 | phase: 'main', 2233 | fn: arrow, 2234 | effect: effect, 2235 | requires: ['popperOffsets'], 2236 | requiresIfExists: ['preventOverflow'] 2237 | }; 2238 | 2239 | const toInt = x => parseInt(x, 10); 2240 | 2241 | function usePopper({ 2242 | arrowPadding, 2243 | emit, 2244 | locked, 2245 | offsetDistance, 2246 | offsetSkid, 2247 | placement, 2248 | popperNode, 2249 | triggerNode 2250 | }) { 2251 | const state = (0,vue__WEBPACK_IMPORTED_MODULE_0__.reactive)({ 2252 | isOpen: false, 2253 | popperInstance: null 2254 | }); // Enable or disable event listeners to optimize performance. 2255 | 2256 | const setPopperEventListeners = enabled => { 2257 | var _state$popperInstance; 2258 | 2259 | (_state$popperInstance = state.popperInstance) === null || _state$popperInstance === void 0 ? void 0 : _state$popperInstance.setOptions(options => ({ ...options, 2260 | modifiers: [...options.modifiers, { 2261 | name: "eventListeners", 2262 | enabled 2263 | }] 2264 | })); 2265 | }; 2266 | 2267 | const enablePopperEventListeners = () => setPopperEventListeners(true); 2268 | 2269 | const disablePopperEventListeners = () => setPopperEventListeners(false); 2270 | 2271 | const close = () => { 2272 | if (!state.isOpen) { 2273 | return; 2274 | } 2275 | 2276 | state.isOpen = false; 2277 | emit("close:popper"); 2278 | }; 2279 | 2280 | const open = () => { 2281 | if (state.isOpen) { 2282 | return; 2283 | } 2284 | 2285 | state.isOpen = true; 2286 | emit("open:popper"); 2287 | }; // When isOpen or placement change 2288 | 2289 | 2290 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)([() => state.isOpen, placement], async ([isOpen]) => { 2291 | if (isOpen) { 2292 | await initializePopper(); 2293 | enablePopperEventListeners(); 2294 | } else { 2295 | disablePopperEventListeners(); 2296 | } 2297 | }); 2298 | 2299 | const initializePopper = async () => { 2300 | await (0,vue__WEBPACK_IMPORTED_MODULE_0__.nextTick)(); 2301 | state.popperInstance = createPopper(triggerNode.value, popperNode.value, { 2302 | placement: placement.value, 2303 | modifiers: [preventOverflow$1, flip$1, { 2304 | name: "flip", 2305 | enabled: !locked.value 2306 | }, arrow$1, { 2307 | name: "arrow", 2308 | options: { 2309 | padding: toInt(arrowPadding.value) 2310 | } 2311 | }, offset$1, { 2312 | name: "offset", 2313 | options: { 2314 | offset: [toInt(offsetSkid.value), toInt(offsetDistance.value)] 2315 | } 2316 | }] 2317 | }); // Update its position 2318 | 2319 | state.popperInstance.update(); 2320 | }; 2321 | 2322 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.onBeforeUnmount)(() => { 2323 | var _state$popperInstance2; 2324 | 2325 | (_state$popperInstance2 = state.popperInstance) === null || _state$popperInstance2 === void 0 ? void 0 : _state$popperInstance2.destroy(); 2326 | }); 2327 | return { ...(0,vue__WEBPACK_IMPORTED_MODULE_0__.toRefs)(state), 2328 | open, 2329 | close 2330 | }; 2331 | } 2332 | 2333 | const _hoisted_1$1 = { 2334 | id: "arrow", 2335 | "data-popper-arrow": "" 2336 | }; 2337 | function render(_ctx, _cache) { 2338 | return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1$1); 2339 | } 2340 | 2341 | function styleInject(css, ref) { 2342 | if ( ref === void 0 ) ref = {}; 2343 | var insertAt = ref.insertAt; 2344 | 2345 | if (!css || typeof document === 'undefined') { return; } 2346 | 2347 | var head = document.head || document.getElementsByTagName('head')[0]; 2348 | var style = document.createElement('style'); 2349 | style.type = 'text/css'; 2350 | 2351 | if (insertAt === 'top') { 2352 | if (head.firstChild) { 2353 | head.insertBefore(style, head.firstChild); 2354 | } else { 2355 | head.appendChild(style); 2356 | } 2357 | } else { 2358 | head.appendChild(style); 2359 | } 2360 | 2361 | if (style.styleSheet) { 2362 | style.styleSheet.cssText = css; 2363 | } else { 2364 | style.appendChild(document.createTextNode(css)); 2365 | } 2366 | } 2367 | 2368 | var css_248z$1 = "\n#arrow[data-v-20b7fd4a],\n #arrow[data-v-20b7fd4a]::before {\n transition: background 250ms ease-in-out;\n position: absolute;\n width: calc(10px - var(--popper-theme-border-width, 0px));\n height: calc(10px - var(--popper-theme-border-width, 0px));\n box-sizing: border-box;\n background: var(--popper-theme-background-color);\n}\n#arrow[data-v-20b7fd4a] {\n visibility: hidden;\n}\n#arrow[data-v-20b7fd4a]::before {\n visibility: visible;\n content: \"\";\n transform: rotate(45deg);\n}\n\n /* Top arrow */\n.popper[data-popper-placement^=\"top\"] > #arrow[data-v-20b7fd4a] {\n bottom: -5px;\n}\n.popper[data-popper-placement^=\"top\"] > #arrow[data-v-20b7fd4a]::before {\n border-right: var(--popper-theme-border-width)\n var(--popper-theme-border-style) var(--popper-theme-border-color);\n border-bottom: var(--popper-theme-border-width)\n var(--popper-theme-border-style) var(--popper-theme-border-color);\n}\n\n /* Bottom arrow */\n.popper[data-popper-placement^=\"bottom\"] > #arrow[data-v-20b7fd4a] {\n top: -5px;\n}\n.popper[data-popper-placement^=\"bottom\"] > #arrow[data-v-20b7fd4a]::before {\n border-left: var(--popper-theme-border-width)\n var(--popper-theme-border-style) var(--popper-theme-border-color);\n border-top: var(--popper-theme-border-width)\n var(--popper-theme-border-style) var(--popper-theme-border-color);\n}\n\n /* Left arrow */\n.popper[data-popper-placement^=\"left\"] > #arrow[data-v-20b7fd4a] {\n right: -5px;\n}\n.popper[data-popper-placement^=\"left\"] > #arrow[data-v-20b7fd4a]::before {\n border-right: var(--popper-theme-border-width)\n var(--popper-theme-border-style) var(--popper-theme-border-color);\n border-top: var(--popper-theme-border-width)\n var(--popper-theme-border-style) var(--popper-theme-border-color);\n}\n\n /* Right arrow */\n.popper[data-popper-placement^=\"right\"] > #arrow[data-v-20b7fd4a] {\n left: -5px;\n}\n"; 2369 | styleInject(css_248z$1); 2370 | 2371 | const script$1 = {}; 2372 | script$1.render = render; 2373 | script$1.__scopeId = "data-v-20b7fd4a"; 2374 | var Arrow = script$1; 2375 | 2376 | const _hoisted_1 = ["onKeyup"]; 2377 | var script = { 2378 | props: { 2379 | /** 2380 | * Preferred placement (the "auto" placements will choose the side with most space.) 2381 | */ 2382 | placement: { 2383 | type: String, 2384 | default: "bottom", 2385 | validator: function (value) { 2386 | return ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"].includes(value); 2387 | } 2388 | }, 2389 | 2390 | /** 2391 | * Disables automatically closing the popover when the user clicks away from it 2392 | */ 2393 | disableClickAway: { 2394 | type: Boolean, 2395 | default: false 2396 | }, 2397 | 2398 | /** 2399 | * Offset in pixels along the trigger element 2400 | */ 2401 | offsetSkid: { 2402 | type: String, 2403 | default: "0" 2404 | }, 2405 | 2406 | /** 2407 | * Offset in pixels away from the trigger element 2408 | */ 2409 | offsetDistance: { 2410 | type: String, 2411 | default: "12" 2412 | }, 2413 | 2414 | /** 2415 | * Trigger the popper on hover 2416 | */ 2417 | hover: { 2418 | type: Boolean, 2419 | default: false 2420 | }, 2421 | 2422 | /** 2423 | * Manually open/close the Popper, other events are ignored if this prop is set 2424 | */ 2425 | show: { 2426 | type: Boolean, 2427 | default: null 2428 | }, 2429 | 2430 | /** 2431 | * Disables the Popper. If it was already open, it will be closed. 2432 | */ 2433 | disabled: { 2434 | type: Boolean, 2435 | default: false 2436 | }, 2437 | 2438 | /** 2439 | * Open the Popper after a delay (ms). 2440 | */ 2441 | openDelay: { 2442 | type: [Number, String], 2443 | default: 0 2444 | }, 2445 | 2446 | /** 2447 | * Close the Popper after a delay (ms). 2448 | */ 2449 | closeDelay: { 2450 | type: [Number, String], 2451 | default: 0 2452 | }, 2453 | 2454 | /** 2455 | * The z-index of the Popper. 2456 | */ 2457 | zIndex: { 2458 | type: [Number, String], 2459 | default: 9999 2460 | }, 2461 | 2462 | /** 2463 | * Display an arrow on the popper 2464 | */ 2465 | arrow: { 2466 | type: Boolean, 2467 | default: false 2468 | }, 2469 | 2470 | /** 2471 | * Stop arrow from reaching the edge of the popper 2472 | */ 2473 | arrowPadding: { 2474 | type: String, 2475 | default: "0" 2476 | }, 2477 | 2478 | /** 2479 | * If the Popper should be interactive, it will close when clicked/hovered if false 2480 | */ 2481 | interactive: { 2482 | type: Boolean, 2483 | default: true 2484 | }, 2485 | 2486 | /** 2487 | * Lock the Popper into place, it will not flip dynamically when it runs out of space if true 2488 | */ 2489 | locked: { 2490 | type: Boolean, 2491 | default: false 2492 | }, 2493 | 2494 | /** 2495 | * If the content is just a simple string, it can be passed in as a prop 2496 | */ 2497 | content: { 2498 | type: String, 2499 | default: null 2500 | } 2501 | }, 2502 | emits: ["open:popper", "close:popper"], 2503 | 2504 | setup(__props, { 2505 | emit 2506 | }) { 2507 | const props = __props; 2508 | 2509 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.useCssVars)(_ctx => ({ 2510 | "c81fc0a4": __props.zIndex 2511 | })); 2512 | 2513 | const slots = (0,vue__WEBPACK_IMPORTED_MODULE_0__.useSlots)(); 2514 | const popperContainerNode = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null); 2515 | const popperNode = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null); 2516 | const triggerNode = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(null); 2517 | const modifiedIsOpen = (0,vue__WEBPACK_IMPORTED_MODULE_0__.ref)(false); 2518 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.onMounted)(() => { 2519 | const children = slots.default(); 2520 | 2521 | if (children && children.length > 1) { 2522 | return console.error(`[Popper]: The component expects only one child element at its root. You passed ${children.length} child nodes.`); 2523 | } 2524 | }); 2525 | const { 2526 | arrowPadding, 2527 | closeDelay, 2528 | content, 2529 | disableClickAway, 2530 | disabled, 2531 | interactive, 2532 | locked, 2533 | offsetDistance, 2534 | offsetSkid, 2535 | openDelay, 2536 | placement, 2537 | show 2538 | } = (0,vue__WEBPACK_IMPORTED_MODULE_0__.toRefs)(props); 2539 | const { 2540 | isOpen, 2541 | open, 2542 | close 2543 | } = usePopper({ 2544 | arrowPadding, 2545 | emit, 2546 | locked, 2547 | offsetDistance, 2548 | offsetSkid, 2549 | placement, 2550 | popperNode, 2551 | triggerNode 2552 | }); 2553 | const { 2554 | hasContent 2555 | } = useContent(slots, popperNode, content); 2556 | const manualMode = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(() => show.value !== null); 2557 | const invalid = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(() => disabled.value || !hasContent.value); 2558 | const shouldShowPopper = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(() => isOpen.value && !invalid.value); 2559 | const enableClickAway = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(() => !disableClickAway.value && !manualMode.value); // Add an invisible border to keep the Popper open when hovering from the trigger into it 2560 | 2561 | const interactiveStyle = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(() => interactive.value ? `border: ${offsetDistance.value}px solid transparent; margin: -${offsetDistance.value}px;` : null); 2562 | const openPopperDebounce = debounce_1.debounce(open, openDelay.value); 2563 | const closePopperDebounce = debounce_1.debounce(close, closeDelay.value); 2564 | 2565 | const openPopper = async () => { 2566 | if (invalid.value || manualMode.value) { 2567 | return; 2568 | } 2569 | 2570 | closePopperDebounce.clear(); 2571 | openPopperDebounce(); 2572 | }; 2573 | 2574 | const closePopper = async () => { 2575 | if (manualMode.value) { 2576 | return; 2577 | } 2578 | 2579 | openPopperDebounce.clear(); 2580 | closePopperDebounce(); 2581 | }; 2582 | 2583 | const togglePopper = () => { 2584 | isOpen.value ? closePopper() : openPopper(); 2585 | }; 2586 | /** 2587 | * If Popper is open, we automatically close it if it becomes 2588 | * disabled or without content. 2589 | */ 2590 | 2591 | 2592 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)([hasContent, disabled], ([hasContent, disabled]) => { 2593 | if (isOpen.value && (!hasContent || disabled)) { 2594 | close(); 2595 | } 2596 | }); 2597 | /** 2598 | * In order to eliminate flickering or visibly empty Poppers due to 2599 | * the transition when using the isOpen slot property, we need to return a 2600 | * separate debounced value based on isOpen. 2601 | */ 2602 | 2603 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(isOpen, isOpen => { 2604 | if (isOpen) { 2605 | modifiedIsOpen.value = true; 2606 | } else { 2607 | debounce_1.debounce(() => { 2608 | modifiedIsOpen.value = false; 2609 | }, 200); 2610 | } 2611 | }); 2612 | /** 2613 | * Watch for manual mode. 2614 | */ 2615 | 2616 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.watchEffect)(() => { 2617 | if (manualMode.value) { 2618 | show.value ? openPopperDebounce() : closePopperDebounce(); 2619 | } 2620 | }); 2621 | /** 2622 | * Use click away if it should be enabled. 2623 | */ 2624 | 2625 | (0,vue__WEBPACK_IMPORTED_MODULE_0__.watchEffect)(() => { 2626 | if (enableClickAway.value) { 2627 | useClickAway(popperContainerNode, closePopper); 2628 | } 2629 | }); 2630 | return (_ctx, _cache) => { 2631 | return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", { 2632 | class: "inline-block", 2633 | style: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeStyle)((0,vue__WEBPACK_IMPORTED_MODULE_0__.unref)(interactiveStyle)), 2634 | onMouseleave: _cache[2] || (_cache[2] = $event => __props.hover && closePopper()), 2635 | ref: (_value, _refs) => { 2636 | _refs['popperContainerNode'] = _value; 2637 | popperContainerNode.value = _value; 2638 | } 2639 | }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", { 2640 | ref: (_value, _refs) => { 2641 | _refs['triggerNode'] = _value; 2642 | triggerNode.value = _value; 2643 | }, 2644 | onMouseover: _cache[0] || (_cache[0] = $event => __props.hover && openPopper()), 2645 | onClick: togglePopper, 2646 | onFocus: openPopper, 2647 | onKeyup: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withKeys)(closePopper, ["esc"]) 2648 | }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "default")], 40, _hoisted_1), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(vue__WEBPACK_IMPORTED_MODULE_0__.Transition, { 2649 | name: "fade" 2650 | }, { 2651 | default: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", { 2652 | onClick: _cache[1] || (_cache[1] = $event => !(0,vue__WEBPACK_IMPORTED_MODULE_0__.unref)(interactive) && closePopper()), 2653 | class: "popper", 2654 | ref: (_value, _refs) => { 2655 | _refs['popperNode'] = _value; 2656 | popperNode.value = _value; 2657 | } 2658 | }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, "content", { 2659 | close: (0,vue__WEBPACK_IMPORTED_MODULE_0__.unref)(close), 2660 | isOpen: modifiedIsOpen.value 2661 | }, () => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)((0,vue__WEBPACK_IMPORTED_MODULE_0__.unref)(content)), 1)]), __props.arrow ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(Arrow, { 2662 | key: 0 2663 | })) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("", true)], 512), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, (0,vue__WEBPACK_IMPORTED_MODULE_0__.unref)(shouldShowPopper)]])]), 2664 | _: 3 2665 | })], 36); 2666 | }; 2667 | } 2668 | 2669 | }; 2670 | 2671 | var css_248z = "\n.inline-block[data-v-5784ed69] {\n display: inline-block;\n}\n.popper[data-v-5784ed69] {\n transition: background 250ms ease-in-out;\n background: var(--popper-theme-background-color);\n padding: var(--popper-theme-padding);\n color: var(--popper-theme-text-color);\n border-radius: var(--popper-theme-border-radius);\n border-width: var(--popper-theme-border-width);\n border-style: var(--popper-theme-border-style);\n border-color: var(--popper-theme-border-color);\n box-shadow: var(--popper-theme-box-shadow);\n z-index: var(--c81fc0a4);\n}\n.popper[data-v-5784ed69]:hover,\n .popper:hover > #arrow[data-v-5784ed69]::before {\n background: var(--popper-theme-background-color-hover);\n}\n.inline-block[data-v-5784ed69] {\n display: inline-block;\n}\n.fade-enter-active[data-v-5784ed69],\n .fade-leave-active[data-v-5784ed69] {\n transition: opacity 0.2s ease;\n}\n.fade-enter-from[data-v-5784ed69],\n .fade-leave-to[data-v-5784ed69] {\n opacity: 0;\n}\n"; 2672 | styleInject(css_248z); 2673 | 2674 | script.__scopeId = "data-v-5784ed69"; 2675 | 2676 | // IIFE injects install function into component, allowing component 2677 | // to be registered via Vue.use() as well as Vue.component(), 2678 | 2679 | var entry_esm = /*#__PURE__*/(() => { 2680 | // Get component instance 2681 | const installable = script; // Attach install function executed by Vue.use() 2682 | 2683 | installable.install = app => { 2684 | app.component("Popper", installable); 2685 | }; 2686 | 2687 | return installable; 2688 | })(); // It's possible to expose named exports when writing components that can 2689 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo'; 2690 | // export const RollupDemoDirective = directive; 2691 | 2692 | 2693 | 2694 | 2695 | /***/ }), 2696 | 2697 | /***/ "vue": 2698 | /*!**********************!*\ 2699 | !*** external "Vue" ***! 2700 | \**********************/ 2701 | /***/ ((module) => { 2702 | 2703 | module.exports = Vue; 2704 | 2705 | /***/ }) 2706 | 2707 | /******/ }); 2708 | /************************************************************************/ 2709 | /******/ // The module cache 2710 | /******/ var __webpack_module_cache__ = {}; 2711 | /******/ 2712 | /******/ // The require function 2713 | /******/ function __webpack_require__(moduleId) { 2714 | /******/ // Check if module is in cache 2715 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 2716 | /******/ if (cachedModule !== undefined) { 2717 | /******/ return cachedModule.exports; 2718 | /******/ } 2719 | /******/ // Create a new module (and put it into the cache) 2720 | /******/ var module = __webpack_module_cache__[moduleId] = { 2721 | /******/ // no module.id needed 2722 | /******/ // no module.loaded needed 2723 | /******/ exports: {} 2724 | /******/ }; 2725 | /******/ 2726 | /******/ // Execute the module function 2727 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 2728 | /******/ 2729 | /******/ // Return the exports of the module 2730 | /******/ return module.exports; 2731 | /******/ } 2732 | /******/ 2733 | /******/ // expose the modules object (__webpack_modules__) 2734 | /******/ __webpack_require__.m = __webpack_modules__; 2735 | /******/ 2736 | /************************************************************************/ 2737 | /******/ /* webpack/runtime/chunk loaded */ 2738 | /******/ (() => { 2739 | /******/ var deferred = []; 2740 | /******/ __webpack_require__.O = (result, chunkIds, fn, priority) => { 2741 | /******/ if(chunkIds) { 2742 | /******/ priority = priority || 0; 2743 | /******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1]; 2744 | /******/ deferred[i] = [chunkIds, fn, priority]; 2745 | /******/ return; 2746 | /******/ } 2747 | /******/ var notFulfilled = Infinity; 2748 | /******/ for (var i = 0; i < deferred.length; i++) { 2749 | /******/ var [chunkIds, fn, priority] = deferred[i]; 2750 | /******/ var fulfilled = true; 2751 | /******/ for (var j = 0; j < chunkIds.length; j++) { 2752 | /******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) { 2753 | /******/ chunkIds.splice(j--, 1); 2754 | /******/ } else { 2755 | /******/ fulfilled = false; 2756 | /******/ if(priority < notFulfilled) notFulfilled = priority; 2757 | /******/ } 2758 | /******/ } 2759 | /******/ if(fulfilled) { 2760 | /******/ deferred.splice(i--, 1) 2761 | /******/ var r = fn(); 2762 | /******/ if (r !== undefined) result = r; 2763 | /******/ } 2764 | /******/ } 2765 | /******/ return result; 2766 | /******/ }; 2767 | /******/ })(); 2768 | /******/ 2769 | /******/ /* webpack/runtime/compat get default export */ 2770 | /******/ (() => { 2771 | /******/ // getDefaultExport function for compatibility with non-harmony modules 2772 | /******/ __webpack_require__.n = (module) => { 2773 | /******/ var getter = module && module.__esModule ? 2774 | /******/ () => (module['default']) : 2775 | /******/ () => (module); 2776 | /******/ __webpack_require__.d(getter, { a: getter }); 2777 | /******/ return getter; 2778 | /******/ }; 2779 | /******/ })(); 2780 | /******/ 2781 | /******/ /* webpack/runtime/define property getters */ 2782 | /******/ (() => { 2783 | /******/ // define getter functions for harmony exports 2784 | /******/ __webpack_require__.d = (exports, definition) => { 2785 | /******/ for(var key in definition) { 2786 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 2787 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 2788 | /******/ } 2789 | /******/ } 2790 | /******/ }; 2791 | /******/ })(); 2792 | /******/ 2793 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 2794 | /******/ (() => { 2795 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 2796 | /******/ })(); 2797 | /******/ 2798 | /******/ /* webpack/runtime/make namespace object */ 2799 | /******/ (() => { 2800 | /******/ // define __esModule on exports 2801 | /******/ __webpack_require__.r = (exports) => { 2802 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 2803 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 2804 | /******/ } 2805 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 2806 | /******/ }; 2807 | /******/ })(); 2808 | /******/ 2809 | /******/ /* webpack/runtime/jsonp chunk loading */ 2810 | /******/ (() => { 2811 | /******/ // no baseURI 2812 | /******/ 2813 | /******/ // object to store loaded and loading chunks 2814 | /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched 2815 | /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded 2816 | /******/ var installedChunks = { 2817 | /******/ "/js/field": 0, 2818 | /******/ "css/field": 0 2819 | /******/ }; 2820 | /******/ 2821 | /******/ // no chunk on demand loading 2822 | /******/ 2823 | /******/ // no prefetching 2824 | /******/ 2825 | /******/ // no preloaded 2826 | /******/ 2827 | /******/ // no HMR 2828 | /******/ 2829 | /******/ // no HMR manifest 2830 | /******/ 2831 | /******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0); 2832 | /******/ 2833 | /******/ // install a JSONP callback for chunk loading 2834 | /******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => { 2835 | /******/ var [chunkIds, moreModules, runtime] = data; 2836 | /******/ // add "moreModules" to the modules object, 2837 | /******/ // then flag all "chunkIds" as loaded and fire callback 2838 | /******/ var moduleId, chunkId, i = 0; 2839 | /******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) { 2840 | /******/ for(moduleId in moreModules) { 2841 | /******/ if(__webpack_require__.o(moreModules, moduleId)) { 2842 | /******/ __webpack_require__.m[moduleId] = moreModules[moduleId]; 2843 | /******/ } 2844 | /******/ } 2845 | /******/ if(runtime) var result = runtime(__webpack_require__); 2846 | /******/ } 2847 | /******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data); 2848 | /******/ for(;i < chunkIds.length; i++) { 2849 | /******/ chunkId = chunkIds[i]; 2850 | /******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) { 2851 | /******/ installedChunks[chunkId][0](); 2852 | /******/ } 2853 | /******/ installedChunks[chunkId] = 0; 2854 | /******/ } 2855 | /******/ return __webpack_require__.O(result); 2856 | /******/ } 2857 | /******/ 2858 | /******/ var chunkLoadingGlobal = self["webpackChunkwesselperik_nova_status_field"] = self["webpackChunkwesselperik_nova_status_field"] || []; 2859 | /******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0)); 2860 | /******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal)); 2861 | /******/ })(); 2862 | /******/ 2863 | /************************************************************************/ 2864 | /******/ 2865 | /******/ // startup 2866 | /******/ // Load entry module and return exports 2867 | /******/ // This entry module depends on other loaded chunks and execution need to be delayed 2868 | /******/ __webpack_require__.O(undefined, ["css/field"], () => (__webpack_require__("./resources/js/field.js"))) 2869 | /******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["css/field"], () => (__webpack_require__("./resources/sass/field.scss"))) 2870 | /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); 2871 | /******/ 2872 | /******/ })() 2873 | ; --------------------------------------------------------------------------------