@statezero/core 0.2.34 → 0.2.36

package/dist/adaptors/vue/components/defaults/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Create a default components registry (without Control - user must provide)
+ *
+ * @param {Object} options - Override specific components
+ * @returns {Object} Components registry for LayoutRenderer
+ */
+export function createDefaultComponents(options?: Object): Object;

package/dist/adaptors/vue/components/defaults/index.js

@@ -0,0 +1,31 @@
+/**
+ * Default component implementations for LayoutRenderer
+ *
+ * These are minimal, unstyled implementations that follow the contracts.
+ * Users can use these as-is or as reference for custom implementations.
+ */
+export { default as AlertElement } from './AlertElement.vue';
+export { default as LabelElement } from './LabelElement.vue';
+export { default as DividerElement } from './DividerElement.vue';
+export { default as DisplayElement } from './DisplayElement.vue';
+export { default as GroupElement } from './GroupElement.vue';
+export { default as TabsElement } from './TabsElement.vue';
+export { default as ErrorBlock } from './ErrorBlock.vue';
+/**
+ * Create a default components registry (without Control - user must provide)
+ *
+ * @param {Object} options - Override specific components
+ * @returns {Object} Components registry for LayoutRenderer
+ */
+export function createDefaultComponents(options = {}) {
+    return {
+        Alert: AlertElement,
+        Label: LabelElement,
+        Divider: DividerElement,
+        Display: DisplayElement,
+        Group: GroupElement,
+        Tabs: TabsElement,
+        ErrorBlock: ErrorBlock,
+        ...options
+    };
+}

package/dist/adaptors/vue/components/index.d.ts

@@ -0,0 +1 @@
+export { AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from "./defaults/index.js";

package/dist/adaptors/vue/components/index.js

@@ -0,0 +1,7 @@
+/**
+ * Vue components for StateZero
+ */
+// Main layout renderer
+export { default as LayoutRenderer } from './LayoutRenderer.vue';
+// Default component implementations
+export { AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from './defaults/index.js';

package/dist/adaptors/vue/index.d.ts

@@ -1,2 +1,3 @@
 export { useQueryset, querysets } from "./composables.js";
 export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor } from "./reactivity.js";
+export { LayoutRenderer, AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from "./components/index.js";

package/dist/adaptors/vue/index.js

@@ -1,2 +1,4 @@
 export { useQueryset, querysets } from './composables.js';
 export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor } from './reactivity.js';
+// Layout components
+export { LayoutRenderer, AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from './components/index.js';

package/dist/vue-entry.d.ts

@@ -3,4 +3,13 @@ import { QuerySetAdaptor } from './adaptors/vue/index.js';
 import { MetricAdaptor } from './adaptors/vue/index.js';
 import { useQueryset } from './adaptors/vue/index.js';
 import { querysets } from './adaptors/vue/index.js';
-export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets };
+import { LayoutRenderer } from './adaptors/vue/index.js';
+import { AlertElement } from './adaptors/vue/index.js';
+import { LabelElement } from './adaptors/vue/index.js';
+import { DividerElement } from './adaptors/vue/index.js';
+import { DisplayElement } from './adaptors/vue/index.js';
+import { GroupElement } from './adaptors/vue/index.js';
+import { TabsElement } from './adaptors/vue/index.js';
+import { ErrorBlock } from './adaptors/vue/index.js';
+import { createDefaultComponents } from './adaptors/vue/index.js';
+export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets, LayoutRenderer, AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents };

package/dist/vue-entry.js

@@ -1,2 +1,7 @@
 import { ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets } from './adaptors/vue/index.js';
-export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets };
+import { LayoutRenderer, AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from './adaptors/vue/index.js';
+export { 
+// Reactivity
+ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets, 
+// Layout components
+LayoutRenderer, AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statezero/core",
-  "version": "0.2.34",
+  "version": "0.2.36",
   "type": "module",
   "module": "ESNext",
   "description": "The type-safe frontend client for StateZero - connect directly to your backend models with zero boilerplate",
@@ -26,11 +26,14 @@
       "import": "./dist/vue-entry.js",
       "require": "./dist/vue-entry.js"
     },
+    "./vue/layout.css": "./src/adaptors/vue/components/layout.css",
+    "./vue/layout.tailwind.css": "./src/adaptors/vue/components/layout.tailwind.css",
     "./testing": {
       "import": "./dist/testing.js",
       "require": "./dist/testing.js"
     },
-    "./dist/*": "./dist/*"
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*"
   },
   "scripts": {
     "test": "vitest run --config=vitest.base.config.ts",
@@ -72,6 +75,8 @@
   },
   "files": [
     "dist",
+    "src/adaptors/vue/components/layout.css",
+    "src/adaptors/vue/components/layout.tailwind.css",
     "LICENSE",
     "README.md"
   ],

package/src/adaptors/vue/components/layout.css

@@ -0,0 +1,51 @@
+/**
+ * StateZero Layout Renderer - Base CSS Styles
+ *
+ * Import this file to get default styling for layout components:
+ *   import '@statezero/core/vue/layout.css'
+ *
+ * Or define your own styles targeting these class names.
+ */
+
+/* Layout containers */
+.sz-layout {
+  display: flex;
+}
+
+.sz-layout-vertical {
+  flex-direction: column;
+}
+
+.sz-layout-horizontal {
+  flex-direction: row;
+}
+
+/* Gap utilities */
+.sz-gap-sm {
+  gap: 0.5rem;
+}
+
+.sz-gap-md {
+  gap: 1rem;
+}
+
+.sz-gap-lg {
+  gap: 1.5rem;
+}
+
+/* Horizontal alignment */
+.sz-align-start {
+  align-items: flex-start;
+}
+
+.sz-align-center {
+  align-items: center;
+}
+
+.sz-align-end {
+  align-items: flex-end;
+}
+
+.sz-align-stretch {
+  align-items: stretch;
+}

package/src/adaptors/vue/components/layout.tailwind.css

@@ -0,0 +1,51 @@
+/**
+ * StateZero Layout Renderer - Tailwind CSS Styles
+ *
+ * Import this file if you're using Tailwind CSS:
+ *   import '@statezero/core/vue/layout.tailwind.css'
+ *
+ * This maps sz-* classes to Tailwind utilities via @apply.
+ */
+
+/* Layout containers */
+.sz-layout {
+  @apply flex;
+}
+
+.sz-layout-vertical {
+  @apply flex-col;
+}
+
+.sz-layout-horizontal {
+  @apply flex-row;
+}
+
+/* Gap utilities */
+.sz-gap-sm {
+  @apply gap-2;
+}
+
+.sz-gap-md {
+  @apply gap-4;
+}
+
+.sz-gap-lg {
+  @apply gap-6;
+}
+
+/* Horizontal alignment */
+.sz-align-start {
+  @apply items-start;
+}
+
+.sz-align-center {
+  @apply items-center;
+}
+
+.sz-align-end {
+  @apply items-end;
+}
+
+.sz-align-stretch {
+  @apply items-stretch;
+}