@pgcorp/ui-kit 0.10.2 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -0
- package/dist/assets/src/components/shared/_internal/{SDialogSurface.css_vue_type_style_index_0_src_979bf586_scoped_979bf586_lang.css → SDialogSurface.css_vue_type_style_index_0_src_d1b65adf_scoped_d1b65adf_lang.css} +1 -1
- package/dist/assets/src/components/shared/containers/SDrawer.css_vue_type_style_index_0_src_091d7325_scoped_091d7325_lang.css +2 -0
- package/dist/assets/src/components/shared/containers/{SModal.css_vue_type_style_index_0_src_dc3c799e_scoped_dc3c799e_lang.css → SModal.css_vue_type_style_index_0_src_23373daf_scoped_23373daf_lang.css} +1 -1
- package/dist/assets/src/components/shared/controls/{SInputText.css_vue_type_style_index_0_src_6d42d245_scoped_6d42d245_lang.css → SInputText.css_vue_type_style_index_0_src_a9c5f1aa_scoped_a9c5f1aa_lang.css} +1 -1
- package/dist/src/components/layout/SSideMenuButton.vue.d.ts +1 -1
- package/dist/src/components/shared/_internal/SDialogSurface.vue.d.ts +2 -1
- package/dist/src/components/shared/_internal/SDialogSurface.vue.js +2 -2
- package/dist/src/components/shared/_internal/SDialogSurface.vue_vue_type_script_setup_true_lang.js +37 -36
- package/dist/src/components/shared/_internal/dialogSurface.d.ts +3 -0
- package/dist/src/components/shared/_internal/dialogSurface.js +23 -19
- package/dist/src/components/shared/containers/SDrawer.vue.d.ts +5 -1
- package/dist/src/components/shared/containers/SDrawer.vue.js +2 -2
- package/dist/src/components/shared/containers/SDrawer.vue_vue_type_script_setup_true_lang.js +48 -44
- package/dist/src/components/shared/containers/SModal.vue.d.ts +5 -1
- package/dist/src/components/shared/containers/SModal.vue.js +2 -2
- package/dist/src/components/shared/containers/SModal.vue_vue_type_script_setup_true_lang.js +47 -41
- package/dist/src/components/shared/controls/SInputText.vue.d.ts +6 -0
- package/dist/src/components/shared/controls/SInputText.vue.js +2 -2
- package/dist/src/components/shared/controls/SInputText.vue_vue_type_script_setup_true_lang.js +117 -97
- package/docs/accessibility.md +10 -0
- package/docs/public-api.md +12 -0
- package/package.json +1 -1
- package/dist/assets/src/components/shared/containers/SDrawer.css_vue_type_style_index_0_src_d0cace23_scoped_d0cace23_lang.css +0 -2
package/README.md
CHANGED
|
@@ -606,6 +606,29 @@ IME composition fails with an explicit diagnostic. The `selection-change`,
|
|
|
606
606
|
`compositionstart`, `compositionupdate`, `compositionend`, and `state-change`
|
|
607
607
|
events synchronize a popup without reading internal DOM.
|
|
608
608
|
|
|
609
|
+
### Ограничения длины текста / Text length constraints
|
|
610
|
+
|
|
611
|
+
`SInputText.minLength` и `SInputText.maxLength` задают native constraint
|
|
612
|
+
validation и предел пользовательского ввода через типизированный API владельца
|
|
613
|
+
поля. Значения являются неотрицательными safe integers, `minLength` не превышает
|
|
614
|
+
`maxLength`; контракт применяется только к textual types: `text`, `search`,
|
|
615
|
+
`password`, `email`, `tel` и `url`.
|
|
616
|
+
|
|
617
|
+
`SInputText.minLength` and `SInputText.maxLength` expose native constraint
|
|
618
|
+
validation and the user-input limit through the field owner's typed API. Values
|
|
619
|
+
are non-negative safe integers, `minLength` does not exceed `maxLength`, and the
|
|
620
|
+
contract applies only to textual types: `text`, `search`, `password`, `email`,
|
|
621
|
+
`tel`, and `url`.
|
|
622
|
+
|
|
623
|
+
```vue
|
|
624
|
+
<SInputText
|
|
625
|
+
v-model="profileName"
|
|
626
|
+
label="Имя профиля"
|
|
627
|
+
:min-length="3"
|
|
628
|
+
:max-length="120"
|
|
629
|
+
/>
|
|
630
|
+
```
|
|
631
|
+
|
|
609
632
|
### Drawer placement
|
|
610
633
|
|
|
611
634
|
`SDrawer` использует `placement="right"` по умолчанию. Нижняя панель задаётся
|
|
@@ -632,6 +655,32 @@ with the side drawer.
|
|
|
632
655
|
</SDrawer>
|
|
633
656
|
```
|
|
634
657
|
|
|
658
|
+
### Dialog heading hierarchy
|
|
659
|
+
|
|
660
|
+
`SModal` и `SDrawer` используют `heading-level="2"` по умолчанию: самостоятельный
|
|
661
|
+
диалог следует за основным `h1` страницы. Для диалога, вложенного в секцию или
|
|
662
|
+
другой dialog surface, consumer передаёт фактический уровень document outline
|
|
663
|
+
числом от `1` до `6`. Видимый заголовок при любом уровне остаётся accessible name
|
|
664
|
+
через `aria-labelledby`; заменять его локальным заголовком или DOM-обходом не
|
|
665
|
+
нужно.
|
|
666
|
+
|
|
667
|
+
`SModal` and `SDrawer` default to `heading-level="2"`, so a standalone dialog
|
|
668
|
+
follows the page's primary `h1`. A dialog nested in a section or another dialog
|
|
669
|
+
surface receives its actual document-outline level from the consumer as an
|
|
670
|
+
integer from `1` through `6`. At every level the visible title remains the
|
|
671
|
+
accessible name through `aria-labelledby`; no local heading or DOM workaround
|
|
672
|
+
is required.
|
|
673
|
+
|
|
674
|
+
```vue
|
|
675
|
+
<SModal v-model:open="open" title="Копировать" :heading-level="2">
|
|
676
|
+
<CopyForm />
|
|
677
|
+
</SModal>
|
|
678
|
+
|
|
679
|
+
<SDrawer v-model:open="detailsOpen" title="Параметры" :heading-level="3">
|
|
680
|
+
<ProjectDetails />
|
|
681
|
+
</SDrawer>
|
|
682
|
+
```
|
|
683
|
+
|
|
635
684
|
### Dialog open lifecycle
|
|
636
685
|
|
|
637
686
|
`SModal` и `SDrawer` эмитят `opened` один раз для каждого подтверждённого цикла
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-d1b65adf],[data-v-d1b65adf]:before,[data-v-d1b65adf]:after,[data-v-d1b65adf]::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial}}}.s-dialog-surface[data-v-d1b65adf]{box-shadow:var(--s-elevation-overlay)}.s-dialog-surface[data-v-d1b65adf]:focus-visible{outline:var(--s-focus-ring-width) solid var(--s-focus-ring-color);outline-offset:var(--s-focus-ring-inset-offset)}.s-dialog-surface[data-presentation=modal][data-v-d1b65adf]{width:100%;transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);border-radius:var(--radius-2xl,1rem);padding:calc(var(--spacing,.25rem) * 6);text-align:left;vertical-align:middle;transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background-color:var(--color-surface-0,#fff);overflow:hidden}.s-dialog-surface[data-presentation=modal][data-v-d1b65adf]:where(.dark,.dark *){background-color:var(--color-surface-800,#1e293b)}.s-dialog-surface[data-presentation=modal][data-surface=subtle][data-v-d1b65adf]{background-color:var(--color-surface-50,#f8fafc)}.s-dialog-surface[data-presentation=modal][data-surface=subtle][data-v-d1b65adf]:where(.dark,.dark *){background-color:var(--color-surface-900,#0f172a)}.s-dialog-surface[data-presentation=modal][data-scroll=body][data-v-d1b65adf]{flex-direction:column;max-height:calc(100dvh - 2rem);display:flex}.s-dialog-surface[data-presentation=modal][data-scroll=body] .s-dialog-surface__body[data-v-d1b65adf]{flex:1;min-height:0;overflow-y:auto}.s-dialog-surface[data-presentation=modal][data-layout=fullscreen][data-v-d1b65adf]{border-radius:0;max-width:100%;height:100%;min-height:100vh}.s-dialog-surface[data-presentation=modal][data-size=sm][data-v-d1b65adf]{max-width:24rem}.s-dialog-surface[data-presentation=modal][data-size=md][data-v-d1b65adf]{max-width:28rem}.s-dialog-surface[data-presentation=modal][data-size=lg][data-v-d1b65adf]{max-width:32rem}.s-dialog-surface[data-presentation=modal][data-size=xl][data-v-d1b65adf]{max-width:36rem}.s-dialog-surface[data-presentation=modal][data-size="2xl"][data-v-d1b65adf]{max-width:42rem}.s-dialog-surface[data-presentation=modal][data-size="3xl"][data-v-d1b65adf]{max-width:48rem}.s-dialog-surface[data-presentation=modal][data-size=wide][data-v-d1b65adf]{max-width:72rem}.s-dialog-surface[data-presentation=modal] .s-dialog-surface__header[data-v-d1b65adf]{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-surface-200,#e2e8f0);padding-bottom:calc(var(--spacing,.25rem) * 4);justify-content:space-between;align-items:flex-start;display:flex}.s-dialog-surface[data-presentation=modal] .s-dialog-surface__header[data-v-d1b65adf]:where(.dark,.dark *){border-color:var(--color-surface-700,#334155)}.s-dialog-surface[data-presentation=modal] .s-dialog-surface__title[data-v-d1b65adf]{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-surface-900,#0f172a)}.s-dialog-surface[data-presentation=modal] .s-dialog-surface__title[data-v-d1b65adf]:where(.dark,.dark *){color:var(--color-surface-100,#f1f5f9)}.s-dialog-surface[data-presentation=modal] .s-dialog-surface__body[data-v-d1b65adf]{margin-top:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-surface-600,#475569)}.s-dialog-surface[data-presentation=modal] .s-dialog-surface__body[data-v-d1b65adf]:where(.dark,.dark *){color:var(--color-surface-300,#cbd5e1)}.s-dialog-surface[data-presentation=modal] .s-dialog-surface__footer[data-v-d1b65adf]{margin-top:calc(var(--spacing,.25rem) * 6);justify-content:flex-end;gap:calc(var(--spacing,.25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-surface-200,#e2e8f0);padding-top:calc(var(--spacing,.25rem) * 4);display:flex}.s-dialog-surface[data-presentation=modal] .s-dialog-surface__footer[data-v-d1b65adf]:where(.dark,.dark *){border-color:var(--color-surface-700,#334155)}.s-dialog-surface[data-presentation=modal] .s-dialog-surface__footer[data-layout=split][data-v-d1b65adf]{justify-content:flex-start;align-items:center;column-gap:calc(var(--spacing,.25rem) * 3);row-gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap}.s-dialog-surface__footer-start[data-v-d1b65adf],.s-dialog-surface__footer-end[data-v-d1b65adf]{align-items:center;gap:calc(var(--spacing,.25rem) * 2);flex-wrap:wrap;min-width:0;display:flex}.s-dialog-surface__footer-start[data-v-d1b65adf]{margin-right:auto}.s-dialog-surface__footer-end[data-v-d1b65adf]{justify-content:flex-end;margin-left:auto}.s-dialog-surface[data-presentation=drawer][data-v-d1b65adf]{border-left-style:var(--tw-border-style);border-left-width:1px;border-color:var(--color-surface-200,#e2e8f0);background-color:var(--color-surface-0,#fff);width:100%;height:100%;color:var(--color-surface-900,#0f172a);flex-direction:column;display:flex;position:relative;overflow:hidden}.s-dialog-surface[data-presentation=drawer][data-v-d1b65adf]:where(.dark,.dark *){border-color:var(--color-surface-700,#334155);background-color:var(--color-surface-900,#0f172a);color:var(--color-surface-0,#fff)}.s-dialog-surface[data-presentation=drawer][data-size=sm][data-v-d1b65adf]{max-width:30rem}.s-dialog-surface[data-presentation=drawer][data-size=md][data-v-d1b65adf]{max-width:36rem}.s-dialog-surface[data-presentation=drawer][data-size=lg][data-v-d1b65adf]{max-width:44rem}.s-dialog-surface[data-presentation=drawer][data-placement=bottom][data-v-d1b65adf]{border-top-left-radius:var(--radius-2xl,1rem);border-top-right-radius:var(--radius-2xl,1rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-left-style:var(--tw-border-style);border-left-width:0;border-color:var(--color-surface-200,#e2e8f0);max-width:none}.s-dialog-surface[data-presentation=drawer][data-placement=bottom][data-v-d1b65adf]:where(.dark,.dark *){border-color:var(--color-surface-700,#334155)}.s-dialog-surface[data-presentation=drawer][data-placement=bottom][data-v-d1b65adf]{width:100%;max-height:calc(100dvh - 1rem)}.s-dialog-surface[data-presentation=drawer][data-placement=bottom][data-size=sm][data-v-d1b65adf]{height:50dvh}.s-dialog-surface[data-presentation=drawer][data-placement=bottom][data-size=md][data-v-d1b65adf]{height:70dvh}.s-dialog-surface[data-presentation=drawer][data-placement=bottom][data-size=lg][data-v-d1b65adf]{height:90dvh}.s-dialog-surface[data-presentation=drawer] .s-dialog-surface__header[data-v-d1b65adf]{align-items:flex-start;gap:calc(var(--spacing,.25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-surface-200,#e2e8f0);padding-inline:calc(var(--spacing,.25rem) * 5);padding-block:calc(var(--spacing,.25rem) * 4);display:flex}@media (width>=48rem){.s-dialog-surface[data-presentation=drawer] .s-dialog-surface__header[data-v-d1b65adf]{padding-inline:calc(var(--spacing,.25rem) * 6)}}.s-dialog-surface[data-presentation=drawer] .s-dialog-surface__header[data-v-d1b65adf]:where(.dark,.dark *){border-color:var(--color-surface-700,#334155)}.s-dialog-surface[data-presentation=drawer] .s-dialog-surface__title[data-v-d1b65adf]{min-width:0;font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-leading:calc(var(--spacing,.25rem) * 6);line-height:calc(var(--spacing,.25rem) * 6);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-surface-950,#020617);flex:1}.s-dialog-surface[data-presentation=drawer] .s-dialog-surface__title[data-v-d1b65adf]:where(.dark,.dark *){color:var(--color-surface-0,#fff)}.s-dialog-surface[data-presentation=drawer] .s-dialog-surface__body[data-v-d1b65adf]{padding:calc(var(--spacing,.25rem) * 5);flex:1;overflow-y:auto}@media (width>=48rem){.s-dialog-surface[data-presentation=drawer] .s-dialog-surface__body[data-v-d1b65adf]{padding:calc(var(--spacing,.25rem) * 6)}}.s-dialog-surface[data-presentation=drawer] .s-dialog-surface__footer[data-v-d1b65adf]{justify-content:flex-end;gap:calc(var(--spacing,.25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-surface-200,#e2e8f0);padding-inline:calc(var(--spacing,.25rem) * 5);padding-block:calc(var(--spacing,.25rem) * 4);flex-wrap:wrap;display:flex}@media (width>=48rem){.s-dialog-surface[data-presentation=drawer] .s-dialog-surface__footer[data-v-d1b65adf]{padding-inline:calc(var(--spacing,.25rem) * 6)}}.s-dialog-surface[data-presentation=drawer] .s-dialog-surface__footer[data-v-d1b65adf]:where(.dark,.dark *){border-color:var(--color-surface-700,#334155)}@media (width<=767px){.s-dialog-surface[data-presentation=drawer][data-layout=mobile-fullscreen][data-v-d1b65adf]{border-left-style:var(--tw-border-style);border-left-width:0;max-width:100%}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
+
.s-drawer-backdrop[data-v-091d7325]{background:var(--s-overlay-backdrop-surface);-webkit-backdrop-filter:blur(var(--s-overlay-backdrop-blur));backdrop-filter:blur(var(--s-overlay-backdrop-blur));position:fixed;inset:0}.s-drawer-shell[data-v-091d7325]{position:fixed;inset:0}.s-drawer-positioner[data-v-091d7325]{justify-content:flex-end;align-items:stretch;display:flex;position:absolute;inset:0}.s-drawer-positioner[data-placement=bottom][data-v-091d7325]{justify-content:stretch;align-items:flex-end}.s-drawer-backdrop-enter-active[data-v-091d7325],.s-drawer-backdrop-leave-active[data-v-091d7325]{transition:opacity var(--s-motion-standard) ease}.s-drawer-backdrop-enter-from[data-v-091d7325],.s-drawer-backdrop-leave-to[data-v-091d7325]{opacity:0}.s-drawer-panel-enter-active[data-v-091d7325],.s-drawer-panel-leave-active[data-v-091d7325]{transition:opacity var(--s-motion-standard) ease, transform var(--s-motion-standard) ease}.s-drawer-panel-enter-from[data-v-091d7325],.s-drawer-panel-leave-to[data-v-091d7325]{opacity:0;transform:translate(1.5rem)}.s-drawer-shell[data-placement=bottom].s-drawer-panel-enter-from[data-v-091d7325],.s-drawer-shell[data-placement=bottom].s-drawer-panel-leave-to[data-v-091d7325]{transform:translateY(1.5rem)}@media (width<=767px){.s-drawer-shell[data-placement=right].s-drawer-panel-enter-from[data-v-091d7325],.s-drawer-shell[data-placement=right].s-drawer-panel-leave-to[data-v-091d7325]{transform:translateY(1.5rem)}}@media (prefers-reduced-motion:reduce){.s-drawer-backdrop-enter-active[data-v-091d7325],.s-drawer-backdrop-leave-active[data-v-091d7325],.s-drawer-panel-enter-active[data-v-091d7325],.s-drawer-panel-leave-active[data-v-091d7325]{transition:none}.s-drawer-panel-enter-from[data-v-091d7325],.s-drawer-panel-leave-to[data-v-091d7325]{transform:none}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.s-modal-backdrop[data-v-
|
|
2
|
+
.s-modal-backdrop[data-v-23373daf]{background:var(--s-overlay-backdrop-surface);-webkit-backdrop-filter:blur(var(--s-overlay-backdrop-blur));backdrop-filter:blur(var(--s-overlay-backdrop-blur));position:fixed;inset:0}.s-modal-container[data-v-23373daf]{position:fixed;inset:0;overflow-y:auto}.s-modal-panel-container[data-v-23373daf]{min-height:100%;padding:calc(var(--spacing,.25rem) * 4);text-align:center;justify-content:center;align-items:center;display:flex}.s-modal-panel-container--fullscreen[data-v-23373daf]{text-align:left;justify-content:stretch;align-items:stretch;padding:0}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-a9c5f1aa],[data-v-a9c5f1aa]:before,[data-v-a9c5f1aa]:after,[data-v-a9c5f1aa]::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-border-style:solid}}}.s-input-text-wrapper[data-v-a9c5f1aa]{box-sizing:border-box;width:100%;min-width:0;position:relative}.s-input-text[data-v-a9c5f1aa]{box-sizing:border-box;width:100%;min-width:0;display:block}.s-input-text[data-size=sm][data-v-a9c5f1aa]{block-size:var(--s-control-hitbox-sm);padding-inline:calc(var(--spacing,.25rem) * 2.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));padding-block:0}.s-input-text[data-size=md][data-v-a9c5f1aa]{block-size:var(--s-control-hitbox-md);padding-inline:calc(var(--spacing,.25rem) * 3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));padding-block:0}.s-input-text[data-size=lg][data-v-a9c5f1aa]{block-size:var(--s-control-hitbox-lg);padding-inline:calc(var(--spacing,.25rem) * 4);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));padding-block:0}.s-input-text[data-density=compact][data-size=sm][data-v-a9c5f1aa]{block-size:var(--s-control-hitbox-xs)}.s-input-text[data-density=compact][data-size=md][data-v-a9c5f1aa]{block-size:var(--s-control-hitbox-sm)}.s-input-text[data-density=compact][data-size=lg][data-v-a9c5f1aa]{block-size:var(--s-control-hitbox-md);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.s-input-text--monospace[data-v-a9c5f1aa]{font-family:var(--font-mono,"IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace)}.s-input-text[data-appearance=grid-cell][data-v-a9c5f1aa]{block-size:var(--s-density-row-compact);padding-inline:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:#0000;border-color:#0000;border-radius:0;padding-block:0}.s-input-text[data-appearance=workbench-title][data-v-a9c5f1aa]{width:100%;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700);--tw-shadow:0 0 #0000;--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);background-color:#0000;border-color:#0000}.s-input-text[data-appearance=workbench-title][data-v-a9c5f1aa]:focus-visible{background-color:var(--color-surface-0,#fff)}.s-input-text[data-appearance=workbench-title][data-v-a9c5f1aa]:focus-visible:where(.dark,.dark *){background-color:var(--color-surface-900,#0f172a)}.s-input-control[data-v-a9c5f1aa]{position:relative}.s-input-text-wrapper[data-trailing=icon] .s-input-text[data-v-a9c5f1aa],.s-input-text-wrapper[data-trailing=text] .s-input-text[data-v-a9c5f1aa]{padding-right:calc(var(--spacing,.25rem) * 10)}.s-input-text-wrapper[data-trailing=action] .s-input-text[data-v-a9c5f1aa]{padding-right:calc(var(--spacing,.25rem) * 12)}.s-input-trailing[data-v-a9c5f1aa]{right:calc(var(--spacing,.25rem) * 2);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.s-input-trailing__passive[data-v-a9c5f1aa]{color:var(--color-surface-400,#94a3b8);justify-content:center;align-items:center;display:inline-flex}.s-input-trailing__passive[data-v-a9c5f1aa]:where(.dark,.dark *){color:var(--color-surface-500,#64748b)}.s-input-trailing__passive[data-v-a9c5f1aa]{width:var(--s-icon-size-sm);height:var(--s-icon-size-sm)}.s-input-trailing__icon[data-v-a9c5f1aa]{width:100%;height:100%}.s-input-trailing__text[data-v-a9c5f1aa]{min-width:calc(var(--spacing,.25rem) * 5);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-surface-200,#e2e8f0);background-color:var(--color-surface-50,#f8fafc);padding-inline:var(--spacing,.25rem);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-surface-500,#64748b);border-radius:.25rem;justify-content:center;align-items:center;display:inline-flex}.s-input-trailing__text[data-v-a9c5f1aa]:where(.dark,.dark *){border-color:var(--color-surface-700,#334155);background-color:var(--color-surface-800,#1e293b);color:var(--color-surface-400,#94a3b8)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Component } from 'vue';
|
|
2
|
-
import { SMenuEntry
|
|
2
|
+
import { SMenuEntry } from '../shared/controls/menu.ts';
|
|
3
3
|
import { BadgeSeverity } from '../shared/data-display/SBadge.vue';
|
|
4
4
|
type __VLS_Props = {
|
|
5
5
|
title: string;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { ComponentPublicInstance } from 'vue';
|
|
2
|
-
import { DialogSurfacePresentation } from './dialogSurface';
|
|
2
|
+
import { DialogSurfaceHeadingLevel, DialogSurfacePresentation } from './dialogSurface';
|
|
3
3
|
type __VLS_Props = {
|
|
4
4
|
presentation: DialogSurfacePresentation;
|
|
5
5
|
title?: string;
|
|
6
6
|
accessibleName: string;
|
|
7
|
+
headingLevel: DialogSurfaceHeadingLevel;
|
|
7
8
|
closable: boolean;
|
|
8
9
|
setSurfaceElement: (element: Element | ComponentPublicInstance | null) => void;
|
|
9
10
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import "../../../../assets/src/components/shared/_internal/SDialogSurface.
|
|
1
|
+
import "../../../../assets/src/components/shared/_internal/SDialogSurface.css_vue_type_style_index_0_src_d1b65adf_scoped_d1b65adf_lang.css";
|
|
2
2
|
import e from "../../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
3
|
import t from "./SDialogSurface.vue_vue_type_script_setup_true_lang.js";
|
|
4
4
|
/* empty css */
|
|
5
5
|
//#region src/components/shared/_internal/SDialogSurface.vue
|
|
6
|
-
var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-
|
|
6
|
+
var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-d1b65adf"]]);
|
|
7
7
|
//#endregion
|
|
8
8
|
export { n as default };
|
package/dist/src/components/shared/_internal/SDialogSurface.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -2,75 +2,76 @@ import { X as e } from "../../icons/_internal/generatedSputnigUiIconComponents.j
|
|
|
2
2
|
import { useUiKitLocale as t } from "../../../composables/useUiKitLocale.js";
|
|
3
3
|
import { useInteractiveLeafRegistration as n } from "../../../internal/passiveContentContract.js";
|
|
4
4
|
import r from "../controls/SButton.vue.js";
|
|
5
|
-
import { assertDialogSurfacePresentation as i } from "./dialogSurface.js";
|
|
6
|
-
import { Fragment as
|
|
5
|
+
import { assertDialogSurfacePresentation as i, validateDialogSurfaceHeadingLevel as a } from "./dialogSurface.js";
|
|
6
|
+
import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, mergeProps as m, openBlock as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useId as b, useSlots as x, withCtx as S } from "vue";
|
|
7
7
|
//#region src/components/shared/_internal/SDialogSurface.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
-
var
|
|
8
|
+
var C = { class: "s-dialog-surface__body" }, w = ["data-layout"], T = {
|
|
9
9
|
key: 0,
|
|
10
10
|
class: "s-dialog-surface__footer-start"
|
|
11
|
-
},
|
|
11
|
+
}, E = {
|
|
12
12
|
key: 1,
|
|
13
13
|
class: "s-dialog-surface__footer-end"
|
|
14
|
-
},
|
|
14
|
+
}, D = "div", O = /*@__PURE__*/ p({
|
|
15
15
|
inheritAttrs: !1,
|
|
16
16
|
__name: "SDialogSurface",
|
|
17
17
|
props: {
|
|
18
18
|
presentation: {},
|
|
19
19
|
title: {},
|
|
20
20
|
accessibleName: {},
|
|
21
|
+
headingLevel: {},
|
|
21
22
|
closable: { type: Boolean },
|
|
22
23
|
setSurfaceElement: { type: Function }
|
|
23
24
|
},
|
|
24
25
|
emits: ["request-close"],
|
|
25
|
-
setup(
|
|
26
|
-
let
|
|
27
|
-
i(
|
|
28
|
-
let
|
|
29
|
-
let e =
|
|
26
|
+
setup(p, { emit: O }) {
|
|
27
|
+
let k = p, A = O, { t: j } = t();
|
|
28
|
+
i(k.presentation), n({ owner: "SDialogSurface" });
|
|
29
|
+
let M = x(), N = `s-dialog-title-${b()}`, P = s(() => k.presentation.kind === "modal"), F = s(() => k.presentation.kind === "modal" ? k.presentation : null), I = s(() => k.presentation.kind === "drawer" ? k.presentation : null), L = s(() => !!(k.title || M.header)), R = s(() => P.value && !!(M["footer-start"] || M["footer-end"])), z = s(() => R.value || !!M.footer), B = s(() => P.value ? "div" : "header"), V = s(() => a("SDialogSurface", k.headingLevel)), H = s(() => `h${V.value}`), U = s(() => {
|
|
30
|
+
let e = k.presentation;
|
|
30
31
|
return e.kind === "drawer" ? e.placement === "bottom" ? "bottom-sheet" : e.mobileFullScreen ? "mobile-fullscreen" : "side-panel" : e.fullscreen || e.size === "full" ? "fullscreen" : "contained";
|
|
31
|
-
}),
|
|
32
|
-
return (t, n) => (
|
|
32
|
+
}), W = () => A("request-close");
|
|
33
|
+
return (t, n) => (h(), c(_(D), m({ ref: p.setSurfaceElement }, t.$attrs, {
|
|
33
34
|
class: "s-dialog-surface",
|
|
34
|
-
"data-presentation":
|
|
35
|
-
"data-layout":
|
|
36
|
-
"data-size":
|
|
37
|
-
"data-placement":
|
|
38
|
-
"data-surface":
|
|
39
|
-
"data-scroll":
|
|
35
|
+
"data-presentation": p.presentation.kind,
|
|
36
|
+
"data-layout": U.value,
|
|
37
|
+
"data-size": p.presentation.size,
|
|
38
|
+
"data-placement": I.value?.placement,
|
|
39
|
+
"data-surface": F.value?.surface,
|
|
40
|
+
"data-scroll": F.value?.scrollBehavior,
|
|
40
41
|
tabindex: "-1",
|
|
41
42
|
role: "dialog",
|
|
42
43
|
"aria-modal": "true",
|
|
43
|
-
"aria-labelledby":
|
|
44
|
-
"aria-label":
|
|
44
|
+
"aria-labelledby": L.value ? N : void 0,
|
|
45
|
+
"aria-label": L.value ? void 0 : p.accessibleName
|
|
45
46
|
}), {
|
|
46
|
-
default:
|
|
47
|
-
|
|
47
|
+
default: S(() => [
|
|
48
|
+
L.value ? (h(), c(_(B.value), {
|
|
48
49
|
key: 0,
|
|
49
50
|
class: "s-dialog-surface__header"
|
|
50
51
|
}, {
|
|
51
|
-
default:
|
|
52
|
-
id:
|
|
52
|
+
default: S(() => [(h(), c(_(H.value), {
|
|
53
|
+
id: N,
|
|
53
54
|
class: "s-dialog-surface__title"
|
|
54
55
|
}, {
|
|
55
|
-
default:
|
|
56
|
+
default: S(() => [g(t.$slots, "header", {}, () => [f(v(p.title), 1)], !0)]),
|
|
56
57
|
_: 3
|
|
57
|
-
})),
|
|
58
|
+
})), p.closable ? (h(), c(r, {
|
|
58
59
|
key: 0,
|
|
59
|
-
"leading-icon":
|
|
60
|
+
"leading-icon": y(e),
|
|
60
61
|
"icon-only": "",
|
|
61
62
|
appearance: "text",
|
|
62
63
|
size: "sm",
|
|
63
|
-
"aria-label":
|
|
64
|
-
onClick:
|
|
65
|
-
}, null, 8, ["leading-icon", "aria-label"])) :
|
|
64
|
+
"aria-label": y(j)("dialog.close"),
|
|
65
|
+
onClick: W
|
|
66
|
+
}, null, 8, ["leading-icon", "aria-label"])) : l("", !0)]),
|
|
66
67
|
_: 3
|
|
67
|
-
})) :
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
})) : l("", !0),
|
|
69
|
+
d("div", C, [g(t.$slots, "default", {}, void 0, !0)]),
|
|
70
|
+
z.value ? (h(), u("div", {
|
|
70
71
|
key: 1,
|
|
71
72
|
class: "s-dialog-surface__footer",
|
|
72
|
-
"data-layout":
|
|
73
|
-
}, [
|
|
73
|
+
"data-layout": R.value ? "split" : "end"
|
|
74
|
+
}, [R.value ? (h(), u(o, { key: 0 }, [t.$slots["footer-start"] ? (h(), u("div", T, [g(t.$slots, "footer-start", { close: W }, void 0, !0)])) : l("", !0), t.$slots["footer-end"] ? (h(), u("div", E, [g(t.$slots, "footer-end", { close: W }, void 0, !0)])) : l("", !0)], 64)) : g(t.$slots, "footer", { close: W }, void 0, !0, 1)], 8, w)) : l("", !0)
|
|
74
75
|
]),
|
|
75
76
|
_: 3
|
|
76
77
|
}, 16, [
|
|
@@ -86,4 +87,4 @@ var S = { class: "s-dialog-surface__body" }, C = ["data-layout"], w = {
|
|
|
86
87
|
}
|
|
87
88
|
});
|
|
88
89
|
//#endregion
|
|
89
|
-
export {
|
|
90
|
+
export { O as default };
|
|
@@ -3,6 +3,9 @@ export type DialogSurfaceDrawerSize = 'sm' | 'md' | 'lg';
|
|
|
3
3
|
export type DialogSurfaceDrawerPlacement = 'right' | 'bottom';
|
|
4
4
|
export type DialogSurfaceTone = 'default' | 'subtle';
|
|
5
5
|
export type DialogSurfaceScrollBehavior = 'page' | 'body';
|
|
6
|
+
export type DialogSurfaceHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
7
|
+
/** Проверяет уровень native heading без числового coercion. / Validates a native heading level without numeric coercion. */
|
|
8
|
+
export declare function validateDialogSurfaceHeadingLevel(owner: string, value: unknown): DialogSurfaceHeadingLevel;
|
|
6
9
|
export interface ModalDialogSurfacePresentation {
|
|
7
10
|
kind: 'modal';
|
|
8
11
|
size: DialogSurfaceModalSize;
|
|
@@ -1,20 +1,24 @@
|
|
|
1
1
|
//#region src/components/shared/_internal/dialogSurface.ts
|
|
2
|
-
|
|
2
|
+
function e(e, t) {
|
|
3
|
+
if (t === 1 || t === 2 || t === 3 || t === 4 || t === 5 || t === 6) return t;
|
|
4
|
+
throw TypeError(`${e}: headingLevel должен быть целым числом от 1 до 6; получено ${String(t)}. / ${e}: headingLevel must be an integer from 1 to 6; received ${String(t)}.`);
|
|
5
|
+
}
|
|
6
|
+
var t = class extends Error {
|
|
3
7
|
constructor(e, t) {
|
|
4
8
|
super(t), this.name = "DialogSurfaceContractError", this.code = e;
|
|
5
9
|
}
|
|
6
|
-
},
|
|
10
|
+
}, n = /* @__PURE__ */ new Set([
|
|
7
11
|
"kind",
|
|
8
12
|
"size",
|
|
9
13
|
"fullscreen",
|
|
10
14
|
"surface",
|
|
11
15
|
"scrollBehavior"
|
|
12
|
-
]),
|
|
16
|
+
]), r = /* @__PURE__ */ new Set([
|
|
13
17
|
"kind",
|
|
14
18
|
"size",
|
|
15
19
|
"placement",
|
|
16
20
|
"mobileFullScreen"
|
|
17
|
-
]),
|
|
21
|
+
]), i = /* @__PURE__ */ new Set([
|
|
18
22
|
"sm",
|
|
19
23
|
"md",
|
|
20
24
|
"lg",
|
|
@@ -23,30 +27,30 @@ var e = class extends Error {
|
|
|
23
27
|
"3xl",
|
|
24
28
|
"wide",
|
|
25
29
|
"full"
|
|
26
|
-
]),
|
|
30
|
+
]), a = /* @__PURE__ */ new Set([
|
|
27
31
|
"sm",
|
|
28
32
|
"md",
|
|
29
33
|
"lg"
|
|
30
|
-
]),
|
|
31
|
-
let i = Object.keys(
|
|
32
|
-
if (i) throw new
|
|
34
|
+
]), o = /* @__PURE__ */ new Set(["right", "bottom"]), s = /* @__PURE__ */ new Set(["default", "subtle"]), c = /* @__PURE__ */ new Set(["page", "body"]), l = (e, n, r) => {
|
|
35
|
+
let i = Object.keys(e).find((e) => !r.has(e));
|
|
36
|
+
if (i) throw new t("invalid-presentation", `SDialogSurface presentation kind="${n}" содержит недопустимое поле ${i}`);
|
|
33
37
|
};
|
|
34
|
-
function
|
|
35
|
-
let u =
|
|
38
|
+
function u(e) {
|
|
39
|
+
let u = e;
|
|
36
40
|
if (u.kind === "modal") {
|
|
37
|
-
if (
|
|
38
|
-
if (typeof u.fullscreen != "boolean") throw new
|
|
39
|
-
if (!
|
|
40
|
-
if (!
|
|
41
|
+
if (l(u, "modal", n), !i.has(u.size)) throw new t("invalid-size", `Недопустимый размер SModal: ${String(u.size)}`);
|
|
42
|
+
if (typeof u.fullscreen != "boolean") throw new t("invalid-presentation", "SModal presentation требует boolean fullscreen");
|
|
43
|
+
if (!s.has(u.surface)) throw new t("invalid-surface", `Недопустимая поверхность SModal: ${String(u.surface)}`);
|
|
44
|
+
if (!c.has(u.scrollBehavior)) throw new t("invalid-scroll-behavior", `Недопустимый scroll behavior SModal: ${String(u.scrollBehavior)}`);
|
|
41
45
|
return;
|
|
42
46
|
}
|
|
43
47
|
if (u.kind === "drawer") {
|
|
44
|
-
if (
|
|
45
|
-
if (!
|
|
46
|
-
if (typeof u.mobileFullScreen != "boolean") throw new
|
|
48
|
+
if (l(u, "drawer", r), !a.has(u.size)) throw new t("invalid-size", `Недопустимый размер SDrawer: ${String(u.size)}`);
|
|
49
|
+
if (!o.has(u.placement)) throw new t("invalid-presentation", `Недопустимое размещение SDrawer: ${String(u.placement)}`);
|
|
50
|
+
if (typeof u.mobileFullScreen != "boolean") throw new t("invalid-presentation", "SDrawer presentation требует boolean mobileFullScreen");
|
|
47
51
|
return;
|
|
48
52
|
}
|
|
49
|
-
throw new
|
|
53
|
+
throw new t("invalid-presentation", `Неизвестный kind SDialogSurface: ${String(u.kind)}`);
|
|
50
54
|
}
|
|
51
55
|
//#endregion
|
|
52
|
-
export {
|
|
56
|
+
export { t as DialogSurfaceContractError, u as assertDialogSurfacePresentation, e as validateDialogSurfaceHeadingLevel };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { DialogSurfaceDrawerPlacement, DialogSurfaceDrawerSize } from '../_internal/dialogSurface';
|
|
1
|
+
import { DialogSurfaceDrawerPlacement, DialogSurfaceDrawerSize, DialogSurfaceHeadingLevel } from '../_internal/dialogSurface';
|
|
2
2
|
export type DrawerSize = DialogSurfaceDrawerSize;
|
|
3
3
|
export type DrawerPlacement = DialogSurfaceDrawerPlacement;
|
|
4
|
+
export type DrawerHeadingLevel = DialogSurfaceHeadingLevel;
|
|
4
5
|
export interface Props {
|
|
5
6
|
open: boolean;
|
|
6
7
|
title?: string;
|
|
@@ -9,6 +10,8 @@ export interface Props {
|
|
|
9
10
|
placement?: DrawerPlacement;
|
|
10
11
|
mobileFullScreen?: boolean;
|
|
11
12
|
ariaLabel?: string;
|
|
13
|
+
/** Уровень видимого заголовка в document outline. / Visible title level in the document outline. */
|
|
14
|
+
headingLevel?: DrawerHeadingLevel;
|
|
12
15
|
}
|
|
13
16
|
declare var __VLS_28: {}, __VLS_30: {}, __VLS_33: {
|
|
14
17
|
close: () => void;
|
|
@@ -33,6 +36,7 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
|
|
|
33
36
|
ariaLabel: string;
|
|
34
37
|
placement: DrawerPlacement;
|
|
35
38
|
mobileFullScreen: boolean;
|
|
39
|
+
headingLevel: DrawerHeadingLevel;
|
|
36
40
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
37
41
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
38
42
|
declare const _default: typeof __VLS_export;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import "../../../../assets/src/components/shared/containers/SDrawer.
|
|
1
|
+
import "../../../../assets/src/components/shared/containers/SDrawer.css_vue_type_style_index_0_src_091d7325_scoped_091d7325_lang.css";
|
|
2
2
|
import e from "../../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
3
|
import t from "./SDrawer.vue_vue_type_script_setup_true_lang.js";
|
|
4
4
|
/* empty css */
|
|
5
5
|
//#region src/components/shared/containers/SDrawer.vue
|
|
6
|
-
var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-
|
|
6
|
+
var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-091d7325"]]);
|
|
7
7
|
//#endregion
|
|
8
8
|
export { n as default };
|
package/dist/src/components/shared/containers/SDrawer.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -2,10 +2,11 @@ import { useDialogOverlay as e } from "../../../composables/useDialogOverlay.js"
|
|
|
2
2
|
import { useUiKitLocale as t } from "../../../composables/useUiKitLocale.js";
|
|
3
3
|
import { useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
|
|
4
4
|
import { validateBoolean as r, validateExactString as i } from "../../../internal/runtimeContract.js";
|
|
5
|
-
import a from "../_internal/
|
|
6
|
-
import
|
|
5
|
+
import { validateDialogSurfaceHeadingLevel as a } from "../_internal/dialogSurface.js";
|
|
6
|
+
import o from "../_internal/SDialogSurface.vue.js";
|
|
7
|
+
import { Teleport as s, Transition as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, mergeProps as _, normalizeStyle as v, openBlock as y, renderSlot as b, unref as x, withCtx as S } from "vue";
|
|
7
8
|
//#region src/components/shared/containers/SDrawer.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
-
var
|
|
9
|
+
var C = ["data-placement"], w = ["data-placement"], T = /*@__PURE__*/ g({
|
|
9
10
|
inheritAttrs: !1,
|
|
10
11
|
__name: "SDrawer",
|
|
11
12
|
props: {
|
|
@@ -21,81 +22,84 @@ var S = ["data-placement"], C = ["data-placement"], w = /*@__PURE__*/ h({
|
|
|
21
22
|
type: Boolean,
|
|
22
23
|
default: !0
|
|
23
24
|
},
|
|
24
|
-
ariaLabel: { default: void 0 }
|
|
25
|
+
ariaLabel: { default: void 0 },
|
|
26
|
+
headingLevel: { default: 2 }
|
|
25
27
|
},
|
|
26
28
|
emits: ["update:open", "opened"],
|
|
27
|
-
setup(
|
|
28
|
-
let
|
|
29
|
+
setup(g, { emit: T }) {
|
|
30
|
+
let E = g, { t: D } = t(), O = T, k = n({
|
|
29
31
|
component: "SDrawer",
|
|
30
32
|
owner: "drawer dialog surface"
|
|
31
|
-
}),
|
|
33
|
+
}), A = l(() => E.ariaLabel ?? D("dialog.drawer")), j = l(() => a("SDrawer", E.headingLevel)), M = l(() => i("SDrawer", "placement", E.placement, ["right", "bottom"])), N = l(() => i("SDrawer", "size", E.size, [
|
|
32
34
|
"sm",
|
|
33
35
|
"md",
|
|
34
36
|
"lg"
|
|
35
|
-
])),
|
|
37
|
+
])), P = l(() => r("SDrawer", "open", E.open)), F = l(() => r("SDrawer", "closable", E.closable)), I = l(() => r("SDrawer", "mobileFullScreen", E.mobileFullScreen)), L = l(() => ({
|
|
36
38
|
kind: "drawer",
|
|
37
|
-
size:
|
|
38
|
-
placement:
|
|
39
|
-
mobileFullScreen:
|
|
39
|
+
size: N.value,
|
|
40
|
+
placement: M.value,
|
|
41
|
+
mobileFullScreen: I.value
|
|
40
42
|
}));
|
|
41
|
-
function
|
|
42
|
-
|
|
43
|
+
function R() {
|
|
44
|
+
M.value, N.value, P.value, F.value, I.value, j.value;
|
|
43
45
|
}
|
|
44
|
-
|
|
45
|
-
function
|
|
46
|
-
|
|
46
|
+
R();
|
|
47
|
+
function z() {
|
|
48
|
+
O("update:open", !1);
|
|
47
49
|
}
|
|
48
|
-
let { setPanelElement:
|
|
49
|
-
open:
|
|
50
|
-
closable:
|
|
51
|
-
requestClose:
|
|
52
|
-
opened: () =>
|
|
50
|
+
let { setPanelElement: B, backdropStyle: V, surfaceStyle: H } = e({
|
|
51
|
+
open: P,
|
|
52
|
+
closable: F,
|
|
53
|
+
requestClose: z,
|
|
54
|
+
opened: () => O("opened")
|
|
53
55
|
});
|
|
54
|
-
return (e, t) => (
|
|
55
|
-
default:
|
|
56
|
+
return (e, t) => (y(), u(s, { to: "body" }, [h(c, { name: "s-drawer-backdrop" }, {
|
|
57
|
+
default: S(() => [g.open ? (y(), f("div", {
|
|
56
58
|
key: 0,
|
|
57
59
|
class: "s-drawer-backdrop",
|
|
58
|
-
style:
|
|
60
|
+
style: v(x(V)),
|
|
59
61
|
"aria-hidden": "true"
|
|
60
|
-
}, null, 4)) :
|
|
62
|
+
}, null, 4)) : d("", !0)]),
|
|
61
63
|
_: 1
|
|
62
|
-
}),
|
|
63
|
-
default:
|
|
64
|
+
}), h(c, { name: "s-drawer-panel" }, {
|
|
65
|
+
default: S(() => [g.open ? (y(), f("div", {
|
|
64
66
|
key: 0,
|
|
65
67
|
class: "s-drawer-shell",
|
|
66
|
-
"data-placement":
|
|
67
|
-
style:
|
|
68
|
-
}, [
|
|
68
|
+
"data-placement": M.value,
|
|
69
|
+
style: v(x(H))
|
|
70
|
+
}, [p("div", {
|
|
69
71
|
class: "s-drawer-positioner",
|
|
70
|
-
"data-placement":
|
|
71
|
-
}, [
|
|
72
|
-
presentation:
|
|
73
|
-
title:
|
|
74
|
-
"accessible-name":
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
72
|
+
"data-placement": M.value
|
|
73
|
+
}, [h(o, _(x(k).bindings(), {
|
|
74
|
+
presentation: L.value,
|
|
75
|
+
title: g.title,
|
|
76
|
+
"accessible-name": A.value,
|
|
77
|
+
"heading-level": j.value,
|
|
78
|
+
closable: g.closable,
|
|
79
|
+
"set-surface-element": x(B),
|
|
80
|
+
onRequestClose: z
|
|
81
|
+
}), m({
|
|
82
|
+
default: S(() => [b(e.$slots, "default", {}, void 0, !0)]),
|
|
80
83
|
_: 2
|
|
81
84
|
}, [e.$slots.header ? {
|
|
82
85
|
name: "header",
|
|
83
|
-
fn:
|
|
86
|
+
fn: S(() => [b(e.$slots, "header", {}, void 0, !0)]),
|
|
84
87
|
key: "0"
|
|
85
88
|
} : void 0, e.$slots.footer ? {
|
|
86
89
|
name: "footer",
|
|
87
|
-
fn:
|
|
90
|
+
fn: S(({ close: t }) => [b(e.$slots, "footer", { close: t }, void 0, !0)]),
|
|
88
91
|
key: "1"
|
|
89
92
|
} : void 0]), 1040, [
|
|
90
93
|
"presentation",
|
|
91
94
|
"title",
|
|
92
95
|
"accessible-name",
|
|
96
|
+
"heading-level",
|
|
93
97
|
"closable",
|
|
94
98
|
"set-surface-element"
|
|
95
|
-
])], 8,
|
|
99
|
+
])], 8, w)], 12, C)) : d("", !0)]),
|
|
96
100
|
_: 3
|
|
97
101
|
})]));
|
|
98
102
|
}
|
|
99
103
|
});
|
|
100
104
|
//#endregion
|
|
101
|
-
export {
|
|
105
|
+
export { T as default };
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { DialogSurfaceModalSize, DialogSurfaceScrollBehavior, DialogSurfaceTone } from '../_internal/dialogSurface';
|
|
1
|
+
import { DialogSurfaceHeadingLevel, DialogSurfaceModalSize, DialogSurfaceScrollBehavior, DialogSurfaceTone } from '../_internal/dialogSurface';
|
|
2
2
|
export type ModalSize = DialogSurfaceModalSize;
|
|
3
3
|
export type ModalSurface = DialogSurfaceTone;
|
|
4
4
|
export type ModalScrollBehavior = DialogSurfaceScrollBehavior;
|
|
5
|
+
export type ModalHeadingLevel = DialogSurfaceHeadingLevel;
|
|
5
6
|
export interface Props {
|
|
6
7
|
open: boolean;
|
|
7
8
|
title?: string;
|
|
@@ -12,6 +13,8 @@ export interface Props {
|
|
|
12
13
|
surface?: ModalSurface;
|
|
13
14
|
scrollBehavior?: ModalScrollBehavior;
|
|
14
15
|
ariaLabel?: string;
|
|
16
|
+
/** Уровень видимого заголовка в document outline. / Visible title level in the document outline. */
|
|
17
|
+
headingLevel?: ModalHeadingLevel;
|
|
15
18
|
}
|
|
16
19
|
declare var __VLS_28: {}, __VLS_30: {}, __VLS_33: {
|
|
17
20
|
close: () => void;
|
|
@@ -45,6 +48,7 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
|
|
|
45
48
|
ariaLabel: string;
|
|
46
49
|
surface: ModalSurface;
|
|
47
50
|
scrollBehavior: ModalScrollBehavior;
|
|
51
|
+
headingLevel: ModalHeadingLevel;
|
|
48
52
|
fullScreen: boolean;
|
|
49
53
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
50
54
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import "../../../../assets/src/components/shared/containers/SModal.
|
|
1
|
+
import "../../../../assets/src/components/shared/containers/SModal.css_vue_type_style_index_0_src_23373daf_scoped_23373daf_lang.css";
|
|
2
2
|
import e from "../../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
3
|
import t from "./SModal.vue_vue_type_script_setup_true_lang.js";
|
|
4
4
|
/* empty css */
|
|
5
5
|
//#region src/components/shared/containers/SModal.vue
|
|
6
|
-
var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-
|
|
6
|
+
var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-23373daf"]]);
|
|
7
7
|
//#endregion
|
|
8
8
|
export { n as default };
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { useDialogOverlay as e } from "../../../composables/useDialogOverlay.js";
|
|
2
2
|
import { useUiKitLocale as t } from "../../../composables/useUiKitLocale.js";
|
|
3
3
|
import { useOwnedAttrs as n } from "../../../internal/ownedAttrs.js";
|
|
4
|
-
import r from "../_internal/
|
|
5
|
-
import
|
|
4
|
+
import { validateDialogSurfaceHeadingLevel as r } from "../_internal/dialogSurface.js";
|
|
5
|
+
import i from "../_internal/SDialogSurface.vue.js";
|
|
6
|
+
import { Teleport as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, mergeProps as h, normalizeClass as g, normalizeStyle as _, openBlock as v, renderSlot as y, toRef as b, unref as x, withCtx as S } from "vue";
|
|
6
7
|
//#region src/components/shared/containers/SModal.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
-
var
|
|
8
|
+
var C = /*@__PURE__*/ m({
|
|
8
9
|
inheritAttrs: !1,
|
|
9
10
|
__name: "SModal",
|
|
10
11
|
props: {
|
|
@@ -22,83 +23,88 @@ var S = /*@__PURE__*/ p({
|
|
|
22
23
|
layout: { default: "desktop" },
|
|
23
24
|
surface: { default: "default" },
|
|
24
25
|
scrollBehavior: { default: "page" },
|
|
25
|
-
ariaLabel: { default: void 0 }
|
|
26
|
+
ariaLabel: { default: void 0 },
|
|
27
|
+
headingLevel: { default: 2 }
|
|
26
28
|
},
|
|
27
29
|
emits: ["update:open", "opened"],
|
|
28
|
-
setup(
|
|
29
|
-
let
|
|
30
|
-
function
|
|
31
|
-
|
|
30
|
+
setup(m, { emit: C }) {
|
|
31
|
+
let w = m, { t: T } = t(), E = C;
|
|
32
|
+
function D() {
|
|
33
|
+
E("update:open", !1);
|
|
32
34
|
}
|
|
33
|
-
let
|
|
35
|
+
let O = s(() => w.fullScreen || w.layout === "mobile-fullscreen"), k = n({
|
|
34
36
|
component: "SModal",
|
|
35
37
|
owner: "modal dialog surface"
|
|
36
|
-
}),
|
|
38
|
+
}), A = s(() => w.ariaLabel ?? T("dialog.modal")), j = s(() => r("SModal", w.headingLevel));
|
|
39
|
+
j.value;
|
|
40
|
+
let M = s(() => ({
|
|
37
41
|
kind: "modal",
|
|
38
|
-
size:
|
|
39
|
-
fullscreen:
|
|
40
|
-
surface:
|
|
41
|
-
scrollBehavior:
|
|
42
|
-
})), { setPanelElement:
|
|
43
|
-
open:
|
|
44
|
-
closable:
|
|
45
|
-
requestClose:
|
|
46
|
-
opened: () =>
|
|
42
|
+
size: w.size,
|
|
43
|
+
fullscreen: O.value,
|
|
44
|
+
surface: w.surface,
|
|
45
|
+
scrollBehavior: w.scrollBehavior
|
|
46
|
+
})), { setPanelElement: N, backdropStyle: P, surfaceStyle: F } = e({
|
|
47
|
+
open: b(w, "open"),
|
|
48
|
+
closable: b(w, "closable"),
|
|
49
|
+
requestClose: D,
|
|
50
|
+
opened: () => E("opened")
|
|
47
51
|
});
|
|
48
|
-
return (e, t) => (
|
|
49
|
-
default:
|
|
52
|
+
return (e, t) => (v(), c(a, { to: "body" }, [p(o, { name: "s-modal-backdrop" }, {
|
|
53
|
+
default: S(() => [m.open ? (v(), u("div", {
|
|
50
54
|
key: 0,
|
|
51
55
|
class: "s-modal-backdrop",
|
|
52
|
-
style:
|
|
56
|
+
style: _(x(P)),
|
|
53
57
|
"aria-hidden": "true"
|
|
54
|
-
}, null, 4)) :
|
|
58
|
+
}, null, 4)) : l("", !0)]),
|
|
55
59
|
_: 1
|
|
56
|
-
}),
|
|
57
|
-
default:
|
|
60
|
+
}), p(o, { name: "s-modal-panel" }, {
|
|
61
|
+
default: S(() => [m.open ? (v(), u("div", {
|
|
58
62
|
key: 0,
|
|
59
63
|
class: "s-modal-container",
|
|
60
|
-
style:
|
|
61
|
-
}, [
|
|
62
|
-
presentation:
|
|
63
|
-
title:
|
|
64
|
-
"accessible-name":
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
style: _(x(F))
|
|
65
|
+
}, [d("div", { class: g(["s-modal-panel-container", { "s-modal-panel-container--fullscreen": O.value }]) }, [p(i, h(x(k).bindings(), {
|
|
66
|
+
presentation: M.value,
|
|
67
|
+
title: m.title,
|
|
68
|
+
"accessible-name": A.value,
|
|
69
|
+
"heading-level": j.value,
|
|
70
|
+
closable: m.closable,
|
|
71
|
+
"set-surface-element": x(N),
|
|
72
|
+
onRequestClose: D
|
|
73
|
+
}), f({
|
|
74
|
+
default: S(() => [y(e.$slots, "default", {}, void 0, !0)]),
|
|
70
75
|
_: 2
|
|
71
76
|
}, [
|
|
72
77
|
e.$slots.header ? {
|
|
73
78
|
name: "header",
|
|
74
|
-
fn:
|
|
79
|
+
fn: S(() => [y(e.$slots, "header", {}, void 0, !0)]),
|
|
75
80
|
key: "0"
|
|
76
81
|
} : void 0,
|
|
77
82
|
e.$slots.footer ? {
|
|
78
83
|
name: "footer",
|
|
79
|
-
fn:
|
|
84
|
+
fn: S(({ close: t }) => [y(e.$slots, "footer", { close: t }, void 0, !0)]),
|
|
80
85
|
key: "1"
|
|
81
86
|
} : void 0,
|
|
82
87
|
e.$slots["footer-start"] ? {
|
|
83
88
|
name: "footer-start",
|
|
84
|
-
fn:
|
|
89
|
+
fn: S(({ close: t }) => [y(e.$slots, "footer-start", { close: t }, void 0, !0)]),
|
|
85
90
|
key: "2"
|
|
86
91
|
} : void 0,
|
|
87
92
|
e.$slots["footer-end"] ? {
|
|
88
93
|
name: "footer-end",
|
|
89
|
-
fn:
|
|
94
|
+
fn: S(({ close: t }) => [y(e.$slots, "footer-end", { close: t }, void 0, !0)]),
|
|
90
95
|
key: "3"
|
|
91
96
|
} : void 0
|
|
92
97
|
]), 1040, [
|
|
93
98
|
"presentation",
|
|
94
99
|
"title",
|
|
95
100
|
"accessible-name",
|
|
101
|
+
"heading-level",
|
|
96
102
|
"closable",
|
|
97
103
|
"set-surface-element"
|
|
98
|
-
])], 2)], 4)) :
|
|
104
|
+
])], 2)], 4)) : l("", !0)]),
|
|
99
105
|
_: 3
|
|
100
106
|
})]));
|
|
101
107
|
}
|
|
102
108
|
});
|
|
103
109
|
//#endregion
|
|
104
|
-
export {
|
|
110
|
+
export { C as default };
|
|
@@ -33,6 +33,10 @@ export interface Props {
|
|
|
33
33
|
disabled?: boolean;
|
|
34
34
|
readonly?: boolean;
|
|
35
35
|
required?: boolean;
|
|
36
|
+
/** Минимальная длина textual-значения для native constraint validation. / Minimum textual value length for native constraint validation. */
|
|
37
|
+
minLength?: number;
|
|
38
|
+
/** Максимальная длина textual-значения, ограничивающая пользовательский ввод. / Maximum textual value length that constrains user input. */
|
|
39
|
+
maxLength?: number;
|
|
36
40
|
monospace?: boolean;
|
|
37
41
|
size?: 'sm' | 'md' | 'lg';
|
|
38
42
|
density?: SInputTextDensity;
|
|
@@ -108,6 +112,8 @@ declare const __VLS_export: import('vue').DefineComponent<Props, {
|
|
|
108
112
|
appearance: "field" | "grid-cell" | "workbench-title";
|
|
109
113
|
monospace: boolean;
|
|
110
114
|
modelModifiers: SInputTextModelModifiers;
|
|
115
|
+
minLength: number;
|
|
116
|
+
maxLength: number;
|
|
111
117
|
trailingText: string;
|
|
112
118
|
trailingAction: SInputTextTrailingAction;
|
|
113
119
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import "../../../../assets/src/components/shared/controls/SInputText.
|
|
1
|
+
import "../../../../assets/src/components/shared/controls/SInputText.css_vue_type_style_index_0_src_a9c5f1aa_scoped_a9c5f1aa_lang.css";
|
|
2
2
|
import e from "../../../../_virtual/_plugin-vue_export-helper.js";
|
|
3
3
|
import t from "./SInputText.vue_vue_type_script_setup_true_lang.js";
|
|
4
4
|
/* empty css */
|
|
5
5
|
//#region src/components/shared/controls/SInputText.vue
|
|
6
|
-
var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-
|
|
6
|
+
var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-a9c5f1aa"]]);
|
|
7
7
|
//#endregion
|
|
8
8
|
export { n as default };
|
package/dist/src/components/shared/controls/SInputText.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { mergeIdReferences as e, useOwnedAttrs as t } from "../../../internal/ownedAttrs.js";
|
|
2
|
-
import { resolveOptionalDomId as n,
|
|
3
|
-
import { useInteractiveLeafRegistration as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { resolveFieldSurfaceBindings as
|
|
7
|
-
import { computed as
|
|
2
|
+
import { resolveOptionalDomId as n, validateBoundedInteger as r, validateExactString as i } from "../../../internal/runtimeContract.js";
|
|
3
|
+
import { useInteractiveLeafRegistration as a } from "../../../internal/passiveContentContract.js";
|
|
4
|
+
import o from "./SButton.vue.js";
|
|
5
|
+
import s from "./SField.vue.js";
|
|
6
|
+
import { resolveFieldSurfaceBindings as c } from "../../../internal/fieldSurface.js";
|
|
7
|
+
import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeProps as g, openBlock as _, ref as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useId as S, watchEffect as C, withCtx as w } from "vue";
|
|
8
8
|
//#region src/components/shared/controls/SInputText.vue?vue&type=script&setup=true&lang.ts
|
|
9
|
-
var
|
|
9
|
+
var T = [
|
|
10
10
|
"data-input-family",
|
|
11
11
|
"data-trailing",
|
|
12
12
|
"data-with-label"
|
|
13
|
-
],
|
|
13
|
+
], E = { class: "s-input-control" }, D = [
|
|
14
14
|
"id",
|
|
15
15
|
"name",
|
|
16
16
|
"type",
|
|
@@ -26,17 +26,19 @@ var w = [
|
|
|
26
26
|
"disabled",
|
|
27
27
|
"readonly",
|
|
28
28
|
"required",
|
|
29
|
+
"minlength",
|
|
30
|
+
"maxlength",
|
|
29
31
|
"aria-invalid",
|
|
30
32
|
"aria-describedby"
|
|
31
|
-
],
|
|
33
|
+
], O = ["data-kind"], k = {
|
|
32
34
|
key: 0,
|
|
33
35
|
class: "s-input-trailing__passive",
|
|
34
36
|
"aria-hidden": "true"
|
|
35
|
-
},
|
|
37
|
+
}, A = {
|
|
36
38
|
key: 1,
|
|
37
39
|
class: "s-input-trailing__text",
|
|
38
40
|
"aria-hidden": "true"
|
|
39
|
-
},
|
|
41
|
+
}, j = /*@__PURE__*/ h({
|
|
40
42
|
inheritAttrs: !1,
|
|
41
43
|
__name: "SInputText",
|
|
42
44
|
props: {
|
|
@@ -56,6 +58,8 @@ var w = [
|
|
|
56
58
|
type: Boolean,
|
|
57
59
|
default: !1
|
|
58
60
|
},
|
|
61
|
+
minLength: { default: void 0 },
|
|
62
|
+
maxLength: { default: void 0 },
|
|
59
63
|
monospace: {
|
|
60
64
|
type: Boolean,
|
|
61
65
|
default: !1
|
|
@@ -90,8 +94,8 @@ var w = [
|
|
|
90
94
|
"click",
|
|
91
95
|
"keydown"
|
|
92
96
|
],
|
|
93
|
-
setup(
|
|
94
|
-
let
|
|
97
|
+
setup(h, { expose: j, emit: M }) {
|
|
98
|
+
let N = [
|
|
95
99
|
"text",
|
|
96
100
|
"search",
|
|
97
101
|
"password",
|
|
@@ -104,7 +108,7 @@ var w = [
|
|
|
104
108
|
"month",
|
|
105
109
|
"time",
|
|
106
110
|
"week"
|
|
107
|
-
],
|
|
111
|
+
], P = {
|
|
108
112
|
text: {
|
|
109
113
|
family: "textual",
|
|
110
114
|
type: "text"
|
|
@@ -153,33 +157,47 @@ var w = [
|
|
|
153
157
|
family: "temporal",
|
|
154
158
|
type: "week"
|
|
155
159
|
}
|
|
156
|
-
},
|
|
160
|
+
}, F = h, I = M, L = t({
|
|
157
161
|
component: "SInputText",
|
|
158
162
|
owner: "native input"
|
|
159
163
|
});
|
|
160
|
-
|
|
161
|
-
let
|
|
162
|
-
|
|
163
|
-
focus: () =>
|
|
164
|
+
a({ owner: "SInputText" });
|
|
165
|
+
let R = v(null);
|
|
166
|
+
j({
|
|
167
|
+
focus: () => R.value?.focus(),
|
|
164
168
|
getElement: () => {
|
|
165
|
-
let e =
|
|
169
|
+
let e = R.value;
|
|
166
170
|
if (!e) throw Error("SInputText: native input element is unavailable");
|
|
167
171
|
return e;
|
|
168
172
|
}
|
|
169
173
|
});
|
|
170
|
-
let
|
|
171
|
-
let e =
|
|
172
|
-
return
|
|
173
|
-
}),
|
|
174
|
+
let z = S(), B = l(() => n("SInputText", "id", F.id, `s-input-text-${z}`)), V = l(() => {
|
|
175
|
+
let e = i("SInputText", "type", F.type, N);
|
|
176
|
+
return P[e];
|
|
177
|
+
}), H = l(() => {
|
|
178
|
+
let e = F.minLength === void 0 ? void 0 : r("SInputText", "minLength", F.minLength, {
|
|
179
|
+
minimum: 0,
|
|
180
|
+
maximum: 2 ** 53 - 1
|
|
181
|
+
}), t = F.maxLength === void 0 ? void 0 : r("SInputText", "maxLength", F.maxLength, {
|
|
182
|
+
minimum: 0,
|
|
183
|
+
maximum: 2 ** 53 - 1
|
|
184
|
+
});
|
|
185
|
+
if (e !== void 0 && t !== void 0 && e > t) throw RangeError(`SInputText: minLength (${e}) не может превышать maxLength (${t}). / SInputText: minLength (${e}) must not exceed maxLength (${t}).`);
|
|
186
|
+
if ((e !== void 0 || t !== void 0) && V.value.family !== "textual") throw TypeError("SInputText: minLength и maxLength применимы только к textual native input types. / SInputText: minLength and maxLength apply only to textual native input types.");
|
|
187
|
+
return {
|
|
188
|
+
minLength: e,
|
|
189
|
+
maxLength: t
|
|
190
|
+
};
|
|
191
|
+
}), U = l(() => i("SInputText", "size", F.size, [
|
|
174
192
|
"sm",
|
|
175
193
|
"md",
|
|
176
194
|
"lg"
|
|
177
|
-
])),
|
|
195
|
+
])), W = l(() => i("SInputText", "appearance", F.appearance, [
|
|
178
196
|
"field",
|
|
179
197
|
"grid-cell",
|
|
180
198
|
"workbench-title"
|
|
181
|
-
])),
|
|
182
|
-
let e =
|
|
199
|
+
])), G = l(() => {
|
|
200
|
+
let e = F.modelModifiers;
|
|
183
201
|
if (typeof e != "object" || !e || Array.isArray(e)) throw TypeError("SInputText: modelModifiers должен быть object. / SInputText: modelModifiers must be an object.");
|
|
184
202
|
let t = e, n = /* @__PURE__ */ new Set([
|
|
185
203
|
"trim",
|
|
@@ -194,104 +212,106 @@ var w = [
|
|
|
194
212
|
lazy: t.lazy === !0
|
|
195
213
|
};
|
|
196
214
|
});
|
|
197
|
-
function
|
|
198
|
-
return
|
|
215
|
+
function K(e) {
|
|
216
|
+
return c("SInputText", {
|
|
199
217
|
kind: "text-input",
|
|
200
|
-
appearance:
|
|
218
|
+
appearance: W.value === "field" ? "field" : "embedded",
|
|
201
219
|
invalid: e.invalid,
|
|
202
220
|
disabled: e.disabled,
|
|
203
221
|
readonly: e.readonly
|
|
204
222
|
});
|
|
205
223
|
}
|
|
206
|
-
let
|
|
207
|
-
if (
|
|
208
|
-
if (
|
|
209
|
-
if (
|
|
224
|
+
let q = l(() => {
|
|
225
|
+
if (F.trailingIcon) return "icon";
|
|
226
|
+
if (F.trailingText !== void 0) return "text";
|
|
227
|
+
if (F.trailingAction) return "action";
|
|
210
228
|
});
|
|
211
|
-
|
|
212
|
-
if (
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
229
|
+
C(() => {
|
|
230
|
+
if (G.value, H.value, [
|
|
231
|
+
F.trailingIcon,
|
|
232
|
+
F.trailingText,
|
|
233
|
+
F.trailingAction
|
|
216
234
|
].filter((e) => e !== void 0).length > 1) throw Error("SInputText: trailingIcon, trailingText и trailingAction взаимоисключающие");
|
|
217
|
-
if (
|
|
218
|
-
if (
|
|
235
|
+
if (F.trailingText !== void 0 && F.trailingText.length === 0) throw Error("SInputText: trailingText не может быть пустым");
|
|
236
|
+
if (F.trailingAction && F.trailingAction.label.trim().length === 0) throw Error("SInputText: trailingAction.label обязателен");
|
|
219
237
|
});
|
|
220
|
-
function
|
|
238
|
+
function J(e) {
|
|
221
239
|
let t = e.target;
|
|
222
240
|
if (!(t instanceof HTMLInputElement)) throw TypeError("SInputText: input/change event target должен быть HTMLInputElement");
|
|
223
|
-
let n =
|
|
224
|
-
|
|
241
|
+
let n = G.value.trim ? t.value.trim() : t.value;
|
|
242
|
+
I("update:modelValue", n);
|
|
225
243
|
}
|
|
226
|
-
function
|
|
227
|
-
|
|
244
|
+
function Y(e) {
|
|
245
|
+
G.value.lazy || J(e);
|
|
228
246
|
}
|
|
229
|
-
function
|
|
230
|
-
|
|
247
|
+
function X(e) {
|
|
248
|
+
G.value.lazy && J(e);
|
|
231
249
|
}
|
|
232
|
-
return (t, n) => (
|
|
250
|
+
return (t, n) => (_(), f("div", {
|
|
233
251
|
class: "s-input-text-wrapper",
|
|
234
|
-
"data-input-family":
|
|
235
|
-
"data-trailing":
|
|
236
|
-
"data-with-label": !!
|
|
237
|
-
}, [
|
|
238
|
-
"control-id":
|
|
239
|
-
label:
|
|
240
|
-
required:
|
|
241
|
-
"help-text":
|
|
242
|
-
"error-message":
|
|
243
|
-
invalid:
|
|
244
|
-
disabled:
|
|
245
|
-
readonly:
|
|
252
|
+
"data-input-family": V.value.family,
|
|
253
|
+
"data-trailing": q.value,
|
|
254
|
+
"data-with-label": !!h.label || void 0
|
|
255
|
+
}, [m(s, {
|
|
256
|
+
"control-id": B.value,
|
|
257
|
+
label: h.label,
|
|
258
|
+
required: h.required,
|
|
259
|
+
"help-text": h.helpText,
|
|
260
|
+
"error-message": h.errorMessage,
|
|
261
|
+
invalid: h.invalid,
|
|
262
|
+
disabled: h.disabled,
|
|
263
|
+
readonly: h.readonly
|
|
246
264
|
}, {
|
|
247
|
-
default:
|
|
248
|
-
...
|
|
249
|
-
...
|
|
265
|
+
default: w((t) => [p("div", E, [p("input", g({
|
|
266
|
+
...x(L).bindings(),
|
|
267
|
+
...K(t)
|
|
250
268
|
}, {
|
|
251
269
|
id: t.controlId,
|
|
252
|
-
name:
|
|
270
|
+
name: h.name,
|
|
253
271
|
ref_key: "inputRef",
|
|
254
|
-
ref:
|
|
255
|
-
type:
|
|
256
|
-
class: ["s-input-text", { "s-input-text--monospace":
|
|
257
|
-
"data-size":
|
|
258
|
-
"data-density":
|
|
259
|
-
"data-appearance":
|
|
260
|
-
value:
|
|
261
|
-
placeholder:
|
|
262
|
-
autocomplete:
|
|
263
|
-
autocapitalize:
|
|
264
|
-
autocorrect:
|
|
265
|
-
spellcheck:
|
|
272
|
+
ref: R,
|
|
273
|
+
type: V.value.type,
|
|
274
|
+
class: ["s-input-text", { "s-input-text--monospace": h.monospace }],
|
|
275
|
+
"data-size": U.value,
|
|
276
|
+
"data-density": h.density,
|
|
277
|
+
"data-appearance": W.value,
|
|
278
|
+
value: h.modelValue,
|
|
279
|
+
placeholder: h.placeholder,
|
|
280
|
+
autocomplete: h.autocomplete,
|
|
281
|
+
autocapitalize: h.autocapitalize,
|
|
282
|
+
autocorrect: h.autocorrect,
|
|
283
|
+
spellcheck: h.spellcheck,
|
|
266
284
|
disabled: t.disabled,
|
|
267
285
|
readonly: t.readonly,
|
|
268
286
|
required: t.required,
|
|
287
|
+
minlength: H.value.minLength,
|
|
288
|
+
maxlength: H.value.maxLength,
|
|
269
289
|
"aria-invalid": t.invalid || void 0,
|
|
270
|
-
"aria-describedby":
|
|
271
|
-
onInput:
|
|
272
|
-
onChange:
|
|
273
|
-
onFocus: n[0] ||= (e) =>
|
|
274
|
-
onClick: n[1] ||= (e) =>
|
|
275
|
-
onKeydown: n[2] ||= (e) =>
|
|
276
|
-
}), null, 16,
|
|
290
|
+
"aria-describedby": x(e)(x(L).string("aria-describedby"), t.describedBy),
|
|
291
|
+
onInput: Y,
|
|
292
|
+
onChange: X,
|
|
293
|
+
onFocus: n[0] ||= (e) => I("focus", e),
|
|
294
|
+
onClick: n[1] ||= (e) => I("click", e),
|
|
295
|
+
onKeydown: n[2] ||= (e) => I("keydown", e)
|
|
296
|
+
}), null, 16, D), q.value ? (_(), f("div", {
|
|
277
297
|
key: 0,
|
|
278
298
|
class: "s-input-trailing",
|
|
279
|
-
"data-kind":
|
|
280
|
-
}, [
|
|
299
|
+
"data-kind": q.value
|
|
300
|
+
}, [h.trailingIcon ? (_(), f("span", k, [(_(), u(y(h.trailingIcon), { class: "s-input-trailing__icon" }))])) : h.trailingText === void 0 ? h.trailingAction ? (_(), u(o, {
|
|
281
301
|
key: 2,
|
|
282
302
|
label: "",
|
|
283
303
|
size: "sm",
|
|
284
|
-
density:
|
|
304
|
+
density: h.density,
|
|
285
305
|
appearance: "ghost",
|
|
286
306
|
shape: "square",
|
|
287
307
|
"icon-only": "",
|
|
288
|
-
severity:
|
|
289
|
-
"leading-icon":
|
|
290
|
-
loading:
|
|
291
|
-
disabled: t.disabled ||
|
|
292
|
-
title:
|
|
293
|
-
"aria-label":
|
|
294
|
-
onClick: n[3] ||= (e) =>
|
|
308
|
+
severity: h.trailingAction.severity ?? "secondary",
|
|
309
|
+
"leading-icon": h.trailingAction.icon,
|
|
310
|
+
loading: h.trailingAction.loading,
|
|
311
|
+
disabled: t.disabled || h.trailingAction.disabled,
|
|
312
|
+
title: h.trailingAction.title ?? h.trailingAction.label,
|
|
313
|
+
"aria-label": h.trailingAction.label,
|
|
314
|
+
onClick: n[3] ||= (e) => I("trailing-action", e)
|
|
295
315
|
}, null, 8, [
|
|
296
316
|
"density",
|
|
297
317
|
"severity",
|
|
@@ -300,7 +320,7 @@ var w = [
|
|
|
300
320
|
"disabled",
|
|
301
321
|
"title",
|
|
302
322
|
"aria-label"
|
|
303
|
-
])) :
|
|
323
|
+
])) : d("", !0) : (_(), f("span", A, b(h.trailingText), 1))], 8, O)) : d("", !0)])]),
|
|
304
324
|
_: 1
|
|
305
325
|
}, 8, [
|
|
306
326
|
"control-id",
|
|
@@ -311,8 +331,8 @@ var w = [
|
|
|
311
331
|
"invalid",
|
|
312
332
|
"disabled",
|
|
313
333
|
"readonly"
|
|
314
|
-
])], 8,
|
|
334
|
+
])], 8, T));
|
|
315
335
|
}
|
|
316
336
|
});
|
|
317
337
|
//#endregion
|
|
318
|
-
export {
|
|
338
|
+
export { j as default };
|
package/docs/accessibility.md
CHANGED
|
@@ -13,6 +13,11 @@
|
|
|
13
13
|
Consumer обязан передавать человекочитаемые labels и не заменять семантику
|
|
14
14
|
компонента локальными DOM listeners или CSS.
|
|
15
15
|
|
|
16
|
+
`SModal` и `SDrawer` сохраняют видимый заголовок как accessible name диалога
|
|
17
|
+
через `aria-labelledby`. `headingLevel` равен `2` по умолчанию для
|
|
18
|
+
самостоятельного диалога после `h1` страницы; вложенная композиция передаёт
|
|
19
|
+
фактический уровень document outline числом от `1` до `6`.
|
|
20
|
+
|
|
16
21
|
`SChart` требует явный `accessibility` contract. Содержательный график получает
|
|
17
22
|
accessible name через `mode: 'label'` или `mode: 'labelledby'` и по умолчанию
|
|
18
23
|
рендерит assistive data table. `mode: 'decorative'` допустим только когда те же
|
|
@@ -32,6 +37,11 @@ Interactive semantics belong to UI-kit leaf components. They own:
|
|
|
32
37
|
Consumers must provide human-readable labels and must not replace component
|
|
33
38
|
semantics with local DOM listeners or CSS.
|
|
34
39
|
|
|
40
|
+
`SModal` and `SDrawer` retain the visible title as the dialog's accessible name
|
|
41
|
+
through `aria-labelledby`. `headingLevel` defaults to `2` for a standalone
|
|
42
|
+
dialog following the page `h1`; a nested composition passes its actual document
|
|
43
|
+
outline level as an integer from `1` through `6`.
|
|
44
|
+
|
|
35
45
|
`SChart` requires an explicit `accessibility` contract. A meaningful chart gets
|
|
36
46
|
an accessible name through `mode: 'label'` or `mode: 'labelledby'` and renders
|
|
37
47
|
an assistive data table by default. `mode: 'decorative'` is valid only when a
|
package/docs/public-api.md
CHANGED
|
@@ -62,6 +62,12 @@ callbacks и trust flags не входят в API.
|
|
|
62
62
|
`sm/md/lg = 32/36/40 px` и label typography `12/14/14 px`; тот же
|
|
63
63
|
`density="compact"` у `SInputText` даёт совместимую геометрию поля без
|
|
64
64
|
consumer CSS.
|
|
65
|
+
`SInputText.minLength` и `SInputText.maxLength` передают строгие
|
|
66
|
+
неотрицательные safe integers нативному textual input; `minLength <= maxLength`
|
|
67
|
+
проверяется до рендера, а numeric/temporal families отвергают этот контракт.
|
|
68
|
+
`SModal.headingLevel` и `SDrawer.headingLevel` принимают только `1 | 2 | 3 | 4 |
|
|
69
|
+
5 | 6`, используют `2` по умолчанию и сохраняют связь видимого заголовка с
|
|
70
|
+
dialog surface через `aria-labelledby`.
|
|
65
71
|
`shared/data-display/SScrollViewport.vue` владеет accessible scroll region,
|
|
66
72
|
разрешёнными осями, semantic block size, root-only keyboard navigation и
|
|
67
73
|
ResizeObserver lifecycle. `shared/data-display/scrollViewport` экспортирует
|
|
@@ -132,6 +138,12 @@ and trust flags are not part of the API.
|
|
|
132
138
|
`sm/md/lg = 32/36/40 px` with `12/14/14 px` label typography. The matching
|
|
133
139
|
`SInputText.density="compact"` exposes the same field geometry without consumer
|
|
134
140
|
CSS.
|
|
141
|
+
`SInputText.minLength` and `SInputText.maxLength` pass strict non-negative safe
|
|
142
|
+
integers to the native textual input. `minLength <= maxLength` is validated
|
|
143
|
+
before rendering, and numeric/temporal families reject this contract.
|
|
144
|
+
`SModal.headingLevel` and `SDrawer.headingLevel` accept `1 | 2 | 3 | 4 | 5 | 6`
|
|
145
|
+
only, default to `2`, and preserve the visible-title relationship with the
|
|
146
|
+
dialog surface through `aria-labelledby`.
|
|
135
147
|
`shared/data-display/SScrollViewport.vue` owns the accessible scroll region,
|
|
136
148
|
enabled axes, semantic block size, root-only keyboard navigation, and
|
|
137
149
|
ResizeObserver lifecycle. `shared/data-display/scrollViewport` exports
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
.s-drawer-backdrop[data-v-d0cace23]{background:var(--s-overlay-backdrop-surface);-webkit-backdrop-filter:blur(var(--s-overlay-backdrop-blur));backdrop-filter:blur(var(--s-overlay-backdrop-blur));position:fixed;inset:0}.s-drawer-shell[data-v-d0cace23]{position:fixed;inset:0}.s-drawer-positioner[data-v-d0cace23]{justify-content:flex-end;align-items:stretch;display:flex;position:absolute;inset:0}.s-drawer-positioner[data-placement=bottom][data-v-d0cace23]{justify-content:stretch;align-items:flex-end}.s-drawer-backdrop-enter-active[data-v-d0cace23],.s-drawer-backdrop-leave-active[data-v-d0cace23]{transition:opacity var(--s-motion-standard) ease}.s-drawer-backdrop-enter-from[data-v-d0cace23],.s-drawer-backdrop-leave-to[data-v-d0cace23]{opacity:0}.s-drawer-panel-enter-active[data-v-d0cace23],.s-drawer-panel-leave-active[data-v-d0cace23]{transition:opacity var(--s-motion-standard) ease, transform var(--s-motion-standard) ease}.s-drawer-panel-enter-from[data-v-d0cace23],.s-drawer-panel-leave-to[data-v-d0cace23]{opacity:0;transform:translate(1.5rem)}.s-drawer-shell[data-placement=bottom].s-drawer-panel-enter-from[data-v-d0cace23],.s-drawer-shell[data-placement=bottom].s-drawer-panel-leave-to[data-v-d0cace23]{transform:translateY(1.5rem)}@media (width<=767px){.s-drawer-shell[data-placement=right].s-drawer-panel-enter-from[data-v-d0cace23],.s-drawer-shell[data-placement=right].s-drawer-panel-leave-to[data-v-d0cace23]{transform:translateY(1.5rem)}}@media (prefers-reduced-motion:reduce){.s-drawer-backdrop-enter-active[data-v-d0cace23],.s-drawer-backdrop-leave-active[data-v-d0cace23],.s-drawer-panel-enter-active[data-v-d0cace23],.s-drawer-panel-leave-active[data-v-d0cace23]{transition:none}.s-drawer-panel-enter-from[data-v-d0cace23],.s-drawer-panel-leave-to[data-v-d0cace23]{transform:none}}
|