mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-02-18 05:58:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: convert promo from dropdown to modal

Browse Source
This commit is contained in:
Zack Spear
2023-06-02 16:11:24 -07:00
parent 9e2f6a8607
commit 0e86c3c071
16 changed files with 1104 additions and 1119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_data/serverState.ts
View File

@@ -47,7 +47,7 @@ const serverState = {
lanIp: '192.168.0.1',
locale: 'en',
pluginInstalled: false,
registered: true,
registered: false,
site: 'http://localhost:4321',
state,
uptime,

6
app.vue
View File

@@ -24,9 +24,6 @@ onBeforeMount(() => {
<h3>KeyActionsCe</h3>
<KeyActionsCe />
<hr />
<h3>PluginPromoCe</h3>
<PluginPromoCe />
<hr />
<h3>WanIpCheckCe</h3>
<WanIpCheckCe />
<hr />
@@ -47,9 +44,6 @@ onBeforeMount(() => {
<h3>KeyActionsCe</h3>
<connect-key-actions></connect-key-actions>
<hr />
<h3>PluginPromoCe</h3>
<connect-plugin-promo></connect-plugin-promo>
<hr />
<h3>WanIpCheckCe</h3>
<connect-wan-ip-check></connect-wan-ip-check>
<hr />

48
components/Modal.vue Normal file
View File

@@ -0,0 +1,48 @@
<script setup lang="ts">
import { Dialog, DialogPanel, DialogTitle, DialogDescription, TransitionChild, TransitionRoot } from '@headlessui/vue';
import { CheckIcon, XMarkIcon } from '@heroicons/vue/24/outline';
export interface Props {
description?: string;
maxWidth?: string;
open?: boolean;
showCloseX?: boolean;
title?: string;
}
withDefaults(defineProps<Props>(), {
maxWidth: 'sm:max-w-lg',
open: false,
showCloseX: false,
});
</script>
<template>
<TransitionRoot as="template" :show="open">
<Dialog as="div" class="relative z-[99999]">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" />
</TransitionChild>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<DialogPanel :class="maxWidth" class="text-beta bg-alpha relative transform overflow-hidden rounded-lg px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:p-6">
<DialogTitle v-if="title">{{ title }}</DialogTitle>
<DialogDescription v-if="description">{{ description }}</DialogDescription>
<div v-if="showCloseX" class="absolute z-20 right-0 top-0 hidden pt-2 pr-2 sm:block">
<button type="button" class="rounded-md bg-alpha text-gray-400 p-2 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" @click="$emit('close')">
<span class="sr-only">Close</span>
<XMarkIcon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<slot />
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
</TransitionRoot>
</template>

91
components/PluginPromo.ce.vue
View File

@@ -1,91 +0,0 @@
<script lang="ts" setup>
import type { UserProfilePromoFeature } from '~/types/userProfile';
import 'tailwindcss/tailwind.css';
import '~/assets/main.css';
const features = ref<UserProfilePromoFeature[]>([
{
title: 'Dynamic Remote Access',
copy: 'Toggle on/off server accessibility with dynamic remote access. Automatically turn on UPnP and open a random WAN port on your router at the click of a button and close off access in seconds.',
},
{
title: 'Manage Your Server Within Connect',
copy: 'Servers equipped with a myunraid.net certificate can be managed directly from within the Connect web UI. Manage multiple servers from your phone, tablet, laptop, or PC in the same browser window.',
},
{
title: 'Deep Linking',
copy: 'The Connect dashboard links to relevant sections of the webgui, allowing quick access to those settings and server sections.',
},
{
title: 'Online Flash Backup',
copy: 'Never ever be left without a backup of your config. If you need to change flash drives, generate a backup from Connect and be up and running in minutes.',
},
{
title: 'Real-time Monitoring',
copy: 'Get an overview of your server\'s state, storage space, apps and VMs status, and more.',
},
{
title: 'Customizable Dashboard Tiles',
copy: 'Set custom server tiles how you like and automatically display your server\'s banner image on your Connect Dashboard.',
},
{
title: 'License Management',
copy: 'Manage your license keys at any time via the My Keys section.',
},
{
title: 'Plus more on the way',
copy: 'All you need is an active internet connection, an Unraid.net account, and the Connect plugin. Get started by installing the plugin.',
},
]);
const installPlugin = (staging = false) => {
return console.debug(staging ? 'dynamix.unraid.net.staging.plg' : 'dynamix.unraid.net.plg');
};
const installButtonClasses = 'text-white text-14px text-center w-full flex flex-row items-center justify-center gap-x-8px px-8px py-8px cursor-pointer rounded-md bg-gradient-to-r from-red to-orange hover:from-red/60 hover:to-orange/60 focus:from-red/60 focus:to-orange/60';
</script>
<template>
<div class="text-beta bg-alpha border-grey-darkest text-center relative z-10 w-full max-w-800px mr-8px p-24px sm:p-32px lg:px-40px shadow-md rounded-lg">
<h2 class="text-24px font-semibold my-0">
Enhance your Unraid experience with these <span class="inline-flex flex-row items-end gap-x-4px"><br class="hidden sm:block"/>Connect <span><UpcBeta /></span></span> features
</h2>
<div class="text-12px flex flex-wrap justify-center my-16px">
<UpcPromoFeature
v-for="(feature, index) in features"
:key="index"
:title="feature.title"
:copy="feature.copy"
/>
</div>
<div class="w-full max-w-xs flex flex-col gap-y-8px mx-auto">
<!-- v-if="devEnv" -->
<button @click="installPlugin(true)" :class="installButtonClasses">Install Staging</button>
<button @click="installPlugin()" :class="installButtonClasses">{{ 'Install Connect' }}</button>
<div>
<a
href="https://docs.unraid.net/category/unraid-connect"
class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
target="_blank"
rel="noopener noreferrer"
:title="'Checkout the Connect Documentation'"
>{{ 'Learn More' }}</a>
<button
@click="console.debug('Close Promo')"
class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
:title="'Close Promo'"
>
{{ 'No thanks' }}
</button>
</div>
</div>
</div>
</template>
<style lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

45
components/UserProfile.ce.vue
View File

@@ -1,11 +1,8 @@
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useClipboard } from '@vueuse/core';
import { vOnClickOutside } from '@vueuse/components'
import { OnClickOutside } from '@vueuse/components';
import { useDropdownStore } from '~/store/dropdown';
import { usePromoStore } from '~/store/promo';
import { useServerStore } from '~/store/server';
import type { Server } from '~/types/server';
import 'tailwindcss/tailwind.css';
@@ -19,30 +16,18 @@ const props = withDefaults(defineProps<Props>(), {
showDescription: true,
});
/**
* Dropdown handling
*/
const dropdownStore = useDropdownStore();
const promoStore = usePromoStore();
const { dropdownVisible } = storeToRefs(dropdownStore);
const { promoVisible } = storeToRefs(promoStore);
const dropdownIgnoreClickOutside = ref();
/**
* @todo fix click of open promo closing this dropdown
*/
const onClickOutsideHandler = [
() => {
console.debug('[onClickOutside]', dropdownVisible.value, promoVisible.value);
// if (dropdownVisible.value) dropdownStore.dropdownHide();
// if (promoVisible.value) promoStore.promoHide();
},
{ ignore: [dropdownIgnoreClickOutside] }
];
const dropdownStore = useDropdownStore()
const serverStore = useServerStore();
const { dropdownVisible } = storeToRefs(dropdownStore);
const { name, description, lanIp } = storeToRefs(serverStore);
/**
* Close dropdown when clicking outside
*/
const dropdownParent = ref(null);
onClickOutside(dropdownParent, (_e) => dropdownVisible.value && dropdownStore.dropdownHide());
/**
* Copy LAN IP on server name click
*/
@@ -83,6 +68,8 @@ onBeforeMount(() => {
</script>
<template>
<UpcPromo />
<div id="UserProfile" class="text-alpha relative z-20 flex flex-col h-full gap-y-4px pl-40px rounded">
<div class="text-gamma text-12px text-right font-semibold leading-normal flex flex-row items-baseline justify-end gap-x-12px">
<UpcUptimeExpire />
@@ -108,12 +95,10 @@ onBeforeMount(() => {
<div class="block w-2px h-24px bg-grey-mid"></div>
<OnClickOutside @trigger="onClickOutsideHandler">
<div class="flex items-center justify-end h-full">
<UpcDropdownTrigger />
<UpcDropdown ref="dropdownIgnoreClickOutside" />
</div>
</OnClickOutside>
<div ref="dropdownParent" class="flex items-center justify-end h-full">
<UpcDropdownTrigger />
<UpcDropdown ref="dropdownIgnoreClickOutside" />
</div>
</div>
</div>
</template>

9
components/UserProfile/Dropdown.vue
View File

@@ -1,15 +1,15 @@
<script setup lang="ts">
import { onClickOutside } from '@vueuse/core';
import { storeToRefs } from 'pinia';
import { useDropdownStore } from '~/store/dropdown';
import { usePromoStore } from '~/store/promo';
import { useServerStore } from '~/store/server';
const { dropdownVisible } = storeToRefs(useDropdownStore());
const { promoVisible } = storeToRefs(usePromoStore());
const dropdownStore = useDropdownStore()
const { dropdownVisible } = storeToRefs(dropdownStore);
const { pluginInstalled, registered } = storeToRefs(useServerStore());
const showDefaultContent = computed(() => !showLaunchpad.value && !promoVisible.value);
const showDefaultContent = computed(() => !showLaunchpad.value);
const showLaunchpad = computed(() => pluginInstalled.value && !registered.value);
/**
* @todo use gsap to animate width between the three dropdown variants
@@ -19,7 +19,6 @@ const showLaunchpad = computed(() => pluginInstalled.value && !registered.value)
<template>
<UpcDropdownWrapper v-if="dropdownVisible" class="DropdownWrapper_blip text-beta absolute z-30 top-full right-0 transition-all">
<UpcDropdownContent v-if="showDefaultContent" />
<UpcDropdownPromo v-else-if="promoVisible" />
<UpcDropdownLaunchpad v-else />
</UpcDropdownWrapper>
</template>

7
components/UserProfile/DropdownContent.vue
View File

@@ -3,6 +3,7 @@ import { storeToRefs } from 'pinia';
import { ArrowRightOnRectangleIcon, ArrowTopRightOnSquareIcon, CogIcon, InformationCircleIcon, UserIcon } from '@heroicons/vue/24/solid';
import { ACCOUNT, CONNECT_DASHBOARD, PLUGIN_SETTINGS } from '~/helpers/urls';
import { useDropdownStore } from '~/store/dropdown';
import { usePromoStore } from '~/store/promo';
import { useServerStore } from '~/store/server';
import type { UserProfileLink } from '~/types/userProfile';
@@ -10,6 +11,7 @@ import type { UserProfileLink } from '~/types/userProfile';
const myServersEnv = ref<string>('Staging');
const devEnv = ref<string>('development');
const dropdownStore = useDropdownStore();
const promoStore = usePromoStore();
const { keyActions, pluginInstalled, registered, stateData } = storeToRefs(useServerStore());
@@ -63,7 +65,10 @@ const links = computed(():UserProfileLink[] => {
...(!pluginInstalled.value
? [
{
click: () => { promoStore.promoShow() },
click: () => {
promoStore.promoShow();
dropdownStore.dropdownHide();
},
icon: InformationCircleIcon,
text: 'Enhance your Unraid experience with Connect',
title: 'Enhance your Unraid experience with Connect',

95
components/UserProfile/DropdownPromo.vue
View File

@@ -1,95 +0,0 @@
<script lang="ts" setup>
import { usePromoStore } from '~/store/promo';
import type { UserProfilePromoFeature } from '~/types/userProfile';
import 'tailwindcss/tailwind.css';
import '~/assets/main.css';
const promoStore = usePromoStore();
const features = ref<UserProfilePromoFeature[]>([
{
title: 'Dynamic Remote Access',
copy: 'Toggle on/off server accessibility with dynamic remote access. Automatically turn on UPnP and open a random WAN port on your router at the click of a button and close off access in seconds.',
},
{
title: 'Manage Your Server Within Connect',
copy: 'Servers equipped with a myunraid.net certificate can be managed directly from within the Connect web UI. Manage multiple servers from your phone, tablet, laptop, or PC in the same browser window.',
},
{
title: 'Deep Linking',
copy: 'The Connect dashboard links to relevant sections of the webgui, allowing quick access to those settings and server sections.',
},
{
title: 'Online Flash Backup',
copy: 'Never ever be left without a backup of your config. If you need to change flash drives, generate a backup from Connect and be up and running in minutes.',
},
{
title: 'Real-time Monitoring',
copy: 'Get an overview of your server\'s state, storage space, apps and VMs status, and more.',
},
{
title: 'Customizable Dashboard Tiles',
copy: 'Set custom server tiles how you like and automatically display your server\'s banner image on your Connect Dashboard.',
},
{
title: 'License Management',
copy: 'Manage your license keys at any time via the My Keys section.',
},
{
title: 'Plus more on the way',
copy: 'All you need is an active internet connection, an Unraid.net account, and the Connect plugin. Get started by installing the plugin.',
},
]);
const installPlugin = (staging = false) => {
return console.debug(staging ? 'dynamix.unraid.net.staging.plg' : 'dynamix.unraid.net.plg');
};
const installButtonClasses = 'text-white text-14px text-center w-full flex flex-row items-center justify-center gap-x-8px px-8px py-8px cursor-pointer rounded-md bg-gradient-to-r from-red to-orange hover:from-red/60 hover:to-orange/60 focus:from-red/60 focus:to-orange/60';
</script>
<template>
<div class="text-center relative z-10 w-full max-w-800px p-24px sm:p-32px lg:px-40px">
<h2 class="text-24px font-semibold my-0 mx-auto max-w-[550px]">
Enhance your Unraid experience with these <span class="inline-flex flex-row items-end gap-x-4px"><br class="hidden sm:block"/>Connect <span><UpcBeta /></span></span> features
</h2>
<div class="text-12px flex flex-wrap justify-center my-16px">
<UpcPromoFeature
v-for="(feature, index) in features"
:key="index"
:title="feature.title"
:copy="feature.copy"
/>
</div>
<div class="w-full max-w-xs flex flex-col gap-y-8px mx-auto">
<!-- v-if="devEnv" -->
<button @click="installPlugin(true)" :class="installButtonClasses">Install Staging</button>
<button @click="installPlugin()" :class="installButtonClasses">{{ 'Install Connect' }}</button>
<div>
<a
href="https://docs.unraid.net/category/unraid-connect"
class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
target="_blank"
rel="noopener noreferrer"
:title="'Checkout the Connect Documentation'"
>{{ 'Learn More' }}</a>
<button
@click="promoStore.promoHide();"
class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
:title="'Close Promo'"
>
{{ 'No thanks' }}
</button>
</div>
</div>
</div>
</template>
<style lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

8
components/UserProfile/DropdownTrigger.vue
View File

@@ -4,8 +4,6 @@ import { InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/vue/2
import { useDropdownStore } from '~/store/dropdown';
import { useServerStore } from '~/store/server';
defineEmits(['click']);
const dropdownStore = useDropdownStore();
const { dropdownVisible } = storeToRefs(dropdownStore);
const {
@@ -17,9 +15,7 @@ const {
username,
} = storeToRefs(useServerStore());
const registeredAndPluginInstalled = computed(() => {
return pluginInstalled.value && registered.value;
});
const registeredAndPluginInstalled = computed(() => pluginInstalled.value && registered.value);
const text = computed((): string | undefined => {
if ((stateData.value.error) && state.value !== 'EEXPIRED') return 'Fix Error';
@@ -42,7 +38,7 @@ const title = computed((): string => {
<template>
<div class="relative flex items-center justify-end h-full">
<button
@click="dropdownStore.dropdownToggle()"
@click.stop="dropdownStore.dropdownToggle()"
class="group text-18px hover:text-alpha focus:text-alpha border border-transparent flex flex-row justify-end items-center h-full gap-x-8px outline-none focus:outline-none"
:title="title"
>

112
components/UserProfile/Promo.vue Normal file
View File

@@ -0,0 +1,112 @@
<script lang="ts" setup>
import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
import { storeToRefs } from 'pinia';
import { usePromoStore } from '~/store/promo';
import type { UserProfilePromoFeature } from '~/types/userProfile';
import 'tailwindcss/tailwind.css';
import '~/assets/main.css';
const promoStore = usePromoStore();
const { promoVisible } = storeToRefs(promoStore);
const features = ref<UserProfilePromoFeature[]>([
{
title: 'Dynamic Remote Access',
copy: 'Toggle on/off server accessibility with dynamic remote access. Automatically turn on UPnP and open a random WAN port on your router at the click of a button and close off access in seconds.',
},
{
title: 'Manage Your Server Within Connect',
copy: 'Servers equipped with a myunraid.net certificate can be managed directly from within the Connect web UI. Manage multiple servers from your phone, tablet, laptop, or PC in the same browser window.',
},
{
title: 'Deep Linking',
copy: 'The Connect dashboard links to relevant sections of the webgui, allowing quick access to those settings and server sections.',
},
{
title: 'Online Flash Backup',
copy: 'Never ever be left without a backup of your config. If you need to change flash drives, generate a backup from Connect and be up and running in minutes.',
},
{
title: 'Real-time Monitoring',
copy: 'Get an overview of your server\'s state, storage space, apps and VMs status, and more.',
},
{
title: 'Customizable Dashboard Tiles',
copy: 'Set custom server tiles how you like and automatically display your server\'s banner image on your Connect Dashboard.',
},
{
title: 'License Management',
copy: 'Manage your license keys at any time via the My Keys section.',
},
{
title: 'Plus more on the way',
copy: 'All you need is an active internet connection, an Unraid.net account, and the Connect plugin. Get started by installing the plugin.',
},
]);
const installStaging = ref(false);
const installPlugin = () => {
return console.debug(installStaging.value ? 'dynamix.unraid.net.staging.plg' : 'dynamix.unraid.net.plg');
};
const installButtonClasses = 'text-white text-14px text-center w-full flex flex-row items-center justify-center gap-x-8px px-8px py-8px cursor-pointer rounded-md bg-gradient-to-r from-red to-orange hover:from-red/60 hover:to-orange/60 focus:from-red/60 focus:to-orange/60';
</script>
<template>
<Modal
:open="promoVisible"
@close="promoStore.promoHide()"
max-width="max-w-800px"
>
<div class="text-center relative w-full p-24px">
<h2 class="text-24px font-semibold my-0 mx-auto max-w-[550px]">
Enhance your Unraid experience with these <span class="inline-flex flex-row items-end gap-x-4px"><br class="hidden sm:block"/>Connect <span><UpcBeta /></span></span> features
</h2>
<div class="text-12px flex flex-wrap justify-center my-16px md:my-24px">
<UpcPromoFeature
v-for="(feature, index) in features"
:key="index"
:title="feature.title"
:copy="feature.copy"
/>
</div>
<div class="w-full max-w-xs flex flex-col gap-y-16px mx-auto">
<!-- v-if="devEnv" -->
<SwitchGroup as="div" class="flex items-center justify-center">
<Switch v-model="installStaging" :class="[installStaging ? 'bg-indigo-600' : 'bg-gray-200', 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2']">
<span aria-hidden="true" :class="[installStaging ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out']" />
</Switch>
<SwitchLabel as="span" class="ml-3 text-sm">
<span class="font-semibold">Install Staging</span>
</SwitchLabel>
</SwitchGroup>
<button @click="installPlugin()" :class="installButtonClasses">{{ 'Install Connect' }}</button>
<div>
<a
href="https://docs.unraid.net/category/unraid-connect"
class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
target="_blank"
rel="noopener noreferrer"
:title="'Checkout the Connect Documentation'"
>{{ 'Learn More' }}</a>
<button
@click="promoStore.promoHide()"
class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
:title="'Close Promo'"
>
{{ 'No thanks' }}
</button>
</div>
</div>
</div>
</Modal>
</template>
<style lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

14
nuxt.config.ts
View File

@@ -15,11 +15,11 @@ export default defineNuxtConfig({
{ path: '~/components/UserProfile', prefix: 'Upc' },
'~/components',
],
runtimeConfig: {
public: { // will be exposed to the client-side
callbackKey: '', // set in .env – https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables
}
},
// runtimeConfig: {
// public: { // will be exposed to the client-side
// callbackKey: '', // set in .env – https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables
// }
// },
customElements: {
entries: [
{
@@ -41,10 +41,6 @@ export default defineNuxtConfig({
name: 'ConnectKeyActions',
path: '@/components/KeyActions.ce',
},
{
name: 'ConnectPluginPromo',
path: '@/components/PluginPromo.ce',
},
{
name: 'ConnectUserProfile',
path: '@/components/UserProfile.ce',

1748
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -19,6 +19,7 @@
"nuxt-custom-elements": "^2.0.0-beta.12"
},
"dependencies": {
"@headlessui/vue": "^1.7.14",
"@heroicons/vue": "^2.0.18",
"@pinia/nuxt": "^0.4.11",
"@vueuse/components": "^10.1.2",

4
store/dropdown.ts
View File

@@ -1,6 +1,5 @@
import { useToggle } from '@vueuse/core';
import { defineStore, createPinia, setActivePinia } from "pinia";
import { usePromoStore } from './promo';
/**
* @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
* @see https://github.com/vuejs/pinia/discussions/1085
@@ -8,8 +7,6 @@ import { usePromoStore } from './promo';
setActivePinia(createPinia());
export const useDropdownStore = defineStore('dropdown', () => {
const promoStore = usePromoStore();
const dropdownVisible = ref<boolean>(false);
const dropdownHide = () => dropdownVisible.value = false;
@@ -18,7 +15,6 @@ export const useDropdownStore = defineStore('dropdown', () => {
watch(dropdownVisible, (newVal, _oldVal) => {
console.debug('[dropdownVisible]', newVal, _oldVal);
if (!newVal) promoStore.promoHide();
});
return {

27
store/modal.ts Normal file
View File

@@ -0,0 +1,27 @@
import { useToggle } from '@vueuse/core';
import { defineStore, createPinia, setActivePinia } from "pinia";
/**
* @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
* @see https://github.com/vuejs/pinia/discussions/1085
*/
setActivePinia(createPinia());
export const useModalStore = defineStore('modal', () => {
const modalVisible = ref<boolean>(true);
const modalHide = () => modalVisible.value = false;
const modalShow = () => modalVisible.value = true;
const modalToggle = useToggle(modalVisible);
watch(modalVisible, (newVal, _oldVal) => {
console.debug('[modalVisible]', newVal, _oldVal);
});
return {
modalVisible,
modalHide,
modalShow,
modalToggle,
};
});

6
store/promo.ts
View File

@@ -1,6 +1,5 @@
import { useToggle } from '@vueuse/core';
import { defineStore, createPinia, setActivePinia } from "pinia";
import { useDropdownStore } from './dropdown';
/**
* @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
@@ -9,16 +8,13 @@ import { useDropdownStore } from './dropdown';
setActivePinia(createPinia());
export const usePromoStore = defineStore('promo', () => {
const dropdownStore = useDropdownStore();
const promoVisible = ref<boolean>(false);
const promoHide = () => promoVisible.value = false;
const promoShow = () => promoVisible.value = true;
const promoToggle = useToggle(promoVisible);
watch(promoVisible, (newVal, _oldVal) => {
console.debug('[promoVisible]', newVal, _oldVal);
if (!newVal) dropdownStore.dropdownHide();
});
return {