@resee-movies/nuxt-ux 0.2.4 → 0.3.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -125,6 +125,7 @@ function importModules(nuxt) {
       "Dialog",
       "Drawer",
       "Message",
+      "Menu",
       "ProgressBar",
       "ProgressSpinner",
       "Tag",

package/dist/runtime/components/Icon.vue

@@ -1,7 +1,17 @@
 <template>
   <Transition name="fade" mode="out-in">
-    <ProgressSpinner v-if="props.loading" :size="props.size" class="icon" />
-    <span v-else role="presentation" :class="['icon', props.name, props.size, { 'color-cycle': props.colorCycle }]" />
+    <ProgressSpinner
+      v-if  = "props.loading"
+      :size = "props.size"
+      class = "icon"
+    />
+
+    <span
+      v-else
+      v-bind = "attrs"
+      role   = "presentation"
+      :class = "['icon', props.name, props.size, { 'color-cycle': props.colorCycle }]"
+    />
   </Transition>
 </template>
 
@@ -10,7 +20,9 @@
 </script>
 
 <script setup>
+import { useAttrs } from "vue";
 import ProgressSpinner from "./ProgressSpinner.vue";
+const attrs = useAttrs();
 const props = defineProps({
   name: { type: String, required: false, default: void 0 },
   loading: { type: Boolean, required: false, default: false },

package/dist/runtime/components/Menu.vue

@@ -0,0 +1,87 @@
+<template>
+  <slot
+    name      = "control"
+    :toggle   = "(event) => menu?.toggle(event)"
+    :menu-id  = "menuId"
+    :expanded = "visible"
+  />
+
+  <PrimeMenu
+    ref    = "menu"
+    v-bind = "attrs"
+    :model = "props.model"
+    :popup = "true"
+    :id    = "menuId"
+    class  = "menu"
+    :pt    = "passthroughProps"
+    @show  = "visible = true"
+    @hide  = "visible = false"
+  >
+    <template v-if="slots.prefix || props.prefixText" #start>
+      <slot name="prefix">
+        {{ props.prefixText }}
+      </slot>
+    </template>
+
+    <template #item="{ item }">
+      <slot name="item">
+        <IconTextPair
+          :text = "isString(item.label) ? item.label : item.label?.()"
+          :icon = "item.icon"
+        />
+      </slot>
+    </template>
+
+    <template v-if="slots.suffix || props.suffixText" #end>
+      <slot name="suffix">
+        {{ props.suffixText }}
+      </slot>
+    </template>
+  </PrimeMenu>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import PrimeMenu, {} from "primevue/menu";
+import { computed, ref, useAttrs, useId, useSlots } from "vue";
+import IconTextPair from "./IconTextPair.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const attrs = useAttrs();
+const slots = useSlots();
+const menuId = useId();
+const menu = ref();
+const visible = ref(false);
+const props = defineProps({
+  model: { type: Array, required: true },
+  prefixText: { type: String, required: false, default: void 0 },
+  suffixText: { type: String, required: false, default: void 0 }
+});
+defineExpose({
+  toggle: (event) => menu.value?.toggle(event),
+  expanded: () => visible.value,
+  menuId
+});
+const passthroughProps = computed(() => {
+  return {
+    start: {
+      class: "menu-prefix"
+    },
+    end: {
+      class: "menu-suffix"
+    },
+    transition: {
+      name: "fade"
+    }
+  };
+});
+</script>
+
+<style>
+@reference "tailwindcss";.menu{background-color:var(--color-global-background);border:1px solid var(--color-global-background-accent);border-radius:var(--radius-md);box-shadow:var(--shadow-heavy);margin-block:--spacing(1);max-width:--spacing(80);padding:--spacing(1)}.menu li[role=separator]{border-bottom:1px solid var(--color-global-background-accent);margin-block:--spacing(1)}.menu li[role=none]{font-weight:var(--font-weight-semibold)}.menu li[role=menuitem],.menu li[role=none]{padding:--spacing(1) --spacing(2);-webkit-user-select:none;-moz-user-select:none;user-select:none}.menu li[role=menuitem]{border-radius:var(--radius-md);cursor:pointer;transition:background-color;transition-duration:var(--default-transition-duration)}.menu li[role=menuitem][data-p-focused=true]{background-color:var(--color-background-scale-c)}.menu li[role=menuitem][aria-disabled=true]{color:var(--color-global-foreground-accent);cursor:not-allowed}.menu li[role=menuitem][aria-disabled=true][data-p-focused=true]{background-color:transparent}.menu .menu-prefix{border-bottom:1px solid var(--color-global-background-accent);margin-bottom:--spacing(1);padding:0 --spacing(2) --spacing(1)}.menu .menu-suffix{border-top:1px solid var(--color-global-background-accent);margin-top:--spacing(1);padding:--spacing(1) --spacing(2) 0}
+</style>

package/dist/runtime/components/Menu.vue.d.ts

@@ -0,0 +1,41 @@
+import type { ComputedGetter } from 'vue';
+export interface MenuProps {
+    model: MenuItem[];
+    prefixText?: string;
+    suffixText?: string;
+}
+export interface MenuItem {
+    label?: string;
+    icon?: string;
+    disabled?: boolean;
+    separator?: boolean;
+    items?: MenuItem[];
+}
+export interface MenuExposes {
+    toggle: (event: Event) => void;
+    menuId: string;
+    expanded: ComputedGetter<boolean>;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MenuProps, MenuExposes, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{}>, {
+    prefixText: string;
+    suffixText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    control?: (props: {
+        toggle: (event: Event) => void | undefined;
+        menuId: string;
+        expanded: boolean;
+    }) => any;
+} & {
+    prefix?: (props: {}) => any;
+} & {
+    item?: (props: {}) => any;
+} & {
+    suffix?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"