im-ui-mobile 0.1.0 → 0.1.2

package/components/im-col/im-col.vue

@@ -0,0 +1,191 @@
+<template>
+  <view 
+    class="im-col"
+    :class="[
+      `im-col--span-${span}`,
+      `im-col--offset-${offset}`,
+      `im-col--order-${order}`,
+      `im-col--align-self-${alignSelf}`,
+      { 'im-col--gutter': hasGutter }
+    ]"
+    :style="colStyle"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+// 定义 Props
+interface Props {
+  // 布局配置
+  span?: number | string
+  offset?: number | string
+  order?: number | string
+  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch'
+  flex?: string
+  
+  // 响应式配置
+  xs?: number | string
+  sm?: number | string
+  md?: number | string
+  lg?: number | string
+  xl?: number | string
+  
+  // 样式配置
+  width?: string
+  height?: string
+  margin?: string
+  padding?: string
+  bgColor?: string
+  borderColor?: string
+  borderRadius?: string
+  
+  // 点击事件
+  clickable?: boolean
+}
+
+// 定义 Emits
+interface Emits {
+  (e: 'click', event: any): void
+}
+
+// 定义 Props 默认值
+const props = withDefaults(defineProps<Props>(), {
+  span: 24,
+  offset: 0,
+  order: 0,
+  alignSelf: 'auto',
+  flex: 'none',
+  
+  xs: 0,
+  sm: 0,
+  md: 0,
+  lg: 0,
+  xl: 0,
+  
+  width: 'auto',
+  height: 'auto',
+  margin: '0',
+  padding: '0',
+  bgColor: 'transparent',
+  borderColor: 'transparent',
+  borderRadius: '0',
+  
+  clickable: false
+})
+
+const emit = defineEmits<Emits>()
+
+// 注入 row context
+const rowContext = inject('imRowContext', { gutter: 0 })
+
+// 计算是否有 gutter
+const hasGutter = computed(() => {
+  return Number(rowContext.gutter) > 0
+})
+
+// 计算响应式 span
+const computedSpan = computed(() => {
+  // 这里可以添加响应式逻辑，根据屏幕宽度返回不同的 span
+  // 简化版本：直接使用 props.span
+  return props.span
+})
+
+// 计算列样式
+const colStyle = computed(() => {
+  const style: any = {
+    width: props.width,
+    height: props.height,
+    margin: props.margin,
+    padding: props.padding,
+    backgroundColor: props.bgColor,
+    borderColor: props.borderColor,
+    borderRadius: props.borderRadius,
+    order: props.order,
+    alignSelf: props.alignSelf
+  }
+  
+  // 设置 flex
+  if (props.flex !== 'none') {
+    style.flex = props.flex
+  }
+  
+  // 设置边框
+  if (props.borderColor !== 'transparent') {
+    style.borderWidth = '2rpx'
+    style.borderStyle = 'solid'
+  }
+  
+  // 设置 gutter
+  if (hasGutter.value) {
+    const gutter = typeof rowContext.gutter === 'number' 
+      ? `${rowContext.gutter}rpx` 
+      : rowContext.gutter
+    
+    style.paddingLeft = `calc(${gutter} / 2)`
+    style.paddingRight = `calc(${gutter} / 2)`
+  }
+  
+  return style
+})
+
+// 点击事件
+const handleClick = (event: any) => {
+  if (props.clickable) {
+    emit('click', event)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.im-col {
+  box-sizing: border-box;
+  position: relative;
+  
+  // 基本 span 类
+  @for $i from 1 through 24 {
+    &--span-#{$i} {
+      width: calc(100% * $i / 24);
+    }
+    
+    &--offset-#{$i} {
+      margin-left: calc(100% * $i / 24);
+    }
+    
+    &--order-#{$i} {
+      order: $i;
+    }
+  }
+  
+  // 对齐方式
+  &--align-self-auto {
+    align-self: auto;
+  }
+  
+  &--align-self-start {
+    align-self: flex-start;
+  }
+  
+  &--align-self-end {
+    align-self: flex-end;
+  }
+  
+  &--align-self-center {
+    align-self: center;
+  }
+  
+  &--align-self-stretch {
+    align-self: stretch;
+  }
+  
+  // 点击效果
+  &:active {
+    &.im-col--clickable {
+      opacity: 0.7;
+    }
+  }
+}
+</style>

package/components/im-dialog/im-dialog.vue

@@ -0,0 +1,543 @@
+<template>
+  <im-modal
+    ref="modalRef"
+    v-model:show="visible"
+    :title="title"
+    :subtitle="subtitle"
+    :show-header="showHeader"
+    :show-subtitle="showSubtitle"
+    :show-footer="showFooter"
+    :show-cancel="showCancel && type !== 'alert'"
+    :show-confirm="showConfirm"
+    :cancel-text="cancelText"
+    :confirm-text="confirmText"
+    :cancel-type="cancelType"
+    :confirm-type="confirmType"
+    :cancel-disabled="cancelDisabled"
+    :confirm-disabled="confirmDisabled"
+    :cancel-loading="cancelLoading"
+    :confirm-loading="confirmLoading"
+    :button-size="buttonSize"
+    :position="position"
+    :animation="animation"
+    :duration="duration"
+    :show-overlay="showOverlay"
+    :overlay-color="overlayColor"
+    :overlay-opacity="overlayOpacity"
+    :close-on-click-overlay="closeOnClickOverlay"
+    :lock-scroll="lockScroll"
+    :width="width"
+    :border-radius="borderRadius"
+    :background-color="backgroundColor"
+    :z-index="zIndex"
+    :show-close="showClose"
+    :safe-area-inset-bottom="safeAreaInsetBottom"
+    :custom-class="customClass"
+    :close-on-click-action="closeOnClickAction"
+    @open="handleOpen"
+    @opened="handleOpened"
+    @close="handleClose"
+    @closed="handleClosed"
+    @click-overlay="handleClickOverlay"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+  >
+    <!-- 内容区域 -->
+    <view class="im-dialog__content" :style="contentStyle">
+      <!-- 图标 -->
+      <view v-if="showIcon" class="im-dialog__icon">
+        <im-icon size="80" :name="type==='success'?'ok':type" />
+        <slot v-if="$slots.icon" name="icon">
+          <view class="im-dialog__icon-content" :class="`im-dialog__icon--${type}`">
+            <text v-if="type === 'success'" class="im-dialog__icon-text">✓</text>
+            <text v-else-if="type === 'error'" class="im-dialog__icon-text">✕</text>
+            <text v-else-if="type === 'warning'" class="im-dialog__icon-text">!</text>
+            <text v-else-if="type === 'info'" class="im-dialog__icon-text">i</text>
+            <text v-else class="im-dialog__icon-text">?</text>
+          </view>
+        </slot>
+      </view>
+      
+      <!-- 输入框（prompt类型） -->
+      <template v-if="type === 'prompt'">
+        <view class="im-dialog__prompt">
+          <text v-if="promptLabel" class="im-dialog__prompt-label">{{ promptLabel }}</text>
+          <input
+            v-model="inputValue"
+            class="im-dialog__input"
+            :type="inputType"
+            :placeholder="promptPlaceholder"
+            :maxlength="maxlength"
+            :disabled="inputDisabled"
+            @input="handleInput"
+            @focus="handleInputFocus"
+            @blur="handleInputBlur"
+          />
+          <text v-if="showCharCount" class="im-dialog__char-count">
+            {{ inputValue.length }} / {{ maxlength }}
+          </text>
+          <text v-if="inputError" class="im-dialog__input-error">{{ inputError }}</text>
+        </view>
+      </template>
+      
+      <!-- 内容文本 -->
+      <template v-else-if="type === 'html'">
+        <view class="im-dialog__html" v-html="content"/>
+      </template>
+      
+      <template v-else>
+        <text class="im-dialog__text">{{ content }}</text>
+      </template>
+      
+      <!-- 自定义插槽 -->
+      <slot></slot>
+    </view>
+  </im-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import type { Modal as ModalType } from 'im-ui-mobile'
+
+// 定义对话框类型
+type DialogType = 'alert' | 'confirm' | 'prompt' | 'success' | 'error' | 'warning' | 'info' | 'html' | 'custom'
+
+// 定义 Props
+interface Props {
+  // 显示控制
+  show?: boolean
+  modelValue?: boolean
+  
+  // 对话框类型
+  type?: DialogType
+  
+  // 标题和内容
+  title?: string
+  subtitle?: string
+  content?: string
+  
+  // 头部配置
+  showHeader?: boolean
+  showSubtitle?: boolean
+  showIcon?: boolean
+  
+  // 内容样式
+  contentStyle?: Record<string, string>
+  
+  // Prompt 类型配置
+  promptLabel?: string
+  promptPlaceholder?: string
+  inputType?: 'text' | 'number' | 'password' | 'textarea'
+  maxlength?: number
+  showCharCount?: boolean
+  inputDisabled?: boolean
+  
+  // 按钮配置
+  showFooter?: boolean
+  showCancel?: boolean
+  showConfirm?: boolean
+  cancelText?: string
+  confirmText?: string
+  cancelType?: 'default' | 'primary' | 'warning' | 'error'
+  confirmType?: 'default' | 'primary' | 'warning' | 'error'
+  cancelDisabled?: boolean
+  confirmDisabled?: boolean
+  cancelLoading?: boolean
+  confirmLoading?: boolean
+  buttonSize?: 'small' | 'medium' | 'large'
+  
+  // 弹窗配置
+  position?: 'center' | 'top' | 'bottom' | 'left' | 'right'
+  animation?: 'fade' | 'slide' | 'zoom' | 'none'
+  duration?: number
+  showOverlay?: boolean
+  overlayColor?: string
+  overlayOpacity?: number
+  closeOnClickOverlay?: boolean
+  lockScroll?: boolean
+  width?: string
+  borderRadius?: string
+  backgroundColor?: string
+  zIndex?: number
+  showClose?: boolean
+  safeAreaInsetBottom?: boolean
+  customClass?: string
+  closeOnClickAction?: boolean
+  
+  // 验证函数
+  validator?: (value: string) => string | boolean
+  
+  // 自动关闭
+  autoClose?: boolean
+  autoCloseDelay?: number
+  
+  // 输入框初始值
+  defaultValue?: string
+}
+
+// 定义 Emits
+interface Emits {
+  (e: 'update:show', value: boolean): void
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'open'): void
+  (e: 'opened'): void
+  (e: 'close'): void
+  (e: 'closed'): void
+  (e: 'click-overlay'): void
+  (e: 'confirm', value?: string): void
+  (e: 'cancel'): void
+  (e: 'input', value: string): void
+  (e: 'focus'): void
+  (e: 'blur'): void
+}
+
+// 定义 Props 默认值
+const props = withDefaults(defineProps<Props>(), {
+  show: false,
+  modelValue: false,
+  
+  type: 'alert',
+  
+  title: '',
+  subtitle: '',
+  content: '',
+  
+  showHeader: true,
+  showSubtitle: true,
+  showIcon: false,
+  
+  contentStyle: () => ({}),
+  
+  promptLabel: '',
+  promptPlaceholder: '请输入',
+  inputType: 'text',
+  maxlength: 100,
+  showCharCount: false,
+  inputDisabled: false,
+  
+  showFooter: true,
+  showCancel: true,
+  showConfirm: true,
+  cancelText: '取消',
+  confirmText: '确定',
+  cancelType: 'default',
+  confirmType: 'primary',
+  cancelDisabled: false,
+  confirmDisabled: false,
+  cancelLoading: false,
+  confirmLoading: false,
+  buttonSize: 'medium',
+  
+  position: 'center',
+  animation: 'zoom',
+  duration: 300,
+  showOverlay: true,
+  overlayColor: '#000',
+  overlayOpacity: 0.5,
+  closeOnClickOverlay: true,
+  lockScroll: true,
+  width: '640rpx',
+  borderRadius: '16rpx',
+  backgroundColor: '#fff',
+  zIndex: 1000,
+  showClose: false,
+  safeAreaInsetBottom: true,
+  customClass: '',
+  closeOnClickAction: true,
+  
+  autoClose: false,
+  autoCloseDelay: 3000,
+  
+  defaultValue: ''
+})
+
+const emit = defineEmits<Emits>()
+
+// 组件引用
+const modalRef = ref<InstanceType<typeof ModalType>>()
+
+// 内部状态
+const visible = computed({
+  get: () => props.show || props.modelValue,
+  set: (val) => {
+    emit('update:show', val)
+    emit('update:modelValue', val)
+  }
+})
+
+// 输入值
+const inputValue = ref(props.defaultValue)
+const inputError = ref('')
+
+// 自动关闭计时器
+let autoCloseTimer: any = null
+
+// 根据类型设置默认值
+const computedTitle = computed(() => {
+  if (props.title) return props.title
+  
+  const titleMap: Record<string, string> = {
+    success: '操作成功',
+    error: '操作失败',
+    warning: '警告',
+    info: '提示',
+    alert: '提示',
+    confirm: '确认',
+    prompt: '请输入'
+  }
+  
+  return titleMap[props.type] || '提示'
+})
+
+const computedIcon = computed(() => props.showIcon || ['success', 'error', 'warning', 'info'].includes(props.type))
+
+// 监听显示状态变化
+watch(visible, (val) => {
+  if (val) {
+    // 打开时重置输入值
+    inputValue.value = props.defaultValue
+    inputError.value = ''
+    
+    // 设置自动关闭  && props.type === 'alert'
+    if (props.autoClose) {
+      autoCloseTimer = setTimeout(() => {
+        close()
+      }, props.autoCloseDelay)
+    }
+  } else {
+    // 关闭时清除计时器
+    if (autoCloseTimer) {
+      clearTimeout(autoCloseTimer)
+      autoCloseTimer = null
+    }
+  }
+})
+
+// 处理打开
+const handleOpen = () => {
+  emit('open')
+}
+
+const handleOpened = () => {
+  emit('opened')
+  
+  // 如果是prompt类型，自动聚焦输入框
+  if (props.type === 'prompt') {
+    nextTick(() => {
+      // 这里可以添加输入框自动聚焦逻辑
+    })
+  }
+}
+
+// 处理关闭
+const handleClose = () => {
+  emit('close')
+}
+
+const handleClosed = () => {
+  emit('closed')
+}
+
+// 处理遮罩点击
+const handleClickOverlay = () => {
+  emit('click-overlay')
+}
+
+// 处理输入
+const handleInput = (event: any) => {
+  const value = event.detail?.value || event.target?.value || ''
+  inputValue.value = value
+  emit('input', value)
+  
+  // 验证输入
+  if (props.validator) {
+    const result = props.validator(value)
+    if (typeof result === 'string') {
+      inputError.value = result
+    } else if (result === false) {
+      inputError.value = '输入无效'
+    } else {
+      inputError.value = ''
+    }
+  }
+}
+
+// 处理输入框焦点
+const handleInputFocus = () => {
+  emit('focus')
+}
+
+const handleInputBlur = () => {
+  emit('blur')
+}
+
+// 处理确认
+const handleConfirm = () => {
+  // 验证输入
+  if (props.type === 'prompt' && props.validator) {
+    const result = props.validator(inputValue.value)
+    if (typeof result === 'string') {
+      inputError.value = result
+      return
+    } else if (result === false) {
+      inputError.value = '输入无效'
+      return
+    }
+  }
+  
+  emit('confirm', inputValue.value)
+  
+  if (props.closeOnClickAction) {
+    visible.value = false
+  }
+}
+
+// 处理取消
+const handleCancel = () => {
+  emit('cancel')
+  if (props.closeOnClickAction) {
+    visible.value = false
+  }
+}
+
+// 打开对话框
+const open = (options?: Partial<Props>) => {
+  if (options) {
+    // 这里可以动态更新props，但实际项目中可能需要更复杂的处理
+    // console.log('动态选项:', options)
+  }
+  modalRef.value.open()
+}
+
+// 关闭对话框
+const close = () => {
+  modalRef.value.close()
+}
+
+// 切换显示状态
+const toggle = () => {
+  modalRef.value.toggle()
+}
+
+// 清空输入
+const clearInput = () => {
+  inputValue.value = ''
+  inputError.value = ''
+}
+
+// 暴露方法给父组件
+defineExpose({
+  open,
+  close,
+  toggle,
+  clearInput
+})
+</script>
+
+<style lang="scss" scoped>
+.im-dialog {
+  &__content {
+    // padding: 40rpx;
+    text-align: center;
+  }
+  
+  &__icon {
+    margin-bottom: 32rpx;
+    
+    &-content {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 50%;
+      font-size: 48rpx;
+      font-weight: bold;
+      color: white;
+      
+      &--success {
+        background-color: #52c41a;
+      }
+      
+      &--error {
+        background-color: #ff4d4f;
+      }
+      
+      &--warning {
+        background-color: #faad14;
+      }
+      
+      &--info {
+        background-color: #1890ff;
+      }
+    }
+    
+    &-text {
+      line-height: 1;
+    }
+  }
+  
+  &__text {
+    display: block;
+    font-size: 30rpx;
+    color: #666;
+    line-height: 1.6;
+  }
+  
+  &__html {
+    font-size: 30rpx;
+    color: #666;
+    line-height: 1.6;
+    text-align: left;
+  }
+  
+  &__prompt {
+    text-align: left;
+    // padding:20rpx;
+    // border:solid 1px red;
+  }
+  
+  &__prompt-label {
+    display: block;
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 16rpx;
+  }
+  
+  &__input {
+    // width: 100%;
+    padding: 24rpx;
+    border: 2rpx solid #dcdfe6;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    background-color: #fff;
+    transition: border-color 0.3s;
+    
+    &:focus {
+      border-color: #409eff;
+      outline: none;
+    }
+    
+    &:disabled {
+      background-color: #f5f7fa;
+      color: #c0c4cc;
+      cursor: not-allowed;
+    }
+  }
+  
+  &__char-count {
+    display: block;
+    text-align: right;
+    font-size: 24rpx;
+    color: #999;
+    margin-top: 12rpx;
+  }
+  
+  &__input-error {
+    display: block;
+    font-size: 24rpx;
+    color: #ff4d4f;
+    margin-top: 12rpx;
+  }
+}
+</style>