@hostlink/nuxt-light 1.67.7 → 1.68.0

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

@@ -79,17 +79,23 @@ export interface LTableRequest {
     }) => void;
 }
 declare function requestServerInteraction(): void;
-declare var __VLS_114: any, __VLS_117: string, __VLS_118: any, __VLS_149: any, __VLS_152: any, __VLS_322: string, __VLS_323: any;
+declare var __VLS_24: {
+    props: any;
+}, __VLS_55: any, __VLS_119: any, __VLS_122: string, __VLS_123: any, __VLS_154: any, __VLS_157: any, __VLS_327: string, __VLS_328: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_117>]?: (props: typeof __VLS_118) => any;
+    [K in NonNullable<typeof __VLS_122>]?: (props: typeof __VLS_123) => any;
 } & {
-    [K in NonNullable<typeof __VLS_322>]?: (props: typeof __VLS_323) => any;
+    [K in NonNullable<typeof __VLS_327>]?: (props: typeof __VLS_328) => any;
 } & {
-    actions?: (props: typeof __VLS_114) => any;
+    'header-selection'?: (props: typeof __VLS_24) => any;
 } & {
-    'row-expand'?: (props: typeof __VLS_149) => any;
+    'top-selection'?: (props: typeof __VLS_55) => any;
 } & {
-    'top-right'?: (props: typeof __VLS_152) => any;
+    actions?: (props: typeof __VLS_119) => any;
+} & {
+    'row-expand'?: (props: typeof __VLS_154) => any;
+} & {
+    'top-right'?: (props: typeof __VLS_157) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LTableProps, {
     requestServerInteraction: typeof requestServerInteraction;

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

@@ -562,7 +562,9 @@ const hasFilters = computed(() => {
         <template #header="props">
             <q-tr :props="props">
                 <q-th v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" :dense="table?.dense" />
+                    <slot name="header-selection" :props="props">
+                        <q-checkbox v-model="props.selected" :dense="table?.dense" />
+                    </slot>
                 </q-th>
                 <q-th v-if="hasRowExpand" auto-width></q-th>
                 <q-th v-if="hasActions" auto-width></q-th>
@@ -578,6 +580,10 @@ const hasFilters = computed(() => {
             </div>
         </template>
 
+        <template #top-selection="props" v-if="ss.indexOf('top-selection') >= 0">
+            <slot name="top-selection" v-bind="props"></slot>
+        </template>
+
         <template #top-left v-if="addComponent">
             <q-btn icon="sym_o_add" :label="$t('Add')" color="primary" @click="onAdd" outline />
         </template>

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

@@ -79,17 +79,23 @@ export interface LTableRequest {
     }) => void;
 }
 declare function requestServerInteraction(): void;
-declare var __VLS_114: any, __VLS_117: string, __VLS_118: any, __VLS_149: any, __VLS_152: any, __VLS_322: string, __VLS_323: any;
+declare var __VLS_24: {
+    props: any;
+}, __VLS_55: any, __VLS_119: any, __VLS_122: string, __VLS_123: any, __VLS_154: any, __VLS_157: any, __VLS_327: string, __VLS_328: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_117>]?: (props: typeof __VLS_118) => any;
+    [K in NonNullable<typeof __VLS_122>]?: (props: typeof __VLS_123) => any;
 } & {
-    [K in NonNullable<typeof __VLS_322>]?: (props: typeof __VLS_323) => any;
+    [K in NonNullable<typeof __VLS_327>]?: (props: typeof __VLS_328) => any;
 } & {
-    actions?: (props: typeof __VLS_114) => any;
+    'header-selection'?: (props: typeof __VLS_24) => any;
 } & {
-    'row-expand'?: (props: typeof __VLS_149) => any;
+    'top-selection'?: (props: typeof __VLS_55) => any;
 } & {
-    'top-right'?: (props: typeof __VLS_152) => any;
+    actions?: (props: typeof __VLS_119) => any;
+} & {
+    'row-expand'?: (props: typeof __VLS_154) => any;
+} & {
+    'top-right'?: (props: typeof __VLS_157) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LTableProps, {
     requestServerInteraction: typeof requestServerInteraction;

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

@@ -1,6 +1,5 @@
 export interface LTimePickerProps {
     modelValue?: any;
-    required?: boolean;
     label?: string;
     hint?: string;
     nowBtn?: boolean;
@@ -27,7 +26,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
     format24h: boolean;
-    required: boolean;
     hideBottomSpace: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -7,7 +7,6 @@ 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 },
@@ -30,9 +29,6 @@ const inputProps = computed(() => ({
 }));
 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(":");

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

@@ -1,6 +1,5 @@
 export interface LTimePickerProps {
     modelValue?: any;
-    required?: boolean;
     label?: string;
     hint?: string;
     nowBtn?: boolean;
@@ -27,7 +26,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
     format24h: boolean;
-    required: boolean;
     hideBottomSpace: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/formkit/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useErrorMessage } from "./useErrorMessage";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 const props = defineProps({
   context: Object
 });
@@ -8,7 +8,9 @@ const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
 </script>
 
 <template>

package/dist/runtime/formkit/DatePicker.vue

@@ -1,19 +1,30 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
 });
+const onBlur = () => {
+  if (errorMessage.value) {
+    error.value = true;
+  } else {
+    error.value = false;
+  }
+};
 </script>
 
 <template>
-    <l-date-picker v-model="value" v-bind="context.attrs" :label="context.label" :error="error"
-        :type="context.inputType" :error-message="errorMessage" :disable="context.disabled">
+    <l-date-picker v-model="value" v-bind="context.attrs" :label="label" :error="error"
+        :type="context.inputType" :error-message="errorMessage" :disable="context.disabled" @blur="onBlur">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/dist/runtime/formkit/Editor.vue

@@ -1,10 +1,14 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -12,7 +16,7 @@ const value = computed({
 </script>
 
 <template>
-    <l-editor v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+    <l-editor v-model="value" :label="label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage">
         <slot></slot>
         <!-- <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">

package/dist/runtime/formkit/File.vue

@@ -1,11 +1,15 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 import { useLight } from "#imports";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -27,7 +31,7 @@ const attrs = computed(() => {
 </script>
 
 <template>
-    <q-file v-model="value" :label="context.label" v-bind="attrs" :error="error" :error-message="errorMessage"
+    <q-file v-model="value" :label="label" v-bind="attrs" :error="error" :error-message="errorMessage"
         @blur="onBlur" hide-bottom-space>
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/FilePicker.vue

@@ -1,12 +1,14 @@
 <script setup>
 import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
 const error = ref(false);
 const errorMessage = ref("");
 useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -21,7 +23,7 @@ const onBlur = () => {
 </script>
 
 <template>
-    <l-file v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+    <l-file v-model="value" :label="label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage" @blur="onBlur">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/FileUpload.vue

@@ -1,12 +1,14 @@
 <script setup>
 import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
 const error = ref(false);
 const errorMessage = ref("");
 useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -21,7 +23,7 @@ const onBlur = () => {
 </script>
 
 <template>
-    <l-file-upload v-bind="context.attrs" v-model="value" :label="context.label" :error="error" :type="context.inputType"
+    <l-file-upload v-bind="context.attrs" v-model="value" :label="label" :error="error" :type="context.inputType"
         :error-message="errorMessage" @blur="onBlur">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/GroupSelect.vue

@@ -1,10 +1,14 @@
 <script setup>
 import { useErrorMessage } from "./useErrorMessage";
-import { computed } from "vue";
+import { useRequiredLabel } from "./useRequiredLabel";
+import { computed, ref } from "vue";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -18,7 +22,7 @@ if (props.context.state.required) {
 </script>
 
 <template>
-    <l-group-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error"
+    <l-group-select v-model="value" :label="label" v-bind="context.attrs" :error="error"
         :error-message="errorMessage"  :required="context.state.required"
         :disable="context.disabled">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">

package/dist/runtime/formkit/Input.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 import { useI18n } from "vue-i18n";
 const props = defineProps({
   context: {
@@ -42,13 +43,7 @@ const onBlur = () => {
     error.value = false;
   }
 };
-const label = computed(() => {
-  let l = t(props.context.label);
-  if (props.context.state.required) {
-    l = "* " + l;
-  }
-  return l;
-});
+const label = useRequiredLabel(props.context, t);
 </script>
 
 <template>

package/dist/runtime/formkit/InputSelect.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 import { useI18n } from "vue-i18n";
 const props = defineProps({
   context: {
@@ -9,7 +10,9 @@ const props = defineProps({
   }
 });
 const { t } = useI18n();
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
 const value = computed({
   get: () => props.context?.value,
   set: (val) => props.context.node.input(val)
@@ -21,13 +24,7 @@ const onBlur = () => {
     error.value = false;
   }
 };
-const label = computed(() => {
-  let l = t(props.context.label);
-  if (props.context.state.required) {
-    l = "* " + l;
-  }
-  return l;
-});
+const label = useRequiredLabel(props.context, t);
 </script>
 
 <template>

package/dist/runtime/formkit/InputXlsx.vue

@@ -1,10 +1,14 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -12,7 +16,7 @@ const value = computed({
 </script>
 
 <template>
-    <l-input-xlsx v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
+    <l-input-xlsx v-model="value" :label="label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage">
         <slot></slot>
     </l-input-xlsx>

package/dist/runtime/formkit/OptionGroup.vue

@@ -1,12 +1,16 @@
 <script setup>
 import { useLight } from "#imports";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const light = useLight();
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -17,7 +21,7 @@ const outlined = computed(() => {
 </script>
 
 <template>
-    <l-field stack-label :label="context.label" :error="error" :error-message="errorMessage" :outlined="outlined"
+    <l-field stack-label :label="label" :error="error" :error-message="errorMessage" :outlined="outlined"
         hide-bottom-space>
         <q-option-group type="checkbox" :options="context.options" v-model="value" inline v-bind="context.attrs">
         </q-option-group>

package/dist/runtime/formkit/Radio.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)

package/dist/runtime/formkit/Select.vue

@@ -1,10 +1,14 @@
 <script setup>
 import { useErrorMessage } from "./useErrorMessage";
-import { computed } from "vue";
+import { useRequiredLabel } from "./useRequiredLabel";
+import { computed, ref } from "vue";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -18,7 +22,7 @@ if (props.context.state.required) {
 </script>
 
 <template>
-    <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
+    <l-select v-model="value" :label="label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
         :clearable="clearable" :disable="context.disabled">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>

package/dist/runtime/formkit/Textarea.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 import { useI18n } from "vue-i18n";
 const props = defineProps({
   context: {
@@ -9,7 +10,9 @@ const props = defineProps({
   }
 });
 const { t } = useI18n();
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
 const value = computed({
   get: () => props.context?.value,
   set: (val) => {
@@ -23,13 +26,7 @@ const onBlur = () => {
     error.value = false;
   }
 };
-const label = computed(() => {
-  let l = t(props.context.label);
-  if (props.context.state.required) {
-    l = "* " + l;
-  }
-  return l;
-});
+const label = useRequiredLabel(props.context, t);
 </script>
 
 <template>

package/dist/runtime/formkit/TimePicker.vue

@@ -1,19 +1,30 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useErrorMessage } from "./useErrorMessage";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
-const { error, errorMessage } = useErrorMessage(props.context.node);
+const error = ref(false);
+const errorMessage = ref("");
+useErrorMessage(props.context.node, error, errorMessage);
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
 });
+const onBlur = () => {
+  if (errorMessage.value) {
+    error.value = true;
+  } else {
+    error.value = false;
+  }
+};
 </script>
 
 <template>
-    <l-time-picker v-model="value" v-bind="context.attrs" :label="context.label" :error="error" :type="context.inputType"
-        :error-message="errorMessage" :disable="context.disabled" :required="context.state.required">
+    <l-time-picker v-model="value" v-bind="context.attrs" :label="label" :error="error" :type="context.inputType"
+        :error-message="errorMessage" :disable="context.disabled" @blur="onBlur">
         <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
             <slot :name="name" v-bind="props ?? {}"></slot>
         </template>

package/dist/runtime/formkit/Toggle.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { computed } from "vue";
+import { useRequiredLabel } from "./useRequiredLabel";
 const props = defineProps({
   context: Object
 });
+const label = useRequiredLabel(props.context);
 const value = computed({
   get: () => props.context.value,
   set: (val) => props.context.node.input(val)
@@ -10,7 +12,7 @@ const value = computed({
 </script>
 
 <template>
-    <q-toggle v-model="value" :label="context.label" :disable="context.disabled" v-bind="context.attrs">
+    <q-toggle v-model="value" :label="label" :disable="context.disabled" v-bind="context.attrs">
         <slot></slot>
     </q-toggle>
 </template>

package/dist/runtime/formkit/useRequiredLabel.d.ts

@@ -0,0 +1 @@
+export declare function useRequiredLabel(context: any, t?: (val: string) => string): import("vue").ComputedRef<any>;

package/dist/runtime/formkit/useRequiredLabel.js

@@ -0,0 +1,10 @@
+import { computed } from "vue";
+export function useRequiredLabel(context, t) {
+  return computed(() => {
+    let l = t ? t(context.label) : context.label;
+    if (context.state?.required) {
+      l = "* " + l;
+    }
+    return l;
+  });
+}

package/dist/runtime/models/Notification.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => void;
+export default _default;

package/dist/runtime/models/Notification.js

@@ -0,0 +1,52 @@
+import { defineLightModel } from "#imports";
+export default defineLightModel({
+  name: "Notification",
+  dataPath: "app.listNotification",
+  fields: {
+    notification_id: {
+      label: "ID",
+      sortable: true
+    },
+    type: {
+      label: "Type",
+      sortable: true,
+      searchable: true,
+      searchType: "select",
+      searchOptions: [
+        { label: "Info", value: "info" },
+        { label: "Success", value: "success" },
+        { label: "Warning", value: "warning" },
+        { label: "Error", value: "error" }
+      ],
+      format: (value) => {
+        const map = { info: "Info", success: "Success", warning: "Warning", error: "Error" };
+        return map[value] || value;
+      }
+    },
+    title: {
+      label: "Title",
+      sortable: true,
+      searchable: true
+    },
+    message: {
+      label: "Message",
+      searchable: true
+    },
+    link: {
+      label: "Link"
+    },
+    is_read: {
+      label: "Read",
+      sortable: true,
+      searchable: true,
+      searchType: "boolean",
+      format: (value) => value ? "Yes" : "No"
+    },
+    created_time: {
+      label: "Created Time",
+      sortable: true,
+      searchable: true,
+      searchType: "date"
+    }
+  }
+});

package/dist/runtime/models/SystemValue.js

@@ -5,7 +5,9 @@ export default defineLightModel({
   fields: {
     name: {
       label: "Name",
-      sortable: true
+      sortable: true,
+      searchable: true,
+      searchPlaceholder: "Search by name..."
     },
     value: {
       label: "Value",