npm - mx-ui-template - Versions diffs - 0.1.4 - Mend

mx-ui-template 0.1.4

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 (8) hide show

package/README.md +162 -0
package/dist/mx-ui-template.css +1 -0
package/dist/mx-ui-template.js +167 -0
package/dist/mx-ui-template.umd.cjs +1 -0
package/dist/mx-ui-template_utils.js +20 -0
package/dist/mx-ui-template_utils.umd.cjs +1 -0
package/dist/vite.svg +1 -0
package/package.json +49 -0

package/README.md ADDED Viewed

@@ -0,0 +1,162 @@
+# lsy_ui_template
+基于 Naive UI 二次封装的 Vue 3 UI 组件库模板，可以发布到 npm 使用。
+## 特性
+- 📦 开箱即用的 Vue 3 组件
+- 🎨 基于 Naive UI 的样式系统
+- 🚀 完整的 TypeScript 类型支持
+- 🔧 简单易用的 API 设计
+- 📱 响应式设计
+## 安装
+```bash
+npm install mx-ui-template naive-ui@^2.43.0 @vicons/material@^0.13.0 vue@^3.0.0
+# 或
+pnpm add mx-ui-template naive-ui@^2.43.0 @vicons/material@^0.13.0 vue@^3.0.0
+# 或
+yarn add mx-ui-template naive-ui@^2.43.0 @vicons/material@^0.13.0 vue@^3.0.0
+```
+## 使用
+### 全局引入
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import MxUI from 'mx-ui-template'
+import 'mx-ui-template/style.css' // 这会自动映射到 dist/mx-ui-template.css
+const app = createApp(App)
+app.use(MxUI)
+app.mount('#app')
+```
+### 按需引入
+```ts
+// 导入组件
+import { Button, Input, Card } from 'mx-ui-template'
+// 导入样式
+import 'mx-ui-template/style.css' // 这会自动映射到 dist/mx-ui-template.css
+// 在组件中使用
+components: {
+  Button,
+  Input,
+  Card
+}
+```
+## 组件列表
+## 工具函数
+组件库的工具函数已单独打包为 `mx-ui-template_utils`，可以通过以下方式导入使用：
+```ts
+// 方式1：单独导入utils包
+import * as utils from 'mx-ui-template_utils'
+// 或者
+import utils from 'mx-ui-template_utils'
+// 格式化日期
+handleDate() {
+  const now = new Date()
+  const formattedDate = utils.formatDate(now, {
+    options: { year: 'numeric', month: 'long', day: 'numeric' }
+  })
+  console.log(formattedDate) // 输出类似：2024年7月25日
+}
+// 检查值是否为空
+checkEmpty() {
+  console.log(utils.isEmpty('')) // true
+  console.log(utils.isEmpty({})) // true
+  console.log(utils.isEmpty('hello')) // false
+}```
+### Button 按钮
+```vue
+<Button>默认按钮</Button>
+<Button type="primary">主要按钮</Button>
+<Button type="success">成功按钮</Button>
+<Button type="warning">警告按钮</Button>
+<Button type="error">错误按钮</Button>
+<Button type="info">信息按钮</Button>
+<Button size="small">小按钮</Button>
+<Button size="large">大按钮</Button>
+<Button disabled>禁用按钮</Button>
+<Button :loading="true">加载按钮</Button>
+<Button circle>O</Button>
+<Button ghost>幽灵按钮</Button>
+<Button dashed>虚线按钮</Button>
+```
+### Input 输入框
+```vue
+<Input placeholder="请输入内容" />
+<Input type="password" placeholder="请输入密码" />
+<Input v-model="value" placeholder="双向绑定" />
+<Input size="small" placeholder="小尺寸" />
+<Input size="large" placeholder="大尺寸" />
+<Input readonly placeholder="只读" />
+<Input disabled placeholder="禁用" />
+<Input maxlength="10" showWordLimit placeholder="带字数限制" />
+```
+### Card 卡片
+```vue
+<Card title="卡片标题">
+  卡片内容
+</Card>
+<Card title="可关闭卡片" closable @close="handleClose">
+  点击右上角关闭按钮可以关闭卡片
+</Card>
+<Card title="无边框卡片" :bordered="false">
+  无边框样式的卡片
+</Card>
+<Card title="带额外内容的卡片">
+  <template #header-extra>
+    <Button size="small">操作</Button>
+  </template>
+  带额外内容的卡片
+</Card>
+```
+## 开发
+```bash
+# 安装依赖
+npm install
+# 启动开发服务器
+npm run dev
+# 构建组件库
+npm run build:lib
+# 预览构建结果
+npm run preview
+# 发布到 npm
+npm run pub
+```
+## 开发说明
+- 组件源码位于 `src/components/` 目录下
+- 组件类型定义位于 `src/types/` 目录下
+- 组件样式位于 `src/styles/` 目录下
+- 演示页面位于 `src/App.vue`
+## License
+MIT

package/dist/mx-ui-template.css ADDED Viewed

@@ -0,0 +1 @@

+ [data-v-fdf1cb77] .n-button{transition:all .3s ease}[data-v-fdf1cb77] .n-button:hover:not(:disabled){transform:translateY(-1px)}[data-v-fdf1cb77] .n-button:active:not(:disabled){transform:translateY(0)}[data-v-be9f5c5c] .n-input-wrapper{transition:all .3s ease}[data-v-be9f5c5c] .n-input-wrapper:focus-within{box-shadow:0 0 0 2px #1890ff33}[data-v-fdc12dd9] .n-card{transition:all .3s ease;border-radius:var(--border-radius)}[data-v-fdc12dd9] .n-card:hover{box-shadow:0 4px 16px #0000001a}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--primary-color: #1890ff;--success-color: #52c41a;--warning-color: #faad14;--error-color: #f5222d;--info-color: #1890ff;--text-primary: #262626;--text-secondary: #8c8c8c;--text-disabled: #bfbfbf;--border-color: #d9d9d9;--border-radius: 6px;--box-shadow: 0 2px 8px rgba(0, 0, 0, .15)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}

package/dist/mx-ui-template.js ADDED Viewed

@@ -0,0 +1,167 @@
+import { defineComponent as u, createBlock as r, openBlock as y, unref as m, normalizeStyle as f, normalizeClass as h, withCtx as i, renderSlot as c, computed as C, createSlots as p } from "vue";
+import { NButton as z, NInput as v, NCard as k } from "naive-ui";
+const I = /* @__PURE__ */ u({
+  __name: "Button",
+  props: {
+    type: {},
+    size: {},
+    circle: { type: Boolean },
+    ghost: { type: Boolean },
+    dashed: { type: Boolean },
+    loading: { type: Boolean },
+    onClick: { type: Function },
+    id: {},
+    class: {},
+    style: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(e, { emit: l }) {
+    const t = e, o = l, s = (n) => {
+      !t.disabled && t.onClick && t.onClick(n), o("click", n);
+    };
+    return (n, d) => (y(), r(m(z), {
+      id: e.id,
+      class: h(e.class),
+      style: f(e.style),
+      type: e.type,
+      size: e.size,
+      circle: e.circle,
+      ghost: e.ghost,
+      dashed: e.dashed,
+      loading: e.loading,
+      disabled: e.disabled,
+      onClick: s
+    }, {
+      default: i(() => [
+        c(n.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["id", "class", "style", "type", "size", "circle", "ghost", "dashed", "loading", "disabled"]));
+  }
+}), b = (e, l) => {
+  const t = e.__vccOpts || e;
+  for (const [o, s] of l)
+    t[o] = s;
+  return t;
+}, V = /* @__PURE__ */ b(I, [["__scopeId", "data-v-fdf1cb77"]]), F = /* @__PURE__ */ u({
+  __name: "Input",
+  props: {
+    modelValue: {},
+    type: {},
+    size: {},
+    placeholder: {},
+    readonly: { type: Boolean },
+    maxlength: {},
+    showWordLimit: { type: Boolean },
+    prefixIcon: {},
+    suffixIcon: {},
+    "onUpdate:modelValue": { type: Function },
+    onBlur: { type: Function },
+    onFocus: { type: Function },
+    id: {},
+    class: {},
+    style: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue", "input", "blur", "focus"],
+  setup(e, { emit: l }) {
+    const t = e, o = l, s = C({
+      get() {
+        return t.modelValue?.toString() || "";
+      },
+      set(a) {
+        o("update:modelValue", typeof t.modelValue == "number" && a !== "" ? Number(a) : a);
+      }
+    }), n = (a) => {
+      o("update:modelValue", a);
+    }, d = (a) => {
+      o("blur", a);
+    }, B = (a) => {
+      o("focus", a);
+    };
+    return (a, x) => (y(), r(m(v), {
+      id: e.id,
+      class: h(e.class),
+      style: f(e.style),
+      value: s.value,
+      "onUpdate:value": [
+        x[0] || (x[0] = (g) => s.value = g),
+        n
+      ],
+      type: e.type,
+      size: e.size,
+      placeholder: e.placeholder,
+      readonly: e.readonly,
+      maxlength: e.maxlength,
+      "show-word-limit": e.showWordLimit,
+      "prefix-icon": e.prefixIcon,
+      "suffix-icon": e.suffixIcon,
+      disabled: e.disabled,
+      onBlur: d,
+      onFocus: B
+    }, null, 8, ["id", "class", "style", "value", "type", "size", "placeholder", "readonly", "maxlength", "show-word-limit", "prefix-icon", "suffix-icon", "disabled"]));
+  }
+}), w = /* @__PURE__ */ b(F, [["__scopeId", "data-v-be9f5c5c"]]), $ = /* @__PURE__ */ u({
+  __name: "Card",
+  props: {
+    title: {},
+    bordered: { type: Boolean },
+    size: {},
+    closable: { type: Boolean },
+    onClose: { type: Function },
+    id: {},
+    class: {},
+    style: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["close"],
+  setup(e, { emit: l }) {
+    const t = e, o = l, s = () => {
+      t.onClose && t.onClose(), o("close");
+    };
+    return (n, d) => (y(), r(m(k), {
+      id: e.id,
+      class: h(e.class),
+      style: f(e.style),
+      title: e.title,
+      bordered: e.bordered,
+      size: e.size,
+      closable: e.closable,
+      onClose: s
+    }, p({
+      default: i(() => [
+        c(n.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 2
+    }, [
+      n.$slots["header-extra"] ? {
+        name: "header-extra",
+        fn: i(() => [
+          c(n.$slots, "header-extra", {}, void 0, !0)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["id", "class", "style", "title", "bordered", "size", "closable"]));
+  }
+}), S = /* @__PURE__ */ b($, [["__scopeId", "data-v-fdc12dd9"]]), U = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null
+}, Symbol.toStringTag, { value: "Module" })), N = {
+  Button: V,
+  Input: w,
+  Card: S
+}, L = {
+  install: (e) => {
+    Object.values(N).forEach((l) => {
+      e.component(l.name, l);
+    });
+  }
+};
+export {
+  V as Button,
+  S as Card,
+  w as Input,
+  N as components,
+  L as default,
+  U as types
+};

package/dist/mx-ui-template.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/mx-ui-template_utils.js ADDED Viewed

@@ -0,0 +1,20 @@
+function o(t, r) {
+  if (!t) return "";
+  const e = t instanceof Date ? t : new Date(t);
+  if (Number.isNaN(e.getTime())) return "";
+  const n = r?.locale ?? void 0, i = r?.options ?? { year: "numeric", month: "2-digit", day: "2-digit" };
+  return new Intl.DateTimeFormat(n, i).format(e);
+}
+function f(t) {
+  return t == null ? !0 : typeof t == "string" ? t.trim() === "" : Array.isArray(t) ? t.length === 0 : typeof t == "object" ? Object.keys(t).length === 0 : !1;
+}
+const s = {
+  formatDate: o,
+  isEmpty: f
+};
+export {
+  s as default,
+  o as formatDate,
+  f as isEmpty,
+  s as utils
+};

package/dist/mx-ui-template_utils.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

+ (function(t,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(t=typeof globalThis<"u"?globalThis:t||self,n(t.MxUIUtils={}))})(this,(function(t){"use strict";function n(e,r){if(!e)return"";const f=e instanceof Date?e:new Date(e);if(Number.isNaN(f.getTime()))return"";const s=r?.locale??void 0,u=r?.options??{year:"numeric",month:"2-digit",day:"2-digit"};return new Intl.DateTimeFormat(s,u).format(f)}function i(e){return e==null?!0:typeof e=="string"?e.trim()==="":Array.isArray(e)?e.length===0:typeof e=="object"?Object.keys(e).length===0:!1}const o={formatDate:n,isEmpty:i};t.default=o,t.formatDate=n,t.isEmpty=i,t.utils=o,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "name": "mx-ui-template",
+  "private": false,
+  "version": "0.1.4",
+  "type": "module",
+  "main": "./dist/mx-ui-template.umd.cjs",
+  "module": "./dist/mx-ui-template.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/mx-ui-template.js",
+      "require": "./dist/mx-ui-template.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/mx-ui-template.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "build:lib": "vue-tsc -b && vite build -c vite.config.lib.ts",
+    "build:utils": "vue-tsc -b && vite build -c vite.config.utils.ts",
+    "build:all": "npm run build:lib && npm run build:utils",
+    "preview": "vite preview",
+    "prepare": "npm run build:all",
+    "pub": "npm publish --access public"
+  },
+  "peerDependencies": {
+    "@vicons/material": "^0.13.0",
+    "naive-ui": "^2.43.0",
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@vicons/material": "^0.13.0",
+    "naive-ui": "^2.43.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.7.2",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "sass": "^1.93.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vue-tsc": "^3.1.0"
+  }
+}