jky-component-lib 0.0.56 → 0.0.60

package/dist/es/page-table/index.d.ts

@@ -0,0 +1,4 @@
+import { InstallWithSFC } from '../utils/types';
+import { default as PageTable } from './PageTable.vue';
+export declare const JkyPageTable: InstallWithSFC<typeof PageTable>;
+export default JkyPageTable;

package/dist/es/page-table/index.js

@@ -0,0 +1,8 @@
+import { installWithSFC } from "../utils/with-install.js";
+import _sfc_main from "./PageTable.vue.js";
+/* empty css               */
+const JkyPageTable = installWithSFC(_sfc_main);
+export {
+  JkyPageTable,
+  JkyPageTable as default
+};

package/dist/es/page-table/style.css

@@ -0,0 +1,4 @@
+/* PageTable 组件样式 */
+.jky-page-table {
+  /* background-color: transparent; */
+}

package/dist/es/rich-editor/RichEditor.vue.d.ts

@@ -0,0 +1,78 @@
+import { RichEditorProps } from './types';
+type __VLS_Props = RichEditorProps;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
+    editor: globalThis.Ref<any, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+} & {
+    "update:modelValue": (value: string) => any;
+    change: (value: string) => any;
+    blur: (event: Event) => any;
+    focus: (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    onBlur?: ((event: Event) => any) | undefined;
+    onFocus?: ((event: Event) => any) | undefined;
+}>, {
+    height: string;
+    modelValue: string;
+    disabled: boolean;
+    readonly: boolean;
+    placeholder: string;
+    language: string;
+    plugins: string;
+    toolbar: string | string[];
+    menubar: boolean | string;
+    branding: boolean;
+    statusbar: boolean;
+    apiKey: string;
+    init: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    editorRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<globalThis.ExtractPropTypes<import('@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes').CopyProps<import('@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes').IPropTypes>>>, () => any, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        init: any;
+        apiKey: any;
+        licenseKey: any;
+        cloudChannel: any;
+        id: any;
+        initialValue: any;
+        outputFormat: any;
+        inline: any;
+        modelEvents: any;
+        plugins: any;
+        tagName: any;
+        toolbar: any;
+        modelValue: any;
+        disabled: any;
+        readonly: any;
+        tinymceScriptSrc: any;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<globalThis.ExtractPropTypes<import('@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes').CopyProps<import('@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes').IPropTypes>>>, () => any, {}, {}, {}, {
+        init: any;
+        apiKey: any;
+        licenseKey: any;
+        cloudChannel: any;
+        id: any;
+        initialValue: any;
+        outputFormat: any;
+        inline: any;
+        modelEvents: any;
+        plugins: any;
+        tagName: any;
+        toolbar: any;
+        modelValue: any;
+        disabled: any;
+        readonly: any;
+        tinymceScriptSrc: any;
+    }> | null;
+}, HTMLDivElement>;
+export default _default;

package/dist/es/rich-editor/RichEditor.vue.js

@@ -0,0 +1,105 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { defineComponent, useModel, ref, openBlock, createElementBlock, createVNode, unref, mergeModels } from "vue";
+import { Editor } from "../node_modules/@tinymce/tinymce-vue/lib/es2015/main/ts/components/Editor.js";
+const _hoisted_1 = { class: "jky-rich-editor" };
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
+  name: "JkyRichEditor"
+}), {
+  __name: "RichEditor",
+  props: /* @__PURE__ */ mergeModels({
+    modelValue: { default: "" },
+    disabled: { type: Boolean, default: false },
+    placeholder: { default: "" },
+    height: { default: "400px" },
+    language: { default: "zh-CN" },
+    plugins: { default: "preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons" },
+    toolbar: { default: "undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | alignleft aligncenter alignright alignjustify | outdent indent | checklist numlist bullist indent outdent | emoticons charmap | removeformat | codesample | code" },
+    menubar: { type: [Boolean, String], default: true },
+    branding: { type: Boolean, default: false },
+    statusbar: { type: Boolean, default: true },
+    readonly: { type: Boolean, default: false },
+    apiKey: { default: "0hp1syn1u5hzcdgv20yow1bcp4mvba8xtqi6pcgpnuz61dul" },
+    init: { default: () => ({}) }
+  }, {
+    "modelValue": {
+      default: ""
+    },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "change", "focus", "blur"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const modelValue = useModel(__props, "modelValue");
+    const editorRef = ref(null);
+    function handleEditorChange(content) {
+      modelValue.value = content;
+      emit("change", content);
+    }
+    function handleFocus(event) {
+      emit("focus", event);
+    }
+    function handleBlur(event) {
+      emit("blur", event);
+    }
+    const initConfig = __spreadValues({
+      language: props.language,
+      height: Number.parseInt(props.height.replace("px", ""), 10),
+      placeholder: props.placeholder,
+      plugins: props.plugins,
+      toolbar: props.toolbar,
+      menubar: props.menubar,
+      branding: props.branding,
+      statusbar: props.statusbar,
+      readonly: props.readonly || props.disabled,
+      content_style: `
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      font-size: 14px;
+      line-height: 1.6;
+    }
+  `
+    }, props.init);
+    __expose({
+      editor: editorRef
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(Editor), {
+          ref_key: "editorRef",
+          ref: editorRef,
+          modelValue: modelValue.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+          "api-key": __props.apiKey,
+          init: initConfig,
+          disabled: __props.disabled,
+          readonly: __props.readonly,
+          onOnChange: handleEditorChange,
+          onOnFocus: handleFocus,
+          onOnBlur: handleBlur
+        }, null, 8, ["modelValue", "api-key", "disabled", "readonly"])
+      ]);
+    };
+  }
+}));
+export {
+  _sfc_main as default
+};

package/dist/es/rich-editor/RichEditor.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./RichEditor.vue.js";
+/* empty css                */
+export {
+  _sfc_main as default
+};

package/dist/es/rich-editor/index.d.ts

@@ -0,0 +1,4 @@
+import { InstallWithSFC } from '../utils';
+import { default as RichEditor } from './RichEditor.vue';
+export declare const JkyRichEditor: InstallWithSFC<typeof RichEditor>;
+export default JkyRichEditor;

package/dist/es/rich-editor/index.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./RichEditor.vue.js";
+/* empty css                */
+import { installWithSFC } from "../utils/with-install.js";
+const JkyRichEditor = installWithSFC(_sfc_main);
+export {
+  JkyRichEditor,
+  JkyRichEditor as default
+};

package/dist/es/rich-editor/style.css

@@ -0,0 +1,34 @@
+
+/* 禁止使用 @apply，所有 TailwindCSS 工具类直接写在 class 中 */
+/* 样式文件仅用于定义组件特定的自定义纯 CSS 样式 */
+/* RichEditor 组件样式变量 */
+:root {
+  --jky-rich-editor-border: #d9d9d9;
+  --jky-rich-editor-border-hover: #409eff;
+  --jky-rich-editor-border-radius: 4px;
+  --jky-rich-editor-box-shadow: 0 0 0 1px #409eff;
+}
+.jky-rich-editor {
+  width: 100%;
+}
+.jky-rich-editor .tox-tinymce {
+  border: 1px solid var(--jky-rich-editor-border);
+  border-radius: var(--jky-rich-editor-border-radius);
+  transition: border-color 0.2s;
+}
+.jky-rich-editor .tox-tinymce:hover {
+  border-color: var(--jky-rich-editor-border-hover);
+}
+.jky-rich-editor .tox-tinymce:focus-within {
+  border-color: var(--jky-rich-editor-border-hover);
+  box-shadow: var(--jky-rich-editor-box-shadow);
+}
+/* 禁用状态 */
+.jky-rich-editor.is-disabled .tox-tinymce {
+  background-color: #f5f7fa;
+  cursor: not-allowed;
+}
+/* 只读状态 */
+.jky-rich-editor.is-readonly .tox-tinymce {
+  background-color: #fafafa;
+}

package/dist/es/style.css

@@ -505,6 +505,10 @@
     margin-left: calc(var(--spacing) * 2);
   }
 
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
+
   .icon-\[ant-design--menu-fold-outlined\] {
     width: 1em;
     height: 1em;
@@ -1005,6 +1009,10 @@
     display: inline;
   }
 
+  .table {
+    display: table;
+  }
+
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -1110,6 +1118,10 @@
     justify-content: space-around;
   }
 
+  .justify-between {
+    justify-content: space-between;
+  }
+
   .justify-end {
     justify-content: flex-end;
   }
@@ -1267,6 +1279,10 @@
     background-color: var(--color-red-500) !important;
   }
 
+  .bg-transparent {
+    background-color: #0000;
+  }
+
   .bg-white {
     background-color: var(--color-white);
   }
@@ -1456,6 +1472,14 @@
     text-transform: lowercase;
   }
 
+  .italic {
+    font-style: italic;
+  }
+
+  .underline {
+    text-decoration-line: underline;
+  }
+
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1466,6 +1490,10 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .filter {
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

package/dist/es/styles.css

@@ -1 +1 @@
-:root{--jky-button-primary-bg:#007bff;--jky-button-primary-text:#fff;--jky-button-primary-hover-bg:#0056b3;--jky-button-success-bg:#28a745;--jky-button-success-text:#fff;--jky-button-success-hover-bg:#1e7e34;--jky-button-warning-bg:#ffc107;--jky-button-warning-text:#fff;--jky-button-warning-hover-bg:#e0a800;--jky-button-danger-bg:#dc3545;--jky-button-danger-text:#fff;--jky-button-danger-hover-bg:#c82333;--jky-button-info-bg:#6c757d;--jky-button-info-text:#fff;--jky-button-info-hover-bg:#5a6268;--jky-button-default-bg:#fff;--jky-button-default-text:#606266;--jky-button-default-border:#dcdfe6;--jky-button-default-hover-bg:#f5f7fa;--jky-button-font-size:14px;--jky-button-font-size-small:12px;--jky-button-font-size-large:16px;--jky-button-padding:0 16px;--jky-button-padding-small:0 12px;--jky-button-padding-large:0 20px;--jky-button-height:40px;--jky-button-height-small:32px;--jky-button-height-large:48px;--jky-button-border-radius:0.375rem;--jky-button-disabled-opacity:0.5;--jky-button-disabled-bg:#f5f7fa;--jky-button-disabled-text:#c0c4cc;--jky-button-loading-opacity:0.7;--jky-button-icon-size:1.25rem;--jky-button-icon-margin:0.5rem}.jky-button{align-items:center;background-color:var(--jky-button-default-bg);border:1px solid var(--jky-button-default-border);border-radius:var(--jky-button-border-radius);color:var(--jky-button-default-text);cursor:pointer;display:inline-flex;font-size:var(--jky-button-font-size);font-weight:500;height:var(--jky-button-height);justify-content:center;padding:var(--jky-button-padding);transition:color .2s,background-color .2s}.jky-button--primary{background-color:var(--jky-button-primary-bg);border:none;color:var(--jky-button-primary-text)}.jky-button--primary:hover{background-color:var(--jky-button-primary-hover-bg)}.jky-button--success{background-color:var(--jky-button-success-bg);border:none;color:var(--jky-button-success-text)}.jky-button--success:hover{background-color:var(--jky-button-success-hover-bg)}.jky-button--warning{background-color:var(--jky-button-warning-bg);border:none;color:var(--jky-button-warning-text)}.jky-button--warning:hover{background-color:var(--jky-button-warning-hover-bg)}.jky-button--danger{background-color:var(--jky-button-danger-bg);border:none;color:var(--jky-button-danger-text)}.jky-button--danger:hover{background-color:var(--jky-button-danger-hover-bg)}.jky-button--info{background-color:var(--jky-button-info-bg);border:none;color:var(--jky-button-info-text)}.jky-button--info:hover{background-color:var(--jky-button-info-hover-bg)}.jky-button--small{font-size:var(--jky-button-font-size-small);height:var(--jky-button-height-small);padding:var(--jky-button-padding-small)}.jky-button--large{font-size:var(--jky-button-font-size-large);height:var(--jky-button-height-large);padding:var(--jky-button-padding-large)}.jky-button.is-disabled{background-color:var(--jky-button-disabled-bg);color:var(--jky-button-disabled-text);cursor:not-allowed;opacity:var(--jky-button-disabled-opacity);pointer-events:none}.jky-button.is-loading{opacity:var(--jky-button-loading-opacity);pointer-events:none;position:relative}.jky-button__loading{display:flex;inset:0;position:absolute}.jky-button__icon,.jky-button__loading{align-items:center;justify-content:center}.jky-button__icon{display:inline-flex;font-size:1em;margin-right:var(--jky-button-icon-margin)}.jky-button__icon:only-child{margin-right:0}.jky-button--suffix .jky-button__icon{margin-left:var(--jky-button-icon-margin);margin-right:0}.jky-button:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #000;outline:2px solid transparent;outline-offset:2px}.loading-spinner{animation:spin 1s linear infinite;height:var(--jky-button-icon-size);width:var(--jky-button-icon-size)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:root{--jky-button-nav-active-bg:var(--el-color-primary);--jky-button-nav-active-text:#fff;--jky-button-nav-inactive-bg:var(--el-fill-color-light);--jky-button-nav-inactive-text:var(--el-text-color-regular);--el-dropdown-menu-margin-left:12px}.jky-button-nav{align-items:center;display:flex;flex-wrap:wrap;.el-dropdown{margin-left:var(--el-dropdown-menu-margin-left)}}.jky-button-nav-item{background-color:var(--jky-button-nav-inactive-bg);color:var(--jky-button-nav-inactive-text);&.is-active,&[aria-pressed=true]{background-color:var(--jky-button-nav-active-bg);color:var(--jky-button-nav-active-text)}}:root{--j-code-mirror-border-color:#dcdfe6;--j-code-mirror-border-radius:4px;--j-code-mirror-height:400px}.j-code-mirror-editor{border-radius:var(--j-code-mirror-border-radius);height:var(--j-code-mirror-height);overflow:hidden;width:100%}.code-mirror-container{height:100%;overflow:auto;width:100%}.code-mirror-container .cm-editor{height:100%}.code-mirror-container .cm-scroller{font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.5;overflow:auto}.code-mirror-container .cm-gutters{background-color:#2c2d2d;border-color:#4c4d4f;color:#909399}:root{--jky-form-item-border-width:4px;--jky-form-item-border-color:var(--el-color-primary);--jky-form-item-bg-color:rgba(var(--el-color-primary-rgb),0.5)}:root{--jky-menu-bg-color:#fff;--jky-menu-text-color:#303133;--jky-menu-active-color:#409eff;--jky-menu-hover-bg-color:#f5f7fa;--jky-menu-hover-text-color:#606266;--jky-menu-item-height:56px;--jky-menu-item-padding:0 20px;--jky-menu-item-font-size:14px;--jky-menu-icon-size:18px;--jky-menu-icon-margin:8px;--jky-menu-border-color:#e4e7ed;--jky-menu-disabled-opacity:0.5;--jky-menu-disabled-text-color:#c0c4cc}.jky-menu{li+li{margin-top:0}}.jky-menu-item__icon{align-items:center;display:inline-flex;flex-shrink:0;font-size:var(--jky-menu-icon-size);height:var(--jky-menu-icon-size);justify-content:center;margin-right:var(--jky-menu-icon-margin);width:var(--jky-menu-icon-size)}:root{--jky-page-header-bg-color:#1890ff;--jky-page-header-bg-size:cover;--jky-page-header-bg-position:center;--jky-page-header-box-shadow:0 2px 8px rgba(0,0,0,.15);--jky-page-header-padding-x:24px;--jky-page-header-padding-x-mobile:16px;--jky-page-header-gap:16px;--jky-page-header-gap-mobile:12px;--jky-page-header-gap-left:12px;--jky-page-header-gap-status:12px;--jky-page-header-gap-center:24px;--jky-page-header-gap-center-mobile:12px;--jky-page-header-title-color:#fff;--jky-page-header-title-size:20px;--jky-page-header-title-size-mobile:16px;--jky-page-header-title-weight:600;--jky-page-header-text-color:hsla(0,0%,100%,.85);--jky-page-header-text-size:16px;--jky-page-header-icon-color:#fff;--jky-page-header-icon-size:20px;--jky-page-header-icon-hover-opacity:0.8;--jky-page-header-logo-height:40px;--jky-page-header-avatar-size:32px}.jky-page-header{background-color:var(--jky-page-header-bg-color);background-position:var(--jky-page-header-bg-position);background-size:var(--jky-page-header-bg-size);box-shadow:var(--jky-page-header-box-shadow);width:100%}.jky-page-header__container{align-items:center;display:flex;height:100%;justify-content:space-between;margin:0 auto;max-width:100%;padding:0 var(--jky-page-header-padding-x)}.jky-page-header__left{align-items:center;display:flex;flex-shrink:0;gap:var(--jky-page-header-gap-left)}.jky-page-header__logo{height:var(--jky-page-header-logo-height);object-fit:contain;width:auto}.jky-page-header__title{color:var(--jky-page-header-title-color);font-size:var(--jky-page-header-title-size);font-weight:var(--jky-page-header-title-weight);white-space:nowrap}.jky-page-header__center{align-items:center;display:flex;flex:1;justify-content:center;margin:0 var(--jky-page-header-gap-center);min-width:0}.jky-page-header__right{align-items:center;display:flex;flex-shrink:0;gap:var(--jky-page-header-gap)}.jky-page-header__status-icons{align-items:center;display:flex;gap:var(--jky-page-header-gap-status)}.jky-page-header__status-icon{color:var(--jky-page-header-icon-color);cursor:pointer;transition:opacity .2s;&:hover{opacity:var(--jky-page-header-icon-hover-opacity)}}.jky-page-header__time{color:var(--jky-page-header-text-color);font-size:var(--jky-page-header-text-size);white-space:nowrap}.jky-page-header__user{align-items:center;color:var(--jky-page-header-text-color);cursor:pointer;display:flex;gap:8px}.jky-page-header__avatar{color:var(--jky-page-header-icon-color);img{height:100%;object-fit:cover;width:100%}}.jky-page-header__username{white-space:nowrap}.jky-page-header__logout,.jky-page-header__username{color:var(--jky-page-header-text-color);font-size:var(--jky-page-header-text-size)}@media (max-width:768px){.jky-page-header__container{padding:0 var(--jky-page-header-padding-x-mobile)}.jky-page-header__title{font-size:var(--jky-page-header-title-size-mobile)}.jky-page-header__center{margin:0 var(--jky-page-header-gap-center-mobile)}.jky-page-header__right{gap:var(--jky-page-header-gap-mobile)}}:root{--jky-say-hello-bg:#42b883;--jky-say-hello-text:#fff;--jky-say-hello-hover-bg:#3aa876;--jky-say-hello-font-size:16px;--jky-say-hello-padding:8px 20px;--jky-say-hello-margin:4px 2px;--jky-say-hello-border-radius:6px}.jky-say-hello{background-color:var(--jky-say-hello-bg);border-radius:var(--jky-say-hello-border-radius);color:var(--jky-say-hello-text);cursor:pointer;display:inline-block;font-size:var(--jky-say-hello-font-size);margin:var(--jky-say-hello-margin);padding:var(--jky-say-hello-padding);text-align:center;text-decoration:none;transition:background-color .2s ease}.jky-say-hello:hover{background-color:var(--jky-say-hello-hover-bg)}@import "tailwindcss";@plugin "@iconify/tailwind4";@source "../node_modules/jky-component-lib/dist/es/";@source "../docs/**/*.md";@source "./**/*.md";@source "./**/*.vue";@source "./**/*.css";@custom-variant dark (&:is(.dark *))
+:root{--jky-add-input-gap:12px;--jky-add-input-row-gap:8px;--jky-add-input-min-width:100px;--jky-add-input-action-width:80px}.jky-add-input{display:flex;flex-direction:column;gap:var(--jky-add-input-row-gap);min-width:var(--jky-add-input-min-width)}.jky-add-input__row{align-items:center;display:flex;gap:var(--jky-add-input-gap)}.jky-add-input__key,.jky-add-input__value{flex:1;min-width:0}.jky-add-input__actions{display:flex;flex-shrink:0;gap:var(--jky-add-input-gap);width:var(--jky-add-input-action-width)}:root{--jky-button-primary-bg:#007bff;--jky-button-primary-text:#fff;--jky-button-primary-hover-bg:#0056b3;--jky-button-success-bg:#28a745;--jky-button-success-text:#fff;--jky-button-success-hover-bg:#1e7e34;--jky-button-warning-bg:#ffc107;--jky-button-warning-text:#fff;--jky-button-warning-hover-bg:#e0a800;--jky-button-danger-bg:#dc3545;--jky-button-danger-text:#fff;--jky-button-danger-hover-bg:#c82333;--jky-button-info-bg:#6c757d;--jky-button-info-text:#fff;--jky-button-info-hover-bg:#5a6268;--jky-button-default-bg:#fff;--jky-button-default-text:#606266;--jky-button-default-border:#dcdfe6;--jky-button-default-hover-bg:#f5f7fa;--jky-button-font-size:14px;--jky-button-font-size-small:12px;--jky-button-font-size-large:16px;--jky-button-padding:0 16px;--jky-button-padding-small:0 12px;--jky-button-padding-large:0 20px;--jky-button-height:40px;--jky-button-height-small:32px;--jky-button-height-large:48px;--jky-button-border-radius:0.375rem;--jky-button-disabled-opacity:0.5;--jky-button-disabled-bg:#f5f7fa;--jky-button-disabled-text:#c0c4cc;--jky-button-loading-opacity:0.7;--jky-button-icon-size:1.25rem;--jky-button-icon-margin:0.5rem}.jky-button{align-items:center;background-color:var(--jky-button-default-bg);border:1px solid var(--jky-button-default-border);border-radius:var(--jky-button-border-radius);color:var(--jky-button-default-text);cursor:pointer;display:inline-flex;font-size:var(--jky-button-font-size);font-weight:500;height:var(--jky-button-height);justify-content:center;padding:var(--jky-button-padding);transition:color .2s,background-color .2s}.jky-button--primary{background-color:var(--jky-button-primary-bg);border:none;color:var(--jky-button-primary-text)}.jky-button--primary:hover{background-color:var(--jky-button-primary-hover-bg)}.jky-button--success{background-color:var(--jky-button-success-bg);border:none;color:var(--jky-button-success-text)}.jky-button--success:hover{background-color:var(--jky-button-success-hover-bg)}.jky-button--warning{background-color:var(--jky-button-warning-bg);border:none;color:var(--jky-button-warning-text)}.jky-button--warning:hover{background-color:var(--jky-button-warning-hover-bg)}.jky-button--danger{background-color:var(--jky-button-danger-bg);border:none;color:var(--jky-button-danger-text)}.jky-button--danger:hover{background-color:var(--jky-button-danger-hover-bg)}.jky-button--info{background-color:var(--jky-button-info-bg);border:none;color:var(--jky-button-info-text)}.jky-button--info:hover{background-color:var(--jky-button-info-hover-bg)}.jky-button--small{font-size:var(--jky-button-font-size-small);height:var(--jky-button-height-small);padding:var(--jky-button-padding-small)}.jky-button--large{font-size:var(--jky-button-font-size-large);height:var(--jky-button-height-large);padding:var(--jky-button-padding-large)}.jky-button.is-disabled{background-color:var(--jky-button-disabled-bg);color:var(--jky-button-disabled-text);cursor:not-allowed;opacity:var(--jky-button-disabled-opacity);pointer-events:none}.jky-button.is-loading{opacity:var(--jky-button-loading-opacity);pointer-events:none;position:relative}.jky-button__loading{display:flex;inset:0;position:absolute}.jky-button__icon,.jky-button__loading{align-items:center;justify-content:center}.jky-button__icon{display:inline-flex;font-size:1em;margin-right:var(--jky-button-icon-margin)}.jky-button__icon:only-child{margin-right:0}.jky-button--suffix .jky-button__icon{margin-left:var(--jky-button-icon-margin);margin-right:0}.jky-button:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #000;outline:2px solid transparent;outline-offset:2px}.loading-spinner{animation:spin 1s linear infinite;height:var(--jky-button-icon-size);width:var(--jky-button-icon-size)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:root{--jky-button-nav-active-bg:var(--el-color-primary);--jky-button-nav-active-text:#fff;--jky-button-nav-inactive-bg:var(--el-fill-color-light);--jky-button-nav-inactive-text:var(--el-text-color-regular);--el-dropdown-menu-margin-left:12px}.jky-button-nav{align-items:center;display:flex;flex-wrap:wrap;.el-dropdown{margin-left:var(--el-dropdown-menu-margin-left)}}.jky-button-nav-item{background-color:var(--jky-button-nav-inactive-bg);color:var(--jky-button-nav-inactive-text);&.is-active,&[aria-pressed=true]{background-color:var(--jky-button-nav-active-bg);color:var(--jky-button-nav-active-text)}}:root{--j-code-mirror-border-color:#dcdfe6;--j-code-mirror-border-radius:4px;--j-code-mirror-height:400px}.j-code-mirror-editor{border-radius:var(--j-code-mirror-border-radius);height:var(--j-code-mirror-height);overflow:hidden;width:100%}.code-mirror-container{height:100%;overflow:auto;width:100%}.code-mirror-container .cm-editor{height:100%}.code-mirror-container .cm-scroller{font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.5;overflow:auto}.code-mirror-container .cm-gutters{background-color:#2c2d2d;border-color:#4c4d4f;color:#909399}:root{--jky-form-item-border-width:4px;--jky-form-item-border-color:var(--el-color-primary);--jky-form-item-bg-color:rgba(var(--el-color-primary-rgb),0.5)}:root{--jky-menu-bg-color:#fff;--jky-menu-text-color:#303133;--jky-menu-active-color:#409eff;--jky-menu-hover-bg-color:#f5f7fa;--jky-menu-hover-text-color:#606266;--jky-menu-item-height:56px;--jky-menu-item-padding:0 20px;--jky-menu-item-font-size:14px;--jky-menu-icon-size:18px;--jky-menu-icon-margin:8px;--jky-menu-border-color:#e4e7ed;--jky-menu-disabled-opacity:0.5;--jky-menu-disabled-text-color:#c0c4cc}.jky-menu{li+li{margin-top:0}}.jky-menu-item__icon{align-items:center;display:inline-flex;flex-shrink:0;font-size:var(--jky-menu-icon-size);height:var(--jky-menu-icon-size);justify-content:center;margin-right:var(--jky-menu-icon-margin);width:var(--jky-menu-icon-size)}:root{--jky-page-header-bg-color:#1890ff;--jky-page-header-bg-size:cover;--jky-page-header-bg-position:center;--jky-page-header-box-shadow:0 2px 8px rgba(0,0,0,.15);--jky-page-header-padding-x:24px;--jky-page-header-padding-x-mobile:16px;--jky-page-header-gap:16px;--jky-page-header-gap-mobile:12px;--jky-page-header-gap-left:12px;--jky-page-header-gap-status:12px;--jky-page-header-gap-center:24px;--jky-page-header-gap-center-mobile:12px;--jky-page-header-title-color:#fff;--jky-page-header-title-size:20px;--jky-page-header-title-size-mobile:16px;--jky-page-header-title-weight:600;--jky-page-header-text-color:hsla(0,0%,100%,.85);--jky-page-header-text-size:16px;--jky-page-header-icon-color:#fff;--jky-page-header-icon-size:20px;--jky-page-header-icon-hover-opacity:0.8;--jky-page-header-logo-height:40px;--jky-page-header-avatar-size:32px}.jky-page-header{background-color:var(--jky-page-header-bg-color);background-position:var(--jky-page-header-bg-position);background-size:var(--jky-page-header-bg-size);box-shadow:var(--jky-page-header-box-shadow);width:100%}.jky-page-header__container{align-items:center;display:flex;height:100%;justify-content:space-between;margin:0 auto;max-width:100%;padding:0 var(--jky-page-header-padding-x)}.jky-page-header__left{align-items:center;display:flex;flex-shrink:0;gap:var(--jky-page-header-gap-left)}.jky-page-header__logo{height:var(--jky-page-header-logo-height);object-fit:contain;width:auto}.jky-page-header__title{color:var(--jky-page-header-title-color);font-size:var(--jky-page-header-title-size);font-weight:var(--jky-page-header-title-weight);white-space:nowrap}.jky-page-header__center{align-items:center;display:flex;flex:1;justify-content:center;margin:0 var(--jky-page-header-gap-center);min-width:0}.jky-page-header__right{align-items:center;display:flex;flex-shrink:0;gap:var(--jky-page-header-gap)}.jky-page-header__status-icons{align-items:center;display:flex;gap:var(--jky-page-header-gap-status)}.jky-page-header__status-icon{color:var(--jky-page-header-icon-color);cursor:pointer;transition:opacity .2s;&:hover{opacity:var(--jky-page-header-icon-hover-opacity)}}.jky-page-header__time{color:var(--jky-page-header-text-color);font-size:var(--jky-page-header-text-size);white-space:nowrap}.jky-page-header__user{align-items:center;color:var(--jky-page-header-text-color);cursor:pointer;display:flex;gap:8px}.jky-page-header__avatar{color:var(--jky-page-header-icon-color);img{height:100%;object-fit:cover;width:100%}}.jky-page-header__username{white-space:nowrap}.jky-page-header__logout,.jky-page-header__username{color:var(--jky-page-header-text-color);font-size:var(--jky-page-header-text-size)}@media (max-width:768px){.jky-page-header__container{padding:0 var(--jky-page-header-padding-x-mobile)}.jky-page-header__title{font-size:var(--jky-page-header-title-size-mobile)}.jky-page-header__center{margin:0 var(--jky-page-header-gap-center-mobile)}.jky-page-header__right{gap:var(--jky-page-header-gap-mobile)}}:root{--jky-rich-editor-border:#d9d9d9;--jky-rich-editor-border-hover:#409eff;--jky-rich-editor-border-radius:4px;--jky-rich-editor-box-shadow:0 0 0 1px #409eff}.jky-rich-editor{width:100%}.jky-rich-editor .tox-tinymce{border:1px solid var(--jky-rich-editor-border);border-radius:var(--jky-rich-editor-border-radius);transition:border-color .2s}.jky-rich-editor .tox-tinymce:hover{border-color:var(--jky-rich-editor-border-hover)}.jky-rich-editor .tox-tinymce:focus-within{border-color:var(--jky-rich-editor-border-hover);box-shadow:var(--jky-rich-editor-box-shadow)}.jky-rich-editor.is-disabled .tox-tinymce{background-color:#f5f7fa;cursor:not-allowed}.jky-rich-editor.is-readonly .tox-tinymce{background-color:#fafafa}:root{--jky-say-hello-bg:#42b883;--jky-say-hello-text:#fff;--jky-say-hello-hover-bg:#3aa876;--jky-say-hello-font-size:16px;--jky-say-hello-padding:8px 20px;--jky-say-hello-margin:4px 2px;--jky-say-hello-border-radius:6px}.jky-say-hello{background-color:var(--jky-say-hello-bg);border-radius:var(--jky-say-hello-border-radius);color:var(--jky-say-hello-text);cursor:pointer;display:inline-block;font-size:var(--jky-say-hello-font-size);margin:var(--jky-say-hello-margin);padding:var(--jky-say-hello-padding);text-align:center;text-decoration:none;transition:background-color .2s ease}.jky-say-hello:hover{background-color:var(--jky-say-hello-hover-bg)}@import "tailwindcss";@plugin "@iconify/tailwind4";@source "../node_modules/jky-component-lib/dist/es/";@source "../docs/**/*.md";@source "./**/*.md";@source "./**/*.vue";@source "./**/*.css";@custom-variant dark (&:is(.dark *))

package/dist/es/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './installer';
+export * from './responsive-toolbar';
 export * from './string';
 export * from './types';
 export * from './with-install';

package/dist/es/utils/responsive-toolbar.d.ts

@@ -0,0 +1,78 @@
+import { Ref } from 'vue';
+/**
+ * 响应式工具栏配置
+ */
+export interface UseResponsiveToolbarOptions {
+    /** 工具栏容器引用 */
+    toolbarRef: Ref<HTMLElement | null>;
+    /** 按钮数量限制（可选），超出此数量则折叠 */
+    buttonLimit?: number;
+    /** 按钮之间的间距（像素） */
+    buttonGap?: number;
+    /** 最小可见按钮数量（即使空间不够也会显示） */
+    minVisibleButtons?: number;
+    /** 工具栏可用宽度百分比（默认 0.5，即 50%） */
+    widthPercentage?: number;
+}
+/**
+ * 响应式工具栏返回值
+ */
+export interface UseResponsiveToolbarReturn {
+    /** 可见的按钮数量 */
+    visibleCount: Ref<number>;
+    /** 是否需要折叠 */
+    needCollapse: Ref<boolean>;
+    /** 窗口宽度 */
+    windowWidth: Ref<number>;
+    /** 窗口高度 */
+    windowHeight: Ref<number>;
+}
+/**
+ * 响应式工具栏 Hook
+ * 用于监听窗口大小变化，自动计算工具栏按钮的折叠状态
+ *
+ * @param options 配置选项
+ * @returns 工具栏状态
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useResponsiveToolbar } from '../utils'
+ *
+ * const toolbarRef = ref<HTMLElement | null>(null)
+ * const { visibleCount, needCollapse, windowWidth } = useResponsiveToolbar({
+ *   toolbarRef,
+ *   buttonLimit: 3, // 最多显示 3 个按钮
+ *   buttonGap: 8, // 按钮间距 8px
+ *   minVisibleButtons: 1, // 至少显示 1 个按钮
+ * })
+ * </script>
+ *
+ * <template>
+ *   <div ref="toolbarRef" class="toolbar">
+ *     <template v-for="(button, index) in buttons" :key="index">
+ *       <ElButton
+ *         v-if="index < visibleCount || !needCollapse"
+ *         :type="index < visibleCount ? 'primary' : 'default'"
+ *       >
+ *         {{ button.label }}
+ *       </ElButton>
+ *     </template>
+ *     <ElDropdown v-if="needCollapse">
+ *       <ElButton>更多</ElButton>
+ *       <template #dropdown>
+ *         <ElDropdownMenu>
+ *           <ElDropdownItem
+ *             v-for="(button, index) in buttons.slice(visibleCount)"
+ *             :key="index"
+ *           >
+ *             {{ button.label }}
+ *           </ElDropdownItem>
+ *         </ElDropdownMenu>
+ *       </template>
+ *     </ElDropdown>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useResponsiveToolbar(options: UseResponsiveToolbarOptions): UseResponsiveToolbarReturn;

package/dist/es/utils/responsive-toolbar.js

@@ -0,0 +1,64 @@
+import { useWindowSize } from "@vueuse/core";
+import { ref, watch, nextTick } from "vue";
+function useResponsiveToolbar(options) {
+  const {
+    toolbarRef,
+    buttonLimit,
+    buttonGap = 8,
+    minVisibleButtons = 1,
+    widthPercentage = 0.5
+  } = options;
+  const { width: windowWidth, height: windowHeight } = useWindowSize();
+  const visibleCount = ref(buttonLimit || minVisibleButtons);
+  const needCollapse = ref(false);
+  function calculateVisibleButtons() {
+    if (!toolbarRef.value)
+      return;
+    const toolbarWidth = toolbarRef.value.clientWidth;
+    const buttons = toolbarRef.value.querySelectorAll(".el-button");
+    const totalButtons = buttons.length;
+    if (totalButtons === 0)
+      return;
+    if (buttonLimit !== void 0 && buttonLimit > 0) {
+      visibleCount.value = Math.min(buttonLimit, totalButtons);
+      needCollapse.value = totalButtons > buttonLimit;
+      return;
+    }
+    const availableWidth = toolbarWidth * widthPercentage;
+    let count = 0;
+    let usedWidth = 0;
+    for (let i = 0; i < totalButtons; i++) {
+      const button = buttons[i];
+      const buttonWidth = button.offsetWidth + buttonGap;
+      if (usedWidth + buttonWidth <= availableWidth) {
+        usedWidth += buttonWidth;
+        count++;
+      } else {
+        break;
+      }
+    }
+    visibleCount.value = Math.max(count, minVisibleButtons);
+    needCollapse.value = count < totalButtons;
+  }
+  watch(
+    [windowWidth, windowHeight, () => {
+      var _a;
+      return (_a = toolbarRef.value) == null ? void 0 : _a.children.length;
+    }],
+    () => {
+      nextTick(() => {
+        calculateVisibleButtons();
+      });
+    },
+    { immediate: true }
+  );
+  return {
+    visibleCount,
+    needCollapse,
+    windowWidth,
+    windowHeight
+  };
+}
+export {
+  useResponsiveToolbar
+};

package/dist/lib/add-input/AddInput.vue.d.ts

@@ -0,0 +1,27 @@
+import { AddInputItem, AddInputProps } from './types';
+type __VLS_Props = AddInputProps;
+type __VLS_PublicProps = {
+    modelValue?: AddInputItem[];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: AddInputItem[]) => any;
+} & {
+    "update:modelValue": (value: AddInputItem[]) => any;
+    change: (value: AddInputItem[]) => any;
+    add: () => any;
+    delete: (index: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: AddInputItem[]) => any) | undefined;
+    onChange?: ((value: AddInputItem[]) => any) | undefined;
+    onAdd?: (() => any) | undefined;
+    onDelete?: ((index: number) => any) | undefined;
+}>, {
+    modelValue: AddInputItem[];
+    disabled: boolean;
+    readonly: boolean;
+    keyPlaceholder: string;
+    valuePlaceholder: string;
+    addButtonText: string;
+    deleteButtonText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;