npm - sccba-ui - Versions diffs - 0.0.1 - Mend

sccba-ui 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 sccba-ui
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,136 @@
+# sccba-ui
+一个基于 Vue 2/3 的 UI 组件库，使用 vue-demi 实现跨版本兼容。
+## 特性
+- 支持 Vue 2.7 和 Vue 3.x
+- 基于 Element UI 和 Element Plus 构建
+- 提供 SccbaButton 和 SccbaInput 组件
+- 使用 TypeScript 友好的 API 设计
+## 安装
+```bash
+npm install sccba-ui
+```
+## 使用
+### Vue 3
+```javascript
+import { createApp } from 'vue'
+import { SccbaButton, SccbaInput } from 'sccba-ui'
+import 'sccba-ui/dist/sccba-ui.css'
+import App from './App.vue'
+const app = createApp(App)
+app.use(SccbaButton)
+app.use(SccbaInput)
+app.mount('#app')
+```
+### Vue 2
+```javascript
+import Vue from 'vue'
+import { SccbaButton, SccbaInput } from 'sccba-ui'
+import 'sccba-ui/dist/sccba-ui.css'
+import App from './App.vue'
+Vue.use(SccbaButton)
+Vue.use(SccbaInput)
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
+```
+## 组件
+### SccbaButton
+按钮组件，支持多种类型和样式。
+#### Props
+- `type`: 按钮类型，可选值：`primary`、`success`、`warning`、`danger`、`info`
+- `size`: 按钮尺寸，可选值：`large`、`medium`、`small`
+- `plain`: 是否为朴素按钮
+- `round`: 是否为圆角按钮
+- `circle`: 是否为圆形按钮
+- `disabled`: 是否禁用
+#### 示例
+```vue
+<template>
+  <SccbaButton type="primary">主要按钮</SccbaButton>
+  <SccbaButton type="success">成功按钮</SccbaButton>
+  <SccbaButton type="danger">危险按钮</SccbaButton>
+</template>
+```
+### SccbaInput
+输入框组件，支持多种输入类型。
+#### Props
+- `type`: 输入框类型，默认为 `text`
+- `placeholder`: 占位符文本
+- `disabled`: 是否禁用
+- `readonly`: 是否只读
+- `clearable`: 是否可清空
+- `showPassword`: 是否显示密码切换按钮
+- `maxlength`: 最大输入长度
+- `showWordLimit`: 是否显示字数统计
+#### 方法
+- `focus()`: 聚焦输入框
+#### 示例
+```vue
+<template>
+  <SccbaInput ref="inputRef" placeholder="请输入内容" />
+  <SccbaButton @click="inputRef.focus()">聚焦输入框</SccbaButton>
+</template>
+<script setup>
+import { ref } from 'vue'
+const inputRef = ref(null)
+</script>
+```
+## 依赖
+- vue: ^2.7.0 || ^3.0.0
+- vue-demi: ^0.14.10
+- element-ui: ^2.15.14 (Vue 2)
+- element-plus: ^2.13.0 (Vue 3)
+## 开发
+```bash
+# 安装依赖
+npm install
+# 开发模式
+npm run dev
+# 构建
+npm run build
+# 切换 Vue 版本
+npm run switch:vue2  # 切换到 Vue 2
+npm run switch:vue3  # 切换到 Vue 3
+```
+## License
+MIT

package/dist/sccba-ui.cjs.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";var b=Object.create;var y=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var _=(e,o,l,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of S(o))!v.call(e,a)&&a!==l&&y(e,a,{get:()=>o[a],enumerable:!(s=B(o,a))||s.enumerable});return e};var f=(e,o,l)=>(l=e!=null?b(h(e)):{},_(o||!e||!e.__esModule?y(l,"default",{value:e,enumerable:!0}):l,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue-demi"),n=require("vue"),d=(e,o)=>{const l=e.__vccOpts||e;for(const[s,a]of o)l[s]=a;return l},I={name:"MyButton",inheritAttrs:!1},w=Object.assign(I,{props:{type:{type:String,default:"default"},size:{type:String,default:""},plain:{type:Boolean,default:!1},round:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},icon:{type:String,default:""},label:{type:String,default:""},width:{type:[String,Number],default:""},height:{type:[String,Number],default:""},block:{type:Boolean,default:!1},nativeType:{type:String,default:"button"},placeholder:{type:String,default:""}},setup(e){const o=e,l=t.useAttrs(),s=t.shallowRef(null),a=t.ref(null),r=t.computed(()=>({...o,...l}));return t.onMounted(async()=>{if(t.isVue2){const u=await import("element-ui");s.value=u.Button}else{const u=await import("element-plus");s.value=u.ElButton}}),(u,i)=>n.unref(s)?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(n.unref(t.h)(n.unref(s),{...n.unref(r),ref:n.unref(a)},u.$slots)),{key:0})):n.createCommentVNode("",!0)}}),C=d(w,[["__scopeId","data-v-20d033dc"]]),M=t.defineComponent({name:"MyButton",inheritAttrs:!1,props:{type:{type:String,default:"default"},size:{type:String,default:"medium"},plain:{type:Boolean,default:!1},round:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},icon:{type:String,default:""},label:{type:String,default:""},width:{type:[String,Number],default:""},height:{type:[String,Number],default:""},block:{type:Boolean,default:!1},nativeType:{type:String,default:"button"},placeholder:{type:String,default:""}},setup(e,{attrs:o}){const l=t.shallowRef(null),s=t.computed(()=>({...e,...o})),a=t.getCurrentInstance(),r=u=>{console.log(u,"elllll"),u&&(a.exposed=u)};return t.onMounted(async()=>{if(t.isVue2){const u=await import("element-ui");l.value=u.Button}else{const u=await import("element-plus");l.value=u.ElButton}console.log(l.value,"buttonComponent.value"),console.log(a,"vmmmmm")}),{buttonComponent:l,allProps:s,h:t.h,changeRef:r}}});function $(e,o,l,s,a,r){return n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.h(e.buttonComponent,{...e.allProps,ref:e.changeRef},e.$slots)))}const k=d(M,[["render",$],["__scopeId","data-v-1cb31901"]]),P={name:"MyInput"},N=Object.assign(P,{props:{type:{type:String,default:"text"},size:{type:String,default:""},placeholder:{type:String,default:""},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},showPassword:{type:Boolean,default:!1},maxlength:{type:[String,Number],default:null},showWordLimit:{type:Boolean,default:!1},autocomplete:{type:String,default:"off"},name:{type:String,default:""},form:{type:String,default:""},required:{type:Boolean,default:!1},width:{type:[String,Number],default:""}},emits:["input","change","focus","blur","clear"],setup(e,{expose:o,emit:l}){const s=e,a=t.useAttrs(),r=t.shallowRef(null),u=t.computed(()=>({...s,...a}));t.onMounted(async()=>{if(t.isVue2){const c=await import("element-ui");r.value=c.Input}else{const c=await import("element-plus");r.value=c.ElInput}});const i=t.getCurrentInstance(),p=t.ref(null),g=c=>{p.value=c,t.isVue2&&i&&(i.exposed=c)};return o({getInputInstance:()=>p.value,focus:()=>p.value?.focus(),blur:()=>p.value?.blur(),select:()=>p.value?.select(),clear:()=>p.value?.clear(),inputRef:p}),(c,U)=>n.unref(r)?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(n.unref(t.h)(n.unref(r),{...n.unref(u),ref:g},c.$slots)),{key:0})):n.createCommentVNode("",!0)}}),R=d(N,[["__scopeId","data-v-db6e0500"]]);function m(e){e.component("SccbaButton",SccbaButton),e.component("MyButton1",MyButton1),e.component("SccbaInput",SccbaInput)}const V={install:m};exports.MyButton1=k;exports.MyUI=V;exports.SccbaButton=C;exports.SccbaInput=R;exports.install=m;

package/dist/sccba-ui.css ADDED Viewed

@@ -0,0 +1 @@

+ :root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:2em}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}[data-v-20d033dc] .el-button{transition:all .3s cubic-bezier(.645,.045,.355,1)}[data-v-20d033dc] .el-button:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}[data-v-20d033dc] .el-button:active{transform:translateY(0);box-shadow:0 2px 8px #00000026}[data-v-20d033dc] .el-button{margin-right:10px}[data-v-20d033dc] .el-button:last-child{margin-right:0}[data-v-1cb31901] .el-button{transition:all .3s cubic-bezier(.645,.045,.355,1)}[data-v-1cb31901] .el-button:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}[data-v-1cb31901] .el-button:active{transform:translateY(0);box-shadow:0 2px 8px #00000026}[data-v-1cb31901] .el-button{margin-right:10px}[data-v-1cb31901] .el-button:last-child{margin-right:0}[data-v-db6e0500] .el-input__inner{transition:all .3s cubic-bezier(.645,.045,.355,1)}[data-v-db6e0500] .el-input__inner:focus{box-shadow:0 0 0 2px #3b82f633!important}

package/dist/sccba-ui.es.js ADDED Viewed

@@ -0,0 +1,312 @@
+import { useAttrs as _, shallowRef as i, ref as h, computed as d, onMounted as y, isVue2 as c, h as m, defineComponent as $, getCurrentInstance as v } from "vue-demi";
+import { createBlock as g, createCommentVNode as I, unref as u, openBlock as b, resolveDynamicComponent as B } from "vue";
+const S = (e, s) => {
+  const n = e.__vccOpts || e;
+  for (const [o, l] of s)
+    n[o] = l;
+  return n;
+}, C = {
+  name: "MyButton",
+  inheritAttrs: !1
+}, M = /* @__PURE__ */ Object.assign(C, {
+  props: {
+    // 类型：primary/success/warning/danger/info/text
+    type: {
+      type: String,
+      default: "default"
+    },
+    // 尺寸：large/medium/small/mini
+    size: {
+      type: String,
+      default: ""
+    },
+    // 是否朴素按钮
+    plain: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否圆角按钮
+    round: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否圆形按钮
+    circle: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否加载中状态
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    // 图标类名
+    icon: {
+      type: String,
+      default: ""
+    },
+    // 按钮文本
+    label: {
+      type: String,
+      default: ""
+    },
+    // 按钮宽度
+    width: {
+      type: [String, Number],
+      default: ""
+    },
+    // 按钮高度
+    height: {
+      type: [String, Number],
+      default: ""
+    },
+    // 是否块级按钮
+    block: {
+      type: Boolean,
+      default: !1
+    },
+    // 原生type属性
+    nativeType: {
+      type: String,
+      default: "button"
+    },
+    // 占位符（虽然按钮一般不需要，但为了演示代码提示）
+    placeholder: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    const s = e, n = _(), o = i(null), l = h(null), a = d(() => ({ ...s, ...n }));
+    return y(async () => {
+      if (c) {
+        const t = await import("element-ui");
+        o.value = t.Button;
+      } else {
+        const t = await import("element-plus");
+        o.value = t.ElButton;
+      }
+    }), (t, f) => u(o) ? (b(), g(B(u(m)(u(o), { ...u(a), ref: u(l) }, t.$slots)), { key: 0 })) : I("", !0);
+  }
+}), E = /* @__PURE__ */ S(M, [["__scopeId", "data-v-20d033dc"]]), P = $({
+  name: "MyButton",
+  // 关闭自动继承attrs，因为我们要手动绑定到component
+  inheritAttrs: !1,
+  // 定义基本的props，确保代码提示和类型检查
+  props: {
+    // 类型：primary/success/warning/danger/info/text
+    type: {
+      type: String,
+      default: "default"
+    },
+    // 尺寸：large/medium/small/mini
+    size: {
+      type: String,
+      default: "medium"
+    },
+    // 是否朴素按钮
+    plain: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否圆角按钮
+    round: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否圆形按钮
+    circle: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否加载中状态
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    // 图标类名
+    icon: {
+      type: String,
+      default: ""
+    },
+    // 按钮文本
+    label: {
+      type: String,
+      default: ""
+    },
+    // 按钮宽度
+    width: {
+      type: [String, Number],
+      default: ""
+    },
+    // 按钮高度
+    height: {
+      type: [String, Number],
+      default: ""
+    },
+    // 是否块级按钮
+    block: {
+      type: Boolean,
+      default: !1
+    },
+    // 原生type属性
+    nativeType: {
+      type: String,
+      default: "button"
+    },
+    // 占位符（虽然按钮一般不需要，但为了演示代码提示）
+    placeholder: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e, { attrs: s }) {
+    const n = i(null), o = d(() => ({ ...e, ...s })), l = v(), a = (t) => {
+      console.log(t, "elllll"), t && (l.exposed = t);
+    };
+    return y(async () => {
+      if (c) {
+        const t = await import("element-ui");
+        n.value = t.Button;
+      } else {
+        const t = await import("element-plus");
+        n.value = t.ElButton;
+      }
+      console.log(n.value, "buttonComponent.value"), console.log(l, "vmmmmm");
+    }), {
+      buttonComponent: n,
+      allProps: o,
+      h: m,
+      changeRef: a
+    };
+  }
+});
+function k(e, s, n, o, l, a) {
+  return b(), g(B(e.h(e.buttonComponent, { ...e.allProps, ref: e.changeRef }, e.$slots)));
+}
+const O = /* @__PURE__ */ S(P, [["render", k], ["__scopeId", "data-v-1cb31901"]]), N = {
+  name: "MyInput"
+}, R = /* @__PURE__ */ Object.assign(N, {
+  props: {
+    // 类型：text/password/textarea/number/email/url/date
+    type: {
+      type: String,
+      default: "text"
+    },
+    // 尺寸：large/medium/small
+    size: {
+      type: String,
+      default: ""
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否只读
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否可清空
+    clearable: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否显示密码切换按钮
+    showPassword: {
+      type: Boolean,
+      default: !1
+    },
+    // 最大输入长度
+    maxlength: {
+      type: [String, Number],
+      default: null
+    },
+    // 是否显示字数统计
+    showWordLimit: {
+      type: Boolean,
+      default: !1
+    },
+    // 自动完成
+    autocomplete: {
+      type: String,
+      default: "off"
+    },
+    // 原生表单属性
+    name: {
+      type: String,
+      default: ""
+    },
+    // 原生表单属性
+    form: {
+      type: String,
+      default: ""
+    },
+    // 是否必填
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    // 输入框宽度
+    width: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  emits: ["input", "change", "focus", "blur", "clear"],
+  setup(e, { expose: s, emit: n }) {
+    const o = e, l = _(), a = i(null), t = d(() => ({ ...o, ...l }));
+    y(async () => {
+      if (c) {
+        const r = await import("element-ui");
+        a.value = r.Input;
+      } else {
+        const r = await import("element-plus");
+        a.value = r.ElInput;
+      }
+    });
+    const f = v(), p = h(null), w = (r) => {
+      p.value = r, c && f && (f.exposed = r);
+    };
+    return s({
+      // 暴露底层输入框实例
+      getInputInstance: () => p.value,
+      // 常用的输入框方法
+      focus: () => p.value?.focus(),
+      blur: () => p.value?.blur(),
+      // 选择文本
+      select: () => p.value?.select(),
+      // 清空输入框
+      clear: () => p.value?.clear(),
+      // 直接暴露实例（在某些情况下可能更方便）
+      inputRef: p
+    }), (r, x) => u(a) ? (b(), g(B(u(m)(u(a), { ...u(t), ref: w }, r.$slots)), { key: 0 })) : I("", !0);
+  }
+}), j = /* @__PURE__ */ S(R, [["__scopeId", "data-v-db6e0500"]]);
+function U(e) {
+  e.component("SccbaButton", SccbaButton), e.component("MyButton1", MyButton1), e.component("SccbaInput", SccbaInput);
+}
+const T = { install: U };
+export {
+  O as MyButton1,
+  T as MyUI,
+  E as SccbaButton,
+  j as SccbaInput,
+  U as install
+};

package/dist/sccba-ui.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,50 @@
+{
+  "name": "sccba-ui",
+  "version": "0.0.1",
+  "description": "一个基于 Vue 2/3 的 UI 组件库，使用 vue-demi 实现跨版本兼容",
+  "keywords": [
+    "vue",
+    "vue2",
+    "vue3",
+    "ui",
+    "components",
+    "element-ui",
+    "element-plus",
+    "vue-demi"
+  ],
+  "author": "",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/sccba-ui.cjs.js",
+  "module": "dist/sccba-ui.es.js",
+  "unpkg": "dist/sccba-ui.umd.js",
+  "exports": {
+    ".": {
+      "import": "./dist/sccba-ui.es.js",
+      "require": "./dist/sccba-ui.cjs.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "switch:vue2": "npx vue-demi-switch 2",
+    "switch:vue3": "npx vue-demi-switch 3"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0 || ^3.0.0"
+  },
+  "dependencies": {
+    "element-plus": "^2.13.0",
+    "element-ui": "^2.15.14",
+    "sass": "^1.97.1",
+    "vue-demi": "^0.14.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/composition-api": "^1.7.2",
+    "vite": "^7.2.4",
+    "vue": "^3.5.26",
+    "vue-template-compiler": "^2.7.16"
+  }
+}