orio-ui 1.20.0 → 1.23.2

package/dist/runtime/composables/usePinchZoom.js

@@ -0,0 +1,66 @@
+export function usePinchZoom(callbacks) {
+  const pointers = /* @__PURE__ */ new Map();
+  let startDist = 0;
+  let lastMid = { x: 0, y: 0 };
+  function distance() {
+    const pts = [...pointers.values()];
+    if (pts.length < 2) return 0;
+    return Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y);
+  }
+  function midpoint() {
+    const pts = [...pointers.values()];
+    if (pts.length < 2) return { x: 0, y: 0 };
+    return {
+      x: (pts[0].x + pts[1].x) / 2,
+      y: (pts[0].y + pts[1].y) / 2
+    };
+  }
+  function onPointerDown(e) {
+    if (e.pointerType !== "touch") return false;
+    if (pointers.size >= 2) return false;
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    e.currentTarget.setPointerCapture(e.pointerId);
+    if (pointers.size === 2) {
+      startDist = distance();
+      lastMid = midpoint();
+      callbacks.onPinchStart?.();
+      return true;
+    }
+    if (pointers.size === 1) {
+      callbacks.onSingleDown?.(e);
+      return true;
+    }
+    return true;
+  }
+  function onPointerMove(e) {
+    if (!pointers.has(e.pointerId)) return false;
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointers.size === 2) {
+      const dist = distance();
+      const mid = midpoint();
+      const scaleFactor = startDist > 0 ? dist / startDist : 1;
+      const dx = mid.x - lastMid.x;
+      const dy = mid.y - lastMid.y;
+      lastMid = mid;
+      callbacks.onPinchMove?.(scaleFactor, mid.x, mid.y, dx, dy);
+      return true;
+    }
+    return false;
+  }
+  function onPointerUp(e) {
+    if (!pointers.has(e.pointerId)) return false;
+    pointers.delete(e.pointerId);
+    if (pointers.size === 1) {
+      const [id, pt] = [...pointers.entries()][0];
+      startDist = 0;
+      callbacks.onSingleUp?.(id, pt.x, pt.y);
+      return true;
+    }
+    if (pointers.size === 0) {
+      startDist = 0;
+      callbacks.onAllUp?.();
+    }
+    return false;
+  }
+  return { onPointerDown, onPointerMove, onPointerUp, pointers };
+}

package/dist/runtime/composables/useValidation.js

@@ -1,4 +1,6 @@
 import { reactive, ref, unref } from "vue";
+import { useI18n } from "vue-i18n";
+import en from "../i18n/en.json";
 export function isFilled(value) {
   return !!value.length;
 }
@@ -7,7 +9,15 @@ export function isEmail(value) {
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   return emailRegex.test(value);
 }
+function getT() {
+  try {
+    return useI18n().t;
+  } catch {
+    return (key) => key.split(".").reduce((o, k) => o?.[k], en) ?? key;
+  }
+}
 export function useValidation(rules) {
+  const t = getT();
   const validationRules = ref(rules ?? []);
   const errors = reactive({});
   function validate({
@@ -18,7 +28,7 @@ export function useValidation(rules) {
   }) {
     if (!validator(unref(model))) {
       if (!errors[id]) {
-        errors[id] = message || "Error on this field";
+        errors[id] = message || t("validation.fieldError");
       }
       document.getElementById(id)?.scrollIntoView({
         behavior: "smooth",

package/dist/runtime/i18n/en.json

@@ -0,0 +1,20 @@
+{
+  "selector": {
+    "placeholder": "Select an option",
+    "selected": "{count} selected",
+    "noOptions": "No options found"
+  },
+  "dateRangePicker": {
+    "startBeforeEnd": "Start date must be before end date.",
+    "present": "Present"
+  },
+  "dates": {
+    "present": "Present"
+  },
+  "validation": {
+    "fieldError": "Error on this field"
+  },
+  "canvas": {
+    "toolbarLabel": "Canvas toolbar"
+  }
+}

package/dist/runtime/i18n/index.d.ts

@@ -0,0 +1,11 @@
+import en from "./en.json.js";
+import uk from "./uk.json.js";
+export type LocaleMessages = Record<string, string | LocaleMessages>;
+export declare const i18n: import("vue-i18n").I18n<{
+    en: any;
+    uk: any;
+}, {}, {}, string, false>;
+export declare function addLocale(code: string, messages: LocaleMessages): void;
+export declare function mergeLocale(code: string, messages: LocaleMessages): void;
+export declare function setLocale(code: string): void;
+export { en, uk };

package/dist/runtime/i18n/index.js

@@ -0,0 +1,19 @@
+import { createI18n } from "vue-i18n";
+import en from "./en.json";
+import uk from "./uk.json";
+export const i18n = createI18n({
+  legacy: false,
+  locale: "en",
+  fallbackLocale: "en",
+  messages: { en, uk }
+});
+export function addLocale(code, messages) {
+  i18n.global.setLocaleMessage(code, messages);
+}
+export function mergeLocale(code, messages) {
+  i18n.global.mergeLocaleMessage(code, messages);
+}
+export function setLocale(code) {
+  i18n.global.locale.value = code;
+}
+export { en, uk };

package/dist/runtime/i18n/uk.json

@@ -0,0 +1,20 @@
+{
+  "selector": {
+    "placeholder": "Оберіть опцію",
+    "selected": "{count} обрано",
+    "noOptions": "Опцій не знайдено"
+  },
+  "dateRangePicker": {
+    "startBeforeEnd": "Дата початку має бути раніше дати завершення.",
+    "present": "Теперішній час"
+  },
+  "dates": {
+    "present": "Теперішній час"
+  },
+  "validation": {
+    "fieldError": "Помилка в цьому полі"
+  },
+  "canvas": {
+    "toolbarLabel": "Панель інструментів полотна"
+  }
+}

package/dist/runtime/index.d.ts

@@ -24,14 +24,18 @@ export { default as Modal } from "./components/Modal.vue.js";
 export { default as Popover } from "./components/Popover.vue.js";
 export { default as Tooltip } from "./components/Tooltip.vue.js";
 export { default as Upload } from "./components/upload/index.vue.js";
+export * from "./canvas.js";
 export { default as EmptyState } from "./components/EmptyState.vue.js";
 export { default as DashedContainer } from "./components/DashedContainer.vue.js";
 export { default as ControlElement } from "./components/ControlElement.vue.js";
 export { default as GalleryCarousel } from "./components/gallery/Carousel.vue.js";
+export { default as GalleryCarouselPreview } from "./components/gallery/CarouselPreview.vue.js";
 export { default as ViewText } from "./components/view/Text.vue.js";
+export { default as ViewKeyBinds, type KeyBindsProps, } from "./components/view/KeyBinds.vue.js";
 export { default as ViewDates } from "./components/view/Dates.vue.js";
 export { default as ViewSeparator } from "./components/view/Separator.vue.js";
 export { default as ListItem } from "./components/ListItem.vue.js";
+export { default as LocaleSwitcher, type LocaleOption, } from "./components/LocaleSwitcher.vue.js";
 export { useApi, type ApiOptions, type RequestBody, type RequestMethod, } from "./composables/useApi.js";
 export { useFuzzySearch } from "./composables/useFuzzySearch.js";
 export { useModal, type ModalProps, type OriginRect, } from "./composables/useModal.js";
@@ -43,3 +47,4 @@ export { useValidation, isFilled, isEmail, type ValidationRule, } from "./compos
 export { iconRegistry, type IconName } from "./utils/icon-registry.js";
 export { flattenParams, unflattenParams, parsePath, topLevelKeys, } from "./utils/urlParams.js";
 export { useUrlSync } from "./composables/useUrlSync.js";
+export { i18n, en, uk, addLocale, mergeLocale, setLocale, type LocaleMessages, } from "./i18n/index.js";

package/dist/runtime/index.js

@@ -28,14 +28,22 @@ export { default as Modal } from "./components/Modal.vue";
 export { default as Popover } from "./components/Popover.vue";
 export { default as Tooltip } from "./components/Tooltip.vue";
 export { default as Upload } from "./components/upload/index.vue";
+export * from "./canvas.js";
 export { default as EmptyState } from "./components/EmptyState.vue";
 export { default as DashedContainer } from "./components/DashedContainer.vue";
 export { default as ControlElement } from "./components/ControlElement.vue";
 export { default as GalleryCarousel } from "./components/gallery/Carousel.vue";
+export { default as GalleryCarouselPreview } from "./components/gallery/CarouselPreview.vue";
 export { default as ViewText } from "./components/view/Text.vue";
+export {
+  default as ViewKeyBinds
+} from "./components/view/KeyBinds.vue";
 export { default as ViewDates } from "./components/view/Dates.vue";
 export { default as ViewSeparator } from "./components/view/Separator.vue";
 export { default as ListItem } from "./components/ListItem.vue";
+export {
+  default as LocaleSwitcher
+} from "./components/LocaleSwitcher.vue";
 export {
   useApi
 } from "./composables/useApi.js";
@@ -60,3 +68,11 @@ export {
   topLevelKeys
 } from "./utils/urlParams.js";
 export { useUrlSync } from "./composables/useUrlSync.js";
+export {
+  i18n,
+  en,
+  uk,
+  addLocale,
+  mergeLocale,
+  setLocale
+} from "./i18n/index.js";

package/dist/runtime/plugins/i18n.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/i18n.js

@@ -0,0 +1,18 @@
+import { defineNuxtPlugin } from "#app";
+import { createI18n } from "vue-i18n";
+import en from "../i18n/en.json";
+import uk from "../i18n/uk.json";
+export default defineNuxtPlugin({
+  name: "orio-ui-i18n",
+  enforce: "pre",
+  setup(nuxtApp) {
+    const i18n = createI18n({
+      legacy: false,
+      locale: "en",
+      fallbackLocale: "en",
+      messages: { en, uk }
+    });
+    nuxtApp.vueApp.use(i18n);
+    nuxtApp.provide("orioI18n", i18n);
+  }
+});

package/dist/runtime/utils/icon-registry.js

@@ -132,5 +132,17 @@ export const iconRegistry = {
   // More e-commerce actions
   compare: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h5v2h2V1h-2zm0 15H5l5-6zm9-15h-5v2h5v13l-5-6v9h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2"/></svg>`,
   discount: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m12.79 21l-.16-.16L2.38 10.59a2.04 2.04 0 0 1-.38-.62a2 2 0 0 1 0-1.54c.08-.23.2-.45.38-.62l1.67-1.67a2.04 2.04 0 0 1 .62-.38c.24-.09.49-.13.75-.13s.51.04.75.13c.23.08.44.2.62.38l1.26 1.25V3c0-.55.2-1.02.59-1.41C9.03 1.2 9.5 1 10.04 1h3.92c.54 0 1.01.2 1.41.59c.39.39.59.86.59 1.41v4.39l1.26-1.25c.18-.18.39-.3.62-.38c.24-.09.49-.13.75-.13s.51.04.75.13c.23.08.44.2.62.38l1.67 1.67c.18.17.3.38.38.62c.09.24.13.49.13.76c0 .26-.04.51-.13.75s-.2.45-.38.63L11.38 20.83l-.17.16c-.39.39-.86.59-1.41.59s-1.02-.2-1.41-.59zM14 8V3h-4v5zm-6.8 4.2c.26.26.57.39.93.39c.36 0 .67-.13.93-.39c.26-.26.39-.57.39-.93c0-.36-.13-.67-.39-.93a1.28 1.28 0 0 0-.93-.39c-.36 0-.67.13-.93.39c-.26.26-.39.57-.39.93c0 .36.13.67.39.93m9.6 4.6c.26.26.57.39.93.39c.36 0 .67-.13.93-.39c.26-.26.39-.57.39-.93c0-.36-.13-.67-.39-.93a1.28 1.28 0 0 0-.93-.39c-.36 0-.67.13-.93.39c-.26.26-.39.57-.39.93c0 .36.13.67.39.93m-8.4 1.1l9.5-9.5l-1.4-1.4l-9.5 9.5z"/></svg>`,
-  box: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5v-3h14zm0-5H5V5h14z"/></svg>`
+  box: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5v-3h14zm0-5H5V5h14z"/></svg>`,
+  // CANVAS / DRAWING
+  pencil: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83l3.75 3.75z"/></svg>`,
+  text: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M2.5 4v3h5v12h3V7h5V4zm19 5h-9v3h3v7h3v-7h3z"/></svg>`,
+  undo: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12.5 8c-2.65 0-5.05 1.04-6.83 2.73L3 8v9h9l-2.83-2.83A7.95 7.95 0 0 1 12.5 12c3.04 0 5.64 1.71 6.96 4.21l1.77-.89A9.96 9.96 0 0 0 12.5 8"/></svg>`,
+  redo: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18.4 10.6C16.55 9 14.15 8 11.5 8c-4.16 0-7.74 2.42-9.44 5.93l1.77.89A7.96 7.96 0 0 1 11.5 12c2.13 0 4.07.74 5.62 1.98L14 17h9V8z"/></svg>`,
+  eraser: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16.24 3.56l4.95 4.94c.78.79.78 2.05 0 2.84L12 20.53a4.01 4.01 0 0 1-2.83 1.17H4.59L2 19.12l4.83-4.83l-1.42-1.42l7.79-7.78l1.41-1.41l1.42-.12zm-1.42 4.24l-5.66 5.66l2.83 2.83l5.66-5.66z"/></svg>`,
+  move: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13 6v5h5V8l4 4l-4 4v-3h-5v5h3l-4 4l-4-4h3v-5H6v3l-4-4l4-4v3h5V6H8l4-4l4 4z"/></svg>`,
+  highlight: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 3h18v2H3zm0 16h18v2H3zm0-8h18v2H3zm2-4v4h14V7zm0 8v4h14v-4z" opacity="0.5"/><rect x="5" y="7" width="14" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="5" y="13" width="14" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>`,
+  rotate: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8"/></svg>`,
+  resize: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M22 22H2V2h2v18h18zM6 6h4v2H8v2H6zm12 12h-4v-2h2v-2h2zM6 18v-4h2v2h2v2zm12-12v4h-2V8h-2V6z"/></svg>`,
+  transform: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="1.5" d="M5 5h14v14H5z"/><circle cx="5" cy="5" r="1.75" fill="currentColor"/><circle cx="19" cy="5" r="1.75" fill="currentColor"/><circle cx="5" cy="19" r="1.75" fill="currentColor"/><circle cx="19" cy="19" r="1.75" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1.5" d="M12 5V2"/><circle cx="12" cy="2" r="1.25" fill="currentColor"/></svg>`,
+  export: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"/></svg>`
 };

package/package.json

@@ -1,17 +1,21 @@
 {
   "name": "orio-ui",
-  "version": "1.20.0",
+  "version": "1.23.2",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",
   "exports": {
     ".": {
-      "types": "./dist/types.d.mts",
+      "types": "./dist/runtime/index.d.ts",
       "import": "./dist/module.mjs"
     },
     "./runtime": {
       "types": "./dist/runtime/index.d.ts",
-      "import": "./dist/runtime/index.mjs"
+      "import": "./dist/runtime/index.js"
+    },
+    "./canvas": {
+      "types": "./dist/runtime/canvas.d.ts",
+      "import": "./dist/runtime/canvas.js"
     },
     "./styles": "./dist/runtime/assets/css/main.css",
     "./theme": "./dist/runtime/assets/css/colors.css"
@@ -42,7 +46,8 @@
     "change-case": "^5.4.4",
     "fuse.js": "^7.0.0",
     "ofetch": "^1.5.1",
-    "universal-cookie": "^7.0.0"
+    "universal-cookie": "^7.0.0",
+    "vue-i18n": "^11.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",