Merge branch 'plainblack-main'

Author: rizen

README.md

@@ -0,0 +1,10 @@
+@layer tailwind-base, primevue, tailwind-utilities;
+
+@layer tailwind-base {
+    @tailwind base;
+}
+
+@layer tailwind-utilities {
+    @tailwind components;
+    @tailwind utilities;
+}

app/assets/css/tailwind.css

@@ -0,0 +1,31 @@
+<template>
+    <div class="card flex justify-center">
+        <a class="flex  p-3 cursor-pointer" @click="toggle">
+            <Icon v-if="isDark" name="circum:dark" />
+            <Icon v-else name="circum:light" />
+        </a>
+
+        <Popover ref="op">
+            <Menu :model="[
+                {label : 'Dark Mode', icon: 'circum:dark', value : true},
+                {label : 'Light Mode', icon: 'circum:light', value: false},
+                ]">
+                <template #item="{ item, props, hasSubmenu, root }">
+                    <div @mousedown="isDark = item.value; toggle()" class="flex  p-2  cursor-pointer">
+                        <Icon :name="item.icon" class="mr-2" />
+                        <span>{{ item.label }}</span>
+                    </div>
+                </template>
+            </Menu>
+        </Popover>
+    </div>
+</template>
+
+
+<script setup>
+const op = ref();
+const toggle = (event) => {
+    op.value.toggle(event);
+}
+const isDark = useDark();
+</script>

components/dataset/DatasetTable.vue app/components/dataset/DatasetTable.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="grid">
-        <div class="col-12 md:col-9 xl:col-10">
+    <div class="flex">
+        <div class="md:grow">
             <slot></slot>
         </div>
-        <div class="hidden md:block md:col-3 xl:col-2">
+        <div class="md:hidden lg:block ml-5">
             <ul class="list-none sticky m-0 p-0 pt-4 top-0">
                 <li class="mb-2" v-for="child in sortedChildren()" :key="child.id">
                     <a :href="`#${child.id}`">

components/dataset/RowFieldSideBar.vue app/components/dataset/RowFieldSideBar.vue

@@ -1,14 +1,14 @@
 <template>
     <div :class="class">
         <FormLabel :label="label" :id="computedId" />
-        <div :class="append || prepend || $slots.prepend || $slots.append ? 'p-inputgroup flex-1' : 'flex-1'">
-            <span v-if="$slots.prepend || prepend" class="p-inputgroup-addon"><slot name="prepend">{{ prepend }}</slot></span>
+        <InputGroup class="flex-1">
+            <InputGroupAddon v-if="$slots.prepend || prepend"><slot name="prepend">{{ prepend }}</slot></InputGroupAddon>
             <InputNumber v-if="type == 'number' && (isNumber(val) || isNull(val) || isUndefined(val))"
                 v-model="val" showButtons :placeholder="placeholder" :name="name" :id="computedId"
                 :autocomplete="autocomplete" :required="required" :inputClass="fieldClass" :step="step"
-                :incrementButtonClass="append ? 'border-noround' : ''" @change="emit('change')"
-                :decrementButtonClass="append ? 'border-noround' : ''" />
-            <InputSwitch v-else-if="type == 'switch' && (isBoolean(val) || isUndefined(val))"
+                :incrementButtonClass="append ? 'rounded-none' : ''" @change="emit('change')"
+                :decrementButtonClass="append ? 'rounded-none' : ''" />
+            <ToggleSwitch v-else-if="type == 'switch' && (isBoolean(val) || isUndefined(val))"
                 v-model="val" :placeholder="placeholder" :name="name" :id="computedId"
                 :inputClass="fieldClass" @change="emit('change')"
                  />
@@ -17,11 +17,11 @@
                 :autocomplete="autocomplete" :required="required" :inputClass="fieldClass" class="w-full" />
             <Textarea v-else-if="type == 'textarea' && (isString(val) || isNull(val) || isUndefined(val))"
                 v-model="val" :placeholder="placeholder" :name="name" :id="computedId" :autocomplete="autocomplete"
-                :class="fieldClass + ' border-round'" :required="required" autoResize @change="emit('change')" />
+                :class="fieldClass + ' rounded'" :required="required" autoResize @change="emit('change')" />
             <MarkdownInput v-else-if="type == 'markdown' && (isString(val) || isNull(val) || isUndefined(val))"
                 v-model="val" :placeholder="placeholder" :id="computedId" @change="emit('change')"
                 />
-            <Dropdown v-else-if="type == 'select'" :placeholder="placeholder"
+            <Select v-else-if="type == 'select'" :placeholder="placeholder"
                 v-model="val" :name="name" :id="computedId" :options="modifiedOptions" :class="fieldClass" :required="required"
                 @change="emit('change')" optionLabel="label" optionValue="value" />  
             <InputText
@@ -32,8 +32,8 @@
                 Can't display {{ displayName }} Form Input
                 {{ val }}
             </Message>
-            <span v-if="$slots.append || append" class="p-inputgroup-addon"><slot name="append">{{ append }}</slot></span>
-        </div>
+            <InputGroupAddon v-if="$slots.append || append"><slot name="append">{{ append }}</slot></InputGroupAddon>
+        </InputGroup>
         <small :class="invalid && !empty ? 'text-red-500' : ''" v-if="subtext">{{ subtext }}</small>
     </div>
 </template>

components/dataset/toolbar/AddRowsCols.vue app/components/dataset/toolbar/AddRowsCols.vue

@@ -1,5 +1,5 @@
 <template>
-    <label v-if="label" :for="id" class="block font-medium text-900 mb-2">{{ label }}</label>
+    <label v-if="label" :for="id" class="block font-medium mb-2">{{ label }}</label>
 </template>
 
 <script setup>

components/dataset/toolbar/BackToDatasets.vue app/components/dataset/toolbar/BackToDatasets.vue

@@ -1,15 +1,15 @@
 <template>
-    <Button v-if="items.length == 1" @mousedown="takeAction($event, firstItem)" :severity="severity" class="white-space-nowrap">
-        <Icon :name="firstItem.icon" class="mr-1 vertical-align-middle" />
-        <span class="vertical-align-middle">{{ firstItem.label }}</span>
+    <Button v-if="items.length == 1" @mousedown="takeAction($event, firstItem)" :severity="severity" class="text-nowrap">
+        <Icon :name="firstItem.icon" class="mr-1 align-middle" />
+        <span class="align-middle">{{ firstItem.label }}</span>
     </Button>
-    <SplitButton v-else-if="items.length > 1" :severity="severity" :model="otherItems" @mousedown="takeAction($event, firstItem)" class="white-space-nowrap">
+    <SplitButton v-else-if="items.length > 1" :severity="severity" :model="otherItems" @click="takeAction($event, firstItem)" class="text-nowrap">
         <span>
-            <Icon :name="firstItem.icon" :title="firstItem.label" class="mr-1 vertical-align-middle" />
-            <span class="vertical-align-middle">{{ firstItem.label }}</span>
+            <Icon :name="firstItem.icon" :title="firstItem.label" class="mr-1 align-middle" />
+            <span class="align-middle">{{ firstItem.label }}</span>
         </span>
         <template #item="{ item }">
-            <span @mousedown="takeAction($event, item)" class="flex p-2 align-items-center" :title="item.label">
+            <span @mousedown="takeAction($event, item)" class="flex p-2 items-center" :title="item.label">
                 <Icon :name="item.icon" class="mr-1" />
                 {{ item.label }}
             </span>

components/shared/shortcuts/FieldHistory.vue app/components/shared/shortcuts/FieldHistory.vue

@@ -1,5 +1,5 @@
 <template>
-    <MdEditor v-model="val" @onChange="changed" :placeholder="placeholder" :showCodeRowNumber="true" :editorId="id" language="en-US" :toolbars="toolbars" noUploadImg previewTheme="github" />
+    <MdEditor :theme="colorScheme" v-model="val" @onChange="changed" :placeholder="placeholder" :showCodeRowNumber="true" :editorId="id" language="en-US" :toolbars="toolbars" noUploadImg previewTheme="github" />
 </template>
 
 <script setup>
@@ -33,7 +33,8 @@ const val = computed({
     }
 });
 
-
+const isDark = useDark();
+const colorScheme = computed(() => isDark.value == true ? 'dark' : 'light');
 
 
 const toolbars = [

components/shared/shortcuts/Shortcut.vue app/components/shared/shortcuts/Shortcut.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-column lg:flex-row">
+    <div class="flex flex-col lg:flex-row">
         <div v-if="$slots.left" class="lg:pr-5 mb-1 lg:mb-0">        
             <div v-if="title" class="lg:mb-3 text-2xl text-color-secondary ml-1">{{section}}<template v-if="!section">&nbsp;</template></div>
             <slot name="left"></slot>

components/shared/shortcuts/TemplateFunctions.vue app/components/shared/shortcuts/TemplateFunctions.vue

@@ -1,18 +1,18 @@
 <template>
-    <ul class="list-none m-0 p-0 flex flex-wrap lg:flex-column justify-content-evenly md:justify-content-between">
+    <ul class="list-none m-0 p-0 flex flex-wrap lg:flex-col justify-evenly md:justify-between">
         <li v-for="item in links" :key="item.label" :title="item.label">
-            <NuxtLink :to="item.to" v-ripple
-                :class="[route.path == item.to ? 'text-primary hover:bg-primary-reverse hover:text-primary' : 'text-color-secondary hover:bg-primary-reverse hover:text-color', 'flex align-items-center cursor-pointer p-0 py-2 border-round text-800 hover:surface-hover transition-duration-150 transition-colors p-ripple']"
+            <NuxtLink :to="item.to"
+                :class="[route.path == item.to ? 'text-primary hover:bg-primary-reverse hover:text-primary' : 'text-color-secondary hover:bg-primary-reverse hover:text-color', 'flex items-center cursor-pointer p-0 py-2 rounded text-800 hover:surface-hover transition-duration-150 transition-colors p-ripple']"
                 :aria-current="route.path == item.to ? 'page' : undefined">
                 <Icon :name="item.icon" aria-hidden="true" 
                     :class="[route.path == item.to ? 'text-primary group-hover:text-primary' : 'text-color-secondary group-hover:text-color', 'md:mr-2']" />
-                <span class="font-medium hidden md:block white-space-nowrap">{{ item.label }}</span>
+                <span class="font-medium hidden md:block text-nowrap">{{ item.label }}</span>
             </NuxtLink>
         </li>
         <li v-if="links.length && buttons.length"><hr class="mt-2 mb-3 border-50 hidden lg:block"></li>
         <li v-for="item in buttons" :key="item.label" class="lg:mb-2 p-fluid">
             <Button @mousedown="takeAction($event, item)" :severity="item.severity" :title="item.label">
-                <Icon :name="item.icon" class="mr-1" /> <span class="hidden md:block white-space-nowrap">{{ item.label }}</span>
+                <Icon :name="item.icon" class="mr-1" /> <span class="hidden md:block text-nowrap">{{ item.label }}</span>
             </Button>
         </li>
     </ul>

components/shared/toolbar/ManageGameVariables.vue app/components/shared/toolbar/ManageGameVariables.vue

@@ -3,7 +3,7 @@
         <slot name="header">
             <div v-if="title || info || $slots.title" class="mb-4">
                 <h2 v-if="title || $slots.title" class="text-900 font-semibold text-lg m-0 p-0"><slot name="title">{{ title }}</slot></h2>
-                <div v-if="info" class="mt-1 text-sm text-gray-500">{{ info }}</div>
+                <div v-if="info" class="mt-1 text-sm">{{ info }}</div>
             </div>
         </slot>
 
@@ -23,7 +23,7 @@ const props = defineProps({
     },
     look: {
         type: String,
-        default: 'surface-card border-1 surface-border border-round',
+        default: 'border bg-surface-50 dark:bg-surface-900 border-surface rounded',
     },
     padding: {
         type: String,

components/shared/toolbar/UserPreferences.vue app/components/shared/toolbar/UserPreferences.vue

@@ -1,5 +1,5 @@
 <template>
-    <Message v-if="swa.message" :closable="false" :severity="swa.severity" class="m-0 border-1 border-noround">{{ swa.message }}</Message>
+    <Message v-if="swa.message" :closable="false" :severity="swa.severity" class="m-0 border rounded-none">{{ swa.message }}</Message>
 </template>
 
 <script setup>

components/ving/CopyToClipboard.vue app/components/ving/CopyToClipboard.vue

@@ -1,7 +1,7 @@
 <template>
-    <div id="vingthrobber" style="z-index: 10000; position: fixed; top: 0px; width: 100%;">
+    <div id="vingthrobber" class="fixed z-[10000] top-0 w-full">
         <template v-if="throbber.counter > 0">
-            <ProgressBar id="throbberprogressbar" mode="indeterminate" style="height: 5px"></ProgressBar>
+            <ProgressBar id="throbberprogressbar" mode="indeterminate" class="h-0.5"></ProgressBar>
         </template>
     </div>
 </template>

components/ving/Crumbtrail.vue app/components/ving/Crumbtrail.vue

@@ -1,7 +1,7 @@
 <template>
-    <span v-if="user" class="flex-inline align-items-center">
-        <Avatar :image="user.meta?.avatarUrl" alt="user avatar" shape="circle" class="vertical-align-middle" />
-        <span class="ml-2 vertical-align-middle">
+    <span v-if="user" class="flex-inline items-center">
+        <Avatar :image="user.meta?.avatarUrl" alt="user avatar" shape="circle" />
+        <span class="ml-2">
             {{ user.meta?.displayName }}
         </span>
     </span>

app/components/ving/DarkModeSelector.vue

@@ -1,5 +1,5 @@
 <template>
-    <NuxtLink v-if="user" :to="`/user/${user.props.id}/profile`" v-ripple>
+    <NuxtLink v-if="user" :to="`/user/${user.props.id}/profile`">
         <UserAvatar :user="user" />
     </NuxtLink>
     <Message v-else severity="error">You may need to <i>includeRelated:['user']</i> to view this.</Message>

components/ving/Dropzone.vue app/components/ving/Dropzone.vue

@@ -381,21 +381,26 @@ class VingKind {
     }
 
     /**
-     * Turns the list of records into an array compatible with various components such as FormInput, Dropdown and Autocomplete
+     * Turns the list of records into an array compatible with various components such as FormInput, Select, and Autocomplete
      * 
      * @param {'props'|'meta'|'extra'} section One of the describe section names such as `props`, or `meta`, or `extra`.
      * @param {string} field The name of the field within the `section` that will serve as the labelf for this option list.
+     * @param {Function} filter An optional function that will be passed to an array filter to filter out any unwanted records from the current list of records.
      * @returns {object[]} An array of objects with `label` and `value` attributes.
      * @example
      * users.recordsAsOptions('meta','displayName')
      */
-    recordsAsOptions(section, field) {
-        return this.records.map(u => {
-            return {
-                value: u.props?.id,
-                label: u[section][field]
-            }
-        })
+    recordsAsOptions(section, field, filter = () => true) {
+        let out = [];
+        for (const record of this.records) {
+            if (!(filter(record)))
+                continue;
+            out.push({
+                value: record.props?.id,
+                label: record[section][field]
+            });
+        }
+        return out;
     }
 
     /**

components/ving/FieldsetItem.vue app/components/ving/FieldsetItem.vue

@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <Menubar id="topnav" :model="topNav" class="py-0">
+            <template #start>
+                <img :src="config.public.site.logoUrl" :alt="`${config.public.site.name} logo`" :title="config.public.site.name" class="h-10 mr-0 lg:mr-3">
+            </template>
+            <template #item="{ item, props, hasSubmenu, root }">
+                <a v-if="hasSubmenu" :target="item.target" v-bind="props.action"
+                    class="flex items-center px-6 p-3 lg:px-3 lg:py-2 rounded cursor-pointer">
+                    <Icon :name="item.icon" class="mr-2" />
+                    <span class="ml-2">{{ item.label }}</span>
+                    <Icon v-if="hasSubmenu" name="pepicons-pop:angle-down" class="ml-2"/>
+                </a>
+                <NuxtLink v-else :to="item.to"
+                    class="flex items-center px-6 p-3 lg:px-3 lg:py-2 rounded cursor-pointer">
+                    <Icon :name="item.icon" class="mr-2" />
+                    <span>{{ item.label }}</span>
+                </NuxtLink>
+            </template>
+
+            <template #end>
+                <div class="flex items-center gap-2">
+                    <DarkModeSelector/>               
+                    <InputGroup>
+                        <InputGroupAddon>
+                            <Icon name="ion:search"/>
+                        </InputGroupAddon>
+                        <InputText placeholder="Search (non-functional)" type="text" class="w-8rem sm:w-auto" />
+                    </InputGroup>
+                    <SplitButton v-if="currentUser.props?.id" :model="userMenu" text>
+                        <NuxtLink to="/user/settings" class="flex items-center">
+                            <Avatar :image="currentUser.meta?.avatarUrl" alt="user avatar" shape="circle" />
+                            <span class="ml-2">
+                                {{ currentUser.meta?.displayName }}
+                            </span>
+                        </NuxtLink>
+                        <template #item="{ item }">
+                            <NuxtLink :to="item.to" class="flex p-3 items-center">
+                                <Icon :name="item.icon" class="mr-2" />
+                                {{ item.label }}
+                            </NuxtLink>
+                        </template>
+                    </SplitButton>
+                    <NuxtLink v-else to="/user/login" class="flex p-3 items-center text-nowrap">
+                        <Icon name="fa6-solid:door-open" class="mr-2" />
+                        Sign In
+                    </NuxtLink>
+                </div>
+            </template>
+        </Menubar>
+
+        <SystemWideAlert />
+        <div class="px-0 py-1 md:px-4">
+            <div style="min-height: 20rem">
+                <slot />
+            </div>
+        </div>
+    </div>
+        <Notify />
+        <Throbber />
+</template>
+
+<script setup>
+const config = useRuntimeConfig();
+const currentUser = useCurrentUser();
+await currentUser.isAuthenticated();
+onMounted(async () => {
+    // subscribe to message bus
+    useMessageBus();
+})
+const topNav = [
+    { label: 'Home', to: '/', icon: 'prime:home' },
+    { label: 'Games', to: '/game', icon: "prime:star" },
+    { label: 'Ving Documentation', to: 'https://plainblack.github.io/ving/', icon: "prime:book" },
+    {
+        label: 'Sample Dropdown', icon: "prime:thumbs-down", items: [
+            { label: 'Sample 1', to: '#', icon: 'pixelarticons:avatar' },
+            { label: 'Sample 2', to: '#', icon: 'prime:sliders-h' },
+
+        ]
+    },
+]
+
+const userMenu = computed(() => {
+    const out = [
+        { label: 'Settings', to: '/user/settings', icon: 'fa6-solid:sliders' },
+        { label: 'Sign Out', to: '/user/logout', icon: 'fa6-solid:door-closed' },
+    ];
+    if (currentUser.props.admin)
+        out.unshift({ label: 'Admin', to: '/admin', icon: 'prime:user-plus' });
+    return out;
+})
+
+</script>

components/ving/FieldsetNav.vue app/components/ving/FieldsetNav.vue

@@ -1,10 +1,10 @@
 <template>
     <Title>User profile for {{ user.meta?.displayName }}</Title>
-    <div v-if="user.props?.id" class="surface-card p-4 border-1 surface-border border-round flex-auto">
+    <div v-if="user.props?.id" class="surface-card p-4 border border-surface rounded flex-auto">
         <div class="text-900 font-semibold text-lg mt-3">User profile for {{ user.meta?.displayName }}</div>
 
         Created on {{ formatDate(user.props?.createdAt) }}
-        <div class="flex gap-5 flex-column-reverse md:flex-row">
+        <div class="flex gap-5 flex-col-reverse md:flex-row">
             <div class="flex-auto">
                 <div class="mb-4">
 
@@ -16,8 +16,8 @@
                 </div>
 
             </div>
-            <div class="flex flex-column align-items-center flex-or">
-                <Avatar :image="user.meta?.avatarUrl" alt="user avatar" class="h-10rem w-10rem" shape="circle" />
+            <div class="flex flex-col items-center flex-or">
+                <Avatar :image="user.meta?.avatarUrl" alt="user avatar" size="xlarge" shape="circle" />
             </div>
         </div>