@antelopejs/dms 0.0.1

package/frontend-vue/layers/dms-ui/app/components/form/components/DatePicker.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts" generic="R extends boolean, M extends boolean">
+import { formatDate } from "#dms-core/app/utils/formatter";
+import type {
+  CalendarProps,
+  CalendarSlots,
+} from "@nuxt/ui/components/Calendar.vue";
+import { useForwardPropsEmits } from "reka-ui";
+import {
+  parseDate,
+  fromDate,
+  toCalendarDate,
+  type CalendarDate,
+} from "@internationalized/date";
+import { reactivePick } from "@vueuse/core";
+
+interface StrictDateRange {
+  start: CalendarDate;
+  end: CalendarDate;
+}
+
+interface StringDateRange {
+  start: string;
+  end: string;
+}
+
+interface NativeDateRange {
+  start: Date;
+  end: Date;
+}
+
+type DateValue = CalendarDate | StrictDateRange | string | null | undefined;
+
+type DatePickerProps = Omit<CalendarProps<R, M>, "modelValue">;
+
+const props = defineProps<DatePickerProps>();
+const emits = defineEmits<{
+  "update:modelValue": [
+    value: string | { start: string; end: string } | null | undefined,
+  ];
+  "update:placeholder": [date: CalendarDate];
+  "update:startValue": [date: CalendarDate | undefined];
+}>();
+defineSlots<CalendarSlots>();
+
+const { locale, t } = useI18n();
+
+const modelValue = defineModel<string | undefined | null>();
+
+function convertIsoStringToCalendarDate(value: string): CalendarDate {
+  return parseDate(value.split("T")[0]!);
+}
+
+function convertDateRangeValue(
+  rangeValue: StringDateRange | StrictDateRange | NativeDateRange,
+): StrictDateRange | undefined {
+  if (isString(rangeValue.start) && isString(rangeValue.end)) {
+    return {
+      start: convertIsoStringToCalendarDate(rangeValue.start),
+      end: convertIsoStringToCalendarDate(rangeValue.end),
+    };
+  }
+  if (rangeValue.start instanceof Date && rangeValue.end instanceof Date) {
+    return {
+      start: toCalendarDate(fromDate(rangeValue.start, "UTC")),
+      end: toCalendarDate(fromDate(rangeValue.end, "UTC")),
+    };
+  }
+  return undefined;
+}
+
+function isDateRangeValue(
+  value: unknown,
+): value is StringDateRange | StrictDateRange | NativeDateRange {
+  return (
+    isObject(value) && value !== null && "start" in value && "end" in value
+  );
+}
+
+function convertModelValue(value: DateValue): DateValue {
+  if (isString(value)) {
+    return convertIsoStringToCalendarDate(value);
+  }
+  if (isDateRangeValue(value)) {
+    return convertDateRangeValue(value) ?? value;
+  }
+  return value;
+}
+
+const convertedProps = computed(() => ({
+  ...props,
+  modelValue: convertModelValue(modelValue.value as DateValue),
+}));
+
+type EmitEvent = string;
+type EmitValue = unknown;
+
+const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
+  if (event === "update:modelValue" && value) {
+    if (
+      isObject(value) &&
+      "year" in value &&
+      "month" in value &&
+      "day" in value
+    ) {
+      const isoString = (value as unknown as CalendarDate).toString();
+      emits("update:modelValue", isoString);
+    } else if (isObject(value) && "start" in value && "end" in value) {
+      const dateRange = value as unknown as StrictDateRange;
+      const startIso = dateRange.start.toString();
+      const endIso = dateRange.end.toString();
+      emits("update:modelValue", { start: startIso, end: endIso });
+    } else {
+      emits("update:modelValue", value as string | null | undefined);
+    }
+  } else {
+    const forwardEvent = emits as (event: string, ...args: unknown[]) => void;
+    forwardEvent(event, value);
+  }
+};
+
+const forwarded = useForwardPropsEmits(
+  convertedProps as unknown as ComputedRef<CalendarProps<R, M>>,
+  wrappedEmits as typeof emits,
+);
+const buttonProps = reactivePick(props, "disabled");
+</script>
+
+<template>
+  <UPopover>
+    <UButton
+      :label="
+        modelValue
+          ? (formatDate(modelValue, locale) ?? undefined)
+          : t('dms.form.select_date')
+      "
+      :ui="{
+        label: modelValue ? 'text-default' : 'text-dimmed',
+      }"
+      v-bind="buttonProps"
+      variant="outline"
+      color="neutral"
+      trailing
+      trailing-icon="i-ph-caret-down"
+      block
+    />
+
+    <template #content>
+      <UCalendar v-bind="forwarded" />
+    </template>
+  </UPopover>
+</template>

package/frontend-vue/layers/dms-ui/app/components/form/components/DatePickerRange.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import DmsDatePicker from "./DatePicker.vue";
+
+interface DatePickerRangeProps {
+  minDate?: string;
+  maxDate?: string;
+  disabled?: boolean;
+}
+
+const props = defineProps<DatePickerRangeProps>();
+
+type RangeValue = [string | undefined, string | undefined] | undefined;
+
+const modelValue = defineModel<RangeValue>();
+
+const startValue = computed({
+  get: () => modelValue.value?.[0],
+  set: (value: string | undefined | null) => {
+    emitRange(value ?? undefined, endValue.value);
+  },
+});
+
+const endValue = computed({
+  get: () => modelValue.value?.[1],
+  set: (value: string | undefined | null) => {
+    emitRange(startValue.value, value ?? undefined);
+  },
+});
+
+function emitRange(start: string | undefined, end: string | undefined) {
+  if (!start && !end) {
+    modelValue.value = undefined;
+    return;
+  }
+  modelValue.value = [start, end];
+}
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <DmsDatePicker
+      v-model="startValue"
+      :min-date="props.minDate"
+      :max-date="endValue || props.maxDate"
+      :disabled="props.disabled"
+      class="flex-1"
+    />
+    <span class="text-dimmed shrink-0 text-sm">
+      {{ t("dms.table.between_separator") }}
+    </span>
+    <DmsDatePicker
+      v-model="endValue"
+      :min-date="startValue || props.minDate"
+      :max-date="props.maxDate"
+      :disabled="props.disabled"
+      class="flex-1"
+    />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/form/components/Display.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { isVNode } from "vue";
+
+interface DisplayProps {
+  modelValue?: unknown;
+  type?: string;
+  loading?: boolean;
+}
+
+const props = defineProps<DisplayProps>();
+
+const { getDataType } = useDataTypes();
+const { locale, t } = useI18n();
+
+const EMPTY_FALLBACK = "—";
+
+const dataType = computed(() =>
+  props.type ? getDataType(props.type) : undefined,
+);
+const dedicatedComponent = computed(() => dataType.value?.displayComponent);
+
+const isEmptyValue = (value: unknown): boolean => {
+  if (value === null || value === undefined || value === "") return true;
+  if (Array.isArray(value) && value.length === 0) return true;
+  return false;
+};
+
+const formattedValue = computed(() => {
+  if (isEmptyValue(props.modelValue)) return EMPTY_FALLBACK;
+  const formatter = dataType.value?.formatter?.default;
+  if (!formatter) return String(props.modelValue);
+  return formatter(props.modelValue, locale.value, props);
+});
+
+const isVNodeValue = computed(() => isVNode(formattedValue.value));
+</script>
+
+<template>
+  <USkeleton v-if="loading" class="h-9 w-full" />
+
+  <Component
+    :is="dedicatedComponent"
+    v-else-if="dedicatedComponent"
+    :model-value="modelValue"
+    v-bind="$attrs"
+  />
+
+  <div
+    v-else
+    class="text-default flex min-h-9 items-center py-1.5 text-sm"
+    :title="typeof formattedValue === 'string' ? formattedValue : undefined"
+  >
+    <component :is="formattedValue" v-if="isVNodeValue" />
+    <span v-else-if="formattedValue === EMPTY_FALLBACK" class="text-dimmed">
+      {{ t("dms.form.empty_value") }}
+    </span>
+    <span v-else>{{ formattedValue }}</span>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/form/components/DisplayColor.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+interface DisplayColorProps {
+  modelValue?: string | null;
+}
+
+const props = defineProps<DisplayColorProps>();
+const { t } = useI18n();
+
+const isEmpty = computed(
+  () =>
+    props.modelValue === undefined ||
+    props.modelValue === null ||
+    props.modelValue === "",
+);
+</script>
+
+<template>
+  <div class="text-default flex min-h-9 items-center gap-2 py-1.5 text-sm">
+    <span v-if="isEmpty" class="text-dimmed">
+      {{ t("dms.form.empty_value") }}
+    </span>
+    <template v-else>
+      <span
+        aria-hidden="true"
+        class="border-default size-5 rounded-md border"
+        :style="{ backgroundColor: modelValue ?? undefined }"
+      />
+      <span class="font-mono">{{ modelValue }}</span>
+    </template>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/form/components/DisplayFile.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import FilePreview from "../../table-view/FilePreview.vue";
+
+interface DisplayFileProps {
+  modelValue?: string | string[];
+  multiple?: boolean;
+  storage?: string;
+}
+
+const props = defineProps<DisplayFileProps>();
+const { t } = useI18n();
+
+const items = computed<string[]>(() => {
+  const value = props.modelValue;
+  if (!value) return [];
+  if (Array.isArray(value)) return value.filter(Boolean);
+  return [value];
+});
+
+const isEmpty = computed(() => items.value.length === 0);
+</script>
+
+<template>
+  <span v-if="isEmpty" class="text-dimmed py-1.5 text-sm">
+    {{ t("dms.form.empty_value") }}
+  </span>
+  <div v-else class="flex flex-col gap-1.5 py-1.5">
+    <FilePreview
+      v-for="resourceKey in items"
+      :key="resourceKey"
+      :resource-key="resourceKey"
+      :storage="storage"
+    />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/form/components/DisplayImage.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+interface DisplayImageProps {
+  modelValue?: ImageItemValue | ImageItemValue[] | null;
+  multiple?: boolean;
+  storage?: string;
+}
+
+const props = defineProps<DisplayImageProps>();
+const { t } = useI18n();
+const { getUrl, resolve } = useFileReadUrls(props.storage);
+
+const items = computed<ImageItemValue[]>(() => {
+  const value = props.modelValue;
+  if (!value) return [];
+  return Array.isArray(value) ? value : [value];
+});
+
+const isEmpty = computed(() => items.value.length === 0);
+
+watch(items, (value) => value.forEach((image) => resolve(image.key)), {
+  immediate: true,
+});
+</script>
+
+<template>
+  <span v-if="isEmpty" class="text-dimmed py-1.5 text-sm">
+    {{ t("dms.form.empty_value") }}
+  </span>
+  <div v-else class="flex flex-wrap gap-2 py-1.5">
+    <div
+      v-for="image in items"
+      :key="image.key"
+      class="bg-elevated relative size-20 overflow-hidden rounded-lg shadow-sm"
+      :class="{ 'ring-warning ring-2': image.principal }"
+      :title="image.alt"
+    >
+      <img
+        v-if="getUrl(image.key)"
+        :src="getUrl(image.key)"
+        :alt="image.alt ?? ''"
+        class="h-full w-full object-cover"
+      />
+      <span v-else class="flex h-full w-full items-center justify-center">
+        <UIcon name="i-lucide-image" class="text-dimmed size-5" />
+      </span>
+      <span
+        v-if="image.principal && multiple"
+        class="bg-warning absolute top-1 left-1 inline-flex items-center rounded-full p-0.5 text-white shadow-sm"
+      >
+        <UIcon name="i-lucide-star" class="size-3" />
+      </span>
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/form/components/DisplayPassword.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface DisplayPasswordProps {
+  modelValue?: string;
+}
+
+const props = defineProps<DisplayPasswordProps>();
+const { t } = useI18n();
+
+const PASSWORD_MASK = "••••••••";
+
+const isEmpty = computed(
+  () =>
+    props.modelValue === undefined ||
+    props.modelValue === null ||
+    props.modelValue === "",
+);
+</script>
+
+<template>
+  <div
+    class="text-default flex min-h-9 items-center py-1.5 font-mono text-sm tracking-widest"
+  >
+    <span v-if="isEmpty" class="text-dimmed">
+      {{ t("dms.form.empty_value") }}
+    </span>
+    <span v-else>{{ PASSWORD_MASK }}</span>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/form/components/DisplayRichText.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import DOMPurify from "isomorphic-dompurify";
+
+interface DisplayRichTextProps {
+  modelValue?: string;
+}
+
+const props = defineProps<DisplayRichTextProps>();
+const { t } = useI18n();
+
+const RICH_TEXT_PROSE_CLASSES =
+  "prose prose-neutral dark:prose-invert max-w-none text-sm [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:mb-4 [&_h1]:mt-6 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:mb-3 [&_h2]:mt-5 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:mb-2 [&_h3]:mt-4 [&_p]:leading-relaxed [&_a]:text-primary [&_a]:underline [&_ul]:list-disc [&_ul]:ml-6 [&_ul]:mb-3 [&_ol]:list-decimal [&_ol]:ml-6 [&_ol]:mb-3 [&_li]:mb-1 [&_blockquote]:border-l-4 [&_blockquote]:border-default [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted [&_blockquote]:my-4";
+
+const isEmpty = computed(() => {
+  const value = props.modelValue;
+  if (!value) return true;
+  return value.replace(/<[^>]*>/g, "").trim() === "";
+});
+
+const sanitizedHtml = computed(() =>
+  props.modelValue ? DOMPurify.sanitize(props.modelValue) : "",
+);
+</script>
+
+<template>
+  <span v-if="isEmpty" class="text-dimmed text-sm">
+    {{ t("dms.form.empty_value") }}
+  </span>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <div v-else :class="RICH_TEXT_PROSE_CLASSES" v-html="sanitizedHtml" />
+</template>