@jskit-ai/users-web 0.1.80 → 0.1.82

package/src/client/components/CrudAddEditScreen.vue

@@ -0,0 +1,186 @@
+<script setup>
+import { computed, unref } from "vue";
+
+const props = defineProps({
+  screen: {
+    type: Object,
+    required: true
+  },
+  resolveLookupItems: {
+    type: Function,
+    default: null
+  },
+  resolveLookupLoading: {
+    type: Function,
+    default: null
+  },
+  resolveLookupSearch: {
+    type: Function,
+    default: null
+  },
+  setLookupSearch: {
+    type: Function,
+    default: null
+  }
+});
+
+const formRuntime = computed(() => props.screen?.formRuntime || {});
+const addEdit = computed(() => props.screen?.addEdit || formRuntime.value?.addEdit || {});
+const formState = computed(() => props.screen?.formState || formRuntime.value?.form || {});
+const mode = computed(() => String(unref(props.screen?.mode) || "new").trim() || "new");
+const title = computed(() => String(unref(props.screen?.title) || "").trim());
+const subtitle = computed(() => String(unref(props.screen?.subtitle) || "").trim());
+const saveLabel = computed(() => String(unref(props.screen?.saveLabel) || "Save").trim() || "Save");
+const cancelTo = computed(() => unref(props.screen?.cancelTo) || "");
+
+function resolveFieldErrors(fieldKey) {
+  if (typeof props.screen?.resolveFieldErrors === "function") {
+    return props.screen.resolveFieldErrors(fieldKey);
+  }
+  if (typeof formRuntime.value?.resolveFieldErrors === "function") {
+    return formRuntime.value.resolveFieldErrors(fieldKey);
+  }
+  return [];
+}
+
+function resolveCancelTo(target = cancelTo.value) {
+  if (typeof props.screen?.resolveCancelTo === "function") {
+    return props.screen.resolveCancelTo(target);
+  }
+  return target || "";
+}
+</script>
+
+<template>
+  <section class="generated-ui-screen generated-ui-screen--operator ui-generator-add-edit-form d-flex flex-column ga-4">
+    <header class="ui-generator-add-edit-form__header">
+      <div class="ui-generator-add-edit-form__copy">
+        <h1 class="ui-generator-add-edit-form__title">{{ title }}</h1>
+        <p v-if="subtitle" class="text-body-2 text-medium-emphasis mb-0">{{ subtitle }}</p>
+      </div>
+      <div class="ui-generator-add-edit-form__actions">
+        <v-btn v-if="cancelTo" color="primary" variant="outlined" :to="resolveCancelTo(cancelTo)">Cancel</v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          :loading="addEdit.isSaving"
+          :disabled="addEdit.isSubmitDisabled"
+          @click="addEdit.submit"
+        >
+          {{ saveLabel }}
+        </v-btn>
+      </div>
+    </header>
+
+    <v-sheet rounded="lg" border class="ui-generator-add-edit-form__panel">
+      <div v-if="addEdit.loadError" class="ui-generator-add-edit-form__state">
+        <h2 class="text-h6 mb-2">Unable to load form</h2>
+        <p class="text-body-2 text-medium-emphasis mb-4">
+          {{ addEdit.loadError }}
+        </p>
+        <v-btn
+          v-if="addEdit.canRetryLoad"
+          color="primary"
+          variant="tonal"
+          :loading="addEdit.isFetching"
+          @click="addEdit.refresh"
+        >
+          Retry
+        </v-btn>
+      </div>
+      <template v-else-if="formRuntime.showFormSkeleton">
+        <div class="pa-4">
+          <v-skeleton-loader type="heading, text@2, article" />
+        </div>
+      </template>
+      <v-form v-else class="pa-4" @submit.prevent="addEdit.submit" novalidate>
+        <v-progress-linear v-if="addEdit.isRefetching" indeterminate class="mb-4" />
+        <v-row class="ui-generator-add-edit-form__fields">
+          <slot
+            name="fields"
+            :mode="mode"
+            :form-runtime="formRuntime"
+            :form-state="formState"
+            :add-edit="addEdit"
+            :resolve-field-errors="resolveFieldErrors"
+            :resolve-lookup-items="resolveLookupItems"
+            :resolve-lookup-loading="resolveLookupLoading"
+            :resolve-lookup-search="resolveLookupSearch"
+            :set-lookup-search="setLookupSearch"
+          />
+        </v-row>
+      </v-form>
+    </v-sheet>
+  </section>
+</template>
+
+<style scoped>
+.generated-ui-screen {
+  --generated-ui-screen-title-size: clamp(1.35rem, 2vw, 1.85rem);
+  --generated-ui-screen-state-padding: 2.5rem 1.25rem;
+}
+
+.generated-ui-screen--operator {
+  --generated-ui-screen-state-padding: 2rem 1rem;
+}
+
+.ui-generator-add-edit-form__header {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.ui-generator-add-edit-form__copy {
+  min-width: 0;
+}
+
+.ui-generator-add-edit-form__title {
+  font-size: var(--generated-ui-screen-title-size);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 0 0 0.35rem;
+}
+
+.ui-generator-add-edit-form__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.ui-generator-add-edit-form__panel {
+  overflow: hidden;
+}
+
+.ui-generator-add-edit-form__state {
+  margin-inline: auto;
+  max-width: 30rem;
+  padding: var(--generated-ui-screen-state-padding);
+  text-align: center;
+}
+
+.ui-generator-add-edit-form__fields :deep(.v-col) {
+  min-width: 0;
+}
+
+@media (max-width: 960px) {
+  .ui-generator-add-edit-form__header {
+    flex-direction: column;
+  }
+
+  .ui-generator-add-edit-form__actions {
+    width: 100%;
+  }
+
+  .ui-generator-add-edit-form__actions :deep(.v-btn) {
+    min-height: 48px;
+    flex: 1 1 10rem;
+  }
+
+  .ui-generator-add-edit-form__state :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
+</style>

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/CrudListFilterSurface.vue

@@ -0,0 +1,377 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useDisplay } from "vuetify";
+
+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">
+            <v-text-field
+              v-model="runtimeValues[filter.key].from"
+              :label="`${filter.label} from`"
+              type="date"
+              variant="outlined"
+              density="comfortable"
+              hide-details="auto"
+            />
+            <v-text-field
+              v-model="runtimeValues[filter.key].to"
+              :label="`${filter.label} to`"
+              type="date"
+              variant="outlined"
+              density="comfortable"
+              hide-details="auto"
+            />
+          </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>
+          <v-text-field
+            v-else-if="filter.type === 'date'"
+            v-model="runtimeValues[filter.key]"
+            :label="filter.label"
+            type="date"
+            clearable
+            variant="outlined"
+            density="comfortable"
+            hide-details="auto"
+            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">
+                <v-text-field
+                  v-model="runtimeValues[filter.key].from"
+                  :label="`${filter.label} from`"
+                  type="date"
+                  variant="outlined"
+                  density="comfortable"
+                  hide-details="auto"
+                />
+                <v-text-field
+                  v-model="runtimeValues[filter.key].to"
+                  :label="`${filter.label} to`"
+                  type="date"
+                  variant="outlined"
+                  density="comfortable"
+                  hide-details="auto"
+                />
+              </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>
+              <v-text-field
+                v-else-if="filter.type === 'date'"
+                v-model="runtimeValues[filter.key]"
+                :label="filter.label"
+                type="date"
+                clearable
+                variant="outlined"
+                density="comfortable"
+                hide-details="auto"
+              />
+            </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(13rem, 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));
+}
+
+.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>