@mixd-id/web-scaffold 0.1.230406175 → 0.1.230406176

package/package.json

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

package/src/widgets/ComponentSetting.vue

@@ -411,6 +411,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]" @change="apply">
+              <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]" @change="apply">
+              <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>
 
@@ -1210,6 +1242,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,6 +1732,23 @@ 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' ],
+        ],
 
 
       },

package/src/widgets/WebPageBuilder.vue

@@ -1490,6 +1490,7 @@ export default{
         'divideSize', 'divideColor', 'divideStyle',
         'outlineWidth', 'outlineColor', 'outlineStyle',
         'bgColors', 'bgSize', 'bgPosition', 'bgRepeat',
+        'textAlign', 'verticalAlign',
         'gap',
         'padding', 'margin',
         'direction', 'columns', 'rows', 'display', 'wrap',

package/tailwind.config.js

@@ -88,6 +88,10 @@ module.exports = {
     'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl',
     'text-4xl', 'text-5xl', 'text-6xl',
 
+    'text-left', 'text-center', 'text-right', 'text-justify', 'text-start', 'text-end',
+
+    'align-baseline', 'align-top', 'align-middle', 'align-bottom', 'align-text-top', 'align-text-bottom', 'align-sub', 'align-super',
+
     'font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black',
 
     'leading-3', 'leading-4', 'leading-5', 'leading-6', 'leading-7', 'leading-8', 'leading-9',
@@ -293,6 +297,10 @@ module.exports = {
     'md:text-xs', 'md:text-sm', 'md:text-base', 'md:text-lg', 'md:text-xl', 'md:text-2xl', 'md:text-3xl',
     'md:text-4xl', 'md:text-5xl', 'md:text-6xl',
 
+    'md:text-left', 'md:text-center', 'md:text-right', 'md:text-justify', 'md:text-start', 'md:text-end',
+
+    'md:align-baseline', 'md:align-top', 'md:align-middle', 'md:align-bottom', 'md:align-md:text-top', 'md:align-md:text-bottom', 'md:align-sub', 'md:align-super',
+
     'md:font-thin', 'md:font-extralight', 'md:font-light', 'md:font-normal', 'md:font-medium', 'md:font-semibold', 'md:font-bold', 'md:font-extrabold', 'md:font-black',
 
     'md:leading-3', 'md:leading-4', 'md:leading-5', 'md:leading-6', 'md:leading-7', 'md:leading-8', 'md:leading-9',