[{"data":1,"prerenderedAt":184},["ShallowReactive",2],{"cycle-doc-qmap-c18-control-components.md":3},{"cycle":4,"project":7,"path":10,"title":11,"toc":12,"ast":17},{"id":5,"title":6},"c18","Control Components",{"id":8,"label":9},"qmap","Qmap","control-components.md","Components",[13,14,15,16],"Component structure:","Configurator","Category","Property",{"type":18,"children":19},"root",[20,28,86,91,103,109],{"type":21,"tag":22,"props":23,"children":24},"element","p",{},[25],{"type":26,"value":27},"text","c16: I like the start here, but want to make a better view context configurator.",{"type":21,"tag":29,"props":30,"children":31},"ul",{},[32,38,43],{"type":21,"tag":33,"props":34,"children":35},"li",{},[36],{"type":26,"value":37},"Let's create a component that can be opened at any time that contains all the properties that can be configured.",{"type":21,"tag":33,"props":39,"children":40},{},[41],{"type":26,"value":42},"Let's create better patterns for reusable compoents, qflow will use these same components for a similar purpose",{"type":21,"tag":33,"props":44,"children":45},{},[46,48],{"type":26,"value":47},"We are doing something very similar ..\u002Fq-nuxt-layer\n",{"type":21,"tag":29,"props":49,"children":50},{},[51,73],{"type":21,"tag":33,"props":52,"children":53},{},[54,56],{"type":26,"value":55},"see : components\u002Fdev\u002Fmeta\u002FPropsMachine.vue\n",{"type":21,"tag":29,"props":57,"children":58},{},[59],{"type":21,"tag":33,"props":60,"children":61},{},[62,64,71],{"type":26,"value":63},"note the structure of ",{"type":21,"tag":65,"props":66,"children":68},"code",{"className":67},[],[69],{"type":26,"value":70},"adminProps",{"type":26,"value":72}," in sister project : ..\u002Fdesign\u002Fapp\u002Fpages\u002Fcomponents\u002F_demos\u002FDataMetric_Base.vue",{"type":21,"tag":33,"props":74,"children":75},{},[76,78,84],{"type":26,"value":77},"by just passing an object to DevCanvas (",{"type":21,"tag":65,"props":79,"children":81},{"className":80},[],[82],{"type":26,"value":83},"adminProps \u002F localAdminProps",{"type":26,"value":85},"), we get an entire UI",{"type":21,"tag":22,"props":87,"children":88},{},[89],{"type":26,"value":90},"Data structure:",{"type":21,"tag":92,"props":93,"children":97},"pre",{"className":94,"code":96,"language":26},[95],"language-text","data:\n  category:\n    property: \u003CBoolean> - Renders a toggle\n    property: \u003CSelect> [option1, option2, option3] - Renders Select\n    property: \u003CColor> - Renders Color picker\n    property: \u003CText> - Renders textfield\n    property: \u003CRange> - Renders a slider between two numbers\n    etc\n",[98],{"type":21,"tag":65,"props":99,"children":101},{"__ignoreMap":100},"",[102],{"type":26,"value":96},{"type":21,"tag":104,"props":105,"children":107},"h2",{"id":106},"component-structure",[108],{"type":26,"value":13},{"type":21,"tag":110,"props":111,"children":112},"configurator",{},[113,115,116,128],{"type":26,"value":114},"\n  ",{"type":26,"value":114},{"type":21,"tag":117,"props":118,"children":119},"configcategory",{},[120,122,123],{"type":26,"value":121},"\n    ",{"type":26,"value":121},{"type":21,"tag":124,"props":125,"children":126},"configproperty",{},[127],{"type":26,"value":114},{"type":21,"tag":110,"props":129,"children":130},{},[131,135,148,153,171,176],{"type":21,"tag":104,"props":132,"children":133},{"id":110},[134],{"type":26,"value":14},{"type":21,"tag":29,"props":136,"children":137},{},[138,143],{"type":21,"tag":33,"props":139,"children":140},{},[141],{"type":26,"value":142},"Simple layout of categories–probably horizontal",{"type":21,"tag":33,"props":144,"children":145},{},[146],{"type":26,"value":147},"easy show \u002F hide functionality for entire config panel",{"type":21,"tag":104,"props":149,"children":151},{"id":150},"category",[152],{"type":26,"value":15},{"type":21,"tag":29,"props":154,"children":155},{},[156,161,166],{"type":21,"tag":33,"props":157,"children":158},{},[159],{"type":26,"value":160},"title property",{"type":21,"tag":33,"props":162,"children":163},{},[164],{"type":26,"value":165},"vertically stacked set of properties",{"type":21,"tag":33,"props":167,"children":168},{},[169],{"type":26,"value":170},"eash show \u002F hide functinality for category",{"type":21,"tag":104,"props":172,"children":174},{"id":173},"property",[175],{"type":26,"value":16},{"type":21,"tag":29,"props":177,"children":178},{},[179],{"type":21,"tag":33,"props":180,"children":181},{},[182],{"type":26,"value":183},"presents a UI to edit a particular property",1794599433917]