diff --git a/.storybook/preview.css b/.storybook/preview.css
index d2e9fcd..79ab5c4 100644
--- a/.storybook/preview.css
+++ b/.storybook/preview.css
@@ -38,7 +38,7 @@ html, body, #storybook-root, #wrapper {
.hide-controls-column > div > table {
& > thead > tr > th:last-child,
& > tbody > tr:not(:first-child) > td:last-child {
- display: none !important;
+ display: none;
}
& > thead > tr th:nth-child(1),
diff --git a/index.html b/index.html
index eb9288b..466346c 100644
--- a/index.html
+++ b/index.html
@@ -6,26 +6,30 @@
Title
diff --git a/src/ui/widget.ts b/src/ui/widget.ts
index 8a12711..65335c4 100644
--- a/src/ui/widget.ts
+++ b/src/ui/widget.ts
@@ -1,8 +1,6 @@
import { h, ref, onBeforeUnmount, inject, computed } from 'vue';
-import './styles/main.css'
+import './styles/main.css';
-import 'virtual:uno.css';
-import PFooter from './components/Footer.vue';
import type { IWidgetSettings } from './interfaces';
import { resolveView } from './utils/router';
import type { Theme } from './utils/theme';
@@ -11,41 +9,38 @@ import { translatorKey } from './utils/translator';
export function App(theme: Theme, settings: Partial): any {
return {
provide: {
- theme
+ theme,
},
- setup(){
- const isMobile = ref(false)
- const i18n = inject(translatorKey) as Translator
+ setup() {
+ const isMobile = ref(false);
+ const i18n = inject(translatorKey) as Translator;
function onResize() {
- isMobile.value = window.innerWidth < 600
+ isMobile.value = window.innerWidth < 600;
}
- window.addEventListener('resize', onResize, { passive: true })
- onResize()
+ window.addEventListener('resize', onResize, { passive: true });
+ onResize();
onBeforeUnmount(() => {
if (typeof window !== 'undefined') {
- window.removeEventListener('resize', onResize)
+ window.removeEventListener('resize', onResize);
}
- })
+ });
return {
- resolvedView: computed(() => resolveView(settings.mode)) ,
+ resolvedView: computed(() => resolveView(settings.mode)),
isMobile,
- locale: i18n.localeRef
- }
+ locale: i18n.localeRef,
+ };
},
- render(){
+ render() {
return h(
'div',
{
class: 'pa__widget',
- key: this.locale
+ key: this.locale,
},
- this.resolvedView && h(
- this.resolvedView
- )
- )
- }
+ this.resolvedView && h(this.resolvedView)
+ );
+ },
};
}
-
diff --git a/stories/02.GettingStarted.mdx b/stories/02.GettingStarted.mdx
index 8397f88..ba8da4d 100644
--- a/stories/02.GettingStarted.mdx
+++ b/stories/02.GettingStarted.mdx
@@ -160,16 +160,12 @@ You can configure social button appearance and footer behavior globally:
```javascript
new PlusAuthWidget('#widget', {
- socialLogin: {
- buttonVariant: 'circle' // or 'block'
- },
footer: {
enabled: false
}
}, window.PlusAuth)
```
-- `socialLogin.buttonVariant`: renders social buttons as `block` or `circle`
- `footer.enabled`: hides or shows the footer locale/legal links area
## Development And Testing
diff --git a/uno.config.ts b/uno.config.ts
index 4ff9ef3..67db930 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,4 +1,4 @@
-import presetRemToPx from '@unocss/preset-rem-to-px'
+import presetRemToPx from '@unocss/preset-rem-to-px';
import {
defineConfig,
presetIcons,
@@ -7,27 +7,26 @@ import {
presetWebFonts,
transformerDirectives,
transformerVariantGroup,
-} from 'unocss'
+} from 'unocss';
const colorRange = (name: string, prefix = 'pa-') => {
const obj: Record = {
- DEFAULT: `rgb(var(--${prefix}color-${name}))`
- }
- const stops = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
- stops.forEach(stop => {
- obj[stop] = `rgb(var(--${prefix}color-${name}-${stop}))`
- })
- return obj
-}
+ DEFAULT: `rgb(var(--${prefix}color-${name}))`,
+ };
+ const stops = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+ stops.forEach((stop) => {
+ obj[stop] = `rgb(var(--${prefix}color-${name}-${stop}))`;
+ });
+ return obj;
+};
export default defineConfig({
-
theme: {
fontSize: {
- base: '1.5rem'
+ base: '1.5rem',
},
width: {
- '20': '20%'
+ '20': '20%',
},
colors: {
primary: colorRange('primary'),
@@ -42,13 +41,13 @@ export default defineConfig({
presets: [
presetWind4({
variablePrefix: 'pa-',
+ preflights: {
+ property: false,
+ },
}),
presetIcons(),
presetTypography(),
- presetRemToPx()
- ],
- transformers: [
- transformerDirectives(),
- transformerVariantGroup(),
+ presetRemToPx(),
],
-})
\ No newline at end of file
+ transformers: [transformerDirectives(), transformerVariantGroup()],
+});
diff --git a/vite.config.ts b/vite.config.ts
index 1eb94b6..78db138 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,7 +4,6 @@ import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts';
-import { libInjectCss } from 'vite-plugin-lib-inject-css'
import pkg from './package.json';
@@ -29,7 +28,43 @@ export default defineConfig(({ command }) => ({
plugins: [
UnoCSS(),
vue({}),
- libInjectCss(),
+ {
+ name: 'prepend-inject-css-plugin',
+ apply: 'build',
+ enforce: 'post',
+ generateBundle(options, bundle) {
+ let cssCode = '';
+ for (const [fileName, file] of Object.entries(bundle)) {
+ if (fileName.endsWith('.css') && file.type === 'asset' && typeof file.source === 'string') {
+ cssCode += file.source;
+ }
+ }
+ if (!cssCode) return;
+
+ const injectedJs = `typeof document !== "undefined" && (function(){
+ var styleId = "plusauth-widget-style";
+ var el = document.getElementById(styleId) || document.createElement("style");
+ el.id = styleId;
+ el.textContent = ${JSON.stringify(cssCode)};
+ if (!el.parentNode) {
+ var customEl = document.querySelector('[view-editor-custom-css]');
+ if (customEl && customEl.parentNode) {
+ customEl.parentNode.insertBefore(el, customEl);
+ } else if (document.head.firstChild) {
+ document.head.insertBefore(el, document.head.firstChild);
+ } else {
+ document.head.appendChild(el);
+ }
+ }
+ })();\n`;
+
+ for (const file of Object.values(bundle)) {
+ if (file.type === 'chunk' && file.isEntry) {
+ file.code = injectedJs + file.code;
+ }
+ }
+ }
+ },
dts({ compilerOptions: { outDir: 'dist/types' } }),
],
resolve: {