origam 0.3.10 → 2.3.0

package/dist/src/components/Window/OrigamWindow.vue

@@ -58,16 +58,21 @@
 <script setup>
 import { computed, provide, ref, shallowRef, StyleValue, watch } from "vue";
 import { OrigamBtn, OrigamSpacer } from "../../components";
-import { useGroup, useLocale, useProps } from "../../composables";
+import {
+  useGroup,
+  useLocale,
+  useProps,
+  useStyle
+} from "../../composables";
 import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts";
 import { vTouch } from "../../directives";
 import { AXIS, DIRECTION, MDI_ICONS } from "../../enums";
 const props = defineProps({
   continuous: { type: Boolean, required: false },
-  nextIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_LEFT },
-  prevIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_RIGHT },
+  nextIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_RIGHT },
+  prevIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_LEFT },
   reverse: { type: Boolean, required: false },
-  showArrows: { type: [String, Boolean], required: false },
+  showArrows: { type: [String, Boolean], required: false, default: true },
   touch: { type: [Boolean, Object], required: false, default: void 0 },
   modelValue: { type: null, required: false },
   disabled: { type: Boolean, required: false },
@@ -101,7 +106,7 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -211,9 +216,15 @@ const windowContainerStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(windowStyles);
 defineExpose({
   filterProps,
-  group
+  group,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -221,27 +232,31 @@ defineExpose({
 	.origam-window {
 		$this: &;
 
-		overflow: hidden;
+		overflow: var(--origam-window---overflow, hidden);
 
 		&__container {
-			display: flex;
-			flex-direction: column;
+			display: var(--origam-window__container---display, flex);
+			flex-direction: var(--origam-window__container---flex-direction, column);
 			height: inherit;
-			position: relative;
-			transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+			position: var(--origam-window__container---position, relative);
+			transition:
+				var(--origam-window---transition-duration, 0.3s)
+				var(--origam-window---transition-easing, cubic-bezier(0.25, 0.8, 0.5, 1));
 		}
 
 		&__controls {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
+			box-sizing: border-box;
+			position: var(--origam-window__controls---position, absolute);
+			left: var(--origam-window__controls---position-left, 0);
+			top: var(--origam-window__controls---position-top, 0);
+			width: var(--origam-window__controls---width, 100%);
+			height: var(--origam-window__controls---height, 100%);
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			padding: 0 16px;
+			padding: 0 var(--origam-window__controls---padding-inline, 16px);
 			pointer-events: none;
+			color: var(--origam-window__controls---color, inherit);
 
 			> * {
 				pointer-events: auto;
@@ -252,25 +267,19 @@ defineExpose({
 			overflow: hidden;
 
 			#{$this}__prev {
-				transform: translateX(-200%);
+				transform: var(--origam-window--show-arrows-on-hover---prev-transform, translateX(-200%));
 			}
 
 			#{$this}__next {
-				transform: translateX(200%);
+				transform: var(--origam-window--show-arrows-on-hover---next-transform, translateX(200%));
 			}
 
 			&:hover {
 				#{$this}__prev,
 				#{$this}__next {
-					transform: translateX(0);
+					transform: var(--origam-window--show-arrows-on-hover---hover-transform, translateX(0));
 				}
 			}
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/Window/OrigamWindowItem.vue

@@ -20,7 +20,13 @@
 <script setup>
 import { computed, inject, nextTick, shallowRef, StyleValue } from "vue";
 import { OrigamTransition } from "../../components";
-import { useGroupItem, useLazy, useProps, useSsrBoot } from "../../composables";
+import {
+  useGroupItem,
+  useLazy,
+  useProps,
+  useSsrBoot,
+  useStyle
+} from "../../composables";
 import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts";
 import { vTouch } from "../../directives";
 import { convertToUnit } from "../../utils";
@@ -115,13 +121,24 @@ const windowItemClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(windowItemStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss">
 	.origam-window-item {
+		flex: 1 1 auto;
+		min-height: 0;
+		min-width: 0;
+		width: 100%;
+
 		&--x-transition-enter-active,
 		&--x-transition-leave-active,
 		&--x-reverse-transition-enter-active,
@@ -130,7 +147,9 @@ defineExpose({
 		&--y-transition-leave-active,
 		&--y-reverse-transition-enter-active,
 		&--y-reverse-transition-leave-active {
-			transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+			transition:
+				var(--origam-window-item---x-transition-duration, 0.3s)
+				var(--origam-window-item---x-transition-easing, cubic-bezier(0.25, 0.8, 0.5, 1));
 		}
 
 		&--x-transition-leave-from,
@@ -144,6 +163,7 @@ defineExpose({
 			position: absolute !important;
 			top: 0;
 			width: 100%;
+			height: 100%;
 		}
 
 		&--x-transition-enter-from {
@@ -179,9 +199,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/index.cjs

@@ -69,6 +69,17 @@ Object.keys(_BottomNav).forEach(function (key) {
     }
   });
 });
+var _Bracket = require("./Bracket/index.cjs");
+Object.keys(_Bracket).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Bracket[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Bracket[key];
+    }
+  });
+});
 var _Breadcrumb = require("./Breadcrumb/index.cjs");
 Object.keys(_Breadcrumb).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -91,6 +102,17 @@ Object.keys(_Btn).forEach(function (key) {
     }
   });
 });
+var _ItemGroup = require("./ItemGroup/index.cjs");
+Object.keys(_ItemGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ItemGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ItemGroup[key];
+    }
+  });
+});
 var _Card = require("./Card/index.cjs");
 Object.keys(_Card).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -135,6 +157,28 @@ Object.keys(_Chip).forEach(function (key) {
     }
   });
 });
+var _ClientOnly = require("./ClientOnly/index.cjs");
+Object.keys(_ClientOnly).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ClientOnly[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ClientOnly[key];
+    }
+  });
+});
+var _Code = require("./Code/index.cjs");
+Object.keys(_Code).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Code[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Code[key];
+    }
+  });
+});
 var _ColorPicker = require("./ColorPicker/index.cjs");
 Object.keys(_ColorPicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -157,6 +201,28 @@ Object.keys(_ColorPickerField).forEach(function (key) {
     }
   });
 });
+var _CommandPalette = require("./CommandPalette/index.cjs");
+Object.keys(_CommandPalette).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CommandPalette[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CommandPalette[key];
+    }
+  });
+});
+var _ConfirmWrapper = require("./ConfirmWrapper/index.cjs");
+Object.keys(_ConfirmWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ConfirmWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ConfirmWrapper[key];
+    }
+  });
+});
 var _ContextualMenu = require("./ContextualMenu/index.cjs");
 Object.keys(_ContextualMenu).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -223,6 +289,17 @@ Object.keys(_DatePickerField).forEach(function (key) {
     }
   });
 });
+var _DefaultsProvider = require("./DefaultsProvider/index.cjs");
+Object.keys(_DefaultsProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DefaultsProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DefaultsProvider[key];
+    }
+  });
+});
 var _Dialog = require("./Dialog/index.cjs");
 Object.keys(_Dialog).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -311,17 +388,6 @@ Object.keys(_Grids).forEach(function (key) {
     }
   });
 });
-var _Highlight = require("./Highlight/index.cjs");
-Object.keys(_Highlight).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Highlight[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Highlight[key];
-    }
-  });
-});
 var _Icon = require("./Icon/index.cjs");
 Object.keys(_Icon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -652,6 +718,17 @@ Object.keys(_Snackbar).forEach(function (key) {
     }
   });
 });
+var _SnackbarStack = require("./SnackbarStack/index.cjs");
+Object.keys(_SnackbarStack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SnackbarStack[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SnackbarStack[key];
+    }
+  });
+});
 var _Switch = require("./Switch/index.cjs");
 Object.keys(_Switch).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -685,6 +762,17 @@ Object.keys(_Table).forEach(function (key) {
     }
   });
 });
+var _Tabs = require("./Tabs/index.cjs");
+Object.keys(_Tabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tabs[key];
+    }
+  });
+});
 var _TextareaField = require("./TextareaField/index.cjs");
 Object.keys(_TextareaField).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -707,6 +795,17 @@ Object.keys(_TextField).forEach(function (key) {
     }
   });
 });
+var _ThemeProvider = require("./ThemeProvider/index.cjs");
+Object.keys(_ThemeProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ThemeProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ThemeProvider[key];
+    }
+  });
+});
 var _Title = require("./Title/index.cjs");
 Object.keys(_Title).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -761,4 +860,59 @@ Object.keys(_Window).forEach(function (key) {
       return _Window[key];
     }
   });
+});
+var _Skeleton = require("./Skeleton/index.cjs");
+Object.keys(_Skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Skeleton[key];
+    }
+  });
+});
+var _Kbd = require("./Kbd/index.cjs");
+Object.keys(_Kbd).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Kbd[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Kbd[key];
+    }
+  });
+});
+var _Stepper = require("./Stepper/index.cjs");
+Object.keys(_Stepper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Stepper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Stepper[key];
+    }
+  });
+});
+var _Timeline = require("./Timeline/index.cjs");
+Object.keys(_Timeline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Timeline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Timeline[key];
+    }
+  });
+});
+var _Treeview = require("./Treeview/index.cjs");
+Object.keys(_Treeview).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Treeview[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Treeview[key];
+    }
+  });
 });

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

@@ -4,20 +4,27 @@ export * from './App';
 export * from './Avatar';
 export * from './Badge';
 export * from './BottomNav';
+export * from './Bracket';
 export * from './Breadcrumb';
 export * from './Btn';
+export * from './ItemGroup';
 export * from './Card';
 export * from './Carousel';
 export * from './Checkbox';
 export * from './Chip';
+export * from './ClientOnly';
+export * from './Code';
 export * from './ColorPicker';
 export * from './ColorPickerField';
+export * from './CommandPalette';
+export * from './ConfirmWrapper';
 export * from './ContextualMenu';
 export * from './Counter';
 export * from './DataList';
 export * from './DataTable';
 export * from './DatePicker';
 export * from './DatePickerField';
+export * from './DefaultsProvider';
 export * from './Dialog';
 export * from './Divider';
 export * from './Drawer';
@@ -26,7 +33,6 @@ export * from './Field';
 export * from './FileField';
 export * from './Form';
 export * from './Grids';
-export * from './Highlight';
 export * from './Icon';
 export * from './Img';
 export * from './InfiniteScroll';
@@ -57,13 +63,21 @@ export * from './Sheet';
 export * from './Slide';
 export * from './SliderField';
 export * from './Snackbar';
+export * from './SnackbarStack';
 export * from './Switch';
 export * from './SystemBar';
 export * from './Table';
+export * from './Tabs';
 export * from './TextareaField';
 export * from './TextField';
+export * from './ThemeProvider';
 export * from './Title';
 export * from './Toolbar';
 export * from './Tooltip';
 export * from './VirtualScroll';
 export * from './Window';
+export * from './Skeleton';
+export * from './Kbd';
+export * from './Stepper';
+export * from './Timeline';
+export * from './Treeview';

package/dist/src/components/index.js

@@ -4,20 +4,27 @@ export * from "./App/index.js";
 export * from "./Avatar/index.js";
 export * from "./Badge/index.js";
 export * from "./BottomNav/index.js";
+export * from "./Bracket/index.js";
 export * from "./Breadcrumb/index.js";
 export * from "./Btn/index.js";
+export * from "./ItemGroup/index.js";
 export * from "./Card/index.js";
 export * from "./Carousel/index.js";
 export * from "./Checkbox/index.js";
 export * from "./Chip/index.js";
+export * from "./ClientOnly/index.js";
+export * from "./Code/index.js";
 export * from "./ColorPicker/index.js";
 export * from "./ColorPickerField/index.js";
+export * from "./CommandPalette/index.js";
+export * from "./ConfirmWrapper/index.js";
 export * from "./ContextualMenu/index.js";
 export * from "./Counter/index.js";
 export * from "./DataList/index.js";
 export * from "./DataTable/index.js";
 export * from "./DatePicker/index.js";
 export * from "./DatePickerField/index.js";
+export * from "./DefaultsProvider/index.js";
 export * from "./Dialog/index.js";
 export * from "./Divider/index.js";
 export * from "./Drawer/index.js";
@@ -26,7 +33,6 @@ export * from "./Field/index.js";
 export * from "./FileField/index.js";
 export * from "./Form/index.js";
 export * from "./Grids/index.js";
-export * from "./Highlight/index.js";
 export * from "./Icon/index.js";
 export * from "./Img/index.js";
 export * from "./InfiniteScroll/index.js";
@@ -57,13 +63,21 @@ export * from "./Sheet/index.js";
 export * from "./Slide/index.js";
 export * from "./SliderField/index.js";
 export * from "./Snackbar/index.js";
+export * from "./SnackbarStack/index.js";
 export * from "./Switch/index.js";
 export * from "./SystemBar/index.js";
 export * from "./Table/index.js";
+export * from "./Tabs/index.js";
 export * from "./TextareaField/index.js";
 export * from "./TextField/index.js";
+export * from "./ThemeProvider/index.js";
 export * from "./Title/index.js";
 export * from "./Toolbar/index.js";
 export * from "./Tooltip/index.js";
 export * from "./VirtualScroll/index.js";
 export * from "./Window/index.js";
+export * from "./Skeleton/index.js";
+export * from "./Kbd/index.js";
+export * from "./Stepper/index.js";
+export * from "./Timeline/index.js";
+export * from "./Treeview/index.js";

package/dist/src/composables/Code/code.composable.cjs

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resetCodeHighlighterForTesting = resetCodeHighlighterForTesting;
+exports.useCode = useCode;
+var _consts = require("../../consts/index.cjs");
+var _enums = require("../../enums/index.cjs");
+let _highlighterPromise = null;
+let _highlighterReady = false;
+const _cache = /* @__PURE__ */new Map();
+let _unsupportedLangWarned = /* @__PURE__ */new Set();
+function makeCacheKey(code, lang, theme) {
+  return `${theme}::${lang}::${code}`;
+}
+function lruGet(key) {
+  const hit = _cache.get(key);
+  if (hit === void 0) return void 0;
+  _cache.delete(key);
+  _cache.set(key, hit);
+  return hit;
+}
+function lruSet(key, value) {
+  if (_cache.size >= _consts.CODE_CACHE_MAX_ENTRIES) {
+    const oldest = _cache.keys().next().value;
+    if (oldest !== void 0) _cache.delete(oldest);
+  }
+  _cache.set(key, value);
+}
+async function loadHighlighter() {
+  if (_highlighterPromise) return _highlighterPromise;
+  _highlighterPromise = (async () => {
+    const shiki = await Promise.resolve().then(() => require("shiki"));
+    const highlighter = await shiki.createHighlighter({
+      themes: [_consts.CODE_SHIKI_THEMES.light, _consts.CODE_SHIKI_THEMES.dark],
+      langs: [..._consts.SUPPORTED_LANGS]
+    });
+    _highlighterReady = true;
+    return highlighter;
+  })();
+  return _highlighterPromise;
+}
+function resolveLang(lang) {
+  if (_consts.SUPPORTED_LANGS.includes(lang)) return lang;
+  if (!_unsupportedLangWarned.has(lang)) {
+    _unsupportedLangWarned.add(lang);
+    console.warn(`[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${_enums.CODE_LANG.PLAINTEXT}". Supported: ${_consts.SUPPORTED_LANGS.join(", ")}.`);
+  }
+  return _enums.CODE_LANG.PLAINTEXT;
+}
+function useCode() {
+  async function highlight(code, lang, themeName) {
+    const resolvedLang = resolveLang(lang);
+    const shikiTheme = themeName === "dark" ? _consts.CODE_SHIKI_THEMES.dark : _consts.CODE_SHIKI_THEMES.light;
+    const key = makeCacheKey(code, resolvedLang, shikiTheme);
+    const cached = lruGet(key);
+    if (cached !== void 0) return cached;
+    const highlighter = await loadHighlighter();
+    let html;
+    try {
+      html = highlighter.codeToHtml(code, {
+        lang: resolvedLang,
+        theme: shikiTheme
+      });
+    } catch (err) {
+      console.warn("[origam] OrigamCode: shiki failed to tokenise, falling back to plaintext.", err);
+      html = highlighter.codeToHtml(code, {
+        lang: _enums.CODE_LANG.PLAINTEXT,
+        theme: shikiTheme
+      });
+    }
+    lruSet(key, html);
+    return html;
+  }
+  async function prime() {
+    await loadHighlighter();
+  }
+  function isReady() {
+    return _highlighterReady;
+  }
+  function resetCacheForTesting() {
+    _cache.clear();
+    _unsupportedLangWarned = /* @__PURE__ */new Set();
+  }
+  return {
+    highlight,
+    prime,
+    isReady,
+    resetCacheForTesting
+  };
+}
+function resetCodeHighlighterForTesting() {
+  _highlighterPromise = null;
+  _highlighterReady = false;
+  _cache.clear();
+  _unsupportedLangWarned = /* @__PURE__ */new Set();
+}

package/dist/src/composables/Code/code.composable.d.ts

@@ -0,0 +1,10 @@
+import type { IUseCodeReturn } from '../../interfaces';
+/**
+ * Public hook — see `IUseCodeReturn` for the surface contract.
+ */
+export declare function useCode(): IUseCodeReturn;
+/**
+ * Test-only: drop the singleton so a fresh dynamic import runs next call.
+ * Production code should never need this.
+ */
+export declare function resetCodeHighlighterForTesting(): void;