Skip to content

U
uni-app

MuGuiLin / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 8e53f46d 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

chore: merge

上级 76299707 0ee19799
展开全部 隐藏空白更改
内联 并排
Showing with 451 addition and 308 deletion
packages/uni-components/dist/components.js
浏览文件 @ 8e53f46d
import { createElementVNode, defineComponent, createVNode, mergeProps, getCurrentInstance, provide, watch, onUnmounted, shallowRef, reactive, watchEffect, ref, inject, onBeforeUnmount, computed, Text as Text$1, isVNode, Fragment, onMounted, resolveComponent, parseClassList } from "vue";
import { extend, hasOwn, isPlainObject } from "@vue/shared";
import { cacheStringFunction, PRIMARY_COLOR, normalizeTarget } from "@dcloudio/uni-shared";
import { cacheStringFunction, PRIMARY_COLOR } from "@dcloudio/uni-shared";
const OPEN_TYPES = [
"navigate",
"redirect",
......@@ -848,8 +848,10 @@ const parseStyleText = cached(function(cssText) {
return res;
});
const getComponentSize = (el) => {
const dom2 = weex.requireModule("dom");
return new Promise((resolve) => {
return new Promise((resolve, reject) => {
if (!el)
return resolve({ width: 0, height: 0, top: 0, left: 0 });
const dom2 = weex.requireModule("dom");
dom2.getComponentRect(el, ({ size }) => {
resolve(size);
});
......@@ -1024,14 +1026,14 @@ function useTouchtrack(method) {
}
};
}
function useCustomEvent$1(ref2, emit) {
function useCustomEvent(ref2, emit) {
return (name, detail) => {
if (ref2.value) {
emit(name, normalizeCustomEvent$1(name, ref2.value, detail || {}));
emit(name, normalizeCustomEvent(name, ref2.value, detail || {}));
}
};
}
function normalizeCustomEvent$1(name, target, detail = {}) {
function normalizeCustomEvent(name, target, detail = {}) {
target = processTarget(target);
return {
type: name,
......@@ -1482,7 +1484,7 @@ var MovableView = defineComponent({
slots
}) {
const rootRef = ref(null);
const trigger = useCustomEvent$1(rootRef, emit);
const trigger = useCustomEvent(rootRef, emit);
const setTouchMovableViewContext = inject("setTouchMovableViewContext", () => {
});
const touchStart = useMovableViewState(props2, trigger, rootRef, setTouchMovableViewContext);
......@@ -2082,7 +2084,7 @@ var Progress = defineComponent({
}) {
const progressRef = ref(null);
const progressBarRef = ref(null);
const trigger = useCustomEvent$1(progressRef, emit);
const trigger = useCustomEvent(progressRef, emit);
const state = useProgressState(props2);
watch(() => state.realPercent, (newValue, oldValue) => {
state.lastPercent = oldValue || 0;
......@@ -2219,7 +2221,7 @@ var PickerView = defineComponent({
}) {
const rootRef = ref(null);
const state = useState(props2);
const trigger = useCustomEvent$1(rootRef, emit);
const trigger = useCustomEvent(rootRef, emit);
let columnVNodes = [];
const getItemIndex = (vnode) => Array.prototype.indexOf.call(columnVNodes, vnode);
const getPickerViewColumn = (columnInstance) => {
......@@ -2252,9 +2254,13 @@ var PickerView = defineComponent({
return () => {
const defaultSlots = slots.default && slots.default();
columnVNodes = flatVNode(defaultSlots);
const style = props2.height ? {
height: `${parseFloat(props2.height)}px`
} : {};
return createVNode("view", mergeProps({
"ref": rootRef,
"class": "uni-picker-view"
"class": "uni-picker-view",
"style": style
}, {
preventGesture: true
}), [createVNode("view", {
......@@ -2380,8 +2386,8 @@ var PickerViewColumn = defineComponent({
})]).then(() => {
if (height_ && indicatorHeight_) {
setTimeout(() => {
setCurrent(current.value, false, true);
instance.data._isMounted = true;
setCurrent(current.value, false, true);
}, 50);
} else {
checkMounted();
......@@ -2422,7 +2428,6 @@ var PickerViewColumn = defineComponent({
"ref": contentRef,
"class": "uni-picker-view-content",
"style": {
flexDirection: "column",
paddingTop: `${padding}px`,
paddingBottom: `${padding}px`
}
......@@ -2492,6 +2497,7 @@ var PickerViewColumn = defineComponent({
},
"uni-picker-view-content": {
"": {
flexDirection: "column",
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
......@@ -2586,7 +2592,7 @@ function getDefaultEndValue(props2) {
}
return "";
}
const props$2 = {
const props$1 = {
name: {
type: String,
default: ""
......@@ -2631,14 +2637,14 @@ const props$2 = {
};
var Picker = /* @__PURE__ */ defineComponent({
name: "Picker",
props: props$2,
props: props$1,
emits: ["change", "cancel", "columnchange"],
setup(props2, {
slots,
emit
}) {
const rootRef = ref(null);
const trigger = useCustomEvent$1(rootRef, emit);
const trigger = useCustomEvent(rootRef, emit);
const valueSync = ref(null);
const page = ref(null);
const _setValueSync = () => {
......@@ -2743,6 +2749,28 @@ var Picker = /* @__PURE__ */ defineComponent({
locale: uni.getLocale()
}));
};
const uniForm = inject(uniFormKey, false);
const formField = {
submit: () => [props2.name, valueSync.value],
reset: () => {
switch (props2.mode) {
case mode.SELECTOR:
valueSync.value = 0;
break;
case mode.MULTISELECTOR:
Array.isArray(props2.value) && (valueSync.value = props2.value.map((val) => 0));
break;
case mode.DATE:
case mode.TIME:
valueSync.value = "";
break;
}
}
};
if (uniForm) {
uniForm.addField(formField);
onBeforeUnmount(() => uniForm.removeField(formField));
}
Object.keys(props2).forEach((key) => {
watch(() => props2[key], (val) => {
const data = {};
......@@ -2916,7 +2944,7 @@ var USlider = defineComponent({
}) {
const sliderRef = ref(null);
const sliderTrackRef = ref(null);
const trigger = useCustomEvent$1(sliderRef, emit);
const trigger = useCustomEvent(sliderRef, emit);
const state = useSliderState(props2);
const listeners = useSliderListeners(props2, state, trigger);
watch(() => props2.value, (val) => {
......@@ -3097,7 +3125,7 @@ var Switch = defineComponent({
const rootRef = ref(null);
const switchChecked = ref(props2.checked);
const uniLabel = useSwitchInject(props2, switchChecked);
const trigger = useCustomEvent$1(rootRef, emit);
const trigger = useCustomEvent(rootRef, emit);
watch(() => props2.checked, (val) => {
switchChecked.value = val;
});
......@@ -3359,7 +3387,7 @@ var CheckboxGroup = defineComponent({
emit
}) {
const rootRef = ref(null);
const trigger = useCustomEvent$1(rootRef, emit);
const trigger = useCustomEvent(rootRef, emit);
useProvideCheckGroup(props2, trigger);
return () => {
return createVNode("div", {
......@@ -3427,6 +3455,13 @@ const radioProps = {
default: ""
}
};
const uniRadioGroupKey = PolySymbol(process.env.NODE_ENV !== "production" ? "uniRadioGroup" : "ucg");
const radioGroupProps = {
name: {
type: String,
default: ""
}
};
const radioStyles = [{
"uni-radio": {
"": {
......@@ -3479,29 +3514,50 @@ var Radio = defineComponent({
slots
}) {
const rootRef = ref(null);
const state = useRadioState(props2);
const onClick = (e2, isLabelClick) => {
const radioChecked = ref(props2.checked);
const radioValue = ref(props2.value);
const radioStyle = computed(() => {
const color = props2.disabled ? "#adadad" : props2.color;
if (radioChecked.value) {
return {
backgroundColor: color,
borderColor: color
};
}
return {
borderColor: "#d1d1d1"
};
});
const reset = () => {
radioChecked.value = false;
};
const {
uniCheckGroup,
uniLabel,
field
} = useRadioInject(radioChecked, radioValue, reset);
const _onClick = ($event, isLabelClick) => {
if (props2.disabled) {
return;
}
if (isLabelClick) {
rootRef.value.click();
}
state.radioChecked = !state.radioChecked;
radioChecked.value = !radioChecked.value;
uniCheckGroup && uniCheckGroup.radioChange($event, field);
};
const uniLabel = inject(uniLabelKey, false);
if (uniLabel) {
uniLabel.addHandler(onClick);
uniLabel.addHandler(_onClick);
onBeforeUnmount(() => {
uniLabel.removeHandler(onClick);
uniLabel.removeHandler(_onClick);
});
}
useListeners(props2, {
"label-click": onClick
"label-click": _onClick
});
watch([() => props2.checked, () => props2.value], ([newChecked, newModelValue]) => {
state.radioChecked = newChecked;
state.radioValue = newModelValue;
radioChecked.value = newChecked;
radioValue.value = newModelValue;
});
const wrapSlots = () => {
if (!slots.default)
......@@ -3518,78 +3574,62 @@ var Radio = defineComponent({
const {
disabled
} = props2;
const {
radioChecked,
radioStyle
} = state;
return createVNode("div", mergeProps({
"ref": rootRef
}, {
dataUncType: "uni-radio"
}, {
"onClick": onClick,
"onClick": _onClick,
"class": "uni-radio"
}), [createVNode("div", {
"style": radioStyle,
"style": radioStyle.value,
"class": ["uni-radio-input", {
"uni-radio-input-disabled": disabled
}]
}, [radioChecked ? createNVueTextVNode("\uEA08", {
}, [radioChecked.value ? createNVueTextVNode("\uEA08", {
class: "uni-radio-input-icon"
}) : null]), ...wrapSlots()]);
};
}
});
function useRadioState(props2) {
const radioChecked = ref(props2.checked);
const radioValue = ref(props2.value);
const radioStyle = computed(() => {
if (radioChecked.value) {
return {
backgroundColor: props2.color,
borderColor: props2.color
};
function useRadioInject(radioChecked, radioValue, reset) {
const field = computed({
get: () => ({
radioChecked: Boolean(radioChecked.value),
value: radioValue.value
}),
set: ({
radioChecked: checked
}) => {
radioChecked.value = checked;
}
return {
borderColor: "#d1d1d1"
};
});
const radioColor = computed(() => props2.disabled ? "#adadad" : props2.color);
const state = reactive({
radioStyle,
radioColor,
radioChecked,
radioValue
});
return state;
}
const uniRadioGroupKey = PolySymbol(process.env.NODE_ENV !== "production" ? "uniRadioGroup" : "ucg");
function useCustomEvent(ref2, emit) {
return (name, evt, detail) => {
if (ref2.value) {
emit(name, normalizeCustomEvent(name, evt, ref2.value, detail || {}));
}
const formField = {
reset
};
}
function normalizeCustomEvent(name, domEvt, el, detail) {
const target = normalizeTarget(el);
const uniCheckGroup = inject(uniRadioGroupKey, false);
if (!!uniCheckGroup) {
uniCheckGroup.addField(field);
}
const uniForm = inject(uniFormKey, false);
if (!!uniForm) {
uniForm.addField(formField);
}
const uniLabel = inject(uniLabelKey, false);
onBeforeUnmount(() => {
uniCheckGroup && uniCheckGroup.removeField(field);
uniForm && uniForm.removeField(formField);
});
return {
type: detail.type || name,
timeStamp: domEvt.timeStamp || 0,
target,
currentTarget: target,
detail
uniCheckGroup,
uniForm,
uniLabel,
field
};
}
const props$1 = {
name: {
type: String,
default: ""
}
};
var RadioGroup = defineComponent({
name: "RadioGroup",
props: props$1,
props: radioGroupProps,
emits: ["change"],
setup(props2, {
slots,
......@@ -3607,12 +3647,13 @@ var RadioGroup = defineComponent({
});
function useProvideRadioGroup(props2, trigger) {
const fields2 = [];
const getFieldsValue = () => fields2.reduce((res, field) => {
if (field.value.radioChecked) {
res.push(field.value.value);
}
return res;
}, new Array());
onMounted(() => {
_resetRadioGroupValue(fields2.length - 1);
});
const getFieldsValue = () => {
var _a;
return (_a = fields2.find((field) => field.value.radioChecked)) == null ? void 0 : _a.value.value;
};
provide(uniRadioGroupKey, {
addField(field) {
fields2.push(field);
......@@ -3620,26 +3661,48 @@ function useProvideRadioGroup(props2, trigger) {
removeField(field) {
fields2.splice(fields2.indexOf(field), 1);
},
radioChange($event) {
trigger("change", $event, {
radioChange($event, field) {
const index = fields2.indexOf(field);
_resetRadioGroupValue(index, true);
trigger("change", {
value: getFieldsValue()
});
}
});
const uniForm = inject(uniFormKey, false);
const formField = {
submit: () => {
let data = ["", null];
if (props2.name !== "") {
data[0] = props2.name;
data[1] = getFieldsValue();
}
return data;
}
};
if (uniForm) {
uniForm.addField({
submit: () => {
let data = ["", null];
if (props2.name !== "") {
data[0] = props2.name;
data[1] = getFieldsValue();
}
return data;
uniForm.addField(formField);
onBeforeUnmount(() => {
uniForm.removeField(formField);
});
}
function setFieldChecked(field, radioChecked) {
field.value = {
radioChecked,
value: field.value.value
};
}
function _resetRadioGroupValue(key, change) {
fields2.forEach((value, index) => {
if (index === key) {
return;
}
if (change) {
setFieldChecked(fields2[index], false);
}
});
}
return getFieldsValue;
return fields2;
}
const NATIVE_COMPONENTS = ["u-input", "u-textarea"];
var Form = defineComponent({
......@@ -3650,22 +3713,51 @@ var Form = defineComponent({
emit
}) {
const rootRef = ref(null);
const trigger = useCustomEvent$1(rootRef, emit);
const vnodes = slots.default && slots.default();
provideForm(trigger, vnodes);
const trigger = useCustomEvent(rootRef, emit);
const fields2 = [];
let resetNative;
provide(uniFormKey, {
addField(field) {
fields2.push(field);
},
removeField(field) {
fields2.splice(fields2.indexOf(field), 1);
},
submit(evt) {
let outFormData = {};
resetNative && resetNative(outFormData);
let formData = fields2.reduce((res, field) => {
if (field.submit) {
const [name, value] = field.submit();
name && (res[name] = value);
}
return res;
}, /* @__PURE__ */ Object.create(null));
Object.assign(outFormData, formData);
trigger("submit", {
value: outFormData
});
},
reset(evt) {
resetNative && resetNative();
fields2.forEach((field) => field.reset && field.reset());
trigger("reset", evt);
}
});
return () => {
const vnodes = slots.default && slots.default();
resetNative = useResetNative(vnodes);
return createVNode("view", {
"ref": rootRef
}, [vnodes]);
};
}
});
function provideForm(trigger, children) {
function useResetNative(children) {
const modulePlus = weex.requireModule("plus");
const fields2 = [];
const getOrClearNativeValue = (nodes, outResult) => {
nodes.forEach(function(node) {
if (NATIVE_COMPONENTS.indexOf(node.type) >= 0 && node.el.attr && node.el.attr.name) {
const getOrClearNativeValue = (outResult, nodes) => {
(nodes || children || []).forEach(function(node) {
if (NATIVE_COMPONENTS.indexOf(String(node.type)) >= 0 && node.el && node.el.attr && node.el.attr.name) {
if (outResult) {
outResult[node.el.attr.name] = modulePlus.getValue(node.el.nodeId);
} else {
......@@ -3673,39 +3765,11 @@ function provideForm(trigger, children) {
}
}
if (Array.isArray(node.children) && node.children && node.children.length) {
getOrClearNativeValue(node.children, outResult);
getOrClearNativeValue(outResult, node.children);
}
});
};
provide(uniFormKey, {
addField(field) {
fields2.push(field);
},
removeField(field) {
fields2.splice(fields2.indexOf(field), 1);
},
submit(evt) {
let outFormData = {};
getOrClearNativeValue(children, outFormData);
let formData = fields2.reduce((res, field) => {
if (field.submit) {
const [name, value] = field.submit();
name && (res[name] = value);
}
return res;
}, /* @__PURE__ */ Object.create(null));
Object.assign(outFormData, formData);
trigger("submit", {
value: outFormData
});
},
reset(evt) {
getOrClearNativeValue(children, null);
fields2.forEach((field) => field.reset && field.reset());
trigger("reset", evt);
}
});
return fields2;
return getOrClearNativeValue;
}
const iconProps = {
type: {
......@@ -3877,7 +3941,7 @@ var Swiper = defineComponent({
}) {
const rootRef = ref(null);
let swiperItems = [];
const trigger = useCustomEvent$1(rootRef, emit);
const trigger = useCustomEvent(rootRef, emit);
const state = useSwiperState(props2);
const listeners = useSwiperListeners(state, props2, swiperItems, trigger);
watch([() => props2.current, () => props2.currentItemId], ([newChecked, newModelValue]) => {
......@@ -3947,8 +4011,8 @@ function useSwiperState(props2) {
function useSwiperListeners(state, props2, swiperItems, trigger) {
let lastOffsetRatio = 0;
const onScroll = (event) => {
let offsetRatio = props2.vertical ? event.detail.offsetYRatio : event.detail.offsetXRatio;
if (event.drag || event.detail.drag) {
let offsetRatio = props2.vertical ? event.offsetYRatio : event.offsetXRatio;
if (event.drag || event.drag) {
state.currentChangeSource = "touch";
}
if (offsetRatio === 0) {
......@@ -3977,11 +4041,10 @@ function useSwiperListeners(state, props2, swiperItems, trigger) {
}
};
const onChange = (event) => {
const detail = event.detail;
if (typeof detail.source === "string") {
state.currentChangeSource = detail.source;
if (typeof event.source === "string") {
state.currentChangeSource = event.source;
}
state.currentSync = detail.index;
state.currentSync = event.index;
lastOffsetRatio = 0;
};
function getDetail() {
......@@ -4493,7 +4556,7 @@ var Ad = defineComponent({
emit
}) {
const adRef = ref(null);
const trigger = useCustomEvent$1(adRef, emit);
const trigger = useCustomEvent(adRef, emit);
const state = useAdState();
watch(() => props2.adpid, (value) => {
_loadAdData$1(state, props2, trigger);
......@@ -4598,7 +4661,7 @@ var AdDraw = defineComponent({
emit
}) {
const adRef = ref(null);
const trigger = useCustomEvent$1(adRef, emit);
const trigger = useCustomEvent(adRef, emit);
const state = useAdDrawState();
watch(() => props2.adpid, (value) => {
_loadAdData(state, props2, trigger);
......
packages/uni-components/src/components/radio-group.ts
浏览文件 @ 8e53f46d
import { WritableComputedRef, ExtractPropTypes } from 'vue'
import { PolySymbol } from '@dcloudio/uni-core'
export const uniRadioGroupKey = PolySymbol(__DEV__ ? 'uniRadioGroup' : 'ucg')
export type UniRadioGroupFieldCtx = WritableComputedRef<{
radioChecked: boolean
value: string
}>
export interface UniRadioGroupCtx {
addField: (field: UniRadioGroupFieldCtx) => void
removeField: (field: UniRadioGroupFieldCtx) => void
radioChange: ($event: Event, field: UniRadioGroupFieldCtx) => void
}
export const radioGroupProps = {
name: {
type: String,
default: '',
},
}
export type RadioGroupProps = ExtractPropTypes<typeof radioGroupProps>
packages/uni-components/src/nvue/form/index.tsx
浏览文件 @ 8e53f46d
import { defineComponent, provide, ref } from 'vue'
import {
useCustomEvent,
EmitEvent,
CustomEventTrigger,
} from '../../helpers/useNVueEvent'
import { defineComponent, provide, ref, VNode } from 'vue'
import { useCustomEvent, EmitEvent } from '../../helpers/useNVueEvent'
import { uniFormKey, UniFormCtx, UniFormFieldCtx } from '../../components/form'
const NATIVE_COMPONENTS = ['u-input', 'u-textarea']
......@@ -14,23 +10,60 @@ export default defineComponent({
setup({}, { slots, emit }) {
const rootRef = ref<HTMLElement | null>(null)
const trigger = useCustomEvent<EmitEvent<typeof emit>>(rootRef, emit)
const fields: UniFormFieldCtx[] = []
const vnodes = slots.default && slots.default()
provideForm(trigger, vnodes)
let resetNative: Function
provide<UniFormCtx>(uniFormKey, {
addField(field: UniFormFieldCtx) {
fields.push(field)
},
removeField(field: UniFormFieldCtx) {
fields.splice(fields.indexOf(field), 1)
},
submit(evt: Event) {
// 获取原生组件值
let outFormData: any = {}
resetNative && resetNative(outFormData)
let formData = fields.reduce((res, field) => {
if (field.submit) {
const [name, value] = field.submit()
name && (res[name] = value)
}
return res
}, Object.create(null))
Object.assign(outFormData, formData)
trigger('submit', {
value: outFormData,
})
},
reset(evt: Event) {
// 清空原生组件值
resetNative && resetNative()
fields.forEach((field) => field.reset && field.reset())
trigger('reset', evt)
},
})
return () => {
const vnodes = slots.default && slots.default()
resetNative = useResetNative(vnodes)
return <view ref={rootRef}>{vnodes}</view>
}
},
})
function provideForm(trigger: CustomEventTrigger, children: any) {
function useResetNative(children?: VNode[]) {
const modulePlus = weex.requireModule('plus')
const fields: UniFormFieldCtx[] = []
const getOrClearNativeValue = (nodes: any, outResult: any): void => {
nodes.forEach(function (node: any) {
const getOrClearNativeValue = (outResult: any, nodes?: VNode[]): void => {
;(nodes || children || []).forEach(function (node: VNode) {
if (
NATIVE_COMPONENTS.indexOf(node.type) >= 0 &&
NATIVE_COMPONENTS.indexOf(String(node.type)) >= 0 &&
node.el &&
node.el.attr &&
node.el.attr.name
) {
......@@ -45,44 +78,10 @@ function provideForm(trigger: CustomEventTrigger, children: any) {
node.children &&
node.children.length
) {
getOrClearNativeValue(node.children, outResult)
getOrClearNativeValue(outResult, node.children as VNode[])
}
})
}
provide<UniFormCtx>(uniFormKey, {
addField(field: UniFormFieldCtx) {
fields.push(field)
},
removeField(field: UniFormFieldCtx) {
fields.splice(fields.indexOf(field), 1)
},
submit(evt: Event) {
// 获取原生组件值
let outFormData: any = {}
getOrClearNativeValue(children, outFormData)
let formData = fields.reduce((res, field) => {
if (field.submit) {
const [name, value] = field.submit()
name && (res[name] = value)
}
return res
}, Object.create(null))
Object.assign(outFormData, formData)
trigger('submit', {
value: outFormData,
})
},
reset(evt: Event) {
// 清空原生组件值
getOrClearNativeValue(children, null)
fields.forEach((field) => field.reset && field.reset())
trigger('reset', evt)
},
})
return fields
return getOrClearNativeValue
}
packages/uni-components/src/nvue/helpers/dom.ts
浏览文件 @ 8e53f46d
export type Size = { width: number; height: number; top: number; left: number }
export const getComponentSize = (el: HTMLElement) => {
const dom = weex.requireModule('dom')
return new Promise<Size>((resolve) => {
return new Promise<Size>((resolve, reject) => {
if (!el) return resolve({ width: 0, height: 0, top: 0, left: 0 })
const dom = weex.requireModule('dom')
dom.getComponentRect(el, ({ size }: { size: Size }) => {
resolve(size)
})
......
packages/uni-components/src/nvue/picker-view-column/index.tsx
浏览文件 @ 8e53f46d
......@@ -118,8 +118,8 @@ export default defineComponent({
if (height_ && indicatorHeight_) {
// 初始化时iOS直接滚动经常出错
setTimeout(() => {
setCurrent(current.value, false, true)
instance.data._isMounted = true
setCurrent(current.value, false, true)
}, 50)
} else {
checkMounted()
......@@ -167,7 +167,6 @@ export default defineComponent({
ref={contentRef}
class="uni-picker-view-content"
style={{
flexDirection: 'column',
paddingTop: `${padding}px`,
paddingBottom: `${padding}px`,
}}
......@@ -239,6 +238,7 @@ export default defineComponent({
},
'uni-picker-view-content': {
'': {
flexDirection: 'column',
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
......
packages/uni-components/src/nvue/picker-view/index.tsx
浏览文件 @ 8e53f46d
......@@ -69,10 +69,14 @@ export default defineComponent({
return () => {
const defaultSlots = slots.default && slots.default()
columnVNodes = flatVNode(defaultSlots)
const style = props.height
? { height: `${parseFloat(props.height as string)}px` }
: {}
return (
<view
ref={rootRef}
class="uni-picker-view"
style={style}
{...{
preventGesture: true,
}}
......
packages/uni-components/src/nvue/picker/index.tsx
浏览文件 @ 8e53f46d
import { extend } from '@vue/shared'
import { Ref, ref, watch, ExtractPropTypes, defineComponent } from 'vue'
import {
Ref,
ref,
watch,
ExtractPropTypes,
defineComponent,
onBeforeUnmount,
inject,
} from 'vue'
import { useCustomEvent, EmitEvent } from '../../helpers/useNVueEvent'
import { showPage, Page } from '@dcloudio/uni-core'
import { UniFormCtx, uniFormKey } from '../../components/form'
type Mode = 'selector' | 'multiSelector' | 'time' | 'date'
type Field = 'year' | 'month' | 'day'
......@@ -264,7 +273,7 @@ export default /*#__PURE__*/ defineComponent({
)
}
/* const uniForm = inject<UniFormCtx>(
const uniForm = inject<UniFormCtx>(
uniFormKey,
false as unknown as UniFormCtx
)
......@@ -291,7 +300,7 @@ export default /*#__PURE__*/ defineComponent({
if (uniForm) {
uniForm.addField(formField)
onBeforeUnmount(() => uniForm.removeField(formField))
} */
}
Object.keys(props).forEach((key) => {
watch(
......
packages/uni-components/src/nvue/radio-group/index.tsx
浏览文件 @ 8e53f46d
......@@ -2,41 +2,27 @@ import {
defineComponent,
inject,
provide,
ComputedRef,
ref,
ExtractPropTypes,
onBeforeUnmount,
onMounted,
} from 'vue'
import { uniRadioGroupKey } from '../../components/radio-group'
import {
uniRadioGroupKey,
UniRadioGroupFieldCtx,
UniRadioGroupCtx,
RadioGroupProps,
radioGroupProps,
} from '../../components/radio-group'
import { UniFormCtx, uniFormKey } from '../../components/form'
import {
CustomEventTrigger,
useCustomEvent,
EmitEvent,
} from '../../helpers/useEvent'
type UniRadioGroupFieldCtx = ComputedRef<{
radioChecked: boolean
value: string
}>
const props = {
name: {
type: String,
default: '',
},
}
type RadioGroupProps = ExtractPropTypes<typeof props>
export interface UniRadioGroupCtx {
addField: (field: UniRadioGroupFieldCtx) => void
removeField: (field: UniRadioGroupFieldCtx) => void
radioChange: ($event: Event) => void
}
} from '../../helpers/useNVueEvent'
export default defineComponent({
name: 'RadioGroup',
props,
props: radioGroupProps,
emits: ['change'],
setup(props, { slots, emit }) {
const rootRef = ref<HTMLElement | null>(null)
......@@ -56,13 +42,12 @@ function useProvideRadioGroup(
) {
const fields: UniRadioGroupFieldCtx[] = []
onMounted(() => {
_resetRadioGroupValue(fields.length - 1)
})
const getFieldsValue = () =>
fields.reduce((res, field) => {
if (field.value.radioChecked) {
res.push(field.value.value)
}
return res
}, new Array())
fields.find((field) => field.value.radioChecked)?.value.value
provide<UniRadioGroupCtx>(uniRadioGroupKey, {
addField(field: UniRadioGroupFieldCtx) {
......@@ -71,26 +56,53 @@ function useProvideRadioGroup(
removeField(field: UniRadioGroupFieldCtx) {
fields.splice(fields.indexOf(field), 1)
},
radioChange($event) {
trigger('change', $event, {
radioChange($event: Event, field: UniRadioGroupFieldCtx) {
const index = fields.indexOf(field)
_resetRadioGroupValue(index, true)
trigger('change', {
value: getFieldsValue(),
})
},
})
const uniForm = inject<UniFormCtx>(uniFormKey, false as unknown as UniFormCtx)
const formField = {
submit: () => {
let data: [string, any] = ['', null]
if (props.name !== '') {
data[0] = props.name
data[1] = getFieldsValue()
}
return data
},
}
if (uniForm) {
uniForm.addField({
submit: () => {
let data: [string, any] = ['', null]
if (props.name !== '') {
data[0] = props.name
data[1] = getFieldsValue()
}
return data
},
uniForm.addField(formField)
onBeforeUnmount(() => {
uniForm.removeField(formField)
})
}
function setFieldChecked(
field: UniRadioGroupFieldCtx,
radioChecked: boolean
) {
field.value = {
radioChecked,
value: field.value.value,
}
}
function _resetRadioGroupValue(key: number, change?: boolean) {
fields.forEach((value, index) => {
if (index === key) {
return
}
if (change) {
setFieldChecked(fields[index], false)
}
})
}
return getFieldsValue
return fields
}
packages/uni-components/src/nvue/radio/index.tsx
浏览文件 @ 8e53f46d
......@@ -2,16 +2,20 @@ import {
defineComponent,
inject,
onBeforeUnmount,
Ref,
ref,
computed,
watch,
reactive,
ExtractPropTypes,
} from 'vue'
import { uniLabelKey, UniLabelCtx } from '../label'
import { useListeners } from '../../helpers/useListeners'
import { NVueComponentStyles, createNVueTextVNode } from '../utils'
import { radioProps } from '../../components/radio'
import {
uniRadioGroupKey,
UniRadioGroupCtx,
} from '../../components/radio-group'
import { UniFormCtx, uniFormKey } from '../../components/form'
const radioStyles: NVueComponentStyles = [
{
......@@ -59,8 +63,6 @@ const radioStyles: NVueComponentStyles = [
},
]
type RadioProps = ExtractPropTypes<typeof radioProps>
export default defineComponent({
name: 'Radio',
props: radioProps,
......@@ -68,47 +70,56 @@ export default defineComponent({
emits: ['change'],
setup(props, { slots }) {
const rootRef = ref<HTMLElement | null>(null)
const radioChecked = ref(props.checked)
const radioValue = ref(props.value)
const radioStyle = computed(() => {
const color = props.disabled ? '#adadad' : props.color
if (radioChecked.value) {
return {
backgroundColor: color,
borderColor: color,
}
}
return {
borderColor: '#d1d1d1',
}
})
const reset = () => {
radioChecked.value = false
}
const state = useRadioState(props)
const { uniCheckGroup, uniLabel, field } = useRadioInject(
radioChecked,
radioValue,
reset
)
const onClick = (e: Event, isLabelClick?: boolean) => {
const _onClick = ($event: Event, isLabelClick?: boolean) => {
if (props.disabled) {
return
}
if (isLabelClick) {
rootRef.value!.click()
}
state.radioChecked = !state.radioChecked
/* const formType = props.formType
if (formType) {
if (!uniForm) {
return
}
if (formType === 'submit') {
uniForm.submit(e)
} else if (formType === 'reset') {
uniForm.reset(e)
}
} */
radioChecked.value = !radioChecked.value
uniCheckGroup && uniCheckGroup.radioChange($event, field)
}
const uniLabel = inject<UniLabelCtx>(
uniLabelKey,
false as unknown as UniLabelCtx
)
if (uniLabel) {
uniLabel.addHandler(onClick)
uniLabel.addHandler(_onClick)
onBeforeUnmount(() => {
uniLabel.removeHandler(onClick)
uniLabel.removeHandler(_onClick)
})
}
useListeners(props, { 'label-click': onClick })
useListeners(props, { 'label-click': _onClick })
watch(
[() => props.checked, () => props.value],
([newChecked, newModelValue]) => {
state.radioChecked = newChecked
state.radioValue = newModelValue
radioChecked.value = newChecked
radioValue.value = newModelValue
}
)
......@@ -127,21 +138,20 @@ export default defineComponent({
return () => {
const { disabled } = props
const { radioChecked, radioStyle } = state
return (
<div
ref={rootRef}
{...{ dataUncType: 'uni-radio' }}
onClick={onClick}
onClick={_onClick}
class="uni-radio"
>
<div
style={radioStyle}
style={radioStyle.value}
class="uni-radio-input"
// @ts-expect-error
class={{ 'uni-radio-input-disabled': disabled }}
>
{radioChecked
{radioChecked.value
? createNVueTextVNode('\uEA08', {
class: 'uni-radio-input-icon',
})
......@@ -154,29 +164,49 @@ export default defineComponent({
},
})
function useRadioState(props: RadioProps) {
const radioChecked = ref(props.checked)
const radioValue = ref(props.value)
const radioStyle = computed(() => {
if (radioChecked.value) {
return {
backgroundColor: props.color,
borderColor: props.color,
}
}
return {
borderColor: '#d1d1d1',
}
function useRadioInject(
radioChecked: Ref<string | boolean>,
radioValue: Ref<string>,
reset: () => void
) {
const field = computed({
get: () => ({
radioChecked: Boolean(radioChecked.value),
value: radioValue.value,
}),
set: ({ radioChecked: checked }) => {
radioChecked.value = checked
},
})
const formField = { reset }
const uniCheckGroup = inject<UniRadioGroupCtx>(
uniRadioGroupKey,
false as unknown as UniRadioGroupCtx
)
if (!!uniCheckGroup) {
uniCheckGroup.addField(field)
}
const radioColor = computed(() => (props.disabled ? '#adadad' : props.color))
const uniForm = inject<UniFormCtx>(uniFormKey, false as unknown as UniFormCtx)
if (!!uniForm) {
uniForm.addField(formField)
}
const state = reactive({
radioStyle,
radioColor,
radioChecked,
radioValue,
const uniLabel = inject<UniLabelCtx>(
uniLabelKey,
false as unknown as UniLabelCtx
)
onBeforeUnmount(() => {
uniCheckGroup && uniCheckGroup.removeField(field)
uniForm && uniForm.removeField(formField)
})
return state
return {
uniCheckGroup,
uniForm,
uniLabel,
field,
}
}
packages/uni-components/src/nvue/swiper/index.tsx
浏览文件 @ 8e53f46d
......@@ -142,10 +142,8 @@ function useSwiperListeners(
let lastOffsetRatio: number = 0
const onScroll = (event: any) => {
let offsetRatio = props.vertical
? event.detail.offsetYRatio
: event.detail.offsetXRatio
if (event.drag || event.detail.drag) {
let offsetRatio = props.vertical ? event.offsetYRatio : event.offsetXRatio
if (event.drag || event.drag) {
state.currentChangeSource = 'touch'
}
// 纠正 offsetRatio 数值
......@@ -177,12 +175,11 @@ function useSwiperListeners(
}
}
const onChange = (event: CustomEvent) => {
const detail = event.detail
if (typeof detail.source === 'string') {
state.currentChangeSource = detail.source
const onChange = (event: any) => {
if (typeof event.source === 'string') {
state.currentChangeSource = event.source
}
state.currentSync = detail.index
state.currentSync = event.index
lastOffsetRatio = 0
}
......
packages/uni-shared/dist/uni-shared.d.ts
浏览文件 @ 8e53f46d
......@@ -349,7 +349,7 @@ export declare interface NVueElement {
type: string;
ref: string;
text?: string;
preClassList: string[];
styleSheet: Record<string, Record<string, Record<string, unknown>>>;
classList: string[];
parentNode: NVueElement | null;
children: Array<NVueElement>;
......@@ -361,10 +361,10 @@ export declare interface NVueElement {
insertAfter: (node: NVueElement, after: NVueElement) => void;
setAttr: (key: string, value: any, silent?: boolean) => void;
setAttrs: (attrs: Record<string, unknown>, silent?: boolean) => void;
setPreClassList: (preClassList: string[]) => void;
setClassList: (classList: string[]) => void;
setStyle: (key: string, value: any, silent?: boolean) => void;
setStyles: (attrs: Record<string, unknown>, silent?: boolean) => void;
setStyleSheet: (styleSheet: Record<string, Record<string, Record<string, unknown>>>) => void;
addEvent: (type: string, handler: Function, args?: Array<any>) => void;
removeEvent: (type: string) => void;
fireEvent: (type: string) => void;
......
packages/uni-shared/src/nvue.ts
浏览文件 @ 8e53f46d
......@@ -85,7 +85,7 @@ export interface NVueElement {
ref: string
text?: string
preClassList: string[]
styleSheet: Record<string, Record<string, Record<string, unknown>>>
classList: string[]
parentNode: NVueElement | null
children: Array<NVueElement>
......@@ -98,10 +98,12 @@ export interface NVueElement {
insertAfter: (node: NVueElement, after: NVueElement) => void
setAttr: (key: string, value: any, silent?: boolean) => void
setAttrs: (attrs: Record<string, unknown>, silent?: boolean) => void
setPreClassList: (preClassList: string[]) => void
setClassList: (classList: string[]) => void
setStyle: (key: string, value: any, silent?: boolean) => void
setStyles: (attrs: Record<string, unknown>, silent?: boolean) => void
setStyleSheet: (
styleSheet: Record<string, Record<string, Record<string, unknown>>>
) => void
addEvent: (type: string, handler: Function, args?: Array<any>) => void
removeEvent: (type: string) => void
fireEvent: (type: string) => void
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或