diff --git a/.storybook/preview.css b/.storybook/preview.css index d2e9fcd..1e82be3 100644 --- a/.storybook/preview.css +++ b/.storybook/preview.css @@ -1,4 +1,5 @@ :root, #storybook-root { + --pa-font-family: sans-serif; --pa-fs-p: 16px; --pa-fs-h1: 20px; --pa-fs-h2: 18px; @@ -38,7 +39,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..105148f 100644 --- a/index.html +++ b/index.html @@ -6,26 +6,6 @@ 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/stories/CssVariables/01-Documentation.mdx b/stories/CssVariables/01-Documentation.mdx index d625a67..d117b0b 100644 --- a/stories/CssVariables/01-Documentation.mdx +++ b/stories/CssVariables/01-Documentation.mdx @@ -5,10 +5,11 @@ import * as CssVariablesStories from './css-variables.stories.ts'; # CSS Variables -These CSS variables can be declared on `:root` or on a containing element around the widget. +These CSS variables can be declared on `:root` or on a containing element around the widget. If not specified, all variables will automatically fall back to their default values. ```css :root { + --pa-font-family: sans-serif; --pa-fs-p: 16px; --pa-fs-h1: 20px; --pa-fs-h2: 18px; @@ -34,51 +35,50 @@ These CSS variables can be declared on `:root` or on a containing element around ## Typography -`--pa-fs-p`, `--pa-fs-h1`, and `--pa-fs-h2` set the font sizes for paragraph text, main headings, and secondary headings. - -`--pa-fw-p`, `--pa-fw-h1`, and `--pa-fw-h2` set the font weights for paragraph text, main headings, and secondary headings. - -`--pa-align-p`, `--pa-align-h1`, and `--pa-align-h2` set text alignment for paragraph text, main headings, and secondary headings. +- `--pa-font-family`: Sets the font family used across the widget. If not defined, the default value is `sans-serif`. +- `--pa-fs-p`: Sets the font size for paragraph and body text. If not defined, the default value is `16px`. +- `--pa-fs-h1`: Sets the maximum font size for main headings (`h1`). If not defined, the default value is `20px`. +- `--pa-fs-h2`: Sets the maximum font size for secondary headings (`h2`). If not defined, the default value is `18px`. +- `--pa-fw-p`: Sets the font weight for paragraph and body text. If not defined, the default value is `400`. +- `--pa-fw-h1`: Sets the font weight for main headings and timer digits. If not defined, the default value is `400`. +- `--pa-fw-h2`: Sets the font weight for secondary headings. If not defined, the default value is `400`. +- `--pa-align-p`: Sets text alignment for paragraph text. If not defined, the default value is `start`. +- `--pa-align-h1`: Sets text alignment for main headings. If not defined, the default value is `center`. +- `--pa-align-h2`: Sets text alignment for secondary headings. If not defined, the default value is `center`. ## Inputs -`--pa-input-radius` controls input corner radius. - -`--pa-input-border-w` controls input border width. - -`--pa-input-variant` selects the text field variant by index: - -```ts -['outlined', 'filled', 'underlined', 'solo', 'plain', 'regular'] -``` - -In the example above, `--pa-input-variant: 5` renders the `regular` variant. +- `--pa-input-radius`: Controls the corner radius for inputs, text fields, selects, checkboxes, and alerts. If not defined, the default value is `0px`. +- `--pa-input-border-w`: Controls the border width for inputs, text fields, selects, and checkboxes. If not defined, the default value is `1px`. +- `--pa-input-variant`: Selects the text field visual variant by index. If not defined, the default value is `0` (`outlined`). + Available variants: + - `0`: `outlined` (default) + - `1`: `filled` + - `2`: `underlined` + - `3`: `solo` + - `4`: `plain` + - `5`: `regular` ## Buttons -`--pa-button-variant` selects the button variant by index: - -```ts -['flat', 'elevated', 'tonal', 'outlined', 'text', 'plain'] -``` - -In the example above, `--pa-button-variant: 2` renders the `tonal` variant. - -## Main Widget - -`--pa-main-radius` controls the main widget panel corner radius. - -`--pa-main-border-w` controls the main widget panel border width. - -`--pa-main-border-c` controls the main widget panel border color. - -`--pa-main-bg` controls the widget background and accepts any valid CSS background value. - -`--pa-widget-align` controls the horizontal alignment of the widget content. - -`--pa-widget-state` controls the widget layout state. `0` renders the card-like panel state, and `1` renders the stretched state. - -`--pa-logo-align` controls the logo alignment inside the widget header. +- `--pa-button-variant`: Selects the button visual variant by index. If not defined, the default value is `0` (`flat`). + Available variants: + - `0`: `flat` (default) + - `1`: `elevated` + - `2`: `tonal` + - `3`: `outlined` + - `4`: `text` + - `5`: `plain` + +## Main Widget Layout + +- `--pa-main-radius`: Controls the main widget panel corner radius. If not defined, the default value is `0px`. +- `--pa-main-border-w`: Controls the main widget panel border width. If not defined, the default value is `1px`. +- `--pa-main-border-c`: Controls the main widget panel border color. If not defined, the default value is `#e2e8f0`. +- `--pa-main-bg`: Controls the root widget background. Accepts any valid CSS background value. If not defined, the default value is `white`. +- `--pa-widget-align`: Controls the desktop horizontal alignment of the widget container (`min-width: 601px`). If not defined, the default value is `center`. +- `--pa-widget-state`: Controls the widget layout state. `0` renders the centered card-like panel state, and `1` renders the stretched full-height state. If not defined, the default value is `0`. +- `--pa-logo-align`: Controls the logo horizontal alignment inside the widget header. If not defined, the default value is `center`. diff --git a/stories/CssVariables/css-variables.stories.ts b/stories/CssVariables/css-variables.stories.ts index e85927a..77828ce 100644 --- a/stories/CssVariables/css-variables.stories.ts +++ b/stories/CssVariables/css-variables.stories.ts @@ -57,6 +57,7 @@ const buttonVariantControl = { }; const cssVariableDefinitions: CssVariableDefinition[] = [ + { arg: 'paFontFamily', variable: '--pa-font-family', defaultValue: 'sans-serif', control: { control: 'text' } }, { arg: 'paFsP', variable: '--pa-fs-p', defaultValue: '16px', control: { control: 'text' } }, { arg: 'paFsH1', variable: '--pa-fs-h1', defaultValue: '20px', control: { control: 'text' } }, { arg: 'paFsH2', variable: '--pa-fs-h2', defaultValue: '18px', control: { control: 'text' } }, 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..c8ca356 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,40 @@ 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) { + if (document.head && document.head.firstChild) { + document.head.insertBefore(el, document.head.firstChild); + } else if (document.head) { + 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: {