{"version":3,"sources":["webpack:///./src/pages/shop/PromotionPage.vue","webpack:///./src/pages/shop/PromotionPage.vue?9c1c","webpack:///./src/pages/shop/PromotionPage.vue?ec72"],"names":["title","searchTerm","ref","searchTimeout","searchDebounce","categories","name","active","products","id","image","description","products2","performSearch","console","log","value","watch","clearTimeout","setTimeout","selectCategory","selectedCategory","forEach","category","__exports__"],"mappings":"smBAIA,MAAMA,EAAQ,YACRC,EAAaC,eAAI,IACjBC,EAAgB,IACtB,IAAIC,EAAiB,KAErB,MAAMC,EAAaH,eAAI,CACrB,CAAEI,KAAM,WAAYC,QAAQ,GAC5B,CAAED,KAAM,WAAYC,QAAQ,GAC5B,CAAED,KAAM,YAAaC,QAAQ,KAGzBC,EAAWN,eAAI,CACnB,CAAEO,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,0BAClF,CAAEF,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,0BAClF,CAAEF,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,4BAG9EC,EAAYV,eAAI,CACpB,CAAEO,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,0BAClF,CAAEF,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,0BAClF,CAAEF,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,0BAClF,CAAEF,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,0BAClF,CAAEF,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,0BAClF,CAAEF,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,0BAClF,CAAEF,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,0BAClF,CAAEF,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,0BAClF,CAAEF,GAAI,EAAGC,MAAO,mCAAoCV,MAAO,SAAUW,YAAa,4BAG9EE,EAAgBA,KACpBC,QAAQC,IAAI,iBAAkBd,EAAWe,QAI3CC,eAAMhB,EAAY,KAChBiB,aAAad,GACbA,EAAiBe,WAAWN,EAAeV,KAG7C,MAAMiB,EAAkBC,IACtBhB,EAAWW,MAAMM,QAASC,IACxBA,EAAShB,OAASgB,EAASjB,OAASe,EAAiBf,Q,m2DCvCzD,MAAMkB,EAA2B,IAAgB,EAAQ,CAAC,CAAC,YAAY,qBAExD,gB,kCCRf","file":"js/shop-promotion-page.03d0eec2.js","sourcesContent":["<script setup>\nimport { ref, watch } from 'vue'\nimport _ from 'lodash' // lodash already installed so why not use it!\n\nconst title = 'Promotion'\nconst searchTerm = ref('')\nconst searchTimeout = 3000\nlet searchDebounce = null\n\nconst categories = ref([\n  { name: 'Bordeaux', active: true },\n  { name: 'Burgundy', active: false },\n  { name: 'Champagne', active: false }\n])\n\nconst products = ref([\n  { id: 1, image: '@/assets/images/demo/wines/1.png', title: 'Wine 1', description: 'Description for Wine 1' },\n  { id: 2, image: '@/assets/images/demo/wines/2.png', title: 'Wine 2', description: 'Description for Wine 2' },\n  { id: 3, image: '@/assets/images/demo/wines/3.png', title: 'Wine 3', description: 'Description for Wine 3' }\n])\n\nconst products2 = ref([\n  { id: 1, image: '@/assets/images/demo/wines/1.png', title: 'Wine 1', description: 'Description for Wine 1' },\n  { id: 2, image: '@/assets/images/demo/wines/2.png', title: 'Wine 2', description: 'Description for Wine 2' },\n  { id: 3, image: '@/assets/images/demo/wines/3.png', title: 'Wine 3', description: 'Description for Wine 3' },\n  { id: 3, image: '@/assets/images/demo/wines/3.png', title: 'Wine 4', description: 'Description for Wine 3' },\n  { id: 3, image: '@/assets/images/demo/wines/3.png', title: 'Wine 5', description: 'Description for Wine 3' },\n  { id: 3, image: '@/assets/images/demo/wines/3.png', title: 'Wine 6', description: 'Description for Wine 3' },\n  { id: 3, image: '@/assets/images/demo/wines/3.png', title: 'Wine 7', description: 'Description for Wine 3' },\n  { id: 3, image: '@/assets/images/demo/wines/3.png', title: 'Wine 8', description: 'Description for Wine 3' },\n  { id: 3, image: '@/assets/images/demo/wines/3.png', title: 'Wine 9', description: 'Description for Wine 3' }\n])\n\nconst performSearch = () => {\n  console.log('Searching for:', searchTerm.value)\n  // Implement your search logic here\n}\n\nwatch(searchTerm, () => {\n  clearTimeout(searchDebounce)\n  searchDebounce = setTimeout(performSearch, searchTimeout)\n})\n\nconst selectCategory = (selectedCategory) => {\n  categories.value.forEach((category) => {\n    category.active = category.name === selectedCategory.name\n  })\n  // Implement your category selection logic here\n}\n</script>\n\n<template>\n  <f7-page class=\"shop-promotion-page\">\n    <template #fixed>\n      <f7-navbar>\n        <f7-nav-left>\n          <f7-link @click.stop=\"$h.goBack()\">\n            <font-awesome-icon :icon=\"['far', 'arrow-left']\" fixed-width />\n          </f7-link>\n        </f7-nav-left>\n\n        <f7-nav-title> {{ title }} </f7-nav-title>\n      </f7-navbar>\n    </template>\n\n    <!-- SEARCH -->\n    <div class=\"search-container\">\n      <input v-model=\"searchTerm\" name=\"Search\" type=\"text\" placeholder=\"Search keyword\" />\n      <font-awesome-icon :icon=\"['far', 'search']\" fixed-width />\n    </div>\n\n    <!-- GRID -->\n    <div class=\"promotion-container\">\n      <!-- CATEGORY NAVIGATION -->\n      <div class=\"left\">\n        <ul>\n          <li v-for=\"category in categories\" :key=\"category.name\" :class=\"{ active: category.active }\" @click=\"selectCategory(category)\">\n            {{ category.name }}\n          </li>\n        </ul>\n      </div>\n\n      <div class=\"right\">\n        <div class=\"item-container\">\n          <!-- Iterate over products array to display products -->\n          <div class=\"item\">\n            <h2>Country</h2>\n\n            <div class=\"product-container\">\n              <div v-for=\"product in products\" :key=\"product.id\" class=\"product\">\n                <p>{{ product.title }}</p>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"item\">\n            <h2>Region</h2>\n\n            <div class=\"product-container\">\n              <div v-for=\"product in products2\" :key=\"product.id\" class=\"product\">\n                <p>{{ product.title }}</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </f7-page>\n</template>\n\n<style scoped>\n.search-container {\n  padding: 10px 20px;\n  background: #f8f8f8;\n  position: relative;\n  margin: 0;\n}\n.search-container input {\n  padding: 8px 20px 8px 50px;\n  font-size: 13px;\n  background: #fff;\n  color: #212121;\n  border-radius: 16px;\n  margin: 0;\n  width: 100%;\n}\n.search-container svg {\n  position: absolute;\n  top: 22px;\n  font-size: 12px;\n  left: 40px;\n}\n.promotion-container {\n  display: grid;\n  grid-template-columns: 120px 1fr;\n  height: calc(100vh - 230px);\n}\n.promotion-container .left {\n  background: #f8f8f8;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.promotion-container .left ul {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.promotion-container .left ul li {\n  padding: 25px 5px 25px 18px;\n  font-size: 13px;\n  word-break: break-word;\n  position: relative;\n  cursor: pointer;\n}\n.promotion-container .left ul li:hover {\n  background: #f2f2f2;\n}\n.promotion-container .left ul li.active {\n  background: #fff;\n  font-weight: bold;\n  text-transform: uppercase;\n}\n.promotion-container .left ul li.active:after {\n  content: ' ';\n  position: absolute;\n  width: 2px;\n  height: 60%;\n  left: 0;\n  top: 20%;\n  background: #b51c22;\n}\n.promotion-container .right {\n  height: 100%;\n  overflow: hidden;\n}\n.promotion-container .right .item-container {\n  height: calc(100% - 40px);\n  padding: 20px 20px;\n  overflow-y: auto;\n}\n.promotion-container .right h2 {\n  font-size: 14px;\n  font-weight: 600;\n  color: #212121;\n  text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.product-container {\n  margin-bottom: 20px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.product-container .product {\n  background: #f8f8f8;\n  padding: 20px 10px;\n  width: 65px;\n  height: 60px;\n  text-align: center;\n  overflow: hidden;\n  object-fit: center;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.product-container .product p {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n.product-container .product img {\n  height: 100%;\n  width: 100%;\n  object-fit: fill;\n  display: block;\n}\n</style>\n","import script from \"./PromotionPage.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./PromotionPage.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./PromotionPage.vue?vue&type=style&index=0&id=186cd7ec&scoped=true&lang=css\"\n\nimport exportComponent from \"/Users/alvinpascasio/pjf-wine-app/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-186cd7ec\"]])\n\nexport default __exports__","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./PromotionPage.vue?vue&type=style&index=0&id=186cd7ec&scoped=true&lang=css\""],"sourceRoot":""}