tosijs-ui 1.0.0 → 1.0.2

package/dist/notifications.js

@@ -1,308 +0,0 @@
-/*#
-
-# notifications
-
-`XinNotification` provides a singleton custom `<xin-notification>` element that manages
-a list of notifications.
-
-The notifications are displayed most-recent first. If the notifications would take more than
-half the height of the display, they are scrolled.
-
-You can post a notification simply with `XinNotification.post()` or `postNotification()`.
-
-```
-interface NotificationSpec {
-  message: string
-  type?: 'success' | 'info' | 'log' | 'warn' | 'error' | 'progress' // default 'info'
-  icon?: SVGElement | string // defaults to an info icon
-  duration?: number
-  progress?: () => number // return percentage completion
-  close?: () => void
-}
-```
-
-If you provide a `progress` callback (which is assumed to return a number from `0-100`, with
-100+ indicating completion) then `XinNotification` will poll it every second until the
-task completes or the notification is closed. Returning 100 or more will automatically close
-the notification.
-
-If you configure a notification's `type = "progress"` but don't provide a `progress` callback
-then an indefinite `<progress>` element will be displayed.
-
-If you provide a `close` callback, it will be fired if the user closes the notification.
-
-`postNotification` returns a callback function that closes the note programmatically (e.g.
-when an operation completes). This will *also* call any `close` callback function you
-provided. (The progress demos in the example exercise this functionality.)
-
-```js
-const { postNotification, icons } = xinjsui
-
-const form = preview.querySelector('xin-form')
-const submit = preview.querySelector('.submit')
-const closeButton = preview.querySelector('.close')
-
-let close
-
-form.submitCallback = (value, isValid) => {
-  if (!isValid) return
-  if (value.type.startsWith('progress')) {
-    startTime = Date.now()
-    const { message, duration, icon } = value
-    close = postNotification({
-      message,
-      type: 'progress',
-      icon,
-      progress: value.type === 'progress' ? () => (Date.now() - startTime) / (10 * duration) : undefined,
-      close: () => { postNotification(`${value.message} cancelled`) },
-    })
-  } else {
-    close = postNotification(value)
-  }
-  console.log(close)
-  closeButton.disabled = false
-}
-
-submit.addEventListener('click', form.submit)
-closeButton.addEventListener('click', () => {
-  if (close) {
-    close()
-  }
-})
-
-postNotification({
-  message: 'Welcome to xinjs-ui notifications, this message will disappear in 2s',
-  duration: 2
-})
-```
-```html
-<xin-form>
-  <h3 slot="header">Notification Test</h3>
-  <xin-field caption="Message" key="message" type="string" value="This is a test…"></xin-field>
-  <xin-field caption="Type" key="type" value="info">
-    <xin-select slot="input"
-      options="error,warn,info,success,log,,progress,progress (indefinite)"
-    ></xin-select>
-  </xin-field>
-  <xin-field caption="Icon" key="icon" value="info">
-    <xin-select slot="input"
-      options="info,bug,thumbsUp,thumbsDown,message"
-    ></xin-select>
-  </xin-field>
-  <xin-field caption="Duration" key="duration" type="number" value="2"></xin-field>
-  <button slot="footer" class="close" disabled>Close Last Notification</button>
-  <span slot="footer" class="elastic"></span>
-  <button slot="footer" class="submit">Post Notification</button>
-</xin-form>
-```
-```css
-xin-form {
-  height: 100%;
-}
-
-xin-form::part(content) {
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-  gap: 10px;
-  background: var(--background);
-}
-
-xin-form::part(header),
-xin-form::part(footer) {
-  background: #eee;
-  justify-content: center;
-  padding: 10px;
-}
-
-xin-form h3 {
-  margin: 0;
-}
-
-xin-form label {
-  display: grid;
-  grid-template-columns: 120px 1fr;
-}
-```
-
-## `postNotification(spec: NotificationSpec | string)`
-
-This is simply a wrapper for `XinNotification.post()`.
-*/
-import { Component, elements, vars } from 'xinjs';
-import { icons } from './icons';
-import { findHighestZ } from './track-drag';
-const { div, button } = elements;
-const COLOR_MAP = {
-    error: 'red',
-    warn: 'orange',
-    info: 'royalblue',
-    log: 'gray',
-    success: 'green',
-    progress: 'royalblue',
-};
-export class XinNotification extends Component {
-    static singleton;
-    static styleSpec = {
-        ':host': {
-            _notificationSpacing: 8,
-            _notificationWidth: 360,
-            _notificationPadding: `${vars.notificationSpacing} ${vars.notificationSpacing50} ${vars.notificationSpacing} ${vars.notificationSpacing200}`,
-            _notificationBg: '#fafafa',
-            _notificationAccentColor: '#aaa',
-            _notificationTextColor: '#444',
-            _notificationIconSize: vars.notificationSpacing300,
-            _notificationButtonSize: 48,
-            _notificationBorderWidth: '3px 0 0',
-            _notificationBorderRadius: vars.notificationSpacing50,
-            position: 'fixed',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            paddingBottom: vars.notificationSpacing,
-            width: vars.notificationWidth,
-            display: 'flex',
-            flexDirection: 'column-reverse',
-            margin: '0 auto',
-            gap: vars.notificationSpacing,
-            maxHeight: '50vh',
-            overflow: 'hidden auto',
-            boxShadow: 'none !important',
-        },
-        ':host *': {
-            color: vars.notificationTextColor,
-        },
-        ':host .note': {
-            display: 'grid',
-            background: vars.notificationBg,
-            padding: vars.notificationPadding,
-            gridTemplateColumns: `${vars.notificationIconSize} 1fr ${vars.notificationButtonSize}`,
-            gap: vars.notificationSpacing,
-            alignItems: 'center',
-            borderRadius: vars.notificationBorderRadius,
-            boxShadow: `0 2px 8px #0006, inset 0 0 0 2px ${vars.notificationAccentColor}`,
-            borderColor: vars.notificationAccentColor,
-            borderWidth: vars.notificationBorderWidth,
-            borderStyle: 'solid',
-            transition: '0.5s ease-in',
-            transitionProperty: 'margin, opacity',
-            zIndex: 1,
-        },
-        ':host .note .icon': {
-            stroke: vars.notificationAccentColor,
-        },
-        ':host .note button': {
-            display: 'flex',
-            lineHeight: vars.notificationButtonSize,
-            padding: 0,
-            margin: 0,
-            height: vars.notificationButtonSize,
-            width: vars.notificationButtonSize,
-            background: 'transparent',
-            alignItems: 'center',
-            justifyContent: 'center',
-            boxShadow: 'none',
-            border: 'none',
-            position: 'relative',
-        },
-        ':host .note button:hover svg': {
-            stroke: vars.notificationAccentColor,
-        },
-        ':host .note button:active svg': {
-            borderRadius: 99,
-            stroke: vars.notificationBg,
-            background: vars.notificationAccentColor,
-            padding: vars.spacing50,
-        },
-        ':host .note svg': {
-            height: vars.notificationIconSize,
-            width: vars.notificationIconSize,
-            pointerEvents: 'none',
-        },
-        ':host .message': {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: vars.notificationSpacing,
-        },
-        ':host .note.closing': {
-            opacity: 0,
-            zIndex: 0,
-        },
-    };
-    static removeNote(note) {
-        note.classList.add('closing');
-        note.style.marginBottom = -note.offsetHeight + 'px';
-        const remove = () => {
-            note.remove();
-        };
-        note.addEventListener('transitionend', remove);
-        setTimeout(remove, 1000);
-    }
-    static post(spec) {
-        const { message, duration, type, close, progress, icon } = Object.assign({ type: 'info', duration: -1 }, typeof spec === 'string' ? { message: spec } : spec);
-        if (!this.singleton) {
-            this.singleton = xinNotification();
-        }
-        const singleton = this.singleton;
-        document.body.append(singleton);
-        singleton.style.zIndex = String(findHighestZ() + 1);
-        const _notificationAccentColor = COLOR_MAP[type];
-        const progressBar = progress || type === 'progress' ? elements.progress() : {};
-        const closeCallback = () => {
-            if (close) {
-                close();
-            }
-            XinNotification.removeNote(note);
-        };
-        const iconElement = icon instanceof SVGElement
-            ? icon
-            : icon
-                ? icons[icon]({ class: 'icon' })
-                : icons.info({ class: 'icon' });
-        const note = div({
-            class: `note ${type}`,
-            style: {
-                _notificationAccentColor,
-            },
-        }, iconElement, div({ class: 'message' }, div(message), progressBar), button({
-            class: 'close',
-            title: 'close',
-            // we can't use onClick because this lives inside a shadowDOM
-            apply(elt) {
-                elt.addEventListener('click', closeCallback);
-            },
-        }, icons.x()));
-        singleton.shadowRoot.append(note);
-        if (progressBar instanceof HTMLProgressElement &&
-            progress instanceof Function) {
-            progressBar.setAttribute('max', String(100));
-            progressBar.value = progress();
-            const interval = setInterval(() => {
-                if (!singleton.shadowRoot.contains(note)) {
-                    clearInterval(interval);
-                    return;
-                }
-                const percentage = progress();
-                progressBar.value = percentage;
-                if (percentage >= 100) {
-                    XinNotification.removeNote(note);
-                }
-            }, 1000);
-        }
-        if (duration > 0) {
-            setTimeout(() => {
-                XinNotification.removeNote(note);
-            }, duration * 1000);
-        }
-        note.scrollIntoView();
-        return closeCallback;
-    }
-    content = null;
-}
-export const xinNotification = XinNotification.elementCreator({
-    tag: 'xin-notification',
-});
-export function postNotification(spec) {
-    return XinNotification.post(spec);
-}

package/dist/password-strength.js

@@ -1,302 +0,0 @@
-/*#
-# password strength
-
-Just wrap it a `<xin-password-strength>` element around an `<input>`
-and it will gauge its content strength as a password. It will also
-let you **securely verify** that the password hasn't been breached.
-
-```js
-const { xinLocalized, localize } = xinjsui
-
-const toggle = preview.querySelector('.toggle')
-const icon = preview.querySelector('xin-icon')
-const input = preview.querySelector('input')
-const breach = preview.querySelector('.breach')
-const output = preview.querySelector('.output')
-const passwordStrength = preview.querySelector('xin-password-strength')
-
-// Localization Example
-passwordStrength.append(xinLocalized({
-  refString: 'Yes',
-  localeChanged () {
-    this.parentElement.strengthDescriptions = [
-      'unacceptable',
-      'very weak',
-      'weak',
-      'moderate',
-      'strong',
-      'very strong',
-    ].map(localize)
-    this.parentElement.queueRender()
-  }
-}))
-
-toggle.addEventListener('click', () => {
-  if (icon.icon === 'eye') {
-    input.type = 'text'
-    icon.icon = 'eyeOff'
-  } else {
-    input.type = 'password'
-    icon.icon = 'eye'
-  }
-})
-
-breach.addEventListener('click', async () => {
-  preview.querySelector('xin-password-strength').isBreached().then(isBreached => {
-    output.textContent =
-      isBreached
-      ? 'This password has been breached, look at console for details'
-      : 'Seems OK'
-    output.classList.toggle('breached', isBreached)
-  })
-})
-```
-```html
-<xin-password-strength>
-  <input class="password" type="password">
-  <button class="toggle">
-    <xin-icon icon="eye"></xin-icon>
-  </button>
-</xin-password-strength>
-
-<br><br>
-<button class="breach">
-  <xin-localized>Check if breached</xin-localized>
-</button>
-<div class="output"></div>
-```
-```css
-input.password {
-  box-shadow: inset 0 0 0 2px var(--indicator-color);
-}
-
-.breached {
-  color: white;
-  background: red;
-}
-```
-
-## Algorithm
-
-The password is assessed to have a strength based on:
-
-- **length** one point for at least `goodLength` characters long.
-- **[a-z]** one point for containing a lowercase letter
-- **[A-Z]** one point for containing an uppercase letter
-- **[0-9]** one point for containing a numeric character
-- **^[a-zA-Z0-9]]** one point for containing some other kind of character
-
-A password smaller than `minLength` is an automatic `0`.
-
-## Attributes
-
-- `minLength` defaults to `8`
-- `goodLength` defaults to `12`
-- `indicatorColors` six HTML colors, separated by commas, defaults to `'#f00,#f40,#f80,#ef0,#8f0,#0d4'`
-- `descriptionColors` six HTML colors, sepeated by commans, defaults to `'#000,#000,#000,#000,#000,#fff'`
-
-## Properties
-
-- `value`, `strength` is a number from 0 to 5
-- `issues` is a structure which you can use to generate feedback
-
-```
-<xin-password-strength>.issues = {
-  tooShort: boolean,
-  short: boolean,
-  noUpper: boolean,
-  noLower: boolean,
-  noNumber: boolean,
-  noSpecial: boolean,
-}
-```
-
-## Customizing / Localizing Strings
-
-The following properties control the feedback generated.
-
-```
-issueDescriptions = {
-  tooShort: 'too short',
-  short: 'short',
-  noUpper: 'no upper case',
-  noLower: 'no lower case',
-  noNumber: 'no digits',
-  noSpecial: 'no unusual characters',
-}
-```
-
-```
-strengthDescriptions = [
-  'unacceptable',
-  'very weak',
-  'weak',
-  'moderate',
-  'strong',
-  'very strong',
-]
-```
-
-## `isBreached()`
-
-`<xin-password-meter>` also provides an `isBreached(): Promise<boolean>` method
-which uses [weakpass.com's API](https://weakpass.com/) to tell you if the password has been
-breached.
-
-> Note that `isBreached` does not send the plain-text password anywhere. It uses **SHA-1**
-to hash the password and then sends that for lookup.
-
-## Utility Functions
-
-Two functions used internally for querying [Weakpass,com](https://weakpass.com/) are
-provided in case they're useful on their own.
-
-`isBreached(password: striing): Promise<boolean>` will return `true` if the password is
-found in Weakpass's database (and spit out extra info to the console).
-
-`digest(s: string, method="sha-1"): Promise<string>` is just a nice wrapper for `crypto.digest`.
-*/
-import { Component, elements, vars, varDefault } from 'xinjs';
-export const digest = async (s, method = 'SHA-1') => {
-    // Convert password to an ArrayBuffer
-    const encoder = new TextEncoder();
-    const data = encoder.encode(s);
-    // Hash the password using SHA-1
-    const hashBuffer = await crypto.subtle.digest(method, data);
-    // Convert the hash to a hexadecimal string
-    const hashArray = Array.from(new Uint8Array(hashBuffer));
-    const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
-    return hashHex;
-};
-export const isBreached = async (password) => {
-    const hashHex = await digest(password);
-    const response = await fetch(`https://weakpass.com/api/v1/search/${hashHex}`);
-    if (response.ok) {
-        const result = await response.json();
-        console.log('password found in weakpass database', result);
-    }
-    return response.status !== 404;
-};
-const { span, xinSlot } = elements;
-export class XinPasswordStrength extends Component {
-    minLength = 8;
-    goodLength = 12;
-    indicatorColors = '#f00,#f40,#f80,#ef0,#8f0,#0a2';
-    descriptionColors = '#000,#000,#000,#000,#000,#fff';
-    issues = {
-        tooShort: true,
-        short: true,
-        noUpper: true,
-        noLower: true,
-        noNumber: true,
-        noSpecial: true,
-    };
-    issueDescriptions = {
-        tooShort: 'too short',
-        short: 'short',
-        noUpper: 'no upper case',
-        noLower: 'no lower case',
-        noNumber: 'no digits',
-        noSpecial: 'no unusual characters',
-    };
-    value = 0;
-    strengthDescriptions = [
-        'unacceptable',
-        'very weak',
-        'weak',
-        'moderate',
-        'strong',
-        'very strong',
-    ];
-    constructor() {
-        super();
-        this.initAttributes('minLength', 'goodLength', 'indicatorColors');
-    }
-    strength(password) {
-        this.issues = {
-            tooShort: password.length < this.minLength,
-            short: password.length < this.goodLength,
-            noUpper: !password.match(/[A-Z]/),
-            noLower: !password.match(/[a-z]/),
-            noNumber: !password.match(/[0-9]/),
-            noSpecial: !password.match(/[^a-zA-Z0-9]/),
-        };
-        return this.issues.tooShort
-            ? 0
-            : Object.values(this.issues).filter((v) => !v).length - 1;
-    }
-    async isBreached() {
-        const password = this.querySelector('input')?.value;
-        if (!password || typeof password !== 'string') {
-            return true;
-        }
-        return await isBreached(password);
-    }
-    updateIndicator = (password) => {
-        const { level, description } = this.parts;
-        const colors = this.indicatorColors.split(',');
-        const descriptionColors = this.descriptionColors.split(',');
-        const strength = this.strength(password);
-        if (this.value !== strength) {
-            this.value = strength;
-            this.dispatchEvent(new Event('change'));
-        }
-        level.style.width = `${(strength + 1) * 16.67}%`;
-        this.style.setProperty('--indicator-color', colors[strength]);
-        this.style.setProperty('--description-color', descriptionColors[strength]);
-        description.textContent = this.strengthDescriptions[strength];
-    };
-    update = (event) => {
-        const input = event.target.closest('input');
-        this.updateIndicator(input?.value || '');
-    };
-    content = () => [
-        xinSlot({ onInput: this.update }),
-        span({ part: 'meter' }, span({ part: 'level' }), span({ part: 'description' })),
-    ];
-    render() {
-        super.render();
-        const input = this.querySelector('input');
-        this.updateIndicator(input?.value);
-    }
-}
-export const xinPasswordStrength = XinPasswordStrength.elementCreator({
-    tag: 'xin-password-strength',
-    styleSpec: {
-        ':host': {
-            display: 'inline-flex',
-            flexDirection: 'column',
-            gap: vars.spacing50,
-            position: 'relative',
-        },
-        ':host xin-slot': {
-            display: 'flex',
-        },
-        ':host [part="meter"]': {
-            display: 'block',
-            position: 'relative',
-            height: varDefault.meterHeight('24px'),
-            background: varDefault.indicatorBg('white'),
-            borderRadius: varDefault.meterRadius('4px'),
-            boxShadow: varDefault.meterShadow(`inset 0 0 0 2px ${vars.indicatorColor}`),
-        },
-        ':host [part="level"]': {
-            height: varDefault.levelHeight('20px'),
-            content: '" "',
-            display: 'inline-block',
-            width: 0,
-            transition: '0.15s ease-out',
-            background: vars.indicatorColor,
-            margin: varDefault.levelMargin('2px'),
-            borderRadius: varDefault.levelRadius('2px'),
-        },
-        ':host [part="description"]': {
-            position: 'absolute',
-            inset: '0',
-            color: vars.descriptionColor,
-            height: varDefault.meterHeight('24px'),
-            lineHeight: varDefault.meterHeight('24px'),
-            textAlign: 'center',
-        },
-    },
-});

package/dist/playwright.config.d.ts

@@ -1,9 +0,0 @@
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
-export default _default;

package/dist/playwright.config.js

@@ -1,73 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export default defineConfig({
-    testDir: './tests',
-    /* Run tests in files in parallel */
-    fullyParallel: true,
-    /* Fail the build on CI if you accidentally left test.only in the source code. */
-    forbidOnly: !!process.env.CI,
-    /* Retry on CI only */
-    retries: process.env.CI ? 2 : 0,
-    /* Opt out of parallel tests on CI. */
-    workers: process.env.CI ? 1 : undefined,
-    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-    reporter: 'html',
-    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-    /* use .pw.ts for playwright (vs. bun) tests */
-    testMatch: /.*\.pw\.ts/,
-    use: {
-        /* Base URL to use in actions like `await page.goto('/')`. */
-        // baseURL: 'http://127.0.0.1:3000',
-        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-        trace: 'on-first-retry',
-        /* allow https on localhost with self-signed certificate */
-        ignoreHTTPSErrors: true,
-    },
-    /* Configure projects for major browsers */
-    projects: [
-        {
-            name: 'chromium',
-            use: { ...devices['Desktop Chrome'] },
-        },
-        {
-            name: 'firefox',
-            use: { ...devices['Desktop Firefox'] },
-        },
-        {
-            name: 'webkit',
-            use: { ...devices['Desktop Safari'] },
-        },
-        /* Test against mobile viewports. */
-        // {
-        //   name: 'Mobile Chrome',
-        //   use: { ...devices['Pixel 5'] },
-        // },
-        // {
-        //   name: 'Mobile Safari',
-        //   use: { ...devices['iPhone 12'] },
-        // },
-        /* Test against branded browsers. */
-        // {
-        //   name: 'Microsoft Edge',
-        //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-        // },
-        // {
-        //   name: 'Google Chrome',
-        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-        // },
-    ],
-    /* Run your local dev server before starting the tests */
-    // webServer: {
-    //   command: 'npm run start',
-    //   url: 'http://127.0.0.1:3000',
-    //   reuseExistingServer: !process.env.CI,
-    // },
-});