oxy-uni-ui 1.0.1 → 1.2.0

package/components/oxy-corner/index.scss

@@ -0,0 +1,258 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@mixin corner-type-style ($normalColor, $normalBg) {
+  background: $normalBg;
+  color: $normalColor;
+}
+@include b(corner) {
+  position: relative;
+  @include e(box) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 80px;
+    height: 80px;
+    overflow: hidden;
+    @include when(round) {
+      border-top-right-radius: $-corner-radius;
+    }
+    @include when(primary) {
+      .oxy-corner__text {
+        @include corner-type-style($-corner-color, $-corner-primary-bg);
+      }
+      &.is-horizontal {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-primary-color, $-corner-horizontal-primary-bg);
+        }
+      }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-primary-color, $-corner-embedded-primary-bg);
+        }
+      }
+    }
+    @include when(info) {
+      .oxy-corner__text {
+        @include corner-type-style($-corner-color, $-corner-info-bg);
+      }
+      &.is-horizontal {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-info-color, $-corner-horizontal-info-bg);
+        }
+      }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-info-color, $-corner-embedded-info-bg);
+        }
+      }
+    }
+    @include when(success) {
+      .oxy-corner__text {
+        @include corner-type-style($-corner-color, $-corner-success-bg);
+      }
+      &.is-horizontal {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-success-color, $-corner-horizontal-success-bg);
+        }
+      }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-success-color, $-corner-embedded-success-bg);
+        }
+      }
+    }
+    @include when(warning) {
+      .oxy-corner__text {
+        @include corner-type-style($-corner-color, $-corner-warning-bg);
+      }
+      &.is-horizontal {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-warning-color, $-corner-horizontal-warning-bg);
+        }
+      }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-warning-color, $-corner-embedded-warning-bg);
+        }
+      }
+    }
+    @include when(danger) {
+      .oxy-corner__text {
+        @include corner-type-style($-corner-color, $-corner-danger-bg);
+      }
+      &.is-horizontal {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-danger-color, $-corner-horizontal-danger-bg);
+        }
+      }
+      &.is-embedded {
+        .oxy-corner__text {
+          @include corner-type-style($-corner-danger-color, $-corner-embedded-danger-bg);
+        }
+      }
+    }
+    &:not(.is-horizontal) {
+      &.is-top-left{
+        top: 0;
+        left: 0;
+        right: auto;
+        &.is-round {
+          border-top-right-radius: 0;
+          border-top-left-radius: $-corner-radius;
+        }
+        .oxy-corner__text {
+          transform: rotate(-45deg);
+          top: 10px;
+          left: -26px;
+        }
+      }
+      &.is-bottom-left{
+        bottom: 0;
+        left: 0;
+        top: auto;
+        &.is-round {
+          border-top-right-radius: 0;
+          border-bottom-left-radius: $-corner-radius;
+        }
+        .oxy-corner__text {
+          transform: rotate(-135deg);
+          bottom: 10px;
+          left: -26px;
+          top: auto;
+          > span{
+            transform: rotate(180deg);
+            display: inline-block;
+          }
+        }
+      }
+      &.is-bottom-right{
+        bottom: 0;
+        right: 0;
+        top: auto;
+        &.is-round {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: $-corner-radius;
+        }
+        .oxy-corner__text {
+          transform: rotate(135deg);
+          bottom: 10px;
+          right: -26px;
+          top: auto;
+          > span{
+            transform: rotate(180deg);
+            display: inline-block;
+          }
+        }
+      }
+      &.is-embedded {
+        &.is-top-left{
+          &::after {
+            left: auto;
+            right: -6px;
+            bottom: 0;
+            transform: skewX(-30deg);
+          }
+          .oxy-corner__text {
+            transform: none;
+            top: 0;
+            left: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 32px;
+            padding-left: 0;
+            padding-right: 12px;
+          }
+        }
+        &.is-bottom-left{
+          &::after {
+            left: auto;
+            right: -6px;
+            bottom: 0;
+            transform: skewX(30deg);
+          }
+          .oxy-corner__text {
+            transform: none;
+            bottom: 0;
+            left: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 32px;
+            padding-left: 0;
+            padding-right: 12px;
+            > span{
+              transform: none;
+            }
+          }
+        }
+        &.is-bottom-right{
+          &::after {
+            left: -6px;
+            bottom: 0;
+            transform: skewX(-30deg);
+          }
+          .oxy-corner__text {
+            transform: none;
+            bottom: 0;
+            right: 0;
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 32px;
+            > span{
+              transform: none;
+            }
+          }
+        }
+      }
+      .oxy-corner__text {
+        width: 106px;
+        height: 32px;
+        position: absolute;
+        right: -26px;
+        top: 10px;
+        text-align: center;
+        line-height: 32px;
+        overflow: hidden;
+        transform: rotate(45deg);
+        box-sizing: border-box;
+        white-space: nowrap;
+        text-align: center;
+        font-size: $-corner-font-size;
+        font-weight: $-corner-font-weight;
+      }
+    }
+    &.is-horizontal {
+      width: 160px;
+      height: 40px;
+      .oxy-corner__text {
+        padding-right: 20px;
+        box-sizing: border-box;
+        font-size: $-corner-horizontal-font-size;
+        font-weight: $-corner-horizontal-font-weight;
+        line-height: 40px;
+        text-align: right;
+      }
+    }
+    &.is-embedded {
+      width: 106px;
+      height: 32px;
+      &::after {
+        content: '';
+        position: absolute;
+        left: -6px;
+        bottom: 0;
+        width: 16px;
+        height: 32px;
+        background-color: #ffffff;
+        transform: skewX(30deg);
+      }
+      .oxy-corner__text {
+        right: 0;
+        top: 0;
+        transform: none;
+        padding-left: 12px;
+        box-sizing: border-box;
+        font-size: $-corner-embedded-font-size;
+        font-weight: $-corner-embedded-font-weight;
+        border-bottom-left-radius: 32px;
+      }
+    }
+  }
+}

package/components/oxy-corner/oxy-corner.vue

@@ -0,0 +1,67 @@
+<template>
+  <view class="oxy-corner">
+    <slot />
+    <view v-if="text || $slots.text" :class="textClass">
+      <view class="oxy-corner__text">
+        <slot name="text">
+          <span>{{ text }}</span>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-corner',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { cornerProps } from './types'
+
+const props = defineProps(cornerProps)
+
+const cornerClass = ref<string>('')
+
+watch(
+  [() => () => props.position, () => props.mode, () => props.round],
+  () => {
+    computeCornerClass()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.type,
+  (newValue) => {
+    if (!newValue) return
+    const type = ['primary', 'info', 'success', 'warning', 'danger']
+    if (type.indexOf(newValue) === -1) console.error(`type must be one of ${type.toString()}`)
+    computeCornerClass()
+  },
+  { immediate: true }
+)
+
+const textClass = computed(() => {
+  return `oxy-corner__box ${props.customClass} ${cornerClass.value}`
+})
+
+function computeCornerClass() {
+  const { type, position, mode, round } = props
+  let cornerClassList: string[] = []
+  type && cornerClassList.push(`is-${type}`)
+  position && cornerClassList.push(`is-${position}`)
+  mode && cornerClassList.push(`is-${mode}`)
+  round && cornerClassList.push('is-round')
+  cornerClass.value = cornerClassList.join(' ')
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-corner/types.ts

@@ -0,0 +1,50 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type CornerType = 'primary' | 'info' | 'success' | 'warning' | 'danger'
+export type CornerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+export type CornerMode = '' | 'horizontal' | 'embedded'
+
+export const cornerProps = {
+  ...baseProps,
+
+  /**
+   * 角标类型
+   * 类型：string
+   * 可选值：'primary' / 'info' / 'success' / 'warning' / 'danger'
+   * 默认值：'primary'
+   */
+  type: makeStringProp<CornerType>('primary'),
+
+  /**
+   * 角标位置
+   * 类型：string
+   * 可选值：'top-left' / 'top-right' / 'bottom-left' / 'bottom-right'
+   * 默认值：'top-right'
+   */
+  position: makeStringProp<CornerPosition>('top-right'),
+
+  /**
+   * 圆角类型
+   * 类型：boolean
+   * 默认值：false
+   */
+  round: makeBooleanProp(false),
+
+  /**
+   * 角标模式
+   * 类型：string
+   * 可选值：'horizontal' / 'embedded'
+   * 默认值：''
+   */
+  mode: makeStringProp<CornerMode>(''),
+
+  /**
+   * 角标文字
+   * 类型：string
+   * 默认值：空字符串
+   */
+  text: makeStringProp('')
+}
+
+export type CornerProps = ExtractPropTypes<typeof cornerProps>

package/components/oxy-drop-menu/index.scss

@@ -4,6 +4,7 @@
 .oxy-theme-dark {
   @include b(drop-menu) {
     color: $-dark-color;
+
     @include e(list) {
       background-color: $-dark-background2;
     }
@@ -27,6 +28,7 @@
     text-align: center;
     background-color: #fff;
   }
+
   @include e(item) {
     flex: 1;
     min-width: 0;
@@ -40,11 +42,13 @@
       .oxy-drop-menu__item-title::after {
         opacity: 1;
       }
+
       :deep(.oxy-drop-menu__arrow) {
         transform: rotate(-180deg);
         transform-origin: center center;
       }
     }
+
     @include when(disabled) {
       color: $-drop-menu-disabled-color;
     }

package/components/oxy-drop-menu/oxy-drop-menu.vue

@@ -18,7 +18,7 @@
           v-for="(child, index) in children"
           :key="index"
           @click="toggle(child)"
-          :class="`oxy-drop-menu__item ${child.disabled ? 'is-disabled' : ''} ${child.$.exposed!.getShowPop() ? 'is-active' : ''}`"
+          :class="`oxy-drop-menu__item ${child.disabled ? 'is-disabled' : ''} ${child.$.exposed?.getShowPop() ? 'is-active' : ''}`"
         >
           <view class="oxy-drop-menu__item-title">
             <view class="oxy-drop-menu__item-title-text">{{ getDisplayTitle(child) }}</view>
@@ -60,6 +60,8 @@ const windowHeight = ref<number>(0)
 const modalStyle = computed(() => {
   return props.direction === 'down'
     ? `top: calc(var(--window-top) + ${offset.value}px); bottom: 0;`
+    : props.direction === 'bottom'
+    ? 'top: var(--window-top); bottom: 0;'
     : `top: 0; bottom: calc(var(--window-bottom) + ${offset.value}px)`
 })
 
@@ -95,7 +97,7 @@ linkChildren({ props, fold, offset })
 watch(
   () => props.direction,
   (newValue) => {
-    if (!['up', 'down'].includes(newValue)) {
+    if (!['up', 'down', 'bottom'].includes(newValue)) {
       // eslint-disable-next-line quotes
       console.error("[Oxy ui] warning(oxy-drop-menu): direction must be 'up' or 'down'")
     }
@@ -142,7 +144,7 @@ function fold(child: any) {
   getRect(`#${dropMenuId.value}`, false, proxy).then((rect) => {
     if (!rect) return
     const { top, bottom } = rect
-    if (props.direction === 'down') {
+    if (props.direction === 'down' || props.direction === 'bottom') {
       offset.value = Number(bottom)
     } else {
       offset.value = windowHeight.value - Number(top)

package/components/oxy-drop-menu/types.ts

@@ -1,7 +1,7 @@
 import { type ExtractPropTypes, type InjectionKey, type Ref } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 
-export type DropDirection = 'up' | 'down'
+export type DropDirection = 'up' | 'down' | 'bottom'
 
 export type DropMenuProvide = {
   props: Partial<DropMenuProps>

package/components/oxy-drop-menu-item/index.scss

@@ -20,8 +20,8 @@
   color: $-drop-menu-item-color;
   width: 100%;
   z-index: 101;
-  
-  @include e(popup){
+
+  @include e(popup) {
     position: absolute;
     max-height: 80%;
   }
@@ -40,7 +40,7 @@
     }
   }
 
-  @include e(title){
+  @include e(title) {
     display: block;
   }
 
@@ -51,7 +51,7 @@
     margin-left: 2px;
   }
 
-  @include edeep(icon){
+  @include edeep(icon) {
     display: block;
     font-size: $-drop-menu-option-check-size;
   }

package/components/oxy-drop-menu-item/oxy-drop-menu-item.vue

@@ -91,6 +91,8 @@ const positionStyle = computed(() => {
     style =
       dropMenu.props.direction === 'down'
         ? `top: calc(var(--window-top) + ${dropMenu.offset.value}px); bottom: 0;`
+        : dropMenu.props.direction === 'bottom'
+        ? 'top: calc(var(--window-top); bottom: 0;'
         : `top: 0; bottom: calc(var(--window-bottom) + ${dropMenu.offset.value}px)`
   } else {
     style = ''

package/components/oxy-file-list/index.scss

@@ -0,0 +1,83 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(file-list) {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -8px;
+  @include e(item) {
+    position: relative;
+    width: calc(33.33% - 16px);
+    height: $-file-list-height;
+    margin: 0 8px 32px;
+  }
+  @include e(content) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid $-color-border;
+    border-radius: 8px;
+  }
+  @include e(picture) {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+  }
+  @include e(icon) {
+    width: 32px;
+    height: 32px;
+  }
+  @include e(name) {
+    display: block;
+    width: 100%;
+    font-size: $-upload-file-fs;
+    color: $-upload-file-color;
+    padding: 0 4px;
+    text-align: center;
+    margin-top: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  :deep(.oxy-tooltip) {
+    width: 100%;
+    .oxy-tooltip__inner {
+      width: fit-content;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  }
+  &.oxy-file-list__list {
+    display: block;
+    margin: 0;
+    .oxy-file-list__list--item {
+      width: 100%;
+      background: #f8f9ff;
+      padding: 8px 12px;
+      border-radius: 4px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .oxy-file-list__icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+      }
+      .oxy-file-list__name {
+        flex: 1;
+        text-align: left;
+        margin: 0;
+        padding: 0;
+      }
+      & + .oxy-file-list__list--item {
+        margin-top: 8px;
+      }
+    }
+  }
+}