Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: sync 3.20.0 to dev #2639

Merged
merged 17 commits into from
Dec 11, 2024
Merged

feat: sync 3.20.0 to dev #2639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5669126
fix: fix problems found during verification (#2610)
zzcr Dec 4, 2024
455668d
feat: update changelog and playground (#2612)
zzcr Dec 5, 2024
e81f11c
feat: change default router link (#2613)
zzcr Dec 5, 2024
678ab67
fix(anchor): [anchor] fixed the bug that querySelect cannot select sp…
zzcr Dec 5, 2024
490ad10
fix(anchor): [anchor] fixed the bug that querySelect cannot select sp…
zzcr Dec 6, 2024
1908d57
feat: update dcos version
zzcr Dec 6, 2024
faa99de
docs: hide the search input on the left menu at open source sites (#2…
kagol Dec 4, 2024
c6a0664
feat: update dcos version
zzcr Dec 6, 2024
ff0247d
fix(site): add overflow for datepicker's demo on small screen (#2626)
shenjunjian Dec 9, 2024
43333e4
feat: optimize the example display style of the official website (#2624)
zzcr Dec 9, 2024
569ac3c
fix: fixed the problem of global search js resource access failure (#…
zzcr Dec 9, 2024
c79dd29
feat(tree-menu): [tree-menu] Resolve the warning issue on the tree-me…
wuyiping0628 Dec 9, 2024
baaa366
fix: fix search box style (#2630)
kagol Dec 9, 2024
ba839e0
feat: support global search in multiple environments and fix pipeline…
zzcr Dec 9, 2024
df63204
chore: upgrade fluent editor version (#2636)
kagol Dec 10, 2024
c9991b2
feat: support global search shortcut keys to search multiple websites…
zzcr Dec 11, 2024
36b3838
Merge branch 'release-3.20.0' of github.com:opentiny/tiny-vue into sy…
zzcr Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,474 changes: 126 additions & 1,348 deletions examples/sites/demos/pc/webdoc/changelog.md
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 1 addition & 12 deletions examples/sites/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,13 @@
window.DEPLOY_URL = ''
window.process = { env: {} }
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/>
</head>

<body class="of-hidden">
<div id="header"></div>
<app-root></app-root>
<div id="app" class="wp100 hp100 pt60 of-hidden"></div>
<div class="search-box" style="display: none;"></div>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
<script type="text/javascript">
docsearch({
appId: "AGPA5UXHMH",
apiKey: "5fa09fc20270efa61d68e2c2eb0f56df",
indexName: "opentiny",
container: ".search-box",
debug: false
});
</script>
<div class="search-box"></div>
<!-- prettier-ignore -->
<script id="tinyui-design-common" src="/static/js/design-common.js"></script>
<script type="module" src="./src/main.js"></script>
Expand Down
7 changes: 5 additions & 2 deletions examples/sites/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@opentiny/vue-docs",
"version": "3.20.0",
"version": "3.20.7",
"license": "MIT",
"scripts": {
"start": "vite",
Expand Down Expand Up @@ -47,7 +47,10 @@
"tailwindcss": "^3.2.4",
"vue": "^3.4.31",
"vue-i18n": "^9.1.10",
"vue-router": "4.1.5"
"vue-router": "4.1.5",
"@docsearch/js": "^3.8.0",
"@docsearch/css": "^3.8.0",
"@docsearch/react": "npm:@docsearch/css"
},
"devDependencies": {
"@opentiny-internal/unplugin-virtual-template": "workspace:~",
Expand Down
7 changes: 3 additions & 4 deletions examples/sites/playground/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const isMobileFirst = tinyMode === 'mobile-first'
const isSaas = tinyTheme === 'saas'
const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览

const versions = ['3.19', '3.18', '3.17']
const versions = ['3.20', '3.19', '3.18']
const getVersion = () => {
if (isPreview) {
return versions[0]
Expand Down Expand Up @@ -84,9 +84,8 @@ const createImportMap = (version) => {
'sortablejs': `${cdnHost}/sortablejs${versionDelimiter}1.15.0/${fileDelimiter}modular/sortable.esm.js`
}
if (['aurora', 'saas'].includes(tinyTheme)) {
imports[
`@opentiny/vue-design-${tinyTheme}`
] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
imports[`@opentiny/vue-design-${tinyTheme}`] =
`${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
}
if (isSaas) {
imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`
Expand Down
7 changes: 0 additions & 7 deletions examples/sites/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ import { iconClose } from '@opentiny/vue-icon'
import { appData } from './tools'
import useTheme from './tools/useTheme'

const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open'

export default defineComponent({
name: 'AppVue',
props: [],
Expand All @@ -42,11 +40,6 @@ export default defineComponent({
}
})
common.renderHeader()

const searchBox = document.querySelector('.search-box')
if (searchBox && envTarget === 'open') {
searchBox.style.display = 'block'
}
})
const { designConfig, currentThemeKey } = useTheme()

Expand Down
18 changes: 18 additions & 0 deletions examples/sites/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,29 @@ import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
import css from 'highlight.js/lib/languages/css'
import html from 'highlight.js/lib/languages/xml'
import docsearch from '@docsearch/js'
import '@docsearch/css'
import { doSearchEverySite } from './tools/docsearch'

const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open'

hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('css', css)
hljs.registerLanguage('html', html)

docsearch({
appId: 'AGPA5UXHMH',
apiKey: '5fa09fc20270efa61d68e2c2eb0f56df',
indexName: 'opentiny',
container: '.search-box',
debug: false
})
Comment on lines +44 to +50
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Critical: Move DocSearch API credentials to environment variables

The DocSearch API credentials are hardcoded in the source code, which poses a security risk. These should be moved to environment variables.

Apply this change:

 docsearch({
-  appId: 'AGPA5UXHMH',
-  apiKey: '5fa09fc20270efa61d68e2c2eb0f56df',
+  appId: import.meta.env.VITE_DOCSEARCH_APP_ID,
+  apiKey: import.meta.env.VITE_DOCSEARCH_API_KEY,
   indexName: 'opentiny',
   container: '.search-box',
   debug: false
 })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
docsearch({
appId: 'AGPA5UXHMH',
apiKey: '5fa09fc20270efa61d68e2c2eb0f56df',
indexName: 'opentiny',
container: '.search-box',
debug: false
})
docsearch({
appId: import.meta.env.VITE_DOCSEARCH_APP_ID,
apiKey: import.meta.env.VITE_DOCSEARCH_API_KEY,
indexName: 'opentiny',
container: '.search-box',
debug: false
})
🧰 Tools
🪛 Gitleaks (8.21.2)

46-46: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.

(generic-api-key)


if (envTarget !== 'open') {
// 支持本地开发和内网使用全局搜索
doSearchEverySite()
}

// 实验后发现，先调用一次预热一下，后续再调用会有速度的提示，因此在main中预热一下。
setTimeout(() => {
hljs.highlightAuto(`<template>
Expand Down
25 changes: 15 additions & 10 deletions examples/sites/src/menus.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,20 @@ function genMenus() {
}
]

const docOptions = docMenus.map((menu) => ({
...menu,
label: `${appData.lang === 'zhCN' ? menu.label : menu.labelEn}${getChildrenStr(menu)}`,
children: menu.children.map((page) => ({
...page,
id: page.key,
label: appData.lang === 'zhCN' ? page.title : page.titleEn,
type: 'docs'
}))
}))
// 使用指南只在DEV下生效
const docOptions = import.meta.env.DEV
? docMenus.map((menu) => ({
...menu,
label: `${appData.lang === 'zhCN' ? menu.label : menu.labelEn}${getChildrenStr(menu)}`,
children: menu.children.map((page) => ({
...page,
id: page.key,
label: appData.lang === 'zhCN' ? page.title : page.titleEn,
type: 'docs'
}))
}))
: []

const cmpOptions = cmpMenus.map((menu) => ({
...menu,
label: `${appData.lang === 'zhCN' ? menu.label : menu.labelEn}${getChildrenStr(menu)}`,
Expand All @@ -46,6 +50,7 @@ function genMenus() {
type: 'components'
}))
}))

return [...standaloneOptions, ...docOptions, ...cmpOptions]
}

Expand Down
9 changes: 3 additions & 6 deletions examples/sites/src/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/views/layout/layout.vue'
import { LANG_KEY, LANG_PATH_MAP, ZH_CN_LANG, CURRENT_THEME_KEY, THEME_ROUTE_MAP, SMB_THEME } from './const'
import { $local } from './tools/storage'
import { LANG_PATH_MAP, ZH_CN_LANG, THEME_ROUTE_MAP, DEFAULT_THEME } from './const'

const Components = () => import('@/views/components/components.vue')
const Docs = () => import('@/views/docs/docs.vue')
Expand Down Expand Up @@ -35,10 +34,8 @@ let routes = [
{
path: '/:pathMatch(.*)*',
redirect: () => {
const lang = $local[LANG_KEY]
const langPath = LANG_PATH_MAP[lang] || LANG_PATH_MAP[ZH_CN_LANG]
const themeKey = localStorage.getItem(CURRENT_THEME_KEY)
const theme = THEME_ROUTE_MAP[themeKey] || THEME_ROUTE_MAP[SMB_THEME]
const langPath = LANG_PATH_MAP[ZH_CN_LANG]
const theme = THEME_ROUTE_MAP[DEFAULT_THEME]
return { path: `${context}${langPath}/${theme}/overview` }
}
}
Expand Down
18 changes: 10 additions & 8 deletions examples/sites/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ html {
}

/* reset.css 引入后造成site官网中 b 和 strong 标签没有粗体，此处还原粗体 */
b, strong {
b,
strong {
font-weight: 700;
}

Expand All @@ -22,7 +23,8 @@ b, strong {
z-index: 1000 !important;
}

.tiny-grid td,.tiny-grid th {
.tiny-grid td,
.tiny-grid th {
vertical-align: middle;
}

Expand All @@ -35,14 +37,14 @@ b, strong {
left: 210px;
}

.DocSearch-Container {
.DocSearch.DocSearch-Container {
z-index: 1000;
font-size: 14px;
}

.DocSearch-Button {
border-radius: 6px;
transition: 0.4s
transition: 0.4s;
}

.DocSearch-Button:hover {
Expand Down Expand Up @@ -70,11 +72,11 @@ b, strong {
}

@media screen and (max-width: 768px) {
.DocSearch-Modal {
margin-top: 60px;
}

.search-box {
left: 230px;
}

.search-box .DocSearch-Button {
padding: 0 11px;
}
}
13 changes: 13 additions & 0 deletions examples/sites/src/tools/docsearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const OPEN_TINY_URL = 'https://opentiny.design'

export const doSearchEverySite = () => {
window.handleGlobalSearchData = (resolve) => {
return (data) => {
if (typeof data.content === 'string') {
data.content = data.content.replaceAll(OPEN_TINY_URL, window.location.origin)
}
Comment on lines +6 to +8
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Ensure compatibility of String.prototype.replaceAll

The replaceAll method may not be supported in all browsers, especially older ones. To improve compatibility, consider using replace with a global regular expression.

Apply this diff to enhance compatibility:

- data.content = data.content.replaceAll(OPEN_TINY_URL, window.location.origin)
+ data.content = data.content.replace(new RegExp(OPEN_TINY_URL, 'g'), window.location.origin)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (typeof data.content === 'string') {
data.content = data.content.replaceAll(OPEN_TINY_URL, window.location.origin)
}
if (typeof data.content === 'string') {
data.content = data.content.replace(new RegExp(OPEN_TINY_URL, 'g'), window.location.origin)
}


resolve(data)
}
}
}
10 changes: 9 additions & 1 deletion examples/sites/src/views/components/demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,10 +310,18 @@ export default defineComponent({
}
}

@media screen and (max-width: 640px) {
.pc-demo-container {
overflow: auto;
}
}

.pc-demo-container {
display: flex;
flex-direction: column;
background: #fafafa;
background: #fff;
border-radius: 6px;
border: 1px solid #dcdfe6;
padding: 26px 18px 42px;

.pc-demo {
Expand Down
18 changes: 18 additions & 0 deletions examples/sites/vite-dosearch-plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export default function viteDosearchPlugin() {
return {
name: 'vite-dosearch-plugin',
enforce: 'pre',
transform(code, id) {
if (id.includes('@docsearch')) {
const newCode = code.replace(
'Promise((function(t){var n=new XMLHttpRequest;',
'Promise((function(t){t=window.handleGlobalSearchData(t);var n=new XMLHttpRequest;'
)
return {
code: newCode,
map: null
}
}
}
}
}
5 changes: 4 additions & 1 deletion examples/sites/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteDosearchPlugin from './vite-dosearch-plugin'
import Unocss from 'unocss/vite'
import path from 'node:path'
import UnoCssConfig from './uno.config'
Expand Down Expand Up @@ -42,6 +43,7 @@ export default defineConfig((config) => {
const env = loadEnv(config.mode, process.cwd() + '/env', '')
const isSaas = env.VITE_TINY_THEME === 'saas'
const isPlus = env.VITE_APP_MODE === 'plus'
const isInner = env.VITE_BUILD_TARGET === 'inner'
const demosPath = isPlus ? '../plusdocs/pc' : `./demos/${env.VITE_APP_MODE}`
const apisPath = isPlus ? '../plusdocs/apis' : './demos/apis'
const menuPath = isSaas ? path.resolve('./demos/saas') : path.resolve(demosPath)
Expand Down Expand Up @@ -115,7 +117,8 @@ export default defineConfig((config) => {
viteStaticCopy({
targets: copyTarget
}),
delStatic()
delStatic(),
isInner ? viteDosearchPlugin() : null
],
optimizeDeps: getOptimizeDeps(3),
build: {
Expand Down
2 changes: 1 addition & 1 deletion packages/renderless/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@opentiny/vue-renderless",
"version": "3.20.0",
"version": "3.20.3",
"private": true,
"description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
"author": "OpenTiny Team",
Expand Down
13 changes: 8 additions & 5 deletions packages/renderless/src/anchor/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
import type { IAnchorRenderlessParams, IAnchorLinkItem } from '@/types'
import { addClass, removeClass } from '../common/deps/dom'

const getEleMentBySelect = (parent, selector) =>
selector?.startsWith('#') ? document.getElementById(selector.slice(1)) : parent.querySelector(selector)
Comment on lines +15 to +16
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve naming convention and add input validation

The function name getEleMentBySelect has inconsistent capitalization. Also, consider adding input validation for security.

-const getEleMentBySelect = (parent, selector) =>
+const getElementById = (id) => document.getElementById(id)
+const querySelector = (parent, selector) => parent?.querySelector(selector)
+
+const getElementBySelector = (parent, selector) => {
+  if (!selector || typeof selector !== 'string') {
+    return null
+  }
+  return selector.startsWith('#') 
+    ? getElementById(selector.slice(1))
+    : querySelector(parent, selector)
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const getEleMentBySelect = (parent, selector) =>
selector?.startsWith('#') ? document.getElementById(selector.slice(1)) : parent.querySelector(selector)
const getElementById = (id) => document.getElementById(id)
const querySelector = (parent, selector) => parent?.querySelector(selector)
const getElementBySelector = (parent, selector) => {
if (!selector || typeof selector !== 'string') {
return null
}
return selector.startsWith('#')
? getElementById(selector.slice(1))
: querySelector(parent, selector)
}


export const setFixAnchor =
({ vm, props }: Pick<IAnchorRenderlessParams, 'vm' | 'props'>) =>
() => {
Expand All @@ -25,7 +28,7 @@ export const setFixAnchor =
const setMarkClass = ({ state, props }: Pick<IAnchorRenderlessParams, 'state' | 'props'>) => {
const { scrollContainer } = state
const { markClass } = props
const activeContentEl = scrollContainer.querySelector(`${state.currentLink}`)
const activeContentEl = getEleMentBySelect(scrollContainer, `${state.currentLink}`)
if (markClass) {
addClass(activeContentEl, markClass)
setTimeout(() => {
Expand Down Expand Up @@ -95,7 +98,7 @@ const addObserver = ({ props, state }: Pick<IAnchorRenderlessParams, 'props' | '
list.forEach((item) => {
const link = item.link
expandLink[link] = item
const linkEl = document.querySelector(link)
const linkEl = getEleMentBySelect(document, link)
linkEl && intersectionObserver.observe(linkEl)
if (item.children) {
observer(item.children)
Expand Down Expand Up @@ -127,13 +130,13 @@ const setChildOffsetTop = ({ state, props }: Pick<IAnchorRenderlessParams, 'stat
if (!props.links?.length) {
return
}
state.childOffsetTop = document.querySelector(props.links[0].link)?.offsetTop || 0
state.childOffsetTop = getEleMentBySelect(document, props.links[0].link)?.offsetTop || 0
}

export const getContainer =
({ props }: Pick<IAnchorRenderlessParams, 'props'>) =>
(): Element =>
(props.containerId && document.querySelector(props.containerId)) || document.body
(props.containerId && getEleMentBySelect(document, props.containerId)) || document.body

export const mounted =
({ state, api, props, nextTick }: Pick<IAnchorRenderlessParams, 'state' | 'api' | 'props' | 'nextTick'>) =>
Expand Down Expand Up @@ -234,7 +237,7 @@ export const linkClick =
setMarkClass({ state, props })

if (scrollContainer && scrollContainer !== document.body && !isChangeHash) {
const linkEl = scrollContainer.querySelector(item.link) as HTMLElement
const linkEl = getEleMentBySelect(scrollContainer, item.link) as HTMLElement
const top =
linkEl?.getBoundingClientRect().top -
scrollContainer.getBoundingClientRect().top +
Expand Down
3 changes: 1 addition & 2 deletions packages/renderless/src/color-select-panel/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { IColorSelectPanelProps, ISharedRenderlessParamHooks, ISharedRenderlessParamUtils } from '@/types'
import { initApi, initState, initWatch } from './index'
import { onMounted } from 'vue'

export const api = [
'state',
Expand Down Expand Up @@ -59,7 +58,7 @@ export const renderless = (
onClickOutside
}
initWatch(state, props, hooks, utils)
onMounted(() => {
hooks.onMounted(() => {
if (props.modelValue) {
state.input = state.currentColor
}
Expand Down
2 changes: 1 addition & 1 deletion packages/vue-common/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@opentiny/vue-common",
"private": true,
"version": "3.20.0",
"version": "3.20.1",
"description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
"homepage": "https://opentiny.design/tiny-vue",
"keywords": [
Expand Down
Loading
Loading