From 17512d14b8c6ff6024ffb77c34c12513db75105e Mon Sep 17 00:00:00 2001 From: bkfox Date: Sun, 20 Mar 2022 11:48:03 +0100 Subject: [PATCH] autcomplete field in streamer --- aircox/static/aircox/css/chunk-common.css | 16 +++++ aircox/static/aircox/js/chunk-common.js | 4 +- assets/src/assets/styles.scss | 5 ++ assets/src/components/AAutocomplete.vue | 76 ++++++++++++++++------- 4 files changed, 76 insertions(+), 25 deletions(-) diff --git a/aircox/static/aircox/css/chunk-common.css b/aircox/static/aircox/css/chunk-common.css index 26490dd..b64b142 100644 --- a/aircox/static/aircox/css/chunk-common.css +++ b/aircox/static/aircox/css/chunk-common.css @@ -10648,6 +10648,22 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } +.float-right { + float: right; +} + +.float-left { + float: left; +} + +.overflow-hidden { + overflow: hidden; +} + +.overflow-hidden.is-fullwidth { + max-width: 100%; +} + .navbar + .container { margin-top: 1em; } diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js index 3b0b527..cc804b0 100644 --- a/aircox/static/aircox/js/chunk-common.js +++ b/aircox/static/aircox/js/chunk-common.js @@ -15,7 +15,7 @@ \***********************************************************************************************************************************************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -eval("__webpack_require__.r(__webpack_exports__);\n// import debounce from 'lodash/debounce'\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n props: {\n url: String,\n model: Function,\n placeholder: String,\n name: String,\n labelField: String,\n valueField: {\n type: String,\n default: null\n },\n count: {\n type: Number,\n count: 10\n }\n },\n\n data() {\n return {\n active: false,\n value: '',\n items: [],\n selectedIndex: -1,\n isFetching: false\n };\n },\n\n computed: {\n selected() {\n let index = this.selectedIndex;\n if (index < 0) return null;\n index = Math.min(index, this.items.length - 1);\n return this.items[index];\n },\n\n selectedValue() {\n const sel = this.selected;\n return sel && (this.valueField ? sel.data[this.valueField] : sel.id);\n },\n\n selectedLabel() {\n const sel = this.selected;\n return sel && sel.data[this.labelField];\n },\n\n dropdownClass() {\n const active = this.active && this.items.length;\n return ['dropdown', active ? 'is-active' : ''];\n }\n\n },\n methods: {\n select(index, relative) {\n if (relative) index += this.selectedIndex;else if (index == this.selectedIndex) return;\n this.selectedIndex = Math.max(-1, Math.min(index, this.items.length - 1));\n\n if (index >= 0) {\n this.$refs.input.value = this.selectedLabel;\n this.$refs.input.focus();\n }\n\n this.$emit('select', index, this.selected, this.selectedValue);\n },\n\n onKeyUp: function (event) {\n this.active = true;\n\n switch (event.keyCode) {\n case 27:\n this.active = false;\n return;\n\n case 38:\n this.select(-1, true);\n return;\n\n case 40:\n this.select(1, true);\n return;\n }\n\n const value = event.target.value;\n if (value === this.value) return;\n this.value = value;\n if (!value) return this.select(null);\n this.fetch(value);\n },\n fetch: function (query) {\n if (!query || this.isFetching) return;\n this.isFetching = true;\n return this.model.fetch(this.url.replace('${query}', query), {\n many: true\n }).then(items => {\n this.items = items || [];\n this.isFetching = false;\n this.active = items.length > 0;\n return items;\n }, data => {\n this.isFetching = false;\n Promise.reject(data);\n });\n }\n }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/AAutocomplete.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); +eval("__webpack_require__.r(__webpack_exports__);\n// import debounce from 'lodash/debounce'\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n props: {\n url: String,\n model: Function,\n placeholder: String,\n name: String,\n labelField: String,\n valueField: {\n type: String,\n default: null\n },\n count: {\n type: Number,\n count: 10\n }\n },\n\n data() {\n return {\n value: '',\n items: [],\n selectedIndex: -1,\n cursor: -1,\n isFetching: false\n };\n },\n\n computed: {\n selected() {\n let index = this.selectedIndex;\n if (index < 0) return null;\n index = Math.min(index, this.items.length - 1);\n return this.items[index];\n },\n\n selectedValue() {\n const sel = this.selected;\n return sel && (this.valueField ? sel.data[this.valueField] : sel.id);\n },\n\n selectedLabel() {\n const sel = this.selected;\n return sel && sel.data[this.labelField];\n },\n\n dropdownClass() {\n const active = this.cursor > -1 && this.items.length;\n return ['dropdown', active ? 'is-active' : ''];\n }\n\n },\n methods: {\n move(index = -1, relative = false) {\n if (relative) index += this.cursor;\n this.cursor = Math.max(-1, Math.min(index, this.items.length - 1));\n },\n\n select(index = -1, relative = false, active = null) {\n if (relative) index += this.selectedIndex;else if (index == this.selectedIndex) return;\n this.selectedIndex = Math.max(-1, Math.min(index, this.items.length - 1));\n\n if (index >= 0) {\n this.$refs.input.value = this.selectedLabel;\n this.$refs.input.focus();\n }\n\n if (this.selectedIndex < 0) this.$emit('unselect');else this.$emit('select', index, this.selected, this.selectedValue);\n if (active !== null) active && this.move(0) || this.move(-1);\n },\n\n onKeyPress: function (event) {\n switch (event.keyCode) {\n case 13:\n this.select(this.cursor, false, false);\n break;\n\n case 27:\n this.select();\n break;\n\n case 38:\n this.move(-1, true);\n break;\n\n case 40:\n this.move(1, true);\n break;\n\n default:\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n },\n onKeyUp: function (event) {\n const value = event.target.value;\n if (value === this.value) return;\n this.value = value;\n if (!value) return this.selected && this.select(-1);\n this.fetch(value);\n },\n fetch: function (query) {\n if (!query || this.isFetching) return;\n this.isFetching = true;\n return this.model.fetch(this.url.replace('${query}', query), {\n many: true\n }).then(items => {\n this.items = items || [];\n this.isFetching = false;\n this.move(0);\n return items;\n }, data => {\n this.isFetching = false;\n Promise.reject(data);\n });\n }\n }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/AAutocomplete.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); /***/ }), @@ -115,7 +115,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sou \***************************************************************************************************************************************************************************************************************************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n class: \"dropdown-trigger is-fullwidth\"\n};\nconst _hoisted_2 = {\n class: \"control is-expanded\"\n};\nconst _hoisted_3 = [\"name\", \"value\"];\nconst _hoisted_4 = [\"placeholder\"];\nconst _hoisted_5 = {\n class: \"dropdown-menu is-fullwidth\"\n};\nconst _hoisted_6 = {\n class: \"dropdown-content\",\n style: {\n \"overflow\": \"hidden\"\n }\n};\nconst _hoisted_7 = [\"onClick\", \"title\"];\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.dropdownClass)\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n type: \"hidden\",\n name: $props.name,\n value: $options.selectedValue\n }, null, 8\n /* PROPS */\n , _hoisted_3), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n type: \"text\",\n placeholder: $props.placeholder,\n ref: \"input\",\n class: \"input is-fullwidth\",\n onKeyup: _cache[0] || (_cache[0] = (...args) => $options.onKeyUp && $options.onKeyUp(...args)),\n onFocus: _cache[1] || (_cache[1] = $event => $data.active = true),\n onClick: _cache[2] || (_cache[2] = $event => $data.active = true)\n }, null, 40\n /* PROPS, HYDRATE_EVENTS */\n , _hoisted_4)])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_6, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($data.items, (item, index) => {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"a\", {\n key: item.id,\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['dropdown-item', index === this.selectedIndex ? 'is-active' : '']),\n onClick: $event => {\n $options.select(index);\n $data.active = false;\n },\n title: item.data[$props.labelField]\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"item\", {\n index: index,\n item: item,\n valueField: $props.valueField,\n labelField: $props.labelField\n }, () => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(item.data[$props.labelField]), 1\n /* TEXT */\n )])], 10\n /* CLASS, PROPS */\n , _hoisted_7);\n }), 128\n /* KEYED_FRAGMENT */\n ))])])], 2\n /* CLASS */\n );\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AAutocomplete.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"render\": function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n class: \"dropdown-trigger is-fullwidth\"\n};\nconst _hoisted_2 = [\"name\", \"value\"];\nconst _hoisted_3 = {\n class: \"control is-expanded\"\n};\nconst _hoisted_4 = [\"placeholder\"];\n\nconst _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n class: \"icon is-small ml-1\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"i\", {\n class: \"fa fa-pen\"\n})], -1\n/* HOISTED */\n);\n\nconst _hoisted_6 = {\n key: 0,\n class: \"is-inline-block\"\n};\nconst _hoisted_7 = {\n class: \"dropdown-menu is-fullwidth\"\n};\nconst _hoisted_8 = {\n class: \"dropdown-content\",\n style: {\n \"overflow\": \"hidden\"\n }\n};\nconst _hoisted_9 = [\"onClickCapture\", \"title\"];\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", {\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.dropdownClass)\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n type: \"hidden\",\n name: $props.name,\n value: $options.selectedValue\n }, null, 8\n /* PROPS */\n , _hoisted_2), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"input\", {\n type: \"text\",\n placeholder: $props.placeholder,\n ref: \"input\",\n class: \"input is-fullwidth\",\n onKeydownCapture: _cache[0] || (_cache[0] = (...args) => $options.onKeyPress && $options.onKeyPress(...args)),\n onKeyup: _cache[1] || (_cache[1] = (...args) => $options.onKeyUp && $options.onKeyUp(...args)),\n onFocus: _cache[2] || (_cache[2] = $event => this.cursor < 0 && $options.move(0))\n }, null, 40\n /* PROPS, HYDRATE_EVENTS */\n , _hoisted_4)], 512\n /* NEED_PATCH */\n ), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, !$options.selected]]), $options.selected ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n key: 0,\n class: \"button is-normal is-fullwidth has-text-left is-inline-block overflow-hidden\",\n onClick: _cache[3] || (_cache[3] = $event => $options.select(-1, false, true))\n }, [_hoisted_5, $options.selected ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_6, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"button\", {\n index: $data.selectedIndex,\n item: $options.selected,\n valueField: $props.valueField,\n labelField: $props.labelField\n }, () => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($options.selected.data[$props.labelField]), 1\n /* TEXT */\n )])])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_8, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($data.items, (item, index) => {\n return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"a\", {\n key: item.id,\n class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['dropdown-item', index == this.cursor ? 'is-active' : '']),\n onClickCapture: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withModifiers)($event => $options.select(index, false, false), [\"prevent\"]),\n title: item.data[$props.labelField]\n }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"item\", {\n index: index,\n item: item,\n valueField: $props.valueField,\n labelField: $props.labelField\n }, () => [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)((0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(item.data[$props.labelField]), 1\n /* TEXT */\n )])], 42\n /* CLASS, PROPS, HYDRATE_EVENTS */\n , _hoisted_9);\n }), 128\n /* KEYED_FRAGMENT */\n ))])])], 2\n /* CLASS */\n );\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/AAutocomplete.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); /***/ }), diff --git a/assets/src/assets/styles.scss b/assets/src/assets/styles.scss index afa1c43..56190e9 100644 --- a/assets/src/assets/styles.scss +++ b/assets/src/assets/styles.scss @@ -31,6 +31,11 @@ $body-background-color: $light; } } +.float-right { float: right } +.float-left { float: left } +.overflow-hidden { overflow: hidden } +.overflow-hidden.is-fullwidth { max-width: 100%; } + //-- navbar .navbar + .container { margin-top: 1em; diff --git a/assets/src/components/AAutocomplete.vue b/assets/src/components/AAutocomplete.vue index f92cbbf..d61693a 100644 --- a/assets/src/components/AAutocomplete.vue +++ b/assets/src/components/AAutocomplete.vue @@ -1,19 +1,32 @@