@star-ai/star-ui 0.1.15 → 0.1.16

package/lib/index.js

@@ -30,7 +30,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 // 导出默认对象
 export default {
-  version: '0.1.15',
+  version: '0.1.16',
   install,
   // 导出所有组件
   'star-button': starButton, 'star-input': starInput

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@star-ai/star-ui",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "基于Uniapp的Vue2组件库",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "umd:main": "lib/index.js",
-  "files": [
-    "lib",
-    "packages"
-  ],
+  "files": ["lib/components", "lib/styles", "lib/index"],
   "scripts": {
     "serve": "npm run dev:h5",
     "build:lib": "node build/build.js",

package/packages/components/star-button/star-button.vue

@@ -1,325 +0,0 @@
-<template>
-  <view 
-    class="star-button"
-    :class="[
-      `star-button--${type}`,
-      `star-button--${size}`,
-      {
-        'star-button--disabled': disabled,
-        'star-button--loading': loading,
-        'star-button--block': block,
-        'star-button--plain': plain
-      }
-    ]"
-    :style="[customStyle]"
-    @click="handleClick"
-  >
-    <!-- 加载状态 -->
-    <view v-if="loading" class="star-button__loading">
-      <view class="star-button__loading-spinner"></view>
-    </view>
-    
-    <!-- 图标 -->
-    <text 
-      v-if="icon && !loading" 
-      class="star-button__icon" 
-      :class="icon"
-    ></text>
-    
-    <!-- 文字内容 -->
-    <text class="star-button__text">
-      <slot></slot>
-    </text>
-    
-    <!-- 右侧图标 -->
-    <text 
-      v-if="rightIcon && !loading" 
-      class="star-button__right-icon" 
-      :class="rightIcon"
-    ></text>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'StarButton',
-  
-  // 组件属性定义
-  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)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-// 引入样式变量
-@import "../../styles/variables.scss";
-
-.star-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  box-sizing: border-box;
-  padding: 0 16px;
-  height: 44px;
-  line-height: 44px;
-  border-radius: $border-radius-base;
-  font-size: $font-size-base;
-  font-weight: 500;
-  text-align: center;
-  vertical-align: middle;
-  transition: all 0.3s;
-  cursor: pointer;
-  user-select: none;
-  
-  // 块级按钮
-  &--block {
-    display: flex;
-    width: 100%;
-  }
-  
-  // 禁用状态
-  &--disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  
-  // 大小
-  &--mini {
-    padding: 0 8px;
-    height: 24px;
-    line-height: 24px;
-    font-size: $font-size-sm;
-    border-radius: $border-radius-sm;
-  }
-  
-  &--small {
-    padding: 0 12px;
-    height: 32px;
-    line-height: 32px;
-    font-size: $font-size-sm;
-    border-radius: $border-radius-sm;
-  }
-  
-  &--large {
-    padding: 0 20px;
-    height: 48px;
-    line-height: 48px;
-    font-size: $font-size-lg;
-    border-radius: $border-radius-lg;
-  }
-  
-  // 类型 - 默认
-  &--default {
-    color: $text-color;
-    background-color: $bg-color;
-    border: 1px solid $border-color;
-    
-    &:not(.star-button--disabled):not(.star-button--loading):active {
-      background-color: darken($bg-color, 5%);
-    }
-  }
-  
-  // 类型 - 主要
-  &--primary {
-    color: $white;
-    background-color: $primary-color;
-    border: 1px solid $primary-color;
-    
-    &.star-button--plain {
-      color: $primary-color;
-      background-color: transparent;
-    }
-    
-    &:not(.star-button--disabled):not(.star-button--loading):active {
-      background-color: darken($primary-color, 10%);
-      border-color: darken($primary-color, 10%);
-    }
-  }
-  
-  // 类型 - 成功
-  &--success {
-    color: $white;
-    background-color: $success-color;
-    border: 1px solid $success-color;
-    
-    &.star-button--plain {
-      color: $success-color;
-      background-color: transparent;
-    }
-  }
-  
-  // 类型 - 警告
-  &--warning {
-    color: $white;
-    background-color: $warning-color;
-    border: 1px solid $warning-color;
-    
-    &.star-button--plain {
-      color: $warning-color;
-      background-color: transparent;
-    }
-  }
-  
-  // 类型 - 错误
-  &--error {
-    color: $white;
-    background-color: $error-color;
-    border: 1px solid $error-color;
-    
-    &.star-button--plain {
-      color: $error-color;
-      background-color: transparent;
-    }
-  }
-  
-  // 类型 - 信息
-  &--info {
-    color: $white;
-    background-color: $info-color;
-    border: 1px solid $info-color;
-    
-    &.star-button--plain {
-      color: $info-color;
-      background-color: transparent;
-    }
-  }
-  
-  // 加载中
-  &--loading {
-    cursor: not-allowed;
-  }
-  
-  // 图标
-  &__icon,
-  &__right-icon {
-    font-family: "star-icon-font" !important; // 使用你自己的图标字体
-    margin-right: 4px;
-    font-size: inherit;
-  }
-  
-  &__right-icon {
-    margin-right: 0;
-    margin-left: 4px;
-  }
-  
-  &__text {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  
-  // 加载动画
-  &__loading {
-    margin-right: 4px;
-  }
-  
-  &__loading-spinner {
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    border: 2px solid;
-    border-color: currentColor transparent transparent transparent;
-    border-radius: 50%;
-    animation: star-button-spin 1s linear infinite;
-  }
-}
-
-@keyframes star-button-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>

package/packages/components/star-input/star-input.vue

@@ -1,404 +0,0 @@
-<template>
-  <view class="star-input" :class="inputClasses">
-    <!-- 前置内容 -->
-    <view v-if="$slots.prepend || prepend" class="star-input__prepend">
-      <slot name="prepend">
-        <text v-if="prepend" class="star-input__prepend-text">{{ prepend }}</text>
-      </slot>
-    </view>
-    
-    <!-- 输入框主体 -->
-    <view class="star-input__wrapper">
-      <!-- 前置图标 -->
-      <text 
-        v-if="prefixIcon" 
-        class="star-input__prefix-icon" 
-        :class="prefixIcon"
-        @click="handlePrefixIconClick"
-      ></text>
-      
-      <!-- 输入框 -->
-      <input
-        class="star-input__inner"
-        :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
-        :value="currentValue"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :maxlength="maxlength"
-        :focus="focus"
-        :confirm-type="confirmType"
-        :placeholder-style="placeholderStyle"
-        :placeholder-class="placeholderClass"
-        :cursor-spacing="cursorSpacing"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @confirm="handleConfirm"
-        @keyboardheightchange="handleKeyboardHeightChange"
-      />
-      
-      <!-- 清除按钮 -->
-      <view 
-        v-if="clearable && currentValue && !disabled" 
-        class="star-input__clear"
-        @click="handleClear"
-      >
-        <text class="star-icon-close"></text>
-      </view>
-      
-      <!-- 密码可见切换按钮 -->
-      <view 
-        v-if="showPassword && currentValue" 
-        class="star-input__password-toggle"
-        @click="togglePasswordVisible"
-      >
-        <text :class="passwordVisible ? 'star-icon-eye-open' : 'star-icon-eye-close'"></text>
-      </view>
-      
-      <!-- 后置图标 -->
-      <text 
-        v-if="suffixIcon" 
-        class="star-input__suffix-icon" 
-        :class="suffixIcon"
-        @click="handleSuffixIconClick"
-      ></text>
-    </view>
-    
-    <!-- 后置内容 -->
-    <view v-if="$slots.append || append" class="star-input__append">
-      <slot name="append">
-        <text v-if="append" class="star-input__append-text">{{ append }}</text>
-      </slot>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'StarInput',
-  
-  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')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/variables.scss";
-
-.star-input {
-  display: inline-flex;
-  width: 100%;
-  font-size: $font-size-base;
-  line-height: normal;
-  
-  &__prepend,
-  &__append {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 12px;
-    background-color: $bg-color-grey;
-    border: 1px solid $border-color;
-    white-space: nowrap;
-    
-    &-text {
-      color: $text-color-secondary;
-    }
-  }
-  
-  &__prepend {
-    border-right: 0;
-    border-radius: $border-radius-base 0 0 $border-radius-base;
-  }
-  
-  &__append {
-    border-left: 0;
-    border-radius: 0 $border-radius-base $border-radius-base 0;
-  }
-  
-  &__wrapper {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    position: relative;
-    padding: 0 12px;
-    border: 1px solid $border-color;
-    border-radius: $border-radius-base;
-    background-color: $bg-color;
-    transition: border-color 0.3s;
-    
-    .star-input--with-prepend & {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left: 0;
-    }
-    
-    .star-input--with-append & {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-right: 0;
-    }
-  }
-  
-  &--focused &__wrapper {
-    border-color: $primary-color;
-  }
-  
-  &--disabled &__wrapper {
-    background-color: $bg-color-grey;
-    cursor: not-allowed;
-  }
-  
-  &__inner {
-    flex: 1;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: inherit;
-    color: $text-color;
-    
-    .star-input--disabled & {
-      color: $text-color-disabled;
-      cursor: not-allowed;
-    }
-    
-    &::placeholder {
-      color: $text-color-light;
-    }
-  }
-  
-  &__prefix-icon,
-  &__suffix-icon {
-    font-family: "star-icon-font" !important;
-    color: $text-color-light;
-    font-size: 18px;
-    cursor: pointer;
-    transition: color 0.3s;
-    
-    &:hover {
-      color: $text-color;
-    }
-  }
-  
-  &__prefix-icon {
-    margin-right: 8px;
-  }
-  
-  &__suffix-icon {
-    margin-left: 8px;
-  }
-  
-  &__clear,
-  &__password-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    margin-left: 8px;
-    color: $text-color-light;
-    cursor: pointer;
-    transition: color 0.3s;
-    
-    &:hover {
-      color: $text-color;
-    }
-    
-    .star-icon-close,
-    .star-icon-eye-open,
-    .star-icon-eye-close {
-      font-family: "star-icon-font" !important;
-      font-size: 16px;
-    }
-  }
-  
-  // 尺寸
-  &--mini &__wrapper {
-    height: 24px;
-  }
-  
-  &--small &__wrapper {
-    height: 32px;
-  }
-  
-  &--medium &__wrapper {
-    height: 40px;
-  }
-  
-  &--large &__wrapper {
-    height: 48px;
-  }
-}
-</style>

package/packages/index.js

@@ -1,29 +0,0 @@
-// 自动导入所有组件
-import packageJson from '../../package.json'
-
-// 静态导入所有组件
-import StarButton from './components/star-button/star-button.vue'
-import StarInput from './components/star-input/star-input.vue'
-
-// 组件列表
-const components = [
-  StarButton,
-  StarInput
-]
-
-// 安装函数
-const install = function(Vue, opts = {}) {
-  components.forEach(component => {
-    if(component.install) {
-      Vue.use(component)
-    } else if (component.name) {
-      Vue.component(component.name, component)
-    }
-  })
-}
-
-// 创建导出对象
-export default {
-  version: packageJson.version,
-  install
-}

package/packages/styles/index.scss

@@ -1,102 +0,0 @@
-// 导入变量和混合器
-@import './variables.scss';
-@import './mixins.scss';
-
-// 全局样式重置
-.star-reset {
-  box-sizing: border-box;
-  
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-  
-  // 解决 H5 平台的一些问题
-  uni-page-body {
-    height: 100%;
-  }
-  
-  uni-page-body,
-  uni-page-head {
-    background-color: $bg-color;
-  }
-}
-
-// 工具类
-.star-text-center {
-  text-align: center;
-}
-
-.star-text-left {
-  text-align: left;
-}
-
-.star-text-right {
-  text-align: right;
-}
-
-.star-pull-left {
-  float: left;
-}
-
-.star-pull-right {
-  float: right;
-}
-
-.star-clearfix {
-  @include clearfix;
-}
-
-.star-ellipsis {
-  @include ellipsis;
-}
-
-// 间距工具类
-@each $size, $value in (
-  xs: $spacing-xs,
-  sm: $spacing-sm,
-  base: $spacing-base,
-  lg: $spacing-lg,
-  xl: $spacing-xl
-) {
-  .star-m-#{$size} {
-    margin: $value;
-  }
-  
-  .star-mt-#{$size} {
-    margin-top: $value;
-  }
-  
-  .star-mr-#{$size} {
-    margin-right: $value;
-  }
-  
-  .star-mb-#{$size} {
-    margin-bottom: $value;
-  }
-  
-  .star-ml-#{$size} {
-    margin-left: $value;
-  }
-  
-  .star-p-#{$size} {
-    padding: $value;
-  }
-  
-  .star-pt-#{$size} {
-    padding-top: $value;
-  }
-  
-  .star-pr-#{$size} {
-    padding-right: $value;
-  }
-  
-  .star-pb-#{$size} {
-    padding-bottom: $value;
-  }
-  
-  .star-pl-#{$size} {
-    padding-left: $value;
-  }
-}

package/packages/styles/mixins.scss

@@ -1,84 +0,0 @@
-// 清除浮动
-@mixin clearfix {
-  &::after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-}
-
-// 单行省略
-@mixin ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// 多行省略
-@mixin multi-ellipsis($lines: 2) {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: $lines;
-  -webkit-box-orient: vertical;
-}
-
-// 1px 边框（解决移动端 Retina 屏边框问题）
-@mixin hairline($color: $border-color, $direction: bottom) {
-  position: relative;
-  
-  &::after {
-    content: "";
-    position: absolute;
-    #{$direction}: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: $color;
-    transform: scaleY(0.5);
-    transform-origin: 0 0;
-  }
-}
-
-// 禁用状态
-@mixin disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-// 弹性布局快捷方式
-@mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin flex-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-@mixin flex-around {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
-
-// 响应式
-@mixin respond-to($breakpoint) {
-  @if $breakpoint == 'xs' {
-    @media (max-width: 575px) { @content; }
-  } @else if $breakpoint == 'sm' {
-    @media (min-width: 576px) { @content; }
-  } @else if $breakpoint == 'md' {
-    @media (min-width: 768px) { @content; }
-  } @else if $breakpoint == 'lg' {
-    @media (min-width: 992px) { @content; }
-  } @else if $breakpoint == 'xl' {
-    @media (min-width: 1200px) { @content; }
-  } @else if $breakpoint == 'xxl' {
-    @media (min-width: 1600px) { @content; }
-  }
-}

package/packages/styles/variables.scss

@@ -1,64 +0,0 @@
-// 颜色系统
-$white: #ffffff;
-$black: #000000;
-
-// 主色调
-$primary-color: #2979ff;
-$primary-color-light: #5cadff;
-$primary-color-dark: #2b85e4;
-
-// 功能色
-$success-color: #19be6b;
-$warning-color: #ff9900;
-$error-color: #fa3534;
-$info-color: #909399;
-
-// 中性色
-$text-color: #333333;
-$text-color-secondary: #666666;
-$text-color-light: #999999;
-$text-color-disabled: #c0c4cc;
-
-$bg-color: #ffffff;
-$bg-color-grey: #f5f5f5;
-$bg-color-hover: #f6f6f6;
-
-$border-color: #e4e7ed;
-$border-color-light: #ebeef5;
-
-// 阴影
-$box-shadow-base: 0 2px 12px rgba(0, 0, 0, 0.1);
-$box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.09);
-$box-shadow-dark: 0 2px 16px rgba(0, 0, 0, 0.2);
-
-// 边框半径
-$border-radius-base: 4px;
-$border-radius-sm: 2px;
-$border-radius-lg: 8px;
-$border-radius-circle: 50%;
-
-// 字体
-$font-size-xs: 10px;
-$font-size-sm: 12px;
-$font-size-base: 14px;
-$font-size-lg: 16px;
-$font-size-xl: 18px;
-$font-size-xxl: 20px;
-
-// 间距
-$spacing-xs: 4px;
-$spacing-sm: 8px;
-$spacing-base: 16px;
-$spacing-lg: 24px;
-$spacing-xl: 32px;
-
-// 层级
-$z-index-normal: 1;
-$z-index-dropdown: 1000;
-$z-index-sticky: 1020;
-$z-index-fixed: 1030;
-$z-index-modal-backdrop: 1040;
-$z-index-modal: 1050;
-$z-index-popover: 1060;
-$z-index-tooltip: 1070;
-$z-index-toast: 1080;