@mixd-id/web-scaffold 0.1.230406197 → 0.1.230406199

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406197",
+  "version": "0.1.230406199",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Button.vue

@@ -107,7 +107,12 @@ export default{
 						break
 
 					default:
-						this.$router.push(this.target)
+            if(this.target.indexOf('://') >= 0){
+              window.location = this.target
+            }
+            else{
+              this.$router.push(this.target)
+            }
 						break
 				}
 			}

package/src/components/Carousel.vue

@@ -360,21 +360,24 @@ export default{
 	@apply bg-primary-500;
 }
 
-.htmlNoScroll{
-  min-height: 100.3%;
-  overscroll-behavior-y: none;
-  height: 100%;
-  overflow: hidden;
-}
-.bodyNoScroll{
-  overscroll-behavior: none;
-  overscroll-behavior-y: none;
-  overflow: hidden;
-  position: fixed;
-  width: 100%;
-  margin: 0;
-  max-height: 100%;
-  -webkit-overflow-scrolling: touch;
+@media screen and (max-width: 768px){
+  .htmlNoScroll{
+    min-height: 100.3%;
+    overscroll-behavior-y: none;
+    height: 100%;
+    overflow: hidden;
+  }
+  .bodyNoScroll{
+    overscroll-behavior: none;
+    overscroll-behavior-y: none;
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+    margin: 0;
+    max-height: 100%;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
+
 </style>

package/src/components/Image.vue

@@ -13,6 +13,7 @@
       </div>
     </slot>
 
+    <div v-else-if="status === 2 && actualSrc.indexOf('<svg') >= 0" v-html="actualSrc"></div>
     <img v-else-if="status === 2" :class="computedItemClass" :src="actualSrc" ref="img" />
 
 		<slot v-else-if="status === 3" name="error" :instance="this"></slot>
@@ -145,6 +146,10 @@ export default{
 					this.actualSrc = this.src
 					this.status = 2
 				}
+        else if(this.src.indexOf('<svg') >= 0){
+          this.actualSrc = this.src
+          this.status = 2
+        }
 				else{
 					const src = {}
 
@@ -231,6 +236,9 @@ export default{
 				reader.readAsDataURL(this.src)
 				this.status = 1
 			}
+      else{
+        this.status = 0
+      }
 		},
 
 		onClick(){

package/src/components/Modal.vue

@@ -79,6 +79,8 @@ export default{
 
     height: String,
 
+    dock: String,
+
     position: {
 			type: String,
 			default: 'bottom'
@@ -167,7 +169,7 @@ export default{
     computedClass(){
       return [
         this.$style.modal,
-				this.$style['modal-' + this.position],
+				this.$style['modal-' + (this.dock ?? this.position)],
         this.class,
         this.mode === 'v-show' ? this.$style['v-show'] : '',
         this.computedState ? this.$style.open : ''
@@ -188,7 +190,7 @@ export default{
         return this.transition
       }
       else{
-        switch(this.position){
+        switch(this.dock ?? this.position){
           case 'top':
             return 'slidedown'
           case 'bottom':

package/src/widgets/ComponentSetting.vue

@@ -1460,10 +1460,16 @@ export default{
         aspectRatio: [
           [ 'Square', 'aspect-square' ],
           [ '2/1', 'aspect-[2/1]' ],
+          [ '3/1', 'aspect-[3/1]' ],
           [ '4/1', 'aspect-[4/1]' ],
           [ '4/3', 'aspect-[4/3]' ],
+          [ '5/1', 'aspect-[5/1]' ],
+          [ '6/1', 'aspect-[6/1]' ],
+          [ '7/1', 'aspect-[7/1]' ],
+          [ '8/1', 'aspect-[8/1]' ],
           [ '8/3', 'aspect-[8/3]' ],
           [ '8/5.6', 'aspect-[8/5.6]' ],
+          [ '9/1', 'aspect-[9/1]' ],
           [ 'Video (16:9)', 'aspect-video' ],
           [ '1/2', 'aspect-[1/2]' ],
           [ '2/3', 'aspect-[2/3]' ],

package/src/widgets/ContactForm.vue

@@ -1,11 +1,11 @@
 <template>
 	<div :class="$style.comp" v-if="state === 1" :style="computedStyle">
 
-		<div class="flex flex-col gap-1">
-			<h2 v-if="title">{{ title }}</h2>
-			<p v-if="description" v-html="description"></p>
+    <div v-if="title || description" class="flex flex-col gap-1">
+      <h2 v-if="title">{{ title }}</h2>
+      <p v-if="description" v-html="description"></p>
       <CitySelector ref="citySelector" @change="setCity"/>
-		</div>
+    </div>
 
 		<div class="flex flex-col gap-4">
 			<div v-for="field in fields">
@@ -25,7 +25,7 @@
 
 					<Dropdown v-else-if="field.type === 'topic'" v-model="form[field.type]"
 									 class="bg-white text-xl md:w-[200px] max-w-full">
-            <option value="" disabled selected>Pilih Topik Pertanyaan</option>
+            <option value="" disabled selected>{{ field.placeholder ? field.placeholder : 'Pilih Topik Pertanyaan' }}</option>
             <option v-for="item in field.items" :value="item.text">{{ item.text }}</option>
           </Dropdown>
 
@@ -34,9 +34,11 @@
 			</div>
 		</div>
 
-		<Button ref="submitBtn" class="w-full" @click="submitForm" :state="!canSubmit ? -1 : 1">
-			<h5>Kirim</h5>
-		</Button>
+		<div>
+      <Button ref="submitBtn" class="w-full" @click="submitForm" :state="!canSubmit ? -1 : 1">
+        <h5>Kirim</h5>
+      </Button>
+    </div>
 
 	</div>
   <div :class="$style.comp" class="" v-else-if="state === 2">
@@ -152,9 +154,9 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 w-full max-w-[480px] min-h-[480px] mx-auto rounded-lg overflow-hidden;
+	@apply flex-1 w-full max-w-[480px] mx-auto rounded-lg overflow-hidden;
   @apply border-text-200 border-[1px] p-6;
-	@apply flex flex-col justify-center gap-8 bg-base;
+	@apply flex flex-col gap-12 bg-base;
 }
 
 </style>

package/src/widgets/ContactFormSetting.vue

@@ -205,6 +205,10 @@
       <template v-slot:head>
         <div class="relative p-5">
           <h3>Topic</h3>
+
+          <button type="button" class="absolute right-0 top-0 p-3" @click="$refs.topicModal.close()">
+            <svg width="18" height="18" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
+          </button>
         </div>
       </template>
       <template #foot="{ context }">
@@ -213,32 +217,48 @@
         </div>
       </template>
       <template #default="{ context }">
-        <div class="flex-1 p-5 flex flex-col gap-6">
-
-          <ListItem :items="context.items"
-                    @reorder="(from, to) => { context.items.splice(to, 0, context.items.splice(from, 1)[0]); }"
-                    body-class="flex flex-col divide-y divide-text-200">
-            <template v-slot="{ item, index }">
-              <div class="flex flex-row items-center gap-3">
-                <div data-reorder>
-                  <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
-                </div>
-                <div class="flex-1">
-                  <Textbox v-model="item.text" class="border-none" placeholder="Topic Name" />
-                </div>
-                <div>
-                  <button type="button" @click="context.items.splice(index, 1)">
-                    <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
-                  </button>
+        <div class="flex-1 p-5 flex flex-col gap-4">
+
+          <div>
+            <label class="text-text-400">Label</label>
+            <Textbox v-model="context.label" />
+          </div>
+
+          <div>
+            <label class="text-text-400">Items</label>
+            <ListItem :items="context.items"
+                      @reorder="(from, to) => { context.items.splice(to, 0, context.items.splice(from, 1)[0]); }"
+                      body-class="flex flex-col divide-y divide-text-200 border-[1px] border-text-200 mt-1">
+              <template v-slot="{ item, index }">
+                <div class="flex flex-row items-center gap-3 px-3">
+                  <div data-reorder>
+                    <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+                  </div>
+                  <div class="flex-1">
+                    <Textbox v-model="item.text" class="border-none" placeholder="Topic Name" />
+                  </div>
+                  <div>
+                    <button type="button" @click="context.items.splice(index, 1)">
+                      <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                    </button>
+                  </div>
                 </div>
-              </div>
-            </template>
-          </ListItem>
+              </template>
+            </ListItem>
+
+            <div class="text-center">
+              <button type="button" class="text-primary p-3" @click="context.items.push({})">Add Item</button>
+            </div>
+          </div>
 
-          <div class="text-center">
-            <button type="button" class="text-primary" @click="context.items.push({})">Add Topic</button>
+          <div>
+            <label class="text-text-400">Placeholder</label>
+            <Textbox v-model="context.placeholder" />
           </div>
 
+          <br />
+          <br />
+
         </div>
       </template>
     </Modal>

package/src/widgets/ModalSetting.vue

@@ -20,7 +20,7 @@
         <div class="col-span-2 flex flex-row items-center">
           <label :class="$style.label" class="flex-1">Position</label>
           <div class="flex flex-row items-center gap-1">
-            <Dropdown v-model="position">
+            <Dropdown v-model="item.props.dock">
               <option disabled selected>Choose Position</option>
               <option value="center">Center</option>
               <option value="top">Top</option>
@@ -72,13 +72,6 @@ export default{
 
   computed: {
 
-    position(){
-      if(!Array.isArray(this.item.props.position))
-        this.item.props.position = []
-
-      return this.item.props.position
-    }
-
   }
 
 }

package/src/widgets/StyleSetting.vue

@@ -135,13 +135,36 @@
       </div>
     </div>
 
-    <div class="p-6 text-center">
-      <button type="button" class="text-primary" @click="resetMedia">Reset</button>
+    <div>
+
+      <div class="flex flex-row gap-4 items-center cursor-pointer">
+        <strong class="flex-1 text-text-400">Splash</strong>
+      </div>
+
+      <div class="mt-1 flex flex-col items-center gap-2">
+        <Image ref="splashImg"
+               :src="item.props.splash"
+               :editable="true"
+               @change="setSplash"
+               class="aspect-square bg-text-50 rounded-lg w-[100px]" />
+
+        <div class="flex flex-row gap-8">
+          <button type="button" class="text-primary"
+                  @click="$refs.splashImg.edit()">
+            Upload
+          </button>
+          <button type="button" class="text-primary"
+                  @click="removeSplash">
+            Remove
+          </button>
+        </div>
+      </div>
+
     </div>
 
-    <pre class="text-xs">
-      {{ media }}
-    </pre>
+    <div class="p-6 text-center">
+      <button type="button" class="text-primary" @click="resetMedia">Reset to Default Style</button>
+    </div>
 
 	</div>
 </template>
@@ -211,6 +234,26 @@ export default{
         this.item.props.media[key] = { '*': {}, 'html, .html': {}, 'h1, h2, h3, h4, h5':{} }
       }
 
+    },
+
+    setSplash(base64, file){
+
+      if(file.type.indexOf('image/svg') >= 0){
+        const reader = new FileReader();
+
+        reader.onload = (e) => {
+          this.item.props.splash = e.target.result
+        };
+
+        reader.readAsText(file);
+      }
+      else{
+        this.item.props.splash = base64
+      }
+    },
+
+    removeSplash(){
+      this.item.props.splash = null
     }
 
 	},

package/src/widgets/WebDatasourceSelector.vue

@@ -19,45 +19,43 @@
 	  </template>
 	  <div class="flex-1 p-6 flex flex-col gap-4">
 
-			<div>
-				<label class="text-text-400">Name</label>
-        <Textbox v-model="datasource.name" />
-			</div>
-
-			<div>
-				<label class="text-text-400">Key</label>
-        <Textbox v-model="datasource.key" />
-			</div>
-
-			<div>
-				<label class="text-text-400">Model</label>
-        <Dropdown v-model="datasource.model">
+      <div>
+        <label class="text-text-400">Model</label>
+        <Dropdown v-model="datasource.type" @change="setType">
           <option disabled selected>Select Model</option>
-          <option v-for="model in models" :value="model.name">{{ model.name }}</option>
+          <option v-for="model in datasources" :value="model.type">{{ model.name }}</option>
         </Dropdown>
-			</div>
+      </div>
+
+      <div v-if="datasource.type">
 
-      <div>
-        <label class="text-text-400">Filters</label>
         <div>
-          <div v-for="(filter, idx) in datasource.filters" class="flex flex-row gap-2">
-            <Dropdown v-model="filter.key">
-              <option disabled selected>Choose Field</option>
-              <option v-for="column in modelColumns" :value="column.name">{{ column.name }}</option>
-            </Dropdown>
-            <Dropdown v-model="filter.operator">
-              <option disabled selected>Choose Operator</option>
-              <option value="=">=</option>
-            </Dropdown>
-            <Textbox v-model="filter.value" />
-            <button type="button" @click="datasource.filters.splice(idx, 1)">
-              <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
-            </button>
-          </div>
+          <label class="text-text-400">Key</label>
+          <Textbox v-model="datasource.key" />
         </div>
-        <div class="p-3 text-center">
-          <button type="button" class="text-primary"
-                  @click="datasource.filters.push({})">Add Filter</button>
+
+        <div v-if="datasource.filters">
+          <label class="text-text-400">Filters</label>
+          <div>
+            <div v-for="(filter, idx) in datasource.filters" class="flex flex-row gap-2">
+              <Dropdown v-model="filter.key">
+                <option disabled selected>Choose Field</option>
+                <option v-for="column in modelColumns" :value="column.name">{{ column.name }}</option>
+              </Dropdown>
+              <Dropdown v-model="filter.operator">
+                <option disabled selected>Choose Operator</option>
+                <option value="=">=</option>
+              </Dropdown>
+              <Textbox v-model="filter.value" />
+              <button type="button" @click="datasource.filters.splice(idx, 1)">
+                <svg width="14" height="14" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
+              </button>
+            </div>
+          </div>
+          <div class="p-3 text-center">
+            <button type="button" class="text-primary"
+                    @click="datasource.filters.push({})">Add Filter</button>
+          </div>
         </div>
       </div>
 
@@ -89,7 +87,7 @@ export default{
 		},
 
     create(){
-      this.datasource = { filters:[] }
+      this.datasource = {}
       this.isOpen = true
     },
 
@@ -102,12 +100,17 @@ export default{
       if(this.useDatasource){
         this.socketEmit2(this.useDatasource[0], {})
           .then(res => {
-            this.models = res.models
+            this.datasources = res.datasources
           })
           .catch(err => console.error(err))
       }
     },
 
+    setType(){
+      const datasource = this.datasources.filter(_ => _.type === this.datasource.type).pop()
+      Object.assign(this.datasource, datasource)
+    }
+
 	},
 
   mounted() {
@@ -117,13 +120,12 @@ export default{
   computed: {
 
     canApply(){
-      return this.datasource.name &&
-          this.datasource.key &&
-          this.datasource.model
+      return this.datasource.type &&
+          this.datasource.key
     },
 
     modelColumns(){
-      return (this.models.filter(_ => _.name === this.datasource.model).pop() ?? {}).columns ?? []
+      return (this.datasources.filter(_ => _.name === this.datasource.model).pop() ?? {}).columns ?? []
     }
 
   },
@@ -131,7 +133,7 @@ export default{
 	data(){
 		return {
 			isOpen: false,
-			models: null,
+			datasources: null,
       datasource: {
         filters: []
       },

package/src/widgets/WebPageBuilder.vue

@@ -540,8 +540,7 @@
                            @postMessageToIframe="onPostMessageToIframe"/>
               </div>
 
-
-              <div class="p-5 text-center" v-if="useTemplateCreator">
+              <div class="p-5 text-center" v-if="useTemplateCreator && currentItem.type !== 'Style'">
                 <button type="button" class="text-primary"
                         @click="openTemplateCreator">
                   Save as Template
@@ -670,7 +669,7 @@ export default{
 
       this.pageHistory.commit()
 
-      //this.store.selectedComponent = [ component.uid ]
+      this.store.selectedComponent = [ component.uid ]
 
       this.$refs.webPageComponentSelector.close()
     },
@@ -748,13 +747,11 @@ export default{
       }
 
       for(let key in component.props){
-        if(!this.compClasses.includes(key) && ![ 'enabled' ].includes(key)){
-
-          let value = component.props[key]
-          /*if(key === 'htmlText'){
-            value = removeStyleFromTag(value)
-          }*/
-          instance[key] = value
+        if(!this.compClasses.includes(key) &&
+            !this.containerClasses.includes(key) &&
+            !this.itemClasses.includes(key) &&
+            ![ 'enabled' ].includes(key)){
+          instance[key] = component.props[key]
         }
       }
 
@@ -1635,9 +1632,11 @@ export default{
         'textTransform', 'whitespace', 'textOverflow', 'textDecoration',
         'boxShadow', 'opacity',
         'colSpan', 'rowSpan',
-        'flex', 'flexAlign', 'flexJustify', 'zIndex',
+        'flex', 'flexAlign', 'flexJustify', 'flexBasis', 'flexColumns',
+        'zIndex',
 
         'autoFlow', 'alignItems', 'justifyContent',
+        'letterSpacing',
 
         'animate',
 
@@ -1646,12 +1645,12 @@ export default{
       containerClasses: [
         'containerVariant', 'containerGridColumn', 'containerGap'
       ],
-      host: null,
-      iframeStyle: {},
-      iframeSrc: '',
       itemClasses: [
         'itemMinWidth', 'itemRatio', 'itemVariant'
       ],
+      host: null,
+      iframeStyle: {},
+      iframeSrc: '',
       layouts: [],
       prevData: null,
       previewModes: [

package/tailwind.config.js

@@ -30,7 +30,8 @@ module.exports = {
 
     'justify-normal', 'justify-start', 'justify-end', 'justify-center', 'justify-between', 'justify-around', 'justify-evenly',
 
-    'aspect-[2/1]', 'aspect-[4/1]', 'aspect-[4/3]', 'aspect-[8/1]', 'aspect-[8/3]', 'aspect-[8/5.6]', 'aspect-video',
+    'aspect-[2/1]', 'aspect-[3/1]', 'aspect-[4/1]', 'aspect-[4/3]', 'aspect-[5/1]', 'aspect-[6/1]',  'aspect-[7/1]',
+    'aspect-[8/1]', 'aspect-[8/3]', 'aspect-[8/5.6]', 'aspect-[9/1]', 'aspect-video',
     'aspect-[1/2]', 'aspect-[2/3]', 'aspect-[3/4]', 'aspect-[8/9]',
 
     'hidden', 'block', 'inline-block', 'inline', 'flex', 'inline-flex', 'table', 'inline-table',
@@ -48,21 +49,21 @@ module.exports = {
     'overflow-x-hidden', 'overflow-y-auto', 'overflow-y-hidden', 'overflow-x-clip', 'overflow-y-clip', 'overflow-x-visible',
     'overflow-y-visible', 'overflow-x-scroll', 'overflow-y-scroll',
 
-    'p-1', 'p-2', 'p-3', 'p-4', 'p-5', 'p-6', 'p-7', 'p-8',
-    'px-1', 'px-2', 'px-3', 'px-4', 'px-5', 'px-6', 'px-7', 'px-8',
-    'py-1', 'py-2', 'py-3', 'py-4', 'py-5', 'py-6', 'py-7', 'py-8',
-    'pl-1', 'pl-2', 'pl-3', 'pl-4', 'pl-5', 'pl-6', 'pl-7', 'pl-8',
-    'pt-1', 'pt-2', 'pt-3', 'pt-4', 'pt-5', 'pt-6', 'pt-7', 'pt-8',
-    'pr-1', 'pr-2', 'pr-3', 'pr-4', 'pr-5', 'pr-6', 'pr-7', 'pr-8',
-    'pb-1', 'pb-2', 'pb-3', 'pb-4', 'pb-5', 'pb-6', 'pb-7', 'pb-8',
-
-    'm-1', 'm-2', 'm-3', 'm-4', 'm-5', 'm-6', 'm-7', 'm-8',
-    'mx-1', 'mx-2', 'mx-3', 'mx-4', 'mx-5', 'mx-6', 'mx-7', 'mx-8',
-    'my-1', 'my-2', 'my-3', 'my-4', 'my-5', 'my-6', 'my-7', 'my-8',
-    'ml-1', 'ml-2', 'ml-3', 'ml-4', 'ml-5', 'ml-6', 'ml-7', 'ml-8',
-    'mt-1', 'mt-2', 'mt-3', 'mt-4', 'mt-5', 'mt-6', 'mt-7', 'mt-8',
-    'mr-1', 'mr-2', 'mr-3', 'mr-4', 'mr-5', 'mr-6', 'mr-7', 'mr-8',
-    'mb-1', 'mb-2', 'mb-3', 'mb-4', 'mb-5', 'mb-6', 'mb-7', 'mb-8',
+    'p-1', 'p-2', 'p-3', 'p-4', 'p-5', 'p-6', 'p-7', 'p-8', 'p-9', 'p-10', 'p-11', 'p-12',
+    'px-1', 'px-2', 'px-3', 'px-4', 'px-5', 'px-6', 'px-7', 'px-8', 'px-9', 'px-10', 'px-11', 'px-12',
+    'py-1', 'py-2', 'py-3', 'py-4', 'py-5', 'py-6', 'py-7', 'py-8', 'py-9', 'py-10', 'py-11', 'py-12',
+    'pl-1', 'pl-2', 'pl-3', 'pl-4', 'pl-5', 'pl-6', 'pl-7', 'pl-8', 'pl-9', 'pl-10', 'pl-11', 'pl-12',
+    'pt-1', 'pt-2', 'pt-3', 'pt-4', 'pt-5', 'pt-6', 'pt-7', 'pt-8', 'pt-9', 'pt-10', 'pt-11', 'pt-12',
+    'pr-1', 'pr-2', 'pr-3', 'pr-4', 'pr-5', 'pr-6', 'pr-7', 'pr-8', 'pr-9', 'pr-10', 'pr-11', 'pr-12',
+    'pb-1', 'pb-2', 'pb-3', 'pb-4', 'pb-5', 'pb-6', 'pb-7', 'pb-8', 'pb-9', 'pb-10', 'pb-11', 'pb-12',
+
+    'm-1', 'm-2', 'm-3', 'm-4', 'm-5', 'm-6', 'm-7', 'm-8', 'm-9', 'm-10', 'm-11', 'm-12',
+    'mx-1', 'mx-2', 'mx-3', 'mx-4', 'mx-5', 'mx-6', 'mx-7', 'mx-8', 'mx-9', 'mx-10', 'mx-11', 'mx-12',
+    'my-1', 'my-2', 'my-3', 'my-4', 'my-5', 'my-6', 'my-7', 'my-8', 'my-9', 'my-10', 'my-11', 'my-12',
+    'ml-1', 'ml-2', 'ml-3', 'ml-4', 'ml-5', 'ml-6', 'ml-7', 'ml-8', 'ml-9', 'ml-10', 'ml-11', 'ml-12',
+    'mt-1', 'mt-2', 'mt-3', 'mt-4', 'mt-5', 'mt-6', 'mt-7', 'mt-8', 'mt-9', 'mt-10', 'mt-11', 'mt-12',
+    'mr-1', 'mr-2', 'mr-3', 'mr-4', 'mr-5', 'mr-6', 'mr-7', 'mr-8', 'mr-9', 'mr-10', 'mr-11', 'mr-12',
+    'mb-1', 'mb-2', 'mb-3', 'mb-4', 'mb-5', 'mb-6', 'mb-7', 'mb-8', 'mb-9', 'mb-10', 'mb-11', 'mb-12',
     'mx-auto',
 
     'w-1', 'w-2', 'w-3', 'w-4', 'w-5', 'w-6', 'w-8', 'w-10', 'w-12',  'w-16',
@@ -246,7 +247,8 @@ module.exports = {
 
     'md:justify-normal', 'md:justify-start', 'md:justify-end', 'md:justify-center', 'md:justify-between', 'md:justify-around', 'md:justify-evenly',
 
-    'md:aspect-[2/1]', 'md:aspect-[4/1]', 'md:aspect-[4/3]', 'md:aspect-[8/1]', 'md:aspect-[8/3]', 'md:aspect-[8/5.6]', 'md:aspect-video',
+    'md:aspect-[2/1]', 'md:aspect-[3/1]', 'md:aspect-[4/1]', 'md:aspect-[4/3]', 'md:aspect-[5/1]', 'md:aspect-[6/1]',  'md:aspect-[7/1]',
+    'md:aspect-[8/1]', 'md:aspect-[8/3]', 'md:aspect-[8/5.6]', 'md:aspect-[9/1]', 'md:aspect-video',
     'md:aspect-[1/2]', 'md:aspect-[2/3]', 'md:aspect-[3/4]', 'md:aspect-[8/9]',
 
     'md:hidden', 'md:block', 'md:inline-block', 'md:inline', 'md:flex', 'md:inline-flex', 'md:table', 'md:inline-table',
@@ -264,21 +266,21 @@ module.exports = {
     'md:overflow-x-hidden', 'md:overflow-y-auto', 'md:overflow-y-hidden', 'md:overflow-x-clip', 'md:overflow-y-clip', 'md:overflow-x-visible',
     'md:overflow-y-visible', 'md:overflow-x-scroll', 'md:overflow-y-scroll',
 
-    'md:p-1', 'md:p-2', 'md:p-3', 'md:p-4', 'md:p-5', 'md:p-6', 'md:p-7', 'md:p-8',
-    'md:px-1', 'md:px-2', 'md:px-3', 'md:px-4', 'md:px-5', 'md:px-6', 'md:px-7', 'md:px-8',
-    'md:py-1', 'md:py-2', 'md:py-3', 'md:py-4', 'md:py-5', 'md:py-6', 'md:py-7', 'md:py-8',
-    'md:pl-1', 'md:pl-2', 'md:pl-3', 'md:pl-4', 'md:pl-5', 'md:pl-6', 'md:pl-7', 'md:pl-8',
-    'md:pt-1', 'md:pt-2', 'md:pt-3', 'md:pt-4', 'md:pt-5', 'md:pt-6', 'md:pt-7', 'md:pt-8',
-    'md:pr-1', 'md:pr-2', 'md:pr-3', 'md:pr-4', 'md:pr-5', 'md:pr-6', 'md:pr-7', 'md:pr-8',
-    'md:pb-1', 'md:pb-2', 'md:pb-3', 'md:pb-4', 'md:pb-5', 'md:pb-6', 'md:pb-7', 'md:pb-8',
-
-    'md:m-1', 'md:m-2', 'md:m-3', 'md:m-4', 'md:m-5', 'md:m-6', 'md:m-7', 'md:m-8',
-    'md:mx-1', 'md:mx-2', 'md:mx-3', 'md:mx-4', 'md:mx-5', 'md:mx-6', 'md:mx-7', 'md:mx-8',
-    'md:my-1', 'md:my-2', 'md:my-3', 'md:my-4', 'md:my-5', 'md:my-6', 'md:my-7', 'md:my-8',
-    'md:ml-1', 'md:ml-2', 'md:ml-3', 'md:ml-4', 'md:ml-5', 'md:ml-6', 'md:ml-7', 'md:ml-8',
-    'md:mt-1', 'md:mt-2', 'md:mt-3', 'md:mt-4', 'md:mt-5', 'md:mt-6', 'md:mt-7', 'md:mt-8',
-    'md:mr-1', 'md:mr-2', 'md:mr-3', 'md:mr-4', 'md:mr-5', 'md:mr-6', 'md:mr-7', 'md:mr-8',
-    'md:mb-1', 'md:mb-2', 'md:mb-3', 'md:mb-4', 'md:mb-5', 'md:mb-6', 'md:mb-7', 'md:mb-8',
+    'md:p-1', 'md:p-2', 'md:p-3', 'md:p-4', 'md:p-5', 'md:p-6', 'md:p-7', 'md:p-8', 'md:p-9', 'md:p-10', 'md:p-11', 'md:p-12',
+    'md:px-1', 'md:px-2', 'md:px-3', 'md:px-4', 'md:px-5', 'md:px-6', 'md:px-7', 'md:px-8', 'md:px-9', 'md:px-10', 'md:px-11', 'md:px-12',
+    'md:py-1', 'md:py-2', 'md:py-3', 'md:py-4', 'md:py-5', 'md:py-6', 'md:py-7', 'md:py-8', 'md:py-9', 'md:py-10', 'md:py-11', 'md:py-12',
+    'md:pl-1', 'md:pl-2', 'md:pl-3', 'md:pl-4', 'md:pl-5', 'md:pl-6', 'md:pl-7', 'md:pl-8', 'md:pl-9', 'md:pl-10', 'md:pl-11', 'md:pl-12',
+    'md:pt-1', 'md:pt-2', 'md:pt-3', 'md:pt-4', 'md:pt-5', 'md:pt-6', 'md:pt-7', 'md:pt-8', 'md:pt-9', 'md:pt-10', 'md:pt-11', 'md:pt-12',
+    'md:pr-1', 'md:pr-2', 'md:pr-3', 'md:pr-4', 'md:pr-5', 'md:pr-6', 'md:pr-7', 'md:pr-8', 'md:pr-9', 'md:pr-10', 'md:pr-11', 'md:pr-12',
+    'md:pb-1', 'md:pb-2', 'md:pb-3', 'md:pb-4', 'md:pb-5', 'md:pb-6', 'md:pb-7', 'md:pb-8', 'md:pb-9', 'md:pb-10', 'md:pb-11', 'md:pb-12',
+
+    'md:m-1', 'md:m-2', 'md:m-3', 'md:m-4', 'md:m-5', 'md:m-6', 'md:m-7', 'md:m-8', 'md:m-9', 'md:m-10', 'md:m-11', 'md:m-12',
+    'md:mx-1', 'md:mx-2', 'md:mx-3', 'md:mx-4', 'md:mx-5', 'md:mx-6', 'md:mx-7', 'md:mx-8', 'md:mx-9', 'md:mx-10', 'md:mx-11', 'md:mx-12',
+    'md:my-1', 'md:my-2', 'md:my-3', 'md:my-4', 'md:my-5', 'md:my-6', 'md:my-7', 'md:my-8', 'md:my-9', 'md:my-10', 'md:my-11', 'md:my-12',
+    'md:ml-1', 'md:ml-2', 'md:ml-3', 'md:ml-4', 'md:ml-5', 'md:ml-6', 'md:ml-7', 'md:ml-8', 'md:ml-9', 'md:ml-10', 'md:ml-11', 'md:ml-12',
+    'md:mt-1', 'md:mt-2', 'md:mt-3', 'md:mt-4', 'md:mt-5', 'md:mt-6', 'md:mt-7', 'md:mt-8', 'md:mt-9', 'md:mt-10', 'md:mt-11', 'md:mt-12',
+    'md:mr-1', 'md:mr-2', 'md:mr-3', 'md:mr-4', 'md:mr-5', 'md:mr-6', 'md:mr-7', 'md:mr-8', 'md:mr-9', 'md:mr-10', 'md:mr-11', 'md:mr-12',
+    'md:mb-1', 'md:mb-2', 'md:mb-3', 'md:mb-4', 'md:mb-5', 'md:mb-6', 'md:mb-7', 'md:mb-8', 'md:mb-9', 'md:mb-10', 'md:mb-11', 'md:mb-12',
     'md:mx-auto',
 
     'md:w-1', 'md:w-2', 'md:w-3', 'md:w-4', 'md:w-5', 'md:w-6', 'md:w-8', 'md:w-10', 'md:w-12',  'md:w-16',