@hostlink/nuxt-light 1.0.4 → 1.0.6

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.0.4"
+  "version": "1.0.6"
 }

package/dist/runtime/components/l-banner.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { type QBannerProps, type QBannerSlots } from 'quasar'
+import { computed, useSlots } from 'vue'
+
+export interface LBannerProps extends QBannerProps {
+    icon?: string
+    type?: 'primary' | 'secondary' | 'accent' | 'dark' | 'positive' | 'negative' | 'info' | 'warning'
+}
+
+const props = withDefaults(defineProps<LBannerProps>(), {
+    rounded: true,
+    type: 'primary'
+});
+
+const classes = computed(() => {
+    return [
+        `bg-${props.type}`,
+        'text-white'
+    ]
+});
+
+const localIcon = computed(() => {
+    if (props.icon) return props.icon
+    if (props.type === 'info') return 'sym_o_info'
+    if (props.type === 'warning') return 'sym_o_warning'
+    if (props.type === 'positive') return 'sym_o_check_circle_outline'
+    if (props.type === 'negative') return 'sym_o_error'
+});
+
+const slots = computed(() => useSlots());
+</script>
+
+<template>
+    <q-banner v-bind="props" :class="classes">
+        <template v-slot:avatar v-if="localIcon">
+            <q-icon :name="localIcon" />
+        </template>
+
+        <template v-for="(s, name) in slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
+        </template>
+    </q-banner>
+</template>

package/dist/runtime/components/l-btn.vue

@@ -1,14 +1,14 @@
-<script setup>
-import { ref, useAttrs } from "vue";
-import { q, f, useLight } from '../';
+<script setup lang="ts">
+import { type QBtnProps } from "quasar";
+import { ref, computed } from "vue";
+import { q, f, useLight } from '#imports';
 
-const props = defineProps(["label", "permission"]);
-
-const label = ref(props.label);
-if (!label.value) {
-    label.value = "";
+export interface LBtnProps extends QBtnProps {
+    permission?: string;
 }
 
+const props = defineProps<LBtnProps>();
+
 const light = useLight();
 
 const granted = ref(false);
@@ -22,22 +22,22 @@ if (props.permission) {
     granted.value = true;
 }
 
-
-const attrs = {
-    ...{
-        rounded: light.getStyle("buttonRounded", true),
-        outline: light.getStyle("buttonOutline", true),
-        unelevated: light.getStyle("buttonUnelevated", false),
-        dense: light.getStyle("buttonDense", false),
-    },
-    ...useAttrs(),
-}
+const attrs = computed(() => {
+    return {
+        ...{
+            rounded: light.getStyle("buttonRounded"),
+            outline: light.getStyle("buttonOutline"),
+            unelevated: light.getStyle("buttonUnelevated"),
+            dense: light.getStyle("buttonDense"),
+        },
+        ...props,
+    }
+});
 
 
 </script>
 <template>
-    <q-btn v-bind="attrs" color="primary" v-if="granted" :label="$t(label)">
-
+    <q-btn v-bind="attrs" color="primary" v-if="granted">
         <slot></slot>
     </q-btn>
 </template>

package/dist/runtime/components/l-card.vue

@@ -1,21 +1,27 @@
-<script setup>
-import { useLight } from '../'
-import { useAttrs, ref, computed } from 'vue'
+<script setup lang="ts">
+import { useLight } from '#imports'
+import { ref, computed } from 'vue'
+import { type QCardProps } from 'quasar';
 
-defineProps({
-    loading: Boolean,
-    title: String
-})
+export interface LCardProps extends QCardProps {
+    loading?: boolean;
+    title?: string;
+}
 
 const light = useLight();
+const props = withDefaults(defineProps<LCardProps>(), {
+    flat: undefined,
+    bordered: undefined,
+    square: undefined,
+});
 
-const attrs = {
-    ...{
-        flat: light.getStyle("cardFlat", true),
-        bordered: light.getStyle("cardBordered", true),
-        square: light.getStyle("cardSquare", false),
-    }, ...useAttrs()
-}
+const attrs = computed(() => {
+    const a = { ...props };
+    if (props.flat === undefined) a.flat = light.getStyle("cardFlat");
+    if (props.bordered === undefined) a.bordered = light.getStyle("cardBordered");
+    if (props.square === undefined) a.square = light.getStyle("cardSquare");
+    return a;
+});
 
 const cl = computed(() => {
     const c = ["text-white"];

package/dist/runtime/components/l-checkbox.vue

@@ -1,8 +1,13 @@
-<script setup>
-import { computed } from "vue";
+<script setup lang="ts">
+import { computed } from "vue"
+import { type QCheckboxProps } from "quasar"
+
+export interface LCheckboxProps extends QCheckboxProps {
+}
 
 const emit = defineEmits(["update:modelValue"]);
-const props = defineProps(["modelValue", "label"])
+
+const props = defineProps<LCheckboxProps>()
 
 const localValue = computed({
     get: () => props.modelValue,
@@ -13,5 +18,7 @@ const localValue = computed({
 });
 </script>
 <template>
-    <q-checkbox v-model="localValue" :label="$t(label)" />
+    <q-checkbox v-bind="$props" v-model="localValue" :label="$t($props.label ?? '')">
+        <slot></slot>
+    </q-checkbox>
 </template>

package/dist/runtime/components/l-date-picker.vue

@@ -1,29 +1,17 @@
-<script setup>
+<script setup lang="ts">
 import { ref, computed, useAttrs } from "vue";
-import { useLight } from '../';
+import { useLight } from '#imports';
 
+import { type QDateProps } from "quasar";
 
-const light = useLight();
+export interface LDatePickerProps extends QDateProps {
+    label?: string
+    required?: boolean
+}
 
-const props = defineProps({
-    modelValue: {
-        type: [String, Object],
-        required: false,
-        default: null
-    },
-    range: {
-        type: Boolean,
-        default: false
-    },
-    label: {
-        type: String,
-        default: ""
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-});
+const props = defineProps<LDatePickerProps>()
+
+const light = useLight();
 
 const emit = defineEmits(["update:modelValue"]);
 const popup = ref(null);
@@ -37,16 +25,19 @@ const localValue = computed({
         return props.modelValue
     },
     set: (value) => {
-        popup.value.hide();
+        if (popup.value) {
+            popup.value.hide();
+        }
+
         emit('update:modelValue', value)
     }
 
 });
 
-const rules = [];
+const rules: any = [];
 
 if (props.required) {
-    rules.push((val) => {
+    rules.push((val: any) => {
         if (!val) {
             return "Required";
         }
@@ -54,7 +45,7 @@ if (props.required) {
 }
 
 if (!props.range) {
-    rules.push((val) => {
+    rules.push((val: any) => {
         //check val is YYYY-MM-DD
         if (val) {
             if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
@@ -65,23 +56,21 @@ if (!props.range) {
 }
 
 const attrs = {
-    ...{
-        filled: light.getStyle("inputFilled"),
-        outlined: light.getStyle("inputOutlined"),
-        standout: light.getStyle("inputStandout"),
-        rounded: light.getStyle("inputRounded"),
-        dense: light.getStyle("inputDense"),
-        square: light.getStyle("inputSquare"),
-        stackLabel: light.getStyle("inputStackLabel")
-    },
-    ...useAttrs(),
+    filled: light.getStyle("inputFilled"),
+    outlined: light.getStyle("inputOutlined"),
+    standout: light.getStyle("inputStandout"),
+    rounded: light.getStyle("inputRounded"),
+    dense: light.getStyle("inputDense"),
+    square: light.getStyle("inputSquare"),
+    stackLabel: light.getStyle("inputStackLabel")
 }
 
 const mask = props.range ? "####-##-## - ####-##-##" : "####-##-##";
 
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" :rules="rules" :label="$t(label)" hide-bottom-space :mask="mask">
+    <q-input v-bind="attrs" :label="$t(props.label ?? '')" v-model="localValue" :rules="rules" hide-bottom-space
+        :mask="mask">
         <template v-slot:prepend>
             <q-btn icon="sym_o_event" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">

package/dist/runtime/components/l-input.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { computed, ref, useAttrs, useSlots } from "vue";
+import { computed, ref, useAttrs } from "vue";
 import { useI18n } from 'vue-i18n';
 import tc2sc from "../lib/tc2sc";
-import { useLight } from '../';
+import { useLight } from '#imports';
 
 const i18n = useI18n();
 const light = useLight();
@@ -165,10 +165,6 @@ const attrs = {
     ...useAttrs(),
 }
 
-const ss = Object.entries(useSlots()).map(([key, value]) => {
-    return key;
-});
-
 </script>
 <template>
     <q-input v-bind="attrs" :label="localLabel" v-model="localValue" :rules="new_rules" hide-bottom-space :type="localType">
@@ -184,10 +180,11 @@ const ss = Object.entries(useSlots()).map(([key, value]) => {
             </q-btn>
         </template>
 
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
 
+
         <template v-if="localShowPassword" v-slot:append>
             <q-icon name="sym_o_visibility" class="cursor-pointer" :color="showPassword ? 'primary' : 'grey-5'"
                 @click="isShowPassword = false" v-if="isShowPassword" />

package/dist/runtime/components/l-login.vue

@@ -180,7 +180,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-card bordered flat style="min-width:360px;max-width: 400px;" class="fixed-center">
+  <q-card bordered flat style="min-width:360px" class="fixed-center">
     <q-card-section>
       <q-img :src="light.getCompanyLogo()" class="full-width">
         <template v-slot:error>

package/dist/runtime/components/l-select.vue

@@ -1,31 +1,35 @@
-<script setup>
-import { computed, ref, useAttrs } from "vue";
+<script setup lang="ts">
+import { computed, ref } from "vue";
 import { useLight } from '../';
+import { type QSelectProps } from "quasar";
+
+const emits = defineEmits(["update:modelValue"]);
 
 const light = useLight();
-const props = defineProps({
-    rules: {
-        type: Array,
-        default: () => []
-    },
-    required: {
-        type: Boolean,
-        default: false
+interface LSelectProps extends QSelectProps {
+    required?: boolean
+}
+
+
+const props = withDefaults(defineProps<LSelectProps>(), {
+    rules: () => {
+        return []
     },
-    options: {
-        type: Array,
-        default: () => []
+    options: () => {
+        return []
     },
-    optionLabel: {
-        type: String,
-        default: "label"
+    optionLabel: () => {
+        return "label"
     },
-    label: {
-        type: String,
-        default: ""
+    emitValue: () => {
+        return true
     },
+    mapOptions: () => {
+        return true
+    }
 })
 
+
 if (props.required) {
     props.rules.push((val) => {
         if (Number.isInteger(val)) {
@@ -49,31 +53,40 @@ const filterFn = (val, update, abort) => {
 
     update(() => {
         const needle = val.toLowerCase();
+
         select_options.value = props.options.filter(v => v[props.optionLabel].toLowerCase().indexOf(needle) > -1);
     })
 }
 
-
-
 const clearable = computed(() => {
     return !props.required;
 });
 
-const attrs = {
-    ...{
-        filled: light.getStyle("inputFilled"),
-        outlined: light.getStyle("inputOutlined"),
-        standout: light.getStyle("inputStandout"),
-        rounded: light.getStyle("inputRounded"),
-        dense: light.getStyle("inputDense"),
-        square: light.getStyle("inputSquare"),
-        stackLabel: light.getStyle("inputStackLabel")
-    },
-    ...useAttrs(),
-}
+const attrs = computed(() => {
+    return {
+        ...{
+            filled: light.getStyle("inputFilled"),
+            outlined: light.getStyle("inputOutlined"),
+            standout: light.getStyle("inputStandout"),
+            rounded: light.getStyle("inputRounded"),
+            dense: light.getStyle("inputDense"),
+            square: light.getStyle("inputSquare"),
+            stackLabel: light.getStyle("inputStackLabel")
+        },
+        ...{
+            emitValue: props.emitValue,
+            mapOptions: props.mapOptions
+        }
+    }
+});
+
+const localValue = computed({
+    get: () => props.modelValue,
+    set: (value) => emits('update:modelValue', value)
+});
 
 </script>
 <template>
-    <q-select v-bind="attrs" :label="$t(label)" emit-value map-options :options="select_options" @filter="filterFn"
-        :option-label="optionLabel" hide-bottom-space :rules="rules" :clearable="clearable" />
+    <q-select v-bind="attrs" v-model="localValue" :label="$t(props.label ?? '')" :options="select_options"
+        @filter="filterFn" :option-label="optionLabel" hide-bottom-space :rules="rules" :clearable="clearable" />
 </template>

package/dist/runtime/components/l-table.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { useQuasar, QTable } from 'quasar';
+import { useQuasar, QTable, type QTableColumn, type QTableProps } from 'quasar';
+
 import { ref, computed, onMounted, useSlots, useAttrs } from "vue";
 import { t, q, useLight, GQLFieldBuilder, model } from '../';
 import { toQuery } from '@hostlink/light';
-import { type QTableColumn } from 'quasar';
+
 
 // extends QTableColumn
 export interface LTableColumn extends QTableColumn {
@@ -17,66 +18,37 @@ export interface LTableColumn extends QTableColumn {
 
 const errors = ref<InstanceType<any>>([]);
 
-const light = useLight();
-const props = defineProps({
-    debug: {
-        type: Boolean,
-        default: false
-    },
-    columns: {
-        type: Array<LTableColumn>
-    },
-    actions: {
-        type: Array,
-        default: () => []
-    },
-    sortBy: {
-        type: String,
-        default: null
-    },
-    rowsPerPageLabel: {
-        type: String,
-        default: "Records per page:"
-    },
-    rows: {
-        type: Array
-    },
-    rowKey: {
-        type: String,
-        default: null
-    },
-    modelName: {
-        type: String,
-        default: null
-    },
-    selection: {
-        type: String,
-        default: "none"
-    },
-    rowsPerPageOptions: {
-        type: Array,
-        default: () => [3, 5, 7, 10, 15, 20, 25, 50, 0]
-    }, pagination: {
-        type: Object,
-        default: () => {
-            return {
-                sortBy: "",
-                descending: true,
-                page: 1,
-                rowsPerPage: 10,
-            }
+export interface LTableProps extends QTableProps {
+    columns?: Array<LTableColumn>,
+    actions?: Array<string>,
+    sortBy?: string | null | undefined,
+    rowKey?: string,
+    modelName?: string | null | undefined,
+    searchable?: boolean | null | undefined,
+    selected?: Array<any>,
+}
+
+const props = withDefaults(defineProps<LTableProps>(), {
+    actions: () => [],
+    rowsPerPageLabel: "Records per page:",
+    selection: "none",
+    rowsPerPageOptions: () => [3, 5, 7, 10, 15, 20, 25, 50, 0],
+    pagination: () => {
+        return {
+            sortBy: null,
+            descending: true,
+            page: 1,
+            rowsPerPage: 10,
         }
     },
-    fullscreen: {
-        type: Boolean,
-        default: false
-    },
-    searchable: {
-        type: Boolean,
-        default: false
-    }
-})
+    fullscreen: false,
+    searchable: false,
+    selected: () => [],
+    loadingLabel: "Loading...",
+    noDataLabel: "No data available",
+});
 
+const light = useLight();
 
 const pagination = ref(props.pagination);
 
@@ -133,7 +105,8 @@ export interface LTableRequest {
 }
 
 const emits = defineEmits<{
-    request: [p: LTableRequest]
+    request: [p: LTableRequest],
+    "update:selected": [p: Array<any>]
 }>()
 
 const loading = ref(false);
@@ -181,8 +154,13 @@ const modelName = ref(props.modelName);
 
 
 const validateData = () => {
+    if (primaryKey.value == null) return;
+
     if (props.actions.includes("edit")) {
         if (rows.value.length > 0) {
+
+
+
             //get first row
             let row = rows.value[0];
             //check has primary key
@@ -416,6 +394,7 @@ const ss = Object.entries(slots).map(([key, value]) => {
 
 const qua = useQuasar();
 const onDelete = async (id: any) => {
+    if (modelName.value == null) return;
 
     try {
         await model(modelName.value).delete(id);
@@ -439,7 +418,14 @@ const attrs = {
         bordered: light.getStyle("tableBorder"),
         separator: light.getStyle("tableSeparator"),
     },
-    ...useAttrs()
+    ...useAttrs(),
+    title: props.title,
+    loadingLabel: t(props.loadingLabel),
+    noDataLabel: t(props.noDataLabel),
+    rowsPerPageOptions: props.rowsPerPageOptions,
+    rowsPerPageLabel: t(props.rowsPerPageLabel),
+    selection: props.selection,
+    rowKey: props.rowKey,
 }
 
 const filter = ref('');
@@ -499,6 +485,16 @@ const getCellClass = (col: any, row: any) => {
     return cl;
 }
 
+const localSelected = computed({
+    get() {
+        return props.selected;
+    },
+    set(val) {
+        console.log(val)
+        emits("update:selected", val);
+    }
+});
+
 </script>
 
 
@@ -509,33 +505,14 @@ const getCellClass = (col: any, row: any) => {
         </div>
     </template>
 
-    <template v-if="debug">
-        <pre>
-        primaryKey:{{ primaryKey }}
-        modelName:{{ modelName }}
-        filters:{{ filters }}
-        pagination:{{ pagination }}
-        actionView:{{ actionView }}
-        actionDelete:{{ actionDelete }}
-        activeEdit:{{ activeEdit }}
-        attrs:{{ attrs }}
-        $attrs:{{ $attrs }}
-    </pre>
-        rows:{{ props.rows }}
-    </template>
-
-    <q-table v-bind="attrs" :row-key="rowKey" :loading="loading" :rows="rows" ref="table" @request="onRequest"
-        :rows-per-page-label="$t(props.rowsPerPageLabel)" :columns="columns" :rows-per-page-options="rowsPerPageOptions"
-        :selection="selection" v-model:pagination="pagination" :filter="filter" :no-data-label="$t('No data available')"
-        :loading-label="$t('Loading...')">
-
-
-        <!-- template v-for="s in ss" v-slot:[s]="props">
-            <slot :name="s" v-bind="props"></slot>
-        </template -->
+    <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onRequest" :columns="columns"
+        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
 
         <template #header="props">
             <q-tr :props="props">
+                <q-td v-if="selection != 'none'" auto-width>
+                    <q-checkbox v-model="props.selected" />
+                </q-td>
                 <q-th v-if="hasRowExpand" auto-width></q-th>
                 <q-th v-if="hasActions" auto-width></q-th>
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
@@ -544,6 +521,9 @@ const getCellClass = (col: any, row: any) => {
 
         <template #body="props">
             <q-tr :props="props">
+                <q-td v-if="selection != 'none'" auto-width>
+                    <q-checkbox v-model="props.selected" />
+                </q-td>
                 <q-td v-if="hasRowExpand" auto-width>
                     <q-btn :class="{ 'text-grey-8': !isDark }" flat round dense
                         :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"
@@ -551,7 +531,7 @@ const getCellClass = (col: any, row: any) => {
                 </q-td>
 
                 <q-td v-if="hasActions" auto-width>
-                    <div :class="{ 'text-grey-8': !isDark }">
+                    <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
 
                         <l-view-btn v-if="actionView && props.row.canView"
                             :to="`/${modelName}/${props.row[primaryKey]}/view`" />

package/dist/runtime/formkit/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { getErrorMessage } from 'formkit-quasar';
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 const props = defineProps({
     context: Object
 });
@@ -10,18 +10,13 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key, value]) => {
-    return key;
-});
-
 const { error, errorMessage } = getErrorMessage(props.context.node);
 
-
 </script>
 <template>
     <l-checkbox v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-checkbox>
 </template>

package/dist/runtime/formkit/DatePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -13,13 +13,12 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
 </script>
 <template>
     <l-date-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-date-picker>
 </template>

package/dist/runtime/formkit/File.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 import { useLight } from '#imports';
 
@@ -15,8 +15,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
-
 const onBlur = () => {
     if (errorMessage.value) {
         error.value = true
@@ -44,8 +42,8 @@ const attrs = {
 <template>
     <q-file v-model="value" :label="context.label" v-bind="attrs" :error="error" :error-message="errorMessage"
         @blur="onBlur">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </q-file>
 </template>

package/dist/runtime/formkit/FilePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -13,8 +13,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
-
 const onBlur = () => {
     if (errorMessage.value) {
         error.value = true
@@ -26,8 +24,8 @@ const onBlur = () => {
 <template>
     <l-file v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage" @blur="onBlur">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-file>
 </template>

package/dist/runtime/formkit/Input.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -10,10 +10,30 @@ const { error, errorMessage } = getErrorMessage(props.context.node);
 
 const value = computed({
     get: () => props.context.value,
-    set: (val) => props.context.node.input(val)
-})
+    set: (val) => {
+        if (props.context.number !== undefined) {
+            if (val === "") {
+                props.context.node.input(0)
+                return
+            }
+
+            let tryprase = parseInt(val)
+            if (isNaN(tryprase)) {
+                props.context.node.input(val)
+                return
+            }
 
-const ss = Object.entries(useSlots()).map(([key]) => key);
+            if (props.context.number === "integer") {
+                props.context.node.input(parseInt(val))
+                return
+            }
+
+            props.context.node.input(parseFloat(val))
+        } else {
+            props.context.node.input(val)
+        }
+    }
+})
 
 const onBlur = () => {
     if (errorMessage.value) {
@@ -23,13 +43,13 @@ const onBlur = () => {
     }
 }
 
-
 </script>
 <template>
     <l-input v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage" @blur="onBlur">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-input>
 </template>

package/dist/runtime/formkit/Select.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { getErrorMessage } from 'formkit-quasar';
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 const props = defineProps({
     context: Object
 });
@@ -12,9 +12,6 @@ const value = computed({
     set: (val) => props.context.node.input(val)
 })
 
-const ss = Object.entries(useSlots()).map(([key, value]) => {
-    return key;
-});
 
 //check required in parsedRules
 let required = false;
@@ -37,8 +34,8 @@ if (required) { //no clearable
 <template>
     <l-select v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :error-message="errorMessage"
         :clearable="clearable">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-select>
 </template>

package/dist/runtime/formkit/TimePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import { getErrorMessage } from 'formkit-quasar';
 
 const props = defineProps({
@@ -12,14 +12,12 @@ const value = computed({
     get: () => props.context.value,
     set: (val) => props.context.node.input(val)
 })
-
-const ss = Object.entries(useSlots()).map(([key]) => key);
 </script>
 <template>
     <l-time-picker v-model="value" :label="context.label" v-bind="context.attrs" :error="error" :type="context.inputType"
         :error-message="errorMessage">
-        <template v-for="s in ss" v-slot:[s]="props" :key="s">
-            <slot :name="s" v-bind="props ?? {}"></slot>
+        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
+            <slot :name="name" v-bind="props ?? {}"></slot>
         </template>
     </l-time-picker>
 </template>

package/dist/runtime/formkit/index.mjs

@@ -58,7 +58,7 @@ export const createLightPlugin = () => {
       case "l-input":
         return node.define({
           type: "input",
-          props: ["inputType"],
+          props: ["inputType", "number"],
           component: Input
         });
       case "l-select":

package/dist/runtime/pages/User/index.vue

@@ -7,11 +7,13 @@ const onRequest = async (request) => {
 };
 const columns = model("User").columns(["username", "first_name", "label_name", "email", "phone", "join_date", "status"]);
 const status = ref("0");
+const selected = ref([]);
 </script>
 
 <template>
     <l-page>
 
+
         <l-tabs v-model="status">
             <l-tab label="Active" name="0">
                 <l-table row-key="user_id" @request="onRequest" :columns="columns"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",