@stonecrop/desktop 0.2.5

package/dist/style.css

@@ -0,0 +1 @@
+#chevron[data-v-b7fdfbec]{position:relative;transform:rotate(90deg)}.leftBar[data-v-b7fdfbec],.rightBar[data-v-b7fdfbec]{transition-duration:.225s;transition-property:transform}.leftBar[data-v-b7fdfbec],.action-set.collapse.hovered-and-closed:hover .leftBar[data-v-b7fdfbec]{transform-origin:33.4% 50%;transform:rotate(90deg)}.rightBar[data-v-b7fdfbec],.action-set.collapse.hovered-and-closed:hover .rightBar[data-v-b7fdfbec]{transform-origin:67% 50%;transform:rotate(-90deg)}.rightBar[data-v-b7fdfbec]{position:absolute;top:0;left:0}.action-set.collapse:hover .leftBar[data-v-b7fdfbec],.action-set.collapse:hover .rightBar[data-v-b7fdfbec]{transform:rotate(0)}.action-set[data-v-b7fdfbec]{position:fixed;top:10px;right:10px;padding:20px;box-shadow:0 1px 2px #1927340d,0 0 4px #1927341a;border-radius:10px;display:flex;flex-direction:row-reverse;background-color:#fff;overflow:hidden}.action-menu-icon[data-v-b7fdfbec]{position:absolute;top:6px;right:8px}.action-menu-icon svg[data-v-b7fdfbec]{fill:#333}.action-set.collapse[data-v-b7fdfbec],.action-set.collapse.hovered-and-closed[data-v-b7fdfbec]:hover{max-width:25px;overflow:hidden;-webkit-transition:max-width .5s ease-in-out;-moz-transition:max-width .5s ease-in-out;-o-transition:max-width .5s ease-in-out;transition:max-width .5s ease-in-out}.action-set.collapse .action-element[data-v-b7fdfbec],.action-set.collapse.hovered-and-closed:hover .action-element[data-v-b7fdfbec]{opacity:0;-webkit-transition:opacity .25s ease-in-out;-moz-transition:opacity .25s ease-in-out;-o-transition:opacity .25s ease-in-out;transition:opacity .25s ease-in-out;transition-delay:0s}.action-set.collapse[data-v-b7fdfbec]:hover{max-width:500px}.action-set.collapse.open-set[data-v-b7fdfbec]:hover{overflow:visible!important}.action-set.collapse.hovered-and-closed:hover .action-element[data-v-b7fdfbec]{opacity:0!important}.action-set.collapse:hover .action-element[data-v-b7fdfbec]{opacity:100!important}.action-element[data-v-b7fdfbec]{margin-left:5px;margin-right:5px}button.button-default[data-v-b7fdfbec]{background-color:#fff;padding:5px 12px;border-radius:3px;box-shadow:#0000000d 0 .5px,#00000014 0 0 0 1px,#0000000d 0 2px 4px;border:none;cursor:pointer;white-space:nowrap}button.button-default[data-v-b7fdfbec]:hover{background-color:#f2f2f2}.dropdown-container[data-v-b7fdfbec]{position:relative}.dropdown[data-v-b7fdfbec]{position:absolute;top:5px;right:0;min-width:200px;box-shadow:0 .5rem 1rem #0000002e;border-radius:10px;background-color:#fff;padding:10px}button.dropdown-item[data-v-b7fdfbec]{width:100%;padding:8px 5px;text-align:left;border:none;background-color:#fff;cursor:pointer;border-radius:5px}button.dropdown-item[data-v-b7fdfbec]:hover{background-color:#f2f2f2}footer[data-v-18bfde6e]{position:fixed;bottom:0;width:100%;background-color:transparent;height:2rem;z-index:100;text-align:left;font-size:100%;display:flex;justify-content:right;padding-bottom:.2rem}ul[data-v-18bfde6e]{display:flex;flex-direction:row-reverse}.tabs li[data-v-18bfde6e]{float:left;list-style-type:none;position:relative;margin-left:-1px}.tabs a[data-v-18bfde6e]{float:left;padding:1ch 4ch 4ch;text-decoration:none;color:#000;background:#aaa;outline:2px solid inherit;outline-offset:-2px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;-moz-border-radius-topleft:15px;-moz-border-radius-topright:15px;border-top-left-radius:15px;border-top-right-radius:15px;border:1px solid #ccc}.tabs .router-link-active[data-v-18bfde6e]{z-index:3}.router-link-active[data-v-18bfde6e]{background:#827553;color:#000;box-shadow:#999}.tabs li[data-v-18bfde6e]:before,.tabs li[data-v-18bfde6e]:after,.tabs li a[data-v-18bfde6e]:before,.tabs li a[data-v-18bfde6e]:after{position:absolute;bottom:0}.tabs li[data-v-18bfde6e]:last-child:after,.tabs li:last-child a[data-v-18bfde6e]:after,.tabs li[data-v-18bfde6e]:first-child:before,.tabs li:first-child a[data-v-18bfde6e]:before,.tabs .router-link-active[data-v-18bfde6e]:after,.tabs .router-link-active[data-v-18bfde6e]:before,.tabs .router-link-active a[data-v-18bfde6e]:after,.tabs .router-link-active a[data-v-18bfde6e]:before{content:""}.tabs .router-link-active[data-v-18bfde6e]:before,.tabs .router-link-active[data-v-18bfde6e]:after{background:transparent;z-index:1}.tabs li[data-v-18bfde6e]:before,.tabs li[data-v-18bfde6e]:after{background:transparent;width:10px;height:10px}.tabs li[data-v-18bfde6e]:before{left:-10px}.tabs li[data-v-18bfde6e]:after{right:-10px}.tabs li a[data-v-18bfde6e]:after,.tabs li a[data-v-18bfde6e]:before{width:20px;height:20px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;background:transparent;z-index:2}.tabs .router-link-active a[data-v-18bfde6e]:after,.tabs .router-link-active a[data-v-18bfde6e]:before{background:transparent}.tabs li:first-child.router-link-active a[data-v-18bfde6e]:before,.tabs li:last-child.router-link-active a[data-v-18bfde6e]:after{background:transparent}.tabs li a[data-v-18bfde6e]:before{left:-20px}.tabs li a[data-v-18bfde6e]:after{right:-20px}.hidebreadcrumbs a[data-v-18bfde6e]{width:1ch;min-width:calc(66px - 4ch);background-color:#fff;padding-left:2ch;padding-right:2ch;padding-top:3px;font-size:150%;text-align:center}.rotated[data-v-18bfde6e]{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transition:transform .25s}.unrotated[data-v-18bfde6e]{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transition:transform .25s}li[data-v-18bfde6e]:active,li[data-v-18bfde6e]:hover,li[data-v-18bfde6e]:focus,li>a[data-v-18bfde6e]:active,li>a[data-v-18bfde6e]:hover,li>a[data-v-18bfde6e]:focus{z-index:3}a[data-v-18bfde6e]:active,a[data-v-18bfde6e]:hover,a[data-v-18bfde6e]:focus{outline:2px solid black;z-index:3}.hometab a[data-v-18bfde6e]{width:1ch;min-width:calc(66px - 4ch);background-color:#fff;padding-left:2ch;padding-right:2ch;padding-top:6px;text-align:center}.hometab svg[data-v-18bfde6e]{height:14pt;width:14pt}.searchtab a[data-v-18bfde6e]{min-width:calc(66px - 4ch);background-color:#fff;padding-left:2ch;padding-right:2ch;padding-top:11px;font-size:150%;align-items:center}.searchtab svg[data-v-18bfde6e]{padding-left:.25ch}.searchtab input[data-v-18bfde6e]{margin-top:-4px;outline:none;border:none;border-bottom:1.5px solid black;background-color:transparent;text-align:right;font-size:11pt}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@stonecrop/desktop",
+  "version": "0.2.5",
+  "description": "desktop specific components for Stonecrop UI",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/desktop.js",
+      "require": "./dist/desktop.umd.cjs"
+    },
+    "./styles": "./dist/style.css"
+  },
+  "main": "dist/desktop.js",
+  "module": "dist/desktop.js",
+  "types": "src/index",
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "dependencies": {
+    "immutable": "^4.3.0",
+    "vue": "^3.2.47",
+    "xstate": "~4.37.2",
+    "@stonecrop/aform": "0.2.5",
+    "@stonecrop/atable": "0.2.5",
+    "@stonecrop/stonecrop": "0.2.5",
+    "@stonecrop/themes": "0.2.5"
+  },
+  "devDependencies": {
+    "@miragejs/graphql": "^0.1.13",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
+    "@vitejs/plugin-vue": "^4.2.1",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-vue": "^9.11.1",
+    "miragejs": "^0.1.47",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5",
+    "vue-router": "^4"
+  },
+  "engines": {
+    "node": ">=20.11.0"
+  },
+  "umd": "dist/desktop.umd.cjs",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "lint": "eslint . --ext .ts,.vue",
+    "story:build": "vite build stories/ -c stories/vite.config.ts",
+    "story:dev": "vite dev stories/ -c stories/vite.config.ts"
+  }
+}

package/src/components/ActionSet.vue

@@ -0,0 +1,271 @@
+<template>
+	<div
+		:class="{ 'open-set': isOpen, 'hovered-and-closed': closeClicked }"
+		class="action-set collapse"
+		@mouseover="onHover"
+		@mouseleave="onHoverLeave">
+		<div class="action-menu-icon">
+			<div id="chevron" @click="closeClicked = !closeClicked">
+				<svg
+					class="leftBar"
+					version="1.1"
+					id="Layer_1"
+					xmlns="http://www.w3.org/2000/svg"
+					xmlns:xlink="http://www.w3.org/1999/xlink"
+					x="0px"
+					y="0px"
+					viewBox="0 0 100 100"
+					xml:space="preserve"
+					width="50"
+					height="50">
+					<polygon points="54.2,33.4 29.2,58.8 25,54.6 50,29.2 " />
+				</svg>
+
+				<svg
+					class="rightBar"
+					version="1.1"
+					id="Layer_1"
+					xmlns="http://www.w3.org/2000/svg"
+					xmlns:xlink="http://www.w3.org/1999/xlink"
+					x="0px"
+					y="0px"
+					viewBox="0 0 100 100"
+					xml:space="preserve"
+					width="50"
+					height="50">
+					<polygon points="70.8,58.8 45.8,33.4 50,29.2 75,54.6 " />
+				</svg>
+			</div>
+		</div>
+		<div style="margin-right: 30px"></div>
+		<div class="action-element" v-for="(el, index) in _elements" :key="index">
+			<button v-if="el.elementType == 'button'" :onclick="el.action" class="button-default">{{ el.label }}</button>
+			<div v-if="el.elementType == 'dropdown'">
+				<button class="button-default" @click="toggleDropdown(index)">{{ el.label }}</button>
+				<div class="dropdown-container" v-show="el.show">
+					<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>
+							<a v-else-if="item.link != null" :href="item.link"
+								><button class="dropdown-item">{{ item.label }}</button></a
+							>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+type SetAction = {
+	label: string
+	link?: string
+	action?: () => void
+}
+
+type SetElement = {
+	elementType: string
+	label: string
+	link?: string
+	show?: boolean
+	action?: () => void
+	actions?: SetAction[]
+}
+
+const props = defineProps<{
+	elements?: SetElement[]
+}>()
+
+const _elements = ref<SetElement[]>([])
+const isOpen = ref(false)
+const timeout = ref<NodeJS.Timeout>(null)
+const hover = ref(false)
+const closeClicked = ref(false)
+
+onMounted(() => {
+	_elements.value = props.elements
+	closeDropdowns()
+})
+
+const closeDropdowns = () => {
+	for (let element of _elements.value) {
+		if (element.elementType === 'dropdown') {
+			element.show = false
+		}
+	}
+}
+
+const onHover = () => {
+	hover.value = true
+	timeout.value = setTimeout(() => {
+		if (hover.value) {
+			isOpen.value = true
+		}
+	}, 500)
+}
+
+const onHoverLeave = () => {
+	hover.value = false
+	closeClicked.value = false
+	clearTimeout(timeout.value)
+	isOpen.value = false
+}
+
+const toggleDropdown = (index: number) => {
+	const showDropdown = !_elements.value[index].show
+	closeDropdowns()
+	_elements.value[index].show = showDropdown
+}
+</script>
+
+<style scoped>
+#chevron {
+	position: relative;
+	transform: rotate(90deg);
+}
+
+.leftBar,
+.rightBar {
+	transition-duration: 0.225s;
+	transition-property: transform;
+}
+
+.leftBar,
+.action-set.collapse.hovered-and-closed:hover .leftBar {
+	transform-origin: 33.4% 50%;
+	transform: rotate(90deg);
+}
+
+.rightBar,
+.action-set.collapse.hovered-and-closed:hover .rightBar {
+	transform-origin: 67% 50%;
+	transform: rotate(-90deg);
+}
+
+.rightBar {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.action-set.collapse:hover .leftBar {
+	transform: rotate(0);
+}
+
+.action-set.collapse:hover .rightBar {
+	transform: rotate(0);
+}
+
+.action-set {
+	position: fixed;
+	top: 10px;
+	right: 10px;
+	padding: 20px;
+	box-shadow: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1);
+	border-radius: 10px;
+	display: flex;
+	flex-direction: row-reverse;
+	background-color: white;
+	overflow: hidden;
+}
+
+.action-menu-icon {
+	position: absolute;
+	top: 6px;
+	right: 8px;
+}
+
+.action-menu-icon svg {
+	fill: #333333;
+}
+
+.action-set.collapse,
+.action-set.collapse.hovered-and-closed:hover {
+	max-width: 25px;
+	overflow: hidden;
+
+	-webkit-transition: max-width 0.5s ease-in-out;
+	-moz-transition: max-width 0.5s ease-in-out;
+	-o-transition: max-width 0.5s ease-in-out;
+	transition: max-width 0.5s ease-in-out;
+}
+
+.action-set.collapse .action-element,
+.action-set.collapse.hovered-and-closed:hover .action-element {
+	opacity: 0;
+	-webkit-transition: opacity 0.25s ease-in-out;
+	-moz-transition: opacity 0.25s ease-in-out;
+	-o-transition: opacity 0.25s ease-in-out;
+	transition: opacity 0.25s ease-in-out;
+	transition-delay: 0s;
+}
+
+.action-set.collapse:hover {
+	max-width: 500px;
+}
+
+.action-set.collapse.open-set:hover {
+	overflow: visible !important;
+}
+
+.action-set.collapse.hovered-and-closed:hover .action-element {
+	opacity: 0 !important;
+	/* transition-delay: 0.5s; */
+}
+
+.action-set.collapse:hover .action-element {
+	opacity: 100 !important;
+	/* transition-delay: 0.5s; */
+}
+
+.action-element {
+	margin-left: 5px;
+	margin-right: 5px;
+}
+button.button-default {
+	background-color: #ffffff;
+	padding: 5px 12px;
+	border-radius: 3px;
+	box-shadow: rgba(0, 0, 0, 0.05) 0px 0.5px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
+		rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
+	border: none;
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+button.button-default:hover {
+	background-color: #f2f2f2;
+}
+
+.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;
+}
+
+button.dropdown-item {
+	width: 100%;
+	padding: 8px 5px;
+	text-align: left;
+	border: none;
+	background-color: #ffffff;
+	cursor: pointer;
+	border-radius: 5px;
+}
+
+button.dropdown-item:hover {
+	background-color: #f2f2f2;
+}
+</style>

package/src/components/CommandPalette.vue

@@ -0,0 +1,5 @@
+<template>
+	<dialog></dialog>
+</template>
+
+<script setup lang="ts"></script>

package/src/components/Desktop.vue

@@ -0,0 +1,8 @@
+<template>
+	<router-view></router-view>
+	<SheetNav />
+</template>
+<script setup lang="ts">
+import { reactive, inject, onBeforeMount, ref } from 'vue'
+import SheetNav from './components/SheetNav.vue'
+</script>

package/src/components/Doctype.vue

@@ -0,0 +1,37 @@
+<template>
+	<AForm v-if="isReady" class="aform-main" v-model="schema" />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { AForm } from '@stonecrop/aform'
+import type { SchemaTypes } from '@stonecrop/aform/types'
+import { DoctypeMeta, useStonecrop } from '@stonecrop/stonecrop'
+
+const { stonecrop, isReady } = useStonecrop()
+const schema = ref<SchemaTypes[]>([])
+
+watch(isReady, () => {
+	if (isReady.value) {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+		let newSchema: SchemaTypes[] = stonecrop.value.schema.schema.toArray()
+		newSchema.forEach((item, index) => {
+			const record = stonecrop.value.store.record
+			const fieldValue = record[item.fieldname]
+			newSchema[index].value = fieldValue
+		})
+		schema.value = newSchema
+	}
+})
+
+// const route = useRoute()
+// const doctypeSlug = route.params.records?.toString().toLowerCase()
+// const recordId = route.params.record?.toString().toLowerCase()
+
+// const saveRecord = async () => {
+// 	const doctype: DoctypeMeta = await stonecrop.value.registry.getMeta(doctypeSlug)
+// 	stonecrop.value.runAction(doctype, 'save', recordId ? [recordId] : [])
+// }
+</script>

package/src/components/Records.vue

@@ -0,0 +1,20 @@
+<template>
+	<ATable
+		v-if="isReady"
+		:columns="stonecrop.schema.schema.toArray()"
+		:rows="stonecrop.store.records"
+		:config="config" />
+</template>
+
+<script setup lang="ts">
+import { ATable } from '@stonecrop/atable'
+import { useStonecrop } from '@stonecrop/stonecrop'
+
+// TODO: use component if provided else call to Records Schema endpoint/ table  / lookup
+// alteratively: a view: component map, eg records: Records, gantt: GanttView
+// default_view key in schema
+// last_used_view_type in application state
+
+const { stonecrop, isReady } = useStonecrop()
+const config = { view: 'list' }
+</script>