Skip to content

U
uni-app

DCloud / uni-app
6 个月 前同步成功

通知 751
Star 38709
Fork 3642
U
uni-app
提交 fdb017c6 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

wip(app): nvue styler

上级 e7d12667
隐藏空白更改
内联 并排
Showing with 368 addition and 186 deletion
packages/uni-components/dist/components.js
浏览文件 @ fdb017c6
...@@ -102,8 +102,10 @@ function createNVueTextVNode(text, attrs) { ...@@ -102,8 +102,10 @@ function createNVueTextVNode(text, attrs) {
} }
const navigatorStyles = [{ const navigatorStyles = [{
"navigator-hover": { "navigator-hover": {
backgroundColor: "rgba(0,0,0,0.1)", "": {
opacity: 0.7 backgroundColor: "rgba(0,0,0,0.1)",
opacity: 0.7
}
} }
}]; }];
var Navigator = defineComponent({ var Navigator = defineComponent({
...@@ -311,179 +313,265 @@ const buttonProps = { ...@@ -311,179 +313,265 @@ const buttonProps = {
}; };
const buttonStyle = [{ const buttonStyle = [{
ub: { ub: {
flexDirection: "row", "": {
alignItems: "center", flexDirection: "row",
justifyContent: "center", alignItems: "center",
position: "relative", justifyContent: "center",
paddingLeft: "5", position: "relative",
paddingRight: "5", paddingLeft: "5",
overflow: "hidden", paddingRight: "5",
color: "#000000", overflow: "hidden",
backgroundColor: "#f8f8f8", color: "#000000",
borderRadius: "5", backgroundColor: "#f8f8f8",
borderStyle: "solid", borderRadius: "5",
borderWidth: "1", borderStyle: "solid",
borderColor: "#dbdbdb" borderWidth: "1",
borderColor: "#dbdbdb"
}
}, },
"ub-t": { "ub-t": {
color: "#000000", "": {
fontSize: "18", color: "#000000",
textDecoration: "none", fontSize: "18",
lineHeight: "46" textDecoration: "none",
lineHeight: "46"
}
}, },
"ub-d": { "ub-d": {
backgroundColor: "#f8f8f8" "": {
backgroundColor: "#f8f8f8"
}
}, },
"ub-p": { "ub-p": {
backgroundColor: "#007aff", "": {
borderColor: "#0062cc" backgroundColor: "#007aff",
borderColor: "#0062cc"
}
}, },
"ub-w": { "ub-w": {
backgroundColor: "#e64340", "": {
borderColor: "#b83633" backgroundColor: "#e64340",
borderColor: "#b83633"
}
}, },
"ub-d-t": { "ub-d-t": {
color: "#000000" "": {
color: "#000000"
}
}, },
"ub-p-t": { "ub-p-t": {
color: "#ffffff" "": {
color: "#ffffff"
}
}, },
"ub-w-t": { "ub-w-t": {
color: "#ffffff" "": {
color: "#ffffff"
}
}, },
"ub-d-d": { "ub-d-d": {
backgroundColor: "#f7f7f7" "": {
backgroundColor: "#f7f7f7"
}
}, },
"ub-p-d": { "ub-p-d": {
backgroundColor: "#63acfc", "": {
borderColor: "#4f8aca" backgroundColor: "#63acfc",
borderColor: "#4f8aca"
}
}, },
"ub-w-d": { "ub-w-d": {
backgroundColor: "#ec8b89", "": {
borderColor: "#bd6f6e" backgroundColor: "#ec8b89",
borderColor: "#bd6f6e"
}
}, },
"ub-d-t-d": { "ub-d-t-d": {
color: "#cccccc" "": {
color: "#cccccc"
}
}, },
"ub-p-t-d": { "ub-p-t-d": {
color: "rgba(255,255,255,0.6)" "": {
color: "rgba(255,255,255,0.6)"
}
}, },
"ub-w-t-d": { "ub-w-t-d": {
color: "rgba(255,255,255,0.6)" "": {
color: "rgba(255,255,255,0.6)"
}
}, },
"ub-d-plain": { "ub-d-plain": {
borderColor: "#353535", "": {
backgroundColor: "rgba(0,0,0,0)" borderColor: "#353535",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-p-plain": { "ub-p-plain": {
borderColor: "#007aff", "": {
backgroundColor: "rgba(0,0,0,0)" borderColor: "#007aff",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-w-plain": { "ub-w-plain": {
borderColor: "#e64340", "": {
backgroundColor: "rgba(0,0,0,0)" borderColor: "#e64340",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-d-t-plain": { "ub-d-t-plain": {
color: "#353535" "": {
color: "#353535"
}
}, },
"ub-p-t-plain": { "ub-p-t-plain": {
color: "#007aff" "": {
color: "#007aff"
}
}, },
"ub-w-t-plain": { "ub-w-t-plain": {
color: "#e64340" "": {
color: "#e64340"
}
}, },
"ub-d-d-plain": { "ub-d-d-plain": {
borderColor: "#c6c6c6", "": {
backgroundColor: "rgba(0,0,0,0)" borderColor: "#c6c6c6",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-p-d-plain": { "ub-p-d-plain": {
borderColor: "#c6c6c6", "": {
backgroundColor: "rgba(0,0,0,0)" borderColor: "#c6c6c6",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-w-d-plain": { "ub-w-d-plain": {
borderColor: "#c6c6c6", "": {
backgroundColor: "rgba(0,0,0,0)" borderColor: "#c6c6c6",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-d-t-d-plain": { "ub-d-t-d-plain": {
color: "rgba(0,0,0,0.2)" "": {
color: "rgba(0,0,0,0.2)"
}
}, },
"ub-p-t-d-plain": { "ub-p-t-d-plain": {
color: "rgba(0,0,0,0.2)" "": {
color: "rgba(0,0,0,0.2)"
}
}, },
"ub-w-t-d-plain": { "ub-w-t-d-plain": {
color: "rgba(0,0,0,0.2)" "": {
color: "rgba(0,0,0,0.2)"
}
}, },
"ub-mini": { "ub-mini": {
lineHeight: "30", "": {
fontSize: "13", lineHeight: "30",
paddingTop: 0, fontSize: "13",
paddingRight: "17.5", paddingTop: 0,
paddingBottom: 0, paddingRight: "17.5",
paddingLeft: "17.5" paddingBottom: 0,
paddingLeft: "17.5"
}
}, },
"ub-loading": { "ub-loading": {
width: "18", "": {
height: "18", width: "18",
marginRight: "10" height: "18",
marginRight: "10"
}
}, },
"ub-d-loading": { "ub-d-loading": {
color: "rgba(255,255,255,0.6)", "": {
backgroundColor: "rgba(0,0,0,0)" color: "rgba(255,255,255,0.6)",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-p-loading": { "ub-p-loading": {
color: "rgba(255,255,255,0.6)", "": {
backgroundColor: "rgba(0,0,0,0)" color: "rgba(255,255,255,0.6)",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-w-loading": { "ub-w-loading": {
color: "rgba(255,255,255,0.6)", "": {
backgroundColor: "rgba(0,0,0,0)" color: "rgba(255,255,255,0.6)",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-d-loading-plain": { "ub-d-loading-plain": {
color: "#353535" "": {
color: "#353535"
}
}, },
"ub-p-loading-plain": { "ub-p-loading-plain": {
color: "#007aff", "": {
backgroundColor: "#0062cc" color: "#007aff",
backgroundColor: "#0062cc"
}
}, },
"ub-w-loading-plain": { "ub-w-loading-plain": {
color: "#e64340", "": {
backgroundColor: "rgba(0,0,0,0)" color: "#e64340",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-d-hover": { "ub-d-hover": {
opacity: 0.8, "": {
backgroundColor: "#dedede" opacity: 0.8,
backgroundColor: "#dedede"
}
}, },
"ub-p-hover": { "ub-p-hover": {
opacity: 0.8, "": {
backgroundColor: "#0062cc" opacity: 0.8,
backgroundColor: "#0062cc"
}
}, },
"ub-w-hover": { "ub-w-hover": {
opacity: 0.8, "": {
backgroundColor: "#ce3c39" opacity: 0.8,
backgroundColor: "#ce3c39"
}
}, },
"ub-d-t-hover": { "ub-d-t-hover": {
color: "rgba(0,0,0,0.6)" "": {
color: "rgba(0,0,0,0.6)"
}
}, },
"ub-p-t-hover": { "ub-p-t-hover": {
color: "rgba(255,255,255,0.6)" "": {
color: "rgba(255,255,255,0.6)"
}
}, },
"ub-w-t-hover": { "ub-w-t-hover": {
color: "rgba(255,255,255,0.6)" "": {
color: "rgba(255,255,255,0.6)"
}
}, },
"ub-d-hover-plain": { "ub-d-hover-plain": {
color: "rgba(53,53,53,0.6)", "": {
borderColor: "rgba(53,53,53,0.6)", color: "rgba(53,53,53,0.6)",
backgroundColor: "rgba(0,0,0,0)" borderColor: "rgba(53,53,53,0.6)",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-p-hover-plain": { "ub-p-hover-plain": {
color: "rgba(26,173,25,0.6)", "": {
borderColor: "rgba(0,122,255,0.6)", color: "rgba(26,173,25,0.6)",
backgroundColor: "rgba(0,0,0,0)" borderColor: "rgba(0,122,255,0.6)",
backgroundColor: "rgba(0,0,0,0)"
}
}, },
"ub-w-hover-plain": { "ub-w-hover-plain": {
color: "rgba(230,67,64,0.6)", "": {
borderColor: "rgba(230,67,64,0.6)", color: "rgba(230,67,64,0.6)",
backgroundColor: "rgba(0,0,0,0)" borderColor: "rgba(230,67,64,0.6)",
backgroundColor: "rgba(0,0,0,0)"
}
} }
}]; }];
const TYPES = { const TYPES = {
......
packages/uni-components/src/nvue/button/index.tsx
浏览文件 @ fdb017c6
...@@ -9,186 +9,274 @@ import { ...@@ -9,186 +9,274 @@ import {
import { uniLabelKey, UniLabelCtx } from '../label' import { uniLabelKey, UniLabelCtx } from '../label'
import { useListeners } from '../../helpers/useListeners' import { useListeners } from '../../helpers/useListeners'
import { useAttrs } from '../../helpers/useAttrs' import { useAttrs } from '../../helpers/useAttrs'
import { createNVueTextVNode, useHoverClass } from '../utils' import {
createNVueTextVNode,
NVueComponentStyles,
useHoverClass,
} from '../utils'
import { buttonProps } from '../../components/button' import { buttonProps } from '../../components/button'
import { extend } from '@vue/shared' import { extend } from '@vue/shared'
const buttonStyle = [ const buttonStyle: NVueComponentStyles = [
{ {
ub: { ub: {
flexDirection: 'row', '': {
alignItems: 'center', flexDirection: 'row',
justifyContent: 'center', alignItems: 'center',
position: 'relative', justifyContent: 'center',
paddingLeft: '5', position: 'relative',
paddingRight: '5', paddingLeft: '5',
overflow: 'hidden', paddingRight: '5',
color: '#000000', overflow: 'hidden',
backgroundColor: '#f8f8f8', color: '#000000',
borderRadius: '5', backgroundColor: '#f8f8f8',
borderStyle: 'solid', borderRadius: '5',
borderWidth: '1', borderStyle: 'solid',
borderColor: '#dbdbdb', borderWidth: '1',
borderColor: '#dbdbdb',
},
}, },
'ub-t': { 'ub-t': {
color: '#000000', '': {
fontSize: '18', color: '#000000',
textDecoration: 'none', fontSize: '18',
lineHeight: '46', textDecoration: 'none',
lineHeight: '46',
},
}, },
'ub-d': { 'ub-d': {
backgroundColor: '#f8f8f8', '': {
backgroundColor: '#f8f8f8',
},
}, },
'ub-p': { 'ub-p': {
backgroundColor: '#007aff', '': {
borderColor: '#0062cc', backgroundColor: '#007aff',
borderColor: '#0062cc',
},
}, },
'ub-w': { 'ub-w': {
backgroundColor: '#e64340', '': {
borderColor: '#b83633', backgroundColor: '#e64340',
borderColor: '#b83633',
},
}, },
'ub-d-t': { 'ub-d-t': {
color: '#000000', '': {
color: '#000000',
},
}, },
'ub-p-t': { 'ub-p-t': {
color: '#ffffff', '': {
color: '#ffffff',
},
}, },
'ub-w-t': { 'ub-w-t': {
color: '#ffffff', '': {
color: '#ffffff',
},
}, },
'ub-d-d': { 'ub-d-d': {
backgroundColor: '#f7f7f7', '': {
backgroundColor: '#f7f7f7',
},
}, },
'ub-p-d': { 'ub-p-d': {
backgroundColor: '#63acfc', '': {
borderColor: '#4f8aca', backgroundColor: '#63acfc',
borderColor: '#4f8aca',
},
}, },
'ub-w-d': { 'ub-w-d': {
backgroundColor: '#ec8b89', '': {
borderColor: '#bd6f6e', backgroundColor: '#ec8b89',
borderColor: '#bd6f6e',
},
}, },
'ub-d-t-d': { 'ub-d-t-d': {
color: '#cccccc', '': {
color: '#cccccc',
},
}, },
'ub-p-t-d': { 'ub-p-t-d': {
color: 'rgba(255,255,255,0.6)', '': {
color: 'rgba(255,255,255,0.6)',
},
}, },
'ub-w-t-d': { 'ub-w-t-d': {
color: 'rgba(255,255,255,0.6)', '': {
color: 'rgba(255,255,255,0.6)',
},
}, },
'ub-d-plain': { 'ub-d-plain': {
borderColor: '#353535', '': {
backgroundColor: 'rgba(0,0,0,0)', borderColor: '#353535',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-p-plain': { 'ub-p-plain': {
borderColor: '#007aff', '': {
backgroundColor: 'rgba(0,0,0,0)', borderColor: '#007aff',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-w-plain': { 'ub-w-plain': {
borderColor: '#e64340', '': {
backgroundColor: 'rgba(0,0,0,0)', borderColor: '#e64340',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-d-t-plain': { 'ub-d-t-plain': {
color: '#353535', '': {
color: '#353535',
},
}, },
'ub-p-t-plain': { 'ub-p-t-plain': {
color: '#007aff', '': {
color: '#007aff',
},
}, },
'ub-w-t-plain': { 'ub-w-t-plain': {
color: '#e64340', '': {
color: '#e64340',
},
}, },
'ub-d-d-plain': { 'ub-d-d-plain': {
borderColor: '#c6c6c6', '': {
backgroundColor: 'rgba(0,0,0,0)', borderColor: '#c6c6c6',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-p-d-plain': { 'ub-p-d-plain': {
borderColor: '#c6c6c6', '': {
backgroundColor: 'rgba(0,0,0,0)', borderColor: '#c6c6c6',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-w-d-plain': { 'ub-w-d-plain': {
borderColor: '#c6c6c6', '': {
backgroundColor: 'rgba(0,0,0,0)', borderColor: '#c6c6c6',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-d-t-d-plain': { 'ub-d-t-d-plain': {
color: 'rgba(0,0,0,0.2)', '': {
color: 'rgba(0,0,0,0.2)',
},
}, },
'ub-p-t-d-plain': { 'ub-p-t-d-plain': {
color: 'rgba(0,0,0,0.2)', '': {
color: 'rgba(0,0,0,0.2)',
},
}, },
'ub-w-t-d-plain': { 'ub-w-t-d-plain': {
color: 'rgba(0,0,0,0.2)', '': {
color: 'rgba(0,0,0,0.2)',
},
}, },
'ub-mini': { 'ub-mini': {
lineHeight: '30', '': {
fontSize: '13', lineHeight: '30',
paddingTop: 0, fontSize: '13',
paddingRight: '17.5', paddingTop: 0,
paddingBottom: 0, paddingRight: '17.5',
paddingLeft: '17.5', paddingBottom: 0,
paddingLeft: '17.5',
},
}, },
'ub-loading': { 'ub-loading': {
width: '18', '': {
height: '18', width: '18',
marginRight: '10', height: '18',
marginRight: '10',
},
}, },
'ub-d-loading': { 'ub-d-loading': {
color: 'rgba(255,255,255,0.6)', '': {
backgroundColor: 'rgba(0,0,0,0)', color: 'rgba(255,255,255,0.6)',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-p-loading': { 'ub-p-loading': {
color: 'rgba(255,255,255,0.6)', '': {
backgroundColor: 'rgba(0,0,0,0)', color: 'rgba(255,255,255,0.6)',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-w-loading': { 'ub-w-loading': {
color: 'rgba(255,255,255,0.6)', '': {
backgroundColor: 'rgba(0,0,0,0)', color: 'rgba(255,255,255,0.6)',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-d-loading-plain': { 'ub-d-loading-plain': {
color: '#353535', '': { color: '#353535' },
}, },
'ub-p-loading-plain': { 'ub-p-loading-plain': {
color: '#007aff', '': {
backgroundColor: '#0062cc', color: '#007aff',
backgroundColor: '#0062cc',
},
}, },
'ub-w-loading-plain': { 'ub-w-loading-plain': {
color: '#e64340', '': {
backgroundColor: 'rgba(0,0,0,0)', color: '#e64340',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-d-hover': { 'ub-d-hover': {
opacity: 0.8, '': {
backgroundColor: '#dedede', opacity: 0.8,
backgroundColor: '#dedede',
},
}, },
'ub-p-hover': { 'ub-p-hover': {
opacity: 0.8, '': {
backgroundColor: '#0062cc', opacity: 0.8,
backgroundColor: '#0062cc',
},
}, },
'ub-w-hover': { 'ub-w-hover': {
opacity: 0.8, '': {
backgroundColor: '#ce3c39', opacity: 0.8,
backgroundColor: '#ce3c39',
},
}, },
'ub-d-t-hover': { 'ub-d-t-hover': {
color: 'rgba(0,0,0,0.6)', '': {
color: 'rgba(0,0,0,0.6)',
},
}, },
'ub-p-t-hover': { 'ub-p-t-hover': {
color: 'rgba(255,255,255,0.6)', '': {
color: 'rgba(255,255,255,0.6)',
},
}, },
'ub-w-t-hover': { 'ub-w-t-hover': {
color: 'rgba(255,255,255,0.6)', '': {
color: 'rgba(255,255,255,0.6)',
},
}, },
'ub-d-hover-plain': { 'ub-d-hover-plain': {
color: 'rgba(53,53,53,0.6)', '': {
borderColor: 'rgba(53,53,53,0.6)', color: 'rgba(53,53,53,0.6)',
backgroundColor: 'rgba(0,0,0,0)', borderColor: 'rgba(53,53,53,0.6)',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-p-hover-plain': { 'ub-p-hover-plain': {
color: 'rgba(26,173,25,0.6)', '': {
borderColor: 'rgba(0,122,255,0.6)', color: 'rgba(26,173,25,0.6)',
backgroundColor: 'rgba(0,0,0,0)', borderColor: 'rgba(0,122,255,0.6)',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
'ub-w-hover-plain': { 'ub-w-hover-plain': {
color: 'rgba(230,67,64,0.6)', '': {
borderColor: 'rgba(230,67,64,0.6)', color: 'rgba(230,67,64,0.6)',
backgroundColor: 'rgba(0,0,0,0)', borderColor: 'rgba(230,67,64,0.6)',
backgroundColor: 'rgba(0,0,0,0)',
},
}, },
}, },
] ]
......
packages/uni-components/src/nvue/navigator/index.tsx
浏览文件 @ fdb017c6
...@@ -3,13 +3,15 @@ import { ...@@ -3,13 +3,15 @@ import {
createNavigatorOnClick, createNavigatorOnClick,
navigatorProps, navigatorProps,
} from '../../components/navigator' } from '../../components/navigator'
import { useHoverClass } from '../utils' import { NVueComponentStyles, useHoverClass } from '../utils'
const navigatorStyles: Record<string, Record<string, string | number>>[] = [ const navigatorStyles: NVueComponentStyles = [
{ {
'navigator-hover': { 'navigator-hover': {
backgroundColor: 'rgba(0,0,0,0.1)', '': {
opacity: 0.7, backgroundColor: 'rgba(0,0,0,0.1)',
opacity: 0.7,
},
}, },
}, },
] ]
......
packages/uni-components/src/nvue/utils.ts
浏览文件 @ fdb017c6
import { createElementVNode } from 'vue' import { createElementVNode } from 'vue'
import { extend, hasOwn } from '@vue/shared' import { extend, hasOwn } from '@vue/shared'
export type NVueComponentStyles = Array<
Record<string, Record<string, Record<string, unknown>>>
>
interface HoverProps { interface HoverProps {
hoverClass?: string hoverClass?: string
hoverStartTime?: number | string hoverStartTime?: number | string
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或