{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/Modal.vue?f6ca","webpack:///./src/components/Grid.vue?a96c","webpack:///./src/components/Code.vue?6da6","webpack:///./src/App.vue","webpack:///./src/components/Form.vue","webpack:///./src/components/Modal.vue","webpack:///./src/components/Modal.vue?3fe0","webpack:///./src/components/Modal.vue?9db4","webpack:///./src/components/Code.vue","webpack:///./src/components/Code.vue?f6c3","webpack:///./src/components/Code.vue?c4a8","webpack:///./src/components/Form.vue?1a1d","webpack:///./src/components/Form.vue?321b","webpack:///./src/components/Grid.vue","webpack:///./src/components/Grid.vue?fb7b","webpack:///./src/components/Grid.vue?d16c","webpack:///./src/store/index.ts","webpack:///./src/App.vue?3acc","webpack:///./src/App.vue?dfb6","webpack:///./src/main.ts","webpack:///./src/App.vue?27b9"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","for","id","type","updateColumns","$event","target","columns","min","step","max","updateRows","rows","columnGap","updateColumnGap","updateRowGap","rowGap","showCodeModal","header","body","class","$emit","setup","render","__scopeId","ref","copy","codeWasCopied","showHtml","createHtml","createCSS","state","computed","methods","this","childarea","map","child","join","templateCol","templateRow","code","$refs","selection","getSelection","range","document","createRange","selectNodeContents","removeAllRanges","addRange","copied","execCommand","setTimeout","components","Modal","Code","watch","newv","oldv","payload","direction","adjustArr","style","columnArr","col","index","unit","rowArr","row","divCount","item","placeChild","removeChildarea","place","downRow","downColumn","upRow","upColumn","action","Math","ceil","floor","startRow","endRow","startColumn","endColumn","console","log","addChildarea","mutations","difference","abs","Array","from","getters","createRepeat","groupRepeat","actions","template","it","reduce","acc","cur","last","includes","group","flatMap","g","useStore","Form","Grid","store","App","use","mount"],"mappings":"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","file":"js/app.25874d27.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"app\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([0,\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Modal.vue?vue&type=style&index=0&id=35462762&lang=scss&scoped=true\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Grid.vue?vue&type=style&index=0&id=54aa1893&lang=scss&scoped=true\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Code.vue?vue&type=style&index=0&id=651868a2&scoped=true&lang=css\"","<template>\n  <Form />\n  <Grid />\n</template>\n\n<script lang=\"ts\">\nimport Form from \"@/components/Form.vue\";\nimport { defineComponent } from \"vue\";\nimport Grid from \"@/components/Grid.vue\";\nimport { useStore } from \"./store/index\";\n\nexport default defineComponent({\n  name: \"App\",\n  components: {\n    Form,\n    Grid,\n  },\n  setup() {\n    const store = useStore();\n    console.log(store)\n    store.state.columnArr.push(\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" }\n    );\n    store.state.rowArr.push(\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" }\n    );\n  },\n});\n</script>\n\n<style lang=\"scss\">\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: #2c3e50;\n}\n</style>\n","<template>\n  <aside>\n    <fieldset>\n      <p>\n        <label for=\"columns\">Columns:</label>\n        <input\n          id=\"columns\"\n          type=\"number\"\n          @change=\"this.updateColumns(+$event.target.value)\"\n          :value=\"columns\"\n          min=\"1\"\n          step=\"1\"\n          max=\"12\"\n        />\n      </p>\n      <p>\n        <label for=\"rows\">rows:</label>\n        <input\n          id=\"rows\"\n          type=\"number\"\n          @change=\"this.updateRows(+$event.target.value)\"\n          :value=\"rows\"\n          min=\"1\"\n          max=\"12\"\n        />\n      </p>\n      <p>\n        <label for=\"columnGap\">Column Gap:</label>\n        <input\n          id=\"columnGap\"\n          type=\"text\"\n          :value=\"columnGap\"\n          @change=\"this.updateColumnGap($event.target.value)\"\n          min=\"1\"\n          max=\"12\"\n        />\n      </p>\n      <p>\n        <label for=\"rowGap\">Row Gap:</label>\n        <input\n          id=\"rowGap\"\n          type=\"text\"\n          @change=\"this.updateRowGap($event.target.value)\"\n          :value=\"rowGap\"\n          min=\"1\"\n          max=\"12\"\n        />\n      </p>\n    </fieldset>\n    <button @click=\"showCodeModal = true\">Show code</button>\n    <Modal v-if=\"showCodeModal\" @close=\"showCodeModal = false\">\n      <template v-slot:header>Your Code</template>\n      <template v-slot:body><Code /></template>\n    </Modal>\n  </aside>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, toRefs, reactive } from \"vue\";\nimport { mapState, mapMutations } from \"vuex\";\nimport Modal from \"@/components/Modal.vue\";\nimport Code from '@/components/Code.vue';\n\n\nexport default defineComponent({\n  setup() {\n    const state = reactive({\n      showCodeModal: false,\n    });\n    return {\n      ...toRefs(state),\n    };\n  },\n  components: {\n    Modal,\n\n    Code\n  },\n  watch: {\n    columns(newv, oldv) {\n      const payload = {\n        newv,\n        oldv,\n        direction: \"columnArr\",\n      };\n      this.adjustArr(payload);\n    },\n    rows(newv, oldv) {\n      const payload = {\n        newv,\n        oldv,\n        direction: \"rowArr\",\n      };\n      this.adjustArr(payload);\n    },\n  },\n  computed: {\n    ...mapState([\"columns\", \"rows\", \"columnGap\", \"rowGap\"]),\n  },\n  methods: {\n    ...mapMutations([\n      \"updateColumns\",\n      \"updateRows\",\n      \"updateColumnGap\",\n      \"updateRowGap\",\n      \"adjustArr\",\n    ]),\n  },\n});\n</script>\n\n<style scoped></style>\n","<template>\n  <!-- <div class=\"modal\"> -->\n  <div class=\"modal__mask\">\n    <div class=\"modal__wrapper\">\n      <header class=\"modal__header\">\n        <slot name=\"header\"></slot>\n      </header>\n      <section class=\"modal__body\">\n        <slot name=\"body\"></slot>\n      </section>\n      <button @click=\"$emit('close')\">Close</button>\n    </div>\n  </div>\n  <!-- </div> -->\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  setup() {\n    return {};\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.modal {\n  &__mask {\n    position: fixed;\n    top: 0;\n    width: 100vw;\n    height: 100vh;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    backdrop-filter: blur(10px);\n  }\n  &__wrapper {\n    width: 41rem;\n    height: 40rem;\n    border: black solid .2em;\n    outline: black solid 0.5em;\n    outline-offset: 1em;\n  }\n}\n</style>\n","\nimport { defineComponent } from \"vue\";\n\nexport default defineComponent({\n  setup() {\n    return {};\n  },\n});\n","import { render } from \"./Modal.vue?vue&type=template&id=35462762&scoped=true\"\nimport script from \"./Modal.vue?vue&type=script&lang=ts\"\nexport * from \"./Modal.vue?vue&type=script&lang=ts\"\n\nimport \"./Modal.vue?vue&type=style&index=0&id=35462762&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-35462762\"\n\nexport default script","<template>\n  <div>\n    <button @click.stop.prevent=\"copy\">\n      {{ codeWasCopied ? \"copied\" : 'copy' }}\n    </button>\n    <button @click.stop.prevent=\"showHtml = !showHtml\">showHtml</button>\n\n    <div class=\"code\" ref=\"code\">\n      <section v-if=\"showHtml\">\n        <textarea class=\"codearea\" :value=\"createHtml()\"> </textarea>\n      </section>\n      <section v-else>\n        <textarea class=\"codearea\" :value=\"createCSS()\"> </textarea>\n      </section>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, reactive, toRefs } from \"vue\";\nimport { mapState, mapGetters } from \"vuex\";\n\nexport default defineComponent({\n  setup() {\n    const state = reactive({\n      showHtml: false,\n      codeWasCopied: false,\n    });\n    return { ...toRefs(state) };\n  },\n\n  computed: {\n    ...mapState([\"childarea\"]),\n    ...mapGetters([\"templateCol\", \"templateRow\", \"divCount\"]),\n  },\n  methods: {\n    createHtml() {\n      return `<div class=\"grid\">\\n  ${this.childarea\n        .map((child: string, i: number) => `<div class=\"div${i + 1}\"></div>`)\n        .join(`\\n  `)}\\n</div>`;\n    },\n    createCSS() {\n      return `\n.parent {\n  display: grid;\n  grid-template-columns: ${this.templateCol};\n  grid-template-rows: ${this.templateRow};\n  grid-column-gap: 0px;\n  grid-row-gap: 0px;\n}\n\n${this.childarea\n  .map((child: string, i: number) => `.div${i + 1} { grid-area: ${child}; }`)\n  .join(\"\\n\")}\n`;\n    },\n    copy() {\n      const code = this.$refs.code as Node;\n      const selection = window.getSelection() as Selection;\n      const range = document.createRange();\n      range.selectNodeContents(code);\n      selection.removeAllRanges();\n      selection.addRange(range);\n\n      let copied = document.execCommand(\"copy\");\n      if (copied) {\n        this.codeWasCopied = true;\n        setTimeout(() => {\n          this.codeWasCopied = false;\n        }, 3000);\n      }\n    },\n  },\n});\n</script>\n\n<style scoped>\n.codearea {\n  border: black solid 1px;\n  width: 400px;\n  height: 200px;\n}\n</style>\n","\nimport { defineComponent, reactive, toRefs } from \"vue\";\nimport { mapState, mapGetters } from \"vuex\";\n\nexport default defineComponent({\n  setup() {\n    const state = reactive({\n      showHtml: false,\n      codeWasCopied: false,\n    });\n    return { ...toRefs(state) };\n  },\n\n  computed: {\n    ...mapState([\"childarea\"]),\n    ...mapGetters([\"templateCol\", \"templateRow\", \"divCount\"]),\n  },\n  methods: {\n    createHtml() {\n      return `<div class=\"grid\">\\n  ${this.childarea\n        .map((child: string, i: number) => `<div class=\"div${i + 1}\"></div>`)\n        .join(`\\n  `)}\\n</div>`;\n    },\n    createCSS() {\n      return `\n.parent {\n  display: grid;\n  grid-template-columns: ${this.templateCol};\n  grid-template-rows: ${this.templateRow};\n  grid-column-gap: 0px;\n  grid-row-gap: 0px;\n}\n\n${this.childarea\n  .map((child: string, i: number) => `.div${i + 1} { grid-area: ${child}; }`)\n  .join(\"\\n\")}\n`;\n    },\n    copy() {\n      const code = this.$refs.code as Node;\n      const selection = window.getSelection() as Selection;\n      const range = document.createRange();\n      range.selectNodeContents(code);\n      selection.removeAllRanges();\n      selection.addRange(range);\n\n      let copied = document.execCommand(\"copy\");\n      if (copied) {\n        this.codeWasCopied = true;\n        setTimeout(() => {\n          this.codeWasCopied = false;\n        }, 3000);\n      }\n    },\n  },\n});\n","import { render } from \"./Code.vue?vue&type=template&id=651868a2&scoped=true\"\nimport script from \"./Code.vue?vue&type=script&lang=ts\"\nexport * from \"./Code.vue?vue&type=script&lang=ts\"\n\nimport \"./Code.vue?vue&type=style&index=0&id=651868a2&scoped=true&lang=css\"\nscript.render = render\nscript.__scopeId = \"data-v-651868a2\"\n\nexport default script","\nimport { defineComponent, toRefs, reactive } from \"vue\";\nimport { mapState, mapMutations } from \"vuex\";\nimport Modal from \"@/components/Modal.vue\";\nimport Code from '@/components/Code.vue';\n\n\nexport default defineComponent({\n  setup() {\n    const state = reactive({\n      showCodeModal: false,\n    });\n    return {\n      ...toRefs(state),\n    };\n  },\n  components: {\n    Modal,\n\n    Code\n  },\n  watch: {\n    columns(newv, oldv) {\n      const payload = {\n        newv,\n        oldv,\n        direction: \"columnArr\",\n      };\n      this.adjustArr(payload);\n    },\n    rows(newv, oldv) {\n      const payload = {\n        newv,\n        oldv,\n        direction: \"rowArr\",\n      };\n      this.adjustArr(payload);\n    },\n  },\n  computed: {\n    ...mapState([\"columns\", \"rows\", \"columnGap\", \"rowGap\"]),\n  },\n  methods: {\n    ...mapMutations([\n      \"updateColumns\",\n      \"updateRows\",\n      \"updateColumnGap\",\n      \"updateRowGap\",\n      \"adjustArr\",\n    ]),\n  },\n});\n","import { render } from \"./Form.vue?vue&type=template&id=2c7cadf4\"\nimport script from \"./Form.vue?vue&type=script&lang=ts\"\nexport * from \"./Form.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script","<template>\n  <main>\n    <div\n      class=\"column-unit\"\n      :style=\"{\n        gridTemplateColumns: templateCol,\n        columnGap: columnGap,\n      }\"\n    >\n      <div v-for=\"(col, index) in columnArr\" :key=\"index\">\n        <input type=\"text\" name=\"col\" v-model.lazy=\"col.unit\" />\n      </div>\n    </div>\n\n    <div\n      class=\"row-unit\"\n      :style=\"{\n        gridTemplateRows: templateRow,\n        rowGap: rowGap,\n      }\"\n    >\n      <div v-for=\"(row, index) in rowArr\" :key=\"index\">\n        <input type=\"text\" name=\"row\" v-model.lazy=\"row.unit\" />\n      </div>\n    </div>\n\n    <div class=\"grid-container\">\n      <section\n        class=\"grid\"\n        :style=\"{\n          gridTemplateRows: templateRow,\n          gridTemplateColumns: templateCol,\n          rowGap: rowGap,\n          columnGap: columnGap,\n        }\"\n      >\n        <div\n          class=\"grid__child\"\n          v-for=\"item in divCount\"\n          :key=\"item\"\n          @mousedown=\"placeChild(item, 'down')\"\n          @mouseup=\"placeChild(item, 'up')\"\n        >\n          <span style=\"opacity: 0\">{{ item }}</span>\n        </div>\n      </section>\n      <section\n        class=\"grid grid--placechild\"\n        :style=\"{\n          gridTemplateRows: templateRow,\n          gridTemplateColumns: templateCol,\n          rowGap: rowGap,\n          columnGap: columnGap,\n        }\"\n      >\n        <div\n          class=\"child__child grid__child--placechild\"\n          v-for=\"(child, i) in childarea\"\n          :key=\"child\"\n          :style=\"{ gridArea: child }\"\n        >\n          <button @click=\"removeChildarea(i)\">remove</button>\n        </div>\n      </section>\n    </div>\n  </main>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, reactive } from \"vue\";\nimport { mapState, mapGetters } from \"vuex\";\nimport { mapMutations } from \"vuex\";\n\nexport default defineComponent({\n  setup() {\n    const state = reactive({\n      place: { downRow: 0, downColumn: 0, upRow: 0, upColumn: 0 },\n    });\n    return {\n      state,\n    };\n  },\n  computed: {\n    ...mapGetters([\"templateCol\", \"templateRow\", \"divCount\"]),\n    ...mapState([\n      \"columns\",\n      \"rows\",\n      \"columnGap\",\n      \"rowGap\",\n      \"columnArr\",\n      \"rowArr\",\n      \"childarea\",\n    ]),\n  },\n  methods: {\n    placeChild(item: number, action: \"down\" | \"up\") {\n      this.state.place[`${action}Row` as \"downRow\" | \"upRow\"] = Math.ceil(\n        item / this.columns\n      );\n      this.state.place[`${action}Column` as \"downRow\" | \"upColumn\"] =\n        Math.floor(\n          item -\n            (this.state.place[`${action}Row` as \"downRow\" | \"upRow\"] - 1) *\n              this.columns\n        );\n\n      if (action === \"up\") {\n        let [startRow, endRow] =\n          this.state.place.downRow > this.state.place.upRow\n            ? [this.state.place.upRow, this.state.place.downRow]\n            : [this.state.place.downRow, this.state.place.upRow];\n        let [startColumn, endColumn] =\n          this.state.place.downColumn > this.state.place.upColumn\n            ? [this.state.place.upColumn, this.state.place.downColumn]\n            : [this.state.place.downColumn, this.state.place.upColumn];\n\n        console.log({ startRow, endRow, startColumn, endColumn });\n        this.addChildarea(\n          `${startRow} / ${startColumn} / ${endRow + 1} / ${endColumn + 1}`\n        );\n      }\n    },\n    ...mapMutations([\n      \"addChildarea\", //also supports payload `this.nameOfMutation(amount)`\n      \"removeChildarea\",\n    ]),\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\nmain {\n  width: 900px;\n  height: 700px;\n  display: grid;\n  grid-template-rows: 100px 1fr;\n  grid-template-columns: 100px 1fr;\n}\n.column-unit {\n  grid-row: 1 / 2;\n  grid-column: 2 / 3;\n\n  display: grid;\n}\n.row-unit {\n  grid-column: 1 /2;\n  grid-row: 2 /3;\n  width: 100px;\n  display: grid;\n\n  div {\n    display: flex;\n    align-items: center;\n  }\n}\n.grid-container {\n  grid-row: 2 /3;\n  grid-column: 2 /3;\n  display: grid;\n  width: 800px;\n  height: 600px;\n}\n\n@mixin colors($max, $color-frequency) {\n  $color: 300 / $max;\n\n  // fruit loops!\n  @for $i from 1 through $max {\n    div[class*=\"grid__child--placechild\"]:nth-child(#{$i}) {\n      background: hsla(($i - 15) * ($color * 1.5), 80%, 30%, 0.5);\n      border: 1px solid #ddd;\n    }\n  }\n}\n\n.grid {\n  display: grid;\n  grid-row: 1 / -1;\n  grid-column: 1 / -1;\n  @include colors(20, 100);\n  &__child {\n    border: 2px dashed black;\n    cursor: move;\n    span {\n      user-select: none;\n    }\n  }\n  &--placechild {\n    counter-reset: childrentCount;\n    pointer-events: none;\n  }\n  &__child--placechild {\n    counter-increment: childrentCount;\n    pointer-events: none;\n    display: flex;\n    align-items: flex-start;\n    &::before {\n      content: \"div\" counter(childrentCount);\n    }\n    button {\n      pointer-events: auto;\n      cursor: pointer;\n      margin-left: auto;\n    }\n  }\n}\ninput {\n  width: 45px;\n  height: 30px;\n}\n</style>\n","\nimport { defineComponent, reactive } from \"vue\";\nimport { mapState, mapGetters } from \"vuex\";\nimport { mapMutations } from \"vuex\";\n\nexport default defineComponent({\n  setup() {\n    const state = reactive({\n      place: { downRow: 0, downColumn: 0, upRow: 0, upColumn: 0 },\n    });\n    return {\n      state,\n    };\n  },\n  computed: {\n    ...mapGetters([\"templateCol\", \"templateRow\", \"divCount\"]),\n    ...mapState([\n      \"columns\",\n      \"rows\",\n      \"columnGap\",\n      \"rowGap\",\n      \"columnArr\",\n      \"rowArr\",\n      \"childarea\",\n    ]),\n  },\n  methods: {\n    placeChild(item: number, action: \"down\" | \"up\") {\n      this.state.place[`${action}Row` as \"downRow\" | \"upRow\"] = Math.ceil(\n        item / this.columns\n      );\n      this.state.place[`${action}Column` as \"downRow\" | \"upColumn\"] =\n        Math.floor(\n          item -\n            (this.state.place[`${action}Row` as \"downRow\" | \"upRow\"] - 1) *\n              this.columns\n        );\n\n      if (action === \"up\") {\n        let [startRow, endRow] =\n          this.state.place.downRow > this.state.place.upRow\n            ? [this.state.place.upRow, this.state.place.downRow]\n            : [this.state.place.downRow, this.state.place.upRow];\n        let [startColumn, endColumn] =\n          this.state.place.downColumn > this.state.place.upColumn\n            ? [this.state.place.upColumn, this.state.place.downColumn]\n            : [this.state.place.downColumn, this.state.place.upColumn];\n\n        console.log({ startRow, endRow, startColumn, endColumn });\n        this.addChildarea(\n          `${startRow} / ${startColumn} / ${endRow + 1} / ${endColumn + 1}`\n        );\n      }\n    },\n    ...mapMutations([\n      \"addChildarea\", //also supports payload `this.nameOfMutation(amount)`\n      \"removeChildarea\",\n    ]),\n  },\n});\n","import { render } from \"./Grid.vue?vue&type=template&id=54aa1893&scoped=true\"\nimport script from \"./Grid.vue?vue&type=script&lang=ts\"\nexport * from \"./Grid.vue?vue&type=script&lang=ts\"\n\nimport \"./Grid.vue?vue&type=style&index=0&id=54aa1893&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-54aa1893\"\n\nexport default script","import { createStore, Store as VuexStore } from \"vuex\";\n\ntype unit = { unit: string };\n// type place = {\n//   [key in \"downRow\" | \"downColumn\" | \"upRow\" | \"upColumn\"]: number;\n// };\n\nexport type State = {\n  columns: number;\n  rows: number;\n  columnGap: string;\n  rowGap: string;\n  columnArr: unit[];\n  rowArr: unit[];\n  childarea: string[];\n};\n\n\n\nexport type Mutations<S = State> = {\n  updateColumns(state: S, payload: number): void,\n  updateRows(state: S, payload: number): void,\n  updateColumnGap(state: S, payload: string): void,\n  updateRowGap(state: S, payload: string): void\n  adjustArr(state: S, payload: { newv: number; oldv: number; direction: \"columnArr\" | \"rowArr\" }): void,\n  addChildarea(state: S, payload: string): void,\n  removeChildarea(state: S, payload: number): void,\n}\n\nexport type Getters<S = State> = {\n  divCount(state: S): number,\n  templateCol(state: S): string,\n  templateRow(state: S): string,\n}\n\n\nexport type Store = Omit<\n  VuexStore<State>,\n  'getters' | 'commit' | 'dispatch'\n> & {\n  commit<K extends keyof Mutations, P extends Parameters<Mutations[K]>[1]>(\n    key: K,\n    payload: P \n  ): ReturnType<Mutations[K]>\n}& {\n  getters: {\n    [K in keyof Getters]: ReturnType<Getters[K]>\n  }\n}\n\n\n\n\n\n\nexport const store = createStore<State>({\n  state: {\n    columns: 5,\n    rows: 5,\n    columnGap: '0',\n    rowGap: '0',\n    columnArr: [],\n    rowArr: [],\n    childarea: [],\n  },\n  mutations: {\n    updateColumns(state: State, payload: number) {\n      state.columns = payload;\n    },\n    updateRows(state: State, payload: number) {\n      state.rows = payload;\n    },\n    updateColumnGap(state: State, payload: string) {\n      state.columnGap = payload;\n    },\n    updateRowGap(state: State, payload: string) {\n      state.rowGap = payload;\n    },\n    adjustArr(\n      state: State,\n      payload: { newv: number; oldv: number; direction: \"columnArr\" | \"rowArr\" } \n    ) {\n      const difference = Math.abs(payload.newv - payload.oldv);\n\n      console.log({ payload, difference });\n      if (payload.newv > payload.oldv) {\n        state[payload.direction].push(\n          ...Array.from({ length: difference }, () => ({ unit: \"1fr\" }))\n        );\n      } else {\n        state[payload.direction].splice(payload.newv - 1, difference);\n      }\n    },\n    addChildarea(state: State, payload: string) {\n      state.childarea.push(payload);\n    },\n    removeChildarea(state: State, payload: number) {\n      console.log(payload)\n      state.childarea.splice(payload, 1);\n    },\n  },\n  getters: {\n    divCount(state: State) {\n      return state.columns * state.rows;\n    },\n    templateCol(state: State) {\n      return createRepeat(groupRepeat(state.columnArr));\n    },\n    templateRow(state: State) {\n      return createRepeat(groupRepeat(state.rowArr));\n    },\n  },\n  actions: {},\n  modules: {},\n});\n\n\n\nfunction groupRepeat(template: unit[]): string[][] {\n  return template\n    .map((it) => it.unit)\n    .reduce((acc: string[][], cur) => {\n      const last: string[] = acc[acc.length - 1] || [];\n      if (last.includes(cur)) {\n        last.push(cur);\n        return acc;\n      } else {\n        acc.push([cur]);\n        return acc;\n      }\n    }, []);\n}\n\nfunction createRepeat(group: string[][]): string {\n  return group\n    .flatMap((g) => (g.length > 1 ? `repeat(${g.length}, ${g[0]})` : g))\n    .join(\" \");\n}\n\nexport function useStore() {\n  return store as Store\n}","\nimport Form from \"@/components/Form.vue\";\nimport { defineComponent } from \"vue\";\nimport Grid from \"@/components/Grid.vue\";\nimport { useStore } from \"./store/index\";\n\nexport default defineComponent({\n  name: \"App\",\n  components: {\n    Form,\n    Grid,\n  },\n  setup() {\n    const store = useStore();\n    console.log(store)\n    store.state.columnArr.push(\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" }\n    );\n    store.state.rowArr.push(\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" },\n      { unit: \"1fr\" }\n    );\n  },\n});\n","import { render } from \"./App.vue?vue&type=template&id=f5d4dea2\"\nimport script from \"./App.vue?vue&type=script&lang=ts\"\nexport * from \"./App.vue?vue&type=script&lang=ts\"\n\nimport \"./App.vue?vue&type=style&index=0&id=f5d4dea2&lang=scss\"\nscript.render = render\n\nexport default script","import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport { store } from \"./store\";\n\ncreateApp(App).use(store).mount(\"#app\");\n","export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader-v16/dist/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./App.vue?vue&type=style&index=0&id=f5d4dea2&lang=scss\""],"sourceRoot":""}