yanzhi-ui 0.1.3 → 0.1.5

package/dist/button/Button.vue.d.ts

@@ -1,11 +1,12 @@
-interface ButtonProps {
-    type?: 'default' | 'primary' | 'success' | 'warning' | 'error';
-    size?: 'small' | 'medium' | 'large';
-    color?: string;
-    textColor?: string;
-    disabled?: boolean;
+export type ButtonType = 'default' | 'primary' | 'danger';
+export type Size = 'small' | 'medium' | 'large';
+type __VLS_Props = {
+    label: string;
+    type?: ButtonType;
+    size?: Size;
     loading?: boolean;
-}
+    disabled?: boolean;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -15,7 +16,16 @@ declare function __VLS_template(): {
     rootEl: HTMLButtonElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    type: ButtonType;
+    size: Size;
+    loading: boolean;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/image-preview/ImagePreview.d.ts

@@ -0,0 +1,37 @@
+export declare class ImagePreview {
+    private container;
+    private img;
+    private prevBtn;
+    private nextBtn;
+    private closeBtn;
+    private zoomInBtn;
+    private zoomOutBtn;
+    private resetBtn;
+    private zoomLabel;
+    private indexLabel;
+    private images;
+    private currentIndex;
+    private scale;
+    private position;
+    private isDragging;
+    private dragStart;
+    private startPos;
+    private zoomTimeout;
+    constructor(images: string[], initialIndex?: number);
+    private createBtn;
+    private updateImage;
+    private updateIndex;
+    private showZoomLabel;
+    private startDrag;
+    private onDrag;
+    private endDrag;
+    private handleWheel;
+    private zoomIn;
+    private zoomOut;
+    private reset;
+    private prev;
+    private next;
+    close(): void;
+    private handleKeydown;
+    open(index?: number): void;
+}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { App } from 'vue';
 import { default as IButton } from './button/Button.vue';
-export { IButton };
+import { default as ISelect } from './select/Select.vue';
+import { ImagePreview } from './image-preview/ImagePreview';
+export { IButton, ISelect, ImagePreview };
 declare const _default: {
     install: (app: App) => void;
 };

package/dist/select/Select.vue.d.ts

@@ -0,0 +1,15 @@
+interface OptionItem {
+    label: string;
+    value: string | number;
+}
+type __VLS_Props = {
+    modelValue?: string | number;
+    options: OptionItem[];
+    disabled?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSelectElement>;
+export default _default;

package/dist/yanzhi-ui.css

@@ -1 +1 @@
-.i-button[data-v-63e0e36c]{border-radius:4px;padding:0 12px;height:32px;border:none;cursor:pointer;transition:all .2s}.i-button.small[data-v-63e0e36c]{height:24px}.i-button.medium[data-v-63e0e36c]{height:32px}.i-button.large[data-v-63e0e36c]{height:40px}.i-button.disabled[data-v-63e0e36c]{cursor:not-allowed;opacity:.6}.i-button.loading[data-v-63e0e36c]{opacity:.8}
+.i-button{display:inline-flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;border-radius:.25rem}.i-button--default{background:#f5f5f5}.i-button--default:hover{background:#d1d1d1}.i-button--primary{background:#409eff;color:#fff}.i-button--primary:hover{background:#398adb;color:#fff}.i-button--danger{background:#f56c6c;color:#fff}.i-button--danger:hover{background:#e05a5a;color:#fff}.i-button--small{height:1.4rem;padding:0 .5rem;font-size:12px}.i-button--medium{height:24px;padding:0 .75rem;font-size:14px}.i-button--large{height:32px;padding:0 1rem;font-size:15px}.i-button.is-disabled{cursor:not-allowed;opacity:.6}

package/dist/yanzhi-ui.js

@@ -1 +1,30 @@
-"use strict";var c=Object.defineProperty;var u=(e,o,s)=>o in e?c(e,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[o]=s;var l=(e,o,s)=>u(e,typeof o!="symbol"?o+"":o,s);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),b=["disabled"],h=i.defineComponent({__name:"Button",props:{type:{},size:{},color:{},textColor:{},disabled:{type:Boolean},loading:{type:Boolean}},setup(e){class o{constructor(t){l(this,"type");l(this,"size");l(this,"color");l(this,"textColor");l(this,"disabled");l(this,"loading");this.type=t.type||"default",this.size=t.size||"medium",this.color=t.color,this.textColor=t.textColor,this.disabled=t.disabled??!1,this.loading=t.loading??!1}get classes(){const t=["i-button",this.type,this.size];return this.disabled&&t.push("disabled"),this.loading&&t.push("loading"),t.join(" ")}get styles(){return{backgroundColor:this.color||"",color:this.textColor||""}}}const s=e,n=i.reactive(new o(s));return(a,t)=>(i.openBlock(),i.createElementBlock("button",{class:i.normalizeClass(n.classes),style:i.normalizeStyle(n.styles),disabled:n.disabled,onClick:t[0]||(t[0]=r=>a.$emit("click",r))},[i.renderSlot(a.$slots,"default",{},void 0,!0)],14,b))}}),y=(e,o)=>{const s=e.__vccOpts||e;for(const[n,a]of o)s[n]=a;return s},d=y(h,[["__scopeId","data-v-63e0e36c"]]),f=e=>{e.component("IButton",d)},g={install:f};exports.IButton=d;exports.default=g;
+"use strict";var m=Object.defineProperty;var u=(n,t,e)=>t in n?m(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var s=(n,t,e)=>u(n,typeof t!="symbol"?t+"":t,e);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),p=["disabled"],g={class:"i-button__label"},h=i.defineComponent({name:"IButton",__name:"Button",props:{label:{},type:{default:"default"},size:{default:"medium"},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["click"],setup(n,{emit:t}){const e=n,a=t,o=i.computed(()=>e.disabled||e.loading);function l(r){o.value||a("click",r)}const d=i.computed(()=>["i-button",`i-button--${e.type}`,`i-button--${e.size}`,o.value&&"is-disabled",e.loading&&"is-loading"]);return(r,z)=>(i.openBlock(),i.createElementBlock("button",i.mergeProps({type:"button",disabled:o.value,class:d.value,onClick:l},r.$attrs),[i.createElementVNode("span",g,[i.renderSlot(r.$slots,"default")])],16,p))}}),b=["value","disabled"],x=["value"],f=i.defineComponent({__name:"Select",props:{modelValue:{},options:{},disabled:{type:Boolean}},emits:["update:modelValue"],setup(n,{emit:t}){const e=n,a=t;function o(l){const d=l.target;a("update:modelValue",d.value)}return(l,d)=>(i.openBlock(),i.createElementBlock("select",{value:n.modelValue,onChange:o,disabled:e.disabled},[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(n.options,r=>(i.openBlock(),i.createElementBlock("option",{key:r.value,value:r.value},i.toDisplayString(r.label),9,x))),128))],40,b))}}),y=(n,t)=>{const e=n.__vccOpts||n;for(const[a,o]of t)e[a]=o;return e},c=y(f,[["__scopeId","data-v-1c19bb1f"]]);class v{constructor(t,e=0){s(this,"container");s(this,"img");s(this,"prevBtn");s(this,"nextBtn");s(this,"closeBtn");s(this,"zoomInBtn");s(this,"zoomOutBtn");s(this,"resetBtn");s(this,"zoomLabel");s(this,"indexLabel");s(this,"images");s(this,"currentIndex",0);s(this,"scale",1);s(this,"position",{x:0,y:0});s(this,"isDragging",!1);s(this,"dragStart",{x:0,y:0});s(this,"startPos",{x:0,y:0});s(this,"zoomTimeout",null);this.images=t,this.currentIndex=e,this.container=document.createElement("div"),this.container.className="ip-overlay",this.container.style.cssText=`
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+    `,this.container.addEventListener("click",a=>{a.target===this.container&&this.close()}),this.img=document.createElement("img"),this.img.className="ip-image",this.img.draggable=!1,this.img.style.maxWidth="100%",this.img.style.maxHeight="100%",this.img.style.userSelect="none",this.img.style.pointerEvents="none",this.updateImage(),this.img.addEventListener("mousedown",this.startDrag.bind(this)),document.addEventListener("mousemove",this.onDrag.bind(this)),document.addEventListener("mouseup",this.endDrag.bind(this)),this.img.addEventListener("wheel",this.handleWheel.bind(this)),this.prevBtn=this.createBtn("‹",{left:"16px",top:"50%",transform:"translateY(-50%)"},()=>this.prev()),this.nextBtn=this.createBtn("›",{right:"16px",top:"50%",transform:"translateY(-50%)"},()=>this.next()),this.closeBtn=this.createBtn("×",{right:"16px",top:"16px"},()=>this.close()),this.zoomInBtn=this.createBtn("+",{bottom:"20px",left:"50%",marginLeft:"40px"},()=>this.zoomIn()),this.zoomOutBtn=this.createBtn("-",{bottom:"20px",left:"50%",marginRight:"40px"},()=>this.zoomOut()),this.resetBtn=this.createBtn("0",{bottom:"20px",left:"50%"},()=>this.reset()),this.zoomLabel=document.createElement("div"),this.zoomLabel.style.cssText=`
+      position: absolute;
+      top: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fff;
+      background: rgba(0,0,0,0.6);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 14px;
+      display: none;
+    `,this.indexLabel=document.createElement("div"),this.indexLabel.style.cssText=`
+      position: absolute;
+      bottom: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fff;
+      background: rgba(0,0,0,0.6);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 14px;
+    `,this.container.appendChild(this.img),this.container.appendChild(this.prevBtn),this.container.appendChild(this.nextBtn),this.container.appendChild(this.closeBtn),this.container.appendChild(this.zoomInBtn),this.container.appendChild(this.zoomOutBtn),this.container.appendChild(this.resetBtn),this.container.appendChild(this.zoomLabel),this.container.appendChild(this.indexLabel),document.body.appendChild(this.container),document.addEventListener("keydown",this.handleKeydown.bind(this)),this.updateIndex()}createBtn(t,e,a){const o=document.createElement("button");return o.textContent=t,Object.assign(o.style,{position:"absolute",width:"36px",height:"36px",border:"none",borderRadius:"50%",background:"rgba(0,0,0,0.6)",color:"#fff",cursor:"pointer",fontSize:"18px",...e}),o.addEventListener("click",a),o.addEventListener("mouseover",()=>o.style.background="rgba(0,0,0,0.8)"),o.addEventListener("mouseout",()=>o.style.background="rgba(0,0,0,0.6)"),o}updateImage(){this.img.src=this.images[this.currentIndex],this.img.style.transform=`scale(${this.scale}) translate(${this.position.x}px, ${this.position.y}px)`}updateIndex(){this.indexLabel.textContent=`${this.currentIndex+1} / ${this.images.length}`}showZoomLabel(){this.zoomLabel.textContent=`${Math.round(this.scale*100)}%`,this.zoomLabel.style.display="block",this.zoomTimeout&&clearTimeout(this.zoomTimeout),this.zoomTimeout=window.setTimeout(()=>{this.zoomLabel.style.display="none"},800)}startDrag(t){this.isDragging=!0,this.dragStart={x:t.clientX,y:t.clientY},this.startPos={...this.position}}onDrag(t){if(!this.isDragging)return;const e=(t.clientX-this.dragStart.x)/this.scale,a=(t.clientY-this.dragStart.y)/this.scale;this.position.x=this.startPos.x+e,this.position.y=this.startPos.y+a,this.updateImage()}endDrag(){this.isDragging=!1}handleWheel(t){t.deltaY<0?this.zoomIn():this.zoomOut()}zoomIn(){this.scale=Math.min(this.scale+.1,3),this.updateImage(),this.showZoomLabel()}zoomOut(){this.scale=Math.max(this.scale-.1,.2),this.updateImage(),this.showZoomLabel()}reset(){this.scale=1,this.position={x:0,y:0},this.updateImage(),this.showZoomLabel()}prev(){this.currentIndex>0&&(this.currentIndex--,this.reset(),this.updateImage(),this.updateIndex())}next(){this.currentIndex<this.images.length-1&&(this.currentIndex++,this.reset(),this.updateImage(),this.updateIndex())}close(){this.container.style.display="none",document.removeEventListener("keydown",this.handleKeydown.bind(this))}handleKeydown(t){switch(t.key){case"Escape":this.close();break;case"ArrowLeft":this.prev();break;case"ArrowRight":this.next();break;case"+":case"=":this.zoomIn();break;case"-":this.zoomOut();break;case"0":this.reset();break}}open(t=0){this.currentIndex=t,this.reset(),this.updateImage(),this.updateIndex(),this.container.style.display="flex"}}const B=[h,c],I=n=>{B.forEach(t=>{n.component(t.name,t)})},k={install:I};exports.IButton=h;exports.ISelect=c;exports.ImagePreview=v;exports.default=k;

package/dist/yanzhi-ui.mjs

@@ -1,58 +1,220 @@
-var d = Object.defineProperty;
-var c = (e, o, s) => o in e ? d(e, o, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[o] = s;
-var l = (e, o, s) => c(e, typeof o != "symbol" ? o + "" : o, s);
-import { defineComponent as r, reactive as u, createElementBlock as h, openBlock as b, normalizeStyle as f, normalizeClass as m, renderSlot as p } from "vue";
-const y = ["disabled"], g = /* @__PURE__ */ r({
+var u = Object.defineProperty;
+var p = (i, t, e) => t in i ? u(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var s = (i, t, e) => p(i, typeof t != "symbol" ? t + "" : t, e);
+import { defineComponent as m, computed as c, createElementBlock as d, openBlock as h, mergeProps as g, createElementVNode as b, renderSlot as x, Fragment as f, renderList as y, toDisplayString as v } from "vue";
+const I = ["disabled"], B = { class: "i-button__label" }, z = /* @__PURE__ */ m({
+  name: "IButton",
   __name: "Button",
   props: {
-    type: {},
-    size: {},
-    color: {},
-    textColor: {},
-    disabled: { type: Boolean },
-    loading: { type: Boolean }
+    label: {},
+    type: { default: "default" },
+    size: { default: "medium" },
+    loading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    class o {
-      constructor(t) {
-        l(this, "type");
-        l(this, "size");
-        l(this, "color");
-        l(this, "textColor");
-        l(this, "disabled");
-        l(this, "loading");
-        this.type = t.type || "default", this.size = t.size || "medium", this.color = t.color, this.textColor = t.textColor, this.disabled = t.disabled ?? !1, this.loading = t.loading ?? !1;
-      }
-      get classes() {
-        const t = ["i-button", this.type, this.size];
-        return this.disabled && t.push("disabled"), this.loading && t.push("loading"), t.join(" ");
-      }
-      get styles() {
-        return {
-          backgroundColor: this.color || "",
-          color: this.textColor || ""
-        };
-      }
+  emits: ["click"],
+  setup(i, { emit: t }) {
+    const e = i, a = t, n = c(
+      () => e.disabled || e.loading
+    );
+    function r(o) {
+      n.value || a("click", o);
     }
-    const s = e, i = u(new o(s));
-    return (n, t) => (b(), h("button", {
-      class: m(i.classes),
-      style: f(i.styles),
-      disabled: i.disabled,
-      onClick: t[0] || (t[0] = (a) => n.$emit("click", a))
+    const l = c(() => [
+      "i-button",
+      `i-button--${e.type}`,
+      `i-button--${e.size}`,
+      n.value && "is-disabled",
+      e.loading && "is-loading"
+    ]);
+    return (o, D) => (h(), d("button", g({
+      type: "button",
+      disabled: n.value,
+      class: l.value,
+      onClick: r
+    }, o.$attrs), [
+      b("span", B, [
+        x(o.$slots, "default")
+      ])
+    ], 16, I));
+  }
+}), L = ["value", "disabled"], k = ["value"], _ = /* @__PURE__ */ m({
+  __name: "Select",
+  props: {
+    modelValue: {},
+    options: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(i, { emit: t }) {
+    const e = i, a = t;
+    function n(r) {
+      const l = r.target;
+      a("update:modelValue", l.value);
+    }
+    return (r, l) => (h(), d("select", {
+      value: i.modelValue,
+      onChange: n,
+      disabled: e.disabled
     }, [
-      p(n.$slots, "default", {}, void 0, !0)
-    ], 14, y));
-  }
-}), _ = (e, o) => {
-  const s = e.__vccOpts || e;
-  for (const [i, n] of o)
-    s[i] = n;
-  return s;
-}, C = /* @__PURE__ */ _(g, [["__scopeId", "data-v-63e0e36c"]]), B = (e) => {
-  e.component("IButton", C);
-}, k = { install: B };
+      (h(!0), d(f, null, y(i.options, (o) => (h(), d("option", {
+        key: o.value,
+        value: o.value
+      }, v(o.label), 9, k))), 128))
+    ], 40, L));
+  }
+}), E = (i, t) => {
+  const e = i.__vccOpts || i;
+  for (const [a, n] of t)
+    e[a] = n;
+  return e;
+}, w = /* @__PURE__ */ E(_, [["__scopeId", "data-v-1c19bb1f"]]);
+class T {
+  constructor(t, e = 0) {
+    s(this, "container");
+    s(this, "img");
+    s(this, "prevBtn");
+    s(this, "nextBtn");
+    s(this, "closeBtn");
+    s(this, "zoomInBtn");
+    s(this, "zoomOutBtn");
+    s(this, "resetBtn");
+    s(this, "zoomLabel");
+    s(this, "indexLabel");
+    s(this, "images");
+    s(this, "currentIndex", 0);
+    s(this, "scale", 1);
+    s(this, "position", { x: 0, y: 0 });
+    s(this, "isDragging", !1);
+    s(this, "dragStart", { x: 0, y: 0 });
+    s(this, "startPos", { x: 0, y: 0 });
+    s(this, "zoomTimeout", null);
+    this.images = t, this.currentIndex = e, this.container = document.createElement("div"), this.container.className = "ip-overlay", this.container.style.cssText = `
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+    `, this.container.addEventListener("click", (a) => {
+      a.target === this.container && this.close();
+    }), this.img = document.createElement("img"), this.img.className = "ip-image", this.img.draggable = !1, this.img.style.maxWidth = "100%", this.img.style.maxHeight = "100%", this.img.style.userSelect = "none", this.img.style.pointerEvents = "none", this.updateImage(), this.img.addEventListener("mousedown", this.startDrag.bind(this)), document.addEventListener("mousemove", this.onDrag.bind(this)), document.addEventListener("mouseup", this.endDrag.bind(this)), this.img.addEventListener("wheel", this.handleWheel.bind(this)), this.prevBtn = this.createBtn("‹", { left: "16px", top: "50%", transform: "translateY(-50%)" }, () => this.prev()), this.nextBtn = this.createBtn("›", { right: "16px", top: "50%", transform: "translateY(-50%)" }, () => this.next()), this.closeBtn = this.createBtn("×", { right: "16px", top: "16px" }, () => this.close()), this.zoomInBtn = this.createBtn("+", { bottom: "20px", left: "50%", marginLeft: "40px" }, () => this.zoomIn()), this.zoomOutBtn = this.createBtn("-", { bottom: "20px", left: "50%", marginRight: "40px" }, () => this.zoomOut()), this.resetBtn = this.createBtn("0", { bottom: "20px", left: "50%" }, () => this.reset()), this.zoomLabel = document.createElement("div"), this.zoomLabel.style.cssText = `
+      position: absolute;
+      top: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fff;
+      background: rgba(0,0,0,0.6);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 14px;
+      display: none;
+    `, this.indexLabel = document.createElement("div"), this.indexLabel.style.cssText = `
+      position: absolute;
+      bottom: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fff;
+      background: rgba(0,0,0,0.6);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 14px;
+    `, this.container.appendChild(this.img), this.container.appendChild(this.prevBtn), this.container.appendChild(this.nextBtn), this.container.appendChild(this.closeBtn), this.container.appendChild(this.zoomInBtn), this.container.appendChild(this.zoomOutBtn), this.container.appendChild(this.resetBtn), this.container.appendChild(this.zoomLabel), this.container.appendChild(this.indexLabel), document.body.appendChild(this.container), document.addEventListener("keydown", this.handleKeydown.bind(this)), this.updateIndex();
+  }
+  createBtn(t, e, a) {
+    const n = document.createElement("button");
+    return n.textContent = t, Object.assign(n.style, {
+      position: "absolute",
+      width: "36px",
+      height: "36px",
+      border: "none",
+      borderRadius: "50%",
+      background: "rgba(0,0,0,0.6)",
+      color: "#fff",
+      cursor: "pointer",
+      fontSize: "18px",
+      ...e
+    }), n.addEventListener("click", a), n.addEventListener("mouseover", () => n.style.background = "rgba(0,0,0,0.8)"), n.addEventListener("mouseout", () => n.style.background = "rgba(0,0,0,0.6)"), n;
+  }
+  updateImage() {
+    this.img.src = this.images[this.currentIndex], this.img.style.transform = `scale(${this.scale}) translate(${this.position.x}px, ${this.position.y}px)`;
+  }
+  updateIndex() {
+    this.indexLabel.textContent = `${this.currentIndex + 1} / ${this.images.length}`;
+  }
+  showZoomLabel() {
+    this.zoomLabel.textContent = `${Math.round(this.scale * 100)}%`, this.zoomLabel.style.display = "block", this.zoomTimeout && clearTimeout(this.zoomTimeout), this.zoomTimeout = window.setTimeout(() => {
+      this.zoomLabel.style.display = "none";
+    }, 800);
+  }
+  startDrag(t) {
+    this.isDragging = !0, this.dragStart = { x: t.clientX, y: t.clientY }, this.startPos = { ...this.position };
+  }
+  onDrag(t) {
+    if (!this.isDragging) return;
+    const e = (t.clientX - this.dragStart.x) / this.scale, a = (t.clientY - this.dragStart.y) / this.scale;
+    this.position.x = this.startPos.x + e, this.position.y = this.startPos.y + a, this.updateImage();
+  }
+  endDrag() {
+    this.isDragging = !1;
+  }
+  handleWheel(t) {
+    t.deltaY < 0 ? this.zoomIn() : this.zoomOut();
+  }
+  zoomIn() {
+    this.scale = Math.min(this.scale + 0.1, 3), this.updateImage(), this.showZoomLabel();
+  }
+  zoomOut() {
+    this.scale = Math.max(this.scale - 0.1, 0.2), this.updateImage(), this.showZoomLabel();
+  }
+  reset() {
+    this.scale = 1, this.position = { x: 0, y: 0 }, this.updateImage(), this.showZoomLabel();
+  }
+  prev() {
+    this.currentIndex > 0 && (this.currentIndex--, this.reset(), this.updateImage(), this.updateIndex());
+  }
+  next() {
+    this.currentIndex < this.images.length - 1 && (this.currentIndex++, this.reset(), this.updateImage(), this.updateIndex());
+  }
+  close() {
+    this.container.style.display = "none", document.removeEventListener("keydown", this.handleKeydown.bind(this));
+  }
+  handleKeydown(t) {
+    switch (t.key) {
+      case "Escape":
+        this.close();
+        break;
+      case "ArrowLeft":
+        this.prev();
+        break;
+      case "ArrowRight":
+        this.next();
+        break;
+      case "+":
+      case "=":
+        this.zoomIn();
+        break;
+      case "-":
+        this.zoomOut();
+        break;
+      case "0":
+        this.reset();
+        break;
+    }
+  }
+  open(t = 0) {
+    this.currentIndex = t, this.reset(), this.updateImage(), this.updateIndex(), this.container.style.display = "flex";
+  }
+}
+const C = [z, w], $ = (i) => {
+  C.forEach((t) => {
+    i.component(t.name, t);
+  });
+}, P = { install: $ };
 export {
-  C as IButton,
-  k as default
+  z as IButton,
+  w as ISelect,
+  T as ImagePreview,
+  P as default
 };

package/dist/yanzhi-ui.umd.js

@@ -1 +1,30 @@
-(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.YanzhiUI={},e.Vue))})(this,(function(e,t){"use strict";var h=Object.defineProperty;var p=(e,t,n)=>t in e?h(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var s=(e,t,n)=>p(e,typeof t!="symbol"?t+"":t,n);const n=["disabled"],r=((i,c)=>{const a=i.__vccOpts||i;for(const[l,d]of c)a[l]=d;return a})(t.defineComponent({__name:"Button",props:{type:{},size:{},color:{},textColor:{},disabled:{type:Boolean},loading:{type:Boolean}},setup(i){class c{constructor(o){s(this,"type");s(this,"size");s(this,"color");s(this,"textColor");s(this,"disabled");s(this,"loading");this.type=o.type||"default",this.size=o.size||"medium",this.color=o.color,this.textColor=o.textColor,this.disabled=o.disabled??!1,this.loading=o.loading??!1}get classes(){const o=["i-button",this.type,this.size];return this.disabled&&o.push("disabled"),this.loading&&o.push("loading"),o.join(" ")}get styles(){return{backgroundColor:this.color||"",color:this.textColor||""}}}const a=i,l=t.reactive(new c(a));return(d,o)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(l.classes),style:t.normalizeStyle(l.styles),disabled:l.disabled,onClick:o[0]||(o[0]=f=>d.$emit("click",f))},[t.renderSlot(d.$slots,"default",{},void 0,!0)],14,n))}}),[["__scopeId","data-v-63e0e36c"]]),u={install:i=>{i.component("IButton",r)}};e.IButton=r,e.default=u,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.YanzhiUI={},i.Vue))})(this,(function(i,t){"use strict";var B=Object.defineProperty;var I=(i,t,d)=>t in i?B(i,t,{enumerable:!0,configurable:!0,writable:!0,value:d}):i[t]=d;var s=(i,t,d)=>I(i,typeof t!="symbol"?t+"":t,d);const d=["disabled"],u={class:"i-button__label"},m=t.defineComponent({name:"IButton",__name:"Button",props:{label:{},type:{default:"default"},size:{default:"medium"},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["click"],setup(a,{emit:e}){const n=a,r=e,o=t.computed(()=>n.disabled||n.loading);function h(l){o.value||r("click",l)}const c=t.computed(()=>["i-button",`i-button--${n.type}`,`i-button--${n.size}`,o.value&&"is-disabled",n.loading&&"is-loading"]);return(l,_)=>(t.openBlock(),t.createElementBlock("button",t.mergeProps({type:"button",disabled:o.value,class:c.value,onClick:h},l.$attrs),[t.createElementVNode("span",u,[t.renderSlot(l.$slots,"default")])],16,d))}}),g=["value","disabled"],b=["value"],p=((a,e)=>{const n=a.__vccOpts||a;for(const[r,o]of e)n[r]=o;return n})(t.defineComponent({__name:"Select",props:{modelValue:{},options:{},disabled:{type:Boolean}},emits:["update:modelValue"],setup(a,{emit:e}){const n=a,r=e;function o(h){const c=h.target;r("update:modelValue",c.value)}return(h,c)=>(t.openBlock(),t.createElementBlock("select",{value:a.modelValue,onChange:o,disabled:n.disabled},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(a.options,l=>(t.openBlock(),t.createElementBlock("option",{key:l.value,value:l.value},t.toDisplayString(l.label),9,b))),128))],40,g))}}),[["__scopeId","data-v-1c19bb1f"]]);class x{constructor(e,n=0){s(this,"container");s(this,"img");s(this,"prevBtn");s(this,"nextBtn");s(this,"closeBtn");s(this,"zoomInBtn");s(this,"zoomOutBtn");s(this,"resetBtn");s(this,"zoomLabel");s(this,"indexLabel");s(this,"images");s(this,"currentIndex",0);s(this,"scale",1);s(this,"position",{x:0,y:0});s(this,"isDragging",!1);s(this,"dragStart",{x:0,y:0});s(this,"startPos",{x:0,y:0});s(this,"zoomTimeout",null);this.images=e,this.currentIndex=n,this.container=document.createElement("div"),this.container.className="ip-overlay",this.container.style.cssText=`
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+    `,this.container.addEventListener("click",r=>{r.target===this.container&&this.close()}),this.img=document.createElement("img"),this.img.className="ip-image",this.img.draggable=!1,this.img.style.maxWidth="100%",this.img.style.maxHeight="100%",this.img.style.userSelect="none",this.img.style.pointerEvents="none",this.updateImage(),this.img.addEventListener("mousedown",this.startDrag.bind(this)),document.addEventListener("mousemove",this.onDrag.bind(this)),document.addEventListener("mouseup",this.endDrag.bind(this)),this.img.addEventListener("wheel",this.handleWheel.bind(this)),this.prevBtn=this.createBtn("‹",{left:"16px",top:"50%",transform:"translateY(-50%)"},()=>this.prev()),this.nextBtn=this.createBtn("›",{right:"16px",top:"50%",transform:"translateY(-50%)"},()=>this.next()),this.closeBtn=this.createBtn("×",{right:"16px",top:"16px"},()=>this.close()),this.zoomInBtn=this.createBtn("+",{bottom:"20px",left:"50%",marginLeft:"40px"},()=>this.zoomIn()),this.zoomOutBtn=this.createBtn("-",{bottom:"20px",left:"50%",marginRight:"40px"},()=>this.zoomOut()),this.resetBtn=this.createBtn("0",{bottom:"20px",left:"50%"},()=>this.reset()),this.zoomLabel=document.createElement("div"),this.zoomLabel.style.cssText=`
+      position: absolute;
+      top: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fff;
+      background: rgba(0,0,0,0.6);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 14px;
+      display: none;
+    `,this.indexLabel=document.createElement("div"),this.indexLabel.style.cssText=`
+      position: absolute;
+      bottom: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fff;
+      background: rgba(0,0,0,0.6);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 14px;
+    `,this.container.appendChild(this.img),this.container.appendChild(this.prevBtn),this.container.appendChild(this.nextBtn),this.container.appendChild(this.closeBtn),this.container.appendChild(this.zoomInBtn),this.container.appendChild(this.zoomOutBtn),this.container.appendChild(this.resetBtn),this.container.appendChild(this.zoomLabel),this.container.appendChild(this.indexLabel),document.body.appendChild(this.container),document.addEventListener("keydown",this.handleKeydown.bind(this)),this.updateIndex()}createBtn(e,n,r){const o=document.createElement("button");return o.textContent=e,Object.assign(o.style,{position:"absolute",width:"36px",height:"36px",border:"none",borderRadius:"50%",background:"rgba(0,0,0,0.6)",color:"#fff",cursor:"pointer",fontSize:"18px",...n}),o.addEventListener("click",r),o.addEventListener("mouseover",()=>o.style.background="rgba(0,0,0,0.8)"),o.addEventListener("mouseout",()=>o.style.background="rgba(0,0,0,0.6)"),o}updateImage(){this.img.src=this.images[this.currentIndex],this.img.style.transform=`scale(${this.scale}) translate(${this.position.x}px, ${this.position.y}px)`}updateIndex(){this.indexLabel.textContent=`${this.currentIndex+1} / ${this.images.length}`}showZoomLabel(){this.zoomLabel.textContent=`${Math.round(this.scale*100)}%`,this.zoomLabel.style.display="block",this.zoomTimeout&&clearTimeout(this.zoomTimeout),this.zoomTimeout=window.setTimeout(()=>{this.zoomLabel.style.display="none"},800)}startDrag(e){this.isDragging=!0,this.dragStart={x:e.clientX,y:e.clientY},this.startPos={...this.position}}onDrag(e){if(!this.isDragging)return;const n=(e.clientX-this.dragStart.x)/this.scale,r=(e.clientY-this.dragStart.y)/this.scale;this.position.x=this.startPos.x+n,this.position.y=this.startPos.y+r,this.updateImage()}endDrag(){this.isDragging=!1}handleWheel(e){e.deltaY<0?this.zoomIn():this.zoomOut()}zoomIn(){this.scale=Math.min(this.scale+.1,3),this.updateImage(),this.showZoomLabel()}zoomOut(){this.scale=Math.max(this.scale-.1,.2),this.updateImage(),this.showZoomLabel()}reset(){this.scale=1,this.position={x:0,y:0},this.updateImage(),this.showZoomLabel()}prev(){this.currentIndex>0&&(this.currentIndex--,this.reset(),this.updateImage(),this.updateIndex())}next(){this.currentIndex<this.images.length-1&&(this.currentIndex++,this.reset(),this.updateImage(),this.updateIndex())}close(){this.container.style.display="none",document.removeEventListener("keydown",this.handleKeydown.bind(this))}handleKeydown(e){switch(e.key){case"Escape":this.close();break;case"ArrowLeft":this.prev();break;case"ArrowRight":this.next();break;case"+":case"=":this.zoomIn();break;case"-":this.zoomOut();break;case"0":this.reset();break}}open(e=0){this.currentIndex=e,this.reset(),this.updateImage(),this.updateIndex(),this.container.style.display="flex"}}const f=[m,p],y={install:a=>{f.forEach(e=>{a.component(e.name,e)})}};i.IButton=m,i.ISelect=p,i.ImagePreview=x,i.default=y,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yanzhi-ui",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.1.5",
   "types": "dist/yanzhi-ui.d.ts",
   "main": "dist/yanzhi-ui.umd.js",
   "module": "dist/yanzhi-ui.mjs",

package/src/packages/button/Button.vue

@@ -1,75 +1,133 @@
-<template>
-  <button
-    :class="button.classes"
-    :style="button.styles"
-    :disabled="button.disabled"
-    @click="$emit('click', $event)"
-  >
-    <slot />
-  </button>
-</template>
-
 <script setup lang="ts">
-import { reactive, computed, toRefs } from 'vue'
+import { computed } from 'vue'
 
-interface ButtonProps {
-  type?: 'default' | 'primary' | 'success' | 'warning' | 'error'
-  size?: 'small' | 'medium' | 'large'
-  color?: string
-  textColor?: string
-  disabled?: boolean
+defineOptions({
+  name: 'IButton',
+})
+
+export type ButtonType =
+  | 'default'
+  | 'primary'
+  | 'danger'
+
+export type Size = 'small' | 'medium' | 'large'
+
+const props = withDefaults(defineProps<{
+  label: string
+  type?: ButtonType
+  size?: Size
   loading?: boolean
+  disabled?: boolean
+}>(), {
+  type: 'default',
+  size: 'medium',
+  loading: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+const isDisabled = computed(() =>
+  props.disabled || props.loading
+)
+
+function handleClick(e: MouseEvent) {
+  if (isDisabled.value) return
+  emit('click', e)
 }
 
-class Button {
-  type: ButtonProps['type']
-  size: ButtonProps['size']
-  color?: string
-  textColor?: string
-  disabled: boolean
-  loading: boolean
+const classes = computed(() => [
+  'i-button',
+  `i-button--${props.type}`,
+  `i-button--${props.size}`,
+  isDisabled.value && 'is-disabled',
+  props.loading && 'is-loading',
+])
+</script>
 
-  constructor(props: ButtonProps) {
-    this.type = props.type || 'default'
-    this.size = props.size || 'medium'
-    this.color = props.color
-    this.textColor = props.textColor
-    this.disabled = props.disabled ?? false
-    this.loading = props.loading ?? false
-  }
+<template>
+  <button
+    type="button"
+    :disabled="isDisabled"
+    :class="classes"
+    @click="handleClick"
+    v-bind="$attrs"
+  >
+    <!-- 文本 -->
+    <span class="i-button__label">
+      <slot />
+    </span>
+  </button>
+</template>
 
-  get classes() {
-    const cls = ['i-button', this.type, this.size]
-    if (this.disabled) cls.push('disabled')
-    if (this.loading) cls.push('loading')
-    return cls.join(' ')
-  }
+<style>
+/* ===============================
+   Base
+   =============================== */
+.i-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  border-radius: 0.25rem;
+}
 
-  get styles() {
-    return {
-      backgroundColor: this.color || '',
-      color: this.textColor || ''
-    }
-  }
+/* ===============================
+   类型
+   =============================== */
+.i-button--default {
+  background: #f5f5f5;
+}
+.i-button--default:hover {
+  background: #d1d1d1;
 }
 
-const props = withDefaults(defineProps<ButtonProps>(), {})
+.i-button--primary {
+  background: #409eff;
+  color: #fff;
+}
+.i-button--primary:hover {
+  background: #398adb;
+  color: #fff;
+}
 
-const button = reactive(new Button(props))
-</script>
+.i-button--danger {
+  background: #f56c6c;
+  color: #fff;
+}
+.i-button--danger:hover {
+  background: #e05a5a;
+  color: #fff;
+}
 
-<style scoped>
-.i-button {
-  border-radius: 4px;
-  padding: 0 12px;
+/* ===============================
+   大小
+   =============================== */
+.i-button--small {
+  height: 1.4rem;
+  padding: 0 0.5rem;
+  font-size: 12px;
+}
+.i-button--medium {
+  height: 24px;
+  padding: 0 0.75rem;
+  font-size: 14px;
+}
+.i-button--large {
   height: 32px;
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s;
+  padding: 0 1rem;
+  font-size: 15px;
+}
+
+/* ===============================
+   State
+   =============================== */
+.i-button.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
-.i-button.small { height: 24px; }
-.i-button.medium { height: 32px; }
-.i-button.large { height: 40px; }
-.i-button.disabled { cursor: not-allowed; opacity: 0.6; }
-.i-button.loading { opacity: 0.8; }
 </style>

package/src/packages/global.d.ts

@@ -0,0 +1,10 @@
+import type { Component } from 'vue'
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    IButton: typeof Component,
+    IInput: typeof Component,
+  }
+}
+
+export {}

package/src/packages/image-preview/ImagePreview.ts

@@ -0,0 +1,200 @@
+// ImagePreview.ts
+export class ImagePreview {
+  private container: HTMLDivElement
+  private img: HTMLImageElement
+  private prevBtn: HTMLButtonElement
+  private nextBtn: HTMLButtonElement
+  private closeBtn: HTMLButtonElement
+  private zoomInBtn: HTMLButtonElement
+  private zoomOutBtn: HTMLButtonElement
+  private resetBtn: HTMLButtonElement
+  private zoomLabel: HTMLDivElement
+  private indexLabel: HTMLDivElement
+
+  private images: string[]
+  private currentIndex: number = 0
+  private scale: number = 1
+  private position = { x: 0, y: 0 }
+  private isDragging = false
+  private dragStart = { x: 0, y: 0 }
+  private startPos = { x: 0, y: 0 }
+  private zoomTimeout: number | null = null
+
+  constructor(images: string[], initialIndex = 0) {
+    this.images = images
+    this.currentIndex = initialIndex
+
+    this.container = document.createElement('div')
+    this.container.className = 'ip-overlay'
+    this.container.style.cssText = `
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+    `
+    this.container.addEventListener('click', e => {
+      if (e.target === this.container) this.close()
+    })
+
+    this.img = document.createElement('img')
+    this.img.className = 'ip-image'
+    this.img.draggable = false
+    this.img.style.maxWidth = '100%'
+    this.img.style.maxHeight = '100%'
+    this.img.style.userSelect = 'none'
+    this.img.style.pointerEvents = 'none'
+    this.updateImage()
+
+    // 拖拽
+    this.img.addEventListener('mousedown', this.startDrag.bind(this))
+    document.addEventListener('mousemove', this.onDrag.bind(this))
+    document.addEventListener('mouseup', this.endDrag.bind(this))
+    // 缩放
+    this.img.addEventListener('wheel', this.handleWheel.bind(this))
+
+    // 按钮
+    this.prevBtn = this.createBtn('‹', { left: '16px', top: '50%', transform: 'translateY(-50%)' }, () => this.prev())
+    this.nextBtn = this.createBtn('›', { right: '16px', top: '50%', transform: 'translateY(-50%)' }, () => this.next())
+    this.closeBtn = this.createBtn('×', { right: '16px', top: '16px' }, () => this.close())
+    this.zoomInBtn = this.createBtn('+', { bottom: '20px', left: '50%', marginLeft: '40px' }, () => this.zoomIn())
+    this.zoomOutBtn = this.createBtn('-', { bottom: '20px', left: '50%', marginRight: '40px' }, () => this.zoomOut())
+    this.resetBtn = this.createBtn('0', { bottom: '20px', left: '50%' }, () => this.reset())
+
+    // 缩放百分比
+    this.zoomLabel = document.createElement('div')
+    this.zoomLabel.style.cssText = `
+      position: absolute;
+      top: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fff;
+      background: rgba(0,0,0,0.6);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 14px;
+      display: none;
+    `
+
+    // 图片索引
+    this.indexLabel = document.createElement('div')
+    this.indexLabel.style.cssText = `
+      position: absolute;
+      bottom: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+      color: #fff;
+      background: rgba(0,0,0,0.6);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 14px;
+    `
+
+    this.container.appendChild(this.img)
+    this.container.appendChild(this.prevBtn)
+    this.container.appendChild(this.nextBtn)
+    this.container.appendChild(this.closeBtn)
+    this.container.appendChild(this.zoomInBtn)
+    this.container.appendChild(this.zoomOutBtn)
+    this.container.appendChild(this.resetBtn)
+    this.container.appendChild(this.zoomLabel)
+    this.container.appendChild(this.indexLabel)
+
+    document.body.appendChild(this.container)
+
+    // 键盘事件
+    document.addEventListener('keydown', this.handleKeydown.bind(this))
+
+    this.updateIndex()
+  }
+
+  private createBtn(text: string, style: Partial<CSSStyleDeclaration>, onClick: () => void) {
+    const btn = document.createElement('button')
+    btn.textContent = text
+    Object.assign(btn.style, {
+      position: 'absolute',
+      width: '36px',
+      height: '36px',
+      border: 'none',
+      borderRadius: '50%',
+      background: 'rgba(0,0,0,0.6)',
+      color: '#fff',
+      cursor: 'pointer',
+      fontSize: '18px',
+      ...style
+    })
+    btn.addEventListener('click', onClick)
+    btn.addEventListener('mouseover', () => btn.style.background = 'rgba(0,0,0,0.8)')
+    btn.addEventListener('mouseout', () => btn.style.background = 'rgba(0,0,0,0.6)')
+    return btn
+  }
+
+  private updateImage() {
+    this.img.src = this.images[this.currentIndex]
+    this.img.style.transform = `scale(${this.scale}) translate(${this.position.x}px, ${this.position.y}px)`
+  }
+
+  private updateIndex() {
+    this.indexLabel.textContent = `${this.currentIndex + 1} / ${this.images.length}`
+  }
+
+  private showZoomLabel() {
+    this.zoomLabel.textContent = `${Math.round(this.scale * 100)}%`
+    this.zoomLabel.style.display = 'block'
+    if (this.zoomTimeout) clearTimeout(this.zoomTimeout)
+    this.zoomTimeout = window.setTimeout(() => {
+      this.zoomLabel.style.display = 'none'
+    }, 800)
+  }
+
+  private startDrag(e: MouseEvent) {
+    this.isDragging = true
+    this.dragStart = { x: e.clientX, y: e.clientY }
+    this.startPos = { ...this.position }
+  }
+
+  private onDrag(e: MouseEvent) {
+    if (!this.isDragging) return
+    const dx = (e.clientX - this.dragStart.x) / this.scale
+    const dy = (e.clientY - this.dragStart.y) / this.scale
+    this.position.x = this.startPos.x + dx
+    this.position.y = this.startPos.y + dy
+    this.updateImage()
+  }
+
+  private endDrag() { this.isDragging = false }
+
+  private handleWheel(e: WheelEvent) {
+    if (e.deltaY < 0) this.zoomIn()
+    else this.zoomOut()
+  }
+
+  private zoomIn() { this.scale = Math.min(this.scale + 0.1, 3); this.updateImage(); this.showZoomLabel() }
+  private zoomOut() { this.scale = Math.max(this.scale - 0.1, 0.2); this.updateImage(); this.showZoomLabel() }
+  private reset() { this.scale = 1; this.position = { x: 0, y: 0 }; this.updateImage(); this.showZoomLabel() }
+
+  private prev() { if (this.currentIndex > 0) { this.currentIndex--; this.reset(); this.updateImage(); this.updateIndex() } }
+  private next() { if (this.currentIndex < this.images.length - 1) { this.currentIndex++; this.reset(); this.updateImage(); this.updateIndex() } }
+  public close() { this.container.style.display = 'none'; document.removeEventListener('keydown', this.handleKeydown.bind(this)) }
+
+  private handleKeydown(e: KeyboardEvent) {
+    switch(e.key) {
+      case 'Escape': this.close(); break
+      case 'ArrowLeft': this.prev(); break
+      case 'ArrowRight': this.next(); break
+      case '+': case '=': this.zoomIn(); break
+      case '-': this.zoomOut(); break
+      case '0': this.reset(); break
+    }
+  }
+
+  public open(index = 0) {
+    this.currentIndex = index
+    this.reset()
+    this.updateImage()
+    this.updateIndex()
+    this.container.style.display = 'flex'
+  }
+}

package/src/packages/index.ts

@@ -1,10 +1,20 @@
 // packages/index.ts
 import type { App } from 'vue'
 import IButton from './button/Button.vue'
+import ISelect from './select/Select.vue'
+import { ImagePreview } from './image-preview/ImagePreview'
+
+const components = [IButton, ISelect]
 
 const install = (app: App) => {
-  app.component('IButton', IButton)
+  components.forEach(component => {
+    app.component(component.name!, component)
+  })
 }
 
-export { IButton }
-export default { install }
+export { 
+  IButton,
+  ISelect,
+  ImagePreview
+ }
+export default { install }

package/src/packages/select/Select.vue

@@ -0,0 +1,45 @@
+<!-- ISelect.vue -->
+<script setup lang="ts">
+
+interface OptionItem {
+  label: string
+  value: string | number
+}
+
+const props = defineProps<{
+  modelValue?: string | number
+  options: OptionItem[]
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void
+}>()
+
+function handleChange(e: Event) {
+  const target = e.target as HTMLSelectElement
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<template>
+  <select :value="modelValue" @change="handleChange" :disabled="props.disabled">
+    <option v-for="opt in options" :key="opt.value" :value="opt.value">
+      {{ opt.label }}
+    </option>
+  </select>
+</template>
+
+<style scoped>
+select {
+  /* padding: 4px 8px; */
+  /* border: 1px solid #ccc; */
+  /* border-radius: 4px; */
+  /* background: white; */
+  /* font-size: 14px; */
+}
+select:disabled {
+  /* background: #f5f5f5; */
+  /* cursor: not-allowed; */
+}
+</style>