srcdev-nuxt-components 6.1.29 → 6.1.31

package/app/components/carousel-basic/CarouselBasic.vue

@@ -65,6 +65,28 @@
   </section>
 </template>
 
+<script lang="ts">
+export interface CarouselBasicItem {
+  id: number | string
+  url: string
+  alt: string
+}
+
+export interface CarouselModifiedItem {
+  id: number | string
+  url: string
+  alt: string
+  order: number
+}
+
+export interface ICarouselBasic {
+  items: CarouselBasicItem[] | CarouselModifiedItem[]
+  total: number
+  skip: number
+  limit: number
+}
+</script>
+
 <script setup lang="ts">
 import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core"
 

package/app/components/deep-expanding-menu/DeepExpandingMenu.vue

@@ -24,17 +24,8 @@
   </component>
 </template>
 
-<script lang="ts">
-interface ResponsiveHeaderNavItem {
-  name: string
-  path?: string
-  isExternal?: boolean
-  childLinks?: ResponsiveHeaderNavItem[]
-  childLinksTitle?: string
-}
-</script>
-
 <script setup lang="ts">
+import type { ResponsiveHeaderNavItem } from "../../types"
 const props = defineProps({
   tag: {
     type: String,

package/app/components/display-avatar/DisplayAvatar.vue

@@ -0,0 +1,123 @@
+<template>
+  <component
+    :is="props.chip ? DisplayChip : as"
+    tag="div"
+    v-bind="props.chip ? (typeof props.chip === 'object' ? { config: props.chip } : { config: chipDefaultConfig }) : {}"
+    class="display-avatar"
+    :class="[size, elementClasses]"
+    :style-class-passthrough="elementClasses"
+  >
+    <slot name="default">
+      <NuxtImg v-if="src" :src :alt="alt || 'Avatar'" width="100%" height="100%" class="avatar-image" />
+      <span v-else>{{ fallback }}</span>
+    </slot>
+    <slot name="icon"></slot>
+  </component>
+</template>
+
+<script lang="ts">
+import DisplayChip from "../display-chip/DisplayChip.vue"
+import type { DisplayChipProps, DisplayChipConfig } from "../../types"
+export interface AvatarProps {
+  as?: any
+  src?: string
+  alt?: string
+  text?: string
+  size?: "xs" | "s" | "md" | "lg" | "xl" | string
+  chip?: boolean | DisplayChipProps
+  class?: any
+  style?: any
+  styleClassPassthrough?: string | string[]
+}
+
+export interface AvatarSlots {
+  default(props?: {}): any
+  icon(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<AvatarProps>(), {
+  as: "span",
+  size: "md",
+  styleClassPassthrough: () => [],
+})
+defineSlots<AvatarSlots>()
+
+const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(
+  props.styleClassPassthrough
+)
+
+if (props.chip && typeof props.chip === "object" && !("styleClassPassthrough" in props.chip)) {
+  updateElementClasses(["display-avatar", props.size])
+}
+
+const fallback = computed(
+  () =>
+    props.text ||
+    (props.alt || "")
+      .split(" ")
+      .map((word) => word.charAt(0))
+      .join("")
+      .substring(0, 2)
+)
+
+const chipDefaultConfig = {
+  size: "12px",
+  maskWidth: "4px",
+  offset: "0px",
+  angle: "90deg",
+}
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough)
+  }
+)
+</script>
+
+<style lang="css">
+.display-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: var(--gray-3);
+  border: 1px solid light-dark(var(--gray-7), var(--gray-3));
+
+  isolation: isolate;
+
+  &.xs {
+    width: 24px;
+    height: 24px;
+    font-size: 0.75rem;
+  }
+  &.s {
+    width: 32px;
+    height: 32px;
+    font-size: 0.875rem;
+  }
+  &.md {
+    width: 40px;
+    height: 40px;
+    font-size: 1rem;
+  }
+  &.lg {
+    width: 48px;
+    height: 48px;
+    font-size: 1.125rem;
+  }
+  &.xl {
+    width: 56px;
+    height: 56px;
+    font-size: 1.25rem;
+  }
+
+  .avatar-image {
+    width: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
+</style>

package/app/components/display-chip/DisplayChip.vue

@@ -4,56 +4,64 @@
   </component>
 </template>
 
-<script setup lang="ts">
-const props = defineProps({
-  tag: {
-    type: String,
-    default: "span",
-    validator(value: string) {
-      return ["div", "span"].includes(value)
-    },
-  },
-  shape: {
-    type: String as PropType<"circle" | "square">,
-    default: "circle",
-    validator(value: string) {
-      return ["circle", "square"].includes(value)
-    },
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const chipConfig = defineModel<{
+<script lang="ts">
+export interface DisplayChipConfig {
   size: string
   maskWidth: string
   offset: string
   angle: string
-}>({
-  type: Object as PropType<{
-    size: string
-    maskWidth: string
-    offset: string
-    angle: string
-  }>,
-  default: () => ({
+}
+
+export interface DisplayChipProps {
+  tag?: "div" | "span"
+  shape?: "circle" | "square"
+  config?: DisplayChipConfig
+  styleClassPassthrough?: string | string[]
+}
+
+export interface ChipSlots {
+  default(props?: {}): any
+  content(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<DisplayChipProps>(), {
+  tag: "div",
+  shape: "circle",
+  config: () => ({
     size: "12px",
     maskWidth: "4px",
     offset: "0px",
     angle: "90deg",
   }),
-  required: false,
+  styleClassPassthrough: () => [],
 })
+defineSlots<ChipSlots>()
+
+// const chipConfig = defineModel<DisplayChipConfig>({
+//   type: Object as PropType<{
+//     size: string
+//     maskWidth: string
+//     offset: string
+//     angle: string
+//   }>,
+//   default: () => ({
+//     size: "12px",
+//     maskWidth: "4px",
+//     offset: "0px",
+//     angle: "90deg",
+//   }),
+//   required: false,
+// })
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 const chipStyles = computed(() => ({
-  "--chip-size": chipConfig.value.size,
-  "--chip-mask-width": chipConfig.value.maskWidth,
-  "--chip-offset": chipConfig.value.offset,
-  "--chip-angle": chipConfig.value.angle,
+  "--chip-size": props.config?.size,
+  "--chip-mask-width": props.config?.maskWidth,
+  "--chip-offset": props.config?.offset,
+  "--chip-angle": props.config?.angle,
 }))
 </script>
 

package/app/components/image-galleries/SliderGallery.vue

@@ -53,9 +53,23 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { type IGalleryData } from "@/types/gallery-data"
+<script lang="ts">
+export interface IGalleryData {
+  src: string
+  alt: string
+  stylist?: string
+  title?: string
+  category?: string
+  description?: string
+  thumbnail?: {
+    title: string
+    description: string
+  }
+  textBrightness: "light" | "dark"
+}
+</script>
 
+<script setup lang="ts">
 const props = defineProps({
   autoRun: {
     type: Boolean,

package/app/components/responsive-header/ResponsiveHeader.vue

@@ -116,9 +116,46 @@
   </div>
 </template>
 
+<script lang="ts">
+export interface ResponsiveHeaderNavItem {
+  name: string
+  path?: string
+  isExternal?: boolean
+  childLinks?: ResponsiveHeaderNavItem[]
+  childLinksTitle?: string
+  iconName?: string
+  config?: ResponsiveHeaderItemRects
+}
+
+export interface ResponsiveHeaderProp {
+  [key: string]: ResponsiveHeaderNavItem[]
+}
+
+export interface IFlooredRect {
+  left: number
+  right: number
+  top: number
+  bottom: number
+  width: number
+  height: number
+}
+
+export interface ResponsiveHeaderItemRects {
+  left: number
+  right: number
+  width?: number
+  visible: boolean
+}
+
+export interface ResponsiveHeaderState {
+  hasSecondNav: boolean
+  navListVisibility: Record<string, boolean>
+  clonedNavLinks?: ResponsiveHeaderProp
+}
+</script>
+
 <script setup lang="ts">
 import { useResizeObserver, onClickOutside } from "@vueuse/core"
-import type { ResponsiveHeaderProp, ResponsiveHeaderState, IFlooredRect } from "@/types/responsiveHeader"
 
 const props = defineProps({
   responsiveNavLinks: {

package/app/types/index.ts

@@ -0,0 +1,4 @@
+export * from "../components/responsive-header/ResponsiveHeader.vue"
+export * from "../components/display-chip/DisplayChip.vue"
+export * from "../components/carousel-basic/CarouselBasic.vue"
+export * from "../components/image-galleries/SliderGallery.vue"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.29",
+  "version": "6.1.31",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",

package/app/types/display-toast.d.ts

@@ -1,6 +0,0 @@
-export interface IToastConfig {
-  showToast: boolean
-  variant: string
-  duration: number
-  toastDisplayText: string
-}

package/app/types/gallery-data.ts

@@ -1,13 +0,0 @@
-export interface IGalleryData {
-  src: string;
-  alt: string;
-  stylist?: string;
-  title?: string;
-  category?: string;
-  description?: string;
-  thumbnail?: {
-    title: string;
-    description: string;
-  };
-  textBrightness: 'light' | 'dark';
-}

package/app/types/responsiveHeader.ts

@@ -1,38 +0,0 @@
-export interface ResponsiveHeaderNavItem {
-  name: string;
-  path?: string;
-  iconName?: string;
-  imageSrc?: string;
-  imageAlt?: string;
-  description?: string;
-  isActive?: boolean;
-  isExternal?: boolean;
-  childLinksTitle?: string;
-  childLinks?: ResponsiveHeaderNavItem[];
-  config?: ResponsiveHeaderItemRects;
-}
-
-export interface ResponsiveHeaderProp {
-  [key: string]: ResponsiveHeaderNavItem[];
-}
-
-export interface IFlooredRect {
-  left: number;
-  right: number;
-  top: number;
-  bottom: number;
-  width: number;
-  height: number;
-}
-
-export interface ResponsiveHeaderItemRects {
-  left: number;
-  right: number;
-  width?: number;
-  visible: boolean;
-}
-
-export interface ResponsiveHeaderState {
-  navListVisibility: Record<string, boolean>;
-  clonedNavLinks?: ResponsiveHeaderProp;
-}

package/app/types/types.carousel-basic.ts

@@ -1,19 +0,0 @@
-export interface CarouselBasicItem {
-  id: number | string;
-  url: string;
-  alt: string;
-}
-
-export interface CarouselModifiedItem {
-  id: number | string;
-  url: string;
-  alt: string;
-  order: number;
-}
-
-export interface ICarouselBasic {
-  items: CarouselBasicItem[] | CarouselModifiedItem[];
-  total: number;
-  skip: number;
-  limit: number;
-}