nuxt-unified-ui 0.1.0

package/README.md

@@ -0,0 +1,19 @@
+# Unified Nuxt UI
+
+A reuseable Nuxt layer which integrates Nuxt UI and some other useful libraries into your Nuxt application.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+bun i
+```
+
+## Development Server
+
+Start the development server on http://localhost:8080
+
+```bash
+bun dev
+```

package/app/app.config.js

@@ -0,0 +1,49 @@
+
+
+export default defineAppConfig({
+  ui: {
+
+    badge: {
+      defaultVariants: {
+        color: 'neutral',
+      },
+    },
+
+    button: {
+      defaultVariants: {
+        color: 'neutral',
+      },
+    },
+
+    calendar: {
+      defaultVariants: {
+        color: 'neutral',
+      },
+    },
+
+    card: {
+      slots: {
+        body: 'p-3 sm:p-3',
+      },
+    },
+
+    input: {
+      defaultVariants: {
+        color: 'neutral',
+      },
+    },
+
+    select: {
+      defaultVariants: {
+        color: 'neutral',
+      },
+    },
+
+    tabs: {
+      defaultVariants: {
+        color: 'neutral',
+      },
+    },
+
+  },
+});

package/app/assets/css/main.css

@@ -0,0 +1,24 @@
+@import "tailwindcss" source("../../..");
+@import "@nuxt/ui";
+
+
+/* localization */
+
+@utility rtl {
+  direction: rtl;
+}
+
+@utility ltr {
+  direction: ltr;
+}
+
+
+/* fixes */
+
+body {
+  @apply overflow-y-auto! ps-0!;
+}
+
+table thead tr th {
+  @apply text-start whitespace-nowrap;
+}

package/app/components/un-form.vue

@@ -0,0 +1,67 @@
+<script setup>
+
+/* interface */
+
+const props = defineProps({
+  target: Object,
+  fields: Array,
+});
+
+
+/* elements */
+
+import FormElementText from '../elements/form-element-text.vue';
+import FormElementSelect from '../elements/form-element-select.vue';
+import FormElementSeries from '../elements/form-element-series.vue';
+import FormElementCheckbox from '../elements/form-element-checkbox.vue';
+import FormElementDate from '../elements/form-element-date.vue';
+
+
+const elementsMap = {
+  'text': FormElementText,
+  'select': FormElementSelect,
+  'series': FormElementSeries,
+  'date': FormElementDate,
+  'checkbox': FormElementCheckbox,
+};
+
+
+/* v-if */
+
+import { matches } from 'unified-mongo-filter';
+
+const filteredFields = computed(() => {
+  return props.fields?.filter(it =>
+    !it.vIf || matches(it.vIf, props.target)
+  );
+});
+
+</script>
+
+
+<template>
+  <div class="grid grid-cols-12 gap-3">
+    <div
+      v-for="field of filteredFields" :key="field.key"
+      :class="{
+        'col-span-12': field.width === 12 || !field.width,
+        'col-span-11': field.width === 11,
+        'col-span-10': field.width === 10,
+        'col-span-9': field.width === 9,
+        'col-span-8': field.width === 8,
+        'col-span-7': field.width === 7,
+        'col-span-6': field.width === 6,
+        'col-span-5': field.width === 5,
+        'col-span-4': field.width === 4,
+        'col-span-3': field.width === 3,
+        'col-span-2': field.width === 2,
+        'col-span-1': field.width === 1,
+      }">
+      <component
+        :is="elementsMap[field.identifier]"
+        :field="field"
+        v-model="props.target[field.key]"
+      />
+    </div>
+  </div>
+</template>

package/app/components/un-spinner.vue

@@ -0,0 +1,6 @@
+<template>
+  <u-icon
+    name="lucide:loader-circle"
+    class="animate-spin"
+  />
+</template>

package/app/components/un-typography.vue

@@ -0,0 +1,93 @@
+<script setup>
+
+/* interface */
+
+const props = defineProps({
+  icon: {
+    type: String,
+  },
+  iconClasses: {
+    type: String,
+  },
+  title: {
+    type: String,
+  },
+  titleClasses: {
+    type: String,
+  },
+  subtitle: {
+    type: String,
+  },
+  subtitleClasses: {
+    type: String,
+  },
+  text: {
+    type: String,
+  },
+  textClasses: {
+    type: String,
+  },
+});
+
+const slots = useSlots();
+
+
+/* flags */
+
+const shouldShow = computed(() => {
+  return props.icon || props.title || props.subtitle || props.text || slots.append;
+});
+
+</script>
+
+
+<template>
+  <div v-if="shouldShow">
+
+    <div v-if="props.title || props.subtitle || props.icon || slots.append" class="flex items-start">
+      <div v-if="props.title || props.icon" class="flex items-center" style="gap: 0.5em;">
+        <u-icon
+          v-if="props.icon"
+          :name="props.icon"
+          :class="props.iconClasses"
+          style="width: 1.3em; height: 1.3em; flex-shrink: 0; flex-grow: 0;"
+        />
+        <h1
+          v-if="props.title"
+          class="font-medium"
+          :class="props.titleClasses"
+          style="font-size: 1.3em;">
+          {{ props.title }}
+        </h1>
+      </div>
+      <template v-if="$slots.append">
+        <div class="mt-1 ms-auto">
+          <slot name="append" />
+        </div>
+      </template>
+    </div>
+
+    <h2
+      v-if="props.subtitle"
+      class="font-light"
+      :class="props.subtitleClasses"
+      style="font-size: 0.9em;"
+      :style="{
+        marginInlineStart: props.icon ? '2em' : '0',
+      }">
+      {{ props.subtitle }}
+    </h2>
+
+    <p
+      v-if="props.text"
+      :class="[
+        {
+          'mt-2': props.title || props.subtitle,
+        },
+        props.textClasses
+      ]">
+      {{ props.text }}
+    </p>
+
+  </div>  
+</template>

package/app/composables/use-form.ts

@@ -0,0 +1,30 @@
+import { UnForm } from '#components';
+
+
+interface IOptions {
+  target?: MaybeRefOrGetter<any>;
+  fields: MaybeRefOrGetter<any[]>;
+}
+
+export function useForm(options: IOptions) {
+
+  const formData: Ref<any> = toRef(options.target || {});
+  const formFields = computed(() => toValue(options.fields) || []);
+
+  const FormTag = defineComponent({
+    setup() {
+      return () => {
+        return h(UnForm, {
+          target: toValue(formData),
+          fields: toValue(formFields),
+        });
+      };
+    },
+  });
+
+  return {
+    form: formData,
+    formTag: FormTag,
+  };
+
+}

package/app/dialogs/choice-picker-dialog.vue

@@ -0,0 +1,94 @@
+<script setup>
+
+/* interface */
+
+const props = defineProps({
+  icon: {
+    type: String,
+  },
+  title: {
+    type: String,
+  },
+  subtitle: {
+    type: String,
+  },
+  text: {
+    type: String,
+  },
+  startButtons: {
+    type: Array,
+    default: () => [
+      {
+        label: 'Submit',
+        value: true,
+      }
+    ],
+  },
+  endButtons: {
+    type: Array,
+    default: () => [
+      {
+        variant: 'ghost',
+        label: 'Cancel',
+        value: false,
+      }
+    ],
+  },
+});
+
+const emit = defineEmits([
+  'close',
+]);
+
+
+/* actions */
+
+async function handleButtonClick(button) {
+
+  if (button.onClick) {
+    await button.onClick(button.value);
+  }
+
+  emit('close', button.value);
+
+}
+
+</script>
+
+
+<template>
+  <u-modal @update:open="!$event && emit('close')">
+    <template #content>
+      <u-card>
+        
+        <un-typography
+          :icon="props.icon"
+          :title="props.title"
+          :subtitle="props.subtitle"
+          :text="props.text"
+        />
+
+        <div class="flex items-end gap-2 mt-4">
+
+          <u-button
+            v-for="button of props.startButtons" :key="button.value || button.label || button.icon"
+            v-bind="radOmit(button, [ 'value', 'onClick' ])"
+            loading-auto
+            @click="handleButtonClick(button)"
+          />
+
+          <div class="grow" />
+
+          <u-button
+            v-for="button of props.endButtons" :key="button.value || button.label || button.icon"
+            v-bind="radOmit(button, [ 'value', 'onClick' ])"
+            loading-auto
+            @click="handleButtonClick(button)"
+          />
+
+        </div>
+
+      </u-card>
+    </template>
+  </u-modal>
+</template>

package/app/dialogs/form-picker-dialog.vue

@@ -0,0 +1,101 @@
+<script setup>
+
+/* interface */
+
+const props = defineProps({
+  icon: {
+    type: String,
+  },
+  title: {
+    type: String,
+  },
+  subtitle: {
+    type: String,
+  },
+  text: {
+    type: String,
+  },
+  fields: {
+    type: Array,
+    required: true,
+  },
+  initialForm: {
+    type: Object,
+  },
+  submitButton: {
+    type: Object,
+  },
+  cancelButton: {
+    type: Object,
+  },
+});
+
+const emit = defineEmits([
+  'close',
+]);
+
+
+/* form */
+
+const { form, formTag } = useForm({
+  target: !props.initialForm ? undefined : JSON.parse(JSON.stringify(props.initialForm)),
+  fields: () => props.fields,
+});
+
+
+/* actions */
+
+async function handleSubmit() {
+
+  if (props.submitButton?.onClick) {
+    await props.submitButton?.onClick(form.value);
+  }
+
+  emit('close', form.value);
+
+}
+
+</script>
+
+
+<template>
+  <u-modal @update:open="!$event && emit('close')">
+    <template #content>
+      <u-card>
+        
+        <un-typography
+          :icon="props.icon"
+          :title="props.title"
+          :subtitle="props.subtitle"
+          :text="props.text"
+        />
+
+        <form-tag
+          class="mt-4"          
+        />
+
+        <div class="flex items-end gap-2 mt-4">
+
+          <u-button
+            label="Submit"
+            v-bind="radOmit(props.submitButton, [ 'onClick' ])"
+            loading-auto
+            @click="handleSubmit()"
+          />
+
+          <div class="grow" />
+
+          <u-button
+            variant="ghost"
+            label="Cancel"
+            v-bind="radOmit(props.cancelButton, [ 'onClick' ])"
+            loading-auto
+            @click="emit('close')"
+          />
+
+        </div>
+
+      </u-card>
+    </template>
+  </u-modal>
+</template>

package/app/elements/form-element-checkbox.vue

@@ -0,0 +1,22 @@
+<script setup>
+
+/* interface */
+
+const props = defineProps({
+  field: Object,
+});
+
+const modelValue = defineModel();
+
+</script>
+
+
+<template>
+  <u-form-field v-bind="radPick(props.field, [ 'fieldLabel' ])">
+    <u-checkbox
+      class="w-full"
+      v-bind="radOmit(props.field, [ 'key', 'identifier', 'fieldLabel' ])"
+      v-model="modelValue"
+    />
+  </u-form-field>
+</template>

package/app/elements/form-element-date.vue

@@ -0,0 +1,70 @@
+<script setup>
+
+/* interface */
+
+const props = defineProps({
+  field: Object,
+});
+
+const modelValue = defineModel();
+
+
+/* dates */
+
+import { CalendarDate } from '@internationalized/date';
+
+
+const internalModel = computed({
+  get: () => {
+    
+    if (!modelValue.value) {
+      return null;
+    }
+
+    const date = new Date(modelValue.value);
+
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+
+  },
+  set: v => {
+    modelValue.value = parseDate(String(v), 'YYYY-MM-DD');
+  },
+});
+
+
+const inputTitle = computed(() => {
+
+  if (!modelValue.value) {
+    return '';
+  }
+
+  return formatDate(modelValue.value, 'YYYY-MM-DD');
+
+});
+
+</script>
+
+
+<template>
+  <u-popover>
+
+    <u-form-field v-bind="radPick(props.field, [ 'label' ])">
+      <u-input
+        class="w-full"
+        v-bind="radOmit(props.field, [ 'key', 'identifier', 'label' ])"
+        readonly
+        :model-value="inputTitle"
+      />
+    </u-form-field>
+
+    <template #content>
+
+      <u-calendar
+        class="ltr p-2 [&_th]:text-center!"
+        v-model="internalModel"
+      />
+
+    </template>
+
+  </u-popover>
+</template>

package/app/elements/form-element-select.vue

@@ -0,0 +1,22 @@
+<script setup>
+
+/* interface */
+
+const props = defineProps({
+  field: Object,
+});
+
+const modelValue = defineModel();
+
+</script>
+
+
+<template>
+  <u-form-field v-bind="radPick(props.field, [ 'label' ])">
+    <u-select
+      class="w-full"
+      v-bind="radOmit(props.field, [ 'key', 'identifier', 'label' ])"
+      v-model="modelValue"
+    />
+  </u-form-field>
+</template>

package/app/elements/form-element-series.vue

@@ -0,0 +1,153 @@
+<script setup>
+
+/* interface */
+
+const props = defineProps({
+  field: Object,
+});
+
+const modelValue = defineModel();
+
+
+/* actions */
+
+function handleAddItem() {
+  modelValue.value = [
+    ...(Array.isArray(modelValue.value) ? modelValue.value : []),
+    JSON.parse(JSON.stringify( props.field.itemBase ?? {} )),
+  ];
+}
+
+function handleDuplicateItem(index) {
+  modelValue.value = [
+    ...(modelValue.value.slice(0, index + 1)),
+    {
+      ...modelValue.value[index],
+      _id: undefined,
+    },
+    ...(modelValue.value.slice(index + 1)),
+  ];
+}
+
+function handleDeleteItem(index) {
+  modelValue.value = modelValue.value.filter((_, i) => i !== index);
+}
+
+function handleMoveItem(index, direction) {
+
+  const items = [ ...modelValue.value ];
+  const poppedItem = items.splice(index, 1)[0];
+
+  items.splice(index + direction, 0, poppedItem);
+
+  modelValue.value = items;
+
+}
+
+</script>
+
+
+<template>
+  <div class="border border-default rounded">
+
+    <label class="text-sm flex items-center px-2 py-1 border-b border-default">
+
+      <span>
+        {{ props.field.label }}
+      </span>
+
+      <span class="text-xs ms-1">
+        ({{ (modelValue?.length > 0) ? (`${modelValue.length} Items`) : ('None') }})
+      </span>
+
+      <u-button
+        variant="soft"
+        size="xs"
+        icon="i-lucide-plus"
+        label="New Item"
+        class="ms-3"
+        @click="handleAddItem()"
+      />
+
+    </label>
+
+    <template v-if="!modelValue || !(modelValue.length > 0)">
+      <p class="text-xs text-center py-6">
+        No items added yet. Click on "New Item" to add one.
+      </p>
+    </template>
+
+    <div
+      v-else
+      class="p-2 grid gap-2 bg-stone-100"
+      :class="{
+        'grid-cols-1': props.field.seriesColumns === 1 || !props.field.seriesColumns,
+        'grid-cols-2': props.field.seriesColumns === 2,
+        'grid-cols-3': props.field.seriesColumns === 3,
+        'grid-cols-4': props.field.seriesColumns === 4,
+        'grid-cols-5': props.field.seriesColumns === 5,
+        'grid-cols-6': props.field.seriesColumns === 6,
+      }">
+      <div
+        v-for="(item, index) of modelValue" :key="index"
+        class="relative group">
+
+        <un-form
+          :target="item"
+          :fields="props.field.itemFields"
+          class="p-2 bg-default border border-default rounded"
+        />
+
+        <div
+          class="
+            absolute top-2 end-2
+            hidden
+            group-hover:flex group-hover:gap-1
+          ">
+
+          <u-tooltip text="Duplicate">
+            <u-button
+              variant="soft"
+              icon="i-lucide-copy"
+              size="xs"
+              @click="handleDuplicateItem(index)"
+            />
+          </u-tooltip>
+
+          <u-tooltip text="Move Back">
+            <u-button
+              v-if="index > 0"
+              variant="soft"
+              icon="i-lucide-chevron-left"
+              size="xs"
+              @click="handleMoveItem(index, -1)"
+            />
+          </u-tooltip>
+
+          <u-tooltip text="Move Forward">
+            <u-button
+              v-if="index < modelValue.length - 1"
+              variant="soft"
+              icon="i-lucide-chevron-right"
+              size="xs"
+              @click="handleMoveItem(index, 1)"
+            />
+          </u-tooltip>
+
+          <u-tooltip text="Delete">
+            <u-button
+              variant="soft"
+              color="error"
+              icon="i-lucide-trash"
+              size="xs"
+              @click="handleDeleteItem(index)"
+            />
+          </u-tooltip>
+
+        </div>
+
+      </div>
+    </div>
+
+    </div>
+</template>

package/app/elements/form-element-text.vue

@@ -0,0 +1,22 @@
+<script setup>
+
+/* interface */
+
+const props = defineProps({
+  field: Object,
+});
+
+const modelValue = defineModel();
+
+</script>
+
+
+<template>
+  <u-form-field v-bind="radPick(props.field, [ 'label' ])">
+    <u-input
+      class="w-full"
+      v-bind="radOmit(props.field, [ 'key', 'identifier', 'label' ])"
+      v-model="modelValue"
+    />
+  </u-form-field>
+</template>

package/app/utils/format-date.ts

@@ -0,0 +1,36 @@
+import { format as tempoFormat, parse } from '@formkit/tempo';
+
+
+export function formatDate(timestamp: number | string, format = 'YYYY/MM/DD HH:mm', locale = 'en-US', timestampFormat?: string) {
+
+  if (!timestampFormat) {
+    try {
+      return tempoFormat(new Date(Number(timestamp)), format, locale);
+    }
+    catch {
+      return '';
+    }
+  }
+  else {
+    try {
+      return tempoFormat(
+        parse(String(timestamp), timestampFormat, locale),
+        format,
+        locale,
+      );
+    }
+    catch {
+      return '';
+    }
+  }
+
+}
+
+export function parseDate(date: string, format: string, locale = 'en-US') {
+  try {
+    return parse(date, format, locale).valueOf();
+  }
+  catch {
+    return 0;
+  }
+}

package/app/utils/launch-choice-picker-dialog.ts

@@ -0,0 +1,19 @@
+import type { ButtonProps } from '@nuxt/ui';
+import ChoicePickerDialog from '../dialogs/choice-picker-dialog.vue';
+
+
+interface IOptions {
+  icon?: string;
+  title?: string;
+  subtitle?: string;
+  text?: string;
+  startButtons?: ( ButtonProps & { value?: string } )[];
+  endButtons?: ( ButtonProps & { value?: string } )[];
+}
+
+export function launchChoicePickerDialog(options: IOptions) {
+  return launchDialog({
+    component: ChoicePickerDialog,
+    props: options,
+  });
+}

package/app/utils/launch-dialog.ts

@@ -0,0 +1,11 @@
+
+
+export async function launchDialog(options: { component: any, props: any }) {
+
+  const modal = useOverlay().create(options.component, {
+    destroyOnClose: true,
+  });
+
+  return await modal.open(options.props).result;
+
+}

package/app/utils/launch-form-picker-dialog.ts

@@ -0,0 +1,21 @@
+import type { ButtonProps } from '@nuxt/ui';
+import FormPickerDialog from '../dialogs/form-picker-dialog.vue';
+
+
+interface IOptions {
+  icon?: string;
+  title?: string;
+  subtitle?: string;
+  text?: string;
+  fields: any[];
+  initialForm?: any;
+  submitButton?: ButtonProps;
+  cancelButton?: ButtonProps;
+}
+
+export function launchFormPickerDialog(options: IOptions) {
+  return launchDialog({
+    component: FormPickerDialog,
+    props: options,
+  });
+}

package/app/utils/launch-toast.ts

@@ -0,0 +1,26 @@
+
+
+type IToast = Parameters<ReturnType<typeof useToast>['add']>['0'];
+type ITypedToast = Omit<IToast, 'icon' | 'color'>;
+
+
+export function toast(options: IToast) {
+  useToast().add(options);
+}
+
+
+export function toastSuccess(options: ITypedToast) {
+  toast({
+    icon: 'lucide:check',
+    color: 'success',
+    ...options,
+  });
+}
+
+export function toastError(options: ITypedToast) {
+  toast({
+    icon: 'lucide:circle-alert',
+    color: 'error',
+    ...options,
+  });
+}

package/app/utils/path-relative.ts

@@ -0,0 +1,6 @@
+import { fileURLToPath } from 'node:url';
+
+
+export function pathRelativeToBase(base: string, path: string) {
+  return fileURLToPath(new URL(path, base));
+}

package/modules/radash.ts

@@ -0,0 +1,23 @@
+import { defineNuxtModule, addImports } from "@nuxt/kit";
+import * as radash from "radash";
+
+
+export default defineNuxtModule({
+  meta: {
+    name: "nuxt-radash",
+  },
+  setup() {
+    for (const name of Object.keys(radash)) {
+
+      const prefix = 'rad';
+      const as = `${prefix}${radash.pascal(name)}`;
+
+      addImports({
+        name,
+        as,
+        from: "radash",
+      });
+
+    }
+  },
+});

package/nuxt.config.js

@@ -0,0 +1,26 @@
+import { pathRelativeToBase } from './app/utils/path-relative';
+
+
+export default defineNuxtConfig({
+
+  compatibilityDate: 'latest',
+  devtools: { enabled: false },
+
+  experimental: {
+    typedPages: true,
+  },
+
+  modules: [
+    '@vueuse/nuxt',
+    '@nuxt/ui',
+  ],
+
+  css: [
+    pathRelativeToBase(import.meta.url, './app/assets/css/main.css'),
+  ],
+
+  ui: {
+    colorMode: false,
+  },
+
+});

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "nuxt-unified-ui",
+  "type": "module",
+  "version": "0.1.0",
+  "main": "./nuxt.config.js",
+  "files": [
+    "nuxt.config.js",
+    "package.json",
+    "app",
+    "layers",
+    "modules"
+  ],
+  "dependencies": {
+    "@formkit/tempo": "0.1.2",
+    "@iconify-json/lucide": "1.2.72",
+    "@nuxt/kit": "4.2.1",
+    "@nuxt/ui": "4.1.0",
+    "@vueuse/core": "14.0.0",
+    "@vueuse/nuxt": "14.0.0",
+    "radash": "12.1.1",
+    "unified-mongo-filter": "0.4.0"
+  },
+  "peerDependencies": {
+    "nuxt": ">4.0.0"
+  }
+}