oxy-uni-ui 2.1.1 → 2.1.2

package/components/common/abstracts/variable.scss

@@ -737,9 +737,11 @@ $-tabs-nav-pills-border-radius: var(--oxy-tabs-nav-pills-border-radius, $-radius
 $-tabs-nav-pills-color: var(--oxy-tabs-nav-pills-color, $-color-white) !default; // pills文字颜色
 
 /* tag */
-$-tag-fs: var(--oxy-tag-fs, $-fs-content) !default; // 字号
+$-tag-mini-fs: var(--oxy-tag-mini-fs, 20rpx) !default; // 迷你尺寸字号
+$-tag-small-fs: var(--oxy-tag-small-fs, 24rpx) !default; // 小尺寸字号
+$-tag-fs: var(--oxy-tag-fs, 28rpx) !default; // 默认字号
+$-tag-large-fs: var(--oxy-tag-large-fs, 32rpx) !default; // 大尺寸字号
 $-tag-color: var(--oxy-tag-color, $-color-white) !default; // 字体颜色
-$-tag-small-fs: var(--oxy-tag-small-fs, $-fs-secondary) !default; // 小尺寸字号
 $-tag-info-color: var(--oxy-tag-info-color, #585858) !default; // info 颜色
 $-tag-primary-color: var(--oxy-tag-primary-color, $-color-theme) !default; // 主颜色
 $-tag-danger-color: var(--oxy-tag-danger-color, $-color-danger) !default; // danger 颜色
@@ -751,10 +753,19 @@ $-tag-danger-bg: var(--oxy-tag-danger-bg, $-color-danger) !default; // danger
 $-tag-warning-bg: var(--oxy-tag-warning-bg, $-color-warning) !default; // warning 背景颜色
 $-tag-success-bg: var(--oxy-tag-success-bg, $-color-success) !default; // success 背景颜色
 $-tag-radius: var(--oxy-tag-radius, $-radius-sm) !default; // 默认圆角大小
+$-tag-mini-radius: var(--oxy-tag-mini-radius, $-radius-sm) !default; // mini 默认圆角
+$-tag-small-radius: var(--oxy-tag-small-radius, $-radius-md) !default; // small 默认圆角
+$-tag-large-radius: var(--oxy-tag-large-radius, $-radius-lg) !default; // large 默认圆角
 $-tag-round-color: var(--oxy-tag-round-color, rgba(102, 102, 102, 1)) !default; // round 字体颜色
 $-tag-round-border-color: var(--oxy-tag-round-border-color, rgba(225, 225, 225, 1)) !default; // round 边框颜色
 $-tag-round-radius: var(--oxy-tag-round-radius, $-radius-2xl) !default; // round 圆角大小
+$-tag-round-mini-radius: var(--oxy-tag-round-mini-radius, $-radius-pill) !default; // mini round 圆角
+$-tag-round-small-radius: var(--oxy-tag-round-small-radius, $-radius-pill) !default; // small round 圆角
+$-tag-round-large-radius: var(--oxy-tag-round-large-radius, $-radius-pill) !default; // large round 圆角
 $-tag-mark-radius: var(--oxy-tag-mark-radius, $-radius-md $-radius-xs) !default; // mark 圆角大小
+$-tag-mark-mini-radius: var(--oxy-tag-mark-mini-radius, $-radius-md $-radius-xs) !default; // mini mark 圆角
+$-tag-mark-small-radius: var(--oxy-tag-mark-small-radius, $-radius-lg $-radius-sm) !default; // small mark 圆角
+$-tag-mark-large-radius: var(--oxy-tag-mark-large-radius, $-radius-xl $-radius-md) !default; // large mark 圆角
 $-tag-close-size: var(--oxy-tag-close-size, $-tag-small-fs) !default; // 关闭按钮字号
 $-tag-close-color: var(--oxy-tag-close-color, currentColor) !default; // 关闭按钮颜色
 $-tag-close-active-color: var(--oxy-tag-close-active-color, rgba(0, 0, 0, 0.45)) !default; // 关闭按钮 active 颜色

package/components/oxy-checkbox/index.scss

@@ -81,8 +81,15 @@
   }
   @include when(button) {
     display: inline-block;
-    width: 33.3333%;
     margin-bottom: 0;
+    margin-right: $-checkbox-margin;
+    vertical-align: top;
+    font-size: $-checkbox-button-font-size;
+
+    @include when(last-child) {
+      margin-right: 0;
+    }
+
     .oxy-checkbox__label {
       display: flex;
       align-items: center;
@@ -90,11 +97,14 @@
       height: $-checkbox-button-height;
       min-width: $-checkbox-button-min-width;
       padding: 16rpx 32rpx;
+      margin-left: 0;
       border: 1px solid $-checkbox-button-border;
       box-sizing: border-box;
       border-radius: $-checkbox-button-radius;
       background: $-checkbox-button-bg;
-      transition: background 0.2s;
+      transition: all 0.2s;
+      line-height: 1.2;
+      text-align: center;
     }
     @include when(disabled) {
       .oxy-checkbox__label {
@@ -119,16 +129,41 @@
       }
     }
   }
+  @include when(inline) {
+    display: inline-block;
+    margin-bottom: 0;
+    margin-right: $-checkbox-margin;
+
+    @include when(last-child) {
+      margin-right: 0;
+    }
+  }
   @include when(cell-box) {
     display: inline-block;
     padding: 32rpx 32rpx;
     width: 33.3333%;
+    margin: 0;
     box-sizing: border-box;
     font-size: 0;
+    @include when(large) {
+      padding: 32rpx 32rpx;
+    }
     @include when(checked) {
       color: $-checkbox-checked-color;
     }
   }
+  &.is-cell-box.is-button-box {
+    display: inline-flex;
+    width: 33.3333%;
+    margin-right: 0;
+    padding: 24rpx 24rpx 0 0;
+    box-sizing: border-box;
+
+    .oxy-checkbox__label {
+      width: 100%;
+      max-width: inherit;
+    }
+  }
   @include when(large) {
     .oxy-checkbox__shape {
       width: $-checkbox-large-size;

package/components/oxy-sort-button/index.scss

@@ -66,10 +66,9 @@
     vertical-align: middle;
     line-height: $-line-height-tight;
 
-      :deep(.oxy-sort-button__icon-up),
-      :deep(.oxy-sort-button__icon-down) {
-        transform: scale(calc((10 / 14)));
-      }
+    :deep(.oxy-sort-button__icon-up),
+    :deep(.oxy-sort-button__icon-down) {
+      transform: scale(calc((10 / 14)));
     }
   }
 

package/components/oxy-tag/index.scss

@@ -31,11 +31,9 @@
     background: transparent;
     color: $normalColor;
     border-color: $normalColor;
-    padding: 12rpx 20rpx;
   }
 
   @include when(round) {
-    padding: 12rpx 24rpx;
     background: transparent;
     color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
     border-color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
@@ -43,12 +41,7 @@
   }
 
   @include when(mark) {
-    padding: 12rpx 20rpx;
     border-radius: $-tag-mark-radius;
-
-    @include when(plain) {
-      padding: 8rpx 20rpx;
-    }
   }
   @include when(active) {
     color: $-tag-primary-color;
@@ -56,6 +49,144 @@
   }
 }
 
+@mixin tag-size-style(
+  $sizeConfig
+) {
+  $fontSize: map-get($sizeConfig, fontSize);
+  $paddingY: map-get($sizeConfig, paddingY);
+  $paddingX: map-get($sizeConfig, paddingX);
+  $roundPaddingX: map-get($sizeConfig, roundPaddingX);
+  $plainPaddingY: map-get($sizeConfig, plainPaddingY);
+  $markPlainPaddingY: map-get($sizeConfig, markPlainPaddingY);
+  $minHeight: map-get($sizeConfig, minHeight);
+  $inputHeight: map-get($sizeConfig, inputHeight);
+  $iconGap: map-get($sizeConfig, iconGap);
+  $closeGap: map-get($sizeConfig, closeGap);
+  $dynamicMinWidth: map-get($sizeConfig, dynamicMinWidth);
+  $closeSize: map-get($sizeConfig, closeSize);
+  $radius: map-get($sizeConfig, radius);
+  $roundRadius: map-get($sizeConfig, roundRadius);
+  $markRadius: map-get($sizeConfig, markRadius);
+
+  font-size: $fontSize;
+  padding: $paddingY $paddingX;
+  min-height: $minHeight;
+  border-radius: $radius;
+
+  &.is-round {
+    padding: $paddingY $roundPaddingX;
+    border-radius: $roundRadius;
+  }
+
+  &.is-plain {
+    padding: $plainPaddingY $paddingX;
+  }
+
+  &.is-mark {
+    padding: $paddingY $paddingX;
+    border-radius: $markRadius;
+
+    &.is-plain {
+      padding: $markPlainPaddingY $paddingX;
+    }
+  }
+
+  &.is-dynamic {
+    min-width: $dynamicMinWidth;
+  }
+
+  .oxy-tag__icon {
+    margin-right: $iconGap;
+    font-size: $fontSize;
+  }
+
+  .oxy-tag__add-text {
+    height: $inputHeight;
+    min-height: $inputHeight;
+    font-size: $fontSize;
+    line-height: $inputHeight;
+  }
+
+  .oxy-tag__close {
+    margin-left: $closeGap;
+    font-size: $closeSize;
+    width: $closeSize;
+    height: $closeSize;
+  }
+}
+
+$-tag-size-default-config: (
+  fontSize: $-tag-fs,
+  paddingY: 6rpx,
+  paddingX: 18rpx,
+  roundPaddingX: 22rpx,
+  plainPaddingY: 6rpx,
+  markPlainPaddingY: 4rpx,
+  minHeight: 46rpx,
+  inputHeight: 40rpx,
+  iconGap: 10rpx,
+  closeGap: 12rpx,
+  dynamicMinWidth: 148rpx,
+  closeSize: $-tag-close-size,
+  radius: $-tag-radius,
+  roundRadius: $-tag-round-radius,
+  markRadius: $-tag-mark-radius
+);
+
+$-tag-size-mini-config: (
+  fontSize: $-tag-mini-fs,
+  paddingY: 2rpx,
+  paddingX: 10rpx,
+  roundPaddingX: 12rpx,
+  plainPaddingY: 2rpx,
+  markPlainPaddingY: 2rpx,
+  minHeight: 28rpx,
+  inputHeight: 26rpx,
+  iconGap: 6rpx,
+  closeGap: 8rpx,
+  dynamicMinWidth: 116rpx,
+  closeSize: $-tag-mini-fs,
+  radius: $-tag-mini-radius,
+  roundRadius: $-tag-round-mini-radius,
+  markRadius: $-tag-mark-mini-radius
+);
+
+$-tag-size-small-config: (
+  fontSize: $-tag-small-fs,
+  paddingY: 4rpx,
+  paddingX: 14rpx,
+  roundPaddingX: 16rpx,
+  plainPaddingY: 4rpx,
+  markPlainPaddingY: 2rpx,
+  minHeight: 34rpx,
+  inputHeight: 30rpx,
+  iconGap: 8rpx,
+  closeGap: 10rpx,
+  dynamicMinWidth: 128rpx,
+  closeSize: $-tag-small-fs,
+  radius: $-tag-small-radius,
+  roundRadius: $-tag-round-small-radius,
+  markRadius: $-tag-mark-small-radius
+);
+
+$-tag-size-large-config: (
+  fontSize: $-tag-large-fs,
+  paddingY: 8rpx,
+  paddingX: 22rpx,
+  roundPaddingX: 26rpx,
+  plainPaddingY: 8rpx,
+  markPlainPaddingY: 6rpx,
+  minHeight: 54rpx,
+  inputHeight: 48rpx,
+  iconGap: 12rpx,
+  closeGap: 14rpx,
+  dynamicMinWidth: 164rpx,
+  closeSize: $-tag-small-fs,
+  radius: $-tag-large-radius,
+  roundRadius: $-tag-round-large-radius,
+  markRadius: $-tag-mark-large-radius
+);
+
 @include b(tag) {
   position: relative;
   font-size: $-tag-fs;
@@ -65,8 +196,8 @@
   max-width: 100%;
   box-sizing: border-box;
   color: $-tag-color;
-  padding: 12rpx 20rpx;
-  min-height: 64rpx;
+  padding: 6rpx 18rpx;
+  min-height: 46rpx;
   border: #{$-border-width-base} solid transparent;
   border-radius: $-tag-radius;
   transition: opacity $-transition-duration-base, color $-transition-duration-base, border-color $-transition-duration-base, background-color $-transition-duration-base;
@@ -89,14 +220,23 @@
   @include when(success) {
     @include tag-type-style($-tag-success-color, $-tag-success-bg);
   }
-  @include when(icon) {
-    padding: 12rpx 20rpx;
+  @include tag-size-style($-tag-size-default-config);
+  @include when(mini) {
+    @include tag-size-style($-tag-size-mini-config);
+  }
+
+  @include when(small) {
+    @include tag-size-style($-tag-size-small-config);
+  }
+
+  @include when(large) {
+    @include tag-size-style($-tag-size-large-config);
   }
 
   @include when(dynamic) {
     box-sizing: border-box;
     width: auto;
-    min-width: 176rpx;
+    min-width: 148rpx;
     justify-content: center;
     transition: color .3s, border-color .3s, background-color .3s;
 
@@ -127,7 +267,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-right: 12rpx;
+    margin-right: 10rpx;
     font-size: $-tag-fs;
     line-height: 1;
     vertical-align: middle;
@@ -145,11 +285,11 @@
   @include e(add-text) {
     width: 100%;
     min-width: 0;
-    height: 56rpx;
-    min-height: 56rpx;
+    height: 40rpx;
+    min-height: 40rpx;
     display: inline-block;
     font-size: $-tag-fs;
-    line-height: 56rpx;
+    line-height: 40rpx;
     vertical-align: middle;
     color: inherit;
     padding: 0;
@@ -166,7 +306,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-left: $-spacing-16;
+    margin-left: 12rpx;
     margin-right: 0;
     font-size: $-tag-close-size;
     width: $-tag-close-size;

package/components/oxy-tag/oxy-tag.vue

@@ -57,7 +57,7 @@ const dynamicValue = ref<string>('')
 const dynamicInput = ref<boolean>(false)
 
 watch(
-  [() => props.useIconSlot, () => props.icon, () => props.plain, () => props.dynamic, () => props.round, () => props.mark],
+  [() => props.useIconSlot, () => props.icon, () => props.plain, () => props.dynamic, () => props.round, () => props.mark, () => props.size],
   () => {
     computeTagClass()
   },
@@ -76,6 +76,17 @@ watch(
   { immediate: true }
 )
 
+watch(
+  () => props.size,
+  (newValue) => {
+    if (!newValue) return
+    const size = ['mini', 'small', 'default', 'large']
+    if (size.indexOf(newValue) === -1) console.error(`size must be one of ${size.toString()}`)
+    computeTagClass()
+  },
+  { immediate: true }
+)
+
 watch(
   () => dynamicInput.value,
   () => {
@@ -108,9 +119,10 @@ const textStyle = computed(() => {
 })
 
 function computeTagClass() {
-  const { type, plain, round, mark, dynamic, icon, useIconSlot } = props
+  const { type, size, plain, round, mark, dynamic, icon, useIconSlot } = props
   let tagClassList: string[] = []
   type && tagClassList.push(`is-${type}`)
+  size && tagClassList.push(`is-${size}`)
   plain && tagClassList.push('is-plain')
   round && tagClassList.push('is-round')
   mark && tagClassList.push('is-mark')

package/components/oxy-tag/types.ts

@@ -2,6 +2,7 @@ import type { ExtractPropTypes } from 'vue'
 import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger'
+export type TagSize = 'mini' | 'small' | 'default' | 'large'
 
 export const tagProps = {
   ...baseProps,
@@ -21,6 +22,14 @@ export const tagProps = {
    */
   type: makeStringProp<TagType>('default'),
 
+  /**
+   * 标签尺寸
+   * 类型：string
+   * 可选值：'mini' / 'small' / 'default' / 'large'
+   * 默认值：'default'
+   */
+  size: makeStringProp<TagSize>('default'),
+
   /**
    * 左侧图标
    * 类型：string

package/dev-tools.ts

@@ -0,0 +1,2 @@
+export { default as devTools } from './oxy-dev-tools/index'
+export { default as OxyDevTools } from './oxy-dev-tools/oxy-dev-tools.vue'

package/devTools/components/DevToolsOverlay.vue

@@ -0,0 +1,56 @@
+<template>
+  <view v-show="visible" class="devtools-overlay">
+    <view class="devtools-overlay__bg" @click="hide" />
+    <view class="devtools-overlay__panel" @click.stop>
+      <mainView />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import mainView from '../page/components/main.vue'
+
+const visible = ref(false)
+
+function show() {
+  visible.value = true
+}
+
+function hide() {
+  visible.value = false
+  uni.$emit('devTools_overlay_hidden')
+}
+
+onMounted(() => {
+  uni.$on('devTools_overlay_show', show)
+  uni.$on('devTools_overlay_hide', hide)
+})
+
+onBeforeUnmount(() => {
+  uni.$off('devTools_overlay_show', show)
+  uni.$off('devTools_overlay_hide', hide)
+})
+</script>
+
+<style lang="scss" scoped>
+.devtools-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483646;
+  overflow: hidden;
+}
+
+.devtools-overlay__bg {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.devtools-overlay__panel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>