katalyst-tables 3.6.2 → 3.8.0

data/app/assets/stylesheets/katalyst/tables/_query.scss

@@ -1,142 +0,0 @@
-[data-controller="tables--query"] {
-  position: relative;
-
-  .query-input {
-    position: relative;
-    display: grid;
-    grid-template-areas: "input button";
-    grid-template-columns: 1fr auto;
-
-    [role="combobox"] {
-      grid-area: input;
-      background: transparent;
-      caret-color: black;
-      resize: none;
-    }
-
-    &[data-connected] [role="combobox"] {
-      color: transparent;
-    }
-
-    button {
-      grid-area: button;
-      flex: 0;
-    }
-
-    .highlight {
-      grid-area: input;
-      visibility: hidden;
-      border: 1px solid transparent;
-      color: black;
-      z-index: -1;
-      font-size: 1rem;
-      padding: 2px;
-
-      overflow-wrap: break-word;
-      white-space: pre-wrap;
-
-      .value {
-        color: #666666;
-      }
-    }
-
-    &[data-connected] .highlight {
-      visibility: visible;
-    }
-  }
-}
-
-.query-modal {
-  --suggestion-hover: rgba(0, 0, 0, 0.1);
-  --suggestion-selected: #888;
-
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  border: 1px solid rgba(0, 0, 0, 0.16);
-  box-shadow:
-    0 3px 6px rgba(0, 0, 0, 0.16),
-    0 3px 6px rgba(0, 0, 0, 0.23);
-  background: white;
-  border-radius: 4px;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.125s;
-  pointer-events: none;
-  display: grid;
-  grid-template-areas: "header" "content" "footer";
-  grid-template-rows: auto 1fr auto;
-
-  &[data-open] {
-    opacity: 1;
-    pointer-events: unset;
-  }
-
-  header {
-    grid-area: header;
-  }
-
-  .content {
-    grid-area: content;
-    padding-top: 0.5rem;
-  }
-
-  h4 {
-    padding-inline: 1rem;
-  }
-
-  ul {
-    margin-block: 0;
-    padding-inline-start: 0;
-    list-style: none;
-
-    li {
-      position: relative;
-      display: flex;
-      align-items: baseline;
-      padding-inline: 1rem;
-      padding-block: 0.125rem;
-
-      &[aria-selected="true"],
-      &:hover {
-        outline: none;
-        background: var(--suggestion-hover);
-      }
-
-      &[aria-selected="true"]::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 4px;
-        background: var(--suggestion-selected);
-      }
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .error {
-    background: #fff2f2;
-    border-bottom: 1px solid #fdd3d3;
-    padding: 0.5rem 1rem;
-
-    code {
-      font-weight: bold;
-    }
-  }
-
-  footer {
-    grid-area: footer;
-    display: flex;
-    justify-content: flex-start;
-    padding-inline: 1rem;
-    padding-block: 0.5rem;
-    border-top: 1px solid #d3d3d3;
-    font-size: small;
-  }
-}

data/app/assets/stylesheets/katalyst/tables/_select.scss

@@ -1,7 +0,0 @@
-:where(th.selection, td.selection) {
-  width: 2rem;
-
-  label {
-    display: block;
-  }
-}

data/app/assets/stylesheets/katalyst/tables/_table.scss

@@ -1,128 +0,0 @@
-@use "ordinal" as *;
-@use "select" as *;
-@use "typed-columns";
-
-$grey: #f0ecf3 !default;
-
-$table-header-color: transparent !default;
-$row-border-color: $grey !default;
-$row-height: 48px !default;
-$cell-spacing: 0.5rem !default;
-$tag-color: $grey !default;
-$on-tag-color: black !default;
-
-$width-small: 6rem !default;
-$width-medium: 12rem !default;
-$width-large: 16rem !default;
-
-table {
-  --row-height: #{$row-height};
-  --cell-spacing: #{$cell-spacing};
-  --table-header-color: #{$table-header-color};
-  --row-border-color: #{$row-border-color};
-  --tag-color: #{$tag-color};
-  --on-tag-color: #{$on-tag-color};
-
-  --width-small: #{$width-small};
-  --width-medium: #{$width-medium};
-  --width-large: #{$width-large};
-}
-
-table {
-  border: none;
-  table-layout: fixed;
-  border-collapse: collapse;
-  text-align: left;
-  width: 100%;
-
-  thead {
-    background: var(--table-header-color);
-  }
-
-  tr {
-    height: var(--row-height);
-    line-height: var(--row-height);
-  }
-
-  th,
-  td {
-    border: none;
-    box-shadow: inset 0px -1px 0px var(--row-border-color);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: top;
-    white-space: nowrap;
-    background-color: white;
-    padding-right: var(--cell-spacing);
-
-    &:last-child {
-      padding-right: 0;
-    }
-
-    > a {
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      text-decoration: none;
-    }
-
-    > img,
-    > a > img {
-      max-height: 3rem;
-      padding: 0;
-    }
-
-    > .trix-content {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  th {
-    font-weight: bold;
-
-    :where(&.width-s) {
-      width: var(--width-small);
-    }
-
-    :where(&.width-m) {
-      width: var(--width-medium);
-    }
-
-    :where(&.width-l) {
-      width: var(--width-large);
-    }
-  }
-
-  thead a.ascending:after,
-  [data-sort="asc"] a::after {
-    display: inline-block;
-    content: " ";
-    position: relative;
-    margin-left: 1rem;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M.541 0l11.125 12.573a.5.5 0 00.749 0L23.541 0h-23z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
-    background-size: 14px 14px;
-    height: 14px;
-    width: 14px;
-    top: 0;
-    transform: rotate(180deg);
-  }
-
-  thead a.descending:after,
-  [data-sort="desc"] a::after {
-    display: inline-block;
-    content: " ";
-    position: relative;
-    margin-left: 1rem;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M.541 0l11.125 12.573a.5.5 0 00.749 0L23.541 0h-23z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
-    background-size: 14px 14px;
-    height: 14px;
-    width: 14px;
-    top: 4px;
-  }
-
-  caption {
-    margin: 2rem 0;
-  }
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_boolean.scss

@@ -1,4 +0,0 @@
-// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
-:where(th.type-boolean, td.type-boolean) {
-  width: var(--width-small);
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_currency.scss

@@ -1,8 +0,0 @@
-// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
-:where(th.type-currency, td.type-currency) {
-  width: var(--width-small);
-}
-
-:where(thead th.type-currency, td.type-currency) {
-  text-align: right;
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_date.scss

@@ -1,4 +0,0 @@
-// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
-:where(th.type-date, td.type-date) {
-  width: var(--width-small);
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_datetime.scss

@@ -1,4 +0,0 @@
-// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
-:where(th.type-datetime, td.type-datetime) {
-  width: var(--width-medium);
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_enum.scss

@@ -1,19 +0,0 @@
-:where(th.type-enum, td.type-enum) {
-  width: var(--width-small);
-}
-
-:where(td.type-enum) {
-  // ensure ellipsis is the correct color
-  color: var(--on-tag-color);
-
-  small {
-    background: var(--tag-color);
-    border-radius: 0.25rem;
-    padding: 0.25rem;
-    font-size: small;
-  }
-}
-
-table td.type-enum {
-  text-overflow: unset;
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_index.scss

@@ -1,6 +0,0 @@
-@use "boolean";
-@use "currency";
-@use "date";
-@use "datetime";
-@use "enum";
-@use "number";

data/app/assets/stylesheets/katalyst/tables/typed-columns/_number.scss

@@ -1,8 +0,0 @@
-// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
-:where(th.type-number, td.type-number) {
-  width: var(--width-small);
-}
-
-:where(thead th.type-number, td.type-number) {
-  text-align: right;
-}