@star-ai/star-ui 0.1.0 → 0.1.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.
@@ -0,0 +1,330 @@
1
+ <template>
2
+ <view
3
+ class="star-button"
4
+ :class="[
5
+ `star-button--${type}`,
6
+ `star-button--${size}`,
7
+ {
8
+ 'star-button--disabled': disabled,
9
+ 'star-button--loading': loading,
10
+ 'star-button--block': block,
11
+ 'star-button--plain': plain
12
+ }
13
+ ]"
14
+ :style="[customStyle]"
15
+ @click="handleClick"
16
+ >
17
+ <!-- 加载状态 -->
18
+ <view v-if="loading" class="star-button__loading">
19
+ <view class="star-button__loading-spinner"></view>
20
+ </view>
21
+
22
+ <!-- 图标 -->
23
+ <text
24
+ v-if="icon && !loading"
25
+ class="star-button__icon"
26
+ :class="icon"
27
+ ></text>
28
+
29
+ <!-- 文字内容 -->
30
+ <text class="star-button__text">
31
+ <slot></slot>
32
+ </text>
33
+
34
+ <!-- 右侧图标 -->
35
+ <text
36
+ v-if="rightIcon && !loading"
37
+ class="star-button__right-icon"
38
+ :class="rightIcon"
39
+ ></text>
40
+ </view>
41
+ </template>
42
+
43
+ <script>
44
+ export default {
45
+ name: 'StarButton',
46
+
47
+ // 为组件添加 install 方法,用于 Vue.use()
48
+ install: function(Vue) {
49
+ Vue.component(this.name, this)
50
+ },
51
+
52
+ // 组件属性定义
53
+ props: {
54
+ // 按钮类型
55
+ type: {
56
+ type: String,
57
+ default: 'default',
58
+ validator: (value) => {
59
+ return ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(value)
60
+ }
61
+ },
62
+
63
+ // 按钮大小
64
+ size: {
65
+ type: String,
66
+ default: 'medium',
67
+ validator: (value) => {
68
+ return ['mini', 'small', 'medium', 'large'].includes(value)
69
+ }
70
+ },
71
+
72
+ // 是否禁用
73
+ disabled: {
74
+ type: Boolean,
75
+ default: false
76
+ },
77
+
78
+ // 是否加载中
79
+ loading: {
80
+ type: Boolean,
81
+ default: false
82
+ },
83
+
84
+ // 是否为朴素按钮
85
+ plain: {
86
+ type: Boolean,
87
+ default: false
88
+ },
89
+
90
+ // 是否为块级按钮
91
+ block: {
92
+ type: Boolean,
93
+ default: false
94
+ },
95
+
96
+ // 左侧图标
97
+ icon: {
98
+ type: String,
99
+ default: ''
100
+ },
101
+
102
+ // 右侧图标
103
+ rightIcon: {
104
+ type: String,
105
+ default: ''
106
+ },
107
+
108
+ // 自定义样式
109
+ customStyle: {
110
+ type: Object,
111
+ default: () => ({})
112
+ },
113
+
114
+ // 点击防抖时间(毫秒)
115
+ debounce: {
116
+ type: Number,
117
+ default: 0
118
+ }
119
+ },
120
+
121
+ data() {
122
+ return {
123
+ canClick: true
124
+ }
125
+ },
126
+
127
+ methods: {
128
+ handleClick(event) {
129
+ // 防抖处理
130
+ if (!this.canClick) return
131
+
132
+ if (this.debounce > 0) {
133
+ this.canClick = false
134
+ setTimeout(() => {
135
+ this.canClick = true
136
+ }, this.debounce)
137
+ }
138
+
139
+ // 触发点击事件
140
+ if (!this.disabled && !this.loading) {
141
+ this.$emit('click', event)
142
+ }
143
+ }
144
+ }
145
+ }
146
+ </script>
147
+
148
+ <style lang="scss" scoped>
149
+ // 引入样式变量
150
+ @import "../../styles/variables.scss";
151
+
152
+ .star-button {
153
+ display: inline-flex;
154
+ align-items: center;
155
+ justify-content: center;
156
+ position: relative;
157
+ box-sizing: border-box;
158
+ padding: 0 16px;
159
+ height: 44px;
160
+ line-height: 44px;
161
+ border-radius: $border-radius-base;
162
+ font-size: $font-size-base;
163
+ font-weight: 500;
164
+ text-align: center;
165
+ vertical-align: middle;
166
+ transition: all 0.3s;
167
+ cursor: pointer;
168
+ user-select: none;
169
+
170
+ // 块级按钮
171
+ &--block {
172
+ display: flex;
173
+ width: 100%;
174
+ }
175
+
176
+ // 禁用状态
177
+ &--disabled {
178
+ opacity: 0.6;
179
+ cursor: not-allowed;
180
+ }
181
+
182
+ // 大小
183
+ &--mini {
184
+ padding: 0 8px;
185
+ height: 24px;
186
+ line-height: 24px;
187
+ font-size: $font-size-sm;
188
+ border-radius: $border-radius-sm;
189
+ }
190
+
191
+ &--small {
192
+ padding: 0 12px;
193
+ height: 32px;
194
+ line-height: 32px;
195
+ font-size: $font-size-sm;
196
+ border-radius: $border-radius-sm;
197
+ }
198
+
199
+ &--large {
200
+ padding: 0 20px;
201
+ height: 48px;
202
+ line-height: 48px;
203
+ font-size: $font-size-lg;
204
+ border-radius: $border-radius-lg;
205
+ }
206
+
207
+ // 类型 - 默认
208
+ &--default {
209
+ color: $text-color;
210
+ background-color: $bg-color;
211
+ border: 1px solid $border-color;
212
+
213
+ &:not(.star-button--disabled):not(.star-button--loading):active {
214
+ background-color: darken($bg-color, 5%);
215
+ }
216
+ }
217
+
218
+ // 类型 - 主要
219
+ &--primary {
220
+ color: $white;
221
+ background-color: $primary-color;
222
+ border: 1px solid $primary-color;
223
+
224
+ &.star-button--plain {
225
+ color: $primary-color;
226
+ background-color: transparent;
227
+ }
228
+
229
+ &:not(.star-button--disabled):not(.star-button--loading):active {
230
+ background-color: darken($primary-color, 10%);
231
+ border-color: darken($primary-color, 10%);
232
+ }
233
+ }
234
+
235
+ // 类型 - 成功
236
+ &--success {
237
+ color: $white;
238
+ background-color: $success-color;
239
+ border: 1px solid $success-color;
240
+
241
+ &.star-button--plain {
242
+ color: $success-color;
243
+ background-color: transparent;
244
+ }
245
+ }
246
+
247
+ // 类型 - 警告
248
+ &--warning {
249
+ color: $white;
250
+ background-color: $warning-color;
251
+ border: 1px solid $warning-color;
252
+
253
+ &.star-button--plain {
254
+ color: $warning-color;
255
+ background-color: transparent;
256
+ }
257
+ }
258
+
259
+ // 类型 - 错误
260
+ &--error {
261
+ color: $white;
262
+ background-color: $error-color;
263
+ border: 1px solid $error-color;
264
+
265
+ &.star-button--plain {
266
+ color: $error-color;
267
+ background-color: transparent;
268
+ }
269
+ }
270
+
271
+ // 类型 - 信息
272
+ &--info {
273
+ color: $white;
274
+ background-color: $info-color;
275
+ border: 1px solid $info-color;
276
+
277
+ &.star-button--plain {
278
+ color: $info-color;
279
+ background-color: transparent;
280
+ }
281
+ }
282
+
283
+ // 加载中
284
+ &--loading {
285
+ cursor: not-allowed;
286
+ }
287
+
288
+ // 图标
289
+ &__icon,
290
+ &__right-icon {
291
+ font-family: "star-icon-font" !important; // 使用你自己的图标字体
292
+ margin-right: 4px;
293
+ font-size: inherit;
294
+ }
295
+
296
+ &__right-icon {
297
+ margin-right: 0;
298
+ margin-left: 4px;
299
+ }
300
+
301
+ &__text {
302
+ display: inline-block;
303
+ vertical-align: middle;
304
+ }
305
+
306
+ // 加载动画
307
+ &__loading {
308
+ margin-right: 4px;
309
+ }
310
+
311
+ &__loading-spinner {
312
+ display: inline-block;
313
+ width: 14px;
314
+ height: 14px;
315
+ border: 2px solid;
316
+ border-color: currentColor transparent transparent transparent;
317
+ border-radius: 50%;
318
+ animation: star-button-spin 1s linear infinite;
319
+ }
320
+ }
321
+
322
+ @keyframes star-button-spin {
323
+ 0% {
324
+ transform: rotate(0deg);
325
+ }
326
+ 100% {
327
+ transform: rotate(360deg);
328
+ }
329
+ }
330
+ </style>
@@ -0,0 +1,409 @@
1
+ <template>
2
+ <view class="star-input" :class="inputClasses">
3
+ <!-- 前置内容 -->
4
+ <view v-if="$slots.prepend || prepend" class="star-input__prepend">
5
+ <slot name="prepend">
6
+ <text v-if="prepend" class="star-input__prepend-text">{{ prepend }}</text>
7
+ </slot>
8
+ </view>
9
+
10
+ <!-- 输入框主体 -->
11
+ <view class="star-input__wrapper">
12
+ <!-- 前置图标 -->
13
+ <text
14
+ v-if="prefixIcon"
15
+ class="star-input__prefix-icon"
16
+ :class="prefixIcon"
17
+ @click="handlePrefixIconClick"
18
+ ></text>
19
+
20
+ <!-- 输入框 -->
21
+ <input
22
+ class="star-input__inner"
23
+ :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
24
+ :value="currentValue"
25
+ :placeholder="placeholder"
26
+ :disabled="disabled"
27
+ :maxlength="maxlength"
28
+ :focus="focus"
29
+ :confirm-type="confirmType"
30
+ :placeholder-style="placeholderStyle"
31
+ :placeholder-class="placeholderClass"
32
+ :cursor-spacing="cursorSpacing"
33
+ @input="handleInput"
34
+ @focus="handleFocus"
35
+ @blur="handleBlur"
36
+ @confirm="handleConfirm"
37
+ @keyboardheightchange="handleKeyboardHeightChange"
38
+ />
39
+
40
+ <!-- 清除按钮 -->
41
+ <view
42
+ v-if="clearable && currentValue && !disabled"
43
+ class="star-input__clear"
44
+ @click="handleClear"
45
+ >
46
+ <text class="star-icon-close"></text>
47
+ </view>
48
+
49
+ <!-- 密码可见切换按钮 -->
50
+ <view
51
+ v-if="showPassword && currentValue"
52
+ class="star-input__password-toggle"
53
+ @click="togglePasswordVisible"
54
+ >
55
+ <text :class="passwordVisible ? 'star-icon-eye-open' : 'star-icon-eye-close'"></text>
56
+ </view>
57
+
58
+ <!-- 后置图标 -->
59
+ <text
60
+ v-if="suffixIcon"
61
+ class="star-input__suffix-icon"
62
+ :class="suffixIcon"
63
+ @click="handleSuffixIconClick"
64
+ ></text>
65
+ </view>
66
+
67
+ <!-- 后置内容 -->
68
+ <view v-if="$slots.append || append" class="star-input__append">
69
+ <slot name="append">
70
+ <text v-if="append" class="star-input__append-text">{{ append }}</text>
71
+ </slot>
72
+ </view>
73
+ </view>
74
+ </template>
75
+
76
+ <script>
77
+ export default {
78
+ name: 'StarInput',
79
+
80
+ // 为组件添加 install 方法,用于 Vue.use()
81
+ install: function(Vue) {
82
+ Vue.component(this.name, this)
83
+ },
84
+
85
+ props: {
86
+ // 输入框类型
87
+ type: {
88
+ type: String,
89
+ default: 'text'
90
+ },
91
+
92
+ // 绑定值
93
+ value: {
94
+ type: [String, Number],
95
+ default: ''
96
+ },
97
+
98
+ // 原生属性
99
+ placeholder: {
100
+ type: String,
101
+ default: ''
102
+ },
103
+
104
+ disabled: {
105
+ type: Boolean,
106
+ default: false
107
+ },
108
+
109
+ maxlength: {
110
+ type: [String, Number],
111
+ default: 140
112
+ },
113
+
114
+ focus: {
115
+ type: Boolean,
116
+ default: false
117
+ },
118
+
119
+ confirmType: {
120
+ type: String,
121
+ default: 'done'
122
+ },
123
+
124
+ placeholderStyle: {
125
+ type: String,
126
+ default: ''
127
+ },
128
+
129
+ placeholderClass: {
130
+ type: String,
131
+ default: ''
132
+ },
133
+
134
+ cursorSpacing: {
135
+ type: [String, Number],
136
+ default: 0
137
+ },
138
+
139
+ // 自定义属性
140
+ size: {
141
+ type: String,
142
+ default: 'medium',
143
+ validator: (value) => ['mini', 'small', 'medium', 'large'].includes(value)
144
+ },
145
+
146
+ clearable: {
147
+ type: Boolean,
148
+ default: false
149
+ },
150
+
151
+ showPassword: {
152
+ type: Boolean,
153
+ default: false
154
+ },
155
+
156
+ prefixIcon: {
157
+ type: String,
158
+ default: ''
159
+ },
160
+
161
+ suffixIcon: {
162
+ type: String,
163
+ default: ''
164
+ },
165
+
166
+ prepend: {
167
+ type: String,
168
+ default: ''
169
+ },
170
+
171
+ append: {
172
+ type: String,
173
+ default: ''
174
+ },
175
+
176
+ readonly: {
177
+ type: Boolean,
178
+ default: false
179
+ }
180
+ },
181
+
182
+ data() {
183
+ return {
184
+ currentValue: this.value,
185
+ isFocused: false,
186
+ passwordVisible: false
187
+ }
188
+ },
189
+
190
+ computed: {
191
+ inputClasses() {
192
+ return [
193
+ `star-input--${this.size}`,
194
+ {
195
+ 'star-input--disabled': this.disabled,
196
+ 'star-input--focused': this.isFocused,
197
+ 'star-input--with-prepend': this.prepend || this.$slots.prepend,
198
+ 'star-input--with-append': this.append || this.$slots.append,
199
+ 'star-input--readonly': this.readonly
200
+ }
201
+ ]
202
+ }
203
+ },
204
+
205
+ watch: {
206
+ value(newVal) {
207
+ this.currentValue = newVal
208
+ }
209
+ },
210
+
211
+ methods: {
212
+ handleInput(event) {
213
+ const value = event.detail.value
214
+ this.currentValue = value
215
+ this.$emit('input', value)
216
+ this.$emit('change', value)
217
+ },
218
+
219
+ handleFocus(event) {
220
+ this.isFocused = true
221
+ this.$emit('focus', event)
222
+ },
223
+
224
+ handleBlur(event) {
225
+ this.isFocused = false
226
+ this.$emit('blur', event)
227
+ },
228
+
229
+ handleConfirm(event) {
230
+ this.$emit('confirm', event)
231
+ },
232
+
233
+ handleKeyboardHeightChange(event) {
234
+ this.$emit('keyboardheightchange', event)
235
+ },
236
+
237
+ handleClear() {
238
+ this.currentValue = ''
239
+ this.$emit('input', '')
240
+ this.$emit('change', '')
241
+ this.$emit('clear')
242
+ },
243
+
244
+ togglePasswordVisible() {
245
+ this.passwordVisible = !this.passwordVisible
246
+ },
247
+
248
+ handlePrefixIconClick() {
249
+ this.$emit('click-prefix')
250
+ },
251
+
252
+ handleSuffixIconClick() {
253
+ this.$emit('click-suffix')
254
+ }
255
+ }
256
+ }
257
+ </script>
258
+
259
+ <style lang="scss" scoped>
260
+ @import "../../styles/variables.scss";
261
+
262
+ .star-input {
263
+ display: inline-flex;
264
+ width: 100%;
265
+ font-size: $font-size-base;
266
+ line-height: normal;
267
+
268
+ &__prepend,
269
+ &__append {
270
+ display: flex;
271
+ align-items: center;
272
+ justify-content: center;
273
+ padding: 0 12px;
274
+ background-color: $bg-color-grey;
275
+ border: 1px solid $border-color;
276
+ white-space: nowrap;
277
+
278
+ &-text {
279
+ color: $text-color-secondary;
280
+ }
281
+ }
282
+
283
+ &__prepend {
284
+ border-right: 0;
285
+ border-radius: $border-radius-base 0 0 $border-radius-base;
286
+ }
287
+
288
+ &__append {
289
+ border-left: 0;
290
+ border-radius: 0 $border-radius-base $border-radius-base 0;
291
+ }
292
+
293
+ &__wrapper {
294
+ display: flex;
295
+ align-items: center;
296
+ flex: 1;
297
+ position: relative;
298
+ padding: 0 12px;
299
+ border: 1px solid $border-color;
300
+ border-radius: $border-radius-base;
301
+ background-color: $bg-color;
302
+ transition: border-color 0.3s;
303
+
304
+ .star-input--with-prepend & {
305
+ border-top-left-radius: 0;
306
+ border-bottom-left-radius: 0;
307
+ border-left: 0;
308
+ }
309
+
310
+ .star-input--with-append & {
311
+ border-top-right-radius: 0;
312
+ border-bottom-right-radius: 0;
313
+ border-right: 0;
314
+ }
315
+ }
316
+
317
+ &--focused &__wrapper {
318
+ border-color: $primary-color;
319
+ }
320
+
321
+ &--disabled &__wrapper {
322
+ background-color: $bg-color-grey;
323
+ cursor: not-allowed;
324
+ }
325
+
326
+ &__inner {
327
+ flex: 1;
328
+ width: 100%;
329
+ height: 100%;
330
+ padding: 0;
331
+ border: none;
332
+ outline: none;
333
+ background: transparent;
334
+ font-size: inherit;
335
+ color: $text-color;
336
+
337
+ .star-input--disabled & {
338
+ color: $text-color-disabled;
339
+ cursor: not-allowed;
340
+ }
341
+
342
+ &::placeholder {
343
+ color: $text-color-light;
344
+ }
345
+ }
346
+
347
+ &__prefix-icon,
348
+ &__suffix-icon {
349
+ font-family: "star-icon-font" !important;
350
+ color: $text-color-light;
351
+ font-size: 18px;
352
+ cursor: pointer;
353
+ transition: color 0.3s;
354
+
355
+ &:hover {
356
+ color: $text-color;
357
+ }
358
+ }
359
+
360
+ &__prefix-icon {
361
+ margin-right: 8px;
362
+ }
363
+
364
+ &__suffix-icon {
365
+ margin-left: 8px;
366
+ }
367
+
368
+ &__clear,
369
+ &__password-toggle {
370
+ display: flex;
371
+ align-items: center;
372
+ justify-content: center;
373
+ width: 20px;
374
+ height: 20px;
375
+ margin-left: 8px;
376
+ color: $text-color-light;
377
+ cursor: pointer;
378
+ transition: color 0.3s;
379
+
380
+ &:hover {
381
+ color: $text-color;
382
+ }
383
+
384
+ .star-icon-close,
385
+ .star-icon-eye-open,
386
+ .star-icon-eye-close {
387
+ font-family: "star-icon-font" !important;
388
+ font-size: 16px;
389
+ }
390
+ }
391
+
392
+ // 尺寸
393
+ &--mini &__wrapper {
394
+ height: 24px;
395
+ }
396
+
397
+ &--small &__wrapper {
398
+ height: 32px;
399
+ }
400
+
401
+ &--medium &__wrapper {
402
+ height: 40px;
403
+ }
404
+
405
+ &--large &__wrapper {
406
+ height: 48px;
407
+ }
408
+ }
409
+ </style>
package/lib/index.js CHANGED
@@ -6,8 +6,8 @@
6
6
  'use strict';
7
7
 
8
8
  // 导入组件
9
- const StarButton = require('./components/Button/index.js');
10
- const StarInput = require('./components/Input/index.js');
9
+ const StarButton = require('./components/Button/Button.vue');
10
+ const StarInput = require('./components/Input/Input.vue');
11
11
 
12
12
  // 组件列表
13
13
  const components = [
@@ -42,7 +42,7 @@ const StarInput = require('./components/Input/index.js');
42
42
 
43
43
  // 创建导出对象
44
44
  const StarUI = {
45
- version: '0.1.0',
45
+ version: '0.1.1',
46
46
  install,
47
47
  // 导出所有组件
48
48
  StarButton,
package/lib/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@star-ai/star-ui",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "基于Uniapp的Vue2组件库",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -11,6 +11,11 @@
11
11
  const StarButton = {
12
12
  name: 'StarButton',
13
13
 
14
+ // 为组件添加 install 方法,用于 Vue.use()
15
+ install: function(Vue) {
16
+ Vue.component(this.name, this)
17
+ },
18
+
14
19
  // 组件属性定义
15
20
  props: {
16
21
  // 按钮类型
@@ -105,17 +110,6 @@
105
110
  }
106
111
  }
107
112
  };
108
- StarButton.render = function() {return _c('div',{staticClass:"star-button",class:[
109
- `star-button--${type}`,
110
- `star-button--${size}`,
111
- {
112
- 'star-button--disabled': disabled,
113
- 'star-button--loading': loading,
114
- 'star-button--block': block,
115
- 'star-button--plain': plain
116
- }
117
- ],style:([customStyle]),on:{"click":handleClick}},[(loading)?_c('div',{staticClass:"star-button__loading"},[_c('div',{staticClass:"star-button__loading-spinner"}]):_e(),_v(" "),(icon && !loading)?_c('span',{staticClass:"star-button__icon",class:icon}):_e(),_v(" "),_c('span',{staticClass:"star-button__text"},[_t("default")],2),_v(" "),(rightIcon && !loading)?_c('span',{staticClass:"star-button__right-icon",class:rightIcon}):_e()])}};
118
- StarButton.staticRenderFns = [];
119
113
  StarButton.install = function(Vue) {
120
114
  Vue.component(StarButton.name, StarButton);
121
115
  };
@@ -124,6 +118,11 @@
124
118
  const StarInput = {
125
119
  name: 'StarInput',
126
120
 
121
+ // 为组件添加 install 方法,用于 Vue.use()
122
+ install: function(Vue) {
123
+ Vue.component(this.name, this)
124
+ },
125
+
127
126
  props: {
128
127
  // 输入框类型
129
128
  type: {
@@ -296,8 +295,6 @@
296
295
  }
297
296
  }
298
297
  };
299
- StarInput.render = function() {return _c('div',{staticClass:"star-input",class:inputClasses},[($slots.prepend || prepend)?_c('div',{staticClass:"star-input__prepend"},[_t("prepend",function(){return [(prepend)?_c('span',{staticClass:"star-input__prepend-text"},[_v(_s(prepend))]):_e()]}],2):_e(),_v(" "),_c('div',{staticClass:"star-input__wrapper"},[(prefixIcon)?_c('span',{staticClass:"star-input__prefix-icon",class:prefixIcon,on:{"click":handlePrefixIconClick}}):_e(),_v(" "),_c('input',{staticClass:"star-input__inner",attrs:{"type":showPassword ? (passwordVisible ? 'text' : 'password') : type,"placeholder":placeholder,"disabled":disabled,"maxlength":maxlength,"focus":focus,"confirm-type":confirmType,"placeholder-style":placeholderStyle,"placeholder-class":placeholderClass,"cursor-spacing":cursorSpacing},domProps:{"value":currentValue},on:{"input":handleInput,"focus":handleFocus,"blur":handleBlur,"confirm":handleConfirm,"keyboardheightchange":handleKeyboardHeightChange}}),_v(" "),(clearable && currentValue && !disabled)?_c('div',{staticClass:"star-input__clear",on:{"click":handleClear}},[_c('span',{staticClass:"star-icon-close"})]):_e(),_v(" "),(showPassword && currentValue)?_c('div',{staticClass:"star-input__password-toggle",on:{"click":togglePasswordVisible}},[_c('span',{class:passwordVisible ? 'star-icon-eye-open' : 'star-icon-eye-close'})]):_e(),_v(" "),(suffixIcon)?_c('span',{staticClass:"star-input__suffix-icon",class:suffixIcon,on:{"click":handleSuffixIconClick}}):_e()]),_v(" "),($slots.append || append)?_c('div',{staticClass:"star-input__append"},[_t("append",function(){return [(append)?_c('span',{staticClass:"star-input__append-text"},[_v(_s(append))]):_e()]})],2):_e()])}};
300
- StarInput.staticRenderFns = [];
301
298
  StarInput.install = function(Vue) {
302
299
  Vue.component(StarInput.name, StarInput);
303
300
  };
@@ -336,7 +333,7 @@
336
333
 
337
334
  // 创建导出对象
338
335
  const StarUI = {
339
- version: '0.1.0',
336
+ version: '0.1.1',
340
337
  install,
341
338
  // 导出所有组件
342
339
  StarButton,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@star-ai/star-ui",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "基于Uniapp的Vue2组件库",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.js",
@@ -44,6 +44,11 @@
44
44
  export default {
45
45
  name: 'StarButton',
46
46
 
47
+ // 为组件添加 install 方法,用于 Vue.use()
48
+ install: function(Vue) {
49
+ Vue.component(this.name, this)
50
+ },
51
+
47
52
  // 组件属性定义
48
53
  props: {
49
54
  // 按钮类型
@@ -77,6 +77,11 @@
77
77
  export default {
78
78
  name: 'StarInput',
79
79
 
80
+ // 为组件添加 install 方法,用于 Vue.use()
81
+ install: function(Vue) {
82
+ Vue.component(this.name, this)
83
+ },
84
+
80
85
  props: {
81
86
  // 输入框类型
82
87
  type: {
@@ -1,127 +0,0 @@
1
-
2
- // Button 组件入口文件
3
- const StarButton = {
4
- name: 'StarButton',
5
-
6
- // 组件属性定义
7
- props: {
8
- // 按钮类型
9
- type: {
10
- type: String,
11
- default: 'default',
12
- validator: (value) => {
13
- return ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(value)
14
- }
15
- },
16
-
17
- // 按钮大小
18
- size: {
19
- type: String,
20
- default: 'medium',
21
- validator: (value) => {
22
- return ['mini', 'small', 'medium', 'large'].includes(value)
23
- }
24
- },
25
-
26
- // 是否禁用
27
- disabled: {
28
- type: Boolean,
29
- default: false
30
- },
31
-
32
- // 是否加载中
33
- loading: {
34
- type: Boolean,
35
- default: false
36
- },
37
-
38
- // 是否为朴素按钮
39
- plain: {
40
- type: Boolean,
41
- default: false
42
- },
43
-
44
- // 是否为块级按钮
45
- block: {
46
- type: Boolean,
47
- default: false
48
- },
49
-
50
- // 左侧图标
51
- icon: {
52
- type: String,
53
- default: ''
54
- },
55
-
56
- // 右侧图标
57
- rightIcon: {
58
- type: String,
59
- default: ''
60
- },
61
-
62
- // 自定义样式
63
- customStyle: {
64
- type: Object,
65
- default: () => ({})
66
- },
67
-
68
- // 点击防抖时间(毫秒)
69
- debounce: {
70
- type: Number,
71
- default: 0
72
- }
73
- },
74
-
75
- data() {
76
- return {
77
- canClick: true
78
- }
79
- },
80
-
81
- methods: {
82
- handleClick(event) {
83
- // 防抖处理
84
- if (!this.canClick) return
85
-
86
- if (this.debounce > 0) {
87
- this.canClick = false
88
- setTimeout(() => {
89
- this.canClick = true
90
- }, this.debounce)
91
- }
92
-
93
- // 触发点击事件
94
- if (!this.disabled && !this.loading) {
95
- this.$emit('click', event)
96
- }
97
- }
98
- }
99
- }
100
-
101
- // 添加预编译的渲染函数 - 包装在函数中避免with(this)语法错误
102
- StarButton.render = function() {return _c('div',{staticClass:"star-button",class:[
103
- `star-button--${type}`,
104
- `star-button--${size}`,
105
- {
106
- 'star-button--disabled': disabled,
107
- 'star-button--loading': loading,
108
- 'star-button--block': block,
109
- 'star-button--plain': plain
110
- }
111
- ],style:([customStyle]),on:{"click":handleClick}},[(loading)?_c('div',{staticClass:"star-button__loading"},[_c('div',{staticClass:"star-button__loading-spinner"}]):_e(),_v(" "),(icon && !loading)?_c('span',{staticClass:"star-button__icon",class:icon}):_e(),_v(" "),_c('span',{staticClass:"star-button__text"},[_t("default")],2),_v(" "),(rightIcon && !loading)?_c('span',{staticClass:"star-button__right-icon",class:rightIcon}):_e()])}}
112
- StarButton.staticRenderFns = []
113
-
114
- StarButton.install = function(Vue) {
115
- Vue.component(StarButton.name, StarButton)
116
- }
117
-
118
- // CommonJS 导出(仅在支持module的环境中)
119
- if (typeof module !== 'undefined' && module.exports) {
120
- module.exports = StarButton
121
- module.exports.default = StarButton
122
- }
123
-
124
- // 浏览器全局变量导出
125
- if (typeof window !== 'undefined') {
126
- window.StarButton = StarButton
127
- }
@@ -1,196 +0,0 @@
1
-
2
- // Input 组件入口文件
3
- const StarInput = {
4
- name: 'StarInput',
5
-
6
- props: {
7
- // 输入框类型
8
- type: {
9
- type: String,
10
- default: 'text'
11
- },
12
-
13
- // 绑定值
14
- value: {
15
- type: [String, Number],
16
- default: ''
17
- },
18
-
19
- // 原生属性
20
- placeholder: {
21
- type: String,
22
- default: ''
23
- },
24
-
25
- disabled: {
26
- type: Boolean,
27
- default: false
28
- },
29
-
30
- maxlength: {
31
- type: [String, Number],
32
- default: 140
33
- },
34
-
35
- focus: {
36
- type: Boolean,
37
- default: false
38
- },
39
-
40
- confirmType: {
41
- type: String,
42
- default: 'done'
43
- },
44
-
45
- placeholderStyle: {
46
- type: String,
47
- default: ''
48
- },
49
-
50
- placeholderClass: {
51
- type: String,
52
- default: ''
53
- },
54
-
55
- cursorSpacing: {
56
- type: [String, Number],
57
- default: 0
58
- },
59
-
60
- // 自定义属性
61
- size: {
62
- type: String,
63
- default: 'medium',
64
- validator: (value) => ['mini', 'small', 'medium', 'large'].includes(value)
65
- },
66
-
67
- clearable: {
68
- type: Boolean,
69
- default: false
70
- },
71
-
72
- showPassword: {
73
- type: Boolean,
74
- default: false
75
- },
76
-
77
- prefixIcon: {
78
- type: String,
79
- default: ''
80
- },
81
-
82
- suffixIcon: {
83
- type: String,
84
- default: ''
85
- },
86
-
87
- prepend: {
88
- type: String,
89
- default: ''
90
- },
91
-
92
- append: {
93
- type: String,
94
- default: ''
95
- },
96
-
97
- readonly: {
98
- type: Boolean,
99
- default: false
100
- }
101
- },
102
-
103
- data() {
104
- return {
105
- currentValue: this.value,
106
- isFocused: false,
107
- passwordVisible: false
108
- }
109
- },
110
-
111
- computed: {
112
- inputClasses() {
113
- return [
114
- `star-input--${this.size}`,
115
- {
116
- 'star-input--disabled': this.disabled,
117
- 'star-input--focused': this.isFocused,
118
- 'star-input--with-prepend': this.prepend || this.$slots.prepend,
119
- 'star-input--with-append': this.append || this.$slots.append,
120
- 'star-input--readonly': this.readonly
121
- }
122
- ]
123
- }
124
- },
125
-
126
- watch: {
127
- value(newVal) {
128
- this.currentValue = newVal
129
- }
130
- },
131
-
132
- methods: {
133
- handleInput(event) {
134
- const value = event.detail.value
135
- this.currentValue = value
136
- this.$emit('input', value)
137
- this.$emit('change', value)
138
- },
139
-
140
- handleFocus(event) {
141
- this.isFocused = true
142
- this.$emit('focus', event)
143
- },
144
-
145
- handleBlur(event) {
146
- this.isFocused = false
147
- this.$emit('blur', event)
148
- },
149
-
150
- handleConfirm(event) {
151
- this.$emit('confirm', event)
152
- },
153
-
154
- handleKeyboardHeightChange(event) {
155
- this.$emit('keyboardheightchange', event)
156
- },
157
-
158
- handleClear() {
159
- this.currentValue = ''
160
- this.$emit('input', '')
161
- this.$emit('change', '')
162
- this.$emit('clear')
163
- },
164
-
165
- togglePasswordVisible() {
166
- this.passwordVisible = !this.passwordVisible
167
- },
168
-
169
- handlePrefixIconClick() {
170
- this.$emit('click-prefix')
171
- },
172
-
173
- handleSuffixIconClick() {
174
- this.$emit('click-suffix')
175
- }
176
- }
177
- }
178
-
179
- // 添加预编译的渲染函数 - 包装在函数中避免with(this)语法错误
180
- StarInput.render = function() {return _c('div',{staticClass:"star-input",class:inputClasses},[($slots.prepend || prepend)?_c('div',{staticClass:"star-input__prepend"},[_t("prepend",function(){return [(prepend)?_c('span',{staticClass:"star-input__prepend-text"},[_v(_s(prepend))]):_e()]}],2):_e(),_v(" "),_c('div',{staticClass:"star-input__wrapper"},[(prefixIcon)?_c('span',{staticClass:"star-input__prefix-icon",class:prefixIcon,on:{"click":handlePrefixIconClick}}):_e(),_v(" "),_c('input',{staticClass:"star-input__inner",attrs:{"type":showPassword ? (passwordVisible ? 'text' : 'password') : type,"placeholder":placeholder,"disabled":disabled,"maxlength":maxlength,"focus":focus,"confirm-type":confirmType,"placeholder-style":placeholderStyle,"placeholder-class":placeholderClass,"cursor-spacing":cursorSpacing},domProps:{"value":currentValue},on:{"input":handleInput,"focus":handleFocus,"blur":handleBlur,"confirm":handleConfirm,"keyboardheightchange":handleKeyboardHeightChange}}),_v(" "),(clearable && currentValue && !disabled)?_c('div',{staticClass:"star-input__clear",on:{"click":handleClear}},[_c('span',{staticClass:"star-icon-close"})]):_e(),_v(" "),(showPassword && currentValue)?_c('div',{staticClass:"star-input__password-toggle",on:{"click":togglePasswordVisible}},[_c('span',{class:passwordVisible ? 'star-icon-eye-open' : 'star-icon-eye-close'})]):_e(),_v(" "),(suffixIcon)?_c('span',{staticClass:"star-input__suffix-icon",class:suffixIcon,on:{"click":handleSuffixIconClick}}):_e()]),_v(" "),($slots.append || append)?_c('div',{staticClass:"star-input__append"},[_t("append",function(){return [(append)?_c('span',{staticClass:"star-input__append-text"},[_v(_s(append))]):_e()]})],2):_e()])}}
181
- StarInput.staticRenderFns = []
182
-
183
- StarInput.install = function(Vue) {
184
- Vue.component(StarInput.name, StarInput)
185
- }
186
-
187
- // CommonJS 导出(仅在支持module的环境中)
188
- if (typeof module !== 'undefined' && module.exports) {
189
- module.exports = StarInput
190
- module.exports.default = StarInput
191
- }
192
-
193
- // 浏览器全局变量导出
194
- if (typeof window !== 'undefined') {
195
- window.StarInput = StarInput
196
- }
@@ -1,8 +0,0 @@
1
- import StarButton from './Button.vue'
2
-
3
- // 为组件添加 install 方法,用于 Vue.use()
4
- StarButton.install = function(Vue) {
5
- Vue.component(StarButton.name, StarButton)
6
- }
7
-
8
- export default StarButton
@@ -1,7 +0,0 @@
1
- import StarInput from './Input.vue'
2
-
3
- StarInput.install = function(Vue) {
4
- Vue.component(StarInput.name, StarInput)
5
- }
6
-
7
- export default StarInput