Skip to content

Commit ebdbafe

Browse files
w3bdesignw3bdesign
committed
Convert component to script setup
1 parent 9117ceb commit ebdbafe

File tree

2 files changed

+47
-69
lines changed

2 files changed

+47
-69
lines changed

‎public/js/app.js‎

Lines changed: 35 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -20688,10 +20688,10 @@ __webpack_require__.r(__webpack_exports__);
2068820688

2068920689
/***/ }),
2069020690

20691-
/***/ "./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/Header/MobileMenu.vue?vue&type=script&lang=js":
20692-
/*!***********************************************************************************************************************************************************************************************************!*\
20693-
!*** ./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/Header/MobileMenu.vue?vue&type=script&lang=js ***!
20694-
\***********************************************************************************************************************************************************************************************************/
20691+
/***/ "./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/Header/MobileMenu.vue?vue&type=script&setup=true&lang=js":
20692+
/*!**********************************************************************************************************************************************************************************************************************!*\
20693+
!*** ./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/Header/MobileMenu.vue?vue&type=script&setup=true&lang=js ***!
20694+
\**********************************************************************************************************************************************************************************************************************/
2069520695
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
2069620696

2069720697
"use strict";
@@ -20700,22 +20700,12 @@ __webpack_require__.r(__webpack_exports__);
2070020700
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
2070120701
/* harmony export */ });
2070220702
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
20703-
/* harmony import */ var _Cart_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Cart.vue */ "./resources/js/components/Header/Cart.vue");
20704-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
20705-
20706-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
20707-
20708-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
20709-
20710-
// TODO: Convert to script setup
20711-
2071220703

20713-
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent)({
20714-
name: "MobileMenu",
20715-
components: {
20716-
Cart: _Cart_vue__WEBPACK_IMPORTED_MODULE_1__["default"]
20717-
},
20718-
setup: function setup() {
20704+
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
20705+
__name: 'MobileMenu',
20706+
setup: function setup(__props, _ref) {
20707+
var expose = _ref.expose;
20708+
expose();
2071920709
var state = (0,vue__WEBPACK_IMPORTED_MODULE_0__.reactive)({
2072020710
expandedMenu: false,
2072120711
firstRender: true
@@ -20726,11 +20716,18 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
2072620716
state.firstRender = false;
2072720717
};
2072820718

20729-
return _objectSpread(_objectSpread({}, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toRefs)(state)), {}, {
20730-
displayMobileMenu: displayMobileMenu
20719+
var __returned__ = {
20720+
state: state,
20721+
displayMobileMenu: displayMobileMenu,
20722+
reactive: vue__WEBPACK_IMPORTED_MODULE_0__.reactive
20723+
};
20724+
Object.defineProperty(__returned__, '__isScriptSetup', {
20725+
enumerable: false,
20726+
value: true
2073120727
});
20728+
return __returned__;
2073220729
}
20733-
}));
20730+
});
2073420731

2073520732
/***/ }),
2073620733

@@ -21524,37 +21521,33 @@ var _hoisted_12 = [_hoisted_11];
2152421521
function render(_ctx, _cache, $props, $setup, $data, $options) {
2152521522
var _component_router_link = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("router-link");
2152621523

21527-
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [!_ctx.firstRender ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", {
21524+
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [!$setup.state.firstRender ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", {
2152821525
key: 0,
2152921526
"class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(["fixed top-0 left-0 z-50 w-screen mt-40 bg-white h-96 animate__animated", {
21530-
animate__fadeInLeft: _ctx.expandedMenu,
21531-
animate__fadeOutRight: !_ctx.expandedMenu && !_ctx.firstRender
21527+
animate__fadeInLeft: $setup.state.expandedMenu,
21528+
animate__fadeOutRight: !$setup.state.expandedMenu && !$setup.state.firstRender
2153221529
}])
2153321530
}, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("ul", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_3, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
2153421531
to: "/",
21535-
onClick: _ctx.displayMobileMenu
21532+
onClick: $setup.displayMobileMenu
2153621533
}, {
2153721534
"default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
2153821535
return [_hoisted_4];
2153921536
}),
2154021537
_: 1
2154121538
/* STABLE */
2154221539

21543-
}, 8
21544-
/* PROPS */
21545-
, ["onClick"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
21540+
})]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("li", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_router_link, {
2154621541
to: "/products",
21547-
onClick: _ctx.displayMobileMenu
21542+
onClick: $setup.displayMobileMenu
2154821543
}, {
2154921544
"default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
2155021545
return [_hoisted_6];
2155121546
}),
2155221547
_: 1
2155321548
/* STABLE */
2155421549

21555-
}, 8
21556-
/* PROPS */
21557-
, ["onClick"])])])], 2
21550+
})])])], 2
2155821551
/* CLASS */
2155921552
)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true), _hoisted_7, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_8, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("button", {
2156021553
id: "nav-toggle",
@@ -21565,9 +21558,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
2156521558
"aria-expanded": _ctx.expandedMenu,
2156621559
"aria-controls": "menu",
2156721560
"aria-label": "Navigation",
21568-
onClick: _cache[0] || (_cache[0] = function () {
21569-
return _ctx.displayMobileMenu && _ctx.displayMobileMenu.apply(_ctx, arguments);
21570-
})
21561+
onClick: $setup.displayMobileMenu
2157121562
}, _hoisted_12, 10
2157221563
/* CLASS, PROPS */
2157321564
, _hoisted_10)])])]);
@@ -49162,7 +49153,7 @@ __webpack_require__.r(__webpack_exports__);
4916249153
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
4916349154
/* harmony export */ });
4916449155
/* harmony import */ var _MobileMenu_vue_vue_type_template_id_a706a4b0_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MobileMenu.vue?vue&type=template&id=a706a4b0&scoped=true */ "./resources/js/components/Header/MobileMenu.vue?vue&type=template&id=a706a4b0&scoped=true");
49165-
/* harmony import */ var _MobileMenu_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MobileMenu.vue?vue&type=script&lang=js */ "./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js");
49156+
/* harmony import */ var _MobileMenu_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MobileMenu.vue?vue&type=script&setup=true&lang=js */ "./resources/js/components/Header/MobileMenu.vue?vue&type=script&setup=true&lang=js");
4916649157
/* harmony import */ var _MobileMenu_vue_vue_type_style_index_0_id_a706a4b0_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./MobileMenu.vue?vue&type=style&index=0&id=a706a4b0&scoped=true&lang=css */ "./resources/js/components/Header/MobileMenu.vue?vue&type=style&index=0&id=a706a4b0&scoped=true&lang=css");
4916749158
/* harmony import */ var C_GitHub_laravel_vue_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
4916849159

@@ -49172,7 +49163,7 @@ __webpack_require__.r(__webpack_exports__);
4917249163
;
4917349164

4917449165

49175-
const __exports__ = /*#__PURE__*/(0,C_GitHub_laravel_vue_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__["default"])(_MobileMenu_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_MobileMenu_vue_vue_type_template_id_a706a4b0_scoped_true__WEBPACK_IMPORTED_MODULE_0__.render],['__scopeId',"data-v-a706a4b0"],['__file',"resources/js/components/Header/MobileMenu.vue"]])
49166+
const __exports__ = /*#__PURE__*/(0,C_GitHub_laravel_vue_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_3__["default"])(_MobileMenu_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_MobileMenu_vue_vue_type_template_id_a706a4b0_scoped_true__WEBPACK_IMPORTED_MODULE_0__.render],['__scopeId',"data-v-a706a4b0"],['__file',"resources/js/components/Header/MobileMenu.vue"]])
4917649167
/* hot reload */
4917749168
if (false) {}
4917849169

@@ -49626,18 +49617,18 @@ __webpack_require__.r(__webpack_exports__);
4962649617

4962749618
/***/ }),
4962849619

49629-
/***/ "./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js":
49630-
/*!*******************************************************************************!*\
49631-
!*** ./resources/js/components/Header/MobileMenu.vue?vue&type=script&lang=js ***!
49632-
\*******************************************************************************/
49620+
/***/ "./resources/js/components/Header/MobileMenu.vue?vue&type=script&setup=true&lang=js":
49621+
/*!******************************************************************************************!*\
49622+
!*** ./resources/js/components/Header/MobileMenu.vue?vue&type=script&setup=true&lang=js ***!
49623+
\******************************************************************************************/
4963349624
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
4963449625

4963549626
"use strict";
4963649627
__webpack_require__.r(__webpack_exports__);
4963749628
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
49638-
/* 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_MobileMenu_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"])
49629+
/* 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_MobileMenu_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"])
4963949630
/* harmony export */ });
49640-
/* 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_MobileMenu_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]!./MobileMenu.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/Header/MobileMenu.vue?vue&type=script&lang=js");
49631+
/* 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_MobileMenu_vue_vue_type_script_setup_true_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]!./MobileMenu.vue?vue&type=script&setup=true&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/Header/MobileMenu.vue?vue&type=script&setup=true&lang=js");
4964149632

4964249633

4964349634
/***/ }),

‎resources/js/components/Header/MobileMenu.vue‎

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
22
<div class="relative">
33
<div
4-
v-if="!firstRender"
4+
v-if="!state.firstRender"
55
class="fixed top-0 left-0 z-50 w-screen mt-40 bg-white h-96 animate__animated"
66
:class="{
7-
animate__fadeInLeft: expandedMenu,
8-
animate__fadeOutRight: !expandedMenu && !firstRender,
7+
animate__fadeInLeft: state.expandedMenu,
8+
animate__fadeOutRight: !state.expandedMenu && !state.firstRender,
99
}"
1010
>
1111
<ul class="z-50">
@@ -41,28 +41,15 @@
4141
</div>
4242
</template>
4343

44-
<script>
45-
// TODO: Convert to script setup
46-
import { defineComponent, reactive, toRefs } from "vue";
47-
48-
import Cart from "./Cart.vue";
49-
50-
export default defineComponent({
51-
name: "MobileMenu",
52-
components: { Cart },
53-
setup() {
54-
const state = reactive({ expandedMenu: false, firstRender: true });
55-
const displayMobileMenu = () => {
56-
state.expandedMenu = !state.expandedMenu;
57-
state.firstRender = false;
58-
};
59-
60-
return {
61-
...toRefs(state),
62-
displayMobileMenu,
63-
};
64-
},
65-
});
44+
<script setup>
45+
import { reactive } from "vue";
46+
47+
const state = reactive({ expandedMenu: false, firstRender: true });
48+
49+
const displayMobileMenu = () => {
50+
state.expandedMenu = !state.expandedMenu;
51+
state.firstRender = false;
52+
};
6653
</script>
6754

6855
<style scoped>

0 commit comments

Comments
 (0)