@sortsys/ui 0.1.7 → 0.1.9

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.
Files changed (7) hide show
  1. package/dist/dev.js +117 -58
  2. package/dist/index.d.ts +21 -1
  3. package/dist/index.js +117 -58
  4. package/dist/styles/default.css +1 -1
  5. package/package.json +1 -5
  6. package/dist/dev.jsx +0 -1607
  7. package/dist/index.jsx +0 -1607
package/dist/dev.js CHANGED
@@ -1,5 +1,5 @@
1
- import { delegateEvents, template, insert, memo, effect, setAttribute, use, createComponent, addEventListener, className, spread, mergeProps, style, setStyleProperty, Portal } from 'solid-js/web';
2
- import { createContext, useContext, createSignal, onMount, onCleanup, createEffect, createUniqueId, For, untrack, createMemo, Show, createResource } from 'solid-js';
1
+ import { delegateEvents, template, insert, memo, effect, className, setAttribute, use, createComponent, addEventListener, spread, mergeProps, style, setStyleProperty, Portal } from 'solid-js/web';
2
+ import { createContext, useContext, createSignal, onMount, onCleanup, createEffect, createUniqueId, For, untrack, createMemo, children, Show, createResource } from 'solid-js';
3
3
  import { useLocation, A, useNavigate } from '@solidjs/router';
4
4
 
5
5
  // src/components/SSButton.tsx
@@ -36,7 +36,7 @@ function SSCallout(props) {
36
36
  color,
37
37
  class: className,
38
38
  style,
39
- children,
39
+ children: children2,
40
40
  ...rest
41
41
  } = props;
42
42
  return (() => {
@@ -46,7 +46,7 @@ function SSCallout(props) {
46
46
  "style": style
47
47
  }), false, true);
48
48
  insert(_el$2, icon);
49
- insert(_el$4, children);
49
+ insert(_el$4, children2);
50
50
  return _el$;
51
51
  })();
52
52
  }
@@ -83,10 +83,51 @@ function SSChip(props) {
83
83
  }
84
84
  delegateEvents(["click"]);
85
85
  var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
86
- var _tmpl$23 = /* @__PURE__ */ template(`<div class=ss_table__pagination><button type=button class=ss_table__page_button aria-label="Erste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M7 6v12"></path><path d="M18 6l-6 6l6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Vorherige Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M15 6l-6 6l6 6"></path></svg></button><span class=ss_table__page_info>Seite <!> von </span><button type=button class=ss_table__page_button aria-label="N\xE4chste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Letzte Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 6l6 6l-6 6"></path><path d="M17 5v13">`);
87
- var _tmpl$33 = /* @__PURE__ */ template(`<div><div class=ss_table__scroll><table><thead><tr></tr></thead><tbody>`);
86
+ var _tmpl$23 = /* @__PURE__ */ template(`<div><div class=ss_attr_list__label></div><div class=ss_attr_list__value>`);
87
+ var _tmpl$33 = /* @__PURE__ */ template(`<div class=ss_attr_list__value>`);
88
+ var SSAttrList = (props) => {
89
+ const resolved = children(() => props.children);
90
+ const {
91
+ class: className,
92
+ children: _children,
93
+ ...rest
94
+ } = props;
95
+ return createComponent(Show, {
96
+ get when() {
97
+ return !!resolved();
98
+ },
99
+ get children() {
100
+ var _el$ = _tmpl$4();
101
+ spread(_el$, mergeProps(rest, {
102
+ "class": `ss_attr_list ${className ?? ""}`
103
+ }), false, true);
104
+ insert(_el$, resolved);
105
+ return _el$;
106
+ }
107
+ });
108
+ };
109
+ SSAttrList.Attr = function(props) {
110
+ return (() => {
111
+ var _el$2 = _tmpl$23(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
112
+ insert(_el$3, () => props.name);
113
+ insert(_el$4, () => props.value);
114
+ insert(_el$2, (() => {
115
+ var _c$ = memo(() => !!!!props.third);
116
+ return () => _c$() && (() => {
117
+ var _el$5 = _tmpl$33();
118
+ insert(_el$5, () => props.third);
119
+ return _el$5;
120
+ })();
121
+ })(), null);
122
+ effect(() => className(_el$2, `ss_attr_list__row ${props.third ? "ss_attr_list__row--third" : ""}`));
123
+ return _el$2;
124
+ })();
125
+ };
126
+ var _tmpl$5 = /* @__PURE__ */ template(`<div>`);
127
+ var _tmpl$24 = /* @__PURE__ */ template(`<div class=ss_table__pagination><button type=button class=ss_table__page_button aria-label="Erste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M7 6v12"></path><path d="M18 6l-6 6l6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Vorherige Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M15 6l-6 6l6 6"></path></svg></button><span class=ss_table__page_info>Seite <!> von </span><button type=button class=ss_table__page_button aria-label="N\xE4chste Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></button><button type=button class=ss_table__page_button aria-label="Letzte Seite"><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 6l6 6l-6 6"></path><path d="M17 5v13">`);
128
+ var _tmpl$34 = /* @__PURE__ */ template(`<div><div class=ss_table__scroll><table><thead><tr></tr></thead><tbody>`);
88
129
  var _tmpl$42 = /* @__PURE__ */ template(`<th>`);
89
- var _tmpl$5 = /* @__PURE__ */ template(`<button type=button class=ss_table__sort_button><span class=ss_table__sort_icon aria-hidden=true>`);
130
+ var _tmpl$52 = /* @__PURE__ */ template(`<button type=button class=ss_table__sort_button><span class=ss_table__sort_icon aria-hidden=true>`);
90
131
  var _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
91
132
  var _tmpl$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 15l6 -6l6 6">`);
92
133
  var _tmpl$8 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-selector"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4">`);
@@ -103,7 +144,7 @@ function SSDataCell(props) {
103
144
  return null;
104
145
  });
105
146
  return (() => {
106
- var _el$ = _tmpl$4();
147
+ var _el$ = _tmpl$5();
107
148
  insert(_el$, () => {
108
149
  const value = rendered();
109
150
  if (value && typeof value.then === "function") {
@@ -175,7 +216,7 @@ function SSDataTable(props) {
175
216
  const paginationPosition = () => props.paginationPosition ?? "bottom";
176
217
  const containerClass = () => `ss_table ${paginationPosition() === "top" ? "ss_table--pagination-top" : ""} ${props.class ?? ""}`;
177
218
  const paginationBar = () => (() => {
178
- var _el$2 = _tmpl$23(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling; _el$8.nextSibling; var _el$9 = _el$5.nextSibling, _el$0 = _el$9.nextSibling;
219
+ var _el$2 = _tmpl$24(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling; _el$8.nextSibling; var _el$9 = _el$5.nextSibling, _el$0 = _el$9.nextSibling;
179
220
  _el$3.$$click = () => goToPage(1);
180
221
  _el$4.$$click = () => goToPage(page() - 1);
181
222
  insert(_el$5, page, _el$8);
@@ -198,7 +239,7 @@ function SSDataTable(props) {
198
239
  return _el$2;
199
240
  })();
200
241
  return (() => {
201
- var _el$1 = _tmpl$33(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling;
242
+ var _el$1 = _tmpl$34(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling;
202
243
  insert(_el$1, (() => {
203
244
  var _c$ = memo(() => paginationPosition() === "top");
204
245
  return () => _c$() && paginationBar();
@@ -214,7 +255,7 @@ function SSDataTable(props) {
214
255
  return (() => {
215
256
  var _el$15 = _tmpl$42();
216
257
  insert(_el$15, sortable ? (() => {
217
- var _el$16 = _tmpl$5(), _el$17 = _el$16.firstChild;
258
+ var _el$16 = _tmpl$52(), _el$17 = _el$16.firstChild;
218
259
  _el$16.$$click = () => toggleSort(index());
219
260
  insert(_el$16, () => column.label, _el$17);
220
261
  insert(_el$17, (() => {
@@ -283,11 +324,29 @@ function SSDataTable(props) {
283
324
  })();
284
325
  }
285
326
  delegateEvents(["click"]);
286
- var _tmpl$10 = /* @__PURE__ */ template(`<div class=ss_dropdown__menu role=menu>`);
287
- var _tmpl$24 = /* @__PURE__ */ template(`<div><button type=button class="ss_dropdown__trigger ss_button ss_button--icon"aria-haspopup=menu>`);
288
- var _tmpl$34 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0">`);
327
+ var _tmpl$10 = /* @__PURE__ */ template(`<div role=separator>`);
328
+ function SSDivider(props) {
329
+ return (() => {
330
+ var _el$ = _tmpl$10();
331
+ effect((_p$) => {
332
+ var _v$ = `ss_divider ${props.vertical ? "ss_divider--vertical" : ""} ${props.class ?? ""}`, _v$2 = props.style, _v$3 = props.vertical ? "vertical" : "horizontal";
333
+ _v$ !== _p$.e && className(_el$, _p$.e = _v$);
334
+ _p$.t = style(_el$, _v$2, _p$.t);
335
+ _v$3 !== _p$.a && setAttribute(_el$, "aria-orientation", _p$.a = _v$3);
336
+ return _p$;
337
+ }, {
338
+ e: void 0,
339
+ t: void 0,
340
+ a: void 0
341
+ });
342
+ return _el$;
343
+ })();
344
+ }
345
+ var _tmpl$11 = /* @__PURE__ */ template(`<div class=ss_dropdown__menu role=menu>`);
346
+ var _tmpl$25 = /* @__PURE__ */ template(`<div><button type=button class="ss_dropdown__trigger ss_button ss_button--icon"aria-haspopup=menu>`);
347
+ var _tmpl$35 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-dots-vertical"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0">`);
289
348
  var _tmpl$43 = /* @__PURE__ */ template(`<button type=button class=ss_dropdown__item><span class=ss_dropdown__item_icon></span><span class=ss_dropdown__item_label>`);
290
- var _tmpl$52 = /* @__PURE__ */ template(`<span class=ss_dropdown__item_check aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-check"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M5 12l5 5l10 -10">`);
349
+ var _tmpl$53 = /* @__PURE__ */ template(`<span class=ss_dropdown__item_check aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-check"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M5 12l5 5l10 -10">`);
291
350
  function SSDropdown(props) {
292
351
  const [open, setOpen] = createSignal(false);
293
352
  const [renderMenu, setRenderMenu] = createSignal(false);
@@ -322,16 +381,16 @@ function SSDropdown(props) {
322
381
  });
323
382
  });
324
383
  return (() => {
325
- var _el$ = _tmpl$24(), _el$2 = _el$.firstChild;
384
+ var _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
326
385
  use((el) => rootRef = el, _el$);
327
386
  _el$2.$$click = () => setOpen((value) => !value);
328
- insert(_el$2, () => props.icon ?? _tmpl$34());
387
+ insert(_el$2, () => props.icon ?? _tmpl$35());
329
388
  insert(_el$, createComponent(Show, {
330
389
  get when() {
331
390
  return renderMenu();
332
391
  },
333
392
  get children() {
334
- var _el$3 = _tmpl$10();
393
+ var _el$3 = _tmpl$11();
335
394
  insert(_el$3, createComponent(For, {
336
395
  get each() {
337
396
  return props.items;
@@ -346,7 +405,7 @@ function SSDropdown(props) {
346
405
  insert(_el$7, () => item.label);
347
406
  insert(_el$5, (() => {
348
407
  var _c$ = memo(() => !!item.checked);
349
- return () => _c$() && _tmpl$52();
408
+ return () => _c$() && _tmpl$53();
350
409
  })(), null);
351
410
  effect((_p$) => {
352
411
  var _v$5 = item.checked ? "menuitemcheckbox" : "menuitem", _v$6 = item.checked ? "true" : void 0;
@@ -381,9 +440,9 @@ function SSDropdown(props) {
381
440
  })();
382
441
  }
383
442
  delegateEvents(["click"]);
384
- var _tmpl$11 = /* @__PURE__ */ template(`<div><div class=ss_expandable__header role=button tabindex=0><span class=ss_expandable__icon aria-hidden=true></span><span class=ss_expandable__title></span></div><div class=ss_expandable__content style=transition-duration:200ms><div class=ss_expandable__divider_wrapper><div class=ss_expandable__divider>`);
385
- var _tmpl$25 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
386
- var _tmpl$35 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6">`);
443
+ var _tmpl$12 = /* @__PURE__ */ template(`<div><div class=ss_expandable__header role=button tabindex=0><span class=ss_expandable__icon aria-hidden=true></span><span class=ss_expandable__title></span></div><div class=ss_expandable__content style=transition-duration:200ms><div class=ss_expandable__divider_wrapper><div class=ss_expandable__divider>`);
444
+ var _tmpl$26 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
445
+ var _tmpl$36 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6">`);
387
446
  var TRANSITION_MS = 200;
388
447
  function SSExpandable(props) {
389
448
  const [height, setHeight] = createSignal(props.initiallyExpanded ? "auto" : 0);
@@ -405,7 +464,7 @@ function SSExpandable(props) {
405
464
  if (timeoutId) clearTimeout(timeoutId);
406
465
  });
407
466
  return (() => {
408
- var _el$ = _tmpl$11(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild; _el$6.firstChild;
467
+ var _el$ = _tmpl$12(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild; _el$6.firstChild;
409
468
  _el$2.$$keydown = (event) => {
410
469
  if (event.key === "Enter" || event.key === " ") {
411
470
  event.preventDefault();
@@ -415,7 +474,7 @@ function SSExpandable(props) {
415
474
  _el$2.$$click = toggle;
416
475
  insert(_el$3, (() => {
417
476
  var _c$ = memo(() => !!isExpanded());
418
- return () => _c$() ? _tmpl$25() : _tmpl$35();
477
+ return () => _c$() ? _tmpl$26() : _tmpl$36();
419
478
  })());
420
479
  insert(_el$4, () => props.title);
421
480
  use((el) => contentRef = el, _el$5);
@@ -453,22 +512,22 @@ function createLoading() {
453
512
  }
454
513
 
455
514
  // src/components/SSForm.tsx
456
- var _tmpl$12 = /* @__PURE__ */ template(`<form class=ss_form>`);
457
- var _tmpl$26 = /* @__PURE__ */ template(`<div class=ss_form_input><label></label><div class=ss__wrapper>`);
458
- var _tmpl$36 = /* @__PURE__ */ template(`<textarea>`);
515
+ var _tmpl$13 = /* @__PURE__ */ template(`<form class=ss_form>`);
516
+ var _tmpl$27 = /* @__PURE__ */ template(`<div class=ss_form_input><label></label><div class=ss__wrapper>`);
517
+ var _tmpl$37 = /* @__PURE__ */ template(`<textarea>`);
459
518
  var _tmpl$44 = /* @__PURE__ */ template(`<input>`);
460
- var _tmpl$53 = /* @__PURE__ */ template(`<ul class=ss__suggestions>`);
519
+ var _tmpl$54 = /* @__PURE__ */ template(`<ul class=ss__suggestions>`);
461
520
  var _tmpl$62 = /* @__PURE__ */ template(`<li>`);
462
521
  var _tmpl$72 = /* @__PURE__ */ template(`<span role=alert>`);
463
522
  var _tmpl$82 = /* @__PURE__ */ template(`<div class=ss_form_date><label></label><div class=ss__wrapper><input type=text inputmode=numeric autocomplete=off placeholder=TT.MM.JJJJ><button type=button class=ss_form_date__icon aria-label="Kalender \xF6ffnen"aria-haspopup=dialog><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=currentColor class="icon icon-tabler icons-tabler-filled icon-tabler-calendar-week"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M16 2c.183 0 .355 .05 .502 .135l.033 .02c.28 .177 .465 .49 .465 .845v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 .514 -.874l.093 -.046l.066 -.025l.1 -.029l.107 -.019l.12 -.007q .083 0 .161 .013l.122 .029l.04 .012l.06 .023c.328 .135 .568 .44 .61 .806l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z"></path><path d="M9.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M13.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M17.02 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1"></path><path d="M12.02 15a1 1 0 0 1 0 2a1.001 1.001 0 1 1 -.005 -2z"></path><path d="M9.015 16a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1">`);
464
523
  var _tmpl$92 = /* @__PURE__ */ template(`<div class=ss_form_date__picker role=dialog aria-label="Datum ausw\xE4hlen"><div class=ss_form_date__header><div class=ss_form_date__nav_group><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M7 6v12"></path><path d="M18 6l-6 6l6 6"></path></svg></button><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M15 6l-6 6l6 6"></path></svg></button></div><div class=ss_form_date__title></div><div class=ss_form_date__nav_group><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></button><button type=button class=ss_form_date__nav><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right-pipe"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 6l6 6l-6 6"></path><path d="M17 5v13"></path></svg></button></div></div><div class=ss_form_date__weekdays></div><div class=ss_form_date__grid>`);
465
524
  var _tmpl$02 = /* @__PURE__ */ template(`<span>`);
466
- var _tmpl$13 = /* @__PURE__ */ template(`<button type=button class=ss_form_date__day>`);
525
+ var _tmpl$14 = /* @__PURE__ */ template(`<button type=button class=ss_form_date__day>`);
467
526
  var _tmpl$102 = /* @__PURE__ */ template(`<span class="ss_form_date__day is-empty">`);
468
527
  var _tmpl$112 = /* @__PURE__ */ template(`<div class=ss_form_checkbox><div class=ss__wrapper><input type=checkbox><label>`);
469
528
  var _tmpl$122 = /* @__PURE__ */ template(`<div class=ss_form_select><label></label><div class=ss_form_select__field><select></select><span class=ss_form_select__icon aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M6 9l6 6l6 -6">`);
470
529
  var _tmpl$132 = /* @__PURE__ */ template(`<option>`);
471
- var _tmpl$14 = /* @__PURE__ */ template(`<div class=ss_form_ac_select><label>`);
530
+ var _tmpl$142 = /* @__PURE__ */ template(`<div class=ss_form_ac_select><label>`);
472
531
  var _tmpl$15 = /* @__PURE__ */ template(`<div class=ss__selection><div class=ss__content></div><button type=button class=ss__clear aria-label="Auswahl entfernen">\xD7`);
473
532
  var _tmpl$16 = /* @__PURE__ */ template(`<div class=ss__wrapper><div class=ss__input_row><input>`);
474
533
  var _tmpl$17 = /* @__PURE__ */ template(`<span class=ss__prefix role=button>`);
@@ -502,7 +561,7 @@ var SSForm = function(props) {
502
561
  })
503
562
  };
504
563
  return (() => {
505
- var _el$ = _tmpl$12();
564
+ var _el$ = _tmpl$13();
506
565
  _el$.addEventListener("submit", (e) => {
507
566
  e.preventDefault();
508
567
  context.submit();
@@ -638,12 +697,12 @@ SSForm.Input = function(props) {
638
697
  };
639
698
  const _id = createUniqueId();
640
699
  return (() => {
641
- var _el$2 = _tmpl$26(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
700
+ var _el$2 = _tmpl$27(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
642
701
  insert(_el$3, () => props.label);
643
702
  insert(_el$4, (() => {
644
703
  var _c$ = memo(() => !!props.textArea);
645
704
  return () => _c$() ? (() => {
646
- var _el$5 = _tmpl$36();
705
+ var _el$5 = _tmpl$37();
647
706
  _el$5.$$keydown = handleKeyDown;
648
707
  _el$5.$$input = (e) => handleInputChange(e.target.value);
649
708
  effect((_p$) => {
@@ -679,7 +738,7 @@ SSForm.Input = function(props) {
679
738
  insert(_el$4, (() => {
680
739
  var _c$2 = memo(() => !!!!suggItems().length);
681
740
  return () => _c$2() && (() => {
682
- var _el$7 = _tmpl$53();
741
+ var _el$7 = _tmpl$54();
683
742
  use((el) => suggListRef = el, _el$7);
684
743
  insert(_el$7, createComponent(For, {
685
744
  get each() {
@@ -876,7 +935,7 @@ SSForm.Date = function(props) {
876
935
  return _el$24;
877
936
  })()));
878
937
  insert(_el$23, () => buildCalendar().map((day) => day ? (() => {
879
- var _el$25 = _tmpl$13();
938
+ var _el$25 = _tmpl$14();
880
939
  _el$25.$$click = () => handleSelect(day);
881
940
  insert(_el$25, day);
882
941
  effect((_p$) => {
@@ -1251,7 +1310,7 @@ SSForm.ACSelect = function(props) {
1251
1310
  };
1252
1311
  const isDisabled = () => props.disabled || context?.loading();
1253
1312
  return (() => {
1254
- var _el$39 = _tmpl$14(), _el$40 = _el$39.firstChild;
1313
+ var _el$39 = _tmpl$142(), _el$40 = _el$39.firstChild;
1255
1314
  insert(_el$40, () => props.label);
1256
1315
  insert(_el$39, (() => {
1257
1316
  var _c$8 = memo(() => !!(props.maxSelectedItems === 1 && !!props.renderSelection && value().length === 1));
@@ -1307,7 +1366,7 @@ SSForm.ACSelect = function(props) {
1307
1366
  insert(_el$44, (() => {
1308
1367
  var _c$1 = memo(() => !!!!suggItems().length);
1309
1368
  return () => _c$1() && (() => {
1310
- var _el$48 = _tmpl$53();
1369
+ var _el$48 = _tmpl$54();
1311
1370
  use((el) => suggListRef = el, _el$48);
1312
1371
  insert(_el$48, createComponent(For, {
1313
1372
  get each() {
@@ -1414,7 +1473,7 @@ SSForm.rules = {
1414
1473
  };
1415
1474
  delegateEvents(["input", "keydown", "pointerdown", "click"]);
1416
1475
  var _tmpl$19 = /* @__PURE__ */ template(`<div><div class=ss_header__text><h3 class=ss_header__title></h3></div><div class=ss_header__actions>`);
1417
- var _tmpl$27 = /* @__PURE__ */ template(`<h5 class=ss_header__subtitle>`);
1476
+ var _tmpl$28 = /* @__PURE__ */ template(`<h5 class=ss_header__subtitle>`);
1418
1477
  function SSHeader(props) {
1419
1478
  return (() => {
1420
1479
  var _el$ = _tmpl$19(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
@@ -1422,7 +1481,7 @@ function SSHeader(props) {
1422
1481
  insert(_el$2, (() => {
1423
1482
  var _c$ = memo(() => !!props.subtitle);
1424
1483
  return () => _c$() && (() => {
1425
- var _el$5 = _tmpl$27();
1484
+ var _el$5 = _tmpl$28();
1426
1485
  insert(_el$5, () => props.subtitle);
1427
1486
  return _el$5;
1428
1487
  })();
@@ -1441,10 +1500,10 @@ function SSHeader(props) {
1441
1500
  })();
1442
1501
  }
1443
1502
  var _tmpl$20 = /* @__PURE__ */ template(`<div class=ss_modal__footer>`);
1444
- var _tmpl$28 = /* @__PURE__ */ template(`<div class=ss_modal><div class=ss_modal__backdrop></div><div class=ss_modal__panel role=dialog aria-modal=true tabindex=-1><div class=ss_modal__body><div class=ss_modal__body_inner>`);
1445
- var _tmpl$37 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M18 6l-12 12"></path><path d="M6 6l12 12">`);
1503
+ var _tmpl$29 = /* @__PURE__ */ template(`<div class=ss_modal><div class=ss_modal__backdrop></div><div class=ss_modal__panel role=dialog aria-modal=true tabindex=-1><div class=ss_modal__body><div class=ss_modal__body_inner>`);
1504
+ var _tmpl$38 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M18 6l-12 12"></path><path d="M6 6l12 12">`);
1446
1505
  var _tmpl$45 = /* @__PURE__ */ template(`<div class=ss_modal__header>`);
1447
- var _tmpl$54 = /* @__PURE__ */ template(`<h2 class=ss_modal__title>`);
1506
+ var _tmpl$55 = /* @__PURE__ */ template(`<h2 class=ss_modal__title>`);
1448
1507
  var CLOSE_ANIMATION_MS = 180;
1449
1508
  function SSModal(props) {
1450
1509
  const [isMounted, setIsMounted] = createSignal(props.open);
@@ -1500,7 +1559,7 @@ function SSModal(props) {
1500
1559
  get children() {
1501
1560
  return createComponent(Portal, {
1502
1561
  get children() {
1503
- var _el$ = _tmpl$28(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
1562
+ var _el$ = _tmpl$29(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
1504
1563
  _el$2.$$click = handleBackdropClick;
1505
1564
  use((el) => panelRef = el, _el$3);
1506
1565
  insert(_el$3, (() => {
@@ -1510,7 +1569,7 @@ function SSModal(props) {
1510
1569
  insert(_el$7, (() => {
1511
1570
  var _c$2 = memo(() => !!props.title);
1512
1571
  return () => _c$2() && (() => {
1513
- var _el$9 = _tmpl$54();
1572
+ var _el$9 = _tmpl$55();
1514
1573
  setAttribute(_el$9, "id", titleId);
1515
1574
  insert(_el$9, () => props.title);
1516
1575
  return _el$9;
@@ -1531,7 +1590,7 @@ function SSModal(props) {
1531
1590
  props.onClose?.();
1532
1591
  },
1533
1592
  get children() {
1534
- return _tmpl$37();
1593
+ return _tmpl$38();
1535
1594
  }
1536
1595
  });
1537
1596
  }
@@ -1789,10 +1848,10 @@ function SSModalsProvider(props) {
1789
1848
  });
1790
1849
  }
1791
1850
  var _tmpl$21 = /* @__PURE__ */ template(`<div><input type=checkbox class=ss_shell__drawer_toggle_input><header class=ss_shell__header><div class=ss_shell__header_left><label class="ss_shell__drawer_toggle ss_button ss_button--icon"aria-label="Navigation \xF6ffnen"role=button tabindex=0><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M4 6l16 0"></path><path d="M4 12l16 0"></path><path d="M4 18l16 0"></path></svg></label><div class=ss_shell__title></div></div><div class=ss_shell__actions></div></header><div class=ss_shell__body><nav class=ss_shell__nav aria-label=Hauptnavigation><div class=ss_shell__nav_inner></div></nav><div class=ss_shell__main></div><label class=ss_shell__scrim aria-label="Navigation schlie\xDFen">`);
1792
- var _tmpl$29 = /* @__PURE__ */ template(`<div class=ss_shell__nav_list>`);
1793
- var _tmpl$38 = /* @__PURE__ */ template(`<a class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
1851
+ var _tmpl$210 = /* @__PURE__ */ template(`<div class=ss_shell__nav_list>`);
1852
+ var _tmpl$39 = /* @__PURE__ */ template(`<a class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
1794
1853
  var _tmpl$46 = /* @__PURE__ */ template(`<span class=ss_shell__nav_icon>`);
1795
- var _tmpl$55 = /* @__PURE__ */ template(`<button type=button class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
1854
+ var _tmpl$56 = /* @__PURE__ */ template(`<button type=button class=ss_shell__nav_item><span class=ss_shell__nav_label>`);
1796
1855
  var _tmpl$63 = /* @__PURE__ */ template(`<details class=ss_shell__nav_group><summary class=ss_shell__nav_group_header><span class=ss_shell__nav_label></span><span class=ss_shell__nav_group_chevron aria-hidden=true><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class=ss_shell__nav_group_chevron_svg><path stroke=none d="M0 0h24v24H0z"fill=none></path><path d="M9 6l6 6l-6 6"></path></svg></span></summary><div class=ss_shell__nav_group_items>`);
1797
1856
  var SSShellContext = createContext();
1798
1857
  function SSShell(props) {
@@ -1851,7 +1910,7 @@ function SSShell(props) {
1851
1910
  }
1852
1911
  SSShell.Nav = function(props) {
1853
1912
  return (() => {
1854
- var _el$11 = _tmpl$29();
1913
+ var _el$11 = _tmpl$210();
1855
1914
  insert(_el$11, () => props.children);
1856
1915
  return _el$11;
1857
1916
  })();
@@ -1862,7 +1921,7 @@ SSShell.NavLink = function(props) {
1862
1921
  onCleanup(() => context?.unregisterHref(props.href));
1863
1922
  const isActive = () => context?.activeHref() === props.href;
1864
1923
  return (() => {
1865
- var _el$12 = _tmpl$38(), _el$13 = _el$12.firstChild;
1924
+ var _el$12 = _tmpl$39(), _el$13 = _el$12.firstChild;
1866
1925
  _el$12.$$click = () => {
1867
1926
  props.onclick?.();
1868
1927
  context?.closeDrawer();
@@ -1891,7 +1950,7 @@ SSShell.NavLink = function(props) {
1891
1950
  SSShell.NavAction = function(props) {
1892
1951
  const context = useContext(SSShellContext);
1893
1952
  return (() => {
1894
- var _el$15 = _tmpl$55(), _el$16 = _el$15.firstChild;
1953
+ var _el$15 = _tmpl$56(), _el$16 = _el$15.firstChild;
1895
1954
  _el$15.$$click = () => {
1896
1955
  props.onclick();
1897
1956
  context?.closeDrawer();
@@ -1944,10 +2003,10 @@ function SSSurface(props) {
1944
2003
  })();
1945
2004
  }
1946
2005
  var _tmpl$31 = /* @__PURE__ */ template(`<div><div class=ss_tile__row><div class=ss_tile__content>`);
1947
- var _tmpl$210 = /* @__PURE__ */ template(`<span class=ss_tile__icon>`);
1948
- var _tmpl$39 = /* @__PURE__ */ template(`<h5 class=ss_tile__title>`);
2006
+ var _tmpl$211 = /* @__PURE__ */ template(`<span class=ss_tile__icon>`);
2007
+ var _tmpl$310 = /* @__PURE__ */ template(`<h5 class=ss_tile__title>`);
1949
2008
  var _tmpl$47 = /* @__PURE__ */ template(`<h5 class=ss_tile__title><span class=ss_tile__text>`);
1950
- var _tmpl$56 = /* @__PURE__ */ template(`<div class=ss_tile__subtitle>`);
2009
+ var _tmpl$57 = /* @__PURE__ */ template(`<div class=ss_tile__subtitle>`);
1951
2010
  var _tmpl$64 = /* @__PURE__ */ template(`<div class=ss_tile__trailing>`);
1952
2011
  function SSTile(props) {
1953
2012
  return (() => {
@@ -1955,7 +2014,7 @@ function SSTile(props) {
1955
2014
  insert(_el$2, (() => {
1956
2015
  var _c$ = memo(() => !!props.icon);
1957
2016
  return () => _c$() && (() => {
1958
- var _el$4 = _tmpl$210();
2017
+ var _el$4 = _tmpl$211();
1959
2018
  insert(_el$4, () => props.icon);
1960
2019
  return _el$4;
1961
2020
  })();
@@ -1963,7 +2022,7 @@ function SSTile(props) {
1963
2022
  insert(_el$3, (() => {
1964
2023
  var _c$2 = memo(() => !!props.href);
1965
2024
  return () => _c$2() ? (() => {
1966
- var _el$5 = _tmpl$39();
2025
+ var _el$5 = _tmpl$310();
1967
2026
  insert(_el$5, createComponent(A, {
1968
2027
  "class": "ss_tile__link",
1969
2028
  get href() {
@@ -1986,7 +2045,7 @@ function SSTile(props) {
1986
2045
  insert(_el$3, (() => {
1987
2046
  var _c$3 = memo(() => !!props.subtitle);
1988
2047
  return () => _c$3() && (() => {
1989
- var _el$8 = _tmpl$56();
2048
+ var _el$8 = _tmpl$57();
1990
2049
  insert(_el$8, () => props.subtitle);
1991
2050
  return _el$8;
1992
2051
  })();
@@ -2028,4 +2087,4 @@ function createSSTile(build) {
2028
2087
  };
2029
2088
  }
2030
2089
 
2031
- export { SSButton, SSCallout, SSChip, SSDataTable, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };
2090
+ export { SSAttrList, SSButton, SSCallout, SSChip, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };
package/dist/index.d.ts CHANGED
@@ -44,6 +44,19 @@ type SSChipDisplayProps = {
44
44
  type SSChipProps = SSChipBaseProps & (SSChipClickableProps | SSChipDismissableProps | SSChipDisplayProps);
45
45
  declare function SSChip(props: SSChipProps): JSX.Element;
46
46
 
47
+ type SSAttrListProps = {
48
+ children?: JSXElement;
49
+ } & Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;
50
+ type SSAttrListAttrProps = {
51
+ name: JSXElement;
52
+ value: JSXElement;
53
+ third?: JSXElement;
54
+ };
55
+ type SSAttrListComponent = ((props: SSAttrListProps) => JSXElement | null) & {
56
+ Attr: (props: SSAttrListAttrProps) => JSXElement;
57
+ };
58
+ declare const SSAttrList: SSAttrListComponent;
59
+
47
60
  type PromiseOr$3<T> = Promise<T> | T;
48
61
  type SSDataColumn<RowT> = {
49
62
  label: string;
@@ -61,6 +74,13 @@ type SSDataTableProps<RowT extends object> = {
61
74
  };
62
75
  declare function SSDataTable<RowT extends object>(props: SSDataTableProps<RowT>): solid_js.JSX.Element;
63
76
 
77
+ type SSDividerProps = {
78
+ vertical?: boolean;
79
+ class?: string;
80
+ style?: string;
81
+ };
82
+ declare function SSDivider(props: SSDividerProps): solid_js.JSX.Element;
83
+
64
84
  type PromiseOr$2<T> = Promise<T> | T;
65
85
  type SSDropdownItem = {
66
86
  label: string;
@@ -365,4 +385,4 @@ declare function createSSTile<T>(build: (data: T) => SSTileProps): (props: {
365
385
  onLinkClick?: () => void;
366
386
  }) => solid_js.JSX.Element;
367
387
 
368
- export { SSButton, SSCallout, SSChip, type SSColor, SSDataTable, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };
388
+ export { SSAttrList, SSButton, SSCallout, SSChip, type SSColor, SSDataTable, SSDivider, SSDropdown, SSExpandable, SSForm, SSHeader, SSModal, SSModalsProvider, SSShell, SSSurface, SSTile, createSSTile, useSSModals };