Merge branch 'develop'

Author: wenzhixin

.editorconfig-checker.json

@@ -0,0 +1,5 @@
+{
+  "Exclude": [
+    "utils/natural-sorting/dist"
+  ]
+}

.github/workflows/test.yml

@@ -17,3 +17,4 @@ jobs:
         run: |
           yarn install
           yarn lint
+          yarn test

.gitignore

@@ -5,3 +5,4 @@
 *.xml
 node_modules
 yarn.lock
+package-lock.json

assets/css/index.css

@@ -27,23 +27,37 @@ iframe {
   position: absolute;
   bottom: 10px;
   left: 10px;
-}
-
-.icon-buttons .view-example {
-  display: none;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 1000;
 }
 
 .icon-buttons a {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 50%;
   width: 40px;
   height: 40px;
-  margin-top: 10px;
+  margin: 0;
   padding: 0;
   text-align: center;
+  transition: all 0.2s;
+}
+
+.icon-buttons a:hover {
+  transform: scale(1.1);
+}
+
+.icon-buttons a.active {
+  background: var(--bs-primary);
+  color: white;
+  transform: scale(1.1);
 }
 
 .icon-buttons i {
-  font-size: 24px;
+  font-size: 20px;
   line-height: 40px;
+  margin: 0;
 }

assets/css/template.css

@@ -19,10 +19,52 @@ body {
 
 #viewSource,
 #viewExample,
-.source-pre {
+.source-pre,
+.data-pre {
   display: none;
 }
 
+/* Source code view styles - support dark/light themes */
+.source-pre {
+  background: var(--bs-tertiary-bg);
+}
+
+.source-pre code {
+  background: var(--bs-tertiary-bg) !important;
+  color: var(--bs-body-color) !important;
+}
+
+/* Override highlight.js default background in all themes */
+.hljs {
+  background: var(--bs-tertiary-bg) !important;
+}
+
+/* Data configuration container styles */
+.data-pre {
+  padding: 1rem;
+}
+
+.data-pre h4 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  color: var(--bs-body-color);
+  border-bottom: 1px solid var(--bs-border-color);
+  padding-bottom: 0.5rem;
+}
+
+.data-pre h4:first-child {
+  margin-top: 0;
+}
+
+.data-pre pre {
+  margin: 0;
+  padding: 1rem;
+  background: var(--bs-tertiary-bg);
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
 .title-desc {
   min-height: 162px;
 }

assets/js/index.js

@@ -4,19 +4,27 @@ const { computed, createApp, onMounted, ref } = window.Vue
 const Utils = {
   getUrl () {
     let href = location.hash.substring(1)
-    let isViewSource = false
+    let viewType = 'example' // default value
 
-    if (href.includes('view-source')) {
+    // Parse view type
+    if (href.includes('#view-')) {
+      const parts = href.split('#view-')
+
+      viewType = parts[1] || 'example'
+      href = parts[0].replace('#', '')
+    } else if (href.includes('view-source')) {
+      // Backward compatibility for legacy view-source hash
       href = href.replace('#view-source', '').replace('view-source', '')
-      isViewSource = true
+      viewType = 'html'
     }
+
     return {
       href: href || 'welcome.html',
-      isViewSource
+      viewType: ['example', 'html', 'data'].includes(viewType) ? viewType : 'example'
     }
   },
 
-  loadUrl (theme, href, isViewSource) {
+  loadUrl (theme, href, viewType) {
     let template = 'template'
 
     if (theme) {
@@ -27,9 +35,12 @@ const Utils = {
     if (isDebug) {
       url = `${template}.html?t=${+new Date()}&url=${href}`
     }
-    if (isViewSource) {
-      url = `${template}.html?v=VERSION&view-source&url=${href}#view-source`
+
+    // Pass view type to iframe
+    if (viewType !== 'example') {
+      url += `&view-type=${viewType}#view-${viewType}`
     }
+
     $('iframe').attr('src', url)
   },
 
@@ -60,27 +71,32 @@ const Utils = {
     }, 100)
   },
 
-  initViewSource () {
-    const isSource = /view-source$/.test(location.hash)
-
-    if (isSource) {
-      $('.view-example').css('display', 'block')
-      $('.view-source').css('display', 'none')
-    } else {
-      $('.view-example').css('display', 'none')
-      $('.view-source').css('display', 'block')
-    }
-
-    $('.view-example, .view-source').off('click').click(function () {
-      if (isSource) {
-        location.hash = location.hash.replace('#view-source', '')
-      } else if (!location.hash.includes('view-source')) {
-        location.hash += '#view-source'
-      }
-    })
+  initViewToggle () {
+    const { href, viewType } = Utils.getUrl()
+
+    // Update button states
+    $('.icon-buttons .view-example, .icon-buttons .view-html, .icon-buttons .view-data').removeClass('active')
+    $(`.view-${viewType}`).addClass('active')
+
+    // Bind click events using on() method and prevent default behavior
+    $('.view-example, .view-html, .view-data')
+      .off('click.viewToggle')
+      .on('click.viewToggle', function (e) {
+        e.preventDefault()
+        const newType = $(this).hasClass('view-example') ? 'example' :
+          $(this).hasClass('view-html') ? 'html' : 'data'
+        const currentHref = location.hash.slice(1).split('#')[0] || 'welcome.html'
+
+        // example is the default view, no need to add #view-example
+        if (newType === 'example') {
+          location.hash = currentHref
+        } else {
+          location.hash = `${currentHref}#view-${newType}`
+        }
+      })
 
-    $('.view-online').attr('href', `https://live.bootstrap-table.com/example/${
-      location.hash.slice(1).split('#')[0] || 'welcome.html'}`)
+    // Update online editor link
+    $('.view-online').attr('href', `https://live.bootstrap-table.com/example/${href}`)
   }
 }
 
@@ -144,13 +160,13 @@ const setup = () => {
     })
   }
   const initData = () => {
-    const { href, isViewSource } = Utils.getUrl()
+    const { href, viewType } = Utils.getUrl()
 
-    Utils.loadUrl(theme.value, href, isViewSource)
+    Utils.loadUrl(theme.value, href, viewType)
 
     currentHref.value = `#${href}`
 
-    Utils.initViewSource()
+    Utils.initViewToggle()
   }
   const initViews = () => {
     $('[data-bs-toggle="tooltip"]').tooltip()