Merge branch 'develop' into pr/ItsKDaniel/3889

.github/ISSUE_TEMPLATE/bug-template.md

@@ -6,7 +6,7 @@ assignees: ''
 
 ---
 
-**Vuestic-ui version:** 1.8.0
+**Vuestic-ui version:** 1.8.3
 
 **Steps to reproduce**
 

packages/ui/.storybook/assets/fonts.scss

@@ -1,6 +1,7 @@
 // Fonts //
 @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);
 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined);
 
 body {
   margin: 0;

packages/ui/.storybook/assets/icons/icons.scss

@@ -14,3 +14,4 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 // material icons
 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url(https://fonts.googleapis.com/icon?family=Material+Icons+Outlined);
+@import url(https://fonts.googleapis.com/icon?family=Material+Sym+Outlined);

packages/ui/.storybook/vuestic-config/demo-icon-fonts.ts

@@ -29,6 +29,10 @@ const fontsConfig: IconConfig = [
     name: 'entypo-{code}',
     resolve: ({ code }) => ({ class: `entypo-${code}` }),
   },
+  {
+    name: 'mso-{name}',
+    resolve: ({ name }) => ({ content: name, class: 'material-symbols-outlined' }),
+  },
   {
     name: 'text',
   },

packages/ui/build/common-config.ts

@@ -35,16 +35,20 @@ export const resolve = {
   },
 }
 
+const rollupOutputOptions = (ext: string): RollupOptions['output'] => ({
+  entryFileNames: `[name].${ext}`,
+  chunkFileNames: `[name].${ext}`,
+  assetFileNames: '[name].[ext]',
+})
+
 const rollupMjsBuildOptions: RollupOptions = {
   input: resolver(process.cwd(), 'src/main.ts'),
 
   output: {
     sourcemap: true,
     dir: 'dist/esm-node',
     format: 'esm',
-    entryFileNames: '[name].mjs',
-    chunkFileNames: '[name].mjs',
-    assetFileNames: '[name].[ext]',
+    ...rollupOutputOptions('mjs'),
   },
 }
 
@@ -76,17 +80,7 @@ export default function createViteConfig (format: BuildFormat) {
       // target: 'esnext',
 
       // default esbuild, not available for esm format in lib mode
-      minify: 'terser',
-
-      terserOptions: {
-        // https://stackoverflow.com/questions/57720816/rails-webpacker-terser-keep-fnames
-
-        // disable mangling class names (for vue class component)
-        keep_classnames: true,
-
-        // disable mangling functions names
-        keep_fnames: true,
-      },
+      minify: isEsm ? false : 'esbuild',
 
       lib: libBuildOptions(isNode ? 'es' : format),
     },
@@ -105,7 +99,14 @@ export default function createViteConfig (format: BuildFormat) {
   isEsm && config.plugins.push(removeSideEffectedChunks())
   isEsm && config.plugins.push(componentVBindFix())
 
-  config.build.rollupOptions = isNode ? { ...external, ...rollupMjsBuildOptions } : external
+  if (isNode) {
+    config.build.rollupOptions = { ...external, ...rollupMjsBuildOptions }
+  } else {
+    config.build.rollupOptions = {
+      ...external,
+      output: rollupOutputOptions('js'),
+    }
+  }
 
   return config
 }

packages/ui/build/plugins/append-component-css.ts

@@ -13,16 +13,38 @@ const parsePath = (path: string) => {
 }
 
 /**
- * Checks if file is Vuestic component script source
- * Component always have script which is stored in file with name like Va[ComponentName].vue_vue_type_script_lang
+ * Checks if file is Vuestic component template source
+ * If file is script source, but there is not template then add css to script.
+ * Component usually have script which is stored in file with name like Va[ComponentName].vue_vue_type_script_lang
+ *
+ * @notice Component can have render function without template block. It also can have only template without script block.
  */
 const isVuesticComponent = (filename: string) => {
-  // Va[ComponentName]-[hash].mjs
-  return /Va\w*-\w*\.mjs$/.test(filename)
+  // Va[ComponentName].vue_vue_type_script_lang.mjs
+  // Va[ComponentName].vue_vue_type_script_setup_true_lang.mjs
+  const isScriptFile = /Va\w*.vue_vue_type_script\w*_lang.m?js$/.test(filename)
+  if (isScriptFile) {
+    return true
+  }
+
+  // Va[ComponentName].mjs
+  const isTemplateFile = /Va\w*\.m?js$/.test(filename)
+
+  // Va[ComponentName].vue_vue_type_script_lang.mjs
+  const scriptFilePath = filename.replace('.mjs', '.vue_vue_type_script_lang.mjs')
+  const scriptSetupFilePath = filename.replace('.mjs', '.vue_vue_type_script_setup_true_lang.mjs')
+
+  const haveScript = existsSync(scriptFilePath) || existsSync(scriptSetupFilePath)
+
+  if (isTemplateFile && !haveScript) {
+    return true
+  }
+
+  return false
 }
 
 const extractVuesticComponentName = (filename: string) => {
-  return filename.match(/(Va\w*)-\w*/)?.[1]
+  return filename.match(/(Va\w*)/)?.[1]
 }
 
 const SOURCE_MAP_COMMENT_FRAGMENT = '//# sourceMappingURL='

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuestic-ui",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "description": "Vue 3 UI Framework",
   "license": "MIT",
   "homepage": "https://vuestic.dev",

packages/ui/src/components/va-alert/useAlertStyles.ts

@@ -51,7 +51,7 @@ export const useAlertStyles = (props: AlertStyleProps) => {
   const contentStyle = computed(() => {
     return {
       alignItems: props.center ? 'center' : '',
-      color: (props.border || props.outline) ? currentColor : textColorComputed.value,
+      color: (props.border || props.outline) ? currentColor.value : textColorComputed.value,
     }
   })