oxy-uni-ui 1.0.1

package/components/oxy-collapse/index.scss

@@ -0,0 +1,55 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.oxy-theme-dark {
+  @include b(collapse) {
+    background: $-dark-background2;
+
+    @include e(content) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(collapse) {
+  background: $-color-white;
+
+  @include when(viewmore) {
+    padding: $-collapse-side-padding;
+  }
+  @include e(content) {
+    font-size: $-collapse-body-fs;
+    color: $-collapse-body-color;
+
+    @include when(retract) {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: $-collapse-retract-fs;
+    }
+  }
+  @include e(more) {
+    display: inline-block;
+    font-size: $-collapse-retract-fs;
+    margin-top: 8px;
+    color: $-collapse-more-color;
+    user-select: none;
+  }
+  @include e(more-txt) {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 4px;
+  }
+  @include e(arrow) {
+    display: inline-block;
+    vertical-align: middle;
+    transition: transform 0.1s;
+    font-size: $-collapse-arrow-size;
+    height: $-collapse-arrow-size;
+    line-height: $-collapse-arrow-size;
+
+    @include when(retract) {
+      transform: rotate(-180deg);
+    }
+  }
+}

package/components/oxy-collapse/oxy-collapse.vue

@@ -0,0 +1,151 @@
+<template>
+  <view :class="`oxy-collapse ${viewmore ? 'is-viewmore' : ''} ${customClass}`" :style="customStyle">
+    <!-- 普通或手风琴 -->
+    <block v-if="!viewmore">
+      <slot></slot>
+    </block>
+    <!-- 查看更多模式 -->
+    <view v-else>
+      <view
+        :class="`oxy-collapse__content ${!modelValue ? 'is-retract' : ''} `"
+        :style="`-webkit-line-clamp: ${contentLineNum}; -webkit-box-orient: vertical`"
+      >
+        <slot></slot>
+      </view>
+      <view class="oxy-collapse__more" @click="handleMore">
+        <!-- 自定义展开按钮 -->
+        <view v-if="useMoreSlot" :class="customMoreSlotClass">
+          <slot name="more"></slot>
+        </view>
+        <!-- 显示展开或折叠按钮 -->
+        <block v-else>
+          <span class="oxy-collapse__more-txt">{{ !modelValue ? translate('expand') : translate('retract') }}</span>
+          <view :class="`oxy-collapse__arrow ${modelValue ? 'is-retract' : ''}`">
+            <oxy-icon name="arrow-down"></oxy-icon>
+          </view>
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-collapse',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { onBeforeMount, ref, watch } from 'vue'
+import { COLLAPSE_KEY, collapseProps, type CollapseExpose, type CollapseToggleAllOptions } from './types'
+import { useChildren } from '../composables/useChildren'
+import { isArray, isBoolean, isDef } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+
+const props = defineProps(collapseProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { translate } = useTranslate('collapse')
+const contentLineNum = ref<number>(0) // 查看更多的折叠面板，收起时的显示行数
+
+const { linkChildren, children } = useChildren(COLLAPSE_KEY)
+
+linkChildren({ props, toggle })
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    const { viewmore, accordion } = props
+    // 手风琴状态下 value 类型只能为 string
+    if (accordion && typeof newVal !== 'string') {
+      console.error('accordion value must be string')
+    } else if (!accordion && !viewmore && !isArray(newVal)) {
+      console.error('value must be Array')
+    }
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.lineNum,
+  (newVal) => {
+    if (newVal <= 0) {
+      console.error('lineNum must greater than 0')
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+onBeforeMount(() => {
+  const { lineNum, viewmore, modelValue } = props
+  contentLineNum.value = viewmore && !modelValue ? lineNum : 0
+})
+
+function updateChange(activeNames: string | string[] | boolean) {
+  emit('update:modelValue', activeNames)
+  emit('change', {
+    value: activeNames
+  })
+}
+
+function toggle(name: string, expanded: boolean) {
+  const { accordion, modelValue } = props
+  if (accordion) {
+    updateChange(name === modelValue ? '' : name)
+  } else if (expanded) {
+    updateChange((modelValue as string[]).concat(name))
+  } else {
+    updateChange((modelValue as string[]).filter((activeName) => activeName !== name))
+  }
+}
+
+/**
+ * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
+ * @param options 面板状态
+ */
+const toggleAll = (options: CollapseToggleAllOptions = {}) => {
+  if (props.accordion) {
+    return
+  }
+  if (isBoolean(options)) {
+    options = { expanded: options }
+  }
+
+  const { expanded, skipDisabled } = options
+  const names: string[] = []
+  children.forEach((item, index) => {
+    if (item.disabled && skipDisabled) {
+      if (item.$.exposed!.getExpanded()) {
+        names.push(item.name || index)
+      }
+    } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
+      names.push(item.name || index)
+    }
+  })
+  updateChange(names)
+}
+
+/**
+ * 查看更多点击
+ */
+function handleMore() {
+  emit('update:modelValue', !props.modelValue)
+  emit('change', {
+    value: !props.modelValue
+  })
+}
+
+defineExpose<CollapseExpose>({
+  toggleAll
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-collapse/types.ts

@@ -0,0 +1,58 @@
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type CollapseToggleAllOptions =
+  | boolean
+  | {
+      expanded?: boolean
+      skipDisabled?: boolean
+    }
+
+export type CollapseProvide = {
+  props: Partial<CollapseProps>
+  toggle: (name: string, expanded: boolean) => void
+}
+
+export const COLLAPSE_KEY: InjectionKey<CollapseProvide> = Symbol('oxy-collapse')
+
+export const collapseProps = {
+  ...baseProps,
+  /**
+   * 查看更多模式下的插槽外部自定义样式
+   */
+  customMoreSlotClass: makeStringProp(''),
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: [String, Array, Boolean] as PropType<string | Array<string> | boolean>
+  },
+  /**
+   * 手风琴模式
+   */
+  accordion: makeBooleanProp(false),
+  /**
+   * 查看更多的折叠面板
+   */
+  viewmore: makeBooleanProp(false),
+  /**
+   * 查看更多的自定义插槽使用标志
+   */
+  useMoreSlot: makeBooleanProp(false),
+  /**
+   * 查看更多的折叠面板，收起时的显示行数
+   */
+  lineNum: makeNumberProp(2)
+}
+
+export type CollapseProps = ExtractPropTypes<typeof collapseProps>
+
+export type CollapseExpose = {
+  /**
+   * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
+   * @param options 面板状态
+   */
+  toggleAll: (options?: CollapseToggleAllOptions) => void
+}
+
+export type CollapseInstance = ComponentPublicInstance<CollapseProps, CollapseExpose>

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

@@ -0,0 +1,90 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(collapse-item) {
+    @include halfPixelBorder('top', 0, $-dark-border-color);
+
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(body) {
+      color: $-dark-color3;
+    }
+
+    @include when(disabled) {
+      .oxy-collapse-item__title {
+        color: $-dark-color-gray;
+      }
+      .oxy-collapse-item__arrow {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+
+@include b(collapse-item) {
+  position: relative;
+  @include halfPixelBorder('top');
+
+
+  @include e(header) {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $-collapse-header-padding;
+    overflow: hidden;
+    user-select: none;
+
+    @include when(expanded) {
+      @include halfPixelBorder('bottom');
+    }
+
+    @include when(custom) {
+      display: block;
+    }
+  }
+
+  @include e(title) {
+    color: $-collapse-title-color;
+    font-weight: $-fw-medium;
+    font-size: $-collapse-title-fs;
+  }
+
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-collapse-arrow-size;
+    color: $-collapse-arrow-color;
+    transition: transform 0.3s;
+
+    @include when(retract) {
+      transform: rotate(-180deg);
+    }
+  }
+
+  @include e(wrapper) {
+    position: relative;
+    overflow: hidden;
+    will-change: height;
+  }
+
+  @include e(body) {
+    color: $-collapse-body-color;
+    font-size: $-collapse-body-fs;
+    padding: $-collapse-body-padding;
+    line-height: 1.43;
+  }
+
+  @include when(disabled) {
+    .oxy-collapse-item__title {
+      color: $-collapse-disabled-color;
+    }
+    .oxy-collapse-item__arrow {
+      color: $-collapse-disabled-color;
+    }
+  }
+}

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

@@ -0,0 +1,171 @@
+<template>
+  <view :class="`oxy-collapse-item ${disabled ? 'is-disabled' : ''} is-border ${customClass}`" :style="customStyle">
+    <view
+      :class="`oxy-collapse-item__header ${expanded ? 'is-expanded' : ''} ${isFirst ? 'oxy-collapse-item__header-first' : ''} ${
+        $slots.title ? 'is-custom' : ''
+      }`"
+      @click="handleClick"
+    >
+      <slot name="title" :expanded="expanded" :disabled="disabled" :isFirst="isFirst">
+        <text class="oxy-collapse-item__title">{{ title }}</text>
+        <oxy-icon name="arrow-down" :custom-class="`oxy-collapse-item__arrow ${expanded ? 'is-retract' : ''}`" />
+      </slot>
+    </view>
+    <view class="oxy-collapse-item__wrapper" :style="contentStyle" @transitionend="handleTransitionEnd">
+      <view class="oxy-collapse-item__body" :class="customBodyClass" :style="customBodyStyle" :id="collapseId">
+        <slot />
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-collapse-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties } from 'vue'
+import { addUnit, getRect, isArray, isDef, isPromise, isString, objToStyle, pause, uuid } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { COLLAPSE_KEY } from '../oxy-collapse/types'
+import { collapseItemProps, type CollapseItemExpose } from './types'
+
+const collapseId = ref<string>(`collapseId${uuid()}`)
+
+const props = defineProps(collapseItemProps)
+
+const { parent: collapse, index } = useParent(COLLAPSE_KEY)
+
+const height = ref<string | number>('')
+const inited = ref<boolean>(false)
+const expanded = ref<boolean>(false)
+const { proxy } = getCurrentInstance() as any
+
+/**
+ * 容器样式，(动画)
+ */
+const isFirst = computed(() => {
+  return index.value === 0
+})
+
+/**
+ * 容器样式，(动画)
+ */
+const contentStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (inited.value) {
+    style.transition = 'height 0.3s ease-in-out'
+  }
+  if (!expanded.value) {
+    style.height = '0px'
+  } else if (height.value) {
+    style.height = addUnit(height.value)
+  }
+  return objToStyle(style)
+})
+
+/**
+ * 是否选中
+ */
+const isSelected = computed(() => {
+  const modelValue = collapse ? collapse?.props.modelValue || [] : []
+  const { name } = props
+  return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.indexOf(name as string) >= 0)
+})
+
+watch(
+  () => isSelected.value,
+  (newVal) => {
+    updateExpand(newVal)
+  }
+)
+
+onMounted(() => {
+  updateExpand(isSelected.value)
+})
+
+async function updateExpand(useBeforeExpand: boolean = true) {
+  try {
+    if (useBeforeExpand) {
+      await handleBeforeExpand()
+    }
+    initRect()
+  } catch (error) {
+    /* empty */
+  }
+}
+
+function initRect() {
+  getRect(`#${collapseId.value}`, false, proxy).then(async (rect) => {
+    const { height: rectHeight } = rect
+    height.value = isDef(rectHeight) ? Number(rectHeight) : ''
+    await pause()
+    if (isSelected.value) {
+      expanded.value = true
+    } else {
+      expanded.value = false
+    }
+    if (!inited.value) {
+      inited.value = true
+    }
+  })
+}
+
+function handleTransitionEnd() {
+  if (expanded.value) {
+    height.value = ''
+  }
+}
+
+// 点击子项
+async function handleClick() {
+  if (props.disabled) return
+  try {
+    await updateExpand()
+    const { name } = props
+    collapse && collapse.toggle(name, !expanded.value)
+  } catch (error) {
+    /* empty */
+  }
+}
+
+/**
+ * 展开前钩子
+ */
+function handleBeforeExpand() {
+  return new Promise<void>((resolve, reject) => {
+    const { name } = props
+    const nextexpanded = !expanded.value
+    if (nextexpanded && props.beforeExpend) {
+      const response = props.beforeExpend(name)
+      if (!response) {
+        reject()
+      }
+      if (isPromise(response)) {
+        response.then(() => resolve()).catch(reject)
+      } else {
+        resolve()
+      }
+    } else {
+      resolve()
+    }
+  })
+}
+
+function getExpanded() {
+  return expanded.value
+}
+
+defineExpose<CollapseItemExpose>({ getExpanded, updateExpand })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

@@ -0,0 +1,48 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type CollapseItemBeforeExpand = (name: string) => boolean | Promise<unknown>
+
+export const collapseItemProps = {
+  ...baseProps,
+  /**
+   * 自定义折叠栏内容容器样式类名
+   */
+  customBodyClass: makeStringProp(''),
+  /**
+   * 自定义折叠栏内容容器样式
+   */
+  customBodyStyle: makeStringProp(''),
+  /**
+   * 折叠栏的标题, 可通过 slot 传递自定义内容
+   */
+  title: makeStringProp(''),
+  /**
+   * 禁用折叠栏
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 折叠栏的标识符
+   */
+  name: makeRequiredProp(String),
+  /**
+   * 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise
+   */
+  beforeExpend: Function as PropType<CollapseItemBeforeExpand>
+}
+
+export type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>
+
+export type CollapseItemExpose = {
+  /**
+   * 获取展开状态
+   * @returns boolean
+   */
+  getExpanded: () => boolean
+  /**
+   * 更新展开状态
+   */
+  updateExpand: () => Promise<void>
+}
+
+export type CollapseItemInstance = ComponentPublicInstance<CollapseItemProps, CollapseItemExpose>

package/components/oxy-config-provider/oxy-config-provider.vue

@@ -0,0 +1,73 @@
+<template>
+  <view :class="themeClass" :style="themeStyle">
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-config-provider',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { configProviderProps } from './types'
+import { objToStyle } from '../common/util'
+
+const props = defineProps(configProviderProps)
+
+const themeClass = computed(() => {
+  return `oxy-theme-${props.theme} ${props.customClass}`
+})
+
+const themeStyle = computed(() => {
+  const styleObj = mapThemeVarsToCSSVars(props.themeVars)
+  return styleObj ? `${objToStyle(styleObj)}${props.customStyle}` : props.customStyle
+})
+
+const kebabCase = (str: string): string => {
+  str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase())
+  return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase())
+}
+const colorRgb = (str: string) => {
+  if (!str) return
+  var sColor = str.toLowerCase()
+  //十六进制颜色值的正则表达式
+  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+  // 如果是16进制颜色
+  if (sColor && reg.test(sColor)) {
+    if (sColor.length === 4) {
+      var sColorNew = '#'
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+      }
+      sColor = sColorNew
+    }
+    //处理六位的颜色值
+    var sColorChange: number[] = []
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
+    }
+    return sColorChange.join(',')
+  }
+  return null
+}
+
+const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
+  if (!themeVars) return
+  const cssVars: Record<string, string> = {}
+  Object.keys(themeVars).forEach((key) => {
+    cssVars[`--oxy-${kebabCase(key)}`] = themeVars[key]
+  })
+
+  return cssVars
+}
+</script>
+
+<style lang="scss" scoped></style>