oxy-uni-ui 1.0.1

package/components/oxy-select-picker/types.ts

@@ -0,0 +1,123 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import type { FormItemRule } from '../oxy-form/types'
+
+export type SelectPickerType = 'checkbox' | 'radio'
+
+export const selectPickerProps = {
+  ...baseProps,
+  /** 选择器左侧文案 */
+  label: String,
+  /** 设置左侧标题宽度 */
+  labelWidth: makeStringProp('33%'),
+  /** 禁用 */
+  disabled: makeBooleanProp(false),
+  /** 只读 */
+  readonly: Boolean,
+  /** 选择器占位符 */
+  placeholder: String,
+  /** 弹出层标题 */
+  title: String,
+  /** 选择器的值靠右展示 */
+  alignRight: makeBooleanProp(false),
+  /** 是否为错误状态，错误状态时右侧内容为红色 */
+  error: makeBooleanProp(false),
+  /** 必填样式 */
+  required: makeBooleanProp(false),
+  /**
+   * 使用 label 插槽时设置该选项
+   * @deprecated 可以直接使用标签插槽，无需配置此选项
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 使用默认插槽时设置该选项
+   * @deprecated 可以直接使用默认插槽，无需配置此选项
+   */
+  useDefaultSlot: makeBooleanProp(false),
+  /** 设置选择器大小 */
+  size: String,
+  /**
+   * 是否垂直居中
+   */
+  center: makeBooleanProp(false),
+  /** 选中的颜色（单/复选框） */
+  checkedColor: String,
+  /** 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） */
+  min: makeNumberProp(0),
+  /** 最大选中的数量，0 为无限数量，默认为 0（仅在复选框类型下生效，`type`类型为`checkbox`） */
+  max: makeNumberProp(0),
+  /** 设置 picker 内部的选项组尺寸大小 （单/复选框） */
+  selectSize: String,
+  /** 加载中 */
+  loading: makeBooleanProp(false),
+  /** 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 */
+  loadingColor: makeStringProp('#4D80F0'),
+  /** 点击遮罩是否关闭 */
+  closeOnClickModal: makeBooleanProp(true),
+  /** 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string */
+  modelValue: makeRequiredProp([String, Number, Boolean, Array] as PropType<string | number | boolean | (string | number | boolean)[]>),
+  /** 选择器数据，一维数组 */
+  columns: makeArrayProp<Record<string, any>>(),
+  /** 单复选选择器类型 */
+  type: makeStringProp<SelectPickerType>('checkbox'),
+  /** 选项对象中，value 对应的 key */
+  valueKey: makeStringProp('value'),
+  /** 选项对象中，展示的文本对应的 key */
+  labelKey: makeStringProp('label'),
+  /** 确认按钮文案 */
+  confirmButtonText: String,
+  /** 自定义展示文案的格式化函数，返回一个字符串 */
+  displayFormat: Function as PropType<SelectPickerDisplayFormat>,
+  /** 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数 */
+  beforeConfirm: Function as PropType<SelectPickerBeforeConfirm>,
+  /** 弹窗层级 */
+  zIndex: makeNumberProp(15),
+  /** 弹出面板是否设置底部安全距离（iphone X 类型的机型） */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /** 可搜索（目前只支持本地搜索） */
+  filterable: makeBooleanProp(false),
+  /** 搜索框占位符 */
+  filterPlaceholder: String,
+  /** 是否超出隐藏 */
+  ellipsis: makeBooleanProp(false),
+  /** 重新打开是否滚动到选中项 */
+  scrollIntoView: makeBooleanProp(true),
+  /** 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 */
+  prop: String,
+  /** 表单验证规则，结合`oxy-form`组件使用 */
+  rules: makeArrayProp<FormItemRule>(),
+  /** 自定义内容样式类 */
+  customContentClass: makeStringProp(''),
+  /** 自定义标签样式类 */
+  customLabelClass: makeStringProp(''),
+  /** 自定义值样式类 */
+  customValueClass: makeStringProp(''),
+  /** 是否显示确认按钮（radio类型生效），默认值为：true */
+  showConfirm: makeBooleanProp(true),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 必填标记位置，可选值：before、after
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before')
+}
+export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
+
+export type SelectPickerDisplayFormat = (items: string | number | boolean | (string | number | boolean)[], columns: Record<string, any>[]) => string
+
+export type SelectPickerBeforeConfirm = (value: string | number | boolean | (string | number | boolean)[], resolve: (isPass: boolean) => void) => void
+
+export type SelectPickerExpose = {
+  // 打开picker弹框
+  open: () => void
+  // 关闭picker弹框
+  close: () => void
+}
+
+export type SelectPickerInstance = ComponentPublicInstance<SelectPickerExpose, SelectPickerProps>

package/components/oxy-sidebar/index.scss

@@ -0,0 +1,25 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(sidebar) {
+    background: $-dark-background;
+    @include e(padding){
+      background: $-dark-background2;
+    }
+  }
+}
+
+@include b(sidebar) {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  width: $-sidebar-width;
+  height: $-sidebar-height;
+  background: $-color-white;
+  
+  @include e(padding){
+    flex: 1 1 auto;
+    background: $-sidebar-bg;
+  }
+}

package/components/oxy-sidebar/oxy-sidebar.vue

@@ -0,0 +1,63 @@
+<template>
+  <view :class="`oxy-sidebar ${customClass}`" :style="customStyle">
+    <slot></slot>
+    <view class="oxy-sidebar__padding"></view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-sidebar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { isFunction } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+import { SIDEBAR_KEY, sidebarProps } from './types'
+
+const props = defineProps(sidebarProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { linkChildren } = useChildren(SIDEBAR_KEY)
+linkChildren({ props, setChange })
+
+/**
+ * 子项状态变更
+ * @param value 目标值
+ * @param label 目标值标题
+ */
+function setChange(value: number | string, label: string) {
+  if (isFunction(props.beforeChange)) {
+    props.beforeChange({
+      value: value,
+      resolve: (pass: boolean) => {
+        if (pass) {
+          updateValue(value, label)
+        }
+      }
+    })
+  } else {
+    updateValue(value, label)
+  }
+}
+
+/**
+ * 更新选中状态
+ * @param value 目标值
+ * @param label 目标值标题
+ */
+function updateValue(value: number | string, label: string) {
+  emit('update:modelValue', value)
+  emit('change', { value, label })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-sidebar/types.ts

@@ -0,0 +1,38 @@
+import { type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import { baseProps, makeNumericProp } from '../common/props'
+
+export type SidebarProvide = {
+  props: Partial<SidebarProps>
+  setChange: (value: number | string, label: string) => void
+}
+
+export const SIDEBAR_KEY: InjectionKey<SidebarProvide> = Symbol('oxy-sidebar')
+
+/**
+ * Sidebar切换前的选项接口
+ */
+export type SidebarBeforeChangeOption = {
+  // 目标值
+  value: number | string
+  resolve: (pass: boolean) => void
+}
+
+/**
+ * Sidebar切换前的钩子函数类型
+ * @param option 切换选项
+ */
+export type SidebarBeforeChange = (option: SidebarBeforeChangeOption) => void
+
+export const sidebarProps = {
+  ...baseProps,
+  /**
+   * 当前导航项的索引
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * 在改变前执行的函数
+   */
+  beforeChange: Function as PropType<SidebarBeforeChange>
+}
+
+export type SidebarProps = ExtractPropTypes<typeof sidebarProps>

package/components/oxy-sidebar-item/index.scss

@@ -0,0 +1,97 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(sidebar-item) {
+    background: $-dark-background2;
+    color: $-dark-color;
+
+    &:active {
+      background-color: $-dark-background4;
+    }
+
+    @include m(active) {
+      background: $-dark-background;
+      color: $-sidebar-active-color;
+    }
+
+    @include m(disabled) {
+      color: $-dark-color-gray;
+  
+      &:active {
+        background-color: $-dark-background2;
+      }
+    }
+  }
+
+}
+
+@include b(sidebar-item) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 32rpx;
+  font-size: $-sidebar-font-size;
+  color: $-sidebar-color;
+  background: $-sidebar-bg;
+  min-height: $-sidebar-item-height;
+  box-sizing: border-box;
+  white-space: wrap;
+  line-height: $-sidebar-item-line-height;
+
+  &:active {
+    background-color: $-sidebar-hover-bg;
+  }
+
+  @include m(active) {
+    font-weight: 600;
+    background: $-sidebar-active-bg;
+    color: $-sidebar-active-color;
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: $-sidebar-active-border-width;
+      height: $-sidebar-active-border-height;
+      background: $-sidebar-active-color;
+      transform: translateY(-50%);
+      content: '';
+      border-radius: $-sidebar-active-border-width;
+    }
+
+    &:active {
+      background-color: transparent;
+    }
+  }
+
+  @include m(prefix) {
+    border-bottom-right-radius: $-sidebar-border-radius;
+  }
+
+  @include m(suffix) {
+    border-top-right-radius: $-sidebar-border-radius;
+  }
+
+
+  @include m(disabled) {
+    color: $-sidebar-disabled-color;
+    cursor: not-allowed;
+
+    &:active {
+      background-color: $-sidebar-bg;
+    }
+  }
+
+  @include edeep(badge) {
+    z-index: 2;
+    word-break: break-all;
+  }
+
+  @include edeep(icon) {
+    font-size: $-sidebar-icon-size;
+    margin-right: 2px;
+  }
+
+}

package/components/oxy-sidebar-item/oxy-sidebar-item.vue

@@ -0,0 +1,116 @@
+<template>
+  <view
+    @click="handleClick"
+    :class="`oxy-sidebar-item ${active ? 'oxy-sidebar-item--active' : ''} ${prefix ? 'oxy-sidebar-item--prefix' : ''}  ${
+      suffix ? 'oxy-sidebar-item--suffix' : ''
+    } ${disabled ? 'oxy-sidebar-item--disabled' : ''} ${customClass}`"
+    :style="customStyle"
+  >
+    <slot name="icon"></slot>
+    <template v-if="!$slots.icon && icon">
+      <oxy-icon custom-class="oxy-sidebar-item__icon" :name="icon"></oxy-icon>
+    </template>
+    <oxy-badge v-bind="customBadgeProps" custom-class="oxy-sidebar-item__badge">
+      {{ label }}
+    </oxy-badge>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-sidebar-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyBadge from '../oxy-badge/oxy-badge.vue'
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import { SIDEBAR_KEY } from '../oxy-sidebar/types'
+import { sidebarItemProps } from './types'
+import type { BadgeProps } from '../oxy-badge/types'
+import { deepAssign, isDef, isUndefined, omitBy } from '../common/util'
+
+const props = defineProps(sidebarItemProps)
+
+const { parent: sidebar } = useParent(SIDEBAR_KEY)
+
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        modelValue: props.badge
+      },
+      isUndefined
+    )
+  )
+  if (!isDef(badgeProps.max)) {
+    badgeProps.max = 99
+  }
+  return badgeProps
+})
+
+const active = computed(() => {
+  let active: boolean = false
+  if (sidebar && sidebar.props.modelValue === props.value) {
+    active = true
+  }
+  return active
+})
+
+const prefix = computed(() => {
+  let prefix: boolean = false
+  if (sidebar) {
+    let activeIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === sidebar.props.modelValue
+    })
+
+    let currentIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === props.value
+    })
+
+    if (currentIndex === activeIndex - 1) {
+      prefix = true
+    }
+  }
+  return prefix
+})
+
+const suffix = computed(() => {
+  let suffix: boolean = false
+  if (sidebar) {
+    let activeIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === sidebar.props.modelValue
+    })
+
+    let currentIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === props.value
+    })
+
+    if (currentIndex === activeIndex + 1) {
+      suffix = true
+    }
+  }
+  return suffix
+})
+
+function handleClick() {
+  if (props.disabled) {
+    return
+  }
+  sidebar && sidebar.setChange(props.value, props.label)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-sidebar-item/types.ts

@@ -0,0 +1,31 @@
+import type { ExtractPropTypes, Prop, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp } from '../common/props'
+import type { BadgeProps } from '../oxy-badge/types'
+
+export const sidebarItemProps = {
+  ...baseProps,
+  /** 当前选项标题 */
+  label: makeRequiredProp(String),
+  /** 当前选项的值，唯一标识 */
+  value: makeRequiredProp([Number, String]),
+  /** 徽标显示值 */
+  badge: {
+    type: [String, Number, null] as PropType<string | number | null>,
+    default: null
+  },
+  /** 徽标属性，透传给 Badge 组件 */
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
+  /** 图标 */
+  icon: String,
+  /** 是否点状徽标 */
+  isDot: {
+    type: Boolean,
+    default: undefined
+  },
+  /** 徽标最大值 */
+  max: Number,
+  /** 是否禁用 */
+  disabled: makeBooleanProp(false)
+}
+
+export type SidebarItemProps = ExtractPropTypes<typeof sidebarItemProps>

package/components/oxy-signature/index.scss

@@ -0,0 +1,31 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(signature) {
+  @include e(content) {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    overflow: hidden;
+    background: $-signature-bg;
+    border-radius: $-signature-radius;
+    border: $-signature-border;
+  }
+
+  @include e(content-canvas) {
+    width: 100%;
+  }
+
+
+  @include e(footer) {
+    margin-top: $-signature-footer-margin-top;
+    justify-content: flex-end;
+    display: flex;
+
+    :deep(){
+      .oxy-button{
+        margin-left: $-signature-button-margin-left;
+      }
+    }
+  }
+}