design-notes/think.md
我的锅...远程分支没设定好，推得哪个自己都不知道。
我的锅，忘了为啥了。确实是同步的，是我没有考虑到 v-model 这东西应该用什么方法测试。
a >>> b 被编译成了 a > > > b
其他的我还没想好
在一个 single filterable select 中，会出现一个 bug...，这个 bug 会让溢出屏幕的 item 不再显示。感觉可能是 Chrome 为了性能优化没有渲染一些在屏幕外面的东西，暂时通过 translateZ(0) 解决了。
popover 的 hover 有问题，哎...一大堆东西闪来闪去就可能 mouseleave 没触发就一直留在那了
overflow: hidden 可以解决，这是 BFC 的问题
width: fit-content, min-content, max-content, intrinsic, extrinsic flex, flex-grow
render (h) {
console.log(this.$props)
return h('div', {
staticClass: 'n-steps'
}, mapSteps({ ...this.$props }, this.$slots.default))
}
为什么 $props 不一样？解构赋值做了什么 document.querySelector('*[n-id=888d3] .simulate-transparent-text') 不合法？
函数节流别忘了加上@scroll
activator 外面不应该包元素检查内存泄露可能性考虑级联异步 api placement $refs 变化更改
picker 在 input 聚焦的时候，esc 按钮不符合预期
block transition for date picker in range not via :key
select menu 更加自治一点 比如 isSelected，可能最后要加到 vmodel 为止 tooltip css max-content 兼容性 popover z-index 问题
popover 停止追踪的时机
popover 可能 activator 和 content 不同步，在 beforeRouteEnter locale change 的时候！！！
confirm 有 bug = =...和 button 颜色相关，之后检查吧
Radio Button 默认主题下是否 hollow out，这是个问题
base picker focus 问题
Dropdown Submenu 定位问题还有那个... Modal + border 的问题，怎么解决
Anchor Bug 复现 at typography
Damn eslint
What fixed it for me was using double quotes and an escaping slash like so:
"lint": "eslint \"**/*.{js,jsx}\" --quiet",
Previously, it would not work with single quotes:
"lint": "eslint '**/*.{js,jsx}' --quiet",
为了按需引入打包大小依旧可控，需要用某种方式让互相的依赖变为外部依赖。或者就维持原本的文件结构，这样的话需要的是 babel。看起来还是有点麻烦，之后再解决吧。
虽然没啥用了，还是留着吧
/**
* In Chrome, Firefox, Safari, this only happens when devtool opened
* However only Chrome and Firefox will refocus at input element
*/
const devtoolIsOpened = e.target === document.activeElement
主体差不多做完了，好累
zindex 有点问题
zindex 的问题解决了，虽然很简单，在 static 元素上设定 zindex 没用，😅
在搞响应式页面的时候，我意识到存粹依赖 css 是一种不可靠的方式。虽然从布局层面 grid layout 已经给出了一种近乎完美的解决方案，但是涉及到一切内联样式的... 都需要从 js 的层面来解决。目前想来最 trival 的方式就是让每个 config consumer 都能拿到这个值。
一想到到了 1.0 就要写 changelog，就感觉 🥚 在隐隐作痛
一个有趣的事情是，blur 到 document.body 之后，document.activeElement 是 body，但是 blurEvent.relatedTarget 会被设为 null
rerender 报警了
h('NLayout', {
ref: 'body',
style: { ...this.contentStyle },
props: {
'use-native-scrollbar': false,
'scroll-content-style': {
width: '100%',
boxSizing: 'border-box',
padding: this.paddingBody ? '21px 48px' : null
}
}
}, null)
一个是 computed 导致重复渲染，还有一个是 getScrollParent 缓存的问题
我在想要不要帮用户检查值，比如说一些不存在的值...现在这个问题就出现在 checkbox 里面，这是个哲学问题
得看懂 vue 究竟是怎么更新组件的...
目前看来，对于动态样式，有两种情况，一种是像直接通过 prop 生效，另一种是通过组合才生效，比如 error 的 formitem 与 input，判断是否要生成样式是个比较麻烦的事，目前看来比较凑巧的是这个样式的体积不是很大，其实放在哪边都差不多= =
主题变量有两种组织方式：
light {
error: {
backgroundColor: {
hover
}
}
}
或者
light {
backgroundColor: {
error: {
default
}
}
}
我目前觉得第一种好点，因为扩展一般是按照种类扩展，每次插入一个同样结构的块。而第二种是每次扩展的时候在每个块里同样的位置插入一行，这样扩展的时候写起来很别扭。
shouldMount 可以加到 withCssr
style overrides RFC
颜色命名的方式
1.
{
xColor,
xActiveColor,
xDisabledColor,
secondaryTextColor,
tertiaryTextColor
},
{ // 这种拒绝，因为只有一个状态也需要 default
xColor: {
default,
active,
disabled
}
}
// 现在感觉第三种比较好
{
xColor,
xColorActive,
xColorDisabled,
textColor2, // 暂时可以先不改
textColor3, //
textColorDisabled,
textColor1,
textColor2,
textColor3,
textColorQ...
}
// 还有一点是去掉 backgroundColor 中的 background，因为 color & textColor 区分度已经够了
// no import on demand
import naive from 'naive-ui'
naive.Button.overrideStyles({
light: {
borderRadius: 8
},
dark: {
borderRadius: 8
}
})
naive.InputNumber.overrideStyles({
light: {
borderRadius: 8
},
dark: {
borderRadius: 8
}
})
naive.themes.light.overrideStyles({
primaryColor: '1234'
})
Vue.use(naive)
// import on demand
// essential
import create from 'naive-ui/create'
import lightStyle from 'naive-ui/styles/light'
import darkStyle from 'naive-ui/styles/dark'
// components
import Button from 'naive-ui/button'
// styles
import buttonLightStyle from 'naive-ui/button/styles/light'
import buttonDarkStyle from 'naive-ui/button/styles/dark'
create({
components: [Button],
styles: [
// base styles, required for each theme
lightStyle,
darkStyle,
// component styles
buttonLightStyle,
buttonDarkStyle
]
})
// extend Element.prototype.scrollTo
// override 1 (xCoord, yCoord) keep it
// overried 2 ScrollOptions
// ScrollOptions {
// x: number,
// y: number,
// behavior: 'auto' | 'smooth'
// index?: number
// key?: number
// el?: Element
// position?: 'bottom' | 'top',
// slient?: boolean
// }
preserveWhitespace: false, change it to whitespace: 'condense'Done
// modal transform scale
// Notification content close
// form required css
// Md Loader 对于 strong 的处理
// pref hollowout, cache next bg color
// issue fix, add delay prop
// add trigger to tooltip
// outside click delegate select
// DatePicker range Bug
// Scrollbar Firefox...
// scrollbar 在 resize 之后滚动会有问题
// ResizeObserver Polyfill
// Select 需要进一步重构，现在这种状况 collector 在 corner case 中不会调 updated 钩子，要把 key 换成 value
需要注意的是，以 Base 开头的 CSS 文件并不会确保随着版本的更新保持稳定（我会尽力的保持）。因为它是内部实现的一部分。如果你维持按需引入时升级后样式出现了错误，可以来这里检查一下。虽然把这些公共样式各自打包进每个用到他们的组件是可行的，但是相比于升级的繁琐，我更不喜欢重复的代码。（这不意味着这种解决方案是“更好的”，它只是种选择而已）
What should be noted is the CSS files start with 'Base' are not guaranteed to be stable (I'll try not to change them). Because they are parts of internal implementation of the library. If you find import mistakes after upgrade the package, you may have a look at here. It is possible to pack these common styles inside every component using it. However, compared to add routines when upgrading package, I perfer not to import duplicate codes. (It doesn't mean this is a better solution. It is only a choice.)
How I want to use styling API ?
// index.js
import { createApp } from 'vue'
import { create, enUS, buttonLight, inputLight } from 'naive-ui'
const app = createApp()
const naive = create({
// install components globally or import it in other component are both ok
// components: [
// Button,
// Input
// ],
styles: [buttonLight, inputLight],
locales: [enUS]
})
app.use(naive)
否。前提条件是 svg 在合适的地方用到了 currentColor。
for example:
<n-icon>
<svg>
<line stroke="currentColor">
</svg>
</n-icon>
我期望的是 n-icon 一直跟着外部走，如果外面有 transtion 了那内部其实不需要 transition，不然的话会重叠。如果一定需要 transition 的话应该去保证样式带 color transition。