test: update examples

.gitignore

@@ -20,3 +20,4 @@ interactive/guides/vendor/*.md
 interactive/data/guides.ts
 interactive/public/play
 interactive/public/shiki
+.swc

examples/taro_react/package.json

@@ -36,32 +36,32 @@
   "author": "",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
-    "@tarojs/components": "3.4.13",
-    "@tarojs/plugin-framework-react": "3.4.13",
-    "@tarojs/react": "3.4.13",
-    "@tarojs/runtime": "3.4.13",
-    "@tarojs/taro": "3.4.13",
+    "@tarojs/components": "3.6.6",
+    "@tarojs/plugin-framework-react": "3.6.6",
+    "@tarojs/react": "3.6.6",
+    "@tarojs/runtime": "3.6.6",
+    "@tarojs/taro": "3.6.6",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@tarojs/mini-runner": "3.4.13",
-    "@tarojs/webpack-runner": "3.4.13",
+    "@tarojs/mini-runner": "3.6.6",
+    "@tarojs/webpack-runner": "3.6.6",
     "@types/react": "^17.0.2",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
-    "@unocss/webpack": "0.46.1",
-    "babel-preset-taro": "3.4.13",
+    "@unocss/webpack": "0.52.4",
+    "babel-preset-taro": "3.6.6",
     "eslint": "^8.12.0",
-    "eslint-config-taro": "3.4.13",
+    "eslint-config-taro": "3.6.6",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "stylelint": "^14.4.0",
     "typescript": "^4.1.0",
-    "unocss": "^0.51.8",
+    "unocss": "^0.52.4",
     "unocss-preset-weapp": "link:../../"
   }
 }

examples/taro_react/src/pages/color/index.tsx

@@ -1,11 +1,24 @@
 export default function BorderColor() {
+  const day = 30
+
+  function classnames(obj:Record<string,boolean>){
+    let arr:string[] = []
+
+    for (const key in obj) {
+      if (obj[key]) {
+        arr.push(key)
+      }
+    }
+    return arr.join(' ')
+  }
+
   return (
     <view className='p-2 text-center'>
     <view className='bg-[#3498db] mb-1'>
       bg-[#3498db]
     </view>
     <view className='bg-[#3498db]/80 mb-1'>
-      bg-[#3498db]/80
+      bg-[#3498db] 80
     </view>
 
     <view className='bg-[#3498db]:60 mb-1'>
@@ -39,6 +52,15 @@ export default function BorderColor() {
     <view className='bg-hex-000/80 text-hex-fff:60 mb-1'>
       bg-hex-000/80 text-hex-fff:60
     </view>
+
+    <view className={day < 20 ? 'c-#e67e22' : "c-[#157]/60"} >剩余 {day} 天</view>
+
+    <view className={classnames({
+        'c-#e67e22':true,
+        "c-$color-variable/10": true
+      })
+    }
+    >222222</view>
   </view>
   )
 }

examples/taro_webpack4_vue3/package.json

@@ -44,21 +44,21 @@
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
-    "@iconify/json": "^2.2.64",
+    "@iconify/json": "^2.2.70",
     "@tarojs/mini-runner": "3.4.13",
     "@tarojs/webpack-runner": "3.4.13",
     "@types/webpack-env": "^1.13.6",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
-    "@unocss/webpack": "^0.51.12",
+    "@unocss/webpack": "^0.52.4",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-preset-taro": "3.4.13",
     "eslint": "^8.12.0",
     "eslint-config-taro": "3.4.13",
     "eslint-plugin-vue": "^8.0.0",
     "stylelint": "^14.4.0",
     "typescript": "^4.1.0",
-    "unocss": "^0.51.12",
+    "unocss": "^0.52.4",
     "unocss-preset-weapp": "link:../../",
     "vue-loader": "^16.0.0-beta.8"
   }

examples/taro_webpack4_vue3/src/pages/bg/index.vue

@@ -6,7 +6,7 @@ export default {
 
 <template>
   <view text="white" class="p-3">
-    <view class="bg-local-logo">
+    <view class="bg-local-logo mx-auto">
     </view>
 
     <view flex justify-center w-full>