fix: all components' user-select style prop's effect on safari

tusen-ai · Jul 6, 2022 · 1e7bb4a · 1e7bb4a
1 parent 3c06a36
commit 1e7bb4a
Show file tree

Hide file tree

Showing 24 changed files with 33 additions and 16 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -18,9 +18,10 @@
 - Fix `n-dropdown`'s disabled option has hover style.
 - Fix `n-dropdown`'s menu may shift when it's entering.
 - Fix `n-dropdown`'s transform origin may not be correct in Chrome.
-- Fix `n-radio-button` may not have correct cursor style in some versions of chrome, closes [#3243](https://github.com/TuSimple/naive-ui/issues/3243).
+- Fix `n-radio-button` may not have correct cursor style, closes [#3243](https://github.com/TuSimple/naive-ui/issues/3243).
 - Fix `n-input`'s text color is too shallow with disabled state in Safari, closes [#3241](https://github.com/TuSimple/naive-ui/issues/3241).
 - Fix `n-input`'s separator may have line wrap.
+- Fix all components' `user-select` style prop's effect on safari.
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -18,9 +18,10 @@
 - 修复 `n-dropdown` 禁用的选项有 hover 样式
 - 修复 `n-dropdown` 菜单出现可能会闪
 - 修复 `n-dropdown` 菜单的 transform origin 在 Chrome 上可能不正确
-- 修复 `n-radio-button` 在某些版本 Chrome 光标样式不正确，关闭 [#3243](https://github.com/TuSimple/naive-ui/issues/3243)
+- 修复 `n-radio-button` 光标样式可能不正确，关闭 [#3243](https://github.com/TuSimple/naive-ui/issues/3243)
 - 修复 `n-input` 在 disabled 状态下在 Safari 上文本颜色过浅，关闭 [#3241](https://github.com/TuSimple/naive-ui/issues/3241)
 - 修复 `n-input` 的分割符可能折行
+- 修复所有组件的 `user-select` 样式属性在 safari 的效果
 
 ### Feats
 

diff --git a/index.html b/index.html
@@ -14,15 +14,6 @@
       type="image/svg+xml"
       href="/demo/assets/images/naivelogo.svg"
     />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
-    />
-    <style>
-      :root {
-        --docsearch-primary-color: #18a058;
-      }
-    </style>
   </head>
   <body>
     <script>
@@ -42,7 +33,6 @@
       deriveTitleFromLocale(pathLocale)
     </script>
     <div id="app"></div>
-    <div id="search" style="display: none"></div>
     <script type="module" src="__INDEX__"></script>
   </body>
 </html>
diff --git a/src/_internal/scrollbar/src/styles/index.cssr.ts b/src/_internal/scrollbar/src/styles/index.cssr.ts
@@ -39,6 +39,7 @@ export default cB('scrollbar', `
       position: absolute;
       pointer-events: none;
       user-select: none;
+      -webkit-user-select: none;
     `, [
       cM('horizontal', `
         left: 2px;

diff --git a/src/_internal/selection/src/styles/index.cssr.ts b/src/_internal/selection/src/styles/index.cssr.ts
@@ -245,6 +245,7 @@ export default c([
         white-space: pre;
         visibility: hidden;
         user-select: none;
+        -webkit-user-select: none;
         opacity: 0;
       `)
     ]),

diff --git a/src/breadcrumb/src/styles/index.cssr.ts b/src/breadcrumb/src/styles/index.cssr.ts
@@ -82,6 +82,7 @@ export default cB('breadcrumb', `
       color: var(--n-separator-color);
       transition: color .3s var(--n-bezier);
       user-select: none;
+      -webkit-user-select: none;
     `),
     c('&:last-child', [
       cE('link', `

diff --git a/src/button/src/styles/index.cssr.ts b/src/button/src/styles/index.cssr.ts
@@ -60,6 +60,7 @@ export default c([
     align-items: center;
     justify-content: center;
     user-select: none;
+    -webkit-user-select: none;
     text-align: center;
     cursor: pointer;
     text-decoration: none;

diff --git a/src/carousel/src/styles/index.cssr.ts b/src/carousel/src/styles/index.cssr.ts
@@ -96,6 +96,7 @@ export default cB('carousel', `
     color: var(--n-arrow-color);
     border-radius: 8px;
     user-select: none;
+    -webkit-user-select: none;
     font-size: 18px;
   `, [
     c('svg', `

diff --git a/src/checkbox/src/styles/index.cssr.ts b/src/checkbox/src/styles/index.cssr.ts
@@ -142,6 +142,7 @@ export default c([
       flex-shrink: 0;
       flex-grow: 0;
       user-select: none;
+      -webkit-user-select: none;
     `),
     cB('checkbox-box', `
       position: absolute;
@@ -200,6 +201,7 @@ export default c([
       color: var(--n-text-color);
       transition: color .3s var(--n-bezier);
       user-select: none;
+      -webkit-user-select: none;
       padding: var(--n-label-padding);
     `, [
       c('&:empty', {

diff --git a/src/date-picker/src/styles/index.cssr.ts b/src/date-picker/src/styles/index.cssr.ts
@@ -113,6 +113,7 @@ export default c([
         min-width: var(--n-scroll-item-width);
         height: calc(var(--n-scroll-item-height) * 6);
         user-select: none;
+        -webkit-user-select: none;
       `, [
         c('&:first-child', `
           min-width: calc(var(--n-scroll-item-width) + 4px);
@@ -261,6 +262,7 @@ export default c([
       `),
       cE('month-year', `
         user-select: none;
+        -webkit-user-select: none;
         flex-grow: 1;
         position: relative;
       `, [
@@ -296,6 +298,7 @@ export default c([
     `, [
       cE('day', `
         user-select: none;
+        -webkit-user-select: none;
         line-height: 15px;
         width: var(--n-item-size);
         text-align: center;
@@ -314,6 +317,7 @@ export default c([
     `, [
       cB('date-panel-date', `
         user-select: none;
+        -webkit-user-select: none;
         position: relative;
         width: var(--n-item-size);
         height: var(--n-item-size);

diff --git a/src/drawer/demos/enUS/index.demo-entry.md b/src/drawer/demos/enUS/index.demo-entry.md
@@ -11,8 +11,8 @@ I think it is similar with modal, with a bit difference on placement.
 ```demo
 basic.vue
 multiple.vue
-target.vue
 closable.vue
+target.vue
 slot.vue
 scroll.vue
 resizable.vue

diff --git a/src/drawer/demos/enUS/resizable.demo.vue b/src/drawer/demos/enUS/resizable.demo.vue
@@ -1,5 +1,5 @@
 <markdown>
-# Adjustable drawer
+# Resizable drawer
 
 Remeber to use `default-width` or `default-height` with `resizable`.
 </markdown>

diff --git a/src/drawer/demos/zhCN/index.demo-entry.md b/src/drawer/demos/zhCN/index.demo-entry.md
@@ -11,8 +11,8 @@
 ```demo
 basic.vue
 multiple.vue
-target.vue
 closable.vue
+target.vue
 slot.vue
 scroll.vue
 a11y-debug.vue

diff --git a/src/drawer/src/styles/index.cssr.ts b/src/drawer/src/styles/index.cssr.ts
@@ -50,6 +50,7 @@ export default c([
     slideInFromBottomTransition(),
     cM('unselectable', `
       user-select: none; 
+      -webkit-user-select: none;
     `),
     cM('native-scrollbar', [
       cB('drawer-content-wrapper', `

diff --git a/src/form/src/styles/form-item.cssr.ts b/src/form/src/styles/form-item.cssr.ts
@@ -36,11 +36,13 @@ export default cB('form-item', {
   `, [
     cE('asterisk', `
       user-select: none;
+      -webkit-user-select: none;
       color: var(--n-asterisk-color);
       transition: color .3s var(--n-bezier);
     `),
     cE('asterisk-placeholder', `
       user-select: none;
+      -webkit-user-select: none;
       visibility: hidden;      
     `)
   ]),

diff --git a/src/image/src/styles/index.cssr.ts b/src/image/src/styles/index.cssr.ts
@@ -67,6 +67,7 @@ export default c([
   ]),
   cB('image-preview', `
     user-select: none;
+    -webkit-user-select: none;
     pointer-events: all;
     margin: auto;
     max-height: calc(100vh - 32px);

diff --git a/src/input/src/styles/input-group-label.cssr.ts b/src/input/src/styles/input-group-label.cssr.ts
@@ -11,6 +11,7 @@ import { cB, cE } from '../../../_utils/cssr'
 export default cB('input-group-label', `
   position: relative;
   user-select: none;
+  -webkit-user-select: none;
   box-sizing: border-box;
   padding: 0 12px;
   display: inline-block;

diff --git a/src/pagination/src/styles/index.cssr.ts b/src/pagination/src/styles/index.cssr.ts
@@ -92,6 +92,7 @@ export default cB('pagination', `
     position: relative;
     cursor: pointer;
     user-select: none;
+    -webkit-user-select: none;
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/src/radio/src/styles/radio-group.cssr.ts b/src/radio/src/styles/radio-group.cssr.ts
@@ -45,6 +45,7 @@ export default cB('radio-group', `
     outline: none;
     position: relative;
     user-select: none;
+    -webkit-user-select: none;
     display: inline-block;
     box-sizing: border-box;
     padding-left: 14px;

diff --git a/src/radio/src/styles/radio.cssr.ts b/src/radio/src/styles/radio.cssr.ts
@@ -22,6 +22,7 @@ export default cB('radio', `
   outline: none;
   position: relative;
   user-select: none;
+  -webkit-user-select: none;
   display: inline-flex;
   align-items: flex-start;
   flex-wrap: nowrap;

diff --git a/src/slider/src/styles/index.cssr.ts b/src/slider/src/styles/index.cssr.ts
@@ -38,6 +38,7 @@ export default c([
     width: 100%;
     cursor: pointer;
     user-select: none;
+    -webkit-user-select: none;
   `, [
     cM('reverse', [
       cB('slider-handles', [

diff --git a/src/spin/src/styles/index.cssr.ts b/src/spin/src/styles/index.cssr.ts
@@ -60,6 +60,7 @@ export default c([
   `, [
     cM('spinning', `
       user-select: none;
+      -webkit-user-select: none;
       pointer-events: none;
       opacity: var(--n-opacity-spinning);
     `)

diff --git a/src/switch/src/styles/index.cssr.ts b/src/switch/src/styles/index.cssr.ts
@@ -25,6 +25,7 @@ export default cB('switch', `
   min-width: var(--n-width);
   vertical-align: middle;
   user-select: none;
+  -webkit-user-select: none;
   display: inline-flex;
   outline: none;
   justify-content: center;

diff --git a/src/watermark/src/styles/index.cssr.ts b/src/watermark/src/styles/index.cssr.ts
@@ -4,7 +4,10 @@ export default c([
   cB('watermark-container', `
     position: relative;
   `, [
-    cNotM('selectable', 'user-select: none;')
+    cNotM('selectable', `
+      user-select: none;
+      -webkit-user-select: none;
+    `)
   ]),
   cB('watermark', `
     position: absolute;