papayaui 0.0.53 → 0.1.0

package/components/badge/badge.vue

@@ -1,16 +1,9 @@
 <template>
-  <view
-    :class="
-      computedClass('badge', {
-        'badge--dot': dot,
-        'badge--fixed': !!$slots.default,
-      })
-    "
-  >
+  <view :class="[ns.b(), ns.is('dot', dot), ns.is('fixed', !!$slots.default)]">
     <slot></slot>
     <view
       v-if="visible"
-      :class="computedClass('badge-content')"
+      :class="ns.e('content')"
       :style="{
         backgroundColor: color,
         top: getUnitValue(offset[1].toString()),
@@ -25,8 +18,8 @@
 
 <script lang="ts" setup>
 import { computed, CSSProperties } from 'vue'
+import useNamespace, { defaultNamespace } from '../../core/useNamespace'
 import { getUnitValue } from '../../utils'
-import { computedClass, PREFIX } from '../../utils/style'
 
 export interface BadgeProps {
   /** 徽标内容 */
@@ -45,9 +38,11 @@ export interface BadgeProps {
   show?: boolean
 }
 
+const ns = useNamespace('badge')
+
 const props = withDefaults(defineProps<BadgeProps>(), {
   content: undefined,
-  color: `var(--${PREFIX}-color-danger)`,
+  color: `var(--${defaultNamespace}-color-danger)`,
   max: undefined,
   offset: () => [0, 0],
   showZero: false,
@@ -75,7 +70,7 @@ const value = computed(() => {
 .#{$prefix}-badge {
   position: relative;
   display: inline-block;
-  &-content {
+  &__content {
     position: relative;
     display: flex;
     flex-direction: row;
@@ -86,12 +81,12 @@ const value = computed(() => {
     padding: 2px 5px;
     border-radius: 100px;
   }
-  &--dot &-content {
+  &--dot &__content {
     padding: 0;
     width: 8px;
     height: 8px;
   }
-  &--fixed &-content {
+  &--fixed &__content {
     position: absolute;
     transform: translate(50%, -50%);
     transform-origin: 100%;

package/components/badge/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <DocDemoBlock title="基础用法" card>
-    <view class="grid grid-cols-4">
+    <view class="demo-badge">
       <pa-badge content="5">
         <view class="demo-block"></view>
       </pa-badge>
@@ -16,7 +16,7 @@
     </view>
   </DocDemoBlock>
   <DocDemoBlock title="最大值" card>
-    <view class="grid grid-cols-4">
+    <view class="demo-badge">
       <pa-badge content="999" :max="9">
         <view class="demo-block"></view>
       </pa-badge>
@@ -29,7 +29,7 @@
     </view>
   </DocDemoBlock>
   <DocDemoBlock title="自定义颜色" card>
-    <view class="grid grid-cols-4">
+    <view class="demo-badge">
       <pa-badge content="5" color="#1989fa">
         <view class="demo-block"></view>
       </pa-badge>
@@ -45,7 +45,7 @@
     </view>
   </DocDemoBlock>
   <DocDemoBlock title="自定义内容" card>
-    <view class="grid grid-cols-4">
+    <view class="demo-badge">
       <pa-badge>
         <view class="demo-block"></view>
         <template #content>
@@ -61,7 +61,7 @@
     </view>
   </DocDemoBlock>
   <DocDemoBlock title="自定义位置" card>
-    <view class="grid grid-cols-4">
+    <view class="demo-badge">
       <pa-badge content="99" :offset="[-10, -10]">
         <view class="demo-block"></view>
       </pa-badge>
@@ -71,7 +71,7 @@
     </view>
   </DocDemoBlock>
   <DocDemoBlock title="独立展示" card>
-    <view class="grid grid-cols-4">
+    <view class="demo-badge">
       <pa-badge content="9" />
       <pa-badge content="99" />
     </view>
@@ -84,6 +84,11 @@ import DocDemoBlock from '../../doc/doc-demo-block.vue'
 </script>
 
 <style lang="scss" scoped>
+.demo-badge {
+  :deep(.pa-badge) {
+    margin-right: 42px;
+  }
+}
 .demo-block {
   width: 40px;
   height: 40px;

package/components/bottom-popup/bottom-popup.vue

@@ -1,6 +1,6 @@
 <template>
   <Popup
-    :custom-class="computedClass('bottom-popup')"
+    :custom-class="ns.b()"
     :show="show"
     position="bottom"
     :height="height"
@@ -13,28 +13,19 @@
     :safe-area-inset-bottom="false"
     @update:show="emit('update:show', !!$event)"
   >
-    <view
-      class="flex flex-col"
-      :class="[
-        computedClass('bottom-popup__wrapper'),
-        { 'safe-bottom-padding': safeAreaInsetBottom },
-      ]"
-    >
-      <view
-        :class="computedClass('bottom-popup__header')"
-        class="width-full flex items-center justify-center flex-shrink-0"
-      >
+    <view :class="[ns.e('wrapper'), { 'safe-bottom-padding': safeAreaInsetBottom }]">
+      <view :class="ns.e('header')">
         <slot name="before-title"></slot>
-        <text class="text-32 leading-40 text-block font-w-500 mr-8">{{ title }}</text>
+        <text :class="ns.e('title')">{{ title }}</text>
         <slot name="after-title"></slot>
       </view>
 
-      <view class="flex flex-col flex-1" style="overflow: hidden">
+      <view :class="ns.e('body')">
         <view class="flex-1" style="overflow: hidden">
           <slot></slot>
         </view>
 
-        <view v-if="$slots.footer" :class="computedClass('bottom-popup__footer')">
+        <view v-if="$slots.footer" :class="ns.e('footer')">
           <slot name="footer"></slot>
         </view>
       </view>
@@ -44,7 +35,7 @@
 
 <script lang="ts" setup>
 import { CSSProperties, toRefs } from 'vue'
-import { computedClass } from '../../utils/style'
+import useNamespace from '../../core/useNamespace'
 import Popup from '../popup/popup.vue'
 
 export interface BottomPopupProps {
@@ -70,6 +61,8 @@ export interface BottomPopupProps {
   safeAreaInsetBottom?: boolean
 }
 
+const ns = useNamespace('bottom-popup')
+
 const props = withDefaults(defineProps<BottomPopupProps>(), {
   show: false,
   title: undefined,
@@ -95,14 +88,35 @@ const emit = defineEmits<{
 .#{$prefix}-bottom-popup {
   &__wrapper {
     position: relative;
+    display: flex;
+    flex-direction: column;
     height: 100%;
     border-radius: 24rpx 24rpx 0 0;
   }
 
   &__header {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 100%;
     height: 88rpx;
   }
+  &__title {
+    font-size: 32rpx;
+    line-height: 40rpx;
+    color: _var(color-black);
+    font-weight: 500;
+    margin-right: 8rpx;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+  }
 
   &__footer {
     width: 100%;

package/components/button/button.vue

@@ -1,8 +1,8 @@
 <template>
   <button
-    :class="[computedClass('button'), `button--${type}`, plain ? `button--plain` : '']"
+    :class="[ns.b(), ns.m(type), ns.m(size), ns.is('block', block), ns.is('plain', plain)]"
     :style="customStyle"
-    :hover-class="computedClass('button--hover')"
+    :hover-class="ns.m('hover')"
     :disabled="disabled"
     :plain="plain"
     :open-type="openType"
@@ -15,7 +15,7 @@
     @chooseavatar="emit('chooseavatar', $event)"
     @tap="onClick"
   >
-    <view class="height-full flex items-center justify-center">
+    <view :class="ns.e('content')">
       <Loadmore
         v-if="localLoading"
         class="mr-4"
@@ -40,9 +40,9 @@
 <script lang="ts" setup>
 import { getUnitValue } from '../../utils/common'
 import { computed, CSSProperties, ref, StyleValue } from 'vue'
-import { computedClass } from '../../utils/style'
 import Icon from '../icon/icon.vue'
 import Loadmore from '../loadmore/loadmore.vue'
+import useNamespace from '../../core/useNamespace'
 
 export interface ButtonProps {
   /** 按钮类型 */
@@ -51,6 +51,8 @@ export interface ButtonProps {
   width?: string
   /** 按钮高度 */
   height?: string
+  /**尺寸 */
+  size?: 'large' | 'normal' | 'small' | 'mini'
   /** 字体大小 */
   fontSize?: string
   /** 是否为块级元素 */
@@ -101,12 +103,15 @@ export interface ButtonProps {
   showMessageCard?: boolean
 }
 
+const ns = useNamespace('button')
+
 const props = withDefaults(defineProps<ButtonProps>(), {
   type: 'primary',
-  width: 'auto',
-  height: '42px',
-  fontSize: '14px',
-  round: '3px',
+  width: undefined,
+  height: undefined,
+  size: 'normal',
+  fontSize: undefined,
+  round: undefined,
   icon: undefined,
   syncClick: undefined,
   customStyle: undefined,
@@ -136,16 +141,24 @@ const clickLoading = ref<boolean>()
 const localLoading = computed(() => props.loading || clickLoading.value)
 
 const customStyle = computed<StyleValue>(() => {
-  return {
+  const style: CSSProperties = {
     ...props.customStyle,
-    display: props.block ? 'block' : 'inline-block',
-    width: props.block
+  }
+  if (props.width) {
+    style.width = props.block
       ? getUnitValue(props.width === 'auto' ? '100%' : props.width)
-      : getUnitValue(props.width),
-    height: getUnitValue(props.height),
-    fontSize: getUnitValue(props.fontSize),
-    borderRadius: props.round === true ? getUnitValue(props.height) : getUnitValue(props.round),
+      : getUnitValue(props.width)
+  }
+  if (props.height) {
+    style.height = getUnitValue(props.height)
+  }
+  if (props.fontSize) {
+    style.fontSize = getUnitValue(props.fontSize)
+  }
+  if (props.round) {
+    style.borderRadius = props.round === true ? '100px' : getUnitValue(props.round)
   }
+  return style
 })
 
 const onClick = async (event: MouseEvent) => {
@@ -167,9 +180,20 @@ const onClick = async (event: MouseEvent) => {
 <style lang="scss" scoped>
 @import '../../styles/vars.scss';
 .#{$prefix}-button {
-  padding: _var(button-padding, 12px);
+  display: inline-block;
+  height: 44px;
+  line-height: 1.2;
+  margin: _var(button-margin, 0);
   border: 1px solid transparent;
   box-sizing: border-box;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
   &::before {
     position: absolute;
     top: 50%;
@@ -187,42 +211,69 @@ const onClick = async (event: MouseEvent) => {
   &::after {
     border: none;
   }
+
   &--hover {
     &::before {
       opacity: 0.1;
     }
   }
-  &.button--default {
+
+  &--default {
     color: _var(color-black);
     background-color: #fff;
     border-color: #ebedf0;
   }
-  &.button--primary {
+  &--primary {
     color: #fff;
     background-color: _var(color-primary);
     border-color: _var(color-primary);
-    &.button--plain {
-      color: _var(color-primary);
-    }
   }
-  &.button--warning {
+  &--warning {
     color: #fff;
     background-color: _var(color-warning);
     border-color: _var(color-warning);
-    &.button--plain {
-      color: _var(color-warning);
-    }
   }
-  &.button--danger {
+  &--danger {
     color: #fff;
     background-color: _var(color-danger);
     border-color: _var(color-danger);
-    &.button--plain {
-      color: _var(color-danger);
-    }
   }
-  &[plain] {
+
+  &--large {
+    width: 100%;
+    height: 50px;
+  }
+  &--normal {
+    font-size: 14px;
+    padding: _var(button-padding, 0 15px);
+  }
+  &--small {
+    height: 32px;
+    font-size: 12px;
+    padding: _var(button-padding, 0 8px);
+  }
+  &--mini {
+    height: 24px;
+    font-size: 10px;
+    padding: _var(button-padding, 0 4px);
+  }
+
+  &--block {
+    display: block;
+    width: 100%;
+  }
+
+  &--plain {
     background-color: transparent;
+    &.#{$prefix}-button--primary {
+      color: _var(color-primary);
+    }
+    &.#{$prefix}-button--warning {
+      color: _var(color-warning);
+    }
+    &.#{$prefix}-button--danger {
+      color: _var(color-danger);
+    }
   }
   &[disabled]:not([type]) {
     color: _var(color-black);

package/components/button/demo.vue

@@ -60,10 +60,8 @@ const onClick = () => {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .demo-button {
-  button {
-    margin: 0 16px 16px 0;
-  }
+  --pa-button-margin: 0 16px 16px 0;
 }
 </style>

package/components/calendar/calendar-wrapper.vue

@@ -1,52 +1,55 @@
 <template>
-  <view :class="computedClass('calendar-wrapper')">
-    <view :class="computedClass('calendar-header')">
-      <view v-if="showTitle" :class="computedClass('calendar-header__title')">{{ title }}</view>
-      <view v-if="showSubtitle" :class="computedClass('calendar-header__subtitle')">
+  <view :class="ns.b('wrapper')">
+    <view :class="ns.b('header')">
+      <view v-if="showTitle" :class="ns.be('header', 'title')">{{ title }}</view>
+      <view v-if="showSubtitle" :class="ns.be('header', 'subtitle')">
         {{ months[monthCurrent]?.date.format('YYYY年M月') || '' }}
       </view>
-      <view :class="computedClass('calendar__weekdays')">
-        <view v-for="item in weekdays" :key="item" :class="computedClass('calendar__weekday')">
+      <view :class="ns.e('weekdays')">
+        <view v-for="item in weekdays" :key="item" :class="ns.e('weekday')">
           {{ item }}
         </view>
       </view>
     </view>
-    <scroll-view
-      scroll-y
-      :scroll-top="scrollTop"
-      :class="computedClass('calendar-body')"
-      @scroll="onScroll"
-    >
-      <view
-        v-for="(monthItem, monthIndex) in months"
-        :key="monthIndex"
-        :class="computedClass('calendar__month')"
-      >
-        <view v-if="monthIndex !== 0" :class="computedClass('calendar__month-title')">
+    <scroll-view scroll-y :scroll-top="scrollTop" :class="ns.b('body')" @scroll="onThrottleScroll">
+      <view v-for="(monthItem, monthIndex) in months" :key="monthIndex" :class="ns.e('month')">
+        <view v-if="monthIndex !== 0" :class="ns.e('month-title')">
           {{ monthItem.date.format('YYYY年M月') }}
         </view>
-        <view :class="computedClass('calendar__days')">
-          <view v-if="showMark" :class="computedClass('calendar__month-mark')">
-            {{ monthItem.date.month() + 1 }}
-          </view>
-          <view
-            v-for="(dayItem, dayIndex) in getDays(monthItem.date)"
-            :key="dayItem.text"
-            :class="computedClass('calendar__day', `calendar__day--${dayItem.type}`)"
-            :style="{ gridColumnStart: dayIndex === 0 ? monthItem.dayOfWeekStart + 1 : 'auto' }"
-            @tap="onSelect(dayItem)"
-          >
-            <view :class="computedClass('calendar__top-info')">{{ dayItem.topInfo }}</view>
-            <view :class="computedClass('calendar__day__select')">
-              {{ dayItem.text }}
+        <view
+          :class="ns.e('days')"
+          :style="{
+            height: isVisualRange(monthIndex)
+              ? 'auto'
+              : getUnitValue(
+                  Math.ceil((monthItem.dayOfWeekStart + monthItem.dayLength) / 7) * 64,
+                  'px',
+                ),
+          }"
+        >
+          <template v-if="isVisualRange(monthIndex)">
+            <view v-if="showMark" :class="ns.e('month-mark')">
+              {{ monthItem.date.month() + 1 }}
             </view>
-            <view :class="computedClass('calendar__bottom-info')">{{ dayItem.bottomInfo }}</view>
-          </view>
+            <view
+              v-for="(dayItem, dayIndex) in getDays(monthItem.date)"
+              :key="dayItem.text"
+              :class="[ns.e('day'), ns.em('day', dayItem.type)]"
+              :style="{ gridColumnStart: dayIndex === 0 ? monthItem.dayOfWeekStart + 1 : 'auto' }"
+              @tap="onSelect(dayItem)"
+            >
+              <view :class="ns.e('top-info')">{{ dayItem.topInfo }}</view>
+              <view :class="ns.e('day__select')">
+                {{ dayItem.text }}
+              </view>
+              <view :class="ns.e('bottom-info')">{{ dayItem.bottomInfo }}</view>
+            </view>
+          </template>
         </view>
       </view>
       <SafeBottom v-if="!showConfirm && safeAreaInsetBottom" />
     </scroll-view>
-    <view v-if="showConfirm" :class="computedClass('calendar-footer')" class="px-26 py-15">
+    <view v-if="showConfirm" :class="ns.b('footer')" class="px-26 py-15">
       <ButtonComponent type="primary" block :disabled="!confirmEnabled" @click="onConfirm">
         {{ confirmEnabled ? confirmText : confirmDisabledText }}
       </ButtonComponent>
@@ -61,9 +64,10 @@ import { computed, getCurrentInstance, nextTick, ref, toRefs } from 'vue'
 import useCalendar, { DayItem, FirstDayOfWeekType } from '../../core/useCalendar'
 import { useRect } from '../../hooks'
 import { EventDetail } from '../../types'
-import { computedClass } from '../../utils/style'
 import ButtonComponent from '../button/button.vue'
 import SafeBottom from '../safe-bottom/safe-bottom.vue'
+import { getUnitValue, throttle } from '../../utils'
+import useNamespace from '../../core/useNamespace'
 
 export interface CalendarWrapperProps {
   /** 选择类型: single表示选择单个日期，multiple表示选择多个日期，range表示选择日期区间 */
@@ -103,6 +107,8 @@ export interface CalendarWrapperProps {
   maxRange?: number
 }
 
+const ns = useNamespace('calendar')
+
 const props = withDefaults(defineProps<CalendarWrapperProps>(), {
   type: 'single',
   title: '日期选择',
@@ -155,6 +161,14 @@ const confirmEnabled = computed<boolean>(() => {
   return selectedItems.value.length > 0
 })
 
+/**
+ * 月份是否在显示范围
+ */
+const isVisualRange = (monthIndex: number) => {
+  const diff = monthIndex - monthCurrent.value
+  return diff >= -1 && diff <= 1
+}
+
 const onScroll = (e: EventDetail<{ scrollTop: number }>) => {
   let current = 0
   const scrollTop = e.detail.scrollTop
@@ -165,10 +179,11 @@ const onScroll = (e: EventDetail<{ scrollTop: number }>) => {
   }
   monthCurrent.value = current
 }
+const onThrottleScroll = throttle(onScroll, 100, { trailing: true })
 
 const updateMonthTop = () => {
   if (!instance) return
-  useRect(instance, '.pa-calendar__month', true).then((nodes) => {
+  useRect(instance, `.${ns.e('month')}`, true).then((nodes) => {
     const tops = (nodes ?? []).reduce((result, node) => {
       result.push((result[result.length - 1] || 0) + node.height)
       return result

package/components/calendar/calendar.vue

@@ -1,7 +1,7 @@
 <template>
   <Popup
     v-if="poppable"
-    :custom-class="computedClass('calendar')"
+    :custom-class="ns.b()"
     :show="show"
     :height="getUnitValue(height)"
     :closeable="showTitle || showSubtitle"
@@ -20,7 +20,7 @@
   </Popup>
   <view
     v-else
-    :class="computedClass('calendar')"
+    :class="ns.b()"
     :style="{ height: getUnitValue(height), borderRadius: getUnitValue($attrs.round as string ?? '0') }"
   >
     <CalendarWrapper
@@ -36,10 +36,10 @@
 
 <script lang="ts" setup>
 import { Dayjs } from 'dayjs'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch, nextTick } from 'vue'
 import { DayItem } from '../../core/useCalendar'
+import useNamespace from '../../core/useNamespace'
 import { getUnitValue } from '../../utils'
-import { computedClass } from '../../utils/style'
 import CalendarWrapper, { CalendarWrapperProps } from '../calendar/calendar-wrapper.vue'
 import Popup, { PopupProps } from '../popup/popup.vue'
 
@@ -62,6 +62,8 @@ export interface CalendarProps
   showSubtitle?: boolean
 }
 
+const ns = useNamespace('calendar')
+
 const props = withDefaults(defineProps<CalendarProps>(), {
   poppable: true,
   show: false,
@@ -85,7 +87,9 @@ watch(
   () => props.show,
   (newVal, oldVal) => {
     if (newVal !== oldVal && newVal && props.poppable) {
-      wrapperRef.value?.updateMonthTop()
+      nextTick(() => {
+        wrapperRef.value?.updateMonthTop()
+      })
     }
   },
 )