oxy-uni-ui 1.0.1

package/components/oxy-img-cropper/types.ts

@@ -0,0 +1,76 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export const imgCropperProps = {
+  ...baseProps,
+  /**
+   * 打开图片裁剪组件
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 取消按钮文案
+   */
+  cancelButtonText: String,
+  /**
+   * 确认按钮文案
+   */
+  confirmButtonText: String,
+  /**
+   * 是否禁用旋转
+   */
+  disabledRotate: makeBooleanProp(false),
+  /** canvas绘图参数 start **/
+  /**
+   * 目标文件的类型，wx.canvasToTempFilePath属性介绍
+   */
+  fileType: makeStringProp('png'),
+  /**
+   * 生成的图片质量 wx.canvasToTempFilePath属性介绍
+   */
+  quality: makeNumberProp(1),
+  /**
+   * 设置导出图片尺寸
+   */
+  exportScale: makeNumberProp(2),
+  /** canvas绘图参数 end **/
+  /**
+   * 图片源路径
+   */
+  imgSrc: makeStringProp(''),
+  /**
+   * 图片宽
+   */
+  imgWidth: makeNumericProp(''),
+  /**
+   * 图片高
+   */
+  imgHeight: makeNumericProp(''),
+  /**
+   * 最大缩放
+   */
+  maxScale: makeNumberProp(3),
+  /**
+   * 裁剪框宽高比，格式为 width:height
+   */
+  aspectRatio: makeStringProp('1:1')
+}
+
+export type ImgCropperProps = ExtractPropTypes<typeof imgCropperProps>
+
+export type ImgCropperExpose = {
+  /**
+   * 逆转是否使用动画
+   */
+  revertIsAnimation: (animation: boolean) => void
+  /**
+   * 初始化图片的大小和角度以及距离
+   */
+  resetImg: () => void
+  /**
+   * 控制旋转角度
+   * @param angle 角度
+   */
+  setRoate: (angle: number) => void
+}
+
+export type ImgCropperInstance = ComponentPublicInstance<ImgCropperProps, ImgCropperExpose>

package/components/oxy-index-anchor/index.scss

@@ -0,0 +1,35 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(index-anchor) {
+    background-color: $-color-gray-8;
+    color: $-color-white;
+  }
+}
+
+// #ifdef MP-DINGTALK
+@include b(index-anchor-ding) {
+  
+  @include when(sticky){
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+// #endif
+
+@include b(index-anchor) {
+  background-color: $-color-gray-2;
+  padding: 10px;
+  font-size: 14px;
+  color: $-color-title;
+
+  @include when(sticky){
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+}

package/components/oxy-index-anchor/oxy-index-anchor.vue

@@ -0,0 +1,55 @@
+<template>
+  <!-- #ifdef MP-DINGTALK -->
+  <view :class="`oxy-index-anchor-ding ${isSticky ? 'is-sticky' : ''}`">
+    <!-- #endif -->
+    <view :class="`oxy-index-anchor ${isSticky ? 'is-sticky' : ''} ${customClass}`" :style="customStyle" :id="indexAnchorId">
+      <slot>
+        {{ index }}
+      </slot>
+    </view>
+    <!-- #ifdef MP-DINGTALK -->
+  </view>
+  <!-- #endif -->
+</template>
+
+<script setup lang="ts">
+import { indexAnchorProps } from './type'
+import { onMounted, getCurrentInstance, ref, computed } from 'vue'
+import { indexBarInjectionKey } from '../oxy-index-bar/type'
+import { getRect, isDef, uuid } from '../common/util'
+import { useParent } from '../composables/useParent'
+
+const props = defineProps(indexAnchorProps)
+
+const { parent: indexBar } = useParent(indexBarInjectionKey)
+
+const indexAnchorId = ref<string>(`indexBar${uuid()}`)
+
+const { proxy } = getCurrentInstance()!
+
+const top = ref<number>(0)
+
+const isSticky = computed(() => {
+  return indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === props.index
+})
+
+function getInfo() {
+  getRect(`#${indexAnchorId.value}`, false, proxy).then((res) => {
+    if (isDef(indexBar)) {
+      top.value = Math.floor(res.top!)
+    }
+  })
+}
+
+onMounted(() => {
+  getInfo()
+})
+
+defineExpose({
+  top
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-index-anchor/type.ts

@@ -0,0 +1,9 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeRequiredProp } from '../common/props'
+
+export const indexAnchorProps = {
+  ...baseProps,
+  index: makeRequiredProp([String, Number])
+}
+
+export type IndexAnchorProps = ExtractPropTypes<typeof indexAnchorProps>

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

@@ -0,0 +1,39 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.oxy-theme-dark {
+  @include b(index-bar) {
+    @include e(index) {
+      color: $-color-white;
+    }
+  }
+}
+
+@include b(index-bar) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  @include e(content) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(sidebar) {
+    position: absolute;
+    top: 50%;
+    right: 4px;
+    transform: translateY(-50%);
+  }
+
+  @include e(index) {
+    font-size: 12px;
+    font-weight: $-fw-medium;
+    color: $-color-title;
+    padding: 4px 6px;
+
+    @include when(active) {
+      color: $-color-theme;
+    }
+  }
+}

package/components/oxy-index-bar/oxy-index-bar.vue

@@ -0,0 +1,156 @@
+<template>
+  <view class="oxy-index-bar" :id="indexBarId">
+    <!-- #ifdef MP-DINGTALK -->
+    <view class="oxy-index-bar" :id="indexBarId">
+      <!-- #endif -->
+      <scroll-view :scrollTop="scrollState.scrollTop" :scroll-y="true" class="oxy-index-bar__content" @scroll="hanleScroll">
+        <slot></slot>
+      </scroll-view>
+      <view
+        class="oxy-index-bar__sidebar"
+        @touchstart.stop.prevent="handleTouchStart"
+        @touchmove.stop.prevent="handleTouchMove"
+        @touchend.stop.prevent="handleTouchEnd"
+        @touchcancel.stop.prevent="handleTouchEnd"
+      >
+        <view class="oxy-index-bar__index" :class="{ 'is-active': item.index === state.activeIndex }" v-for="item in children" :key="item.index">
+          {{ item.index }}
+        </view>
+      </view>
+      <!-- #ifdef MP-DINGTALK -->
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { AnchorIndex } from './type'
+import { indexBarInjectionKey, indexBarProps } from './type'
+import { ref, getCurrentInstance, onMounted, reactive, nextTick, watch } from 'vue'
+import { getRect, isDef, uuid, pause } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+
+const props = defineProps(indexBarProps)
+
+const indexBarId = ref<string>(`indexBar${uuid()}`)
+
+const { proxy } = getCurrentInstance()!
+
+const state = reactive({
+  activeIndex: null as AnchorIndex | null
+})
+
+const { linkChildren, children } = useChildren(indexBarInjectionKey)
+
+linkChildren({ props, anchorState: state })
+
+watch(
+  () => children,
+  (newValue) => {
+    if (!newValue.length) {
+      state.activeIndex = null // 或者设置为一个默认值，如第一个子项的索引
+      return
+    }
+
+    if (!isDef(state.activeIndex) || !newValue.find((item) => item.index === state.activeIndex)) {
+      state.activeIndex = newValue[0].index
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const scrollState = reactive({
+  scrollTop: 0, // 即将滚动到的位置
+  prevScrollTop: 0, // 上次记录的位置
+  // 滚动距离
+  touching: false
+})
+
+// 组件距离页面顶部的高度
+let offsetTop = 0
+let sidebarInfo = {
+  // 侧边栏距离顶部的高度
+  offsetTop: 0,
+  // 高度固定24px
+  indexHeight: 24
+}
+
+function init() {
+  setTimeout(() => {
+    Promise.all([
+      getRect(`#${indexBarId.value}`, false, proxy),
+      getRect('.oxy-index-bar__sidebar', false, proxy),
+      getRect('.oxy-index-bar__index', false, proxy)
+    ]).then(([bar, sidebar, index]) => {
+      offsetTop = bar.top!
+      sidebarInfo.offsetTop = sidebar.top!
+      sidebarInfo.indexHeight = index.height!
+    })
+  }, 100)
+}
+
+onMounted(() => {
+  init()
+})
+
+function hanleScroll(scrollEvent: any) {
+  if (scrollState.touching) {
+    return
+  }
+  const { detail } = scrollEvent
+  const scrolltop = Math.floor(detail.scrollTop)
+  const anchor = children.find((item, index) => {
+    if (!isDef(children[index + 1])) return true
+    if (item.$.exposed!.top.value - offsetTop <= scrolltop && children[index + 1].$.exposed!.top.value - offsetTop > scrolltop) return true
+    return false
+  })
+  if (isDef(anchor) && state.activeIndex !== anchor.index) {
+    state.activeIndex = anchor.index
+  }
+  scrollState.prevScrollTop = scrolltop
+}
+
+function getAnchorByPageY(pageY: number) {
+  const y = pageY - sidebarInfo.offsetTop
+  let idx = Math.floor(y / sidebarInfo.indexHeight)
+  if (idx < 0) idx = 0
+  else if (idx > children.length - 1) idx = children.length - 1
+  return children[idx]
+}
+
+function handleTouchStart() {
+  scrollState.touching = true
+}
+
+function handleTouchMove(e: TouchEvent) {
+  const clientY = e.touches[0].pageY
+  if (state.activeIndex === getAnchorByPageY(clientY).index) {
+    return
+  }
+  state.activeIndex = getAnchorByPageY(clientY).index
+  setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
+}
+
+async function handleTouchEnd(e: TouchEvent) {
+  const clientY = e.changedTouches[0].pageY
+  state.activeIndex = getAnchorByPageY(clientY).index
+  setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
+  await pause()
+  scrollState.touching = false
+}
+
+function setScrollTop(top: number) {
+  if (scrollState.scrollTop === top) {
+    scrollState.scrollTop = scrollState.prevScrollTop
+    nextTick(() => {
+      scrollState.scrollTop = top
+    })
+  } else {
+    scrollState.scrollTop = top
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-index-bar/type.ts

@@ -0,0 +1,23 @@
+import type { InjectionKey } from 'vue'
+import type { ExtractPropTypes } from 'vue'
+import { makeBooleanProp } from '../common/props'
+
+export type AnchorIndex = number | string
+
+export const indexBarProps = {
+  /**
+   * @description 索引是否吸顶
+   */
+  sticky: makeBooleanProp(false)
+}
+
+export type IndexBarProps = ExtractPropTypes<typeof indexBarProps>
+
+export type InderBarProvide = {
+  props: { sticky?: boolean }
+  anchorState: {
+    activeIndex: AnchorIndex | null // 当前激活的索引
+  }
+}
+
+export const indexBarInjectionKey: InjectionKey<InderBarProvide> = Symbol('oxy-index-bar')

package/components/oxy-input/index.scss

@@ -0,0 +1,323 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.oxy-theme-dark {
+  @include b(input) {
+    background: $-dark-background2;
+
+    &::after {
+      background: $-dark-color-gray;
+    }
+
+    @include when(not-empty) {
+      &:not(.is-disabled) {
+        &::after {
+          background-color: $-dark-color;
+        }
+      }
+    }
+
+
+    @include e(inner) {
+      color: $-dark-color;
+
+      &::-webkit-input-placeholder {
+        color: $-dark-color3;
+      }
+    }
+
+    @include e(count) {
+      color: $-dark-color3;
+      background: transparent;
+    }
+
+    @include e(count-current) {
+      color: $-dark-color;
+    }
+
+    :deep(.oxy-input__icon),
+    :deep(.oxy-input__clear) {
+      color: $-dark-color;
+      background: transparent;
+    }
+
+    @include when(cell) {
+      background-color: $-dark-background2;
+      line-height: $-cell-line-height;
+
+      @include when(border) {
+        @include halfPixelBorder("top", $-input-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include when(disabled) {
+
+      .oxy-input__inner {
+        color: $-dark-color-gray;
+        background: transparent;
+      }
+    }
+
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(input) {
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  text-align: left;
+  background: $-input-bg;
+
+  &::after {
+    position: absolute;
+    content: "";
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: $-input-border-color;
+    transform: scaleY(0.5);
+    transition: background-color 0.2s ease-in-out;
+  }
+
+  @include when(not-empty) {
+    &:not(.is-disabled) {
+      &::after {
+        background-color: $-input-not-empty-border-color;
+      }
+    }
+  }
+
+  @include e(label) {
+    position: relative;
+    display: flex;
+    width: $-input-cell-label-width;
+    color: $-cell-title-color;
+    margin-right: $-cell-padding;
+    box-sizing: border-box;
+    font-size: $-input-fs;
+    flex-shrink: 0;
+  }
+
+  @include e(label-inner) {
+    display: inline-block;
+    font-size: $-input-fs;
+    line-height: $-cell-line-height;
+  }
+
+
+
+  @include e(required) {
+    font-size: $-cell-required-size;
+    color: $-cell-required-color;
+    margin-left: $-cell-required-margin;
+
+    @include m(left) {
+      margin-left: 0;
+      margin-right: $-cell-required-margin;
+    }
+  }
+
+  @include e(body) {
+    flex: 1;
+  }
+
+  @include e(value) {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+
+  @include e(prefix) {
+    margin-right: $-input-icon-margin;
+    font-size: $-input-fs;
+    line-height: initial;
+
+    :deep(.oxy-input__icon),
+    :deep(.oxy-input__clear) {
+      margin-left: 0;
+    }
+  }
+
+  @include e(suffix) {
+    flex-shrink: 0;
+    line-height: initial;
+  }
+
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  @include when(disabled) {
+
+    .oxy-input__inner {
+      color: $-input-disabled-color;
+      background: transparent;
+    }
+  }
+
+  @include when(error) {
+
+    .oxy-input__inner {
+      color: $-input-error-color;
+      background: transparent;
+    }
+  }
+
+  @include when(no-border) {
+    &::after {
+      display: none;
+    }
+
+    .oxy-input__inner {
+      height: $-input-inner-height-no-border;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  @include when(cell) {
+    display: flex;
+    align-items: flex-start;
+    padding: $-input-cell-padding $-input-padding;
+    background-color: $-input-cell-bg;
+
+    &.is-error::after {
+      background: $-input-cell-border-color;
+    }
+
+    :deep(.oxy-input__icon),
+    :deep(.oxy-input__clear) {
+      display: inline-flex;
+      align-items: center;
+      height: $-input-cell-height;
+      line-height: $-input-cell-height;
+    }
+
+    .oxy-input__prefix {
+      display: inline-block;
+      margin-right: $-cell-icon-right;
+    }
+
+    .oxy-input__inner {
+      height: $-input-cell-height;
+    }
+
+    &.oxy-input::after {
+      display: none;
+    }
+
+
+    @include when(center) {
+      align-items: center;
+    }
+
+    @include when(border) {
+      @include halfPixelBorder("top", $-input-cell-padding);
+    }
+  }
+
+  @include when(large) {
+    padding: $-input-cell-padding-large;
+
+    .oxy-input__prefix {
+      font-size: $-input-fs-large;
+    }
+
+    .oxy-input__label-inner {
+      font-size: $-input-fs-large;
+    }
+
+    .oxy-input__inner {
+      font-size: $-input-fs-large;
+    }
+
+
+    .oxy-input__count {
+      font-size: $-input-count-fs-large;
+    }
+
+    :deep(.oxy-input__icon),
+    :deep(.oxy-input__clear) {
+      font-size: $-input-icon-size-large;
+    }
+
+  }
+
+
+  @include e(inner) {
+    flex: 1;
+    height: $-input-inner-height;
+    font-size: $-input-fs;
+    color: $-input-color;
+    outline: none;
+    border: none;
+    background: none;
+    padding: 0;
+    box-sizing: border-box;
+
+    &::-webkit-input-placeholder {
+      color: $-input-placeholder-color;
+    }
+
+    @include when(align-right) {
+      text-align: right;
+    }
+  }
+
+  @include e(readonly-mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+  }
+
+
+  @include edeep(icon) {
+    margin-left: $-input-icon-margin;
+    font-size: $-input-icon-size;
+    color: $-input-icon-color;
+    vertical-align: middle;
+    background: $-input-bg;
+  }
+
+  @include edeep(clear) {
+    margin-left: $-input-icon-margin;
+    font-size: $-input-icon-size;
+    color: $-input-clear-color;
+    vertical-align: middle;
+    background: $-input-bg;
+  }
+
+  @include e(count) {
+    margin-left: 15px;
+    font-size: $-input-count-fs;
+    color: $-input-count-color;
+    vertical-align: middle;
+    background: $-input-bg;
+  }
+
+  @include e(count-current) {
+    color: $-input-count-current-color;
+
+    @include when(error) {
+      color: $-input-error-color;
+    }
+  }
+
+  .oxy-input__count,
+  .oxy-input__count-current {
+    display: inline-flex;
+  }
+}