@newlogic-digital/ui 3.7.5 → 4.0.0

package/src/scripts/Ui/Control.js

@@ -1,194 +0,0 @@
-import cdn from '../Utils/cdn.js'
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { importStyle } from '@newlogic-digital/utils-js'
-import { validateField } from 'winduum/src/components/form/index.js'
-
-LibStimulus.register('ui-control', class extends Controller {
-    static targets = ['number']
-
-    static values = {
-        dateOptions: {
-            default: {},
-            type: Object
-        },
-        dateDisabled: {
-            default: [],
-            type: Array
-        }
-    }
-
-    async connect() {
-        validateField(this.element, { validate: false })
-
-        this.element.addEventListener('change', () => validateField(this.element))
-
-        if (this.element.querySelector('select')) {
-            return
-        }
-
-        this.typeNumber()
-
-        await this.typeDate()
-
-        await this.typeColor()
-    }
-
-    async typeDate() {
-        const input = this.element.querySelector('[type^="date"], [type="month"]')
-
-        if (input) {
-            const AirDatepicker = (await import('air-datepicker')).default
-            const localeUrl = cdn.datepickerLang
-            const locale = (await import(/* @vite-ignore */ localeUrl)).default.default
-            const minDate = input.min ?? ''
-            const maxDate = input.max ?? ''
-            const timepicker = input.type === 'datetime-local'
-            const monthView = input.type === 'month'
-                ? {
-                        view: 'months',
-                        minView: 'months',
-                        dateFormat: 'MMMM yyyy',
-                        altFieldDateFormat: 'yyyy-MM'
-                    }
-                : {}
-
-            const attributes = [...input.attributes].filter(({ name }) => name.match(/(required|placeholder)/)).map(({ name, value }) => `${name}="${value}"`).join(' ')
-
-            input.setAttribute('type', 'hidden')
-
-            input.insertAdjacentHTML('afterend', `<input type="text" inputmode="none" ${attributes}>`)
-
-            const inputText = this.element.querySelector('[type="text"]')
-
-            if (input.id) {
-                inputText.id = input.id + '-datepicker'
-            }
-
-            inputText.addEventListener('keydown', (e) => {
-                const key = e.key.toLowerCase()
-
-                if (key !== 'backspace' && key !== 'tab') {
-                    e.preventDefault()
-                } else if (key === 'backspace') {
-                    this.datepicker.clear()
-                    inputText.dispatchEvent(new Event('change', { bubbles: true }))
-                }
-            })
-
-            this.datepicker = new AirDatepicker(inputText, {
-                locale,
-                timepicker,
-                minDate,
-                maxDate,
-                startDate: input.value,
-                selectedDates: input.value,
-                altField: input,
-                autoClose: true,
-                container: this.element,
-                minutesStep: 5,
-                altFieldDateFormat: 'yyyy-MM-dd',
-                buttons: ['today', 'clear'],
-                ...monthView,
-                ...this.dateOptionsValue,
-                onRenderCell: ({ date, cellType }) => {
-                    if (cellType === 'day' && this.dateDisabledValue.includes(this.datepicker.formatDate(date, 'yyyy-MM-dd'))) {
-                        return {
-                            disabled: true
-                        }
-                    }
-                },
-                onShow: () => {
-                    this.datepicker.$datepicker.querySelectorAll('.air-datepicker-button').forEach((element) => {
-                        element.setAttribute('type', 'button')
-                        element.setAttribute('tabindex', '-1')
-                    })
-                },
-                onSelect: ({ date }) => {
-                    input.dispatchEvent(new Event('change', { bubbles: true }))
-                }
-            })
-        }
-    }
-
-    async typeColor() {
-        if (this.element.querySelector('[type="color"]') !== null) {
-            const Pickr = (await import('@simonwep/pickr')).default
-            const input = this.element.querySelector('input')
-
-            await importStyle(cdn.pickrCss)
-
-            input.setAttribute('inputmode', 'none')
-            input.setAttribute('type', 'text')
-            input.setAttribute('maxlength', '9')
-            input.setAttribute('pattern', '^#?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$')
-
-            this.element.insertAdjacentHTML('afterbegin', '<div class="me-auto"><div class="color"></div></div>')
-
-            const pickr = new Pickr({
-                el: input,
-                useAsButton: true,
-                theme: 'nano',
-                position: 'bottom-start',
-                components: {
-                    preview: true,
-                    opacity: true,
-                    hue: true,
-                    interaction: {
-                        hex: true,
-                        rgba: true,
-                        input: true
-                    }
-                }
-            }).on('init', (pickr) => {
-                pickr.setColor(input.value)
-            }).on('change', (color) => {
-                input.value = color.toHEXA().toString()
-                this.element.querySelector('.color').style['background-color'] = color.toHEXA().toString()
-            }).on('hide', (pickr) => {
-                pickr.applyColor()
-                input.dispatchEvent(new Event('change', { bubbles: true }))
-            })
-
-            input.addEventListener('change', ({ target }) => {
-                pickr.setColor(target.value)
-            })
-        }
-    }
-
-    typeNumber() {
-        if (this.element.querySelector('[type="number"]') && !this.hasNumberTarget) {
-            if (!this.element.querySelector('.ms-auto')) {
-                this.element.insertAdjacentHTML('beforeend', '<div class="ms-auto"></div>')
-            }
-
-            this.element.querySelector('.ms-auto').insertAdjacentHTML('beforeend', `
-                <div class="flex flex-col gap-0 justify-center -space-y-1 -me-0.5" data-ui-control-target="number">
-                    <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#stepUp">
-                        <svg class="size-4"><use href="#icon-angle-up-solid"></use></svg>
-                    </button>
-                    <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#stepDown">
-                        <svg class="size-4"><use href="#icon-angle-down-solid"></use></svg>
-                    </button>
-                </div>
-            `)
-        }
-    }
-
-    stepUp() {
-        this.element.querySelector('input:not([hidden])').stepUp()
-        this.element.querySelector('input:not([hidden])').dispatchEvent(new Event('change', { bubbles: true }))
-    }
-
-    stepDown() {
-        this.element.querySelector('input:not([hidden])').stepDown()
-        this.element.querySelector('input:not([hidden])').dispatchEvent(new Event('change', { bubbles: true }))
-    }
-
-    showPicker() {
-        this.element.querySelector('input:not([hidden])').showPicker()
-    }
-
-    showDatepicker() {
-        this.datepicker.$el.focus()
-    }
-})

package/src/scripts/Ui/ControlSelect.js

@@ -1,25 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { dataset } from '@newlogic-digital/utils-js'
-
-LibStimulus.register('ui-control-select', class extends Controller {
-    connect() {
-        this.select = this.element.querySelector('select')
-        const option = this.element.querySelectorAll('[data-option]')
-
-        if (option[0]) {
-            option.forEach((option) => {
-                if (option.dataset.disabled) {
-                    return
-                }
-
-                dataset(option, 'action').add('click->ui-control-select#choose', 'keydown.enter->ui-control-select#choose')
-            })
-        }
-    }
-
-    choose({ currentTarget }) {
-        this.select.value = currentTarget.dataset.option
-        this.select.dispatchEvent(new Event('change', { bubbles: true }))
-        document.activeElement.blur()
-    }
-})

package/src/scripts/Ui/Text.js

@@ -1,21 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-
-LibStimulus.register('ui-text', class extends Controller {
-    connect() {
-        function wrap(element, wrapper) {
-            element.parentNode.insertBefore(wrapper, element)
-            wrapper.appendChild(element)
-        }
-
-        this.element.querySelectorAll('table').forEach((table) => {
-            wrap(table, new DOMParser().parseFromString('<div class="overflow-x-auto max-w-full"></div>', 'text/html').body.firstChild)
-        })
-
-        this.element.querySelectorAll('iframe').forEach((iframe) => {
-            if (iframe.width && iframe.height) {
-                iframe.style.aspectRatio = iframe.width + '/' + iframe.height
-                iframe.style.height = 'auto'
-            }
-        })
-    }
-})

package/src/scripts/Utils/+.js

@@ -1,3 +0,0 @@
-export { default as cdn } from './cdn.js'
-export { default as initAfter } from './initAfter.js'
-import './utilities.js'

package/src/scripts/Utils/cdn.js

@@ -1,5 +0,0 @@
-export default {
-    recaptcha: 'https://www.google.com/recaptcha/enterprise.js?render={apikey}',
-    pickrCss: 'https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.2/dist/themes/nano.min.css',
-    datepickerLang: `https://cdn.jsdelivr.net/npm/air-datepicker@3.3.5/locale/${document.documentElement.lang}.js/+esm`
-}

package/src/scripts/Utils/naja.js

@@ -1,41 +0,0 @@
-import naja from 'naja'
-
-export const initNaja = (element, bindUI = true, selectors = 'button, [role="button"]') => {
-    bindUI && naja.uiHandler.bindUI(element)
-
-    element.querySelectorAll(`:where(${selectors})${naja.uiHandler.selector}`).forEach((element) => {
-        if (element.form && element.type === 'submit') return
-
-        element.addEventListener('click', (event) => {
-            naja.uiHandler.processInteraction(element, element.dataset.najaMethod ?? 'GET', element.dataset.najaUrl, element.dataset.najaData, {}, event)
-        })
-    })
-}
-
-export const NajaFormValidityExtension = {
-    initialize(naja) {
-        naja.uiHandler.addEventListener('interaction', (event) => {
-            const { element } = event.detail
-
-            if (element?.form && !element.form.reportValidity()) {
-                event.preventDefault()
-            }
-        })
-    }
-}
-
-export const NajaRecaptchaExtension = {
-    initialize(naja) {
-        naja.uiHandler.addEventListener('interaction', (event) => {
-            const { element } = event.detail
-
-            if (
-                (element.form ?? element)?.dataset?.controller?.includes('lib-recaptcha')
-                && !event.detail?.originalEvent?.detail?.recaptchaExecuted
-            ) {
-                event.preventDefault()
-                return false
-            }
-        })
-    }
-}

package/src/scripts/Utils/utilities.js

@@ -1,8 +0,0 @@
-import { Controller, LibStimulus } from '../Libraries/Stimulus.js'
-
-LibStimulus.register('utils', class extends Controller {
-    darkMode() {
-        document.documentElement.classList.toggle('dark')
-        localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
-    }
-})

package/src/styles/Components/+.css

@@ -1,5 +0,0 @@
-@import "Dialog/+.css";
-@import "Drawer.css";
-@import "Field.css";
-@import "Popover.css";
-@import "Toaster.css";

package/src/styles/Components/Dialog/+.css

@@ -1,3 +0,0 @@
-@import "Content.css";
-@import "CookieConsent.css";
-@import "Default.css";

package/src/styles/Components/Dialog/Content.css

@@ -1,2 +0,0 @@
-@import "winduum/src/components/dialog/content.css";
-@import "winduum/src/components/dialog/content-props.css";

package/src/styles/Components/Dialog/Default.css

@@ -1,2 +0,0 @@
-@import "winduum/src/components/dialog/default.css";
-@import "winduum/src/components/dialog/default-props.css";

package/src/styles/Components/Drawer.css

@@ -1,18 +0,0 @@
-@import "winduum/src/components/drawer/default-props.css";
-@import "winduum/src/components/drawer/default.css";
-@import "winduum/src/components/drawer/content-props.css";
-@import "winduum/src/components/drawer/content.css";
-
-.c-drawer {
-  --c-drawer-content-width: min(calc(100vw - 2rem), 22rem);
-  --c-drawer-content-height: 100dvh;
-
-  &:not(.active) {
-    opacity: 0;
-  }
-}
-
-.c-drawer-content {
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}

package/src/styles/Layout/+.css

@@ -1,3 +0,0 @@
-@import "Header.css";
-@import "Main.css";
-@import "Nav.css";

package/src/styles/Layout/Header.css

@@ -1,18 +0,0 @@
-:root {
-  --l-header-height: 4rem;
-  --l-scroll-padding-top: calc(var(--l-header-height) + 1rem);
-}
-
-.l-header {
-  position: sticky;
-  top: 0;
-  z-index: var(--z-20);
-  padding-inline: 2rem calc(2rem + var(--c-dialog-scrollbar-width, 0rem));
-  background-color: var(--color-dark);
-  color: var(--color-light);
-  height: var(--l-header-height);
-
-  .dark & {
-    background-color: var(--color-body-secondary);
-  }
-}

package/src/styles/Layout/Nav.css

@@ -1,23 +0,0 @@
-.l-nav {
-  .c-drawer-content {
-    padding: 2rem;
-  }
-
-  [data-part~="logo"] {
-    display: flex;
-    padding: 0.75rem 0 2.5rem;
-  }
-
-  [data-part~="nav"] {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    align-items: flex-start;
-
-    & a {
-      padding: 0.5rem 0;
-      font-size: 1.75rem;
-      display: block;
-    }
-  }
-}

package/src/styles/Libraries/+.css

@@ -1,2 +0,0 @@
-@import "Datepicker.css";
-@import "Pickr.css";

package/src/styles/Libraries/Datepicker.css

@@ -1,54 +0,0 @@
-@import "air-datepicker/air-datepicker.css";
-
-.air-datepicker {
-  --adp-btn-color: var(--color-primary);
-  --adp-day-name-color: var(--color-primary);
-  --adp-color-current-date: var(--color-main);
-  --adp-cell-background-color-selected: var(--color-primary);
-  --adp-cell-background-color-selected-hover: var(--color-primary);
-  --adp-cell-border-radius: var(--rounded);
-  --adp-border-radius: var(--rounded);
-
-  .dark & {
-    --adp-background-color: var(--color-body-tertiary);
-    --adp-background-color-hover: var(--color-body-secondary);
-    --adp-background-color-active: var(--color-body-secondary);
-    --adp-color: var(--color-main);
-    --adp-color-secondary: var(--color-main);
-    --adp-color-other-month: color-mix(in srgb, var(--color-main) 50%, var(--color-dark));
-    --adp-border-color: var(--color-body-secondary);
-    --adp-border-color-inner: var(--color-body-secondary);
-    --adp-border-color-inline: var(--color-body-secondary);
-  }
-
-  font-family: inherit;
-
-  & input[type="range"] {
-    border: 0;
-    outline: 0;
-  }
-
-  .air-datepicker--pointer {
-    &::after {
-      background: var(--adp-background-color);
-    }
-  }
-
-  .air-datepicker-cell {
-    &.-current- {
-      --sq: 0.25rem;
-      --bottom: 0.25rem;
-
-      &::before {
-        content: "";
-        width: var(--sq);
-        height: var(--sq);
-        border-radius: var(--rounded-full);
-        background-color: var(--color-success);
-        position: absolute;
-        bottom: var(--bottom);
-        left: calc(50% - var(--sq) / 2);
-      }
-    }
-  }
-}

package/src/styles/Libraries/Pickr.css

@@ -1,13 +0,0 @@
-.pcr-app {
-  border-radius: var(--rounded);
-  overflow: hidden;
-
-  .dark & {
-    background: var(--color-body-secondary);
-
-    .pcr-interaction input {
-      background: var(--color-body-tertiary);
-      box-shadow: none;
-    }
-  }
-}

package/src/styles/Sections/+.css

@@ -1 +0,0 @@
-/* empty */

package/src/styles/Ui/+.css

@@ -1,16 +0,0 @@
-@import "Badge.css";
-@import "Btn.css";
-@import "Check.css";
-@import "Control.css";
-@import "ControlSelect.css";
-@import "Group.css";
-@import "Heading.css";
-@import "Image.css";
-@import "Info.css";
-@import "Label.css";
-@import "Link.css";
-@import "Notice.css";
-@import "Progress.css";
-@import "Switch.css";
-@import "Text.css";
-@import "Title.css";

package/src/styles/Ui/Badge.css

@@ -1,8 +0,0 @@
-@import "winduum/src/ui/badge/default.css";
-@import "winduum/src/ui/badge/default-props.css";
-@import "winduum/src/ui/badge/sm.css";
-@import "winduum/src/ui/badge/lg.css";
-@import "winduum/src/ui/badge/bordered.css";
-@import "winduum/src/ui/badge/muted.css";
-@import "winduum/src/ui/badge/square.css";
-@import "winduum/src/ui/badge/circle.css";

package/src/styles/Ui/Btn.css

@@ -1,14 +0,0 @@
-@import "winduum/src/ui/btn/default.css";
-@import "winduum/src/ui/btn/default-props.css";
-@import "winduum/src/ui/btn/lg.css";
-@import "winduum/src/ui/btn/sm.css";
-@import "winduum/src/ui/btn/interactive.css";
-@import "winduum/src/ui/btn/interactive-props.css";
-@import "winduum/src/ui/btn/loading.css";
-@import "winduum/src/ui/btn/loading-props.css";
-@import "winduum/src/ui/btn/wide.css";
-@import "winduum/src/ui/btn/bordered.css";
-@import "winduum/src/ui/btn/ghosted.css";
-@import "winduum/src/ui/btn/muted.css";
-@import "winduum/src/ui/btn/square.css";
-@import "winduum/src/ui/btn/circle.css";

package/src/styles/Ui/Check.css

@@ -1 +0,0 @@
-@import "winduum/src/ui/check/index.css";

package/src/styles/Ui/Control.css

@@ -1,57 +0,0 @@
-@import "winduum/src/ui/control/default.css";
-@import "winduum/src/ui/control/default-props.css";
-@import "winduum/src/ui/control/interactive.css";
-@import "winduum/src/ui/control/interactive-props.css";
-@import "winduum/src/ui/control/file.css";
-@import "winduum/src/ui/control/select.css";
-@import "winduum/src/ui/control/select-props.css";
-@import "winduum/src/ui/control/icon.css";
-@import "winduum/src/ui/control/icon-props.css";
-@import "winduum/src/ui/control/floating.css";
-@import "winduum/src/ui/control/floating-props.css";
-@import "winduum/src/ui/control/invalid.css";
-
-.ui-control {
-  --ui-control-font-size: var(--text-sm);
-
-  &.active label,
-  :where(input, textarea):is(:focus, [placeholder]) ~ label,
-  :where(select):is([data-placeholder]) ~ label,
-  &:has(.-active-) label {
-    transform: translateY(calc(var(--ui-control-label-translate-y) * -1)) scale(var(--ui-control-label-scale));
-    opacity: var(--ui-control-label-focus-opacity, 0.5);
-  }
-
-  &:has(label):not(.active) select:not([data-placeholder]) {
-    font-size: 0;
-    height: inherit;
-
-    & option {
-      font-size: var(--ui-control-font-size);
-    }
-  }
-
-  :where(.color) {
-    width: var(--ui-control-icon-size);
-    height: var(--ui-control-icon-size);
-    border-radius: 50%;
-    overflow: hidden;
-    display: block;
-    border: 1px solid rgb(0 0 0 / 15%);
-  }
-
-  :where([type="number"]) {
-    -moz-appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-    }
-  }
-
-  :where(input) {
-    &::-webkit-calendar-picker-indicator {
-      display: none;
-    }
-  }
-}

package/src/styles/Ui/ControlSelect.css

@@ -1,57 +0,0 @@
-.ui-control[data-controller~="ui-control-select"] {
-  position: relative;
-  cursor: pointer;
-
-  & select {
-    pointer-events: none;
-  }
-
-  & div[aria-hidden] {
-    grid-area: c-control;
-    will-change: transform;
-    border-radius: inherit;
-    position: absolute;
-    background-color: var(--color-body);
-    z-index: 100;
-    inset-inline: 0;
-    top: 100%;
-    margin-top: 0.5rem;
-    border: 1px solid color-mix(in srgb, currentcolor 10%, transparent);
-    transform: scaleY(0);
-    opacity: 0;
-    transition: var(--transition-opacity), var(--transition-transform);
-    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
-    transition-duration: 200ms;
-    backface-visibility: hidden;
-    transform-origin: center top;
-    user-select: none;
-    max-height: 12rem;
-    overflow-y: auto;
-    box-shadow: 0 0.15em 1.5em 0 color-mix(in srgb, var(--color-dark) 5%, transparent), 0 0 1em 0 color-mix(in srgb, var(--color-dark) 5%, transparent);
-    padding: 0.375rem;
-    color: currentcolor;
-    cursor: default;
-
-    & [data-option] {
-      padding: calc(var(--ui-control-px) / 1.5) var(--ui-control-px);
-      cursor: pointer;
-      transition: var(--transition-background);
-      font-size: var(--ui-control-font-size);
-      border-radius: inherit;
-
-      &[data-disabled] {
-        opacity: 0.5;
-        pointer-events: none;
-      }
-
-      &:is(:hover, :focus) {
-        background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
-      }
-    }
-  }
-
-  &:focus-within select ~ div[aria-hidden] {
-    opacity: 1;
-    transform: none;
-  }
-}

package/src/styles/Ui/Group.css

@@ -1 +0,0 @@
-@import "winduum/src/ui/group/index.css";

package/src/styles/Ui/Heading.css

@@ -1,4 +0,0 @@
-@import "winduum/src/ui/heading/default.css";
-@import "winduum/src/ui/heading/default-props.css";
-@import "winduum/src/ui/heading/sm.css";
-@import "winduum/src/ui/heading/lg.css";

package/src/styles/Ui/Image.css

@@ -1 +0,0 @@
-@import "winduum/src/ui/image/index.css";

package/src/styles/Ui/Info.css

@@ -1 +0,0 @@
-@import "winduum/src/ui/info/index.css";

package/src/styles/Ui/Label.css

@@ -1 +0,0 @@
-@import "winduum/src/ui/label/index.css";

package/src/styles/Ui/Link.css

@@ -1,8 +0,0 @@
-@import "winduum/src/ui/link/default.css";
-@import "winduum/src/ui/link/interactive.css";
-@import "winduum/src/ui/link/interactive-props.css";
-
-.ui-link {
-  --ui-link-font-weight: var(--font-medium);
-  --ui-link-font-size: var(--text-sm);
-}