@mixd-id/web-scaffold 0.1.230406175 → 0.1.230406177

package/package.json

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

package/src/components/ColorPicker.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 		<div :class="circleClass" :style="circleStyle"
-				 @click="$refs.contextMenu.open($refs.btn)"
+				 @click="mode === 'hex' ? $refs.inputColor.click() : $refs.contextMenu.open($refs.btn)"
 				 ref="btn"></div>
 		<input type="color" :class="$style.inputColor" ref="inputColor"
 			@change="select($refs.inputColor.value)"/>
@@ -31,6 +31,8 @@
 
 <script>
 
+import {hexToRgb, rgbToHex} from "../utils/helpers.mjs";
+
 export default{
 
 	emits: [ 'change', 'update:modelValue' ],
@@ -65,7 +67,9 @@ export default{
 
 		modelValue: String,
 
-		prefix: String
+		prefix: String,
+
+    valueType: String,
 
 	},
 
@@ -76,7 +80,13 @@ export default{
 				this.$emit('update:modelValue', color ? this.prefix + color : '')
 			}
 			else{
-				this.$emit('update:modelValue', color)
+        if(this.valueType === 'rgb'){
+          const hex = hexToRgb(color)
+          this.$emit('update:modelValue', `${hex.r},${hex.g},${hex.b}`)
+        }
+        else{
+          this.$emit('update:modelValue', color)
+        }
 			}
 			this.$emit('change')
 			this.$refs.contextMenu.close()
@@ -104,8 +114,14 @@ export default{
 
 		circleStyle(){
 			if(this.mode !== 'class'){
+
+        let value = this.modelValue
+        if(this.valueType === 'rgb'){
+          value = rgbToHex(...(this.modelValue ?? '').split(','))
+        }
+
 				return {
-					'background-color': this.modelValue ?? ''
+					'background-color': value ?? ''
 				}
 			}
 		}

package/src/utils/helpers.mjs

@@ -313,8 +313,38 @@ function unslugAndCapitalize(slug) {
     .join(' ');
 }
 
+const hexToRgb = (hex) => {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
+function rgbToHex(r, g, b) {
+
+  r = parseInt(r)
+  g = parseInt(g)
+  b = parseInt(b)
+  if(isNaN(r) || isNaN(g) || isNaN(b))
+    return
+
+  r = Math.max(0, Math.min(255, r));
+  g = Math.max(0, Math.min(255, g));
+  b = Math.max(0, Math.min(255, b));
+
+  const hexR = r.toString(16).padStart(2, '0');
+  const hexG = g.toString(16).padStart(2, '0');
+  const hexB = b.toString(16).padStart(2, '0');
+
+  return "#" + hexR + hexG + hexB;
+}
+
 export {
   downsizeImage,
+  hexToRgb,
+  rgbToHex,
   uid,
   observeInit,
   csvToArray,

package/src/widgets/ComponentSetting.vue

@@ -16,7 +16,7 @@
           <label :class="$style.label">Aspect Ratio</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType" class="mt-1">
-            <Dropdown v-model="aspectRatio[index]" @change="apply">
+            <Dropdown v-model="aspectRatio[index]">
               <option value="">
                 {{ emptyComponentText('aspectRatio', index) }}
               </option>
@@ -32,7 +32,7 @@
           <label :class="$style.label">Display</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType" class="mt-1">
-            <Dropdown v-model="display[index]" @change="apply">
+            <Dropdown v-model="display[index]">
               <option value="">
                 {{ emptyComponentText('display', index) }}
               </option>
@@ -48,7 +48,7 @@
           <label :class="$style.label">Position</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType" class="mt-1">
-            <Dropdown v-model="position[index]" @change="apply">
+            <Dropdown v-model="position[index]">
               <option value="">
                 {{ emptyComponentText('position', index) }}
               </option>
@@ -64,7 +64,7 @@
           <label :class="$style.label">Z Index</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="zIndex[index]" @change="apply">
+            <Dropdown v-model="zIndex[index]">
               <option value="">
                 {{ emptyComponentText('zIndex', index) }}
               </option>
@@ -80,7 +80,7 @@
           <label :class="$style.label">Left</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="left[index]" @change="apply">
+            <Dropdown v-model="left[index]">
               <option value="">
                 {{ emptyComponentText('left', index) }}
               </option>
@@ -96,7 +96,7 @@
           <label :class="$style.label">Top</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="top[index]" @change="apply">
+            <Dropdown v-model="top[index]">
               <option value="">
                 {{ emptyComponentText('top', index) }}
               </option>
@@ -112,7 +112,7 @@
           <label :class="$style.label">Right</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="right[index]" @change="apply">
+            <Dropdown v-model="right[index]">
               <option value="">
                 {{ emptyComponentText('right', index) }}
               </option>
@@ -128,7 +128,7 @@
           <label :class="$style.label">Bottom</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="bottom[index]" @change="apply">
+            <Dropdown v-model="bottom[index]">
               <option value="">
                 {{ emptyComponentText('bottom', index) }}
               </option>
@@ -144,7 +144,7 @@
           <label class="flex-1 text-text-400">Overflow</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="overflow[index]" @change="apply">
+            <Dropdown v-model="overflow[index]">
               <option value="">
                 {{ emptyComponentText('overflow', index) }}
               </option>
@@ -175,7 +175,7 @@
                              :keys="[['p-'], ['px-', 'py-'], ['pl-', 'pt-', 'pr-', 'pb-']]"
                              :viewTypes="viewTypes"
                              :viewType="viewType"
-                             @change="apply" />
+                             />
         </div>
         <div>
           <label :class="$style.label">Margin</label>
@@ -184,7 +184,7 @@
                              :viewType="viewType"
                              :keys="[['m-'], ['mx-', 'my-'], ['ml-', 'mt-', 'mr-', 'mb-']]"
                              :values="[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto']"
-                             @change="apply" />
+                             />
         </div>
       </div>
     </div>
@@ -205,7 +205,7 @@
             <label :class="$style.label">Width</label>
             <div v-for="(_, index) in viewTypes"
                  v-show="_.value === viewType">
-              <Dropdown v-model="width[index]" @change="apply">
+              <Dropdown v-model="width[index]">
                 <option value="">
                   {{ emptyComponentText('width', index) }}
                 </option>
@@ -221,7 +221,7 @@
             <label :class="$style.label">Min Width</label>
             <div v-for="(_, index) in viewTypes"
                  v-show="_.value === viewType">
-              <Dropdown v-model="minWidth[index]" @change="apply">
+              <Dropdown v-model="minWidth[index]">
                 <option value="">
                   {{ emptyComponentText('minWidth', index) }}
                 </option>
@@ -237,7 +237,7 @@
             <label :class="$style.label">Max Width</label>
             <div v-for="(_, index) in viewTypes"
                  v-show="_.value === viewType">
-              <Dropdown v-model="maxWidth[index]" @change="apply">
+              <Dropdown v-model="maxWidth[index]">
                 <option value="">
                   {{ emptyComponentText('maxWidth', index) }}
                 </option>
@@ -255,7 +255,7 @@
             <label :class="$style.label">Height</label>
             <div v-for="(_, index) in viewTypes"
                  v-show="_.value === viewType">
-              <Dropdown v-model="height[index]" @change="apply">
+              <Dropdown v-model="height[index]">
                 <option value="">
                   {{ emptyComponentText('height', index) }}
                 </option>
@@ -271,7 +271,7 @@
             <label :class="$style.label">Min Height</label>
             <div v-for="(_, index) in viewTypes"
                  v-show="_.value === viewType">
-              <Dropdown v-model="minHeight[index]" @change="apply">
+              <Dropdown v-model="minHeight[index]">
                 <option value="">
                   {{ emptyComponentText('minHeight', index) }}
                 </option>
@@ -287,7 +287,7 @@
             <label :class="$style.label">Max Height</label>
             <div v-for="(_, index) in viewTypes"
                  v-show="_.value === viewType">
-              <Dropdown v-model="maxHeight[index]" @change="apply">
+              <Dropdown v-model="maxHeight[index]">
                 <option value="">
                   {{ emptyComponentText('maxHeight', index) }}
                 </option>
@@ -315,27 +315,11 @@
 
       <div class="grid grid-cols-2 gap-4" v-if="expanded['typography']">
 
-        <div>
-          <label class="text-text-400">Font Family</label>
-          <div v-for="(_, index) in viewTypes"
-               v-show="_.value === viewType">
-            <Dropdown v-model="fontFamily[index]" @change="apply">
-              <option value="">
-                {{ emptyComponentText('fontFamily', index) }}
-              </option>
-              <option v-for="opt in components.fontFamily"
-                      :value="`${viewType}${opt[1]}`">
-                {{ opt[0] }}
-              </option>
-            </Dropdown>
-          </div>
-        </div>
-
         <div>
           <label class="text-text-400">Font Size</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="fontSize[index]" @change="apply">
+            <Dropdown v-model="fontSize[index]">
               <option value="">
                 {{ emptyComponentText('fontSize', index) }}
               </option>
@@ -351,7 +335,7 @@
           <label class="text-text-400">Font Weight</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="fontWeight[index]" @change="apply">
+            <Dropdown v-model="fontWeight[index]">
               <option value="">
                 {{ emptyComponentText('fontWeight', index) }}
               </option>
@@ -367,7 +351,7 @@
           <label class="text-text-400">Line Height</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="lineHeight[index]" @change="apply">
+            <Dropdown v-model="lineHeight[index]">
               <option value="">
                 {{ emptyComponentText('lineHeight', index) }}
               </option>
@@ -383,7 +367,7 @@
           <label class="text-text-400">Letter Spacing</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="letterSpacing[index]" @change="apply">
+            <Dropdown v-model="letterSpacing[index]">
               <option value="">
                 {{ emptyComponentText('letterSpacing', index) }}
               </option>
@@ -399,7 +383,7 @@
           <label class="text-text-400">Whitespace</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="whitespace[index]" @change="apply">
+            <Dropdown v-model="whitespace[index]">
               <option value="">
                 {{ emptyComponentText('whitespace', index) }}
               </option>
@@ -411,6 +395,38 @@
           </div>
         </div>
 
+        <div>
+          <label class="text-text-400">Text Align</label>
+          <div v-for="(_, index) in viewTypes"
+               v-show="_.value === viewType">
+            <Dropdown v-model="textAlign[index]">
+              <option value="">
+                {{ emptyComponentText('textAlign', index) }}
+              </option>
+              <option v-for="opt in components.textAlign"
+                      :value="`${viewType}${opt[1]}`">
+                {{ opt[0] }}
+              </option>
+            </Dropdown>
+          </div>
+        </div>
+
+        <div>
+          <label class="text-text-400">Vertical Align</label>
+          <div v-for="(_, index) in viewTypes"
+               v-show="_.value === viewType">
+            <Dropdown v-model="verticalAlign[index]">
+              <option value="">
+                {{ emptyComponentText('verticalAlign', index) }}
+              </option>
+              <option v-for="opt in components.verticalAlign"
+                      :value="`${viewType}${opt[1]}`">
+                {{ opt[0] }}
+              </option>
+            </Dropdown>
+          </div>
+        </div>
+
       </div>
     </div>
 
@@ -428,7 +444,7 @@
           <label class="flex-1 text-text-400">Column Span</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="colSpan[index]" @change="apply">
+            <Dropdown v-model="colSpan[index]">
               <option value="">
                 {{ emptyComponentText('colSpan', index) }}
               </option>
@@ -444,7 +460,7 @@
           <label class="flex-1 text-text-400">Row Span</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="rowSpan[index]" @change="apply">
+            <Dropdown v-model="rowSpan[index]">
               <option value="">
                 {{ emptyComponentText('rowSpan', index) }}
               </option>
@@ -471,7 +487,7 @@
         <Dropdown v-for="(_, index) in viewTypes"
                   v-show="_.value === viewType"
                   v-model="flexBasis[index]"
-                  @change="apply">
+                 >
           <option value="">
             {{ emptyComponentText('flexBasis', index) }}
           </option>
@@ -501,7 +517,7 @@
           <ColorPicker v-for="(_viewType, index) in viewTypes"
                        v-show="_viewType.value === viewType"
                        v-model="bgColors[index]"
-                       @change="apply"
+
                        :prefix="`${viewType}bg-`"
                        :custom-color="true">
           </ColorPicker>
@@ -513,14 +529,14 @@
                class="flex-row items-start gap-1" :class="_viewType.value === viewType ? 'flex' : 'hidden'">
             <button type="button"
                     v-if="bgImage[index].imageUrl"
-                    @click="bgImage[index].imageUrl = null;apply()">
+                    @click="bgImage[index].imageUrl = null;">
               <svg width="18" height="18" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z"/></svg>
             </button>
             <Image ref="bgImage"
                    :src="imageUrl(bgImage[index])"
                    :editable="true"
                    @click="$refs.bgImage[index].edit()"
-                   @change="(base64, file) => { bgImage[index].imageUrl = file; apply() }"
+                   @change="(base64, file) => { bgImage[index].imageUrl = file; }"
                    class="cursor-pointer w-[120px] aspect-[2/1] rounded-lg bg-text-50 border-text-100 border-[1px]"></Image>
           </div>
         </div>
@@ -529,7 +545,7 @@
           <label class="flex-1 text-text-400">Size</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="bgSize[index]" @change="apply">
+            <Dropdown v-model="bgSize[index]">
               <option value="">
                 {{ emptyComponentText('bgSize', index) }}
               </option>
@@ -545,7 +561,7 @@
           <label class="flex-1 text-text-400">Position</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="bgPosition[index]" @change="apply">
+            <Dropdown v-model="bgPosition[index]">
               <option value="">
                 {{ emptyComponentText('bgPosition', index) }}
               </option>
@@ -561,7 +577,7 @@
           <label class="flex-1 text-text-400">Repeat</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="bgRepeat[index]" @change="apply">
+            <Dropdown v-model="bgRepeat[index]">
               <option value="">
                 {{ emptyComponentText('bgRepeat', index) }}
               </option>
@@ -597,7 +613,7 @@
                              :viewType="viewType"
                              :keys="[['border'], ['border-x', 'border-y'], ['border-l', 'border-t', 'border-r', 'border-b']]"
                              :values="[['', 'Normal'], ['-0', '0'], ['-2', '2'], ['-4', '4'], ['-8', '8']]"
-                             @change="apply" />
+                             />
         </div>
 
         <div class="flex flex-row gap-4">
@@ -605,7 +621,6 @@
           <ColorPicker v-for="(_viewType, index) in viewTypes"
                        v-show="_viewType.value === viewType"
                        v-model="bdColor[index]"
-                       @change="apply"
                        :prefix="`${viewType}border-`">
           </ColorPicker>
         </div>
@@ -614,7 +629,7 @@
           <label class="flex-1 text-text-400">Border Radius</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="bdRadius[index]" @change="apply" class="min-w-[100px]">
+            <Dropdown v-model="bdRadius[index]" class="min-w-[100px]">
               <option value="">
                 {{ emptyComponentText('bdRadius', index) }}
               </option>
@@ -630,7 +645,7 @@
           <label class="flex-1 text-text-400">Border Style</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="bdStyle[index]" @change="apply" class="min-w-[100px]">
+            <Dropdown v-model="bdStyle[index]" class="min-w-[100px]">
               <option value="">
                 {{ emptyComponentText('bdStyle', index) }}
               </option>
@@ -651,7 +666,7 @@
                              :viewType="viewType"
                              :keys="[['divide'], ['divide-x', 'divide-y'], ['divide-l', 'divide-t', 'divide-r', 'divide-b']]"
                              :values="[['', 'Normal'], ['-0', '0'], ['-2', '2'], ['-4', '4'], ['-8', '8']]"
-                             @change="apply" />
+                             />
         </div>
 
         <div class="flex flex-row gap-4">
@@ -659,7 +674,7 @@
           <ColorPicker v-for="(_viewType, index) in viewTypes"
                        v-show="_viewType.value === viewType"
                        v-model="divideColor[index]"
-                       @change="apply"
+
                        :prefix="`${viewType}divide-`">
           </ColorPicker>
         </div>
@@ -668,7 +683,7 @@
           <label class="flex-1 text-text-400">Divide Style</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="divideStyle[index]" @change="apply" class="min-w-[100px]">
+            <Dropdown v-model="divideStyle[index]" class="min-w-[100px]">
               <option value="">
                 {{ emptyComponentText('divideStyle', index) }}
               </option>
@@ -686,7 +701,7 @@
           <label class="flex-1 text-text-400">Outline Width</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="outlineWidth[index]" @change="apply" class="min-w-[100px]">
+            <Dropdown v-model="outlineWidth[index]" class="min-w-[100px]">
               <option value="">
                 {{ emptyComponentText('outlineWidth', index) }}
               </option>
@@ -703,7 +718,7 @@
           <ColorPicker v-for="(_viewType, index) in viewTypes"
                        v-show="_viewType.value === viewType"
                        v-model="outlineColor[index]"
-                       @change="apply"
+
                        :prefix="`${viewType}outline-`">
           </ColorPicker>
         </div>
@@ -712,7 +727,7 @@
           <label class="flex-1 text-text-400">Outline Style</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="outlineStyle[index]" @change="apply" class="min-w-[100px]">
+            <Dropdown v-model="outlineStyle[index]" class="min-w-[100px]">
               <option value="">
                 {{ emptyComponentText('outlineStyle', index) }}
               </option>
@@ -746,7 +761,7 @@
           <label :class="$style.label">Opacity</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="opacity[index]" @change="apply">
+            <Dropdown v-model="opacity[index]">
               <option value="">
                 {{ emptyComponentText('opacity', index) }}
               </option>
@@ -762,7 +777,7 @@
           <label class="flex-1 text-text-400">Box Shadow</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="boxShadow[index]" @change="apply">
+            <Dropdown v-model="boxShadow[index]">
               <option value="">
                 {{ emptyComponentText('boxShadow', index) }}
               </option>
@@ -794,7 +809,7 @@
           <label :class="$style.label">Animation</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="animate[index]" @change="apply">
+            <Dropdown v-model="animate[index]">
               <option value="">
                 {{ emptyComponentText('animate', index) }}
               </option>
@@ -826,7 +841,7 @@
           <label :class="$style.label">Blur</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="blur[index]" @change="apply">
+            <Dropdown v-model="blur[index]">
               <option value="">
                 {{ emptyComponentText('blur', index) }}
               </option>
@@ -842,7 +857,7 @@
           <label :class="$style.label">Grayscale</label>
           <div v-for="(_, index) in viewTypes"
                v-show="_.value === viewType">
-            <Dropdown v-model="grayscale[index]" @change="apply">
+            <Dropdown v-model="grayscale[index]">
               <option value="">
                 {{ emptyComponentText('grayscale', index) }}
               </option>
@@ -868,7 +883,7 @@ export default{
 
 	emits: [ 'change' ],
 
-	inject: [ 'imageUrl' ],
+	inject: [ 'imageUrl', 'store' ],
 
 	props: {
 
@@ -885,10 +900,6 @@ export default{
 
 	methods: {
 
-		apply(){
-			this.$emit('change')
-		},
-
     emptyComponentText(key, index){
       if(index > 0){
         let text = '-'
@@ -897,8 +908,10 @@ export default{
           if(prevValue && typeof prevValue === 'string'){
             prevValue = prevValue.substring(prevValue.indexOf(':') + 1)
             const prevOpt = this.components[key].filter(_ => _[1] === prevValue).pop()
-            text = prevOpt[0]
-            break
+            if(prevOpt){
+              text = prevOpt[0]
+              break
+            }
           }
         }
         return text
@@ -910,6 +923,22 @@ export default{
 
 	computed: {
 
+    componentStore(){
+      if(this.store && this.store.components){
+        if(!this.store.components.compsetting)
+          this.store.components.compsetting = {}
+
+        return this.store.components.compsetting
+      }
+      return {}
+    },
+
+    expanded(){
+      if(!this.componentStore['expanded'])
+        this.componentStore['expanded'] = {}
+      return this.componentStore['expanded']
+    },
+
     animate(){
 			if(!Array.isArray(this.item.props.animate))
 				this.item.props.animate = []
@@ -1210,6 +1239,20 @@ export default{
       return this.item.props.top
     },
 
+    textAlign(){
+			if(!Array.isArray(this.item.props.textAlign))
+				this.item.props.textAlign = []
+
+			return this.item.props.textAlign
+		},
+
+    verticalAlign(){
+			if(!Array.isArray(this.item.props.verticalAlign))
+				this.item.props.verticalAlign = []
+
+			return this.item.props.verticalAlign
+		},
+
     whitespace(){
 			if(!Array.isArray(this.item.props.whitespace))
 				this.item.props.whitespace = []
@@ -1686,10 +1729,26 @@ export default{
           [ '1', 'stroke-1' ],
           [ '2', 'stroke-2' ],
         ],
+        textAlign: [
+          [ 'Left', 'text-left' ],
+          [ 'Center', 'text-center' ],
+          [ 'Right', 'text-right' ],
+          [ 'Justify', 'text-justify' ],
+          [ 'End', 'text-end' ],
+        ],
+        verticalAlign: [
+          [ 'Baseline', 'align-baseline' ],
+          [ 'Top', 'align-top' ],
+          [ 'Middle', 'align-middle' ],
+          [ 'Bottom', 'align-bottom' ],
+          [ 'Text Top', 'align-text-top' ],
+          [ 'Text Bottom', 'align-text-bottom' ],
+          [ 'Sub', 'align-sub' ],
+          [ 'Super', 'align-super' ],
+        ],
 
 
       },
-      expanded: {},
     }
 	}