oxy-uni-ui 1.0.1

package/components/oxy-message-box/types.ts

@@ -0,0 +1,132 @@
+import { baseProps, makeStringProp, makeBooleanProp } from '../common/props'
+import type { ButtonProps } from '../oxy-button/types'
+import { type InputSize, type InputType } from '../oxy-input/types'
+
+export type MessageType = 'alert' | 'confirm' | 'prompt'
+
+export type MessageBeforeConfirmOption = {
+  resolve: (isPass: boolean) => void
+}
+
+export type MessageOptions = {
+  /**
+   * 标题
+   */
+  title?: string
+  /**
+   * 是否展示取消按钮
+   */
+  showCancelButton?: boolean
+  /**
+   * 是否支持点击蒙层进行关闭，点击蒙层回调传入的action为'modal'
+   */
+  closeOnClickModal?: boolean
+  /**
+   * 确定按钮文案
+   */
+  confirmButtonText?: string
+  /**
+   * 取消按钮文案
+   */
+  cancelButtonText?: string
+  /**
+   * 消息文案
+   */
+  msg?: string
+  /**
+   * 弹框类型
+   */
+  type?: MessageType
+  /**
+   * 当type为prompt时，输入框类型
+   */
+  inputType?: InputType
+  /**
+   * 设置输入框大小，可选值：large
+   */
+  inputSize?: InputSize
+  /**
+   * 当type为prompt时，输入框初始值
+   */
+  inputValue?: string | number
+  /**
+   * 当type为prompt时，输入框placeholder
+   */
+  inputPlaceholder?: string
+  /**
+   * 当type为prompt时，输入框正则校验，点击确定按钮时进行校验
+   */
+  inputPattern?: RegExp
+  /**
+   * 当type为prompt时，输入框校验函数，点击确定按钮时进行校验
+   */
+  inputValidate?: InputValidate
+  /**
+   * 当type为prompt时，输入框检验不通过时的错误提示文案
+   */
+  inputError?: string
+  /**
+   * 是否展示错误信息
+   */
+  showErr?: boolean
+  /**
+   * 弹窗层级
+   */
+  zIndex?: number
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   */
+  lazyRender?: boolean
+  /**
+   * 确认前钩子
+   */
+  beforeConfirm?: (options: MessageBeforeConfirmOption) => void
+  /**
+   * 取消按钮Props
+   */
+  cancelButtonProps?: Partial<ButtonProps>
+  /**
+   * 确认按钮Props
+   */
+  confirmButtonProps?: Partial<ButtonProps>
+}
+
+export type MessageOptionsWithCallBack = MessageOptions & {
+  show?: boolean
+  success?: (res: MessageResult) => void
+  fail?: (res: MessageResult) => void
+}
+
+export type ActionType = 'confirm' | 'cancel' | 'modal'
+
+export type InputValidate = (inputValue: string | number) => boolean
+
+export interface MessageResult {
+  action: ActionType
+  value?: string | number
+}
+
+export interface Message {
+  // 打开Message
+  show(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 打开Alert 弹框
+  alert(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 打开Confirm 弹框
+  confirm(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 打开Prompt 弹框
+  prompt(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 关闭Message
+  close(): void
+}
+
+export const messageBoxProps = {
+  ...baseProps,
+  /**
+   * 指定唯一标识
+   */
+  selector: makeStringProp(''),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false)
+}

package/components/oxy-navbar/index.scss

@@ -0,0 +1,93 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(navbar) {
+    background-color: $-dark-background;
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(text) {
+      color: $-dark-color;
+    }
+
+    :deep(.oxy-navbar__arrow) {
+      color: $-dark-color;
+    }
+  }
+}
+
+
+@include b(navbar) {
+  position: relative;
+  text-align: center;
+  user-select: none;
+  height: $-navbar-height;
+  line-height: $-navbar-height;
+  background-color: $-navbar-background;
+  box-sizing: content-box;
+
+  @include e(content) {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  @include e(title) {
+    max-width: 60%;
+    height: 100%;
+    margin: 0 auto;
+    color: $-navbar-color;
+    font-weight: $-navbar-title-font-weight;
+    font-size: $-navbar-title-font-size;
+    @include lineEllipsis();
+  }
+
+  @include e(text) {
+    display: inline-block;
+    vertical-align: middle;
+    color: $-navbar-desc-font-color;
+  }
+
+  @include e(left, right, capsule) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    font-size: $-navbar-desc-font-size;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+
+    @include when(disabled) {
+      opacity: $-navbar-disabled-opacity;
+    }
+  }
+
+  @include e(left, capsule) {
+    left: 0;
+  }
+
+  @include e(right) {
+    right: 0;
+  }
+
+  @include edeep(arrow) {
+    font-size: $-navbar-arrow-size;
+    color: $-navbar-color;
+  }
+
+
+  @include when(border) {
+    @include halfPixelBorder('bottom');
+  }
+
+  @include when(fixed) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 500;
+  }
+}

package/components/oxy-navbar/oxy-navbar.vue

@@ -0,0 +1,111 @@
+<template>
+  <view :style="{ height: addUnit(height) }">
+    <view :class="`oxy-navbar ${customClass} ${fixed ? 'is-fixed' : ''} ${bordered ? 'is-border' : ''}`" :style="rootStyle">
+      <view class="oxy-navbar__content">
+        <view class="oxy-navbar__capsule" v-if="$slots.capsule">
+          <slot name="capsule" />
+        </view>
+
+        <view :class="`oxy-navbar__left ${leftDisabled ? 'is-disabled' : ''}`" @click="handleClickLeft" v-else-if="!$slots.left">
+          <oxy-icon v-if="leftArrow" name="arrow-left" custom-class="oxy-navbar__arrow" />
+          <view v-if="leftText" class="oxy-navbar__text">{{ leftText }}</view>
+        </view>
+
+        <view v-else :class="`oxy-navbar__left ${leftDisabled ? 'is-disabled' : ''}`" @click="handleClickLeft">
+          <slot name="left" />
+        </view>
+
+        <view class="oxy-navbar__title">
+          <slot name="title" />
+          <block v-if="!$slots.title && title">{{ title }}</block>
+        </view>
+        <view :class="`oxy-navbar__right ${rightDisabled ? 'is-disabled' : ''}`" @click="handleClickRight" v-if="$slots.right || rightText">
+          <slot name="right" />
+
+          <view v-if="!$slots.right && rightText" class="oxy-navbar__text" hover-class="oxy-navbar__text--hover" :hover-stay-time="70">
+            {{ rightText }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-navbar',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { type CSSProperties, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+import { getRect, addUnit, isDef, objToStyle } from '../common/util'
+import { navbarProps } from './types'
+
+const props = defineProps(navbarProps)
+const emit = defineEmits(['click-left', 'click-right'])
+
+const height = ref<number | ''>('') // 占位高度
+
+const { statusBarHeight } = uni.getSystemInfoSync()
+
+watch(
+  [() => props.fixed, () => props.placeholder],
+  () => {
+    setPlaceholderHeight()
+  },
+  { deep: true, immediate: false }
+)
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.fixed && isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  if (props.safeAreaInsetTop) {
+    style['padding-top'] = addUnit(statusBarHeight || 0)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+onMounted(() => {
+  if (props.fixed && props.placeholder) {
+    nextTick(() => {
+      setPlaceholderHeight()
+    })
+  }
+})
+
+function handleClickLeft() {
+  if (!props.leftDisabled) {
+    emit('click-left')
+  }
+}
+
+function handleClickRight() {
+  if (!props.rightDisabled) {
+    emit('click-right')
+  }
+}
+
+const { proxy } = getCurrentInstance() as any
+
+function setPlaceholderHeight() {
+  if (!props.fixed || !props.placeholder) {
+    return
+  }
+
+  getRect('.oxy-navbar', false, proxy).then((res) => {
+    height.value = res.height as number
+  })
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/oxy-navbar/types.ts

@@ -0,0 +1,52 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
+
+export const navbarProps = {
+  ...baseProps,
+  /**
+   * 标题文字
+   */
+  title: String,
+  /**
+   * 左侧文案
+   */
+  leftText: String,
+  /**
+   * 右侧文案
+   */
+  rightText: String,
+  /**
+   * 是否显示左侧箭头
+   */
+  leftArrow: makeBooleanProp(false),
+  /**
+   * 是否显示下边框
+   */
+  bordered: makeBooleanProp(true),
+  /**
+   * 是否固定到顶部
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 固定在顶部时，是否在标签位置生成一个等高的占位元素
+   */
+  placeholder: makeBooleanProp(false),
+  /**
+   * 导航栏 z-index
+   */
+  zIndex: makeNumberProp(500),
+  /**
+   * 是否开启顶部安全区适配
+   */
+  safeAreaInsetTop: makeBooleanProp(false),
+  /**
+   * 是否禁用左侧按钮，禁用时透明度降低，且无法点击
+   */
+  leftDisabled: makeBooleanProp(false),
+  /**
+   * 是否禁用右侧按钮，禁用时透明度降低，且无法点击
+   */
+  rightDisabled: makeBooleanProp(false)
+}
+
+export type NavbarProps = ExtractPropTypes<typeof navbarProps>

package/components/oxy-navbar-capsule/index.scss

@@ -0,0 +1,66 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(navbar-capsule) {
+    &::before {
+      border: 2rpx solid $-dark-border-color;
+    }
+
+    &::after {
+      background: $-dark-border-color;
+    }
+
+    :deep(.oxy-navbar-capsule__icon) {
+      color: $-dark-color;
+    }
+  }
+}
+
+
+@include b(navbar-capsule) {
+  position: relative;
+  box-sizing: border-box;
+  width: $-navbar-capsule-width;
+  height: $-navbar-capsule-height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    transform: scale(0.5);
+    transform-origin: 0 0;
+    box-sizing: border-box;
+    border-radius: calc($-navbar-capsule-border-radius * 2);
+    border: 2rpx solid $-navbar-capsule-border-color;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 36rpx;
+    background: $-navbar-capsule-border-color;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  @include edeep(icon) {
+    flex: 1;
+    position: relative;
+    color: $-navbar-desc-font-color;
+    font-size: $-navbar-capsule-icon-size;
+  }
+}

package/components/oxy-navbar-capsule/oxy-navbar-capsule.vue

@@ -0,0 +1,35 @@
+<template>
+  <view :class="`oxy-navbar-capsule ${customClass}`" :style="customStyle">
+    <oxy-icon @click="handleBack" name="chevron-left" custom-class="oxy-navbar-capsule__icon" />
+    <oxy-icon @click="handleBackHome" name="home" custom-class="oxy-navbar-capsule__icon" />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-navbar-capsule',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { navbarCapsuleProps } from './types'
+
+const emit = defineEmits(['back', 'back-home'])
+defineProps(navbarCapsuleProps)
+
+function handleBack() {
+  emit('back')
+}
+function handleBackHome() {
+  emit('back-home')
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/oxy-navbar-capsule/types.ts

@@ -0,0 +1,8 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps } from '../common/props'
+
+export const navbarCapsuleProps = {
+  ...baseProps
+}
+
+export type NavbarCapsuleProps = ExtractPropTypes<typeof navbarCapsuleProps>

package/components/oxy-notice-bar/index.scss

@@ -0,0 +1,68 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(notice-bar) {
+  display: flex;
+  padding: $-notice-bar-padding;
+  align-items: center;
+  font-size: $-notice-bar-fs;
+  border-radius: $-notice-bar-border-radius;
+  position: relative;
+  box-sizing: border-box;
+  @include when(warning) {
+    background: $-notice-bar-warning-bg;
+    color: $-notice-bar-warning-color;
+  }
+  @include when(info) {
+    background: $-notice-bar-info-bg;
+    color: $-notice-bar-info-color;
+  }
+  @include when(danger) {
+    background: $-notice-bar-danger-bg;
+    color: $-notice-bar-danger-color;
+  }
+  @include edeep(prefix) {
+    padding-right: 4px;
+    font-size: $-notice-bar-prefix-size;
+  }
+
+  @include edeep(suffix) {
+    text-align: center;
+    font-size: $-notice-bar-close-size;
+    display: inline-block;
+    background-color: $-notice-bar-close-bg;
+    color: $-notice-bar-close-color;
+    padding: 0;
+    border-radius: 0px 8px 0px 4px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  @include e(wrap) {
+    position: relative;
+    flex: 1;
+    height: $-notice-bar-line-height;
+    overflow: hidden;
+    line-height: $-notice-bar-line-height;
+  }
+  @include e(content) {
+    position: absolute;
+    white-space: nowrap;
+  }
+  @include m(ellipse) {
+    .oxy-notice-bar__content {
+      position: static;
+      @include lineEllipsis;
+    }
+  }
+  @include m(wrap) {
+
+    .oxy-notice-bar__wrap {
+      height: auto;
+    }
+    .oxy-notice-bar__content {
+      position: static;
+      white-space: normal;
+    }
+  }
+}