@jskit-ai/http-web 0.1.1

package/src/client/components/CrudListBulkActionSurface.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
+
+const props = defineProps({
+  runtime: {
+    type: Object,
+    default: null
+  },
+  title: {
+    type: String,
+    default: "Selection"
+  }
+});
+
+const display = useDisplay();
+const isCompactLayout = computed(() => {
+  const displayName = String(display?.name?.value || "").trim().toLowerCase();
+  return displayName === "xs" || displayName === "sm";
+});
+const actions = computed(() => Array.isArray(props.runtime?.actions) ? props.runtime.actions : []);
+const selectedCount = computed(() => Number(props.runtime?.selectedCount?.value || 0));
+const shouldRender = computed(() =>
+  Boolean(props.runtime?.hasActions?.value) &&
+  Boolean(props.runtime?.hasSelection?.value) &&
+  selectedCount.value > 0
+);
+
+function clearSelection() {
+  props.runtime?.clearSelection?.();
+}
+
+function execute(action = {}) {
+  props.runtime?.execute?.(action);
+}
+
+function isActionDisabled(action = {}) {
+  return Boolean(props.runtime?.isActionDisabled?.(action));
+}
+
+function isActionExecuting(action = {}) {
+  return Boolean(props.runtime?.isActionExecuting?.(action));
+}
+</script>
+
+<template>
+  <section v-if="shouldRender" class="crud-list-bulk-action-surface">
+    <div class="crud-list-bulk-action-surface__summary">
+      <div class="crud-list-bulk-action-surface__copy">
+        <span class="text-overline text-medium-emphasis">{{ title }}</span>
+        <strong>{{ selectedCount }} selected</strong>
+      </div>
+      <v-btn size="small" variant="text" @click="clearSelection">Clear</v-btn>
+    </div>
+
+    <div v-if="!isCompactLayout" class="crud-list-bulk-action-surface__actions">
+      <v-btn
+        v-for="action in actions"
+        :key="action.key"
+        :color="action.color"
+        :variant="action.variant"
+        :prepend-icon="action.icon || undefined"
+        :disabled="isActionDisabled(action)"
+        :loading="isActionExecuting(action)"
+        @click="execute(action)"
+      >
+        {{ action.label }}
+      </v-btn>
+    </div>
+
+    <v-menu v-else location="bottom end">
+      <template #activator="{ props: menuProps }">
+        <v-btn v-bind="menuProps" color="primary" variant="tonal">Bulk actions</v-btn>
+      </template>
+      <v-list density="compact" min-width="180">
+        <v-list-item
+          v-for="action in actions"
+          :key="action.key"
+          :title="action.label"
+          :prepend-icon="action.icon || undefined"
+          :disabled="isActionDisabled(action)"
+          @click="execute(action)"
+        />
+      </v-list>
+    </v-menu>
+  </section>
+</template>
+
+<style scoped>
+.crud-list-bulk-action-surface {
+  align-items: center;
+  background: rgba(var(--v-theme-primary), 0.08);
+  border-block: 1px solid rgba(var(--v-theme-primary), 0.18);
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 0.75rem 1rem;
+}
+
+.crud-list-bulk-action-surface__summary,
+.crud-list-bulk-action-surface__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.crud-list-bulk-action-surface__copy {
+  display: grid;
+  gap: 0.1rem;
+  min-width: 0;
+}
+
+.crud-list-bulk-action-surface :deep(.v-btn) {
+  min-height: 48px;
+}
+
+@media (max-width: 640px) {
+  .crud-list-bulk-action-surface {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+</style>

package/src/client/components/CrudListDateFilterControl.vue

@@ -0,0 +1,188 @@
+<script setup>
+import { computed, nextTick, ref, useAttrs, useId } from "vue";
+import { useLocale } from "vuetify";
+import {
+  parseDateOnlyValue,
+  formatDateOnlyValue,
+  formatDateOnlyDisplay
+} from "../support/crudListDateFilterSupport.js";
+
+defineOptions({
+  inheritAttrs: false
+});
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  controlId: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: "Select date"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const attrs = useAttrs();
+const { current: currentLocale } = useLocale();
+const generatedId = useId();
+const menuOpen = ref(false);
+const textFieldRef = ref(null);
+
+const resolvedControlId = computed(() => props.controlId || `crud-list-date-${generatedId}`);
+const pickerId = computed(() => `${resolvedControlId.value}-picker`);
+const pickerValue = computed(() => parseDateOnlyValue(props.modelValue));
+const displayValue = computed(() => formatDateOnlyDisplay(props.modelValue, {
+  locale: currentLocale?.value
+}));
+const pickerTitle = computed(() => `${props.label} calendar`);
+
+function restoreFocus() {
+  void nextTick(() => {
+    textFieldRef.value?.focus?.();
+  });
+}
+
+function openMenu() {
+  if (props.disabled || props.readonly) {
+    return;
+  }
+  menuOpen.value = true;
+}
+
+function closeMenu() {
+  menuOpen.value = false;
+  restoreFocus();
+}
+
+function clearDate() {
+  if (props.disabled || props.readonly) {
+    return;
+  }
+  emit("update:modelValue", "");
+  closeMenu();
+}
+
+function selectDate(value) {
+  const nextValue = formatDateOnlyValue(value);
+  if (!nextValue) {
+    return;
+  }
+  emit("update:modelValue", nextValue);
+  closeMenu();
+}
+
+function handleActivatorKeydown(event) {
+  if (!["Enter", " ", "ArrowDown"].includes(event.key)) {
+    return;
+  }
+  event.preventDefault();
+  openMenu();
+}
+</script>
+
+<template>
+  <v-menu
+    v-model="menuOpen"
+    :close-on-content-click="false"
+    :open-on-click="false"
+    location="bottom start"
+    :offset="6"
+    min-width="0"
+  >
+    <template #activator="{ props: activatorProps }">
+      <v-text-field
+        v-bind="{ ...attrs, ...activatorProps }"
+        :id="resolvedControlId"
+        ref="textFieldRef"
+        :model-value="displayValue"
+        :label="label"
+        :placeholder="placeholder"
+        :aria-label="label"
+        :aria-controls="pickerId"
+        :aria-expanded="String(menuOpen)"
+        aria-haspopup="dialog"
+        :data-date-filter-control="resolvedControlId"
+        append-inner-icon="$calendar"
+        :disabled="disabled"
+        :clearable="Boolean(modelValue) && !disabled && !readonly"
+        persistent-clear
+        persistent-placeholder
+        readonly
+        inputmode="none"
+        variant="outlined"
+        density="comfortable"
+        hide-details="auto"
+        class="crud-list-date-filter-control"
+        @click:control="openMenu"
+        @click:append-inner="openMenu"
+        @click:clear.stop="clearDate"
+        @keydown="handleActivatorKeydown"
+      />
+    </template>
+
+    <v-card
+      :id="pickerId"
+      :aria-label="pickerTitle"
+      role="dialog"
+      class="crud-list-date-filter-control__picker"
+      @keydown.esc.stop.prevent="closeMenu"
+    >
+      <v-date-picker
+        :model-value="pickerValue"
+        :title="pickerTitle"
+        :header="label"
+        :disabled="disabled || readonly"
+        color="primary"
+        show-adjacent-months
+        width="100%"
+        @update:model-value="selectDate"
+      />
+      <v-divider />
+      <v-card-actions>
+        <v-btn
+          variant="text"
+          :disabled="disabled || readonly || !modelValue"
+          @click="clearDate"
+        >
+          Clear
+        </v-btn>
+        <v-spacer />
+        <v-btn color="primary" variant="text" @click="closeMenu">Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-menu>
+</template>
+
+<style scoped>
+.crud-list-date-filter-control {
+  min-width: 0;
+  width: 100%;
+}
+
+.crud-list-date-filter-control__picker {
+  max-width: calc(100vw - 2rem);
+  overflow: hidden;
+  width: 22rem;
+}
+
+.crud-list-date-filter-control__picker :deep(.v-date-picker) {
+  max-width: 100%;
+}
+</style>

package/src/client/components/CrudListFilterSurface.vue

@@ -0,0 +1,388 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useDisplay } from "vuetify";
+import CrudListDateFilterControl from "./CrudListDateFilterControl.vue";
+
+const props = defineProps({
+  filters: {
+    type: Object,
+    default: () => ({})
+  },
+  runtime: {
+    type: Object,
+    default: null
+  },
+  title: {
+    type: String,
+    default: "Filters"
+  }
+});
+
+const display = useDisplay();
+const sheetOpen = ref(false);
+
+const filterEntries = computed(() =>
+  Object.values(props.filters && typeof props.filters === "object" && !Array.isArray(props.filters)
+    ? props.filters
+    : {})
+    .filter((filter) => filter?.key && filter?.type)
+);
+const runtimeValues = computed(() => props.runtime?.values || {});
+const activeChips = computed(() => Array.isArray(props.runtime?.activeChips?.value) ? props.runtime.activeChips.value : []);
+const hasActiveFilters = computed(() => Boolean(props.runtime?.hasActiveFilters?.value));
+const shouldRender = computed(() => filterEntries.value.length > 0 && Boolean(props.runtime?.values));
+const isCompactLayout = computed(() => {
+  const displayName = String(display?.name?.value || "").trim().toLowerCase();
+  return displayName === "xs" || displayName === "sm";
+});
+
+function optionItems(filter = {}) {
+  return Array.isArray(filter.options) ? filter.options : [];
+}
+
+function placeholder(filter = {}, fallback = "") {
+  return String(filter?.ui?.placeholder || fallback || "").trim();
+}
+
+function clearChip(chip = {}) {
+  props.runtime?.clearChip?.(chip);
+}
+
+function clearFilters() {
+  props.runtime?.clearFilters?.();
+}
+</script>
+
+<template>
+  <section v-if="shouldRender" class="crud-list-filter-surface">
+    <div class="crud-list-filter-surface__summary">
+      <v-btn
+        v-if="isCompactLayout"
+        color="primary"
+        variant="tonal"
+        class="crud-list-filter-surface__open"
+        @click="sheetOpen = true"
+      >
+        {{ title }}
+        <v-chip v-if="activeChips.length > 0" class="ml-2" size="x-small" color="primary" variant="flat">
+          {{ activeChips.length }}
+        </v-chip>
+      </v-btn>
+
+      <div v-if="hasActiveFilters" class="crud-list-filter-surface__chips">
+        <v-chip
+          v-for="chip in activeChips"
+          :key="chip.id"
+          closable
+          size="small"
+          variant="tonal"
+          @click:close="clearChip(chip)"
+        >
+          {{ chip.label }}
+        </v-chip>
+        <v-btn size="small" variant="text" @click="clearFilters">Clear all</v-btn>
+      </div>
+    </div>
+
+    <v-sheet v-if="!isCompactLayout" rounded="lg" border class="crud-list-filter-surface__panel">
+      <div class="crud-list-filter-surface__controls">
+        <template v-for="filter in filterEntries" :key="filter.key">
+          <v-switch
+            v-if="filter.type === 'flag'"
+            v-model="runtimeValues[filter.key]"
+            :label="filter.label"
+            color="primary"
+            density="comfortable"
+            hide-details
+            class="crud-list-filter-surface__control"
+          />
+          <v-select
+            v-else-if="filter.type === 'enum' || filter.type === 'enumMany' || filter.type === 'presence'"
+            v-model="runtimeValues[filter.key]"
+            :items="optionItems(filter)"
+            :label="filter.label"
+            :placeholder="placeholder(filter)"
+            :multiple="filter.type === 'enumMany'"
+            :chips="filter.type === 'enumMany'"
+            :closable-chips="filter.type === 'enumMany'"
+            clearable
+            item-title="label"
+            item-value="value"
+            variant="outlined"
+            density="comfortable"
+            hide-details="auto"
+            class="crud-list-filter-surface__control"
+          />
+          <v-combobox
+            v-else-if="filter.type === 'recordIdMany'"
+            v-model="runtimeValues[filter.key]"
+            :label="filter.label"
+            :placeholder="placeholder(filter, 'Enter ids')"
+            multiple
+            chips
+            closable-chips
+            clearable
+            variant="outlined"
+            density="comfortable"
+            hide-details="auto"
+            class="crud-list-filter-surface__control"
+          />
+          <v-text-field
+            v-else-if="filter.type === 'recordId'"
+            v-model="runtimeValues[filter.key]"
+            :label="filter.label"
+            :placeholder="placeholder(filter, 'Enter id')"
+            clearable
+            variant="outlined"
+            density="comfortable"
+            hide-details="auto"
+            class="crud-list-filter-surface__control"
+          />
+          <div
+            v-else-if="filter.type === 'dateRange'"
+            class="crud-list-filter-surface__range crud-list-filter-surface__range--date"
+            role="group"
+            :aria-label="`${filter.label} date range`"
+            :data-filter-key="filter.key"
+            data-filter-type="date-range"
+          >
+            <CrudListDateFilterControl
+              v-model="runtimeValues[filter.key].from"
+              :label="`${filter.label} from`"
+              :control-id="`${filter.key}-from`"
+              :placeholder="placeholder(filter, 'Select start date')"
+            />
+            <CrudListDateFilterControl
+              v-model="runtimeValues[filter.key].to"
+              :label="`${filter.label} to`"
+              :control-id="`${filter.key}-to`"
+              :placeholder="placeholder(filter, 'Select end date')"
+            />
+          </div>
+          <div v-else-if="filter.type === 'numberRange'" class="crud-list-filter-surface__range">
+            <v-text-field
+              v-model="runtimeValues[filter.key].min"
+              :label="`${filter.label} min`"
+              type="number"
+              variant="outlined"
+              density="comfortable"
+              hide-details="auto"
+            />
+            <v-text-field
+              v-model="runtimeValues[filter.key].max"
+              :label="`${filter.label} max`"
+              type="number"
+              variant="outlined"
+              density="comfortable"
+              hide-details="auto"
+            />
+          </div>
+          <CrudListDateFilterControl
+            v-else-if="filter.type === 'date'"
+            v-model="runtimeValues[filter.key]"
+            :label="filter.label"
+            :control-id="filter.key"
+            :placeholder="placeholder(filter, 'Select date')"
+            class="crud-list-filter-surface__control"
+          />
+        </template>
+      </div>
+    </v-sheet>
+
+    <v-dialog v-model="sheetOpen" max-width="640" location="bottom">
+      <v-card rounded="lg" class="crud-list-filter-surface__sheet">
+        <v-card-title class="d-flex align-center justify-space-between">
+          <span>{{ title }}</span>
+          <v-btn variant="text" @click="sheetOpen = false">Close</v-btn>
+        </v-card-title>
+        <v-card-text>
+          <div class="crud-list-filter-surface__controls crud-list-filter-surface__controls--stacked">
+            <template v-for="filter in filterEntries" :key="filter.key">
+              <v-switch
+                v-if="filter.type === 'flag'"
+                v-model="runtimeValues[filter.key]"
+                :label="filter.label"
+                color="primary"
+                density="comfortable"
+                hide-details
+              />
+              <v-select
+                v-else-if="filter.type === 'enum' || filter.type === 'enumMany' || filter.type === 'presence'"
+                v-model="runtimeValues[filter.key]"
+                :items="optionItems(filter)"
+                :label="filter.label"
+                :placeholder="placeholder(filter)"
+                :multiple="filter.type === 'enumMany'"
+                :chips="filter.type === 'enumMany'"
+                :closable-chips="filter.type === 'enumMany'"
+                clearable
+                item-title="label"
+                item-value="value"
+                variant="outlined"
+                density="comfortable"
+                hide-details="auto"
+              />
+              <v-combobox
+                v-else-if="filter.type === 'recordIdMany'"
+                v-model="runtimeValues[filter.key]"
+                :label="filter.label"
+                :placeholder="placeholder(filter, 'Enter ids')"
+                multiple
+                chips
+                closable-chips
+                clearable
+                variant="outlined"
+                density="comfortable"
+                hide-details="auto"
+              />
+              <v-text-field
+                v-else-if="filter.type === 'recordId'"
+                v-model="runtimeValues[filter.key]"
+                :label="filter.label"
+                :placeholder="placeholder(filter, 'Enter id')"
+                clearable
+                variant="outlined"
+                density="comfortable"
+                hide-details="auto"
+              />
+              <div
+                v-else-if="filter.type === 'dateRange'"
+                class="crud-list-filter-surface__range crud-list-filter-surface__range--date"
+                role="group"
+                :aria-label="`${filter.label} date range`"
+                :data-filter-key="filter.key"
+                data-filter-type="date-range"
+              >
+                <CrudListDateFilterControl
+                  v-model="runtimeValues[filter.key].from"
+                  :label="`${filter.label} from`"
+                  :control-id="`${filter.key}-from`"
+                  :placeholder="placeholder(filter, 'Select start date')"
+                />
+                <CrudListDateFilterControl
+                  v-model="runtimeValues[filter.key].to"
+                  :label="`${filter.label} to`"
+                  :control-id="`${filter.key}-to`"
+                  :placeholder="placeholder(filter, 'Select end date')"
+                />
+              </div>
+              <div v-else-if="filter.type === 'numberRange'" class="crud-list-filter-surface__range">
+                <v-text-field
+                  v-model="runtimeValues[filter.key].min"
+                  :label="`${filter.label} min`"
+                  type="number"
+                  variant="outlined"
+                  density="comfortable"
+                  hide-details="auto"
+                />
+                <v-text-field
+                  v-model="runtimeValues[filter.key].max"
+                  :label="`${filter.label} max`"
+                  type="number"
+                  variant="outlined"
+                  density="comfortable"
+                  hide-details="auto"
+                />
+              </div>
+              <CrudListDateFilterControl
+                v-else-if="filter.type === 'date'"
+                v-model="runtimeValues[filter.key]"
+                :label="filter.label"
+                :control-id="filter.key"
+                :placeholder="placeholder(filter, 'Select date')"
+              />
+            </template>
+          </div>
+        </v-card-text>
+        <v-card-actions class="justify-space-between">
+          <v-btn variant="text" @click="clearFilters">Clear all</v-btn>
+          <v-btn color="primary" variant="flat" @click="sheetOpen = false">Apply</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </section>
+</template>
+
+<style scoped>
+.crud-list-filter-surface {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.crud-list-filter-surface__summary {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: space-between;
+}
+
+.crud-list-filter-surface__open {
+  min-height: 48px;
+}
+
+.crud-list-filter-surface__chips {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.crud-list-filter-surface__panel {
+  padding: 1rem;
+}
+
+.crud-list-filter-surface__controls {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+}
+
+.crud-list-filter-surface__controls--stacked {
+  grid-template-columns: 1fr;
+}
+
+.crud-list-filter-surface__control {
+  min-width: 0;
+}
+
+.crud-list-filter-surface__range {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  min-width: 0;
+}
+
+.crud-list-filter-surface__range--date {
+  grid-column: span 2;
+  grid-template-columns: repeat(2, minmax(14rem, 1fr));
+}
+
+.crud-list-filter-surface__controls--stacked .crud-list-filter-surface__range--date {
+  grid-column: auto;
+}
+
+.crud-list-filter-surface__sheet {
+  margin: 0.75rem;
+}
+
+.crud-list-filter-surface :deep(.v-field),
+.crud-list-filter-surface :deep(.v-btn),
+.crud-list-filter-surface :deep(.v-selection-control) {
+  min-height: 48px;
+}
+
+@media (max-width: 640px) {
+  .crud-list-filter-surface__summary {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .crud-list-filter-surface__range {
+    grid-template-columns: 1fr;
+  }
+}
+</style>