@stonecrop/desktop 0.4.37 → 0.5.0

package/dist/index.js

@@ -1,7 +1,6 @@
 import ActionSet from './components/ActionSet.vue';
 import CommandPalette from './components/CommandPalette.vue';
-import Doctype from './components/Doctype.vue';
-import Records from './components/Records.vue';
+import Desktop from './components/Desktop.vue';
 import SheetNav from './components/SheetNav.vue';
 import StonecropDesktop from './plugins';
-export { ActionSet, CommandPalette, Doctype, Records, SheetNav, StonecropDesktop };
+export { ActionSet, CommandPalette, Desktop, SheetNav, StonecropDesktop };

package/dist/plugins/index.js

@@ -1,7 +1,6 @@
 import ActionSet from '../components/ActionSet.vue';
 import CommandPalette from '../components/CommandPalette.vue';
-import Doctype from '../components/Doctype.vue';
-import Records from '../components/Records.vue';
+import Desktop from '../components/Desktop.vue';
 import SheetNav from '../components/SheetNav.vue';
 /**
  * This is the main plugin that will be used to register all the desktop components.
@@ -11,8 +10,7 @@ const plugin = {
     install: (app) => {
         app.component('ActionSet', ActionSet);
         app.component('CommandPalette', CommandPalette);
-        app.component('Doctype', Doctype);
-        app.component('Records', Records);
+        app.component('Desktop', Desktop);
         app.component('SheetNav', SheetNav);
     },
 };

package/dist/src/index.d.ts

@@ -1,9 +1,8 @@
 import ActionSet from './components/ActionSet.vue';
 import CommandPalette from './components/CommandPalette.vue';
-import Doctype from './components/Doctype.vue';
-import Records from './components/Records.vue';
+import Desktop from './components/Desktop.vue';
 import SheetNav from './components/SheetNav.vue';
 import StonecropDesktop from './plugins';
 export type * from './types';
-export { ActionSet, CommandPalette, Doctype, Records, SheetNav, StonecropDesktop };
+export { ActionSet, CommandPalette, Desktop, SheetNav, StonecropDesktop };
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,cAAc,MAAM,iCAAiC,CAAA;AAC5D,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,gBAAgB,MAAM,WAAW,CAAA;AACxC,mBAAmB,SAAS,CAAA;AAE5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,cAAc,MAAM,iCAAiC,CAAA;AAC5D,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,gBAAgB,MAAM,WAAW,CAAA;AACxC,mBAAmB,SAAS,CAAA;AAE5B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/src/plugins/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,MAAM,EAAE,MAAM,KAAK,CAAA;AAQtC;;;GAGG;AACH,QAAA,MAAM,MAAM,EAAE,MAQb,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,MAAM,EAAE,MAAM,KAAK,CAAA;AAOtC;;;GAGG;AACH,QAAA,MAAM,MAAM,EAAE,MAOb,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/src/types/index.d.ts

@@ -20,6 +20,7 @@ export type ElementAction = BaseElement & {
  */
 export type ButtonElement = BaseElement & ElementAction & {
     type: 'button';
+    disabled?: boolean;
 };
 /**
  * Dropdown elements

package/dist/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACzC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GACtC,aAAa,GAAG;IACf,IAAI,EAAE,QAAQ,CAAA;CACd,CAAA;AAEF;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC3C,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,aAAa,EAAE,CAAA;CACxB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;CACd,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACzC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GACtC,aAAa,GAAG;IACf,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAEF;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC3C,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,aAAa,EAAE,CAAA;CACxB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/desktop",
-  "version": "0.4.37",
+  "version": "0.5.0",
   "description": "Desktop-specific components for Stonecrop UI",
   "license": "MIT",
   "type": "module",
@@ -37,10 +37,10 @@
   ],
   "dependencies": {
     "vue": "^3.5.22",
-    "@stonecrop/aform": "0.4.37",
-    "@stonecrop/atable": "0.4.37",
-    "@stonecrop/stonecrop": "0.4.37",
-    "@stonecrop/themes": "0.4.37"
+    "@stonecrop/themes": "0.5.0",
+    "@stonecrop/aform": "0.5.0",
+    "@stonecrop/atable": "0.5.0",
+    "@stonecrop/stonecrop": "0.5.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",
@@ -69,7 +69,6 @@
     "_phase:build": "heft build && vite build && rushx docs",
     "prepublish": "heft build && vite build && rushx docs",
     "build": "heft build && vite build && rushx docs",
-    "dev": "vite",
     "docs": "cd ../common/autoinstallers/doc-tools && node generate-docs.mjs desktop",
     "lint": "eslint ."
   }

package/src/components/ActionSet.vue

@@ -38,14 +38,22 @@
 			</div>
 		</div>
 		<div style="margin-right: 30px"></div>
-		<div v-for="(el, index) in _elements" :key="el.label" class="action-element">
-			<button v-if="el.type == 'button'" :onclick="el.action" class="button-default">{{ el.label }}</button>
+		<div v-for="(el, index) in elements" :key="el.label" class="action-element">
+			<button
+				v-if="el.type == 'button'"
+				:disabled="el.disabled"
+				class="button-default"
+				@click="handleClick(el.action, el.label)">
+				{{ el.label }}
+			</button>
 			<div v-if="el.type == 'dropdown'">
 				<button class="button-default" @click="toggleDropdown(index)">{{ el.label }}</button>
-				<div v-show="el.show" class="dropdown-container">
+				<div v-show="dropdownStates[index]" class="dropdown-container">
 					<div class="dropdown">
-						<div v-for="item in el.actions" :key="item.label">
-							<button v-if="item.action != null" :onclick="item.action" class="dropdown-item">{{ item.label }}</button>
+						<div v-for="(item, itemIndex) in el.actions" :key="item.label">
+							<button v-if="item.action != null" class="dropdown-item" @click="handleClick(item.action, item.label)">
+								{{ item.label }}
+							</button>
 							<a v-else-if="item.link != null" :href="item.link"
 								><button class="dropdown-item">{{ item.label }}</button></a
 							>
@@ -63,8 +71,13 @@ import { onMounted, ref } from 'vue'
 import type { ActionElements } from '../types'
 
 const { elements = [] } = defineProps<{ elements?: ActionElements[] }>()
+const emit = defineEmits<{
+	actionClick: [label: string, action: (() => void | Promise<void>) | undefined]
+}>()
+
+// Track dropdown open state separately (index -> boolean)
+const dropdownStates = ref<Record<number, boolean>>({})
 
-const _elements = ref(elements)
 const isOpen = ref(false)
 const timeoutId = ref<number>(-1)
 const hover = ref(false)
@@ -75,11 +88,7 @@ onMounted(() => {
 })
 
 const closeDropdowns = () => {
-	for (const element of _elements.value) {
-		if (element.type === 'dropdown') {
-			element.show = false
-		}
-	}
+	dropdownStates.value = {}
 }
 
 const onHover = () => {
@@ -99,9 +108,16 @@ const onHoverLeave = () => {
 }
 
 const toggleDropdown = (index: number) => {
-	const showDropdown = !_elements.value[index].show
+	const showDropdown = !dropdownStates.value[index]
 	closeDropdowns()
-	_elements.value[index].show = showDropdown
+	if (showDropdown) {
+		dropdownStates.value[index] = true
+	}
+}
+
+const handleClick = (action: (() => void | Promise<void>) | undefined, label: string) => {
+	// Emit event to parent - parent will handle execution
+	emit('actionClick', label, action)
 }
 </script>
 
@@ -154,6 +170,7 @@ const toggleDropdown = (index: number) => {
 	flex-direction: row-reverse;
 	background-color: white;
 	overflow: hidden;
+	z-index: 1001; /* Above SheetNav (100) and operation log button (999) */
 }
 
 .action-menu-icon {
@@ -208,6 +225,7 @@ const toggleDropdown = (index: number) => {
 .action-element {
 	margin-left: 5px;
 	margin-right: 5px;
+	position: relative; /* Make this the positioning context for absolute children */
 }
 button.button-default {
 	background-color: #ffffff;
@@ -224,19 +242,30 @@ button.button-default:hover {
 	background-color: #f2f2f2;
 }
 
+button.button-default:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+	background-color: #f5f5f5;
+	color: #999;
+}
+
+button.button-default:disabled:hover {
+	background-color: #f5f5f5;
+}
+
 .dropdown-container {
 	position: relative;
 }
 
 .dropdown {
 	position: absolute;
-	top: 5px;
 	right: 0;
 	min-width: 200px;
 	box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 18%);
 	border-radius: 10px;
 	background-color: #ffffff;
 	padding: 10px;
+	z-index: 1000;
 }
 
 button.dropdown-item {