@mixd-id/web-scaffold 0.1.2301231360 → 0.1.2301231362

package/package.json

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

package/src/components/ContextMenu.vue

@@ -132,54 +132,75 @@ export default {
 					this.$nextTick(() => {
 						const rect = caller.getBoundingClientRect()
 
-						let maxHeight, bottom
+						let maxHeight
+						let top, right, bottom, left
+						let transformOrigin
 
 						switch(this.position){
 
 							case 'bottom-right':
-								this.computedStyle = {
-									right: (window.innerWidth - (Math.round(rect.x) + rect.width)) + 'px',
-									top: Math.round(rect.y + rect.height + 8) +  'px',
-									maxHeight: (window.innerHeight - Math.round(rect.y + rect.height + 16)) + 'px',
-									transformOrigin: 'top right'
-								}
+								right = window.innerWidth - (Math.round(rect.x) + rect.width)
+								top = Math.round(rect.y + rect.height + 8)
+								maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
+								transformOrigin = 'top right'
 								break
 
 							case 'top-left':
-
 								maxHeight = Math.round(rect.top - 16)
 								bottom = window.innerHeight - rect.top + 8
-
-								this.computedStyle = {
-									left: Math.round(rect.x) + 'px',
-									bottom: bottom +  'px',
-									maxHeight: maxHeight + 'px',
-									transformOrigin: 'bottom left'
-								}
+								left = Math.round(rect.x)
+								transformOrigin = 'bottom left'
 								break
 
 							case 'top-right':
-
 								maxHeight = Math.round(rect.top - 16)
 								bottom = window.innerHeight - rect.top + 8
-
-								this.computedStyle = {
-									right: (window.innerWidth - (Math.round(rect.x) + rect.width)) + 'px',
-									bottom: bottom +  'px',
-									maxHeight: maxHeight + 'px',
-									transformOrigin: 'bottom right'
-								}
+								right = window.innerWidth - (Math.round(rect.x) + rect.width)
+								transformOrigin = 'bottom right'
 								break
 
 							default:
-								this.computedStyle = {
-									left: Math.round(rect.x) + 'px',
-									top: Math.round(rect.y + rect.height + 8) +  'px',
-									maxHeight: (window.innerHeight - Math.round(rect.y + rect.height + 16)) + 'px',
-									transformOrigin: 'top left'
+								left = Math.round(rect.x)
+								top = Math.round(rect.y + rect.height + 8)
+								//maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
+								transformOrigin = 'top left'
+								break
+						}
+
+						if(left){
+							if(left + this.$refs.contextMenu.clientWidth >= (window.innerWidth - 16)){
+								left = window.innerWidth - (this.$refs.contextMenu.clientWidth + 16)
+
+								if(transformOrigin === 'top left'){
+									transformOrigin = 'top right'
 								}
+							}
 						}
 
+						if(top){
+							if(top + this.$refs.contextMenu.clientHeight >= (window.innerHeight - 16)){
+								top = window.innerHeight - (this.$refs.contextMenu.clientHeight + 16)
+
+								if(transformOrigin === 'top left'){
+									transformOrigin = 'bottom left'
+								}
+								else if(transformOrigin === 'top right'){
+									transformOrigin = 'bottom right'
+								}
+							}
+						}
+
+						this.computedStyle = {
+							left: left ? left + 'px' : left,
+							right: right ? right + 'px' : right,
+							top: top ? top +  'px' : top,
+							bottom: bottom ? bottom +  'px' : bottom,
+							maxHeight: maxHeight ? maxHeight + 'px' : maxHeight,
+							transformOrigin: transformOrigin
+						}
+
+						console.log('width', this.computedStyle)
+
 						this.onOpen()
 					})
 
@@ -219,7 +240,8 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed z-20 bg-base-50 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-lg border-[1px] border-text-50 shadow-2xl;
+	@apply fixed z-20 bg-base-50 backdrop-blur-md min-w-[150px] overflow-y-auto rounded-lg;
+	@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
 	transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 	opacity: 0;
 	transform: scale(.3);

package/src/components/ListPage1.vue

@@ -280,6 +280,7 @@
 									<option value="">{{ $t('Default') }}</option>
 									<option value="date">{{ $t('Date') }}</option>
 									<option value="month">{{ $t('Month') }}</option>
+									<option value="quarter">{{ $t('Quarterly') }}</option>
 									<option value="year">{{ $t('Year') }}</option>
 								</Dropdown>
 							</div>
@@ -464,7 +465,7 @@ export default{
 								return `rgb(${gridColor})`
 							}
 						},
-						stacked: this.preset.summary.stacked
+						stacked: this.preset.summary.mode === 'bar' ? this.preset.summary.stacked : undefined
 					},
 					y: {
 						grid: {
@@ -472,7 +473,7 @@ export default{
 								return `rgb(${gridColor})`
 							}
 						},
-						stacked: this.preset.summary.stacked
+						stacked: this.preset.summary.mode === 'bar' ? this.preset.summary.stacked : undefined
 					}
 				}
 			}
@@ -589,8 +590,30 @@ export default{
 	data(){
 		return {
 			chartOpt: {
-				backgroundColors: [ '#5D9CEC', '#4FC1E9', '#48CFAD', '#A0D468', '#FFCE54', '#FC6E51', '#ED5565', '#AC92EC', '#EC87C0' ],
-				borderColors: [ '#4A89DC', '#3BAFDA', '#37BC9B', '#8CC152', '#F6BB42', '#E9573F', '#DA4453', '#967ADC', '#D770AD' ],
+				backgroundColors: [
+					'#5D9CEC',
+					'#A0D468',
+					'#FFCE54',
+					'#FC6E51',
+					'#48CFAD',
+					'#AC92EC',
+					'#4FC1E9',
+					'#FFCE54',
+					'#ED5565',
+					'#EC87C0'
+				],
+				borderColors: [
+					'#4A89DC',
+					'#8CC152',
+					'#F6BB42',
+					'#E9573F',
+					'#37BC9B',
+					'#967ADC',
+					'#3BAFDA',
+					'#F6BB42',
+					'#DA4453',
+					'#D770AD'
+				],
 			},
 			layout: {
 				presetOpen: false,

package/src/utils/listpage1.js

@@ -216,6 +216,12 @@ let ListPage1 = {
         summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
         break
 
+      case 'quarter':
+        attributes.push([Sequelize.fn("CONCAT", Sequelize.fn('YEAR', Sequelize.col(rowKey)), ' Q', Sequelize.fn('QUARTER', Sequelize.col(rowKey))), "dfDate"])
+        group.push([Sequelize.fn("CONCAT", Sequelize.fn('YEAR', Sequelize.col(rowKey)), ' Q', Sequelize.fn('QUARTER', Sequelize.col(rowKey))), "dfDate"])
+        summaryColumns.push({ key:"dfDate", label:rowLabel, width:"200px", visible:true, type:"date", format:"MMM YYYY" })
+        break
+
       case 'year':
         attributes.push([Sequelize.fn("DATE_FORMAT", Sequelize.col(rowKey), '%Y'), "dfDate"])
         group.push([Sequelize.fn("DATE_FORMAT", Sequelize.col(rowKey), '%Y'), "dfDate"])