@hostlink/nuxt-light 1.65.0 → 1.66.2

package/dist/runtime/components/{l-table.vue → L/Table.vue}

@@ -1,9 +1,10 @@
 <script setup>
 import { useQuasar, QTable, Dialog } from "quasar";
 import { defu } from "defu";
-import { ref, computed, onMounted, useSlots, watch, reactive } from "vue";
-import useLight from "../composables/useLight";
-import model from "../composables/model";
+import { ref, computed, onMounted, useSlots, watch, useAttrs } from "vue";
+import useLight from "../../composables/useLight";
+import { useLightTableDefaults } from "../../composables/useLightProps";
+import model from "../../composables/model";
 import { toQuery } from "@hostlink/light";
 import { list, navigateTo } from "#imports";
 import { useI18n } from "vue-i18n";
@@ -134,40 +135,28 @@ const filters = useSessionStorage(storageKey.value, {});
 if (!saveFilters.value) {
   filters.value = {};
 }
+defineOptions({ inheritAttrs: false });
 const light = useLight();
+const vAttrs = useAttrs();
+const L_KEYS = ["actions", "sortBy", "modelName", "searchable", "onRequestData", "addComponent", "addComponentProps", "name", "searchStyle", "canExpandRow"];
+const base = useLightTableDefaults(props, vAttrs, L_KEYS);
 const pagination = ref(props.pagination);
 if (props.rowsPerPageOptions[0] == 0) {
   pagination.value.rowsPerPage = 0;
 }
-props.columns?.forEach((col) => {
-  if (!col.align) {
-    col.align = "left";
-  }
-  if (!col.field && col.name) {
-    col.field = col.name;
-  }
-  col.label = t(col.label);
-});
-if (props.columns) {
-  for (let i = 0; i < props.columns.length; i++) {
-    if (props.columns[i]?.searchOptions) {
-      let opts = props.columns[i]?.searchOptions;
-      if (typeof opts == "function") {
-        props.columns[i].searchOptions = await opts();
-      }
-    }
-  }
-}
+const localColumns = computed(
+  () => props.columns?.map((col) => ({
+    ...col,
+    align: col.align ?? "left",
+    field: col.field ?? col.name,
+    label: t(col.label)
+  }))
+);
 const emits = defineEmits(["request-data", "update:selected", "delete"]);
 const loading = ref(false);
-let activeEdit = false;
-let actionView = false;
-let actionDelete = false;
-if (props.actions.length > 0) {
-  actionView = props.actions.includes("view");
-  activeEdit = props.actions.includes("edit") || props.actions.includes("update");
-  actionDelete = props.actions.includes("delete");
-}
+const actionView = computed(() => props.actions.includes("view"));
+const activeEdit = computed(() => props.actions.includes("edit") || props.actions.includes("update"));
+const actionDelete = computed(() => props.actions.includes("delete"));
 if (props.sortBy) {
   let [sortBy, descending] = props.sortBy.split(":");
   pagination.value.sortBy = sortBy;
@@ -179,14 +168,19 @@ const hasSearch = computed(() => {
   });
 });
 const table = ref();
-const rows = ref(props.rows);
-if (rows.value == void 0) {
-  rows.value = [];
-}
-onMounted(() => {
-  table.value && table.value.requestServerInteraction();
+const rows = ref(props.rows ?? []);
+const resolvedSearchOptions = ref({});
+const localSearchOptions = ref({});
+onMounted(async () => {
+  for (const col of props.columns ?? []) {
+    if (!col.searchOptions) continue;
+    const resolved = typeof col.searchOptions === "function" ? await col.searchOptions() : col.searchOptions;
+    resolvedSearchOptions.value[col.name] = resolved;
+    localSearchOptions.value[col.name] = resolved;
+  }
+  table.value?.requestServerInteraction();
 });
-let primaryKey = ref(props.rowKey);
+const primaryKey = ref(props.rowKey);
 const modelName = ref(props.modelName);
 const validateData = () => {
   if (primaryKey.value == null) return;
@@ -234,13 +228,13 @@ const onLocalRequest = async (p) => {
     }
     localFields = defu(localFields, { [col.name]: true });
   });
-  if (actionView) {
+  if (actionView.value) {
     localFields = defu(localFields, { canView: true });
   }
-  if (actionDelete) {
+  if (actionDelete.value) {
     localFields = defu(localFields, { canDelete: true });
   }
-  if (activeEdit) {
+  if (activeEdit.value) {
     localFields = defu(localFields, { canUpdate: true });
   }
   const callback = {
@@ -316,7 +310,7 @@ const onLocalRequest = async (p) => {
         }
         this.setData(await l.fetchWithMeta());
       } catch (e) {
-        quasar.dialog({
+        $q.dialog({
           message: e,
           color: "negative"
         });
@@ -378,16 +372,13 @@ const onFilters = () => {
   });
 };
 const slots = useSlots();
-const ss = Object.entries(slots).map(([key, value]) => {
-  return key;
-});
-const quasar = useQuasar();
+const ss = computed(() => Object.keys(slots));
 const onDelete = async (id) => {
   if (modelName.value == null) return;
   try {
     await model(modelName.value).delete(id);
   } catch (e) {
-    quasar.notify({
+    $q.notify({
       message: e.message,
       color: "negative"
     });
@@ -399,12 +390,9 @@ const onDelete = async (id) => {
   emits("delete", id);
 };
 const attrs = computed(() => {
-  const a = { ...light.styles.table, ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== void 0)) };
-  if (props.name) {
-    a.visibleColumns = visibleColumns.value;
-  }
   return {
-    ...a,
+    ...base.value,
+    ...props.name ? { visibleColumns: visibleColumns.value } : {},
     loadingLabel: t(props.loadingLabel),
     noDataLabel: t(props.noDataLabel),
     rowsPerPageOptions: props.rowsPerPageOptions,
@@ -414,20 +402,14 @@ const attrs = computed(() => {
   };
 });
 const filter = ref("");
-const toColumns = props.columns?.filter((col) => {
-  return col.to;
-}).map((col) => {
-  col.slot_name = "body-cell-" + col.name;
-  return col;
-});
 const isDark = computed(() => {
   return light.theme == "dark";
 });
 const hasRowExpand = computed(() => {
-  return ss.indexOf("row-expand") >= 0;
+  return ss.value.indexOf("row-expand") >= 0;
 });
 const hasActions = computed(() => {
-  return props.actions.length > 0 || ss.indexOf("actions") >= 0;
+  return props.actions.length > 0 || ss.value.indexOf("actions") >= 0;
 });
 const localSelected = computed({
   get() {
@@ -440,9 +422,6 @@ const localSelected = computed({
 watch(() => props.rows, (val) => {
   rows.value = val;
 });
-const computedColumns = computed(() => {
-  return props.columns;
-});
 function requestServerInteraction() {
   table.value && table.value.requestServerInteraction();
 }
@@ -458,26 +437,37 @@ const onAdd = () => {
     requestServerInteraction();
   });
 };
-const localSearchOptions = ref({});
 const searchSelectFilter = (val, update, name) => {
-  if (val == "") {
+  const allOptions = resolvedSearchOptions.value[name] ?? [];
+  if (val === "") {
     update(() => {
-      const column = props.columns?.find((col) => col.name == name);
-      localSearchOptions.value[name] = column?.searchOptions;
+      localSearchOptions.value[name] = allOptions;
     });
   } else {
     update(() => {
       const needle = val.toLocaleLowerCase();
-      const column = props.columns?.find((col) => col.name == name);
-      const options = column?.searchOptions;
-      if (Array.isArray(options)) {
-        localSearchOptions.value[name] = options.filter((v) => v.label.toLocaleLowerCase().indexOf(needle) > -1);
-      } else {
-        localSearchOptions.value[name] = options;
-      }
+      localSearchOptions.value[name] = Array.isArray(allOptions) ? allOptions.filter((v) => v.label.toLocaleLowerCase().indexOf(needle) > -1) : allOptions;
     });
   }
 };
+const localFilterMethod = (rows2, terms) => {
+  if (!terms || Object.keys(terms).length === 0) return rows2;
+  return rows2.filter((row) => {
+    for (const [key, value] of Object.entries(terms)) {
+      if (value === null || value === void 0 || value === "") continue;
+      const cell = row[key];
+      if (typeof value === "object" && value !== null && "contains" in value) {
+        if (!String(cell ?? "").toLowerCase().includes(String(value.contains).toLowerCase())) return false;
+      } else if (typeof value === "object" && value !== null && "_between" in value) {
+        if (cell < value._between[0] || cell > value._between[1]) return false;
+      } else {
+        if (cell !== value) return false;
+      }
+    }
+    return true;
+  });
+};
+const clientFilterTerms = computed(() => isServerSide ? null : getFilterValue());
 const showTopRight = computed(() => {
   return props.name && hasFilters.value || props.searchable || props.name && (props.columns && props.columns.length > 0);
 });
@@ -517,8 +507,11 @@ const hasFilters = computed(() => {
 </script>
 
 <template>
-    <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onLocalRequest" :columns="columns"
-        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
+    <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onLocalRequest" :columns="localColumns"
+        v-model:pagination="pagination"
+        :filter="isServerSide ? filter : clientFilterTerms"
+        :filter-method="isServerSide ? void 0 : localFilterMethod"
+        v-model:selected="localSelected">
         <template #header="props">
             <q-tr :props="props">
                 <q-th v-if="selection != 'none'" auto-width>
@@ -571,10 +564,10 @@ const hasFilters = computed(() => {
 
                 <template v-for="col in props.cols">
                     <template v-if="ss.indexOf('body-cell-' + col.name) >= 0">
-                        <slot :name="'body-cell-' + col.name" v-bind="props"></slot>
+                        <slot :name="'body-cell-' + col.name" v-bind="{ ...props, col, value: props.row[col.field] }"></slot>
                     </template>
                     <template v-else>
-                        <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false"><template
+                        <q-td :key="col.name" :props="props" :auto-width="col.autoWidth ?? false" :style="col.style"><template
                                 v-if="col.to" class="bg-primary">
                                 <l-link :to="col.to(props.row)" v-if="col.to(props.row)">{{ col.value }}</l-link>
                             </template>
@@ -646,7 +639,7 @@ const hasFilters = computed(() => {
             </q-td>
         </template -->
 
-        <template #top-row="props" v-if="hasSearch && isServerSide">
+        <template #top-row="props" v-if="hasSearch">
             <q-tr>
                 <q-td v-if="selection != 'none'" auto-width />
                 <q-td v-if="hasRowExpand" auto-width />

package/dist/runtime/components/{l-tabs.vue → L/Tabs.vue}

@@ -1,5 +1,6 @@
 <script setup>
-import { useSlots, useRouter, useRoute, watch, onMounted } from "#imports";
+import { useLight } from "#imports";
+import { useSlots, useRouter, useRoute, watch, computed } from "#imports";
 const props = defineProps({
   name: { type: String, required: false, default: "tab" },
   route: { type: Boolean, required: false },
@@ -25,6 +26,7 @@ const props = defineProps({
   dense: { type: Boolean, required: false, skipCheck: true },
   "onUpdate:modelValue": { type: Function, required: false }
 });
+const light = useLight();
 const slots = useSlots();
 const router = useRouter();
 const route = useRoute();
@@ -38,12 +40,7 @@ if (modelValue.value === void 0) {
 }
 watch(modelValue, (newValue) => {
   if (props.route && props.name && newValue) {
-    router.push({
-      query: {
-        ...route.query,
-        [props.name]: newValue
-      }
-    });
+    router.push({ query: { ...route.query, [props.name]: newValue } });
   }
 }, { immediate: false });
 watch(() => props.name ? route.query[props.name] : null, (newTab) => {
@@ -51,11 +48,21 @@ watch(() => props.name ? route.query[props.name] : null, (newTab) => {
     modelValue.value = newTab;
   }
 });
+const L_KEYS = ["route", "name"];
+const tabsProps = computed(() => {
+  const result = {};
+  for (const [k, v] of Object.entries(props)) {
+    if (!L_KEYS.includes(k) && v !== void 0) result[k] = v;
+  }
+  return result;
+});
 </script>
 
 <template>
     <l-card>
-        <q-tabs v-bind="$props" class="text-grey" active-color="primary" indicator-color="primary"
+        <q-tabs v-bind="tabsProps" class="text-grey"
+            :active-color="light.color"
+            :indicator-color="light.color"
             v-model="modelValue">
             <slot></slot>
         </q-tabs>

package/dist/runtime/components/{l-time-picker.d.vue.ts → L/TimePicker.d.vue.ts}

@@ -6,9 +6,11 @@ export interface LTimePickerProps {
     nowBtn?: boolean;
     withSeconds?: boolean;
     format24h?: boolean;
-    mask?: string;
     hideBottomSpace?: boolean;
     color?: string;
+    disable?: boolean;
+    readonly?: boolean;
+    dark?: boolean;
 }
 type __VLS_Props = LTimePickerProps;
 type __VLS_ModelProps = {
@@ -24,7 +26,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
-    mask: string;
     format24h: boolean;
     required: boolean;
     hideBottomSpace: boolean;

package/dist/runtime/components/L/TimePicker.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { computed, ref, useAttrs } from "vue";
+import { useLightInputDefaults } from "../../composables/useLightProps";
+import { useI18n } from "vue-i18n";
+defineOptions({ inheritAttrs: false });
+const { t } = useI18n();
+const modelValue = defineModel({ type: null });
+const props = defineProps({
+  modelValue: { type: null, required: false },
+  required: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false },
+  hint: { type: String, required: false },
+  nowBtn: { type: Boolean, required: false },
+  withSeconds: { type: Boolean, required: false },
+  format24h: { type: Boolean, required: false, default: true },
+  hideBottomSpace: { type: Boolean, required: false, default: true },
+  color: { type: String, required: false },
+  disable: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  dark: { type: Boolean, required: false }
+});
+const attrs = useAttrs();
+const popup = ref(null);
+const TIME_KEYS = ["nowBtn", "withSeconds", "format24h"];
+const base = useLightInputDefaults(props, attrs, TIME_KEYS);
+const inputProps = computed(() => ({
+  ...base.value,
+  mask: props.withSeconds ? "##:##:##" : "##:##",
+  rules: rules.value
+}));
+const rules = computed(() => {
+  const r = [];
+  if (props.required) {
+    r.push((v) => !!v || t("This field is required"));
+  }
+  r.push((v) => {
+    if (!v) return true;
+    const parts = v.split(":");
+    const valid2 = parts.length === 2 && parseInt(parts[0]) >= 0 && parseInt(parts[0]) <= 23 && parseInt(parts[1]) >= 0 && parseInt(parts[1]) <= 59;
+    const valid3 = parts.length === 3 && parseInt(parts[0]) >= 0 && parseInt(parts[0]) <= 23 && parseInt(parts[1]) >= 0 && parseInt(parts[1]) <= 59 && parseInt(parts[2]) >= 0 && parseInt(parts[2]) <= 59;
+    return valid2 || valid3 || t("Invalid time format");
+  });
+  return r;
+});
+const timeProps = computed(() => ({
+  format24h: props.format24h,
+  nowBtn: props.nowBtn,
+  withSeconds: props.withSeconds,
+  ...props.color !== void 0 && { color: props.color },
+  ...props.dark !== void 0 && { dark: props.dark },
+  ...props.disable !== void 0 && { disable: props.disable }
+}));
+</script>
+
+<template>
+    <q-input v-model="modelValue" v-bind="inputProps">
+        <template #prepend>
+            <q-icon name="sym_o_access_time" class="cursor-pointer">
+                <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
+                    <q-time v-model="modelValue" v-bind="timeProps">
+                        <div class="row items-center justify-end">
+                            <q-btn v-close-popup :label="$t('Close')" flat />
+                        </div>
+                    </q-time>
+                </q-popup-proxy>
+            </q-icon>
+        </template>
+
+        <template v-for="(_, name) in $slots" #[name]="slotProps" :key="name">
+            <slot :name="name" v-bind="slotProps ?? {}"></slot>
+        </template>
+    </q-input>
+</template>

package/dist/runtime/components/{l-time-picker.vue.d.ts → L/TimePicker.vue.d.ts}

@@ -6,9 +6,11 @@ export interface LTimePickerProps {
     nowBtn?: boolean;
     withSeconds?: boolean;
     format24h?: boolean;
-    mask?: string;
     hideBottomSpace?: boolean;
     color?: string;
+    disable?: boolean;
+    readonly?: boolean;
+    dark?: boolean;
 }
 type __VLS_Props = LTimePickerProps;
 type __VLS_ModelProps = {
@@ -24,7 +26,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
-    mask: string;
     format24h: boolean;
     required: boolean;
     hideBottomSpace: boolean;

package/dist/runtime/components/{MyTest.d.vue.ts → L/User/apikey.d.vue.ts}

@@ -1,7 +1,7 @@
-declare const _default: typeof __VLS_export;
-export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    test: StringConstructor;
+    id: StringConstructor;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    test: StringConstructor;
+    id: StringConstructor;
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/L/User/apikey.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { model } from "#imports";
+const props = defineProps({
+  id: String
+});
+const columns = model("APIKey").columns({
+  apikey_id: true,
+  name: true,
+  created_time: true
+});
+const onRequestData = async (req) => {
+  req.loadObjects("APIKey", { user_id: props.id });
+};
+</script>
+
+<template>
+    <l-table row-key="apikey_id" sort-by="apikey_id:desc" :columns="columns" @request-data="onRequestData" />
+</template>

package/dist/runtime/components/{MyTest.vue.d.ts → L/User/apikey.vue.d.ts}

@@ -1,7 +1,7 @@
-declare const _default: typeof __VLS_export;
-export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    test: StringConstructor;
+    id: StringConstructor;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    test: StringConstructor;
+    id: StringConstructor;
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/L/ViewBtn.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/L/ViewBtn.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/defineLightModel.d.ts

@@ -1,5 +1,5 @@
 import { type Field } from "@hostlink/light";
-import { type LTableColumn } from "../components/l-table.vue.js";
+import { type LTableColumn } from "../components/L/Table.vue.js";
 export type LightModelField = Omit<LTableColumn, "name" | "field"> & Field & {
     name?: string;
     field?: string | ((row: any) => any);

package/dist/runtime/composables/model.d.ts

@@ -1,4 +1,4 @@
-import type { LTableColumn } from "../components/l-table.vue.js";
+import type { LTableColumn } from "../components/L/Table.vue.js";
 declare const _default: (name: string) => Omit<{
     field: (f: string) => import("@hostlink/light").Field | null;
     $fields: Record<string, import("@hostlink/light").Field>;

package/dist/runtime/composables/showDocumentDialog.d.ts

@@ -0,0 +1,9 @@
+export interface DocumentDialogOptions {
+    url: string;
+    mimeType?: string;
+    title?: string;
+    width?: string;
+    height?: string;
+    fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+}
+export declare function showDocumentDialog(options: DocumentDialogOptions): import("quasar").DialogChainObject;

package/dist/runtime/composables/showDocumentDialog.js

@@ -0,0 +1,15 @@
+import { Dialog } from "quasar";
+import { LDocumentViewerDialog } from "#components";
+export function showDocumentDialog(options) {
+  return Dialog.create({
+    component: LDocumentViewerDialog,
+    componentProps: {
+      url: options.url,
+      mimeType: options.mimeType ?? "",
+      title: options.title ?? "",
+      width: options.width ?? "100%",
+      height: options.height ?? "70vh",
+      fit: options.fit ?? "contain"
+    }
+  });
+}

package/dist/runtime/composables/showUploadFilesDialog.js

@@ -2,7 +2,7 @@ import { defineAsyncComponent } from "vue";
 import { Dialog } from "quasar";
 export const showUploadFilesDialog = (selectedLocation, initialFiles) => {
   return Dialog.create({
-    component: defineAsyncComponent(() => import("../components/l-dialog-upload-files.vue")),
+    component: defineAsyncComponent(() => import("../components/L/DialogUploadFiles.vue")),
     componentProps: {
       selectedLocation,
       ...initialFiles && { initialFiles }