@hostlink/nuxt-light 1.0.11 → 1.1.1

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.0.11"
+  "version": "1.1.1"
 }

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

@@ -3,7 +3,7 @@ import { useLight, watch } from "#imports";
 import { useRuntimeConfig } from 'nuxt/app'
 import { setApiUrl } from '@hostlink/light'
 import { Dialog } from 'quasar'
-import { q } from '../'
+import { q } from '#imports'
 import { useRoute } from "#vue-router";
 const config = useRuntimeConfig();
 setApiUrl(config?.public?.apiBase ?? '/api/');

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type QBannerProps, type QBannerSlots } from 'quasar'
+import { type QBannerProps } from 'quasar'
 import { computed, useSlots } from 'vue'
 
 export interface LBannerProps extends QBannerProps {

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

@@ -1,15 +1,37 @@
 <script setup lang="ts">
-import { ref, computed, useAttrs } from "vue";
+import { ref, computed } from "vue";
 import { useLight } from '#imports';
 
 import { type QDateProps } from "quasar";
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 export interface LDatePickerProps extends QDateProps {
     label?: string
     required?: boolean
+    hideBottomSpace?: boolean
+    filled?: boolean
+    outlined?: boolean
+    standout?: boolean
+    rounded?: boolean
+    dense?: boolean
+    square?: boolean
+    stackLabel?: boolean
+    rules?: any[]
 }
 
-const props = defineProps<LDatePickerProps>()
+const props = withDefaults(defineProps<LDatePickerProps>(), {
+    hideBottomSpace: true,
+    filled: undefined,
+    outlined: undefined,
+    standout: undefined,
+    rounded: undefined,
+    dense: undefined,
+    square: undefined,
+    stackLabel: undefined,
+    mask: "YYYY-MM-DD",
+})
 
 const light = useLight();
 
@@ -55,26 +77,41 @@ 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")
-}
+const input_attrs = computed(() => {
+    const attrs: any = {
+        label: props.label,
+        rules: rules,
+        hideBottomSpace: props.hideBottomSpace,
+        mask: props.range ? "####-##-## - ####-##-##" : "####-##-##"
+    }
+
+    if (props.filled == undefined) attrs.filled = light.getStyle("inputFilled");
+    if (props.outlined == undefined) attrs.outlined = light.getStyle("inputOutlined");
+    if (props.standout == undefined) attrs.standout = light.getStyle("inputStandout");
+    if (props.rounded == undefined) attrs.rounded = light.getStyle("inputRounded");
+    if (props.dense == undefined) attrs.dense = light.getStyle("inputDense");
+    if (props.square == undefined) attrs.square = light.getStyle("inputSquare");
+    if (props.stackLabel == undefined) attrs.stackLabel = light.getStyle("inputStackLabel");
+
+    if (props.label) {
+        attrs.label = t(props.label);
+    }
+    return attrs;
+})
+
+const date_attrs = computed(() => {
+    const { label, rules, hideBottomSpace, filled, outlined, standout, rounded, dense, square, stackLabel, ...rest } = props;
+    return rest;
+});
 
-const mask = props.range ? "####-##-## - ####-##-##" : "####-##-##";
 
 </script>
 <template>
-    <q-input v-bind="attrs" :label="$t(props.label ?? '')" v-model="localValue" :rules="rules" hide-bottom-space
-        :mask="mask">
+    <q-input v-bind="input_attrs" v-model="localValue" :rules="rules">
         <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">
-                    <q-date v-model="localValue" mask="YYYY-MM-DD" :range="range">
+                    <q-date v-bind="date_attrs" v-model="localValue">
                         <div class="row items-center justify-end">
                             <q-btn v-close-popup label="Close" color="primary" flat />
                         </div>

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

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, ref, useAttrs } from "vue";
+import { type QEditorProps, useQuasar } from "quasar"
+
+const $q = useQuasar();
+
+export interface LEditorProps extends QEditorProps {
+    
+}
+
+const emit = defineEmits(["update:modelValue"]);
+
+const props = withDefaults(defineProps<LEditorProps>(), {
+    modelValue: "",
+    placeholder: "type something",
+    dense: false,
+    toolbar: undefined,
+    fonts: undefined,
+})
+
+const localValue = computed({
+    get: () => props.modelValue,
+    set: (value) => emit('update:modelValue', value)
+});
+
+const attrs = computed(() => {
+    const a = { ...props };
+    if (props.toolbar === undefined) a.toolbar = newToolBar;
+    if (props.fonts === undefined) a.fonts = newFonts;
+    return a;
+});
+
+
+const newToolBar = [
+    [
+        {
+            label: $q.lang.editor.align,
+            icon: $q.iconSet.editor.align,
+            fixedLabel: true,
+            list: 'only-icons',
+            options: ['left', 'center', 'right', 'justify']
+        },
+        {
+            label: $q.lang.editor.align,
+            icon: $q.iconSet.editor.align,
+            fixedLabel: true,
+            options: ['left', 'center', 'right', 'justify']
+        }
+    ],
+    ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
+    ['token', 'hr', 'link', 'custom_btn'],
+    ['print', 'fullscreen'],
+    [
+        {
+            label: $q.lang.editor.formatting,
+            icon: $q.iconSet.editor.formatting,
+            list: 'no-icons',
+            options: [
+                'p',
+                'h1',
+                'h2',
+                'h3',
+                'h4',
+                'h5',
+                'h6',
+                'code'
+            ]
+        },
+        {
+            label: $q.lang.editor.fontSize,
+            icon: $q.iconSet.editor.fontSize,
+            fixedLabel: true,
+            fixedIcon: true,
+            list: 'no-icons',
+            options: [
+                'size-1',
+                'size-2',
+                'size-3',
+                'size-4',
+                'size-5',
+                'size-6',
+                'size-7'
+            ]
+        },
+        {
+            label: $q.lang.editor.defaultFont,
+            icon: $q.iconSet.editor.font,
+            fixedIcon: true,
+            list: 'no-icons',
+            options: [
+                'default_font',
+                'arial',
+                'arial_black',
+                'comic_sans',
+                'courier_new',
+                'impact',
+                'lucida_grande',
+                'times_new_roman',
+                'verdana'
+            ]
+        },
+        'removeFormat'
+    ],
+    ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
+
+    ['undo', 'redo'],
+    ['viewsource']
+];
+
+const newFonts = {
+    arial: 'Arial',
+    arial_black: 'Arial Black',
+    comic_sans: 'Comic Sans MS',
+    courier_new: 'Courier New',
+    impact: 'Impact',
+    lucida_grande: 'Lucida Grande',
+    times_new_roman: 'Times New Roman',
+    verdana: 'Verdana'
+};
+
+</script>
+
+<template>
+    <div class="q-pa-md q-gutter-sm">
+        <q-editor v-bind="attrs" v-model="localValue" />
+    </div>
+</template>

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

@@ -1,17 +1,32 @@
-<script setup>
-import { useLight, useAttrs } from '#imports';
-const props = defineProps(['label']);
+<script setup lang="ts">
+import { useLight } from '#imports';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { QFieldProps } from 'quasar';
+
+const props = defineProps<QFieldProps>()
 const light = useLight();
+const { t } = useI18n();
 
-const attrs = {
-    ...{
+const attrs = computed(() => {
+
+    const a = {
+        ...props,
         outlined: light.getStyle("inputOutlined"),
-    },
-    ...useAttrs()
-}
+    };
+
+    if (props.label) {
+        a.label = t(props.label);
+    }
+
+
+    return a;
+});
+
 </script>
 <template>
-    <q-field v-bind="attrs" :label="$t(props.label ?? '')">
+    <q-field v-bind="attrs">
         <slot></slot>
     </q-field>
 </template>

package/dist/runtime/components/l-file-upload.vue

@@ -64,6 +64,33 @@ const attrs = computed(() => {
     return a;
 });
 
+
+//@param bytes Number of bytes.
+//@param si True to use metric (SI) units, aka powers of 1000. False to use binary (IEC), aka powers of 1024.
+//@param dp Number of decimal places to display.
+const humanFileSize = (bytesSize, si = false, dp = 1) => {
+    const thresh = si ? 1000 : 1024;
+
+    if (Math.abs(bytesSize) < thresh) {
+        return bytesSize + ' B';
+    }
+
+    const units = si
+        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+        : ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; //: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    let u = -1;
+    const r = 10 ** dp;
+
+    do {
+        bytesSize /= thresh;
+        ++u;
+    } while (Math.round(Math.abs(bytesSize) * r) / r >= thresh && u < units.length - 1);
+
+    return bytesSize.toFixed(dp) + ' ' + units[u];
+}
+
+
+
 const uploadFile = ref<File | null>(null);
 const rename = ref(true);
 
@@ -82,7 +109,7 @@ const onUploadFile = async () => {
     if (uploadFile.value.size > system.maxUploadSize) {
         Dialog.create({
             title: "Error",
-            message: "File size is too big. Max size is " + system.maxUploadSize + " bytes",
+            message: "File size is too big. Max size is " + humanFileSize(system.maxUploadSize, false, 0),
             color: "negative"
         });
         return;
@@ -134,11 +161,11 @@ const onUploadFile = async () => {
         <q-dialog v-model="show" persistent transition-show="scale" transition-hide="scale">
             <l-card style="width:300px">
                 <q-card-section>
-                    <q-file ref="file" v-model="uploadFile" name="file" :label="$t('File')" :accept="accept" :hint="`Max upload size: ${system.maxUploadSize} bytes`"></q-file>
+                    <q-file ref="file" v-model="uploadFile" name="file" :label="$t('File')" :accept="accept"
+                        :hint="`Max upload size: ${humanFileSize(system.maxUploadSize, false, 0)}`"></q-file>
                     <!-- q-checkbox v-model="rename" :label="$t('Rename file if exists')"></q-checkbox-->
-                    
-                    
                 </q-card-section>
+
                 <q-card-actions align="right">
                     <q-btn flat :label="$t('Cancel')" color="primary" v-close-popup></q-btn>
                     <q-btn flat :label="$t('Upload')" color="primary" @click="onUploadFile"></q-btn>

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

@@ -1,49 +1,41 @@
-<script setup>
-import { computed, ref, useAttrs } from "vue";
+<script setup lang="ts">
+import { computed, ref } from "vue";
 import { useI18n } from 'vue-i18n';
 import tc2sc from "../lib/tc2sc";
 import { useLight } from '#imports';
 
+import type { QInputProps } from "quasar";
+export interface LInputProps extends QInputProps {
+    showPassword?: boolean;
+    translate?: boolean;
+    required?: boolean;
+}
+
 const i18n = useI18n();
 const light = useLight();
 
-const props = defineProps({
-    modelValue: {
-    },
-    rules: {
-        type: Array,
-        default: () => []
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    label: {
-        type: String,
-        default: ""
-    },
-    type: {
-        type: String,
-        default: "text"
-    },
-    showPassword: {
-        type: Boolean,
-        default: false
-    },
-    translate: {
-        type: Boolean,
-        default: false
-    }
+const props = withDefaults(defineProps<LInputProps>(), {
+    showPassword: false,
+    translate: false,
+    outlined: undefined,
+    filled: undefined,
+    standout: undefined,
+    rounded: undefined,
+    dense: undefined,
+    square: undefined,
+    stackLabel: undefined,
+    required: false,
+    hideBottomSpace: true,
 });
+
 const emit = defineEmits(["update:modelValue"]);
 
 //clone rules to new_rules
 const new_rules = props.rules || [];
 
-
 //has required prop (in properties)
-if (props.required || (new_rules.indexOf("required") >= 0)) {
-    new_rules.push(val => !!val || i18n.t('input_required', [i18n.t(props.label)]));
+if (props.required) {
+    new_rules.push(val => !!val || i18n.t('input_required', [i18n.t(props.label ?? "")]));
 }
 
 if (props.type == "email") {
@@ -101,24 +93,11 @@ if (minLength) {
     });
 }
 
-
-
-
-
-
 const localValue = computed({
     get: () => props.modelValue,
     set: (value) => emit('update:modelValue', value)
 });
 
-const localLabel = computed(() => {
-    if (props.required && !localValue.value) {
-        return i18n.t(props.label);
-    }
-    return i18n.t(props.label);
-
-});
-
 const isShowPassword = ref(false);
 
 const localType = computed(() => {
@@ -128,8 +107,6 @@ const localType = computed(() => {
     return props.type;
 });
 
-
-
 const localShowPassword = computed(() => {
     if (props.type != "password") {
         return false;
@@ -142,32 +119,31 @@ const localShowPassword = computed(() => {
     if (!localValue.value) {
         return false;
     }
-
     return true;
-
 });
 
-
 const onClickTc2Sc = () => {
     localValue.value = tc2sc(localValue.value);
 }
 
-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(() => {
+    const a = { ...props };
+    if (props.outlined === undefined) a.outlined = light.getStyle("inputOutlined");
+    if (props.filled === undefined) a.filled = light.getStyle("inputFilled");
+    if (props.standout === undefined) a.standout = light.getStyle("inputStandout");
+    if (props.rounded === undefined) a.rounded = light.getStyle("inputRounded");
+    if (props.dense === undefined) a.dense = light.getStyle("inputDense");
+    if (props.square === undefined) a.square = light.getStyle("inputSquare");
+    if (props.stackLabel === undefined) a.stackLabel = light.getStyle("inputStackLabel");
+
+    if (props.label) {
+        a.label = i18n.t(props.label);
+    }
+    return a;
+})
 </script>
 <template>
-    <q-input v-bind="attrs" :label="localLabel" v-model="localValue" :rules="new_rules" hide-bottom-space :type="localType">
+    <q-input v-bind="attrs" v-model="localValue" :rules="new_rules"  :type="localType">
         <template v-if="translate" #prepend>
             <q-btn icon="sym_o_translate" flat dense rounded>
                 <q-menu dense>

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

@@ -1,22 +1,21 @@
-<script setup>
-const props = defineProps({
-    label: {
-        type: String,
-    },
-    type: {
-        type: String,
-        default: "text"
-    }, name: {
-        type: String,
-        default: null
-    }
+<script setup lang="ts">
+import type { QItemProps } from 'quasar';
 
+export interface LItemProps extends QItemProps {
+    label?: string;
+    type?: 'text' | 'caption';
+    name?: string;
+}
+
+withDefaults(defineProps<LItemProps>(), {
+    label: '',
+    type: 'text'
 });
 
 
 </script>
 <template>
-    <q-item>
+    <q-item v-bind="$props">
         <q-item-section>
             <q-item-label>{{ $t(label) }}</q-item-label>
             <q-item-label caption v-if="type == 'caption'">

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

@@ -1,18 +1,22 @@
-<script setup>
-
-const props = defineProps({
-    modelValue: {
-        type: Object
-    },
-    fields: {
-        type: Array
-    }
-})
+<script setup lang="ts">
+
+import type { QListProps } from 'quasar';
+
+export interface LListProps extends QListProps {
+    fields?: any[];
+    modelValue?: any;
+}
+
+const props = withDefaults(defineProps<LListProps>(), {
+    bordered: true,
+    separator: true,
+    dense: true,
+});
 
 function getTo(field) {
 
-    const raw=field.getRaw();
-    
+    const raw = field.getRaw();
+
     if (raw.to) {
         if (raw.to instanceof Function) {
             return raw.to(props.modelValue);
@@ -26,10 +30,9 @@ function getTo(field) {
     return null;
 }
 
-
 </script>
 <template>
-    <q-list bordered separator dense >
+    <q-list v-bind="$props">
         <template v-if="fields">
             <l-item v-for="field in fields" :label="field.getRaw().label" :to="getTo(field)">
                 {{ field.getFormattedValue(props.modelValue) }}

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

@@ -194,8 +194,8 @@ onMounted(() => {
       <q-form ref="form1">
         <div class="q-gutter-sm">
           <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
-            clearable :outlined="false" />
-          <l-input v-model="data.password" label="Password" type="password" clearable show-password
+            clearable :outlined="false" stackLabel/>
+          <l-input v-model="data.password" label="Password" type="password" clearable show-password stackLabel
             :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false" />
           <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code" required type="text" clearable>
           </l-input>

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

@@ -1,75 +1,32 @@
-<script setup>
+<script setup lang="ts">
 import { useHead, useLight } from "#imports";
 import { useRouter, useRoute } from "vue-router"
 import { model, getID } from '../'
+import type { QPageProps } from "quasar";
+import { computed } from 'vue'
 
 const router = useRouter();
 const route = useRoute();
 const light = useLight();
 
-const props = defineProps({
-    type: {
-        type: String,
-        default: "view"
-    },
-    title: {
-        type: String,
-        default: ""
-    },
-    backBtn: {
-        type: Boolean,
-        default: false
-    },
-    editBtn: {
-        type: Boolean,
-        default: false
-    },
-    deleteBtn: {
-        type: Boolean,
-        default: false
-    },
-    addBtn: {
-        type: Boolean,
-        default: false
-    },
-});
-
-let showToolbar = false;
-let showBackBtn = false;
-let showEditBtn = false;
-let showAddBtn = false;
-let showDeleteBtn = false;
-
-
-if (props.type == "edit") {
-    showToolbar = true
-    showBackBtn = true
-}
-
-if (props.type == "add") {
-    showToolbar = true
-    showBackBtn = true
-}
-
-if (props.type == "view") {
-    showToolbar = true
-    showBackBtn = true
+export interface LPageProps extends QPageProps {
+    title?: string;
+    backBtn?: boolean;
+    editBtn?: boolean;
+    deleteBtn?: boolean;
+    addBtn?: boolean;
 }
 
-if (props.editBtn) {
-    showToolbar = true
-    showEditBtn = true
-}
-
-if (props.deleteBtn) {
-    showToolbar = true
-    showDeleteBtn = true
-}
+const props = withDefaults(defineProps<LPageProps>(), {
+    title: "",
+    backBtn: true,
+});
 
-if (props.addBtn) {
-    showToolbar = true
-    showAddBtn = true
-}
+const showToolbar = computed(() => {
+    if (props.backBtn || props.editBtn || props.deleteBtn || props.addBtn) {
+        return true
+    }
+});
 
 let title = props.title || route.path.split("/")[1].replace(/([a-z])(?=[A-Z])/g, '$1 ').replace(/([A-Z]*)(?=[A-Z][a-z])/g, '$1 ')
 
@@ -80,9 +37,13 @@ title = title.trim()
 const module = route.path.split("/")[1];
 const onDelete = async () => {
 
-    if (await model(module).delete(getID())) {
-        router.push(`/${module}`);
+    const id = getID();
+    if (id) {
+        if (await model(module).delete(id)) {
+            router.push(`/${module}`);
+        }
     }
+
 }
 
 useHead({
@@ -99,10 +60,10 @@ useHead({
         </q-breadcrumbs -->
 
         <q-toolbar v-if="showToolbar">
-            <l-back-btn v-if="showBackBtn" />
-            <l-add-btn v-if="showAddBtn" />
-            <l-edit-btn v-if="showEditBtn" />
-            <l-delete-btn v-if="showDeleteBtn" @submit="onDelete" />
+            <l-back-btn v-if="backBtn" />
+            <l-add-btn v-if="addBtn" />
+            <l-edit-btn v-if="editBtn" />
+            <l-delete-btn v-if="deleteBtn" @submit="onDelete" />
             <q-toolbar-title>{{ $t(title) }}</q-toolbar-title>
         </q-toolbar>
 

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

@@ -1,5 +1,6 @@
-<script setup>
-
+<script setup lang="ts">
+import type { QTabProps } from 'quasar';
+defineProps<QTabProps>()
 </script>
 <template>
     <q-tab></q-tab>

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

@@ -300,7 +300,7 @@ const onRequest = async (p: any) => {
                 name: true
             }
         },
-        setData(data: { data: Array<{ data: any }>, meta: { total: Number, key: string, name: string } }) {
+        setData(data: { data: Array<{ data: any }>, meta: { total: number, key: string, name: string } }) {
             rows.value = data.data;
             primaryKey.value = data.meta.key;
             modelName.value = data.meta.name;
@@ -411,22 +411,23 @@ const onDelete = async (id: any) => {
     }
 }
 
-const attrs = {
-    ...{
-        dense: light.getStyle("tableDense"),
-        flat: light.getStyle("tableFlat"),
-        bordered: light.getStyle("tableBorder"),
-        separator: light.getStyle("tableSeparator"),
-    },
-    ...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 attrs = computed(() => {
+    return {
+        ...{
+            dense: light.getStyle("tableDense"),
+            flat: light.getStyle("tableFlat"),
+            bordered: light.getStyle("tableBorder"),
+            separator: light.getStyle("tableSeparator"),
+        },
+        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('');
 

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

@@ -1,9 +1,14 @@
-<script setup>
-import { useLight } from '../'
+<script setup lang="ts">
+import { useLight } from '#imports'
 import { useSlots, computed, ref } from 'vue';
+import type { QTabsProps } from 'quasar';
+
+interface LTabsProps extends QTabsProps {
+
+}
 
 const light = useLight();
-const props = defineProps(["modelValue"])
+const props = defineProps<LTabsProps>()
 const emit = defineEmits(["update:modelValue"])
 const slots = useSlots();
 const defaultSlots = slots.default();
@@ -32,7 +37,7 @@ const localValue = computed({
     }
 })
 
-const color = light.getStyle("color", 'primary');
+const color = light.getStyle("color");
 
 </script>
 

package/dist/runtime/formkit/Editor.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import { getErrorMessage } from 'formkit-quasar';
+
+const props = defineProps({
+    context: Object
+});
+
+const { error, errorMessage } = getErrorMessage(props.context.node);
+
+const value = computed({
+    get: () => props.context.value,
+    set: (val) => props.context.node.input(val)
+})
+
+</script>
+<template>
+    <l-editor v-model="value" :label="context.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">
+            <slot :name="name" v-bind="props ?? {}"></slot>
+        </template> -->
+    </l-editor>
+</template>

package/dist/runtime/formkit/Repeater.vue

@@ -59,12 +59,11 @@ const isAllowMoveDown = (index) => {
     return index < localValue.value.length - 1
 }
 
-
-
 </script>
 
 <template>
-    <FormKit type="list" v-model="localValue" dynamic #default="{ items, node, value }">
+    <FormKit type="list" v-model="localValue" dynamic #default="{ items, node, value }" :name="node.name">
+        
 
         <FormKit type="group" v-for="(item, index) in  items " :index="index" :key="item">
 
@@ -76,7 +75,7 @@ const isAllowMoveDown = (index) => {
                             <div class="q-mb-sm">
                                 <!-- up -->
                                 <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward" color="primary"
-                                    dense unelevated :disable="!isAllowMoveUp(index)"/>
+                                    dense unelevated :disable="!isAllowMoveUp(index)" />
                             </div>
 
                             <div class="q-mb-sm">
@@ -88,13 +87,13 @@ const isAllowMoveDown = (index) => {
                             <div class="q-mb-sm">
                                 <!-- down -->
                                 <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward" color="primary"
-                                    dense unelevated :disable="!isAllowMoveDown(index)"/>
+                                    dense unelevated :disable="!isAllowMoveDown(index)" />
                             </div>
 
                         </div>
 
                         <div class="col">
-                            <slot></slot>
+                            <slot v-bind="{ value: localValue[index] }"></slot>
                         </div>
                     </div>
                 </q-card-section>

package/dist/runtime/formkit/index.mjs

@@ -12,10 +12,16 @@ import FilePickerVue from "./FilePicker.vue";
 import FileVue from "./File.vue";
 import InputXlsxVue from "./InputXlsx.vue";
 import FileUploadVue from "./FileUpload.vue";
+import EditorVue from "./Editor.vue";
 export const createLightPlugin = () => {
   return (node) => {
     let type = node.props.type + "";
     switch (type) {
+      case "l-editor":
+        return node.define({
+          type: "input",
+          component: EditorVue
+        });
       case "l-file-upload":
         return node.define({
           type: "input",
@@ -74,7 +80,7 @@ export const createLightPlugin = () => {
         });
       case "l-repeater":
         return node.define({
-          type: "list",
+          type: "input",
           props: ["min", "max"],
           component: RepeaterVue
         });

package/dist/runtime/lib/getID.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => Number | null;
+declare const _default: () => number | null;
 export default _default;

package/package.json

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