@star-ai/star-ui 0.1.1 → 0.1.3

package/README.md

@@ -32,11 +32,11 @@ import '@star-ai/star-ui/lib/styles/index.scss'
 Vue.use(StarUI)
 
 // 按需引入
-import { Button, Input } from '@star-ai/star-ui'
+import { StarButton, StarInput } from '@star-ai/star-ui'
 import '@star-ai/star-ui/lib/styles/index.scss'
 
-Vue.use(Button)
-Vue.use(Input)
+Vue.use(StarButton)
+Vue.use(StarInput)
 ```
 
 ## 组件文档
@@ -44,15 +44,97 @@ Vue.use(Input)
 ### Button 按钮
 
 ```vue
-<my-button type="primary">主要按钮</my-button>
+<star-button type="primary">主要按钮</star-button>
 ```
 
 ### Input 输入框
 
 ```vue
-<my-input v-model="value" placeholder="请输入内容"></my-input>
+<star-input v-model="value" placeholder="请输入内容"></star-input>
 ```
 
+## Uni-app 特别说明
+
+### 在 Uni-app 中使用
+
+1. **全局引入（推荐）**：
+
+在 `main.js` 中：
+```javascript
+import Vue from 'vue'
+import App from './App'
+import StarUI from '@star-ai/star-ui'
+import '@star-ai/star-ui/lib/styles/index.scss'
+
+Vue.use(StarUI)
+
+App.mpType = 'app'
+
+const app = new Vue({
+  ...App
+})
+app.$mount()
+```
+
+2. **按需引入**：
+
+```vue
+<template>
+  <view>
+    <star-button type="primary">按钮</star-button>
+    <star-input v-model="value"></star-input>
+  </view>
+</template>
+
+<script>
+import { StarButton, StarInput } from '@star-ai/star-ui'
+
+export default {
+  components: {
+    StarButton,
+    StarInput
+  },
+  data() {
+    return {
+      value: ''
+    }
+  }
+}
+</script>
+
+<style>
+/* 引入全局样式 */
+@import '@star-ai/star-ui/lib/styles/index.scss';
+</style>
+```
+
+3. **直接引入组件**：
+
+```vue
+<template>
+  <view>
+    <star-button type="primary">按钮</star-button>
+  </view>
+</template>
+
+<script>
+import StarButton from '@star-ai/star-ui/lib/components/Button/Button.vue'
+
+export default {
+  components: {
+    StarButton
+  }
+}
+</script>
+```
+
+### 注意事项
+
+1. **组件名称**：所有组件以 `star-` 为前缀，如 `star-button`、`star-input`
+2. **样式引入**：确保引入了组件库的样式文件
+3. **Vue 版本**：组件库基于 Vue 2.x 开发，与 Uni-app 保持兼容
+4. **编译平台**：支持 H5、小程序、App 等多端编译
+
 ## 开发指南
 
 ### 项目结构

package/lib/index.esm.js

@@ -0,0 +1,337 @@
+// ES模块入口文件
+// 组件定义
+
+// Button 组件
+const StarButton = {
+  name: 'StarButton',
+  
+  // 为组件添加 install 方法，用于 Vue.use()
+  install: function(Vue) {
+    Vue.component(this.name, this)
+  },
+  
+  // 组件属性定义
+  props: {
+    // 按钮类型
+    type: {
+      type: String,
+      default: 'default',
+      validator: (value) => {
+        return ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(value)
+      }
+    },
+    
+    // 按钮大小
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (value) => {
+        return ['mini', 'small', 'medium', 'large'].includes(value)
+      }
+    },
+    
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 是否加载中
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 是否为朴素按钮
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 是否为块级按钮
+    block: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 左侧图标
+    icon: {
+      type: String,
+      default: ''
+    },
+    
+    // 右侧图标
+    rightIcon: {
+      type: String,
+      default: ''
+    },
+    
+    // 自定义样式
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    
+    // 点击防抖时间（毫秒）
+    debounce: {
+      type: Number,
+      default: 0
+    }
+  },
+  
+  data() {
+    return {
+      canClick: true
+    }
+  },
+  
+  methods: {
+    handleClick(event) {
+      // 防抖处理
+      if (!this.canClick) return
+      
+      if (this.debounce > 0) {
+        this.canClick = false
+        setTimeout(() => {
+          this.canClick = true
+        }, this.debounce)
+      }
+      
+      // 触发点击事件
+      if (!this.disabled && !this.loading) {
+        this.$emit('click', event)
+      }
+    }
+  }
+};
+StarButton.name = 'StarButton'; // 确保name属性存在
+StarButton.install = function(Vue) {
+  Vue.component(StarButton.name, StarButton);
+};
+  
+// Input 组件
+const StarInput = {
+  name: 'StarInput',
+  
+  // 为组件添加 install 方法，用于 Vue.use()
+  install: function(Vue) {
+    Vue.component(this.name, this)
+  },
+  
+  props: {
+    // 输入框类型
+    type: {
+      type: String,
+      default: 'text'
+    },
+    
+    // 绑定值
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    
+    // 原生属性
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    
+    maxlength: {
+      type: [String, Number],
+      default: 140
+    },
+    
+    focus: {
+      type: Boolean,
+      default: false
+    },
+    
+    confirmType: {
+      type: String,
+      default: 'done'
+    },
+    
+    placeholderStyle: {
+      type: String,
+      default: ''
+    },
+    
+    placeholderClass: {
+      type: String,
+      default: ''
+    },
+    
+    cursorSpacing: {
+      type: [String, Number],
+      default: 0
+    },
+    
+    // 自定义属性
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (value) => ['mini', 'small', 'medium', 'large'].includes(value)
+    },
+    
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    
+    showPassword: {
+      type: Boolean,
+      default: false
+    },
+    
+    prefixIcon: {
+      type: String,
+      default: ''
+    },
+    
+    suffixIcon: {
+      type: String,
+      default: ''
+    },
+    
+    prepend: {
+      type: String,
+      default: ''
+    },
+    
+    append: {
+      type: String,
+      default: ''
+    },
+    
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  
+  data() {
+    return {
+      currentValue: this.value,
+      isFocused: false,
+      passwordVisible: false
+    }
+  },
+  
+  computed: {
+    inputClasses() {
+      return [
+        `star-input--${this.size}`,
+        {
+          'star-input--disabled': this.disabled,
+          'star-input--focused': this.isFocused,
+          'star-input--with-prepend': this.prepend || this.$slots.prepend,
+          'star-input--with-append': this.append || this.$slots.append,
+          'star-input--readonly': this.readonly
+        }
+      ]
+    }
+  },
+  
+  watch: {
+    value(newVal) {
+      this.currentValue = newVal
+    }
+  },
+  
+  methods: {
+    handleInput(event) {
+      const value = event.detail.value
+      this.currentValue = value
+      this.$emit('input', value)
+      this.$emit('change', value)
+    },
+    
+    handleFocus(event) {
+      this.isFocused = true
+      this.$emit('focus', event)
+    },
+    
+    handleBlur(event) {
+      this.isFocused = false
+      this.$emit('blur', event)
+    },
+    
+    handleConfirm(event) {
+      this.$emit('confirm', event)
+    },
+    
+    handleKeyboardHeightChange(event) {
+      this.$emit('keyboardheightchange', event)
+    },
+    
+    handleClear() {
+      this.currentValue = ''
+      this.$emit('input', '')
+      this.$emit('change', '')
+      this.$emit('clear')
+    },
+    
+    togglePasswordVisible() {
+      this.passwordVisible = !this.passwordVisible
+    },
+    
+    handlePrefixIconClick() {
+      this.$emit('click-prefix')
+    },
+    
+    handleSuffixIconClick() {
+      this.$emit('click-suffix')
+    }
+  }
+};
+StarInput.name = 'StarInput'; // 确保name属性存在
+StarInput.install = function(Vue) {
+  Vue.component(StarInput.name, StarInput);
+};
+  
+
+// 组件列表
+const components = [
+  StarButton,
+  StarInput
+];
+
+// 安装函数
+const install = function(Vue, opts = {}) {
+  components.forEach(component => {
+    // 直接注册组件，确保name属性存在
+    if (component.name) {
+      Vue.component(component.name, component);
+    }
+  });
+  
+  // 挂载全局方法
+  Vue.prototype.$MY_UI = {
+    size: opts.size || '',
+    zIndex: opts.zIndex || 2000
+  };
+};
+
+// 如果是浏览器环境且已引入Vue，则自动安装
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+// 创建导出对象
+const StarUI = {
+  version: '0.1.3',
+  install,
+  // 导出所有组件
+  StarButton,
+  StarInput
+};
+
+export default StarUI;
+export const StarButton = StarButton;
+export const StarInput = StarInput;

package/lib/index.js

@@ -5,9 +5,302 @@
 }(this, (function () {
   'use strict';
 
-  // 导入组件
-  const StarButton = require('./components/Button/Button.vue');
-const StarInput = require('./components/Input/Input.vue');
+  // 组件定义
+  
+  // Button 组件
+  const StarButton = {
+  name: 'StarButton',
+  
+  // 为组件添加 install 方法，用于 Vue.use()
+  install: function(Vue) {
+    Vue.component(this.name, this)
+  },
+  
+  // 组件属性定义
+  props: {
+    // 按钮类型
+    type: {
+      type: String,
+      default: 'default',
+      validator: (value) => {
+        return ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(value)
+      }
+    },
+    
+    // 按钮大小
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (value) => {
+        return ['mini', 'small', 'medium', 'large'].includes(value)
+      }
+    },
+    
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 是否加载中
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 是否为朴素按钮
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 是否为块级按钮
+    block: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 左侧图标
+    icon: {
+      type: String,
+      default: ''
+    },
+    
+    // 右侧图标
+    rightIcon: {
+      type: String,
+      default: ''
+    },
+    
+    // 自定义样式
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    
+    // 点击防抖时间（毫秒）
+    debounce: {
+      type: Number,
+      default: 0
+    }
+  },
+  
+  data() {
+    return {
+      canClick: true
+    }
+  },
+  
+  methods: {
+    handleClick(event) {
+      // 防抖处理
+      if (!this.canClick) return
+      
+      if (this.debounce > 0) {
+        this.canClick = false
+        setTimeout(() => {
+          this.canClick = true
+        }, this.debounce)
+      }
+      
+      // 触发点击事件
+      if (!this.disabled && !this.loading) {
+        this.$emit('click', event)
+      }
+    }
+  }
+};
+  StarButton.name = 'StarButton'; // 确保name属性存在
+  StarButton.install = function(Vue) {
+    Vue.component(StarButton.name, StarButton);
+  };
+    
+  // Input 组件
+  const StarInput = {
+  name: 'StarInput',
+  
+  // 为组件添加 install 方法，用于 Vue.use()
+  install: function(Vue) {
+    Vue.component(this.name, this)
+  },
+  
+  props: {
+    // 输入框类型
+    type: {
+      type: String,
+      default: 'text'
+    },
+    
+    // 绑定值
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    
+    // 原生属性
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    
+    maxlength: {
+      type: [String, Number],
+      default: 140
+    },
+    
+    focus: {
+      type: Boolean,
+      default: false
+    },
+    
+    confirmType: {
+      type: String,
+      default: 'done'
+    },
+    
+    placeholderStyle: {
+      type: String,
+      default: ''
+    },
+    
+    placeholderClass: {
+      type: String,
+      default: ''
+    },
+    
+    cursorSpacing: {
+      type: [String, Number],
+      default: 0
+    },
+    
+    // 自定义属性
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (value) => ['mini', 'small', 'medium', 'large'].includes(value)
+    },
+    
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    
+    showPassword: {
+      type: Boolean,
+      default: false
+    },
+    
+    prefixIcon: {
+      type: String,
+      default: ''
+    },
+    
+    suffixIcon: {
+      type: String,
+      default: ''
+    },
+    
+    prepend: {
+      type: String,
+      default: ''
+    },
+    
+    append: {
+      type: String,
+      default: ''
+    },
+    
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  
+  data() {
+    return {
+      currentValue: this.value,
+      isFocused: false,
+      passwordVisible: false
+    }
+  },
+  
+  computed: {
+    inputClasses() {
+      return [
+        `star-input--${this.size}`,
+        {
+          'star-input--disabled': this.disabled,
+          'star-input--focused': this.isFocused,
+          'star-input--with-prepend': this.prepend || this.$slots.prepend,
+          'star-input--with-append': this.append || this.$slots.append,
+          'star-input--readonly': this.readonly
+        }
+      ]
+    }
+  },
+  
+  watch: {
+    value(newVal) {
+      this.currentValue = newVal
+    }
+  },
+  
+  methods: {
+    handleInput(event) {
+      const value = event.detail.value
+      this.currentValue = value
+      this.$emit('input', value)
+      this.$emit('change', value)
+    },
+    
+    handleFocus(event) {
+      this.isFocused = true
+      this.$emit('focus', event)
+    },
+    
+    handleBlur(event) {
+      this.isFocused = false
+      this.$emit('blur', event)
+    },
+    
+    handleConfirm(event) {
+      this.$emit('confirm', event)
+    },
+    
+    handleKeyboardHeightChange(event) {
+      this.$emit('keyboardheightchange', event)
+    },
+    
+    handleClear() {
+      this.currentValue = ''
+      this.$emit('input', '')
+      this.$emit('change', '')
+      this.$emit('clear')
+    },
+    
+    togglePasswordVisible() {
+      this.passwordVisible = !this.passwordVisible
+    },
+    
+    handlePrefixIconClick() {
+      this.$emit('click-prefix')
+    },
+    
+    handleSuffixIconClick() {
+      this.$emit('click-suffix')
+    }
+  }
+};
+  StarInput.name = 'StarInput'; // 确保name属性存在
+  StarInput.install = function(Vue) {
+    Vue.component(StarInput.name, StarInput);
+  };
+    
 
   // 组件列表
   const components = [
@@ -18,12 +311,8 @@ const StarInput = require('./components/Input/Input.vue');
   // 安装函数
   const install = function(Vue, opts = {}) {
     components.forEach(component => {
-      // 如果组件有install方法，使用install方法注册
-      if (component.install) {
-        Vue.use(component);
-      } 
-      // 如果组件是Vue组件对象，直接注册
-      else if (component.name) {
+      // 直接注册组件，确保name属性存在
+      if (component.name) {
         Vue.component(component.name, component);
       }
     });
@@ -42,7 +331,7 @@ const StarInput = require('./components/Input/Input.vue');
 
   // 创建导出对象
   const StarUI = {
-    version: '0.1.1',
+    version: '0.1.3',
     install,
     // 导出所有组件
     StarButton,

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@star-ai/star-ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "基于Uniapp的Vue2组件库",
   "main": "index.js",
   "module": "index.js",

package/lib/star-ui.umd.js

@@ -333,7 +333,7 @@
 
   // 创建导出对象
   const StarUI = {
-    version: '0.1.1',
+    version: '0.1.3',
     install,
     // 导出所有组件
     StarButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@star-ai/star-ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "基于Uniapp的Vue2组件库",
   "main": "lib/index.js",
   "module": "lib/index.js",

package/packages/index.js

@@ -2,8 +2,8 @@
 import packageJson from '../../package.json'
 
 // 静态导入所有组件
-import StarButton from './components/Button/index.js'
-import StarInput from './components/Input/index.js'
+import StarButton from './components/Button/Button.vue'
+import StarInput from './components/Input/Input.vue'
 
 // 组件列表
 const components = [