@simsustech/quasar-components 0.11.9 → 0.11.11

package/dist/types/ui/general/QDrawerList.vue.d.ts

@@ -1,12 +1,7 @@
-import { QList } from 'quasar';
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_6: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<{}, {
-    QList: typeof QList;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/types/ui/general/QLanguageSelect.vue.d.ts

@@ -1,11 +1,14 @@
 import { QuasarLanguage } from 'quasar';
-import { useLang as useFlagsLang } from '../flags/lang/index.js';
+import type { Language as FormLanguage } from '../form/lang/index.js';
 export interface Props {
-    modelValue: string;
-    languageImports: Record<string, () => Promise<{
+    modelValue: keyof FormLanguage['countries'];
+    languageImports: Record<keyof FormLanguage['countries'], () => Promise<{
         default: QuasarLanguage;
     }>>;
-    allowedCodes?: [keyof ReturnType<typeof useFlagsLang>['value']['languages']];
+    locales: {
+        icon: string;
+        isoName: keyof FormLanguage['languages'];
+    }[];
 }
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/types/ui/general/QStyledCard.vue.d.ts

@@ -6,11 +6,15 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;
     functions: import("vue").Ref<{}, {}>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    image?: ((props: {}) => any) | undefined;
-    title?: ((props: {}) => any) | undefined;
-    subtitle?: ((props: {}) => any) | undefined;
-    default?: ((props: {}) => any) | undefined;
-    actions?: ((props: {}) => any) | undefined;
+    image?: (props: {}) => any;
+} & {
+    title?: (props: {}) => any;
+} & {
+    subtitle?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/types/ui/general/QStyledLayout.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;
     functions: import("vue").Ref<{}, {}>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    leftDrawerItems?: ((props: {}) => any) | undefined;
+    leftDrawerItems?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/types/ui/general/QSubmitButton.vue.d.ts

@@ -20,7 +20,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {},
     color: string;
     loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: ((props: {}) => any) | undefined;
+    default?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/types/ui/general/ResourcePage.vue.d.ts

@@ -3,6 +3,10 @@ export interface Props {
     disabled?: boolean;
     topBarFab?: boolean;
     topBarShrink?: boolean;
+    icons?: {
+        add: string;
+        edit: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     update: (args_0: {
@@ -24,15 +28,23 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {},
     }) => any) | undefined;
 }>, {
     type: "create" | "update";
+    icons: {
+        add: string;
+        edit: string;
+    };
     disabled: boolean;
     topBarFab: boolean;
     topBarShrink: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: ((props: {}) => any) | undefined;
-    fab?: ((props: {}) => any) | undefined;
-    header?: ((props: {}) => any) | undefined;
-    'top-bar-buttons'?: ((props: {}) => any) | undefined;
-    'header-side'?: ((props: {}) => any) | undefined;
+    default?: (props: {}) => any;
+} & {
+    fab?: (props: {}) => any;
+} & {
+    header?: (props: {}) => any;
+} & {
+    'top-bar-buttons'?: (props: {}) => any;
+} & {
+    'header-side'?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/types/ui/general/ResponsiveDialog.vue.d.ts

@@ -1,8 +1,10 @@
 export interface Props {
     display?: boolean;
     buttonType?: 'submit' | 'send';
-    closeIcon?: string;
     padding?: boolean;
+    icons?: {
+        close: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;
@@ -28,11 +30,14 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
         done: (success?: boolean) => void;
     }) => any) | undefined;
 }>, {
+    icons: {
+        close: string;
+    };
     buttonType: "submit" | "send";
-    closeIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    title?: ((props: {}) => any) | undefined;
-    default?: ((props: {}) => any) | undefined;
+    title?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/types/ui/md3/Md3Layout.vue.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    ready?: boolean;
+}
+declare var __VLS_22: {}, __VLS_44: {
+    showSticky: boolean;
+}, __VLS_46: {}, __VLS_48: {}, __VLS_54: {}, __VLS_64: {
+    showSticky: boolean;
+};
+type __VLS_Slots = {} & {
+    'header-toolbar'?: (props: typeof __VLS_22) => any;
+} & {
+    fabs?: (props: typeof __VLS_44) => any;
+} & {
+    'drawer-mini-navigation'?: (props: typeof __VLS_46) => any;
+} & {
+    drawer?: (props: typeof __VLS_48) => any;
+} & {
+    footer?: (props: typeof __VLS_54) => any;
+} & {
+    fabs?: (props: typeof __VLS_64) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    ready: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ui/md3/NavigationRailFabs.vue.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    type?: 'add' | 'edit';
+    showSticky?: boolean;
+    busEmits: {
+        add?: string;
+        edit?: string;
+    };
+    icons?: {
+        add: string;
+        edit: string;
+    };
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/ui/md3/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NavigationRailFabs } from './NavigationRailFabs.vue';
+export { default as Md3Layout } from './Md3Layout.vue';
+export { useLang, loadLang } from './lang/index.js';

package/dist/types/ui/md3/lang/en-US.d.ts

@@ -0,0 +1,3 @@
+import type { Language } from '../lang';
+declare const lang: Language;
+export default lang;

package/dist/types/ui/md3/lang/index.d.ts

@@ -0,0 +1,12 @@
+export interface Language {
+    isoName: string;
+}
+import type { Ref } from 'vue';
+export declare const lang: Ref<{
+    isoName: string;
+}, Language | {
+    isoName: string;
+}>;
+export declare const defineLang: (lang: Language) => Language;
+export declare const useLang: () => Ref<Language>;
+export declare const loadLang: (isoName: string) => Promise<void>;

package/dist/types/ui/md3/lang/nl.d.ts

@@ -0,0 +1,3 @@
+import type { Language } from '../lang';
+declare const lang: Language;
+export default lang;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.11.9",
+  "version": "0.11.11",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",
@@ -32,6 +32,11 @@
       "import": "./dist/form.js",
       "src": "./src/ui/form/index.ts"
     },
+    "./md3": {
+      "types": "./dist/types/ui/md3/index.d.ts",
+      "import": "./dist/md3.js",
+      "src": "./src/ui/md3/index.ts"
+    },
     "./css": {
       "import": "./dist/quasar-components.css"
     },
@@ -46,37 +51,39 @@
   },
   "bugs": "https://github.com/simsusech/quasar-components/issues",
   "dependencies": {
+    "@vueuse/core": "^13.1.0",
     "validator": "^13.15.0"
   },
   "peerDependencies": {
     "quasar": "^2.18.1"
   },
   "devDependencies": {
-    "@types/node": "^22.14.0",
-    "@types/validator": "^13.12.3",
+    "@iconify-json/flagpack": "^1.2.2",
+    "@types/node": "^22.15.3",
+    "@types/validator": "^13.15.0",
     "@types/ws": "^8.18.1",
-    "@typescript-eslint/eslint-plugin": "^8.29.0",
-    "@typescript-eslint/parser": "^8.29.0",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@typescript-eslint/parser": "^8.31.1",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/server-renderer": "^3.5.13",
-    "eslint": "^9.24.0",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint": "^9.25.1",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-prettier-vue": "^5.0.0",
-    "eslint-plugin-vue": "^10.0.0",
-    "glob": "^11.0.1",
+    "eslint-plugin-vue": "^10.1.0",
+    "glob": "^11.0.2",
     "local-pkg": "^1.1.1",
     "prettier": "^3.5.3",
     "quasar": "^2.18.1",
     "rimraf": "^6.0.1",
     "typescript": "5.8.3",
-    "typescript-eslint": "^8.29.0",
-    "unplugin-vue-components": "^28.4.1",
-    "vite": "^6.2.5",
+    "typescript-eslint": "^8.31.1",
+    "unplugin-vue-components": "^28.5.0",
+    "vite": "^6.3.4",
     "vue": "^3.5.13",
     "vue-eslint-parser": "^10.1.3",
-    "vue-router": "^4.5.0",
-    "vue-tsc": "^2.2.8"
+    "vue-router": "^4.5.1",
+    "vue-tsc": "^2.2.10"
   },
   "scripts": {
     "build:plugin": "vite build",

package/src/ui/authentication/AccountsTable.vue

@@ -17,17 +17,17 @@
       </q-tr>
     </template>
     <template #top-right>
-      <q-btn icon="search" flat>
+      <q-btn :icon="searchIcon" flat>
         <q-menu>
           <div class="q-pa-sm">
             <q-input v-model="name" :label="lang.account.fields.name">
               <template #append>
                 <q-icon
                   v-if="name"
-                  name="cancel"
-                  @click="name = ''"
                   class="q-field__focusable-action"
                   role="button"
+                  :name="cancelIcon"
+                  @click="name = ''"
                 />
               </template>
             </q-input>
@@ -35,10 +35,10 @@
               <template #append>
                 <q-icon
                   v-if="email"
-                  name="cancel"
-                  @click="email = ''"
                   class="q-field__focusable-action"
                   role="button"
+                  :name="cancelIcon"
+                  @click="email = ''"
                 />
               </template>
             </q-input>
@@ -55,10 +55,10 @@
               <template #append>
                 <q-icon
                   v-if="roles.length"
-                  name="cancel"
-                  @click="roles = []"
                   class="q-field__focusable-action"
                   role="button"
+                  :name="cancelIcon"
+                  @click="roles = []"
                 />
               </template>
             </q-select>
@@ -72,7 +72,7 @@
           {{ col.value }}
         </q-td>
         <q-td auto-width>
-          <q-btn size="sm" round flat icon="more_vert">
+          <q-btn size="sm" round flat :icon="moreVertIcon">
             <q-menu>
               <q-list>
                 <q-item clickable @click="openAddRoleDialog(props.row)">
@@ -127,6 +127,11 @@ const props = defineProps<{
   pagination: Pagination
   mappedRoles: Record<string, string> // value: label
   columns?: QTableColumn[]
+  icons?: {
+    search: string
+    cancel: string
+    moreVert: string
+  }
 }>()
 
 const emit = defineEmits<{
@@ -136,7 +141,7 @@ const emit = defineEmits<{
   (e: 'removeRole', { id, role }: { id: number; role: string }): void
 }>()
 
-const { modelValue, count, mappedRoles, columns } = toRefs(props)
+const { modelValue, count, mappedRoles, columns, icons } = toRefs(props)
 
 // const { useQuery } = await createUseTrpc()
 const lang = useLang()
@@ -275,4 +280,8 @@ const openRemoveRoleDialog = (account: Account) => {
     emit('removeRole', { id: account.id, role })
   })
 }
+
+const searchIcon = icons.value?.search ?? 'search'
+const cancelIcon = icons.value?.cancel ?? 'cancel'
+const moreVertIcon = icons.value?.moreVert ?? 'more_vert'
 </script>

package/src/ui/authentication/ConsentList.vue

@@ -2,7 +2,7 @@
   <q-list>
     <q-item v-for="scope in scopes" :key="scope.name">
       <q-item-section avatar>
-        <q-icon color="green" name="check" />
+        <q-icon color="green" :name="checkIcon" />
       </q-item-section>
       <q-item-section>
         {{ scope.name }}
@@ -10,7 +10,7 @@
     </q-item>
     <q-item v-for="claim in claims" :key="claim.name">
       <q-item-section avatar>
-        <q-icon color="green" name="check" />
+        <q-icon color="green" :name="checkIcon" />
       </q-item-section>
       <q-item-section>
         {{ claim.name }}
@@ -18,7 +18,7 @@
     </q-item>
     <q-item v-for="resourceScope in resourceScopes" :key="resourceScope.name">
       <q-item-section avatar>
-        <q-icon color="green" name="check" />
+        <q-icon color="green" :name="checkIcon" />
       </q-item-section>
       <q-item-section>
         {{ resourceScope.name }}
@@ -34,7 +34,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, toRefs, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useLang, loadLang } from './lang'
 
@@ -48,21 +48,14 @@ export interface Props {
   resourceScopes?: {
     name: string
   }[]
+  icons?: {
+    check: string
+  }
 }
-defineProps<Props>()
-// const attrs = useAttrs();
-// const emit = defineEmits<{
-//   (
-//     e: "asyncEmit",
-//     {
-//       value,
-//       done,
-//     }: {
-//       value: string;
-//       done: () => void;
-//     }
-//   ): void;
-// }>();
+const props = defineProps<Props>()
+
+const { icons } = toRefs(props)
+
 const $q = useQuasar()
 const lang = useLang()
 if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
@@ -74,6 +67,8 @@ const message = computed(() => lang.value.consent.message)
 const allow = computed(() => lang.value.consent.allow)
 const deny = computed(() => lang.value.consent.deny)
 
+const checkIcon = icons.value?.check ?? 'check'
+
 const variables = ref({
   message,
   allow,

package/src/ui/authentication/LoginForm.vue

@@ -44,7 +44,7 @@
     >
       <template #append>
         <q-icon
-          :name="showPassword ? 'visibility' : 'visibility_off'"
+          :name="showPassword ? visibilityIcon : visibilityOffIcon"
           class="cursor-pointer"
           @click="showPassword = !showPassword"
         />
@@ -69,7 +69,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, toRefs } from 'vue'
 import { useQuasar, QFormProps, QForm, QInputProps } from 'quasar'
 import { useLang, loadLang } from './lang'
 import isEmail from 'validator/es/lib/isEmail'
@@ -92,8 +92,14 @@ export interface Props {
     | 'autofocus'
     | ('label' & { style?: Partial<CSSStyleDeclaration> })
   >
+  icons?: {
+    visibility: string
+    visibilifyOff: string
+  }
 }
-defineProps<Props>()
+const props = defineProps<Props>()
+const { icons } = toRefs(props)
+
 // const attrs = useAttrs();
 const emit = defineEmits<{
   (
@@ -154,6 +160,9 @@ const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = (
   })
 }
 
+const visibilityIcon = icons.value?.visibility ?? 'visibility'
+const visibilityOffIcon = icons.value?.visibilifyOff ?? 'visibility_off'
+
 const variables = ref({
   header,
   createAccount,

package/src/ui/authentication/LogoutButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <q-submit-button>
+    <slot name="icon" />
+    {{ lang.logout.logout }}
+  </q-submit-button>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LogoutButton'
+}
+</script>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang/index.js'
+import QSubmitButton from '../general/QSubmitButton.vue'
+
+export interface Props {
+  withNetwork?: string
+}
+defineProps<Props>()
+
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+</script>

package/src/ui/authentication/LogoutForm.vue

@@ -0,0 +1,49 @@
+<template>
+  {{ lang.logout.confirmation }}
+  <q-form
+    ref="formRef"
+    data-allow-mismatch="props"
+    class="q-gutter-md"
+    v-bind="form"
+    method="post"
+    :action="action"
+  >
+    <input type="hidden" name="xsrf" :value="xsrfSecret" />
+    <slot name="default" />
+  </q-form>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LoginForm'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useQuasar, QFormProps, QForm } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
+  action: string
+  xsrfSecret: string
+}
+defineProps<Props>()
+
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const formRef = ref<QForm>()
+
+const variables = ref({})
+const functions = ref({})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/PasswordChangeForm.vue

@@ -19,7 +19,7 @@
     >
       <template #append>
         <q-icon
-          :name="showPassword ? 'visibility' : 'visibility_off'"
+          :name="showPassword ? icons.visibility : icons.visibilityOff"
           class="cursor-pointer"
           @click="showPassword = !showPassword"
         />
@@ -38,7 +38,7 @@
     >
       <template #append>
         <q-icon
-          :name="showRepeatPassword ? 'visibility' : 'visibility_off'"
+          :name="showRepeatPassword ? icons.visibility : icons.visibilityOff"
           class="cursor-pointer"
           @click="showRepeatPassword = !showRepeatPassword"
         />
@@ -79,11 +79,19 @@ export interface Props {
     | 'autofocus'
     | ('label' & { style?: Partial<CSSStyleDeclaration> })
   >
+  icons?: {
+    visibility: string
+    visibilityOff: string
+  }
 }
 const props = withDefaults(defineProps<Props>(), {
   minimumPasswordLength: 8,
   form: undefined,
-  input: undefined
+  input: undefined,
+  icons: () => ({
+    visibility: 'visibility',
+    visibilityOff: 'visibility_off'
+  })
 })
 // const attrs = useAttrs();
 const emit = defineEmits<{

package/src/ui/authentication/RegisterForm.vue

@@ -50,7 +50,7 @@
     >
       <template #append>
         <q-icon
-          :name="showPassword ? 'visibility' : 'visibility_off'"
+          :name="showPassword ? icons.visibility : icons.visibilityOff"
           class="cursor-pointer"
           @click="showPassword = !showPassword"
         />
@@ -68,7 +68,7 @@
     >
       <template #append>
         <q-icon
-          :name="showPassword ? 'visibility' : 'visibility_off'"
+          :name="showPassword ? icons.visibility : icons.visibilityOff"
           class="cursor-pointer"
           @click="showPassword = !showPassword"
         />
@@ -115,12 +115,20 @@ export interface Props {
     | 'autofocus'
     | ('label' & { style?: Partial<CSSStyleDeclaration> })
   >
+  icons?: {
+    visibility: string
+    visibilityOff: string
+  }
 }
 const props = withDefaults(defineProps<Props>(), {
   minimumPasswordLength: 8,
   extraFields: undefined,
   form: undefined,
-  input: undefined
+  input: undefined,
+  icons: () => ({
+    visibility: 'visibility',
+    visibilityOff: 'visibility_off'
+  })
 })
 // const attrs = useAttrs();
 const emit = defineEmits<{