@inglorious/web 4.4.0 → 4.5.0

package/src/select/theme.css

@@ -1,133 +0,0 @@
-.iw-select {
-  .iw-select-control {
-    min-height: 2em;
-    border: 1px solid #ccc;
-    border-radius: 0.25em;
-    padding: 0.5em 0.75em;
-    background: white;
-    gap: 0.5em;
-
-    &:hover {
-      border-color: #999;
-    }
-
-    &.iw-select-control-open {
-      border-color: #007bff;
-      outline: 2px solid rgba(0, 123, 255, 0.25);
-    }
-
-    &.iw-select-control-disabled {
-      background: #f5f5f5;
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    &.iw-select-control-selection {
-      padding: 0.25em 0.75em;
-    }
-
-    .iw-select-placeholder {
-      color: #999;
-    }
-
-    .iw-select-multi-value {
-      gap: 0.25em;
-
-      .iw-select-multi-value-tag {
-        padding: 0.25em 0.5em;
-        background: #e9ecef;
-        border-radius: 0.25em;
-        gap: 0.25em;
-
-        .iw-select-multi-value-tag-label {
-          font-size: 0.75em;
-        }
-
-        .iw-select-multi-value-remove {
-          font-size: 1.2em;
-          line-height: 1;
-        }
-      }
-    }
-
-    .iw-select-clear,
-    .iw-select-arrow {
-      width: 1.2em;
-      height: 1.2em;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .iw-select-clear {
-      span {
-        font-size: 1.2em;
-        line-height: 1;
-      }
-    }
-
-    .iw-select-arrow {
-      transition: transform 0.2s;
-
-      span {
-        font-size: 0.75em;
-      }
-    }
-
-    &.iw-select-control-open {
-      .iw-select-arrow {
-        transform: rotate(180deg);
-      }
-    }
-  }
-  .iw-select-dropdown {
-    max-height: 18em;
-    overflow: hidden;
-    background: white;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-
-    .iw-select-dropdown-search {
-      padding: 0.5em 0.75em;
-      border: none;
-      border-bottom: 1px solid #eee;
-      outline: none;
-    }
-
-    .iw-select-dropdown-options {
-      max-height: 15em;
-      overflow-y: auto;
-
-      .iw-select-dropdown-options-option {
-        padding: 0.5em 0.75em;
-        gap: 0.5em;
-
-        &.iw-select-dropdown-options-option-disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-
-          input[type="checkbox"] {
-            cursor: not-allowed;
-          }
-        }
-      }
-
-      .iw-select-dropdown-options-option:hover,
-      .iw-select-dropdown-options-option-focused {
-        background: #f8f9fa;
-      }
-
-      .iw-select-dropdown-options-option-selected {
-        background: #e7f3ff;
-      }
-    }
-
-    .iw-select-loading,
-    .iw-select-no-options {
-      padding: 0.75em;
-      text-align: center;
-      color: #999;
-    }
-  }
-}

package/src/table/base.css

@@ -1,34 +0,0 @@
-.iw-table {
-  user-select: none;
-
-  .iw-table-header {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .iw-table-header-row {
-    display: flex;
-  }
-
-  .iw-table-header-column {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .iw-table-filter-input,
-  .iw-table-filter-select {
-    width: 100%;
-  }
-
-  .iw-table-searchbar {
-    width: 100%;
-  }
-
-  .iw-table-row {
-    display: flex;
-  }
-
-  .iw-table-footer-row {
-    display: flex;
-  }
-}

package/src/table/filters/date.js

@@ -1,42 +0,0 @@
-import { html } from "@inglorious/web"
-
-const INPUT_TYPE = {
-  date: "date",
-  time: "time",
-  datetime: "datetime-local",
-}
-
-export const dateFilter = {
-  render(entity, column, api) {
-    const filter = entity.filters[column.id] ?? {}
-
-    return html`<input
-        name=${`${column.id}Min`}
-        type=${INPUT_TYPE[column.filter.type]}
-        value=${entity.filters[column.id]}
-        @input=${(event) => {
-          const value = event.target.value
-          const formattedValue = value ? new Date(value).getTime() : null
-
-          api.notify(`#${entity.id}:filterChange`, {
-            columnId: column.id,
-            value: { ...filter, min: formattedValue },
-          })
-        }}
-      />
-      <input
-        name=${`${column.id}Max`}
-        type=${INPUT_TYPE[column.filter.type]}
-        value=${entity.filters[column.id]}
-        @input=${(event) => {
-          const value = event.target.value
-          const formattedValue = value ? new Date(value).getTime() : null
-
-          api.notify(`#${entity.id}:filterChange`, {
-            columnId: column.id,
-            value: { ...filter, max: formattedValue },
-          })
-        }}
-      />`
-  },
-}

package/src/table/filters/number.js

@@ -1,22 +0,0 @@
-import { html } from "@inglorious/web"
-
-export const numberFilter = {
-  render(entity, column, api) {
-    return html`<input
-      name=${column.id}
-      type="number"
-      placeholder=${column.filter.placeholder ?? "="}
-      value=${entity.filters[column.id]}
-      @input=${(event) => {
-        const value = event.target.value
-        const formattedValue = value ? Number(value) : null
-
-        api.notify(`#${entity.id}:filterChange`, {
-          columnId: column.id,
-          value: formattedValue,
-        })
-      }}
-      class="iw-table-cell-number"
-    />`
-  },
-}

package/src/table/filters/range.js

@@ -1,40 +0,0 @@
-import { html } from "@inglorious/web"
-
-export const rangeFilter = {
-  render(entity, column, api) {
-    const filter = entity.filters[column.id] ?? {}
-
-    return html`<input
-        name=${`${column.id}Min`}
-        type="number"
-        placeholder=${column.filter.placeholder ?? "≥"}
-        value=${filter.min}
-        @input=${(event) => {
-          const value = event.target.value
-          const formattedValue = value ? Number(value) : null
-
-          api.notify(`#${entity.id}:filterChange`, {
-            columnId: column.id,
-            value: { ...filter, min: formattedValue },
-          })
-        }}
-        class="iw-table-cell-number"
-      />
-      <input
-        name=${`${column.id}Max`}
-        type="number"
-        placeholder=${column.filter.placeholder ?? "≤"}
-        value=${filter.max}
-        @input=${(event) => {
-          const value = event.target.value
-          const formattedValue = value ? Number(value) : null
-
-          api.notify(`#${entity.id}:filterChange`, {
-            columnId: column.id,
-            value: { ...filter, max: formattedValue },
-          })
-        }}
-        class="iw-table-cell-number"
-      />`
-  },
-}

package/src/table/filters/select.js

@@ -1,34 +0,0 @@
-import { html } from "@inglorious/web"
-
-export const selectFilter = {
-  render(entity, column, api) {
-    return html`<select
-      name=${column.id}
-      ?multiple=${column.filter.isMultiple}
-      autocomplete="off"
-      value=${entity.filters[column.id]}
-      @change=${(event) => {
-        const value = event.target.value
-        const formattedValue = value ? format(value, column.type) : null
-
-        api.notify(`#${entity.id}:filterChange`, {
-          columnId: column.id,
-          value: formattedValue,
-        })
-      }}
-    >
-      ${column.filter.options.map(
-        (option) => html`<option value=${option}>${option}</option>`,
-      )}
-    </select>`
-  },
-}
-
-function format(value, type) {
-  if (type === "number") return Number(value)
-  if (type === "boolean")
-    return value === "true" ? true : value === "false" ? false : null
-  if (["date", "time", "datetime"].includes(type))
-    return new Date(value).getTime()
-  return value
-}

package/src/table/filters/text.js

@@ -1,22 +0,0 @@
-import { html } from "@inglorious/web"
-
-export const textFilter = {
-  render(entity, column, api) {
-    return html`<input
-      name=${column.id}
-      type="text"
-      placeholder=${column.filter.placeholder ?? "Contains..."}
-      autocomplete="off"
-      value=${entity.filters[column.id]}
-      @input=${(event) => {
-        const value = event.target.value
-        const formattedValue = value || null
-
-        api.notify(`#${entity.id}:filterChange`, {
-          columnId: column.id,
-          value: formattedValue,
-        })
-      }}
-    />`
-  },
-}

package/src/table/filters.js

@@ -1,24 +0,0 @@
-import { choose, html } from "@inglorious/web"
-
-import { dateFilter } from "./filters/date.js"
-import { numberFilter } from "./filters/number.js"
-import { rangeFilter } from "./filters/range.js"
-import { selectFilter } from "./filters/select.js"
-import { textFilter } from "./filters/text.js"
-
-export const filters = {
-  render(entity, column, api) {
-    return html`${choose(
-      column.filter.type,
-      [
-        ["number", () => numberFilter.render(entity, column, api)],
-        ["range", () => rangeFilter.render(entity, column, api)],
-        ["select", () => selectFilter.render(entity, column, api)],
-        ["date", () => dateFilter.render(entity, column, api)],
-        ["time", () => dateFilter.render(entity, column, api)],
-        ["datetime", () => dateFilter.render(entity, column, api)],
-      ],
-      () => textFilter.render(entity, column, api),
-    )}`
-  },
-}

package/src/table/index.js

@@ -1,7 +0,0 @@
-import { logic } from "./logic.js"
-import { rendering } from "./rendering.js"
-
-export const table = {
-  ...logic,
-  ...rendering,
-}