@flux-ui/components 3.0.0-next.28 → 3.0.0-next.29

package/dist/component/primitive/FilterBadge.vue.d.ts

@@ -0,0 +1,12 @@
+import { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly item: FluxFilterItem;
+    readonly value: FluxFilterValue;
+};
+declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    click: (args_0: MouseEvent) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (args_0: MouseEvent) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/component/primitive/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Anchor } from './Anchor.vue';
 export { default as AnchorPopup } from './AnchorPopup.vue';
+export { default as FilterBadge } from './FilterBadge.vue';
+export { default as FilterItem } from './FilterItem.vue';
 export { default as FilterOptionBase } from './FilterOptionBase.vue';
 export { default as SelectBase } from './SelectBase.vue';
 export { default as SliderBase } from './SliderBase.vue';

package/dist/index.css

@@ -258,7 +258,7 @@
   }
   h1 {
     color: var(--foreground-prominent);
-    font-size: 30px;
+    font-size: 27px;
   }
   h2 {
     color: var(--foreground-prominent);
@@ -280,8 +280,10 @@
   a:not([class]), a[class=""] {
     color: var(--primary-600);
     text-decoration: underline;
+    text-decoration-color: var(--primary-400);
+    text-decoration-skip: auto;
     text-decoration-thickness: 1px;
-    text-underline-offset: 3px;
+    text-underline-offset: 2px;
   }
   a:not([class]):hover, a[class=""]:hover {
     text-decoration: none;
@@ -541,32 +543,31 @@
 .base-pane > .base-pane-element:only-child,
 .base-pane > .form > .base-pane-element:only-child {
   border: 0;
-}.icon {
-  height: 1em;
-  width: 1em;
-  flex-shrink: 0;
-  font-size: 20px;
-  line-height: 1;
-  overflow: visible;
-}
-
-.font-awesome-icon {
-  display: inline-block;
-}
-
-.icon-boxed {
-  display: flex;
-  height: 1em;
-  width: 1em;
-  align-items: center;
-  flex-shrink: 0;
-  justify-content: center;
-  font-size: 42px;
-}
-.icon-boxed .icon {
-  font-size: 0.45em;
+}@layer flux-base {
+  .icon {
+    height: 1em;
+    width: 1em;
+    flex-shrink: 0;
+    font-size: 20px;
+    line-height: 1;
+    overflow: visible;
+  }
+  .font-awesome-icon {
+    display: inline-block;
+  }
+  .icon-boxed {
+    display: flex;
+    height: 1em;
+    width: 1em;
+    align-items: center;
+    flex-shrink: 0;
+    justify-content: center;
+    font-size: 42px;
+  }
+  .icon-boxed .icon {
+    font-size: 0.45em;
+  }
 }
-
 .icon-boxed-default {
   box-shadow: var(--shadow-sm);
 }
@@ -712,6 +713,12 @@
     margin-right: 6px;
     min-width: 42px;
   }
+  .badge:first-child {
+    margin-left: -6px;
+  }
+  .badge:last-child {
+    margin-right: -6px;
+  }
 }.action {
   height: 30px;
   width: 30px;
@@ -1789,6 +1796,7 @@
   color: var(--foreground-prominent);
   font-size: 13px;
   font-weight: 500;
+  font-variant-numeric: tabular-nums;
 }
 .badge:is(a) {
   color: var(--foreground-prominent);
@@ -1924,6 +1932,111 @@
 }
 
 .tag-warning {
+}.filter {
+  max-height: 50dvh;
+  max-width: 100%;
+  padding: 9px;
+  width: 270px;
+  overflow: auto;
+  scrollbar-width: none;
+  transition: height 150ms var(--deceleration-curve);
+  z-index: 0;
+}
+.filter::-webkit-scrollbar {
+  display: none;
+  height: 0;
+  width: 0;
+}
+.filter .menu > :where(.divider, .separator) {
+  margin: 3px -9px;
+}
+.filter .menu > .menu-group > .menu-sub-header {
+  top: 51px;
+}
+.filter .menu > .menu-group:has(.filter-search) > .menu-sub-header {
+  top: 105px;
+}
+.filter .menu .menu-item-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.filter .pane-body {
+  margin: -9px;
+}
+
+.filter-badge {
+  padding-left: 6px;
+  padding-right: 6px;
+  background: var(--primary-50);
+  border: 1px dashed var(--primary-300);
+  font-weight: 500;
+}
+.filter-badge .badge-label {
+  color: var(--primary-900);
+}
+
+.filter-button {
+  border: 1px solid var(--surface-stroke);
+  box-shadow: none;
+}
+.filter-button .badge {
+  border-radius: var(--radius-half);
+}
+.filter-button .button-icon {
+  color: var(--primary-700);
+  font-size: 16px;
+}
+
+.filter-header {
+  position: sticky;
+  margin: -9px -9px 3px;
+  padding: 9px;
+  top: -9px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--surface-stroke);
+  z-index: 2;
+}
+.filter-header:first-child {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+
+.filter-back {
+  flex-grow: 1;
+}
+
+.filter-reset {
+  width: 42px;
+  justify-content: center;
+}
+
+.filter-date-picker {
+  margin: -9px;
+}
+
+.filter-search {
+  position: sticky;
+  margin: -9px -9px 0;
+  padding: 9px;
+  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
+  z-index: 1;
+}
+
+.filter-header + .menu-group .filter-search {
+  top: 52px;
+}
+
+.filter-bar {
+  display: flex;
+  flex-flow: row nowrap;
+  flex-grow: 1;
+  gap: 15px;
+}
+
+.filter-bar-search {
+  max-width: 300px;
 }.menu {
   display: flex;
   flex-flow: column;
@@ -1976,7 +2089,10 @@
 }
 
 .menu-item-icon {
+  margin-left: 2px;
+  margin-right: 2px;
   color: var(--foreground-prominent);
+  font-size: 16px;
 }
 
 .menu-item-label {
@@ -2952,85 +3068,6 @@
 .toggle-input::after {
   transition: 210ms var(--swift-out);
   transition-property: background, border-color, color, opacity, scale, translate, outline-color, outline-offset;
-}.filter {
-  max-height: 50dvh;
-  max-width: 100%;
-  padding: 9px;
-  width: 300px;
-  overflow: auto;
-  scrollbar-width: none;
-  transition: height 150ms var(--deceleration-curve);
-  z-index: 0;
-}
-.filter::-webkit-scrollbar {
-  display: none;
-  height: 0;
-  width: 0;
-}
-.filter .menu > :where(.divider, .separator) {
-  margin: 3px -9px;
-}
-.filter .menu > .menu-group > .menu-sub-header {
-  top: 51px;
-}
-.filter .menu > .menu-group:has(.filter-search) > .menu-sub-header {
-  top: 105px;
-}
-.filter .menu .menu-item-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.filter .pane-body {
-  margin: -9px;
-}
-
-.filter-header {
-  position: sticky;
-  margin: -9px -9px 3px;
-  padding: 9px;
-  top: -9px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--surface-stroke);
-  z-index: 2;
-}
-.filter-header:first-child {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-}
-
-.filter-back {
-  flex-grow: 1;
-}
-
-.filter-reset {
-  width: 42px;
-  justify-content: center;
-}
-
-.filter-date-picker {
-  margin: -9px;
-}
-
-.filter-search {
-  position: sticky;
-  top: 52px;
-  margin: -9px -9px 0;
-  padding: 9px;
-  background: linear-gradient(to bottom, var(--surface) 75%, transparent);
-  z-index: 1;
-}
-
-.filter-bar {
-  display: flex;
-  flex-flow: row nowrap;
-  flex-grow: 1;
-  gap: 15px;
-}
-
-.filter-bar-search {
-  max-width: 300px;
 }.slider {
   position: relative;
   display: flex;
@@ -4663,7 +4700,8 @@ tfoot .table-cell {
 }
 
 .item-media > .icon {
-  font-size: 24px;
+  margin: 1px;
+  font-size: 20px;
 }
 
 .item-media > .icon-boxed {
@@ -5859,14 +5897,18 @@ tfoot .table-cell {
 
 .timeline-item-body {
   position: relative;
-  align-self: center;
+  display: flex;
   padding-top: 9px;
   padding-bottom: 9px;
+  align-items: flex-start;
+  align-self: center;
+  flex-flow: column;
+  gap: 15px;
 }
 
 .timeline-item-header {
   display: flex;
-  margin-bottom: 9px;
+  margin-bottom: -9px;
   flex-flow: column;
 }
 .timeline-item-header :is(strong) {