@zfqh/uview-x 0.0.0-stage → 0.0.1

package/components/uv-icon/uv-icon.vue

@@ -0,0 +1,204 @@
+<template>
+  <view class="uv-icon" :class="['uv-icon--' + p.labelPos, p.customClass]" @tap="clickHandler">
+    <image
+      v-if="isImg"
+      class="uv-icon__img"
+      :src="p.name"
+      :mode="p.imgMode"
+      :style="[imgStyle, $uv.addStyle(p.customStyle)]"
+    ></image>
+    <text
+      v-else
+      class="uv-icon__icon"
+      :class="uClasses"
+      :style="[iconStyle, $uv.addStyle(p.customStyle)]"
+      :hover-class="p.hoverClass"
+      >{{ icon }}</text
+    >
+    <text
+      v-if="p.label !== ''"
+      class="uv-icon__label"
+      :style="{
+        color: p.labelColor,
+        fontSize: $uv.addUnit(p.labelSize),
+        marginLeft: p.labelPos === 'right' ? $uv.addUnit(p.space) : 0,
+        marginTop: p.labelPos === 'bottom' ? $uv.addUnit(p.space) : 0,
+        marginRight: p.labelPos === 'left' ? $uv.addUnit(p.space) : 0,
+        marginBottom: p.labelPos === 'top' ? $uv.addUnit(p.space) : 0,
+      }"
+      >{{ p.label }}</text
+    >
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $uv } from '../../utils';
+import props from './props';
+import { preventEvent } from '../../utils/compat';
+
+// #ifdef APP-NVUE
+import iconUrl from './uvicons.ttf';
+import type { DomPlugin } from '../../utils/compat';
+const dom = uni.requireNativePlugin?.('dom') as DomPlugin | undefined;
+if (dom) {
+  dom.addRule('fontFace', {
+    fontFamily: 'uvicon-iconfont',
+    src: `url('${iconUrl}')`,
+  });
+}
+// #endif
+
+defineOptions({
+  name: 'uv-icon',
+  // #ifdef UNI-APP-X
+  styleIsolation: 'app-and-page',
+  // #endif
+  virtualHost: true,
+});
+
+/**
+ * icon 图标
+ * @description 基于字体的图标集，包含了大多数常见场景的图标。
+ * @tutorial https://www.uvui.cn/components/icon.html
+ * @property {String}			name			图标名称，见示例图标集
+ * @property {String}			color			图标颜色,可接受主题色
+ * @property {String | Number}	size			图标字体大小，单位px
+ * @property {Boolean}			bold			是否显示粗体
+ * @property {String | Number}	index			点击图标的时候传递事件出去的index
+ * @property {String}			hoverClass		图标按下去的样式类
+ * @property {String}			customPrefix	自定义扩展前缀
+ * @property {String | Number}	label			图标右侧/下方的 label 文字
+ * @property {String}			labelPos		label 相对图标的位置：right/bottom/left/top
+ * @property {String | Number}	labelSize		label 字体大小
+ * @property {String}			labelColor		label 文字颜色
+ * @property {String | Number}	space			label 与图标的距离
+ * @property {String}			imgMode			图片 mode
+ * @property {String | Number}	width			图片形式时的宽度
+ * @property {String | Number}	height			图片形式时的高度
+ * @property {String | Number}	top				垂直方向偏移
+ * @property {Boolean}			stop			是否阻止事件传播
+ * @event {Function} click 点击图标时触发
+ * @example <uv-icon name="photo" color="#2979ff" size="28"></uv-icon>
+ */
+const p = defineProps(props);
+
+const emit = defineEmits(['click']);
+
+const colorType = ['primary', 'success', 'info', 'error', 'warning'];
+
+const isImg = computed(() => {
+  const name = p.name || '';
+  const isBase64 = name.indexOf('data:') > -1 && name.indexOf('base64') > -1;
+  return name.indexOf('/') !== -1 || isBase64;
+});
+
+const icon = computed(() => {
+  const code = (p.icons || {})[p.customPrefix + '-' + p.name];
+  if (code) {
+    return String.fromCharCode(parseInt(code, 16));
+  }
+  return ['uvicon'].indexOf(p.customPrefix) > -1 ? p.name : '';
+});
+
+const uClasses = computed(() => {
+  const classes: string[] = [p.customPrefix, p.customPrefix + '-' + p.name];
+  if (p.color && colorType.includes(p.color)) {
+    classes.push('uv-icon__icon--' + p.color);
+  }
+  return classes;
+});
+
+const iconStyle = computed(() => {
+  const style: any = {
+    fontSize: $uv.addUnit(p.size),
+    lineHeight: $uv.addUnit(p.size),
+    fontWeight: p.bold ? 'bold' : 'normal',
+    top: $uv.addUnit(p.top),
+  };
+  if (p.color && !colorType.includes(p.color)) {
+    style.color = p.color;
+  }
+  return style;
+});
+
+const imgStyle = computed(() => {
+  const style: any = {};
+  style.width = p.width ? $uv.addUnit(p.width) : $uv.addUnit(p.size);
+  style.height = p.height ? $uv.addUnit(p.height) : $uv.addUnit(p.size);
+  return style;
+});
+
+const clickHandler = (e: any) => {
+  emit('click', p.index);
+  if (p.stop) preventEvent(e);
+};
+</script>
+
+<style lang="scss">
+@import '../../styles/color.scss';
+
+/* #ifndef APP-NVUE */
+@font-face {
+  font-family: 'uvicon-iconfont';
+  src: url('./uvicons.ttf') format('truetype');
+}
+/* #endif */
+
+.uv-icon {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+}
+.uv-icon--left {
+  flex-direction: row-reverse;
+  align-items: center;
+}
+.uv-icon--right {
+  flex-direction: row;
+  align-items: center;
+}
+.uv-icon--top {
+  flex-direction: column-reverse;
+  justify-content: center;
+}
+.uv-icon--bottom {
+  flex-direction: column;
+  justify-content: center;
+}
+.uv-icon__icon {
+  font-family: uvicon-iconfont;
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  flex-direction: row;
+  /* #endif */
+  align-items: center;
+}
+.uv-icon__icon--primary {
+  color: $uv-primary;
+}
+.uv-icon__icon--success {
+  color: $uv-success;
+}
+.uv-icon__icon--error {
+  color: $uv-error;
+}
+.uv-icon__icon--warning {
+  color: $uv-warning;
+}
+.uv-icon__icon--info {
+  color: $uv-info;
+}
+.uv-icon__img {
+  /* #ifndef APP-NVUE */
+  height: auto;
+  /* #endif */
+}
+.uv-icon__label {
+  /* #ifndef APP-NVUE */
+  line-height: 1;
+  /* #endif */
+}
+</style>

package/components/uv-input/props.ts

@@ -0,0 +1,185 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  value: {
+    type: [String, Number],
+    default: '',
+  },
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  // 输入框类型
+  // number-数字输入键盘，App 端只能输入整数
+  // idcard-身份证输入键盘
+  // digit-带小数点的数字键盘
+  // text-文本输入键盘
+  type: {
+    type: String,
+    default: 'text',
+  },
+  // 是否禁用输入框
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 禁用状态时的背景色
+  disabledColor: {
+    type: String,
+    default: '#f5f7fa',
+  },
+  // 是否显示清除控件
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否密码类型
+  password: {
+    type: Boolean,
+    default: false,
+  },
+  // 最大输入长度，设置为 -1 的时候不限制最大长度
+  maxlength: {
+    type: [String, Number],
+    default: -1,
+  },
+  // 	输入框为空时的占位符
+  placeholder: {
+    type: String,
+    default: null,
+  },
+  // 指定placeholder的样式类
+  placeholderClass: {
+    type: String,
+    default: 'input-placeholder',
+  },
+  // 指定placeholder的样式
+  placeholderStyle: {
+    type: [String, Object],
+    default: 'color: #c0c4cc',
+  },
+  // 设置右下角按钮的文字，有效值：send|search|next|go|done
+  confirmType: {
+    type: String,
+    default: 'done',
+  },
+  // 点击键盘右下角按钮时是否保持键盘不收起，H5无效
+  confirmHold: {
+    type: Boolean,
+    default: false,
+  },
+  // focus时，点击页面的时候不收起键盘，微信小程序有效
+  holdKeyboard: {
+    type: Boolean,
+    default: false,
+  },
+  // 自动获取焦点
+  focus: {
+    type: Boolean,
+    default: false,
+  },
+  // 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效
+  autoBlur: {
+    type: Boolean,
+    default: false,
+  },
+  // 指定focus时光标的位置
+  cursor: {
+    type: [String, Number],
+    default: -1,
+  },
+  // 输入框聚焦时底部与键盘的距离
+  cursorSpacing: {
+    type: [String, Number],
+    default: 30,
+  },
+  // 光标起始位置，自动聚集时有效，需与selection-end搭配使用
+  selectionStart: {
+    type: [String, Number],
+    default: -1,
+  },
+  // 光标结束位置，自动聚集时有效，需与selection-start搭配使用
+  selectionEnd: {
+    type: [String, Number],
+    default: -1,
+  },
+  // 键盘弹起时，是否自动上推页面
+  adjustPosition: {
+    type: Boolean,
+    default: true,
+  },
+  // 输入框内容对齐方式，可选值为：left|center|right
+  inputAlign: {
+    type: String,
+    default: 'left',
+  },
+  // 输入框字体的大小
+  fontSize: {
+    type: [String, Number],
+    default: '14px',
+  },
+  // 输入框字体颜色
+  color: {
+    type: String,
+    default: '#303133',
+  },
+  // 输入框前置图标
+  prefixIcon: {
+    type: String,
+    default: '',
+  },
+  // 前置图标样式，对象或字符串
+  prefixIconStyle: {
+    type: [String, Object],
+    default: '',
+  },
+  // 输入框后置图标
+  suffixIcon: {
+    type: String,
+    default: '',
+  },
+  // 后置图标样式，对象或字符串
+  suffixIconStyle: {
+    type: [String, Object],
+    default: '',
+  },
+  // 边框类型，surround-四周边框，bottom-底部边框，none-无边框
+  border: {
+    type: String,
+    default: 'surround',
+  },
+  // 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  // 输入框形状，circle-圆形，square-方形
+  shape: {
+    type: String,
+    default: 'square',
+  },
+  // 用于处理或者过滤输入框内容的方法
+  formatter: {
+    type: [Function, null],
+    default: null,
+  },
+  // 是否忽略组件内对文本合成系统事件的处理
+  ignoreCompositionEvent: {
+    type: Boolean,
+    default: true,
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.input,
+};
+
+export default props;