@yh-ui/components 0.1.25 → 0.1.27

package/dist/highlight.d.ts

@@ -0,0 +1,13 @@
+type HighlightResult = {
+    value: string;
+};
+type HighlightOptions = {
+    language?: string;
+    ignoreIllegals?: boolean;
+};
+declare const hljs: {
+    getLanguage(language?: string): string | undefined;
+    highlight(code: string, _options?: HighlightOptions): HighlightResult;
+    highlightAuto(code: string): HighlightResult;
+};
+export default hljs;

package/dist/highlight.mjs

@@ -0,0 +1,54 @@
+const KNOWN_LANGUAGES = /* @__PURE__ */ new Set([
+  "bash",
+  "c",
+  "cpp",
+  "css",
+  "go",
+  "html",
+  "java",
+  "javascript",
+  "json",
+  "jsx",
+  "markdown",
+  "md",
+  "plaintext",
+  "python",
+  "rust",
+  "shell",
+  "sql",
+  "text",
+  "ts",
+  "tsx",
+  "typescript",
+  "vue",
+  "xml",
+  "yaml",
+  "yml"
+]);
+const escapeHtml = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+const normalizeLanguage = (language) => {
+  if (!language) return "";
+  const normalized = language.toLowerCase();
+  if (normalized === "vue") return "html";
+  if (normalized === "ts") return "typescript";
+  if (normalized === "js") return "javascript";
+  if (normalized === "sh") return "shell";
+  if (normalized === "md") return "markdown";
+  return normalized;
+};
+const render = (code) => ({
+  value: escapeHtml(code)
+});
+const hljs = {
+  getLanguage(language) {
+    const normalized = normalizeLanguage(language);
+    return normalized && KNOWN_LANGUAGES.has(normalized) ? normalized : void 0;
+  },
+  highlight(code, _options) {
+    return render(code);
+  },
+  highlightAuto(code) {
+    return render(code);
+  }
+};
+export default hljs;

package/dist/image/src/image-viewer.vue

@@ -2,7 +2,7 @@
 import { computed, ref, onMounted, onUnmounted, watch } from "vue";
 import { useNamespace } from "@yh-ui/hooks";
 import { imageViewerProps, imageViewerEmits } from "./image-viewer";
-import Viewer from "viewerjs";
+import Viewer from "../../viewerjs";
 import "viewerjs/dist/viewer.css";
 defineOptions({
   name: "YhImageViewer"
@@ -31,7 +31,7 @@ const initViewerJS = () => {
   });
   document.body.appendChild(list);
   viewerList = list;
-  viewer = new Viewer(list, {
+  const nextViewer = new Viewer(list, {
     ...props.viewerOptions,
     initialViewIndex: props.initialIndex,
     hidden: () => {
@@ -44,7 +44,8 @@ const initViewerJS = () => {
       emit("close");
     }
   });
-  viewer.show();
+  viewer = nextViewer;
+  nextViewer.show();
 };
 const handlePrev = () => {
   const len = props.urlList.length;
@@ -84,9 +85,12 @@ watch(index, (val) => {
   reset();
   emit("switch", val);
 });
-watch(() => props.initialIndex, (val) => {
-  index.value = val;
-});
+watch(
+  () => props.initialIndex,
+  (val) => {
+    index.value = val;
+  }
+);
 const handleKeyDown = (e) => {
   if (props.viewerMode === "viewerjs") return;
   if (e.key === "Escape" && props.closeOnPressEscape) {
@@ -131,8 +135,10 @@ onUnmounted(() => {
       <!-- Close -->
       <span :class="[ns.e('btn'), ns.e('close')]" @click="handleClose">
         <svg viewBox="0 0 1024 1024" width="1em" height="1em">
-          <path fill="currentColor"
-            d="M512 456.2L794.8 173.4l55.8 55.8L567.8 512l282.8 282.8-55.8 55.8L512 567.8 229.2 850.6l-55.8-55.8L456.2 512 173.4 229.2l55.8-55.8L512 456.2z" />
+          <path
+            fill="currentColor"
+            d="M512 456.2L794.8 173.4l55.8 55.8L567.8 512l282.8 282.8-55.8 55.8L512 567.8 229.2 850.6l-55.8-55.8L456.2 512 173.4 229.2l55.8-55.8L512 456.2z"
+          />
         </svg>
       </span>
 
@@ -140,14 +146,18 @@ onUnmounted(() => {
       <template v-if="urlList.length > 1">
         <span :class="[ns.e('btn'), ns.e('prev')]" @click="handlePrev">
           <svg viewBox="0 0 1024 1024" width="1em" height="1em">
-            <path fill="currentColor"
-              d="M609.4 824.6L296.8 512l312.6-312.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L228.9 489.4c-12.5 12.5-12.5 32.8 0 45.3l335.2 335.2c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z" />
+            <path
+              fill="currentColor"
+              d="M609.4 824.6L296.8 512l312.6-312.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L228.9 489.4c-12.5 12.5-12.5 32.8 0 45.3l335.2 335.2c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z"
+            />
           </svg>
         </span>
         <span :class="[ns.e('btn'), ns.e('next')]" @click="handleNext">
           <svg viewBox="0 0 1024 1024" width="1em" height="1em">
-            <path fill="currentColor"
-              d="M414.6 824.6l312.6-312.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L346.7 802.1c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L727.2 512 414.6 199.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l335.2 335.2c12.5 12.5 12.5 32.8 0 45.3L369.3 915.1c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z" />
+            <path
+              fill="currentColor"
+              d="M414.6 824.6l312.6-312.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L346.7 802.1c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L727.2 512 414.6 199.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l335.2 335.2c12.5 12.5 12.5 32.8 0 45.3L369.3 915.1c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"
+            />
           </svg>
         </span>
       </template>
@@ -155,26 +165,38 @@ onUnmounted(() => {
       <!-- Actions -->
       <div v-if="showProgress" :class="ns.e('actions')">
         <div :class="ns.e('actions-inner')">
-          <i :class="ns.e('zoom-out')" @click="handleZoomOut"><svg viewBox="0 0 1024 1024" width="1em" height="1em">
-              <path fill="currentColor" d="M192 480h640v64H192z" />
-            </svg></i>
-          <i :class="ns.e('zoom-in')" @click="handleZoomIn"><svg viewBox="0 0 1024 1024" width="1em" height="1em">
-              <path fill="currentColor" d="M480 480V224h64v256h256v64H544v256h-64V544H224v-64h256z" />
-            </svg></i>
-          <i :class="ns.e('reset')" @click="reset"><svg viewBox="0 0 1024 1024" width="1em" height="1em">
-              <path fill="currentColor"
-                d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 64a384 384 0 1 0 0 768 384 384 0 0 0 0-768zm0 128a256 256 0 1 1 0 512 256 256 0 0 1 0-512z" />
-            </svg></i>
+          <i :class="ns.e('zoom-out')" @click="handleZoomOut"
+            ><svg viewBox="0 0 1024 1024" width="1em" height="1em">
+              <path fill="currentColor" d="M192 480h640v64H192z" /></svg
+          ></i>
+          <i :class="ns.e('zoom-in')" @click="handleZoomIn"
+            ><svg viewBox="0 0 1024 1024" width="1em" height="1em">
+              <path
+                fill="currentColor"
+                d="M480 480V224h64v256h256v64H544v256h-64V544H224v-64h256z"
+              /></svg
+          ></i>
+          <i :class="ns.e('reset')" @click="reset"
+            ><svg viewBox="0 0 1024 1024" width="1em" height="1em">
+              <path
+                fill="currentColor"
+                d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 64a384 384 0 1 0 0 768 384 384 0 0 0 0-768zm0 128a256 256 0 1 1 0 512 256 256 0 0 1 0-512z"
+              /></svg
+          ></i>
           <i :class="ns.e('rotate-left')" @click="handleRotateLeft">
             <svg viewBox="0 0 1024 1024" width="1em" height="1em">
-              <path fill="currentColor"
-                d="M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384h-64c0 176.7-143.3 320-320 320s-320-143.3-320-320 143.3-320 320-320v64l192-128-192-128v64z" />
+              <path
+                fill="currentColor"
+                d="M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384h-64c0 176.7-143.3 320-320 320s-320-143.3-320-320 143.3-320 320-320v64l192-128-192-128v64z"
+              />
             </svg>
           </i>
           <i :class="ns.e('rotate-right')" @click="handleRotateRight">
             <svg viewBox="0 0 1024 1024" width="1em" height="1em">
-              <path fill="currentColor"
-                d="M512 128V64L320 192l192 128v-64c176.7 0 320 143.3 320 320s-143.3 320-320 320-320-143.3-320-320h-64c0 212.1 171.9 384 384 384s384-171.9 384-384-171.9-384-384-384z" />
+              <path
+                fill="currentColor"
+                d="M512 128V64L320 192l192 128v-64c176.7 0 320 143.3 320 320s-143.3 320-320 320-320-143.3-320-320h-64c0 212.1 171.9 384 384 384s384-171.9 384-384-171.9-384-384-384z"
+              />
             </svg>
           </i>
         </div>

package/dist/image/src/image.vue

@@ -5,7 +5,7 @@ import { useComponentTheme } from "@yh-ui/theme";
 import { isClient, getScrollContainer } from "@yh-ui/utils";
 import { imageProps } from "./image";
 import YhImageViewer from "./image-viewer.vue";
-import Viewer from "viewerjs";
+import Viewer from "../../viewerjs";
 import "viewerjs/dist/viewer.css";
 defineOptions({
   name: "YhImage"
@@ -118,7 +118,7 @@ const initViewerJS = () => {
     });
     document.body.appendChild(list);
     viewerList = list;
-    viewer = new Viewer(list, {
+    const nextViewer = new Viewer(list, {
       ...props.viewerOptions,
       hidden: () => {
         if (viewerList) {
@@ -129,10 +129,12 @@ const initViewerJS = () => {
         viewer = null;
       }
     });
-    viewer.view(props.initialIndex);
+    viewer = nextViewer;
+    nextViewer.view(props.initialIndex);
   } else {
-    viewer = new Viewer(imgElement, props.viewerOptions);
-    viewer.show();
+    const nextViewer = new Viewer(imgElement, props.viewerOptions);
+    viewer = nextViewer;
+    nextViewer.show();
   }
 };
 watch(

package/dist/markdown-it.cjs

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var markdownItModule = _interopRequireWildcard(require("markdown-it"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const MarkdownIt = "default" in markdownItModule ? markdownItModule.default ?? markdownItModule : markdownItModule;
+module.exports = MarkdownIt;

package/dist/markdown-it.d.ts

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

package/dist/markdown-it.mjs

@@ -0,0 +1,3 @@
+import * as markdownItModule from "markdown-it";
+const MarkdownIt = "default" in markdownItModule ? markdownItModule.default ?? markdownItModule : markdownItModule;
+export default MarkdownIt;

package/dist/menu/src/menu.vue

@@ -35,6 +35,10 @@ const menuStyle = computed(() => {
     ...themeStyle.value
   };
 });
+const getMenuItemKey = (item) => {
+  const value = item[props.keyField || "key"] ?? item.index ?? item.key;
+  return value == null ? "" : String(value);
+};
 const menuClass = computed(() => [
   ns.b(),
   ns.m(props.mode),
@@ -131,11 +135,7 @@ defineExpose({
 <template>
   <ul :class="menuClass" :style="menuStyle" role="menu">
     <slot>
-      <yh-menu-recursive-item
-        v-for="item in options"
-        :key="(item[keyField] as string) || item.index || (item.key as string) || ''"
-        :item="item"
-      />
+      <yh-menu-recursive-item v-for="item in options" :key="getMenuItemKey(item)" :item="item" />
     </slot>
   </ul>
 </template>

package/dist/transfer/index.cjs

@@ -23,12 +23,18 @@ Object.keys(_transfer2).forEach(function (key) {
   });
 });
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const registerComponent = (app, component) => {
+  const name = component.name;
+  if (name && !app.component(name)) {
+    app.component(name, component);
+  }
+};
 _transfer.default.install = app => {
-  app.component(_transfer.default.name, _transfer.default);
-  app.component(_transferPanel.default.name, _transferPanel.default);
+  registerComponent(app, _transfer.default);
+  registerComponent(app, _transferPanel.default);
 };
 _transferPanel.default.install = app => {
-  app.component(_transferPanel.default.name, _transferPanel.default);
+  registerComponent(app, _transferPanel.default);
 };
 const YhTransfer = exports.YhTransfer = _transfer.default;
 const YhTransferPanel = exports.YhTransferPanel = _transferPanel.default;

package/dist/transfer/index.mjs

@@ -1,11 +1,17 @@
 import Transfer from "./src/transfer.vue";
 import TransferPanel from "./src/transfer-panel.vue";
+const registerComponent = (app, component) => {
+  const name = component.name;
+  if (name && !app.component(name)) {
+    app.component(name, component);
+  }
+};
 Transfer.install = (app) => {
-  app.component(Transfer.name, Transfer);
-  app.component(TransferPanel.name, TransferPanel);
+  registerComponent(app, Transfer);
+  registerComponent(app, TransferPanel);
 };
 TransferPanel.install = (app) => {
-  app.component(TransferPanel.name, TransferPanel);
+  registerComponent(app, TransferPanel);
 };
 export const YhTransfer = Transfer;
 export const YhTransferPanel = TransferPanel;

package/dist/typography/src/paragraph.vue

@@ -15,7 +15,10 @@ const props = defineProps({
   themeOverrides: { type: null, required: false }
 });
 const ns = useNamespace("typography");
-const { themeStyle } = useComponentTheme("typography", computed(() => props.themeOverrides));
+const { themeStyle } = useComponentTheme(
+  "typography",
+  computed(() => props.themeOverrides)
+);
 const paragraphClasses = computed(() => [
   ns.e("paragraph"),
   props.type && ns.em("paragraph", props.type),
@@ -37,10 +40,14 @@ const ellipsisStyle = computed(() => {
   }
   return {};
 });
+const paragraphStyle = computed(() => ({
+  ...themeStyle.value || {},
+  ...ellipsisStyle.value
+}));
 </script>
 
 <template>
-  <p :class="paragraphClasses" :style="{ ...themeStyle as Record<string, string>, ...ellipsisStyle }">
+  <p :class="paragraphClasses" :style="paragraphStyle">
     <mark v-if="mark">
       <slot />
     </mark>

package/dist/upload/src/upload.vue

@@ -200,7 +200,7 @@ import {
 import { useNamespace, useLocale } from "@yh-ui/hooks";
 import { useComponentTheme } from "@yh-ui/theme";
 import { YhIcon } from "../../icon";
-import Viewer from "viewerjs";
+import Viewer from "../../viewerjs";
 import "viewerjs/dist/viewer.css";
 defineOptions({
   name: "YhUpload"
@@ -486,7 +486,7 @@ const handlePreview = (file) => {
     container.innerHTML = imgList;
     const initialIndex = images.indexOf(file.url);
     if (viewer) viewer.destroy();
-    viewer = new Viewer(container, {
+    const nextViewer = new Viewer(container, {
       hidden: () => {
         viewer?.destroy();
         viewer = null;
@@ -509,8 +509,9 @@ const handlePreview = (file) => {
         flipVertical: 4
       }
     });
-    viewer.view(initialIndex !== -1 ? initialIndex : 0);
-    viewer.show();
+    viewer = nextViewer;
+    nextViewer.view(initialIndex !== -1 ? initialIndex : 0);
+    nextViewer.show();
   }
 };
 const handleDownload = async (file) => {

package/dist/viewerjs.cjs

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var viewerModule = _interopRequireWildcard(require("viewerjs"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Viewer = "default" in viewerModule ? viewerModule.default ?? viewerModule : viewerModule;
+module.exports = Viewer;

package/dist/viewerjs.d.ts

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

package/dist/viewerjs.mjs

@@ -0,0 +1,3 @@
+import * as viewerModule from "viewerjs";
+const Viewer = "default" in viewerModule ? viewerModule.default ?? viewerModule : viewerModule;
+export default Viewer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh-ui/components",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "YH-UI Vue 3 Components",
   "type": "module",
   "sideEffects": [
@@ -36,16 +36,16 @@
   "dependencies": {
     "@webcontainer/api": "^1.6.1",
     "@floating-ui/dom": "^1.7.4",
+    "@yh-ui/hooks": "^0.1.27",
+    "@yh-ui/locale": "^0.1.27",
+    "@yh-ui/theme": "^0.1.27",
+    "@yh-ui/utils": "^0.1.27",
     "async-validator": "^4.2.5",
     "dayjs": "^1.11.19",
     "markdown-it": "^14.1.1",
     "monaco-editor": "^0.55.1",
     "xlsx": "^0.18.5",
-    "viewerjs": "^1.11.7",
-    "@yh-ui/hooks": "0.1.25",
-    "@yh-ui/theme": "0.1.25",
-    "@yh-ui/locale": "0.1.25",
-    "@yh-ui/utils": "0.1.25"
+    "viewerjs": "^1.11.7"
   },
   "peerDependencies": {
     "vue": "^3.5.27"