oxy-uni-ui 1.0.1

package/components/oxy-signature/types.ts

@@ -0,0 +1,108 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, numericProp } from '../common/props'
+
+export const signatureProps = {
+  ...baseProps,
+  penColor: {
+    type: String,
+    default: '#000'
+  },
+  lineWidth: {
+    type: Number,
+    default: 3
+  },
+  clearText: String,
+  revokeText: String,
+  restoreText: String,
+  confirmText: String,
+  fileType: {
+    type: String,
+    default: 'png'
+  },
+  quality: {
+    type: Number,
+    default: 1
+  },
+  exportScale: {
+    type: Number,
+    default: 1
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  height: numericProp,
+  width: numericProp,
+  backgroundColor: String,
+  disableScroll: {
+    type: Boolean,
+    default: true
+  },
+  enableHistory: {
+    type: Boolean,
+    default: false
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  undoText: String,
+  redoText: String,
+  pressure: {
+    type: Boolean,
+    default: false
+  },
+  minWidth: {
+    type: Number,
+    default: 2
+  },
+  maxWidth: {
+    type: Number,
+    default: 6
+  },
+  minSpeed: {
+    type: Number,
+    default: 1.5
+  }
+}
+
+export type SignatureResult = {
+  tempFilePath: string
+  success: boolean
+  width: number
+  height: number
+}
+
+export interface Line {
+  points: Point[]
+  color: string
+  width: number
+  backgroundColor?: string
+  isPressure?: boolean
+}
+
+export interface Point {
+  x: number
+  y: number
+  t: number
+  speed?: number
+  distance?: number
+  lineWidth?: number
+  lastX1?: number
+  lastY1?: number
+  lastX2?: number
+  lastY2?: number
+  isFirstPoint?: boolean
+}
+
+export type SignatureExpose = {
+  init: (forceUpdate?: boolean) => void
+  clear: () => void
+  confirm: () => void
+  restore: () => void
+  revoke: () => void
+}
+
+export type SignatureProps = ExtractPropTypes<typeof signatureProps>
+
+export type SignatureInstance = ComponentPublicInstance<SignatureExpose, SignatureProps>

package/components/oxy-skeleton/index.scss

@@ -0,0 +1,96 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(skeleton) {
+    @include e(col) {
+      background-color: $-dark-background4;
+    }
+  }
+}
+@include b(skeleton) {
+  box-sizing: border-box;
+
+  @include e(row) {
+    justify-content: space-between;
+    margin-bottom: $-skeleton-row-margin-bottom;
+    display: flex;
+    align-items: center;
+
+    &:only-child,
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  @include e(col) {
+    border-radius: $-skeleton-border-radius-text;
+    background-color: $-skeleton-background-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:first-child:last-child,
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  @include m(type) {
+    &-text {
+      width: 100%;
+      height: $-skeleton-text-height-default;
+      border-radius: $-skeleton-border-radius-text;
+    }
+
+    &-rect {
+      width: 100%;
+      height: $-skeleton-rect-height-default;
+      border-radius: $-skeleton-border-radius-rect;
+    }
+
+    &-circle {
+      flex-shrink: 0;
+      width: $-skeleton-circle-height-default;
+      height: $-skeleton-circle-height-default;
+      border-radius: $-skeleton-border-radius-circle;
+    }
+  }
+  @include m(animation) {
+    &-gradient {
+      position: relative;
+      overflow-x: hidden;
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        animation: oxy-skeleton-gradient 1.5s linear 2s infinite;
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $-skeleton-animation-gradient, rgba(255, 255, 255, 0));
+        inset: 0;
+      }
+    }
+
+    &-flashed {
+      animation: oxy-skeleton-flashed 2s linear 2s infinite;
+    }
+  }
+
+  @keyframes oxy-skeleton-gradient {
+    0% {
+      transform: translateX(-100%) skewX(-15deg);
+    }
+    100% {
+      transform: translateX(100%) skewX(-15deg);
+    }
+  }
+  @keyframes oxy-skeleton-flashed {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+      background-color: $-skeleton-animation-flashed;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}

package/components/oxy-skeleton/index.ts

@@ -0,0 +1 @@
+export type { SkeletonThemeVars } from './types'

package/components/oxy-skeleton/oxy-skeleton.vue

@@ -0,0 +1,110 @@
+<template>
+  <view :class="`oxy-skeleton ${customClass}`" :style="customStyle">
+    <view class="oxy-skeleton__content" v-if="show">
+      <view class="oxy-skeleton__row" v-for="(row, index) of parsedRowCols" :key="`row-${index}`">
+        <view v-for="(col, idx) of row" :key="`col-${idx}`" :class="col.class" :style="col.style" />
+      </view>
+    </view>
+    <view v-else>
+      <slot />
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  // #ifdef H5
+  name: 'oxy-skeleton',
+  // #endif
+  options: { virtualHost: true, addGlobalClass: true, styleIsolation: 'shared' }
+}
+</script>
+
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import { ref, computed, watch } from 'vue'
+import type { SkeletonRowCol, SkeletonRowColObj } from './types'
+import { skeletonProps } from './types'
+import { isNumber, addUnit } from '../common/util'
+
+const themeMap = {
+  avatar: [{ type: 'circle', height: '64px', width: '64px' }],
+  image: [{ type: 'rect', height: '64px', width: '64px' }],
+  text: [
+    1,
+    [
+      { width: '24%', height: '16px', marginRight: '16px' },
+      { width: '76%', height: '16px' }
+    ]
+  ],
+  paragraph: [1, 1, 1, { width: '55%' }]
+}
+const props = defineProps(skeletonProps)
+const rowCols = ref<SkeletonRowCol[]>([])
+
+const parsedRowCols = computed(() => {
+  return rowCols.value.map((item) => {
+    if (isNumber(item)) {
+      return [
+        {
+          class: getColItemClass({ type: 'text' }),
+          style: {}
+        }
+      ]
+    }
+    if (Array.isArray(item)) {
+      return item.map((col) => {
+        return {
+          ...col,
+          class: getColItemClass(col),
+          style: getColItemStyle(col)
+        }
+      })
+    }
+    const nItem = item as SkeletonRowColObj
+
+    return [
+      {
+        ...nItem,
+        class: getColItemClass(nItem),
+        style: getColItemStyle(nItem)
+      }
+    ]
+  })
+})
+
+function getColItemClass(rowCol: SkeletonRowColObj) {
+  return ['oxy-skeleton__col', `oxy-skeleton--type-${rowCol.type || 'text'}`, { [`oxy-skeleton--animation-${props.animation}`]: props.animation }]
+}
+function getColItemStyle(rowCol: SkeletonRowColObj) {
+  const style: CSSProperties = {}
+  const styleName = ['size', 'width', 'height', 'margin', 'background', 'marginLeft', 'marginRight', 'borderRadius', 'backgroundColor']
+
+  for (const name of styleName) {
+    if (Object.prototype.hasOwnProperty.call(rowCol, name)) {
+      const px = addUnit(rowCol[name])
+
+      if (name === 'size') {
+        style.width = px
+        style.height = px
+      } else {
+        ;(style as any)[name] = px
+      }
+    }
+  }
+  return style
+}
+
+watch(
+  () => props.rowCol,
+  (rowCol) => {
+    rowCols.value = [...(Array.isArray(rowCol) && rowCol.length ? props.rowCol : themeMap[props.theme])]
+  },
+  { immediate: true }
+)
+
+const show = computed(() => props.loading == undefined || props.loading === true)
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-skeleton/types.ts

@@ -0,0 +1,69 @@
+import type { PropType, ExtractPropTypes, CSSProperties } from 'vue'
+import { makeArrayProp, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type SkeletonTheme = 'text' | 'avatar' | 'paragraph' | 'image'
+export type SkeletonAnimation = 'gradient' | 'flashed'
+export type SkeletonRowColObj = {
+  [key: string]: any
+  type?: 'rect' | 'circle' | 'text'
+  size?: string | number
+  width?: string | number
+  height?: string | number
+  margin?: string | number
+  background?: string
+  marginLeft?: string | number
+  marginRight?: string | number
+  borderRadius?: string | number
+  backgroundColor?: string
+}
+export type SkeletonRowCol = number | SkeletonRowColObj | Array<SkeletonRowColObj>
+export type SkeletonThemeVars = {
+  notifyPadding?: string
+  notifyFontSize?: string
+  notifyTextColor?: string
+  notifyLineHeight?: number | string
+  notifyDangerBackground?: string
+  notifyPrimaryBackground?: string
+  notifySuccessBackground?: string
+  notifyWarningBackground?: string
+}
+export const skeletonProps = {
+  /**
+   * 骨架图风格，有基础、头像组合等两大类
+   */
+  theme: makeStringProp<SkeletonTheme>('text'),
+  /**
+   * 用于设置行列数量、宽度高度、间距等。
+   * @example
+   * 【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。
+   * 【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。
+   * 【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距
+   */
+  rowCol: makeArrayProp<SkeletonRowCol>(),
+  /**
+   * 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容
+   * @default true
+   */
+  loading: makeBooleanProp(true),
+  /**
+   * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画
+   */
+  animation: {
+    type: String as PropType<SkeletonAnimation>,
+    default: ''
+  },
+  // 自定义类名
+  customClass: {
+    type: [String, Array, Object],
+    default: ''
+  },
+  // 自定义样式
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+    default() {
+      return {}
+    }
+  }
+}
+
+export type SkeletonProps = ExtractPropTypes<typeof skeletonProps>

package/components/oxy-slider/index.scss

@@ -0,0 +1,98 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(slider) {
+    @include e(label-min, label-max) {
+      color: $-dark-color;
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+      background-color: rgba($color: $-dark-background2, $alpha: 0.5);
+    }
+
+    @include m(disabled) {
+      @include me(label-min, label-max) {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+
+@include b(slider) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  height: calc($-slider-handle-radius * 3);
+
+  @include e(label-min, label-max) {
+    font-size: $-slider-fs;
+    color: $-slider-color;
+  }
+  @include e(label) {
+    text-align: center;
+    width: calc($-slider-handle-radius * 2);
+    line-height: calc($-slider-handle-radius * 2);
+    font-size: $-slider-fs;
+    line-height: 1.2;
+    color: $-slider-color;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    border-radius: 100%;
+    position: absolute;
+    bottom: calc($-slider-handle-radius * 2 + 8px);
+  }
+  @include e(bar-wrapper) {
+    flex: 1;
+    position: relative;
+    border-radius: calc($-slider-axie-height / 2);
+    background-color: #e5e5e5;
+    margin: calc($-slider-handle-radius - $-slider-axie-height / 2) 0;
+  }
+  @include e(bar) {
+    position: relative;
+    border-radius: inherit;
+    height: $-slider-axie-height;
+    background: $-slider-line-color;
+  }
+  @include e(button-wrapper) {
+    width: calc($-slider-handle-radius * 2);
+    /* 右侧滑块按钮定位，向右偏移自身宽度的50% */
+    transform: translate3d(50%, -50%, 0);
+    position: absolute;
+    right: 0;
+
+    @include m(left){
+      left: 0;
+      /* 左侧滑块按钮定位，向左偏移自身宽度的50% */
+      transform: translate3d(-50%, -50%, 0);
+    }
+  }
+  @include e(has-label) {
+    padding-top: calc($-slider-fs * 1.2 + 8px);
+  }
+  @include e(button) {
+    height: calc($-slider-handle-radius * 2);
+    width: calc($-slider-handle-radius * 2);
+    background: $-slider-handle-bg;
+    border-radius: 100%;
+    border: 1px solid $-slider-axie-bg;
+    box-sizing: border-box;
+    box-shadow: 0 2px 4px 0 rgba($color: #9b9b9b, $alpha: 0.5);
+  }
+  @include e(label-min) {
+    margin-right: calc($-slider-handle-radius * 2);
+  }
+  @include e(label-max) {
+    margin-left: calc($-slider-handle-radius * 2);
+  }
+  @include m(disabled) {
+    @include me(bar) {
+      opacity: 0.25;
+    }
+    @include me(label-min, label-max) {
+      color: $-slider-disabled-color;
+    }
+  }
+}