Merge branch 'dev'

.eslintrc.js

@@ -9,5 +9,6 @@ module.exports = {
   rules: {
     'vue/no-v-model-argument': 0,
     'vue/multi-word-component-names': 0,
+    'vue/no-empty-component-block': 0,
   },
 };

CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+## [0.1.22](https://github.com/any-design/anyui/compare/v0.1.21...v0.1.22) (2023-11-14)
+
+### Bug Fixes
+
+- (index) add export of listView ([f842823](https://github.com/any-design/anyui/commit/f8428234c2a28402af3eb778109b098991cb4d4b))
+
+### Features
+
+- (float) now float mask will have a larger radius blur ([b0ad294](https://github.com/any-design/anyui/commit/b0ad2941b9c68b3ee74d04cc1cca2087f06d30d6))
+- (float) now the float can be centered & tweat the style of the background ([701ce5b](https://github.com/any-design/anyui/commit/701ce5b7efed48c0405b1355acd638a9a62083ef))
+
 ## [0.1.21](https://github.com/any-design/anyui/compare/v0.1.20...v0.1.21) (2023-11-14)
 
 ### Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@any-design/anyui",
-  "version": "0.1.21",
+  "version": "0.2.0",
   "author": "any-design",
   "description": "A cute UI components library for Vue 3.",
   "files": [

scripts/modules/componentStyles.js

@@ -25,24 +25,33 @@ ${styleContent}
 `.trim();
 
 const collectDirStyles = async (dir) => {
+  // read package dir
   const dirInfo = await fsp.readdir(dir);
+  // collect all vue components
   const results = await Promise.all(
     dirInfo.map(async (fileName) => {
       const filePath = path.resolve(dir, fileName);
       const stat = await fsp.stat(filePath);
       if (stat.isDirectory()) {
+        // deeply collect, might be an array
         return await collectDirStyles(filePath);
       } else if (fileName.endsWith('.vue')) {
+        // extract scss style code
         const content = await fsp.readFile(filePath, { encoding: 'utf-8' });
         const matched = content.match(styleExtractor);
         if (matched) {
-          return matched[1];
+          return {
+            name: fileName.replace('.vue', ''),
+            content: matched[1],
+          };
         }
       }
       return null;
     }),
   );
-  return results.filter((item) => !!item).join('\n');
+  return results
+    .reduce((res, curr) => (Array.isArray(curr) ? [...res, ...curr] : [...res, curr]), [])
+    .filter((item) => !!item);
 };
 
 const getComponentStyles = async () => {
@@ -65,20 +74,37 @@ const getComponentStyles = async () => {
       if (!results[compName]) {
         return;
       }
-      await fsp.writeFile(
-        path.resolve(targetDir, `./${compName}.scss`),
-        appendGlobalVars(results[compName].trimStart(), false),
-        { encoding: 'utf-8' },
-      );
-      await fsp.writeFile(
-        path.resolve(targetDir, `./${compName}.css`),
-        (
-          await sass.compileStringAsync(appendGlobalVars(results[compName], true))
-        ).css,
-        { encoding: 'utf-8' },
+      // results array can contain mulitple file content, should compile them all.
+      return await Promise.all(
+        results[compName].map(async (styleItem) => {
+          const { name, content } = styleItem;
+          const formattedName = name[1].toLowerCase() + name.slice(2);
+
+          const scssPath = path.resolve(targetDir, `./${formattedName}.scss`);
+          if (fs.existsSync(scssPath)) {
+            console.error(chalk.red('Component style file already exists:', scssPath));
+          }
+
+          const cssFilePath = path.resolve(targetDir, `./${formattedName}.css`);
+          if (fs.existsSync(cssFilePath)) {
+            console.error(chalk.red('Component style file already exists:', scssPath));
+          }
+
+          await fsp.writeFile(scssPath, appendGlobalVars(content.trimStart(), false), {
+            encoding: 'utf-8',
+          });
+          await fsp.writeFile(
+            cssFilePath,
+            (
+              await sass.compileStringAsync(appendGlobalVars(content, true))
+            ).css,
+            { encoding: 'utf-8' },
+          );
+        }),
       );
     }),
   );
+
   console.log(chalk.green('Component styles has been collected and compiled to CSS.'));
 };
 

src/packages/checkboxGroup/ACheckboxGroup.vue

@@ -100,3 +100,5 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss"></style>

src/packages/clickableText/AClickableText.vue

@@ -1,11 +1,5 @@
 <template>
-  <span
-    :class="{
-      'a-clickable-text': true,
-      'a-clickable-text--secondary': type === 'secondary',
-      'a-clickable-text--primary': type === 'primary',
-    }"
-    @click="handleClick"
+  <span :class="['a-clickable-text', `a-clickable-text--${type}`]" @click="handleClick"
     ><slot></slot
   ></span>
 </template>
@@ -38,28 +32,27 @@ export default defineComponent({
   cursor: pointer;
 }
 .a-clickable-text:hover {
-  color: var(--text-80);
+  color: var(--text-85);
 }
 .a-clickable-text:active {
-  color: var(--text-70);
+  color: var(--text-75);
 }
-.a-clickable-text--secondary {
-  color: var(--text-secondary);
-  cursor: pointer;
-}
-.a-clickable-text--secondary:hover {
-  color: var(--text-secondary-80);
-}
-.a-clickable-text--secondary:active {
-  color: var(--text-secondary-70);
-}
-.a-clickable-text--primary {
-  color: var(--primary);
-}
-.a-clickable-text--primary:hover {
-  color: var(--primary-80);
-}
-.a-clickable-text--primary:active {
-  color: var(--primary-70);
+
+@mixin coloredClickcableText($color) {
+  .a-clickable-text.a-clickable-text--#{$color} {
+    color: var(--#{$color});
+  }
+  .a-clickable-text.a-clickable-text--#{$color}:hover {
+    color: var(--#{$color}-85);
+  }
+  .a-clickable-text.a-clickable-text--#{$color}:active {
+    color: var(--#{$color}-75);
+  }
 }
+
+@include coloredClickcableText('primary');
+@include coloredClickcableText('secondary');
+@include coloredClickcableText('danger');
+@include coloredClickcableText('warn');
+@include coloredClickcableText('info');
 </style>

src/packages/resolver/index.ts

@@ -16,9 +16,7 @@ const NATIVE_NAMES = [
   'AbsoluteOrientationSensor',
 ];
 
-const LAYOUT_NAMES = ['header', 'content', 'footer', 'side'];
-
-const NO_STYLE_COMPONENTS = ['checkboxGroup'];
+const NO_STYLE_COMPONENTS = ['checkboxGroup', 'virtualListItem'];
 
 export interface AnyUIResolverOptions {
   styleType?: 'scss' | 'css';
@@ -32,10 +30,7 @@ const getSideEffects = (importName: string, options: AnyUIResolverOptions) => {
     return;
   }
   // generate style path
-  let formattedName = importName[1].toLowerCase() + importName.slice(2);
-  if (LAYOUT_NAMES.includes(formattedName)) {
-    formattedName = 'layout';
-  }
+  const formattedName = importName[1].toLowerCase() + importName.slice(2);
   // check no style components
   if (NO_STYLE_COMPONENTS.includes(formattedName)) {
     return;

src/packages/virtualList/AVirtualListItem.vue

@@ -42,3 +42,5 @@ onBeforeUnmount(() => {
   observer?.unobserve(itemRef.value);
 });
 </script>
+
+<style lang="scss"></style>

src/styles/theme/color/vars.scss

@@ -105,11 +105,11 @@ $default-static-colors: (
 $default-alphas: (
   primary: 100 90 85 80 75 70 60 40 30 20 18 12 10 8 6 4,
   secondary: 100 90 85 80 75 70 60 40 30 20,
-  success: 80 60,
-  warn: 80 60,
-  danger: 80 60,
-  error: 80 60,
-  info: 80 60,
+  success: 85 80 75 60,
+  warn: 85 80 75 60,
+  danger: 85 80 75 60,
+  error: 85 80 75 60,
+  info: 85 80 75 60,
   shadow: 2 4 5 6 8 10 12 18 20 24 25 30 36 40,
   shadow-w: 4 5 6 8 10 20 24,
   text: 80,