@ulu/frontend 0.1.0-beta.84 → 0.1.0-beta.85

package/scss/components/_table-sticky.scss

@@ -0,0 +1,185 @@
+////
+/// @group table-sticky
+/// For use with table-sticky plugin (vue) or other framework implementations, not output by default must be enabled.
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../element";
+
+
+// Used for function fallback
+$-fallbacks: (
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue}  box-shadow  [true] Box shadow for controls, defaults to element box-shadow
+
+$config: (
+  "box-shadow": true,
+  "ui-color-disabled": #6490af,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-table-sticky-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-table-sticky-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "table-sticky [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+/// Prints component styles
+/// @demo table-sticky
+/// @example scss
+///  @include ulu.component-table-sticky-styles();
+
+@mixin styles {
+  $prefix: selector.class("table-sticky");
+
+  #{ $prefix } {
+    position: relative; // For controls
+    width: 100%;
+    * {
+      box-sizing: border-box;
+    }
+  }
+  #{ $prefix }__display {
+    overflow-x: auto;
+    overflow-y: hidden;
+    // scroll-behavior: smooth;
+  }
+  #{ $prefix }__table {
+    // border-collapse: collapse;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+  #{ $prefix }__sticky-wrap {
+    position: sticky;
+    top: -1px;
+    left: 0;
+    width: 100%;
+    z-index: 2;
+    margin-bottom: 200px; // Distance from bottom of table to disable
+    margin-top: -200px; // Distance from bottom of table to disable
+  }
+  #{ $prefix }__sticky-wrap--first-column-header {
+    z-index: 4;
+  }
+  #{ $prefix }__sticky-wrap--controls {
+    margin-top: -52vh;
+    margin-bottom: 52vh;
+  }
+  #{ $prefix }__header-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+  }
+  #{ $prefix }__table--first-column-header,
+  #{ $prefix }__table--first-column {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: auto !important;
+  }
+  #{ $prefix }__table--first-column {
+    z-index: 3;
+  }
+  #{ $prefix }__table--header {
+    will-change: transform;
+  }
+  #{ $prefix }__hidden-visually {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+  // NOTE: The table caption needs to be positioned normally
+  // as display table-cell. Making absolute for hidden-visually 
+  // is causing chrome to add an anonymous cell to the table resulting in a 1px
+  // cell under the header. Which is messing up alignments. The only solution
+  // without removing the <caption> (not good for WCAG) is to position it at the 
+  // of the table so it doesn't affect the header alignments. Then cropping it to 
+  // a pixel and using negative margin to remove it's pixel from the flow beneath 
+  #{ $prefix }__caption {
+    margin-bottom: -1px;
+    height: 1px;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden;
+    display: none;
+  }
+  // Allow initiating scrolling by dragging first column
+  #{ $prefix }--can-scroll-right:not(#{ $prefix }--can-scroll-left) {
+    #{ $prefix }__table--first-column-header,
+    #{ $prefix }__table--first-column {
+      // pointer-events: none;
+      visibility: hidden;
+      // opacity: 0 !important;
+    }
+  }
+  #{ $prefix }__controls {
+    position: absolute;
+    top: 50vh;
+    right: 20px;
+  }
+  #{ $prefix }__controls-inner {
+    display: flex;
+  }
+  #{ $prefix }__control {
+    box-shadow: get("box-shadow");
+  }
+  #{ $prefix }__sort-button {
+    display: flex;
+    align-items: center;
+    font-weight: inherit;
+    font-style: inherit;
+    font-size: inherit;
+  }
+  #{ $prefix }__sort-button--focused {
+    outline: 2px auto Highlight;
+    outline: 2px auto -webkit-focus-ring-color;
+  }
+  #{ $prefix }__sort-icon {
+    margin-left: auto;
+    padding-left: 1em;
+    display: block;
+    opacity: 0.5;
+    .sort-active & {
+      opacity: 1;
+    }
+    .sort-ascending & {
+      #{ $prefix }__sort-icon-inner {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  #{ $prefix }__sort-icon-inner {
+    display: block;
+  }
+}
+
+

package/types/ui/index.d.ts

@@ -20,5 +20,5 @@ export * as printDetails from "./print-details.js";
 export * as scrollSlider from "./scroll-slider.js";
 export * as themeToggle from "./theme-toggle.js";
 export * as detailsGroup from "./details-group.js";
-declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_ui_index_ { }
+declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_ui_index_ { }
 //# sourceMappingURL=index.d.ts.map

package/types/utils/index.d.ts

@@ -6,5 +6,5 @@ export * as index from "./index.js";
 export * as pauseYoutubeVideo from "./pause-youtube-video.js";
 export * as fileSave from "./file-save.js";
 export * as fontAwesome from "./font-awesome.js";
-declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_utils_index_ { }
+declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_utils_index_ { }
 //# sourceMappingURL=index.d.ts.map