oxy-uni-ui 1.1.0 → 1.2.3

package/components/oxy-date-strip-item/index.scss

@@ -0,0 +1,94 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(date-strip-item) {
+  display: flex;
+  flex-direction: row;
+  padding: $-date-strip-padding-y $-date-strip-padding-x;
+  box-sizing: border-box;
+  /* #ifndef UNI-APP-X && APP */
+  height: 100%;
+  /* #endif */
+  &--week {
+    flex: 1;
+    .oxy-date-strip-item__grid {
+      flex: 1;
+    }
+  }
+  &--none {
+    .oxy-date-strip-item__grid {
+      width: $-date-strip-grid-width;
+    }
+  }
+  &__grid {
+		/* #ifndef UNI-APP-X && APP */
+		flex-shrink: 0;
+		/* #endif */
+		display: flex;
+		flex-direction: column;
+		margin: 0 4rpx;
+		transition-duration: 300ms;
+		transition-property: background-color, color;
+		transition-timing-function: linear;
+
+		&-prefix,&-day,&-suffix {
+			text-align: center;
+			transition-duration: 200ms;
+			transition-property: color;
+			transition-timing-function: linear;
+		}
+		&-prefix {
+			font-size: $-date-strip-prefix-font-size;
+			color: $-date-strip-prefix-color;
+		}
+		&--none {
+			.oxy-date-strip-item__grid-prefix {
+				padding-bottom: 4px;
+				padding-top: 4px;
+			}
+		}
+		&--circle {
+			.oxy-date-strip-item__grid-prefix {
+				padding-bottom: 4px;
+			}
+			.oxy-date-strip-item__grid-info {
+				border-radius: $-date-strip-grid-circle-radius;
+			}
+		}
+		&--square {
+			border-radius: $-date-strip-square-radius;
+			padding: $-date-strip-grid-square-padding-y $-date-strip-grid-square-padding-x;
+		}
+		&-suffix {
+			position: absolute;
+			top: 50%;
+			transform: translateY(60%);
+			font-size: $-date-strip-suffix-font-size;
+			color: $-date-strip-suffix-color;
+		}
+		&-day {
+			font-size: $-date-strip-font-size;
+			color: $-date-strip-color;
+			font-weight: bold;
+		}
+		&-info {
+			display: flex;
+			flex: 1;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+		}
+		&--active-bg {
+			background-color: $-date-strip-active-color;
+		}
+		&--active-text {
+			color: white;
+			&-none {
+				color:  $-date-strip-active-color;
+			}
+		}
+		&--disabled {
+			opacity: 0.4;
+		}
+	}
+}

package/components/oxy-date-strip-item/oxy-date-strip-item.vue

@@ -0,0 +1,102 @@
+<template>
+  <view :class="`oxy-date-strip-item oxy-date-strip-item--${switchMode} ${customClass}`" :style="customStyle">
+    <view
+      class="oxy-date-strip-item__grid"
+      v-for="item in dates"
+      :style="[
+        styles,
+        item.type == 'selected' && shape == 'square' && activeBgColor != null ? { background: activeBgColor } : {},
+        shape == 'square' && radius != null ? { 'border-radius': radius } : {}
+      ]"
+      :class="[
+        'oxy-date-strip-item__grid--' + shape,
+        {
+          'oxy-date-strip-item__grid--active-bg': shape == 'square' && item.type == 'selected',
+          'oxy-date-strip-item__grid--disabled': item.type == 'disabled',
+          'oxy-date-strip-item__grid--selected': item.type == 'selected'
+        }
+      ]"
+      @click="onClick(item)"
+      :key="item.key"
+    >
+      <text
+        class="oxy-date-strip-item__grid-prefix"
+        :class="{
+          'oxy-date-strip-item__grid--active-text': item.type == 'selected' && shape == 'square',
+          'oxy-date-strip-item__grid--active-text-none': item.type == 'selected' && shape == 'none'
+        }"
+        :style="[item.type == 'selected' && activeColor ? { color: activeColor } : {}]"
+      >
+        {{ item.prefix }}
+      </text>
+      <view
+        class="oxy-date-strip-item__grid-info"
+        :class="{
+          'oxy-date-strip-item__grid--active-bg': shape == 'circle' && item.type == 'selected'
+        }"
+        :style="[
+          item.type == 'selected' && shape == 'circle' && activeBgColor ? { background: activeBgColor } : {},
+          shape == 'square' && radius ? { 'border-radius': radius } : {}
+        ]"
+      >
+        <text
+          class="oxy-date-strip-item__grid-day"
+          :class="{
+            'oxy-date-strip-item__grid--active-text': item.type == 'selected' && shape != 'none',
+            'oxy-date-strip-item__grid--active-text-none': item.type == 'selected' && shape == 'none'
+          }"
+          :style="[item.type == 'selected' && activeColor ? { color: activeColor } : {}]"
+        >
+          {{ item.text }}
+        </text>
+        <text
+          class="oxy-date-strip-item__grid-suffix"
+          :class="{
+            'oxy-date-strip-item__grid--active-text': item.type == 'selected' && shape != 'none',
+            'oxy-date-strip-item__grid--active-text-none': item.type == 'selected' && shape == 'none'
+          }"
+          :style="[item.type == 'selected' && activeColor ? { color: activeColor } : {}]"
+          v-if="item.suffix"
+        >
+          {{ item.suffix }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-date-strip-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { dateStripItemProps } from './types'
+import type { DateStriPDay } from '../oxy-date-strip/types'
+
+const props = defineProps(dateStripItemProps)
+const emit = defineEmits(['click'])
+
+const styles = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.gridWidth && props.switchMode == 'none') {
+    style['width'] = props.gridWidth
+  }
+  return style
+})
+
+const onClick = (day: DateStriPDay) => {
+  emit('click', day)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-date-strip-item/types.ts

@@ -0,0 +1,53 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps } from '../common/props'
+import type { DateStriPDay, DateStripShape, DateStripSwitchMode } from '../oxy-date-strip/types'
+
+export const dateStripItemProps = {
+  ...baseProps,
+  dates: {
+    type: Array as PropType<DateStriPDay[]>,
+    default: () => []
+  },
+  // 网格宽度
+  gridWidth: {
+    type: String,
+    default: null
+  },
+  // 主题色，对底部按钮和选中日期生效
+  color: {
+    type: String,
+    default: null
+  },
+  // 选中日期的背景色
+  activeBgColor: {
+    type: String,
+    default: null
+  },
+  // 选中日期的文字颜色
+  activeColor: {
+    type: String,
+    default: null
+  },
+  // 背景色
+  bgColor: {
+    type: String,
+    default: null
+  },
+  // 圆角半径
+  radius: {
+    type: String,
+    default: null
+  },
+  // 切换模式，'week' 或 'none'
+  switchMode: {
+    type: String as PropType<DateStripSwitchMode>,
+    default: 'week'
+  },
+  // 形状，'square'、'circle' 或 'none'
+  shape: {
+    type: String as PropType<DateStripShape>,
+    default: 'square'
+  }
+}
+
+export type DateStripItemProps = ExtractPropTypes<typeof dateStripItemProps>

package/components/oxy-datetime-picker/oxy-datetime-picker.vue

@@ -512,7 +512,9 @@ function close() {
 
 function showPopup() {
   if (props.disabled || props.readonly) return
-
+  if (isFunction(props.beforeOpen) && !props.beforeOpen()) {
+    return
+  }
   emit('open')
   if (region.value) {
     popupShow.value = true

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

@@ -196,7 +196,11 @@ export const datetimePickerProps = {
   /**
    * 必填标记位置，可选值：before、after
    */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 打开pop之前的校验
+   */
+  beforeOpen: Function as PropType<() => boolean>
 }
 
 export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => string

package/components/oxy-echarts/index.scss

@@ -0,0 +1,17 @@
+.uni-echarts {
+  position: relative;
+}
+
+.uni-echarts__canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.uni-echarts__mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+}

package/components/oxy-echarts/index.ts

@@ -0,0 +1 @@
+export * from '../../uni-echarts'

package/components/oxy-echarts/oxy-echarts.vue

@@ -0,0 +1,32 @@
+<template>
+  <uni-echarts ref="echartsRef" v-bind="$attrs">
+    <slot></slot>
+  </uni-echarts>
+</template>
+<script lang="ts">
+import { ref } from 'vue'
+import { echartsProps } from './types'
+import UniEcharts from '../../../../uni_modules/oxy-uni-ui/uni-echarts/components/uni-echarts/uni-echarts.vue'
+import type { UniEchartsInst } from '../../../../uni_modules/oxy-uni-ui/uni-echarts'
+
+export default {
+  name: 'oxy-echarts',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps(echartsProps)
+const echartsRef = ref<UniEchartsInst | null>(null)
+defineExpose({
+  echartsInstance: echartsRef
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-echarts/types.ts

@@ -0,0 +1,12 @@
+import type { ExtractPropTypes } from 'vue'
+import { type ComponentPublicInstance } from 'vue'
+import { type UniEchartsInst } from '../../uni-echarts'
+
+export const echartsProps = {}
+
+export type EchartsProps = ExtractPropTypes<typeof echartsProps>
+export type EchartsExpose = {
+  echartsInstance: UniEchartsInst | null
+}
+
+export type EchartsInstance = ComponentPublicInstance<EchartsProps, EchartsExpose>

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

@@ -21,6 +21,7 @@
     height: 100%;
     border: 1px solid $-color-border;
     border-radius: 8px;
+    position: relative;
   }
   @include e(picture) {
     position: relative;
@@ -75,9 +76,34 @@
         margin: 0;
         padding: 0;
       }
+      .oxy-file-list__download {
+        font-size: 18px;
+        color: $-cell-arrow-color;
+      }
+      .oxy-file-list__delete {
+        font-size: 18px;
+        color: $-cell-arrow-color;
+        margin-left: 12px;
+      }
       & + .oxy-file-list__list--item {
         margin-top: 8px;
       }
     }
   }
+
+  .oxy-file-list__download-btn {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    background: rgba(0, 0, 0, 0.45);
+    border-radius: 6px;
+    padding: 4px 5px;
+  }
+  .oxy-file-list__download {
+    color: $-color-white;
+  }
+  .oxy-file-list__delete {
+    color: $-color-white;
+    margin-left: 6px;
+  }
 }