@resee-movies/nuxt-ux 0.13.1 → 0.15.0

package/dist/module.json

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

package/dist/runtime/components/Card.vue

@@ -1,14 +1,19 @@
 <template>
-  <Component :is="props.is" :class="['card', props.interactive ? 'interactive' : void 0]">
-    <slot>
-      <div v-if="slots.image" class="image">
-        <slot name="image" />
-      </div>
-
-      <div v-if="slots.content" class="content">
-        <slot name="content" />
-      </div>
-    </slot>
+  <Component
+    :is    = "props.is"
+    :class = "[
+  'card',
+  {
+    loading: props.loading,
+    interactive: props.interactive,
+    colorful: props.colorful,
+    bordered: props.bordered,
+    beveled: props.beveled,
+    raised: props.raised
+  }
+]"
+  >
+    <slot />
   </Component>
 </template>
 
@@ -17,14 +22,17 @@
 </script>
 
 <script setup>
-import { useSlots } from "#imports";
 const props = defineProps({
-  is: { type: String, required: false, default: "div" },
-  interactive: { type: Boolean, required: false, default: false }
+  is: { type: null, required: false, default: "div" },
+  loading: { type: Boolean, required: false, default: false },
+  interactive: { type: Boolean, required: false, default: false },
+  colorful: { type: Boolean, required: false, default: false },
+  bordered: { type: Boolean, required: false, default: false },
+  beveled: { type: Boolean, required: false, default: false },
+  raised: { type: Boolean, required: false, default: false }
 });
-const slots = useSlots();
 </script>
 
 <style scoped>
-@reference "tailwindcss";@layer components{.card{border:2px solid var(--color-background-scale-c);border-bottom-left-radius:--spacing(2);border-top-right-radius:--spacing(2);overflow:clip}.card .content{padding:--spacing(1.5)}.card.interactive{transition-duration:.5s;transition-property:border-color,border-radius,box-shadow;transition-timing-function:var(--default-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none}.card.interactive:focus-within,.card.interactive:hover{border-color:var(--color-background-scale-f);border-radius:0;box-shadow:var(--shadow-heavy)}}
+@reference "tailwindcss";@layer components{@property --resee-card-border-coverage{syntax:"<percentage>";inherits:false;initial-value:0%}@property --resee-card-bg-color{syntax:"<color>";inherits:false;initial-value:transparent}@keyframes resee-card-bg-color-pulse{0%{background-color:var(--resee-card-bg-load-color-1)}50%{background-color:var(--resee-card-bg-load-color-2)}to{background-color:var(--resee-card-bg-load-color-1)}}.card{--resee-card-bg-color:var(--color-global-background);--resee-card-bg-load-color-1:#fff;--resee-card-bg-load-color-2:#f0f0f0;--resee-card-border-color:var(--color-global-background-accent);--resee-card-border-highlight:var(--color-global-foreground-accent) 0% 100%;--resee-card-border-angle:225deg;--resee-card-border-coverage:100%;--resee-card-border-weight:2px;@variant dark{--resee-card-bg-load-color-1:#000;--resee-card-bg-load-color-2:#0f0f0f}}.card.loading{animation-duration:2.5s;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:resee-card-bg-color-pulse;animation-timing-function:ease-out}.card.beveled{border-bottom-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl);overflow:clip}.card.raised{box-shadow:var(--shadow-heavy)}.card.bordered.loading,.card.bordered:not(.interactive){background-color:var(--resee-card-bg-color);border:solid var(--resee-card-border-weight) var(--resee-card-border-color)}.card.bordered.interactive:not(.loading){--resee-card-bg-gradient:linear-gradient(var(--resee-card-bg-color),var(--resee-card-bg-color));--resee-card-border-gradient:linear-gradient(225deg,var(--resee-card-border-color) 0 var(--resee-card-border-coverage),var(--resee-card-border-highlight));background-clip:padding-box,border-box;background-image:var(--resee-card-bg-gradient),var(--resee-card-border-gradient);background-origin:border-box;border:var(--resee-card-border-weight) solid transparent}.card.bordered.interactive:not(.loading).colorful{--resee-card-border-highlight:var(--colorscale-resee-linear);@variant dark{--resee-card-border-highlight:var(--colorscale-resee-lite-linear)}}.card.interactive:not(.loading){transition-duration:calc(var(--default-transition-duration)*3);transition-property:border-radius,box-shadow,--resee-card-border-coverage;transition-timing-function:var(--default-transition-timing-function);-webkit-user-select:none;-moz-user-select:none;user-select:none}.card.interactive:not(.loading):focus-within.bordered,.card.interactive:not(.loading):hover.bordered{--resee-card-border-coverage:0%}.card.interactive:not(.loading):focus-within.beveled,.card.interactive:not(.loading):hover.beveled{border-radius:0}.card.interactive:not(.loading):focus-within,.card.interactive:not(.loading):hover{box-shadow:var(--shadow-heavy)}}
 </style>

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

@@ -1,13 +1,16 @@
+import type { Component } from 'vue';
+import type { HintedString } from '../types/index.js';
 export interface CardProps {
-    is?: string;
+    is?: HintedString<'div'> | Component;
+    loading?: boolean;
     interactive?: boolean;
+    colorful?: boolean;
+    bordered?: boolean;
+    beveled?: boolean;
+    raised?: boolean;
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
-} & {
-    image?: (props: {}) => any;
-} & {
-    content?: (props: {}) => any;
 }>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/CardScroller.vue

@@ -0,0 +1,189 @@
+<template>
+  <div :class="['scroller', { 'to-edge': props.toPageContainerEdge }]">
+    <div ref="ruler" :class="props.rulerClasses" />
+
+    <div
+      ref    = "scrollBox"
+      class  = "scroll-box styled-scroll transition-opacity duration-300"
+      :class = "[
+  props.scrollBoxClasses,
+  {
+    'opacity-0': !displayBounds.s0,
+    'justify-start': displayBounds.s1 || !props.centerAlign,
+    'justify-center': !displayBounds.s1 || props.centerAlign
+  }
+]"
+    >
+      <div
+        v-if   = "slots.firstItem"
+        ref    = "firstItem"
+        :class = "[props.itemClasses, props.itemSizeClasses]"
+      >
+        <slot name="firstItem" />
+      </div>
+
+      <div
+        v-for  = "(item, index) in props.items"
+        ref    = "scrollItems"
+        :key   = "identify(item, index)"
+        :class = "[props.itemClasses, props.itemSizeClasses]"
+      >
+        <slot name="item" :item="item" :index="index" />
+      </div>
+
+      <div
+        v-if   = "props.loading"
+        :class = "[props.itemClasses, props.itemSizeClasses]"
+      >
+        <slot name="loading" />
+      </div>
+
+      <div
+        v-if   = "slots.finalItem"
+        ref    = "finalItem"
+        :class = "[props.itemClasses, props.itemSizeClasses]"
+      >
+        <slot name="finalItem" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isObjectLike } from "@resee-movies/utilities/objects/is-object-like";
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import { defaultWindow, useElementBounding, useDebounceFn, useScroll, watchDebounced } from "@vueuse/core";
+import { computed, ref, watch } from "vue";
+</script>
+
+<script setup>
+const props = defineProps({
+  items: { type: null, required: true },
+  rulerClasses: { type: null, required: false, default: void 0 },
+  scrollBoxClasses: { type: null, required: false, default: void 0 },
+  itemClasses: { type: null, required: false, default: void 0 },
+  itemSizeClasses: { type: null, required: false, default: "w-32 md:w-36 lg:w-42" },
+  loading: { type: Boolean, required: false, default: false },
+  centerAlign: { type: Boolean, required: false, default: false },
+  toPageContainerEdge: { type: Boolean, required: false, default: true },
+  styleWhenTransiting: { type: String, required: false, default: "right" }
+});
+const slots = defineSlots();
+const ruler = ref();
+const scrollBox = ref();
+const scrollItems = ref([]);
+const firstItem = ref();
+const finalItem = ref();
+const rulerBounds = useElementBounding(ruler);
+const scrollItemElements = computed(() => {
+  const result = [];
+  if (firstItem.value) {
+    result.push(firstItem.value);
+  }
+  result.push(...scrollItems.value);
+  if (finalItem.value) {
+    result.push(finalItem.value);
+  }
+  return result;
+});
+const displayBounds = computed(() => {
+  const rulerEl = ruler.value;
+  if (!rulerEl) {
+    return { s0: false, s1: false, x1: 0, x2: 0, x3: 0, x4: 0, x1_2: "0px", x3_4: "0px" };
+  }
+  const rulerStyles = defaultWindow?.getComputedStyle(rulerEl);
+  const rulerLeft = rulerBounds.left.value;
+  const rulerWidth = rulerBounds.width.value;
+  const rulerPadLeft = parseFloat(rulerStyles?.paddingLeft || "0");
+  const rulerPadRight = parseFloat(rulerStyles?.paddingRight || "0");
+  const scrollBoxWidth = scrollBox.value?.scrollWidth ?? 0;
+  const bounds = {
+    s0: true,
+    // Has layout occurred
+    s1: rulerWidth < scrollBoxWidth,
+    // Is the scroll box overflowing
+    x1: rulerLeft,
+    x2: rulerLeft + rulerPadLeft,
+    x3: rulerLeft + rulerPadLeft + rulerWidth,
+    x4: rulerLeft + rulerPadLeft + rulerWidth + rulerPadRight
+  };
+  bounds.x1_2 = `${bounds.x2 - bounds.x1}px`;
+  bounds.x3_4 = `${bounds.x4 - bounds.x3}px`;
+  return bounds;
+});
+watchDebounced([displayBounds], () => {
+  scrollBox.value?.scrollTo({ left: 0, behavior: "instant" });
+}, { debounce: 500 });
+const scrollState = useScroll(scrollBox);
+watch([scrollState.x, displayBounds], () => {
+  queueStyleChanges();
+  debouncedQueueStyleChanges();
+}, { flush: "sync" });
+const debouncedQueueStyleChanges = useDebounceFn(() => queueStyleChanges(), 100);
+let queuedFrame = void 0;
+function queueStyleChanges() {
+  if (queuedFrame) {
+    cancelAnimationFrame(queuedFrame);
+    queuedFrame = void 0;
+  }
+  queuedFrame = requestAnimationFrame(() => {
+    applyStyleChanges();
+    queuedFrame = void 0;
+  });
+}
+function applyStyleChanges() {
+  const styleLeft = props.styleWhenTransiting === "left" || props.styleWhenTransiting === "both";
+  const styleRight = props.styleWhenTransiting === "right" || props.styleWhenTransiting === "both";
+  for (const element of scrollItemElements.value) {
+    const [percentage, direction] = percentInBounds(element, displayBounds.value);
+    if (direction === "none") {
+      element.style.opacity = "1";
+      element.style.scale = "1";
+    } else if (direction === "left" && styleLeft || direction === "right" && styleRight) {
+      element.style.opacity = percentage.toString();
+      if (element.firstElementChild instanceof HTMLElement) {
+        element.firstElementChild.style.transformOrigin = `center ${direction === "left" ? "right" : "left"}`;
+        element.firstElementChild.style.scale = (1 - 0.2 * (1 - percentage)).toString();
+      }
+    }
+  }
+}
+function percentInBounds(element, { x1, x2, x3, x4 }) {
+  const {
+    left: elementStart,
+    width: elementWidth
+  } = element.getBoundingClientRect();
+  const elementEnd = elementStart + elementWidth;
+  if (elementEnd <= x1) {
+    return [0, "left"];
+  }
+  if (elementStart >= x4) {
+    return [0, "right"];
+  }
+  if (elementStart >= x2 && elementEnd <= x3) {
+    return [1, "none"];
+  }
+  if (elementStart < x2) {
+    return [easeInSine((elementEnd - x1) / (x2 - x1 + elementWidth)), "left"];
+  }
+  const stopA = x3 - elementWidth;
+  const stopB = x4 - stopA;
+  return [easeInSine(1 - (elementStart - stopA) / stopB), "right"];
+}
+function easeInSine(t) {
+  return roundHundredth(-1 * Math.cos(t * (Math.PI / 2)) + 1);
+}
+function roundHundredth(value) {
+  return Math.round(value * 100) / 100;
+}
+function identify(item, fallback) {
+  if (isObjectLike(item) && "id" in item && isString(item.id)) {
+    return item.id;
+  }
+  return fallback;
+}
+</script>
+
+<style scoped>
+@reference "tailwindcss";.scroller .scroll-box{display:flex;gap:--spacing(3);overflow-x:scroll;padding-block-end:var(--page-column-gutter);scroll-padding-left:v-bind("displayBounds.x1_2");scroll-padding-right:v-bind("displayBounds.x3_4");scroll-snap-type:inline;touch-action:pan-x pan-y;width:100%;@variant sm{gap:--spacing(4)}}.scroller .scroll-box>:deep(*){flex-shrink:0;scroll-snap-align:start}.scroller .scroll-box>:deep(:first-child){margin-left:v-bind("displayBounds.x1_2")}.scroller .scroll-box>:deep(:last-child){margin-right:v-bind("displayBounds.x3_4");scroll-snap-align:end}.scroller.to-edge{margin-inline:calc(var(--page-column-gutter)*-1)}.scroller.to-edge>:first-child{padding-inline:var(--page-column-gutter)}.scroller.to-edge{@variant sm{margin-inline:calc(var(--page-container-pad-x)*-1);&>:first-child{padding-inline:var(--page-container-pad-x)}}}
+</style>

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

@@ -0,0 +1,36 @@
+import type { HTMLElementClassNames } from '../types/index.js';
+export type CardScrollerProps<T> = {
+    items: T[] | null | undefined;
+    rulerClasses?: HTMLElementClassNames;
+    scrollBoxClasses?: HTMLElementClassNames;
+    itemClasses?: HTMLElementClassNames;
+    itemSizeClasses?: HTMLElementClassNames;
+    loading?: boolean;
+    centerAlign?: boolean;
+    toPageContainerEdge?: boolean;
+    styleWhenTransiting?: 'left' | 'right' | 'both';
+};
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<CardScrollerProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        item: (slotProps: {
+            item: T;
+            index: number;
+        }) => unknown;
+        firstItem: () => unknown;
+        finalItem: () => unknown;
+        loading: () => unknown;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/GlobalHeader.vue

@@ -0,0 +1,107 @@
+<template>
+  <div ref="rulerElement" :class="{ placeholder: isHeaderAffixed }" />
+
+  <header
+    ref    = "headerElement"
+    v-bind = "$attrs"
+    :class = "{
+  'header-affixed': isHeaderAffixed,
+  'header-transit': doTransitions,
+  'header-hidden': hideDrawerContent
+}"
+  >
+    <div
+      ref    = "drawerElement"
+      :class = "slots.subheader ? 'border-b border-b-global-background-accent' : void 0"
+    >
+      <LayoutPageColumn>
+        <slot name="default" />
+      </LayoutPageColumn>
+    </div>
+
+    <div v-if="slots.subheader" ref="subheadElement">
+      <LayoutPageColumn>
+        <slot name="subheader" />
+      </LayoutPageColumn>
+    </div>
+  </header>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { ref, useSlots, watch } from "vue";
+import { useElementSize, useWindowScroll } from "@vueuse/core";
+import { useGlobalHeaderState } from "../composables/use-global-header-state";
+import { useTwoFrameRefToggle } from "../composables/use-two-frame-ref-toggle";
+import LayoutPageColumn from "./LayoutPageColumn.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  drawer: { type: Boolean, required: false, default: true }
+});
+const slots = useSlots();
+const rulerElement = ref();
+const headerElement = ref();
+const drawerElement = ref();
+const subheadElement = ref();
+const { height: headerHeight } = useElementSize(headerElement);
+const { height: drawerHeight } = useElementSize(drawerElement);
+const { height: subheadHeight } = useElementSize(subheadElement);
+const { y: windowScrollY } = useWindowScroll();
+const [isHeaderAffixed, doTransitions, updateAffixState] = useTwoFrameRefToggle();
+const hideDrawerContent = ref(false);
+let backscrollCounter = 0;
+function disableAffix() {
+  updateAffixState(false);
+  hideDrawerContent.value = false;
+  backscrollCounter = 0;
+}
+function enableAffix() {
+  updateAffixState(true);
+  hideDrawerContent.value = true;
+}
+const { pause, resume } = watch(windowScrollY, (newScrollY, oldScrollY) => {
+  const scrollCeiling = rulerElement.value?.offsetTop ?? 0;
+  const rawDrawerHeight = drawerHeight.value;
+  if (newScrollY <= scrollCeiling || newScrollY <= scrollCeiling + rawDrawerHeight && hideDrawerContent.value) {
+    return disableAffix();
+  }
+  if (!isHeaderAffixed.value && newScrollY > scrollCeiling + rawDrawerHeight) {
+    return enableAffix();
+  }
+  const scrollDelta = newScrollY - oldScrollY;
+  const isScrollDown = scrollDelta > 0;
+  const negDrawerHeight = rawDrawerHeight * -1;
+  backscrollCounter = isScrollDown ? Math.min(rawDrawerHeight, backscrollCounter + scrollDelta) : Math.max(negDrawerHeight, backscrollCounter + scrollDelta);
+  if (backscrollCounter === rawDrawerHeight) {
+    hideDrawerContent.value = true;
+  } else if (backscrollCounter === negDrawerHeight) {
+    hideDrawerContent.value = false;
+  }
+});
+const headerState = useGlobalHeaderState();
+watch(
+  [() => props.drawer, headerHeight, subheadHeight, hideDrawerContent, isHeaderAffixed],
+  () => {
+    if (props.drawer) {
+      resume();
+    } else {
+      pause();
+      disableAffix();
+    }
+    headerState.isHeaderDrawerEnabled.value = props.drawer;
+    headerState.headerHeight.value = headerHeight.value;
+    headerState.subheaderHeight.value = subheadHeight.value;
+    headerState.isHeaderPulledDown.value = isHeaderAffixed.value && !hideDrawerContent.value;
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+.placeholder{height:calc(v-bind(headerHeight)*1px)}.header-affixed{box-shadow:var(--shadow-heavy);left:0;position:fixed;right:0;top:0;transform:translateY(0);z-index:100}.header-affixed.header-transit{transition-duration:calc(var(--default-transition-duration)*2);transition-property:transform,box-shadow;transition-timing-function:var(--default-transition-timing-function)}.header-affixed.header-hidden{box-shadow:none;transform:translateY(calc(v-bind(drawerHeight)*-1px))}
+</style>

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

@@ -0,0 +1,15 @@
+export interface GlobalHeaderProps {
+    drawer?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<GlobalHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GlobalHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    subheader?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/GlobalHeaderAnnouncement.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    v-if      = "!isDismissed"
+    :class    = "['announcement', { dismissable: props.dismissable }]"
+    role      = "alert"
+    aria-live = "polite"
+  >
+    <LayoutPageColumn :class="{ 'relative': props.dismissable }">
+      <slot />
+
+      <CloseButton
+        v-if   = "props.dismissable"
+        class  = "absolute right-3 top-1/2 -translate-y-1/2"
+        size   = "sm"
+        @click = "dismissAnnouncement()"
+      />
+    </LayoutPageColumn>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { computed, ref } from "vue";
+import CloseButton from "./CloseButton.vue";
+import LayoutPageColumn from "./LayoutPageColumn.vue";
+import { useReseeUx } from "../composables/use-resee-ux";
+const props = defineProps({
+  announcementId: { type: String, required: false, default: void 0 },
+  dismissable: { type: Boolean, required: false, default: true }
+});
+const { preferences } = useReseeUx();
+const isLocallyDismissed = ref(false);
+const isDismissed = computed(() => {
+  return isLocallyDismissed.value || props.announcementId && preferences.value.dismissNotification === props.announcementId;
+});
+function dismissAnnouncement() {
+  if (props.announcementId) {
+    preferences.value.dismissNotification = props.announcementId;
+  }
+  isLocallyDismissed.value = true;
+}
+</script>
+
+<style scoped>
+@reference "tailwindcss";.announcement{--announcement-bg-color:#fff;@variant dark{--announcement-bg-color:#000}background-image:linear-gradient(to bottom,var(--announcement-bg-color) 0 calc(100% - 10px),transparent),linear-gradient(to right,var(--colorscale-resee-linear));padding-bottom:6px}.announcement.dismissable>div{padding-right:12rem}
+</style>

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

@@ -0,0 +1,14 @@
+export interface GlobalHeaderAnnouncementProps {
+    announcementId?: string;
+    dismissable?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<GlobalHeaderAnnouncementProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<GlobalHeaderAnnouncementProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};