@hostlink/nuxt-light 1.66.0 → 1.67.0

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

@@ -21,7 +21,7 @@ const columns = [
   {
     name: "value",
     label: "Value",
-    whiteSpace: "pre-wrap"
+    style: "white-space: normal; word-break: break-all;"
   }
 ];
 </script>

package/dist/runtime/pages/System/menu/index.vue

@@ -264,7 +264,11 @@ const menusOnly = computed(() => {
                                 <l-input label="Label" v-model="selectedNode.label" />
                                 <l-input label="To" v-model="selectedNode.to" />
                                 <l-input label="Icon" v-model="selectedNode.icon"
-                                    hint="example: sym_o_add, fas fa-ambulance, mdi-alert-circle-outline" />
+                                    hint="example: sym_o_add, fas fa-ambulance, mdi-alert-circle-outline">
+                                    <template #append>
+                                        <l-icon-picker v-model="selectedNode.icon" dense />
+                                    </template>
+                                </l-input>
                                 <l-input label="Permission" v-model="selectedNode.permission" />
                                 <l-input label="UUID" v-model="selectedNode.uuid" readonly />
                             </div>

package/dist/runtime/pages/System/setting.vue

@@ -52,6 +52,7 @@ const onSubmit = async (d) => {
                         <q-tab name="forget-password" icon="sym_o_lock" :label="$t('Forget password')" />
                         <q-tab name="authentication" icon="sym_o_passkey" :label="$t('Authentication')" />
                         <q-tab name="developer" icon="sym_o_code" :label="$t('Developer')" />
+                        <q-tab name="logs" icon="sym_o_event_note" :label="$t('Logs')" />
                     </q-tabs>
                 </template>
                 <template #after>
@@ -62,6 +63,7 @@ const onSubmit = async (d) => {
                     <l-system-setting-developer v-if="tab == 'developer'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-forget-password v-if="tab == 'forget-password'" v-bind="obj" @submit="onSubmit" />
                     <l-system-setting-authentication v-if="tab == 'authentication'" v-bind="obj" @submit="onSubmit" />
+                    <l-system-setting-logs v-if="tab == 'logs'" />
 
                 </template>
             </q-splitter>

package/dist/runtime/pages/System/view_as.vue

@@ -1,7 +1,10 @@
 <script setup>
-import { list, m, useLight } from "#imports";
+import { list, m, useLight, navigateTo } from "#imports";
 import { ref, computed } from "vue";
 const light = useLight();
+if (!light.isGranted("system.view_as")) {
+  await navigateTo("/");
+}
 let users = await list("User", {
   user_id: true,
   username: true,

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

@@ -1,6 +1,9 @@
 <script setup>
 import { model } from "#imports";
-const columns = model("SystemValue").columns(["name", "value"]);
+const columns = model("SystemValue").columns({
+  name: true,
+  value: true
+});
 </script>
 
 <template>

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

@@ -7,7 +7,8 @@ const token = ref(null);
 const expiresOptions = [
   { label: "7 \u65E5", value: 7 * 24 * 60 * 60 },
   { label: "30 \u65E5", value: 30 * 24 * 60 * 60 },
-  { label: "3 \u500B\u6708", value: 90 * 24 * 60 * 60 }
+  { label: "3 \u500B\u6708", value: 90 * 24 * 60 * 60 },
+  { label: "\u4E0D\u9650\u6642\u9593", value: 0 }
 ];
 const onSubmit = async (data) => {
   token.value = null;

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

@@ -2,10 +2,10 @@
     <l-page>
         <l-tabs route>
             <l-tab label="Active" name="active">
-                <user-list :status="0" name="user-active" />
+                <l-user-list :status="0" name="user-active" />
             </l-tab>
             <l-tab label="Inactive" name="inactive">
-                <user-list :status="1" name="user-inactive" />
+                <l-user-list :status="1" name="user-inactive" />
             </l-tab>
         </l-tabs>
     </l-page>

package/dist/runtime/pages/User/profile.d.vue.ts

@@ -1,3 +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;
-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>;

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

@@ -1,7 +1,8 @@
 <script setup>
-import { q, getGQLFields, model } from "#imports";
+import { q, getGQLFields, model, m, useLight } from "#imports";
+import { reactive } from "vue";
 import { toQuery } from "@hostlink/light";
-const { my } = await q({
+const { my, listAPIKey: _listAPIKey } = await q({
   my: {
     user_id: true,
     username: true,
@@ -36,8 +37,19 @@ const { my } = await q({
         ...toQuery(getGQLFields("EventLog", ["class", "id", "action", "created_time"]))
       }
     }
+  },
+  listAPIKey: {
+    __args: {
+      sort: "apikey_id:desc"
+    },
+    data: {
+      apikey_id: true,
+      name: true,
+      created_time: true
+    }
   }
 });
+const listAPIKey = reactive(_listAPIKey);
 const userlogColumns = model("UserLog").columns(["login_dt", "result", "user_agent"]);
 userlogColumns.forEach((col) => {
   col.searchable = false;
@@ -46,6 +58,25 @@ const eventLogCols = model("EventLog").columns(["class", "action", "created_time
 eventLogCols.forEach((col) => {
   col.searchable = false;
 });
+const apiKeyCols = model("APIKey").columns(["name", "created_time"]);
+apiKeyCols.forEach((col) => {
+  col.searchable = false;
+});
+apiKeyCols.push({ name: "_delete", label: "", field: "_delete", align: "right" });
+const light = useLight();
+const deleteToken = async (id) => {
+  light.dialog({
+    title: "Delete Token",
+    message: "Are you sure you want to delete this token?",
+    cancel: true,
+    persistent: true
+  }).onOk(async () => {
+    await m("deleteAPIKey", { id });
+    const idx = listAPIKey.data.findIndex((r) => r.apikey_id === id);
+    if (idx !== -1) listAPIKey.data.splice(idx, 1);
+    light.notify({ type: "positive", message: "Token deleted" });
+  });
+};
 </script>
 
 <template>
@@ -70,7 +101,7 @@ eventLogCols.forEach((col) => {
 
                     <q-separator />
                     <l-list :bordered="false">
-                        <q-item-label header>{{ $t('Details') }}</q-item-label>
+                        <q-item-label header>{{ $t("Details") }}</q-item-label>
                         <l-item label="Username">{{ my.username }}</l-item>
                         <l-item label="First name">{{ my.first_name }}</l-item>
                         <l-item label="Last name">{{ my.last_name }}</l-item>
@@ -84,12 +115,24 @@ eventLogCols.forEach((col) => {
 
             <l-col md="8">
                 <l-tabs>
-                    <l-tab label="User Log" name="user_log">
+                    <l-tab label="User Log" name="user_log" icon="sym_o_manage_accounts">
                         <l-table :rows="my.userLog.data" searchable :columns="userlogColumns" hide-pagination />
                     </l-tab>
-                    <l-tab label="Event Log" name="event_log">
+                    <l-tab label="Event Log" name="event_log" icon="sym_o_history">
                         <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable hide-pagination />
                     </l-tab>
+                    <l-tab label="Access Tokens" name="access_tokens" icon="sym_o_token">
+                        <l-table :rows="listAPIKey.data" :columns="apiKeyCols" hide-pagination row-key="apikey_id">
+                            <template #body-cell-_delete="props">
+                                <q-td :props="props">
+                                    <q-btn flat round dense icon="sym_o_delete" color="negative"
+                                        @click="deleteToken(props.row.apikey_id)">
+                                        <q-tooltip>Delete</q-tooltip>
+                                    </q-btn>
+                                </q-td>
+                            </template>
+                        </l-table>
+                    </l-tab>
                 </l-tabs>
             </l-col>
         </l-row>

package/dist/runtime/pages/User/profile.vue.d.ts

@@ -1,3 +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;
-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>;

package/dist/runtime/plugin.js

@@ -1,10 +1,9 @@
 import QMarkdownVuePlugin from "@quasar/quasar-ui-qmarkdown";
 import "@quasar/quasar-ui-qmarkdown/dist/index.css";
 import { createClient, setApiClient, defineModel } from "@hostlink/light";
-import { q } from "#imports";
 import { createI18n } from "vue-i18n";
 import createLight from "./composables/createLight.js";
-import { addRouteMiddleware, defineNuxtPlugin, useRoute } from "#app";
+import { defineNuxtPlugin, useRoute, useRuntimeConfig } from "#app";
 import "./assets/main.css";
 import message_en from "./locales/en.json";
 import message_zh from "./locales/zh-hk.json";
@@ -16,26 +15,6 @@ import getApiBase from "./composables/getApiBase.js";
 import useLight from "./composables/useLight.js";
 import { zhTW } from "@formkit/i18n";
 export default defineNuxtPlugin((nuxtApp) => {
-  addRouteMiddleware("auth", async (to, from) => {
-    if (to.path == "/") {
-      return;
-    }
-    const { my } = await q({
-      my: {
-        allowedPath: {
-          __args: {
-            path: to.path
-          }
-        }
-      }
-    });
-    if (!my) {
-      return;
-    }
-    if (!my.allowedPath) {
-      return "/page_not_found?path=" + encodeURIComponent(to.fullPath);
-    }
-  }, { global: true });
   const client = createClient(getApiBase());
   setApiClient(client);
   defineModel("Permission", {}).setDataPath("app.listPermission");
@@ -43,14 +22,14 @@ export default defineNuxtPlugin((nuxtApp) => {
   defineModel("Config", {}).setDataPath("app.listConfig");
   nuxtApp.vueApp.config.errorHandler = (err, instance, info) => {
     const $route = useRoute();
-    const light = useLight();
-    if (light.devMode) {
+    const light2 = useLight();
+    if (light2.devMode) {
       console.log(err);
     }
     if (err instanceof Error) {
-      light.addError(err.message + " at " + $route.fullPath);
+      light2.addError(err.message + " at " + $route.fullPath);
     } else {
-      light.addError(JSON.stringify(err) + " at " + $route.fullPath);
+      light2.addError(JSON.stringify(err) + " at " + $route.fullPath);
     }
   };
   nuxtApp.vueApp.use(QMarkdownVuePlugin);
@@ -65,6 +44,14 @@ export default defineNuxtPlugin((nuxtApp) => {
     fallbackWarn: false,
     missingWarn: false
   });
+  const light = useLight();
+  const runtimeLight = useRuntimeConfig().public.light;
+  if (runtimeLight?.tableActionIcons) {
+    const t = runtimeLight.tableActionIcons;
+    if (t.view) light.styles.table.actionIcons.view = t.view;
+    if (t.edit) light.styles.table.actionIcons.edit = t.edit;
+    if (t.delete) light.styles.table.actionIcons.delete = t.delete;
+  }
   nuxtApp.vueApp.use(createLight({
     i18n
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.66.0",
+  "version": "1.67.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",
@@ -21,6 +21,7 @@
   "scripts": {
     "prepack": "nuxt-module-build build",
     "dev": "nuxi dev playground --public",
+    "dev:docs": "nuxi dev docs",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release:org": "npm run lint && npm run test && npm run prepack && npm publish && git push --follow-tags",

package/dist/runtime/components/MyTest.vue

@@ -1,11 +0,0 @@
-<script setup>
-const props = defineProps({
-  test: String
-});
-</script>
-
-<template>
-    <div>
-        {{ props }}
-    </div>
-</template>

package/dist/runtime/components/l-dialog-database-field-add.d.vue.ts

@@ -1,9 +0,0 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    hide: (...args: any[]) => void;
-    ok: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onHide?: ((...args: any[]) => any) | undefined;
-    onOk?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/l-dialog-database-field-add.vue.d.ts

@@ -1,9 +0,0 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    hide: (...args: any[]) => void;
-    ok: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onHide?: ((...args: any[]) => any) | undefined;
-    onOk?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/l-input-xlsx.d.vue.ts

@@ -1,11 +0,0 @@
-declare const modelValue: import("vue").ModelRef<unknown[], string, unknown[], unknown[]>;
-type __VLS_ModelProps = {
-    modelValue?: typeof modelValue['value'];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: unknown[]) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: unknown[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,60 +0,0 @@
-<script setup>
-import * as XLSX from "xlsx";
-import { ref } from "vue";
-const modelValue = defineModel({
-  type: Array,
-  default: []
-});
-const loading = ref(false);
-const hasFile = ref(false);
-const file = ref(null);
-const onChange = () => {
-  hasFile.value = true;
-  loading.value = true;
-  file.value.files[0].arrayBuffer().then((data) => {
-    const workbook = XLSX.read(data);
-    const sheet = workbook.Sheets[workbook.SheetNames[0]];
-    const json = XLSX.utils.sheet_to_json(sheet);
-    loading.value = false;
-    modelValue.value = json;
-  });
-};
-const onClear = () => {
-  hasFile.value = false;
-  modelValue.value = [];
-};
-const showView = ref(false);
-</script>
-
-<template>
-    <q-field v-bind="{ ...$light.styles.input, ...$attrs }" :loading="loading" :model-value="localData"
-        @update:model-value="onClear">
-        <template v-slot:control>
-            <template v-if="!hasFile">
-                <input type="file" accept=".xlsx" @change="onChange" ref="file" />
-            </template>
-
-            <template v-else>
-                {{ modelValue.length }} records
-            </template>
-
-        </template>
-
-        <template v-slot:prepend v-if="hasFile">
-            <q-icon name="sym_o_table_view" @click="showView = true" class="cursor-pointer" />
-        </template>
-
-        <template v-slot:append v-if="hasFile">
-            <q-icon name="cancel" @click="onClear" class="cursor-pointer" />
-        </template>
-
-        <q-dialog v-model="showView" full-width>
-            <q-card>
-                <q-card-section>
-                    <q-table :rows="modelValue" dense separator="cell" flat bordered></q-table>
-                </q-card-section>
-            </q-card>
-        </q-dialog>
-
-    </q-field>
-</template>

package/dist/runtime/components/l-input-xlsx.vue.d.ts

@@ -1,11 +0,0 @@
-declare const modelValue: import("vue").ModelRef<unknown[], string, unknown[], unknown[]>;
-type __VLS_ModelProps = {
-    modelValue?: typeof modelValue['value'];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: unknown[]) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: unknown[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,20 +0,0 @@
-import type { QSelectProps } from "quasar";
-declare const __VLS_export: import("vue").DefineComponent<QSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QSelectProps> & Readonly<{}>, {
-    dark: boolean | null;
-    rounded: boolean;
-    square: boolean;
-    dense: boolean;
-    outlined: boolean;
-    optionValue: string | ((option: string | any) => any);
-    filled: boolean;
-    stackLabel: boolean;
-    standout: string | boolean;
-    hideBottomSpace: boolean;
-    emitValue: boolean;
-    mapOptions: boolean;
-    inputDebounce: string | number;
-    optionLabel: string | ((option: string | any) => string);
-    optionsDark: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,20 +0,0 @@
-import type { QSelectProps } from "quasar";
-declare const __VLS_export: import("vue").DefineComponent<QSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<QSelectProps> & Readonly<{}>, {
-    dark: boolean | null;
-    rounded: boolean;
-    square: boolean;
-    dense: boolean;
-    outlined: boolean;
-    optionValue: string | ((option: string | any) => any);
-    filled: boolean;
-    stackLabel: boolean;
-    standout: string | boolean;
-    hideBottomSpace: boolean;
-    emitValue: boolean;
-    mapOptions: boolean;
-    inputDebounce: string | number;
-    optionLabel: string | ((option: string | any) => string);
-    optionsDark: boolean | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,30 +0,0 @@
-<script setup>
-import { getCurrentInstance } from "vue";
-const instance = getCurrentInstance();
-const props = defineProps({
-  name: { type: [Number, String], required: false },
-  disable: { type: Boolean, required: false },
-  icon: { type: null, required: false },
-  label: { type: null, required: false },
-  alert: { type: [Boolean, String], required: false, skipCheck: true },
-  alertIcon: { type: null, required: false },
-  noCaps: { type: Boolean, required: false, skipCheck: true },
-  contentClass: { type: null, required: false },
-  ripple: { type: Boolean, required: false, skipCheck: true },
-  tabindex: { type: null, required: false }
-});
-const parent_type = instance?.parent?.type.name;
-</script>
-
-<template>
-    <template v-if="parent_type == 'QTabPanels'">
-        <q-tab-panel :name="name">
-            <slot></slot>
-        </q-tab-panel>
-    </template>
-
-    <template v-if="parent_type == 'QTabs'">
-        <q-tab v-bind="$props" :label="$t(String($props.label))">
-        </q-tab>
-    </template>
-</template>

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

@@ -1,71 +0,0 @@
-<script setup>
-import { computed, ref, useAttrs } from "vue";
-import { useLight } from "#imports";
-import { useI18n } from "vue-i18n";
-const light = useLight();
-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 },
-  mask: { type: String, required: false, default: "time" },
-  hideBottomSpace: { type: Boolean, required: false, default: true },
-  color: { type: String, required: false }
-});
-const popup = ref(null);
-const localValue = computed({
-  get: () => {
-    return modelValue.value;
-  },
-  set: (value) => {
-    modelValue.value = value;
-  }
-});
-const rules = [];
-if (props.required) {
-  rules.push((v) => !!v || t("This field is required"));
-}
-rules.push((v) => {
-  if (v) {
-    const time = v.split(":");
-    if (time.length == 2) {
-      if (time[0] >= 0 && time[0] <= 23 && time[1] >= 0 && time[1] <= 59) {
-        return true;
-      }
-    }
-    if (time.length == 3) {
-      if (time[0] >= 0 && time[0] <= 23 && time[1] >= 0 && time[1] <= 59 && time[2] >= 0 && time[2] <= 59) {
-        return true;
-      }
-    }
-    return t("Invalid time format");
-  }
-  return true;
-});
-</script>
-
-<template>
-    <q-input v-bind="$light.getInputProps(props)" v-model="localValue" :rules="rules"
-        :hide-bottom-space="hideBottomSpace">
-        <template v-slot:prepend>
-            <q-btn icon="sym_o_access_time" round dense flat>
-                <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
-                    <q-time v-model="localValue" :format24h="format24h" :now-btn="nowBtn" :with-seconds="withSeconds">
-                        <div class="row items-center justify-end">
-                            <q-btn v-close-popup label="Close" flat />
-                        </div>
-                    </q-time>
-                </q-popup-proxy>
-            </q-btn>
-        </template>
-
-        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
-            <slot :name="name" v-bind="props ?? {}"></slot>
-        </template>
-    </q-input>
-</template>

package/dist/runtime/components/{l-col.d.vue.ts → L/Col.d.vue.ts}

@@ -9,8 +9,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LColProps> & Readonly<{}>, {
-    sm: number | string;
     xs: number | string;
+    sm: number | string;
     md: number | string;
     gutter: "xs" | "sm" | "md" | "lg" | "xl" | "none";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;