@jskit-ai/users-web 0.1.178-oldline.2 → 0.1.178

package/src/client/components/CrudAddEditScreen.vue

@@ -1,186 +0,0 @@
-<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

@@ -1,126 +0,0 @@
-<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

@@ -1,188 +0,0 @@
-<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>